diff --git a/.github/PULL_REQUEST_TEMPLATE/Bug.md b/.github/PULL_REQUEST_TEMPLATE/Bug.md
deleted file mode 100644
index 2d4633745..000000000
--- a/.github/PULL_REQUEST_TEMPLATE/Bug.md
+++ /dev/null
@@ -1,74 +0,0 @@
-### Bug description
-Clearly and concisely describe the problem (this cannot be empty).
-
-### Root cause
-Briefly describe the root cause and analysis of the problem.
-If there is an internal discussion on the forum, provide the link.
-
-### Solution description
-Describe the changes made in the code in detail for the reviewers.
-
-### Reason for not identifying earlier
- * [ ] Guidelines not followed. If yes, provide which guideline is not followed.
-
- * [ ] Guidelines not given. If yes, provide which/who need to address.
- Tag label `update-guideline-coreteam` or `update-guideline-productteam`.
-
- * [ ] If any other reason, provide the details here.
-
-### Areas tested against this fix
-Provide details about the areas or combinations that have been tested against this code changes.
-* [ ] Tested against feature matrix. [Feature matrix link](https://syncfusion.sharepoint.com/sites/EJ2ProductOwners/Shared%20Documents/Forms/AllItems.aspx?viewid=ae81c682%2D3d0f%2D462a%2Db8ec%2D7358748d489d&id=%2Fsites%2FEJ2ProductOwners%2FShared%20Documents%2FGeneral%2FFeature%20Matrix%20%2D%20Documents)
-* [ ] NA
-
-### Is it a breaking issue?
-* [ ] Yes, Tag `breaking-issue`.
-* [ ] NO
-
- If yes, provide the breaking commit details / MR here.
-
-### Action taken
-What action did you take to avoid this in future?
-
- Feature matrix document updated
-* [ ] Yes
-* [ ] NO
-* [ ] NA
-
-Automation details - Mark `Is Automated` field as (Yes, Manual, Not Applicable) in corresponding JIRA task once the bug is automated.
-* [ ] BUnit, share corresponding MR.
-* [ ] E2E or Manual Automation using tester - Make sure all items are automated with priority before release which can be tracked in [automation dashboard](https://syncfusion.atlassian.net/secure/Dashboard.jspa?selectPageId=43396).
-
-If the same issue is reproduced in ej2, what will you do?
-* [ ] Resolved. Provide MR link.
-* [ ] NO. Created task to track it. Share task link.
-* [ ] NA
-
- Is this common issue need to be addressed in the same component or on other components in our platform?
-* [ ] Yes - Need to check in other components, tag `needs-attention-coreteam`
-* [ ] No
-
-### Output screenshots
-Post the output screenshots if an UI is affected or added due to this bug.
-
-### Blazor Checklist
-Confirm whether this feature is ensured in both Blazor Server and WASM
-* [ ] NA
-* [ ] Yes
-* [ ] NO
-
-Is there any new API or existing API name change?
-* [ ] Yes. If yes, Provide API Review task link.
-* [ ] NO
-
-Is there any existing behavior change due to this code change?
-* [ ] Yes. Add `breaking-change` label.
-* [ ] NO
-
-
-Do the code changes cause any memory leak and performance issue? (Test only if you suspect that your code may cause problem)
-* [ ] Yes
-* [ ] NO
-
-## Reviewer Checklist
-* [ ] All provided information are reviewed and ensured.
\ No newline at end of file
diff --git a/.github/PULL_REQUEST_TEMPLATE/Feature.md b/.github/PULL_REQUEST_TEMPLATE/Feature.md
deleted file mode 100644
index 97152e8bb..000000000
--- a/.github/PULL_REQUEST_TEMPLATE/Feature.md
+++ /dev/null
@@ -1,80 +0,0 @@
-### Feature description
-Clearly and concisely describe the feature.
-
-### Requirement and specification document.
-Share the JIRA task which is attached with the requirement and specification document or directly share the document.
-- Even for a small feature, draft a requirement and specification document and attach it in the task.
-
-### API Review task
-Provide task link.
-
-### Output screenshots
-Post the output screenshots if an UI is affected or added due to this feature.
-
-### Feature matrix document
-
-Feature matrix document updated against this feature and committed in this [common location] (https://syncfusion.sharepoint.com/sites/EJ2ProductOwners/Shared%20Documents/Forms/AllItems.aspx?viewid=ae81c682%2D3d0f%2D462a%2Db8ec%2D7358748d489d&id=%2Fsites%2FEJ2ProductOwners%2FShared%20Documents%2FGeneral%2FFeature%20Matrix%20%2D%20Documents) .
-* [ ] Yes
-* [ ] NO
-* [ ] NA
-
-Provide the details about the areas or combinations which have been tested against this code changes.
-* [ ] Tested against feature matrix.
-
-### Feature acceptance criteria (Test-case document)
-Draft the test cases in excel and attach it in the MR itself. The automation must be covered based on this positive and worst-case test-cases.
-
-### Automation details
-Mark 'Is Automated' field as (Yes, Manual, Not Applicable) in corresponding JIRA task once the feature is automated.
-* [ ] BUnit, share corresponding MR.
-* [ ] E2E or Manual Automation using tester - Make sure all items are automated with priority before release which can be tracked in [automation dashboard](https://syncfusion.atlassian.net/secure/Dashboard.jspa?selectPageId=43396).
-
-### Test bed sample location
-Provide the test bed sample location where the code reviewers can review the new feature’s behaviors.
-
-### Feature completion checklist
-
-UX changes got approval if UI is added or modified?
-* [ ] Yes. Provide Task link.
-* [ ] NO
-* [ ] NA
-
-Drafted UG for this feature?
-* [ ] Yes, provide MR link.
-* [ ] NO, provide task link.
-* [ ] NA
-
- Content team reviewed the UI content changes.
-* [ ] Yes. Provide MR or Task link.
-* [ ] NO
-* [ ] NA
-
- Is this the common feature which needs to be addressed in the same component or on other components in our platform?
-* [ ] Yes. If we need to check in other components, tag "needs-attention-coreteam"
-* [ ] NO
-
-Is there any existing behavior change due to this code change?
-* [ ] Yes. If So, add `breaking-change` label.
-* [ ] NO
-
-### Blazor Checklist
-Confirm whether the ensured feature is in both Blazor Server and WASM.
-* [ ] Yes
-* [ ] NO
-* [ ] NA
-
-Do the code changes cause any memory leak and performance issue?
-* [ ] Yes
-* [ ] NO
-
-## Reviewer Checklist
-* [ ] Reviewed feature matrix document modifications and reviewed developer testing report against the feature matrix reviewed.
-* [ ] Testbed sample ensured.
-* [ ] Coverage report checked.
-* [ ] Ensured the code changes meet the coding standard.
-* [ ] Confirming script changes made in this merge request can't be achieved in C#.
-
-Created task in Blazor to synchronize if the feature is not available and applicable.
-* [ ] NA
-* [ ] Yes, task link.
-* [ ] NO, share reason.
diff --git a/EJ2MVCSampleBrowser.csproj b/EJ2MVCSampleBrowser.csproj
index bdebdddac..50171cae8 100644
--- a/EJ2MVCSampleBrowser.csproj
+++ b/EJ2MVCSampleBrowser.csproj
@@ -91,14 +91,14 @@
packages\Syncfusion.DocIO.AspNet.Mvc5.31.1.17\lib\net462\Syncfusion.DocIO.Base.dll
- packages\\lib\net462\Syncfusion.Compression.Base.dll
+ packages\Syncfusion.Compression.Base.31.1.17\lib\net462\Syncfusion.Compression.Base.dll
packages\Syncfusion.Presentation.AspNet.Mvc5.31.1.17\lib\net462\Syncfusion.Presentation.Base.dll
False
- packages\\lib\net45\Syncfusion.Licensing.dll
+ packages\Syncfusion.Licensing.31.1.17\lib\net462\Syncfusion.Licensing.dll
diff --git a/PDF/EJ2MVCSampleBrowser.csproj b/PDF/EJ2MVCSampleBrowser.csproj
deleted file mode 100644
index f999e7f21..000000000
--- a/PDF/EJ2MVCSampleBrowser.csproj
+++ /dev/null
@@ -1,692 +0,0 @@
-
-
-
-
-
- Debug
- AnyCPU
-
-
- 2.0
- {9D06B672-AC99-4A11-8104-B4C0D5703B37}
- {349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}
- Library
- Properties
- EJ2MVCSampleBrowser
- EJ2MVCSampleBrowser
- v4.6.2
- false
- true
-
-
-
-
-
-
-
-
-
-
-
- true
- full
- false
- bin\
- TRACE;DEBUG;STAGING;$(SyncfusionLicensing)
- prompt
- 4
-
-
- pdbonly
- true
- bin\
- TRACE;RELEASE;STAGING;$(SyncfusionLicensing)
- prompt
- 4
-
-
- $(DefineConstants);STAGING
-
-
-
- packages\Antlr.3.5.0.2\lib\Antlr3.Runtime.dll
-
-
- packages\Microsoft.AspNet.SignalR.Core.2.4.3\lib\net45\Microsoft.AspNet.SignalR.Core.dll
-
-
- packages\Microsoft.AspNet.SignalR.SystemWeb.2.4.3\lib\net45\Microsoft.AspNet.SignalR.SystemWeb.dll
-
-
- packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.3.11.0\lib\net45\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll
-
-
-
- False
- packages\Microsoft.Owin.4.2.2\lib\net45\Microsoft.Owin.dll
-
-
- False
- packages\Microsoft.Owin.Host.SystemWeb.4.2.2\lib\net45\Microsoft.Owin.Host.SystemWeb.dll
-
-
- False
- packages\Microsoft.Owin.Security.4.2.2\lib\net45\Microsoft.Owin.Security.dll
-
-
- False
- packages\Newtonsoft.Json.13.0.3\lib\net45\Newtonsoft.Json.dll
-
-
- packages\Owin.1.0\lib\net40\Owin.dll
-
-
- packages\Syncfusion.EJ2.MVC5.100.2.1\lib\net462\Syncfusion.EJ2.dll
-
-
- packages\Syncfusion.Pdf.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.Pdf.Base.dll
-
-
- False
- packages\Syncfusion.DocIO.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.DocIO.Base.dll
-
-
- packages\Syncfusion.EJ2.PdfViewer.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.EJ2.PdfViewer.dll
-
-
- packages\Syncfusion.OfficeChartToImageConverter.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.OfficeChartToImageConverter.WPF.dll
-
-
- packages\Syncfusion.EJ2.PdfViewer.AspNet.Mvc5.100.2.100\lib\net462\Syncfusion.PdfToImageConverter.Base.dll
-
-
- packages\Syncfusion.DocToPdfConverter.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.DocToPDFConverter.Base.dll
-
-
- packages\Syncfusion.Compression.Base.100.2.1\lib\net462\Syncfusion.Compression.Base.dll
-
-
- packages\Syncfusion.OfficeChart.Base.100.2.1\lib\net462\Syncfusion.OfficeChart.Base.dll
-
-
- packages\Syncfusion.Presentation.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.Presentation.Base.dll
-
-
- packages\Syncfusion.PresentationToPdfConverter.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.PresentationToPdfConverter.Base.dll
-
-
- packages\Syncfusion.ExcelToPdfConverter.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.ExcelToPDFConverter.Base.dll
-
-
- packages\Syncfusion.SfChart.WPF.100.2.1\lib\net462\Syncfusion.SfChart.WPF.dll
-
-
- packages\Syncfusion.XlsIO.AspNet.Mvc5.100.2.1\lib\net462\Syncfusion.XlsIO.Base.dll
-
-
- False
- packages\Syncfusion.Licensing.100.2.1\lib\net45\Syncfusion.Licensing.dll
-
-
-
-
-
-
- packages\Microsoft.AspNet.WebApi.Client.6.0.0\lib\net45\System.Net.Http.Formatting.dll
-
-
-
-
-
-
-
-
-
- False
- packages\Microsoft.AspNet.WebApi.Core.5.3.0\lib\net45\System.Web.Http.dll
-
-
- packages\Microsoft.AspNet.WebApi.WebHost.5.3.0\lib\net45\System.Web.Http.WebHost.dll
-
-
-
-
-
-
-
-
-
-
- True
- packages\Microsoft.Web.Infrastructure.1.0.0.0\lib\net40\Microsoft.Web.Infrastructure.dll
-
-
-
-
-
-
- True
- packages\Microsoft.AspNet.WebPages.3.2.9\lib\net45\System.Web.Helpers.dll
-
-
- True
- packages\Microsoft.AspNet.Mvc.5.3.0\lib\net45\System.Web.Mvc.dll
-
-
- True
- packages\Microsoft.AspNet.Web.Optimization.1.1.3\lib\net40\System.Web.Optimization.dll
-
-
- True
- packages\Microsoft.AspNet.Razor.3.2.9\lib\net45\System.Web.Razor.dll
-
-
- True
- packages\Microsoft.AspNet.WebPages.3.2.9\lib\net45\System.Web.WebPages.dll
-
-
- True
- packages\Microsoft.AspNet.WebPages.3.2.9\lib\net45\System.Web.WebPages.Deployment.dll
-
-
- True
- packages\Microsoft.AspNet.WebPages.3.2.9\lib\net45\System.Web.WebPages.Razor.dll
-
-
-
- True
- packages\WebGrease.1.6.0\lib\WebGrease.dll
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Global.asax
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- PreserveNewest
-
-
- Designer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Web.config
-
-
- Web.config
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 10.0
- $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)
-
-
-
-
-
-
-
-
-
-
-
- False
- True
- 54079
- /
- http://localhost:54079/
- False
- False
-
-
- False
-
-
-
-
-
-
diff --git a/PDF/EJ2MVCSampleBrowser.sln b/PDF/EJ2MVCSampleBrowser.sln
deleted file mode 100644
index 610a18a63..000000000
--- a/PDF/EJ2MVCSampleBrowser.sln
+++ /dev/null
@@ -1,25 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio 15
-VisualStudioVersion = 15.0.26730.16
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EJ2MVCSampleBrowser", "EJ2MVCSampleBrowser.csproj", "{9D06B672-AC99-4A11-8104-B4C0D5703B37}"
-EndProject
-Global
- GlobalSection(SolutionConfigurationPlatforms) = preSolution
- Debug|Any CPU = Debug|Any CPU
- Release|Any CPU = Release|Any CPU
- EndGlobalSection
- GlobalSection(ProjectConfigurationPlatforms) = postSolution
- {9D06B672-AC99-4A11-8104-B4C0D5703B37}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
- {9D06B672-AC99-4A11-8104-B4C0D5703B37}.Debug|Any CPU.Build.0 = Debug|Any CPU
- {9D06B672-AC99-4A11-8104-B4C0D5703B37}.Release|Any CPU.ActiveCfg = Release|Any CPU
- {9D06B672-AC99-4A11-8104-B4C0D5703B37}.Release|Any CPU.Build.0 = Release|Any CPU
- EndGlobalSection
- GlobalSection(SolutionProperties) = preSolution
- HideSolutionNode = FALSE
- EndGlobalSection
- GlobalSection(ExtensibilityGlobals) = postSolution
- SolutionGuid = {32546CB8-075D-420F-A588-C38DA7319D94}
- EndGlobalSection
-EndGlobal
diff --git a/PDF/packages.config b/PDF/packages.config
deleted file mode 100644
index 20f60b4b1..000000000
--- a/PDF/packages.config
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/PDF/sampleOrder.json b/PDF/sampleOrder.json
deleted file mode 100644
index c4eb72759..000000000
--- a/PDF/sampleOrder.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-"Viewer & Editors": [ "PdfViewer" ],
-"Document Processing Libraries": [ "PDF" ]
-}
diff --git a/PDF/samplelist.js b/PDF/samplelist.js
deleted file mode 100644
index 4a16aaca6..000000000
--- a/PDF/samplelist.js
+++ /dev/null
@@ -1,797 +0,0 @@
-if (!window) {
-
- var window = exports.window = {};
- }
- window.samplesList =[
- {
- "name": "PDF Viewer",
- "directory": "PdfViewer",
- "category": "Viewer & Editors",
- "type": "update",
- "samples": [
- {
- "url": "Default",
- "name": "Default Functionalities",
- "category": "PDF Viewer",
- "order": 0,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023230"
- },
- {
- "url": "ReadOnly",
- "name": "Read-Only",
- "category": "Document Security",
- "order": 1,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023231"
- },
- {
- "url": "DocumentList",
- "name": "Document List",
- "category": "File Management",
- "order": 2,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023232"
- },
- {
- "url": "MultiFormatViewer",
- "name": "Multi-Format Viewer",
- "category": "File Management",
- "order": 2,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023233"
- },
- {
- "url": "OrganizePages",
- "name": "Organize Pages",
- "category": "Editor",
- "order": 3,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "type": "update",
- "parentId": "023",
- "uid": "0023234"
- },
- {
- "url": "CustomToolbar",
- "name": "Toolbar",
- "category": "Customization",
- "order": 4,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023235"
- },
- {
- "url": "ContextMenu",
- "name": "Context Menu",
- "category": "Customization",
- "order": 4,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023236"
- },
- {
- "url": "RightToLeft",
- "name": "Right To Left",
- "category": "Localization",
- "order": 5,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023237"
- },
- {
- "url": "FormFilling",
- "name": "Form Filling",
- "category": "PDF Form",
- "order": 6,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023238"
- },
- {
- "url": "FormDesigner",
- "name": "Form Designer",
- "category": "PDF Form",
- "order": 6,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "0023239"
- },
- {
- "url": "ESigningFormDesigner",
- "name": "eSigning Form Designer",
- "category": "PDF Form",
- "order": 6,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232310"
- },
- {
- "url": "ESigningPdfForms",
- "name": "eSigning PDF Forms",
- "category": "PDF Form",
- "order": 6,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232311"
- },
- {
- "url": "Annotations",
- "name": "Annotations",
- "category": "Annotation",
- "order": 7,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232312",
- "type": "update"
- },
- {
- "url": "ProgrammaticOperations",
- "name": "Programmatic Operations",
- "category": "Annotation",
- "order": 7,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232313",
- "type": "update"
- },
- {
- "url": "HandwrittenSignature",
- "name": "Handwritten Signature",
- "category": "Signature",
- "order": 8,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232314"
- },
- {
- "url": "InvisibleDigitalSignature",
- "name": "Invisible Digital Signature",
- "category": "Signature",
- "order": 8,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232315"
- },
- {
- "url": "Redaction",
- "name": "Redaction",
- "category": "Editor",
- "order": 3,
- "component": "PdfViewer",
- "dir": "PdfViewer",
- "parentId": "023",
- "uid": "00232316"
- }
- ],
- "order": 3,
- "uid": "023"
- },
- {
- "name": "PDF",
- "directory": "PDF",
- "type": "update",
- "category": "Document Processing Libraries",
- "samples": [
- {
- "url": "Default",
- "name": "Default",
- "category": "PDF",
- "order": 0,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089890"
- },
- {
- "url": "JobApplication",
- "name": "Job Application",
- "category": "Product Showcase",
- "order": 1,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089891"
- },
- {
- "url": "Zugferd",
- "name": "Zugferd Invoice",
- "category": "Product Showcase",
- "order": 1,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089892"
- },
- {
- "url": "HelloWorld",
- "name": "Hello World",
- "category": "Getting Started",
- "order": 2,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089893"
- },
- {
- "url": "PdfCompression",
- "name": "PDF Compression Level",
- "category": "Compression",
- "order": 3,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089894"
- },
- {
- "url": "CompressExistingPDF",
- "name": "Compress Existing PDF",
- "category": "Compression",
- "order": 3,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089895"
- },
- {
- "url": "Barcode",
- "name": "Barcode",
- "category": "Graphics",
- "order": 4,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089896"
- },
- {
- "url": "DrawingShapes",
- "name": "Drawing Shapes",
- "category": "Graphics",
- "order": 4,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089897"
- },
- {
- "url": "GraphicBrushes",
- "name": "Graphic Brushes",
- "category": "Graphics",
- "order": 4,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089898"
- },
- {
- "url": "ImageInsertion",
- "name": "Image Insertion",
- "category": "Graphics",
- "order": 4,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "0089899"
- },
- {
- "url": "ImageToPdf",
- "name": "Image to PDF",
- "category": "Graphics",
- "order": 4,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898910"
- },
- {
- "url": "MultiColumnHtmlText",
- "name": "Multi Column HTML Text",
- "category": "Graphics",
- "order": 4,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898911"
- },
- {
- "url": "AdventureCycle",
- "name": "Adventure Cycle Works",
- "category": "Tables",
- "order": 5,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898912"
- },
- {
- "url": "TableFeatures",
- "name": "Table Features",
- "category": "Tables",
- "order": 5,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898913"
- },
- {
- "url": "TextFlow",
- "name": "Text Flow",
- "category": "Drawing Text",
- "order": 6,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898914"
- },
- {
- "url": "RtlSupport",
- "name": "RTL Support",
- "category": "Drawing Text",
- "order": 6,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898915"
- },
- {
- "url": "BulletsandLists",
- "name": "Bullets and Lists",
- "category": "Drawing Text",
- "order": 6,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898916"
- },
- {
- "url": "Encryption",
- "name": "Encryption",
- "category": "Security",
- "order": 7,
- "type": "update",
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898917"
- },
- {
- "url": "DigitalSignature",
- "name": "Digital Signature",
- "category": "Security",
- "order": 7,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898918"
- },
- {
- "url": "Redaction",
- "name": "Redaction",
- "category": "Security",
- "order": 7,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898919"
- },
- {
- "url": "DigitalSignatureValidation",
- "name": "Digital Signature Validation",
- "category": "Security",
- "order": 7,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898920"
- },
- {
- "url": "DocumentSettings",
- "name": "Document Settings",
- "category": "Settings",
- "order": 8,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898921"
- },
- {
- "url": "PageSettings",
- "name": "Page Settings",
- "category": "Settings",
- "order": 8,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898922"
- },
- {
- "url": "HeadersandFooters",
- "name": "Headers and Footers",
- "category": "Settings",
- "order": 8,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898923"
- },
- {
- "url": "Layers",
- "name": "Layers",
- "category": "Settings",
- "order": 8,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898924"
- },
- {
- "url": "FindPDFCorruption",
- "name": "Find PDF Corruption",
- "category": "Analyze Document",
- "order": 9,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898925"
- },
- {
- "url": "InteractiveFeatures",
- "name": "Interactive Features",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898926"
- },
- {
- "url": "FormFilling",
- "name": "Form Filling",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898927"
- },
- {
- "url": "Portfolio",
- "name": "Portfolio",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898928"
- },
- {
- "url": "AnnotationFlatten",
- "name": "Annotations",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898929"
- },
- {
- "url": "NamedDestination",
- "name": "Named Destination",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898930"
- },
- {
- "url": "Bookmarks",
- "name": "Bookmarks",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898931"
- },
- {
- "url": "Attachments",
- "name": "File Attachments",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898932"
- },
- {
- "url": "XFAFormCreation",
- "name": "XFA Form Creation",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898933"
- },
- {
- "url": "XFAFormFilling",
- "name": "XFA Form Filling",
- "category": "User Interaction",
- "order": 10,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898934"
- },
- {
- "url": "TextExtraction",
- "name": "Text Extraction",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898935"
- },
- {
- "url": "RTFtoPDF",
- "name": "RTF to PDF",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898936"
- },
- {
- "url": "WordtoPDF",
- "name": "Word to PDF",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898937"
- },
- {
- "url": "XPStoPDF",
- "name": "XPS to PDF",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898938"
- },
- {
- "url": "TIFFtoPDF",
- "name": "TIFF to PDF",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898939"
- },
- {
- "url": "ImageExtraction",
- "name": "Image Extraction",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898940"
- },
- {
- "url": "PDFToImage",
- "name": "PDF To Image",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898941"
- },
- {
- "url": "ExportasImage",
- "name": "Export as Image",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898942"
- },
- {
- "url": "HtmltoPDF",
- "name": "HTML to PDF",
- "category": "Import and Export",
- "order": 11,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898943",
- "sourceFiles": [
- {
- "displayName": "HtmlToPDFController.cs",
- "path": "../Content/PDF/HtmltoPDFController.txt"
- },
- { "displayName": "HtmltoPDF.cshtml", "path": "../Content/PDF/HtmltoPDFConversion.txt" }
- ]
- },
- {
- "url": "PDFConformance",
- "name": "PDF Conformance",
- "category": "Conformance",
- "order": 12,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898944"
- },
- {
- "url": "PdfToPdfAConverter",
- "name": "PDF to PDF-A",
- "category": "Conformance",
- "order": 12,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898945"
- },
- {
- "url": "MergeDocuments",
- "name": "Merge Documents",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898946"
- },
- {
- "url": "SplitPDF",
- "name": "Split PDF",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898947"
- },
- {
- "url": "OverlayDocuments",
- "name": "Overlay Documents",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898948"
- },
- {
- "url": "Booklet",
- "name": "Booklet",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898949"
- },
- {
- "url": "WatermarkPDF",
- "name": "Watermark PDF",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898950"
- },
- {
- "url": "ReplaceImages",
- "name": "Replace Images",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898951"
- },
- {
- "url": "ReplaceFonts",
- "name": "Replace Fonts",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898952"
- },
- {
- "url": "RearrangePages",
- "name": "Rearrange Pages",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898953"
- },
- {
- "url": "RemoveImages",
- "name": "Remove Images",
- "category": "Modify Documents",
- "order": 13,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898954"
- },
- {
- "url": "Autotag",
- "name": "Autotag",
- "category": "Accessibility",
- "order": 14,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898955"
- },
- {
- "url": "Customtag",
- "name": "Customtag",
- "category": "Accessibility",
- "order": 14,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898956"
- },
- {
- "url": "ComplexScript",
- "name": "Complex Script",
- "category": "Drawing Text",
- "order": 6,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898957"
- },
- {
- "url": "OpenTypeFont",
- "name": "OpenType Font",
- "category": "Drawing Text",
- "order": 6,
- "component": "PDF",
- "dir": "PDF",
- "parentId": "089",
- "uid": "00898958"
- }
- ],
- "order": 11,
- "uid": "089"
- },
-]
\ No newline at end of file
diff --git a/README.md b/README.md
index 4e1090d8d..ddab42239 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,6 @@ The following topics can help you to use the Syncfusion ASP.NET MVC Components a
-
@@ -72,17 +71,10 @@ The following topics can help you to use the Syncfusion ASP.NET MVC Components a
- DOCUMENT PROCESSING LIBRARIES
-
-
-
-
-
-
-
+
diff --git a/Scripts/ej2.min.js.map b/Scripts/ej2.min.js.map
deleted file mode 100644
index 87b366087..000000000
--- a/Scripts/ej2.min.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"ej2.min.js","sources":["../node_modules/@syncfusion/ej2-base/dist/src/es5/util.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/dom.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/notify-property-change.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/animation.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/internationalization.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/template.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/template-engine.js","../node_modules/@syncfusion/ej2-buttons/dist/src/es5/common/common.js","../node_modules/@syncfusion/ej2-popups/dist/src/es5/common/position.js","../node_modules/@syncfusion/ej2-popups/dist/src/es5/common/collision.js","../node_modules/@syncfusion/ej2-popups/dist/src/es5/popup/popup.js","../node_modules/@syncfusion/ej2-popups/dist/src/es5/spinner/spinner.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/maskedtextbox/base/mask-base.js","../node_modules/@syncfusion/ej2-lists/dist/src/es5/common/list-base.js","../node_modules/@syncfusion/ej2-file-utils/dist/src/es5/encoding.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/collections/utils.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/model/theme.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/utils/helper.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/model/acc-base.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/utils/helper.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/common/incremental-search.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/common/highlight-search.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/multi-select/float-label.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/base/util.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/aria-service.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/aggregate.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/utils/helper.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/utils/helper.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/base/util.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/recurrence-editor/date-generator.js","../node_modules/@syncfusion/ej2-splitbuttons/dist/src/es5/common/common.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/ajax.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/event-handler.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/observer.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/base.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/browser.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/intl/intl-base.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/canvas-renderer.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/module-loader.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/child-property.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/intl/parser-base.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/intl/number-formatter.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/intl/date-formatter.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/component.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/intl/date-parser.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/intl/number-parser.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/draggable.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/input/input.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/droppable.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/keyboard.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/l10n.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/svg-renderer.js","../node_modules/@syncfusion/ej2-base/dist/src/es5/touch.js","../node_modules/@syncfusion/ej2-buttons/dist/src/es5/button/button.js","../node_modules/@syncfusion/ej2-buttons/dist/src/es5/check-box/check-box.js","../node_modules/@syncfusion/ej2-buttons/dist/src/es5/radio-button/radio-button.js","../node_modules/@syncfusion/ej2-popups/dist/src/es5/dialog/dialog.js","../node_modules/@syncfusion/ej2-popups/dist/src/es5/tooltip/tooltip.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/numerictextbox/numerictextbox.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/form-validator/form-validator.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/maskedtextbox/maskedtextbox/maskedtextbox.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/slider/slider.js","../node_modules/@syncfusion/ej2-inputs/dist/src/es5/uploader/uploader.js","../node_modules/@syncfusion/ej2-data/dist/src/es5/query.js","../node_modules/@syncfusion/ej2-data/dist/src/es5/util.js","../node_modules/@syncfusion/ej2-data/dist/src/es5/adaptors.js","../node_modules/@syncfusion/ej2-data/dist/src/es5/manager.js","../node_modules/@syncfusion/ej2-lists/dist/src/es5/list-view/list-view.js","../node_modules/@syncfusion/ej2-calendars/dist/src/es5/timepicker/timepicker.js","../node_modules/@syncfusion/ej2-calendars/dist/src/es5/calendar/calendar.js","../node_modules/@syncfusion/ej2-calendars/dist/src/es5/datepicker/datepicker.js","../node_modules/@syncfusion/ej2-calendars/dist/src/es5/daterangepicker/daterangepicker.js","../node_modules/@syncfusion/ej2-calendars/dist/src/es5/datetimepicker/datetimepicker.js","../node_modules/@syncfusion/ej2-file-utils/dist/src/es5/save.js","../node_modules/@syncfusion/ej2-file-utils/dist/src/es5/stream-writer.js","../node_modules/@syncfusion/ej2-compression/dist/src/es5/compression-writer.js","../node_modules/@syncfusion/ej2-compression/dist/src/es5/zip-archive.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/collections/dictionary.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-string.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-name.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/pdf-operators.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/pdf-dictionary-properties.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-dictionary.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-number.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-array.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-stream.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-reference.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/actions/action.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/actions/uri-action.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-color.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/drawing/pdf-drawing.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/brushes/pdf-brush.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/brushes/pdf-solid-brush.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/pdf-string-format.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/string-layouter.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/string-tokenizer.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/pdf-font.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/pdf-writer.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/pdf-main-object-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/cross-table.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/pdf-document-base.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/pdf-catalog.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/pdf-cross-table.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page-size.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-margins.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/images/image-decoder.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page-settings.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/input-output/pdf-stream-writer.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-pen.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-transformation-matrix.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/constants.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/collections/object-object-pair/dictionary.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-transparency.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/automatic-field-info-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/base/graphics-element.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/automatic-field.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/automatic-field-info.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-graphics.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page-layer.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/general/pdf-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page-layer-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/pdf-template.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/images/byte-array.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/primitives/pdf-boolean.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/unit-convertor.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/images/pdf-image.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/images/pdf-bitmap.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/pdf-resources.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page-base.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/annotation-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/page-added-event-arguments.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-section-page-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/pdf-document-template.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-section-templates.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-section.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-section-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-document-page-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/general/pdf-cache-collection.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/pdf-document.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/pdf-font-metrics.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/pdf-standard-font-metrics-factory.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/fonts/pdf-standard-font.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/annotation.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/link-annotation.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/action-link-annotation.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/document-link-annotation.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/base/element-layouter.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/general/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/layout-element.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/base/text-layouter.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/graphics/figures/text-element.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/uri-annotation.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/annotations/pdf-text-web-link.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/pdf-numbers-convertor.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/pdf-template-value-pair.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/multiple-value-field.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/pdf-page-number-field.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/composite-field.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/single-value-field.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/document/automatic-fields/page-count-field.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/general/pdf-destination.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/tables/light-tables/enum.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/pages/pdf-page-template-element.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/grid/styles/pdf-borders.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/grid/styles/style.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/grid/pdf-grid-cell.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/grid/pdf-grid-column.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/grid/pdf-grid-row.js","../node_modules/@syncfusion/ej2-pdf-export/dist/src/es5/implementation/structured-elements/grid/pdf-grid.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/model/base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/utils/double-range.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/double-axis.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/model/constants.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/model/chart-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/axis.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/cartesian-panel.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/utils/get-data.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/chart-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/model/data.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/marker-explode.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/marker.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/legend/legend.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/technical-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/utils/export.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/chart.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/axis-helper.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/date-time-axis.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/category-axis.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/logarithmic-axis.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/date-time-category-axis.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/strip-line.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/line-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/line-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/column-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/column-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/multi-colored-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/area-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/bar-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/polar-radar-panel.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/polar-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/radar-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/stacking-bar-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/candle-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/stacking-column-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/step-line-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/step-area-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/stacking-area-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/scatter-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/range-column-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/waterfall-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/hilo-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/hilo-open-close-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/range-area-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/bubble-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/spline-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/spline-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/spline-area-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/indicator-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/sma-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/ema-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/tma-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/ad-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/atr-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/momentum-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/rsi-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/stochastic-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/bollinger-bands.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/technical-indicators/macd-indicator.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/trend-lines/trend-line.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/user-interaction/crosshair.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/user-interaction/tooltip.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/user-interaction/tooltip.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/user-interaction/zooming-toolkit.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/user-interaction/zooming.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/user-interaction/selection.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/user-interaction/selection.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/data-label.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/error-bar.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/legend/legend.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/common/annotation/annotation.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/annotation/annotation.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/box-and-whisker-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/multi-colored-area-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/series/multi-colored-line-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/chart/axis/multi-level-labels.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/accumulation-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/pie-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/pie-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/accumulation.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/triangular-base.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/funnel-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/pyramid-series.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/legend.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/renderer/dataLabel.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/user-interaction/tooltip.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/user-interaction/selection.js","../node_modules/@syncfusion/ej2-charts/dist/src/es5/accumulation-chart/annotation/annotation.js","../charts.ts","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/model/theme.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/model/base.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/axes/axis.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/annotations/annotations.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/model/constants.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/user-interaction/tooltip.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/axes/axis-renderer.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/axes/pointer-renderer.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/axes/axis-panel.js","../node_modules/@syncfusion/ej2-circulargauge/dist/src/es5/circular-gauge/circular-gauge.js","../circulargauge.ts","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/drop-down-base/drop-down-base.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/drop-down-list/drop-down-list.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/combo-box/combo-box.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/auto-complete/auto-complete.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/multi-select/multi-select.js","../node_modules/@syncfusion/ej2-dropdowns/dist/src/es5/multi-select/checkbox-selection.js","../dropdowns.ts","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/base/enum.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/cell-style.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/cell.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/column.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/row.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/worksheets.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/worksheet.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/value-formatter.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/csv-helper.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/blob-helper.js","../node_modules/@syncfusion/ej2-excel-export/dist/src/es5/workbook.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/common/h-scroll.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/toolbar/toolbar.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/accordion/accordion.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/context-menu/context-menu.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/tab/tab.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/treeview/treeview.js","../node_modules/@syncfusion/ej2-navigations/dist/src/es5/sidebar/sidebar.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/value-formatter.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/models/column.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/base/constant.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/checkbox-filter.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/data.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/models/row.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/models/cell.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/cell-merge-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/row-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/row-model-generator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/summary-model-generator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/group-model-generator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/content-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/header-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/header-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/stacked-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/indent-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/caption-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/expand-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/header-indent-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/detail-header-indent-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/detail-expand-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/render.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/cell-render-factory.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/service-locator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/renderer-factory.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/width-controller.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/focus-strategy.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/models/page-settings.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/selection.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/search.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/show-hide.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/scroll.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/print.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/models/aggregate.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/clipboard.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/base/grid.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/sort.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/pager/numeric-container.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/pager/pager-message.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/pager/pager.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/pager/pager-dropdown.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/pager/external-message.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/page.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/edit.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/filter-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/filter-menu-operator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/string-filter-ui.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/number-filter-ui.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/boolean-filter-ui.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/date-filter-ui.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/filter-menu-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/excel-filter.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/filter.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/resize.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/reorder.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/row-reorder.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/group.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/detail-row.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/toolbar.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/footer-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/summary-cell-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/intersection-observer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/virtual-row-model-generator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/virtual-content-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/virtual-scroll.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/inline-edit-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/batch-edit-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/dialog-edit-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/edit-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/boolean-edit-cell.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/dropdown-edit-cell.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/numeric-edit-cell.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/default-edit-cell.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/normal-edit.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/inline-edit.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/batch-edit.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/dialog-edit.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/datepicker-edit-cell.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/column-chooser.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/export-helper.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/excel-export.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/pdf-export.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/command-column-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/command-column.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/context-menu.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/services/freeze-row-model-generator.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/renderer/freeze-renderer.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/freeze.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/column-menu.js","../node_modules/@syncfusion/ej2-grids/dist/src/es5/grid/actions/foreign-key.js","../grids.ts","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/model/base.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/axes/axis.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/axes/axis-panel.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/model/constant.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/axes/animation.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/axes/axis-renderer.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/annotations/annotations.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/user-interaction/tooltip.js","../node_modules/@syncfusion/ej2-lineargauge/dist/src/es5/linear-gauge/linear-gauge.js","../lineargauge.ts","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/model/theme.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/model/base.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/model/constants.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/bing-map.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/color-mapping.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/layer-panel.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/user-interaction/annotation.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/utils/export.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/maps.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/bubble.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/marker.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/data-label.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/navigation-selected-line.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/layers/legend.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/user-interaction/highlight.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/user-interaction/selection.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/user-interaction/tooltip.js","../node_modules/@syncfusion/ej2-maps/dist/src/es5/maps/user-interaction/zoom.js","../maps.ts","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/base/constant.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/base/css-constant.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/header-renderer.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/actions/scroll.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/actions/touch.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/actions/keyboard.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/actions/data.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/timezone/timezone.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/event-renderer/event-base.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/actions/crud.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/popups/form-validator.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/popups/quick-popups.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/popups/event-tooltip.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/recurrence-editor/recurrence-editor.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/popups/event-window.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/renderer.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/models/work-hours.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/models/fields.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/models/event-settings.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/base/schedule.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/view-base.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/actions/work-cells.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/event-renderer/vertical-view.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/vertical-view.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/day.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/week.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/work-week.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/event-renderer/month.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/month.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/event-renderer/agenda-base.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/agenda.js","../node_modules/@syncfusion/ej2-schedule/dist/src/es5/schedule/renderer/month-agenda.js","../schedule.ts","../node_modules/@syncfusion/ej2-splitbuttons/dist/src/es5/drop-down-button/drop-down-button.js","../node_modules/@syncfusion/ej2-splitbuttons/dist/src/es5/split-button/split-button.js"],"sourcesContent":["var instances = 'ej2_instances';\nvar uid = 0;\n/**\n * Create Instance from constructor function with desired parameters.\n * @param {Function} classFunction - Class function to which need to create instance\n * @param {any[]} params - Parameters need to passed while creating instance\n * @return {any}\n * @private\n */\nexport function createInstance(classFunction, params) {\n var arrayParam = params;\n arrayParam.unshift(undefined);\n return new (Function.prototype.bind.apply(classFunction, arrayParam));\n}\n/**\n * To run a callback function immediately after the browser has completed other operations.\n * @param {Function} handler - callback function to be triggered.\n * @return {Function}\n * @private\n */\nexport function setImmediate(handler) {\n var unbind;\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n intCrypto.getRandomValues(num);\n var secret = 'ej2' + combineArray(num);\n var messageHandler = function (event) {\n if (event.source === window && typeof event.data === 'string' && event.data.length <= 32 && event.data === secret) {\n handler();\n unbind();\n }\n };\n window.addEventListener('message', messageHandler, false);\n window.postMessage(secret, '*');\n return unbind = function () {\n window.removeEventListener('message', messageHandler);\n handler = messageHandler = secret = undefined;\n };\n}\n/**\n * To get nameSpace value from the desired object.\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} obj - Object to get the inner object value.\n * @return {any}\n * @private\n */\nexport function getValue(nameSpace, obj) {\n /* tslint:disable no-any */\n var value = obj;\n var splits = nameSpace.split('.');\n for (var i = 0; i < splits.length && !isUndefined(value); i++) {\n value = value[splits[i]];\n }\n return value;\n}\n/**\n * To set value for the nameSpace in desired object.\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} value - Value that you need to set.\n * @param {any} obj - Object to get the inner object value.\n * @return {void}\n * @private\n */\nexport function setValue(nameSpace, value, obj) {\n var keys = nameSpace.split('.');\n var start = obj || {};\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[i];\n if (i + 1 === length) {\n fromObj[key] = value === undefined ? {} : value;\n }\n else if (isNullOrUndefined(fromObj[key])) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return start;\n}\n/**\n * Delete an item from Object\n * @param {any} obj - Object in which we need to delete an item.\n * @param {string} params - String value to the get the inner object\n * @return {void}\n * @private\n */\nexport function deleteObject(obj, key) {\n delete obj[key];\n}\n/**\n * Check weather the given argument is only object.\n * @param {any} obj - Object which is need to check.\n * @return {boolean}\n * @private\n */\nexport function isObject(obj) {\n var objCon = {};\n return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);\n}\n/**\n * To get enum value by giving the string.\n * @param {any} enumObject - Enum object.\n * @param {string} enumValue - Enum value to be searched\n * @return {any}\n * @private\n */\nexport function getEnumValue(enumObject, enumValue) {\n return enumObject[enumValue];\n}\n/**\n * Merge the source object into destination object.\n * @param {any} source - source object which is going to merge with destination object\n * @param {any} destination - object need to be merged\n * @return {void}\n * @private\n */\nexport function merge(source, destination) {\n if (!isNullOrUndefined(destination)) {\n var temrObj = source;\n var tempProp = destination;\n var keys = Object.keys(destination);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n temrObj[key] = tempProp[key];\n }\n }\n}\n/**\n * Extend the two object with newer one.\n * @param {any} copied - Resultant object after merged\n * @param {Object} first - First object need to merge\n * @param {Object} second - Second object need to merge\n * @return {Object}\n * @private\n */\nexport function extend(copied, first, second, deep) {\n var result = copied || {};\n var length = arguments.length;\n if (deep) {\n length = length - 1;\n }\n var _loop_1 = function (i) {\n if (!arguments_1[i]) {\n return \"continue\";\n }\n var obj1 = arguments_1[i];\n Object.keys(obj1).forEach(function (key) {\n var src = result[key];\n var copy = obj1[key];\n var clone;\n if (deep && isObject(copy)) {\n clone = isObject(src) ? src : {};\n result[key] = extend({}, clone, copy, true);\n }\n else {\n result[key] = copy;\n }\n });\n };\n var arguments_1 = arguments;\n for (var i = 1; i < length; i++) {\n _loop_1(i);\n }\n return result;\n}\n/**\n * To check whether the object is null or undefined.\n * @param {Object} value - To check the object is null or undefined\n * @return {boolean}\n * @private\n */\nexport function isNullOrUndefined(value) {\n return value === undefined || value === null;\n}\n/**\n * To check whether the object is undefined.\n * @param {Object} value - To check the object is undefined\n * @return {boolean}\n * @private\n */\nexport function isUndefined(value) {\n return ('undefined' === typeof value);\n}\n/**\n * To return the generated unique name\n * @param {string} definedName - To concatenate the unique id to provided name\n * @return {string}\n * @private\n */\nexport function getUniqueID(definedName) {\n return definedName + '_' + uid++;\n}\n/**\n * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly.\n * @param {Function} eventFunction - Specifies the function to run when the event occurs\n * @param {number} delay - A number that specifies the milliseconds for function delay call option\n * @return {Function}\n * @private\n */\nexport function debounce(eventFunction, delay) {\n var out;\n // tslint:disable-next-line\n return function () {\n var _this = this;\n var args = arguments;\n var later = function () {\n out = null;\n return eventFunction.apply(_this, args);\n };\n clearTimeout(out);\n out = setTimeout(later, delay);\n };\n}\n// Added since lint ignored after added '//tslint:disable-next-line' \n/* tslint:disable:no-any */\n/**\n * To convert the object to string for query url\n * @param {Object} data\n * @returns string\n * @private\n */\nexport function queryParams(data) {\n var array = [];\n var keys = Object.keys(data);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n array.push(encodeURIComponent(key) + '=' + encodeURIComponent('' + data[key]));\n }\n return array.join('&');\n}\n/**\n * To check whether the given array contains object.\n * @param {T[]} value- Specifies the T type array to be checked.\n * @private\n */\nexport function isObjectArray(value) {\n var parser = Object.prototype.toString;\n if (parser.call(value) === '[object Array]') {\n if (parser.call(value[0]) === '[object Object]') {\n return true;\n }\n }\n return false;\n}\n/**\n * To check whether the child element is descendant to parent element or parent and child are same element.\n * @param{Element} - Specifies the child element to compare with parent.\n * @param{Element} - Specifies the parent element.\n * @return boolean\n * @private\n */\nexport function compareElementParent(child, parent) {\n var node = child;\n if (node === parent) {\n return true;\n }\n else if (node === document || !node) {\n return false;\n }\n else {\n return compareElementParent(node.parentNode, parent);\n }\n}\n/**\n * To throw custom error message.\n * @param{string} - Specifies the error message to be thrown.\n * @private\n */\nexport function throwError(message) {\n try {\n throw new Error(message);\n }\n catch (e) {\n throw e.message + '\\n' + e.stack;\n }\n}\n/**\n * This function is used to print given element\n * @param{Element} element - Specifies the print content element.\n * @param{Window} printWindow - Specifies the print window.\n * @private\n */\nexport function print(element, printWindow) {\n var div = document.createElement('div');\n var links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('link, style'));\n var reference = '';\n if (isNullOrUndefined(printWindow)) {\n printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');\n }\n div.appendChild(element.cloneNode(true));\n for (var i = 0, len = links.length; i < len; i++) {\n reference += links[i].outerHTML;\n }\n printWindow.document.write(' ' + reference + '' + div.innerHTML +\n '' + '');\n printWindow.document.close();\n printWindow.focus();\n // tslint:disable-next-line\n var interval = setInterval(function () {\n if (printWindow.ready) {\n printWindow.print();\n printWindow.close();\n clearInterval(interval);\n }\n }, 500);\n return printWindow;\n}\n/**\n * Function to normalize the units applied to the element.\n * @param {number|string} value\n * @return {string} result\n * @private\n */\nexport function formatUnit(value) {\n var result = value + '';\n if (result === 'auto' || result.indexOf('%') !== -1 || result.indexOf('px') !== -1) {\n return result;\n }\n return result + 'px';\n}\n/**\n * Function to fetch the Instances of a HTML element for the given component.\n * @param {string | HTMLElement} element\n * @param {any} component\n * @return {Object} inst\n * @private\n */\n// tslint:disable-next-line\nexport function getInstance(element, component) {\n // tslint:disable-next-line:no-any\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[instances]) {\n for (var _i = 0, _a = elem[instances]; _i < _a.length; _i++) {\n var inst = _a[_i];\n if (inst instanceof component) {\n return inst;\n }\n }\n }\n return null;\n}\n/**\n * Function to add instances for the given element.\n * @param {string | HTMLElement} element\n * @param {Object} instance\n * @return {void}\n * @private\n */\nexport function addInstance(element, instance) {\n // tslint:disable-next-line:no-any\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[instances]) {\n elem[instances].push(instance);\n }\n else {\n elem[instances] = [instance];\n }\n}\n/**\n * Function to generate the unique id.\n * @return {string}\n * @private\n */\nexport function uniqueID() {\n // tslint:disable-next-line:no-any\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n return intCrypto.getRandomValues(num);\n}\nfunction combineArray(num) {\n var ret = '';\n for (var i = 0; i < 5; i++) {\n ret += (i ? ',' : '') + num[i];\n }\n return ret;\n}\n","/**\n * Functions related to dom operations.\n */\nimport { EventHandler } from './event-handler';\nimport { isNullOrUndefined } from './util';\n/**\n * Function to create Html element.\n * @param tagName - Name of the tag, id and class names.\n * @param properties - Object to set properties in the element.\n * @param properties.id - To set the id to the created element.\n * @param properties.className - To add classes to the element.\n * @param properties.innerHTML - To set the innerHTML to element.\n * @param properties.styles - To set the some custom styles to element.\n * @param properties.attrs - To set the attributes to element.\n * @private\n */\nexport function createElement(tagName, properties) {\n var element = document.createElement(tagName);\n if (typeof (properties) === 'undefined') {\n return element;\n }\n element.innerHTML = (properties.innerHTML ? properties.innerHTML : '');\n if (properties.className !== undefined) {\n element.className = properties.className;\n }\n if (properties.id !== undefined) {\n element.id = properties.id;\n }\n if (properties.styles !== undefined) {\n element.setAttribute('style', properties.styles);\n }\n if (properties.attrs !== undefined) {\n attributes(element, properties.attrs);\n }\n return element;\n}\n/**\n * The function used to add the classes to array of elements\n * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @private\n */\nexport function addClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n for (var _b = 0, classList_1 = classList; _b < classList_1.length; _b++) {\n var className = classList_1[_b];\n if (!ele.classList.contains(className)) {\n ele.classList.add(className);\n }\n }\n }\n return elements;\n}\n/**\n * The function used to add the classes to array of elements\n * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @private\n */\nexport function removeClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n if (ele.className !== '') {\n for (var _b = 0, classList_2 = classList; _b < classList_2.length; _b++) {\n var className = classList_2[_b];\n ele.classList.remove(className);\n }\n }\n }\n return elements;\n}\nfunction getClassList(classes) {\n var classList = [];\n if (typeof classes === 'string') {\n classList.push(classes);\n }\n else {\n classList = classes;\n }\n return classList;\n}\n/**\n * The function used to check element is visible or not.\n * @param {Element|Node} element - An element the need to check visibility\n * @private\n */\nexport function isVisible(element) {\n var ele = element;\n return (ele.style.visibility === '' && ele.offsetWidth > 0);\n}\n/**\n * The function used to insert an array of elements into a first of the element.\n * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend.\n * @param {Element} toElement - An element that is going to prepend.\n * @private\n */\nexport function prepend(fromElements, toElement) {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.insertBefore(docFrag, toElement.firstElementChild);\n return fromElements;\n}\n/**\n * The function used to insert an array of elements into last of the element.\n * @param {Element[]|NodeList} fromElements - An array of elements that need to append.\n * @param {Element} toElement - An element that is going to prepend.\n * @private\n */\nexport function append(fromElements, toElement) {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.appendChild(docFrag);\n return fromElements;\n}\n/**\n * The function used to remove the element from the\n * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom\n * @private\n */\nexport function detach(element) {\n var parentNode = element.parentNode;\n return parentNode.removeChild(element);\n}\n/**\n * The function used to remove the element from Dom also clear the bounded events\n * @param {Element|Node|HTMLElement} element - An element remove from the Dom\n * @private\n */\nexport function remove(element) {\n var parentNode = element.parentNode;\n EventHandler.clearEvents(element);\n parentNode.removeChild(element);\n}\n/**\n * The function helps to set multiple attributes to an element\n * @param {Element|Node} element - An element that need to set attributes.\n * @param {{[key:string]:string}} attributes - JSON Object that is going to as attributes.\n * @private\n */\nexport function attributes(element, attributes) {\n var keys = Object.keys(attributes);\n var ele = element;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n ele.setAttribute(key, attributes[key]);\n }\n return ele;\n}\n/**\n * The function selects the element from giving context.\n * @param {string} selector - Selector string need fetch element from the\n * @param {Document|Element=document} context - It is an optional type, That specifies a Dom context.\n * @private\n */\nexport function select(selector, context) {\n if (context === void 0) { context = document; }\n return context.querySelector(selector);\n}\n/**\n * The function selects an array of element from the given context.\n * @param {string} selector - Selector string need fetch element from the\n * @param {Document|Element=document} context - It is an optional type, That specifies a Dom context.\n * @private\n */\nexport function selectAll(selector, context) {\n if (context === void 0) { context = document; }\n var nodeList = context.querySelectorAll(selector);\n return nodeList;\n}\n/**\n * Returns single closest parent element based on class selector.\n * @param {Element} element - An element that need to find the closest element.\n * @param {string} selector - A classSelector of closest element.\n * @private\n */\nexport function closest(element, selector) {\n var el = element;\n if (typeof el.closest === 'function') {\n return el.closest(selector);\n }\n while (el && el.nodeType === 1) {\n if (matches(el, selector)) {\n return el;\n }\n el = el.parentNode;\n }\n return null;\n}\n/**\n * Returns all sibling elements of the given element.\n * @param {Element|Node} element - An element that need to get siblings.\n * @private\n */\nexport function siblings(element) {\n var siblings = [];\n var childNodes = Array.prototype.slice.call(element.parentNode.childNodes);\n for (var _i = 0, childNodes_1 = childNodes; _i < childNodes_1.length; _i++) {\n var curNode = childNodes_1[_i];\n if (curNode.nodeType === Node.ELEMENT_NODE && element !== curNode) {\n siblings.push(curNode);\n }\n }\n return siblings;\n}\n/**\n * set the value if not exist. Otherwise set the existing value\n * @param {HTMLElement} element - An element to which we need to set value.\n * @param {string} property - Property need to get or set.\n * @param {string} value - value need to set.\n * @private\n */\nexport function getAttributeOrDefault(element, property, value) {\n var attrVal = element.getAttribute(property);\n if (isNullOrUndefined(attrVal)) {\n element.setAttribute(property, value.toString());\n attrVal = value;\n }\n return attrVal;\n}\n/**\n * Set the style attributes to Html element.\n * @param {HTMLElement} element - Element which we want to set attributes\n * @param {any} attrs - Set the given attributes to element\n * @return {void}\n * @private\n */\nexport function setStyleAttribute(element, attrs) {\n if (attrs !== undefined) {\n Object.keys(attrs).forEach(function (key) {\n // tslint:disable-next-line:no-any\n element.style[key] = attrs[key];\n });\n }\n}\n/**\n * Method for add and remove classes to a dom element.\n * @param {Element} element - Element for add and remove classes\n * @param {string[]} addClasses - List of classes need to be add to the element\n * @param {string[]} removeClasses - List of classes need to be remove from the element\n * @return {void}\n * @private\n */\nexport function classList(element, addClasses, removeClasses) {\n addClass([element], addClasses);\n removeClass([element], removeClasses);\n}\n/**\n * Method to check whether the element matches the given selector.\n * @param {Element} element - Element to compare with the selector.\n * @param {string} selector - String selector which element will satisfy.\n * @return {void}\n * @private\n */\nexport function matches(element, selector) {\n var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;\n if (matches) {\n return matches.call(element, selector);\n }\n else {\n return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;\n }\n}\n","import { createInstance, isUndefined, merge, extend, getValue } from './util';\n/**\n * Returns the Class Object\n * @param {ClassObject} instance - instance of ClassObject\n * @param {string} curKey - key of the current instance\n * @param {Object} defaultValue - default Value\n * @param {Object[]} type\n */\nfunction getObject(instance, curKey, defaultValue, type) {\n if (!instance.properties.hasOwnProperty(curKey)) {\n instance.properties[curKey] = createInstance(type, [instance, curKey, defaultValue]);\n }\n return instance.properties[curKey];\n}\n/**\n * Returns object array\n * @param {ClassObject} instance\n * @param {string} curKey\n * @param {Object[]} defaultValue\n * @param type\n * @param {boolean} isSetter\n * @returns {Object[]}\n */\nfunction getObjectArray(instance, curKey, defaultValue, type, isSetter, isFactory) {\n var result = [];\n var len = defaultValue.length;\n for (var i = 0; i < len; i++) {\n var curType = type;\n if (isFactory) {\n curType = type(defaultValue[i]);\n }\n if (isSetter) {\n var inst = createInstance(curType, [instance, curKey, {}, true]);\n inst.setProperties(defaultValue[i], true);\n result.push(inst);\n }\n else {\n result.push(createInstance(curType, [instance, curKey, defaultValue[i], true]));\n }\n }\n return result;\n}\n/**\n * Returns the properties of the object\n * @param {Object} defaultValue\n * @param {string} curKey\n */\nfunction propertyGetter(defaultValue, curKey) {\n return function () {\n if (!this.properties.hasOwnProperty(curKey)) {\n this.properties[curKey] = defaultValue;\n }\n return this.properties[curKey];\n };\n}\n/**\n * Set the properties for the object\n * @param {Object} defaultValue\n * @param {string} curKey\n */\nfunction propertySetter(defaultValue, curKey) {\n return function (newValue) {\n if (this.properties[curKey] !== newValue) {\n var oldVal = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n this.saveChanges(curKey, newValue, oldVal);\n this.properties[curKey] = newValue;\n }\n };\n}\n/**\n * Returns complex objects\n */\nfunction complexGetter(defaultValue, curKey, type) {\n return function () {\n return getObject(this, curKey, defaultValue, type);\n };\n}\n/**\n * Sets complex objects\n */\nfunction complexSetter(defaultValue, curKey, type) {\n return function (newValue) {\n getObject(this, curKey, defaultValue, type).setProperties(newValue);\n };\n}\nfunction complexFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n return getObject(this, curKey, defaultValue, curType);\n };\n}\nfunction complexFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var curType = type(newValue);\n getObject(this, curKey, defaultValue, curType).setProperties(newValue);\n };\n}\nfunction complexArrayGetter(defaultValue, curKey, type) {\n return function () {\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, type, false);\n this.properties[curKey] = defCollection;\n }\n return this.properties[curKey];\n };\n}\nfunction complexArraySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var oldValueCollection = getObjectArray(this, curKey, defaultValue, type, false);\n var newValCollection = getObjectArray(this, curKey, newValue, type, true);\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[curKey] = newValCollection;\n };\n}\nfunction complexArrayFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var oldValueCollection = getObjectArray(this, curKey, defaultValue, type, false, true);\n var newValCollection = getObjectArray(this, curKey, newValue, type, true, true);\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[curKey] = newValCollection;\n };\n}\nfunction complexArrayFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, curType, false);\n this.properties[curKey] = defCollection;\n }\n return this.properties[curKey];\n };\n}\n/**\n * Method used to create property. General syntax below.\n * @param {T} defaultValue? - Specifies the default value of property.\n * ```\n * @Property('TypeScript')\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Property(defaultValue) {\n return function (target, key) {\n var propertyDescriptor = {\n set: propertySetter(defaultValue, key),\n get: propertyGetter(defaultValue, key),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'prop', defaultValue);\n };\n}\n/**\n * Method used to create complex property. General syntax below.\n * @param {T} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * ```\n * @Complex({},Type)\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Complex(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexSetter(defaultValue, key, type),\n get: complexGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex Factory property. General syntax below.\n * @param {Function} defaultType - Specifies the default value of property.\n * @param {Function} type - Specifies the class factory type of complex object.\n * ```\n * @ComplexFactory(defaultType, factoryFunction)\n * propertyName: Type1 | Type2;\n * ```\n * @private\n */\nexport function ComplexFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexFactorySetter({}, key, type),\n get: complexFactoryGetter({}, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', {}, type);\n };\n}\n/**\n * Method used to create complex array property. General syntax below.\n * @param {T[]} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Collection(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArraySetter(defaultValue, key, type),\n get: complexArrayGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex factory array property. General syntax below.\n * @param {T[]} defaultType - Specifies the default type of property.\n * @param {Function} type - Specifies the class type of complex object.\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function CollectionFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArrayFactorySetter([], key, type),\n get: complexArrayFactoryGetter([], key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', {}, type);\n };\n}\n/**\n * Method used to create event property. General syntax below.\n * @param {Function} defaultValue? - Specifies the default value of property.\n * @param {boolean} isComplex? - Specifies the whether it is complex object.\n * ```\n * @Event(()=>{return true;})\n * ```\n * @private\n */\nexport function Event() {\n return function (target, key) {\n var eventDescriptor = {\n set: function (newValue) {\n var oldValue = this.properties[key];\n if (oldValue !== newValue) {\n var finalContext = getParentContext(this, key);\n if (isUndefined(oldValue) === false) {\n finalContext.context.removeEventListener(finalContext.prefix, oldValue);\n }\n finalContext.context.addEventListener(finalContext.prefix, newValue);\n this.properties[key] = newValue;\n }\n },\n get: propertyGetter(undefined, key),\n enumerable: true,\n configurable: true\n };\n Object.defineProperty(target, key, eventDescriptor);\n addPropertyCollection(target, key, 'event');\n };\n}\n/**\n * NotifyPropertyChanges is triggers the call back when the property has been changed.\n *\n * ```\n * @NotifyPropertyChanges\n * class DemoClass implements INotifyPropertyChanged {\n *\n * @Property()\n * property1: string;\n *\n * dataBind: () => void;\n *\n * constructor() { }\n *\n * onPropertyChanged(newProp: any, oldProp: any) {\n * // Called when property changed\n * }\n * }\n * ```\n * @private\n */\nexport function NotifyPropertyChanges(classConstructor) {\n /** Need to code */\n}\n/**\n * Method used to create the builderObject for the target component.\n * @private\n */\nfunction addPropertyCollection(target, key, propertyType, defaultValue, type) {\n if (isUndefined(target.propList)) {\n target.propList = {\n props: [],\n complexProps: [],\n colProps: [],\n events: [],\n propNames: [],\n complexPropNames: [],\n colPropNames: [],\n eventNames: []\n };\n }\n /* tslint:disable no-any */\n target.propList[propertyType + 's'].push({\n propertyName: key,\n defaultValue: defaultValue,\n type: type\n });\n target.propList[propertyType + 'Names'].push(key);\n /* tslint:enable no-any */\n}\n/**\n * Returns an object containing the builder properties\n * @param {Function} component\n * @private\n */\nfunction getBuilderProperties(component) {\n if (isUndefined(component.prototype.builderObject)) {\n component.prototype.builderObject = {\n properties: {}, propCollections: [], add: function () {\n this.isPropertyArray = true;\n this.propCollections.push(extend({}, this.properties, {}));\n }\n };\n var rex = /complex/;\n for (var _i = 0, _a = Object.keys(component.prototype.propList); _i < _a.length; _i++) {\n var key = _a[_i];\n var _loop_1 = function (prop) {\n if (rex.test(key)) {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n var childType = {};\n merge(childType, getBuilderProperties(prop.type));\n value(childType);\n var tempValue;\n if (!childType.isPropertyArray) {\n tempValue = extend({}, childType.properties, {});\n }\n else {\n tempValue = childType.propCollections;\n }\n this.properties[prop.propertyName] = tempValue;\n childType.properties = {};\n childType.propCollections = [];\n childType.isPropertyArray = false;\n return this;\n };\n }\n else {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n this.properties[prop.propertyName] = value;\n return this;\n };\n }\n };\n for (var _b = 0, _c = component.prototype.propList[key]; _b < _c.length; _b++) {\n var prop = _c[_b];\n _loop_1(prop);\n }\n }\n }\n return component.prototype.builderObject;\n}\n/**\n * Method used to create builder for the components\n * @param {any} component -specifies the target component for which builder to be created.\n * @private\n */\nexport function CreateBuilder(component) {\n var builderFunction = function (element) {\n this.element = element;\n return this;\n };\n var instanceFunction = function (element) {\n if (!builderFunction.prototype.hasOwnProperty('create')) {\n builderFunction.prototype = getBuilderProperties(component);\n builderFunction.prototype.create = function () {\n var temp = extend({}, {}, this.properties);\n this.properties = {};\n return new component(temp, this.element);\n };\n }\n return new builderFunction(element);\n };\n return instanceFunction;\n}\n/**\n * Returns parent options for the object\n * @param {Object} context\n * @param {string} prefix\n * @private\n */\nfunction getParentContext(context, prefix) {\n if (context.hasOwnProperty('parentObj') === false) {\n return { context: context, prefix: prefix };\n }\n else {\n var curText = getValue('propName', context);\n if (curText) {\n prefix = curText + '-' + prefix;\n }\n return getParentContext(getValue('parentObj', context), prefix);\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { createElement, selectAll, closest } from './dom';\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { EventHandler } from './event-handler';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\n/**\n * The Animation framework provide options to animate the html DOM elements\n * ```typescript\n * let animeObject = new Animation({\n * name: 'SlideLeftIn',\n * duration: 1000\n * });\n * animeObject.animate('#anime1');\n * animeObject.animate('#anime2', { duration: 500 });\n * ```\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation(options) {\n var _this = _super.call(this, options, undefined) || this;\n /**\n * @private\n */\n _this.easing = {\n ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',\n linear: 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',\n easeIn: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)',\n easeOut: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)',\n easeInOut: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',\n elasticInOut: 'cubic-bezier(0.5,-0.58,0.38,1.81)',\n elasticIn: 'cubic-bezier(0.17,0.67,0.59,1.81)',\n elasticOut: 'cubic-bezier(0.7,-0.75,0.99,1.01)'\n };\n return _this;\n }\n Animation_1 = Animation;\n /**\n * Applies animation to the current element.\n * @param {string | HTMLElement} element - Element which needs to be animated.\n * @param {AnimationModel} options - Overriding default animation settings.\n * @return {void}\n */\n Animation.prototype.animate = function (element, options) {\n options = !options ? {} : options;\n var model = this.getModel(options);\n if (typeof element === 'string') {\n var elements = Array.prototype.slice.call(selectAll(element, document));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element_1 = elements_1[_i];\n model.element = element_1;\n Animation_1.delayAnimation(model);\n }\n }\n else {\n model.element = element;\n Animation_1.delayAnimation(model);\n }\n };\n /**\n * Stop the animation effect on animated element.\n * @param {HTMLElement} element - Element which needs to be stop the animation.\n * @param {AnimationOptions} model - Handling the animation model at stop function.\n * @return {void}\n */\n Animation.stop = function (element, model) {\n element.style.animation = '';\n element.removeAttribute('e-animate');\n var animationId = element.getAttribute('e-animation-id');\n if (animationId) {\n var frameId = parseInt(animationId, 10);\n cancelAnimationFrame(frameId);\n element.removeAttribute('e-animation-id');\n }\n if (model && model.end) {\n model.end.call(this, model);\n }\n };\n /**\n * Set delay to animation element\n * @param {AnimationModel} model\n * @returns {void}\n */\n Animation.delayAnimation = function (model) {\n if (model.delay) {\n setTimeout(function () { Animation_1.applyAnimation(model); }, model.delay);\n }\n else {\n Animation_1.applyAnimation(model);\n }\n };\n /**\n * Triggers animation\n * @param {AnimationModel} model\n * @returns {void}\n */\n Animation.applyAnimation = function (model) {\n var _this = this;\n model.timeStamp = 0;\n var step = 0;\n var timerId = 0;\n var startTime = 0;\n var prevTimeStamp = 0;\n var duration = model.duration;\n model.element.setAttribute('e-animate', 'true');\n var startAnimation = function (timeStamp) {\n try {\n if (timeStamp) {\n // let step: number = model.timeStamp = timeStamp - startTime;\n /** phantomjs workaround for timestamp fix */\n prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp;\n model.timeStamp = (timeStamp + model.timeStamp) - prevTimeStamp;\n prevTimeStamp = timeStamp;\n /** phantomjs workaround end */\n // trigger animation begin event\n if (!step && model.begin) {\n model.begin.call(_this, model);\n }\n step = step + 1;\n var avg = model.timeStamp / step;\n if (model.timeStamp < duration && model.timeStamp + avg < duration && model.element.getAttribute('e-animate')) {\n // apply animation effect to the current element \n model.element.style.animation = model.name + ' ' + model.duration + 'ms ' + model.timingFunction;\n if (model.progress) {\n model.progress.call(_this, model);\n }\n // repeat requestAnimationFrame \n requestAnimationFrame(startAnimation);\n }\n else {\n // clear requestAnimationFrame\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n model.element.removeAttribute('e-animate');\n model.element.style.animation = '';\n if (model.end) {\n model.end.call(_this, model);\n }\n }\n }\n else {\n startTime = performance.now();\n // set initial requestAnimationFrame\n timerId = requestAnimationFrame(startAnimation);\n model.element.setAttribute('e-animation-id', timerId.toString());\n }\n }\n catch (e) {\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n if (model.fail) {\n model.fail.call(_this, e);\n }\n }\n };\n startAnimation();\n };\n /**\n * Returns Animation Model\n * @param {AnimationModel} options\n * @returns {AnimationModel}\n */\n Animation.prototype.getModel = function (options) {\n return {\n name: options.name || this.name,\n delay: options.delay || this.delay,\n duration: (options.duration !== undefined ? options.duration : this.duration),\n begin: options.begin || this.begin,\n end: options.end || this.end,\n fail: options.fail || this.fail,\n progress: options.progress || this.progress,\n timingFunction: this.easing[options.timingFunction] ? this.easing[options.timingFunction] :\n (options.timingFunction || this.easing[this.timingFunction])\n };\n };\n /**\n * @private\n */\n Animation.prototype.onPropertyChanged = function (newProp, oldProp) {\n // no code needed\n };\n /**\n * Returns module name as animation\n * @private\n */\n Animation.prototype.getModuleName = function () {\n return 'animation';\n };\n /**\n * @private\n */\n Animation.prototype.destroy = function () {\n //Override base destroy;\n };\n __decorate([\n Property('FadeIn')\n ], Animation.prototype, \"name\", void 0);\n __decorate([\n Property(400)\n ], Animation.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], Animation.prototype, \"timingFunction\", void 0);\n __decorate([\n Property(0)\n ], Animation.prototype, \"delay\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"begin\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"end\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"fail\", void 0);\n Animation = Animation_1 = __decorate([\n NotifyPropertyChanges\n ], Animation);\n return Animation;\n var Animation_1;\n}(Base));\nexport { Animation };\n/**\n * Ripple provides material theme's wave effect when an element is clicked\n * ```html\n *
\n * \n * ```\n * @private\n * @param HTMLElement element - Target element\n * @param RippleOptions rippleOptions - Ripple options .\n */\nexport function rippleEffect(element, rippleOptions, done) {\n var rippleModel = getRippleModel(rippleOptions);\n if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {\n return Function;\n }\n element.setAttribute('data-ripple', 'true');\n EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });\n EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, rippleOptions: rippleModel, done: done });\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n if (Browser.isPointer) {\n EventHandler.add(element, 'transitionend', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n }\n return (function () {\n element.removeAttribute('data-ripple');\n EventHandler.remove(element, 'mousedown', rippleHandler);\n EventHandler.remove(element, 'mouseup', rippleUpHandler);\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n EventHandler.remove(element, 'transitionend', rippleLeaveHandler);\n });\n}\nfunction getRippleModel(rippleOptions) {\n var rippleModel = {\n selector: rippleOptions && rippleOptions.selector ? rippleOptions.selector : null,\n ignore: rippleOptions && rippleOptions.ignore ? rippleOptions.ignore : null,\n rippleFlag: rippleOptions && rippleOptions.rippleFlag,\n isCenterRipple: rippleOptions && rippleOptions.isCenterRipple,\n duration: rippleOptions && rippleOptions.duration ? rippleOptions.duration : 350\n };\n return rippleModel;\n}\n/**\n * Handler for ripple event\n * @param {MouseEvent} e\n * @returns {void}\n * @private\n */\nfunction rippleHandler(e) {\n var target = (e.target);\n var selector = this.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (this.rippleOptions && closest(target, this.rippleOptions.ignore))) {\n return;\n }\n var offset = element.getBoundingClientRect();\n var offsetX = e.pageX - document.body.scrollLeft;\n var offsetY = e.pageY - document.body.scrollTop;\n var pageX = Math.max(Math.abs(offsetX - offset.left), Math.abs(offsetX - offset.right));\n var pageY = Math.max(Math.abs(offsetY - offset.top), Math.abs(offsetY - offset.bottom));\n var radius = Math.sqrt(pageX * pageX + pageY * pageY);\n var diameter = radius * 2 + 'px';\n var x = offsetX - offset.left - radius;\n var y = offsetY - offset.top - radius;\n if (this.rippleOptions && this.rippleOptions.isCenterRipple) {\n x = 0;\n y = 0;\n diameter = '100%';\n }\n element.classList.add('e-ripple');\n var duration = this.rippleOptions.duration.toString();\n var styles = 'width: ' + diameter + ';height: ' + diameter + ';left: ' + x + 'px;top: ' + y + 'px;' +\n 'transition-duration: ' + duration + 'ms;';\n var rippleElement = createElement('div', { className: 'e-ripple-element', styles: styles });\n element.appendChild(rippleElement);\n window.getComputedStyle(rippleElement).getPropertyValue('opacity');\n rippleElement.style.transform = 'scale(1)';\n if (element !== this.parent) {\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: this.parent, rippleOptions: this.rippleOptions });\n }\n}\n/**\n * Handler for ripple element mouse up event\n * @param {MouseEvent} e\n * @returns {void}\n * @private\n */\nfunction rippleUpHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for ripple element mouse move event\n * @param {MouseEvent} e\n * @returns {void}\n * @private\n */\nfunction rippleLeaveHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for removing ripple element\n * @param {MouseEvent} e\n * @param {rippleArgs} eventArgs\n * @returns {void}\n * @private\n */\nfunction removeRipple(e, eventArgs) {\n var duration = eventArgs.rippleOptions.duration;\n var target = (e.target);\n var selector = eventArgs.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (element && element.className.indexOf('e-ripple') === -1)) {\n return;\n }\n var rippleElements = selectAll('.e-ripple-element', element);\n var rippleElement = rippleElements[rippleElements.length - 1];\n if (rippleElement) {\n rippleElement.style.opacity = '0.5';\n }\n if (eventArgs.parent !== element) {\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n }\n /* tslint:disable:align */\n setTimeout(function () {\n if (rippleElement && rippleElement.parentNode) {\n rippleElement.parentNode.removeChild(rippleElement);\n }\n if (!element.getElementsByClassName('e-ripple-element').length) {\n element.classList.remove('e-ripple');\n }\n if (eventArgs.done) {\n eventArgs.done(e);\n }\n }, duration);\n}\nexport var isRippleEnabled = false;\n/**\n * Animation Module provides support to enable ripple effect functionality to Essential JS 2 components.\n * @param {boolean} isRipple Specifies the boolean value to enable or disable ripple effect.\n * @returns {boolean}\n */\nexport function enableRipple(isRipple) {\n isRippleEnabled = isRipple;\n return isRippleEnabled;\n}\n","import { DateFormat } from './intl/date-formatter';\nimport { NumberFormat } from './intl/number-formatter';\nimport { DateParser } from './intl/date-parser';\nimport { NumberParser } from './intl/number-parser';\nimport { IntlBase } from './intl/intl-base';\nimport { extend, getValue } from './util';\nimport { Observer } from './observer';\n/**\n * Specifies the observer used for external change detection.\n */\nexport var onIntlChange = new Observer();\n/**\n * Specifies the default rtl status for EJ2 components.\n */\nexport var rightToLeft = false;\n/**\n * Specifies the CLDR data loaded for internationalization functionalities.\n * @private\n */\nexport var cldrData = {};\n/**\n * Specifies the default culture value to be considered.\n * @private\n */\nexport var defaultCulture = 'en-US';\n/**\n * Specifies default currency code to be considered\n * @private\n */\nexport var defaultCurrencyCode = 'USD';\nvar mapper = ['numericObject', 'dateObject'];\n/**\n * Internationalization class provides support to parse and format the number and date object to the desired format.\n * ```typescript\n * // To set the culture globally\n * setCulture('en-GB');\n *\n * // To set currency code globally\n * setCurrencyCode('EUR');\n *\n * //Load cldr data\n * loadCldr(gregorainData);\n * loadCldr(timeZoneData);\n * loadCldr(numbersData);\n * loadCldr(numberSystemData);\n *\n * // To use formatter in component side\n * let Intl:Internationalization = new Internationalization();\n *\n * // Date formatting\n * let dateFormatter: Function = Intl.getDateFormat({skeleton:'long',type:'dateTime'});\n * dateFormatter(new Date('11/2/2016'));\n * dateFormatter(new Date('25/2/2030'));\n * Intl.formatDate(new Date(),{skeleton:'E'});\n *\n * //Number formatting\n * let numberFormatter: Function = Intl.getNumberFormat({skeleton:'C5'})\n * numberFormatter(24563334);\n * Intl.formatNumber(123123,{skeleton:'p2'});\n *\n * // Date parser\n * let dateParser: Function = Intl.getDateParser({skeleton:'short',type:'time'});\n * dateParser('10:30 PM');\n * Intl.parseDate('10',{skeleton:'H'});\n * ```\n */\nvar Internationalization = /** @class */ (function () {\n function Internationalization(cultureName) {\n if (cultureName) {\n this.culture = cultureName;\n }\n }\n /**\n * Returns the format function for given options.\n * @param {DateFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getDateFormat = function (options) {\n return DateFormat.dateFormat(this.getCulture(), options || { type: 'date', skeleton: 'short' }, cldrData);\n };\n /**\n * Returns the format function for given options.\n * @param {NumberFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getNumberFormat = function (options) {\n if (options && !options.currency) {\n options.currency = defaultCurrencyCode;\n }\n return NumberFormat.numberFormatter(this.getCulture(), options || {}, cldrData);\n };\n /**\n * Returns the parser function for given options.\n * @param {DateFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function}\n * @private\n */\n Internationalization.prototype.getDateParser = function (options) {\n return DateParser.dateParser(this.getCulture(), options || { skeleton: 'short', type: 'date' }, cldrData);\n };\n /**\n * Returns the parser function for given options.\n * @param {NumberFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getNumberParser = function (options) {\n return NumberParser.numberParser(this.getCulture(), options || { format: 'N' }, cldrData);\n };\n /**\n * Returns the formatted string based on format options.\n * @param {Number} value - Specifies the number to format.\n * @param {NumberFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string}\n */\n Internationalization.prototype.formatNumber = function (value, option) {\n return this.getNumberFormat(option)(value);\n };\n /**\n * Returns the formatted date string based on format options.\n * @param {Number} value - Specifies the number to format.\n * @param {DateFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string}\n */\n Internationalization.prototype.formatDate = function (value, option) {\n return this.getDateFormat(option)(value);\n };\n /**\n * Returns the date object for given date string and options.\n * @param {string} value - Specifies the string to parse.\n * @param {DateFormatOptions} option - Specifies the parse options in which the date string will be parsed.\n * @returns {Date}\n */\n Internationalization.prototype.parseDate = function (value, option) {\n return this.getDateParser(option)(value);\n };\n /**\n * Returns the number object from the given string value and options.\n * @param {string} value - Specifies the string to parse.\n * @param {NumberFormatOptions} option - Specifies the parse options in which the string number will be parsed.\n * @returns {number}\n */\n Internationalization.prototype.parseNumber = function (value, option) {\n return this.getNumberParser(option)(value);\n };\n /**\n * Returns Native Date Time Pattern\n * @param {DateFormatOptions} option - Specifies the parse options for resultant date time pattern.\n * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.\n * @returns {string}\n * @private\n */\n Internationalization.prototype.getDatePattern = function (option, isExcelFormat) {\n return IntlBase.getActualDateTimeFormat(this.getCulture(), option, cldrData, isExcelFormat);\n };\n /**\n * Returns Native Number Pattern\n * @param {NumberFormatOptions} option - Specifies the parse options for resultant number pattern.\n * @returns {string}\n * @private\n */\n Internationalization.prototype.getNumberPattern = function (option) {\n return IntlBase.getActualNumberFormat(this.getCulture(), option, cldrData);\n };\n Internationalization.prototype.getCulture = function () {\n return this.culture || defaultCulture;\n };\n return Internationalization;\n}());\nexport { Internationalization };\n/**\n * Set the default culture to all EJ2 components\n * @param {string} cultureName - Specifies the culture name to be set as default culture.\n */\nexport function setCulture(cultureName) {\n defaultCulture = cultureName;\n onIntlChange.notify('notifyExternalChange', { 'locale': defaultCulture });\n}\n/**\n * Set the default currency code to all EJ2 components\n * @param {string} currencyCode Specifies the culture name to be set as default culture.\n * @returns {void}\n */\nexport function setCurrencyCode(currencyCode) {\n defaultCurrencyCode = currencyCode;\n onIntlChange.notify('notifyExternalChange', { 'currencyCode': defaultCurrencyCode });\n}\n/**\n * Load the CLDR data into context\n * @param {Object[]} obj Specifies the CLDR data's to be used for formatting and parser.\n * @returns {void}\n */\nexport function loadCldr() {\n var data = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n data[_i] = arguments[_i];\n }\n for (var _a = 0, data_1 = data; _a < data_1.length; _a++) {\n var obj = data_1[_a];\n extend(cldrData, obj, {}, true);\n }\n}\n/**\n * To enable or disable RTL functionality for all components globally.\n * @param {boolean} status - Optional argument Specifies the status value to enable or disable rtl option.\n * @returns {void}\n */\nexport function enableRtl(status) {\n if (status === void 0) { status = true; }\n rightToLeft = status;\n onIntlChange.notify('notifyExternalChange', { enableRtl: rightToLeft });\n}\n/**\n * To get the numeric CLDR object for given culture\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @ignore\n * @private\n */\nexport function getNumericObject(locale, type) {\n /* tslint:disable no-any */\n var numObject = IntlBase.getDependables(cldrData, locale, true)[mapper[0]];\n var dateObject = IntlBase.getDependables(cldrData, locale)[mapper[1]];\n var numSystem = getValue('defaultNumberingSystem', numObject);\n var symbPattern = getValue('symbols-numberSystem-' + numSystem, numObject);\n var pattern = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false);\n return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) });\n}\n/**\n * To get the default date CLDR object.\n * @ignore\n * @private\n */\nexport function getDefaultDateObject() {\n return IntlBase.getDependables(cldrData, '', false)[mapper[1]];\n}\n","/**\n * Template Engine\n */\nvar LINES = new RegExp('\\\\n|\\\\r|\\\\s\\\\s+', 'g');\nvar QUOTES = new RegExp(/'|\"/g);\nvar IF_STMT = new RegExp('if ?\\\\(');\nvar ELSEIF_STMT = new RegExp('else if ?\\\\(');\nvar ELSE_STMT = new RegExp('else');\nvar FOR_STMT = new RegExp('for ?\\\\(');\nvar IF_OR_FOR = new RegExp('(\\/if|\\/for)');\nvar CALL_FUNCTION = new RegExp('\\\\((.*)\\\\)', '');\nvar NOT_NUMBER = new RegExp('^[0-9]+$', 'g');\nvar WORD = new RegExp('[\\\\w\"\\'.\\\\s+]+', 'g');\nvar DBL_QUOTED_STR = new RegExp('\"(.*?)\"', 'g');\nvar exp = new RegExp('\\\\${([^}]*)}', 'g');\n// let cachedTemplate: Object = {};\n/**\n * The function to set regular expression for template expression string.\n * @param {RegExp} value - Value expression.\n * @private\n */\nexport function expression(value) {\n if (value) {\n exp = value;\n }\n return exp;\n}\n// /**\n// * To render the template string from the given data.\n// * @param {string} template - String Template.\n// * @param {Object[]|JSON} data - DataSource for the template.\n// * @param {Object} helper? - custom helper object.\n// */\n// export function template(template: string, data: JSON, helper?: Object): string {\n// let hash: string = hashCode(template);\n// let tmpl: Function;\n// if (!cachedTemplate[hash]) {\n// tmpl = cachedTemplate[hash] = compile(template, helper);\n// } else {\n// tmpl = cachedTemplate[hash];\n// }\n// return tmpl(data);\n// }\n/**\n * Compile the template string into template function.\n * @param {string} template - The template string which is going to convert.\n * @param {Object} helper? - Helper functions as an object.\n * @private\n */\nexport function compile(template, helper) {\n var argName = 'data';\n var evalExpResult = evalExp(template, argName, helper);\n var fnCode = \"var str=\\\"\" + evalExpResult + \"\\\"; return str;\";\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var fn = new Function(argName, fnCode);\n return fn.bind(helper);\n}\n// function used to evaluate the function expression\nfunction evalExp(str, nameSpace, helper) {\n /**\n * Variable containing Local Keys\n */\n var localKeys = [];\n return str.replace(LINES, '').replace(DBL_QUOTED_STR, '\\'$1\\'').replace(exp, function (match, cnt, offset, matchStr) {\n var matches = cnt.match(CALL_FUNCTION);\n // matches to detect any function calls\n if (matches) {\n var rlStr = matches[1];\n if (ELSEIF_STMT.test(cnt)) {\n //handling else-if condition\n cnt = '\";} ' + cnt.replace(matches[1], rlStr.replace(WORD, function (str) {\n str = str.trim();\n return addNameSpace(str, !(QUOTES.test(str)) && (localKeys.indexOf(str) === -1), nameSpace, localKeys);\n })) + '{ \\n str = str + \"';\n }\n else if (IF_STMT.test(cnt)) {\n //handling if condition\n cnt = '\"; ' + cnt.replace(matches[1], rlStr.replace(WORD, function (strs) {\n strs = strs.trim();\n return addNameSpace(strs, !(QUOTES.test(strs)) && (localKeys.indexOf(strs) === -1), nameSpace, localKeys);\n })) + '{ \\n str = str + \"';\n }\n else if (FOR_STMT.test(cnt)) {\n //handling for condition\n var rlStr_1 = matches[1].split(' of ');\n // replace for each into actual JavaScript\n cnt = '\"; ' + cnt.replace(matches[1], function (mtc) {\n localKeys.push(rlStr_1[0]);\n localKeys.push(rlStr_1[0] + 'Index');\n return 'var i=0; i < ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys) + '.length; i++';\n }) + '{ \\n ' + rlStr_1[0] + '= ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys)\n + '[i]; \\n var ' + rlStr_1[0] + 'Index=i; \\n str = str + \"';\n }\n else {\n //helper function handling\n var fnStr = cnt.split('(');\n var fNameSpace = (helper && helper.hasOwnProperty(fnStr[0]) ? 'this.' : 'global');\n fNameSpace = (/\\./.test(fnStr[0]) ? '' : fNameSpace);\n cnt = '\" + ' + (fNameSpace === 'global' ? '' : fNameSpace) +\n cnt.replace(rlStr, addNameSpace(matches[1].replace(',', nameSpace + '.'), (fNameSpace === 'global' ? false : true), nameSpace, localKeys)) +\n '+\"';\n }\n }\n else if (ELSE_STMT.test(cnt)) {\n //handling else condition\n cnt = '\"; ' + cnt.replace(ELSE_STMT, '} else { \\n str = str + \"');\n }\n else if (!!cnt.match(IF_OR_FOR)) {\n // close condition \n cnt = cnt.replace(IF_OR_FOR, '\"; \\n } \\n str = str + \"');\n }\n else {\n // evaluate normal expression\n cnt = '\"+' + addNameSpace(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '+\"';\n }\n return cnt;\n });\n}\nfunction addNameSpace(str, addNS, nameSpace, ignoreList) {\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1) ? nameSpace + '.' + str : str);\n}\n// // Create hashCode for template string to storeCached function\n// function hashCode(str: string): string {\n// return str.split('').reduce((a: number, b: string) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0).toString();\n// }\n","/**\n * Template Engine Bridge\n */\nimport { compile as render } from './template';\nimport { createElement } from './dom';\nvar HAS_ROW = /^[\\n\\r.]+\\ containerWidth) {\n if (overLeft > 0 && overRight <= 0) {\n position.left = containerRight - elemData.width;\n }\n else if (overRight > 0 && overLeft <= 0) {\n position.left = containerLeft;\n }\n else {\n position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;\n }\n }\n else if (overLeft > 0) {\n position.left += overLeft;\n }\n else if (overRight > 0) {\n position.left -= overRight;\n }\n }\n if (axis.Y) {\n var containerHeight = targetContainer ? getTargetContainerHeight() : getViewPortHeight();\n var containerTop = ContainerTop();\n var containerBottom = ContainerBottom();\n var overTop = containerTop - position.top;\n var overBottom = position.top + elemData.height - containerBottom;\n if (elemData.height > containerHeight) {\n if (overTop > 0 && overBottom <= 0) {\n position.top = containerBottom - elemData.height;\n }\n else if (overBottom > 0 && overTop <= 0) {\n position.top = containerTop;\n }\n else {\n position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;\n }\n }\n else if (overTop > 0) {\n position.top += overTop;\n }\n else if (overBottom > 0) {\n position.top -= overBottom;\n }\n }\n return position;\n}\nexport function isCollide(element, viewPortElement, x, y) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n var elemOffset = calculatePosition(element, 'left', 'top');\n if (x) {\n elemOffset.left = x;\n }\n if (y) {\n elemOffset.top = y;\n }\n var data = [];\n targetContainer = viewPortElement;\n parentDocument = element.ownerDocument;\n var elementRect = element.getBoundingClientRect();\n var top = elemOffset.top;\n var left = elemOffset.left;\n var right = elemOffset.left + elementRect.width;\n var bottom = elemOffset.top + elementRect.height;\n var topData = '';\n var leftData = '';\n var yAxis = topCollideCheck(top, bottom);\n var xAxis = leftCollideCheck(left, right);\n if (yAxis.topSide) {\n data.push('top');\n }\n if (xAxis.rightSide) {\n data.push('right');\n }\n if (xAxis.leftSide) {\n data.push('left');\n }\n if (yAxis.bottomSide) {\n data.push('bottom');\n }\n return data;\n}\nexport function flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, axis, fixedParent) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: true, Y: true }; }\n if (!target || !element || !positionX || !positionY || (!axis.X && !axis.Y)) {\n return;\n }\n var tEdge = { TL: null,\n TR: null,\n BL: null,\n BR: null };\n var eEdge = {\n TL: null,\n TR: null,\n BL: null,\n BR: null\n };\n var elementRect = element.getBoundingClientRect();\n var pos = {\n posX: positionX, posY: positionY, offsetX: offsetX, offsetY: offsetY, position: { left: 0, top: 0 }\n };\n targetContainer = viewPortElement;\n parentDocument = target.ownerDocument;\n updateElementData(target, tEdge, pos, fixedParent);\n setPosition(eEdge, pos, elementRect);\n if (axis.X) {\n leftFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n if (axis.Y && tEdge.TL.top > -1) {\n topFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n setPopup(element, pos);\n}\nfunction setPopup(element, pos) {\n var left = 0;\n var top = 0;\n if (element.offsetParent != null\n && (getComputedStyle(element.offsetParent).position === 'absolute' ||\n getComputedStyle(element.offsetParent).position === 'relative')) {\n var data = calculatePosition(element.offsetParent, 'left', 'top');\n left = data.left;\n top = data.top;\n }\n element.style.top = (pos.position.top + pos.offsetY - (top)) + 'px';\n element.style.left = (pos.position.left + pos.offsetX - (left)) + 'px';\n}\nfunction updateElementData(target, edge, pos, fixedParent) {\n pos.position = calculatePosition(target, pos.posX, pos.posY, fixedParent);\n edge.TL = calculatePosition(target, 'left', 'top', fixedParent);\n edge.TR = calculatePosition(target, 'right', 'top', fixedParent);\n edge.BR = calculatePosition(target, 'left', 'bottom', fixedParent);\n edge.BL = calculatePosition(target, 'right', 'bottom', fixedParent);\n}\nfunction setPosition(eStatus, pos, elementRect) {\n eStatus.TL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX };\n eStatus.TR = { top: eStatus.TL.top, left: eStatus.TL.left + elementRect.width };\n eStatus.BL = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left };\n eStatus.BR = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left + elementRect.width };\n}\nfunction leftCollideCheck(left, right) {\n var leftSide = false;\n var rightSide = false;\n if (((left - getBodyScrollLeft()) < ContainerLeft())) {\n leftSide = true;\n }\n if (right > ContainerRight()) {\n rightSide = true;\n }\n return { leftSide: leftSide, rightSide: rightSide };\n}\nfunction leftFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = leftCollideCheck(edge.TL.left, edge.TR.left);\n if ((tEdge.TL.left - getBodyScrollLeft()) <= ContainerLeft()) {\n collideSide.leftSide = false;\n }\n if (tEdge.TR.left >= ContainerRight()) {\n collideSide.rightSide = false;\n }\n if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {\n if (pos.posX === 'right') {\n pos.posX = 'left';\n }\n else {\n pos.posX = 'right';\n }\n pos.offsetX = pos.offsetX + elementRect.width;\n pos.offsetX = -1 * pos.offsetX;\n pos.position = calculatePosition(target, pos.posX, pos.posY);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n leftFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\nfunction topFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = topCollideCheck(edge.TL.top, edge.BL.top);\n if ((tEdge.TL.top - getBodyScrollTop()) <= ContainerTop()) {\n collideSide.topSide = false;\n }\n if (tEdge.BL.top >= ContainerBottom()) {\n collideSide.bottomSide = false;\n }\n if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {\n if (pos.posY === 'top') {\n pos.posY = 'bottom';\n }\n else {\n pos.posY = 'top';\n }\n pos.offsetY = pos.offsetY + elementRect.height;\n pos.offsetY = -1 * pos.offsetY;\n pos.position = calculatePosition(target, pos.posX, pos.posY);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n topFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\nfunction topCollideCheck(top, bottom) {\n var topSide = false;\n var bottomSide = false;\n if ((top - getBodyScrollTop()) < ContainerTop()) {\n topSide = true;\n }\n if (bottom > ContainerBottom()) {\n bottomSide = true;\n }\n return { topSide: topSide, bottomSide: bottomSide };\n}\nfunction getTargetContainerWidth() {\n return targetContainer.getBoundingClientRect().width;\n}\nfunction getTargetContainerHeight() {\n return targetContainer.getBoundingClientRect().height;\n}\nfunction getTargetContainerLeft() {\n return targetContainer.getBoundingClientRect().left;\n}\nfunction getTargetContainerTop() {\n return targetContainer.getBoundingClientRect().top;\n}\nfunction ContainerTop() {\n if (targetContainer) {\n return getTargetContainerTop();\n }\n return 0;\n}\nfunction ContainerLeft() {\n if (targetContainer) {\n return getTargetContainerLeft();\n }\n return 0;\n}\nfunction ContainerRight() {\n if (targetContainer) {\n return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());\n }\n return (getBodyScrollLeft() + getViewPortWidth());\n}\nfunction ContainerBottom() {\n if (targetContainer) {\n return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());\n }\n return (getBodyScrollTop() + getViewPortHeight());\n}\nfunction getBodyScrollTop() {\n // if(targetContainer)\n // return targetContainer.scrollTop;\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\nfunction getBodyScrollLeft() {\n // if(targetContainer)\n // return targetContainer.scrollLeft;\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\nfunction getViewPortHeight() {\n return window.innerHeight;\n}\nfunction getViewPortWidth() {\n return window.innerWidth;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { setStyleAttribute, addClass, removeClass, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { calculatePosition, calculateRelativeBasedPosition } from '../common/position';\nimport { Animation, Property, Event, Component } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { flip, fit, isCollide } from '../common/collision';\n/**\n * Specifies the offset position values.\n */\nvar PositionData = /** @class */ (function (_super) {\n __extends(PositionData, _super);\n function PositionData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('left')\n ], PositionData.prototype, \"X\", void 0);\n __decorate([\n Property('top')\n ], PositionData.prototype, \"Y\", void 0);\n return PositionData;\n}(ChildProperty));\nexport { PositionData };\n// don't use space in classNames\nvar CLASSNAMES = {\n ROOT: 'e-popup',\n RTL: 'e-rtl',\n OPEN: 'e-popup-open',\n CLOSE: 'e-popup-close'\n};\n/**\n * Represents the Popup Component\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.fixedParent = false;\n return _this;\n }\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n Popup.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX':\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n case 'offsetY':\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * gets the persisted state properties of the Component.\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n */\n Popup.prototype.destroy = function () {\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL);\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.setEnableRtl();\n this.setContent();\n this.wireEvents();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' ? document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n */\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = relateToElement.getBoundingClientRect();\n if (!rect.height || !rect.width) {\n return false;\n }\n if (scrollElement.getBoundingClientRect) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n this.element.appendChild(this.content);\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n */\n Popup.prototype.refreshPosition = function (target) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n this.checkCollision();\n };\n Popup.prototype.reposition = function () {\n var pos;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if (relateToElement) {\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {\n var eleRect = ele.getBoundingClientRect();\n var anchorRect = anchorEle.getBoundingClientRect();\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width - eleRect.width);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n var data = fit(this.element, this.viewPortElement, param);\n this.element.style.left = data.left + 'px';\n this.element.style.top = data.top + 'px';\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.\n * @param { Function } collision? - To pass the collision function.\n */\n Popup.prototype.show = function (animationOptions) {\n var _this = this;\n if (this.zIndex === 1000) {\n this.zIndex = getZindexPartial(this.element);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n * @param { AnimationModel } animationOptions? - To give the animation options.\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n };\n /**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\nexport { Popup };\n/**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @private\n */\nexport function getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nexport function getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n //Body direct children element traversal\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var finalValue = parentZindex.concat(childrenZindex);\n return Math.max.apply(Math, finalValue) + 1;\n}\n","import { isNullOrUndefined, classList } from '@syncfusion/ej2-base';\nvar globalTimeOut = {};\nvar spinTemplate = null;\nvar spinCSSClass = null;\nvar DEFT_MAT_WIDTH = 30;\nvar DEFT_FAB_WIDTH = 30;\nvar DEFT_BOOT_WIDTH = 30;\nvar CLS_SHOWSPIN = 'e-spin-show';\nvar CLS_HIDESPIN = 'e-spin-hide';\nvar CLS_MATERIALSPIN = 'e-spin-material';\nvar CLS_FABRICSPIN = 'e-spin-fabric';\nvar CLS_BOOTSPIN = 'e-spin-bootstrap';\nvar CLS_HIGHCONTRASTSPIN = 'e-spin-high-contrast';\nvar CLS_SPINWRAP = 'e-spinner-pane';\nvar CLS_SPININWRAP = 'e-spinner-inner';\nvar CLS_SPINCIRCLE = 'e-path-circle';\nvar CLS_SPINARC = 'e-path-arc';\nvar CLS_SPINLABEL = 'e-spin-label';\nvar CLS_SPINTEMPLATE = 'e-spin-template';\n/**\n * Create a spinner for the specified target element.\n * ```\n * E.g : createSpinner({ target: targetElement, width: '34px', label: 'Loading..' });\n * ```\n * @param args\n * @private\n */\nexport function createSpinner(args) {\n var radius;\n var container = create_spinner_container(args.target);\n if (!isNullOrUndefined(args.cssClass)) {\n container.wrap.classList.add(args.cssClass);\n }\n if (!isNullOrUndefined(args.template) || !isNullOrUndefined(spinTemplate)) {\n var template = !isNullOrUndefined(args.template) ? args.template : spinTemplate;\n container.wrap.classList.add(CLS_SPINTEMPLATE);\n replaceContent(container.wrap, template, spinCSSClass);\n }\n else {\n var theme = !isNullOrUndefined(args.type) ? args.type : getTheme(container.wrap);\n var width = !isNullOrUndefined(args.width) ? args.width : undefined;\n radius = calculateRadius(width, theme);\n setTheme(theme, container.wrap, radius);\n if (!isNullOrUndefined(args.label)) {\n createLabel(container.inner_wrap, args.label);\n }\n }\n container.wrap.classList.add(CLS_HIDESPIN);\n}\nfunction createLabel(container, label) {\n var labelEle = document.createElement('div');\n labelEle.classList.add(CLS_SPINLABEL);\n labelEle.textContent = label;\n container.appendChild(labelEle);\n return labelEle;\n}\nfunction createMaterialSpinner(container, radius) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Material', radius: radius };\n create_material_element(container, uniqueID);\n mat_calculate_attributes(radius, container);\n}\nfunction startMatAnimate(container, uniqueID, radius) {\n var globalObject = {};\n var timeOutVar = 0;\n globalTimeOut[uniqueID].timeOut = 0;\n globalObject[uniqueID] = globalVariables(uniqueID, radius, 0, 0);\n var spinnerInfo = { uniqueID: uniqueID, container: container, globalInfo: globalObject, timeOutVar: timeOutVar };\n animateMaterial(spinnerInfo);\n}\nfunction createFabricSpinner(container, radius) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Fabric', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FABRICSPIN);\n fb_calculate_attributes(radius, container, CLS_FABRICSPIN);\n}\nfunction createHighContrastSpinner(container, radius) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'HighContrast', radius: radius };\n create_fabric_element(container, uniqueID, CLS_HIGHCONTRASTSPIN);\n fb_calculate_attributes(radius, container, CLS_HIGHCONTRASTSPIN);\n}\nfunction getTheme(container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n}\nfunction setTheme(theme, container, radius) {\n var innerContainer = container.querySelector('.' + CLS_SPININWRAP);\n var svg = innerContainer.querySelector('svg');\n if (!isNullOrUndefined(svg)) {\n innerContainer.removeChild(svg);\n }\n switch (theme) {\n case 'Material':\n createMaterialSpinner(innerContainer, radius);\n break;\n case 'Fabric':\n createFabricSpinner(innerContainer, radius);\n break;\n case 'Bootstrap':\n createBootstrapSpinner(innerContainer, radius);\n break;\n case 'HighContrast':\n createHighContrastSpinner(innerContainer, radius);\n break;\n }\n}\nfunction createBootstrapSpinner(innerContainer, radius) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap', radius: radius };\n create_bootstrap_element(innerContainer, uniqueID);\n boot_calculate_attributes(innerContainer, radius);\n}\nfunction create_bootstrap_element(innerContainer, uniqueID) {\n var svgBoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n var viewBoxValue = 64;\n var trans = 32;\n var defaultRadius = 2;\n svgBoot.setAttribute('id', uniqueID);\n svgBoot.setAttribute('class', CLS_BOOTSPIN);\n svgBoot.setAttribute('viewBox', '0 0 ' + viewBoxValue + ' ' + viewBoxValue);\n innerContainer.insertBefore(svgBoot, innerContainer.firstChild);\n for (var item = 0; item <= 7; item++) {\n var bootCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n bootCircle.setAttribute('class', CLS_SPINCIRCLE + '_' + item);\n bootCircle.setAttribute('r', defaultRadius + '');\n bootCircle.setAttribute('transform', 'translate(' + trans + ',' + trans + ')');\n svgBoot.appendChild(bootCircle);\n }\n}\nfunction boot_calculate_attributes(innerContainer, radius) {\n var svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n svg.style.width = svg.style.height = radius + 'px';\n var x = 0;\n var y = 0;\n var rad = 24;\n var startArc = 90;\n for (var item = 0; item <= 7; item++) {\n var start = defineArcPoints(x, y, rad, startArc);\n var circleEle = svg.querySelector('.' + CLS_SPINCIRCLE + '_' + item);\n circleEle.setAttribute('cx', start.x + '');\n circleEle.setAttribute('cy', start.y + '');\n startArc = startArc >= 360 ? 0 : startArc;\n startArc = startArc + 45;\n }\n}\nfunction generateSeries(begin, stop) {\n var series = [];\n var start = begin;\n var end = stop;\n var increment = false;\n var count = 1;\n formSeries(start);\n function formSeries(i) {\n series.push(i);\n if (i !== end || count === 1) {\n if (i <= start && i > 1 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n else if (i === 1) {\n i = 7;\n i = parseFloat((i + 0.2).toFixed(2));\n increment = true;\n }\n else if (i < 8 && increment) {\n i = parseFloat((i + 0.2).toFixed(2));\n if (i === 8) {\n increment = false;\n }\n }\n else if (i <= 8 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n ++count;\n formSeries(i);\n }\n }\n return series;\n}\nfunction animateBootstrap(innerContainer) {\n var svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n var id = svg.getAttribute('id');\n for (var i = 1; i <= 8; i++) {\n var circleEle = (innerContainer.getElementsByClassName('e-path-circle_' +\n (i === 8 ? 0 : i))[0]);\n rotation(circleEle, i, i, generateSeries(i, i), id);\n }\n function rotation(circle, start, end, series, id) {\n var count = 0;\n boot_animate(start);\n function boot_animate(radius) {\n if (globalTimeOut[id].isAnimate) {\n ++count;\n circle.setAttribute('r', radius + '');\n if (count >= series.length) {\n count = 0;\n }\n globalTimeOut[id].timeOut = setTimeout(boot_animate.bind(null, series[count]), 18);\n }\n }\n }\n}\nfunction replaceContent(container, template, cssClass) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n var inner = container.querySelector('.e-spinner-inner');\n inner.innerHTML = template;\n}\nfunction calculateRadius(width, theme) {\n var defaultSize = theme === 'Material' ? DEFT_MAT_WIDTH : theme === 'Fabric' ? DEFT_FAB_WIDTH : DEFT_BOOT_WIDTH;\n width = width ? parseFloat(width + '') : defaultSize;\n return theme === 'Bootstrap' ? width : width / 2;\n}\nfunction globalVariables(id, radius, count, previousId) {\n return {\n radius: radius,\n count: count,\n previousId: previousId\n };\n}\nfunction random_generator() {\n var random = '';\n var combine = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n for (var i = 0; i < 5; i++) {\n random += combine.charAt(Math.floor(Math.random() * combine.length));\n }\n return random;\n}\nfunction create_fabric_element(innerContainer, uniqueID, themeClass) {\n var svgFabric = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svgFabric.setAttribute('id', uniqueID);\n svgFabric.setAttribute('class', themeClass);\n var fabricCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n var fabricCircleArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCircleArc.setAttribute('class', CLS_SPINARC);\n innerContainer.insertBefore(svgFabric, innerContainer.firstChild);\n svgFabric.appendChild(fabricCirclePath);\n svgFabric.appendChild(fabricCircleArc);\n}\nfunction create_material_element(innerContainer, uniqueID) {\n var svgMaterial = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svgMaterial.setAttribute('class', CLS_MATERIALSPIN);\n svgMaterial.setAttribute('id', uniqueID);\n var matCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n matCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n innerContainer.insertBefore(svgMaterial, innerContainer.firstChild);\n svgMaterial.appendChild(matCirclePath);\n}\nfunction create_spinner_container(target) {\n var spinnerContainer = document.createElement('div');\n spinnerContainer.classList.add(CLS_SPINWRAP);\n var spinnerInnerContainer = document.createElement('div');\n spinnerInnerContainer.classList.add(CLS_SPININWRAP);\n target.appendChild(spinnerContainer);\n spinnerContainer.appendChild(spinnerInnerContainer);\n return { wrap: spinnerContainer, inner_wrap: spinnerInnerContainer };\n}\nfunction animateMaterial(spinnerInfo) {\n var start = 1;\n var end = 149;\n var duration = 1333;\n var max = 75;\n createCircle(start, end, easeAnimation, duration, spinnerInfo.globalInfo[spinnerInfo.uniqueID].count, max, spinnerInfo);\n spinnerInfo.globalInfo[spinnerInfo.uniqueID].count = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].count % 4;\n}\nfunction createCircle(start, end, easing, duration, count, max, spinnerInfo) {\n var id = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId;\n var startTime = new Date().getTime();\n var change = end - start;\n var diameter = getSize((spinnerInfo.globalInfo[spinnerInfo.uniqueID].radius * 2) + '');\n var strokeSize = getStrokeSize(diameter);\n var rotate = -90 * (spinnerInfo.globalInfo[spinnerInfo.uniqueID].count || 0);\n mat_animation(spinnerInfo);\n function mat_animation(spinnerInfo) {\n var currentTime = Math.max(0, Math.min(new Date().getTime() - startTime, duration));\n updatePath(easing(currentTime, start, change, duration), spinnerInfo.container);\n if (id === spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId && currentTime < duration) {\n globalTimeOut[spinnerInfo.uniqueID].timeOut = setTimeout(mat_animation.bind(null, spinnerInfo), 1);\n }\n else {\n animateMaterial(spinnerInfo);\n }\n }\n function updatePath(value, container) {\n if ((!isNullOrUndefined(container.querySelector('svg.e-spin-material')))\n && (!isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle')))) {\n var svg = container.querySelector('svg.e-spin-material');\n var path = svg.querySelector('path.e-path-circle');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');\n path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');\n }\n }\n}\nfunction mat_calculate_attributes(radius, container) {\n var diameter = radius * 2;\n var svg = container.querySelector('svg.e-spin-material');\n var path = svg.querySelector('path.e-path-circle');\n var strokeSize = getStrokeSize(diameter);\n var transformOrigin = (diameter / 2) + 'px';\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.width = svg.style.height = diameter + 'px';\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n path.setAttribute('stroke-width', strokeSize + '');\n path.setAttribute('d', drawArc(diameter, strokeSize));\n path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, 1, 75) + '');\n}\nfunction getSize(value) {\n var parsed = parseFloat(value);\n return parsed;\n}\nfunction drawArc(diameter, strokeSize) {\n var radius = diameter / 2;\n var offset = strokeSize / 2;\n return 'M' + radius + ',' + offset\n + 'A' + (radius - offset) + ',' + (radius - offset) + ' 0 1 1 ' + offset + ',' + radius;\n}\nfunction getStrokeSize(diameter) {\n return 10 / 100 * diameter;\n}\nfunction getDashOffset(diameter, strokeSize, value, max) {\n return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100));\n}\nfunction easeAnimation(current, start, change, duration) {\n var timestamp = (current /= duration) * current;\n var timecount = timestamp * current;\n return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount);\n}\nfunction fb_calculate_attributes(radius, innerConainer, trgClass) {\n var centerX = radius;\n var centerY = radius;\n var diameter = radius * 2;\n var startArc = 315;\n var endArc = 45;\n var svg = innerConainer.querySelector('.' + trgClass);\n var circle = svg.querySelector('.e-path-circle');\n var path = svg.querySelector('.e-path-arc');\n var transformOrigin = (diameter / 2) + 'px';\n circle.setAttribute('d', defineCircle(centerX, centerY, radius));\n path.setAttribute('d', defineArc(centerX, centerY, radius, startArc, endArc));\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n svg.style.width = svg.style.height = diameter + 'px';\n}\nfunction defineArcPoints(centerX, centerY, radius, angle) {\n var radians = (angle - 90) * Math.PI / 180.0;\n return {\n x: centerX + (radius * Math.cos(radians)),\n y: centerY + (radius * Math.sin(radians))\n };\n}\nfunction defineArc(x, y, radius, startArc, endArc) {\n var start = defineArcPoints(x, y, radius, endArc);\n var end = defineArcPoints(x, y, radius, startArc);\n var d = [\n 'M', start.x, start.y,\n 'A', radius, radius, 0, 0, 0, end.x, end.y\n ].join(' ');\n return d;\n}\nfunction defineCircle(x, y, radius) {\n var d = [\n 'M', x, y,\n 'm', -radius, 0,\n 'a', radius, radius, 0, 1, 0, radius * 2, 0,\n 'a', radius, radius, 0, 1, 0, -radius * 2, 0,\n ].join(' ');\n return d;\n}\n/**\n * Function to show the Spinner.\n * @param container - Specify the target of the Spinner.\n * @private\n */\nexport function showSpinner(container) {\n showHideSpinner(container, false);\n}\nfunction showHideSpinner(container, isHide) {\n var spinnerWrap = container.classList.contains(CLS_SPINWRAP) ? container :\n container.querySelector('.' + CLS_SPINWRAP);\n var inner = spinnerWrap.querySelector('.' + CLS_SPININWRAP);\n var spinCheck;\n spinCheck = isHide ? !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_HIDESPIN) :\n !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_SHOWSPIN);\n if (spinCheck) {\n var svgEle = spinnerWrap.querySelector('svg');\n if (isNullOrUndefined(svgEle)) {\n return;\n }\n var id = svgEle.getAttribute('id');\n globalTimeOut[id].isAnimate = !isHide;\n switch (globalTimeOut[id].type) {\n case 'Material':\n isHide ? clearTimeout(globalTimeOut[id].timeOut) : startMatAnimate(inner, id, globalTimeOut[id].radius);\n break;\n case 'Bootstrap':\n isHide ? clearTimeout(globalTimeOut[id].timeOut) : animateBootstrap(inner);\n break;\n }\n }\n isHide ? classList(spinnerWrap, [CLS_HIDESPIN], [CLS_SHOWSPIN]) : classList(spinnerWrap, [CLS_SHOWSPIN], [CLS_HIDESPIN]);\n}\n/**\n * Function to hide the Spinner.\n * @param container - Specify the target of the Spinner.\n * @private\n */\nexport function hideSpinner(container) {\n showHideSpinner(container, true);\n}\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : setSpinner({ cssClass: 'custom-css'; type: 'Material' });\n * ```\n * @param args\n * @private\n */\nexport function setSpinner(args) {\n if (args.template !== undefined) {\n spinTemplate = args.template;\n if (args.template !== undefined) {\n spinCSSClass = args.cssClass;\n }\n }\n var container = document.querySelectorAll('.' + CLS_SPINWRAP);\n for (var index = 0; index < container.length; index++) {\n ensureTemplate(args.template, container[index], args.type, args.cssClass);\n }\n}\nfunction ensureTemplate(template, container, theme, cssClass) {\n if (isNullOrUndefined(template) && !container.classList.contains(CLS_SPINTEMPLATE)) {\n replaceTheme(container, theme, cssClass);\n if (container.classList.contains(CLS_SHOWSPIN)) {\n container.classList.remove(CLS_SHOWSPIN);\n showSpinner(container);\n }\n else {\n container.classList.remove(CLS_HIDESPIN);\n hideSpinner(container);\n }\n }\n else {\n spinTemplate = template;\n if (!isNullOrUndefined(cssClass)) {\n spinCSSClass = cssClass;\n }\n }\n}\nfunction replaceTheme(container, theme, cssClass) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n var svgElement = container.querySelector('svg');\n var radius = theme === 'Bootstrap' ? parseFloat(svgElement.style.height) : parseFloat(svgElement.style.height) / 2;\n var classNames = svgElement.getAttribute('class');\n var svgClassList = classNames.split(/\\s/);\n if (svgClassList.indexOf('e-spin-material') >= 0) {\n var id = svgElement.getAttribute('id');\n clearTimeout(globalTimeOut[id].timeOut);\n }\n setTheme(theme, container, radius);\n}\n","/**\n * MaskedTextBox base module\n */\nimport { EventHandler, isNullOrUndefined, merge, attributes, addClass, removeClass, Browser } from '@syncfusion/ej2-base';\nimport { Input } from '../../input/input';\nvar ERROR = 'e-error';\nvar INPUTGROUP = 'e-input-group';\nvar FLOATINPUT = 'e-float-input';\nvar UTILMASK = 'e-utility-mask';\nvar TOPLABEL = 'e-label-top';\nvar BOTTOMLABEL = 'e-label-bottom';\n/**\n * @hidden\n * Built-in masking elements collection.\n */\nexport var regularExpressions = {\n '0': '[0-9]',\n '9': '[0-9 ]',\n '#': '[0-9 +-]',\n 'L': '[A-Za-z]',\n '?': '[A-Za-z ]',\n '&': '[^\\x7f ]+',\n 'C': '[^\\x7f]+',\n 'A': '[A-Za-z0-9]',\n 'a': '[A-Za-z0-9 ]',\n};\n/**\n * @hidden\n * Generate required masking elements to the MaskedTextBox from user mask input.\n */\nexport function createMask() {\n attributes(this.element, { 'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off',\n 'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': '' });\n if (this.mask) {\n var splitMask = this.mask.split(']');\n for (var i = 0; i < splitMask.length; i++) {\n if (splitMask[i][splitMask[i].length - 1] === '\\\\') {\n splitMask[i] = splitMask[i] + ']';\n var splitInnerMask = splitMask[i].split('[');\n for (var j = 0; j < splitInnerMask.length; j++) {\n if (splitInnerMask[j][splitInnerMask[j].length - 1] === '\\\\') {\n splitInnerMask[j] = splitInnerMask[j] + '[';\n }\n pushIntoRegExpCollec.call(this, splitInnerMask[j]);\n }\n }\n else {\n var splitInnerMask = splitMask[i].split('[');\n if (splitInnerMask.length > 1) {\n var chkSpace = false;\n for (var j = 0; j < splitInnerMask.length; j++) {\n if (splitInnerMask[j] === '\\\\') {\n this.customRegExpCollec.push('[');\n this.hiddenMask += splitInnerMask[j] + '[';\n }\n else if (splitInnerMask[j] === '') {\n chkSpace = true;\n }\n else if ((splitInnerMask[j] !== '' && chkSpace) || j === splitInnerMask.length - 1) {\n this.customRegExpCollec.push('[' + splitInnerMask[j] + ']');\n this.hiddenMask += this.promptChar;\n chkSpace = false;\n }\n else {\n pushIntoRegExpCollec.call(this, splitInnerMask[j]);\n }\n }\n }\n else {\n pushIntoRegExpCollec.call(this, splitInnerMask[0]);\n }\n }\n }\n this.escapeMaskValue = this.hiddenMask;\n this.promptMask = this.hiddenMask.replace(/[09?LCAa#&]/g, this.promptChar);\n if (!isNullOrUndefined(this.customCharacters)) {\n for (var i = 0; i < this.promptMask.length; i++) {\n if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) {\n this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);\n }\n }\n }\n var escapeNumber = 0;\n if (this.hiddenMask.match(new RegExp(/\\\\/))) {\n for (var i = 0; i < this.hiddenMask.length; i++) {\n var j = 0;\n if (i >= 2) {\n j = i;\n }\n escapeNumber = this.hiddenMask.length - this.promptMask.length;\n j = j - escapeNumber;\n if ((i > 0 && this.hiddenMask[i - 1] !== '\\\\') && (this.hiddenMask[i] === '>' ||\n this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|')) {\n this.promptMask = this.promptMask.substring(0, j) +\n this.promptMask.substring((i + 1) - escapeNumber, this.promptMask.length);\n this.escapeMaskValue = this.escapeMaskValue.substring(0, j) +\n this.escapeMaskValue.substring((i + 1) - escapeNumber, this.escapeMaskValue.length);\n }\n if (this.hiddenMask[i] === '\\\\') {\n this.promptMask = this.promptMask.substring(0, j) + this.hiddenMask[i + 1] +\n this.promptMask.substring((i + 2) - escapeNumber, this.promptMask.length);\n this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + this.escapeMaskValue[i + 1] +\n this.escapeMaskValue.substring((i + 2) - escapeNumber, this.escapeMaskValue.length);\n }\n }\n }\n else {\n this.promptMask = this.promptMask.replace(/[>|<]/g, '');\n this.escapeMaskValue = this.hiddenMask.replace(/[>|<]/g, '');\n }\n attributes(this.element, { 'aria-invalid': 'false' });\n }\n}\n/**\n * @hidden\n * Apply mask ability with masking elements to the MaskedTextBox.\n */\nexport function applyMask() {\n setElementValue.call(this, this.promptMask);\n setMaskValue.call(this, this.value);\n}\n/**\n * @hidden\n * To wire required events to the MaskedTextBox.\n */\nexport function wireEvents() {\n EventHandler.add(this.element, 'keydown', maskInputKeyDownHandler, this);\n EventHandler.add(this.element, 'keypress', maskInputKeyPressHandler, this);\n EventHandler.add(this.element, 'keyup', maskInputKeyUpHandler, this);\n EventHandler.add(this.element, 'focus', maskInputFocusHandler, this);\n EventHandler.add(this.element, 'blur', maskInputBlurHandler, this);\n EventHandler.add(this.element, 'paste', maskInputPasteHandler, this);\n EventHandler.add(this.element, 'cut', maskInputCutHandler, this);\n EventHandler.add(this.element, 'drop', maskInputDropHandler, this);\n}\n/**\n * @hidden\n * To unwire events attached to the MaskedTextBox.\n */\nexport function unwireEvents() {\n EventHandler.remove(this.element, 'keydown', maskInputKeyDownHandler);\n EventHandler.remove(this.element, 'keypress', maskInputKeyPressHandler);\n EventHandler.remove(this.element, 'keyup', maskInputKeyUpHandler);\n EventHandler.remove(this.element, 'focus', maskInputFocusHandler);\n EventHandler.remove(this.element, 'blur', maskInputBlurHandler);\n EventHandler.remove(this.element, 'paste', maskInputPasteHandler);\n EventHandler.remove(this.element, 'cut', maskInputCutHandler);\n}\n/**\n * @hidden\n * To get masked value from the MaskedTextBox.\n */\nexport function unstrippedValue(element) {\n return element.value;\n}\n/**\n * @hidden\n * To extract raw value from the MaskedTextBox.\n */\nexport function strippedValue(element) {\n var value = '';\n var k = 0;\n var checkMask = false;\n if (!isNullOrUndefined(element) && !isNullOrUndefined(this) && element.value !== this.promptMask) {\n for (var i = 0; i < this.customRegExpCollec.length; i++) {\n if (checkMask) {\n checkMask = false;\n }\n if (this.customRegExpCollec[k] === '>' || this.customRegExpCollec[k] === '<' ||\n this.customRegExpCollec[k] === '|' || this.customRegExpCollec[k] === '\\\\') {\n --i;\n checkMask = true;\n }\n if (!checkMask) {\n if ((element.value[i] !== this.promptChar) && (!isNullOrUndefined(this.customRegExpCollec[k]) &&\n ((!isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]])) ||\n (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' &&\n this.customRegExpCollec[k][this.customRegExpCollec[k].length - 1] === ']') ||\n (!isNullOrUndefined(this.customCharacters) &&\n (!isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (element.value !== '')) {\n value += element.value[i];\n }\n }\n ++k;\n }\n }\n return value;\n}\nfunction pushIntoRegExpCollec(value) {\n for (var k = 0; k < value.length; k++) {\n this.hiddenMask += value[k];\n if (value[k] !== '\\\\') {\n this.customRegExpCollec.push(value[k]);\n }\n }\n}\nexport function maskInputFocusHandler(event) {\n var _this = this;\n if (this.promptMask.length > 0) {\n this.focusEventArgs = { selectionStart: 0, selectionEnd: this.promptMask.length };\n }\n else {\n this.focusEventArgs = { selectionStart: 0, selectionEnd: this.element.value.length };\n }\n var eventArgs = {};\n merge(eventArgs, this.focusEventArgs);\n this.trigger('focus', eventArgs);\n this.focusEventArgs = eventArgs;\n if (this.mask) {\n this.isFocus = true;\n if (this.placeholder && this.element.value === '') {\n setElementValue.call(this, this.promptMask);\n this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd);\n setTimeout(function () {\n _this.element.setSelectionRange(_this.focusEventArgs.selectionStart, _this.focusEventArgs.selectionEnd);\n }, 1);\n }\n else {\n this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd);\n }\n }\n}\nexport function maskInputBlurHandler(event) {\n if (this.mask) {\n this.isFocus = false;\n if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') {\n setElementValue.call(this, '');\n var labelElement = this.element.parentNode.querySelector('.e-float-text');\n if (this.floatLabelType === 'Auto' && !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL)) {\n removeClass([labelElement], TOPLABEL);\n }\n }\n }\n}\nfunction maskInputPasteHandler(event) {\n var _this = this;\n if (this.mask) {\n var sIndex_1 = this.element.selectionStart;\n var eIndex_1 = this.element.selectionEnd;\n var oldValue_1 = this.element.value;\n setElementValue.call(this, '');\n setTimeout(function () {\n var value = _this.element.value;\n if (_this.redoCollec.length > 0 && _this.redoCollec[0].value === _this.element.value) {\n value = strippedValue.call(_this, _this.element);\n }\n setElementValue.call(_this, oldValue_1);\n _this.element.selectionStart = sIndex_1;\n _this.element.selectionEnd = eIndex_1;\n var i = 0;\n _this.maskKeyPress = true;\n do {\n validateValue.call(_this, value[i], false, null);\n ++i;\n } while (i < value.length);\n _this.maskKeyPress = false;\n }, 1);\n }\n}\nfunction maskInputCutHandler(event) {\n var _this = this;\n if (this.mask) {\n var sIndex_2 = this.element.selectionStart;\n var eIndex = this.element.selectionEnd;\n this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd });\n var value_1 = this.element.value.substring(0, sIndex_2) + this.promptMask.substring(sIndex_2, eIndex) +\n this.element.value.substring(eIndex);\n setTimeout(function () {\n setElementValue.call(_this, value_1);\n _this.element.selectionStart = _this.element.selectionEnd = sIndex_2;\n }, 0);\n }\n}\nexport function maskInputDropHandler(event) {\n event.preventDefault();\n}\nfunction maskInputKeyDownHandler(event) {\n var _this = this;\n if (this.mask) {\n if (event.keyCode !== 229) {\n if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {\n event.preventDefault();\n }\n removeMaskInputValues.call(this, event);\n }\n else {\n setTimeout(function () {\n removeMaskInputValues.call(_this, event);\n }, 0);\n }\n var startValue = this.element.value;\n if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) {\n var collec = void 0;\n if (event.keyCode === 90 && this.undoCollec.length > 0 && startValue !== this.undoCollec[this.undoCollec.length - 1].value) {\n collec = this.undoCollec[this.undoCollec.length - 1];\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n setElementValue.call(this, collec.value);\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n this.undoCollec.splice(this.undoCollec.length - 1, 1);\n }\n else if (event.keyCode === 89 && this.redoCollec.length > 0 && startValue !== this.redoCollec[0].value) {\n collec = this.redoCollec[0];\n this.undoCollec.push({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n setElementValue.call(this, collec.value);\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n this.redoCollec.splice(0, 1);\n }\n }\n }\n}\nexport function mobileRemoveFunction() {\n var collec;\n var sIndex = this.element.selectionStart;\n var eIndex = this.element.selectionEnd;\n if (this.redoCollec.length > 0) {\n collec = this.redoCollec[0];\n setElementValue.call(this, collec.value);\n if ((collec.startIndex - sIndex) === 1) {\n this.element.selectionStart = collec.startIndex;\n this.element.selectionEnd = collec.endIndex;\n }\n else {\n this.element.selectionStart = sIndex + 1;\n this.element.selectionEnd = eIndex + 1;\n }\n }\n else {\n setElementValue.call(this, this.promptMask);\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n }\n}\nfunction removeMaskInputValues(event) {\n var isRemove = false;\n var oldEventVal;\n var isDeleted = false;\n if (this.element.value.length < this.promptMask.length) {\n isRemove = true;\n mobileRemoveFunction.call(this);\n oldEventVal = this.element.value;\n }\n var initStartIndex = this.element.selectionStart;\n var initEndIndex = this.element.selectionEnd;\n var startIndex = this.element.selectionStart;\n var endIndex = this.element.selectionEnd;\n var maskValue = this.hiddenMask.replace(/[>|\\\\<]/g, '');\n var curMask = maskValue[startIndex - 1];\n var parentElement = this.element.parentNode;\n if (isRemove || event.keyCode === 8 || event.keyCode === 46) {\n this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: endIndex });\n var multipleDel = false;\n if (startIndex > 0 || ((event.keyCode === 8 || event.keyCode === 46) && startIndex < this.element.value.length\n && ((this.element.selectionEnd - startIndex) !== this.element.value.length))) {\n var index = startIndex;\n if (startIndex !== endIndex) {\n startIndex = endIndex;\n if (event.keyCode === 46) {\n multipleDel = true;\n }\n }\n else if (event.keyCode === 46) {\n ++index;\n }\n else {\n --index;\n }\n for (var k = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? k > index : k < index; (event.keyCode === 8 || isRemove || multipleDel) ? k-- : k++) {\n for (var i = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? i > 0 : i < this.element.value.length; (event.keyCode === 8 || isRemove || multipleDel) ? i-- : i++) {\n var sIndex = void 0;\n if (((event.keyCode === 8 || multipleDel) && ((initStartIndex !== initEndIndex && initStartIndex !== startIndex) ||\n (initStartIndex === initEndIndex))) || isRemove) {\n curMask = maskValue[i - 1];\n sIndex = startIndex - 1;\n }\n else {\n curMask = maskValue[i];\n sIndex = startIndex;\n ++startIndex;\n }\n var oldValue = this.element.value[sIndex];\n if ((isNullOrUndefined(this.regExpCollec[curMask]) && (!isNullOrUndefined(this.customCharacters)\n && isNullOrUndefined(this.customCharacters[curMask]))\n && ((this.hiddenMask[sIndex] !== this.promptChar && this.customRegExpCollec[sIndex][0] !== '['\n && this.customRegExpCollec[sIndex][this.customRegExpCollec[sIndex].length - 1] !== ']')))\n || (this.promptMask[sIndex] !== this.promptChar && isNullOrUndefined(this.customCharacters))) {\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n event.preventDefault();\n if (event.keyCode === 46 && !multipleDel) {\n ++this.element.selectionStart;\n }\n }\n else {\n var value = this.element.value;\n var prompt_1 = this.promptChar;\n var elementValue = value.substring(0, sIndex) + prompt_1 + value.substring(startIndex, value.length);\n setElementValue.call(this, elementValue);\n event.preventDefault();\n this.element.selectionStart = this.element.selectionEnd = sIndex;\n isDeleted = true;\n }\n startIndex = this.element.selectionStart;\n if ((!isDeleted && event.keyCode === 8) || multipleDel || (!isDeleted && !(event.keyCode === 46))) {\n sIndex = startIndex - 1;\n }\n else {\n sIndex = startIndex;\n isDeleted = false;\n }\n oldValue = this.element.value[sIndex];\n if (((initStartIndex !== initEndIndex) && (this.element.selectionStart === initStartIndex))\n || (this.promptMask[sIndex] === this.promptChar) || ((oldValue !== this.promptMask[sIndex]) &&\n (this.promptMask[sIndex] !== this.promptChar) && !isNullOrUndefined(this.customCharacters))) {\n break;\n }\n }\n }\n }\n if (this.element.selectionStart === 0 && (this.element.selectionEnd === this.element.value.length)) {\n setElementValue.call(this, this.promptMask);\n event.preventDefault();\n this.element.selectionStart = this.element.selectionEnd = startIndex;\n }\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart,\n endIndex: this.element.selectionEnd\n });\n triggerMaskChangeEvent.call(this, event, oldEventVal);\n }\n}\nfunction maskInputKeyPressHandler(event) {\n if (this.mask) {\n var oldValue = this.element.value;\n if ((!event.ctrlKey) || (event.ctrlKey && event.code !== 'KeyA' && event.code !== 'KeyY'\n && event.code !== 'KeyZ' && event.code !== 'KeyX' && event.code !== 'KeyC' && event.code !== 'KeyV')) {\n this.maskKeyPress = true;\n var key = event.key;\n if (key === 'Spacebar') {\n key = String.fromCharCode(event.keyCode);\n }\n if (!key) {\n this.isIosInvalid = true;\n validateValue.call(this, String.fromCharCode(event.keyCode), event.ctrlKey, event);\n event.preventDefault();\n this.isIosInvalid = false;\n }\n else if (key && key.length === 1) {\n validateValue.call(this, key, event.ctrlKey, event);\n event.preventDefault();\n }\n }\n triggerMaskChangeEvent.call(this, event, oldValue);\n }\n}\nfunction triggerMaskChangeEvent(event, oldValue) {\n if (!isNullOrUndefined(this.changeEventArgs)) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.element.value, maskedValue: this.element.value, isInteraction: false };\n if (this.mask) {\n this.changeEventArgs.value = strippedValue.call(this, this.element);\n }\n if (!isNullOrUndefined(event)) {\n this.changeEventArgs.isInteraction = true;\n this.changeEventArgs.event = event;\n }\n merge(eventArgs, this.changeEventArgs);\n this.trigger('change', eventArgs);\n }\n attributes(this.element, { 'aria-valuenow': this.element.value });\n}\nfunction maskInputKeyUpHandler(event) {\n if (this.mask) {\n var collec = void 0;\n if (!this.maskKeyPress && event.keyCode === 229) {\n var oldEventVal = void 0;\n if (this.element.value.length === 1) {\n this.element.value = this.element.value + this.promptMask;\n this.element.setSelectionRange(1, 1);\n }\n if (this.element.value.length > this.promptMask.length) {\n var startIndex = this.element.selectionStart;\n var addedValues = this.element.value.length - this.promptMask.length;\n var val_1 = this.element.value.substring(startIndex - addedValues, startIndex);\n if (this.undoCollec.length > 0) {\n collec = this.undoCollec[this.undoCollec.length - 1];\n var startIndex_1 = this.element.selectionStart;\n oldEventVal = collec.value;\n var oldVal = collec.value.substring(startIndex_1 - addedValues, startIndex_1);\n collec = this.redoCollec[0];\n val_1 = val_1.trim();\n var isSpace = Browser.isAndroid && val_1 === '';\n if (!isSpace && oldVal !== val_1 && collec.value.substring(startIndex_1 - addedValues, startIndex_1) !== val_1) {\n validateValue.call(this, val_1, event.ctrlKey, event);\n }\n else if (isSpace) {\n preventUnsupportedValues.call(this, event, startIndex_1 - 1, this.element.selectionEnd - 1, val_1, event.ctrlKey, false);\n }\n }\n else {\n oldEventVal = this.promptMask;\n validateValue.call(this, val_1, event.ctrlKey, event);\n }\n this.maskKeyPress = false;\n triggerMaskChangeEvent.call(this, event, oldEventVal);\n }\n }\n else {\n removeMaskError.call(this);\n }\n var val = strippedValue.call(this, this.element);\n if (!((this.element.selectionStart === 0) && (this.promptMask === this.element.value) && val === '')\n || (val === '' && this.value !== val)) {\n this.prevValue = val;\n this.value = val;\n }\n }\n else {\n triggerMaskChangeEvent.call(this, event);\n this.value = this.element.value;\n }\n}\nfunction mobileSwipeCheck(key) {\n if (key.length > 1 && ((this.promptMask.length + key.length) < this.element.value.length)) {\n var elementValue = this.redoCollec[0].value.substring(0, this.redoCollec[0].startIndex) + key +\n this.redoCollec[0].value.substring(this.redoCollec[0].startIndex, this.redoCollec[0].value.length);\n setElementValue.call(this, elementValue);\n this.element.selectionStart = this.element.selectionEnd = this.redoCollec[0].startIndex + key.length;\n }\n this.element.selectionStart = this.element.selectionStart - key.length;\n this.element.selectionEnd = this.element.selectionEnd - key.length;\n}\nfunction validateValue(key, isCtrlKey, event) {\n if (!this.maskKeyPress) {\n mobileSwipeCheck.call(this, key);\n }\n var startIndex = this.element.selectionStart;\n var initStartIndex = startIndex;\n var endIndex = this.element.selectionEnd;\n var curMask;\n var allowText = false;\n var value = this.element.value;\n var eventOldVal;\n var prevSupport = false;\n var isEqualVal = false;\n for (var k = 0; k < key.length; k++) {\n var keyValue = key[k];\n startIndex = this.element.selectionStart;\n endIndex = this.element.selectionEnd;\n if (!this.maskKeyPress && initStartIndex === startIndex) {\n startIndex = startIndex + k;\n }\n if ((!this.maskKeyPress || startIndex < this.promptMask.length)) {\n for (var i = startIndex; i < this.promptMask.length; i++) {\n var maskValue = this.escapeMaskValue;\n curMask = maskValue[startIndex];\n if (this.hiddenMask[startIndex] === '\\\\' && this.hiddenMask[startIndex + 1] === key) {\n isEqualVal = true;\n }\n if ((isNullOrUndefined(this.regExpCollec[curMask]) && (isNullOrUndefined(this.customCharacters)\n || (!isNullOrUndefined(this.customCharacters) && isNullOrUndefined(this.customCharacters[curMask])))\n && ((this.hiddenMask[startIndex] !== this.promptChar && this.customRegExpCollec[startIndex][0] !== '['\n && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] !== ']')))\n || ((this.promptMask[startIndex] !== this.promptChar) && isNullOrUndefined(this.customCharacters))\n || (this.promptChar === curMask && this.escapeMaskValue === this.mask)) {\n this.element.selectionStart = this.element.selectionEnd = startIndex + 1;\n startIndex = this.element.selectionStart;\n curMask = this.hiddenMask[startIndex];\n }\n }\n if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[curMask])) {\n var customValStr = this.customCharacters[curMask];\n var customValArr = customValStr.split(',');\n for (var i = 0; i < customValArr.length; i++) {\n if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {\n allowText = true;\n break;\n }\n }\n }\n else if (!isNullOrUndefined(this.regExpCollec[curMask]) && keyValue.match(new RegExp(this.regExpCollec[curMask]))\n && this.promptMask[startIndex] === this.promptChar) {\n allowText = true;\n }\n else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '['\n && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']'\n && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {\n allowText = true;\n }\n if ((!this.maskKeyPress || startIndex < this.hiddenMask.length) && allowText) {\n if (k === 0) {\n if (this.maskKeyPress) {\n this.undoCollec.push({ value: value, startIndex: startIndex, endIndex: startIndex });\n }\n else {\n var sIndex = this.element.selectionStart;\n var eIndex = this.element.selectionEnd;\n if (this.redoCollec.length > 0) {\n eventOldVal = this.redoCollec[0].value;\n setElementValue.call(this, eventOldVal);\n this.undoCollec.push(this.redoCollec[0]);\n }\n else {\n this.undoCollec.push({ value: this.promptMask, startIndex: startIndex, endIndex: startIndex });\n eventOldVal = this.promptMask;\n setElementValue.call(this, eventOldVal);\n }\n this.element.selectionStart = sIndex;\n this.element.selectionEnd = eIndex;\n }\n }\n startIndex = this.element.selectionStart;\n applySupportedValues.call(this, event, startIndex, keyValue, eventOldVal, isEqualVal);\n prevSupport = true;\n if (k === key.length - 1) {\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n allowText = false;\n }\n else {\n startIndex = this.element.selectionStart;\n preventUnsupportedValues.call(this, event, startIndex, initStartIndex, key, isCtrlKey, prevSupport);\n }\n if (k === key.length - 1 && !allowText) {\n if (!Browser.isAndroid || (Browser.isAndroid && startIndex < this.promptMask.length)) {\n this.redoCollec.unshift({\n value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd\n });\n }\n }\n }\n else {\n if (key.length === 1 && !isCtrlKey && !isNullOrUndefined(event)) {\n addMaskErrorClass.call(this);\n }\n }\n }\n}\nfunction applySupportedValues(event, startIndex, keyValue, eventOldVal, isEqualVal) {\n if (this.hiddenMask.length > this.promptMask.length) {\n keyValue = changeToLowerUpperCase.call(this, keyValue, this.element.value);\n }\n if (!isEqualVal) {\n var value = this.element.value;\n var elementValue = value.substring(0, startIndex) + keyValue + value.substring(startIndex + 1, value.length);\n setElementValue.call(this, elementValue);\n this.element.selectionStart = this.element.selectionEnd = startIndex + 1;\n }\n triggerMaskChangeEvent.call(this, event, eventOldVal);\n}\nfunction preventUnsupportedValues(event, sIdx, idx, key, ctrl, chkSupport) {\n if (!this.maskKeyPress) {\n var eventOldVal = void 0;\n var value = this.element.value;\n if (sIdx >= this.promptMask.length) {\n setElementValue.call(this, value.substring(0, sIdx));\n }\n else {\n if (idx === sIdx) {\n setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx + 1, value.length));\n }\n else {\n if (this.promptMask.length === this.element.value.length) {\n setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx, value.length));\n }\n else {\n setElementValue.call(this, value.substring(0, idx) + value.substring(idx + 1, value.length));\n }\n }\n this.element.selectionStart = this.element.selectionEnd = (chkSupport ||\n this.element.value[idx] !== this.promptChar) ? sIdx : idx;\n }\n eventOldVal = this.element.value;\n triggerMaskChangeEvent.call(this, event, eventOldVal);\n addMaskErrorClass.call(this);\n }\n if (key.length === 1 && !ctrl && !isNullOrUndefined(event)) {\n addMaskErrorClass.call(this);\n }\n}\nfunction addMaskErrorClass() {\n var _this = this;\n var parentElement = this.element.parentNode;\n var timer = 200;\n if (parentElement.classList.contains(INPUTGROUP) || parentElement.classList.contains(FLOATINPUT)) {\n addClass([parentElement], ERROR);\n }\n else {\n addClass([this.element], ERROR);\n }\n if (this.isIosInvalid === true) {\n timer = 400;\n }\n attributes(this.element, { 'aria-invalid': 'true' });\n setTimeout(function () {\n if (!_this.maskKeyPress) {\n removeMaskError.call(_this);\n }\n }, timer);\n}\nfunction removeMaskError() {\n var parentElement = this.element.parentNode;\n removeClass([parentElement], ERROR);\n removeClass([this.element], ERROR);\n attributes(this.element, { 'aria-invalid': 'false' });\n}\n/**\n * @hidden\n * Validates user input using masking elements '<' , '>' and '|'.\n */\nfunction changeToLowerUpperCase(key, value) {\n var promptMask;\n var i;\n var j = 0;\n var curVal = value;\n var caseCount = 0;\n for (i = 0; i < this.hiddenMask.length; i++) {\n if (this.hiddenMask[i] === '\\\\') {\n promptMask = curVal.substring(0, i) + '\\\\' + curVal.substring(i, curVal.length);\n }\n if (this.hiddenMask[i] === '>' || this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|') {\n if (this.hiddenMask[i] !== curVal[i]) {\n promptMask = curVal.substring(0, i) + this.hiddenMask[i] + curVal.substring(i, curVal.length);\n }\n ++caseCount;\n }\n if (promptMask) {\n if (((promptMask[i] === this.promptChar) && (i > this.element.selectionStart)) ||\n (this.element.value.indexOf(this.promptChar) < 0 && (this.element.selectionStart + caseCount) === i)) {\n caseCount = 0;\n break;\n }\n curVal = promptMask;\n }\n }\n while (i >= 0 && promptMask) {\n if (i === 0 || promptMask[i - 1] !== '\\\\') {\n var val = this.element.value;\n if (promptMask[i] === '>') {\n key = key.toUpperCase();\n break;\n }\n else if (promptMask[i] === '<') {\n key = key.toLowerCase();\n break;\n }\n else if (promptMask[i] === '|') {\n break;\n }\n }\n --i;\n }\n return key;\n}\n/**\n * @hidden\n * To set updated values in the MaskedTextBox.\n */\nexport function setMaskValue(val) {\n if (this.mask && val !== undefined && (val === '' || this.prevValue !== val)) {\n this.maskKeyPress = true;\n setElementValue.call(this, this.promptMask);\n if (val !== '') {\n this.element.selectionStart = 0;\n this.element.selectionEnd = 0;\n }\n if (val !== null) {\n for (var i = 0; i < val.length; i++) {\n validateValue.call(this, val[i], false, null);\n }\n }\n this.value = strippedValue.call(this, this.element);\n this.maskKeyPress = false;\n var labelElement = this.element.parentNode.querySelector('.e-float-text');\n if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' &&\n !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) {\n removeClass([labelElement], TOPLABEL);\n addClass([labelElement], BOTTOMLABEL);\n setElementValue.call(this, '');\n }\n }\n}\n/**\n * @hidden\n * To set updated values in the input element.\n */\nexport function setElementValue(val, element) {\n if (!this.isFocus && this.floatLabelType === 'Auto' && isNullOrUndefined(this.value)) {\n val = '';\n }\n Input.setValue(val, (element ? element : this.element), this.floatLabelType);\n}\n/**\n * @hidden\n * Provide mask support to input textbox through utility method.\n */\nexport function maskInput(args) {\n var inputEle = getMaskInput(args);\n applyMask.call(inputEle);\n var val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (args.mask) {\n unwireEvents.call(inputEle);\n wireEvents.call(inputEle);\n }\n}\nfunction getMaskInput(args) {\n addClass([args.element], UTILMASK);\n var inputEle = {\n element: args.element,\n mask: args.mask,\n promptMask: '',\n hiddenMask: '',\n escapeMaskValue: '',\n promptChar: args.promptChar ? (args.promptChar.length > 1) ? args.promptChar = args.promptChar[0]\n : args.promptChar : '_',\n value: args.value ? args.value : null,\n regExpCollec: regularExpressions,\n customRegExpCollec: [],\n customCharacters: args.customCharacters,\n undoCollec: [],\n redoCollec: [],\n maskKeyPress: false,\n prevValue: ''\n };\n createMask.call(inputEle);\n return inputEle;\n}\n/**\n * @hidden\n * Gets raw value of the textbox which has been masked through utility method.\n */\nexport function getVal(args) {\n return strippedValue.call(getUtilMaskEle(args), args.element);\n}\n/**\n * @hidden\n * Gets masked value of the textbox which has been masked through utility method.\n */\nexport function getMaskedVal(args) {\n return unstrippedValue.call(getUtilMaskEle(args), args.element);\n}\nfunction getUtilMaskEle(args) {\n var value = '';\n var inputEle;\n if (!isNullOrUndefined(args) && args.element.classList.contains(UTILMASK)) {\n inputEle = getMaskInput(args);\n }\n return inputEle;\n}\n/**\n * @hidden\n * Arguments to perform undo and redo functionalities.\n */\nvar MaskUndo = /** @class */ (function () {\n function MaskUndo() {\n }\n return MaskUndo;\n}());\nexport { MaskUndo };\nvar maskUndo = new MaskUndo();\n","import { extend, merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { createElement, attributes, prepend, isVisible, append, addClass } from '@syncfusion/ej2-base';\nimport { compile } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nexport var cssClass = {\n li: 'e-list-item',\n ul: 'e-list-parent e-ul',\n group: 'e-list-group-item',\n icon: 'e-list-icon',\n text: 'e-list-text',\n check: 'e-list-check',\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: 'e-list-url',\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: 'e-list-img',\n iconWrapper: 'e-icon-wrapper'\n};\n/**\n * Base List Generator\n */\nexport var ListBase;\n(function (ListBase) {\n /**\n * Default mapped fields.\n */\n ListBase.defaultMappedFields = {\n id: 'id',\n text: 'text',\n url: 'url',\n value: 'value',\n isChecked: 'isChecked',\n enabled: 'enabled',\n expanded: 'expanded',\n selected: 'selected',\n iconCss: 'iconCss',\n child: 'child',\n isVisible: 'isVisible',\n hasChildren: 'hasChildren',\n tooltip: 'tooltip',\n htmlAttributes: 'htmlAttributes',\n urlAttributes: 'urlAttributes',\n imageAttributes: 'imageAttributes',\n imageUrl: 'imageUrl',\n groupBy: null\n };\n var defaultAriaAttributes = {\n level: 1,\n listRole: 'presentation',\n itemRole: 'presentation',\n groupItemRole: 'group',\n itemText: 'list-item',\n wrapperRole: 'presentation'\n };\n var defaultListBaseOptions = {\n showCheckBox: false,\n showIcon: false,\n expandCollapse: false,\n fields: ListBase.defaultMappedFields,\n ariaAttributes: defaultAriaAttributes,\n listClass: '',\n itemClass: '',\n processSubChild: false,\n sortOrder: 'None',\n template: null,\n groupTemplate: null,\n expandIconClass: 'e-icon-collapsible',\n moduleName: 'list',\n expandIconPosition: 'Right'\n };\n /**\n * Function helps to created and return the UL Li element based on your data.\n * @param {{[key:string]:Object}[]|string[]} dataSource - Specifies an array of JSON or String data.\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n */\n function createList(dataSource, options, isSingleLevel) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var type = typeofData(dataSource).typeof;\n if (type === 'string' || type === 'number') {\n return createListFromArray(dataSource, isSingleLevel, options);\n }\n else {\n return createListFromJson(dataSource, options, ariaAttributes.level, isSingleLevel);\n }\n }\n ListBase.createList = createList;\n /**\n * Function helps to created an element list based on string array input .\n * @param {string[]} dataSource - Specifies an array of string data\n */\n function createListFromArray(dataSource, isSingleLevel, options) {\n var subChild = createListItemFromArray(dataSource, isSingleLevel, options);\n return generateUL(subChild, null, options);\n }\n ListBase.createListFromArray = createListFromArray;\n /**\n * Function helps to created an element list based on string array input .\n * @param {string[]} dataSource - Specifies an array of string data\n */\n function createListItemFromArray(dataSource, isSingleLevel, options) {\n var subChild = [];\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var id = genUID(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n var li = void 0;\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n options: curOpt\n };\n curOpt.itemCreating(curData);\n }\n if (isSingleLevel) {\n li = generateSingleLevelLI(dataSource[i], null, null, [], null, id, i, options);\n }\n else {\n li = generateLI(dataSource[i], null, null, options);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n item: li,\n options: curOpt\n };\n curOpt.itemCreated(curData);\n }\n subChild.push(li);\n }\n return subChild;\n }\n ListBase.createListItemFromArray = createListItemFromArray;\n /**\n * Function helps to created an element list based on array of JSON input .\n * @param {{[key:string]:Object}[]} dataSource - Specifies an array of JSON data.\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n */\n // tslint:disable-next-line:max-func-body-length\n function createListItemFromJson(dataSource, options, level, isSingleLevel) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var id;\n if (level) {\n ariaAttributes.level = level;\n }\n var child = [];\n var li;\n if (Object.keys(dataSource).length && !typeofData(dataSource).item.hasOwnProperty(fields.id)) {\n id = genUID(); // generate id for drop-down-list option.\n }\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], fields);\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreating(curData);\n }\n var curItem = dataSource[i];\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], fields);\n }\n if (Object.keys(dataSource).length && fieldData.hasOwnProperty(fields.id)\n && !isNullOrUndefined(fieldData[fields.id])) {\n id = fieldData.id;\n }\n var innerEle = [];\n if (curOpt.showCheckBox) {\n innerEle.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n if (isSingleLevel === true) {\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss)) {\n if (!isNullOrUndefined(fieldData[fields.iconCss])) {\n innerEle.push(createElement('span', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] }));\n }\n }\n li = generateSingleLevelLI(curItem, fields, curOpt.itemClass, innerEle, (curItem.hasOwnProperty('isHeader') &&\n curItem.isHeader) ? true : false, id, i, options);\n }\n else {\n li = generateLI(curItem, fields, curOpt.itemClass, options);\n li.classList.add(cssClass.level + '-' + ariaAttributes.level);\n li.setAttribute('aria-level', ariaAttributes.level.toString());\n if (fieldData.hasOwnProperty(fields.tooltip)) {\n li.setAttribute('title', fieldData[fields.tooltip]);\n }\n if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {\n li.classList.add(cssClass.disabled);\n }\n if (fieldData.hasOwnProperty(fields.isVisible) && fieldData[fields.isVisible] === false) {\n li.style.display = 'none';\n }\n if (fieldData.hasOwnProperty(fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])) {\n var attr = { src: fieldData[fields.imageUrl] };\n if (fieldData.hasOwnProperty(fields.imageUrl)) {\n merge(attr, fieldData[fields.imageAttributes]);\n }\n prepend([createElement('img', { className: cssClass.image, attrs: attr })], li.firstElementChild);\n }\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) && !curOpt.template) {\n if (!isNullOrUndefined(fieldData[fields.iconCss])) {\n prepend([createElement('div', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] })], li.firstElementChild);\n }\n }\n if (innerEle.length) {\n prepend(innerEle, li.firstElementChild);\n }\n processSubChild(curItem, fields, dataSource, curOpt, li, ariaAttributes.level);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n item: li,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreated(curData);\n }\n child.push(li);\n }\n return child;\n }\n ListBase.createListItemFromJson = createListItemFromJson;\n /**\n * Function helps to created an element list based on array of JSON input .\n * @param {{[key:string]:Object}[]} dataSource - Specifies an array of JSON data.\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n */\n function createListFromJson(dataSource, options, level, isSingleLevel) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var li = createListItemFromJson(dataSource, options, level, isSingleLevel);\n return generateUL(li, curOpt.listClass, options);\n }\n ListBase.createListFromJson = createListFromJson;\n /**\n * Return the next or previous visible element.\n * @param {Element[]|NodeList} elementArray - An element array to find next or previous element.\n * @param {Element} li - An element to find next or previous after this element.\n * @param {boolean} isPrevious? - Specify when the need get previous element from array.\n */\n function getSiblingLI(elementArray, element, isPrevious) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n if (!elementArray || !elementArray.length) {\n return void 0;\n }\n var siblingLI;\n var liIndex;\n var liCollections = Array.prototype.slice.call(elementArray);\n if (element) {\n liIndex = indexOf(element, liCollections);\n }\n else {\n liIndex = (isPrevious === true ? liCollections.length : -1);\n }\n siblingLI = liCollections[liIndex + (isPrevious === true ? -1 : 1)];\n while (siblingLI && (!isVisible(siblingLI) || siblingLI.classList.contains(cssClass.disabled))) {\n liIndex = liIndex + (isPrevious === true ? -1 : 1);\n siblingLI = liCollections[liIndex];\n }\n return siblingLI;\n }\n ListBase.getSiblingLI = getSiblingLI;\n /**\n * Return the index of the li element\n * @param {Element} item - An element to find next or previous after this element.\n * @param {Element[]|NodeList} elementArray - An element array to find index of given li.\n */\n function indexOf(item, elementArray) {\n if (!elementArray || !item) {\n return void 0;\n }\n else {\n var liCollections = elementArray;\n liCollections = Array.prototype.slice.call(elementArray);\n return liCollections.indexOf(item);\n }\n }\n ListBase.indexOf = indexOf;\n /**\n * Returns the grouped data from given dataSource.\n * @param {{[key:string]:Object}[]} dataSource - The JSON data which is necessary to process.\n * @param {FieldsMapping} fields - Fields that are mapped from the data source.\n * @param {SortOrder='None'} sortOrder- Specifies final result sort order.\n */\n function groupDataSource(dataSource, fields, sortOrder) {\n if (sortOrder === void 0) { sortOrder = 'None'; }\n var cusQuery = new Query().group(fields.groupBy);\n // need to remove once sorting issues fixed in DataManager\n cusQuery = addSorting(sortOrder, 'key', cusQuery);\n var ds = getDataSource(dataSource, cusQuery);\n dataSource = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n var grpItem = {};\n var hdr = 'isHeader';\n grpItem[fields.text] = ds[j].key;\n grpItem[hdr] = true;\n grpItem.items = itemObj;\n dataSource.push(grpItem);\n for (var k = 0; k < itemObj.length; k++) {\n dataSource.push(itemObj[k]);\n }\n }\n return dataSource;\n }\n ListBase.groupDataSource = groupDataSource;\n /**\n * Returns a sorted query object.\n * @param {SortOrder} sortOrder - Specifies that sort order.\n * @param {string} sortBy - Specifies sortBy fields.\n * @param {Query=new Query()} query - Pass if any existing query.\n */\n function addSorting(sortOrder, sortBy, query) {\n if (query === void 0) { query = new Query(); }\n if (sortOrder === 'Ascending') {\n query.sortBy(sortBy, 'ascending', true);\n }\n else if (sortOrder === 'Descending') {\n query.sortBy(sortBy, 'descending', true);\n }\n else {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i].fn === 'onSortBy') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n }\n ListBase.addSorting = addSorting;\n /**\n * Return an array of JSON Data that processed based on queries.\n * @param {{[key:string]:Object}[]} dataSource - Specifies local JSON data source.\n * @param {Query} query - Specifies query that need to process.\n */\n function getDataSource(dataSource, query) {\n // tslint:disable-next-line\n return new DataManager(dataSource)\n .executeLocal(query);\n }\n ListBase.getDataSource = getDataSource;\n /**\n * Created JSON data based the UL and LI element\n * @param {HTMLElement|Element} element - UL element that need to convert as a JSON\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function createJsonFromElement(element, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var curEle = element.cloneNode(true);\n var jsonAr = [];\n curEle.classList.add('json-parent');\n var childs = curEle.querySelectorAll('.json-parent>li');\n curEle.classList.remove('json-parent');\n for (var i = 0; i < childs.length; i++) {\n var li = childs[i];\n var anchor = li.querySelector('a');\n var ul = li.querySelector('ul');\n var json = {};\n var childNodes = anchor ? anchor.childNodes : li.childNodes;\n var keys = Object.keys(childNodes);\n for (var i_1 = 0; i_1 < childNodes.length; i_1++) {\n if (!(childNodes[Number(keys[i_1])]).hasChildNodes()) {\n json[fields.text] = childNodes[Number(keys[i_1])].textContent;\n }\n }\n json[fields.id] = genUID();\n var attributes_1 = getAllAttributes(li);\n if (Object.keys(attributes_1).length) {\n json[fields.htmlAttributes] = attributes_1;\n }\n if (anchor) {\n attributes_1 = getAllAttributes(anchor);\n if (Object.keys(attributes_1).length) {\n json[fields.urlAttributes] = attributes_1;\n }\n }\n if (ul) {\n json[fields.child] = createJsonFromElement(ul, options);\n }\n jsonAr.push(json);\n }\n return jsonAr;\n }\n ListBase.createJsonFromElement = createJsonFromElement;\n function typeofData(data) {\n var match = { typeof: null, item: null };\n for (var i = 0; i < data.length; i++) {\n if (!isNullOrUndefined(data[i])) {\n return match = { typeof: typeof data[i], item: data[i] };\n }\n }\n return match;\n }\n function setAttribute(element, elementAttributes) {\n var attr = {};\n merge(attr, elementAttributes);\n if (attr.class) {\n addClass([element], attr.class.split(' '));\n delete attr.class;\n }\n attributes(element, attr);\n }\n function getAllAttributes(element) {\n var attributes = {};\n var attr = element.attributes;\n for (var index = 0; index < attr.length; index++) {\n attributes[attr[index].nodeName] = attr[index].nodeValue;\n }\n return attributes;\n }\n /**\n * Created UL element from content template.\n * @param {string} template - that need to convert and generate li element.\n * @param {{[key:string]:Object}[]} dataSource - Specifies local JSON data source.\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function renderContentTemplate(template, dataSource, fields, options) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });\n var curOpt = extend({}, defaultListBaseOptions, options);\n var compiledString = compile(template);\n var liCollection = [];\n var id = genUID(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], fields);\n var curItem = dataSource[i];\n var isHeader = curItem.isHeader;\n var value = (typeof curItem === 'string' || typeof curItem === 'number') ? curItem : fieldData[fields.value];\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreating(curData);\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], fields);\n value = fieldData[fields.value];\n }\n var li = createElement('li', {\n id: id + '-' + i,\n className: isHeader ? cssClass.group : cssClass.li, attrs: { role: 'presentation' }\n });\n if (isHeader) {\n li.innerText = fieldData[fields.text];\n }\n else {\n append(compiledString(curItem), li);\n li.setAttribute('data-value', value);\n li.setAttribute('role', 'option');\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n item: li,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreated(curData);\n }\n liCollection.push(li);\n }\n append(liCollection, ulElement);\n return ulElement;\n }\n ListBase.renderContentTemplate = renderContentTemplate;\n /**\n * Created header items from group template.\n * @param {string} template - that need to convert and generate li element.\n * @param {{[key:string]:Object}[]} dataSource - Specifies local JSON data source.\n * @param {FieldsMapping} fields - Specifies fields for mapping the dataSource.\n * @param {Element[]} headerItems? - Specifies listbase header items.\n */\n function renderGroupTemplate(groupTemplate, groupDataSource, fields, headerItems) {\n var compiledString = compile(groupTemplate);\n var category = fields.groupBy;\n var headerData = {};\n for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {\n var header = headerItems_1[_i];\n headerData[category] = header.textContent;\n header.innerHTML = '';\n append(compiledString(headerData), header);\n }\n return headerItems;\n }\n ListBase.renderGroupTemplate = renderGroupTemplate;\n function genUID() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n function processSubChild(curItem, fields, ds, options, element, level) {\n var fieldData = getFieldValues(curItem, fields);\n // Get SubList \n var subDS = fieldData[fields.child] || [];\n var hasChildren = fieldData[fields.hasChildren];\n //Create Sub child\n if (subDS.length) {\n hasChildren = true;\n element.classList.add(cssClass.hasChild);\n if (options.processSubChild) {\n var subLi = createListFromJson(subDS, options, ++level);\n element.appendChild(subLi);\n }\n }\n // Create expand and collapse node\n if (!!options.expandCollapse && hasChildren && !options.template) {\n if (element.firstElementChild.classList.contains(cssClass.textContent)) {\n element.firstElementChild.classList.add(cssClass.iconWrapper);\n }\n var expandElement = options.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));\n }\n }\n function generateSingleLevelLI(item, fields, className, innerElements, grpLI, id, index, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var value = item;\n var dataSource;\n var fieldData = getFieldValues(item, fields);\n if (typeof item !== 'string' && typeof item !== 'number') {\n dataSource = item;\n text = (typeof fieldData[fields.text] === 'boolean' || typeof fieldData[fields.text] === 'number') ?\n fieldData[fields.text] : (fieldData[fields.text] || '');\n value = fieldData[fields.value];\n }\n var elementID;\n if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])\n && fieldData[fields.id] !== '') {\n elementID = id;\n }\n else {\n elementID = id + '-' + index;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n id: elementID, attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n if (dataSource && fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled].toString() === 'false') {\n li.classList.add(cssClass.disabled);\n }\n if (grpLI) {\n li.innerText = text;\n }\n else {\n if (!isNullOrUndefined(value)) {\n li.setAttribute('data-value', value);\n }\n li.setAttribute('role', 'option');\n if (dataSource && fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (innerElements.length) {\n append(innerElements, li);\n }\n if (dataSource && fieldData.hasOwnProperty(fields.url) && fieldData[fields.url]) {\n li.appendChild(anchorTag(dataSource, fields, text));\n }\n else {\n li.appendChild(document.createTextNode(text));\n }\n }\n return li;\n }\n function getModuleClass(moduleName) {\n var moduleClass;\n return moduleClass = {\n li: \"e-\" + moduleName + \"-item\",\n ul: \"e-\" + moduleName + \"-parent e-ul\",\n group: \"e-\" + moduleName + \"-group-item\",\n icon: \"e-\" + moduleName + \"-icon\",\n text: \"e-\" + moduleName + \"-text\",\n check: \"e-\" + moduleName + \"-check\",\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: \"e-\" + moduleName + \"-url\",\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: \"e-\" + moduleName + \"-img\",\n iconWrapper: 'e-icon-wrapper'\n };\n }\n function anchorTag(dataSource, fields, text) {\n var fieldData = getFieldValues(dataSource, fields);\n var attr = { href: fieldData[fields.url] };\n if (fieldData.hasOwnProperty(fields.urlAttributes) && fieldData[fields.urlAttributes]) {\n merge(attr, fieldData[fields.urlAttributes]);\n }\n var anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url, innerHTML: text });\n setAttribute(anchorTag, attr);\n return anchorTag;\n }\n /* tslint:disable:align */\n function generateLI(item, fields, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var uID;\n var grpLI;\n var dataSource;\n var fieldData;\n if (typeof item !== 'string') {\n fieldData = getFieldValues(item, fields);\n dataSource = item;\n text = fieldData[fields.text] || '';\n uID = fieldData[fields.id];\n grpLI = (item.hasOwnProperty('isHeader') && item.isHeader)\n ? true : false;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n !isNullOrUndefined(uID) ? li.setAttribute('data-uid', uID) : li.setAttribute('data-uid', genUID());\n if (grpLI && options && options.groupTemplate) {\n var compiledString = compile(options.groupTemplate);\n append(compiledString(item), li);\n }\n else if (!grpLI && options && options.template) {\n var compiledString = compile(options.template);\n append(compiledString(item), li);\n }\n else {\n var innerDiv = createElement('div', { className: cssClass.textContent,\n attrs: (ariaAttributes.wrapperRole !== '' ? { role: ariaAttributes.wrapperRole } : {}) });\n if (dataSource && fieldData.hasOwnProperty(fields.url) && fieldData[fields.url]) {\n innerDiv.appendChild(anchorTag(dataSource, fields, text));\n }\n else {\n innerDiv.appendChild(createElement('span', { className: cssClass.text, innerHTML: text,\n attrs: (ariaAttributes.itemText !== '' ? { role: ariaAttributes.itemText } : {}) }));\n }\n li.appendChild(innerDiv);\n }\n return li;\n }\n /**\n * Returns UL element based on the given LI element.\n * @param {HTMLElement[]} liElement - Specifies array of LI element.\n * @param {string} className? - Specifies class name that need to be added in UL element.\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateUL(liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n cssClass = getModuleClass(curOpt.moduleName);\n var ulElement = createElement('ul', {\n className: cssClass.ul + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.listRole !== '' ? { role: ariaAttributes.listRole } : {})\n });\n append(liElement, ulElement);\n return ulElement;\n }\n ListBase.generateUL = generateUL;\n /**\n * Returns LI element with additional DIV tag based on the given LI element.\n * @param {liElement} liElement - Specifies LI element.\n * @param {string} className? - Specifies class name that need to be added in created DIV element.\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateIcon(liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n cssClass = getModuleClass(curOpt.moduleName);\n var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', { className: 'e-icons ' + curOpt.expandIconClass + ' ' +\n (isNullOrUndefined(className) ? '' : className) })], liElement.querySelector('.' + cssClass.textContent));\n return liElement;\n }\n ListBase.generateIcon = generateIcon;\n})(ListBase || (ListBase = {}));\n/**\n * Used to get dataSource item from complex data using fields.\n * @param {{[key:string]:Object}|string[]|string} dataSource - Specifies an JSON or String data.\n * @param {FieldsMapping} fields - Fields that are mapped from the dataSource.\n */\nexport function getFieldValues(dataItem, fields) {\n var fieldData = {};\n var value;\n if (isNullOrUndefined(dataItem)) {\n return dataItem;\n }\n else if (typeof (dataItem) === 'string' || typeof (dataItem) === 'number') {\n return dataItem;\n }\n else if (isNullOrUndefined(dataItem.isHeader)) {\n for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {\n var field = _a[_i];\n if (!isNullOrUndefined(fields[field]) &&\n typeof (fields[field]) === 'string') {\n var property = fields[field].split('.');\n var dataField = property.length > 1 ? property[0] : fields[field];\n if (!isNullOrUndefined(dataItem[dataField])) {\n value = getValue(fields[field], dataItem);\n if (!isNullOrUndefined(value)) {\n fieldData[fields[field]] = value;\n }\n }\n }\n }\n }\n else if (!isNullOrUndefined(dataItem.isHeader) && dataItem.isHeader) {\n fieldData = dataItem;\n }\n return fieldData;\n}\n","/**\n * Encoding class: Contains the details about encoding type, whether to write a Unicode byte order mark (BOM).\n * ```typescript\n * let encoding : Encoding = new Encoding();\n * encoding.type = 'Utf8';\n * encoding.getBytes('Encoding', 0, 5);\n * ```\n */\nvar Encoding = /** @class */ (function () {\n /**\n * Initializes a new instance of the Encoding class. A parameter specifies whether to write a Unicode byte order mark\n * @param {boolean} includeBom?-true to specify that a Unicode byte order mark is written; otherwise, false.\n */\n function Encoding(includeBom) {\n this.emitBOM = true;\n this.encodingType = 'Ansi';\n this.initBOM(includeBom);\n }\n Object.defineProperty(Encoding.prototype, \"includeBom\", {\n /**\n * Gets a value indicating whether to write a Unicode byte order mark\n * @returns boolean- true to specify that a Unicode byte order mark is written; otherwise, false\n */\n get: function () {\n return this.emitBOM;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Encoding.prototype, \"type\", {\n /**\n * Gets the encoding type.\n * @returns EncodingType\n */\n get: function () {\n return this.encodingType;\n },\n /**\n * Sets the encoding type.\n * @param {EncodingType} value\n */\n set: function (value) {\n this.encodingType = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Initialize the includeBom to emit BOM or Not\n * @param {boolean} includeBom\n */\n Encoding.prototype.initBOM = function (includeBom) {\n if (includeBom === undefined || includeBom === null) {\n this.emitBOM = true;\n }\n else {\n this.emitBOM = includeBom;\n }\n };\n /**\n * Calculates the number of bytes produced by encoding the characters in the specified string\n * @param {string} chars - The string containing the set of characters to encode\n * @returns {number} - The number of bytes produced by encoding the specified characters\n */\n Encoding.prototype.getByteCount = function (chars) {\n var byteCount = 0;\n validateNullOrUndefined(chars, 'string');\n if (chars === '') {\n var byte = this.utf8Len(chars.charCodeAt(0));\n return byte;\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n return this.getByteCountInternal(chars, 0, chars.length);\n };\n /**\n * Return the Byte of character\n * @param {number} codePoint\n * @returns {number}\n */\n Encoding.prototype.utf8Len = function (codePoint) {\n var bytes = codePoint <= 0x7F ? 1 :\n codePoint <= 0x7FF ? 2 :\n codePoint <= 0xFFFF ? 3 :\n codePoint <= 0x1FFFFF ? 4 : 0;\n return bytes;\n };\n /**\n * for 4 byte character return surrogate pair true, otherwise false\n * @param {number} codeUnit\n * @returns {boolean}\n */\n Encoding.prototype.isHighSurrogate = function (codeUnit) {\n return codeUnit >= 0xD800 && codeUnit <= 0xDBFF;\n };\n /**\n * for 4byte character generate the surrogate pair\n * @param {number} highCodeUnit\n * @param {number} lowCodeUnit\n */\n Encoding.prototype.toCodepoint = function (highCodeUnit, lowCodeUnit) {\n highCodeUnit = (0x3FF & highCodeUnit) << 10;\n var u = highCodeUnit | (0x3FF & lowCodeUnit);\n return u + 0x10000;\n };\n /**\n * private method to get the byte count for specific charindex and count\n * @param {string} chars\n * @param {number} charIndex\n * @param {number} charCount\n */\n Encoding.prototype.getByteCountInternal = function (chars, charIndex, charCount) {\n var byteCount = 0;\n if (this.encodingType === 'Utf8' || this.encodingType === 'Unicode') {\n var isUtf8 = this.encodingType === 'Utf8';\n for (var i = 0; i < charCount; i++) {\n var charCode = chars.charCodeAt(isUtf8 ? charIndex : charIndex++);\n if (this.isHighSurrogate(charCode)) {\n if (isUtf8) {\n var high = charCode;\n var low = chars.charCodeAt(++charIndex);\n byteCount += this.utf8Len(this.toCodepoint(high, low));\n }\n else {\n byteCount += 4;\n ++i;\n }\n }\n else {\n if (isUtf8) {\n byteCount += this.utf8Len(charCode);\n }\n else {\n byteCount += 2;\n }\n }\n if (isUtf8) {\n charIndex++;\n }\n }\n return byteCount;\n }\n else {\n byteCount = charCount;\n return byteCount;\n }\n };\n /**\n * Encodes a set of characters from the specified string into the ArrayBuffer.\n * @param {string} s- The string containing the set of characters to encode\n * @param {number} charIndex-The index of the first character to encode.\n * @param {number} charCount- The number of characters to encode.\n * @returns {ArrayBuffer} - The ArrayBuffer that contains the resulting sequence of bytes.\n */\n Encoding.prototype.getBytes = function (s, charIndex, charCount) {\n validateNullOrUndefined(s, 'string');\n validateNullOrUndefined(charIndex, 'charIndex');\n validateNullOrUndefined(charCount, 'charCount');\n if (charIndex < 0 || charCount < 0) {\n throw new RangeError('Argument Out Of Range Exception: charIndex or charCount is less than zero');\n }\n if (s.length - charIndex < charCount) {\n throw new RangeError('Argument Out Of Range Exception: charIndex and charCount do not denote a valid range in string');\n }\n var bytes;\n if (s === '') {\n bytes = new ArrayBuffer(0);\n return bytes;\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n var byteCount = this.getByteCountInternal(s, charIndex, charCount);\n switch (this.type) {\n case 'Utf8':\n bytes = this.getBytesOfUtf8Encoding(byteCount, s, charIndex, charCount);\n return bytes;\n case 'Unicode':\n bytes = this.getBytesOfUnicodeEncoding(byteCount, s, charIndex, charCount);\n return bytes;\n default:\n bytes = this.getBytesOfAnsiEncoding(byteCount, s, charIndex, charCount);\n return bytes;\n }\n };\n /**\n * Decodes a sequence of bytes from the specified ArrayBuffer into the string.\n * @param {ArrayBuffer} bytes- The ArrayBuffer containing the sequence of bytes to decode.\n * @param {number} index- The index of the first byte to decode.\n * @param {number} count- The number of bytes to decode.\n * @returns {string} - The string that contains the resulting set of characters.\n */\n Encoding.prototype.getString = function (bytes, index, count) {\n validateNullOrUndefined(bytes, 'bytes');\n validateNullOrUndefined(index, 'index');\n validateNullOrUndefined(count, 'count');\n if (index < 0 || count < 0) {\n throw new RangeError('Argument Out Of Range Exception: index or count is less than zero');\n }\n if (bytes.byteLength - index < count) {\n throw new RangeError('Argument Out Of Range Exception: index and count do not denote a valid range in bytes');\n }\n if (bytes.byteLength === 0 || count === 0) {\n return '';\n }\n if (this.type === null || this.type === undefined) {\n this.type = 'Ansi';\n }\n var out = '';\n var byteCal = new Uint8Array(bytes);\n switch (this.type) {\n case 'Utf8':\n var s = this.getStringOfUtf8Encoding(byteCal, index, count);\n return s;\n case 'Unicode':\n var byteUnicode = new Uint16Array(bytes);\n out = this.getStringofUnicodeEncoding(byteUnicode, index, count);\n return out;\n default:\n var j = index;\n for (var i = 0; i < count; i++) {\n var c = byteCal[j];\n out += String.fromCharCode(c); // 1 byte(ASCII) character \n j++;\n }\n return out;\n }\n };\n Encoding.prototype.getBytesOfAnsiEncoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var bufview = new Uint8Array(bytes);\n var k = 0;\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(charIndex++);\n if (charcode < 0x800) {\n bufview[k] = charcode;\n }\n else {\n bufview[k] = 63; //replacement character '?'\n }\n k++;\n }\n return bytes;\n };\n Encoding.prototype.getBytesOfUtf8Encoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var uint = new Uint8Array(bytes);\n var index = charIndex;\n var j = 0;\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(index);\n if (charcode <= 0x7F) {\n uint[j] = charcode;\n }\n else if (charcode < 0x800) {\n uint[j] = 0xc0 | (charcode >> 6);\n uint[++j] = 0x80 | (charcode & 0x3f);\n }\n else if ((charcode < 0xd800 || charcode >= 0xe000)) {\n uint[j] = 0xe0 | (charcode >> 12);\n uint[++j] = 0x80 | ((charcode >> 6) & 0x3f);\n uint[++j] = 0x80 | (charcode & 0x3f);\n }\n else {\n uint[j] = 0xef;\n uint[++j] = 0xbf;\n uint[++j] = 0xbd; // U+FFFE \"replacement character\"\n }\n ++j;\n ++index;\n }\n return bytes;\n };\n Encoding.prototype.getBytesOfUnicodeEncoding = function (byteCount, s, charIndex, charCount) {\n var bytes = new ArrayBuffer(byteCount);\n var uint16 = new Uint16Array(bytes);\n for (var i = 0; i < charCount; i++) {\n var charcode = s.charCodeAt(i);\n uint16[i] = charcode;\n }\n return bytes;\n };\n Encoding.prototype.getStringOfUtf8Encoding = function (byteCal, index, count) {\n var j = 0;\n var i = index;\n var s = '';\n for (j; j < count; j++) {\n var c = byteCal[i++];\n while (i > byteCal.length) {\n return s;\n }\n if (c > 127) {\n if (c > 191 && c < 224 && i < count) {\n c = (c & 31) << 6 | byteCal[i] & 63;\n }\n else if (c > 223 && c < 240 && i < byteCal.byteLength) {\n c = (c & 15) << 12 | (byteCal[i] & 63) << 6 | byteCal[++i] & 63;\n }\n else if (c > 239 && c < 248 && i < byteCal.byteLength) {\n c = (c & 7) << 18 | (byteCal[i] & 63) << 12 | (byteCal[++i] & 63) << 6 | byteCal[++i] & 63;\n }\n ++i;\n }\n s += String.fromCharCode(c); // 1 byte(ASCII) character \n }\n return s;\n };\n Encoding.prototype.getStringofUnicodeEncoding = function (byteUni, index, count) {\n if (count > byteUni.length) {\n throw new RangeError('ArgumentOutOfRange_Count');\n }\n var byte16 = new Uint16Array(count);\n var out = '';\n for (var i = 0; i < count && i < byteUni.length; i++) {\n byte16[i] = byteUni[index++];\n }\n out = String.fromCharCode.apply(null, byte16);\n return out;\n };\n /**\n * To clear the encoding instance\n * @return {void}\n */\n Encoding.prototype.destroy = function () {\n this.emitBOM = undefined;\n this.encodingType = undefined;\n };\n return Encoding;\n}());\nexport { Encoding };\n/**\n * To check the object is null or undefined and throw error if it is null or undefined\n * @param {Object} value - object to check is null or undefined\n * @return {boolean}\n * @throws {ArgumentException} - if the value is null or undefined\n * @private\n */\nexport function validateNullOrUndefined(value, message) {\n if (value === null || value === undefined) {\n throw new Error('ArgumentException: ' + message + ' cannot be null or undefined');\n }\n}\n","/**\n * @private\n * @hidden\n */\nexport function defaultToString(item) {\n // if (item === null) {\n // return 'COLLECTION_NULL';\n // } else if (typeof item === 'undefined') {\n // return 'COLLECTION_UNDEFINED';\n // } else if (Object.prototype.toString.call(item) === '[object String]') {\n if (Object.prototype.toString.call(item) === '[object String]') {\n return '$s' + item;\n }\n else {\n return '$o' + item.toString();\n }\n}\n","/**\n * Specifies Chart Themes\n */\nexport var Theme;\n(function (Theme) {\n /** @private */\n Theme.axisLabelFont = {\n size: '12px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.axisTitleFont = {\n size: '14px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.chartTitleFont = {\n size: '15px',\n fontWeight: '500',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.crosshairLabelFont = {\n size: '13px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.tooltipLabelFont = {\n size: '13px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.legendLabelFont = {\n size: '13px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.stripLineLabelFont = {\n size: '12px',\n fontWeight: 'Regular',\n color: '#353535',\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n})(Theme || (Theme = {}));\n/** @private */\nexport function getSeriesColor(theme) {\n var palette;\n switch (theme) {\n case 'Fabric':\n palette = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];\n break;\n case 'Bootstrap':\n palette = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n break;\n case 'Highcontrast':\n palette = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n break;\n default:\n palette = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\n break;\n }\n return palette;\n}\n/** @private */\nexport function getThemeColor(theme) {\n var style;\n switch (theme) {\n case 'Highcontrast':\n style = {\n axisLabel: '#ffffff',\n axisTitle: '#ffffff',\n axisLine: '#ffffff',\n majorGridLine: '#BFBFBF',\n minorGridLine: '#969696',\n majorTickLine: '#BFBFBF',\n minorTickLine: '#969696',\n chartTitle: '#ffffff',\n legendLabel: '#ffffff',\n background: '#000000',\n areaBorder: '#ffffff',\n errorBar: '#ffffff',\n crosshairLine: '#ffffff',\n crosshairFill: '#ffffff',\n crosshairLabel: '#000000',\n tooltipFill: '#ffffff',\n tooltipBoldLabel: '#000000',\n tooltipLightLabel: '#000000',\n tooltipHeaderLine: '#969696',\n markerShadow: '#BFBFBF',\n selectionRectFill: 'rgba(255, 217, 57, 0.3)',\n selectionRectStroke: '#ffffff',\n selectionCircleStroke: '#FFD939'\n };\n break;\n default:\n style = {\n axisLabel: '#686868',\n axisTitle: '#424242',\n axisLine: '#b5b5b5',\n majorGridLine: '#dbdbdb',\n minorGridLine: '#eaeaea',\n majorTickLine: '#b5b5b5',\n minorTickLine: '#d6d6d6',\n chartTitle: '#424242',\n legendLabel: '#353535',\n background: '#FFFFFF',\n areaBorder: 'Gray',\n errorBar: '#000000',\n crosshairLine: '#4f4f4f',\n crosshairFill: '#4f4f4f',\n crosshairLabel: '#e5e5e5',\n tooltipFill: 'rgba(0, 8, 22, 0.75)',\n tooltipBoldLabel: '#ffffff',\n tooltipLightLabel: '#dbdbdb',\n tooltipHeaderLine: '#ffffff',\n markerShadow: null,\n selectionRectFill: 'rgba(41, 171, 226, 0.1)',\n selectionRectStroke: '#29abe2',\n selectionCircleStroke: '#29abe2'\n };\n break;\n }\n return style;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { SvgRenderer, Animation, compile as templateComplier } from '@syncfusion/ej2-base';\nimport { merge, extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { createElement, remove } from '@syncfusion/ej2-base';\nimport { Index } from '../../common/model/base';\n/**\n * Methods for calculating the text size.\n */\n/**\n * Function to measure the height and width of the text.\n * @param {string} text\n * @param {FontModel} font\n * @param {string} id\n * @returns no\n * @private\n */\nexport function measureText(text, font) {\n var htmlObject = document.getElementById('chartmeasuretext');\n if (htmlObject === null) {\n htmlObject = createElement('text', { id: 'chartmeasuretext' });\n document.body.appendChild(htmlObject);\n }\n htmlObject.innerHTML = text;\n htmlObject.style.position = 'absolute';\n htmlObject.style.fontSize = font.size;\n htmlObject.style.fontWeight = font.fontWeight;\n htmlObject.style.fontStyle = font.fontStyle;\n htmlObject.style.fontFamily = font.fontFamily;\n htmlObject.style.visibility = 'hidden';\n htmlObject.style.top = '-100';\n htmlObject.style.left = '0';\n htmlObject.style.whiteSpace = 'nowrap';\n // For bootstrap line height issue\n htmlObject.style.lineHeight = 'normal';\n return new Size(htmlObject.clientWidth, htmlObject.clientHeight);\n}\n/**\n * Function to sort the dataSource, by default it sort the data in ascending order.\n * @param {Object} data\n * @param {string} fields\n * @param {boolean} isDescending\n * @returns Object\n */\nexport function sort(data, fields, isDescending) {\n var sortData = extend([], data, null);\n sortData.sort(function (a, b) {\n var first = 0;\n var second = 0;\n for (var i = 0; i < fields.length; i++) {\n first += a[fields[i]];\n second += b[fields[i]];\n }\n if ((!isDescending && first < second) || (isDescending && first > second)) {\n return -1;\n }\n else if (first === second) {\n return 0;\n }\n return 1;\n });\n return sortData;\n}\n/** @private */\nexport function rotateTextSize(font, text, angle, chart) {\n var renderer = new SvgRenderer(chart.element.id);\n var box;\n var options;\n var htmlObject;\n options = {\n 'font-size': font.size,\n 'font-style': font.fontStyle,\n 'font-family': font.fontFamily,\n 'font-weight': font.fontWeight,\n 'transform': 'rotate(' + angle + ', 0, 0)',\n 'text-anchor': 'middle'\n };\n htmlObject = renderer.createText(options, text);\n if (!chart.delayRedraw) {\n chart.element.appendChild(chart.svgObject);\n }\n chart.svgObject.appendChild(htmlObject);\n box = htmlObject.getBoundingClientRect();\n remove(htmlObject);\n if (!chart.delayRedraw) {\n remove(chart.svgObject);\n }\n return new Size((box.right - box.left), (box.bottom - box.top));\n}\n/** @private */\nexport function removeElement(id) {\n var element = getElement(id);\n if (element) {\n remove(element);\n }\n}\n/** @private */\nexport function logBase(value, base) {\n return Math.log(value) / Math.log(base);\n}\n/** @private */\nexport function showTooltip(text, x, y, areaWidth, id, element, isTouch) {\n //let id1: string = 'EJ2_legend_tooltip';\n var tooltip = document.getElementById(id);\n var width = measureText(text, {\n fontFamily: 'Segoe UI', size: '12px',\n fontStyle: 'Normal', fontWeight: 'Regular'\n }).width + 5;\n x = (x + width > areaWidth) ? x - width : x;\n if (!tooltip) {\n tooltip = createElement('div', {\n innerHTML: text,\n id: id,\n styles: 'top:' + (y + 15).toString() + 'px;left:' + (x + 15).toString() +\n 'px;background-color: rgb(255, 255, 255) !important; color:black !important; ' +\n 'position:absolute;border:1px solid rgb(112, 112, 112); padding-left : 3px; padding-right : 2px;' +\n 'padding-bottom : 2px; padding-top : 2px; font-size:12px; font-family: \"Segoe UI\"'\n });\n element.appendChild(tooltip);\n }\n else {\n tooltip.innerHTML = text;\n tooltip.style.top = (y + 15).toString() + 'px';\n tooltip.style.left = (x + 15).toString() + 'px';\n }\n if (isTouch) {\n setTimeout(function () { removeElement(id); }, 1500);\n }\n}\n/** @private */\nexport function inside(value, range) {\n return (value < range.max) && (value > range.min);\n}\n/** @private */\nexport function withIn(value, range) {\n return (value <= range.max) && (value >= range.min);\n}\n/** @private */\nexport function withInRange(previousPoint, currentPoint, nextPoint, series) {\n var mX2 = series.logWithIn(currentPoint.xValue, series.xAxis);\n var mX1 = previousPoint ? series.logWithIn(previousPoint.xValue, series.xAxis) : mX2;\n var mX3 = nextPoint ? series.logWithIn(nextPoint.xValue, series.xAxis) : mX2;\n var xStart = Math.floor(series.xAxis.visibleRange.min);\n var xEnd = Math.ceil(series.xAxis.visibleRange.max);\n return ((mX1 >= xStart && mX1 <= xEnd) || (mX2 >= xStart && mX2 <= xEnd) ||\n (mX3 >= xStart && mX3 <= xEnd) || (xStart >= mX1 && xStart <= mX3));\n}\n/** @private */\nexport function sum(values) {\n var sum = 0;\n for (var _i = 0, values_1 = values; _i < values_1.length; _i++) {\n var value = values_1[_i];\n sum += value;\n }\n return sum;\n}\n/** @private */\nexport function subArraySum(values, first, last, index, series) {\n var sum = 0;\n if (index !== null) {\n for (var i = (first + 1); i < last; i++) {\n if (index.indexOf(i) === -1) {\n sum += values[i][series.yName];\n }\n }\n }\n else {\n for (var i = (first + 1); i < last; i++) {\n if (!isNullOrUndefined(values[i][series.yName])) {\n sum += values[i][series.yName];\n }\n }\n }\n return sum;\n}\n/** @private */\nexport function subtractThickness(rect, thickness) {\n rect.x += thickness.left;\n rect.y += thickness.top;\n rect.width -= thickness.left + thickness.right;\n rect.height -= thickness.top + thickness.bottom;\n return rect;\n}\n/** @private */\nexport function subtractRect(rect, thickness) {\n rect.x += thickness.x;\n rect.y += thickness.y;\n rect.width -= thickness.x + thickness.width;\n rect.height -= thickness.y + thickness.height;\n return rect;\n}\n/** @private */\nexport function degreeToLocation(degree, radius, center) {\n var radian = (degree * Math.PI) / 180;\n return new ChartLocation(Math.cos(radian) * radius + center.x, Math.sin(radian) * radius + center.y);\n}\nfunction getAccumulationLegend(locX, locY, r, height, width, mode) {\n var cartesianlarge = degreeToLocation(270, r, new ChartLocation(locX, locY));\n var cartesiansmall = degreeToLocation(270, r, new ChartLocation(locX + (width / 10), locY));\n return 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + ' ' + (locX + r) + ' ' + (locY) + ' ' + 'A' + ' ' + (r) + ' ' + (r) +\n ' ' + 0 + ' ' + 1 + ' ' + 1 + ' ' + cartesianlarge.x + ' ' + cartesianlarge.y + ' ' + 'Z' + ' ' + 'M' + ' ' + (locX +\n (width / 10)) + ' ' + (locY - (height / 10)) + ' ' + 'L' + (locX + (r)) + ' ' + (locY - height / 10) + ' ' + 'A' + ' '\n + (r) + ' ' + (r) + ' ' + 0 + ' ' + 0 + ' ' + 0 + ' ' + cartesiansmall.x + ' ' + cartesiansmall.y + ' ' + 'Z';\n}\n/** @private */\nexport function getAngle(center, point) {\n var angle = Math.atan2((point.y - center.y), (point.x - center.x));\n angle = angle < 0 ? (6.283 + angle) : angle;\n return angle * (180 / Math.PI);\n}\n/** @private */\nexport function subArray(values, index) {\n var subArray = [];\n for (var i = 0; i <= index - 1; i++) {\n subArray.push(values[i]);\n }\n return subArray;\n}\n/** @private */\nexport function valueToCoefficient(value, axis) {\n var range = axis.visibleRange;\n var result = (value - range.min) / (range.delta);\n return axis.isInversed ? (1 - result) : result;\n}\n/** @private */\nexport function TransformToVisible(x, y, xAxis, yAxis, isInverted, series) {\n x = (xAxis.valueType === 'Logarithmic' ? logBase(x > 1 ? x : 1, xAxis.logBase) : x);\n y = (yAxis.valueType === 'Logarithmic' ?\n logBase(y > 1 ? y : 1, yAxis.logBase) : y);\n x += xAxis.valueType === 'Category' && xAxis.labelPlacement === 'BetweenTicks' && series.type !== 'Radar' ? 0.5 : 0;\n var radius = series.chart.radius * valueToCoefficient(y, yAxis);\n var point = CoefficientToVector(valueToPolarCoefficient(x, xAxis), series.chart.primaryXAxis.startAngle);\n return {\n x: (series.clipRect.width / 2 + series.clipRect.x) + radius * point.x,\n y: (series.clipRect.height / 2 + series.clipRect.y) + radius * point.y\n };\n}\n/**\n * method to find series, point index by element id\n * @private\n */\nexport function indexFinder(id, isPoint) {\n if (isPoint === void 0) { isPoint = false; }\n var ids = ['NaN', 'NaN'];\n if (id.indexOf('_Point_') > -1) {\n ids = id.split('_Series_')[1].split('_Point_');\n }\n else if (id.indexOf('_shape_') > -1 && (!isPoint || (isPoint && id.indexOf('_legend_') === -1))) {\n ids = id.split('_shape_');\n ids[0] = '0';\n }\n else if (id.indexOf('_text_') > -1 && (!isPoint || (isPoint && id.indexOf('_legend_') === -1))) {\n ids = id.split('_text_');\n ids[0] = '0';\n }\n return new Index(parseInt(ids[0], 10), parseInt(ids[1], 10));\n}\n/** @private */\nexport function CoefficientToVector(coefficient, startAngle) {\n startAngle = startAngle < 0 ? startAngle + 360 : startAngle;\n var angle = Math.PI * (1.5 - 2 * coefficient);\n angle = angle + (startAngle * Math.PI) / 180;\n return { x: Math.cos(angle), y: Math.sin(angle) };\n}\n/** @private */\nexport function valueToPolarCoefficient(value, axis) {\n var range = axis.visibleRange;\n var delta;\n var length;\n if (axis.valueType !== 'Category') {\n delta = (range.max - (axis.valueType === 'DateTime' ? axis.dateTimeInterval : range.interval)) - range.min;\n length = axis.visibleLabels.length - 1;\n delta = delta === 0 ? 1 : delta;\n }\n else {\n delta = range.delta;\n length = axis.visibleLabels.length;\n }\n return axis.isInversed ? ((value - range.min) / delta) * (1 - 1 / (length)) :\n 1 - ((value - range.min) / delta) * (1 - 1 / (length));\n}\n/** @private */\nvar Mean = /** @class */ (function () {\n function Mean(verticalStandardMean, verticalSquareRoot, horizontalStandardMean, horizontalSquareRoot, verticalMean, horizontalMean) {\n this.verticalStandardMean = verticalStandardMean;\n this.horizontalStandardMean = horizontalStandardMean;\n this.verticalSquareRoot = verticalSquareRoot;\n this.horizontalSquareRoot = horizontalSquareRoot;\n this.verticalMean = verticalMean;\n this.horizontalMean = horizontalMean;\n }\n return Mean;\n}());\nexport { Mean };\n/** @private */\nvar PolarArc = /** @class */ (function () {\n function PolarArc(startAngle, endAngle, innerRadius, radius, currentXPosition) {\n this.startAngle = startAngle;\n this.endAngle = endAngle;\n this.innerRadius = innerRadius;\n this.radius = radius;\n this.currentXPosition = currentXPosition;\n }\n return PolarArc;\n}());\nexport { PolarArc };\n/** @private */\nexport function createTooltip(id, text, top, left, fontSize) {\n var tooltip = getElement(id);\n var style = 'top:' + top.toString() + 'px;' +\n 'left:' + left.toString() + 'px;' +\n 'color:black !important' +\n 'background:#FFFFFF !important' + ';' +\n 'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';\n if (!tooltip) {\n tooltip = createElement('div', {\n id: id, innerHTML: ' ' + text + ' ', styles: style\n });\n document.body.appendChild(tooltip);\n }\n else {\n tooltip.setAttribute('innerHTML', ' ' + text + ' ');\n tooltip.setAttribute('styles', style);\n }\n}\n/** @private */\nexport function createZoomingLabels(chart, axis, parent, index, isVertical, rect) {\n var margin = 5;\n var opposedPosition = axis.opposedPosition;\n var anchor = isVertical ? 'start' : 'auto';\n var size;\n var chartRect = chart.availableSize.width;\n var x;\n var y;\n var rx = 3;\n var arrowLocation;\n var direction;\n for (var i = 0; i < 2; i++) {\n size = measureText(i ? axis.endLabel : axis.startLabel, axis.labelStyle);\n if (isVertical) {\n arrowLocation = i ? new ChartLocation(rect.x, rect.y + rx) :\n new ChartLocation(axis.rect.x, (rect.y + rect.height - rx));\n x = (rect.x + (opposedPosition ? (rect.width + margin) : -(size.width + margin + margin)));\n y = (rect.y + (i ? 0 : rect.height - size.height - margin));\n x += (x < 0 || ((chartRect) < (x + size.width + margin))) ? (opposedPosition ? -(size.width / 2) : size.width / 2) : 0;\n direction = findDirection(rx, rx, new Rect(x, y, size.width + margin, size.height + margin), arrowLocation, margin, false, false, !opposedPosition, arrowLocation.x, arrowLocation.y + (i ? -rx : rx));\n }\n else {\n arrowLocation = i ? new ChartLocation((rect.x + rect.width - rx), (rect.y + rect.height)) :\n new ChartLocation(rect.x + rx, (rect.y + rect.height));\n x = (rect.x + (i ? (rect.width - size.width - margin) : 0));\n y = (opposedPosition ? (rect.y - size.height - 10) : (rect.y + rect.height + margin));\n direction = findDirection(rx, rx, new Rect(x, y, size.width + margin, size.height + margin), arrowLocation, margin, opposedPosition, !opposedPosition, false, arrowLocation.x + (i ? rx : -rx), arrowLocation.y);\n }\n x = x + (margin / 2);\n y = y + (3 * (size.height / 4)) + (margin / 2);\n parent.appendChild(chart.renderer.drawPath(new PathOption(chart.element.id + '_Zoom_' + index + '_AxisLabel_Shape_' + i, chart.themeStyle.crosshairFill, 2, chart.themeStyle.crosshairFill, 1, null, direction)));\n textElement(new TextOption(chart.element.id + '_Zoom_' + index + '_AxisLabel_' + i, x, y, anchor, i ? axis.endLabel : axis.startLabel), { color: chart.themeStyle.crosshairLabel, fontFamily: 'Segoe UI', fontWeight: 'Regular', size: '11px' }, chart.themeStyle.crosshairLabel, parent);\n }\n return parent;\n}\n//Within bounds\n/** @private */\nexport function withInBounds(x, y, bounds, width, height) {\n if (width === void 0) { width = 0; }\n if (height === void 0) { height = 0; }\n return (x >= bounds.x - width && x <= bounds.x + bounds.width + width && y >= bounds.y - height\n && y <= bounds.y + bounds.height + height);\n}\n/** @private */\nexport function getValueXByPoint(value, size, axis) {\n var actualValue = !axis.isInversed ? value / size : (1 - (value / size));\n return actualValue * (axis.visibleRange.delta) + axis.visibleRange.min;\n}\n/** @private */\nexport function getValueYByPoint(value, size, axis) {\n var actualValue = axis.isInversed ? value / size : (1 - (value / size));\n return actualValue * (axis.visibleRange.delta) + axis.visibleRange.min;\n}\n/** @private */\nexport function findClipRect(series) {\n var rect = series.clipRect;\n if (series.chart.requireInvertedAxis) {\n rect.x = series.yAxis.rect.x;\n rect.y = series.xAxis.rect.y;\n rect.width = series.yAxis.rect.width;\n rect.height = series.xAxis.rect.height;\n }\n else {\n rect.x = series.xAxis.rect.x;\n rect.y = series.yAxis.rect.y;\n rect.width = series.xAxis.rect.width;\n rect.height = series.yAxis.rect.height;\n }\n}\n/** @private */\nexport function firstToLowerCase(str) {\n return str.substr(0, 1).toLowerCase() + str.substr(1);\n}\n/** @private */\nexport function getMinPointsDelta(axis, seriesCollection) {\n var minDelta = Number.MAX_VALUE;\n var xValues;\n var minVal;\n seriesCollection.forEach(function (series, index) {\n xValues = [];\n if (series.visible &&\n (axis.name === series.xAxisName || (axis.name === 'primaryXAxis' && series.xAxisName === null)\n || (axis.name === series.chart.primaryXAxis.name && !series.xAxisName))) {\n xValues = series.points.map(function (point, index) {\n return point.xValue;\n });\n xValues.sort(function (first, second) { return first - second; });\n if (xValues.length === 1) {\n minVal = xValues[0] - ((series.xMin && series.xAxis.valueType !== 'DateTime') ?\n series.xMin : axis.visibleRange.min);\n if (minVal !== 0) {\n minDelta = Math.min(minDelta, minVal);\n }\n }\n else {\n xValues.forEach(function (value, index, xValues) {\n if (index > 0 && value) {\n minVal = value - xValues[index - 1];\n if (minVal !== 0) {\n minDelta = Math.min(minDelta, minVal);\n }\n }\n });\n }\n }\n });\n if (minDelta === Number.MAX_VALUE) {\n minDelta = 1;\n }\n return minDelta;\n}\n/** @private */\nexport function getAnimationFunction(effect) {\n var functionName;\n switch (effect) {\n case 'Linear':\n functionName = linear;\n break;\n }\n return functionName;\n}\n/**\n * Animation Effect Calculation Started Here\n * @param currentTime\n * @param startValue\n * @param endValue\n * @param duration\n * @private\n */\nexport function linear(currentTime, startValue, endValue, duration) {\n return -endValue * Math.cos(currentTime / duration * (Math.PI / 2)) + endValue + startValue;\n}\n/**\n * Animation Effect Calculation End\n * @private\n */\nexport function markerAnimate(element, delay, duration, series, pointIndex, point, isLabel) {\n var centerX = point.x;\n var centerY = point.y;\n var height = 0;\n element.style.visibility = 'hidden';\n new Animation({}).animate(element, {\n duration: duration,\n delay: delay,\n progress: function (args) {\n if (args.timeStamp > args.delay) {\n args.element.style.visibility = 'visible';\n height = ((args.timeStamp - args.delay) / args.duration);\n element.setAttribute('transform', 'translate(' + centerX\n + ' ' + centerY + ') scale(' + height + ') translate(' + (-centerX) + ' ' + (-centerY) + ')');\n }\n },\n end: function (model) {\n element.style.visibility = '';\n element.removeAttribute('transform');\n if ((series.type === 'Scatter' || series.type === 'Bubble') && !isLabel && (pointIndex === series.points.length - 1)) {\n series.chart.trigger('animationComplete', { series: series });\n }\n }\n });\n}\n/**\n * Animation for template\n * @private\n */\nexport function templateAnimate(element, delay, duration, name, isRemove) {\n new Animation({}).animate(element, {\n duration: duration,\n delay: delay,\n name: name,\n progress: function (args) {\n args.element.style.visibility = 'visible';\n },\n end: function (args) {\n if (isRemove) {\n remove(args.element);\n }\n else {\n args.element.style.visibility = 'visible';\n }\n },\n });\n}\n/** @private */\nexport function drawSymbol(location, shape, size, url, options, label) {\n var functionName = 'Path';\n var renderer = new SvgRenderer('');\n var temp = calculateShapes(location, size, shape, options, url);\n var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);\n htmlObject.setAttribute('aria-label', label);\n return htmlObject;\n}\n/** @private */\nexport function calculateShapes(location, size, shape, options, url) {\n var path;\n var functionName = 'Path';\n var width = size.width;\n var height = size.height;\n var locX = location.x;\n var locY = location.y;\n var x = location.x + (-width / 2);\n var y = location.y + (-height / 2);\n switch (shape) {\n case 'Circle':\n case 'Bubble':\n functionName = 'Ellipse';\n merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });\n break;\n case 'Cross':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' +\n (locY + (-height / 2));\n merge(options, { 'd': path });\n break;\n case 'HorizontalLine':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY;\n merge(options, { 'd': path });\n break;\n case 'VerticalLine':\n path = 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' + (locY + (-height / 2));\n merge(options, { 'd': path });\n break;\n case 'Diamond':\n path = 'M' + ' ' + x + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + locY + ' z';\n merge(options, { 'd': path });\n break;\n case 'Rectangle':\n case 'Hilo':\n case 'HiloOpenClose':\n case 'Candle':\n case 'Waterfall':\n case 'BoxAndWhisker':\n case 'StepArea':\n path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Pyramid':\n case 'Triangle':\n path = 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Funnel':\n case 'InvertedTriangle':\n path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Pentagon':\n var eq = 72;\n var xValue = void 0;\n var yValue = void 0;\n for (var i = 0; i <= 5; i++) {\n xValue = (width / 2) * Math.cos((Math.PI / 180) * (i * eq));\n yValue = (height / 2) * Math.sin((Math.PI / 180) * (i * eq));\n if (i === 0) {\n path = 'M' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ';\n }\n else {\n path = path.concat('L' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ');\n }\n }\n path = path.concat('Z');\n merge(options, { 'd': path });\n break;\n case 'Image':\n functionName = 'Image';\n merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });\n break;\n }\n options = calculateLegendShapes(location, new Size(width, height), shape, options).renderOption;\n return { renderOption: options, functionName: functionName };\n}\n/** @private */\nexport function getRectLocation(startLocation, endLocation, outerRect) {\n var x;\n var y;\n x = (endLocation.x < outerRect.x) ? outerRect.x :\n (endLocation.x > (outerRect.x + outerRect.width)) ? outerRect.x + outerRect.width : endLocation.x;\n y = (endLocation.y < outerRect.y) ? outerRect.y :\n (endLocation.y > (outerRect.y + outerRect.height)) ? outerRect.y + outerRect.height : endLocation.y;\n return new Rect((x > startLocation.x ? startLocation.x : x), (y > startLocation.y ? startLocation.y : y), Math.abs(x - startLocation.x), Math.abs(y - startLocation.y));\n}\n/** @private */\nexport function minMax(value, min, max) {\n return value > max ? max : (value < min ? min : value);\n}\n/** @private */\nexport function getElement(id) {\n return document.getElementById(id);\n}\n/** @private */\nexport function getTemplateFunction(template) {\n var templateFn = null;\n var e;\n try {\n if (document.querySelectorAll(template).length) {\n templateFn = templateComplier(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n templateFn = templateComplier(template);\n }\n return templateFn;\n}\n/** @private */\nexport function createTemplate(childElement, pointIndex, content, chart, point, series) {\n var templateFn;\n var templateElement;\n templateFn = getTemplateFunction(content);\n try {\n if (templateFn && templateFn({ chart: chart, series: series, point: point }).length) {\n templateElement = templateFn({ chart: chart, series: series, point: point });\n while (templateElement.length > 0) {\n childElement.appendChild(templateElement[0]);\n }\n }\n }\n catch (e) {\n return childElement;\n }\n return childElement;\n}\n/** @private */\nexport function getFontStyle(font) {\n var style = '';\n style = 'font-size:' + font.size +\n '; font-style:' + font.fontStyle + '; font-weight:' + font.fontWeight +\n '; font-family:' + font.fontFamily + ';opacity:' + font.opacity +\n '; color:' + font.color + ';';\n return style;\n}\n/** @private */\nexport function measureElementRect(element) {\n var bounds;\n document.body.appendChild(element);\n bounds = element.getBoundingClientRect();\n removeElement(element.id);\n return bounds;\n}\n/** @private */\nexport function findlElement(elements, id) {\n var element;\n for (var i = 0, length_1 = elements.length; i < length_1; i++) {\n if (elements[i].id.indexOf(id) > -1) {\n element = elements[i];\n continue;\n }\n }\n return element;\n}\n/** @private */\nexport function getPoint(x, y, xAxis, yAxis, isInverted, series) {\n x = ((xAxis.valueType === 'Logarithmic') ? logBase(((x > 1) ? x : 1), xAxis.logBase) : x);\n y = ((yAxis.valueType === 'Logarithmic') ? logBase(((y > 1) ? y : 1), yAxis.logBase) : y);\n x = valueToCoefficient(x, xAxis);\n y = valueToCoefficient(y, yAxis);\n var xLength = (isInverted ? xAxis.rect.height : xAxis.rect.width);\n var yLength = (isInverted ? yAxis.rect.width : yAxis.rect.height);\n var locationX = isInverted ? y * (yLength) : x * (xLength);\n var locationY = isInverted ? (1 - x) * (xLength) : (1 - y) * (yLength);\n return new ChartLocation(locationX, locationY);\n}\n/** @private */\nexport function appendElement(child, parent) {\n if (child && child.hasChildNodes() && parent) {\n parent.appendChild(child);\n }\n else {\n return null;\n }\n}\n/** @private */\nexport function getDraggedRectLocation(x1, y1, x2, y2, outerRect) {\n var width = Math.abs(x1 - x2);\n var height = Math.abs(y1 - y2);\n var x = Math.max(checkBounds(Math.min(x1, x2), width, outerRect.x, outerRect.width), outerRect.x);\n var y = Math.max(checkBounds(Math.min(y1, y2), height, outerRect.y, outerRect.height), outerRect.y);\n return new Rect(x, y, Math.min(width, outerRect.width), Math.min(height, outerRect.height));\n}\n/** @private */\nexport function checkBounds(start, size, min, max) {\n if (start < min) {\n start = min;\n }\n else if ((start + size) > (max + min)) {\n start = (max + min) - size;\n }\n return start;\n}\n/** @private */\nexport function getLabelText(currentPoint, series, chart) {\n var labelFormat = series.yAxis.labelFormat;\n var text = [];\n var customLabelFormat = labelFormat.match('{value}') !== null;\n switch (series.seriesType) {\n case 'XY':\n text.push(currentPoint.text || currentPoint.yValue.toString());\n break;\n case 'HighLow':\n text.push(currentPoint.text || Math.max(currentPoint.high, currentPoint.low).toString());\n text.push(currentPoint.text || Math.min(currentPoint.high, currentPoint.low).toString());\n break;\n case 'HighLowOpenClose':\n text.push(currentPoint.text || Math.max(currentPoint.high, currentPoint.low).toString());\n text.push(currentPoint.text || Math.min(currentPoint.high, currentPoint.low).toString());\n text.push(currentPoint.text || Math.max(currentPoint.open, currentPoint.close).toString());\n text.push(currentPoint.text || Math.min(currentPoint.open, currentPoint.close).toString());\n break;\n case 'BoxPlot':\n text.push(currentPoint.text || currentPoint.median.toString());\n text.push(currentPoint.text || currentPoint.maximum.toString());\n text.push(currentPoint.text || currentPoint.minimum.toString());\n text.push(currentPoint.text || currentPoint.upperQuartile.toString());\n text.push(currentPoint.text || currentPoint.lowerQuartile.toString());\n for (var _i = 0, _a = currentPoint.outliers; _i < _a.length; _i++) {\n var liers = _a[_i];\n text.push(currentPoint.text || liers.toString());\n }\n break;\n }\n if (labelFormat && !currentPoint.text) {\n for (var i = 0; i < text.length; i++) {\n text[i] = customLabelFormat ? labelFormat.replace('{value}', series.yAxis.format(parseFloat(text[i]))) :\n series.yAxis.format(parseFloat(text[i]));\n }\n }\n return text;\n}\n/** @private */\nexport function stopTimer(timer) {\n window.clearInterval(timer);\n}\n/** @private */\nexport function isCollide(rect, collections, clipRect) {\n var isCollide;\n var currentRect = new Rect(rect.x + clipRect.x, rect.y + clipRect.y, rect.width, rect.height);\n isCollide = collections.some(function (rect) {\n return (currentRect.x < rect.x + rect.width && currentRect.x + currentRect.width > rect.x &&\n currentRect.y < rect.y + rect.height && currentRect.height + currentRect.y > rect.y);\n });\n return isCollide;\n}\n/** @private */\nexport function isOverlap(currentRect, rect) {\n return (currentRect.x < rect.x + rect.width && currentRect.x + currentRect.width > rect.x &&\n currentRect.y < rect.y + rect.height && currentRect.height + currentRect.y > rect.y);\n}\n/** @private */\nexport function containsRect(currentRect, rect) {\n return (currentRect.x <= rect.x && currentRect.x + currentRect.width >= rect.x + rect.width &&\n currentRect.y <= rect.y && currentRect.height + currentRect.y >= rect.y + rect.height);\n}\n/** @private */\nexport function calculateRect(location, textSize, margin) {\n return new Rect((location.x - (textSize.width / 2) - margin.left), (location.y - (textSize.height / 2) - margin.top), textSize.width + margin.left + margin.right, textSize.height + margin.top + margin.bottom);\n}\n/** @private */\nexport function convertToHexCode(value) {\n return '#' + componentToHex(value.r) + componentToHex(value.g) + componentToHex(value.b);\n}\n/** @private */\nexport function componentToHex(value) {\n var hex = value.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n}\n/** @private */\nexport function convertHexToColor(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? new ColorValue(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)) :\n new ColorValue(255, 255, 255);\n}\n/** @private */\nexport function colorNameToHex(color) {\n var element;\n color = color === 'transparent' ? 'white' : color;\n element = document.getElementById('chartmeasuretext');\n element.style.color = color;\n color = window.getComputedStyle(element).color;\n var exp = /^(rgb|hsl)(a?)[(]\\s*([\\d.]+\\s*%?)\\s*,\\s*([\\d.]+\\s*%?)\\s*,\\s*([\\d.]+\\s*%?)\\s*(?:,\\s*([\\d.]+)\\s*)?[)]$/;\n var isRGBValue = exp.exec(color);\n return convertToHexCode(new ColorValue(parseInt(isRGBValue[3], 10), parseInt(isRGBValue[4], 10), parseInt(isRGBValue[5], 10)));\n}\n/** @private */\nexport function getSaturationColor(color, factor) {\n color = colorNameToHex(color);\n color = color.replace(/[^0-9a-f]/gi, '');\n if (color.length < 6) {\n color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];\n }\n factor = factor || 0;\n // convert to decimal and change luminosity\n var rgb = '#';\n var colorCode;\n for (var i = 0; i < 3; i++) {\n colorCode = parseInt(color.substr(i * 2, 2), 16);\n colorCode = Math.round(Math.min(Math.max(0, colorCode + (colorCode * factor)), 255));\n rgb += ('00' + colorCode.toString(16)).substr(colorCode.toString(16).length);\n }\n return rgb;\n}\n/** @private */\nexport function getMedian(values) {\n var half = Math.floor(values.length / 2);\n return values.length % 2 ? values[half] : ((values[half - 1] + values[half]) / 2.0);\n}\n/** @private */\n// tslint:disable-next-line:max-func-body-length\nexport function calculateLegendShapes(location, size, shape, options) {\n var padding = 10;\n var path = '';\n var height = size.height;\n var width = size.width;\n var locX = location.x;\n var locY = location.y;\n switch (shape) {\n case 'MultiColoredLine':\n case 'Line':\n path = 'M' + ' ' + (locX + (-width / 2)) + ' ' + (locY) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY);\n merge(options, { 'd': path });\n break;\n case 'StepLine':\n options.fill = 'transparent';\n path = 'M' + ' ' + (locX + (-width / 2) - (padding / 4)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + (locX +\n (-width / 2) + (width / 10)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + (locX + (-width / 2) + (width / 10))\n + ' ' + (locY) + ' ' + 'L' + ' ' + (locX + (-width / 10)) + ' ' + (locY) + ' ' + 'L' + ' ' + (locX + (-width / 10))\n + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + (locX + (width / 5)) + ' ' + (locY + (height / 2)) + ' ' + 'L' +\n ' ' + (locX + (width / 5)) + ' ' + (locY + (-height / 2)) + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY +\n (-height / 2)) + 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + '' + (locX + (width / 2)\n + (padding / 4)) + ' ' + (locY + (height / 2));\n merge(options, { 'd': path });\n break;\n case 'RightArrow':\n var space = 2;\n path = 'M' + ' ' + (locX + (-width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY) + ' ' + 'L' + ' ' +\n (locX + (-width / 2)) + ' ' + (locY + (height / 2)) + ' L' + ' ' + (locX + (-width / 2)) + ' ' +\n (locY + (height / 2) - space) + ' ' + 'L' + ' ' + (locX + (width / 2) - (2 * space)) + ' ' + (locY) +\n ' L' + (locX + (-width / 2)) + ' ' + (locY - (height / 2) + space) + ' Z';\n merge(options, { 'd': path });\n break;\n case 'LeftArrow':\n options.fill = options.stroke;\n options.stroke = 'transparent';\n space = 2;\n path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + (-width / 2)) + ' ' + (locY) + ' ' + 'L' + ' ' +\n (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' +\n (locX + (width / 2)) + ' ' + (locY + (height / 2) - space) + ' L' + ' ' + (locX + (-width / 2) + (2 * space))\n + ' ' + (locY) + ' L' + (locX + (width / 2)) + ' ' + (locY - (height / 2) + space) + ' Z';\n merge(options, { 'd': path });\n break;\n case 'Column':\n case 'StackingColumn':\n case 'StackingColumn100':\n case 'RangeColumn':\n path = 'M' + ' ' + (locX - 3 * (width / 5)) + ' ' + (locY - (height / 5)) + ' ' + 'L' + ' ' +\n (locX + 3 * (-width / 10)) + ' ' + (locY - (height / 5)) + ' ' + 'L' + ' ' +\n (locX + 3 * (-width / 10)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + (locX - 3 *\n (width / 5)) + ' ' + (locY + (height / 2)) + ' ' + 'Z' + ' ' + 'M' + ' ' +\n (locX + (-width / 10) - (width / 20)) + ' ' + (locY - (height / 4) - (padding / 2))\n + ' ' + 'L' + ' ' + (locX + (width / 10) + (width / 20)) + ' ' + (locY - (height / 4) -\n (padding / 2)) + ' ' + 'L' + ' ' + (locX + (width / 10) + (width / 20)) + ' ' + (locY\n + (height / 2)) + ' ' + 'L' + ' ' + (locX + (-width / 10) - (width / 20)) + ' ' + (locY +\n (height / 2)) + ' ' + 'Z' + ' ' + 'M' + ' ' + (locX + 3 * (width / 10)) + ' ' + (locY) + ' ' +\n 'L' + ' ' + (locX + 3 * (width / 5)) + ' ' + (locY) + ' ' + 'L' + ' '\n + (locX + 3 * (width / 5)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' '\n + (locX + 3 * (width / 10)) + ' ' + (locY + (height / 2)) + ' ' + 'Z';\n merge(options, { 'd': path });\n break;\n case 'Bar':\n case 'StackingBar':\n case 'StackingBar100':\n path = 'M' + ' ' + (locX + (-width / 2) + (-padding / 4)) + ' ' + (locY - 3 * (height / 5)) + ' '\n + 'L' + ' ' + (locX + 3 * (width / 10)) + ' ' + (locY - 3 * (height / 5)) + ' ' + 'L' + ' ' +\n (locX + 3 * (width / 10)) + ' ' + (locY - 3 * (height / 10)) + ' ' + 'L' + ' ' +\n (locX - (width / 2) + (-padding / 4)) + ' ' + (locY - 3 * (height / 10)) + ' ' + 'Z' + ' '\n + 'M' + ' ' + (locX + (-width / 2) + (-padding / 4)) + ' ' + (locY - (height / 5)\n + (padding / 20)) + ' ' + 'L' + ' ' + (locX + (width / 2) + (padding / 4)) + ' ' + (locY\n - (height / 5) + (padding / 20)) + ' ' + 'L' + ' ' + (locX + (width / 2) + (padding / 4))\n + ' ' + (locY + (height / 10) + (padding / 20)) + ' ' + 'L' + ' ' + (locX - (width / 2)\n + (-padding / 4)) + ' ' + (locY + (height / 10) + (padding / 20)) + ' ' + 'Z' + ' ' + 'M'\n + ' ' + (locX - (width / 2) + (-padding / 4)) + ' ' + (locY + (height / 5)\n + (padding / 10)) + ' ' + 'L' + ' ' + (locX + (-width / 4)) + ' ' + (locY + (height / 5)\n + (padding / 10)) + ' ' + 'L' + ' ' + (locX + (-width / 4)) + ' ' + (locY + (height / 2)\n + (padding / 10)) + ' ' + 'L' + ' ' + (locX - (width / 2) + (-padding / 4))\n + ' ' + (locY + (height / 2) + (padding / 10)) + ' ' + 'Z';\n merge(options, { 'd': path });\n break;\n case 'Spline':\n options.fill = 'transparent';\n path = 'M' + ' ' + (locX - (width / 2)) + ' ' + (locY + (height / 5)) + ' ' + 'Q' + ' '\n + locX + ' ' + (locY - height) + ' ' + locX + ' ' + (locY + (height / 5))\n + ' ' + 'M' + ' ' + locX + ' ' + (locY + (height / 5)) + ' ' + 'Q' + ' ' + (locX\n + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' + (locX + (width / 2)) + ' '\n + (locY - (height / 2));\n merge(options, { 'd': path });\n break;\n case 'Area':\n case 'MultiColoredArea':\n case 'RangeArea':\n case 'StackingArea':\n case 'StackingArea100':\n path = 'M' + ' ' + (locX - (width / 2) - (padding / 4)) + ' ' + (locY + (height / 2))\n + ' ' + 'L' + ' ' + (locX + (-width / 4) + (-padding / 8)) + ' ' + (locY - (height / 2))\n + ' ' + 'L' + ' ' + (locX) + ' ' + (locY + (height / 4)) + ' ' + 'L' + ' ' + (locX\n + (width / 4) + (padding / 8)) + ' ' + (locY + (-height / 2) + (height / 4)) + ' '\n + 'L' + ' ' + (locX + (height / 2) + (padding / 4)) + ' ' + (locY + (height / 2)) + ' ' + 'Z';\n merge(options, { 'd': path });\n break;\n case 'SplineArea':\n path = 'M' + ' ' + (locX - (width / 2)) + ' ' + (locY + (height / 5)) + ' ' + 'Q' + ' ' + locX\n + ' ' + (locY - height) + ' ' + locX + ' ' + (locY + (height / 5)) + ' ' + 'Z' + ' ' + 'M'\n + ' ' + locX + ' ' + (locY + (height / 5)) + ' ' + 'Q' + ' ' + (locX + (width / 2)) + ' '\n + (locY + (height / 2)) + ' ' + (locX + (width / 2)) + ' '\n + (locY - (height / 2)) + ' ' + ' Z';\n merge(options, { 'd': path });\n break;\n case 'Pie':\n case 'Doughnut':\n options.stroke = 'transparent';\n var r = Math.min(height, width) / 2;\n path = getAccumulationLegend(locX, locY, r, height, width, shape);\n merge(options, { 'd': path });\n break;\n }\n return { renderOption: options };\n}\n/** @private */\nexport function textTrim(maxWidth, text, font) {\n var label = text;\n var size = measureText(text, font).width;\n if (size > maxWidth) {\n var textLength = text.length;\n for (var i = textLength - 1; i >= 0; --i) {\n label = text.substring(0, i) + '...';\n size = measureText(label, font).width;\n if (size <= maxWidth) {\n return label;\n }\n }\n }\n return label;\n}\n/** @private */\nexport function stringToNumber(value, containerSize) {\n if (value !== null && value !== undefined) {\n return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);\n }\n return null;\n}\n/** @private */\nexport function findDirection(rX, rY, rect, arrowLocation, arrowPadding, top, bottom, left, tipX, tipY, tipRadius) {\n var direction = '';\n var startX = rect.x;\n var startY = rect.y;\n var width = rect.x + rect.width;\n var height = rect.y + rect.height;\n tipRadius = tipRadius ? tipRadius : 0;\n if (top) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + startY + ' ' + (startX + rX) + ' ' + startY + ' ' +\n ' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + width + ' '\n + startY + ' ' + (width) + ' ' + (startY + rY));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' '\n + (height) + ' ' + (width - rX) + ' ' + (height));\n if (arrowPadding !== 0) {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding / 2) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (tipX + tipRadius) + ' ' + (height + arrowPadding - tipRadius));\n direction += ' Q' + ' ' + (tipX) + ' ' + (height + arrowPadding) + ' ' + (tipX - tipRadius) +\n ' ' + (height + arrowPadding - tipRadius);\n }\n if ((arrowLocation.x - arrowPadding / 2) > startX) {\n direction = direction.concat(' L' + ' ' + (arrowLocation.x - arrowPadding / 2) + ' ' + height +\n ' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '\n + height + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n if (arrowPadding === 0) {\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + height + ' Q ' + startX + ' '\n + height + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n direction = direction.concat(' L' + ' ' + (startX) + ' ' + (height + rY) + ' z');\n }\n }\n }\n else if (bottom) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + (startY) + ' ' + (startX + rX) + ' ' + (startY) + ' L' + ' ' + (arrowLocation.x - arrowPadding / 2) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (tipX - tipRadius) + ' ' + (arrowLocation.y + tipRadius));\n direction += ' Q' + ' ' + (tipX) + ' ' + (arrowLocation.y) + ' ' + (tipX + tipRadius) + ' ' + (arrowLocation.y + tipRadius);\n direction = direction.concat(' L' + ' ' + (arrowLocation.x + arrowPadding / 2) + ' ' + (startY) + ' L' + ' '\n + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' ' + (startY) + ' ' + (width) + ' ' + (startY + rY));\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + (width) + ' '\n + (height) + ' ' + (width - rX) + ' ' + (height) +\n ' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + (startX) + ' '\n + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else if (left) {\n direction = direction.concat('M' + ' ' + (startX) + ' ' + (startY + rY) + ' Q ' + startX + ' '\n + (startY) + ' ' + (startX + rX) + ' ' + (startY));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (startY) + ' Q ' + (width) + ' '\n + (startY) + ' ' + (width) + ' ' + (startY + rY) + ' L' + ' ' + (width) + ' ' + (arrowLocation.y - arrowPadding / 2));\n direction = direction.concat(' L' + ' ' + (width + arrowPadding - tipRadius) + ' ' + (tipY - tipRadius));\n direction += ' Q ' + (width + arrowPadding) + ' ' + (tipY) + ' ' + (width + arrowPadding - tipRadius) + ' ' + (tipY + tipRadius);\n direction = direction.concat(' L' + ' ' + (width) + ' ' + (arrowLocation.y + arrowPadding / 2) +\n ' L' + ' ' + (width) + ' ' + (height - rY) + ' Q ' + width + ' ' + (height) + ' ' + (width - rX) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (startX + rX) + ' ' + (height) + ' Q ' + startX + ' '\n + (height) + ' ' + (startX) + ' ' + (height - rY) + ' z');\n }\n else {\n direction = direction.concat('M' + ' ' + (startX + rX) + ' ' + (startY) + ' Q ' + (startX) + ' '\n + (startY) + ' ' + (startX) + ' ' + (startY + rY) + ' L' + ' ' + (startX) + ' ' + (arrowLocation.y - arrowPadding / 2));\n direction = direction.concat(' L' + ' ' + (startX - arrowPadding + tipRadius) + ' ' + (tipY - tipRadius));\n direction += ' Q ' + (startX - arrowPadding) + ' ' + (tipY) + ' ' + (startX - arrowPadding + tipRadius) + ' ' + (tipY + tipRadius);\n direction = direction.concat(' L' + ' ' + (startX) + ' ' + (arrowLocation.y + arrowPadding / 2) +\n ' L' + ' ' + (startX) + ' ' + (height - rY) + ' Q ' + startX + ' '\n + (height) + ' ' + (startX + rX) + ' ' + (height));\n direction = direction.concat(' L' + ' ' + (width - rX) + ' ' + (height) + ' Q ' + width + ' '\n + (height) + ' ' + (width) + ' ' + (height - rY) +\n ' L' + ' ' + (width) + ' ' + (startY + rY) + ' Q ' + width + ' '\n + (startY) + ' ' + (width - rX) + ' ' + (startY) + ' z');\n }\n return direction;\n}\n/** @private */\nexport function textElement(options, font, color, parent, isMinus) {\n if (isMinus === void 0) { isMinus = false; }\n var renderOptions = {};\n var htmlObject;\n var tspanElement;\n var renderer = new SvgRenderer('');\n var text;\n var height;\n renderOptions = {\n 'id': options.id,\n 'x': options.x,\n 'y': options.y,\n 'fill': color,\n 'font-size': font.size,\n 'font-style': font.fontStyle,\n 'font-family': font.fontFamily,\n 'font-weight': font.fontWeight,\n 'text-anchor': options.anchor,\n 'transform': options.transform,\n 'opacity': font.opacity,\n 'dominant-baseline': options.baseLine\n };\n text = typeof options.text === 'string' ? options.text : isMinus ? options.text[options.text.length - 1] : options.text[0];\n htmlObject = renderer.createText(renderOptions, text);\n if (typeof options.text !== 'string' && options.text.length > 1) {\n for (var i = 1, len = options.text.length; i < len; i++) {\n height = (measureText(options.text[i], font).height);\n tspanElement = renderer.createTSpan({\n 'x': options.x, 'id': options.id,\n 'y': (options.y) + ((isMinus) ? -(i * height) : (i * height))\n }, isMinus ? options.text[options.text.length - (i + 1)] : options.text[i]);\n htmlObject.appendChild(tspanElement);\n }\n }\n parent.appendChild(htmlObject);\n return htmlObject;\n}\n/**\n * Method to calculate the width and height of the chart\n */\nexport function calculateSize(chart) {\n var containerWidth = chart.element.clientWidth;\n var containerHeight = chart.element.clientHeight;\n chart.availableSize = new Size(stringToNumber(chart.width, containerWidth) || containerWidth || 600, stringToNumber(chart.height, containerHeight) || containerHeight || 450);\n}\nexport function createSvg(chart) {\n chart.renderer = new SvgRenderer(chart.element.id);\n calculateSize(chart);\n chart.svgObject = chart.renderer.createSvg({\n id: chart.element.id + '_svg',\n width: chart.availableSize.width,\n height: chart.availableSize.height\n });\n}\n/**\n * To calculate chart title and height\n * @param title\n * @param style\n * @param width\n */\nexport function getTitle(title, style, width) {\n var titleCollection = [];\n switch (style.textOverflow) {\n case 'Wrap':\n titleCollection = textWrap(title, width, style);\n break;\n case 'Trim':\n titleCollection.push(textTrim(width, title, style));\n break;\n default:\n titleCollection.push(title);\n break;\n }\n return titleCollection;\n}\n/**\n * Method to calculate x position of title\n */\nexport function titlePositionX(chartSize, leftPadding, rightPadding, titleStyle) {\n var positionX;\n if (titleStyle.textAlignment === 'Near') {\n positionX = leftPadding;\n }\n else if (titleStyle.textAlignment === 'Center') {\n positionX = chartSize.width / 2;\n }\n else {\n positionX = chartSize.width - rightPadding;\n }\n return positionX;\n}\n/**\n * Method to find new text and element size based on textOverflow\n */\nexport function textWrap(currentLabel, maximumWidth, font) {\n var textCollection = currentLabel.split(' ');\n var label = '';\n var labelCollection = [];\n var text;\n for (var i = 0, len = textCollection.length; i < len; i++) {\n text = textCollection[i];\n if (measureText(label.concat(text), font).width < maximumWidth) {\n label = label.concat((label === '' ? '' : ' ') + text);\n }\n else {\n if (label !== '') {\n labelCollection.push(textTrim(maximumWidth, label, font));\n label = text;\n }\n else {\n labelCollection.push(textTrim(maximumWidth, text, font));\n text = '';\n }\n }\n if (label && i === len - 1) {\n labelCollection.push(textTrim(maximumWidth, label, font));\n }\n }\n return labelCollection;\n}\n/** @private */\nvar CustomizeOption = /** @class */ (function () {\n function CustomizeOption(id) {\n this.id = id;\n }\n return CustomizeOption;\n}());\nexport { CustomizeOption };\n/** @private */\nvar StackValues = /** @class */ (function () {\n function StackValues(startValue, endValue) {\n this.startValues = startValue;\n this.endValues = endValue;\n }\n return StackValues;\n}());\nexport { StackValues };\n/** @private */\nvar TextOption = /** @class */ (function (_super) {\n __extends(TextOption, _super);\n function TextOption(id, x, y, anchor, text, transform, baseLine) {\n if (transform === void 0) { transform = ''; }\n var _this = _super.call(this, id) || this;\n _this.transform = '';\n _this.baseLine = 'auto';\n _this.x = x;\n _this.y = y;\n _this.anchor = anchor;\n _this.text = text;\n _this.transform = transform;\n _this.baseLine = baseLine;\n return _this;\n }\n return TextOption;\n}(CustomizeOption));\nexport { TextOption };\n/** @private */\nvar PathOption = /** @class */ (function (_super) {\n __extends(PathOption, _super);\n function PathOption(id, fill, width, color, opacity, dashArray, d) {\n var _this = _super.call(this, id) || this;\n _this.opacity = opacity;\n _this.fill = fill;\n _this.stroke = color;\n _this['stroke-width'] = width;\n _this['stroke-dasharray'] = dashArray;\n _this.d = d;\n return _this;\n }\n return PathOption;\n}(CustomizeOption));\nexport { PathOption };\n/** @private */\nvar RectOption = /** @class */ (function (_super) {\n __extends(RectOption, _super);\n function RectOption(id, fill, border, opacity, rect, rx, ry, transform, dashArray) {\n var _this = _super.call(this, id, fill, border.width, border.color, opacity, dashArray) || this;\n _this.y = rect.y;\n _this.x = rect.x;\n _this.height = rect.height;\n _this.width = rect.width;\n _this.rx = rx ? rx : 0;\n _this.ry = ry ? ry : 0;\n _this.transform = transform ? transform : '';\n return _this;\n }\n return RectOption;\n}(PathOption));\nexport { RectOption };\n/** @private */\nvar CircleOption = /** @class */ (function (_super) {\n __extends(CircleOption, _super);\n function CircleOption(id, fill, border, opacity, cx, cy, r) {\n var _this = _super.call(this, id, fill, border.width, border.color, opacity) || this;\n _this.cy = cy;\n _this.cx = cx;\n _this.r = r;\n return _this;\n }\n return CircleOption;\n}(PathOption));\nexport { CircleOption };\n/** @private */\nvar PolygonOption = /** @class */ (function () {\n function PolygonOption(id, points, fill) {\n this.id = id;\n this.points = points;\n this.fill = fill;\n }\n return PolygonOption;\n}());\nexport { PolygonOption };\n/** @private */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n return Size;\n}());\nexport { Size };\n/** @private */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n return Rect;\n}());\nexport { Rect };\n/** @private */\nvar ChartLocation = /** @class */ (function () {\n function ChartLocation(x, y) {\n this.x = x;\n this.y = y;\n }\n return ChartLocation;\n}());\nexport { ChartLocation };\n/** @private */\nvar Thickness = /** @class */ (function () {\n function Thickness(left, right, top, bottom) {\n this.left = left;\n this.right = right;\n this.top = top;\n this.bottom = bottom;\n }\n return Thickness;\n}());\nexport { Thickness };\n/** @private */\nvar ColorValue = /** @class */ (function () {\n function ColorValue(r, g, b) {\n this.r = r;\n this.g = g;\n this.b = b;\n }\n return ColorValue;\n}());\nexport { ColorValue };\n/** @private */\nvar PointData = /** @class */ (function () {\n function PointData(point, series, index) {\n if (index === void 0) { index = 0; }\n this.point = point;\n this.series = series;\n this.lierIndex = index;\n }\n return PointData;\n}());\nexport { PointData };\n/** @private */\nvar AccPointData = /** @class */ (function () {\n function AccPointData(point, series, index) {\n if (index === void 0) { index = 0; }\n this.point = point;\n this.series = series;\n }\n return AccPointData;\n}());\nexport { AccPointData };\n/** @private */\nvar ControlPoints = /** @class */ (function () {\n function ControlPoints(controlPoint1, controlPoint2) {\n this.controlPoint1 = controlPoint1;\n this.controlPoint2 = controlPoint2;\n }\n return ControlPoints;\n}());\nexport { ControlPoints };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/**\n * AccumulationChart base file\n */\nimport { Property, ChildProperty, Complex, createElement } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Border, Font, Animation, EmptyPointSettings, Connector } from '../../common/model/base';\nimport { Rect, stringToNumber, PathOption } from '../../common/utils/helper';\nimport { seriesRender, pointRender } from '../../common/model/constants';\nimport { getSeriesColor } from '../../common/model/theme';\nimport { getElement, firstToLowerCase } from '../../common/utils/helper';\n/**\n * Annotation for accumulation series\n */\nvar AccumulationAnnotationSettings = /** @class */ (function (_super) {\n __extends(AccumulationAnnotationSettings, _super);\n function AccumulationAnnotationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], AccumulationAnnotationSettings.prototype, \"content\", void 0);\n __decorate([\n Property('0')\n ], AccumulationAnnotationSettings.prototype, \"x\", void 0);\n __decorate([\n Property('0')\n ], AccumulationAnnotationSettings.prototype, \"y\", void 0);\n __decorate([\n Property('Pixel')\n ], AccumulationAnnotationSettings.prototype, \"coordinateUnits\", void 0);\n __decorate([\n Property('Chart')\n ], AccumulationAnnotationSettings.prototype, \"region\", void 0);\n __decorate([\n Property('Middle')\n ], AccumulationAnnotationSettings.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Property('Center')\n ], AccumulationAnnotationSettings.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property(null)\n ], AccumulationAnnotationSettings.prototype, \"description\", void 0);\n return AccumulationAnnotationSettings;\n}(ChildProperty));\nexport { AccumulationAnnotationSettings };\n/**\n * Configures the dataLabel in accumulation chart.\n */\nvar AccumulationDataLabelSettings = /** @class */ (function (_super) {\n __extends(AccumulationDataLabelSettings, _super);\n function AccumulationDataLabelSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], AccumulationDataLabelSettings.prototype, \"visible\", void 0);\n __decorate([\n Property(null)\n ], AccumulationDataLabelSettings.prototype, \"name\", void 0);\n __decorate([\n Property('transparent')\n ], AccumulationDataLabelSettings.prototype, \"fill\", void 0);\n __decorate([\n Property('Inside')\n ], AccumulationDataLabelSettings.prototype, \"position\", void 0);\n __decorate([\n Property(5)\n ], AccumulationDataLabelSettings.prototype, \"rx\", void 0);\n __decorate([\n Property(5)\n ], AccumulationDataLabelSettings.prototype, \"ry\", void 0);\n __decorate([\n Complex({ width: null, color: null }, Border)\n ], AccumulationDataLabelSettings.prototype, \"border\", void 0);\n __decorate([\n Complex({ size: '11px', color: null }, Font)\n ], AccumulationDataLabelSettings.prototype, \"font\", void 0);\n __decorate([\n Complex({}, Connector)\n ], AccumulationDataLabelSettings.prototype, \"connectorStyle\", void 0);\n __decorate([\n Property(null)\n ], AccumulationDataLabelSettings.prototype, \"template\", void 0);\n return AccumulationDataLabelSettings;\n}(ChildProperty));\nexport { AccumulationDataLabelSettings };\n/**\n * Points model for the series.\n */\nvar AccPoints = /** @class */ (function () {\n function AccPoints() {\n this.visible = true;\n this.symbolLocation = null;\n /** @private */\n this.region = null;\n /** @private */\n this.labelRegion = null;\n /** @private */\n this.labelVisible = true;\n this.regions = null;\n }\n return AccPoints;\n}());\nexport { AccPoints };\n/**\n * Configures the series in accumulation chart.\n */\nvar AccumulationSeries = /** @class */ (function (_super) {\n __extends(AccumulationSeries, _super);\n function AccumulationSeries() {\n /**\n * Specifies the dataSource for the series. It can be an array of JSON objects or an instance of DataManager.\n * ```html\n *
\n * ```\n * ```typescript\n * let dataManager: DataManager = new DataManager({\n * url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'\n * });\n * let query: Query = new Query().take(50).where('Estimate', 'greaterThan', 0, false);\n * let pie: AccumulationChart = new AccumulationChart({\n * ...\n * series: [{\n * dataSource: dataManager,\n * xName: 'Id',\n * yName: 'Estimate',\n * query: query\n * }],\n * ...\n * });\n * pie.appendTo('#Pie');\n * ```\n * @default ''\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.points = [];\n /** @private */\n _this.sumOfPoints = 0;\n /** @private */\n _this.isRectSeries = true;\n /** @private */\n _this.clipRect = new Rect(0, 0, 0, 0);\n return _this;\n }\n /** @private To refresh the Datamanager for series */\n AccumulationSeries.prototype.refreshDataManager = function (accumulation) {\n var _this = this;\n if (isNullOrUndefined(this.query)) {\n this.dataManagerSuccess({ result: this.dataSource, count: this.dataSource.length }, accumulation);\n return;\n }\n var dataManager = this.dataModule.getData(this.dataModule.generateQuery().requiresCount());\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, accumulation); });\n };\n /**\n * To get points on dataManager is success\n * @private\n */\n AccumulationSeries.prototype.dataManagerSuccess = function (e, accumulation) {\n var argsData = {\n name: seriesRender, series: this, data: e.result,\n };\n accumulation.trigger(seriesRender, argsData);\n this.resultData = e.result;\n this.getPoints(e.result, accumulation);\n if (++accumulation.seriesCounts === accumulation.visibleSeries.length) {\n accumulation.refreshChart();\n }\n };\n /** @private To find points from result data */\n AccumulationSeries.prototype.getPoints = function (result, accumulation) {\n var length = Object.keys(result).length;\n this.sumOfPoints = 0;\n if (length === 0) {\n return null;\n }\n this.findSumOfPoints(result);\n this.points = [];\n this.sumOfClub = 0;\n var point;\n var colors = this.palettes.length ? this.palettes : getSeriesColor(accumulation.theme);\n var clubValue = stringToNumber(this.groupTo, this.sumOfPoints);\n for (var i = 0; i < length; i++) {\n point = this.setPoints(result, i, colors);\n var currentY = point.y;\n if (!this.isClub(point, clubValue)) {\n if (isNullOrUndefined(point.y)) {\n point.visible = false;\n }\n this.pushPoints(point, colors);\n }\n }\n this.lastGroupTo = this.groupTo;\n if (this.sumOfClub > 0) {\n var clubPoint = new AccPoints();\n clubPoint.x = 'Others';\n clubPoint.y = this.sumOfClub;\n clubPoint.text = clubPoint.originalText = clubPoint.x + ': ' + this.sumOfClub;\n this.pushPoints(clubPoint, colors);\n }\n };\n /**\n * Method to set point index and color\n */\n AccumulationSeries.prototype.pushPoints = function (point, colors) {\n point.index = this.points.length;\n point.color = point.color || colors[point.index % colors.length];\n this.points.push(point);\n };\n /**\n * Method to find club point\n */\n AccumulationSeries.prototype.isClub = function (point, clubValue) {\n if (Math.abs(point.y) <= clubValue && !isNullOrUndefined(clubValue)) {\n this.sumOfClub += Math.abs(point.y);\n return true;\n }\n return false;\n };\n /**\n * Method to find sum of points in the series\n */\n AccumulationSeries.prototype.findSumOfPoints = function (result) {\n var length = Object.keys(result).length;\n for (var i = 0; i < length; i++) {\n if (!isNullOrUndefined(result[i][this.yName])) {\n this.sumOfPoints += Math.abs(result[i][this.yName]);\n }\n }\n };\n /**\n * Method to set points x, y and text from data source\n */\n AccumulationSeries.prototype.setPoints = function (data, i, colors) {\n var point = new AccPoints();\n point.x = getValue(this.xName, data[i]);\n point.y = getValue(this.yName, data[i]);\n point.color = getValue(this.pointColorMapping, data[i]);\n point.text = point.originalText = getValue(this.dataLabel.name || '', data[i]);\n this.setAccEmptyPoint(point, i, data, colors);\n return point;\n };\n /**\n * Method render the series elements for accumulation chart\n * @private\n */\n AccumulationSeries.prototype.renderSeries = function (accumulation) {\n var seriesGroup = accumulation.renderer.createGroup({ id: accumulation.element.id + '_Series_' + this.index });\n this.renderPoints(accumulation, seriesGroup);\n var datalabelGroup;\n if (accumulation.accumulationDataLabelModule && this.dataLabel.visible) {\n datalabelGroup = accumulation.renderer.createGroup({ id: accumulation.element.id + '_datalabel_Series_' + this.index });\n datalabelGroup.style.visibility =\n (this.animation.enable && accumulation.animateSeries && this.type === 'Pie') ? 'hidden' : 'visible';\n this.renderDataLabel(accumulation, datalabelGroup);\n }\n if (this.type === 'Pie') {\n this.findMaxBounds(this.labelBound, this.accumulationBound);\n accumulation.pieSeriesModule.animateSeries(accumulation, this.animation, this, seriesGroup);\n }\n if (accumulation.accumulationLegendModule) {\n this.labelBound.x -= accumulation.explodeDistance;\n this.labelBound.y -= accumulation.explodeDistance;\n this.labelBound.height += (accumulation.explodeDistance - this.labelBound.y);\n this.labelBound.width += (accumulation.explodeDistance - this.labelBound.x);\n }\n };\n /**\n * Method render the points elements for accumulation chart series.\n */\n AccumulationSeries.prototype.renderPoints = function (accumulation, seriesGroup) {\n var pointId = accumulation.element.id + '_Series_' + this.index + '_Point_';\n var option;\n for (var _i = 0, _a = this.points; _i < _a.length; _i++) {\n var point = _a[_i];\n var argsData = {\n cancel: false, name: pointRender, series: this, point: point, fill: point.color,\n border: this.isEmpty(point) ? { width: this.emptyPointSettings.border.width, color: this.emptyPointSettings.border.color } :\n { width: this.border.width, color: this.border.color }\n };\n accumulation.trigger(pointRender, argsData);\n point.color = argsData.fill;\n if (point.visible) {\n option = new PathOption(pointId + point.index, point.color, argsData.border.width || 1, argsData.border.color || point.color, 1, '', '');\n accumulation[(firstToLowerCase(this.type) + 'SeriesModule')].\n renderPoint(point, this, accumulation, option);\n seriesGroup.appendChild(accumulation.renderer.drawPath(option));\n }\n }\n accumulation.getSeriesElement().appendChild(seriesGroup);\n };\n /**\n * Method render the datalabel elements for accumulation chart.\n */\n AccumulationSeries.prototype.renderDataLabel = function (accumulation, datalabelGroup) {\n accumulation.accumulationDataLabelModule.findAreaRect();\n var element = createElement('div', {\n id: accumulation.element.id + '_Series_0' + '_DataLabelCollections'\n });\n for (var _i = 0, _a = this.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (point.visible) {\n accumulation.accumulationDataLabelModule.renderDataLabel(point, this.dataLabel, datalabelGroup, this.points, this.index, element);\n }\n }\n if (this.dataLabel.template !== null && element.childElementCount) {\n getElement(accumulation.element.id + '_Secondary_Element').appendChild(element);\n }\n accumulation.getSeriesElement().appendChild(datalabelGroup);\n };\n /**\n * To find maximum bounds for smart legend placing\n * @private\n */\n AccumulationSeries.prototype.findMaxBounds = function (totalbound, bound) {\n totalbound.x = bound.x < totalbound.x ? bound.x : totalbound.x;\n totalbound.y = bound.y < totalbound.y ? bound.y : totalbound.y;\n totalbound.height = (bound.y + bound.height) > totalbound.height ? (bound.y + bound.height) : totalbound.height;\n totalbound.width = (bound.x + bound.width) > totalbound.width ? (bound.x + bound.width) : totalbound.width;\n };\n /**\n * To set empty point value for null points\n * @private\n */\n AccumulationSeries.prototype.setAccEmptyPoint = function (point, i, data, colors) {\n if (!isNullOrUndefined(point.y)) {\n return null;\n }\n point.color = this.emptyPointSettings.fill || point.color;\n switch (this.emptyPointSettings.mode) {\n case 'Zero':\n point.y = 0;\n point.visible = true;\n break;\n case 'Average':\n var previous = data[i - 1] ? (data[i - 1][this.yName] || 0) : 0;\n var next = data[i + 1] ? (data[i + 1][this.yName] || 0) : 0;\n point.y = (Math.abs(previous) + Math.abs(next)) / 2;\n this.sumOfPoints += point.y;\n point.visible = true;\n break;\n case 'Drop':\n point.visible = false;\n break;\n }\n };\n /**\n * To find point is empty\n */\n AccumulationSeries.prototype.isEmpty = function (point) {\n return point.color === this.emptyPointSettings.fill;\n };\n __decorate([\n Property('')\n ], AccumulationSeries.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], AccumulationSeries.prototype, \"query\", void 0);\n __decorate([\n Property('')\n ], AccumulationSeries.prototype, \"xName\", void 0);\n __decorate([\n Property('')\n ], AccumulationSeries.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], AccumulationSeries.prototype, \"yName\", void 0);\n __decorate([\n Property(true)\n ], AccumulationSeries.prototype, \"visible\", void 0);\n __decorate([\n Complex({ color: null, width: 0 }, Border)\n ], AccumulationSeries.prototype, \"border\", void 0);\n __decorate([\n Complex(null, Animation)\n ], AccumulationSeries.prototype, \"animation\", void 0);\n __decorate([\n Property('SeriesType')\n ], AccumulationSeries.prototype, \"legendShape\", void 0);\n __decorate([\n Property('')\n ], AccumulationSeries.prototype, \"pointColorMapping\", void 0);\n __decorate([\n Property(null)\n ], AccumulationSeries.prototype, \"selectionStyle\", void 0);\n __decorate([\n Property(null)\n ], AccumulationSeries.prototype, \"groupTo\", void 0);\n __decorate([\n Complex({}, AccumulationDataLabelSettings)\n ], AccumulationSeries.prototype, \"dataLabel\", void 0);\n __decorate([\n Property([])\n ], AccumulationSeries.prototype, \"palettes\", void 0);\n __decorate([\n Property(0)\n ], AccumulationSeries.prototype, \"startAngle\", void 0);\n __decorate([\n Property(360)\n ], AccumulationSeries.prototype, \"endAngle\", void 0);\n __decorate([\n Property('80%')\n ], AccumulationSeries.prototype, \"radius\", void 0);\n __decorate([\n Property('0')\n ], AccumulationSeries.prototype, \"innerRadius\", void 0);\n __decorate([\n Property('Pie')\n ], AccumulationSeries.prototype, \"type\", void 0);\n __decorate([\n Property(true)\n ], AccumulationSeries.prototype, \"enableTooltip\", void 0);\n __decorate([\n Property(false)\n ], AccumulationSeries.prototype, \"explode\", void 0);\n __decorate([\n Property('30%')\n ], AccumulationSeries.prototype, \"explodeOffset\", void 0);\n __decorate([\n Property(false)\n ], AccumulationSeries.prototype, \"explodeAll\", void 0);\n __decorate([\n Property(null)\n ], AccumulationSeries.prototype, \"explodeIndex\", void 0);\n __decorate([\n Complex({ mode: 'Drop' }, EmptyPointSettings)\n ], AccumulationSeries.prototype, \"emptyPointSettings\", void 0);\n __decorate([\n Property(0)\n ], AccumulationSeries.prototype, \"gapRatio\", void 0);\n __decorate([\n Property('80%')\n ], AccumulationSeries.prototype, \"width\", void 0);\n __decorate([\n Property('80%')\n ], AccumulationSeries.prototype, \"height\", void 0);\n __decorate([\n Property('20%')\n ], AccumulationSeries.prototype, \"neckWidth\", void 0);\n __decorate([\n Property('20%')\n ], AccumulationSeries.prototype, \"neckHeight\", void 0);\n __decorate([\n Property('Linear')\n ], AccumulationSeries.prototype, \"pyramidMode\", void 0);\n __decorate([\n Property(1)\n ], AccumulationSeries.prototype, \"opacity\", void 0);\n return AccumulationSeries;\n}(ChildProperty));\nexport { AccumulationSeries };\n/**\n * method to get series from index\n * @private\n */\nexport function getSeriesFromIndex(index, visibleSeries) {\n for (var _i = 0, visibleSeries_1 = visibleSeries; _i < visibleSeries_1.length; _i++) {\n var series = visibleSeries_1[_i];\n if (index === series.index) {\n return series;\n }\n }\n return visibleSeries[0];\n}\n/**\n * method to get point from index\n * @private\n */\nexport function pointByIndex(index, points) {\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n if (point.index === index) {\n return point;\n }\n }\n return null;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Specifies Circular-Gauge Helper methods\n */\nimport { SvgRenderer, compile as templateComplier } from '@syncfusion/ej2-base';\nimport { merge } from '@syncfusion/ej2-base';\nimport { createElement, remove, setStyleAttribute } from '@syncfusion/ej2-base';\n/**\n * Function to measure the height and width of the text.\n * @param {string} text\n * @param {FontModel} font\n * @param {string} id\n * @returns Size\n * @private\n */\nexport function measureText(text, font) {\n var htmlObject = document.getElementById('gauge-measuretext');\n if (htmlObject === null) {\n htmlObject = createElement('text', { id: 'gauge-measuretext' });\n document.body.appendChild(htmlObject);\n }\n var style = 'position: absolute; visibility: hidden;' +\n ';left: 0; top: -100; white-space: nowrap;' + getFontStyle(font);\n htmlObject.innerHTML = text;\n htmlObject.setAttribute('style', style);\n return new Size(htmlObject.clientWidth, htmlObject.clientHeight);\n}\n/**\n * Function to find number from string\n * * @returns number\n * @private\n */\nexport function toPixel(value, maxDimension) {\n if (value !== null && value !== undefined) {\n return value.indexOf('%') !== -1 ? (maxDimension / 100) * parseInt(value, 10) : parseInt(value, 10);\n }\n return null;\n}\n/**\n * Function to get the style from FontModel.\n * @returns string\n * @private\n */\nexport function getFontStyle(font) {\n var style = '';\n style = 'font-size:' + font.size +\n '; font-style:' + font.fontStyle + '; font-weight:' + font.fontWeight +\n '; font-family:' + font.fontFamily + ';opacity:' + font.opacity +\n '; color:' + font.color + ';';\n return style;\n}\n/**\n * Function to set style to the element.\n * @private\n */\nexport function setStyles(element, fill, border) {\n setStyleAttribute(element, {\n 'stroke': border.color, 'stroke-width': border.width,\n 'fill': fill\n });\n}\n/**\n * Function to measure the element rect.\n * @returns ClientRect\n * @private\n */\nexport function measureElementRect(element) {\n var bounds;\n document.body.appendChild(element);\n bounds = element.getBoundingClientRect();\n removeElement(element.id);\n return bounds;\n}\n/**\n * Function to convert the number from string.\n * @returns number\n * @private\n */\nexport function stringToNumber(value, containerSize) {\n if (value !== null && value !== undefined) {\n return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);\n }\n return null;\n}\n/**\n * Function to create the text element.\n * @returns Element\n * @private\n */\nexport function textElement(options, font, color, parent, styles) {\n var renderOptions = {};\n var htmlObject;\n var renderer = new SvgRenderer('');\n var style = styles + ' font-size:' + font.size + '; font-style:' + font.fontStyle +\n ' ; font-weight:' + font.fontWeight + '; font-family:' + font.fontFamily + ';';\n renderOptions = {\n 'id': options.id,\n 'x': options.x,\n 'y': options.y,\n 'fill': color,\n 'text-anchor': options.anchor,\n 'transform': options.transform,\n 'opacity': font.opacity,\n 'dominant-baseline': options.baseLine,\n 'style': style\n };\n htmlObject = renderer.createText(renderOptions, options.text);\n parent.appendChild(htmlObject);\n return htmlObject;\n}\n/**\n * Function to append the path to the element.\n * @returns Element\n * @private\n */\nexport function appendPath(options, element, gauge, functionName) {\n functionName = functionName ? functionName : 'Path';\n var htmlObject = gauge.renderer['draw' + functionName](options);\n htmlObject.setAttribute('transform', options.transform);\n htmlObject.setAttribute('style', options.style);\n element.appendChild(htmlObject);\n return htmlObject;\n}\n/**\n * Function to calculate the sum of array values.\n * @returns number\n * @private\n */\nexport function calculateSum(from, to, values) {\n var sum = 0;\n var length = values.length;\n for (; from < length; from++) {\n sum += values[from];\n }\n return sum;\n}\n/**\n * Function to calculate the value for linear animation effect\n * @param currentTime\n * @param startValue\n * @param endValue\n * @param duration\n * @private\n */\nexport function linear(currentTime, startValue, endValue, duration) {\n return -endValue * Math.cos(currentTime / duration * (Math.PI / 2)) + endValue + startValue;\n}\n/**\n * Function to get the angle from value for circular gauge.\n * @returns number\n * @private\n */\nexport function getAngleFromValue(value, maximumValue, minimumValue, startAngle, endAngle, isClockWise) {\n var angle;\n endAngle -= isCompleteAngle(startAngle, endAngle) ? 0.0001 : 0;\n startAngle -= 90;\n endAngle -= 90;\n if (isClockWise) {\n angle = ((value - minimumValue) * (getDegree(startAngle, endAngle) / (maximumValue - minimumValue))) + startAngle;\n }\n else {\n angle = endAngle - ((value - minimumValue) * (getDegree(startAngle, endAngle) / (maximumValue - minimumValue)));\n angle = angle < 0 ? 360 + angle : angle;\n }\n angle = Math.round(angle) >= 360 ? (angle - 360) : Math.round(angle) < 0 ? (360 + angle) : angle;\n return angle;\n}\n/**\n * Function to get the degree for circular gauge.\n * @returns number\n * @private\n */\nexport function getDegree(startAngle, endAngle) {\n var degree = endAngle - startAngle;\n return degree < 0 ? (degree + 360) : degree;\n}\n/**\n * Function to get the value from angle for circular gauge.\n * @returns number\n * @private\n */\nexport function getValueFromAngle(angle, maximumValue, minimumValue, startAngle, endAngle, isClockWise) {\n endAngle -= isCompleteAngle(startAngle, endAngle) ? 0.0001 : 0;\n angle = angle < startAngle ? (angle + 360) : angle;\n if (isClockWise) {\n return (((angle - startAngle) / getDegree(startAngle, endAngle)) * (maximumValue - minimumValue)) + minimumValue;\n }\n else {\n return maximumValue - ((((angle - startAngle) / getDegree(startAngle, endAngle)) * (maximumValue - minimumValue)) + minimumValue);\n }\n}\n/**\n * Function to check whether it's a complete circle for circular gauge.\n * @returns boolean\n * @private\n */\nexport function isCompleteAngle(startAngle, endAngle) {\n var totalAngle = endAngle - startAngle;\n totalAngle = totalAngle <= 0 ? (totalAngle + 360) : totalAngle;\n return Math.floor(totalAngle / 360) !== 0;\n}\n/**\n * Function to get angle from location for circular gauge.\n * @returns number\n * @private\n */\nexport function getAngleFromLocation(center, point) {\n var angle = Math.atan2((point.y - center.y), (point.x - center.x));\n angle = Math.round((angle < 0 ? (6.283 + angle) : angle) * (180 / Math.PI)) - 270;\n angle += angle < 0 ? 360 : 0;\n return angle;\n}\n/**\n * Function to get the location from angle for circular gauge.\n * @returns GaugeLocation\n * @private\n */\nexport function getLocationFromAngle(degree, radius, center) {\n var radian = (degree * Math.PI) / 180;\n return new GaugeLocation(Math.cos(radian) * radius + center.x, Math.sin(radian) * radius + center.y);\n}\n/**\n * Function to get the path direction of the circular gauge.\n * @returns string\n * @private\n */\nexport function getPathArc(center, start, end, radius, startWidth, endWidth) {\n end -= isCompleteAngle(start, end) ? 0.0001 : 0;\n var degree = getDegree(start, end);\n var startRadius = radius - startWidth;\n var endRadius = radius - endWidth;\n var arcRadius = radius - ((startWidth + endWidth) / 2);\n if (startWidth !== undefined && endWidth !== undefined) {\n return getRangePath(getLocationFromAngle(start, radius, center), getLocationFromAngle(end, radius, center), getLocationFromAngle(start, startRadius, center), getLocationFromAngle(end, endRadius, center), radius, arcRadius, arcRadius, (degree < 180) ? 0 : 1);\n }\n else {\n return getCirclePath(getLocationFromAngle(start, radius, center), getLocationFromAngle(end, radius, center), radius, (degree < 180) ? 0 : 1);\n }\n}\n/**\n * Function to get the range path direction of the circular gauge.\n * @returns string\n * @private\n */\nexport function getRangePath(start, end, innerStart, innerEnd, radius, startRadius, endRadius, clockWise) {\n return 'M ' + start.x + ' ' + start.y +\n ' A ' + radius + ' ' + radius + ' 0 ' +\n clockWise + ' 1 ' + end.x + ' ' + end.y +\n ' L ' + innerEnd.x + ' ' + innerEnd.y +\n ' A ' + endRadius + ' ' + startRadius + ' 0 ' +\n clockWise + ' 0 ' + innerStart.x + ' ' + innerStart.y + ' Z';\n}\n/**\n * Function to calculate the complete path arc of the circular gauge.\n * @returns string\n * @private\n */\nexport function getCompleteArc(center, start, end, radius, innerRadius) {\n end -= isCompleteAngle(start, end) ? 0.0001 : 0;\n var degree = getDegree(start, end);\n return getCompletePath(center, getLocationFromAngle(start, radius, center), getLocationFromAngle(end, radius, center), radius, getLocationFromAngle(start, innerRadius, center), getLocationFromAngle(end, innerRadius, center), innerRadius, (degree < 180) ? 0 : 1);\n}\n/**\n * Function to get the circular path direction of the circular gauge.\n * @returns string\n * @private\n */\nexport function getCirclePath(start, end, radius, clockWise) {\n return 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' +\n radius + ' 0 ' + clockWise + ' 1 ' + end.x + ' ' + end.y;\n}\n/**\n * Function to get the complete path direction of the circular gauge.\n * @returns string\n * @private\n */\nexport function getCompletePath(center, start, end, radius, innerStart, innerEnd, innerRadius, clockWise) {\n return 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' + radius + ' 0 ' + clockWise +\n ' 1 ' + end.x + ' ' + end.y + ' L ' + innerEnd.x + ' ' + innerEnd.y + ' A ' + innerRadius +\n ' ' + innerRadius + ' 0 ' + clockWise + ',0 ' + innerStart.x + ' ' + innerStart.y + ' Z';\n}\n/**\n * Function to get element from id.\n * @returns Element\n * @private\n */\nexport function getElement(id) {\n return document.getElementById(id);\n}\n/**\n * Function to compile the template function for circular gauge.\n * @returns Function\n * @private\n */\nexport function getTemplateFunction(template) {\n var templateFn = null;\n var e;\n try {\n if (document.querySelectorAll(template).length) {\n templateFn = templateComplier(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n templateFn = templateComplier(template);\n }\n return templateFn;\n}\n/**\n * Function to remove the element from id.\n * @private\n */\nexport function removeElement(id) {\n var element = getElement(id);\n if (element) {\n remove(element);\n }\n}\n/**\n * Function to get current point for circular gauge using element id.\n * @returns IVisiblePointer\n * @private\n */\nexport function getPointer(targetId, gauge) {\n var tempString;\n tempString = targetId.split(gauge.element.id + '_Axis_')[1];\n return {\n axisIndex: +tempString[0],\n pointerIndex: +tempString[tempString.length - 1]\n };\n}\n/**\n * Function to convert the label using formar for cirular gauge.\n * @returns string\n * @private\n */\nexport function getLabelFormat(format) {\n var customLabelFormat = format && format.match('{value}') !== null;\n var skeleton = customLabelFormat ? '' : format;\n return skeleton;\n}\n/**\n * Function to calculate the marker shape for circular gauge.\n * @returns PathOption\n * @private\n */\nexport function calculateShapes(location, shape, size, url, options) {\n var path;\n var width = size.width;\n var height = size.height;\n var locX = location.x;\n var locY = location.y;\n var x = location.x + (-width / 2);\n var y = location.y + (-height / 2);\n switch (shape) {\n case 'Circle':\n merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });\n break;\n case 'Diamond':\n path = 'M' + ' ' + x + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + locY + ' Z';\n merge(options, { 'd': path });\n break;\n case 'Rectangle':\n path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' Z';\n merge(options, { 'd': path });\n break;\n case 'Triangle':\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + ' ' + (locX - height) + ' ' + (locY - (width / 2)) +\n 'L' + ' ' + (locX - height) + ' ' + (locY + (width / 2)) + ' Z';\n merge(options, { 'd': path });\n break;\n case 'InvertedTriangle':\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + ' ' + (locX + height) + ' ' + (locY - (width / 2)) +\n 'L' + ' ' + (locX + height) + ' ' + (locY + (width / 2)) + ' Z';\n merge(options, { 'd': path });\n break;\n case 'Image':\n merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });\n break;\n }\n return options;\n}\n/**\n * Function to get range color from value for circular gauge.\n * @returns string\n * @private\n */\nexport function getRangeColor(value, ranges, color) {\n var min = 0;\n var max = 0;\n var currentRange = ranges.filter(function (range) {\n min = Math.min(range.start, range.end);\n max = Math.max(range.start, range.end);\n return (value >= min && max >= value);\n });\n return currentRange.length ? currentRange[0].rangeColor : color;\n}\n/** @private */\nvar CustomizeOption = /** @class */ (function () {\n function CustomizeOption(id) {\n this.id = id;\n }\n return CustomizeOption;\n}());\nexport { CustomizeOption };\n/** @private */\nvar PathOption = /** @class */ (function (_super) {\n __extends(PathOption, _super);\n function PathOption(id, fill, width, color, opacity, dashArray, d, transform, style) {\n if (transform === void 0) { transform = ''; }\n if (style === void 0) { style = ''; }\n var _this = _super.call(this, id) || this;\n _this.opacity = opacity;\n _this.fill = fill;\n _this.stroke = color;\n _this['stroke-width'] = width;\n _this['stroke-dasharray'] = dashArray;\n _this.d = d;\n _this.transform = transform;\n _this.style = style;\n return _this;\n }\n return PathOption;\n}(CustomizeOption));\nexport { PathOption };\n/** @private */\nvar RectOption = /** @class */ (function (_super) {\n __extends(RectOption, _super);\n function RectOption(id, fill, border, opacity, rect) {\n var _this = _super.call(this, id) || this;\n _this.y = rect.y;\n _this.x = rect.x;\n _this.height = rect.height;\n _this.width = rect.width;\n _this.opacity = opacity;\n _this.fill = fill;\n _this.stroke = border.color;\n _this['stroke-width'] = border.width;\n return _this;\n }\n return RectOption;\n}(CustomizeOption));\nexport { RectOption };\n/**\n * Internal class size\n */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n return Size;\n}());\nexport { Size };\n/** @private */\nvar GaugeLocation = /** @class */ (function () {\n function GaugeLocation(x, y) {\n this.x = x;\n this.y = y;\n }\n return GaugeLocation;\n}());\nexport { GaugeLocation };\n/** @private */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n return Rect;\n}());\nexport { Rect };\n/** @private */\nvar TextOption = /** @class */ (function (_super) {\n __extends(TextOption, _super);\n function TextOption(id, x, y, anchor, text, transform, baseLine) {\n if (transform === void 0) { transform = ''; }\n var _this = _super.call(this, id) || this;\n _this.transform = '';\n _this.baseLine = 'auto';\n _this.x = x;\n _this.y = y;\n _this.anchor = anchor;\n _this.text = text;\n _this.transform = transform;\n _this.baseLine = baseLine;\n return _this;\n }\n return TextOption;\n}(CustomizeOption));\nexport { TextOption };\n/** @private */\nvar VisibleLabels = /** @class */ (function () {\n function VisibleLabels(text, value, size) {\n this.text = text;\n this.value = value;\n this.size = size;\n }\n return VisibleLabels;\n}());\nexport { VisibleLabels };\n","/**\n * IncrementalSearch module file\n */\nvar queryString = '';\nvar prevString = '';\nvar matches = [];\nvar activeClass = 'e-active';\n/**\n * Search and focus the list item based on key code matches with list text content\n * @param { number } keyCode - Specifies the key code which pressed on keyboard events.\n * @param { HTMLElement[]] } items - Specifies an array of HTMLElement, from which matches find has done.\n * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen\n * after selected item otherwise it will do from initial.\n * @param { boolean } ignoreCase - Specifies the case consideration when search has done.\n */\nexport function incrementalSearch(keyCode, items, selectedIndex, ignoreCase) {\n queryString += String.fromCharCode(keyCode);\n setTimeout(function () { queryString = ''; }, 1000);\n var index;\n queryString = ignoreCase ? queryString.toLowerCase() : queryString;\n if (prevString === queryString) {\n for (var i = 0; i < matches.length; i++) {\n if (matches[i].classList.contains(activeClass)) {\n index = i;\n break;\n }\n }\n index = index + 1;\n return matches[index];\n }\n else {\n var listItems = items;\n var strLength = queryString.length;\n var text = void 0;\n var item = void 0;\n selectedIndex = selectedIndex ? selectedIndex + 1 : 0;\n var i = selectedIndex;\n matches = [];\n do {\n if (i === listItems.length) {\n i = -1;\n }\n i === -1 ? index = 0 : index = i;\n item = listItems[index];\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n return matches[0];\n }\n}\nexport function Search(inputVal, items, searchType, ignoreCase) {\n var listItems = items;\n ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;\n var itemData = { item: null, index: null };\n if (inputVal.length) {\n var strLength = inputVal.length;\n var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;\n for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {\n var item = itemsData[i];\n var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\\s+|\\s+$/g, '');\n if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {\n itemData.item = item;\n itemData.index = i;\n return { item: item, index: i };\n }\n }\n return itemData;\n }\n return itemData;\n}\n","/**\n * Function helps to find which highlightSearch is to call based on your data.\n * @param {HTMLElement} content - Specifies an content element.\n * @param {string} query - Specifies the string to be highlighted.\n * @param {boolean} ignoreCase - Specifies the ignoreCase option.\n * @param {HightLightType} type - Specifies the type of highlight.\n */\nexport function highlightSearch(content, query, ignoreCase, type) {\n revert(content);\n if (query === '') {\n return;\n }\n else {\n var ignoreRegex = ignoreCase ? 'gim' : 'gm';\n query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ? '(' + query + ')$' : '(' + query + ')';\n var pattern = new RegExp(replaceQuery, ignoreRegex);\n var li = content.querySelectorAll('ul li');\n for (var i = 0; i < li.length; i++) {\n var element = li[i];\n element.innerHTML = element.innerHTML.replace(pattern, '$1 ');\n }\n }\n}\n/**\n * Function helps to remove highlighted element based on your data.\n * @param {HTMLElement} id - Specifies an id of list data.\n */\nfunction revert(content) {\n var contentElement = content.querySelectorAll('.e-highlight');\n for (var i = contentElement.length - 1; i >= 0; i--) {\n var parent_1 = contentElement[i].parentNode;\n var text = document.createTextNode(contentElement[i].textContent);\n parent_1.replaceChild(text, contentElement[i]);\n }\n}\n","/**\n * FloatLable Moduel\n * Specifies whether to display the floating label above the input element.\n */\nimport { removeClass, addClass, detach } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';\nvar FLOATLINE = 'e-float-line';\nvar FLOATTEXT = 'e-float-text';\nvar LABELTOP = 'e-label-top';\nvar LABELBOTTOM = 'e-label-bottom';\n/**\n * Function to create Float Label element.\n * @param overAllWrapper - overall wrapper of multiselect.\n * @param element - the given html element.\n * @param inputElement - specify the input wrapper.\n * @param value - Value of the MultiSelect.\n * @param floatLabelType - Specify the FloatLabel Type.\n * @param placeholder - Specify the PlaceHolder text.\n */\nexport function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {\n var floatLinelement;\n var floatLabelElement;\n floatLinelement = createElement('span', { className: FLOATLINE });\n floatLabelElement = createElement('label', { className: FLOATTEXT });\n if (!isNullOrUndefined(element.id) && element.id !== '') {\n floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');\n attributes(element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {\n floatLabelElement.innerHTML = inputElement.placeholder;\n inputElement.removeAttribute('placeholder');\n }\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n floatLabelElement.innerHTML = placeholder;\n }\n searchWrapper.appendChild(floatLinelement);\n searchWrapper.appendChild(floatLabelElement);\n overAllWrapper.classList.add('e-float-input');\n updateFloatLabelState(value, floatLabelElement);\n if (floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(LABELBOTTOM)) {\n removeClass([floatLabelElement], LABELBOTTOM);\n }\n addClass([floatLabelElement], LABELTOP);\n }\n}\n/**\n * Function to update status of the Float Label element.\n * @param value - Value of the MultiSelect.\n * @param label - float label element.\n */\nexport function updateFloatLabelState(value, label) {\n if (value && value.length > 0) {\n addClass([label], LABELTOP);\n removeClass([label], LABELBOTTOM);\n }\n else {\n removeClass([label], LABELTOP);\n addClass([label], LABELBOTTOM);\n }\n}\n/**\n * Function to remove Float Label element.\n * @param overAllWrapper - overall wrapper of multiselect.\n * @param componentWrapper - wrapper element of multiselect.\n * @param searchWrapper - search wrapper of multiselect.\n * @param inputElement - specify the input wrapper.\n * @param value - Value of the MultiSelect.\n * @param floatLabelType - Specify the FloatLabel Type.\n * @param placeholder - Specify the PlaceHolder text.\n */\nexport function removeFloating(overAllWrapper, componentWrapper, searchWrapper, inputElement, value, floatLabelType, placeholder) {\n var placeholderElement = componentWrapper.querySelector('.' + FLOATTEXT);\n var floatLine = componentWrapper.querySelector('.' + FLOATLINE);\n var placeholderText;\n if (!isNullOrUndefined(placeholderElement)) {\n placeholderText = placeholderElement.innerText;\n detach(searchWrapper.querySelector('.' + FLOATTEXT));\n setPlaceHolder(value, inputElement, placeholderText);\n if (!isNullOrUndefined(floatLine)) {\n detach(searchWrapper.querySelector('.' + FLOATLINE));\n }\n }\n else {\n placeholderText = (placeholder !== null) ? placeholder : '';\n setPlaceHolder(value, inputElement, placeholderText);\n }\n overAllWrapper.classList.remove('e-float-input');\n}\n/**\n * Function to set the placeholder to the element.\n * @param value - Value of the MultiSelect.\n * @param inputElement - specify the input wrapper.\n * @param placeholder - Specify the PlaceHolder text.\n */\nexport function setPlaceHolder(value, inputElement, placeholder) {\n if (value && value.length) {\n inputElement.placeholder = '';\n }\n else {\n inputElement.placeholder = placeholder;\n }\n}\n/**\n * Function for focusing the Float Element.\n * @param overAllWrapper - overall wrapper of multiselect.\n * @param componentWrapper - wrapper element of multiselect.\n */\nexport function floatLabelFocus(overAllWrapper, componentWrapper) {\n overAllWrapper.classList.add('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (!isNullOrUndefined(label)) {\n addClass([label], LABELTOP);\n if (label.classList.contains(LABELBOTTOM)) {\n removeClass([label], LABELBOTTOM);\n }\n }\n}\n/**\n * Function to focus the Float Label element.\n * @param overAllWrapper - overall wrapper of multiselect.\n * @param componentWrapper - wrapper element of multiselect.\n * @param value - Value of the MultiSelect.\n * @param floatLabelType - Specify the FloatLabel Type.\n * @param placeholder - Specify the PlaceHolder text.\n */\nexport function floatLabelBlur(overAllWrapper, componentWrapper, value, floatLabelType, placeholder) {\n overAllWrapper.classList.remove('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (value && value.length <= 0 && floatLabelType === 'Auto' && !isNullOrUndefined(label)) {\n if (label.classList.contains(LABELTOP)) {\n removeClass([label], LABELTOP);\n }\n addClass([label], LABELBOTTOM);\n }\n}\n","import { ChildProperty, compile as baseTemplateComplier, setValue } from '@syncfusion/ej2-base';\nimport { extend as baseExtend, isNullOrUndefined, getValue, classList } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, addClass, attributes, remove, createElement, removeClass } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { Column } from '../models/column';\nimport { calculateRelativeBasedPosition, calculatePosition } from '@syncfusion/ej2-popups';\n//https://typescript.codeplex.com/discussions/401501\n/**\n * Function to check whether target object implement specific interface\n * @param {Object} target\n * @param {string} checkFor\n * @returns no\n * @hidden\n */\nexport function doesImplementInterface(target, checkFor) {\n /* tslint:disable:no-any */\n return target.prototype && checkFor in target.prototype;\n}\n/**\n * Function to get value from provided data\n * @param {string} field\n * @param {Object} data\n * @param {IColumn} column\n * @hidden\n */\nexport function valueAccessor(field, data, column) {\n field = isNullOrUndefined(field) ? '' : field;\n return getValue(field, data);\n}\n/**\n * The function used to update Dom using requestAnimationFrame.\n * @param {Function} fn - Function that contains the actual action\n * @return {Promise}\n * @hidden\n */\nexport function getUpdateUsingRaf(updateFunction, callBack) {\n requestAnimationFrame(function () {\n try {\n callBack(null, updateFunction());\n }\n catch (e) {\n callBack(e);\n }\n });\n}\n/**\n * @hidden\n */\nexport function iterateArrayOrObject(collection, predicate) {\n var result = [];\n for (var i = 0, len = collection.length; i < len; i++) {\n var pred = predicate(collection[i], i);\n if (!isNullOrUndefined(pred)) {\n result.push(pred);\n }\n }\n return result;\n}\n/** @hidden */\nexport function templateCompiler(template) {\n if (template) {\n var e = void 0;\n try {\n if (document.querySelectorAll(template).length) {\n return baseTemplateComplier(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n return baseTemplateComplier(template);\n }\n }\n return undefined;\n}\n/** @hidden */\nexport function setStyleAndAttributes(node, customAttributes) {\n var copyAttr = {};\n var literals = ['style', 'class'];\n //Dont touch the original object - make a copy\n baseExtend(copyAttr, customAttributes, {});\n if ('style' in copyAttr) {\n setStyleAttribute(node, copyAttr[literals[0]]);\n delete copyAttr[literals[0]];\n }\n if ('class' in copyAttr) {\n addClass([node], copyAttr[literals[1]]);\n delete copyAttr[literals[1]];\n }\n attributes(node, copyAttr);\n}\n/** @hidden */\nexport function extend(copied, first, second, exclude) {\n var moved = baseExtend(copied, first, second);\n Object.keys(moved).forEach(function (value, index) {\n if (exclude.indexOf(value) !== -1) {\n delete moved[value];\n }\n });\n return moved;\n}\n/** @hidden */\nexport function prepareColumns(columns, autoWidth) {\n for (var c = 0, len = columns.length; c < len; c++) {\n var column = void 0;\n if (typeof columns[c] === 'string') {\n column = new Column({ field: columns[c] });\n }\n else if (!(columns[c] instanceof Column)) {\n if (!columns[c].columns) {\n column = new Column(columns[c]);\n }\n else {\n column = new Column(columns[c]);\n columns[c].columns = prepareColumns(columns[c].columns);\n }\n }\n else {\n column = columns[c];\n }\n column.headerText = isNullOrUndefined(column.headerText) ? column.foreignKeyValue || column.field || '' : column.headerText;\n column.foreignKeyField = column.foreignKeyField || column.field;\n column.valueAccessor = (typeof column.valueAccessor === 'string' ? getValue(column.valueAccessor, window)\n : column.valueAccessor) || valueAccessor;\n column.width = autoWidth && isNullOrUndefined(column.width) ? 200 : column.width;\n if (isNullOrUndefined(column.visible)) {\n column.visible = true;\n }\n columns[c] = column;\n }\n return columns;\n}\n/** @hidden */\nexport function setCssInGridPopUp(popUp, e, className) {\n var popUpSpan = popUp.querySelector('span');\n var position = popUp.parentElement.getBoundingClientRect();\n var targetPosition = e.target.getBoundingClientRect();\n var isBottomTail;\n popUpSpan.className = className;\n popUp.style.display = '';\n isBottomTail = (isNullOrUndefined(e.clientY) ? e.changedTouches[0].clientY :\n e.clientY) > popUp.offsetHeight + 10;\n popUp.style.top = targetPosition.top - position.top +\n (isBottomTail ? -(popUp.offsetHeight + 10) : popUp.offsetHeight + 10) + 'px'; //10px for tail element\n popUp.style.left = getPopupLeftPosition(popUp, e, targetPosition, position.left) + 'px';\n if (isBottomTail) {\n popUp.querySelector('.e-downtail').style.display = '';\n popUp.querySelector('.e-uptail').style.display = 'none';\n }\n else {\n popUp.querySelector('.e-downtail').style.display = 'none';\n popUp.querySelector('.e-uptail').style.display = '';\n }\n}\n/** @hidden */\nfunction getPopupLeftPosition(popup, e, targetPosition, left) {\n var width = popup.offsetWidth / 2;\n var x = getPosition(e).x;\n if (x - targetPosition.left < width) {\n return targetPosition.left - left;\n }\n else if (targetPosition.right - x < width) {\n return targetPosition.right - left - width * 2;\n }\n else {\n return x - left - width;\n }\n}\n/** @hidden */\nexport function getActualProperties(obj) {\n if (obj instanceof ChildProperty) {\n return getValue('properties', obj);\n }\n else {\n return obj;\n }\n}\n/** @hidden */\nexport function parentsUntil(elem, selector, isID) {\n var parent = elem;\n while (parent) {\n if (isID ? parent.id === selector : parent.classList.contains(selector)) {\n break;\n }\n parent = parent.parentElement;\n }\n return parent;\n}\n/** @hidden */\nexport function getElementIndex(element, elements) {\n var index = -1;\n for (var i = 0, len = elements.length; i < len; i++) {\n if (elements[i].isEqualNode(element)) {\n index = i;\n break;\n }\n }\n return index;\n}\n/** @hidden */\nexport function inArray(value, collection) {\n for (var i = 0, len = collection.length; i < len; i++) {\n if (collection[i] === value) {\n return i;\n }\n }\n return -1;\n}\n/** @hidden */\nexport function getActualPropFromColl(collection) {\n var coll = [];\n for (var i = 0, len = collection.length; i < len; i++) {\n if (collection[i].hasOwnProperty('properties')) {\n coll.push(collection[i].properties);\n }\n else {\n coll.push(collection[i]);\n }\n }\n return coll;\n}\n/** @hidden */\nexport function removeElement(target, selector) {\n var elements = [].slice.call(target.querySelectorAll(selector));\n for (var i = 0; i < elements.length; i++) {\n remove(elements[i]);\n }\n}\n/** @hidden */\nexport function getPosition(e) {\n var position = {};\n position.x = (isNullOrUndefined(e.clientX) ? e.changedTouches[0].clientX :\n e.clientX);\n position.y = (isNullOrUndefined(e.clientY) ? e.changedTouches[0].clientY :\n e.clientY);\n return position;\n}\nvar uid = 0;\n/** @hidden */\nexport function getUid(prefix) {\n return prefix + uid++;\n}\n/** @hidden */\nexport function appendChildren(elem, children) {\n for (var i = 0, len = children.length; i < len; i++) {\n if (len === children.length) {\n elem.appendChild(children[i]);\n }\n else {\n elem.appendChild(children[0]);\n }\n }\n return elem;\n}\n/** @hidden */\nexport function parents(elem, selector, isID) {\n var parent = elem;\n var parents = [];\n while (parent) {\n if (isID ? parent.id === selector : parent.classList.contains(selector)) {\n parents.push(parent);\n }\n parent = parent.parentElement;\n }\n return parents;\n}\n/** @hidden */\nexport function calculateAggregate(type, data, column, context) {\n if (type === 'Custom') {\n var temp = column.customAggregate;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n return temp ? temp.call(context, data, column) : '';\n }\n return DataUtil.aggregates[type.toLowerCase()](data, column.field);\n}\n/** @hidden */\nvar scrollWidth = null;\n/** @hidden */\nexport function getScrollBarWidth() {\n if (scrollWidth !== null) {\n return scrollWidth;\n }\n var divNode = document.createElement('div');\n var value = 0;\n divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';\n document.body.appendChild(divNode);\n value = (divNode.offsetWidth - divNode.clientWidth) | 0;\n document.body.removeChild(divNode);\n return scrollWidth = value;\n}\n/** @hidden */\nvar rowHeight;\n/** @hidden */\nexport function getRowHeight(element) {\n if (rowHeight !== undefined) {\n return rowHeight;\n }\n var table = createElement('table', { className: 'e-table', styles: 'visibility: hidden' });\n table.innerHTML = 'A ';\n element.appendChild(table);\n var rect = table.querySelector('td').getBoundingClientRect();\n element.removeChild(table);\n rowHeight = Math.ceil(rect.height);\n return rowHeight;\n}\n/** @hidden */\nexport function isEditable(col, type, elem) {\n var row = parentsUntil(elem, 'e-row');\n var isOldRow = !row ? true : row && !row.classList.contains('e-insertedrow');\n if (type === 'beginEdit' && isOldRow) {\n if (col.isIdentity || col.isPrimaryKey || !col.allowEditing) {\n return false;\n }\n return true;\n }\n else if (type === 'add' && col.isIdentity && col.isPrimaryKey) {\n return false;\n }\n else {\n if (isOldRow && !col.allowEditing && !col.isIdentity && !col.isPrimaryKey) {\n return false;\n }\n return true;\n }\n}\n/** @hidden */\nexport function isActionPrevent(inst) {\n var dlg = inst.element.querySelector('#' + inst.element.id + 'EditConfirm');\n return inst.editSettings.mode === 'Batch' &&\n (inst.element.querySelectorAll('.e-updatedtd').length) && inst.editSettings.showConfirmDialog &&\n (dlg ? dlg.classList.contains('e-popup-close') : true);\n}\n/** @hidden */\nexport function wrap(elem, action) {\n var clName = 'e-wrap';\n elem = elem instanceof Array ? elem : [elem];\n for (var i = 0; i < elem.length; i++) {\n action ? elem[i].classList.add(clName) : elem[i].classList.remove(clName);\n }\n}\nexport function changeButtonType(target) {\n var elements = [].slice.call(target.querySelectorAll('button'));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var button = elements_1[_i];\n attributes(button, { type: 'button' });\n }\n}\n/** @hidden */\nexport function setFormatter(serviceLocator, column) {\n var fmtr = serviceLocator.getService('valueFormatter');\n switch (column.type) {\n case 'date':\n column.setFormatter(fmtr.getFormatFunction({ type: 'date', skeleton: column.format }));\n column.setParser(fmtr.getParserFunction({ type: 'date', skeleton: column.format }));\n break;\n case 'datetime':\n column.setFormatter(fmtr.getFormatFunction({ type: 'dateTime', skeleton: column.format }));\n column.setParser(fmtr.getParserFunction({ type: 'dateTime', skeleton: column.format }));\n break;\n case 'number':\n column.setFormatter(fmtr.getFormatFunction({ format: column.format }));\n column.setParser(fmtr.getParserFunction({ format: column.format }));\n break;\n }\n}\n/** @hidden */\nexport function addRemoveActiveClasses(cells, add) {\n var args = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n args[_i - 2] = arguments[_i];\n }\n for (var i = 0, len = cells.length; i < len; i++) {\n if (add) {\n classList(cells[i], args.slice(), []);\n cells[i].setAttribute('aria-selected', 'true');\n }\n else {\n classList(cells[i], [], args.slice());\n cells[i].removeAttribute('aria-selected');\n }\n }\n}\n/** @hidden */\nexport function distinctStringValues(result) {\n var temp = {};\n var res = [];\n for (var i = 0; i < result.length; i++) {\n if (!(result[i] in temp)) {\n res.push(result[i].toString());\n temp[result[i]] = 1;\n }\n }\n return res;\n}\n/** @hidden */\nexport function getFilterMenuPostion(target, dialogObj, grid) {\n var elementVisible = dialogObj.element.style.display;\n dialogObj.element.style.display = 'block';\n var dlgWidth = dialogObj.width;\n var newpos;\n if (!grid.enableRtl) {\n newpos = calculateRelativeBasedPosition(target, dialogObj.element);\n dialogObj.element.style.display = elementVisible;\n dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';\n var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);\n if (leftPos < 1) {\n dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px'; // right calculation\n }\n else {\n dialogObj.element.style.left = leftPos + -4 + 'px';\n }\n }\n else {\n newpos = calculatePosition(target, 'left', 'bottom');\n dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 35 + 'px';\n dialogObj.element.style.display = elementVisible;\n var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);\n if (leftPos < 1) {\n dialogObj.element.style.left = (dlgWidth + leftPos) + -16 + 'px';\n }\n else {\n dialogObj.element.style.left = leftPos - 16 + 'px';\n }\n }\n}\n/** @hidden */\nexport function getZIndexCalcualtion(args, dialogObj) {\n args.popup.element.style.zIndex = (dialogObj.zIndex + 1).toString();\n}\n/** @hidden */\nexport function toogleCheckbox(elem) {\n var span = elem.querySelector('.e-frame');\n span.classList.contains('e-check') ? classList(span, ['e-uncheck'], ['e-check']) :\n classList(span, ['e-check'], ['e-uncheck']);\n}\n/** @hidden */\nexport function createCboxWithWrap(uid, elem, className) {\n var div = createElement('div', { className: className });\n div.appendChild(elem);\n div.setAttribute('uid', uid);\n return div;\n}\n/** @hidden */\nexport function removeAddCboxClasses(elem, checked) {\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n if (checked) {\n elem.classList.add('e-check');\n }\n else {\n elem.classList.add('e-uncheck');\n }\n}\n/**\n * Refresh the Row model's foreign data.\n * @param row - Grid Row model object.\n * @param columns - Foreign columns array.\n * @param data - Updated Row data.\n * @hidden\n */\nexport function refreshForeignData(row, columns, data) {\n columns.forEach(function (col) {\n setValue(col.field, getForeignData(col, data), row.foreignKeyData);\n });\n row.cells.forEach(function (cell) {\n if (cell.isForeignKey) {\n setValue('foreignKeyData', getValue(cell.column.field, row.foreignKeyData), cell);\n }\n });\n}\n/**\n * Get the foreign data for the corresponding cell value.\n * @param column - Foreign Key column\n * @param data - Row data.\n * @param lValue - cell value.\n * @param foreignData - foreign data source.\n * @hidden\n */\nexport function getForeignData(column, data, lValue, foreignKeyData) {\n var fField = column.foreignKeyField;\n var key = (lValue || valueAccessor(column.field, data, column));\n key = isNullOrUndefined(key) ? '' : key;\n var query = new Query();\n var fdata = foreignKeyData || (column.dataSource instanceof DataManager) && column.dataSource.dataSource.offline ?\n column.dataSource.dataSource.json : column.columnData;\n if (key.getDay) {\n query.where(getDatePredicate({ field: fField, operator: 'equal', value: key, matchCase: false }));\n }\n else {\n query.where(fField, '==', key, false);\n }\n return new DataManager(fdata).executeLocal(query);\n}\n/**\n * To use to get the column's object by the foreign key value.\n * @param foreignKeyValue - Defines ForeignKeyValue.\n * @param columns - Array of column object.\n * @hidden\n */\nexport function getColumnByForeignKeyValue(foreignKeyValue, columns) {\n var column;\n return columns.some(function (col) {\n column = col;\n return col.foreignKeyValue === foreignKeyValue;\n }) && column;\n}\n/**\n * @hidden\n * @param filterObject - Defines predicate model object\n */\nexport function getDatePredicate(filterObject) {\n var datePredicate;\n var prevDate;\n var nextDate;\n var prevObj = baseExtend({}, getActualProperties(filterObject));\n var nextObj = baseExtend({}, getActualProperties(filterObject));\n var value = new Date(filterObject.value);\n if (filterObject.operator === 'equal' || filterObject.operator === 'notequal') {\n prevDate = new Date(value.setHours(0) - 1);\n nextDate = new Date(value.setHours(24));\n prevObj.value = prevDate;\n nextObj.value = nextDate;\n if (filterObject.operator === 'equal') {\n prevObj.operator = 'greaterthan';\n nextObj.operator = 'lessthan';\n }\n else if (filterObject.operator === 'notequal') {\n prevObj.operator = 'lessthanorequal';\n nextObj.operator = 'greaterthanorequal';\n }\n var predicateSt = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n var predicateEnd = new Predicate(nextObj.field, nextObj.operator, nextObj.value, false);\n datePredicate = filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);\n }\n else {\n if (typeof (prevObj.value) === 'string') {\n prevObj.value = new Date(prevObj.value);\n }\n var predicates = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n datePredicate = predicates;\n }\n if (filterObject.setProperties) {\n filterObject.setProperties({ ejpredicate: datePredicate }, true);\n }\n else {\n filterObject.ejpredicate = datePredicate;\n }\n return datePredicate;\n}\n/**\n * @hidden\n */\nexport function renderMovable(ele, frzCols) {\n var mEle = ele.cloneNode(true);\n for (var i = 0; i < frzCols; i++) {\n mEle.removeChild(mEle.children[0]);\n }\n for (var i = frzCols, len = ele.childElementCount; i < len; i++) {\n ele.removeChild(ele.children[ele.childElementCount - 1]);\n }\n return mEle;\n}\n","/**\n * AriaService\n * @hidden\n */\nvar AriaService = /** @class */ (function () {\n function AriaService() {\n }\n AriaService.prototype.setOptions = function (target, options) {\n var props = Object.keys(options);\n props.forEach(function (name) { return setStateAndProperties(target, config[name], options[name]); });\n };\n AriaService.prototype.setExpand = function (target, expand) {\n setStateAndProperties(target, config.expand, expand);\n };\n AriaService.prototype.setSort = function (target, direction) {\n setStateAndProperties(target, config.sort, direction, typeof direction === 'boolean');\n };\n AriaService.prototype.setBusy = function (target, isBusy) {\n setStateAndProperties(target, config.busy, isBusy);\n setStateAndProperties(target, config.invalid, null, true);\n };\n AriaService.prototype.setGrabbed = function (target, isGrabbed, remove) {\n setStateAndProperties(target, config.grabbed, isGrabbed, remove);\n };\n AriaService.prototype.setDropTarget = function (target, isTarget) {\n setStateAndProperties(target, config.dropeffect, 'copy', !isTarget);\n };\n return AriaService;\n}());\nexport { AriaService };\n/**\n * @hidden\n */\nfunction setStateAndProperties(target, attribute, value, remove) {\n if (remove) {\n target.removeAttribute(attribute);\n return;\n }\n if (target) {\n target.setAttribute(attribute, value);\n }\n}\nvar config = {\n expand: 'aria-expanded',\n role: 'role',\n selected: 'aria-selected',\n multiselectable: 'aria-multiselectable',\n sort: 'aria-sort',\n busy: 'aria-busy',\n invalid: 'aria-invalid',\n grabbed: 'aria-grabbed',\n dropeffect: 'aria-dropeffect',\n haspopup: 'aria-haspopup',\n level: 'aria-level',\n colcount: 'aria-colcount'\n};\n","import { remove } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { uiUpdate, initialEnd, dataReady, modelChanged } from '../base/constant';\nimport { FooterRenderer } from '../renderer/footer-renderer';\nimport { SummaryCellRenderer } from '../renderer/summary-cell-renderer';\nimport { GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';\n/**\n * Summary Action controller.\n */\nvar Aggregate = /** @class */ (function () {\n function Aggregate(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.addEventListener();\n }\n Aggregate.prototype.getModuleName = function () {\n return 'aggregate';\n };\n Aggregate.prototype.initiateRender = function () {\n var _this = this;\n var cellFac = this.locator.getService('cellRendererFactory');\n var instance = new SummaryCellRenderer(this.parent, this.locator);\n [CellType.Summary, CellType.CaptionSummary, CellType.GroupSummary].forEach(function (type) {\n return cellFac.addCellRenderer(type, instance);\n });\n this.footerRenderer = new FooterRenderer(this.parent, this.locator);\n this.footerRenderer.renderPanel();\n this.footerRenderer.renderTable();\n this.locator.register('footerRenderer', this.footerRenderer);\n var fn = function () {\n _this.prepareSummaryInfo();\n _this.parent.off(dataReady, fn);\n };\n this.parent.on(dataReady, fn, this);\n this.parent.on(dataReady, this.footerRenderer.refresh, this.footerRenderer);\n };\n Aggregate.prototype.prepareSummaryInfo = function () {\n var _this = this;\n summaryIterator(this.parent.aggregates, function (column) {\n var dataColumn = _this.parent.getColumnByField(column.field) || {};\n var type = dataColumn.type;\n column.setPropertiesSilent({ format: _this.getFormatFromType(column.format, type) });\n column.setFormatter();\n column.setPropertiesSilent({ columnName: column.columnName || column.field });\n });\n };\n Aggregate.prototype.getFormatFromType = function (format, type) {\n if (isNullOrUndefined(type) || typeof format !== 'string') {\n return format;\n }\n var obj;\n switch (type) {\n case 'number':\n obj = { format: format };\n break;\n case 'date':\n obj = { type: type, skeleton: format };\n break;\n case 'datetime':\n obj = { type: 'dateTime', skeleton: format };\n break;\n }\n return obj;\n };\n Aggregate.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (isNullOrUndefined(this.footerRenderer)) {\n this.initiateRender();\n }\n this.prepareSummaryInfo();\n this.footerRenderer.refresh();\n var cModel = new CaptionSummaryModelGenerator(this.parent);\n var gModel = new GroupSummaryModelGenerator(this.parent);\n if (gModel.getData().length !== 0 || !cModel.isEmpty()) {\n this.parent.notify(modelChanged, {});\n }\n };\n Aggregate.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(initialEnd, this.initiateRender, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n };\n Aggregate.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.footerRenderer.removeEventListener();\n this.parent.off(initialEnd, this.initiateRender);\n this.parent.off(dataReady, this.footerRenderer.refresh);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n };\n Aggregate.prototype.destroy = function () {\n this.removeEventListener();\n remove(this.parent.element.querySelector('.e-gridfooter'));\n };\n return Aggregate;\n}());\nexport { Aggregate };\n/**\n * @private\n */\nexport function summaryIterator(aggregates, callback) {\n aggregates.forEach(function (row) {\n row.columns.forEach(function (column) {\n callback(column, row);\n });\n });\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { SvgRenderer, compile as templateComplier, remove, merge, createElement } from '@syncfusion/ej2-base';\n/**\n * Specifies Linear-Gauge Helper methods\n */\n/** @private */\nexport function stringToNumber(value, containerSize) {\n if (value !== null && value !== undefined) {\n return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);\n }\n return null;\n}\n/**\n * Function to measure the height and width of the text.\n * @param {string} text\n * @param {FontModel} font\n * @param {string} id\n * @returns no\n * @private\n */\nexport function measureText(text, font) {\n var htmlObject = document.getElementById('gauge-measuretext');\n var size;\n if (htmlObject === null) {\n htmlObject = createElement('text', { id: 'gauge-measuretext' });\n document.body.appendChild(htmlObject);\n }\n htmlObject.innerHTML = text;\n htmlObject.style.position = 'absolute';\n htmlObject.style.fontSize = font.size;\n htmlObject.style.fontWeight = font.fontWeight;\n htmlObject.style.fontStyle = font.fontStyle;\n htmlObject.style.fontFamily = font.fontFamily;\n htmlObject.style.visibility = 'hidden';\n htmlObject.style.top = '-100';\n htmlObject.style.left = '0';\n htmlObject.style.whiteSpace = 'nowrap';\n size = new Size(htmlObject.clientWidth, htmlObject.clientHeight);\n //remove(htmlObject);\n return size;\n}\n/** @private */\nexport function withInRange(value, start, end, max, min, type) {\n var withIn;\n if (type === 'pointer') {\n withIn = (((value <= max) && (value >= min)));\n }\n else {\n withIn = (start != null && (start <= max) && (start >= min)) && (end != null && (end <= max) && (end >= min));\n }\n return withIn;\n}\nexport function convertPixelToValue(parentElement, pointerElement, orientation, axis, type, location) {\n var elementRect = parentElement.getBoundingClientRect();\n var pointerRect = pointerElement.getBoundingClientRect();\n var height = (pointerElement.id.indexOf('MarkerPointer') > -1) ? (pointerRect.height / 2) :\n (!axis.isInversed) ? 0 : pointerRect.height;\n var width = (pointerElement.id.indexOf('MarkerPointer') > -1) ? (pointerRect.width / 2) :\n (!axis.isInversed) ? pointerRect.width : 0;\n var size = new Size(axis.lineBounds.width, axis.lineBounds.height);\n var y = (type === 'drag') ? (location.y - axis.lineBounds.y) :\n ((pointerRect.top + height) - elementRect.top - axis.lineBounds.y);\n var x = (type === 'drag') ? (location.x - axis.lineBounds.x) :\n ((pointerRect.left + width) - elementRect.left - axis.lineBounds.x);\n var newSize = (orientation === 'Vertical') ? size.height : size.width;\n var divideVal = (orientation === 'Vertical') ? y : x;\n var value = (orientation === 'Vertical') ? (axis.isInversed) ? (divideVal / newSize) :\n (1 - (divideVal / newSize)) : (axis.isInversed) ? (1 - (divideVal / newSize)) : (divideVal / newSize);\n value = value * (axis.visibleRange.delta) + axis.visibleRange.min;\n return value;\n}\nexport function getPathToRect(path, size, parentElement) {\n var tempDiv = document.getElementById('gauge_path');\n if (tempDiv === null) {\n tempDiv = createElement('text', { id: 'gauge_path' });\n tempDiv.style.position = 'absolute';\n tempDiv.style.top = '0px';\n tempDiv.style.left = '0px';\n parentElement.appendChild(tempDiv);\n }\n var render = new SvgRenderer('id');\n var svg = render.createSvg({ id: 'box_path', width: size.width, height: size.height });\n svg.appendChild(path);\n tempDiv.appendChild(svg);\n var svgRect = path.getBBox();\n remove(tempDiv);\n return svgRect;\n}\n/** @private */\nexport function getElement(id) {\n return document.getElementById(id);\n}\n/** @private */\nexport function removeElement(id) {\n var element = getElement(id);\n if (element) {\n remove(element);\n }\n}\n/** @private */\nexport function isPointerDrag(axes) {\n var pointerEnable = false;\n axes.map(function (axis, index) {\n axis.pointers.map(function (pointer, index) {\n if (pointer.enableDrag) {\n pointerEnable = true;\n }\n });\n });\n return pointerEnable;\n}\n/** @private */\nexport function valueToCoefficient(value, axis, orientation, range) {\n var result = (value - range.min) / range.delta;\n result = (orientation === 'Vertical') ? (!axis.isInversed) ? (1 - result) : result : (!axis.isInversed) ? result : (1 - result);\n return result;\n}\nexport function getFontStyle(font) {\n var style = '';\n style = 'font-size:' + font.size +\n '; font-style:' + font.fontStyle + '; font-weight:' + font.fontWeight +\n '; font-family:' + font.fontFamily + ';opacity:' + font.opacity +\n '; color:' + font.color + ';';\n return style;\n}\n/** @private */\nexport function getLabelFormat(format) {\n var customLabelFormat = format && format.match('{value}') !== null;\n var skeleton = customLabelFormat ? '' : format;\n return skeleton;\n}\n/** @private */\nexport function getTemplateFunction(template) {\n var templateFn = null;\n var e;\n try {\n if (document.querySelectorAll(template).length) {\n templateFn = templateComplier(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n templateFn = templateComplier(template);\n }\n return templateFn;\n}\n/** @private */\nexport function getElementOffset(childElement, parentElement) {\n var width;\n var height;\n parentElement.appendChild(childElement);\n width = childElement.offsetWidth;\n height = childElement.offsetHeight;\n parentElement.removeChild(childElement);\n return new Size(width, height);\n}\n/** @private */\nvar VisibleRange = /** @class */ (function () {\n function VisibleRange(min, max, interval, delta) {\n this.min = min;\n this.max = max;\n this.interval = interval;\n this.delta = delta;\n }\n return VisibleRange;\n}());\nexport { VisibleRange };\n/** @private */\nvar GaugeLocation = /** @class */ (function () {\n function GaugeLocation(x, y) {\n this.x = x;\n this.y = y;\n }\n return GaugeLocation;\n}());\nexport { GaugeLocation };\n/**\n * Internal class size for height and width\n */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n return Size;\n}());\nexport { Size };\n/** @private */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n return Rect;\n}());\nexport { Rect };\n/** @private */\nvar CustomizeOption = /** @class */ (function () {\n function CustomizeOption(id) {\n this.id = id;\n }\n return CustomizeOption;\n}());\nexport { CustomizeOption };\n/** @private */\nvar PathOption = /** @class */ (function (_super) {\n __extends(PathOption, _super);\n function PathOption(id, fill, width, color, opacity, dashArray, d, transform) {\n if (transform === void 0) { transform = ''; }\n var _this = _super.call(this, id) || this;\n _this.opacity = opacity;\n _this.fill = fill;\n _this.stroke = color;\n _this['stroke-width'] = width;\n _this['stroke-dasharray'] = dashArray;\n _this.d = d;\n _this.transform = transform;\n return _this;\n }\n return PathOption;\n}(CustomizeOption));\nexport { PathOption };\n/** @private */\nvar RectOption = /** @class */ (function () {\n function RectOption(id, fill, border, opacity, rect, transform, dashArray) {\n this.opacity = opacity;\n this.id = id;\n this.y = rect.y;\n this.x = rect.x;\n this.fill = fill;\n this.stroke = border.color;\n this['stroke-width'] = border.width;\n this.height = rect.height;\n this.width = rect.width;\n }\n return RectOption;\n}());\nexport { RectOption };\n/** @private */\nvar TextOption = /** @class */ (function (_super) {\n __extends(TextOption, _super);\n function TextOption(id, x, y, anchor, text, transform, baseLine) {\n if (transform === void 0) { transform = ''; }\n var _this = _super.call(this, id) || this;\n _this.transform = '';\n _this.baseLine = 'auto';\n _this.x = x;\n _this.y = y;\n _this.anchor = anchor;\n _this.text = text;\n _this.transform = transform;\n _this.baseLine = baseLine;\n return _this;\n }\n return TextOption;\n}(CustomizeOption));\nexport { TextOption };\n/** @private */\nvar VisibleLabels = /** @class */ (function () {\n function VisibleLabels(text, value, size) {\n this.text = text;\n this.value = value;\n this.size = size;\n }\n return VisibleLabels;\n}());\nexport { VisibleLabels };\n/** @private */\nvar Align = /** @class */ (function () {\n function Align(axisIndex, align) {\n this.align = align;\n this.axisIndex = axisIndex;\n }\n return Align;\n}());\nexport { Align };\n/** @private */\nexport function textElement(options, font, color, parent) {\n var renderOptions = {};\n var htmlObject;\n var renderer = new SvgRenderer('');\n var style = 'fill:' + color + '; font-size:' + font.size +\n '; font-style:' + font.fontStyle + ' ; font-weight:' + font.fontWeight + '; font-family:' +\n font.fontFamily + '; text-anchor:' + options.anchor + '; transform:' + options.transform +\n '; opacity:' + font.opacity + '; dominant-baseline:' + options.baseLine + ';';\n renderOptions = {\n 'id': options.id,\n 'x': options.x,\n 'y': options.y,\n 'style': style\n };\n htmlObject = renderer.createText(renderOptions, options.text);\n parent.appendChild(htmlObject);\n return htmlObject;\n}\nexport function calculateNiceInterval(min, max, size, orientation) {\n var delta = max - min;\n var currentInterval;\n var intervalDivs = [10, 5, 2, 1];\n var desiredIntervalsCount = getActualDesiredIntervalsCount(size, orientation);\n var niceInterval = delta / desiredIntervalsCount;\n var minInterval = Math.pow(10, Math.floor(Math.log(niceInterval) / Math.log(10)));\n for (var _i = 0, intervalDivs_1 = intervalDivs; _i < intervalDivs_1.length; _i++) {\n var interval = intervalDivs_1[_i];\n currentInterval = minInterval * interval;\n if (desiredIntervalsCount < (delta / currentInterval)) {\n break;\n }\n niceInterval = currentInterval;\n }\n return niceInterval;\n}\nexport function getActualDesiredIntervalsCount(size, orientation) {\n var maximumLabels = 5;\n var desiredIntervalsCount = (orientation === 'Horizontal' ? 0.533 : 1) * maximumLabels;\n desiredIntervalsCount = Math.max((size * (desiredIntervalsCount / 100)), 1);\n return desiredIntervalsCount;\n}\n/** @private */\nexport function getPointer(target, gauge) {\n var split = [];\n var axisIndex;\n var radix = 10;\n var pointIndex;\n var axis;\n var pointer;\n split = target.id.split('_');\n axisIndex = parseInt(split[2], radix);\n pointIndex = parseInt(split[4], radix);\n axis = gauge.axes[axisIndex];\n pointer = gauge.axes[axisIndex].pointers[pointIndex];\n return { axis: axis, axisIndex: axisIndex, pointer: pointer, pointerIndex: pointIndex };\n}\n/** @private */\nexport function getRangeColor(value, ranges) {\n var rangeColor = null;\n ranges.forEach(function (range, index) {\n if (value >= range.start && range.end >= value) {\n rangeColor = range.interior;\n }\n });\n return rangeColor;\n}\n/** @private */\nexport function getRangePalette() {\n var palette = ['#ff5985', '#ffb133', '#fcde0b', '#27d5ff', '#50c917'];\n return palette;\n}\n/** @private */\nexport function calculateShapes(location, shape, size, url, options, orientation, axis, pointer) {\n var path;\n var width = size.width;\n var height = size.height;\n var locX = location.x;\n var locY = location.y;\n var radius;\n switch (shape) {\n case 'Circle':\n radius = ((width + height) / 4);\n locX = (orientation === 'Vertical') ? (!axis.opposedPosition) ? (pointer.placement !== 'Far') ? locX - radius : locX + radius :\n pointer.placement === 'Near' ? locX - radius : locX + radius : locX;\n locY = (orientation === 'Vertical') ? locY : (!axis.opposedPosition) ? (pointer.placement === 'Far') ?\n locY + radius : locY - radius : (pointer.placement === 'Near') ? locY - radius : locY + radius;\n merge(options, { 'r': radius, 'cx': locX, 'cy': locY });\n break;\n case 'Diamond':\n case 'Rectangle':\n locX = (orientation === 'Horizontal') ? ((locX - (width / 2))) : ((!axis.opposedPosition && pointer.placement !== 'Far') ||\n (axis.opposedPosition && pointer.placement === 'Near')) ? locX - width : locX;\n locY = (orientation === 'Vertical') ? locY : (!axis.opposedPosition) ?\n (pointer.placement === 'Far') ? locY + (height / 2) : locY - (height / 2) :\n (pointer.placement === 'Near') ? locY - (height / 2) : locY + (height / 2);\n if (shape === 'Diamond') {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + width) + ' ' + locY + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + locY + ' z';\n }\n else {\n path = 'M' + ' ' + locX + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + width) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + width) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY - (height / 2)) + ' z';\n }\n merge(options, { 'd': path });\n break;\n case 'Triangle':\n if (orientation === 'Vertical') {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + (locX - width) + ' ' + (locY - (height / 2)) +\n 'L' + (locX - width) + ' ' + (locY + (height / 2)) + ' Z';\n }\n else {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + (locX + (width / 2)) + ' ' + (locY - height) +\n 'L' + (locX - (width / 2)) + ' ' + (locY - height) + ' Z';\n }\n merge(options, { 'd': path });\n break;\n case 'InvertedTriangle':\n if (orientation === 'Vertical') {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + (locX + width) + ' ' + (locY - (height / 2)) +\n 'L' + (locX + width) + ' ' + (locY + (height / 2)) + ' Z';\n }\n else {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' +\n 'L' + (locX + (width / 2)) + ' ' + (locY + height) +\n 'L' + (locX - (width / 2)) + ' ' + (locY + height) + ' Z';\n }\n merge(options, { 'd': path });\n break;\n case 'Arrow':\n if (orientation === 'Vertical') {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + (locX - (width / 2)) + ' ' + ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX - width) + ' '\n + ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX - width) + ' ' + ((locY + (height / 2)) -\n (height / 4)) + ' ' + 'L' + (locX - (width / 2)) + ' ' + ((locY + (height / 2)) - (height / 4)) + ' ' +\n 'L' + (locX - (width / 2)) + ' ' + (locY + height / 2) + 'z';\n }\n else {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ((locX + (width / 2)) - (width / 4)) + ' ' + (locY - (height / 2)) + ' ' + 'L' + ((locX + (width / 2)) -\n (width / 4)) + ' ' + (locY - height) + ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY - height) +\n ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY - (height / 2)) + ' ' + 'L' + (locX - (width / 2))\n + ' ' + (locY - (height / 2)) + 'z';\n }\n merge(options, { 'd': path });\n break;\n case 'InvertedArrow':\n if (orientation === 'Vertical') {\n path = 'M' + ' ' + locX + ' ' + locY + 'L' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + (locX + (width / 2)) + ' ' + ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX + width) + ' '\n + ((locY - (height / 2)) + (height / 4)) + ' ' + 'L' + (locX + width) + ' ' + ((locY + (height / 2)) - (height / 4))\n + ' ' + 'L' + (locX + (width / 2)) + ' ' + ((locY + (height / 2)) - (height / 4)) + ' ' +\n 'L' + (locX + (width / 2)) + ' ' + (locY + height / 2) + 'z';\n }\n else {\n path = 'M' + ' ' + locX + ' ' + locY + ' ' + 'L' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ((locX + (width / 2)) - (width / 4)) + ' ' + (locY + (height / 2)) + ' ' + 'L' + ((locX + (width / 2)) -\n (width / 4)) + ' ' + (locY + height) + ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY + height)\n + ' ' + 'L' + ((locX - (width / 2)) + (width / 4)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + (locX - (width / 2)) + ' ' + (locY + (height / 2)) + 'z';\n }\n merge(options, { 'd': path });\n break;\n case 'Image':\n merge(options, { 'href': url, 'height': height, 'width': width, x: locX - (width / 2), y: locY - (height / 2) });\n break;\n }\n return options;\n}\n/** @private */\nexport function getBox(location, boxName, orientation, size, type, containerWidth, axis, cornerRadius) {\n var path = ' ';\n var radius = cornerRadius;\n var x1;\n var y1;\n var rectWidth;\n var rectHeight;\n var bottomRadius;\n var topRadius;\n switch (boxName) {\n case 'RoundedRectangle':\n x1 = location.x;\n y1 = location.y;\n rectWidth = location.width;\n rectHeight = location.height;\n path = 'M' + ' ' + x1 + ' ' + (radius + y1) + ' Q ' + x1 + ' ' + y1 + ' ' + (x1 + radius) + ' ' + y1 + ' ';\n path += 'L' + ' ' + (x1 + rectWidth - radius) + ' ' + y1 + ' Q ' + (x1 + rectWidth) + ' ' + y1 + ' '\n + (x1 + rectWidth) + ' ' + (y1 + radius) + ' ';\n path += 'L ' + (x1 + rectWidth) + ' ' + (y1 + rectHeight - radius) + ' Q ' + (x1 + rectWidth) + ' ' + (y1 + rectHeight)\n + ' ' + (x1 + rectWidth - radius) + ' ' + (y1 + rectHeight) + ' ';\n path += ' L ' + (x1 + radius) + ' ' + (y1 + rectHeight) + ' Q ' + x1 + ' ' + (y1 + rectHeight)\n + ' ' + x1 + ' ' + (y1 + rectHeight - radius) + ' ';\n path += 'L' + ' ' + x1 + ' ' + (radius + y1) + ' ' + 'z';\n break;\n case 'Thermometer':\n var width = (orientation === 'Vertical') ? location.width : location.height;\n bottomRadius = width + ((width / 2) / Math.PI);\n topRadius = width / 2;\n if (orientation === 'Vertical') {\n var addValue = ((containerWidth + ((containerWidth / 2) / Math.PI)) - bottomRadius);\n var y1_1 = (type === 'bar') ? location.y + addValue : location.y;\n var locY = (type === 'bar') ? location.y + (topRadius - (topRadius / Math.PI)) : location.y;\n var locHeight = location.height;\n path = 'M' + location.x + ' ' + (y1_1 + locHeight) +\n ' A ' + bottomRadius + ' ' + bottomRadius + ', 0, 1, 0, ' + (location.x + location.width) + ' ' + (y1_1 + locHeight) +\n ' L ' + (location.x + location.width) + ' ' + locY +\n ' A ' + topRadius + ' ' + topRadius + ', 0, 1, 0, ' + location.x + ' ' + locY + ' z ';\n }\n else {\n var x1_1 = (type === 'bar' && !axis.isInversed) ?\n location.x - ((containerWidth + ((containerWidth / 2) / Math.PI)) - bottomRadius) : location.x;\n var locWidth = (type === 'bar') ? (location.width - (topRadius - ((topRadius / Math.PI)))) : location.width;\n path = 'M' + x1_1 + ' ' + (location.y) +\n ' A ' + bottomRadius + ' ' + bottomRadius + ', 0, 1, 0, ' + x1_1 + ' ' + (location.y + location.height) +\n ' L ' + ((type === 'bar' ? location.x : x1_1) + locWidth) + ' ' + (location.y + location.height) +\n ' A ' + topRadius + ' ' + topRadius + ', 0, 1, 0, ' +\n ((type === 'bar' ? location.x : x1_1) + locWidth) + ' ' + (location.y) + ' z ';\n }\n break;\n }\n return path;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Helper functions for maps control\n */\nimport { SvgRenderer, createElement, isNullOrUndefined, remove, compile as templateComplier, merge } from '@syncfusion/ej2-base';\nimport { Animation } from '@syncfusion/ej2-base';\nimport { animationComplete } from '../index';\n/**\n * Maps internal use of `Size` type\n * @private\n */\nvar Size = /** @class */ (function () {\n function Size(width, height) {\n this.width = width;\n this.height = height;\n }\n return Size;\n}());\nexport { Size };\n/**\n * To find number from string\n * @private\n */\nexport function stringToNumber(value, containerSize) {\n if (value !== null && value !== undefined) {\n return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);\n }\n return null;\n}\n/**\n * Method to calculate the width and height of the maps\n */\nexport function calculateSize(maps) {\n var containerWidth = maps.element.clientWidth;\n var containerHeight = maps.element.clientHeight;\n maps.availableSize = new Size(stringToNumber(maps.width, containerWidth) || containerWidth || 600, stringToNumber(maps.height, containerHeight) || containerHeight || (maps.isDevice ?\n Math.min(window.innerWidth, window.innerHeight) : 450));\n}\n/**\n * Method to create svg for maps.\n */\nexport function createSvg(maps) {\n maps.renderer = new SvgRenderer(maps.element.id);\n calculateSize(maps);\n maps.svgObject = maps.renderer.createSvg({\n id: maps.element.id + '_svg',\n width: maps.availableSize.width,\n height: maps.availableSize.height\n });\n}\n/**\n * Method to convert degrees to radians\n */\nexport function degreesToRadians(deg) {\n return deg * (Math.PI / 180);\n}\n/**\n * Convert radians to degrees method\n */\nexport function radiansToDegrees(radian) {\n return radian * (180 / Math.PI);\n}\n/**\n * Method for converting from latitude and longitude values to points\n */\nexport function convertGeoToPoint(latitude, longitude, factor, layer, mapModel) {\n var mapSize = new Size(mapModel.mapAreaRect.width, mapModel.mapAreaRect.height);\n var x;\n var y;\n var value;\n var lat;\n var lng;\n var temp;\n var longitudeMinMax = mapModel.baseMapBounds.longitude;\n var latitudeMinMax = mapModel.baseMapBounds.latitude;\n var latRadian = degreesToRadians(latitude);\n var lngRadian = degreesToRadians(longitude);\n var type = mapModel.projectionType;\n var size = (mapModel.isTileMap) ? Math.pow(2, 1) * 256 : (isNullOrUndefined(factor)) ? Math.min(mapSize.width, mapSize.height) :\n (Math.min(mapSize.width, mapSize.height) * factor);\n if (layer.geometryType === 'Normal') {\n x = isNullOrUndefined(factor) ? longitude : Math.abs((longitude - longitudeMinMax.min) * factor);\n y = isNullOrUndefined(factor) ? latitude : Math.abs((latitudeMinMax.max - latitude) * factor);\n }\n else if (layer.geometryType === 'Geographic') {\n switch (type) {\n case 'Mercator':\n var pixelOrigin = new Point(size / 2, size / 2);\n x = pixelOrigin.x + longitude * (size / 360);\n var sinY = calculateBound(Math.sin(degreesToRadians(latitude)), -0.9999, 0.9999);\n y = pixelOrigin.y + 0.5 * (Math.log((1 + sinY) / (1 - sinY))) * (-(size / (2 * Math.PI)));\n break;\n case 'Winkel3':\n value = aitoff(lngRadian, latRadian);\n lng = (value.x + lngRadian / (Math.PI / 2)) / 2;\n lat = (value.y + latRadian) / 2;\n break;\n case 'Miller':\n lng = lngRadian;\n lat = (1.25 * Math.log(Math.tan((Math.PI / 4) + (.4 * latRadian))));\n break;\n case 'Eckert3':\n temp = Math.sqrt(Math.PI * (4 + Math.PI));\n lng = 2 / temp * lngRadian * (1 + Math.sqrt(1 - 4 * latRadian * latRadian / (Math.PI * Math.PI)));\n lat = 4 / temp * latRadian;\n break;\n case 'AitOff':\n value = aitoff(lngRadian, latRadian);\n lng = value.x;\n lat = value.y;\n break;\n case 'Eckert5':\n lng = lngRadian * (1 + Math.cos(latRadian)) / Math.sqrt(2 + Math.PI);\n lat = 2 * latRadian / Math.sqrt(2 + Math.PI);\n break;\n case 'Equirectangular':\n lng = lngRadian;\n lat = latRadian;\n break;\n case 'Eckert6':\n var epsilon = 1e-6;\n temp = (1 + (Math.PI / 2)) * Math.sin(latRadian);\n var delta = Infinity;\n for (var i = 0; i < 10 && Math.abs(delta) > epsilon; i++) {\n delta = (latRadian + (Math.sin(latRadian)) - temp) / (1 + Math.cos(latRadian));\n latRadian = latRadian - delta;\n }\n temp = Math.sqrt(2 + Math.PI);\n lng = lngRadian * (1 + Math.cos(latRadian)) / temp;\n lat = 2 * latRadian / temp;\n break;\n }\n x = (type === 'Mercator') ? x : roundTo(xToCoordinate(mapModel, radiansToDegrees(lng)), 3);\n y = (type === 'Mercator') ? y : (-(roundTo(yToCoordinate(mapModel, radiansToDegrees(lat)), 3)));\n }\n return new Point(x, y);\n}\n/**\n * Converting tile latitude and longitude to point\n */\nexport function convertTileLatLongToPoint(center, zoomLevel, tileTranslatePoint, isMapCoordinates) {\n var size = Math.pow(2, zoomLevel) * 256;\n var x = (center.x + 180) / 360;\n var sinLatitude = Math.sin(center.y * Math.PI / 180);\n var y = 0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI);\n var pixelX = center.x;\n var pixelY = center.y;\n if (isMapCoordinates) {\n pixelX = (x * size + 0.5) + tileTranslatePoint.x;\n pixelY = (y * size + 0.5) + tileTranslatePoint.y;\n }\n return { x: pixelX, y: pixelY };\n}\n/**\n * Method for calculate x point\n */\nexport function xToCoordinate(mapObject, val) {\n var longitudeMinMax = mapObject.baseMapBounds.longitude;\n var totalSize = isNullOrUndefined(mapObject.baseSize) ? mapObject.mapAreaRect.width : mapObject.mapAreaRect.width +\n (Math.abs(mapObject.baseSize.width - mapObject.mapAreaRect.width) / 2);\n return Math.round(totalSize * (val - longitudeMinMax.min) / (longitudeMinMax.max - longitudeMinMax.min) * 100) / 100;\n}\n/**\n * Method for calculate y point\n */\nexport function yToCoordinate(mapObject, val) {\n var latitudeMinMax = mapObject.baseMapBounds.latitude;\n return Math.round(mapObject.mapAreaRect.height * (val - latitudeMinMax.min) / (latitudeMinMax.max - latitudeMinMax.min) * 100) / 100;\n}\n/**\n * Method for calculate aitoff projection\n */\nexport function aitoff(x, y) {\n var cosy = Math.cos(y);\n var sincia = sinci(acos(cosy * Math.cos(x /= 2)));\n return new Point(2 * cosy * Math.sin(x) * sincia, Math.sin(y) * sincia);\n}\n/**\n * Method to round the number\n */\nexport function roundTo(a, b) {\n var c = Math.pow(10, b);\n return (Math.round(a * c) / c);\n}\nexport function sinci(x) {\n return x / Math.sin(x);\n}\nexport function acos(a) {\n return Math.acos(a);\n}\n/**\n * Method to calculate bound\n */\nexport function calculateBound(value, min, max) {\n if (!isNullOrUndefined(min)) {\n value = Math.max(value, min);\n }\n if (!(isNullOrUndefined(max))) {\n value = Math.min(value, max);\n }\n return value;\n}\n/**\n * Map internal class for point\n */\nvar Point = /** @class */ (function () {\n function Point(x, y) {\n this.x = x;\n this.y = y;\n }\n return Point;\n}());\nexport { Point };\n/**\n * Map internal class for min and max\n *\n */\nvar MinMax = /** @class */ (function () {\n function MinMax(min, max) {\n this.min = min;\n this.max = max;\n }\n return MinMax;\n}());\nexport { MinMax };\n/**\n * Map internal class locations\n */\nvar GeoLocation = /** @class */ (function () {\n function GeoLocation(latitude, longitude) {\n this.latitude = new MinMax(latitude.min, latitude.max);\n this.longitude = new MinMax(longitude.min, longitude.max);\n }\n return GeoLocation;\n}());\nexport { GeoLocation };\n/**\n * Function to measure the height and width of the text.\n * @param {string} text\n * @param {FontModel} font\n * @param {string} id\n * @returns no\n * @private\n */\nexport function measureText(text, font) {\n var htmlObject = document.getElementById('mapsmeasuretext');\n if (htmlObject === null) {\n htmlObject = createElement('text', { id: 'mapsmeasuretext' });\n document.body.appendChild(htmlObject);\n }\n htmlObject.innerHTML = text;\n htmlObject.style.position = 'absolute';\n htmlObject.style.fontSize = font.size;\n htmlObject.style.fontWeight = font.fontWeight;\n htmlObject.style.fontStyle = font.fontStyle;\n htmlObject.style.fontFamily = font.fontFamily;\n htmlObject.style.visibility = 'hidden';\n htmlObject.style.top = '-100';\n htmlObject.style.left = '0';\n htmlObject.style.whiteSpace = 'nowrap';\n // For bootstrap line height issue\n htmlObject.style.lineHeight = 'normal';\n return new Size(htmlObject.clientWidth, htmlObject.clientHeight);\n}\n/**\n * Internal use of text options\n * @private\n */\nvar TextOption = /** @class */ (function () {\n function TextOption(id, x, y, anchor, text, transform, baseLine) {\n if (transform === void 0) { transform = ''; }\n this.transform = '';\n this.baseLine = 'auto';\n this.id = id;\n this.x = x;\n this.y = y;\n this.anchor = anchor;\n this.text = text;\n this.transform = transform;\n this.baseLine = baseLine;\n }\n return TextOption;\n}());\nexport { TextOption };\n/**\n * Internal use of path options\n * @private\n */\nvar PathOption = /** @class */ (function () {\n function PathOption(id, fill, width, color, opacity, dashArray, d) {\n this.id = id;\n this.opacity = opacity;\n this.fill = fill;\n this.stroke = color;\n this['stroke-width'] = width;\n this['stroke-dasharray'] = dashArray;\n this.d = d;\n }\n return PathOption;\n}());\nexport { PathOption };\n/**\n * Internal use of rectangle options\n * @private\n */\nvar RectOption = /** @class */ (function (_super) {\n __extends(RectOption, _super);\n function RectOption(id, fill, border, opacity, rect, rx, ry, transform, dashArray) {\n var _this = _super.call(this, id, fill, border.width, border.color, opacity, dashArray) || this;\n _this.y = rect.y;\n _this.x = rect.x;\n _this.height = rect.height;\n _this.width = rect.width;\n _this.rx = rx ? rx : 0;\n _this.ry = ry ? ry : 0;\n _this.transform = transform ? transform : '';\n _this['stroke-dasharray'] = dashArray;\n return _this;\n }\n return RectOption;\n}(PathOption));\nexport { RectOption };\n/**\n * Internal use of circle options\n * @private\n */\nvar CircleOption = /** @class */ (function (_super) {\n __extends(CircleOption, _super);\n function CircleOption(id, fill, border, opacity, cx, cy, r, dashArray) {\n var _this = _super.call(this, id, fill, border.width, border.color, opacity) || this;\n _this.cy = cy;\n _this.cx = cx;\n _this.r = r;\n _this['stroke-dasharray'] = dashArray;\n return _this;\n }\n return CircleOption;\n}(PathOption));\nexport { CircleOption };\n/**\n * Internal use of polygon options\n * @private\n */\nvar PolygonOption = /** @class */ (function (_super) {\n __extends(PolygonOption, _super);\n function PolygonOption(id, points, fill, width, color, opacity, dashArray) {\n if (opacity === void 0) { opacity = 1; }\n if (dashArray === void 0) { dashArray = ''; }\n var _this = _super.call(this, id, fill, width, color, opacity, dashArray) || this;\n _this.points = points;\n return _this;\n }\n return PolygonOption;\n}(PathOption));\nexport { PolygonOption };\n/**\n * Internal use of polyline options\n * @private\n */\nvar PolylineOption = /** @class */ (function (_super) {\n __extends(PolylineOption, _super);\n function PolylineOption(id, points, fill, width, color, opacity, dashArray) {\n if (opacity === void 0) { opacity = 1; }\n if (dashArray === void 0) { dashArray = ''; }\n return _super.call(this, id, points, fill, width, color, opacity, dashArray) || this;\n }\n return PolylineOption;\n}(PolygonOption));\nexport { PolylineOption };\n/**\n * Internal use of line options\n * @private\n */\nvar LineOption = /** @class */ (function (_super) {\n __extends(LineOption, _super);\n function LineOption(id, line, fill, width, color, opacity, dashArray) {\n if (opacity === void 0) { opacity = 1; }\n if (dashArray === void 0) { dashArray = ''; }\n var _this = _super.call(this, id, fill, width, color, opacity, dashArray) || this;\n _this.x1 = line.x1;\n _this.y1 = line.y1;\n _this.x2 = line.x2;\n _this.y2 = line.y2;\n return _this;\n }\n return LineOption;\n}(PathOption));\nexport { LineOption };\n/**\n * Internal use of line\n * @property\n */\nvar Line = /** @class */ (function () {\n function Line(x1, y1, x2, y2) {\n this.x1 = x1;\n this.y1 = y1;\n this.x2 = x2;\n this.y2 = y2;\n }\n return Line;\n}());\nexport { Line };\n/**\n * Internal use of map location type\n * @private\n */\nvar MapLocation = /** @class */ (function () {\n function MapLocation(x, y) {\n this.x = x;\n this.y = y;\n }\n return MapLocation;\n}());\nexport { MapLocation };\n/**\n * Internal use of type rect\n * @private\n */\nvar Rect = /** @class */ (function () {\n function Rect(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n return Rect;\n}());\nexport { Rect };\n/**\n * Internal use for pattern creation.\n * @property\n */\nvar PatternOptions = /** @class */ (function () {\n function PatternOptions(id, x, y, width, height, patternUnits, patternContentUnits, patternTransform, href) {\n if (patternUnits === void 0) { patternUnits = 'userSpaceOnUse'; }\n if (patternContentUnits === void 0) { patternContentUnits = 'userSpaceOnUse'; }\n if (patternTransform === void 0) { patternTransform = ''; }\n if (href === void 0) { href = ''; }\n this.id = id;\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n this.patternUnits = patternUnits;\n this.patternContentUnits = patternContentUnits;\n this.patternTransform = patternTransform;\n this.href = href;\n }\n return PatternOptions;\n}());\nexport { PatternOptions };\n/**\n * Internal rendering of text\n * @private\n */\nexport function renderTextElement(options, font, color, parent, isMinus) {\n if (isMinus === void 0) { isMinus = false; }\n var renderOptions = {\n 'id': options.id,\n 'x': options.x,\n 'y': options.y,\n 'fill': color,\n 'font-size': font.size,\n 'font-style': font.fontStyle,\n 'font-family': font.fontFamily,\n 'font-weight': font.fontWeight,\n 'text-anchor': options.anchor,\n 'transform': options.transform,\n 'opacity': font.opacity,\n 'dominant-baseline': options.baseLine\n };\n var text = typeof options.text === 'string' ? options.text : isMinus ? options.text[options.text.length - 1] : options.text[0];\n var tspanElement;\n var renderer = new SvgRenderer('');\n var height;\n var htmlObject = renderer.createText(renderOptions, text);\n htmlObject.style['user-select'] = 'none';\n htmlObject.style['-moz-user-select'] = 'none';\n htmlObject.style['-webkit-touch-callout'] = 'none';\n htmlObject.style['-webkit-user-select'] = 'none';\n htmlObject.style['-khtml-user-select'] = 'none';\n htmlObject.style['-ms-user-select'] = 'none';\n htmlObject.style['-o-user-select'] = 'none';\n if (typeof options.text !== 'string' && options.text.length > 1) {\n for (var i = 1, len = options.text.length; i < len; i++) {\n height = (measureText(options.text[i], font).height);\n tspanElement = renderer.createTSpan({\n 'x': options.x, 'id': options.id,\n 'y': (options.y) + ((isMinus) ? -(i * height) : (i * height))\n }, isMinus ? options.text[options.text.length - (i + 1)] : options.text[i]);\n htmlObject.appendChild(tspanElement);\n }\n }\n parent.appendChild(htmlObject);\n return htmlObject;\n}\n/**\n * @private\n */\nexport function convertElement(element, markerId, data, index, mapObj) {\n var childElement = createElement('div', {\n id: markerId,\n styles: 'position: absolute;pointer-events: auto;'\n });\n while (element.length > 0) {\n childElement.appendChild(element[0]);\n }\n var templateHtml = childElement.innerHTML;\n var properties = Object.keys(data);\n for (var i = 0; i < properties.length; i++) {\n if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {\n templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);\n }\n }\n childElement.innerHTML = templateHtml;\n return childElement;\n}\nexport function convertElementFromLabel(element, labelId, data, index, mapObj) {\n var labelEle = isNullOrUndefined(element.childElementCount) ? element[0] : element;\n var templateHtml = labelEle.outerHTML;\n var properties = Object.keys(data);\n for (var i = 0; i < properties.length; i++) {\n templateHtml = templateHtml.replace(new RegExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);\n }\n return createElement('div', {\n id: labelId,\n innerHTML: templateHtml,\n styles: 'position: absolute'\n });\n}\n/**\n * Internal use of append shape element\n * @private\n */\nexport function appendShape(shape, element) {\n if (element) {\n element.appendChild(shape);\n }\n return shape;\n}\n/**\n * Internal rendering of Circle\n * @private\n */\nexport function drawCircle(maps, options, element) {\n return appendShape(maps.renderer.drawCircle(options), element);\n}\n/**\n * Internal rendering of Rectangle\n * @private\n */\nexport function drawRectangle(maps, options, element) {\n return appendShape(maps.renderer.drawRectangle(options), element);\n}\n/**\n * Internal rendering of Path\n * @private\n */\nexport function drawPath(maps, options, element) {\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of Polygon\n * @private\n */\nexport function drawPolygon(maps, options, element) {\n return appendShape(maps.renderer.drawPolygon(options), element);\n}\n/**\n * Internal rendering of Polyline\n * @private\n */\nexport function drawPolyline(maps, options, element) {\n return appendShape(maps.renderer.drawPolyline(options), element);\n}\n/**\n * Internal rendering of Line\n * @private\n */\nexport function drawLine(maps, options, element) {\n return appendShape(maps.renderer.drawLine(options), element);\n}\n/**\n * @private\n * Calculate marker shapes\n */\nexport function calculateShapes(maps, shape, options, size, location, markerEle) {\n var tempGroup;\n switch (shape) {\n case 'Balloon':\n tempGroup = drawBalloon(maps, options, size, location, markerEle);\n break;\n case 'Cross':\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height\n / 2) + ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' ' + location.y;\n break;\n case 'Diamond':\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' '\n + location.y + ' L ' + location.x + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2)\n + ' ' + location.y + ' Z';\n break;\n case 'Star':\n options.d = 'M ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + (location.x - size.width / 2)\n + ' ' + (location.y + size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y + size.height / 6)\n + ' L ' + (location.x - size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' +\n (location.y + size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' Z';\n break;\n case 'Triangle':\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' +\n (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2) + ' ' + (location.y + size.height / 2) + ' Z';\n break;\n case 'HorizontalLine':\n options.d = ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' '\n + location.y;\n break;\n case 'VerticalLine':\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' +\n (location.y + size.height / 2);\n break;\n }\n return shape === 'Balloon' ? tempGroup : maps.renderer.drawPath(options);\n}\n/**\n * Internal rendering of Diamond\n * @private\n */\nexport function drawDiamond(maps, options, size, location, element) {\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' + location.y +\n ' L ' + location.x + ' ' + (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2) + ' ' + location.y + ' Z';\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of Triangle\n * @private\n */\nexport function drawTriangle(maps, options, size, location, element) {\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + (location.x + size.width / 2) + ' ' +\n (location.y + size.height / 2) + ' L ' + (location.x - size.width / 2) + ' ' + (location.y + size.height / 2) + ' Z';\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of Cross\n * @private\n */\nexport function drawCross(maps, options, size, location, element) {\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height / 2) +\n ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' ' + location.y;\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of HorizontalLine\n * @private\n */\nexport function drawHorizontalLine(maps, options, size, location, element) {\n options.d = ' M ' + (location.x - size.width / 2) + ' ' + location.y + ' L ' + (location.x + size.width / 2) + ' ' + location.y;\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of VerticalLine\n * @private\n */\nexport function drawVerticalLine(maps, options, size, location, element) {\n options.d = 'M ' + location.x + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height / 2);\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of Star\n * @private\n */\nexport function drawStar(maps, options, size, location, element) {\n options.d = 'M ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + (location.x - size.width / 2)\n + ' ' + (location.y + size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y + size.height / 6) + ' L '\n + (location.x - size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' + (location.y + size.height / 2)\n + ' L ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' Z';\n return appendShape(maps.renderer.drawPath(options), element);\n}\n/**\n * Internal rendering of Balloon\n * @private\n */\nexport function drawBalloon(maps, options, size, location, element) {\n var width = size.width;\n var height = size.height;\n var padding = 5;\n location.x -= width / 2;\n location.y -= height;\n options.d = 'M15,0C8.8,0,3.8,5,3.8,11.2C3.8,17.5,9.4,24.4,15,30c5.6-5.6,11.2-12.5,11.2-18.8C26.2,5,21.2,0,15,0z M15,16' +\n 'c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S17.8,16,15,16z';\n var balloon = maps.renderer.drawPath(options);\n var x = size.width / 22.5;\n var y = size.height / 30;\n balloon.setAttribute('transform', 'translate(' + location.x + ', ' + location.y + ') scale(' + x + ', ' + y + ')');\n var g = maps.renderer.createGroup({ id: options.id });\n appendShape(balloon, g);\n return appendShape(g, element);\n}\n/**\n * Internal rendering of Pattern\n * @private\n */\nexport function drawPattern(maps, options, elements, element) {\n var pattern = maps.renderer.createPattern(options, 'pattern');\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var ele = elements_1[_i];\n appendShape(ele, pattern);\n }\n return appendShape(pattern, element);\n}\n/**\n * Method to get specific field and vaues from data.\n * @private\n */\n// tslint:disable:no-any\nexport function getFieldData(dataSource, fields) {\n var newData = [];\n var data;\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var temp = dataSource_1[_i];\n data = {};\n for (var _a = 0, fields_1 = fields; _a < fields_1.length; _a++) {\n var field = fields_1[_a];\n if (temp[field]) {\n data[field] = temp[field];\n }\n }\n newData.push(data);\n }\n return newData;\n}\n/**\n * To find the index of dataSource from shape properties\n */\n// tslint:disable:no-string-literal\nexport function checkShapeDataFields(dataSource, properties, dataPath, propertyPath) {\n if (!(isNullOrUndefined(properties))) {\n for (var i = 0; i < dataSource.length; i++) {\n if (dataSource[i][dataPath] === properties[propertyPath]) {\n return i;\n }\n }\n }\n return null;\n}\nexport function filter(points, start, end) {\n var pointObject = [];\n for (var i = 0; i < points.length; i++) {\n var point = points[i];\n if (start <= point.y && end >= point.y) {\n pointObject.push(point);\n }\n }\n return pointObject;\n}\n/**\n * To find the midpoint of the polygon from points\n */\nexport function findMidPointOfPolygon(points) {\n if (!points.length) {\n return null;\n }\n var min = 0;\n var max = points.length;\n var startX;\n var startY;\n var startX1;\n var startY1;\n var sum = 0;\n var xSum = 0;\n var ySum = 0;\n for (var i = min; i <= max - 1; i++) {\n startX = points[i].x;\n startY = points[i].y;\n if (i === max - 1) {\n startX1 = points[0].x;\n startY1 = points[0].y;\n }\n else {\n startX1 = points[i + 1].x;\n startY1 = points[i + 1].y;\n }\n sum = sum + Math.abs(((startX * startY1)) - (startX1 * startY));\n xSum = xSum + Math.abs(((startX + startX1) * (((startX * startY1) - (startX1 * startY)))));\n ySum = ySum + Math.abs(((startY + startY1) * (((startX * startY1) - (startX1 * startY)))));\n }\n sum = 0.5 * sum;\n xSum = (1 / (4 * sum)) * xSum;\n ySum = (1 / (4 * sum)) * ySum;\n /* Code for finding nearest points in polygon related to midPoint*/\n var rightMinPoint = { x: 0, y: 0 };\n var rightMaxPoint = { x: 0, y: 0 };\n var leftMinPoint = { x: 0, y: 0 };\n var leftMaxPoint = { x: 0, y: 0 };\n var bottomMinPoint = { x: 0, y: 0 };\n var bottomMaxPoint = { x: 0, y: 0 };\n var topMinPoint = { x: 0, y: 0 };\n var topMaxPoint = { x: 0, y: 0 };\n var height = 0;\n for (var i = min; i <= max - 1; i++) {\n var point = points[i];\n if (point.y > ySum) {\n if (point.x < xSum && xSum - point.x < xSum - bottomMinPoint.x) {\n bottomMinPoint = { x: point.x, y: point.y };\n }\n else if (point.x > xSum && (bottomMaxPoint.x === 0 || point.x - xSum < bottomMaxPoint.x - xSum)) {\n bottomMaxPoint = { x: point.x, y: point.y };\n }\n }\n else {\n if (point.x < xSum && xSum - point.x < xSum - topMinPoint.x) {\n topMinPoint = { x: point.x, y: point.y };\n }\n else if (point.x > xSum && (topMaxPoint.x === 0 || point.x - xSum < topMaxPoint.x - xSum)) {\n topMaxPoint = { x: point.x, y: point.y };\n }\n }\n height = (bottomMaxPoint.y - topMaxPoint.y) + ((bottomMaxPoint.y - topMaxPoint.y) / 4);\n if (point.x > xSum) {\n if (point.y < ySum && ySum - point.y < ySum - rightMinPoint.y) {\n rightMinPoint = { x: point.x, y: point.y };\n }\n else if (point.y > ySum && (rightMaxPoint.y === 0 || point.y - ySum < rightMaxPoint.y - ySum)) {\n rightMaxPoint = { x: point.x, y: point.y };\n }\n }\n else {\n if (point.y < ySum && ySum - point.y < ySum - leftMinPoint.y) {\n leftMinPoint = { x: point.x, y: point.y };\n }\n else if (point.y > ySum && (leftMaxPoint.y === 0 || point.y - ySum < leftMaxPoint.y - ySum)) {\n leftMaxPoint = { x: point.x, y: point.y };\n }\n }\n }\n return {\n x: xSum, y: ySum, rightMin: rightMinPoint, rightMax: rightMaxPoint,\n leftMin: leftMinPoint, leftMax: leftMaxPoint, points: points, topMax: topMaxPoint, topMin: topMinPoint,\n bottomMax: bottomMaxPoint, bottomMin: bottomMinPoint, height: height\n };\n}\n/**\n * @private\n * Check custom path\n */\n/* tslint:disable:no-string-literal */\nexport function isCustomPath(layerData) {\n var customPath = false;\n if (Object.prototype.toString.call(layerData) === '[object Array]') {\n layerData.forEach(function (layer, index) {\n if (!isNullOrUndefined(layer['geometry']) && layer['geometry']['type'] === 'Path') {\n customPath = true;\n }\n });\n }\n return customPath;\n}\n/**\n * @private\n * Trim the title text\n */\nexport function textTrim(maxWidth, text, font) {\n var label = text;\n var size = measureText(text, font).width;\n if (size > maxWidth) {\n var textLength = text.length;\n for (var i = textLength - 1; i >= 0; --i) {\n label = text.substring(0, i) + '...';\n size = measureText(label, font).width;\n if (size <= maxWidth || label.length < 4) {\n if (label.length < 4) {\n label = ' ';\n }\n return label;\n }\n }\n }\n return label;\n}\n/**\n * Method to calculate x position of title\n */\nexport function findPosition(location, alignment, textSize, type) {\n var x;\n var y;\n switch (alignment) {\n case 'Near':\n x = location.x;\n break;\n case 'Center':\n x = (type === 'title') ? (location.width / 2 - textSize.width / 2) :\n ((location.x + (location.width / 2)) - textSize.width / 2);\n break;\n case 'Far':\n x = (type === 'title') ? (location.width - location.y - textSize.width) :\n ((location.x + location.width) - textSize.width);\n break;\n }\n y = (type === 'title') ? location.y + (textSize.height / 2) : ((location.y + location.height / 2) + textSize.height / 2);\n return new Point(x, y);\n}\n/**\n * To remove element by id\n */\nexport function removeElement(id) {\n var element = document.getElementById(id);\n return element ? remove(element) : null;\n}\n/**\n * @private\n */\nexport function getTranslate(mapObject, layer, animate) {\n var zoomFactor = animate ? 1 : mapObject.zoomSettings.zoomFactor;\n var min = mapObject.baseMapRectBounds['min'];\n var max = mapObject.baseMapRectBounds['max'];\n var size = mapObject.mapAreaRect;\n var availSize = mapObject.availableSize;\n var x;\n var y;\n var mapWidth = Math.abs(max['x'] - min['x']);\n var mapHeight = Math.abs(min['y'] - max['y']);\n var factor = animate ? 1 : mapObject.zoomSettings.zoomFactor;\n var scaleFactor;\n var scaleX;\n var scaleY;\n var center = mapObject.centerPosition;\n if (!isNullOrUndefined(center.longitude) && !isNullOrUndefined(center.latitude)) {\n var leftPosition = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;\n var topPosition = ((mapHeight + Math.abs(mapObject.mapAreaRect.height - mapHeight)) / 2) / factor;\n var point = convertGeoToPoint(center.latitude, center.longitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);\n x = -point.x + leftPosition;\n y = -point.y + topPosition;\n scaleFactor = zoomFactor;\n }\n else {\n scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));\n mapWidth *= scaleFactor;\n mapHeight *= scaleFactor;\n x = size.x + ((-(min['x'])) + ((size.width / 2) - (mapWidth / 2)));\n y = size.y + ((-(min['y'])) + ((size.height / 2) - (mapHeight / 2)));\n }\n return { scale: scaleFactor, location: new Point(x, y) };\n}\n/**\n * To get the html element by specified id\n */\nexport function getElementByID(id) {\n return document.getElementById(id);\n}\n/**\n * To apply internalization\n */\nexport function Internalize(maps, value) {\n maps.formatFunction =\n maps.intl.getNumberFormat({ format: maps.format, useGrouping: maps.useGroupingSeparator });\n return maps.formatFunction(value);\n}\n/**\n * Function to compile the template function for maps.\n * @returns Function\n * @private\n */\nexport function getTemplateFunction(template) {\n var templateFn = null;\n var e;\n try {\n if (document.querySelectorAll(template).length) {\n templateFn = templateComplier(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n templateFn = templateComplier(template);\n }\n return templateFn;\n}\n/**\n * Function to get element from id.\n * @returns Element\n * @private\n */\nexport function getElement(id) {\n return document.getElementById(id);\n}\n/**\n * Function to get shape data using target id\n */\nexport function getShapeData(targetId, map) {\n var layerIndex = parseInt(targetId.split('_LayerIndex_')[1].split('_')[0], 10);\n var shapeIndex = parseInt(targetId.split('_ShapeIndex_')[1].split('_')[0], 10);\n var layer = map.layers[layerIndex];\n var shapeData = layer.layerData[shapeIndex]['property'];\n var data;\n if (layer.dataSource) {\n data = layer.dataSource[checkShapeDataFields(layer.dataSource, shapeData, layer.shapeDataPath, layer.shapePropertyPath)];\n }\n return { shapeData: shapeData, data: data };\n}\n/**\n * Function to trigger shapeSelected event\n * @private\n */\nexport function triggerShapeEvent(targetId, selection, maps, eventName) {\n var shape = getShapeData(targetId, maps);\n var eventArgs = {\n cancel: false,\n name: eventName,\n fill: selection.fill,\n opacity: selection.opacity,\n border: selection.border,\n shapeData: shape.shapeData,\n data: shape.data,\n target: targetId\n };\n maps.trigger(eventName, eventArgs);\n return eventArgs;\n}\n/**\n * Function to get elements using class name\n */\nexport function getElementsByClassName(className) {\n return document.getElementsByClassName(className);\n}\n/**\n * Function to get elements using querySelectorAll\n */\n// export function querySelectorAll(args: string, element: Element): NodeListOf {\n// return element.querySelectorAll('.' + args);\n// }\n/**\n * Function to get elements using querySelector\n */\nexport function querySelector(args, elementSelector) {\n var targetEle = null;\n if (document.getElementById(elementSelector)) {\n targetEle = document.getElementById(elementSelector).querySelector('#' + args);\n }\n return targetEle;\n}\n/**\n * Function to get the element for selection and highlight using public method\n */\nexport function getTargetElement(layerIndex, name, enable, map) {\n var shapeIndex;\n var targetId;\n var targetEle;\n var shapeData = map.layers[layerIndex].shapeData['features'];\n for (var i = 0; i < shapeData.length; i++) {\n if (shapeData[i]['properties'].name === name) {\n targetId = map.element.id + '_' + 'LayerIndex_' + layerIndex + '_ShapeIndex_' + i + '_dataIndex_undefined';\n break;\n }\n }\n targetEle = getElement(targetId);\n return targetEle;\n}\n/**\n * Function to create style element for highlight and selection\n */\nexport function createStyle(id, className, eventArgs) {\n return createElement('style', {\n id: id, innerHTML: '.' + className + '{fill:'\n + eventArgs.fill + ';' + 'opacity:' + eventArgs.opacity.toString() + ';' +\n '}'\n });\n}\n/**\n * Function to customize the style for highlight and selection\n */\nexport function customizeStyle(id, className, eventArgs) {\n var styleEle = getElement(id);\n styleEle.innerHTML = '.' + className + '{fill:'\n + eventArgs.fill + ';' + 'opacity:' + eventArgs.opacity.toString() + ';' +\n 'stroke-width:' + eventArgs.border.width.toString() +\n 'stroke-color:' + eventArgs.border.color + '}';\n}\n/**\n * Function to remove class from element\n */\nexport function removeClass(element) {\n element.removeAttribute('class');\n}\n/**\n * Animation Effect Calculation End\n * @private\n */\nexport function elementAnimate(element, delay, duration, point, maps, ele, radius) {\n if (radius === void 0) { radius = 0; }\n var centerX = point.x;\n var centerY = point.y;\n var height = 0;\n var transform = element.getAttribute('transform') || '';\n new Animation({}).animate(element, {\n duration: duration,\n delay: delay,\n progress: function (args) {\n if (args.timeStamp > args.delay) {\n height = ((args.timeStamp - args.delay) / args.duration);\n element.setAttribute('transform', 'translate( ' + (centerX - (radius * height)) + ' ' + (centerY - (radius * height)) +\n ' ) scale(' + height + ')');\n }\n },\n end: function (model) {\n element.setAttribute('transform', transform);\n if (!ele) {\n return;\n }\n var event = {\n cancel: false, name: animationComplete, element: ele, maps: maps\n };\n maps.trigger(animationComplete, event);\n }\n });\n}\nexport function timeout(id) {\n removeElement(id);\n}\nexport function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element, isTouch) {\n var tooltip = document.getElementById(id);\n var width = measureText(text, {\n fontFamily: 'Segoe UI', size: '8px',\n fontStyle: 'Normal', fontWeight: 'Regular'\n }).width;\n var str = text.split(' ');\n var demo = str[0].length;\n for (var i = 1; i < str.length; i++) {\n if (demo < str[i].length) {\n demo = str[i].length;\n }\n }\n if (!tooltip) {\n tooltip = createElement('div', {\n id: id,\n styles: 'background-color: rgb(255, 255, 255) !important; color:black !important; ' +\n 'position:absolute;border:1px solid rgb(0, 0, 0); padding-left:5px;' +\n 'font-size:12px; font-family: \"Segoe UI\"; text-align:center'\n });\n }\n if (x < (areaWidth - width)) {\n x = x;\n }\n else if (x > (areaWidth - width) && x < areaWidth - (demo * 8)) {\n width = (areaWidth - x);\n }\n else if (x >= areaWidth - demo * 8) {\n if (x > width) {\n x = x - width;\n }\n else {\n width = x;\n x = 0;\n }\n }\n var size1 = size.split('px');\n wordWrap(tooltip, text, x, y, size1, width, areaWidth, element);\n var height = tooltip.clientHeight;\n if ((height + parseInt(size1[0], 10) * 2) > areaHeight) {\n width = x;\n x = 0;\n }\n wordWrap(tooltip, text, x, y, size1, width, areaWidth, element);\n if (isTouch) {\n setTimeout(timeout, 5000, id);\n }\n}\nexport function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element) {\n tooltip.innerHTML = text;\n tooltip.style.top = (y + parseInt(size1[0], 10)).toString() + 'px';\n tooltip.style.left = (x).toString() + 'px';\n tooltip.style.width = width.toString() + 'px';\n tooltip.style.maxWidth = (areaWidth).toString() + 'px';\n tooltip.style.wordWrap = 'break-word';\n element.appendChild(tooltip);\n}\n// /**\n// * \n// * @param touchList \n// * @param e \n// * @param touches \n// */\n// export function addTouchPointer(touchList: ITouches[], e: PointerEvent, touches: TouchList): ITouches[] {\n// if (touches) {\n// touchList = [];\n// for (let i: number = 0, length: number = touches.length; i < length; i++) {\n// touchList.push({ pageX: touches[i].clientX, pageY: touches[i].clientY, pointerId: null });\n// }\n// } else {\n// touchList = touchList ? touchList : [];\n// if (touchList.length === 0) {\n// touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });\n// } else {\n// for (let i: number = 0, length: number = touchList.length; i < length; i++) {\n// if (touchList[i].pointerId === e.pointerId) {\n// touchList[i] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };\n// } else {\n// touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });\n// }\n// }\n// }\n// }\n// return touchList;\n// }\n/** @private */\nexport function createTooltip(id, text, top, left, fontSize) {\n var tooltip = getElement(id);\n var style = 'top:' + top.toString() + 'px;' +\n 'left:' + left.toString() + 'px;' +\n 'background:' + '#FFFFFF' + ';' +\n 'position:absolute;border:1px solid #707070;font-size:' + fontSize + ';border-radius:2px;';\n if (!tooltip) {\n tooltip = createElement('div', {\n id: id, innerHTML: ' ' + text + ' ', styles: style\n });\n document.body.appendChild(tooltip);\n }\n else {\n tooltip.setAttribute('innerHTML', ' ' + text + ' ');\n tooltip.setAttribute('styles', style);\n }\n}\n/** @private */\nexport function drawSymbol(location, shape, size, url, options) {\n var functionName = 'Path';\n var renderer = new SvgRenderer('');\n var temp = calculateLegendShapes(location, size, shape, options, url);\n var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);\n return htmlObject;\n}\n/** @private */\nexport function calculateLegendShapes(location, size, shape, options, url) {\n var path;\n var functionName = 'Path';\n var width = size.width;\n var height = size.height;\n var locX = location.x;\n var locY = location.y;\n var x = location.x + (-width / 2);\n var y = location.y + (-height / 2);\n switch (shape) {\n case 'Circle':\n case 'Bubble':\n functionName = 'Ellipse';\n merge(options, { 'rx': width / 2, 'ry': height / 2, 'cx': locX, 'cy': locY });\n break;\n case 'Star':\n path = 'M ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + (location.x - size.width / 2)\n + ' ' + (location.y + size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y + size.height / 6)\n + ' L ' + (location.x - size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' +\n (location.y + size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' Z';\n merge(options, { 'd': path });\n break;\n case 'Cross':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' +\n (locY + (-height / 2));\n merge(options, { 'd': path });\n break;\n case 'HorizontalLine':\n path = 'M' + ' ' + x + ' ' + locY + ' ' + 'L' + ' ' + (locX + (width / 2)) + ' ' + locY;\n merge(options, { 'd': path });\n break;\n case 'VerticalLine':\n path = 'M' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' + 'L' + ' ' + locX + ' ' + (locY + (-height / 2));\n merge(options, { 'd': path });\n break;\n case 'Diamond':\n path = 'M' + ' ' + x + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + locY + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + locY + ' z';\n merge(options, { 'd': path });\n break;\n case 'Rectangle':\n path = 'M' + ' ' + x + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (-height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Triangle':\n path = 'M' + ' ' + x + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (-height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + x + ' ' + (locY + (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'InvertedTriangle':\n path = 'M' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + locX + ' ' + (locY + (height / 2)) + ' ' +\n 'L' + ' ' + (locX - (width / 2)) + ' ' + (locY - (height / 2)) + ' ' +\n 'L' + ' ' + (locX + (width / 2)) + ' ' + (locY - (height / 2)) + ' z';\n merge(options, { 'd': path });\n break;\n case 'Pentagon':\n var eq = 72;\n var xValue = void 0;\n var yValue = void 0;\n for (var i = 0; i <= 5; i++) {\n xValue = (width / 2) * Math.cos((Math.PI / 180) * (i * eq));\n yValue = (height / 2) * Math.sin((Math.PI / 180) * (i * eq));\n if (i === 0) {\n path = 'M' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ';\n }\n else {\n path = path.concat('L' + ' ' + (locX + xValue) + ' ' + (locY + yValue) + ' ');\n }\n }\n path = path.concat('Z');\n merge(options, { 'd': path });\n break;\n case 'Image':\n functionName = 'Image';\n merge(options, { 'href': url, 'height': height, 'width': width, x: x, y: y });\n break;\n }\n return { renderOption: options, functionName: functionName };\n}\n/**\n * Animation Effect Calculation End\n * @private\n */\n// export function markerTemplateAnimate(element: Element, delay: number, duration: number, point: MapLocation): void {\n// let delta: number = 0;\n// let top: string = (element as HTMLElement).style.top;\n// let y: number = parseInt(top, 10);\n// new Animation({}).animate(element, {\n// duration: duration,\n// delay: delay,\n// progress: (args: AnimationOptions): void => {\n// if (args.timeStamp > args.delay) {\n// delta = ((args.timeStamp - args.delay) / args.duration);\n// (element as HTMLElement).style.top = y - 100 + (delta * 100) + 'px';\n// }\n// },\n// end: (model: AnimationOptions) => {\n// (element as HTMLElement).style.top = top;\n// }\n// });\n// }\n/** @private */\nexport function getElementOffset(childElement, parentElement) {\n var width;\n var height;\n parentElement.appendChild(childElement);\n width = childElement.offsetWidth;\n height = childElement.offsetHeight;\n parentElement.removeChild(childElement);\n return new Size(width, height);\n}\n/** @private */\nexport function changeBorderWidth(element, index, scale, maps) {\n var childNode;\n for (var l = 0; l < element.childElementCount; l++) {\n childNode = element.childNodes[l];\n if (childNode.id.indexOf('_NavigationGroup') > -1) {\n changeNavaigationLineWidth(childNode, index, scale, maps);\n }\n else {\n var currentStroke = (maps.layersCollection[index].shapeSettings.border.width);\n childNode.setAttribute('stroke-width', (currentStroke / scale).toString());\n }\n }\n}\n/** @private */\nexport function changeNavaigationLineWidth(element, index, scale, maps) {\n var node;\n for (var m = 0; m < element.childElementCount; m++) {\n node = element.childNodes[m];\n if (node.tagName === 'path') {\n var currentStroke = (maps.layersCollection[index]\n .navigationLineSettings[parseFloat(node.id.split('_')[2])].width);\n node.setAttribute('stroke-width', (currentStroke / scale).toString());\n }\n }\n}\n// /** Pinch zoom helper methods */\n/** @private */\nexport function targetTouches(event) {\n var targetTouches = [];\n var touches = event.touches;\n for (var i = 0; i < touches.length; i++) {\n targetTouches.push({ pageX: touches[i].pageX, pageY: touches[i].pageY });\n }\n return targetTouches;\n}\n/** @private */\nexport function calculateScale(startTouches, endTouches) {\n var startDistance = getDistance(startTouches[0], startTouches[1]);\n var endDistance = getDistance(endTouches[0], endTouches[1]);\n return (endDistance / startDistance);\n}\n/** @private */\nexport function getDistance(a, b) {\n var x = a.pageX - b.pageX;\n var y = a.pageY - b.pageY;\n return Math.sqrt(x * x + y * y);\n}\n/** @private */\nexport function getTouches(touches, maps) {\n var rect = maps.element.getBoundingClientRect();\n var posTop = rect.top + document.defaultView.pageXOffset;\n var posLeft = rect.left + document.defaultView.pageYOffset;\n return Array.prototype.slice.call(touches).map(function (touch) {\n return {\n x: touch.pageX - posLeft,\n y: touch.pageY - posTop,\n };\n });\n}\n/** @private */\nexport function getTouchCenter(touches) {\n return {\n x: touches.map(function (e) { return e['x']; }).reduce(sum) / touches.length,\n y: touches.map(function (e) { return e['y']; }).reduce(sum) / touches.length\n };\n}\n/** @private */\nexport function sum(a, b) {\n return a + b;\n}\n/**\n * Animation Effect Calculation End\n * @private\n */\nexport function zoomAnimate(element, delay, duration, point, scale, size, maps) {\n var delta = 0;\n var previousLocation = maps.previousPoint;\n var preScale = maps.previousScale;\n var diffScale = scale - preScale;\n var currentLocation = new MapLocation(0, 0);\n var currentScale = 1;\n if (scale === preScale) {\n element.setAttribute('transform', 'scale( ' + (scale) + ' ) translate( ' + point.x + ' ' + point.y + ' )');\n return;\n }\n var slope = function (previousLocation, point) {\n if (previousLocation.x === point.x) {\n return null;\n }\n return (point.y - previousLocation.y) / (point.x - previousLocation.x);\n };\n var intercept = function (point, slopeValue) {\n if (slopeValue === null) {\n return point.x;\n }\n return point.y - slopeValue * point.x;\n };\n var slopeFactor = slope(previousLocation, point);\n var slopeIntersection = intercept(previousLocation, slopeFactor);\n var horizontalDifference = point.x - previousLocation.x;\n var verticalDifference = point.y - previousLocation.y;\n animate(element, delay, duration, function (args) {\n if (args.timeStamp > args.delay) {\n delta = ((args.timeStamp - args.delay) / args.duration);\n currentScale = preScale + (delta * diffScale);\n currentLocation.x = previousLocation.x + (delta * horizontalDifference) / (currentScale / scale);\n if (slopeFactor == null) {\n currentLocation.y = previousLocation.y + (delta * verticalDifference);\n }\n else {\n currentLocation.y = ((slopeFactor * currentLocation.x) + slopeIntersection);\n }\n args.element.setAttribute('transform', 'scale( ' + currentScale + ' ) ' +\n 'translate( ' + currentLocation.x + ' ' + currentLocation.y + ' )');\n maps.translatePoint = currentLocation;\n maps.scale = currentScale;\n maps.zoomModule.processTemplate(point.x, point.y, currentScale, maps);\n }\n }, function () {\n maps.translatePoint = point;\n maps.scale = scale;\n element.setAttribute('transform', 'scale( ' + (scale) + ' ) translate( ' + point.x + ' ' + point.y + ' )');\n maps.zoomModule.processTemplate(point.x, point.y, scale, maps);\n });\n}\n/**\n * To process custom animation\n */\nexport function animate(element, delay, duration, process, end) {\n var _this = this;\n var start = null;\n var clearAnimation;\n var startAnimation = function (timestamp) {\n if (!start) {\n start = timestamp;\n }\n var progress = timestamp - start;\n if (progress < duration) {\n process.call(_this, { element: element, delay: 0, timeStamp: progress, duration: duration });\n window.requestAnimationFrame(startAnimation);\n }\n else {\n window.cancelAnimationFrame(clearAnimation);\n end.call(_this, { element: element });\n }\n };\n clearAnimation = window.requestAnimationFrame(startAnimation);\n}\nvar MapAjax = /** @class */ (function () {\n function MapAjax(url, sendData) {\n this.url = null;\n this.sendData = null;\n this.url = url;\n this.sendData = sendData;\n }\n return MapAjax;\n}());\nexport { MapAjax };\n/**\n * Animation Translate\n * @private\n */\nexport function smoothTranslate(element, delay, duration, point) {\n var delta = 0;\n var transform = element.getAttribute('transform').split(' ');\n if (transform.length === 2) {\n transform[2] = transform[1].split(')')[0];\n transform[1] = transform[0].split('(')[1];\n }\n var previousLocation = new MapLocation(parseInt(transform[1], 10), parseInt(transform[2], 10));\n var diffx = point.x - previousLocation.x;\n var diffy = point.y - previousLocation.y;\n var currentLocation = new MapLocation(0, 0);\n animate(element, delay, duration, function (args) {\n if (args.timeStamp > args.delay) {\n delta = ((args.timeStamp - args.delay) / args.duration);\n currentLocation.x = previousLocation.x + (delta * diffx);\n currentLocation.y = previousLocation.y + (delta * diffy);\n args.element.setAttribute('transform', 'translate( ' + currentLocation.x + ' ' + currentLocation.y + ' )');\n }\n }, function () {\n element.setAttribute('transform', 'translate( ' + point.x + ' ' + point.y + ' )');\n });\n}\n","/**\n * Schedule common utilities\n */\nexport var WEEK_LENGTH = 7;\nexport var MS_PER_DAY = 86400000;\nexport var MS_PER_MINUTE = 60000;\nexport function getWeekFirstDate(date1, firstDayOfWeek) {\n var date = new Date(date1.getTime());\n firstDayOfWeek = (firstDayOfWeek - date.getDay() + 7 * (-1)) % 7;\n return new Date(date.setDate(date.getDate() + firstDayOfWeek));\n}\nexport function firstDateOfMonth(date) {\n return new Date(date.getFullYear(), date.getMonth());\n}\nexport function lastDateOfMonth(dt) {\n return new Date(dt.getFullYear(), dt.getMonth() + 1, 0);\n}\nexport function getWeekNumber(dt) {\n var currentDate = new Date('' + dt).valueOf();\n var date = new Date(dt.getFullYear(), 0, 1).valueOf();\n var a = (currentDate - date);\n return Math.ceil((((a) / MS_PER_DAY) + new Date(date).getDay() + 1) / 7);\n}\nexport function setTime(date, time) {\n var tzOffsetBefore = date.getTimezoneOffset();\n var d = new Date(date.getTime() + time);\n var tzOffsetDiff = d.getTimezoneOffset() - tzOffsetBefore;\n date.setTime(d.getTime() + tzOffsetDiff * MS_PER_DAY);\n return date;\n}\nexport function resetTime(date) {\n date.setHours(0, 0, 0, 0);\n return date;\n}\nexport function getDateInMs(date) {\n return date.getTime() - new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime();\n}\nexport function addDays(date, i) {\n date = new Date('' + date);\n return new Date(date.setDate(date.getDate() + i));\n}\nexport function addMonths(date, i) {\n date = new Date('' + date);\n var day = date.getDate();\n date.setDate(1);\n date.setMonth(date.getMonth() + i);\n date.setDate(Math.min(day, getMaxDays(date)));\n return date;\n}\nexport function addYears(date, i) {\n date = new Date('' + date);\n var day = date.getDate();\n date.setDate(1);\n date.setFullYear(date.getFullYear() + i);\n date.setDate(Math.min(day, getMaxDays(date)));\n return date;\n}\nexport function getStartEndHours(date, startHour, endHour) {\n var date1 = new Date(date.getTime());\n date1.setHours(startHour.getHours());\n date1.setMinutes(startHour.getMinutes());\n date1.setSeconds(startHour.getSeconds());\n var date2 = new Date(date.getTime());\n if (endHour.getHours() === 0) {\n date2 = addDays(date2, 1);\n }\n else {\n date2.setHours(endHour.getHours());\n date2.setMinutes(endHour.getMinutes());\n date2.setSeconds(endHour.getSeconds());\n }\n return { startHour: date1, endHour: date2 };\n}\nexport function getMaxDays(d) {\n var date = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n return date.getDate();\n}\nexport function getDaysCount(startDate, endDate) {\n var strTime = resetTime(new Date(startDate));\n var endTime = resetTime(new Date(endDate));\n return (endTime.getTime() - strTime.getTime()) / MS_PER_DAY;\n}\n/** @hidden */\nvar scrollWidth = null;\n/** @hidden */\nexport function getScrollBarWidth() {\n if (scrollWidth !== null) {\n return scrollWidth;\n }\n var divNode = document.createElement('div');\n var value = 0;\n divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';\n document.body.appendChild(divNode);\n value = (divNode.offsetWidth - divNode.clientWidth) | 0;\n document.body.removeChild(divNode);\n return scrollWidth = value;\n}\n","import { isNullOrUndefined, getDefaultDateObject, getValue, cldrData } from '@syncfusion/ej2-base';\nimport { MS_PER_DAY } from '../schedule/base/util';\n/**\n * Date Generator from Recurrence Rule\n */\nexport function generateSummary(rule, localeObject, locale) {\n var ruleObject = extractObjectFromRule(rule);\n var summary = localeObject.getConstant(EVERY) + ' ';\n var cldrObj;\n var cldrObj1;\n if (locale === 'en' || locale === 'en-US') {\n cldrObj1 = (getValue('months.stand-alone.abbreviated', getDefaultDateObject()));\n cldrObj = (getValue('days.stand-alone.abbreviated', getDefaultDateObject()));\n }\n else {\n cldrObj1 = (getValue('main.' + '' + locale + '.dates.calendars.gregorian.months.stand-alone.abbreviated', cldrData));\n cldrObj = (getValue('main.' + '' + locale + '.dates.calendars.gregorian.days.stand-alone.abbreviated', cldrData));\n }\n if (ruleObject.interval > 1) {\n summary += ruleObject.interval + ' ';\n }\n switch (ruleObject.freq) {\n case 'DAILY':\n summary += localeObject.getConstant(DAYS);\n break;\n case 'WEEKLY':\n summary += localeObject.getConstant(WEEKS) + ' ' + localeObject.getConstant(ON) + ' ';\n ruleObject.day.forEach(function (day, index) {\n summary += getValue(DAYINDEXOBJECT[day], cldrObj);\n summary += (((ruleObject.day.length - 1) === index) ? '' : ', ');\n });\n break;\n case 'MONTHLY':\n summary += localeObject.getConstant(MONTHS) + ' ' + localeObject.getConstant(ON) + ' ';\n summary += getMonthSummary(ruleObject, cldrObj, localeObject);\n break;\n case 'YEARLY':\n summary += localeObject.getConstant(YEARS) + ' ' + localeObject.getConstant(ON) + ' ';\n summary += getValue((ruleObject.month[0]).toString(), cldrObj1) + ' ';\n summary += getMonthSummary(ruleObject, cldrObj, localeObject);\n break;\n default:\n return '';\n }\n if (ruleObject.count) {\n summary += ', ' + (ruleObject.count) + ' ' + localeObject.getConstant(TIMES);\n }\n else if (ruleObject.until) {\n var tempDate = ruleObject.until;\n summary += ', ' + localeObject.getConstant(UNTIL)\n + ' ' + tempDate.getDate()\n + ' ' + getValue((tempDate.getMonth() + 1).toString(), cldrObj1)\n + ' ' + tempDate.getFullYear();\n }\n return summary;\n}\nfunction getMonthSummary(ruleObject, cldrObj, localeObj) {\n var summary = '';\n if (ruleObject.monthDay.length) {\n summary += ruleObject.monthDay[0];\n }\n else if (ruleObject.day) {\n var pos = ruleObject.setPosition - 1;\n summary += localeObj.getConstant(WEEKPOS[pos > -1 ? pos : (WEEKPOS.length - 1)])\n + ' ' + getValue(DAYINDEXOBJECT[ruleObject.day[0]], cldrObj);\n }\n return summary;\n}\nexport function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount, viewDate) {\n if (maximumCount === void 0) { maximumCount = MAXOCCURRENCE; }\n if (viewDate === void 0) { viewDate = null; }\n var ruleObject = extractObjectFromRule(rule);\n var cacheDate;\n var data = [];\n var modifiedDate = new Date(startDate.getTime());\n if (viewDate && viewDate > startDate && !ruleObject.count) {\n tempViewDate = new Date(new Date(viewDate.getTime()).setHours(0, 0, 0));\n }\n else {\n tempViewDate = null;\n }\n if (!ruleObject.until && tempViewDate) {\n cacheDate = new Date(tempViewDate.getTime());\n cacheDate.setDate(tempViewDate.getDate() + 42 * (ruleObject.interval));\n ruleObject.until = cacheDate;\n }\n if (ruleObject.until && startDate > ruleObject.until) {\n return data;\n }\n maxOccurrence = maximumCount;\n setFirstDayOfWeek(DAYINDEX[startDayOfWeek]);\n tempExcludeDate = [];\n var tempDate = isNullOrUndefined(excludeDate) ? [] : excludeDate.split(',');\n tempDate.forEach(function (content) {\n var parsedDate = getDateFromRecurrenceDateString(content);\n tempExcludeDate.push(new Date(parsedDate.getTime()).setHours(0, 0, 0, 0));\n });\n switch (ruleObject.freq) {\n case 'DAILY':\n dailyType(modifiedDate, ruleObject.until, data, ruleObject);\n break;\n case 'WEEKLY':\n weeklyType(modifiedDate, ruleObject.until, data, ruleObject);\n break;\n case 'MONTHLY':\n monthlyType(modifiedDate, ruleObject.until, data, ruleObject);\n break;\n case 'YEARLY':\n yearlyType(modifiedDate, ruleObject.until, data, ruleObject);\n }\n return data;\n}\nfunction getDateFromRecurrenceDateString(recDateString) {\n return new Date(recDateString.substr(0, 4) +\n '-' + recDateString.substr(4, 2) +\n '-' + recDateString.substr(6, 5) +\n ':' + recDateString.substr(11, 2) +\n ':' + recDateString.substr(13));\n}\nfunction excludeDateHandler(data, date) {\n var zeroIndex = new Date(date).setHours(0, 0, 0, 0);\n if (tempExcludeDate.indexOf(zeroIndex) === -1 && (!tempViewDate || zeroIndex >= tempViewDate.getTime())) {\n data.push(date);\n }\n}\nfunction dailyType(startDate, endDate, data, ruleObject) {\n var tempDate = new Date(startDate.getTime());\n var interval = ruleObject.interval;\n var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;\n var state;\n while (compareDates(tempDate, endDate)) {\n state = true;\n state = validateRules(tempDate, ruleObject);\n if (state) {\n excludeDateHandler(data, tempDate.getTime());\n if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {\n break;\n }\n }\n tempDate.setDate(tempDate.getDate() + interval);\n }\n}\nfunction weeklyType(startDate, endDate, data, ruleObject) {\n var tempDate = getStartDateForWeek(startDate, ruleObject.day);\n var interval = ruleObject.interval;\n var expectedDays = ruleObject.day;\n var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;\n var state;\n var dayCycleData = processWeekDays(expectedDays);\n while (compareDates(tempDate, endDate)) {\n state = true;\n state = validateRules(tempDate, ruleObject);\n if (state) {\n excludeDateHandler(data, tempDate.getTime());\n if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {\n break;\n }\n }\n if (expectedDays.length > 1) {\n tempDate.setDate(tempDate.getDate()\n + dayCycleData[DAYINDEX[tempDate.getDay()]]\n + ((expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === expectedDays.length - 1) ?\n ((interval - 1) * 7) : 0));\n }\n else {\n tempDate.setDate(tempDate.getDate()\n + (interval * 7));\n }\n }\n}\nfunction monthlyType(startDate, endDate, data, ruleObject) {\n var ruleType = validateMonthlyRuleType(ruleObject);\n switch (ruleType) {\n case 'day':\n monthlyDayTypeProcess(startDate, endDate, data, ruleObject);\n break;\n case 'both':\n case 'date':\n monthlyDateTypeProcess(startDate, endDate, data, ruleObject);\n break;\n }\n}\nfunction yearlyType(startDate, endDate, data, ruleObject) {\n var typeValue = checkYearlyType(ruleObject);\n switch (typeValue) {\n case 'MONTH':\n monthlyType(startDate, endDate, data, ruleObject);\n break;\n case 'WEEKNO':\n processWeekNo(startDate, endDate, data, ruleObject);\n break;\n case 'YEARDAY':\n processYearDay(startDate, endDate, data, ruleObject);\n break;\n }\n}\nfunction processWeekNo(startDate, endDate, data, ruleObject) {\n var stDate = new Date(startDate.getFullYear(), 0, 0);\n var tempDate;\n var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;\n var state;\n var startDay;\n var firstWeekSpan;\n var weekNos = ruleObject.weekNo;\n var weekNo;\n var maxDate;\n var minDate;\n while (compareDates(stDate, endDate)) {\n startDay = dayIndex.indexOf(DAYINDEX[stDate.getDay()]);\n firstWeekSpan = (6 - startDay) + 1;\n for (var index = 0; index < weekNos.length; index++) {\n weekNo = weekNos[index];\n weekNo = (weekNo > 0) ? weekNo : 53 + weekNo + 1;\n maxDate = (weekNo === 1) ? firstWeekSpan : firstWeekSpan + ((weekNo - 1) * 7);\n minDate = (weekNo === 1) ? firstWeekSpan - 7 : firstWeekSpan + ((weekNo - 2) * 7);\n while (minDate < maxDate) {\n tempDate = new Date(stDate.getTime() + (MS_PER_DAY * minDate));\n state = validateRules(tempDate, ruleObject);\n if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {\n excludeDateHandler(data, tempDate.getTime());\n if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {\n return;\n }\n }\n minDate++;\n }\n }\n stDate = new Date(tempDate.getFullYear() + ruleObject.interval, 0, 0);\n }\n}\nfunction processYearDay(startDate, endDate, data, ruleObject) {\n var stDate = new Date(startDate.getFullYear(), 0, 0);\n var tempDate;\n var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;\n var state;\n var date;\n while (compareDates(stDate, endDate)) {\n for (var index = 0; index < ruleObject.yearDay.length; index++) {\n date = ruleObject.yearDay[index];\n tempDate = new Date(stDate.getTime());\n if ((date === LEAPYEAR || date === -LEAPYEAR) && ((tempDate.getFullYear() + 1) % 4 !== 0)) {\n tempDate.setDate(tempDate.getDate() + 1);\n continue;\n }\n tempDate.setDate(tempDate.getDate() + ((date < 0) ? getMaxYearDay(tempDate.getFullYear() + 1) + 1 + date : date));\n state = validateRules(tempDate, ruleObject);\n if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {\n excludeDateHandler(data, tempDate.getTime());\n if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {\n return;\n }\n }\n }\n stDate = new Date(tempDate.getFullYear() + ruleObject.interval, 0, 0);\n }\n}\nfunction getMaxYearDay(date) {\n return (date % 4 === 0) ? LEAPYEAR : NORMALYEAR;\n}\nfunction checkYearlyType(ruleObject) {\n if (ruleObject.yearDay.length) {\n return 'YEARDAY';\n }\n else if (ruleObject.weekNo.length) {\n return 'WEEKNO';\n }\n return 'MONTH';\n}\nfunction monthlyDateTypeProcess(startDate, endDate, data, ruleObject) {\n var tempDate = new Date(startDate.getTime());\n var mainDate = new Date(startDate.getTime());\n var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;\n var interval = ruleObject.interval;\n var monthInit = 0;\n var date;\n var state;\n tempDate.setDate(1);\n mainDate.setDate(1);\n if (ruleObject.month.length) {\n tempDate.setMonth(ruleObject.month[0] - 1);\n }\n while (compareDates(tempDate, endDate)) {\n for (var index = 0; index < ruleObject.monthDay.length; index++) {\n date = ruleObject.monthDay[index];\n var maxDate = (tempDate.getMonth() === 1) ?\n (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];\n date = date > 0 ? date : (maxDate + date + 1);\n if ((date > 0) && validateProperDate(tempDate, date, mainDate)) {\n tempDate.setDate(date);\n if (endDate && tempDate > endDate) {\n return;\n }\n state = validateRules(tempDate, ruleObject);\n if ((tempDate >= startDate) && state && compareDates(tempDate, endDate)) {\n excludeDateHandler(data, tempDate.getTime());\n if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {\n return;\n }\n }\n }\n }\n monthInit = setNextValidDate(tempDate, ruleObject, monthInit, interval);\n }\n}\nfunction setNextValidDate(tempDate, ruleObject, monthInit, interval, beginDate) {\n if (beginDate === void 0) { beginDate = null; }\n var monthData = beginDate ? beginDate.getMonth() : 0;\n tempDate.setDate(1);\n if (ruleObject.month.length) {\n monthInit++;\n monthInit = monthInit % ruleObject.month.length;\n tempDate.setMonth(ruleObject.month[monthInit] - 1);\n if (monthInit === 0) {\n tempDate.setFullYear(tempDate.getFullYear() + interval);\n }\n }\n else {\n if (beginDate && (beginDate.getFullYear() < tempDate.getFullYear())) {\n monthData = tempDate.getMonth() - 1;\n }\n tempDate.setMonth((beginDate ?\n monthData :\n tempDate.getMonth()) + interval);\n }\n return monthInit;\n}\nfunction monthlyDayTypeProcess(startDate, endDate, data, ruleObject) {\n var tempDate = new Date(startDate.getTime());\n var expectedDays = ruleObject.day;\n var expectedCount = ruleObject.count ? ruleObject.count : maxOccurrence;\n var dayCycleData = processWeekDays(expectedDays);\n var interval = ruleObject.interval;\n var state;\n var monthCollection = [];\n var weekCollection = [];\n var month;\n var index;\n var beginDate;\n var monthInit = 0;\n tempDate.setDate(1);\n if (ruleObject.month.length) {\n tempDate.setMonth(ruleObject.month[0] - 1);\n }\n tempDate = getStartDateForWeek(tempDate, ruleObject.day);\n while (compareDates(tempDate, endDate)) {\n month = tempDate.getMonth();\n beginDate = new Date(tempDate.getTime());\n if (expectedDays.length > 1) {\n while (tempDate.getMonth() === month) {\n weekCollection.push(tempDate.getTime());\n if (DAYINDEX[tempDate.getDay()] === expectedDays[expectedDays.length - 1]) {\n monthCollection.push(weekCollection);\n weekCollection = [];\n }\n tempDate.setDate(tempDate.getDate()\n + dayCycleData[DAYINDEX[tempDate.getDay()]]);\n }\n }\n else {\n while (tempDate.getMonth() === month) {\n monthCollection.push([tempDate.getTime()]);\n tempDate.setDate(tempDate.getDate()\n + (7));\n }\n }\n index = ((ruleObject.setPosition < 1) ? (monthCollection.length + ruleObject.setPosition) : ruleObject.setPosition - 1);\n if (ruleObject.setPosition === null) {\n index = 0;\n var datas = [];\n for (var week = 0; week < monthCollection.length; week++) {\n for (var row = 0; row < monthCollection[week].length; row++) {\n datas.push(monthCollection[week][row]);\n }\n }\n monthCollection = [datas];\n }\n for (var week = 0; week < monthCollection[index].length; week++) {\n var dayData = monthCollection[index][week];\n var chDate = new Date(dayData);\n state = validateRules(chDate, ruleObject);\n if ((chDate >= startDate) && compareDates(chDate, endDate) && state) {\n excludeDateHandler(data, dayData);\n if (expectedCount && (data.length + tempExcludeDate.length) >= expectedCount) {\n return;\n }\n }\n }\n monthInit = setNextValidDate(tempDate, ruleObject, monthInit, interval, beginDate);\n monthCollection = [];\n weekCollection = [];\n tempDate = getStartDateForWeek(tempDate, ruleObject.day);\n }\n}\nfunction compareDates(startDate, endDate) {\n return endDate ? (startDate <= endDate) : true;\n}\nfunction checkDayIndex(day, expectedDays) {\n return (expectedDays.indexOf(DAYINDEX[day]) === -1);\n}\nfunction getStartDateForWeek(startDate, expectedDays) {\n var tempDate = new Date(startDate.getTime());\n if (expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === -1) {\n do {\n tempDate.setDate(tempDate.getDate() + 1);\n } while (expectedDays.indexOf(DAYINDEX[tempDate.getDay()]) === -1);\n }\n return tempDate;\n}\nexport function extractObjectFromRule(rules) {\n var ruleObject = {\n freq: null,\n interval: 1,\n count: null,\n until: null,\n day: [],\n month: [],\n weekNo: [],\n monthDay: [],\n yearDay: [],\n setPosition: null,\n validRules: []\n };\n var rulesList = rules.split(';');\n var splitData = [];\n var temp;\n rulesList.forEach(function (data) {\n splitData = data.split('=');\n switch (splitData[0]) {\n case 'UNTIL':\n temp = splitData[1];\n ruleObject.until = getDateFromRecurrenceDateString(temp);\n break;\n case 'BYDAY':\n ruleObject.day = splitData[1].split(',');\n ruleObject.validRules.push(splitData[0]);\n break;\n case 'BYMONTHDAY':\n ruleObject.monthDay = splitData[1].split(',').map(Number);\n ruleObject.validRules.push(splitData[0]);\n break;\n case 'BYMONTH':\n ruleObject.month = splitData[1].split(',').map(Number);\n ruleObject.validRules.push(splitData[0]);\n break;\n case 'BYYEARDAY':\n ruleObject.yearDay = splitData[1].split(',').map(Number);\n ruleObject.validRules.push(splitData[0]);\n break;\n case 'BYWEEKNO':\n ruleObject.weekNo = splitData[1].split(',').map(Number);\n ruleObject.validRules.push(splitData[0]);\n break;\n case 'INTERVAL':\n ruleObject.interval = parseInt(splitData[1], 10);\n break;\n case 'COUNT':\n ruleObject.count = parseInt(splitData[1], 10);\n break;\n case 'BYSETPOS':\n ruleObject.setPosition = parseInt(splitData[1], 10);\n break;\n case 'FREQ':\n ruleObject.freq = splitData[1];\n break;\n }\n });\n if ((ruleObject.freq === 'MONTHLY') && (ruleObject.monthDay.length === 0)) {\n var index = ruleObject.validRules.indexOf('BYDAY');\n ruleObject.validRules.splice(index, 1);\n }\n return ruleObject;\n}\nfunction validateProperDate(tempDate, data, startDate) {\n var maxDate = (tempDate.getMonth() === 1) ? (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];\n return (data <= maxDate) && (tempDate >= startDate);\n}\nfunction processWeekDays(expectedDays) {\n var dayCycle = {};\n expectedDays.forEach(function (element, index) {\n if (index === expectedDays.length - 1) {\n var startIndex = dayIndex.indexOf(element);\n var temp = startIndex;\n while (temp % 7 !== dayIndex.indexOf(expectedDays[0])) {\n temp++;\n }\n dayCycle[element] = temp - startIndex;\n }\n else {\n dayCycle[element] = dayIndex.indexOf(expectedDays[(index + 1)]) - dayIndex.indexOf(element);\n }\n });\n return dayCycle;\n}\nfunction checkMonth(tempDate, expectedMonth) {\n return (expectedMonth.indexOf(tempDate.getMonth() + 1) === -1);\n}\nfunction checkDate(tempDate, expectedDate) {\n var temp = expectedDate.slice(0);\n var data;\n var maxDate = (tempDate.getMonth() === 1) ?\n (tempDate.getFullYear() % 4 === 0 ? 29 : 28) : monthDay[tempDate.getMonth()];\n data = temp.shift();\n while (data) {\n if (data < 0) {\n data = data + maxDate + 1;\n }\n if (data === tempDate.getDate()) {\n return false;\n }\n data = temp.shift();\n }\n return true;\n}\nfunction checkYear(tempDate, expectedyearDay) {\n var temp = expectedyearDay.slice(0);\n var data;\n var yearDay = getYearDay(tempDate);\n data = temp.shift();\n while (data) {\n if (data < 0) {\n data = data + getMaxYearDay(tempDate.getFullYear()) + 1;\n }\n if (data === yearDay) {\n return false;\n }\n data = temp.shift();\n }\n return true;\n}\nfunction getYearDay(currentDate) {\n if (!startDateCollection[currentDate.getFullYear()]) {\n startDateCollection[currentDate.getFullYear()] = new Date(currentDate.getFullYear(), 0, 0);\n }\n var tempDate = startDateCollection[currentDate.getFullYear()];\n var diff = currentDate.getTime() - tempDate.getTime();\n return Math.ceil(diff / MS_PER_DAY);\n}\nfunction validateMonthlyRuleType(ruleObject) {\n if (ruleObject.monthDay.length && !ruleObject.day.length) {\n return 'date';\n }\n else if (!ruleObject.monthDay.length && ruleObject.day.length) {\n return 'day';\n }\n return 'both';\n}\nfunction rotate(days) {\n var data = days.shift();\n days.push(data);\n}\nfunction setFirstDayOfWeek(day) {\n while (dayIndex[0] !== day) {\n rotate(dayIndex);\n }\n}\nfunction validateRules(tempDate, ruleObject) {\n var state = true;\n var expectedDays = ruleObject.day;\n var expectedMonth = ruleObject.month;\n var expectedDate = ruleObject.monthDay;\n var expectedyearDay = ruleObject.yearDay;\n ruleObject.validRules.forEach(function (rule) {\n switch (rule) {\n case 'BYDAY':\n if (checkDayIndex(tempDate.getDay(), expectedDays)) {\n state = false;\n }\n break;\n case 'BYMONTH':\n if (checkMonth(tempDate, expectedMonth)) {\n state = false;\n }\n break;\n case 'BYMONTHDAY':\n if (checkDate(tempDate, expectedDate)) {\n state = false;\n }\n break;\n case 'BYYEARDAY':\n if (checkYear(tempDate, expectedyearDay)) {\n state = false;\n }\n break;\n }\n });\n return state;\n}\nvar startDateCollection = {};\nvar propertyKeys = {\n FREQ: 'freq',\n BYDAY: 'day',\n BYSETPOS: 'setPos',\n UNTIL: 'until',\n INTERVAL: 'interval',\n COUNT: 'count',\n BYMONTH: 'month',\n BYWEEKNO: 'weekNo',\n BYMONTHDAY: 'monthDay',\n BYYEARDAY: 'yearDay'\n};\nvar tempExcludeDate;\nvar dayIndex = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];\nvar maxOccurrence;\nvar tempViewDate;\nvar monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\nvar DAYINDEX = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];\nvar MAXOCCURRENCE = 43;\nvar LEAPYEAR = 366;\nvar NORMALYEAR = 365;\nvar WEEKPOS = ['first', 'second', 'third', 'fourth', 'last'];\nvar MONTHDATA = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];\nvar TIMES = 'summaryTimes';\nvar ON = 'summaryOn';\nvar REPEAT = 'summaryRepeat';\nvar EVERY = 'every';\nvar UNTIL = 'summaryUntil';\nvar DAYS = 'summaryDay';\nvar WEEKS = 'summaryWeek';\nvar MONTHS = 'summaryMonth';\nvar YEARS = 'summaryYear';\nvar DAYINDEXOBJECT = {\n SU: 'sun',\n MO: 'mon',\n TU: 'tue',\n WE: 'wed',\n TH: 'thu',\n FR: 'fri',\n SA: 'sat'\n};\nexport function getRecurrenceStringFromDate(date) {\n return [date.getUTCFullYear(),\n roundDateValues(date.getUTCMonth() + 1),\n roundDateValues(date.getUTCDate()),\n 'T',\n roundDateValues(date.getUTCHours()),\n roundDateValues(date.getUTCMinutes()),\n roundDateValues(date.getUTCSeconds()),\n 'Z'].join('');\n}\nfunction roundDateValues(date) {\n return ('0' + date).slice(-2);\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { ChildProperty, extend, deleteObject, Property } from '@syncfusion/ej2-base';\n/**\n * @param props\n * @param model\n */\nexport function getModel(props, model) {\n var obj = extend({}, props);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((model).indexOf(prop) < 0) {\n deleteObject(obj, prop);\n }\n }\n return obj;\n}\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"separator\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"url\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n","import { isNullOrUndefined, merge } from './util';\nvar headerRegex = /^(.*?):[ \\t]*([^\\r\\n]*)$/gm;\nvar defaultType = 'GET';\n/**\n * Ajax class provides ability to make asynchronous HTTP request to the server\n * ```typescript\n * var ajax = new Ajax(\"index.html\", \"GET\", true);\n * ajax.send().then(\n * function (value) {\n * console.log(value);\n * },\n * function (reason) {\n * console.log(reason);\n * });\n * ```\n */\nvar Ajax = /** @class */ (function () {\n /**\n * Constructor for Ajax class\n * @param {string|Object} options?\n * @param {string} type?\n * @param {boolean} async?\n * @returns defaultType\n */\n function Ajax(options, type, async) {\n /**\n * A boolean value indicating whether the request should be sent asynchronous or not.\n * @default true\n */\n this.mode = true;\n this.options = {};\n if (typeof options === 'string') {\n this.url = options;\n this.type = type ? type.toUpperCase() : defaultType;\n this.mode = !isNullOrUndefined(async) ? async : true;\n }\n else if (typeof options === 'object') {\n this.options = options;\n merge(this, this.options);\n }\n this.type = this.type ? this.type.toUpperCase() : defaultType;\n }\n /**\n * Send the request to server.\n * @param {any} data - To send the user data\n * @return {Promise}\n */\n Ajax.prototype.send = function (data) {\n var _this = this;\n this.data = isNullOrUndefined(data) ? this.data : data;\n var promise = new Promise(function (resolve, reject) {\n _this.httpRequest = new XMLHttpRequest();\n _this.httpRequest.onreadystatechange = function () { _this.stateChange(resolve, reject); };\n _this.httpRequest.open(_this.type, _this.url, _this.mode);\n // Set default headers\n if (!isNullOrUndefined(_this.data)) {\n _this.httpRequest.setRequestHeader('Content-Type', _this.contentType || 'application/json; charset=utf-8');\n }\n if (_this.beforeSend) {\n _this.beforeSend();\n }\n _this.httpRequest.send(!isNullOrUndefined(_this.data) ? _this.data : null);\n });\n return promise;\n };\n Ajax.prototype.successHandler = function (data) {\n if (this.onSuccess) {\n this.onSuccess(data, this);\n }\n return data;\n };\n Ajax.prototype.failureHandler = function (reason) {\n if (this.onFailure) {\n this.onFailure(this.httpRequest);\n }\n return reason;\n };\n Ajax.prototype.stateChange = function (resolve, reject) {\n var data = this.httpRequest.responseText;\n if (this.dataType && this.dataType.toLowerCase() === 'json') {\n if (data === '') {\n data = undefined;\n }\n else {\n try {\n data = JSON.parse(data);\n }\n catch (error) {\n // no exception handle\n }\n }\n }\n if (this.httpRequest.readyState === 4) {\n if (this.httpRequest.status === 200 || this.httpRequest.status === 304) {\n resolve(this.successHandler(data));\n }\n else {\n reject(new Error(this.failureHandler(this.httpRequest.statusText)));\n }\n }\n };\n /**\n * To get the response header from XMLHttpRequest\n * @param {string} key Key to search in the response header\n * @returns {string}\n */\n Ajax.prototype.getResponseHeader = function (key) {\n var responseHeaders;\n var header;\n responseHeaders = {};\n var headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n while (headers) {\n responseHeaders[headers[1].toLowerCase()] = headers[2];\n headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n }\n header = responseHeaders[key.toLowerCase()];\n return isNullOrUndefined(header) ? null : header;\n };\n return Ajax;\n}());\nexport { Ajax };\n","import { debounce, extend } from './util';\n/**\n * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element\n * @private\n * ```html\n *
\n * \n * ```\n */\nvar EventHandler = /** @class */ (function () {\n function EventHandler() {\n }\n // to get the event data based on element\n EventHandler.addOrGetEventData = function (element) {\n if ('__eventList' in element) {\n return element.__eventList.events;\n }\n else {\n element.__eventList = {};\n return element.__eventList.events = [];\n }\n };\n /**\n * Add an event to the specified DOM element.\n * @param {any} element - Target HTML DOM element\n * @param {string} eventName - A string that specifies the name of the event\n * @param {Function} listener - Specifies the function to run when the event occurs\n * @param {Object} bindTo - A object that binds 'this' variable in the event handler\n * @param {number} debounce - Specifies at what interval given event listener should be triggered.\n * @return {Function}\n */\n EventHandler.add = function (element, eventName, listener, bindTo, intDebounce) {\n var eventData = EventHandler.addOrGetEventData(element);\n var debounceListener;\n if (intDebounce) {\n debounceListener = debounce(listener, intDebounce);\n }\n else {\n debounceListener = listener;\n }\n if (bindTo) {\n debounceListener = debounceListener.bind(bindTo);\n }\n var event = eventName.split(' ');\n for (var i = 0; i < event.length; i++) {\n eventData.push({\n name: event[i],\n listener: listener,\n debounce: debounceListener\n });\n element.addEventListener(event[i], debounceListener);\n }\n return debounceListener;\n };\n /**\n * Remove an event listener that has been attached before.\n * @param {any} element - Specifies the target html element to remove the event\n * @param {string} eventName - A string that specifies the name of the event to remove\n * @param {Function} listener - Specifies the function to remove\n * @return {void}\n */\n EventHandler.remove = function (element, eventName, listener) {\n var eventData = EventHandler.addOrGetEventData(element);\n var event = eventName.split(' ');\n var _loop_1 = function (j) {\n var index = -1;\n var debounceListener;\n if (eventData && eventData.length !== 0) {\n eventData.some(function (x, i) {\n return x.name === event[j] && x.listener === listener ?\n (index = i, debounceListener = x.debounce, true) : false;\n });\n }\n if (index !== -1) {\n eventData.splice(index, 1);\n }\n if (debounceListener) {\n element.removeEventListener(event[j], debounceListener);\n }\n };\n for (var j = 0; j < event.length; j++) {\n _loop_1(j);\n }\n };\n /**\n * Clear all the event listeners that has been previously attached to the element.\n * @param {any} element - Specifies the target html element to clear the events\n * @return {void}\n */\n EventHandler.clearEvents = function (element) {\n var eventData;\n var copyData;\n eventData = EventHandler.addOrGetEventData(element);\n copyData = extend([], copyData, eventData);\n for (var i = 0; i < copyData.length; i++) {\n element.removeEventListener(copyData[i].name, copyData[i].debounce);\n eventData.shift();\n }\n };\n /**\n * Trigger particular event of the element.\n * @param {any} element - Specifies the target html element to trigger the events\n * @param {string} eventName - Specifies the event to trigger for the specified element.\n * Can be a custom event, or any of the standard events.\n * @param {any} eventProp - Additional parameters to pass on to the event properties\n * @return {void}\n */\n EventHandler.trigger = function (element, eventName, eventProp) {\n var eventData = EventHandler.addOrGetEventData(element);\n var fn = null;\n for (var _i = 0, eventData_1 = eventData; _i < eventData_1.length; _i++) {\n var event_1 = eventData_1[_i];\n if (event_1.name === eventName) {\n event_1.debounce.call(this, eventProp);\n }\n }\n };\n return EventHandler;\n}());\nexport { EventHandler };\n","import { isNullOrUndefined, getValue } from './util';\nvar Observer = /** @class */ (function () {\n function Observer(context) {\n this.ranArray = [];\n this.boundedEvents = {};\n if (isNullOrUndefined(context)) {\n return;\n }\n this.context = context;\n }\n ;\n /**\n * To attach handler for given property in current context.\n * @param {string} property - specifies the name of the event.\n * @param {Function} handler - Specifies the handler function to be called while event notified.\n * @param {Object} context - Specifies the context binded to the handler.\n * @return {void}\n */\n Observer.prototype.on = function (property, handler, context, id) {\n if (isNullOrUndefined(handler)) {\n return;\n }\n var cntxt = context || this.context;\n if (this.notExist(property)) {\n this.boundedEvents[property] = [{ handler: handler, context: cntxt }];\n return;\n }\n if (!isNullOrUndefined(id)) {\n if (this.ranArray.indexOf(id) === -1) {\n this.ranArray.push(id);\n this.boundedEvents[property].push({ handler: handler, context: cntxt, id: id });\n }\n }\n else if (!this.isHandlerPresent(this.boundedEvents[property], handler)) {\n this.boundedEvents[property].push({ handler: handler, context: cntxt });\n }\n };\n /**\n * To remove handlers from a event attached using on() function.\n * @param {string} eventName - specifies the name of the event.\n * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.\n * @return {void}\n */\n Observer.prototype.off = function (property, handler, id) {\n if (this.notExist(property)) {\n return;\n }\n var curObject = getValue(property, this.boundedEvents);\n if (handler) {\n for (var i = 0; i < curObject.length; i++) {\n if (id) {\n curObject.splice(i, 1);\n var indexLocation = this.ranArray.indexOf(id);\n if (indexLocation !== -1) {\n this.ranArray.splice(indexLocation, 1);\n }\n break;\n }\n else if (handler === curObject[i].handler) {\n curObject.splice(i, 1);\n break;\n }\n }\n }\n else {\n delete this.boundedEvents[property];\n }\n };\n /**\n * To notify the handlers in the specified event.\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} args - Additional parameters to pass while calling the handler.\n * @return {void}\n */\n Observer.prototype.notify = function (property, argument) {\n if (this.notExist(property)) {\n return;\n }\n if (argument) {\n argument.name = property;\n }\n var curObject = getValue(property, this.boundedEvents).slice(0);\n for (var _i = 0, curObject_1 = curObject; _i < curObject_1.length; _i++) {\n var cur = curObject_1[_i];\n cur.handler.call(cur.context, argument);\n }\n };\n /**\n * To destroy handlers in the event\n */\n Observer.prototype.destroy = function () {\n this.boundedEvents = this.context = undefined;\n };\n /**\n * Returns if the property exists.\n */\n Observer.prototype.notExist = function (prop) {\n return this.boundedEvents.hasOwnProperty(prop) === false;\n };\n /**\n * Returns if the handler is present.\n */\n Observer.prototype.isHandlerPresent = function (boundedEvents, handler) {\n for (var _i = 0, boundedEvents_1 = boundedEvents; _i < boundedEvents_1.length; _i++) {\n var cur = boundedEvents_1[_i];\n if (cur.handler === handler) {\n return true;\n }\n }\n return false;\n };\n return Observer;\n}());\nexport { Observer };\n","import { isUndefined, isNullOrUndefined, merge, setImmediate, setValue } from './util';\nimport { addClass, removeClass } from './dom';\nimport { Observer } from './observer';\n/* tslint:enable:no-any */\n/**\n * Base library module is common module for Framework modules like touch,keyboard and etc.,\n * @private\n */\nvar Base = /** @class */ (function () {\n /**\n * Base constructor accept options and element\n */\n function Base(options, element) {\n this.isProtectedOnChange = true;\n this.properties = {};\n this.changedProperties = {};\n this.oldProperties = {};\n this.refreshing = false;\n // tslint:disable-next-line:no-empty\n this.finalUpdate = function () { };\n this.childChangedProperties = {};\n this.modelObserver = new Observer(this);\n if (!isUndefined(element)) {\n if ('string' === typeof (element)) {\n this.element = document.querySelector(element);\n }\n else {\n this.element = element;\n }\n if (!isNullOrUndefined(this.element)) {\n this.isProtectedOnChange = false;\n this.addInstance();\n }\n }\n if (!isUndefined(options)) {\n this.setProperties(options, true);\n }\n this.isDestroyed = false;\n }\n /** Property base section */\n /**\n * Function used to set bunch of property at a time.\n * @private\n * @param {Object} prop - JSON object which holds components properties.\n * @param {boolean} muteOnChange? - Specifies to true when we set properties.\n */\n Base.prototype.setProperties = function (prop, muteOnChange) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = !!muteOnChange;\n merge(this, prop);\n if (muteOnChange !== true) {\n merge(this.changedProperties, prop);\n this.dataBind();\n }\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.isProtectedOnChange = prevDetection;\n };\n ;\n /**\n * Calls for child element data bind\n * @param {Object} obj\n * @param {Object} parent\n * @returns {void}\n */\n // tslint:disable-next-line:no-any\n Base.callChildDataBind = function (obj, parent) {\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (parent[key] instanceof Array) {\n for (var _a = 0, _b = parent[key]; _a < _b.length; _a++) {\n var obj_1 = _b[_a];\n if (obj_1.dataBind !== undefined) {\n obj_1.dataBind();\n }\n }\n }\n else {\n parent[key].dataBind();\n }\n }\n };\n Base.prototype.clearChanges = function () {\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.childChangedProperties = {};\n };\n /**\n * Bind property changes immediately to components\n */\n Base.prototype.dataBind = function () {\n Base.callChildDataBind(this.childChangedProperties, this);\n if (Object.getOwnPropertyNames(this.changedProperties).length) {\n var prevDetection = this.isProtectedOnChange;\n var newChanges = this.changedProperties;\n var oldChanges = this.oldProperties;\n this.clearChanges();\n this.isProtectedOnChange = true;\n this.onPropertyChanged(newChanges, oldChanges);\n this.isProtectedOnChange = prevDetection;\n }\n };\n ;\n Base.prototype.saveChanges = function (key, newValue, oldValue) {\n if (this.isProtectedOnChange) {\n return;\n }\n this.oldProperties[key] = oldValue;\n this.changedProperties[key] = newValue;\n this.finalUpdate();\n this.finalUpdate = setImmediate(this.dataBind.bind(this));\n };\n ;\n /** Event Base Section */\n /**\n * Adds the handler to the given event listener.\n * @param {string} eventName - A String that specifies the name of the event\n * @param {Function} listener - Specifies the call to run when the event occurs.\n * @return {void}\n */\n Base.prototype.addEventListener = function (eventName, handler) {\n this.modelObserver.on(eventName, handler);\n };\n /**\n * Removes the handler from the given event listener.\n * @param {string} eventName - A String that specifies the name of the event to remove\n * @param {Function} listener - Specifies the function to remove\n * @return {void}\n */\n Base.prototype.removeEventListener = function (eventName, handler) {\n this.modelObserver.off(eventName, handler);\n };\n /**\n * Triggers the handlers in the specified event.\n * @private\n * @param {string} eventName - Specifies the event to trigger for the specified component properties.\n * Can be a custom event, or any of the standard events.\n * @param {Event} eventProp - Additional parameters to pass on to the event properties\n * @return {void}\n */\n Base.prototype.trigger = function (eventName, eventProp) {\n if (this.isDestroyed !== true) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = false;\n this.modelObserver.notify(eventName, eventProp);\n this.isProtectedOnChange = prevDetection;\n }\n };\n /**\n * To maintain instance in base class\n */\n Base.prototype.addInstance = function () {\n // Add module class to the root element\n var moduleClass = 'e-' + this.getModuleName().toLowerCase();\n addClass([this.element], ['e-control', moduleClass]);\n if (!isNullOrUndefined(this.element.ej2_instances)) {\n this.element.ej2_instances.push(this);\n }\n else {\n setValue('ej2_instances', [this], this.element);\n }\n };\n /**\n * To remove the instance from the element\n */\n Base.prototype.destroy = function () {\n var _this = this;\n this.element.ej2_instances =\n this.element.ej2_instances.filter(function (i) { return i !== _this; });\n removeClass([this.element], ['e-' + this.getModuleName()]);\n if (this.element.ej2_instances.length === 0) {\n // Remove module class from the root element\n removeClass([this.element], ['e-control']);\n }\n this.clearChanges();\n this.modelObserver.destroy();\n this.isDestroyed = true;\n };\n return Base;\n}());\nexport { Base };\n","import { isUndefined } from './util';\nvar REGX_MOBILE = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i;\nvar REGX_IE = /msie|trident/i;\nvar REGX_IE11 = /Trident\\/7\\./;\nvar REGX_IOS = /(ipad|iphone|ipod touch)/i;\nvar REGX_IOS7 = /(ipad|iphone|ipod touch);.*os 7_\\d|(ipad|iphone|ipod touch);.*os 8_\\d/i;\nvar REGX_ANDROID = /android/i;\nvar REGX_WINDOWS = /trident|windows phone|edge/i;\nvar REGX_VERSION = /(version)[ \\/]([\\w.]+)/i;\nvar REGX_BROWSER = {\n OPERA: /(opera|opr)(?:.*version|)[ \\/]([\\w.]+)/i,\n EDGE: /(edge)(?:.*version|)[ \\/]([\\w.]+)/i,\n CHROME: /(chrome|crios)[ \\/]([\\w.]+)/i,\n PANTHOMEJS: /(phantomjs)[ \\/]([\\w.]+)/i,\n SAFARI: /(safari)[ \\/]([\\w.]+)/i,\n WEBKIT: /(webkit)[ \\/]([\\w.]+)/i,\n MSIE: /(msie|trident) ([\\w.]+)/i,\n MOZILLA: /(mozilla)(?:.*? rv:([\\w.]+)|)/i\n};\n/* istanbul ignore else */\nif (typeof window !== 'undefined') {\n window.browserDetails = window.browserDetails || {};\n}\n/**\n * Get configuration details for Browser\n * @private\n */\nvar Browser = /** @class */ (function () {\n function Browser() {\n }\n Browser.extractBrowserDetail = function () {\n var browserInfo = { culture: {} };\n var keys = Object.keys(REGX_BROWSER);\n var clientInfo = [];\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n clientInfo = Browser.userAgent.match(REGX_BROWSER[key]);\n if (clientInfo) {\n browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase());\n browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name);\n browserInfo.version = clientInfo[2];\n browserInfo.culture.name = browserInfo.culture.language = navigator.language;\n if (!!Browser.userAgent.match(REGX_IE11)) {\n browserInfo.name = 'msie';\n break;\n }\n var version = Browser.userAgent.match(REGX_VERSION);\n if (browserInfo.name === 'safari' && version) {\n browserInfo.version = version[2];\n }\n break;\n }\n }\n return browserInfo;\n };\n /**\n * To get events from the browser\n * @param {string} event - type of event triggered.\n * @returns {Boolean}\n */\n Browser.getEvent = function (event) {\n // tslint:disable-next-line:no-any\n var events = {\n start: {\n isPointer: 'pointerdown', isTouch: 'touchstart', isDevice: 'mousedown'\n },\n move: {\n isPointer: 'pointermove', isTouch: 'touchmove', isDevice: 'mousemove'\n },\n end: {\n isPointer: 'pointerup', isTouch: 'touchend', isDevice: 'mouseup'\n }\n };\n return (Browser.isPointer ? events[event].isPointer :\n (Browser.isTouch ? events[event].isTouch + (!Browser.isDevice ? ' ' + events[event].isDevice : '')\n : events[event].isDevice));\n };\n /**\n * To get the Touch start event from browser\n * @returns {string}\n */\n Browser.getTouchStartEvent = function () {\n return Browser.getEvent('start');\n };\n /**\n * To get the Touch end event from browser\n * @returns {string}\n */\n Browser.getTouchEndEvent = function () {\n return Browser.getEvent('end');\n };\n /**\n * To get the Touch move event from browser\n * @returns {string}\n */\n Browser.getTouchMoveEvent = function () {\n return Browser.getEvent('move');\n };\n /**\n * To get the value based on provided key and regX\n * @param {string} key\n * @param {RegExp} regX\n * @returns {Object}\n */\n Browser.getValue = function (key, regX) {\n var browserDetails = window.browserDetails;\n if ('undefined' === typeof browserDetails[key]) {\n return browserDetails[key] = regX.test(Browser.userAgent);\n }\n return browserDetails[key];\n };\n Object.defineProperty(Browser, \"userAgent\", {\n get: function () {\n return Browser.uA;\n },\n //Properties \n /**\n * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.\n * Also we can set our own userAgent.\n */\n set: function (uA) {\n Browser.uA = uA;\n window.browserDetails = {};\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"info\", {\n //Read Only Properties\n /**\n * Property is to get the browser information like Name, Version and Language\n * @returns BrowserInfo\n */\n get: function () {\n if (isUndefined(window.browserDetails.info)) {\n return window.browserDetails.info = Browser.extractBrowserDetail();\n }\n return window.browserDetails.info;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIE\", {\n /**\n * Property is to get whether the userAgent is based IE.\n */\n get: function () {\n return Browser.getValue('isIE', REGX_IE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isTouch\", {\n /**\n * Property is to get whether the browser has touch support.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isTouch)) {\n return window.browserDetails.isTouch = ('ontouchstart' in window);\n }\n return window.browserDetails.isTouch;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isPointer\", {\n /**\n * Property is to get whether the browser has Pointer support.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isPointer)) {\n return window.browserDetails.isPointer = ('pointerEnabled' in window.navigator);\n }\n return window.browserDetails.isPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isMSPointer\", {\n /**\n * Property is to get whether the browser has MSPointer support.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isMSPointer)) {\n return window.browserDetails.isMSPointer = ('msPointerEnabled' in window.navigator);\n }\n return window.browserDetails.isMSPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isDevice\", {\n /**\n * Property is to get whether the userAgent is device based.\n */\n get: function () {\n return Browser.getValue('isDevice', REGX_MOBILE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos\", {\n /**\n * Property is to get whether the userAgent is IOS.\n */\n get: function () {\n return Browser.getValue('isIos', REGX_IOS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos7\", {\n /**\n * Property is to get whether the userAgent is Ios7.\n */\n get: function () {\n return Browser.getValue('isIos7', REGX_IOS7);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isAndroid\", {\n /**\n * Property is to get whether the userAgent is Android.\n */\n get: function () {\n return Browser.getValue('isAndroid', REGX_ANDROID);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWebView\", {\n /**\n * Property is to identify whether application ran in web view.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isWebView)) {\n window.browserDetails.isWebView = !(isUndefined(window.cordova) && isUndefined(window.PhoneGap)\n && isUndefined(window.phonegap) && window.forge !== 'object');\n return window.browserDetails.isWebView;\n }\n return window.browserDetails.isWebView;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWindows\", {\n /**\n * Property is to get whether the userAgent is Windows.\n */\n get: function () {\n return Browser.getValue('isWindows', REGX_WINDOWS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchStartEvent\", {\n /**\n * Property is to get the touch start event. It returns event name based on browser.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchStartEvent)) {\n return window.browserDetails.touchStartEvent = Browser.getTouchStartEvent();\n }\n return window.browserDetails.touchStartEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchMoveEvent\", {\n /**\n * Property is to get the touch move event. It returns event name based on browser.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchMoveEvent)) {\n return window.browserDetails.touchMoveEvent = Browser.getTouchMoveEvent();\n }\n return window.browserDetails.touchMoveEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchEndEvent\", {\n /**\n * Property is to get the touch end event. It returns event name based on browser.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchEndEvent)) {\n return window.browserDetails.touchEndEvent = Browser.getTouchEndEvent();\n }\n return window.browserDetails.touchEndEvent;\n },\n enumerable: true,\n configurable: true\n });\n /* istanbul ignore next */\n Browser.uA = typeof navigator !== 'undefined' ? navigator.userAgent : '';\n return Browser;\n}());\nexport { Browser };\n","import { defaultCurrencyCode } from '../internationalization';\nimport { getValue, isNullOrUndefined, extend } from '../util';\nimport { ParserBase as parser } from './parser-base';\nimport { DateFormat } from './date-formatter';\nimport { NumberFormat } from './number-formatter';\n/**\n * Date base common constants and function for date parser and formatter.\n */\nexport var IntlBase;\n(function (IntlBase) {\n // tslint:disable-next-line:max-line-length\n IntlBase.negativeDataRegex = /^(('[^']+'|''|[^*#@0,.E])*)(\\*.)?((([#,]*[0,]*0+)(\\.0*[0-9]*#*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.customRegex = /^(('[^']+'|''|[^*#@0,.])*)(\\*.)?((([0#,]*[0,]*[0#]*)(\\.[0#]*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.latnParseRegex = /0|1|2|3|4|5|6|7|8|9/g;\n var fractionRegex = /[0-9]/g;\n IntlBase.defaultCurrency = '$';\n var mapper = ['infinity', 'nan', 'group', 'decimal'];\n var patternRegex = /G|M|L|H|c|'| a|yy|y|EEEE|E/g;\n var patternMatch = {\n 'G': '',\n 'M': 'm',\n 'L': 'm',\n 'H': 'h',\n 'c': 'd',\n '\\'': '\"',\n ' a': ' AM/PM',\n 'yy': 'yy',\n 'y': 'yyyy',\n 'EEEE': 'dddd',\n 'E': 'ddd'\n };\n IntlBase.formatRegex = /(^[ncpae]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.currencyFormatRegex = /(^[ca]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.curWithoutNumberRegex = /(c|a)$/ig;\n var typeMapper = {\n '$': 'isCurrency',\n '%': 'isPercent',\n '-': 'isNegative',\n 0: 'nlead',\n 1: 'nend'\n };\n IntlBase.dateParseRegex = /([a-z])\\1*|'([^']|'')+'|''|./gi;\n IntlBase.basicPatterns = ['short', 'medium', 'long', 'full'];\n /* tslint:disable:quotemark */\n IntlBase.defaultObject = {\n 'dates': {\n 'calendars': {\n 'gregorian': {\n 'months': {\n 'stand-alone': {\n 'abbreviated': {\n '1': 'Jan',\n '2': 'Feb',\n '3': 'Mar',\n '4': 'Apr',\n '5': 'May',\n '6': 'Jun',\n '7': 'Jul',\n '8': 'Aug',\n '9': 'Sep',\n '10': 'Oct',\n '11': 'Nov',\n '12': 'Dec'\n },\n 'narrow': {\n '1': 'J',\n '2': 'F',\n '3': 'M',\n '4': 'A',\n '5': 'M',\n '6': 'J',\n '7': 'J',\n '8': 'A',\n '9': 'S',\n '10': 'O',\n '11': 'N',\n '12': 'D'\n },\n 'wide': {\n '1': 'January',\n '2': 'February',\n '3': 'March',\n '4': 'April',\n '5': 'May',\n '6': 'June',\n '7': 'July',\n '8': 'August',\n '9': 'September',\n '10': 'October',\n '11': 'November',\n '12': 'December'\n }\n }\n },\n \"days\": {\n \"stand-alone\": {\n \"abbreviated\": {\n \"sun\": \"Sun\",\n \"mon\": \"Mon\",\n \"tue\": \"Tue\",\n \"wed\": \"Wed\",\n \"thu\": \"Thu\",\n \"fri\": \"Fri\",\n \"sat\": \"Sat\"\n },\n \"narrow\": {\n \"sun\": \"S\",\n \"mon\": \"M\",\n \"tue\": \"T\",\n \"wed\": \"W\",\n \"thu\": \"T\",\n \"fri\": \"F\",\n \"sat\": \"S\"\n },\n \"short\": {\n \"sun\": \"Su\",\n \"mon\": \"Mo\",\n \"tue\": \"Tu\",\n \"wed\": \"We\",\n \"thu\": \"Th\",\n \"fri\": \"Fr\",\n \"sat\": \"Sa\"\n },\n \"wide\": {\n \"sun\": \"Sunday\",\n \"mon\": \"Monday\",\n \"tue\": \"Tuesday\",\n \"wed\": \"Wednesday\",\n \"thu\": \"Thursday\",\n \"fri\": \"Friday\",\n \"sat\": \"Saturday\"\n }\n }\n },\n \"dayPeriods\": {\n \"format\": {\n \"wide\": {\n \"am\": \"AM\",\n \"pm\": \"PM\"\n }\n }\n },\n 'eras': {\n 'eraNames': {\n '0': 'Before Christ',\n '0-alt-variant': 'Before Common Era',\n '1': 'Anno Domini',\n \"1-alt-variant\": \"Common Era\"\n },\n 'eraAbbr': {\n '0': 'BC',\n '0-alt-variant': 'BCE',\n '1': 'AD',\n '1-alt-variant': 'CE'\n },\n 'eraNarrow': {\n '0': 'B',\n '0-alt-variant': 'BCE',\n '1': 'A',\n '1-alt-variant': 'CE'\n }\n },\n 'dateFormats': {\n 'full': 'EEEE, MMMM d, y',\n 'long': 'MMMM d, y',\n 'medium': 'MMM d, y',\n 'short': 'M/d/yy'\n },\n 'timeFormats': {\n 'full': 'h:mm:ss a zzzz',\n 'long': 'h:mm:ss a z',\n 'medium': 'h:mm:ss a',\n 'short': 'h:mm a'\n },\n 'dateTimeFormats': {\n 'full': \"{1} 'at' {0}\",\n 'long': \"{1} 'at' {0}\",\n 'medium': '{1}, {0}',\n 'short': '{1}, {0}',\n 'availableFormats': {\n 'd': 'd',\n 'E': 'ccc',\n 'Ed': 'd E',\n 'Ehm': 'E h:mm a',\n 'EHm': 'E HH:mm',\n 'Ehms': 'E h:mm:ss a',\n 'EHms': 'E HH:mm:ss',\n 'Gy': 'y G',\n 'GyMMM': 'MMM y G',\n 'GyMMMd': 'MMM d, y G',\n 'GyMMMEd': 'E, MMM d, y G',\n 'h': 'h a',\n 'H': 'HH',\n 'hm': 'h:mm a',\n 'Hm': 'HH:mm',\n 'hms': 'h:mm:ss a',\n 'Hms': 'HH:mm:ss',\n 'hmsv': 'h:mm:ss a v',\n 'Hmsv': 'HH:mm:ss v',\n 'hmv': 'h:mm a v',\n 'Hmv': 'HH:mm v',\n 'M': 'L',\n 'Md': 'M/d',\n 'MEd': 'E, M/d',\n 'MMM': 'LLL',\n 'MMMd': 'MMM d',\n 'MMMEd': 'E, MMM d',\n 'MMMMd': 'MMMM d',\n 'ms': 'mm:ss',\n 'y': 'y',\n 'yM': 'M/y',\n 'yMd': 'M/d/y',\n 'yMEd': 'E, M/d/y',\n 'yMMM': 'MMM y',\n 'yMMMd': 'MMM d, y',\n 'yMMMEd': 'E, MMM d, y',\n 'yMMMM': 'MMMM y',\n },\n }\n }\n },\n 'timeZoneNames': {\n \"hourFormat\": \"+HH:mm;-HH:mm\",\n \"gmtFormat\": \"GMT{0}\",\n \"gmtZeroFormat\": \"GMT\",\n }\n },\n 'numbers': {\n 'currencies': {\n 'USD': {\n 'displayName': 'US Dollar',\n 'symbol': '$',\n 'symbol-alt-narrow': '$'\n },\n 'EUR': {\n 'displayName': 'Euro',\n 'symbol': '€',\n 'symbol-alt-narrow': '€'\n },\n 'GBP': {\n 'displayName': 'British Pound',\n 'symbol-alt-narrow': '£'\n },\n },\n 'defaultNumberingSystem': 'latn',\n 'minimumGroupingDigits': '1',\n 'symbols-numberSystem-latn': {\n 'decimal': '.',\n 'group': ',',\n 'list': ';',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'exponential': 'E',\n 'superscriptingExponent': '×',\n 'perMille': '‰',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'timeSeparator': ':'\n },\n 'decimalFormats-numberSystem-latn': {\n 'standard': '#,##0.###',\n },\n 'percentFormats-numberSystem-latn': {\n 'standard': '#,##0%'\n },\n 'currencyFormats-numberSystem-latn': {\n 'standard': '¤#,##0.00',\n 'accounting': '¤#,##0.00;(¤#,##0.00)'\n },\n 'scientificFormats-numberSystem-latn': {\n 'standard': '#E0'\n }\n }\n };\n /* tslint:enable:quotemark */\n IntlBase.monthIndex = {\n 3: 'abbreviated',\n 4: 'wide',\n 5: 'narrow',\n 1: 'abbreviated'\n };\n /**\n *\n */\n IntlBase.month = 'months';\n IntlBase.days = 'days';\n /**\n * Default numerber Object\n */\n IntlBase.patternMatcher = {\n C: 'currency',\n P: 'percent',\n N: 'decimal',\n A: 'currency',\n E: 'scientific'\n };\n /**\n * Returns the resultant pattern based on the skeleton, dateObject and the type provided\n * @private\n * @param {string} skeleton\n * @param {Object} dateObject\n * @param {string} type\n * @returns {string}\n */\n function getResultantPattern(skeleton, dateObject, type) {\n var resPattern;\n var iType = type || 'date';\n if (IntlBase.basicPatterns.indexOf(skeleton) !== -1) {\n resPattern = getValue(iType + 'Formats.' + skeleton, dateObject);\n if (iType === 'dateTime') {\n var dPattern = getValue('dateFormats.' + skeleton, dateObject);\n var tPattern = getValue('timeFormats.' + skeleton, dateObject);\n resPattern = resPattern.replace('{1}', dPattern).replace('{0}', tPattern);\n }\n }\n else {\n resPattern = getValue('dateTimeFormats.availableFormats.' + skeleton, dateObject);\n }\n return resPattern;\n }\n IntlBase.getResultantPattern = getResultantPattern;\n /**\n * Returns the dependable object for provided cldr data and culture\n * @private\n * @param {Object} cldr\n * @param {string} culture\n * @param {boolean} isNumber\n * @returns {Dependables}\n */\n function getDependables(cldr, culture, isNumber) {\n var ret = {};\n ret.parserObject = parser.getMainObject(cldr, culture) || IntlBase.defaultObject;\n if (isNumber) {\n ret.numericObject = getValue('numbers', ret.parserObject);\n }\n else {\n ret.dateObject = getValue('dates.calendars.gregorian', ret.parserObject);\n }\n return ret;\n }\n IntlBase.getDependables = getDependables;\n /**\n * Returns the symbol pattern for provided parameters\n * @private\n * @param {string} type\n * @param {string} numSystem\n * @param {Object} obj\n * @param {boolean} isAccount\n * @returns {string}\n */\n function getSymbolPattern(type, numSystem, obj, isAccount) {\n return getValue(type + 'Formats-numberSystem-' +\n numSystem + (isAccount ? '.accounting' : '.standard'), obj) || (isAccount ? getValue(type + 'Formats-numberSystem-' +\n numSystem + '.standard', obj) : '');\n }\n IntlBase.getSymbolPattern = getSymbolPattern;\n /**\n * Returns proper numeric skeleton\n * @private\n * @param {string} skeleton\n * @returns {NumericSkeleton}\n */\n function getProperNumericSkeleton(skeleton) {\n var matches = skeleton.match(IntlBase.formatRegex);\n var ret = {};\n var pattern = matches[1].toUpperCase();\n ret.isAccount = (pattern === 'A');\n /* tslint:disable no-any */\n ret.type = IntlBase.patternMatcher[pattern];\n if (skeleton.length > 1) {\n ret.fractionDigits = parseInt(matches[2], 10);\n }\n return ret;\n }\n IntlBase.getProperNumericSkeleton = getProperNumericSkeleton;\n /**\n * Returns format data for number formatting like minimum fraction, maximum fraction, etc..,\n * @private\n * @param {string} pattern\n * @param {boolean} needFraction\n * @param {string} cSymbol\n * @param {boolean} fractionOnly\n * @returns {NegativeData}\n */\n function getFormatData(pattern, needFraction, cSymbol, fractionOnly) {\n var nData = fractionOnly ? {} : { nlead: '', nend: '' };\n var match = pattern.match(IntlBase.customRegex);\n if (match) {\n if (!fractionOnly) {\n nData.nlead = changeCurrencySymbol(match[1], cSymbol);\n nData.nend = changeCurrencySymbol(match[10], cSymbol);\n nData.groupPattern = match[4];\n }\n var fraction = match[7];\n if (fraction && needFraction) {\n var fmatch = fraction.match(fractionRegex);\n if (!isNullOrUndefined(fmatch)) {\n nData.minimumFraction = fmatch.length;\n }\n else {\n nData.minimumFraction = 0;\n }\n nData.maximumFraction = fraction.length - 1;\n }\n }\n return nData;\n }\n IntlBase.getFormatData = getFormatData;\n /**\n * Changes currency symbol\n * @private\n * @param {string} val\n * @param {string} sym\n * @returns {string}\n */\n function changeCurrencySymbol(val, sym) {\n if (val) {\n return val.replace(IntlBase.defaultCurrency, sym);\n }\n return '';\n }\n /**\n * Returns currency symbol based on currency code\n * @private\n * @param {Object} numericObject\n * @param {string} currencyCode\n * @returns {string}\n */\n function getCurrencySymbol(numericObject, currencyCode) {\n return getValue('currencies.' + currencyCode + '.symbol', numericObject) || '$';\n }\n IntlBase.getCurrencySymbol = getCurrencySymbol;\n /**\n * Returns formatting options for custom number format\n * @private\n * @param {string} format\n * @param {CommonOptions} dOptions\n * @param {Dependables} obj\n * @returns {GenericFormatOptions}\n */\n function customFormat(format, dOptions, obj) {\n var options = {};\n var formatSplit = format.split(';');\n var data = ['pData', 'nData', 'zeroData'];\n for (var i = 0; i < formatSplit.length; i++) {\n options[data[i]] = customNumberFormat(formatSplit[i], dOptions, obj);\n }\n if (isNullOrUndefined(options.nData)) {\n options.nData = extend({}, options.pData);\n options.nData.nlead = isNullOrUndefined(dOptions) ? '-' + options.nData.nlead : dOptions.minusSymbol + options.nData.nlead;\n }\n return options;\n }\n IntlBase.customFormat = customFormat;\n /**\n * Returns custom formatting options\n * @private\n * @param {string} format\n * @param {CommonOptions} dOptions\n * @param {Object} numObject\n * @returns {NegativeData}\n */\n function customNumberFormat(format, dOptions, numObject) {\n var cOptions = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 };\n var pattern = format.match(IntlBase.customRegex);\n if (isNullOrUndefined(pattern) || (pattern[5] === '' && format !== 'N/A')) {\n cOptions.type = undefined;\n }\n cOptions.nlead = pattern[1];\n cOptions.nend = pattern[10];\n var integerPart = pattern[6];\n cOptions.useGrouping = integerPart.indexOf(',') !== -1;\n integerPart = integerPart.replace(/,/g, '');\n var fractionPart = pattern[7];\n if (integerPart.indexOf('0') !== -1) {\n cOptions.minimumIntegerDigits = integerPart.length - integerPart.indexOf('0');\n }\n if (!isNullOrUndefined(fractionPart)) {\n cOptions.minimumFractionDigits = fractionPart.lastIndexOf('0');\n cOptions.maximumFractionDigits = fractionPart.lastIndexOf('#');\n if (cOptions.minimumFractionDigits === -1) {\n cOptions.minimumFractionDigits = 0;\n }\n if (cOptions.maximumFractionDigits === -1 || cOptions.maximumFractionDigits < cOptions.minimumFractionDigits) {\n cOptions.maximumFractionDigits = cOptions.minimumFractionDigits;\n }\n }\n if (!isNullOrUndefined(dOptions)) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '$', dOptions.currencySymbol));\n if (!cOptions.isCurrency) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', dOptions.percentSymbol));\n }\n }\n else {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', '%'));\n }\n if (!isNullOrUndefined(numObject)) {\n var symbolPattern = getSymbolPattern(cOptions.type, dOptions.numberMapper.numberSystem, numObject, false);\n if (cOptions.useGrouping) {\n cOptions.groupSeparator = dOptions.numberMapper.numberSymbols[mapper[2]];\n cOptions.groupData = NumberFormat.getGroupingDetails(symbolPattern.split(';')[0]);\n }\n cOptions.nlead = cOptions.nlead.replace(/\\'/g, '');\n cOptions.nend = cOptions.nend.replace(/\\'/g, '');\n }\n return cOptions;\n }\n /**\n * Returns formatting options for currency or percent type\n * @private\n * @param {string[]} parts\n * @param {string} actual\n * @param {string} symbol\n * @returns {NegativeData}\n */\n function isCurrencyPercent(parts, actual, symbol) {\n var options = { nlead: parts[0], nend: parts[1] };\n for (var i = 0; i < 2; i++) {\n var part = parts[i];\n var loc = part.indexOf(actual);\n if ((loc !== -1) && ((loc < part.indexOf('\\'')) || (loc > part.lastIndexOf('\\'')))) {\n options[typeMapper[i]] = part.substr(0, loc) + symbol + part.substr(loc + 1);\n options[typeMapper[actual]] = true;\n options.type = options.isCurrency ? 'currency' : 'percent';\n break;\n }\n }\n return options;\n }\n IntlBase.isCurrencyPercent = isCurrencyPercent;\n /**\n * Returns culture based date separator\n * @private\n * @param {Object} dateObj\n * @returns {string}\n */\n function getDateSeparator(dateObj) {\n var value = (getValue('dateFormats.short', dateObj) || '').match(/[dM]([^dM])[dM]/i);\n return value ? value[1] : '/';\n }\n IntlBase.getDateSeparator = getDateSeparator;\n /**\n * Returns Native Date Time pattern\n * @private\n * @param {string} culture\n * @param {DateFormatOptions} options\n * @param {Object} cldr\n * @returns {string}\n */\n function getActualDateTimeFormat(culture, options, cldr, isExcelFormat) {\n var dependable = getDependables(cldr, culture);\n var actualPattern = options.format || getResultantPattern(options.skeleton, dependable.dateObject, options.type);\n if (isExcelFormat) {\n actualPattern = actualPattern.replace(patternRegex, function (pattern) {\n return patternMatch[pattern];\n });\n if (actualPattern.indexOf('z') !== -1) {\n var tLength = actualPattern.match(/z/g).length;\n var timeZonePattern = void 0;\n var options_1 = { 'timeZone': {} };\n options_1.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n options_1.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n var value = new Date();\n var timezone = value.getTimezoneOffset();\n var pattern = (tLength < 4) ? '+H;-H' : options_1.timeZone.hourFormat;\n pattern = pattern.replace(/:/g, options_1.numMapper.timeSeparator);\n if (timezone === 0) {\n timeZonePattern = options_1.timeZone.gmtZeroFormat;\n }\n else {\n timeZonePattern = DateFormat.getTimeZoneValue(timezone, pattern);\n timeZonePattern = options_1.timeZone.gmtFormat.replace(/\\{0\\}/, timeZonePattern);\n }\n actualPattern = actualPattern.replace(/[z]+/, '\"' + timeZonePattern + '\"');\n }\n actualPattern = actualPattern.replace(/ $/, '');\n }\n return actualPattern;\n }\n IntlBase.getActualDateTimeFormat = getActualDateTimeFormat;\n /**\n * Returns Native Number pattern\n * @private\n * @param {string} culture\n * @param {NumberFormatOptions} options\n * @param {Object} cldr\n * @returns {string}\n */\n function getActualNumberFormat(culture, options, cldr) {\n var dependable = getDependables(cldr, culture, true);\n var parseOptions = { custom: true };\n var minFrac;\n var curObj = {};\n var curMatch = (options.format || '').match(IntlBase.currencyFormatRegex);\n if (curMatch) {\n var dOptions = {};\n dOptions.numberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n var curCode = getCurrencySymbol(dependable.numericObject, options.currency || defaultCurrencyCode);\n var symbolPattern = getSymbolPattern('currency', dOptions.numberMapper.numberSystem, dependable.numericObject, (/a/i).test(options.format));\n symbolPattern = symbolPattern.replace(/\\u00A4/g, curCode);\n var split = symbolPattern.split(';');\n curObj.hasNegativePattern = (split.length > 1);\n curObj.nData = getFormatData(split[1] || '-' + split[0], true, curCode);\n curObj.pData = getFormatData(split[0], false, curCode);\n if (!curMatch[2] && !options.minimumFractionDigits && !options.maximumFractionDigits) {\n minFrac = getFormatData(symbolPattern.split(';')[0], true, '', true).minimumFraction;\n }\n }\n var actualPattern;\n if ((IntlBase.formatRegex.test(options.format)) || !(options.format)) {\n extend(parseOptions, getProperNumericSkeleton(options.format || 'N'));\n parseOptions.custom = false;\n actualPattern = '###0';\n if (parseOptions.fractionDigits || options.minimumFractionDigits || options.maximumFractionDigits || minFrac) {\n var defaultMinimum = 0;\n if (parseOptions.fractionDigits) {\n options.minimumFractionDigits = options.maximumFractionDigits = parseOptions.fractionDigits;\n }\n actualPattern = fractionDigitsPattern(actualPattern, minFrac || parseOptions.fractionDigits ||\n options.minimumFractionDigits || defaultMinimum, options.maximumFractionDigits || defaultMinimum);\n }\n if (options.minimumIntegerDigits) {\n actualPattern = minimumIntegerPattern(actualPattern, options.minimumIntegerDigits);\n }\n if (options.useGrouping) {\n actualPattern = groupingPattern(actualPattern);\n }\n if (parseOptions.type === 'currency') {\n var cPattern = actualPattern;\n actualPattern = curObj.pData.nlead + cPattern + curObj.pData.nend;\n if (curObj.hasNegativePattern) {\n actualPattern += ';' + curObj.nData.nlead + cPattern + curObj.nData.nend;\n }\n }\n if (parseOptions.type === 'percent') {\n actualPattern += ' %';\n }\n }\n else {\n actualPattern = options.format.replace(/\\'/g, '\"');\n }\n return actualPattern;\n }\n IntlBase.getActualNumberFormat = getActualNumberFormat;\n function fractionDigitsPattern(pattern, minDigits, maxDigits) {\n pattern += '.';\n for (var a = 0; a < minDigits; a++) {\n pattern += '0';\n }\n if (minDigits < maxDigits) {\n var diff = maxDigits - minDigits;\n for (var b = 0; b < diff; b++) {\n pattern += '#';\n }\n }\n return pattern;\n }\n function minimumIntegerPattern(pattern, digits) {\n var temp = pattern.split('.');\n var integer = '';\n for (var x = 0; x < digits; x++) {\n integer += '0';\n }\n return temp[1] ? (integer + '.' + temp[1]) : integer;\n }\n function groupingPattern(pattern) {\n var temp = pattern.split('.');\n var integer = temp[0];\n var no = 3 - integer.length % 3;\n var hash = (no && no === 1) ? '#' : (no === 2 ? '##' : '');\n integer = hash + integer;\n pattern = '';\n for (var x = integer.length - 1; x > 0; x = x - 3) {\n pattern = ',' + integer[x - 2] + integer[x - 1] + integer[x] + pattern;\n }\n pattern = pattern.slice(1);\n return temp[1] ? (pattern + '.' + temp[1]) : pattern;\n }\n})(IntlBase || (IntlBase = {}));\n","/**\n * To import utils\n */\nimport { isNullOrUndefined } from './util';\n/**\n * @private\n */\nvar CanvasRenderer = /** @class */ (function () {\n /* End-Properties */\n function CanvasRenderer(rootID) {\n this.rootId = rootID;\n }\n // method to get the attributes value\n /* tslint:disable */\n CanvasRenderer.prototype.getOptionValue = function (options, key) {\n return options[key];\n };\n /* tslint:enable */\n /**\n * To create a Html5 canvas element\n * @param {BaseAttibutes} options - Options to create canvas\n * @return {HTMLCanvasElement}\n */\n CanvasRenderer.prototype.createCanvas = function (options) {\n var canvasObj = document.createElement('canvas');\n canvasObj.setAttribute('id', this.rootId + '_canvas');\n this.ctx = canvasObj.getContext('2d');\n this.canvasObj = canvasObj;\n this.setCanvasSize(options.width, options.height);\n return this.canvasObj;\n };\n /**\n * To set the width and height for the Html5 canvas element\n * @param {number} width - width of the canvas\n * @param {number} height - height of the canvas\n * @return {void}\n */\n CanvasRenderer.prototype.setCanvasSize = function (width, height) {\n var element = document.getElementById(this.rootId);\n var size = !isNullOrUndefined(element) ? element.getBoundingClientRect() : null;\n if (isNullOrUndefined(this.width)) {\n this.canvasObj.setAttribute('width', width ? width.toString() : size.width.toString());\n }\n else {\n this.canvasObj.setAttribute('width', this.width.toString());\n }\n if (isNullOrUndefined(this.height)) {\n this.canvasObj.setAttribute('height', height ? height.toString() : '450');\n }\n else {\n this.canvasObj.setAttribute('height', this.height.toString());\n }\n };\n // To set the values to the attributes\n CanvasRenderer.prototype.setAttributes = function (options) {\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n var dashArray = this.getOptionValue(options, 'stroke-dasharray');\n if (!isNullOrUndefined(dashArray)) {\n var dashArrayString = dashArray.split(',');\n this.ctx.setLineDash([parseInt(dashArrayString[0], 10), parseInt(dashArrayString[1], 10)]);\n }\n this.ctx.strokeStyle = this.getOptionValue(options, 'stroke');\n };\n /**\n * To draw a line\n * @param {LineAttributes} options - required options to draw a line on the canvas\n * @return {void}\n */\n CanvasRenderer.prototype.drawLine = function (options) {\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.moveTo(options.x1, options.y1);\n this.ctx.lineTo(options.x2, options.y2);\n this.ctx.stroke();\n this.ctx.restore();\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw a rectangle\n * @param {RectAttributes} options - required options to draw a rectangle on the canvas\n * @return {void}\n */\n CanvasRenderer.prototype.drawRectangle = function (options) {\n var canvasCtx = this.ctx;\n var cornerRadius = options.rx;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.globalAlpha = this.getOptionValue(options, 'opacity');\n this.setAttributes(options);\n this.ctx.rect(options.x, options.y, options.width, options.height);\n if (cornerRadius !== null && cornerRadius >= 0) {\n this.drawCornerRadius(options);\n }\n else {\n if (options.fill === 'none') {\n options.fill = 'transparent';\n }\n this.ctx.fillStyle = options.fill;\n this.ctx.fillRect(options.x, options.y, options.width, options.height);\n this.ctx.stroke();\n }\n this.ctx.restore();\n this.ctx = canvasCtx;\n this.dataUrl = this.canvasObj.toDataURL();\n };\n // To draw the corner of a rectangle\n CanvasRenderer.prototype.drawCornerRadius = function (options) {\n var cornerRadius = options.rx;\n var x = options.x;\n var y = options.y;\n var width = options.width;\n var height = options.height;\n if (options.fill === 'none') {\n options.fill = 'transparent';\n }\n this.ctx.fillStyle = options.fill;\n if (width < 2 * cornerRadius) {\n cornerRadius = width / 2;\n }\n if (height < 2 * cornerRadius) {\n cornerRadius = height / 2;\n }\n this.ctx.beginPath();\n this.ctx.moveTo(x + width - cornerRadius, y);\n this.ctx.arcTo(x + width, y, x + width, y + height, cornerRadius);\n this.ctx.arcTo(x + width, y + height, x, y + height, cornerRadius);\n this.ctx.arcTo(x, y + height, x, y, cornerRadius);\n this.ctx.arcTo(x, y, x + width, y, cornerRadius);\n this.ctx.closePath();\n this.ctx.fill();\n this.ctx.stroke();\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw a path on the canvas\n * @param {PathAttributes} options - options needed to draw path\n * @param {Int32Array} canvasTranslate - Array of numbers to translate the canvas\n * @return {void}\n */\n CanvasRenderer.prototype.drawPath = function (options, canvasTranslate) {\n var path = options.d;\n var dataSplit = path.split(' ');\n var borderWidth = this.getOptionValue(options, 'stroke-width');\n var canvasCtx = this.ctx;\n var flag = true;\n this.ctx.save();\n this.ctx.beginPath();\n if (canvasTranslate) {\n this.ctx.translate(canvasTranslate[0], canvasTranslate[1]);\n }\n this.ctx.globalAlpha = options.opacity ? options.opacity : this.getOptionValue(options, 'fill-opacity');\n this.setAttributes(options);\n for (var i = 0; i < dataSplit.length; i = i + 3) {\n var x1 = parseFloat(dataSplit[i + 1]);\n var y1 = parseFloat(dataSplit[i + 2]);\n switch (dataSplit[i]) {\n case 'M':\n if (!options.innerR && !options.cx) {\n this.ctx.moveTo(x1, y1);\n }\n break;\n case 'L':\n if (!options.innerR) {\n this.ctx.lineTo(x1, y1);\n }\n break;\n case 'C':\n var c1 = parseFloat(dataSplit[i + 3]);\n var c2 = parseFloat(dataSplit[i + 4]);\n var c3 = parseFloat(dataSplit[i + 5]);\n var c4 = parseFloat(dataSplit[i + 6]);\n this.ctx.bezierCurveTo(x1, y1, c1, c2, c3, c4);\n i = i + 4;\n break;\n case 'A':\n if (!options.innerR) {\n if (options.cx) {\n this.ctx.arc(options.cx, options.cy, options.radius, 0, 2 * Math.PI, options.counterClockWise);\n }\n else {\n this.ctx.moveTo(options.x, options.y);\n this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, options.counterClockWise);\n this.ctx.lineTo(options.x, options.y);\n }\n }\n else if (flag) {\n this.ctx.arc(options.x, options.y, options.radius, options.start, options.end, options.counterClockWise);\n this.ctx.arc(options.x, options.y, options.innerR, options.end, options.start, !options.counterClockWise);\n flag = false;\n }\n i = i + 5;\n break;\n case 'z':\n this.ctx.closePath();\n break;\n }\n }\n if (options.fill !== 'none' && options.fill !== undefined) {\n this.ctx.fillStyle = options.fill;\n this.ctx.fill();\n }\n if (borderWidth > 0) {\n this.ctx.stroke();\n }\n this.ctx.restore();\n this.ctx = canvasCtx;\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw a text\n * @param {TextAttributes} options - options required to draw text\n * @param {string} label - Specifies the text which has to be drawn on the canvas\n * @return {void}\n */\n CanvasRenderer.prototype.drawText = function (options, label) {\n var fontWeight = this.getOptionValue(options, 'font-weight');\n if (!isNullOrUndefined(fontWeight) && fontWeight.toLowerCase() === 'regular') {\n fontWeight = 'normal';\n }\n var fontSize = this.getOptionValue(options, 'font-size');\n var fontFamily = this.getOptionValue(options, 'font-family');\n var fontStyle = this.getOptionValue(options, 'font-style').toLowerCase();\n var font = (fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily);\n var anchor = this.getOptionValue(options, 'text-anchor');\n var opacity = options.opacity !== undefined ? options.opacity : 1;\n if (anchor === 'middle') {\n anchor = 'center';\n }\n this.ctx.save();\n this.ctx.fillStyle = options.fill;\n this.ctx.font = font;\n this.ctx.textAlign = anchor;\n this.ctx.globalAlpha = opacity;\n if (options.baseline) {\n this.ctx.textBaseline = options.baseline;\n }\n var txtlngth = 0;\n this.ctx.translate(options.x + (txtlngth / 2), options.y);\n this.ctx.rotate(options.labelRotation * Math.PI / 180);\n this.ctx.fillText(label, 0, 0);\n this.ctx.restore();\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw circle on the canvas\n * @param {CircleAttributes} options - required options to draw the circle\n * @return {void}\n */\n CanvasRenderer.prototype.drawCircle = function (options) {\n var canvasCtx = this.ctx;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.arc(options.cx, options.cy, options.r, 0, 2 * Math.PI);\n this.ctx.fillStyle = options.fill;\n this.ctx.globalAlpha = options.opacity;\n this.ctx.fill();\n this.setAttributes(options);\n this.ctx.stroke();\n this.ctx.restore();\n this.ctx = canvasCtx;\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw polyline\n * @param {PolylineAttributes} options - options needed to draw polyline\n * @return {void}\n */\n CanvasRenderer.prototype.drawPolyline = function (options) {\n this.ctx.save();\n this.ctx.beginPath();\n var points = options.points.split(' ');\n for (var i = 0; i < points.length - 1; i++) {\n var point = points[i].split(',');\n var x = parseFloat(point[0]);\n var y = parseFloat(point[1]);\n if (i === 0) {\n this.ctx.moveTo(x, y);\n }\n else {\n this.ctx.lineTo(x, y);\n }\n }\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.stroke();\n this.ctx.restore();\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw an ellipse on the canvas\n * @param {EllipseAttributes} options - options needed to draw ellipse\n * @return {void}\n */\n CanvasRenderer.prototype.drawEllipse = function (options) {\n var canvasCtx = this.ctx;\n var circumference = Math.max(options.rx, options.ry);\n var scaleX = options.rx / circumference;\n var scaleY = options.ry / circumference;\n this.ctx.save();\n this.ctx.beginPath();\n this.ctx.translate(options.cx, options.cy);\n this.ctx.save();\n this.ctx.scale(scaleX, scaleY);\n this.ctx.arc(0, 0, circumference, 0, 2 * Math.PI, false);\n this.ctx.fillStyle = options.fill;\n this.ctx.fill();\n this.ctx.restore();\n this.ctx.lineWidth = this.getOptionValue(options, 'stroke-width');\n this.ctx.strokeStyle = options.stroke;\n this.ctx.stroke();\n this.ctx.restore();\n this.ctx = canvasCtx;\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To draw an image\n * @param {ImageAttributes} options - options required to draw an image on the canvas\n * @return {void}\n */\n CanvasRenderer.prototype.drawImage = function (options) {\n this.ctx.save();\n var imageObj = new Image();\n if (!isNullOrUndefined(options.href)) {\n imageObj.src = options.href;\n this.ctx.drawImage(imageObj, options.x, options.y, options.width, options.height);\n }\n this.ctx.restore();\n this.dataUrl = this.canvasObj.toDataURL();\n };\n /**\n * To create a linear gradient\n * @param {string[]} colors - Specifies the colors required to create linear gradient\n * @return {string}\n */\n CanvasRenderer.prototype.createLinearGradient = function (colors) {\n var myGradient;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n myGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvasObj.height);\n }\n var color = this.setGradientValues(colors, myGradient);\n return color;\n };\n /**\n * To create a radial gradient\n * @param {string[]} colors - Specifies the colors required to create linear gradient\n * @return {string}\n */\n CanvasRenderer.prototype.createRadialGradient = function (colors) {\n var myGradient;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n myGradient = this.ctx.createRadialGradient(0, 0, 0, 0, 0, this.canvasObj.height);\n }\n var colorName = this.setGradientValues(colors, myGradient);\n return colorName;\n };\n // To set the gradient values\n CanvasRenderer.prototype.setGradientValues = function (colors, myGradient) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n for (var i = 0; i <= colors.length - 1; i++) {\n var color = colors[i].color;\n var newColorStop = (colors[i].colorStop).slice(0, -1);\n var stopColor = parseInt(newColorStop, 10) / 100;\n myGradient.addColorStop(stopColor, color);\n }\n colorName = myGradient.toString();\n }\n else {\n colorName = colors[0].color.toString();\n }\n this.dataUrl = this.canvasObj.toDataURL();\n return colorName;\n };\n /**\n * To set the attributes to the element\n * @param {SVGCanvasAttributes} options - Attributes to set for the element\n * @param {HTMLElement} element - The element to which the attributes need to be set\n * @return {HTMLElement}\n */\n CanvasRenderer.prototype.setElementAttributes = function (options, element) {\n var keys = Object.keys(options);\n var values = Object.keys(options).map(function (key) { return options[key]; });\n for (var i = 0; i < keys.length; i++) {\n element.setAttribute(keys[i], values[i]);\n }\n return element;\n };\n /**\n * To update the values of the canvas element attributes\n * @param {SVGCanvasAttributes} options - Specifies the colors required to create gradient\n * @return {void}\n */\n CanvasRenderer.prototype.updateCanvasAttributes = function (options) {\n this.setElementAttributes(options, this.canvasObj);\n var ctx = this.ctx;\n if (!isNullOrUndefined(this.dataUrl)) {\n var img_1 = new Image;\n img_1.onload = function () {\n ctx.drawImage(img_1, 0, 0);\n };\n img_1.src = this.dataUrl;\n }\n };\n return CanvasRenderer;\n}());\nexport { CanvasRenderer };\n","/**\n * Module loading operations\n */\nimport { createInstance, setValue, getValue, deleteObject } from './util';\nvar MODULE_SUFFIX = 'Module';\nvar ModuleLoader = /** @class */ (function () {\n function ModuleLoader(parent) {\n this.loadedModules = [];\n this.parent = parent;\n }\n ;\n /**\n * Inject required modules in component library\n * @return {void}\n * @param {ModuleDeclaration[]} requiredModules - Array of modules to be required\n * @param {Function[]} moduleList - Array of modules to be injected from sample side\n */\n ModuleLoader.prototype.inject = function (requiredModules, moduleList) {\n var reqLength = requiredModules.length;\n if (reqLength === 0) {\n this.clean();\n return;\n }\n if (this.loadedModules.length) {\n this.clearUnusedModule(requiredModules);\n }\n for (var i = 0; i < reqLength; i++) {\n var modl = requiredModules[i];\n for (var _i = 0, moduleList_1 = moduleList; _i < moduleList_1.length; _i++) {\n var module = moduleList_1[_i];\n var modName = modl.member;\n if (module.prototype.getModuleName() === modl.member && !this.isModuleLoaded(modName)) {\n var moduleObject = createInstance(module, modl.args);\n var memberName = this.getMemberName(modName);\n if (modl.isProperty) {\n setValue(memberName, module, this.parent);\n }\n else {\n setValue(memberName, moduleObject, this.parent);\n }\n var loadedModule = modl;\n loadedModule.member = memberName;\n this.loadedModules.push(loadedModule);\n }\n }\n }\n };\n /**\n * To remove the created object while destroying the control\n * @return {void}\n */\n ModuleLoader.prototype.clean = function () {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var modules = _a[_i];\n if (!modules.isProperty) {\n getValue(modules.member, this.parent).destroy();\n }\n }\n this.loadedModules = [];\n };\n /**\n * Removes all unused modules\n * @param {ModuleDeclaration[]} moduleList\n * @returns {void}\n */\n ModuleLoader.prototype.clearUnusedModule = function (moduleList) {\n var _this = this;\n var usedModules = moduleList.map(function (arg) { return _this.getMemberName(arg.member); });\n var removableModule = this.loadedModules.filter(function (module) {\n return usedModules.indexOf(module.member) === -1;\n });\n for (var _i = 0, removableModule_1 = removableModule; _i < removableModule_1.length; _i++) {\n var mod = removableModule_1[_i];\n if (!mod.isProperty) {\n getValue(mod.member, this.parent).destroy();\n }\n this.loadedModules.splice(this.loadedModules.indexOf(mod), 1);\n deleteObject(this.parent, mod.member);\n }\n };\n /**\n * To get the name of the member.\n * @param {string} name\n * @returns {string}\n */\n ModuleLoader.prototype.getMemberName = function (name) {\n return name[0].toLowerCase() + name.substring(1) + MODULE_SUFFIX;\n };\n /**\n * Returns boolean based on whether the module specified is loaded or not\n * @param {string} modName\n * @returns {boolean}\n */\n ModuleLoader.prototype.isModuleLoaded = function (modName) {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var mod = _a[_i];\n if (mod.member === this.getMemberName(modName)) {\n return true;\n }\n }\n return false;\n };\n return ModuleLoader;\n}());\nexport { ModuleLoader };\n","import { getValue, setValue, merge } from './util';\nimport { Base } from './base';\n/**\n * To detect the changes for inner properties.\n * @private\n */\nvar ChildProperty = /** @class */ (function () {\n function ChildProperty(parent, propName, defaultValue, isArray) {\n this.properties = {};\n this.changedProperties = {};\n this.childChangedProperties = {};\n this.oldProperties = {};\n // tslint:disable-next-line:no-empty\n this.finalUpdate = function () { };\n this.callChildDataBind = getValue('callChildDataBind', Base);\n this.parentObj = parent;\n this.controlParent = this.parentObj.controlParent || this.parentObj;\n this.propName = propName;\n this.setProperties(defaultValue, true);\n this.isParentArray = isArray;\n }\n /**\n * Updates the property changes\n * @param {boolean} val\n * @param {string} propName\n * @returns {void}\n */\n ChildProperty.prototype.updateChange = function (val, propName) {\n if (val === true) {\n this.parentObj.childChangedProperties[propName] = val;\n }\n else {\n delete this.parentObj.childChangedProperties[propName];\n }\n if (this.parentObj.updateChange) {\n this.parentObj.updateChange(val, this.parentObj.propName);\n }\n };\n /**\n * Updates time out duration\n */\n ChildProperty.prototype.updateTimeOut = function () {\n if (this.parentObj.updateTimeOut) {\n this.parentObj.finalUpdate();\n this.parentObj.updateTimeOut();\n }\n else {\n var changeTime_1 = setTimeout(this.parentObj.dataBind.bind(this.parentObj));\n var clearUpdate = function () {\n clearTimeout(changeTime_1);\n };\n this.finalUpdate = clearUpdate;\n }\n };\n /**\n * Clears changed properties\n */\n ChildProperty.prototype.clearChanges = function () {\n this.finalUpdate();\n this.updateChange(false, this.propName);\n this.oldProperties = {};\n this.changedProperties = {};\n };\n /**\n * Set property changes\n * @param {Object} prop\n * @param {boolean} muteOnChange\n * {void}\n */\n ChildProperty.prototype.setProperties = function (prop, muteOnChange) {\n if (muteOnChange === true) {\n merge(this, prop);\n this.updateChange(false, this.propName);\n this.clearChanges();\n }\n else {\n merge(this, prop);\n }\n };\n /**\n * Binds data\n */\n ChildProperty.prototype.dataBind = function () {\n this.callChildDataBind(this.childChangedProperties, this);\n if (this.isParentArray) {\n var curIndex = this.parentObj[this.propName].indexOf(this);\n if (Object.keys(this.changedProperties).length) {\n setValue(this.propName + '.' + curIndex, this.changedProperties, this.parentObj.changedProperties);\n setValue(this.propName + '.' + curIndex, this.oldProperties, this.parentObj.oldProperties);\n }\n }\n else {\n this.parentObj.changedProperties[this.propName] = this.changedProperties;\n this.parentObj.oldProperties[this.propName] = this.oldProperties;\n }\n this.clearChanges();\n };\n /**\n * Saves changes to newer values\n * @param {string} key\n * @param {Object} newValue\n * @param {Object} oldValue\n * @returns {void}\n */\n ChildProperty.prototype.saveChanges = function (key, newValue, oldValue) {\n if (this.controlParent.isProtectedOnChange) {\n return;\n }\n this.oldProperties[key] = oldValue;\n this.changedProperties[key] = newValue;\n this.updateChange(true, this.propName);\n this.finalUpdate();\n this.updateTimeOut();\n };\n return ChildProperty;\n}());\nexport { ChildProperty };\n","/**\n * Parser\n */\nvar defaultNumberingSystem = {\n 'latn': {\n '_digits': '0123456789',\n '_type': 'numeric'\n }\n};\nimport { isUndefined, getValue } from '../util';\nvar latnRegex = /^[0-9]*$/;\nvar defaultNumberSymbols = {\n 'decimal': '.',\n 'group': ',',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'exponential': 'E'\n};\nvar latnNumberSystem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n/**\n * Interface for parser base\n * @private\n */\nvar ParserBase = /** @class */ (function () {\n function ParserBase() {\n }\n /**\n * Returns the cldr object for the culture specifies\n * @param {Object} obj - Specifies the object from which culture object to be acquired.\n * @param {string} cName - Specifies the culture name.\n * @returns {Object}\n */\n ParserBase.getMainObject = function (obj, cName) {\n return getValue('main.' + cName, obj);\n };\n /**\n * Returns the numbering system object from given cldr data.\n * @param {Object} obj - Specifies the object from which number system is acquired.\n * @returns {Object}\n */\n ParserBase.getNumberingSystem = function (obj) {\n return getValue('supplemental.numberingSystems', obj) || this.numberingSystems;\n };\n /**\n * Returns the reverse of given object keys or keys specified.\n * @param {Object} prop - Specifies the object to be reversed.\n * @param {number[]} keys - Optional parameter specifies the custom keyList for reversal.\n * @returns {Object}\n */\n ParserBase.reverseObject = function (prop, keys) {\n var propKeys = keys || Object.keys(prop);\n var res = {};\n for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {\n var key = propKeys_1[_i];\n /* tslint:disable no-any */\n if (!res.hasOwnProperty(prop[key])) {\n res[prop[key]] = key;\n }\n }\n return res;\n };\n /**\n * Returns the symbol regex by skipping the escape sequence.\n * @param {string[]} props - Specifies the array values to be skipped.\n * @returns {RegExp}\n */\n ParserBase.getSymbolRegex = function (props) {\n var regexStr = props.map(function (str) {\n return str.replace(/([.*+?^=!:${}()|\\[\\]\\/\\\\])/g, '\\\\$1');\n }).join('|');\n return new RegExp(regexStr, 'g');\n };\n ParserBase.getSymbolMatch = function (prop) {\n var matchKeys = Object.keys(defaultNumberSymbols);\n var ret = {};\n for (var _i = 0, matchKeys_1 = matchKeys; _i < matchKeys_1.length; _i++) {\n var key = matchKeys_1[_i];\n ret[prop[key]] = defaultNumberSymbols[key];\n }\n return ret;\n };\n /**\n * Returns regex string for provided value\n * @param {string} val\n * @returns {string}\n */\n ParserBase.constructRegex = function (val) {\n var len = val.length;\n var ret = '';\n for (var i = 0; i < len; i++) {\n if (i !== len - 1) {\n ret += val[i] + '|';\n }\n else {\n ret += val[i];\n }\n }\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n * @param {string} value - Specifies the values to be replaced.\n * @param {RegExp} regex - Specifies the regex to search.\n * @param {Object} obj - Specifies the object matcher to be replace value parts.\n * @returns {string}\n */\n ParserBase.convertValueParts = function (value, regex, obj) {\n return value.replace(regex, function (str) {\n return obj[str];\n });\n };\n /**\n * Returns default numbering system object for formatting from cldr data\n * @param {Object} obj\n * @returns {NumericObject}\n */\n ParserBase.getDefaultNumberingSystem = function (obj) {\n var ret = {};\n ret.obj = getValue('numbers', obj);\n ret.nSystem = getValue('defaultNumberingSystem', ret.obj);\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n */\n ParserBase.getCurrentNumericOptions = function (curObj, numberSystem, needSymbols) {\n var ret = {};\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem)) {\n var digits = getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n ret.numericPair = this.reverseObject(digits, latnNumberSystem);\n ret.numberParseRegex = new RegExp(this.constructRegex(digits), 'g');\n ret.numericRegex = '[' + digits[0] + '-' + digits[9] + ']';\n if (needSymbols) {\n ret.numericRegex = digits[0] + '-' + digits[9];\n ret.symbolNumberSystem = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.symbolMatch = this.getSymbolMatch(ret.symbolNumberSystem);\n ret.numberSystem = cur.nSystem;\n }\n }\n }\n return ret;\n };\n /**\n * Returns number mapper object for the provided cldr data\n * @param {Object} curObj\n * @param {Object} numberSystem\n * @param {boolean} isNumber\n * @returns {NumberMapper}\n */\n ParserBase.getNumberMapper = function (curObj, numberSystem, isNumber) {\n var ret = { mapper: {} };\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem)) {\n ret.numberSystem = cur.nSystem;\n ret.numberSymbols = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.timeSeparator = getValue('timeSeparator', ret.numberSymbols);\n var digits = getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n for (var _i = 0, latnNumberSystem_1 = latnNumberSystem; _i < latnNumberSystem_1.length; _i++) {\n var i = latnNumberSystem_1[_i];\n ret.mapper[i] = digits[i];\n }\n }\n }\n return ret;\n };\n ParserBase.nPair = 'numericPair';\n ParserBase.nRegex = 'numericRegex';\n ParserBase.numberingSystems = defaultNumberingSystem;\n return ParserBase;\n}());\nexport { ParserBase };\n","import { isUndefined, throwError, isNullOrUndefined, extend } from '../util';\nimport { defaultCurrencyCode } from '../internationalization';\nimport { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nvar errorText = {\n 'ms': 'minimumSignificantDigits',\n 'ls': 'maximumSignificantDigits',\n 'mf': 'minimumFractionDigits',\n 'lf': 'maximumFractionDigits',\n};\nvar integerError = 'minimumIntegerDigits';\nvar percentSign = 'percentSign';\nvar minusSign = 'minusSign';\nvar spaceRegex = /\\s/;\nvar mapper = ['infinity', 'nan', 'group', 'decimal', 'exponential'];\nvar infinity = 'infinity';\nvar nan = 'nan';\n/**\n * Module for number formatting.\n * @private\n */\nvar NumberFormat = /** @class */ (function () {\n function NumberFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} option - Specific the format in which number will format.\n * @param {Object} object- Specifies the global cldr data collection.\n * @return Function.\n */\n NumberFormat.numberFormatter = function (culture, option, cldr) {\n var _this = this;\n var fOptions = extend({}, option);\n var cOptions = {};\n var dOptions = {};\n var symbolPattern;\n var dependable = base.getDependables(cldr, culture, true);\n dOptions.numberMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n dOptions.currencySymbol = base.getCurrencySymbol(dependable.numericObject, fOptions.currency || defaultCurrencyCode);\n /* tslint:disable no-any */\n dOptions.percentSymbol = dOptions.numberMapper.numberSymbols[percentSign];\n dOptions.minusSymbol = dOptions.numberMapper.numberSymbols[minusSign];\n var symbols = dOptions.numberMapper.numberSymbols;\n if ((option.format) && !(base.formatRegex.test(option.format))) {\n cOptions = base.customFormat(option.format, dOptions, dependable.numericObject);\n }\n else {\n extend(fOptions, base.getProperNumericSkeleton(option.format || 'N'));\n fOptions.isCurrency = fOptions.type === 'currency';\n fOptions.isPercent = fOptions.type === 'percent';\n symbolPattern = base.getSymbolPattern(fOptions.type, dOptions.numberMapper.numberSystem, dependable.numericObject, fOptions.isAccount);\n fOptions.groupOne = this.checkValueRange(fOptions.maximumSignificantDigits, fOptions.minimumSignificantDigits, true);\n this.checkValueRange(fOptions.maximumFractionDigits, fOptions.minimumFractionDigits, false, true);\n if (!isUndefined(fOptions.fractionDigits)) {\n fOptions.minimumFractionDigits = fOptions.maximumFractionDigits = fOptions.fractionDigits;\n }\n if (isUndefined(fOptions.useGrouping)) {\n fOptions.useGrouping = true;\n }\n if (fOptions.isCurrency) {\n symbolPattern = symbolPattern.replace(/\\u00A4/g, base.defaultCurrency);\n }\n var split = symbolPattern.split(';');\n cOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, dOptions.currencySymbol);\n cOptions.pData = base.getFormatData(split[0], false, dOptions.currencySymbol);\n if (fOptions.useGrouping) {\n fOptions.groupSeparator = symbols[mapper[2]];\n fOptions.groupData = this.getGroupingDetails(split[0]);\n }\n var minFrac = isUndefined(fOptions.minimumFractionDigits);\n if (minFrac) {\n fOptions.minimumFractionDigits = cOptions.nData.minimumFraction;\n }\n if (isUndefined(fOptions.maximumFractionDigits)) {\n var mval = cOptions.nData.maximumFraction;\n fOptions.maximumFractionDigits = isUndefined(mval) && fOptions.isPercent ? 0 : mval;\n }\n var mfrac = fOptions.minimumFractionDigits;\n var lfrac = fOptions.maximumFractionDigits;\n if (!isUndefined(mfrac) && !isUndefined(lfrac)) {\n if (mfrac > lfrac) {\n fOptions.maximumFractionDigits = mfrac;\n }\n }\n }\n extend(cOptions.nData, fOptions);\n extend(cOptions.pData, fOptions);\n return function (value) {\n if (isNaN(value)) {\n return symbols[mapper[1]];\n }\n else if (!isFinite(value)) {\n return symbols[mapper[0]];\n }\n return _this.intNumberFormatter(value, cOptions, dOptions);\n };\n };\n /**\n * Returns grouping details for the pattern provided\n * @param {string} pattern\n * @returns {GroupDetails}\n */\n NumberFormat.getGroupingDetails = function (pattern) {\n var ret = {};\n var match = pattern.match(base.negativeDataRegex);\n if (match && match[4]) {\n var pattern_1 = match[4];\n var p = pattern_1.lastIndexOf(',');\n if (p !== -1) {\n var temp = pattern_1.split('.')[0];\n ret.primary = (temp.length - p) - 1;\n var s = pattern_1.lastIndexOf(',', p - 1);\n if (s !== -1) {\n ret.secondary = p - 1 - s;\n }\n }\n }\n return ret;\n };\n /**\n * Returns if the provided integer range is valid.\n * @param {number} val1\n * @param {number} val2\n * @param {boolean} checkbothExist\n * @param {boolean} isFraction\n * @returns {boolean}\n */\n NumberFormat.checkValueRange = function (val1, val2, checkbothExist, isFraction) {\n var decide = isFraction ? 'f' : 's';\n var dint = 0;\n var str1 = errorText['l' + decide];\n var str2 = errorText['m' + decide];\n if (!isUndefined(val1)) {\n this.checkRange(val1, str1, isFraction);\n dint++;\n }\n if (!isUndefined(val2)) {\n this.checkRange(val2, str2, isFraction);\n dint++;\n }\n if (dint === 2) {\n if (val1 < val2) {\n throwError(str2 + 'specified must be less than the' + str1);\n }\n else {\n return true;\n }\n }\n else if (checkbothExist && dint === 1) {\n throwError('Both' + str2 + 'and' + str2 + 'must be present');\n }\n return false;\n };\n /**\n * Check if the provided fraction range is valid\n * @param {number} val\n * @param {string} text\n * @param {boolean} isFraction\n * @returns {void}\n */\n NumberFormat.checkRange = function (val, text, isFraction) {\n var range = isFraction ? [0, 20] : [1, 21];\n if (val < range[0] || val > range[1]) {\n throwError(text + 'value must be within the range' + range[0] + 'to' + range[1]);\n }\n };\n /**\n * Returns formatted numeric string for provided formatting options\n * @param {number} value\n * @param {base.GenericFormatOptions} fOptions\n * @param {CommonOptions} dOptions\n * @returns {string}\n */\n NumberFormat.intNumberFormatter = function (value, fOptions, dOptions) {\n var curData;\n if (isUndefined(fOptions.nData.type)) {\n return undefined;\n }\n else {\n if (value < 0) {\n value = value * -1;\n curData = fOptions.nData;\n }\n else if (value === 0) {\n curData = fOptions.zeroData || fOptions.pData;\n }\n else {\n curData = fOptions.pData;\n }\n var fValue = '';\n if (curData.isPercent) {\n value = value * 100;\n }\n if (curData.groupOne) {\n fValue = this.processSignificantDigits(value, curData.minimumSignificantDigits, curData.maximumSignificantDigits);\n }\n else {\n fValue = this.processFraction(value, curData.minimumFractionDigits, curData.maximumFractionDigits);\n if (curData.minimumIntegerDigits) {\n fValue = this.processMinimumIntegers(fValue, curData.minimumIntegerDigits);\n }\n }\n if (curData.type === 'scientific') {\n fValue = value.toExponential(curData.maximumFractionDigits);\n fValue = fValue.replace('e', dOptions.numberMapper.numberSymbols[mapper[4]]);\n }\n fValue = fValue.replace('.', dOptions.numberMapper.numberSymbols[mapper[3]]);\n if (curData.useGrouping) {\n fValue = this.groupNumbers(fValue, curData.groupData.primary, curData.groupSeparator || ',', dOptions.numberMapper.numberSymbols[mapper[3]] || '.', curData.groupData.secondary);\n }\n fValue = parser.convertValueParts(fValue, base.latnParseRegex, dOptions.numberMapper.mapper);\n if (curData.nlead === 'N/A') {\n return curData.nlead;\n }\n else {\n return curData.nlead + fValue + curData.nend;\n }\n }\n };\n /**\n * Returns significant digits processed numeric string\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @returns {string}\n */\n NumberFormat.processSignificantDigits = function (value, min, max) {\n var temp = value + '';\n var tn;\n var length = temp.length;\n if (length < min) {\n return value.toPrecision(min);\n }\n else {\n temp = value.toPrecision(max);\n tn = +temp;\n return tn + '';\n }\n };\n /**\n * Returns grouped numeric string\n * @param {string} val\n * @param {number} level1\n * @param {string} sep\n * @param {string} decimalSymbol\n * @param {number} level2\n * @returns {string}\n */\n NumberFormat.groupNumbers = function (val, level1, sep, decimalSymbol, level2) {\n var flag = !isNullOrUndefined(level2) && level2 !== 0;\n var split = val.split(decimalSymbol);\n var prefix = split[0];\n var length = prefix.length;\n var str = '';\n while (length > level1) {\n str = prefix.slice(length - level1, length) + (str.length ?\n (sep + str) : '');\n length -= level1;\n if (flag) {\n level1 = level2;\n flag = false;\n }\n }\n split[0] = prefix.slice(0, length) + (str.length ? sep : '') + str;\n return split.join(decimalSymbol);\n };\n /**\n * Returns fraction processed numeric string\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @returns {string}\n */\n NumberFormat.processFraction = function (value, min, max) {\n var temp = (value + '').split('.')[1];\n var length = temp ? temp.length : 0;\n if (min && length < min) {\n var ret = '';\n if (length === 0) {\n ret = value.toFixed(min);\n }\n else {\n ret += value;\n for (var j = 0; j < min - length; j++) {\n ret += '0';\n }\n return ret;\n }\n return value.toFixed(min);\n }\n else if (!isNullOrUndefined(max) && (length > max || max === 0)) {\n return value.toFixed(max);\n }\n return value + '';\n };\n /**\n * Returns integer processed numeric string\n * @param {string} value\n * @param {number} min\n * @returns {string}\n */\n NumberFormat.processMinimumIntegers = function (value, min) {\n var temp = value.split('.');\n var lead = temp[0];\n var len = lead.length;\n if (len < min) {\n for (var i = 0; i < min - len; i++) {\n lead = '0' + lead;\n }\n temp[0] = lead;\n }\n return temp.join('.');\n };\n return NumberFormat;\n}());\nexport { NumberFormat };\n","import { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nimport { isUndefined, throwError, getValue } from '../util';\nvar abbreviateRegexGlobal = /\\/MMMMM|MMMM|MMM|a|LLL|EEEEE|EEEE|E|K|ccc|G+|z+/gi;\nvar standalone = 'stand-alone';\nvar weekdayKey = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nexport var basicPatterns = ['short', 'medium', 'long', 'full'];\nvar timeSetter = {\n m: 'getMinutes',\n h: 'getHours',\n H: 'getHours',\n s: 'getSeconds',\n d: 'getDate',\n};\nexport var datePartMatcher = {\n 'M': 'month',\n 'd': 'day',\n 'E': 'weekday',\n 'c': 'weekday',\n 'y': 'year',\n 'm': 'minute',\n 'h': 'hour',\n 'H': 'hour',\n 's': 'second',\n 'L': 'month',\n 'a': 'designator',\n 'z': 'timeZone',\n 'Z': 'timeZone',\n 'G': 'era'\n};\nvar timeSeparator = 'timeSeparator';\n/**\n * Date Format is a framework provides support for date formatting.\n * @private\n */\nvar DateFormat = /** @class */ (function () {\n function DateFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n * @param {string} - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} - Specific the format in which date will format.\n * @param {cldr} - Specifies the global cldr data collection.\n * @return Function.\n */\n DateFormat.dateFormat = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture);\n var formatOptions = {};\n var resPattern = option.format || base.getResultantPattern(option.skeleton, dependable.dateObject, option.type);\n formatOptions.dateSeperator = base.getDateSeparator(dependable.dateObject);\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n formatOptions.pattern = resPattern;\n formatOptions.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n var patternMatch = resPattern.match(abbreviateRegexGlobal) || [];\n for (var _i = 0, patternMatch_1 = patternMatch; _i < patternMatch_1.length; _i++) {\n var str = patternMatch_1[_i];\n var len = str.length;\n var char = str[0];\n if (char === 'K') {\n char = 'h';\n }\n /* tslint:disable no-any */\n var charKey = datePartMatcher[char];\n switch (char) {\n case 'E':\n case 'c':\n formatOptions.weekday = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n break;\n case 'M':\n case 'L':\n formatOptions.month = dependable.dateObject[base.month][standalone][base.monthIndex[len]];\n break;\n case 'a':\n formatOptions.designator = getValue('dayPeriods.format.wide', dependable.dateObject);\n break;\n case 'G':\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n formatOptions.era = getValue('eras.' + eText, dependable.dateObject);\n break;\n case 'z':\n formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n break;\n }\n }\n }\n return function (value) {\n if (isNaN(value.getDate())) {\n return null;\n }\n return _this.intDateFormatter(value, formatOptions);\n };\n };\n /**\n * Returns formatted date string based on options passed.\n * @param {Date} value\n * @param {FormatOptions} options\n */\n DateFormat.intDateFormatter = function (value, options) {\n var pattern = options.pattern;\n var ret = '';\n var matches = pattern.match(base.dateParseRegex);\n for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {\n var match = matches_1[_i];\n var length_1 = match.length;\n var char = match[0];\n if (char === 'K') {\n char = 'h';\n }\n var curval = void 0;\n var isNumber = void 0;\n var processNumber = void 0;\n var curstr = '';\n switch (char) {\n case 'M':\n case 'L':\n curval = value.getMonth() + 1;\n if (length_1 > 2) {\n ret += options.month[curval];\n }\n else {\n isNumber = true;\n }\n break;\n case 'E':\n case 'c':\n ret += options.weekday[weekdayKey[value.getDay()]];\n break;\n case 'H':\n case 'h':\n case 'm':\n case 's':\n case 'd':\n isNumber = true;\n curval = value[timeSetter[char]]();\n if (char === 'h') {\n curval = curval % 12 || 12;\n }\n break;\n case 'y':\n processNumber = true;\n curstr += value.getFullYear();\n if (length_1 === 2) {\n curstr = curstr.substr(curstr.length - 2);\n }\n break;\n case 'a':\n var desig = value.getHours() < 12 ? 'am' : 'pm';\n ret += options.designator[desig];\n break;\n case 'G':\n var dec = value.getFullYear() < 0 ? 0 : 1;\n ret += options.era[dec];\n break;\n case '\\'':\n ret += (match === '\\'\\'') ? '\\'' : match.replace(/\\'/g, '');\n break;\n case 'z':\n var timezone = value.getTimezoneOffset();\n var pattern_1 = (length_1 < 4) ? '+H;-H' : options.timeZone.hourFormat;\n pattern_1 = pattern_1.replace(/:/g, options.numMapper.timeSeparator);\n if (timezone === 0) {\n ret += options.timeZone.gmtZeroFormat;\n }\n else {\n processNumber = true;\n curstr = this.getTimeZoneValue(timezone, pattern_1);\n }\n curstr = options.timeZone.gmtFormat.replace(/\\{0\\}/, curstr);\n break;\n case ':':\n ret += options.numMapper.numberSymbols[timeSeparator];\n /* tslint:enable no-any */\n break;\n case '/':\n ret += options.dateSeperator;\n break;\n default:\n ret += match;\n }\n if (isNumber) {\n processNumber = true;\n curstr = this.checkTwodigitNumber(curval, length_1);\n }\n if (processNumber) {\n ret += parser.convertValueParts(curstr, base.latnParseRegex, options.numMapper.mapper);\n }\n }\n return ret;\n };\n /**\n * Returns two digit numbers for given value and length\n */\n DateFormat.checkTwodigitNumber = function (val, len) {\n var ret = val + '';\n if (len === 2 && ret.length !== 2) {\n return '0' + ret;\n }\n return ret;\n };\n /**\n * Returns the value of the Time Zone.\n * @param {number} tVal\n * @param {string} pattern\n * @private\n */\n DateFormat.getTimeZoneValue = function (tVal, pattern) {\n var _this = this;\n var splt = pattern.split(';');\n var curPattern = splt[tVal > 0 ? 1 : 0];\n var no = Math.abs(tVal);\n return curPattern = curPattern.replace(/HH?|mm/g, function (str) {\n var len = str.length;\n var ishour = str.indexOf('H') !== -1;\n return _this.checkTwodigitNumber(Math.floor(ishour ? (no / 60) : (no % 60)), len);\n });\n };\n return DateFormat;\n}());\nexport { DateFormat };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { isUndefined, getValue, isNullOrUndefined, setValue, uniqueID } from './util';\nimport { ModuleLoader } from './module-loader';\nimport { Base } from './base';\nimport { Observer } from './observer';\nimport { ChildProperty } from './child-property';\nimport { Property, NotifyPropertyChanges } from './notify-property-change';\nimport { onIntlChange, rightToLeft, defaultCulture } from './internationalization';\nvar componentCount = 0;\nvar lastPageID;\nvar lastHistoryLen = 0;\n/**\n * Base class for all Essential JavaScript components\n */\nvar Component = /** @class */ (function (_super) {\n __extends(Component, _super);\n /**\n * Initialize the constructor for component base\n */\n function Component(options, selector) {\n var _this = _super.call(this, options, selector) || this;\n _this.randomId = uniqueID();\n _this.needsID = false;\n if (isNullOrUndefined(_this.enableRtl)) {\n _this.setProperties({ 'enableRtl': rightToLeft }, true);\n }\n if (isNullOrUndefined(_this.locale)) {\n _this.setProperties({ 'locale': defaultCulture }, true);\n }\n _this.moduleLoader = new ModuleLoader(_this);\n _this.localObserver = new Observer(_this);\n // tslint:disable-next-line:no-function-constructor-with-string-args\n _this.detectFunction = new Function('args', 'var prop = Object.keys(args); if(prop.length){this[prop[0]] = args[prop[0]];}');\n onIntlChange.on('notifyExternalChange', _this.detectFunction, _this, _this.randomId);\n if (!isUndefined(selector)) {\n _this.appendTo();\n }\n return _this;\n }\n Component.prototype.requiredModules = function () {\n return [];\n };\n ;\n /**\n * Destroys the sub modules while destroying the widget\n */\n Component.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n if (this.enablePersistence) {\n this.setPersistData();\n }\n this.localObserver.destroy();\n if (this.refreshing) {\n return;\n }\n this.trigger('destroyed', { cancel: false });\n _super.prototype.destroy.call(this);\n this.moduleLoader.clean();\n onIntlChange.off('notifyExternalChange', this.detectFunction, this.randomId);\n };\n /**\n * Applies all the pending property changes and render the component again.\n */\n Component.prototype.refresh = function () {\n this.refreshing = true;\n this.moduleLoader.clean();\n this.destroy();\n this.clearChanges();\n this.localObserver = new Observer(this);\n this.preRender();\n this.injectModules();\n this.render();\n this.refreshing = false;\n };\n /**\n * Appends the control within the given HTML element\n * @param {string | HTMLElement} selector - Target element where control needs to be appended\n */\n Component.prototype.appendTo = function (selector) {\n if (!isNullOrUndefined(selector) && typeof (selector) === 'string') {\n this.element = document.querySelector(selector);\n }\n else if (!isNullOrUndefined(selector)) {\n this.element = selector;\n }\n if (!isNullOrUndefined(this.element)) {\n this.isProtectedOnChange = false;\n if (this.needsID && !this.element.id) {\n this.element.id = this.getUniqueID(this.getModuleName());\n }\n if (this.enablePersistence) {\n this.mergePersistData();\n window.addEventListener('unload', this.setPersistData.bind(this));\n }\n var inst = getValue('ej2_instances', this.element);\n if (!inst || inst.indexOf(this) === -1) {\n _super.prototype.addInstance.call(this);\n }\n this.preRender();\n this.injectModules();\n this.render();\n this.trigger('created');\n }\n };\n /**\n * When invoked, applies the pending property changes immediately to the component.\n */\n Component.prototype.dataBind = function () {\n this.injectModules();\n _super.prototype.dataBind.call(this);\n };\n ;\n /**\n * Attach one or more event handler to the current component context.\n * It is used for internal handling event internally within the component only.\n * @param {BoundOptions[]| string} event - It is optional type either to Set the collection of event list or the eventName.\n * @param {Function} handler - optional parameter Specifies the handler to run when the event occurs\n * @param {Object} context - optional parameter Specifies the context to be bind in the handler.\n * @return {void}\n * @private\n */\n Component.prototype.on = function (event, handler, context) {\n if (typeof event === 'string') {\n this.localObserver.on(event, handler, context);\n }\n else {\n for (var _i = 0, event_1 = event; _i < event_1.length; _i++) {\n var arg = event_1[_i];\n this.localObserver.on(arg.event, arg.handler, arg.context);\n }\n }\n };\n /**\n * To remove one or more event handler that has been attached with the on() method.\n * @param {BoundOptions[]| string} event - It is optional type either to Set the collection of event list or the eventName.\n * @param {Function} handler - optional parameter Specifies the function to run when the event occurs\n * @return {void}\n * @private\n */\n Component.prototype.off = function (event, handler) {\n if (typeof event === 'string') {\n this.localObserver.off(event, handler);\n }\n else {\n for (var _i = 0, event_2 = event; _i < event_2.length; _i++) {\n var arg = event_2[_i];\n this.localObserver.off(arg.event, arg.handler);\n }\n }\n };\n /**\n * To notify the handlers in the specified event.\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} argument - Additional parameters to pass while calling the handler.\n * @return {void}\n * @private\n */\n Component.prototype.notify = function (property, argument) {\n if (this.isDestroyed !== true) {\n this.localObserver.notify(property, argument);\n }\n };\n /**\n * Get injected modules\n * @private\n */\n Component.prototype.getInjectedModules = function () {\n return this.injectedModules;\n };\n ;\n /**\n * Dynamically injects the required modules to the component.\n */\n Component.Inject = function () {\n var moduleList = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n moduleList[_i] = arguments[_i];\n }\n if (!this.prototype.injectedModules) {\n this.prototype.injectedModules = [];\n }\n for (var i = 0; i < moduleList.length; i++) {\n if (this.prototype.injectedModules.indexOf(moduleList[i]) === -1) {\n this.prototype.injectedModules.push(moduleList[i]);\n }\n }\n };\n Component.prototype.injectModules = function () {\n if (this.injectedModules && this.injectedModules.length) {\n this.moduleLoader.inject(this.requiredModules(), this.injectedModules);\n }\n };\n Component.prototype.mergePersistData = function () {\n var data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n if (!(isNullOrUndefined(data) || (data === ''))) {\n this.setProperties(JSON.parse(data), true);\n }\n };\n Component.prototype.setPersistData = function () {\n if (!this.isDestroyed) {\n window.localStorage.setItem(this.getModuleName() + this.element.id, this.getPersistData());\n }\n };\n Component.prototype.clearTemplate = function (templateName) {\n //No Code\n };\n Component.prototype.getUniqueID = function (definedName) {\n if (this.isHistoryChanged()) {\n componentCount = 0;\n }\n lastPageID = this.pageID(location.href);\n lastHistoryLen = history.length;\n return definedName + '_' + lastPageID + '_' + componentCount++;\n };\n Component.prototype.pageID = function (url) {\n var hash = 0;\n if (url.length === 0) {\n return hash;\n }\n for (var i = 0; i < url.length; i++) {\n var char = url.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return Math.abs(hash);\n };\n Component.prototype.isHistoryChanged = function () {\n return lastPageID !== this.pageID(location.href) || lastHistoryLen !== history.length;\n };\n Component.prototype.addOnPersist = function (options) {\n var _this = this;\n var persistObj = {};\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var key = options_1[_i];\n var objValue = void 0;\n objValue = getValue(key, this);\n if (!isUndefined(objValue)) {\n setValue(key, this.getActualProperties(objValue), persistObj);\n }\n }\n return JSON.stringify(persistObj, function (key, value) {\n return _this.getActualProperties(value);\n });\n };\n Component.prototype.getActualProperties = function (obj) {\n if (obj instanceof ChildProperty) {\n return getValue('properties', obj);\n }\n else {\n return obj;\n }\n };\n Component.prototype.ignoreOnPersist = function (options) {\n return JSON.stringify(this.iterateJsonProperties(this.properties, options));\n };\n Component.prototype.iterateJsonProperties = function (obj, ignoreList) {\n var newObj = {};\n var _loop_1 = function (key) {\n if (ignoreList.indexOf(key) === -1) {\n // tslint:disable-next-line:no-any\n var value = obj[key];\n if (typeof value === 'object' && !(value instanceof Array)) {\n var newList = ignoreList.filter(function (str) {\n return new RegExp(key + '.').test(str);\n }).map(function (str) {\n return str.replace(key + '.', '');\n });\n newObj[key] = this_1.iterateJsonProperties(this_1.getActualProperties(value), newList);\n }\n else {\n newObj[key] = value;\n }\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var key = _a[_i];\n _loop_1(key);\n }\n return newObj;\n };\n __decorate([\n Property(false)\n ], Component.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property()\n ], Component.prototype, \"enableRtl\", void 0);\n __decorate([\n Property()\n ], Component.prototype, \"locale\", void 0);\n Component = __decorate([\n NotifyPropertyChanges\n ], Component);\n return Component;\n}(Base));\nexport { Component };\n//Function handling for page navigation detection \n/* istanbul ignore next */\n(function () {\n if (typeof window !== 'undefined') {\n window.addEventListener('popstate', \n /* istanbul ignore next */\n function () {\n componentCount = 0;\n });\n }\n})();\n","import { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nimport { isUndefined, throwError, getValue, isNullOrUndefined } from '../util';\nimport { datePartMatcher } from './date-formatter';\nvar number = 'numbers';\nvar defNoSystem = 'defaultNumberingSystem';\nvar noSystem = 'numberingSystem';\nvar standalone = 'stand-alone';\nvar curWeekDay = 'curWeekDay';\nvar latnRegex = /^[0-9]*$/;\nvar abbreviateRegex = /\\/MMMMM|MMMM|MMM|a|LLL|EEEEE|EEEE|E|ccc/;\nvar timeSetter = {\n minute: 'setMinutes',\n hour: 'setHours',\n second: 'setSeconds',\n day: 'setDate',\n month: 'setMonth'\n};\nvar month = 'months';\n/* tslint:disable no-any */\n/**\n * Date Parser.\n * @private\n */\nvar DateParser = /** @class */ (function () {\n function DateParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n * @param {string} - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} - Specific the format in which string date will be parsed.\n * @param {cldr} - Specifies the global cldr data collection.\n * @return Function.\n */\n // tslint:disable-next-line:max-func-body-length\n DateParser.dateParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture);\n var numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr));\n var parseOptions = {};\n var resPattern = option.format || base.getResultantPattern(option.skeleton, dependable.dateObject, option.type);\n var regexString = '';\n var hourOnly;\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n parseOptions = { pattern: resPattern, evalposition: {} };\n var patternMatch = resPattern.match(base.dateParseRegex) || [];\n var length_1 = patternMatch.length;\n var gmtCorrection = 0;\n var zCorrectTemp = 0;\n var isgmtTraversed = false;\n var nRegx = numOptions.numericRegex;\n for (var i = 0; i < length_1; i++) {\n var str = patternMatch[i];\n var len = str.length;\n var char = (str[0] === 'K') ? 'h' : str[0];\n var isNumber = void 0;\n var canUpdate = void 0;\n var charKey = datePartMatcher[char];\n var optional = (len === 2) ? '' : '?';\n if (isgmtTraversed) {\n gmtCorrection = zCorrectTemp;\n isgmtTraversed = false;\n }\n switch (char) {\n case 'E':\n case 'c':\n // tslint:disable-next-line\n var weekObject = parser.reverseObject(dependable.dateObject[base.days][standalone][base.monthIndex[len]]);\n regexString += '(' + Object.keys(weekObject).join('|') + ')';\n break;\n case 'M':\n case 'L':\n case 'd':\n case 'm':\n case 's':\n case 'h':\n case 'H':\n canUpdate = true;\n if ((char === 'M' || char === 'L') && len > 2) {\n // tslint:disable-next-line\n parseOptions[charKey] = parser.reverseObject(dependable.dateObject[month][standalone][base.monthIndex[len]]);\n /* tslint:disable no-any */\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n }\n else {\n isNumber = true;\n regexString += '(' + nRegx + nRegx + optional + ')';\n }\n if (char === 'h') {\n parseOptions.hour12 = true;\n }\n break;\n case 'y':\n canUpdate = isNumber = true;\n if (len === 2) {\n regexString += '(' + nRegx + nRegx + ')';\n }\n else {\n regexString += '(' + nRegx + '{' + len + ',})';\n }\n break;\n case 'a':\n canUpdate = true;\n parseOptions[charKey] = parser.reverseObject(getValue('dayPeriods.format.wide', dependable.dateObject));\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n break;\n case 'G':\n canUpdate = true;\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n parseOptions[charKey] = parser.reverseObject(getValue('eras.' + eText, dependable.dateObject));\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + '?)';\n break;\n case 'z':\n var tval = new Date().getTimezoneOffset();\n canUpdate = (tval !== 0);\n parseOptions[charKey] = getValue('dates.timeZoneNames', dependable.parserObject);\n var tzone = parseOptions[charKey];\n hourOnly = (len < 4);\n var hpattern = hourOnly ? '+H;-H' : tzone.hourFormat;\n regexString += '(' + this.parseTimeZoneRegx(hpattern, tzone, nRegx) + ')?';\n isgmtTraversed = true;\n zCorrectTemp = hourOnly ? 6 : 12;\n break;\n case '\\'':\n var iString = str.replace(/\\'/g, '');\n regexString += '(' + iString + ')?';\n break;\n default:\n regexString += '([\\\\D])';\n break;\n }\n if (canUpdate) {\n parseOptions.evalposition[charKey] = { isNumber: isNumber, pos: i + 1 + gmtCorrection, hourOnly: hourOnly };\n }\n if (i === length_1 - 1 && !isNullOrUndefined(regexString)) {\n parseOptions.parserRegex = new RegExp('^' + regexString + '$');\n }\n }\n }\n return function (value) {\n var parsedDateParts = _this.internalDateParse(value, parseOptions, numOptions);\n if (isNullOrUndefined(parsedDateParts) || !Object.keys(parsedDateParts).length) {\n return null;\n }\n return _this.getDateObject(parsedDateParts);\n };\n };\n /**\n * Returns date object for provided date options\n * @param {DateParts} options\n * @param {Date} value\n * @returns {Date}\n */\n DateParser.getDateObject = function (options, value) {\n var res = value || new Date();\n res.setMilliseconds(0);\n var tKeys = ['hour', 'minute', 'second', 'month', 'day'];\n var y = options.year;\n var desig = options.designator;\n var tzone = options.timeZone;\n if (!isUndefined(y)) {\n var len = (y + '').length;\n if (len <= 2) {\n var century = Math.floor(res.getFullYear() / 100) * 100;\n y += century;\n }\n res.setFullYear(y);\n }\n for (var _i = 0, tKeys_1 = tKeys; _i < tKeys_1.length; _i++) {\n var key = tKeys_1[_i];\n var tValue = options[key];\n if (!isUndefined(tValue)) {\n if (key === 'month') {\n tValue -= 1;\n if (tValue < 0 || tValue > 11) {\n return new Date('invalid');\n }\n var pDate = res.getDate();\n res.setDate(1);\n res[timeSetter[key]](tValue);\n var lDate = new Date(res.getFullYear(), tValue + 1, 0).getDate();\n res.setDate(pDate < lDate ? pDate : lDate);\n }\n else {\n if (key === 'day') {\n var lastDay = new Date(res.getFullYear(), res.getMonth() + 1, 0).getDate();\n if ((tValue < 1 || tValue > lastDay)) {\n return null;\n }\n }\n res[timeSetter[key]](tValue);\n }\n }\n }\n if (!isUndefined(desig)) {\n var hour = res.getHours();\n if (desig === 'pm') {\n res.setHours(hour + (hour === 12 ? 0 : 12));\n }\n else if (hour === 12) {\n res.setHours(0);\n }\n }\n if (!isUndefined(tzone)) {\n var tzValue = tzone - res.getTimezoneOffset();\n if (tzValue !== 0) {\n res.setMinutes(res.getMinutes() + tzValue);\n }\n }\n return res;\n };\n /**\n * Returns date parsing options for provided value along with parse and numeric options\n * @param {string} value\n * @param {ParseOptions} parseOptions\n * @param {NumericOptions} num\n * @returns {DateParts}\n */\n DateParser.internalDateParse = function (value, parseOptions, num) {\n var matches = value.match(parseOptions.parserRegex);\n var retOptions = { 'hour': 0, 'minute': 0, 'second': 0 };\n var nRegx = num.numericRegex;\n if (isNullOrUndefined(matches)) {\n return null;\n }\n else {\n var props = Object.keys(parseOptions.evalposition);\n for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {\n var prop = props_1[_i];\n var curObject = parseOptions.evalposition[prop];\n var matchString = matches[curObject.pos];\n if (curObject.isNumber) {\n retOptions[prop] = this.internalNumberParser(matchString, num);\n }\n else {\n if (prop === 'timeZone' && !isUndefined(matchString)) {\n var pos = curObject.pos;\n var val = void 0;\n var tmatch = matches[pos + 1];\n var flag = !isUndefined(tmatch);\n if (curObject.hourOnly) {\n val = this.getZoneValue(flag, tmatch, matches[pos + 4], num) * 60;\n }\n else {\n val = this.getZoneValue(flag, tmatch, matches[pos + 7], num) * 60;\n val += this.getZoneValue(flag, matches[pos + 4], matches[pos + 10], num);\n }\n if (!isNullOrUndefined(val)) {\n retOptions[prop] = val;\n }\n }\n else {\n retOptions[prop] = parseOptions[prop][matchString];\n }\n }\n }\n if (parseOptions.hour12) {\n retOptions.hour12 = true;\n }\n }\n return retOptions;\n };\n /**\n * Returns parsed number for provided Numeric string and Numeric Options\n * @param {string} value\n * @param {NumericOptions} option\n * @returns {number}\n */\n DateParser.internalNumberParser = function (value, option) {\n value = parser.convertValueParts(value, option.numberParseRegex, option.numericPair);\n if (latnRegex.test(value)) {\n return +value;\n }\n return null;\n };\n /**\n * Returns parsed time zone RegExp for provided hour format and time zone\n * @param {string} hourFormat\n * @param {base.TimeZoneOptions} tZone\n * @param {string} nRegex\n * @returns {string}\n */\n DateParser.parseTimeZoneRegx = function (hourFormat, tZone, nRegex) {\n var pattern = tZone.gmtFormat;\n var ret;\n var result;\n var cRegex = '(' + nRegex + ')' + '(' + nRegex + ')';\n var splitStr;\n ret = hourFormat.replace('+', '\\\\+');\n if (hourFormat.indexOf('HH') !== -1) {\n ret = ret.replace(/HH|mm/g, '(' + cRegex + ')');\n }\n else {\n ret = ret.replace(/H|m/g, '(' + cRegex + '?)');\n }\n splitStr = (ret.split(';').map(function (str) {\n return pattern.replace('{0}', str);\n }));\n ret = splitStr.join('|') + '|' + tZone.gmtZeroFormat;\n return ret;\n };\n /**\n * Returns zone based value.\n * @param {boolean} flag\n * @param {string} val1\n * @param {string} val2\n * @param {NumericOptions} num\n * @returns {number}\n */\n DateParser.getZoneValue = function (flag, val1, val2, num) {\n var ival = flag ? val1 : val2;\n if (!ival) {\n return 0;\n }\n var value = this.internalNumberParser(ival, num);\n if (flag) {\n return -value;\n }\n return value;\n };\n return DateParser;\n}());\nexport { DateParser };\n","import { extend, isNullOrUndefined } from '../util';\nimport { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nvar formatRegex = /(^[ncpa]{1})([0-1]?[0-9]|20)?$/i;\nvar parseRegex = /^([^0-9]*)(([0-9,]*[0-9]+)(\\.[0-9]+)?)([Ee][+-]?[0-9]+)?([^0-9]*)$/;\nvar groupRegex = /,/g;\nvar latnDecimalRegex = /^[0-9]*(\\.[0-9]+)?$/;\nvar keys = ['minusSign', 'infinity'];\n/**\n * Module for Number Parser.\n * @private\n */\nvar NumberParser = /** @class */ (function () {\n function NumberParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n * @param {string} - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} - Specific the format in which number will parsed.\n * @param {cldr} - Specifies the global cldr data collection.\n * @return Function.\n */\n NumberParser.numberParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, true);\n var parseOptions = { custom: true };\n var numOptions;\n if ((base.formatRegex.test(option.format)) || !(option.format)) {\n extend(parseOptions, base.getProperNumericSkeleton(option.format || 'N'));\n parseOptions.custom = false;\n }\n else {\n extend(parseOptions, base.customFormat(option.format, null, null));\n }\n numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n parseOptions.symbolRegex = parser.getSymbolRegex(Object.keys(numOptions.symbolMatch));\n // tslint:disable-next-line:no-any\n parseOptions.infinity = numOptions.symbolNumberSystem[keys[1]];\n var symbolpattern = base.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount);\n if (symbolpattern) {\n symbolpattern = symbolpattern.replace(/\\u00A4/g, base.defaultCurrency);\n var split = symbolpattern.split(';');\n parseOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, '');\n parseOptions.pData = base.getFormatData(split[0], true, '');\n }\n return function (value) {\n return _this.getParsedNumber(value, parseOptions, numOptions);\n };\n };\n /**\n * Returns parsed number for the provided formatting options\n * @param {string} value\n * @param {NumericParts} options\n * @param {NumericOptions} numOptions\n * @returns {number}\n */\n NumberParser.getParsedNumber = function (value, options, numOptions) {\n var isNegative;\n var isPercent;\n var tempValue;\n var lead;\n var end;\n var ret;\n if (value.indexOf(options.infinity) !== -1) {\n return Infinity;\n }\n else {\n value = parser.convertValueParts(value, options.symbolRegex, numOptions.symbolMatch);\n value = parser.convertValueParts(value, numOptions.numberParseRegex, numOptions.numericPair);\n if (value.indexOf('.') === 0) {\n value = '0' + value;\n }\n var matches = value.match(parseRegex);\n if (isNullOrUndefined(matches)) {\n return NaN;\n }\n lead = matches[1];\n tempValue = matches[2];\n var exponent = matches[5];\n end = matches[6];\n isNegative = options.custom ? ((lead === options.nData.nlead) && (end === options.nData.nend)) :\n ((lead.indexOf(options.nData.nlead) !== -1) && (end.indexOf(options.nData.nend) !== -1));\n isPercent = isNegative ?\n options.nData.isPercent :\n options.pData.isPercent;\n tempValue = tempValue.replace(groupRegex, '');\n if (exponent) {\n tempValue += exponent;\n }\n ret = +tempValue;\n if (options.type === 'percent' || isPercent) {\n ret = ret / 100;\n }\n if (options.custom || options.fractionDigits) {\n ret = parseFloat(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.fractionDigits));\n }\n if (isNegative) {\n ret *= -1;\n }\n return ret;\n }\n };\n return NumberParser;\n}());\nexport { NumberParser };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible } from './dom';\nimport { Property, Complex, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { ChildProperty } from './child-property';\nimport { select, closest, setStyleAttribute, addClass, createElement } from './dom';\nimport { extend, isUndefined, isNullOrUndefined, compareElementParent } from './util';\nvar defaultPosition = { left: 0, top: 0, bottom: 0, right: 0 };\nvar positionProp = ['offsetLeft', 'offsetTop'];\nvar axisMapper = ['x', 'y'];\nvar axisValueMapper = ['left', 'top'];\n/**\n * Specifies the position coordinates\n */\nvar Position = /** @class */ (function (_super) {\n __extends(Position, _super);\n function Position() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], Position.prototype, \"left\", void 0);\n __decorate([\n Property(0)\n ], Position.prototype, \"top\", void 0);\n return Position;\n}(ChildProperty));\nexport { Position };\n/**\n * Draggable Module provides support to enable draggable functionality in Dom Elements.\n * ```html\n * Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.diffY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, this.initialize);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, this.initialize, this);\n }\n };\n Draggable.prototype.initialize = function (evt) {\n this.target = evt.currentTarget;\n if (this.preventDefault && !isUndefined(evt.changedTouches)) {\n evt.preventDefault();\n }\n if (this.abort) {\n if (!isNullOrUndefined(closest(evt.target, this.abort))) {\n return;\n }\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.relativeXPosition = intCoord.pageX - pos.left;\n this.relativeYPosition = intCoord.pageY - pos.top;\n }\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n this.toggleEvents(true);\n document.body.classList.add('e-prevent-select');\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10),\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if (distance >= this.distance) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStart', { event: evt, element: element, target: curTarget });\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n var posValue = this.getProcessedPositionValue({ top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px' });\n setStyleAttribute(dragTargetElement, {\n position: 'absolute', top: posValue.top, left: posValue.left\n });\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n document.body.classList.remove('e-prevent-select');\n }\n }\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.axis) {\n if (this.axis === 'x') {\n value.top = '0px';\n }\n else if (this.axis === 'y') {\n value.left = '0px';\n }\n }\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.intOver(evt, eleObj.target);\n /* tslint:disable no-any */\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n this.hoverObject = eleObj;\n }\n else if (this.hoverObject) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n if (this.dragArea) {\n var styles = getComputedStyle(helperElement);\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right < dLeft + helperWidth) {\n left = this.dragLimit.right - helperWidth;\n }\n else {\n left = dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom < dTop + helperHeight) {\n top = this.dragLimit.bottom - helperHeight;\n }\n else {\n top = dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n var dragValue = this.getProcessedPositionValue({ top: (top - iTop) + 'px', left: (left - iLeft) + 'px' });\n setStyleAttribute(helperElement, { left: dragValue.left, top: dragValue.top });\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n Draggable.prototype.intDestroy = function (evt) {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = elementArea.width ? elementArea.width : elementArea.right - elementArea.left;\n eleHeightBound = elementArea.height ? elementArea.height : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n top = elementArea.top;\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = top + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.display || '';\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1) {\n this.helperElement.style.display = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.display = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n Draggable.prototype.getMousePosition = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var pageX = this.clone ? intCoord.pageX : intCoord.pageX - this.relativeXPosition;\n var pageY = this.clone ? intCoord.pageY : intCoord.pageY - this.relativeYPosition;\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n var Draggable_1;\n}(Base));\nexport { Draggable };\n","import { createElement, attributes, addClass, removeClass, detach, classList, closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLASSNAMES = {\n RTL: 'e-rtl',\n DISABLE: 'e-disabled',\n INPUT: 'e-input',\n INPUTGROUP: 'e-input-group',\n FLOATINPUT: 'e-float-input',\n FLOATLINE: 'e-float-line',\n FLOATTEXT: 'e-float-text',\n CLEARICON: 'e-clear-icon',\n CLEARICONHIDE: 'e-clear-icon-hide',\n LABELTOP: 'e-label-top',\n LABELBOTTOM: 'e-label-bottom',\n NOFLOATLABEL: 'e-no-float-label',\n INPUTCUSTOMTAG: 'e-input-custom-tag',\n FLOATCUSTOMTAG: 'e-float-custom-tag'\n};\n/**\n * Base for Input creation through util methods.\n */\nexport var Input;\n(function (Input) {\n var privateInputObj = {\n container: null,\n buttons: [],\n clearButton: null\n };\n /**\n * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.\n * ```\n * E.g : Input.createInput({ element: element, floatLabelType : \"Auto\", properties: { placeholder: 'Search' } });\n * ```\n * @param args\n */\n function createInput(args) {\n var inputObject = { container: null, buttons: [], clearButton: null };\n if (isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') {\n inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span');\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n addClass([args.element], CLASSNAMES.INPUT);\n inputObject.container.appendChild(args.element);\n }\n else {\n createFloatingInput(args, inputObject);\n }\n args.element.addEventListener('focus', function () {\n var parent = getParentNode(this);\n if (parent.classList.contains('e-input-group')) {\n parent.classList.add('e-input-focus');\n }\n });\n args.element.addEventListener('blur', function () {\n var parent = getParentNode(this);\n if (parent.classList.contains('e-input-group')) {\n parent.classList.remove('e-input-focus');\n }\n });\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) && args.properties.showClearButton) {\n setClearButton(args.properties.showClearButton, args.element, inputObject, true);\n if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([inputObject.container], CLASSNAMES.INPUTGROUP);\n }\n }\n if (!isNullOrUndefined(args.buttons)) {\n for (var i = 0; i < args.buttons.length; i++) {\n inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container));\n }\n }\n inputObject = setPropertyValue(args, inputObject);\n privateInputObj = inputObject;\n return inputObject;\n }\n Input.createInput = createInput;\n function _focusFn() {\n var label = getParentNode(this).getElementsByClassName('e-float-text')[0];\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n function _blurFn() {\n var parent = getParentNode(this);\n if (parent.getElementsByTagName('input')[0].value === '') {\n var label = parent.getElementsByClassName('e-float-text')[0];\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n function wireFloatingEvents(element) {\n element.addEventListener('focus', _focusFn);\n element.addEventListener('blur', _blurFn);\n }\n function unwireFloatingEvents(element) {\n element.removeEventListener('focus', _focusFn);\n element.removeEventListener('blur', _blurFn);\n }\n function createFloatingInput(args, inputObject) {\n var inputElement;\n var floatLinelement;\n var floatLabelElement;\n if (args.floatLabelType === 'Auto') {\n wireFloatingEvents(args.element);\n }\n if (isNullOrUndefined(inputObject.container)) {\n inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div');\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n }\n else {\n if (!isNullOrUndefined(args.customTag)) {\n inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG);\n }\n inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);\n }\n floatLinelement = createElement('span', { className: CLASSNAMES.FLOATLINE });\n floatLabelElement = createElement('label', { className: CLASSNAMES.FLOATTEXT });\n if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {\n floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');\n attributes(args.element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') {\n floatLabelElement.innerHTML = args.element.placeholder;\n args.element.removeAttribute('placeholder');\n }\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) &&\n args.properties.placeholder !== '') {\n floatLabelElement.innerHTML = args.properties.placeholder;\n }\n if (!floatLabelElement.innerHTML) {\n inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL);\n }\n inputObject.container.appendChild(args.element);\n inputObject.container.appendChild(floatLinelement);\n inputObject.container.appendChild(floatLabelElement);\n updateLabelState(args.element.value, floatLabelElement);\n if (args.floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM);\n }\n addClass([floatLabelElement], CLASSNAMES.LABELTOP);\n }\n if (args.floatLabelType === 'Auto') {\n args.element.addEventListener('input', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n args.element.addEventListener('blur', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n }\n }\n function setPropertyValue(args, inputObject) {\n if (!isNullOrUndefined(args.properties)) {\n for (var _i = 0, _a = Object.keys(args.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n setCssClass(args.properties.cssClass, [inputObject.container]);\n break;\n case 'enabled':\n setEnabled(args.properties.enabled, args.element);\n break;\n case 'enableRtl':\n setEnableRtl(args.properties.enableRtl, [inputObject.container]);\n break;\n case 'placeholder':\n setPlaceholder(args.properties.placeholder, args.element);\n break;\n case 'readonly':\n setReadonly(args.properties.readonly, args.element);\n break;\n }\n }\n }\n return inputObject;\n }\n function updateIconState(value, button) {\n if (value) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n function updateLabelState(value, label) {\n if (value) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n else {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n function getParentNode(element) {\n var parentNode = element.parentNode;\n return parentNode;\n }\n /**\n * To create clear button.\n */\n function createClearButton(element, inputObject, initial) {\n var button = createElement('span', { className: CLASSNAMES.CLEARICON });\n var container = inputObject.container;\n if (!isNullOrUndefined(initial)) {\n container.appendChild(button);\n }\n else {\n var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ?\n inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;\n baseElement.insertAdjacentElement('afterend', button);\n }\n if (!isNullOrUndefined(container) &&\n container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([container], CLASSNAMES.INPUTGROUP);\n }\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n wireClearBtnEvents(element, button, container);\n return button;\n }\n function wireClearBtnEvents(element, button, container) {\n button.addEventListener('click', function (event) {\n if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {\n event.preventDefault();\n if (element !== document.activeElement) {\n element.focus();\n }\n element.value = '';\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n });\n element.addEventListener('input', function (event) {\n updateIconState(element.value, button);\n });\n element.addEventListener('focus', function (event) {\n updateIconState(element.value, button);\n });\n element.addEventListener('blur', function (event) {\n setTimeout(function () { addClass([button], CLASSNAMES.CLEARICONHIDE); }, 200);\n });\n }\n function validateLabel(element, floatLabelType) {\n var parent = getParentNode(element);\n if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {\n var label = getParentNode(element).getElementsByClassName('e-float-text')[0];\n updateLabelState(element.value, label);\n }\n }\n /**\n * To create input box contianer.\n */\n function createInputContainer(args, className, tagClass, tag) {\n var container;\n if (!isNullOrUndefined(args.customTag)) {\n container = createElement(args.customTag, { className: className });\n container.classList.add(tagClass);\n }\n else {\n container = createElement(tag, { className: className });\n }\n container.classList.add('e-control-wrapper');\n return container;\n }\n /**\n * Sets the value to the input element.\n * ```\n * E.g : Input.setValue('content', element, \"Auto\", true );\n * ```\n * @param value - Specify the value of the input element.\n * @param element - The element on which the specified value is updated.\n * @param floatLabelType - Specify the float label type of the input element.\n * @param clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.\n */\n function setValue(value, element, floatLabelType, clearButton) {\n element.value = value;\n if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {\n validateLabel(element, floatLabelType);\n }\n if (!isNullOrUndefined(clearButton) && clearButton) {\n var parentElement = getParentNode(element);\n var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];\n if (element.value && parentElement.classList.contains('e-input-focus')) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n Input.setValue = setValue;\n /**\n * Sets the single or multiple cssClass to wrapper of input element.\n * ```\n * E.g : Input.setCssClass('e-custom-class', [element]);\n * ```\n * @param cssClass - Css class names which are needed to add.\n * @param elements - The elements which are needed to add / remove classes.\n * @param oldClass - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.\n */\n function setCssClass(cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass);\n }\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass);\n }\n }\n Input.setCssClass = setCssClass;\n /**\n * Set the placeholder attribute to the input element.\n * ```\n * E.g : Input.setPlaceholder('Search here', element);\n * ```\n * @param placeholder - Placeholder value which is need to add.\n * @param element - The element on which the placeholder is need to add.\n */\n function setPlaceholder(placeholder, element) {\n var parentElement;\n parentElement = getParentNode(element);\n if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;\n parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);\n }\n else {\n parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n }\n else {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder });\n }\n else {\n element.removeAttribute('placeholder');\n element.removeAttribute('aria-placeholder');\n }\n }\n }\n Input.setPlaceholder = setPlaceholder;\n /**\n * Set the read only attribute to the input element\n * ```\n * E.g : Input.setReadonly(true, element);\n * ```\n * @param isReadonly\n * - Boolean value to specify whether to set read only. Setting \"True\" value enables read only.\n * @param element\n * - The element which is need to enable read only.\n */\n function setReadonly(isReadonly, element, floatLabelType) {\n if (isReadonly) {\n attributes(element, { readonly: '' });\n }\n else {\n element.removeAttribute('readonly');\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setReadonly = setReadonly;\n /**\n * Displays the element direction from right to left when its enabled.\n * ```\n * E.g : Input.setEnableRtl(true, [inputObj.container]);\n * ```\n * @param isRtl\n * - Boolean value to specify whether to set RTL. Setting \"True\" value enables the RTL mode.\n * @param elements\n * - The elements that are needed to enable/disable RTL.\n */\n function setEnableRtl(isRtl, elements) {\n if (isRtl) {\n addClass(elements, CLASSNAMES.RTL);\n }\n else {\n removeClass(elements, CLASSNAMES.RTL);\n }\n }\n Input.setEnableRtl = setEnableRtl;\n /**\n * Enables or disables the given input element.\n * ```\n * E.g : Input.setEnabled(false, element);\n * ```\n * @param isEnable\n * - Boolean value to specify whether to enable or disable.\n * @param element\n * - Element to be enabled or disabled.\n */\n function setEnabled(isEnable, element, floatLabelType) {\n var disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' };\n if (isEnable) {\n element.classList.remove(CLASSNAMES.DISABLE);\n removeAttributes(disabledAttrs, element);\n }\n else {\n element.classList.add(CLASSNAMES.DISABLE);\n addAttributes(disabledAttrs, element);\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setEnabled = setEnabled;\n function setClearButton(isClear, element, inputObject, initial) {\n if (isClear) {\n inputObject.clearButton = createClearButton(element, inputObject, initial);\n }\n else {\n inputObject.clearButton.remove();\n inputObject.clearButton = null;\n }\n }\n Input.setClearButton = setClearButton;\n /**\n * Removing the multiple attributes from the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element);\n * ```\n * @param attrs\n * - Array of attributes which are need to removed from the element.\n * @param element\n * - Element on which the attributes are needed to be removed.\n */\n function removeAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = void 0;\n parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n else {\n element.removeAttribute(key);\n }\n }\n }\n Input.removeAttributes = removeAttributes;\n /**\n * Adding the multiple attributes to the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element);\n * ```\n * @param attrs\n * - Array of attributes which is added to element.\n * @param element\n * - Element on which the attributes are needed to be added.\n */\n function addAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = void 0;\n parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];\n }\n else {\n element.setAttribute(key, attrs[key]);\n }\n }\n }\n Input.addAttributes = addAttributes;\n function removeFloating(input) {\n var container = input.container;\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n var inputEle = container.querySelector('input');\n var placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent;\n var clearButton = container.querySelector('.e-clear-icon') !== null;\n detach(container.querySelector('.' + CLASSNAMES.FLOATLINE));\n detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT));\n classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]);\n unwireFloatingEvents(inputEle);\n attributes(inputEle, { 'placeholder': placeholder });\n inputEle.classList.add(CLASSNAMES.INPUT);\n if (!clearButton) {\n inputEle.removeAttribute('required');\n }\n }\n }\n Input.removeFloating = removeFloating;\n function addFloating(input, type, placeholder) {\n var container = closest(input, '.' + CLASSNAMES.INPUTGROUP);\n if (type !== 'Never') {\n var customTag = container.tagName;\n customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;\n var args = { element: input, floatLabelType: type, customTag: customTag, properties: { placeholder: placeholder } };\n var iconEle = container.querySelector('.e-clear-icon');\n var inputObj = { container: container };\n input.classList.remove(CLASSNAMES.INPUT);\n createFloatingInput(args, inputObj);\n if (isNullOrUndefined(iconEle)) {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n if (isNullOrUndefined(iconEle)) {\n container.classList.remove(CLASSNAMES.INPUTGROUP);\n }\n else {\n var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);\n var floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT);\n container.insertBefore(input, iconEle);\n container.insertBefore(floatLine, iconEle);\n container.insertBefore(floatText, iconEle);\n }\n }\n }\n Input.addFloating = addFloating;\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.appendSpan('e-icon-spin', inputObj.container);\n * ```\n * @param iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param container - The container on which created span element is going to append.\n */\n function appendSpan(iconClass, container) {\n var button = createElement('span', { className: iconClass });\n container.appendChild(button);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n button.addEventListener('mousedown', function () {\n if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {\n this.classList.add('e-input-btn-ripple');\n }\n });\n button.addEventListener('mouseup', function () {\n var ele = this;\n setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500);\n });\n return button;\n }\n Input.appendSpan = appendSpan;\n})(Input || (Input = {}));\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n this.trigger('over', { event: event, target: element });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n *
;\n * \n * ```\n */\nvar KeyboardEvents = /** @class */ (function (_super) {\n __extends(KeyboardEvents, _super);\n /**\n * Initializes the KeyboardEvents\n * @param {HTMLElement} element\n * @param {KeyboardEventsModel} options\n */\n function KeyboardEvents(element, options) {\n var _this = _super.call(this, options, element) || this;\n /**\n * To handle a key press event returns null\n */\n _this.keyPressHandler = function (e) {\n var isAltKey = e.altKey;\n var isCtrlKey = e.ctrlKey;\n var isShiftKey = e.shiftKey;\n var curkeyCode = e.which;\n var keys = Object.keys(_this.keyConfigs);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n var configCollection = _this.keyConfigs[key].split(',');\n for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {\n var rconfig = configCollection_1[_a];\n var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());\n if (isAltKey === rKeyObj.altKey && isCtrlKey === rKeyObj.ctrlKey &&\n isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {\n e.action = key;\n if (_this.keyAction) {\n _this.keyAction(e);\n }\n }\n }\n }\n };\n _this.bind();\n return _this;\n }\n KeyboardEvents_1 = KeyboardEvents;\n /**\n * Unwire bound events and destroy the instance.\n * @return {void}\n */\n KeyboardEvents.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * Function can be used to specify certain action if a property is changed\n * @param newProp\n * @param oldProp\n * @returns {void}\n * @private\n */\n KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n ;\n KeyboardEvents.prototype.bind = function () {\n this.wireEvents();\n };\n /**\n * To get the module name, returns 'keyboard'.\n * @private\n */\n KeyboardEvents.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * Wiring event handlers to events\n */\n KeyboardEvents.prototype.wireEvents = function () {\n this.element.addEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * Unwiring event handlers to events\n */\n KeyboardEvents.prototype.unwireEvents = function () {\n this.element.removeEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * To get the key configuration data\n * @param {string} config - configuration data\n * returns {KeyData}\n */\n KeyboardEvents.getKeyConfigData = function (config) {\n if (config in this.configCache) {\n return this.configCache[config];\n }\n var keys = config.toLowerCase().split('+');\n var keyData = {\n altKey: (keys.indexOf('alt') !== -1 ? true : false),\n ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),\n shiftKey: (keys.indexOf('shift') !== -1 ? true : false),\n keyCode: null\n };\n if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {\n keyData.keyCode = Number(keys[keys.length - 1]);\n }\n else {\n keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);\n }\n KeyboardEvents_1.configCache[config] = keyData;\n return keyData;\n };\n // Return the keycode value as string \n KeyboardEvents.getKeyCode = function (keyVal) {\n return keyCode[keyVal] || keyVal.toUpperCase().charCodeAt(0);\n };\n KeyboardEvents.configCache = {};\n __decorate([\n Property({})\n ], KeyboardEvents.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property('keyup')\n ], KeyboardEvents.prototype, \"eventName\", void 0);\n __decorate([\n Event()\n ], KeyboardEvents.prototype, \"keyAction\", void 0);\n KeyboardEvents = KeyboardEvents_1 = __decorate([\n NotifyPropertyChanges\n ], KeyboardEvents);\n return KeyboardEvents;\n var KeyboardEvents_1;\n}(Base));\nexport { KeyboardEvents };\n","import { extend } from './util';\nimport { defaultCulture } from './internationalization';\n/**\n * L10n modules provides localized text for different culture.\n * ```typescript\n * import {setCulture} from '@syncfusion/ts-base-library';\n * //load global locale object common for all components.\n * L10n.load({\n * 'fr-BE': {\n * 'button': {\n * 'check': 'vérifié'\n * }\n * }\n * });\n * //set globale default locale culture.\n * setCulture('fr-BE');\n * let instance: L10n = new L10n('button', {\n * check: 'checked'\n * });\n * //Get locale text for current property.\n * instance.getConstant('check');\n * //Change locale culture in a component.\n * instance.setLocale('en-US');\n * ```\n */\nvar L10n = /** @class */ (function () {\n /**\n * Constructor\n */\n function L10n(controlName, localeStrings, locale) {\n this.controlName = controlName;\n this.localeStrings = localeStrings;\n this.setLocale(locale || defaultCulture);\n }\n /**\n * Sets the locale text\n * @param {string} locale\n * @returns {void}\n */\n L10n.prototype.setLocale = function (locale) {\n var intLocale = this.intGetControlConstant(L10n.locale, locale);\n this.currentLocale = intLocale || this.localeStrings;\n };\n /**\n * Sets the global locale for all components.\n * @param {Object} localeObject - specifies the localeObject to be set as global locale.\n */\n L10n.load = function (localeObject) {\n this.locale = extend(this.locale, localeObject, {}, true);\n };\n /**\n * Returns current locale text for the property based on the culture name and control name.\n * @param {string} propertyName - specifies the property for which localize text to be returned.\n * @return string\n */\n L10n.prototype.getConstant = function (prop) {\n /* tslint:disable no-any */\n return this.currentLocale[prop] || this.localeStrings[prop] || '';\n };\n /**\n * Returns the control constant object for current object and the locale specified.\n * @param {Object} curObject\n * @param {string} locale\n * @returns {Object}\n */\n L10n.prototype.intGetControlConstant = function (curObject, locale) {\n if (curObject[locale]) {\n return curObject[locale][this.controlName];\n }\n return null;\n };\n L10n.locale = {};\n return L10n;\n}());\nexport { L10n };\n","/**\n * To import utils\n */\nimport { isNullOrUndefined, } from './util';\nvar SvgRenderer = /** @class */ (function () {\n /* End-Properties */\n function SvgRenderer(rootID) {\n //Internal Variables \n this.svgLink = 'http://www.w3.org/2000/svg';\n this.rootId = rootID;\n }\n // method to get the attributes value\n /* tslint:disable */\n SvgRenderer.prototype.getOptionValue = function (options, key) {\n return options[key];\n }; /* tslint:enable */\n /**\n * To create a Html5 SVG element\n * @param {SVGAttributes} options - Options to create SVG\n * @return {Element}\n */\n SvgRenderer.prototype.createSvg = function (options) {\n if (isNullOrUndefined(options.id)) {\n options.id = this.rootId + '_svg';\n }\n this.svgObj = document.getElementById(options.id);\n if (isNullOrUndefined(document.getElementById(options.id))) {\n this.svgObj = document.createElementNS(this.svgLink, 'svg');\n }\n this.svgObj = this.setElementAttributes(options, this.svgObj);\n this.setSVGSize(options.width, options.height);\n return this.svgObj;\n };\n // method to set the height and width for the SVG element\n SvgRenderer.prototype.setSVGSize = function (width, height) {\n var element = document.getElementById(this.rootId);\n var size = !isNullOrUndefined(element) ? element.getBoundingClientRect() : null;\n if (isNullOrUndefined(this.width) || this.width <= 0) {\n this.svgObj.setAttribute('width', width ? width.toString() : size.width.toString());\n }\n else {\n this.svgObj.setAttribute('width', this.width.toString());\n }\n if (isNullOrUndefined(this.height) || this.height <= 0) {\n this.svgObj.setAttribute('height', height ? height.toString() : '450');\n }\n else {\n this.svgObj.setAttribute('height', this.height.toString());\n }\n };\n /**\n * To draw a path\n * @param {PathAttributes} options - Options to draw a path in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.drawPath = function (options) {\n var path = document.getElementById(options.id);\n if (path === null) {\n path = document.createElementNS(this.svgLink, 'path');\n }\n path = this.setElementAttributes(options, path);\n return path;\n };\n /**\n * To draw a line\n * @param {LineAttributes} options - Options to draw a line in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.drawLine = function (options) {\n var line = document.getElementById(options.id);\n if (line === null) {\n line = document.createElementNS(this.svgLink, 'line');\n }\n line = this.setElementAttributes(options, line);\n return line;\n };\n /**\n * To draw a rectangle\n * @param {BaseAttibutes} options - Required options to draw a rectangle in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.drawRectangle = function (options) {\n var rectangle = document.getElementById(options.id);\n if (rectangle === null) {\n rectangle = document.createElementNS(this.svgLink, 'rect');\n }\n rectangle = this.setElementAttributes(options, rectangle);\n return rectangle;\n };\n /**\n * To draw a circle\n * @param {CircleAttributes} options - Required options to draw a circle in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.drawCircle = function (options) {\n var circle = document.getElementById(options.id);\n if (circle === null) {\n circle = document.createElementNS(this.svgLink, 'circle');\n }\n circle = this.setElementAttributes(options, circle);\n return circle;\n };\n /**\n * To draw a polyline\n * @param {PolylineAttributes} options - Options required to draw a polyline\n * @return {Element}\n */\n SvgRenderer.prototype.drawPolyline = function (options) {\n var polyline = document.getElementById(options.id);\n if (polyline === null) {\n polyline = document.createElementNS(this.svgLink, 'polyline');\n }\n polyline = this.setElementAttributes(options, polyline);\n return polyline;\n };\n /**\n * To draw an ellipse\n * @param {EllipseAttributes} options - Options required to draw an ellipse\n * @return {Element}\n */\n SvgRenderer.prototype.drawEllipse = function (options) {\n var ellipse = document.getElementById(options.id);\n if (ellipse === null) {\n ellipse = document.createElementNS(this.svgLink, 'ellipse');\n }\n ellipse = this.setElementAttributes(options, ellipse);\n return ellipse;\n };\n /**\n * To draw a polygon\n * @param {PolylineAttributes} options - Options needed to draw a polygon in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.drawPolygon = function (options) {\n var polygon = document.getElementById(options.id);\n if (polygon === null) {\n polygon = document.createElementNS(this.svgLink, 'polygon');\n }\n polygon = this.setElementAttributes(options, polygon);\n return polygon;\n };\n /**\n * To draw an image\n * @param {ImageAttributes} options - Required options to draw an image in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.drawImage = function (options) {\n var img = document.createElementNS(this.svgLink, 'image');\n img.setAttributeNS(null, 'height', options.height.toString());\n img.setAttributeNS(null, 'width', options.width.toString());\n img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);\n img.setAttributeNS(null, 'x', options.x.toString());\n img.setAttributeNS(null, 'y', options.y.toString());\n img.setAttributeNS(null, 'id', options.id);\n img.setAttributeNS(null, 'visibility', options.visibility);\n if (!isNullOrUndefined(this.getOptionValue(options, 'clip-path'))) {\n img.setAttributeNS(null, 'clip-path', this.getOptionValue(options, 'clip-path'));\n }\n if (!isNullOrUndefined(options.preserveAspectRatio)) {\n img.setAttributeNS(null, 'preserveAspectRatio', options.preserveAspectRatio);\n }\n return img;\n };\n /**\n * To draw a text\n * @param {TextAttributes} options - Options needed to draw a text in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.createText = function (options, label) {\n var text = document.createElementNS(this.svgLink, 'text');\n text = this.setElementAttributes(options, text);\n if (!isNullOrUndefined(label)) {\n text.textContent = label;\n }\n return text;\n };\n /**\n * To create a tSpan\n * @param {TextAttributes} options - Options to create tSpan\n * @param {string} label - The text content which is to be rendered in the tSpan\n * @return {Element}\n */\n SvgRenderer.prototype.createTSpan = function (options, label) {\n var tSpan = document.createElementNS(this.svgLink, 'tspan');\n tSpan = this.setElementAttributes(options, tSpan);\n if (!isNullOrUndefined(label)) {\n tSpan.textContent = label;\n }\n return tSpan;\n };\n /**\n * To create a title\n * @param {string} text - The text content which is to be rendered in the title\n * @return {Element}\n */\n SvgRenderer.prototype.createTitle = function (text) {\n var title = document.createElementNS(this.svgLink, 'title');\n title.textContent = text;\n return title;\n };\n /**\n * To create defs element in SVG\n * @return {Element}\n */\n SvgRenderer.prototype.createDefs = function () {\n var defs = document.createElementNS(this.svgLink, 'defs');\n return defs;\n };\n /**\n * To create clip path in SVG\n * @param {BaseAttibutes} options - Options needed to create clip path\n * @return {Element}\n */\n SvgRenderer.prototype.createClipPath = function (options) {\n var clipPath = document.createElementNS(this.svgLink, 'clipPath');\n clipPath = this.setElementAttributes(options, clipPath);\n return clipPath;\n };\n /**\n * To create foreign object in SVG\n * @param {BaseAttibutes} options - Options needed to create foreign object\n * @return {Element}\n */\n SvgRenderer.prototype.createForeignObject = function (options) {\n var foreignObject = document.createElementNS(this.svgLink, 'foreignObject');\n foreignObject = this.setElementAttributes(options, foreignObject);\n return foreignObject;\n };\n /**\n * To create group element in SVG\n * @param {BaseAttibutes} options - Options needed to create group\n * @return {Element}\n */\n SvgRenderer.prototype.createGroup = function (options) {\n var group = document.createElementNS(this.svgLink, 'g');\n group = this.setElementAttributes(options, group);\n return group;\n };\n /**\n * To create pattern in SVG\n * @param {PatternAttributes} options - Required options to create pattern in SVG\n * @param {string} type - Specifies the name of the pattern\n * @return {Element}\n */\n SvgRenderer.prototype.createPattern = function (options, element) {\n var pattern = document.createElementNS(this.svgLink, element);\n pattern = this.setElementAttributes(options, pattern);\n return pattern;\n };\n /**\n * To create radial gradient in SVG\n * @param {string[]} colors - Specifies the colors required to create radial gradient\n * @param {string[]} colorStop - Specifies the colorstop required to create radial gradient\n * @param {string} name - Specifies the name of the gradient\n * @param {RadialGradient} options - value for radial gradient\n * @return {string}\n */\n SvgRenderer.prototype.createRadialGradient = function (colors, name, options) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n var newOptions = {\n 'id': this.rootId + '_' + name + 'radialGradient',\n 'cx': options.cx + '%',\n 'cy': options.cy + '%',\n 'r': options.r + '%',\n 'fx': options.fx + '%',\n 'fy': options.fy + '%'\n };\n this.drawGradient('radialGradient', newOptions, colors);\n colorName = 'url(#' + this.rootId + '_' + name + 'radialGradient)';\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To create linear gradient in SVG\n * @param {string[]} colors - Array of string specifies the values for color\n * @param {string[]} colors - Array of string specifies the values for colorStop\n * @param {string} name - Specifies the name of the gradient\n * @param {LinearGradient} options - Specifies the options for gradient\n * @return {string}\n */\n SvgRenderer.prototype.createLinearGradient = function (colors, name, options) {\n var colorName;\n if (!isNullOrUndefined(colors[0].colorStop)) {\n var newOptions = {\n 'id': this.rootId + '_' + name + 'linearGradient',\n 'x1': options.x1 + '%',\n 'y1': options.y1 + '%',\n 'x2': options.x2 + '%',\n 'y2': options.y2 + '%'\n };\n this.drawGradient('linearGradient', newOptions, colors);\n colorName = 'url(#' + this.rootId + '_' + name + 'linearGradient)';\n }\n else {\n colorName = colors[0].color.toString();\n }\n return colorName;\n };\n /**\n * To render the gradient element in SVG\n * @param {string} gradientType - Specifies the type of the gradient\n * @param {RadialGradient | LinearGradient} options - Options required to render a gradient\n * @param {string[]} colors - Array of string specifies the values for color\n * @param {string[]} colorStop - Array of string specifies the values for colorStop\n * @return {Element}\n */\n SvgRenderer.prototype.drawGradient = function (gradientType, options, colors) {\n var defs = this.createDefs();\n var gradient = document.createElementNS(this.svgLink, gradientType);\n gradient = this.setElementAttributes(options, gradient);\n for (var i = 0; i < colors.length; i++) {\n var stop_1 = document.createElementNS(this.svgLink, 'stop');\n stop_1.setAttribute('offset', colors[i].colorStop);\n stop_1.setAttribute('stop-color', colors[i].color);\n stop_1.setAttribute('stop-opacity', '1');\n gradient.appendChild(stop_1);\n }\n defs.appendChild(gradient);\n return defs;\n };\n /**\n * To render a clip path\n * @param {BaseAttibutes} options - Options required to render a clip path\n * @return {Element}\n */\n SvgRenderer.prototype.drawClipPath = function (options) {\n var defs = this.createDefs();\n var clipPath = this.createClipPath({ 'id': options.id });\n var rect = this.drawRectangle(options);\n clipPath.appendChild(rect);\n defs.appendChild(clipPath);\n return defs;\n };\n /**\n * To create circular clip path in SVG\n * @param {CircleAttributes} options - Options required to create circular clip path\n * @return {Element}\n */\n SvgRenderer.prototype.drawCircularClipPath = function (options) {\n var defs = this.createDefs();\n var clipPath = this.createClipPath({ 'id': options.id });\n var circle = this.drawCircle(options);\n clipPath.appendChild(circle);\n defs.appendChild(clipPath);\n return defs;\n };\n /**\n * To set the attributes to the element\n * @param {SVGCanvasAttributes} options - Attributes to set for the element\n * @param {Element} element - The element to which the attributes need to be set\n * @return {Element}\n */\n SvgRenderer.prototype.setElementAttributes = function (options, element) {\n var keys = Object.keys(options);\n for (var i = 0; i < keys.length; i++) {\n element.setAttribute(keys[i], options[keys[i]]);\n }\n return element;\n };\n return SvgRenderer;\n}());\nexport { SvgRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { extend } from './util';\nimport { Property, Complex, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Browser } from './browser';\nimport { Base } from './base';\nimport { ChildProperty } from './child-property';\nimport { EventHandler } from './event-handler';\n/**\n * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc..,\n * @private\n */\nvar SwipeSettings = /** @class */ (function (_super) {\n __extends(SwipeSettings, _super);\n function SwipeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(50)\n ], SwipeSettings.prototype, \"swipeThresholdDistance\", void 0);\n return SwipeSettings;\n}(ChildProperty));\nexport { SwipeSettings };\nvar swipeRegex = /(Up|Down)/;\n/**\n * Touch class provides support to handle the touch event like tap, double tap, tap hold, etc..,\n * ```typescript\n * let node: HTMLElement;\n * let touchObj: Touch = new Touch({\n * element: node,\n * tap: function (e) {\n * // tap handler function code\n * }\n * tapHold: function (e) {\n * // tap hold handler function code\n * }\n * scroll: function (e) {\n * // scroll handler function code\n * }\n * swipe: function (e) {\n * // swipe handler function code\n * }\n * });\n * ```\n */\nvar Touch = /** @class */ (function (_super) {\n __extends(Touch, _super);\n /* End-Properties */\n function Touch(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.touchAction = true;\n _this.tapCount = 0;\n _this.startEvent = function (evt) {\n if (_this.touchAction === true) {\n var point = (evt.changedTouches ? evt.changedTouches[0] : evt);\n if (evt.changedTouches !== undefined) {\n _this.touchAction = false;\n }\n _this.isTouchMoved = false;\n _this.movedDirection = '';\n _this.startPoint = _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n _this.startEventData = point;\n _this.hScrollLocked = _this.vScrollLocked = false;\n _this.tStampStart = Date.now();\n _this.timeOutTapHold = setTimeout(function () { _this.tapHoldEvent(evt); }, _this.tapHoldThreshold);\n EventHandler.add(_this.element, Browser.touchMoveEvent, _this.moveEvent, _this);\n EventHandler.add(_this.element, Browser.touchEndEvent, _this.endEvent, _this);\n }\n };\n _this.moveEvent = function (evt) {\n var point = evt.changedTouches ? evt.changedTouches[0] : evt;\n _this.movedPoint = point;\n _this.isTouchMoved = !(point.clientX === _this.startPoint.clientX && point.clientY === _this.startPoint.clientY);\n var eScrollArgs = {};\n if (_this.isTouchMoved) {\n clearTimeout(_this.timeOutTapHold);\n _this.calcScrollPoints(evt);\n var scrollArg = {\n startEvents: _this.startEventData,\n originalEvent: evt, startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY, distanceX: _this.distanceX,\n distanceY: _this.distanceY, scrollDirection: _this.scrollDirection,\n velocity: _this.getVelocity(point)\n };\n eScrollArgs = extend(eScrollArgs, {}, scrollArg);\n _this.trigger('scroll', eScrollArgs);\n _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n }\n };\n _this.endEvent = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n var point = evt;\n if (evt.changedTouches) {\n point = evt.changedTouches[0];\n }\n var diffX = point.clientX - _this.startPoint.clientX;\n var diffY = point.clientY - _this.startPoint.clientY;\n diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX);\n diffY = Math.floor(diffY < 0 ? -1 * diffY : diffX);\n _this.isTouchMoved = diffX > 1 || diffY > 1;\n _this.endPoint = point;\n var eSwipeArgs;\n var tDistance = _this.swipeSettings.swipeThresholdDistance;\n _this.calcPoints(evt);\n var swipeArgs = {\n originalEvent: evt,\n startEvents: _this.startEventData,\n startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY,\n distanceX: _this.distanceX, distanceY: _this.distanceY, swipeDirection: _this.movedDirection,\n velocity: _this.getVelocity(point)\n };\n if (!_this.isTouchMoved) {\n if (typeof _this.tap === 'function') {\n _this.trigger('tap', { originalEvent: evt, tapCount: ++_this.tapCount });\n _this.timeOutTap = setTimeout(function () {\n _this.tapCount = 0;\n }, _this.tapThreshold);\n }\n }\n else {\n eSwipeArgs = extend(eSwipeArgs, _this.defaultArgs, swipeArgs);\n var canTrigger = false;\n var ele = _this.element;\n var scrollBool = _this.isScrollable(ele);\n var moved = swipeRegex.test(_this.movedDirection);\n if ((tDistance < _this.distanceX && !moved) || (tDistance < _this.distanceY && moved)) {\n if (!scrollBool) {\n canTrigger = true;\n }\n else {\n canTrigger = _this.checkSwipe(ele, moved);\n }\n }\n if (canTrigger) {\n _this.trigger('swipe', eSwipeArgs);\n }\n }\n _this.modeClear = setTimeout(function () {\n _this.touchAction = true;\n }, (typeof _this.tap !== 'function' ? 0 : 10));\n _this.lastTapTime = new Date().getTime();\n EventHandler.remove(_this.element, Browser.touchMoveEvent, _this.moveEvent);\n EventHandler.remove(_this.element, Browser.touchEndEvent, _this.endEvent);\n };\n _this.bind();\n return _this;\n }\n // triggers when property changed \n /**\n * @private\n * @param newProp\n * @param oldProp\n */\n Touch.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Touch.prototype.bind = function () {\n this.wireEvents();\n if (Browser.isIE) {\n this.element.classList.add('e-block-touch');\n }\n };\n /**\n * To destroy the touch instance.\n * @return {void}\n */\n Touch.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n // Need to changes the event binding once we updated the event handler.\n Touch.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchStartEvent, this.startEvent, this);\n };\n Touch.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.startEvent);\n };\n /**\n * Returns module name as touch\n * @returns {string}\n * @private\n */\n Touch.prototype.getModuleName = function () {\n return 'touch';\n };\n /**\n * Returns if the HTML element is Scrollable.\n * @param {HTMLElement} element - HTML Element to check if Scrollable.\n * @returns {boolean}\n */\n Touch.prototype.isScrollable = function (element) {\n var eleStyle = getComputedStyle(element);\n var style = eleStyle.overflow + eleStyle.overflowX + eleStyle.overflowY;\n if ((/(auto|scroll)/).test(style)) {\n return true;\n }\n return false;\n };\n Touch.prototype.tapHoldEvent = function (evt) {\n this.tapCount = 0;\n this.touchAction = true;\n var eTapArgs;\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.moveEvent);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.endEvent);\n eTapArgs = { originalEvent: evt };\n this.trigger('tapHold', eTapArgs);\n };\n Touch.prototype.calcPoints = function (evt) {\n var point = evt.changedTouches ? evt.changedTouches[0] : evt;\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.startPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.startPoint.clientY)));\n if (this.distanceX > this.distanceY) {\n this.movedDirection = (point.clientX > this.startPoint.clientX) ? 'Right' : 'Left';\n }\n else {\n this.movedDirection = (point.clientY < this.startPoint.clientY) ? 'Up' : 'Down';\n }\n };\n Touch.prototype.calcScrollPoints = function (evt) {\n var point = evt.changedTouches ? evt.changedTouches[0] : evt;\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.lastMovedPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.lastMovedPoint.clientY)));\n if ((this.distanceX > this.distanceY || this.hScrollLocked === true) && this.vScrollLocked === false) {\n this.scrollDirection = (point.clientX > this.lastMovedPoint.clientX) ? 'Right' : 'Left';\n this.hScrollLocked = true;\n }\n else {\n this.scrollDirection = (point.clientY < this.lastMovedPoint.clientY) ? 'Up' : 'Down';\n this.vScrollLocked = true;\n }\n };\n Touch.prototype.getVelocity = function (pnt) {\n var newX = pnt.clientX;\n var newY = pnt.clientY;\n var newT = Date.now();\n var xDist = newX - this.startPoint.clientX;\n var yDist = newY - this.startPoint.clientX;\n var interval = newT - this.tStampStart;\n return Math.sqrt(xDist * xDist + yDist * yDist) / interval;\n };\n // tslint:disable-next-line:no-any\n Touch.prototype.checkSwipe = function (ele, flag) {\n var keys = ['scroll', 'offset'];\n var temp = flag ? ['Height', 'Top'] : ['Width', 'Left'];\n if ((ele[keys[0] + temp[0]] <= ele[keys[1] + temp[0]])) {\n return true;\n }\n return (ele[keys[0] + temp[1]] === 0) ||\n (ele[keys[1] + temp[0]] + ele[keys[0] + temp[1]] >= ele[keys[0] + temp[0]]);\n };\n __decorate([\n Event()\n ], Touch.prototype, \"tap\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"tapHold\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"swipe\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"scroll\", void 0);\n __decorate([\n Property(350)\n ], Touch.prototype, \"tapThreshold\", void 0);\n __decorate([\n Property(750)\n ], Touch.prototype, \"tapHoldThreshold\", void 0);\n __decorate([\n Complex({}, SwipeSettings)\n ], Touch.prototype, \"swipeSettings\", void 0);\n Touch = __decorate([\n NotifyPropertyChanges\n ], Touch);\n return Touch;\n}(Base));\nexport { Touch };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';\nimport { addClass, createElement, detach, removeClass, rippleEffect, EventHandler } from '@syncfusion/ej2-base';\nimport { getTextNode } from '../common/common';\nvar cssClassName = {\n RTL: 'e-rtl',\n BUTTON: 'e-btn',\n PRIMARY: 'e-primary',\n ICONBTN: 'e-icon-btn'\n};\n/**\n * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.\n * ```html\n * Button \n * ```\n * ```typescript\n * \n * ```\n */\nvar Button = /** @class */ (function (_super) {\n __extends(Button, _super);\n /**\n * Constructor for creating the widget\n * @param {ButtonModel} options?\n * @param {string|HTMLButtonElement} element?\n */\n function Button(options, element) {\n return _super.call(this, options, element) || this;\n }\n Button.prototype.preRender = function () {\n // pre render code snippets\n };\n /**\n * Initialize the control rendering\n * @returns void\n * @private\n */\n Button.prototype.render = function () {\n this.initialize();\n };\n Button.prototype.initialize = function () {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (this.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n if (this.content) {\n this.element.innerHTML = this.content;\n }\n this.setIconCss();\n if (this.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n if (this.disabled) {\n this.controlStatus(this.disabled);\n }\n else {\n this.wireEvents();\n }\n rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });\n };\n Button.prototype.controlStatus = function (disabled) {\n this.element.disabled = disabled;\n };\n Button.prototype.setIconCss = function () {\n if (this.iconCss) {\n var span = createElement('span', { className: 'e-btn-icon ' + this.iconCss });\n if (!this.element.textContent.trim()) {\n this.element.classList.add(cssClassName.ICONBTN);\n }\n else {\n span.classList.add('e-icon-' + this.iconPosition.toLowerCase());\n }\n var node = this.element.childNodes[0];\n if (node && (this.iconPosition === 'Left')) {\n this.element.insertBefore(span, node);\n }\n else {\n this.element.appendChild(span);\n }\n }\n };\n Button.prototype.wireEvents = function () {\n if (this.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n };\n Button.prototype.unWireEvents = function () {\n if (this.isToggle) {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n }\n };\n Button.prototype.btnClickHandler = function () {\n if (this.element.classList.contains('e-active')) {\n this.element.classList.remove('e-active');\n }\n else {\n this.element.classList.add('e-active');\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n Button.prototype.destroy = function () {\n var span;\n var element = this.element;\n _super.prototype.destroy.call(this);\n removeClass([this.element], [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success',\n 'e-info', 'e-danger', 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round']);\n ['e-ripple', 'disabled'].forEach(function (value) {\n element.removeAttribute(value);\n });\n if (this.content) {\n element.innerHTML = element.innerHTML.replace(this.content, '');\n }\n span = element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.unWireEvents();\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n Button.prototype.getModuleName = function () {\n return 'btn';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n Button.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally if any of the property value changed.\n * @param {Button} newProp\n * @param {Button} oldProp\n * @returns void\n * @private\n */\n Button.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'isPrimary':\n if (newProp.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n else {\n this.element.classList.remove(cssClassName.PRIMARY);\n }\n break;\n case 'disabled':\n this.controlStatus(newProp.disabled);\n this.unWireEvents();\n break;\n case 'iconCss':\n var span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n span.className = 'e-btn-icon ' + newProp.iconCss;\n if (this.element.textContent.trim()) {\n if (this.iconPosition === 'Left') {\n span.classList.add('e-icon-left');\n }\n else {\n span.classList.add('e-icon-right');\n }\n }\n }\n else {\n this.setIconCss();\n }\n break;\n case 'iconPosition':\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.setIconCss();\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n else {\n this.element.classList.remove(cssClassName.RTL);\n }\n break;\n case 'content':\n var node = getTextNode(this.element);\n if (!node) {\n this.element.classList.remove(cssClassName.ICONBTN);\n }\n this.element.innerHTML = newProp.content;\n this.setIconCss();\n break;\n case 'isToggle':\n if (newProp.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n removeClass([this.element], ['e-active']);\n }\n break;\n }\n }\n };\n __decorate([\n Property('Left')\n ], Button.prototype, \"iconPosition\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isPrimary\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"content\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isToggle\", void 0);\n Button = __decorate([\n NotifyPropertyChanges\n ], Button);\n return Button;\n}(Component));\nexport { Button };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Event, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, createElement, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar CHECK = 'e-check';\nvar DISABLED = 'e-checkbox-disabled';\nvar FRAME = 'e-frame';\nvar INDETERMINATE = 'e-stop';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLECHECK = 'e-ripple-check';\nvar RIPPLEINDETERMINATE = 'e-ripple-stop';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-checkbox-wrapper';\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n * \n * \n * ```\n */\nvar CheckBox = /** @class */ (function (_super) {\n __extends(CheckBox, _super);\n /**\n * Constructor for creating the widget\n * @private\n */\n function CheckBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isKeyPressed = false;\n return _this;\n }\n CheckBox.prototype.changeState = function (state) {\n var ariaState;\n var rippleSpan;\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n }\n if (state === 'check') {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n ariaState = 'true';\n this.element.checked = true;\n }\n else if (state === 'uncheck') {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n ariaState = 'false';\n this.element.checked = false;\n }\n else {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n ariaState = 'mixed';\n this.element.indeterminate = true;\n }\n this.getWrapper().setAttribute('aria-checked', ariaState);\n };\n CheckBox.prototype.clickHandler = function (event) {\n this.focusOutHandler();\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n var changeEventArgs = { checked: this.element.checked, event: event };\n this.trigger('change', changeEventArgs);\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n CheckBox.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n if (this.element.id) {\n wrapper.setAttribute('id', this.element.id);\n }\n wrapper.innerHTML = '';\n }\n };\n CheckBox.prototype.focusHandler = function () {\n if (this.isKeyPressed) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n CheckBox.prototype.focusOutHandler = function () {\n this.getWrapper().classList.remove('e-focus');\n };\n /**\n * Gets the module name.\n * @private\n */\n CheckBox.prototype.getModuleName = function () {\n return 'checkbox';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n * @private\n */\n CheckBox.prototype.getPersistData = function () {\n return this.addOnPersist(['checked', 'indeterminate']);\n };\n CheckBox.prototype.getWrapper = function () {\n return this.element.parentElement.parentElement;\n };\n CheckBox.prototype.initialize = function () {\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.changeState('check');\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n CheckBox.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = createElement('div', {\n className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = createElement('label', { attrs: { for: this.element.id } });\n var frameSpan = createElement('span', { className: 'e-icons ' + FRAME });\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n var rippleSpan = createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n CheckBox.prototype.keyDownHandler = function () {\n this.isKeyPressed = true;\n };\n CheckBox.prototype.labelMouseHandler = function (e) {\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n CheckBox.prototype.mouseDownHandler = function () {\n this.isKeyPressed = false;\n };\n /**\n * Called internally if any of the property value changes.\n * @private\n */\n CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n wrapper.classList.remove(oldProp.cssClass);\n }\n wrapper.classList.add(newProp.cssClass);\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n var label = wrapper.getElementsByClassName(LABEL)[0];\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n this.element.setAttribute('value', newProp.value);\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n * @private\n */\n CheckBox.prototype.preRender = function () {\n var element = this.element;\n this.tagName = this.element.tagName;\n element = wrapperInitialize('EJS-CHECKBOX', 'checkbox', element, WRAPPER);\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n CheckBox.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n };\n CheckBox.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n CheckBox.prototype.setText = function (text) {\n var label = this.getWrapper().getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n label = createElement('span', { className: LABEL, innerHTML: text });\n var labelWrap = this.getWrapper().getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, this.getWrapper().getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n };\n CheckBox.prototype.unWireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(document, 'keydown', this.keyDownHandler);\n EventHandler.remove(wrapper, 'mousedown', this.mouseDownHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.remove(label, 'mousedown', this.labelMouseHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseHandler);\n };\n CheckBox.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(document, 'keydown', this.keyDownHandler, this);\n EventHandler.add(wrapper, 'mousedown', this.mouseDownHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseHandler, this);\n };\n __decorate([\n Event()\n ], CheckBox.prototype, \"change\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"indeterminate\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], CheckBox.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"value\", void 0);\n CheckBox = __decorate([\n NotifyPropertyChanges\n ], CheckBox);\n return CheckBox;\n}(Component));\nexport { CheckBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, rippleEffect, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { addClass, createElement, getInstance, getUniqueID, isRippleEnabled, removeClass } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n * \n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n * @private\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isKeyPressed = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var changeEventArgs = { value: this.value, event: event };\n this.trigger('change', changeEventArgs);\n };\n RadioButton.prototype.updateChange = function (state) {\n var input;\n var name = this.element.getAttribute('name');\n var radioGrp = document.querySelectorAll('input.e-radio[name=\"' + name + '\"]');\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n getInstance(input, RadioButton_1).checked = false;\n }\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.element.parentElement;\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n if (this.element.id) {\n radioWrap.setAttribute('id', this.element.id);\n }\n radioWrap.innerHTML = '';\n }\n };\n RadioButton.prototype.focusHandler = function () {\n if (this.isKeyPressed) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.focusOutHandler = function () {\n this.getLabel().classList.remove('e-focus');\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n * @private\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getLabel = function () {\n return this.element.nextElementSibling;\n };\n RadioButton.prototype.initialize = function () {\n this.initWrapper();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = createElement('div', { className: WRAPPER });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([label], this.cssClass.split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyDownHandler = function () {\n this.isKeyPressed = true;\n };\n RadioButton.prototype.labelRippleHandler = function (e) {\n var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, ripple);\n };\n RadioButton.prototype.mouseDownHandler = function () {\n this.isKeyPressed = false;\n };\n /**\n * Called internally if any of the property value changes.\n * @private\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange(newProp.checked);\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([label], oldProp.cssClass.split(' '));\n }\n addClass([label], newProp.cssClass.split(' '));\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n this.element.setAttribute('value', newProp.value);\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n * @private\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.tagName = this.element.tagName;\n element = wrapperInitialize('EJS-RADIOBUTTON', 'radio', element, WRAPPER);\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n textLabel = createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.getLabel();\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(document, 'keydown', this.keyDownHandler);\n EventHandler.remove(label, 'mousedown', this.mouseDownHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(document, 'keydown', this.keyDownHandler, this);\n EventHandler.add(label, 'mousedown', this.mouseDownHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);\n }\n };\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n var RadioButton_1;\n}(Component));\nexport { RadioButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, Collection, L10n, Browser, Complex } from '@syncfusion/ej2-base';\nimport { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { Draggable } from '@syncfusion/ej2-base';\nimport { Popup, PositionData, getZindexPartial } from '../popup/popup';\nimport { Button } from '@syncfusion/ej2-buttons';\nvar ButtonProps = /** @class */ (function (_super) {\n __extends(ButtonProps, _super);\n function ButtonProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], ButtonProps.prototype, \"buttonModel\", void 0);\n __decorate([\n Property()\n ], ButtonProps.prototype, \"click\", void 0);\n return ButtonProps;\n}(ChildProperty));\nexport { ButtonProps };\n/**\n * Specifies Dialog open and close animation settings.\n */\nvar AnimationSettings = /** @class */ (function (_super) {\n __extends(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Fade')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property(0)\n ], AnimationSettings.prototype, \"delay\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nexport { AnimationSettings };\nvar ROOT = 'e-dialog';\nvar RTL = 'e-rtl';\nvar DLG_HEADER_CONTENT = 'e-dlg-header-content';\nvar DLG_HEADER = 'e-dlg-header';\nvar DLG_FOOTER_CONTENT = 'e-footer-content';\nvar MODAL_DLG = 'e-dlg-modal';\nvar DLG_CONTENT = 'e-dlg-content';\nvar DLG_CLOSE_ICON = 'e-icon-dlg-close';\nvar DLG_OVERLAY = 'e-dlg-overlay';\nvar DLG_CONTAINER = 'e-dlg-container';\nvar SCROLL_DISABLED = 'e-scroll-disabled';\nvar DLG_PRIMARY_BUTTON = 'e-primary';\nvar ICON = 'e-icons';\nvar POPUP_ROOT = 'e-popup';\nvar DEVICE = 'e-device';\nvar FULLSCREEN = 'e-dlg-fullscreen';\nvar DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';\nvar DLG_HIDE = 'e-popup-close';\nvar DLG_SHOW = 'e-popup-open';\n/**\n * Represents the Dialog component that displays information to the user, and used to get the user input.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Dialog = /** @class */ (function (_super) {\n __extends(Dialog, _super);\n /**\n * Constructor for creating the widget\n * @hidden\n */\n function Dialog(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the control rendering\n * @private\n */\n Dialog.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n };\n /**\n * Initialize the event handler\n * @private\n */\n Dialog.prototype.preRender = function () {\n var _this = this;\n this.headerContent = null;\n var classArray = [];\n for (var j = 0; j < this.element.classList.length; j++) {\n if (!isNullOrUndefined(this.element.classList[j].match('e-control')) ||\n !isNullOrUndefined(this.element.classList[j].match(ROOT))) {\n classArray.push(this.element.classList[j]);\n }\n }\n removeClass([this.element], classArray);\n this.clonedEle = this.element.cloneNode(true);\n this.closeIconClickEventHandler = function (event) {\n _this.hide();\n _this.closedFrom = event;\n };\n this.dlgOverlayClickEventHandler = function (event) {\n _this.trigger('overlayClick', event);\n };\n var localeText = { close: 'Close' };\n this.l10n = new L10n('dialog', localeText, this.locale);\n };\n ;\n Dialog.prototype.keyDown = function (event) {\n var _this = this;\n if (event.keyCode === 9) {\n if (this.isModal) {\n var buttonObj = void 0;\n if (!isNullOrUndefined(this.btnObj)) {\n buttonObj = this.btnObj[this.btnObj.length - 1];\n }\n if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {\n event.preventDefault();\n this.focusableElements(this.element).focus();\n }\n if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {\n event.preventDefault();\n if (!isNullOrUndefined(buttonObj)) {\n buttonObj.element.focus();\n }\n }\n }\n }\n var element = document.activeElement;\n var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);\n var isContentEdit = false;\n if (!isTagName) {\n isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';\n }\n if (event.keyCode === 27 && this.closeOnEscape) {\n this.hide();\n this.closedFrom = event;\n }\n if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&\n isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||\n (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||\n isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {\n var buttonIndex_1;\n var firstPrimary = this.buttons.some(function (data, index) {\n buttonIndex_1 = index;\n var buttonModel = data.buttonModel;\n return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;\n });\n if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {\n setTimeout(function () {\n _this.buttons[buttonIndex_1].click.call(_this, event);\n });\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n Dialog.prototype.initialize = function () {\n if (!isNullOrUndefined(this.target)) {\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n }\n addClass([this.element], ROOT);\n if (Browser.isDevice) {\n addClass([this.element], DEVICE);\n }\n this.setCSSClass();\n this.setMaxHeight();\n };\n /**\n * Initialize the rendering\n * @private\n */\n Dialog.prototype.initRender = function () {\n var _this = this;\n attributes(this.element, { role: 'dialog' });\n if (this.zIndex === 1000) {\n this.zIndex = getZindexPartial(this.element);\n }\n this.setTargetContent();\n if (this.header !== '') {\n this.setHeader();\n }\n if (this.showCloseIcon) {\n this.renderCloseIcon();\n }\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n this.setContent();\n }\n else if (this.element.hasChildNodes()) {\n this.contentEle = this.element;\n }\n if (this.footerTemplate !== '') {\n this.setFooterTemplate();\n }\n if (!isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n this.setButton();\n }\n if (this.allowDragging && (!this.isModal) && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });\n if (this.isModal) {\n this.setIsModal();\n }\n if (!isNullOrUndefined(this.targetEle)) {\n this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);\n }\n this.popupObj = new Popup(this.element, {\n height: this.height,\n width: this.width,\n zIndex: this.zIndex,\n relateTo: this.target,\n actionOnScroll: 'none',\n open: function () {\n _this.focusContent();\n _this.trigger('open');\n },\n close: function (event) {\n _this.unBindEvent(_this.element);\n if (_this.isModal) {\n _this.dlgContainer.style.display = 'none';\n }\n _this.trigger('close', _this.closedFrom);\n _this.closedFrom = {};\n if (!isNullOrUndefined(_this.storeActiveElement)) {\n _this.storeActiveElement.focus();\n }\n }\n });\n this.positionChange();\n this.setEnableRTL();\n addClass([this.element], DLG_HIDE);\n if (this.isModal) {\n this.setOverlayZindex();\n }\n if (this.visible) {\n this.show();\n }\n else {\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n }\n }\n };\n Dialog.prototype.setOverlayZindex = function () {\n var zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;\n this.dlgOverlay.style.zIndex = (zIndex - 1).toString();\n this.dlgContainer.style.zIndex = zIndex.toString();\n };\n Dialog.prototype.positionChange = function () {\n if (!this.isModal) {\n this.popupObj.setProperties({\n position: {\n X: this.position.X, Y: this.position.Y\n }\n });\n }\n else {\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n };\n Dialog.prototype.setAllowDragging = function () {\n var _this = this;\n var handleContent = '.' + DLG_HEADER_CONTENT;\n this.dragObj = new Draggable(this.element, {\n clone: false,\n handle: handleContent,\n dragStart: function (event) {\n _this.trigger('dragStart', event);\n },\n dragStop: function (event) {\n _this.trigger('dragStop', event);\n },\n drag: function (event) {\n _this.trigger('drag', event);\n }\n });\n if (!isNullOrUndefined(this.targetEle)) {\n this.dragObj.dragArea = this.targetEle;\n }\n };\n Dialog.prototype.setButton = function () {\n this.buttonContent = [];\n this.btnObj = [];\n var primaryBtnFlag = true;\n for (var i = 0; i < this.buttons.length; i++) {\n var btn = createElement('button', { attrs: { type: 'button' } });\n this.buttonContent.push(btn.outerHTML);\n }\n this.setFooterTemplate();\n for (var i = 0; i < this.buttons.length; i++) {\n this.btnObj[i] = new Button(this.buttons[i].buttonModel);\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.add(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click, this);\n }\n this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);\n if (!this.btnObj[i].isPrimary) {\n this.btnObj[i].element.classList.add('e-flat');\n }\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n };\n Dialog.prototype.setContent = function () {\n attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });\n this.contentEle = createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });\n typeof (this.content) === 'string' ? this.contentEle.innerHTML = this.content : this.contentEle.appendChild(this.content);\n !isNullOrUndefined(this.headerContent) ? this.element.insertBefore(this.contentEle, this.element.children[1]) :\n this.element.insertBefore(this.contentEle, this.element.children[0]);\n if (this.height === 'auto') {\n this.setMaxHeight();\n }\n };\n Dialog.prototype.setMaxHeight = function () {\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n };\n Dialog.prototype.setEnableRTL = function () {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n };\n Dialog.prototype.setTargetContent = function () {\n var isContent = this.element.innerHTML.replace(/\\s/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n var contentDiv = document.createDocumentFragment();\n while (this.element.childNodes.length !== 0) {\n contentDiv.appendChild(this.element.childNodes[0]);\n }\n this.setProperties({ content: contentDiv }, true);\n }\n };\n Dialog.prototype.setHeader = function () {\n this.headerEle = createElement('div', { id: this.element.id + '_title', className: DLG_HEADER, innerHTML: this.header });\n attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n };\n Dialog.prototype.setFooterTemplate = function () {\n this.ftrTemplateContent = createElement('div', {\n className: DLG_FOOTER_CONTENT,\n innerHTML: (this.footerTemplate !== '' ? this.footerTemplate : this.buttonContent.join(''))\n });\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = createElement('div', { className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n this.closeIcon = createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = createElement('div', { className: DLG_CONTAINER });\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msMatchesSelector : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n return element;\n }\n }\n }\n return null;\n };\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n node.focus();\n this.bindEvent(this.element);\n };\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n /**\n * Module required function\n * @private\n */\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n * @private\n */\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n this.contentEle.innerHTML = '';\n typeof (this.content) === 'string' ?\n this.contentEle.innerHTML = this.content : this.contentEle.appendChild(this.content);\n this.setMaxHeight();\n }\n else {\n this.setContent();\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n this.element.removeChild(this.contentEle);\n }\n break;\n case 'header':\n if (this.header === '') {\n detach(this.headerEle);\n }\n else {\n this.element.getElementsByClassName(DLG_HEADER).length > 0 ?\n this.element.getElementsByClassName(DLG_HEADER)[0].innerHTML = this.header\n : this.setHeader();\n }\n break;\n case 'footerTemplate':\n this.element.getElementsByClassName(DLG_FOOTER_CONTENT).length > 0 ?\n this.ftrTemplateContent.innerHTML = this.footerTemplate : this.setFooterTemplate();\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && this.header === '') {\n detach(this.headerContent);\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n }\n else {\n this.renderCloseIcon();\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n this.visible ? this.show() : this.hide();\n break;\n case 'isModal':\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n this.setIsModal();\n this.wireEvents();\n if (!isNullOrUndefined(this.targetEle)) {\n this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], SCROLL_DISABLED);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex();\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'animationSettings':\n this.show();\n break;\n case 'buttons':\n if (!isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n if (!isNullOrUndefined(this.ftrTemplateContent)) {\n detach(this.ftrTemplateContent);\n }\n this.setButton();\n }\n break;\n case 'allowDragging':\n if (this.allowDragging && (!this.isModal) && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.popupObj.relateTo = newProp.target;\n break;\n case 'position':\n if (oldProp.position.X === this.position.X && oldProp.position.Y === this.position.Y) {\n break;\n }\n if (this.isModal) {\n this.dlgContainer.classList.remove('e-dlg-' + oldProp.position.X + '-' + oldProp.position.Y);\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n else {\n this.popupObj.position.X = this.position.X;\n this.popupObj.position.Y = this.position.Y;\n break;\n }\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}\n * @private\n * @memberof dialog\n */\n Dialog.prototype.destroy = function () {\n if (this.element.classList.contains(ROOT)) {\n this.unWireEvents();\n _super.prototype.destroy.call(this);\n var classArray = [\n ROOT, RTL, MODAL_DLG\n ];\n removeClass([this.element, this.element], classArray);\n if (this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = void 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n if (this.isModal) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n this.element.innerHTML = '';\n while (this.element.attributes.length > 0) {\n this.element.removeAttribute(this.element.attributes[0].name);\n }\n for (var k = 0; k < this.clonedEle.attributes.length; k++) {\n this.element.setAttribute(this.clonedEle.attributes[k].name, this.clonedEle.attributes[k].value);\n }\n }\n };\n /**\n * Binding event to the element while widget creation\n * @hidden\n */\n Dialog.prototype.wireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n * @hidden\n */\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n if (!isNullOrUndefined(this.buttons[0].buttonModel)) {\n for (var i = 0; i < this.buttons.length; i++) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n /**\n * Specifies dialog offset x and y position changed dynamically or\n * change the header,footer height or width dynamically, reposition the dialog as per the new changes.\n * @return {void}\n */\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n };\n /**\n * To show the Dialog element on screen.\n * To enable the fullScreen Dialog pass the parameter to 'true'.\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @return {void}\n */\n Dialog.prototype.show = function (isFullScreen) {\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n var eventArgs = {\n cancel: false,\n container: this.isModal ? this.dlgContainer : this.element\n };\n this.trigger('beforeOpen', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.storeActiveElement = document.activeElement;\n this.element.tabIndex = -1;\n if (this.isModal && (!isNullOrUndefined(this.dlgOverlay))) {\n this.dlgOverlay.style.display = 'block';\n this.dlgContainer.style.display = 'flex';\n if (!isNullOrUndefined(this.targetEle)) {\n if (this.targetEle === document.body) {\n this.dlgContainer.style.position = 'fixed';\n }\n else {\n this.dlgContainer.style.position = 'absolute';\n }\n this.dlgOverlay.style.position = 'absolute';\n this.element.style.position = 'relative';\n addClass([this.targetEle], SCROLL_DISABLED);\n }\n else {\n addClass([document.body], SCROLL_DISABLED);\n }\n }\n var openAnimation = {\n name: this.animationSettings.effect + 'In',\n duration: this.animationSettings.duration,\n delay: this.animationSettings.delay\n };\n this.animationSettings.effect === 'None' ? this.popupObj.show() : this.popupObj.show(openAnimation);\n this.dialogOpen = true;\n this.setProperties({ visible: true }, true);\n }\n };\n /**\n * To hide the Dialog element on screen.\n * @return {void}\n */\n Dialog.prototype.hide = function () {\n var eventArgs = {\n cancel: false,\n container: this.isModal ? this.dlgContainer : this.element\n };\n this.trigger('beforeClose', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n !isNullOrUndefined(this.targetEle) ? removeClass([this.targetEle], SCROLL_DISABLED) :\n removeClass([document.body], SCROLL_DISABLED);\n }\n var closeAnimation = {\n name: this.animationSettings.effect + 'Out',\n duration: this.animationSettings.duration,\n delay: this.animationSettings.delay\n };\n this.animationSettings.effect === 'None' ? this.popupObj.hide() : this.popupObj.hide(closeAnimation);\n this.dialogOpen = false;\n this.setProperties({ visible: false }, true);\n };\n /**\n * Specifies to view the Full screen Dialog.\n * @private\n */\n Dialog.prototype.fullScreen = function (args) {\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n if (args) {\n addClass([this.element], FULLSCREEN);\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], SCROLL_DISABLED);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], SCROLL_DISABLED);\n if (this.allowDragging && (!this.isModal) && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n };\n __decorate([\n Property('')\n ], Dialog.prototype, \"content\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"showCloseIcon\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"isModal\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"header\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"visible\", void 0);\n __decorate([\n Property('auto')\n ], Dialog.prototype, \"height\", void 0);\n __decorate([\n Property('100%')\n ], Dialog.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"cssClass\", void 0);\n __decorate([\n Property(1000)\n ], Dialog.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], Dialog.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"allowDragging\", void 0);\n __decorate([\n Collection([{}], ButtonProps)\n ], Dialog.prototype, \"buttons\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"closeOnEscape\", void 0);\n __decorate([\n Complex({}, AnimationSettings)\n ], Dialog.prototype, \"animationSettings\", void 0);\n __decorate([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n ], Dialog.prototype, \"position\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"overlayClick\", void 0);\n Dialog = __decorate([\n NotifyPropertyChanges\n ], Dialog);\n return Dialog;\n}(Component));\nexport { Dialog };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, ChildProperty, Event } from '@syncfusion/ej2-base';\nimport { EventHandler, Touch, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/ej2-base';\nimport { attributes, createElement, closest, removeClass, addClass, remove } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Complex } from '@syncfusion/ej2-base';\nimport { Popup } from '../popup/popup';\nimport { calculatePosition } from '../common/position';\nimport { isCollide, fit } from '../common/collision';\nvar TOUCHEND_HIDE_DELAY = 1500;\nvar TAPHOLD_THRESHOLD = 500;\nvar SHOW_POINTER_TIP_GAP = 0;\nvar HIDE_POINTER_TIP_GAP = 8;\nvar MOUSE_TRAIL_GAP = 2;\nvar POINTER_ADJUST = 2;\nvar ROOT = 'e-tooltip';\nvar RTL = 'e-rtl';\nvar DEVICE = 'e-bigger';\nvar ICON = 'e-icons';\nvar CLOSE = 'e-tooltip-close';\nvar TOOLTIP_WRAP = 'e-tooltip-wrap';\nvar CONTENT = 'e-tip-content';\nvar ARROW_TIP = 'e-arrow-tip';\nvar ARROW_TIP_OUTER = 'e-arrow-tip-outer';\nvar ARROW_TIP_INNER = 'e-arrow-tip-inner';\nvar TIP_BOTTOM = 'e-tip-bottom';\nvar TIP_TOP = 'e-tip-top';\nvar TIP_LEFT = 'e-tip-left';\nvar TIP_RIGHT = 'e-tip-right';\nvar POPUP_ROOT = 'e-popup';\nvar POPUP_OPEN = 'e-popup-open';\nvar POPUP_CLOSE = 'e-popup-close';\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property({ effect: 'FadeIn', duration: 150, delay: 0 })\n ], Animation.prototype, \"open\", void 0);\n __decorate([\n Property({ effect: 'FadeOut', duration: 150, delay: 0 })\n ], Animation.prototype, \"close\", void 0);\n return Animation;\n}(ChildProperty));\nexport { Animation };\n/**\n * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.\n * ```html\n * Show Tooltip
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Tooltip = /** @class */ (function (_super) {\n __extends(Tooltip, _super);\n /**\n * Constructor for creating the Tooltip Component\n */\n function Tooltip(options, element) {\n return _super.call(this, options, element) || this;\n }\n Tooltip.prototype.initialize = function () {\n this.formatPosition();\n addClass([this.element], ROOT);\n };\n Tooltip.prototype.formatPosition = function () {\n if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {\n _a = this.position.split(/(?=[A-Z])/), this.tooltipPositionY = _a[0], this.tooltipPositionX = _a[1];\n }\n else {\n _b = this.position.split(/(?=[A-Z])/), this.tooltipPositionX = _b[0], this.tooltipPositionY = _b[1];\n }\n var _a, _b;\n };\n Tooltip.prototype.renderArrow = function () {\n this.setTipClass(this.position);\n var tip = createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });\n tip.appendChild(createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));\n tip.appendChild(createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));\n this.tooltipEle.appendChild(tip);\n };\n Tooltip.prototype.setTipClass = function (position) {\n if (position.indexOf('Right') === 0) {\n this.tipClass = TIP_LEFT;\n }\n else if (position.indexOf('Bottom') === 0) {\n this.tipClass = TIP_TOP;\n }\n else if (position.indexOf('Left') === 0) {\n this.tipClass = TIP_RIGHT;\n }\n else {\n this.tipClass = TIP_BOTTOM;\n }\n };\n Tooltip.prototype.renderPopup = function (target) {\n var elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);\n this.popupObj = new Popup(this.tooltipEle, {\n height: this.height,\n width: this.width,\n position: {\n X: elePos.left,\n Y: elePos.top\n },\n enableRtl: this.enableRtl,\n open: this.openPopupHandler.bind(this),\n close: this.closePopupHandler.bind(this)\n });\n };\n Tooltip.prototype.getTooltipPosition = function (target) {\n var pos = calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY);\n var offsetPos = this.calculateTooltipOffset(this.position);\n var elePos = this.collisionFlipFit(target, pos.left + offsetPos.left, pos.top + offsetPos.top);\n return elePos;\n };\n Tooltip.prototype.reposition = function (target) {\n var elePos = this.getTooltipPosition(target);\n this.popupObj.position = { X: elePos.left, Y: elePos.top };\n this.popupObj.dataBind();\n };\n Tooltip.prototype.openPopupHandler = function () {\n this.trigger('afterOpen', this.tooltipEventArgs);\n };\n Tooltip.prototype.closePopupHandler = function () {\n this.clear();\n this.trigger('afterClose', this.tooltipEventArgs);\n };\n Tooltip.prototype.calculateTooltipOffset = function (position) {\n var pos = { top: 0, left: 0 };\n var tooltipEleWidth = this.tooltipEle.offsetWidth;\n var tooltipEleHeight = this.tooltipEle.offsetHeight;\n var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var tipWidth = arrowEle ? arrowEle.offsetWidth : 0;\n var tipHeight = arrowEle ? arrowEle.offsetHeight : 0;\n var tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);\n var tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);\n var tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);\n if (this.mouseTrail) {\n tipAdjust += MOUSE_TRAIL_GAP;\n }\n switch (position) {\n case 'RightTop':\n pos.left += tipWidth + tipAdjust;\n pos.top -= tooltipEleHeight - tipHeightAdjust;\n break;\n case 'RightCenter':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'RightBottom':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tipHeightAdjust);\n break;\n case 'BottomRight':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n case 'BottomCenter':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n case 'BottomLeft':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'LeftBottom':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tipHeightAdjust);\n break;\n case 'LeftCenter':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'LeftTop':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight - tipHeightAdjust);\n break;\n case 'TopLeft':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'TopRight':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n default:\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n }\n pos.left += this.offsetX;\n pos.top += this.offsetY;\n return pos;\n };\n Tooltip.prototype.updateTipPosition = function (position) {\n var selEle = this.tooltipEle.querySelectorAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER);\n var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];\n removeClass(selEle, removeList);\n this.setTipClass(position);\n addClass(selEle, this.tipClass);\n };\n Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {\n if (this.showTipPointer === false) {\n return;\n }\n this.updateTipPosition(position);\n var leftValue;\n var topValue;\n var tooltipWidth = this.tooltipEle.clientWidth;\n var tooltipHeight = this.tooltipEle.clientHeight;\n var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n var tipWidth = arrowEle.offsetWidth;\n var tipHeight = arrowEle.offsetHeight;\n if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {\n if (this.tipClass === TIP_BOTTOM) {\n topValue = '99.9%';\n // Arrow icon aligned -2px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';\n }\n else {\n topValue = -(tipHeight - 1) + 'px';\n // Arrow icon aligned -6px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';\n }\n var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n leftValue = POINTER_ADJUST + 'px';\n }\n else {\n leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';\n }\n }\n else {\n if (this.tipClass === TIP_RIGHT) {\n leftValue = '99.9%';\n // Arrow icon aligned -2px left from ArrowOuterTip div\n arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';\n }\n else {\n leftValue = -(tipWidth - 1) + 'px';\n // Arrow icon aligned -2px from ArrowOuterTip width\n arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';\n }\n var tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n topValue = POINTER_ADJUST + 'px';\n }\n else {\n topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';\n }\n }\n arrowEle.style.top = topValue;\n arrowEle.style.left = leftValue;\n };\n Tooltip.prototype.renderContent = function (target) {\n var tooltipContent = this.tooltipEle.querySelector('.' + CONTENT);\n if (target && !isNullOrUndefined(target.getAttribute('title'))) {\n target.setAttribute('data-content', target.getAttribute('title'));\n target.removeAttribute('title');\n }\n if (!isNullOrUndefined(this.content)) {\n if (typeof (this.content) === 'string') {\n tooltipContent.innerHTML = this.content;\n }\n else {\n while (tooltipContent.firstChild) {\n tooltipContent.removeChild(tooltipContent.firstChild);\n }\n tooltipContent.appendChild(this.content);\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n return;\n }\n var tipClose = createElement('div', { className: ICON + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function (e) {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || target.getAttribute('data-tooltip-id') !== null) {\n return;\n }\n var targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n this.showTooltip(target, this.animation.open, e);\n this.wireMouseEvents(e, target);\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :\n { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };\n this.trigger('beforeRender', this.tooltipEventArgs);\n if (this.tooltipEventArgs.cancel) {\n this.isHidden = true;\n this.clear();\n return;\n }\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n this.ctrlId = this.element.getAttribute('id') ? getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' + formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n if (this.cssClass) {\n addClass([this.tooltipEle], this.cssClass.split(' '));\n }\n if (Browser.isDevice) {\n addClass([this.tooltipEle], DEVICE);\n }\n if (this.width !== 'auto') {\n this.tooltipEle.style.maxWidth = formatUnit(this.width);\n }\n this.tooltipEle.appendChild(createElement('div', { className: CONTENT }));\n document.body.appendChild(this.tooltipEle);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n addClass([this.tooltipEle], POPUP_OPEN);\n if (this.showTipPointer) {\n this.renderArrow();\n }\n this.renderCloseIcon();\n this.renderPopup(target);\n }\n else {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n PopupAnimation.stop(this.tooltipEle);\n this.reposition(target);\n }\n removeClass([this.tooltipEle], POPUP_OPEN);\n addClass([this.tooltipEle], POPUP_CLOSE);\n this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :\n { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };\n this.trigger('beforeOpen', this.tooltipEventArgs);\n if (this.tooltipEventArgs.cancel) {\n this.isHidden = true;\n this.clear();\n return;\n }\n var openAnimation = {\n name: showAnimation.effect, duration: showAnimation.duration, delay: showAnimation.delay, timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation = undefined;\n }\n if (this.openDelay > 0) {\n var show = function () {\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation);\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n this.popupObj.show(openAnimation);\n }\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, (this.target ? this.element : null), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, this.tooltipPositionX, elePos.vertical);\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n var offsetPos = this.calculateTooltipOffset(newpos);\n elePos.position = newpos;\n elePos.left = pos.left + offsetPos.left;\n elePos.top = pos.top + offsetPos.top;\n }\n else {\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var left = fit(this.tooltipEle, (this.target ? this.element : null), { X: true, Y: false }, eleOffset).left;\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n eleOffset.left = left;\n return eleOffset;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n this.tooltipEventArgs = {\n type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle\n };\n }\n else {\n target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null, element: this.tooltipEle\n };\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n this.trigger('beforeClose', this.tooltipEventArgs);\n if (!this.tooltipEventArgs.cancel) {\n this.restoreElement(target);\n this.isHidden = true;\n var closeAnimation_1 = {\n name: hideAnimation.effect, duration: hideAnimation.duration, delay: hideAnimation.delay, timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation_1 = undefined;\n }\n if (this.closeDelay > 0) {\n var hide = function () {\n if (_this.popupObj) {\n _this.popupObj.hide(closeAnimation_1);\n }\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.popupObj.hide(closeAnimation_1);\n }\n }\n else {\n this.isHidden = false;\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.onMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e);\n };\n Tooltip.prototype.onStickyClose = function (e) {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n PopupAnimation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var pos = this.calculateTooltipOffset(this.position);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT) === null) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle) {\n this.close();\n }\n };\n /**\n * Core method that initializes the control rendering.\n * @private\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n };\n /**\n * Initializes the values of private members.\n * @private\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n * @hidden\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll', this.scrollHandler, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n }\n if (this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n * @hidden\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll', this.scrollHandler);\n EventHandler.remove(document, 'keydown', this.keyDown);\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n /**\n * Core method to return the component name.\n * @private\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n * @private\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n * @private\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle) {\n this.tooltipEle.style.width = formatUnit(newProp.width);\n }\n break;\n case 'height':\n if (this.tooltipEle) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n this.renderContent();\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n if (this.tooltipEle && target) {\n var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(target);\n }\n break;\n case 'tipPointerPosition':\n var trgt = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n if (this.tooltipEle && trgt) {\n this.reposition(trgt);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL);\n }\n else {\n removeClass([this.tooltipEle], RTL);\n }\n }\n break;\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n * @param element Target element where the Tooltip is to be displayed.\n * @param animation Sets the specific animation, while showing the Tooltip on the screen.\n * @return {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (animation === void 0) { animation = this.animation.open; }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n * @param animation Sets the specific animation when hiding Tooltip from the screen.\n * @return {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (animation === void 0) { animation = this.animation.close; }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n * @param target Target element where the Tooltip content or position needs to be refreshed.\n * @return {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n };\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @return {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n removeClass([this.element], ROOT);\n this.unwireEvents(this.opensOn);\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n };\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\nexport { Tooltip };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Browser, L10n } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('/^(-)?(\\d*)$/');\nvar DECIMALSEPARATOR = '.';\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n function NumericTextBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n this.angularTagName = null;\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n if (this.element.hasAttribute('id')) {\n this.element.removeAttribute('id');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.classList.add('e-numeric-container');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });\n var localeText = { incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: '' };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.checkAttributes();\n this.prevValue = this.value;\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n if (!isNullOrUndefined(this.width)) {\n setStyleAttribute(this.container, { 'width': formatUnit(this.width) });\n }\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value);\n this.wireEvents();\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n }\n };\n NumericTextBox.prototype.checkAttributes = function () {\n var attributes = ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n var enabled = this.element.getAttribute(prop) === 'disabled' ||\n this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, true);\n break;\n case 'readonly':\n var readonly = this.element.getAttribute(prop) === 'readonly'\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n });\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (createElement('input', { attrs: { type: 'hidden' } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {\n this.clear(e);\n }\n };\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusIn, this);\n EventHandler.add(this.element, 'blur', this.focusOut, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusIn);\n EventHandler.remove(this.element, 'blur', this.focusOut);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n if (this.prevValue !== this.value) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n this.isKeyDown = true;\n this.updateValue(this.instance.getNumberParser({ format: 'n' })(this.element.value));\n this.isKeyDown = false;\n }\n };\n ;\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n ;\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var valueText = value.toString();\n var stepText = step.toString();\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n ;\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n ;\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n if (!this.isKeyDown) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = void 0;\n var decimalPart = value.toString().split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n ;\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = value;\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n ;\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals;\n var currentValue = this.value;\n var decimalPart = currentValue.toString().split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n ;\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n ;\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n ;\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n return true;\n }\n };\n ;\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n ;\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusIn = function (event) {\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue = this.formatNumber();\n this.setElementValue(formatValue);\n if (!this.isPrevFocused) {\n this.element.setSelectionRange(0, formatValue.length);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n ;\n NumericTextBox.prototype.focusOut = function (event) {\n var _this = this;\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n };\n ;\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () { _this.isCalled = true; _this.action(action, event); }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target = document.elementFromPoint(event.clientX, event.clientY);\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n * @method destroy\n * @return {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n this.container.parentElement.appendChild(this.cloneElement);\n detach(this.container);\n _super.prototype.destroy.call(this);\n };\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n * @return {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var elementVal;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.container, { 'width': formatUnit(newProp.width) });\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.container], oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper);\n break;\n case 'value':\n this.updateValue(newProp.value);\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n break;\n case 'currencyCode':\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n /**\n * Gets the component name\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { selectAll, select, createElement, Base } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, Event } from '@syncfusion/ej2-base';\n/**\n * global declarations\n */\nvar VALIDATE_EMAIL = new RegExp('^[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,5}' +\n '|[.]{1}[a-zA-Z]{2,4}[.]{1}[a-zA-Z]{2,4})$');\nvar VALIDATE_URL = new RegExp('^((ftp|http|https):\\/\\/)?www\\.([A-z]{2,})\\.([A-z]{2,})$');\nvar VALIDATE_DATE_ISO = new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$');\nvar VALIDATE_DIGITS = new RegExp('^[0-9]*$');\nvar VALIDATE_PHONE = new RegExp('^[+]?[0-9]{9,13}$');\nvar VALIDATE_CREDITCARD = new RegExp('^\\\\d{13,16}$');\n/**\n * ErrorOption values\n * @private\n */\nexport var ErrorOption;\n(function (ErrorOption) {\n ErrorOption[ErrorOption[\"Message\"] = 0] = \"Message\";\n ErrorOption[ErrorOption[\"Label\"] = 1] = \"Label\";\n})(ErrorOption || (ErrorOption = {}));\n/**\n * FormValidator class enables you to validate the form fields based on your defined rules\n * ```html\n * \n * \n * ```\n */\nvar FormValidator = /** @class */ (function (_super) {\n __extends(FormValidator, _super);\n // Initializes the FormValidator \n function FormValidator(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.validated = [];\n _this.errorRules = [];\n _this.allowSubmit = false;\n _this.required = 'required';\n _this.infoElement = null;\n _this.inputElement = null;\n _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea';\n /**\n * Specifies the default messages for validation rules.\n * @default : { List of validation message };\n */\n _this.defaultMessages = {\n required: 'This field is required.',\n email: 'Please enter a valid email address.',\n url: 'Please enter a valid URL.',\n date: 'Please enter a valid date.',\n dateIso: 'Please enter a valid date ( ISO ).',\n creditcard: 'Please enter valid card number',\n number: 'Please enter a valid number.',\n digits: 'Please enter only digits.',\n maxLength: 'Please enter no more than {0} characters.',\n minLength: 'Please enter at least {0} characters.',\n rangeLength: 'Please enter a value between {0} and {1} characters long.',\n range: 'Please enter a value between {0} and {1}.',\n max: 'Please enter a value less than or equal to {0}.',\n min: 'Please enter a value greater than or equal to {0}.',\n regex: 'Please enter a correct value.',\n tel: 'Please enter a valid phone number.',\n pattern: 'Please enter a correct pattern value.',\n equalTo: 'Please enter the valid match text',\n };\n if (typeof _this.rules === 'undefined') {\n _this.rules = {};\n }\n element = typeof element === 'string' ? select(element, document) : element;\n // Set novalidate to prevent default HTML5 form validation\n if (_this.element != null) {\n _this.element.setAttribute('novalidate', '');\n _this.inputElements = selectAll(_this.selectQuery, _this.element);\n _this.createHTML5Rules();\n _this.wireEvents();\n }\n else {\n return undefined;\n }\n return _this;\n }\n FormValidator_1 = FormValidator;\n /**\n * Add validation rules to the corresponding input element based on `name` attribute.\n * @param {string} name `name` of form field.\n * @param {Object} rules Validation rules for the corresponding element.\n * @return {void}\n */\n FormValidator.prototype.addRules = function (name, rules) {\n if (name) {\n if (this.rules.hasOwnProperty(name)) {\n extend(this.rules[name], rules, {});\n }\n else {\n this.rules[name] = rules;\n }\n }\n };\n /**\n * Remove validation to the corresponding field based on name attribute.\n * When no parameter is passed, remove all the validations in the form.\n * @param {string} name Input name attribute value.\n * @param {string[]} rules List of validation rules need to be remove from the corresponding element.\n * @return {void}\n */\n FormValidator.prototype.removeRules = function (name, rules) {\n if (!name && !rules) {\n this.rules = {};\n }\n else if (this.rules[name] && !rules) {\n delete this.rules[name];\n }\n else if (!isNullOrUndefined(this.rules[name] && rules)) {\n for (var i = 0; i < rules.length; i++) {\n delete this.rules[name][rules[i]];\n }\n }\n else {\n return;\n }\n };\n /**\n * Validate the current form values using defined rules.\n * Returns `true` when the form is valid otherwise `false`\n * @param {string} selected - Optional parameter to validate specified element.\n * @return {boolean}\n */\n FormValidator.prototype.validate = function (selected) {\n var rules = Object.keys(this.rules);\n if (selected && rules.length) {\n this.validateRules(selected);\n //filter the selected element it don't have any valid input element\n return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) {\n return data.name === selected;\n }).length === 0;\n }\n else {\n for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {\n var name_1 = rules_1[_i];\n this.validateRules(name_1);\n }\n return this.errorRules.length === 0;\n }\n };\n /**\n * Reset the value of all the fields in form.\n * @return {void}\n */\n FormValidator.prototype.reset = function () {\n this.element.reset();\n this.clearForm();\n };\n /**\n * Get input element by name.\n * @param {string} name - Input element name attribute value.\n * @return {HTMLInputElement}\n */\n FormValidator.prototype.getInputElement = function (name) {\n this.inputElement = (select('[name=' + name + ']', this.element));\n return this.inputElement;\n };\n /**\n * Destroy the form validator object and error elements.\n * @return {void}\n */\n FormValidator.prototype.destroy = function () {\n this.reset();\n this.unwireEvents();\n this.rules = {};\n var elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n element.remove();\n }\n _super.prototype.destroy.call(this);\n };\n /**\n * @private\n */\n FormValidator.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n ;\n /**\n * @private\n */\n FormValidator.prototype.getModuleName = function () {\n return 'formValidator';\n };\n FormValidator.prototype.clearForm = function () {\n this.errorRules = [];\n this.validated = [];\n var elements = selectAll(this.selectQuery, this.element);\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n var input = element;\n input.removeAttribute('aria-invalid');\n input.classList.remove(this.errorClass);\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n input.classList.remove(this.validClass);\n }\n };\n FormValidator.prototype.createHTML5Rules = function () {\n var defRules = ['required', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits', 'pattern',\n 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n var acceptedTypes = ['email', 'url', 'date', 'number', 'tel'];\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n // Default attribute rules \n var allRule = {};\n for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {\n var rule = defRules_1[_b];\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n var id = input.getAttribute(rule);\n this.defRule(input, allRule, rule, id);\n break;\n default:\n if (input.getAttribute('data-val') === 'true') {\n this.annotationRule(input, allRule, rule, input.getAttribute(rule));\n }\n else {\n this.defRule(input, allRule, rule, input.getAttribute(rule));\n }\n }\n }\n }\n //adding pattern type validation\n if (Object.keys(allRule).length !== 0) {\n this.addRules(input.name, allRule);\n }\n }\n };\n FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) {\n var annotationRule = ruleName.split('-');\n var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto'];\n var ruleFirstName = annotationRule[annotationRule.length - 1];\n var ruleSecondName = annotationRule[annotationRule.length - 2];\n if (rulesList.indexOf(ruleFirstName) !== -1) {\n switch (ruleFirstName) {\n case 'required':\n this.defRule(input, ruleCon, 'required', value);\n break;\n case 'creditcard':\n this.defRule(input, ruleCon, 'creditcard', value);\n break;\n case 'phone':\n this.defRule(input, ruleCon, 'tel', value);\n break;\n }\n }\n else if (rulesList.indexOf(ruleSecondName) !== -1) {\n switch (ruleSecondName) {\n case 'maxlength':\n this.defRule(input, ruleCon, 'maxLength', value);\n break;\n case 'minlength':\n this.defRule(input, ruleCon, 'minLength', value);\n break;\n case 'range':\n var minvalue = input.getAttribute('data-val-range-min');\n var maxvalue = input.getAttribute('data-val-range-max');\n this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]);\n break;\n case 'equalto':\n var id = input.getAttribute(ruleName).split('.');\n this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]);\n break;\n case 'regex':\n this.defRule(input, ruleCon, 'regex', value);\n break;\n }\n }\n };\n FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {\n var message = input.getAttribute('data-' + ruleName + '-message');\n var annotationMessage = input.getAttribute('data-val-' + ruleName);\n if (message) {\n value = [value, message];\n }\n else if (annotationMessage) {\n value = [value, annotationMessage];\n }\n ruleCon[ruleName] = value;\n };\n // Wire events to the form elements\n FormValidator.prototype.wireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n if (FormValidator_1.isCheckable(input)) {\n EventHandler.add(input, 'click', this.clickHandler, this);\n }\n else if (input.tagName === 'SELECT') {\n EventHandler.add(input, 'change', this.changeHandler, this);\n }\n else {\n EventHandler.add(input, 'focusout', this.focusOutHandler, this);\n EventHandler.add(input, 'keyup', this.keyUpHandler, this);\n }\n }\n EventHandler.add(this.element, 'submit', this.submitHandler, this);\n EventHandler.add(this.element, 'reset', this.resetHandler, this);\n };\n // UnWire events to the form elements\n FormValidator.prototype.unwireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n EventHandler.clearEvents(input);\n }\n EventHandler.remove(this.element, 'submit', this.submitHandler);\n EventHandler.remove(this.element, 'reset', this.resetHandler);\n };\n // Handle input element focusout event\n FormValidator.prototype.focusOutHandler = function (e) {\n this.trigger('focusout', e);\n //FormValidator.triggerCallback(this.focusout, e);\n var element = e.target;\n if (this.rules[element.name]) {\n if (this.rules[element.name][this.required] || element.value.length > 0) {\n this.validate(element.name);\n }\n else if (this.validated.indexOf(element.name) === -1) {\n this.validated.push(element.name);\n }\n }\n };\n // Handle input element keyup event\n FormValidator.prototype.keyUpHandler = function (e) {\n this.trigger('keyup', e);\n var element = e.target;\n // List of keys need to prevent while validation\n var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];\n if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) {\n return;\n }\n if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) {\n this.validate(element.name);\n }\n };\n // Handle input click event\n FormValidator.prototype.clickHandler = function (e) {\n this.trigger('click', e);\n var element = e.target;\n // If element type is not submit allow validation\n if (element.type !== 'submit') {\n this.validate(element.name);\n }\n else if (element.getAttribute('formnovalidate') !== null) {\n // Prevent form validation, if submit button has formnovalidate attribute\n this.allowSubmit = true;\n }\n };\n // Handle input change event\n FormValidator.prototype.changeHandler = function (e) {\n this.trigger('change', e);\n var element = e.target;\n this.validate(element.name);\n };\n // Handle form submit event\n FormValidator.prototype.submitHandler = function (e) {\n this.trigger('submit', e);\n //FormValidator.triggerCallback(this.submit, e);\n // Prevent form submit if validation failed\n if (!this.allowSubmit && !this.validate()) {\n e.preventDefault();\n }\n else {\n this.allowSubmit = false;\n }\n };\n // Handle form reset\n FormValidator.prototype.resetHandler = function () {\n this.clearForm();\n };\n // Validate each rule based on input element name\n FormValidator.prototype.validateRules = function (name) {\n if (!this.rules[name]) {\n return;\n }\n var rules = Object.keys(this.rules[name]);\n this.getInputElement(name);\n this.getErrorElement(name);\n for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {\n var rule = rules_2[_i];\n var errorMessage = this.getErrorMessage(this.rules[name][rule], rule);\n var errorRule = { name: name, message: errorMessage };\n var eventArgs = {\n inputName: name,\n element: this.inputElement,\n message: errorMessage\n };\n if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {\n this.removeErrorRules(name);\n this.errorRules.push(errorRule);\n // Set aria attributes to invalid elements\n this.inputElement.setAttribute('aria-invalid', 'true');\n this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n };\n // Check the input element whether it's value satisfy the validation rule or not\n FormValidator.prototype.isValid = function (name, rule) {\n var params = this.rules[name][rule];\n var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;\n var currentRule = this.rules[name][rule];\n var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };\n this.trigger('validationBegin', args);\n if (currentRule && typeof currentRule[0] === 'function') {\n var fn = currentRule[0];\n return fn.call(this, { element: this.inputElement, value: this.inputElement.value });\n }\n else if (FormValidator_1.isCheckable(this.inputElement)) {\n if (rule !== 'required') {\n return true;\n }\n return selectAll('input[name=' + name + ']:checked', this.element).length > 0;\n }\n else {\n return FormValidator_1.checkValidator[rule](args);\n }\n };\n // Return default error message or custom error message \n FormValidator.prototype.getErrorMessage = function (ruleValue, rule) {\n var message = (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] : this.defaultMessages[rule];\n var formats = message.match(/{(\\d)}/g);\n if (!isNullOrUndefined(formats)) {\n for (var i = 0; i < formats.length; i++) {\n var value = ruleValue instanceof Array ? ruleValue[i] : ruleValue;\n message = message.replace(formats[i], value);\n }\n }\n return message;\n };\n // Create error element based on name and error message\n FormValidator.prototype.createErrorElement = function (name, message, input) {\n var errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n var containerId = input.getAttribute('data-msg-containerid');\n var divElement = this.element.querySelector('#' + containerId);\n divElement.appendChild(errorElement);\n }\n else if (this.customPlacement != null) {\n // Call custom placement function if customPlacement is not null\n this.customPlacement.call(this, this.inputElement, errorElement);\n }\n else {\n this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n };\n // Get error element by name\n FormValidator.prototype.getErrorElement = function (name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]');\n }\n return this.infoElement;\n };\n // Remove existing rule from errorRules object\n FormValidator.prototype.removeErrorRules = function (name) {\n for (var i = 0; i < this.errorRules.length; i++) {\n var rule = this.errorRules[i];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n };\n // Show error message to the input element\n FormValidator.prototype.showMessage = function (errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n };\n // Hide error message based on input name\n FormValidator.prototype.hideMessage = function (name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n };\n // Check whether the input element have required rule and its value is not empty\n FormValidator.prototype.checkRequired = function (name) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n this.hideMessage(name);\n }\n };\n // Return boolean result if the input have chekcable or submit types\n FormValidator.isCheckable = function (input) {\n var inputType = input.getAttribute('type');\n return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');\n };\n // List of function to validate the rules\n FormValidator.checkValidator = {\n required: function (option) {\n return option.value.length > 0;\n },\n email: function (option) {\n return VALIDATE_EMAIL.test(option.value);\n },\n url: function (option) {\n return VALIDATE_URL.test(option.value);\n },\n dateIso: function (option) {\n return VALIDATE_DATE_ISO.test(option.value);\n },\n tel: function (option) {\n return VALIDATE_PHONE.test(option.value);\n },\n creditcard: function (option) {\n return VALIDATE_CREDITCARD.test(option.value);\n },\n number: function (option) {\n return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1;\n },\n digits: function (option) {\n return VALIDATE_DIGITS.test(option.value);\n },\n maxLength: function (option) {\n return option.value.length <= option.param;\n },\n minLength: function (option) {\n return option.value.length >= option.param;\n },\n rangeLength: function (option) {\n var param = option.param;\n return option.value.length >= param[0] && option.value.length <= param[1];\n },\n range: function (option) {\n var param = option.param;\n return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];\n },\n date: function (option) {\n return !isNaN(new Date(option.value).getTime());\n },\n max: function (option) {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= option.param;\n }\n // Maximum rule validation for date\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n min: function (option) {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= option.param;\n }\n // Minimum rule validation for date\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n regex: function (option) {\n return new RegExp(option.param).test(option.value);\n },\n equalTo: function (option) {\n var compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n },\n };\n __decorate([\n Property('e-hidden')\n ], FormValidator.prototype, \"ignore\", void 0);\n __decorate([\n Property()\n ], FormValidator.prototype, \"rules\", void 0);\n __decorate([\n Property('e-error')\n ], FormValidator.prototype, \"errorClass\", void 0);\n __decorate([\n Property('e-valid')\n ], FormValidator.prototype, \"validClass\", void 0);\n __decorate([\n Property('label')\n ], FormValidator.prototype, \"errorElement\", void 0);\n __decorate([\n Property('div')\n ], FormValidator.prototype, \"errorContainer\", void 0);\n __decorate([\n Property(ErrorOption.Label)\n ], FormValidator.prototype, \"errorOption\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"focusout\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"keyup\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"submit\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationBegin\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationComplete\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"customPlacement\", void 0);\n FormValidator = FormValidator_1 = __decorate([\n NotifyPropertyChanges\n ], FormValidator);\n return FormValidator;\n var FormValidator_1;\n}(Base));\nexport { FormValidator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Event, Property, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach, createElement } from '@syncfusion/ej2-base';\nimport { Input } from '../../input/input';\nimport { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';\nimport { setMaskValue, setElementValue } from '../base/index';\nimport { maskInputBlurHandler } from '../base/mask-base';\nvar ROOT = 'e-widget e-control-wrapper e-mask';\nvar INPUT = 'e-input';\n/**\n * The MaskedTextBox allows the user to enter the valid input only based on the provided mask.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar MaskedTextBox = /** @class */ (function (_super) {\n __extends(MaskedTextBox, _super);\n function MaskedTextBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Gets the component name\n * @private\n */\n MaskedTextBox.prototype.getModuleName = function () {\n return 'maskedtextbox';\n };\n /**\n * Initializes the event handler\n * @private\n */\n MaskedTextBox.prototype.preRender = function () {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.regExpCollec = regularExpressions;\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n this.changeEventArgs = {};\n this.focusEventArgs = {};\n this.maskKeyPress = false;\n this.isFocus = false;\n this.isInitial = false;\n this.isIosInvalid = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n this.angularTagName = null;\n if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = createElement('input');\n for (var i = 0; i < this.element.attributes.length; i++) {\n input.setAttribute(this.element.attributes[i].nodeName, this.element.attributes[i].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n this.element.parentNode.appendChild(input);\n this.element.parentNode.removeChild(this.element);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n * @return {string}\n */\n MaskedTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initializes the component rendering.\n * @private\n */\n MaskedTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n if (this.floatLabelType === 'Never') {\n addClass([this.element], INPUT);\n }\n this.createWrapper();\n this.isInitial = true;\n this.resetMaskedTextBox();\n this.isInitial = false;\n this.setMaskPlaceholder(true);\n this.setWidth(this.width);\n }\n };\n MaskedTextBox.prototype.resetMaskedTextBox = function () {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n if (this.promptChar.length > 1) {\n this.promptChar = this.promptChar[0];\n }\n createMask.call(this);\n applyMask.call(this);\n var val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (!this.isInitial) {\n unwireEvents.call(this);\n }\n wireEvents.call(this);\n };\n MaskedTextBox.prototype.setMaskPlaceholder = function (setVal) {\n if (this.placeholder) {\n Input.setPlaceholder(this.placeholder, this.element);\n if (this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') {\n setElementValue.call(this, '');\n }\n if (this.floatLabelType === 'Never') {\n maskInputBlurHandler.call(this);\n }\n }\n };\n MaskedTextBox.prototype.setCssClass = function (cssClass, element) {\n if (cssClass) {\n addClass(element, cssClass);\n }\n };\n MaskedTextBox.prototype.setWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n this.element.style.width = formatUnit(width);\n }\n };\n MaskedTextBox.prototype.createWrapper = function () {\n this.inputObj = Input.createInput({\n element: this.element,\n customTag: this.angularTagName,\n floatLabelType: this.floatLabelType,\n properties: {\n enableRtl: this.enableRtl,\n enabled: this.enabled,\n placeholder: this.placeholder\n }\n });\n this.inputObj.container.setAttribute('class', ROOT + ' ' + this.inputObj.container.getAttribute('class'));\n };\n /**\n * Calls internally if any of the property value is changed.\n * @hidden\n */\n MaskedTextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n setMaskValue.call(this, this.value);\n if (this.placeholder) {\n this.setMaskPlaceholder(false);\n }\n break;\n case 'placeholder':\n this.setMaskPlaceholder(true);\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'cssClass':\n this.setCssClass(newProp.cssClass, [this.inputObj.container]);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);\n break;\n case 'customCharacters':\n this.customCharacters = newProp.customCharacters;\n this.resetMaskedTextBox();\n break;\n case 'mask':\n var strippedValue_1 = this.value;\n this.mask = newProp.mask;\n this.updateValue(strippedValue_1);\n break;\n case 'promptChar':\n if (newProp.promptChar.length > 1) {\n newProp.promptChar = newProp.promptChar[0];\n }\n if (newProp.promptChar) {\n this.promptChar = newProp.promptChar;\n }\n else {\n this.promptChar = '_';\n }\n var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n if (this.promptMask === this.element.value) {\n value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n }\n this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n this.undoCollec = this.redoCollec = [];\n setElementValue.call(this, value);\n break;\n }\n }\n };\n MaskedTextBox.prototype.updateValue = function (strippedVal) {\n this.resetMaskedTextBox();\n setMaskValue.call(this, strippedVal);\n };\n /**\n * Gets the value of the MaskedTextBox with the masked format.\n * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.\n * @return {string}\n */\n MaskedTextBox.prototype.getMaskedValue = function () {\n return unstrippedValue.call(this, this.element);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n * @method destroy\n * @return {void}\n */\n MaskedTextBox.prototype.destroy = function () {\n unwireEvents.call(this);\n this.inputObj.container.parentElement.appendChild(this.cloneElement);\n detach(this.inputObj.container);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('Never')\n ], MaskedTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(true)\n ], MaskedTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], MaskedTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], MaskedTextBox.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"mask\", void 0);\n __decorate([\n Property('_')\n ], MaskedTextBox.prototype, \"promptChar\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"customCharacters\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"focus\", void 0);\n MaskedTextBox = __decorate([\n NotifyPropertyChanges\n ], MaskedTextBox);\n return MaskedTextBox;\n}(Component));\nexport { MaskedTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Complex } from '@syncfusion/ej2-base';\nimport { L10n, Internationalization } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';\nimport { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, Browser } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-popups';\n/**\n * Configures the ticks data of the Slider.\n */\nvar TicksData = /** @class */ (function (_super) {\n __extends(TicksData, _super);\n function TicksData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], TicksData.prototype, \"placement\", void 0);\n __decorate([\n Property(10)\n ], TicksData.prototype, \"largeStep\", void 0);\n __decorate([\n Property(1)\n ], TicksData.prototype, \"smallStep\", void 0);\n __decorate([\n Property(false)\n ], TicksData.prototype, \"showSmallTicks\", void 0);\n __decorate([\n Property(null)\n ], TicksData.prototype, \"format\", void 0);\n return TicksData;\n}(ChildProperty));\nexport { TicksData };\n/**\n * It illustrates the tooltip data in slider.\n */\nvar TooltipData = /** @class */ (function (_super) {\n __extends(TooltipData, _super);\n function TooltipData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], TooltipData.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Before')\n ], TooltipData.prototype, \"placement\", void 0);\n __decorate([\n Property('Focus')\n ], TooltipData.prototype, \"showOn\", void 0);\n __decorate([\n Property(false)\n ], TooltipData.prototype, \"isVisible\", void 0);\n __decorate([\n Property(null)\n ], TooltipData.prototype, \"format\", void 0);\n return TooltipData;\n}(ChildProperty));\nexport { TooltipData };\nvar classNames = {\n root: 'e-slider',\n rtl: 'e-rtl',\n sliderHiddenInput: 'e-slider-input',\n sliderHandle: 'e-handle',\n rangeBar: 'e-range',\n sliderButton: 'e-slider-button',\n firstButton: 'e-first-button',\n secondButton: 'e-second-button',\n scale: 'e-scale',\n tick: 'e-tick',\n large: 'e-large',\n tickValue: 'e-tick-value',\n sliderTooltip: 'e-slider-tooltip',\n sliderHover: 'e-slider-hover',\n sliderFirstHandle: 'e-handle-first',\n sliderSecondHandle: 'e-handle-second',\n sliderDisabled: 'e-disabled',\n sliderContainer: 'e-slider-container',\n horizontalTooltipBefore: 'e-slider-horizontal-before',\n horizontalTooltipAfter: 'e-slider-horizontal-after',\n verticalTooltipBefore: 'e-slider-vertical-before',\n verticalTooltipAfter: 'e-slider-vertical-after',\n materialTooltip: 'e-material-tooltip',\n materialTooltipOpen: 'e-material-tooltip-open',\n materialTooltipActive: 'e-tooltip-active',\n materialSlider: 'e-material-slider',\n sliderTrack: 'e-slider-track',\n sliderHandleFocused: 'e-handle-focused',\n verticalSlider: 'e-vertical',\n horizontalSlider: 'e-horizontal',\n sliderHandleStart: 'e-handle-start',\n sliderTooltipStart: 'e-material-tooltip-start',\n sliderTabHandle: 'e-tab-handle',\n sliderButtonIcon: 'e-button-icon',\n sliderSmallSize: 'e-small-size',\n sliderTickPosition: 'e-tick-pos',\n sliderFirstTick: 'e-first-tick',\n sliderLastTick: 'e-last-tick',\n sliderButtonClass: 'e-slider-btn',\n sliderTooltipWrapper: 'e-tooltip-wrap',\n sliderTabTrack: 'e-tab-track',\n sliderTabRange: 'e-tab-range',\n sliderActiveHandle: 'e-handle-active',\n sliderMaterialHandle: 'e-material-handle',\n sliderMaterialRange: 'e-material-range',\n sliderMaterialDefault: 'e-material-default',\n materialTooltipShow: 'e-material-tooltip-show',\n materialTooltipHide: 'e-material-tooltip-hide',\n readOnly: 'e-read-only'\n};\n/**\n * The Slider component allows the user to select a value or range\n * of values in-between a min and max range, by dragging the handle over the slider bar.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Slider = /** @class */ (function (_super) {\n __extends(Slider, _super);\n function Slider(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.horDir = 'left';\n _this.verDir = 'bottom';\n _this.transition = {\n handle: 'left .4s cubic-bezier(.25, .8, .25, 1), right .4s cubic-bezier(.25, .8, .25, 1), ' +\n 'top .4s cubic-bezier(.25, .8, .25, 1) , bottom .4s cubic-bezier(.25, .8, .25, 1)',\n rangeBar: 'all .4s cubic-bezier(.25, .8, .25, 1)'\n };\n _this.transitionOnMaterialTooltip = {\n handle: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out',\n rangeBar: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, width 1ms ease-out, height 1ms ease-out'\n };\n _this.scaleTransform = 'transform .4s cubic-bezier(.25, .8, .25, 1)';\n _this.customAriaText = null;\n return _this;\n }\n Slider.prototype.preRender = function () {\n var localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };\n this.l10n = new L10n('slider', localeText, this.locale);\n this.tickElementCollection = [];\n this.tooltipFormatInfo = {};\n this.ticksFormatInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n };\n Slider.prototype.initCultureFunc = function () {\n this.internationalization = new Internationalization(this.locale);\n };\n Slider.prototype.initCultureInfo = function () {\n this.tooltipFormatInfo.format = (!isNullOrUndefined(this.tooltip.format)) ? this.tooltip.format : null;\n this.ticksFormatInfo.format = (!isNullOrUndefined(this.ticks.format)) ? this.ticks.format : null;\n };\n Slider.prototype.formatString = function (value, formatInfo) {\n var formatValue = null;\n var formatString = null;\n if ((value || value === 0)) {\n formatValue = this.formatNumber(value);\n var numberOfDecimals = this.numberOfDecimals(value);\n formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));\n }\n return { elementVal: formatValue, formatString: formatString };\n };\n ;\n Slider.prototype.formatNumber = function (value) {\n var numberOfDecimals = this.numberOfDecimals(value);\n return this.internationalization.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(value);\n };\n ;\n Slider.prototype.numberOfDecimals = function (value) {\n var decimalPart = value.toString().split('.')[1];\n var numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n return numberOfDecimals;\n };\n Slider.prototype.makeRoundNumber = function (value, precision) {\n var decimals = precision || 0;\n return Number(value.toFixed(decimals));\n };\n ;\n Slider.prototype.fractionalToInteger = function (value) {\n value = (this.numberOfDecimals(value) === 0) ? Number(value).toFixed(this.noOfDecimals) : value;\n var tens = 1;\n for (var i = 0; i < this.noOfDecimals; i++) {\n tens *= 10;\n }\n value = Number((value * tens).toFixed(0));\n return value;\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Slider.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n this.setZindex();\n };\n Slider.prototype.initialize = function () {\n addClass([this.element], classNames.root);\n this.setCSSClass();\n };\n Slider.prototype.setCSSClass = function (oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Slider.prototype.setEnabled = function () {\n var tooltipElement = this.type !== 'Range' ? [this.firstTooltipElement] :\n [this.firstTooltipElement, this.secondTooltipElement];\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Always') {\n tooltipElement.forEach(function (tooltipElement) {\n tooltipElement.classList.add(classNames.sliderDisabled);\n });\n }\n this.unwireEvents();\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Always') {\n tooltipElement.forEach(function (tooltipElement) {\n tooltipElement.classList.remove(classNames.sliderDisabled);\n });\n }\n this.wireEvents();\n }\n };\n Slider.prototype.getTheme = function (container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n };\n /**\n * Initialize the rendering\n * @private\n */\n Slider.prototype.initRender = function () {\n this.sliderContainer = createElement('div', { className: classNames.sliderContainer });\n this.element.parentNode.insertBefore(this.sliderContainer, this.element);\n this.sliderContainer.appendChild(this.element);\n this.sliderTrack = createElement('div', { className: classNames.sliderTrack });\n this.element.appendChild(this.sliderTrack);\n this.element.tabIndex = -1;\n this.isMaterial = this.getTheme(this.sliderContainer) === 'material';\n this.setHandler();\n this.createRangeBar();\n this.setOrientClass();\n this.hiddenInput = (createElement('input', {\n attrs: {\n type: 'hidden', value: (isNullOrUndefined(this.value) ? this.min.toString() : this.value.toString()),\n name: this.element.getAttribute('name') || this.element.getAttribute('id') ||\n '_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput\n }\n }));\n this.hiddenInput.tabIndex = -1;\n this.sliderContainer.appendChild(this.hiddenInput);\n if (this.showButtons) {\n this.setButtons();\n }\n this.setEnableRTL();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n else {\n this.value = isNullOrUndefined(this.value) ? parseFloat(formatUnit(this.min.toString())) : this.value;\n }\n this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :\n [this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),\n this.checkHandleValue(parseFloat(formatUnit(this.value[1].toString())))];\n this.previousChanged = this.previousVal;\n this.setValue();\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n }\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n }\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n if (this.readOnly) {\n addClass([this.sliderContainer], [classNames.readOnly]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.readOnly]);\n }\n };\n Slider.prototype.createRangeBar = function () {\n if (this.type !== 'Default') {\n this.rangeBar = (createElement('div', { attrs: { class: classNames.rangeBar } }));\n this.element.appendChild(this.rangeBar);\n }\n };\n Slider.prototype.setOrientClass = function () {\n if (this.orientation !== 'Vertical') {\n this.sliderContainer.classList.remove(classNames.verticalSlider);\n this.sliderContainer.classList.add(classNames.horizontalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'horizontal');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'horizontal');\n }\n }\n else {\n this.sliderContainer.classList.remove(classNames.horizontalSlider);\n this.sliderContainer.classList.add(classNames.verticalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'vertical');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'vertical');\n }\n }\n };\n Slider.prototype.setAriaAttributes = function (element) {\n var _this = this;\n if (this.type !== 'Range') {\n attributes(element, {\n 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString()\n });\n }\n else {\n var range = [[this.min.toString(), this.value[1].toString()],\n [this.value[0].toString(), this.max.toString()]];\n range.forEach(function (range, index) {\n var element = index === 0 ? _this.firstHandle : _this.secondHandle;\n if (element) {\n attributes(element, {\n 'aria-valuemin': range[0], 'aria-valuemax': range[1]\n });\n }\n });\n }\n };\n Slider.prototype.createSecondHandle = function () {\n this.secondHandle = createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', 'aria-labelledby': this.element.id + '_title', tabIndex: '0'\n }\n });\n this.secondHandle.classList.add(classNames.sliderSecondHandle);\n this.element.appendChild(this.secondHandle);\n if (this.isMaterial && this.tooltip.isVisible) {\n this.secondMaterialHandle = createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.secondMaterialHandle);\n }\n };\n Slider.prototype.createFirstHandle = function () {\n this.firstHandle = createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', 'aria-labelledby': this.element.id + '_title', tabIndex: '0'\n }\n });\n this.firstHandle.classList.add(classNames.sliderFirstHandle);\n this.element.appendChild(this.firstHandle);\n if (this.isMaterial && this.tooltip.isVisible) {\n this.firstMaterialHandle = createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.firstMaterialHandle);\n }\n };\n Slider.prototype.wireFirstHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.firstHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.firstHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.firstHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.firstHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.firstHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.firstHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.firstHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.wireSecondHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.secondHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.secondHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.secondHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.secondHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.secondHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.secondHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.secondHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.secondHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.handleStart = function () {\n var pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (pos === 0 && this.type !== 'Range') {\n this.getHandle().classList.add(classNames.sliderHandleStart);\n if (this.isMaterial && this.tooltip.isVisible) {\n this.firstMaterialHandle.classList.add(classNames.sliderHandleStart);\n if (tooltipElement) {\n tooltipElement.classList.add(classNames.sliderTooltipStart);\n }\n }\n }\n };\n Slider.prototype.transitionEnd = function (e) {\n this.handleStart();\n this.getHandle().style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.tooltip.isVisible) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (!this.isMaterial) {\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n this.tooltipAnimation();\n }\n else {\n if (!tooltipElement.classList.contains(classNames.materialTooltipOpen) && e.propertyName !== 'transform') {\n this.openMaterialTooltip();\n }\n else {\n if (this.type === 'Default') {\n tooltipElement.style.transition = this.transition.handle;\n }\n this.refreshTooltip();\n }\n }\n }\n if (this.tooltip.showOn !== 'Always') {\n this.closeTooltip();\n }\n };\n Slider.prototype.handleFocusOut = function () {\n if (this.firstHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.firstHandle.classList.remove(classNames.sliderHandleFocused);\n }\n if (this.type === 'Range') {\n if (this.secondHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.secondHandle.classList.remove(classNames.sliderHandleFocused);\n }\n }\n };\n Slider.prototype.handleFocus = function (e) {\n if (e.currentTarget === this.firstHandle) {\n this.firstHandle.classList.add(classNames.sliderHandleFocused);\n }\n else {\n this.secondHandle.classList.add(classNames.sliderHandleFocused);\n }\n };\n Slider.prototype.handleOver = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover') {\n this.tooltipValue();\n var tooltipObj = e.currentTarget === this.firstHandle ? this.firstTooltipObj : this.secondTooltipObj;\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n if (e.currentTarget === this.firstHandle) {\n this.firstTooltipObj.open(this.firstHandle);\n }\n else {\n this.secondTooltipObj.open(this.secondHandle);\n }\n }\n };\n Slider.prototype.handleLeave = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover' &&\n !e.currentTarget.classList.contains(classNames.sliderHandleFocused) &&\n !e.currentTarget.classList.contains(classNames.sliderTabHandle)) {\n this.tooltipValue();\n var tooltipObj = e.currentTarget === this.firstHandle ? this.firstTooltipObj : this.secondTooltipObj;\n if (e.currentTarget === this.firstHandle) {\n this.firstTooltipObj.close();\n }\n else {\n this.secondTooltipObj.close();\n }\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n }\n };\n Slider.prototype.setHandler = function () {\n if (this.min > this.max) {\n this.min = this.max;\n }\n this.createFirstHandle();\n if (this.type === 'Range') {\n this.createSecondHandle();\n }\n };\n Slider.prototype.setEnableRTL = function () {\n this.enableRtl && this.orientation !== 'Vertical' ? addClass([this.sliderContainer], classNames.rtl) :\n removeClass([this.sliderContainer], classNames.rtl);\n var preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (this.enableRtl) {\n this.horDir = 'right';\n this.verDir = 'bottom';\n }\n else {\n this.horDir = 'left';\n this.verDir = 'bottom';\n }\n var currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (preDir !== currDir) {\n if (this.orientation === 'Horizontal') {\n setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });\n if (this.type === 'Range') {\n setStyleAttribute(this.secondHandle, { 'top': '', 'left': 'auto' });\n }\n }\n }\n };\n Slider.prototype.tooltipValue = function () {\n var text;\n var value1;\n var value2;\n var args = {\n value: this.value,\n text: ''\n };\n this.setTooltipContent();\n args.text = text = this.firstTooltipObj.content;\n this.trigger('tooltipChange', args);\n this.addTooltipClass(args.text);\n if (text !== args.text) {\n this.customAriaText = args.text;\n this.firstTooltipObj.content = args.text;\n this.setAriaAttrValue(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.content = args.text;\n this.setAriaAttrValue(this.secondHandle);\n }\n }\n };\n Slider.prototype.setTooltipContent = function () {\n var content;\n if (this.type === 'Range') {\n var content_1 = this.formatContent(this.tooltipFormatInfo, false);\n this.firstTooltipObj.content = content_1;\n this.secondTooltipObj.content = content_1;\n }\n else {\n if (!isNullOrUndefined(this.handleVal1)) {\n var content_2 = this.formatContent(this.tooltipFormatInfo, false);\n this.firstTooltipObj.content = content_2;\n }\n }\n };\n Slider.prototype.formatContent = function (formatInfo, ariaContent) {\n var content = '';\n if (!ariaContent) {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(this.handleVal2, formatInfo)\n .formatString + ' - ' + this.formatString(this.handleVal1, formatInfo).formatString) :\n (this.handleVal2.toString() + ' - ' + this.handleVal1.toString());\n }\n else {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(this.handleVal1, formatInfo)\n .formatString + ' - ' + this.formatString(this.handleVal2, formatInfo).formatString) :\n (this.handleVal1.toString() + ' - ' + this.handleVal2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(this.handleVal1)) {\n content = (!isNullOrUndefined(formatInfo.format)) ?\n this.formatString(this.handleVal1, formatInfo).formatString : this.handleVal1.toString();\n }\n }\n return content;\n }\n else {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(this.handleVal2, formatInfo).elementVal + ' - ' +\n this.formatString(this.handleVal1, formatInfo).elementVal) :\n (this.handleVal2.toString() + ' - ' + this.handleVal1.toString());\n }\n else {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(this.handleVal1, formatInfo).elementVal + ' - ' +\n this.formatString(this.handleVal2, formatInfo).elementVal) :\n (this.handleVal1.toString() + ' - ' + this.handleVal2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(this.handleVal1)) {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n this.formatString(this.handleVal1, formatInfo).elementVal : this.handleVal1.toString();\n }\n }\n return content;\n }\n };\n Slider.prototype.addTooltipClass = function (content) {\n var _this = this;\n if (this.isMaterial && this.tooltip.isVisible) {\n var count_1 = content.toString().length;\n var tooltipElement = this.type !== 'Range' ? [this.firstTooltipElement] :\n [this.firstTooltipElement, this.secondTooltipElement];\n tooltipElement.forEach(function (element, index) {\n if (!element) {\n var cssClass = count_1 > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;\n !index ? _this.firstTooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass :\n _this.secondTooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;\n }\n else {\n if (count_1 > 4) {\n element.classList.remove(classNames.sliderMaterialDefault);\n if (!element.classList.contains(classNames.sliderMaterialRange)) {\n element.classList.add(classNames.sliderMaterialRange);\n element.style.transform = 'scale(1)';\n }\n }\n else {\n element.classList.remove(classNames.sliderMaterialRange);\n if (!element.classList.contains(classNames.sliderMaterialDefault)) {\n element.classList.add(classNames.sliderMaterialDefault);\n element.style.transform = _this.getTooltipTransformProperties(_this.previousTooltipClass).rotate;\n }\n }\n }\n });\n }\n };\n Slider.prototype.tooltipPlacement = function () {\n var tooltipPosition;\n if (this.orientation === 'Horizontal') {\n this.tooltip.placement === 'Before' ? tooltipPosition = 'TopCenter' : tooltipPosition = 'BottomCenter';\n }\n else {\n this.tooltip.placement === 'Before' ? tooltipPosition = 'LeftCenter' : tooltipPosition = 'RightCenter';\n }\n this.firstTooltipObj.position = tooltipPosition;\n if (this.type === 'Range') {\n this.secondTooltipObj.position = tooltipPosition;\n }\n if (this.isMaterial) {\n this.firstTooltipObj.showTipPointer = true;\n this.setProperties({ tooltip: { showOn: 'Always' } }, true);\n this.firstTooltipObj.height = 30;\n if (this.type === 'Range') {\n this.secondTooltipObj.showTipPointer = true;\n this.secondTooltipObj.height = 30;\n }\n }\n };\n Slider.prototype.tooltipBeforeOpen = function (args) {\n var tooltipElement = args.target === this.firstHandle ? this.firstTooltipElement = args.element :\n this.secondTooltipElement = args.element;\n args.target.removeAttribute('aria-describedby');\n if (this.isMaterial && this.tooltip.isVisible) {\n var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);\n tooltipElement.firstChild.classList.add(classNames.materialTooltipHide);\n this.handleStart();\n if (tooltipElement.firstElementChild.innerText.length > 4) {\n tooltipElement.style.transform = transformProperties.translate + \" scale(0.01)\";\n }\n else {\n tooltipElement.style.transform = transformProperties.translate + \" \" + transformProperties.rotate + \" scale(0.01)\";\n }\n }\n };\n Slider.prototype.wireMaterialTooltipEvent = function (destroy) {\n if (this.isMaterial && this.tooltip.isVisible) {\n if (!destroy) {\n EventHandler.add(this.firstTooltipElement, 'mousedown touchstart', this.sliderDown, this);\n if (this.type === 'Range') {\n EventHandler.add(this.secondTooltipElement, 'mousedown touchstart', this.sliderDown, this);\n }\n }\n else {\n EventHandler.remove(this.firstTooltipElement, 'mousedown touchstart', this.sliderDown);\n if (this.type === 'Range') {\n EventHandler.remove(this.secondTooltipElement, 'mousedown touchstart', this.sliderDown);\n }\n }\n }\n };\n Slider.prototype.tooltipPositionCalculation = function (position) {\n var cssClass;\n switch (position) {\n case 'TopCenter':\n cssClass = classNames.horizontalTooltipBefore;\n break;\n case 'BottomCenter':\n cssClass = classNames.horizontalTooltipAfter;\n break;\n case 'LeftCenter':\n cssClass = classNames.verticalTooltipBefore;\n break;\n case 'RightCenter':\n cssClass = classNames.verticalTooltipAfter;\n break;\n }\n return cssClass;\n };\n Slider.prototype.getTooltipTransformProperties = function (className) {\n if (this.firstTooltipElement) {\n var position = void 0;\n if (this.orientation === 'Horizontal') {\n position = (this.firstTooltipElement.clientHeight + 14) - (this.firstTooltipElement.clientHeight / 2);\n }\n else {\n position = (this.firstTooltipElement.clientWidth + 14) - (this.firstTooltipElement.clientWidth / 2);\n }\n var transformProperties = this.orientation === 'Horizontal' ?\n (className === classNames.horizontalTooltipBefore ? { rotate: 'rotate(45deg)', translate: \"translateY(\" + position + \"px)\" } :\n { rotate: 'rotate(225deg)', translate: \"translateY(\" + -(position) + \"px)\" }) :\n (className === classNames.verticalTooltipBefore ? { rotate: 'rotate(-45deg)', translate: \"translateX(\" + position + \"px)\" } :\n { rotate: 'rotate(-225deg)', translate: \"translateX(\" + (-position) + \"px)\" });\n return transformProperties;\n }\n return undefined;\n };\n Slider.prototype.openMaterialTooltip = function () {\n var _this = this;\n this.refreshTooltip();\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n var handle = this.activeHandle === 1 ? this.firstMaterialHandle : this.secondMaterialHandle;\n if (tooltipElement.firstChild.classList.contains(classNames.materialTooltipHide)) {\n tooltipElement.firstChild.classList.remove(classNames.materialTooltipHide);\n }\n tooltipElement.firstChild.classList.add(classNames.materialTooltipShow);\n this.getHandle().style.cursor = 'default';\n tooltipElement.style.transition = this.scaleTransform;\n tooltipElement.classList.add(classNames.materialTooltipOpen);\n handle.style.transform = 'scale(0)';\n if (tooltipElement.firstElementChild.innerText.length > 4) {\n tooltipElement.style.transform = 'scale(1)';\n }\n else {\n tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (this.type === 'Default') {\n setTimeout(function () { tooltipElement.style.transition = _this.transition.handle; }, 2500);\n }\n else {\n setTimeout(function () { tooltipElement.style.transition = 'none'; }, 2500);\n }\n };\n Slider.prototype.checkTooltipPosition = function (args) {\n var tooltipPosition = args.target === this.firstHandle ? this.firstHandleTooltipPosition :\n this.secondHandleTooltipPosition;\n if (tooltipPosition === undefined || tooltipPosition !== args.collidedPosition) {\n var tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);\n args.element.classList.remove(this.previousTooltipClass);\n args.element.classList.add(tooltipClass);\n this.previousTooltipClass = tooltipClass;\n if (args.element.style.transform && args.element.classList.contains(classNames.materialTooltipOpen) &&\n args.element.firstElementChild.innerText.length < 4) {\n args.element.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (args.target === this.firstHandle) {\n this.firstHandleTooltipPosition = args.collidedPosition;\n }\n else {\n this.secondHandleTooltipPosition = args.collidedPosition;\n }\n }\n };\n Slider.prototype.renderTooltip = function () {\n if (this.tooltip.showOn === 'Auto') {\n this.setProperties({ tooltip: { showOn: 'Hover' } }, true);\n }\n this.firstTooltipObj = new Tooltip({\n showTipPointer: false,\n cssClass: classNames.sliderTooltip,\n animation: { open: { effect: 'None' }, close: { effect: 'None' } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n afterClose: this.tooltipAfterClose.bind(this)\n });\n this.firstTooltipObj.appendTo(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj = new Tooltip({\n showTipPointer: false,\n cssClass: classNames.sliderTooltip,\n animation: { open: { effect: 'None' }, close: { effect: 'None' } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n afterClose: this.tooltipAfterClose.bind(this)\n });\n this.secondTooltipObj.appendTo(this.secondHandle);\n }\n this.tooltipPlacement();\n this.firstHandle.style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range') {\n this.secondHandle.style.transition = 'none';\n }\n if (this.isMaterial) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n this.tooltipValue();\n this.firstTooltipObj.open(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.open(this.secondHandle);\n }\n }\n };\n Slider.prototype.tooltipAfterClose = function (args) {\n if (args.element === this.firstTooltipElement) {\n this.firstTooltipElement = undefined;\n }\n else {\n this.secondTooltipElement = undefined;\n }\n };\n Slider.prototype.setButtons = function () {\n this.firstBtn = createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });\n this.firstBtn.appendChild(createElement('span', { className: classNames.sliderButtonIcon }));\n this.firstBtn.tabIndex = -1;\n this.secondBtn = createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });\n this.secondBtn.appendChild(createElement('span', { className: classNames.sliderButtonIcon }));\n this.secondBtn.tabIndex = -1;\n this.sliderContainer.classList.add(classNames.sliderButtonClass);\n this.sliderContainer.appendChild(this.firstBtn);\n this.sliderContainer.appendChild(this.secondBtn);\n this.sliderContainer.appendChild(this.element);\n this.buttonTitle();\n };\n Slider.prototype.buttonTitle = function () {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n this.l10n.setLocale(this.locale);\n var decrementTitle = this.l10n.getConstant('decrementTitle');\n var incrementTitle = this.l10n.getConstant('incrementTitle');\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });\n };\n Slider.prototype.buttonFocusOut = function () {\n if (this.isMaterial) {\n this.getHandle().style.transform = this.getHandle().style.transform.replace('scale(1.5)', 'scale(1)');\n }\n };\n Slider.prototype.repeatButton = function (args) {\n var buttonElement = args.target.parentElement;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (!tooltipElement && this.tooltip.isVisible) {\n this.openTooltip();\n }\n var hVal = this.handleValueUpdate();\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var value;\n if (args.target.parentElement.classList.contains(classNames.firstButton)\n || args.target.classList.contains(classNames.firstButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if (args.target.parentElement.classList.contains(classNames.secondButton)\n || (args.target.classList.contains(classNames.secondButton))) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n if (value >= this.min && value <= this.max) {\n this.changeHandleValue(value);\n this.refreshTooltipOnMove();\n }\n };\n Slider.prototype.repeatHandlerMouse = function (args) {\n args.preventDefault();\n if (args.type === ('mousedown') || args.type === ('touchstart')) {\n this.buttonClick(args);\n this.repeatInterval = setInterval(this.repeatButton.bind(this), 180, args);\n }\n };\n Slider.prototype.materialChange = function () {\n if (this.getHandle().style.transform.indexOf('scale(1.5') === -1) {\n this.getHandle().style.transform = 'scale(1.5)';\n }\n };\n Slider.prototype.repeatHandlerUp = function (e) {\n this.changeEvent('changed');\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.closeTooltip();\n }\n clearInterval(this.repeatInterval);\n this.getHandle().focus();\n };\n Slider.prototype.renderScale = function () {\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n var spanText;\n this.noOfDecimals = this.numberOfDecimals(this.step);\n this.ul = createElement('ul', {\n className: classNames.scale + ' ' + 'e-' + orien + '-scale ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n if (Browser.isAndroid && orien === 'h') {\n this.ul.classList.add(classNames.sliderTickPosition);\n }\n var smallStep = this.ticks.smallStep;\n if (!this.ticks.showSmallTicks) {\n this.ticks.largeStep > 0 ? (smallStep = this.ticks.largeStep) :\n (smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n }\n else if (smallStep <= 0) {\n smallStep = parseFloat(formatUnit(this.step));\n }\n var min = this.fractionalToInteger(this.min);\n var max = this.fractionalToInteger(this.max);\n var steps = this.fractionalToInteger(smallStep);\n var count = Math.abs((max - min) / steps);\n this.element.appendChild(this.ul);\n var li;\n var start = parseFloat(this.min.toString());\n if (orien === 'v') {\n start = parseFloat(this.max.toString());\n }\n var left = 0;\n var tickWidth = 100 / count;\n if (tickWidth === Infinity) {\n tickWidth = 5;\n }\n for (var i = 0; i <= count; i++) {\n li = (createElement('li', {\n attrs: {\n class: classNames.tick, title: start.toString(), role: 'presentation', tabIndex: '-1',\n 'aria-hidden': 'true'\n }\n }));\n var islargeTick = void 0;\n if (this.numberOfDecimals(this.max) === 0 && this.numberOfDecimals(this.min) === 0 && this.numberOfDecimals(this.step) === 0) {\n if (orien === 'h') {\n islargeTick = ((start - parseFloat(this.min.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(start - parseFloat(this.max.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n }\n else {\n var largestep = this.fractionalToInteger(this.ticks.largeStep);\n var startValue = this.fractionalToInteger(start);\n islargeTick = ((startValue - min) % largestep === 0) ? true : false;\n }\n if (islargeTick) {\n li.classList.add(classNames.large);\n }\n (orien === 'h') ? (li.style.width = tickWidth + '%') : (li.style.height = tickWidth + '%');\n var repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;\n if (islargeTick) {\n for (var j = 0; j < repeat; j++) {\n this.createTick(li, start);\n }\n }\n else {\n this.formatTicksValue(li, start);\n }\n this.ul.appendChild(li);\n this.tickElementCollection.push(li);\n var decimalPoints = void 0;\n if (this.numberOfDecimals(smallStep) > this.numberOfDecimals(start)) {\n decimalPoints = this.numberOfDecimals(smallStep);\n }\n else {\n decimalPoints = this.numberOfDecimals(start);\n }\n if (orien === 'h') {\n start = this.makeRoundNumber(start + smallStep, decimalPoints);\n }\n else {\n start = this.makeRoundNumber(start - smallStep, decimalPoints);\n }\n left = this.makeRoundNumber(left + smallStep, decimalPoints);\n }\n this.firstChild = this.ul.firstElementChild;\n this.lastChild = this.ul.lastElementChild;\n this.firstChild.classList.add(classNames.sliderFirstTick);\n this.lastChild.classList.add(classNames.sliderLastTick);\n this.sliderContainer.classList.add(classNames.scale + '-' + this.ticks.placement.toLowerCase());\n if (orien === 'h') {\n this.firstChild.style.width = tickWidth / 2 + '%';\n this.lastChild.style.width = tickWidth / 2 + '%';\n }\n else {\n this.firstChild.style.height = tickWidth / 2 + '%';\n this.lastChild.style.height = tickWidth / 2 + '%';\n }\n var eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };\n this.trigger('renderedTicks', eventArgs);\n this.scaleAlignment();\n };\n Slider.prototype.createTick = function (li, start) {\n var span = createElement('span', {\n className: classNames.tickValue + ' ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n li.appendChild(span);\n span.innerHTML = this.formatTicksValue(li, start);\n };\n Slider.prototype.formatTicksValue = function (li, start) {\n var tickText = this.formatNumber(start);\n var text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?\n this.formatString(start, this.ticksFormatInfo).formatString : tickText;\n var eventArgs = { value: start, text: text, tickElement: li };\n this.trigger('renderingTicks', eventArgs);\n li.setAttribute('title', eventArgs.text.toString());\n return eventArgs.text.toString();\n };\n Slider.prototype.scaleAlignment = function () {\n this.tickValuePosition();\n var smallTick = 12;\n var largeTick = 20;\n var half = largeTick / 2;\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n if (this.orientation === 'Vertical') {\n (this.element.getBoundingClientRect().width <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n else {\n (this.element.getBoundingClientRect().height <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n };\n Slider.prototype.tickValuePosition = function () {\n var first = this.firstChild.getBoundingClientRect();\n var firstChild;\n var smallStep = this.ticks.smallStep;\n var count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;\n if (this.firstChild.children.length > 0) {\n firstChild = this.firstChild.children[0].getBoundingClientRect();\n }\n var tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +\n classNames.large + ' .' + classNames.tickValue)];\n var other;\n if (this.ticks.placement === 'Both') {\n other = [].slice.call(tickElements[0], 2);\n }\n else {\n other = [].slice.call(tickElements[0], 1);\n }\n var tickWidth = this.orientation === 'Vertical' ?\n (first.height * 2) : (first.width * 2);\n for (var i = 0; i < this.firstChild.children.length; i++) {\n if (this.orientation === 'Vertical') {\n this.firstChild.children[i].style.top = -(firstChild.height / 2) + 'px';\n }\n else {\n if (!this.enableRtl) {\n this.firstChild.children[i].style.left = -(firstChild.width / 2) + 'px';\n }\n else {\n this.firstChild.children[i].style.left = (tickWidth -\n this.firstChild.children[i].getBoundingClientRect().width) / 2 + 'px';\n }\n }\n }\n for (var i = 0; i < other.length; i++) {\n var otherChild = other[i].getBoundingClientRect();\n if (this.orientation === 'Vertical') {\n setStyleAttribute(other[i], { top: (tickWidth - otherChild.height) / 2 + 'px' });\n }\n else {\n setStyleAttribute(other[i], { left: (tickWidth - otherChild.width) / 2 + 'px' });\n }\n }\n if (this.enableRtl && this.lastChild.children.length && count !== 0) {\n this.lastChild.children[0].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n if (this.ticks.placement === 'Both') {\n this.lastChild.children[1].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n }\n }\n if (count === 0) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.left = this.firstHandle.style.left;\n }\n else {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.right = this.firstHandle.style.right;\n this.firstChild.children[0].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n if (this.ticks.placement === 'Both') {\n this.firstChild.children[1].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n }\n }\n }\n if (this.orientation === 'Vertical') {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n }\n }\n };\n Slider.prototype.setAriaAttrValue = function (element) {\n var ariaValueText;\n var isTickFormatted = ((!isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format))) ? true : false;\n var text = !isTickFormatted ?\n this.formatContent(this.ticksFormatInfo, false) : this.formatContent(this.tooltipFormatInfo, false);\n var valuenow = isTickFormatted ? this.formatContent(this.ticksFormatInfo, true) :\n this.formatContent(this.tooltipFormatInfo, true);\n text = (!this.customAriaText) ? (text) : (this.customAriaText);\n if (text.split(' - ').length === 2) {\n ariaValueText = text.split(' - ');\n }\n else {\n ariaValueText = [text, text];\n }\n this.setAriaAttributes(element);\n if (this.type !== 'Range') {\n attributes(element, { 'aria-valuenow': valuenow, 'aria-valuetext': text });\n }\n else {\n (!this.enableRtl) ? ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] })) :\n ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }));\n }\n };\n Slider.prototype.handleValueUpdate = function () {\n var hVal;\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n hVal = this.handleVal1;\n }\n else {\n hVal = this.handleVal2;\n }\n }\n else {\n hVal = this.handleVal1;\n }\n return hVal;\n };\n Slider.prototype.buttonClick = function (args) {\n var value;\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var hVal = this.handleValueUpdate();\n if ((args.keyCode === 40) || (args.keyCode === 37)\n || args.currentTarget.classList.contains(classNames.firstButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if ((args.keyCode === 38) || (args.keyCode === 39) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n else if ((args.keyCode === 33\n || args.currentTarget.classList.contains(classNames.firstButton))) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true));\n }\n else if ((args.keyCode === 34) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false));\n }\n else if ((args.keyCode === 36)) {\n value = parseFloat(this.min.toString());\n }\n else if ((args.keyCode === 35)) {\n value = parseFloat(this.max.toString());\n }\n this.changeHandleValue(value);\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipAnimation();\n this.getHandle().focus();\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.add(this.secondBtn, 'mouseup touchend', this.buttonUp, this);\n }\n };\n Slider.prototype.tooltipAnimation = function () {\n if (this.tooltip.isVisible) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (this.isMaterial) {\n !tooltipElement.classList.contains(classNames.materialTooltipOpen) ? this.openMaterialTooltip() : this.refreshTooltip();\n }\n else {\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n this.openTooltip();\n }\n }\n };\n Slider.prototype.buttonUp = function (args) {\n if (this.tooltip.isVisible) {\n if (!this.isMaterial) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'None' } };\n }\n }\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.remove(this.firstBtn, 'mouseup touchend', this.buttonUp);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.remove(this.secondBtn, 'mouseup touchend', this.buttonUp);\n }\n };\n Slider.prototype.setRangeBar = function () {\n if (this.orientation === 'Horizontal') {\n if (this.type === 'MinRange') {\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n };\n Slider.prototype.setValue = function () {\n this.handleVal1 = isNullOrUndefined(this.value) ? this.checkHandleValue(parseFloat(this.min.toString())) :\n this.checkHandleValue(parseFloat(this.value.toString()));\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.preHandlePos1 = this.handlePos1;\n isNullOrUndefined(this.activeHandle) ? (this.type === 'Range' ? this.activeHandle = 2 : this.activeHandle = 1) :\n this.activeHandle = this.activeHandle;\n if (this.type === 'Default' || this.type === 'MinRange') {\n this.setHandlePosition();\n this.handleStart();\n this.value = this.handleVal1;\n this.setAriaAttrValue(this.firstHandle);\n this.changeEvent('changed');\n }\n else {\n this.validateRangeValue();\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.rangeValueUpdate = function () {\n if (this.value === null || typeof (this.value) !== 'object') {\n this.value = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n };\n Slider.prototype.validateRangeValue = function () {\n this.rangeValueUpdate();\n this.setRangeValue();\n };\n Slider.prototype.modifyZindex = function () {\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.style.zIndex = (this.zIndex + 4) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 3) + '';\n if (this.isMaterial && this.tooltip.isVisible && this.firstTooltipElement && this.secondTooltipElement) {\n this.firstTooltipElement.style.zIndex = (this.zIndex + 4) + '';\n this.secondTooltipElement.style.zIndex = (this.zIndex + 3) + '';\n }\n }\n else {\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n if (this.isMaterial && this.tooltip.isVisible && this.firstTooltipElement && this.secondTooltipElement) {\n this.firstTooltipElement.style.zIndex = (this.zIndex + 3) + '';\n this.secondTooltipElement.style.zIndex = (this.zIndex + 4) + '';\n }\n }\n }\n else if (this.isMaterial && this.tooltip.isVisible && this.firstTooltipElement) {\n this.firstTooltipElement.style.zIndex = (this.zIndex + 4) + '';\n }\n };\n Slider.prototype.setHandlePosition = function () {\n var _this = this;\n var pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n var val = (this.activeHandle === 1) ? this.handleVal1 : this.handleVal2;\n var handle;\n var tooltipElement;\n if (this.isMaterial && this.tooltip.isVisible) {\n tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n handle = [this.getHandle(), (this.activeHandle === 1 ? this.firstMaterialHandle : this.secondMaterialHandle)];\n }\n else {\n handle = [this.getHandle()];\n }\n if (this.tooltip.isVisible && pos === 0 && this.type !== 'Range') {\n handle[0].classList.add(classNames.sliderHandleStart);\n if (this.isMaterial) {\n handle[1].classList.add(classNames.sliderHandleStart);\n if (tooltipElement) {\n tooltipElement.classList.add(classNames.sliderTooltipStart);\n }\n }\n }\n else {\n handle[0].classList.remove(classNames.sliderHandleStart);\n if (this.tooltip.isVisible && this.isMaterial) {\n handle[1].classList.remove(classNames.sliderHandleStart);\n if (tooltipElement) {\n tooltipElement.classList.remove(classNames.sliderTooltipStart);\n }\n }\n }\n handle.forEach(function (handle) {\n if (_this.orientation === 'Horizontal') {\n _this.enableRtl ? (handle.style.right =\n pos + \"px\") : (handle.style.left = pos + \"px\");\n }\n else {\n handle.style.bottom = pos + \"px\";\n }\n });\n this.changeEvent('change');\n };\n Slider.prototype.getHandle = function () {\n return (this.activeHandle === 1) ? this.firstHandle : this.secondHandle;\n };\n Slider.prototype.setRangeValue = function () {\n var temp = this.activeHandle;\n this.updateRangeValue();\n this.activeHandle = 1;\n this.setHandlePosition();\n this.activeHandle = 2;\n this.setHandlePosition();\n this.activeHandle = 1;\n };\n Slider.prototype.changeEvent = function (eventName) {\n var previous = eventName === 'change' ? this.previousVal : this.previousChanged;\n if (this.type !== 'Range') {\n this.setProperties({ 'value': this.handleVal1 }, true);\n if (previous !== this.value) {\n this.trigger(eventName, this.changeEventArgs(eventName));\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.firstHandle);\n }\n else {\n var value = this.value = [this.handleVal1, this.handleVal2];\n this.setProperties({ 'value': value }, true);\n if (previous.length === this.value.length\n && this.value[0] !== previous[0] || this.value[1] !== previous[1]) {\n this.trigger(eventName, this.changeEventArgs(eventName));\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.getHandle());\n }\n this.hiddenInput.value = this.value.toString();\n };\n Slider.prototype.changeEventArgs = function (eventName) {\n var eventArgs;\n if (this.tooltip.isVisible && this.firstTooltipObj) {\n this.tooltipValue();\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: this.firstTooltipObj.content\n };\n }\n else {\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: isNullOrUndefined(this.ticksFormatInfo.format) ? this.value.toString() :\n (this.type !== 'Range' ? this.formatString(this.value, this.ticksFormatInfo).formatString :\n (this.formatString(this.value[0], this.ticksFormatInfo).formatString + ' - ' +\n this.formatString(this.value[1], this.ticksFormatInfo).formatString))\n };\n }\n return eventArgs;\n };\n Slider.prototype.setPreviousVal = function (eventName, value) {\n if (eventName === 'change') {\n this.previousVal = value;\n }\n else {\n this.previousChanged = value;\n }\n };\n Slider.prototype.updateRangeValue = function () {\n var values = this.value.toString().split(',').map(Number);\n if ((this.enableRtl && this.orientation !== 'Vertical') || this.rtl) {\n this.value = [values[1], values[0]];\n }\n else {\n this.value = [values[0], values[1]];\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n this.handleVal1 = this.checkHandleValue(this.value[1]);\n this.handleVal2 = this.checkHandleValue(this.value[0]);\n }\n else {\n this.handleVal1 = this.checkHandleValue(this.value[0]);\n this.handleVal2 = this.checkHandleValue(this.value[1]);\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n this.preHandlePos1 = this.handlePos1;\n this.preHandlePos2 = this.handlePos2;\n };\n Slider.prototype.checkHandlePosition = function (value) {\n var pos;\n value = (100 *\n (value - (parseFloat(formatUnit(this.min))))) / ((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (value / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (value / 100);\n }\n if (((parseFloat(formatUnit(this.max))) === (parseFloat(formatUnit(this.min))))) {\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width;\n }\n else {\n pos = this.element.getBoundingClientRect().height;\n }\n }\n return pos;\n };\n Slider.prototype.checkHandleValue = function (value) {\n if (this.min > this.max) {\n this.min = this.max;\n }\n if (this.min === this.max) {\n return (parseFloat(formatUnit(this.max)));\n }\n var handle = this.tempStartEnd();\n if (value < handle.start) {\n value = handle.start;\n }\n else if (value > handle.end) {\n value = handle.end;\n }\n return value;\n };\n Slider.prototype.onResize = function () {\n var _this = this;\n this.firstHandle.style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range') {\n this.secondHandle.style.transition = 'none';\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.handleVal2) {\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n }\n if (this.orientation === 'Horizontal') {\n this.enableRtl ? this.firstHandle.style.right =\n this.handlePos1 + \"px\" : this.firstHandle.style.left = this.handlePos1 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.firstMaterialHandle) {\n this.enableRtl ? this.firstMaterialHandle.style.right =\n this.handlePos1 + \"px\" : this.firstMaterialHandle.style.left = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.enableRtl ? this.secondHandle.style.right =\n this.handlePos2 + \"px\" : this.secondHandle.style.left = this.handlePos2 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.secondMaterialHandle) {\n this.enableRtl ? this.secondMaterialHandle.style.right =\n this.handlePos2 + \"px\" : this.secondMaterialHandle.style.left = this.handlePos2 + \"px\";\n }\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n this.firstHandle.style.bottom = this.handlePos1 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.firstMaterialHandle) {\n this.firstMaterialHandle.style.bottom = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.secondHandle.style.bottom = this.handlePos2 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.secondMaterialHandle) {\n this.secondMaterialHandle.style.bottom = this.handlePos2 + \"px\";\n }\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n if (this.ticks.placement !== 'None' && this.ul) {\n this.removeElement(this.ul);\n this.renderScale();\n }\n if (!this.tooltip.isVisible) {\n setTimeout(function () {\n _this.firstHandle.style.transition = _this.scaleTransform;\n if (_this.type === 'Range') {\n _this.secondHandle.style.transition = _this.scaleTransform;\n }\n });\n }\n this.refreshTooltip();\n };\n Slider.prototype.changeHandleValue = function (value) {\n var position = null;\n if (this.activeHandle === 1) {\n this.handleVal1 = this.checkHandleValue(value);\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.type === 'Range' && this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n if (this.handlePos1 !== this.preHandlePos1) {\n position = this.preHandlePos1 = this.handlePos1;\n }\n this.modifyZindex();\n }\n else {\n this.handleVal2 = this.checkHandleValue(value);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.type === 'Range' && this.handlePos2 < this.handlePos1) {\n this.handlePos2 = this.handlePos1;\n this.handleVal2 = this.handleVal1;\n }\n if (this.handlePos2 !== this.preHandlePos2) {\n position = this.preHandlePos2 = this.handlePos2;\n }\n this.modifyZindex();\n }\n if (position !== null) {\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n this.setHandlePosition();\n }\n };\n Slider.prototype.tempStartEnd = function () {\n if (this.min > this.max) {\n return {\n start: this.max,\n end: this.min\n };\n }\n else {\n return {\n start: this.min,\n end: this.max\n };\n }\n };\n Slider.prototype.xyToPosition = function (position) {\n var pos;\n if (this.min === this.max) {\n return 100;\n }\n if (this.orientation === 'Horizontal') {\n var left = position.x - this.element.getBoundingClientRect().left;\n var num = this.element.offsetWidth / 100;\n this.val = (left / num);\n }\n else {\n var top_1 = position.y - this.element.getBoundingClientRect().top;\n var num = this.element.offsetHeight / 100;\n this.val = 100 - (top_1 / num);\n }\n var val = this.stepValueCalculation(this.val);\n if (val < 0) {\n val = 0;\n }\n else if (val > 100) {\n val = 100;\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n val = 100 - val;\n }\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (val / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (val / 100);\n }\n return pos;\n };\n Slider.prototype.stepValueCalculation = function (value) {\n if (this.step === 0) {\n this.step = 1;\n }\n var percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);\n var remain = value % Math.abs(percentStep);\n if (remain !== 0) {\n if ((percentStep / 2) > remain) {\n value -= remain;\n }\n else {\n value += Math.abs(percentStep) - remain;\n }\n }\n return value;\n };\n Slider.prototype.add = function (a, b, addition) {\n var precision;\n var x = Math.pow(10, precision || 3);\n var val;\n if (addition) {\n val = (Math.round(a * x) + Math.round(b * x)) / x;\n }\n else {\n val = (Math.round(a * x) - Math.round(b * x)) / x;\n }\n return val;\n };\n Slider.prototype.round = function (a) {\n var f = this.step.toString().split('.');\n return f[1] ? parseFloat(a.toFixed(f[1].length)) : Math.round(a);\n };\n Slider.prototype.positionToValue = function (pos) {\n var val;\n var diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));\n if (this.orientation === 'Horizontal') {\n val = (pos / this.element.getBoundingClientRect().width) * diff;\n }\n else {\n val = (pos / this.element.getBoundingClientRect().height) * diff;\n }\n var total = this.add(val, parseFloat(this.min.toString()), true);\n return (total);\n };\n Slider.prototype.sliderBarClick = function (evt) {\n evt.preventDefault();\n var proxy = this;\n var pos;\n if (evt.type === 'mousedown' || evt.type === 'click') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else if (evt.type === 'touchstart') {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n if (this.type !== 'Range') {\n this.handleVal1 = handleVal;\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n }\n if (this.type === 'Range' && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1)) {\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n this.activeHandle = 2;\n this.modifyZindex();\n this.secondHandle.focus();\n }\n else {\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.activeHandle = 1;\n this.modifyZindex();\n this.firstHandle.focus();\n }\n if (this.isMaterial && this.tooltip.isVisible) {\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n tooltipElement.classList.add(classNames.materialTooltipActive);\n }\n var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement && this.getHandle() !== focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n var handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;\n if (evt.target === handle) {\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipAnimation();\n return;\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n var transition = this.isMaterial && this.tooltip.isVisible ?\n this.transitionOnMaterialTooltip : this.transition;\n this.getHandle().style.transition = transition.handle;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = transition.rangeBar;\n }\n this.setHandlePosition();\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.refreshTooltipOnMove = function () {\n if (this.tooltip.isVisible) {\n this.tooltipValue();\n this.activeHandle === 1 ? this.firstTooltipObj.refresh(this.firstHandle) :\n this.secondTooltipObj.refresh(this.secondHandle);\n }\n };\n Slider.prototype.sliderDown = function (event) {\n event.preventDefault();\n this.sliderBarClick(event);\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n };\n Slider.prototype.sliderBarUp = function () {\n this.changeEvent('changed');\n this.handleFocusOut();\n this.firstHandle.classList.remove(classNames.sliderActiveHandle);\n if (this.type === 'Range') {\n this.secondHandle.classList.remove(classNames.sliderActiveHandle);\n }\n if (this.tooltip.isVisible) {\n if (this.tooltip.showOn !== 'Always') {\n this.closeTooltip();\n }\n if (!this.isMaterial) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'None' } };\n }\n }\n if (this.isMaterial) {\n this.getHandle().style.transform = this.getHandle().style.transform.replace('scale(1.5)', 'scale(1)');\n if (this.tooltip.isVisible) {\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n tooltipElement.classList.remove(classNames.materialTooltipActive);\n }\n }\n EventHandler.remove(document, 'mousemove touchmove', this.sliderBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.sliderBarUp);\n };\n Slider.prototype.sliderBarMove = function (evt) {\n if (evt.type !== 'touchmove') {\n evt.preventDefault();\n }\n var pos;\n if (evt.type === 'mousemove') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n handlepos = Math.round(handlepos);\n if (this.type !== 'Range' && this.activeHandle === 1) {\n this.handlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n }\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n if (handlepos > this.handlePos2) {\n handlepos = this.handlePos2;\n handleVal = this.handleVal2;\n }\n if (handlepos !== this.preHandlePos1) {\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.activeHandle = 1;\n }\n }\n else if (this.activeHandle === 2) {\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n if (handlepos < this.handlePos1) {\n handlepos = this.handlePos1;\n handleVal = this.handleVal1;\n }\n if (handlepos !== this.preHandlePos2) {\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n this.activeHandle = 2;\n }\n }\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n this.getHandle().style.transition = this.scaleTransform;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n this.setHandlePosition();\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (this.tooltip.isVisible) {\n if (this.isMaterial) {\n !tooltipElement.classList.contains(classNames.materialTooltipOpen) ? this.openMaterialTooltip() :\n this.refreshTooltipOnMove();\n }\n else {\n !tooltipElement ? this.openTooltip() : this.refreshTooltipOnMove();\n }\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.checkRepeatedValue = function (currentValue) {\n if (this.type === 'Range') {\n var previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?\n this.previousVal[1] : this.previousVal[0]) :\n (this.activeHandle === 1 ? this.previousVal[0] : this.previousVal[1]);\n if (currentValue === previousVal) {\n return 0;\n }\n }\n else {\n if (currentValue === this.previousVal) {\n return 0;\n }\n }\n return 1;\n };\n Slider.prototype.refreshTooltip = function () {\n if (this.tooltip.isVisible && this.firstTooltipObj) {\n this.tooltipValue();\n this.firstTooltipObj.refresh(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.refresh(this.secondHandle);\n }\n }\n };\n Slider.prototype.openTooltip = function () {\n if (this.tooltip.isVisible && this.firstTooltipObj) {\n this.tooltipValue();\n if (this.isMaterial) {\n this.openMaterialTooltip();\n }\n else {\n if (this.activeHandle === 1) {\n this.firstTooltipObj.open(this.firstHandle);\n }\n else {\n this.secondTooltipObj.open(this.secondHandle);\n }\n }\n }\n };\n Slider.prototype.keyDown = function (event) {\n switch (event.keyCode) {\n case 37:\n case 38:\n case 39:\n case 40:\n case 33:\n case 34:\n case 36:\n case 35:\n event.preventDefault();\n this.buttonClick(event);\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.closeTooltip();\n }\n break;\n }\n };\n Slider.prototype.wireButtonEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.firstBtn, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.secondBtn, 'focusout', this.sliderFocusOut, this);\n }\n else {\n EventHandler.remove(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.firstBtn, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.secondBtn, 'focusout', this.sliderFocusOut);\n }\n };\n Slider.prototype.wireEvents = function () {\n this.onresize = this.onResize.bind(this);\n window.addEventListener('resize', this.onresize);\n if (this.enabled && !this.readOnly) {\n EventHandler.add(this.element, 'mousedown touchstart', this.sliderDown, this);\n EventHandler.add(this.sliderContainer, 'keydown', this.keyDown, this);\n EventHandler.add(this.sliderContainer, 'keyup', this.keyUp, this);\n EventHandler.add(this.element, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover, this);\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n if (this.showButtons) {\n this.wireButtonEvt(false);\n }\n this.wireMaterialTooltipEvent(false);\n }\n };\n Slider.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'mousedown touchstart', this.sliderDown);\n EventHandler.remove(this.sliderContainer, 'keydown', this.keyDown);\n EventHandler.remove(this.sliderContainer, 'keyup', this.keyUp);\n EventHandler.remove(this.element, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover);\n this.wireFirstHandleEvt(true);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(true);\n }\n if (this.showButtons) {\n this.wireButtonEvt(true);\n }\n this.wireMaterialTooltipEvent(true);\n };\n Slider.prototype.keyUp = function (event) {\n if (event.keyCode === 9 && event.target.classList.contains(classNames.sliderHandle)) {\n if (!event.target.classList.contains(classNames.sliderTabHandle)) {\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n event.target.classList.add(classNames.sliderTabHandle);\n var parentElement = event.target.parentElement;\n if (parentElement === this.element) {\n parentElement.querySelector('.' + classNames.sliderTrack).classList.add(classNames.sliderTabTrack);\n if (this.type === 'Range' || this.type === 'MinRange') {\n parentElement.querySelector('.' + classNames.rangeBar).classList.add(classNames.sliderTabRange);\n }\n }\n if (this.type === 'Range') {\n (event.target.previousSibling).classList.contains(classNames.sliderHandle) ?\n this.activeHandle = 2 : this.activeHandle = 1;\n }\n this.tooltipAnimation();\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.closeTooltip();\n }\n }\n }\n this.changeEvent('changed');\n };\n Slider.prototype.hover = function (event) {\n if (!isNullOrUndefined(event)) {\n if (event.type === 'mouseover' || event.type === 'touchmove' || event.type === 'mousemove' ||\n event.type === 'pointermove' || event.type === 'touchstart') {\n this.sliderContainer.classList.add(classNames.sliderHover);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderHover);\n }\n }\n };\n Slider.prototype.sliderFocusOut = function (event) {\n var _this = this;\n if (event.relatedTarget !== this.secondHandle && event.relatedTarget !== this.firstHandle &&\n event.relatedTarget !== this.element && event.relatedTarget !== this.firstBtn && event.relatedTarget !== this.secondBtn) {\n this.hiddenInput.focus();\n this.hiddenInput.blur();\n if (this.isMaterial && this.tooltip.isVisible) {\n var transformProperties_1 = this.getTooltipTransformProperties(this.previousTooltipClass);\n var tooltipElement = this.type !== 'Range' ? [this.firstTooltipElement] :\n [this.firstTooltipElement, this.secondTooltipElement];\n var hiddenHandle_1 = this.type !== 'Range' ? [this.firstHandle] : [this.firstHandle, this.secondHandle];\n var handle_1 = this.type !== 'Range' ? [this.firstMaterialHandle] :\n [this.firstMaterialHandle, this.secondMaterialHandle];\n tooltipElement.forEach(function (tooltipElement, index) {\n if (tooltipElement) {\n tooltipElement.style.transition = _this.scaleTransform;\n tooltipElement.firstChild.classList.remove(classNames.materialTooltipShow);\n tooltipElement.firstChild.classList.add(classNames.materialTooltipHide);\n hiddenHandle_1[index].style.cursor = '-webkit-grab';\n hiddenHandle_1[index].style.cursor = 'grab';\n handle_1[index].style.transform = 'scale(1)';\n tooltipElement.classList.remove(classNames.materialTooltipOpen);\n if (tooltipElement.firstElementChild.innerText.length > 4) {\n tooltipElement.style.transform = transformProperties_1.translate + ' ' + 'scale(0.01)';\n }\n else {\n tooltipElement.style.transform = transformProperties_1.translate + ' ' +\n transformProperties_1.rotate + ' ' + 'scale(0.01)';\n }\n setTimeout(function () { tooltipElement.style.transition = 'none'; }, 2500);\n }\n });\n }\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n if (this.element.querySelector('.' + classNames.sliderTabTrack)) {\n this.element.querySelector('.' + classNames.sliderTabTrack).classList.remove(classNames.sliderTabTrack);\n if ((this.type === 'Range' || this.type === 'MinRange') &&\n this.element.querySelector('.' + classNames.sliderTabRange)) {\n this.element.querySelector('.' + classNames.sliderTabRange).classList.remove(classNames.sliderTabRange);\n }\n }\n }\n };\n Slider.prototype.closeTooltip = function () {\n if (this.tooltip.isVisible) {\n this.tooltipValue();\n if (this.activeHandle === 1) {\n this.firstTooltipObj.close();\n }\n else {\n this.secondTooltipObj.close();\n }\n }\n };\n Slider.prototype.removeElement = function (element) {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n };\n Slider.prototype.changeSliderType = function (type) {\n if (this.isMaterial && this.firstMaterialHandle) {\n this.sliderContainer.classList.remove(classNames.materialSlider);\n this.removeElement(this.firstMaterialHandle);\n this.firstTooltipElement = undefined;\n this.firstHandleTooltipPosition = undefined;\n if (this.secondMaterialHandle) {\n this.removeElement(this.secondMaterialHandle);\n this.secondTooltipElement = undefined;\n this.secondHandleTooltipPosition = undefined;\n }\n }\n if (this.tooltip.isVisible && this.isMaterial) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n }\n this.removeElement(this.firstHandle);\n if (type !== 'Default') {\n if (type === 'Range') {\n this.removeElement(this.secondHandle);\n }\n this.removeElement(this.rangeBar);\n }\n if (this.tooltip.isVisible && !isNullOrUndefined(this.firstTooltipObj)) {\n this.firstTooltipObj.destroy();\n if (type === 'Range' && !isNullOrUndefined(this.secondTooltipObj)) {\n this.secondTooltipObj.destroy();\n }\n }\n this.createRangeBar();\n this.setHandler();\n this.setOrientClass();\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n this.setValue();\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n this.wireMaterialTooltipEvent(false);\n }\n this.updateConfig();\n };\n Slider.prototype.changeRtl = function () {\n if (!this.enableRtl && this.type === 'Range') {\n this.value = [this.handleVal2, this.handleVal1];\n }\n this.updateConfig();\n if (this.tooltip.isVisible) {\n this.firstTooltipObj.refresh(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.refresh(this.secondHandle);\n }\n }\n if (this.showButtons) {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': 'Decrease', title: 'Decrease' });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': 'Increase', title: 'Increase' });\n }\n };\n Slider.prototype.changeOrientation = function () {\n this.changeSliderType(this.type);\n };\n Slider.prototype.updateConfig = function () {\n this.setEnableRTL();\n this.setValue();\n if (this.tooltip.isVisible) {\n this.refreshTooltip();\n }\n if (this.ticks.placement !== 'None') {\n if (this.ul) {\n this.removeElement(this.ul);\n this.renderScale();\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Slider.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Prepares the slider for safe removal from the DOM.\n * Detaches all event handlers, attributes, and classes to avoid memory leaks.\n * @method destroy\n * @return {void}\n */\n Slider.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n window.removeEventListener('resize', this.onresize);\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n this.firstHandle.removeAttribute('aria-orientation');\n if (this.type === 'Range') {\n this.secondHandle.removeAttribute('aria-orientation');\n }\n this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);\n detach(this.sliderContainer);\n if (this.tooltip.isVisible) {\n this.firstTooltipObj.destroy();\n if (this.type === 'Range' && !isNullOrUndefined(this.secondTooltipObj)) {\n this.secondTooltipObj.destroy();\n }\n }\n this.element.innerHTML = '';\n };\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n Slider.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'value':\n if (!isNullOrUndefined(oldProp.value) && !isNullOrUndefined(newProp.value)) {\n if (oldProp.value.toString() !== newProp.value.toString()) {\n this.setValue();\n this.refreshTooltip();\n if (this.type === 'Range') {\n if (oldProp.value[0] === newProp.value[0]) {\n this.activeHandle = 2;\n }\n else {\n this.activeHandle = 1;\n }\n }\n }\n }\n break;\n case 'min':\n case 'step':\n case 'max':\n this.setMinMaxValue();\n break;\n case 'tooltip':\n if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {\n this.setTooltip();\n }\n break;\n case 'type':\n this.changeSliderType(oldProp.type);\n this.setZindex();\n break;\n case 'enableRtl':\n if (oldProp.enableRtl !== newProp.enableRtl && this.orientation !== 'Vertical') {\n this.rtl = oldProp.enableRtl;\n this.changeRtl();\n }\n break;\n case 'orientation':\n this.changeOrientation();\n break;\n case 'ticks':\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n break;\n case 'locale':\n if (this.showButtons) {\n this.buttonTitle();\n }\n break;\n case 'showButtons':\n if (newProp.showButtons) {\n this.setButtons();\n this.onResize();\n if (this.enabled && !this.readOnly) {\n this.wireButtonEvt(false);\n }\n }\n else {\n if (this.firstBtn && this.secondBtn) {\n this.sliderContainer.removeChild(this.firstBtn);\n this.sliderContainer.removeChild(this.secondBtn);\n this.firstBtn = undefined;\n this.secondBtn = undefined;\n }\n }\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'readOnly':\n this.setReadOnly();\n break;\n }\n }\n };\n Slider.prototype.setReadOnly = function () {\n if (this.readOnly) {\n this.unwireEvents();\n this.sliderContainer.classList.add(classNames.readOnly);\n }\n else {\n this.wireEvents();\n this.sliderContainer.classList.remove(classNames.readOnly);\n }\n };\n Slider.prototype.setMinMaxValue = function () {\n var _this = this;\n this.setValue();\n this.refreshTooltip();\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n if (this.ul) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n };\n Slider.prototype.setZindex = function () {\n this.zIndex = 6;\n if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None') {\n this.ul.style.zIndex = (this.zIndex + -7) + '';\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n if (!this.isMaterial && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n if (this.type === 'Range') {\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n };\n Slider.prototype.setTooltip = function () {\n this.changeSliderType(this.type);\n };\n /**\n * Gets the component name\n * @private\n */\n Slider.prototype.getModuleName = function () {\n return 'slider';\n };\n __decorate([\n Property(null)\n ], Slider.prototype, \"value\", void 0);\n __decorate([\n Property(1)\n ], Slider.prototype, \"step\", void 0);\n __decorate([\n Property(0)\n ], Slider.prototype, \"min\", void 0);\n __decorate([\n Property(100)\n ], Slider.prototype, \"max\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"readOnly\", void 0);\n __decorate([\n Property('Default')\n ], Slider.prototype, \"type\", void 0);\n __decorate([\n Complex({}, TicksData)\n ], Slider.prototype, \"ticks\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"enableRtl\", void 0);\n __decorate([\n Complex({}, TooltipData)\n ], Slider.prototype, \"tooltip\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"showButtons\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property('Horizontal')\n ], Slider.prototype, \"orientation\", void 0);\n __decorate([\n Property('')\n ], Slider.prototype, \"cssClass\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"changed\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderingTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderedTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"tooltipChange\", void 0);\n Slider = __decorate([\n NotifyPropertyChanges\n ], Slider);\n return Slider;\n}(Component));\nexport { Slider };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, EventHandler, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, createElement, detach, Animation } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, KeyboardEvents, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';\nimport { Collection, Complex, Browser } from '@syncfusion/ej2-base';\nvar ROOT = 'e-uploader';\nvar CONTROL_WRAPPER = 'e-upload';\nvar INPUT_WRAPPER = 'e-file-select';\nvar DROP_AREA = 'e-file-drop';\nvar DROP_WRAPPER = 'e-file-select-wrap';\nvar LIST_PARENT = 'e-upload-files';\nvar FILE = 'e-upload-file-list';\nvar STATUS = 'e-file-status';\nvar ACTION_BUTTONS = 'e-upload-actions';\nvar UPLOAD_BUTTONS = 'e-file-upload-btn e-css e-btn e-primary';\nvar CLEAR_BUTTONS = 'e-file-clear-btn e-css e-btn e-flat';\nvar FILE_NAME = 'e-file-name';\nvar FILE_TYPE = 'e-file-type';\nvar FILE_SIZE = 'e-file-size';\nvar CLEAR_ICON = 'e-file-remove-btn';\nvar REMOVE_ICON = 'e-file-delete-btn';\nvar DRAG_HOVER = 'e-upload-drag-hover';\nvar PROGRESS_WRAPPER = 'e-upload-progress-wrap';\nvar PROGRESSBAR = 'e-upload-progress-bar';\nvar PROGRESSBAR_TEXT = 'e-progress-bar-text';\nvar UPLOAD_INPROGRESS = 'e-upload-progress';\nvar UPLOAD_SUCCESS = 'e-upload-success';\nvar UPLOAD_FAILED = 'e-upload-fails';\nvar TEXT_CONTAINER = 'e-file-container';\nvar VALIDATION_FAILS = 'e-validation-fails';\nvar RTL = 'e-rtl';\nvar DISABLED = 'e-disabled';\nvar RTL_CONTAINER = 'e-rtl-container';\nvar ICON_FOCUSED = 'e-clear-icon-focus';\nvar PROGRESS_INNER_WRAPPER = 'e-progress-inner-wrap';\nvar FilesProp = /** @class */ (function (_super) {\n __extends(FilesProp, _super);\n function FilesProp() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], FilesProp.prototype, \"name\", void 0);\n __decorate([\n Property(null)\n ], FilesProp.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], FilesProp.prototype, \"type\", void 0);\n return FilesProp;\n}(ChildProperty));\nexport { FilesProp };\nvar ButtonsProps = /** @class */ (function (_super) {\n __extends(ButtonsProps, _super);\n function ButtonsProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Browse')\n ], ButtonsProps.prototype, \"browse\", void 0);\n __decorate([\n Property('Upload')\n ], ButtonsProps.prototype, \"upload\", void 0);\n __decorate([\n Property('Clear')\n ], ButtonsProps.prototype, \"clear\", void 0);\n return ButtonsProps;\n}(ChildProperty));\nexport { ButtonsProps };\nvar AsyncSettings = /** @class */ (function (_super) {\n __extends(AsyncSettings, _super);\n function AsyncSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], AsyncSettings.prototype, \"saveUrl\", void 0);\n __decorate([\n Property('')\n ], AsyncSettings.prototype, \"removeUrl\", void 0);\n return AsyncSettings;\n}(ChildProperty));\nexport { AsyncSettings };\n/**\n * The uploader component allows to upload images, documents, and other files from local to server.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Uploader = /** @class */ (function (_super) {\n __extends(Uploader, _super);\n /**\n * Triggers when change the Uploader value.\n */\n function Uploader(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.initialAttr = { accept: null, multiple: false, disabled: false };\n _this.fileList = [];\n _this.filesData = [];\n _this.uploadedFilesData = [];\n _this.isForm = false;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n Uploader.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'allowedExtensions':\n this.setExtensions(this.allowedExtensions);\n this.clearAll();\n break;\n case 'enabled':\n this.setControlStatus();\n break;\n case 'multiple':\n this.setMultipleSelection();\n break;\n case 'enableRtl':\n this.setRTL();\n this.reRenderFileList();\n break;\n case 'buttons':\n this.buttons.browse = isNullOrUndefined(this.buttons.browse) ? '' : this.buttons.browse;\n this.buttons.clear = isNullOrUndefined(this.buttons.clear) ? '' : this.buttons.clear;\n this.buttons.upload = isNullOrUndefined(this.buttons.upload) ? '' : this.buttons.upload;\n this.renderButtonTemplates();\n break;\n case 'dropArea':\n this.unBindDropEvents();\n this.setDropArea();\n break;\n case 'showFileList':\n if (this.listParent) {\n this.listParent.style.display = this.showFileList ? 'block' : 'none';\n this.actionButtons.style.display = this.showFileList ? 'block' : 'none';\n }\n break;\n case 'files':\n this.renderPreLoadFiles();\n break;\n case 'minFileSize':\n case 'maxFileSize':\n case 'template':\n case 'autoUpload':\n this.clearAll();\n break;\n case 'locale':\n this.l10n.setLocale(this.locale);\n this.setLocalizedTexts();\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n break;\n }\n }\n };\n Uploader.prototype.setLocalizedTexts = function () {\n if (isNullOrUndefined(this.template)) {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n this.uploadWrapper.querySelector('.' + DROP_AREA).innerHTML = this.localizedTexts('dropFilesHint');\n }\n this.updateFileList();\n }\n };\n Uploader.prototype.getKeyValue = function (val) {\n var keyValue;\n for (var _i = 0, _a = Object.keys(this.preLocaleObj); _i < _a.length; _i++) {\n var key = _a[_i];\n if (this.preLocaleObj[key] === val) {\n keyValue = key;\n }\n }\n return keyValue;\n };\n Uploader.prototype.updateFileList = function () {\n var element;\n if (this.fileList.length > 0 && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + LIST_PARENT))) {\n for (var i = 0; i < this.fileList.length; i++) {\n element = this.fileList[i].querySelector('.e-file-status');\n element.innerHTML = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n this.filesData[i].status = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n if (this.fileList[i].classList.contains(UPLOAD_SUCCESS)) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('remove'));\n }\n else {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('delete'));\n }\n if (!this.autoUpload) {\n this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.clearButton.innerText = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n }\n }\n }\n };\n Uploader.prototype.reRenderFileList = function () {\n if (this.listParent) {\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.removeActionButtons();\n this.createFileList(this.filesData);\n this.renderActionButtons();\n }\n };\n Uploader.prototype.preRender = function () {\n this.cloneElement = this.element.cloneNode(true);\n this.localeText = { Browse: 'Browse', Clear: 'Clear', Upload: 'Upload',\n dropFilesHint: 'or Drop files here', invalidMaxFileSize: 'File size is too large',\n invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',\n uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',\n removedSuccessMessage: 'File removed successfully', removedFailedMessage: 'File failed to remove', inProgress: 'Uploading',\n readyToUploadMessage: 'Ready to upload', remove: 'Remove', cancel: 'Cancel', delete: 'Delete file'\n };\n this.l10n = new L10n('uploader', this.localeText, this.locale);\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n this.checkHTMLAttributes();\n if (this.asyncSettings.saveUrl === '' && this.asyncSettings.removeUrl === '' && !this.autoUpload) {\n if (!isNullOrUndefined(this.element.closest('form'))) {\n this.isForm = true;\n this.element.closest('form').setAttribute('enctype', 'multipart/form-data');\n this.element.closest('form').setAttribute('encoding', 'multipart/form-data');\n }\n }\n var ejInstance = getValue('ej2_instances', this.element);\n if (this.element.tagName === 'EJS-UPLOADER' || this.element.tagName === 'UPLOADERCOMPONENT') {\n var inputElement = createElement('input', { attrs: { type: 'file' } });\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n }\n if (!inputElement.hasAttribute('name')) {\n inputElement.setAttribute('name', 'UploadFiles');\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n if (isNullOrUndefined(this.element.getAttribute('name'))) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (!this.element.hasAttribute('type')) {\n this.element.setAttribute('type', 'file');\n }\n this.keyConfigs = {\n previous: 'shift+tab',\n enter: 'enter',\n next: 'tab'\n };\n };\n Uploader.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Return the module name of the component.\n */\n Uploader.prototype.getModuleName = function () {\n return 'uploader';\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Uploader.prototype.render = function () {\n this.renderBrowseButton();\n this.initializeUpload();\n this.wireEvents();\n this.setMultipleSelection();\n this.setExtensions(this.allowedExtensions);\n this.setRTL();\n this.renderPreLoadFiles();\n this.setControlStatus();\n };\n Uploader.prototype.renderBrowseButton = function () {\n this.browseButton = createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n }\n else {\n this.browseButton.appendChild(this.buttons.browse);\n }\n this.element.setAttribute('aria-label', 'Uploader');\n };\n Uploader.prototype.renderActionButtons = function () {\n this.element.setAttribute('tabindex', '-1');\n this.actionButtons = createElement('div', { className: ACTION_BUTTONS });\n this.uploadButton = createElement('button', { className: UPLOAD_BUTTONS, attrs: { 'type': 'button', 'tabindex': '-1' } });\n this.clearButton = createElement('button', { className: CLEAR_BUTTONS, attrs: { 'type': 'button', 'tabindex': '-1' } });\n this.actionButtons.appendChild(this.clearButton);\n this.actionButtons.appendChild(this.uploadButton);\n this.renderButtonTemplates();\n this.uploadWrapper.appendChild(this.actionButtons);\n this.browseButton.blur();\n this.uploadButton.focus();\n this.wireActionButtonEvents();\n };\n Uploader.prototype.wireActionButtonEvents = function () {\n EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);\n EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);\n };\n Uploader.prototype.unwireActionButtonEvents = function () {\n EventHandler.remove(this.uploadButton, 'click', this.uploadButtonClick);\n EventHandler.remove(this.clearButton, 'click', this.clearButtonClick);\n };\n Uploader.prototype.removeActionButtons = function () {\n if (this.actionButtons) {\n this.unwireActionButtonEvents();\n detach(this.actionButtons);\n this.actionButtons = null;\n }\n };\n Uploader.prototype.renderButtonTemplates = function () {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n }\n else {\n this.browseButton.appendChild(this.buttons.browse);\n }\n if (this.uploadButton) {\n var uploadText = void 0;\n uploadText = isNullOrUndefined(this.buttons.upload) ? 'Upload' : this.buttons.upload;\n this.buttons.upload = uploadText;\n if (typeof (this.buttons.upload) === 'string') {\n this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.uploadButton.innerText);\n }\n else {\n this.uploadButton.appendChild(this.buttons.upload);\n }\n }\n if (this.clearButton) {\n var clearText = void 0;\n clearText = isNullOrUndefined(this.buttons.clear) ? 'Clear' : this.buttons.clear;\n this.buttons.clear = clearText;\n if (typeof (this.buttons.clear) === 'string') {\n this.clearButton.innerText = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.clearButton.innerText);\n }\n else {\n this.clearButton.appendChild(this.buttons.clear);\n }\n }\n };\n Uploader.prototype.initializeUpload = function () {\n this.element.setAttribute('tabindex', '-1');\n var inputWrapper = createElement('span', { className: INPUT_WRAPPER });\n this.element.parentElement.insertBefore(inputWrapper, this.element);\n this.dropAreaWrapper = createElement('div', { className: DROP_WRAPPER });\n this.element.parentElement.insertBefore(this.dropAreaWrapper, this.element);\n inputWrapper.appendChild(this.element);\n this.dropAreaWrapper.appendChild(this.browseButton);\n this.dropAreaWrapper.appendChild(inputWrapper);\n var fileDropArea = createElement('span', { className: DROP_AREA });\n fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');\n this.dropAreaWrapper.appendChild(fileDropArea);\n this.uploadWrapper = createElement('div', { className: CONTROL_WRAPPER, attrs: { 'aria-activedescendant': 'li-focused' } });\n this.dropAreaWrapper.parentElement.insertBefore(this.uploadWrapper, this.dropAreaWrapper);\n this.uploadWrapper.appendChild(this.dropAreaWrapper);\n this.setDropArea();\n };\n Uploader.prototype.renderPreLoadFiles = function () {\n if (isNullOrUndefined(this.files[0].size) || !isNullOrUndefined(this.template)) {\n return;\n }\n var files = [].slice.call(this.files);\n var filesData = [];\n if (!this.multiple) {\n this.clearData();\n files = [files[0]];\n }\n for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {\n var data = files_1[_i];\n var fileData = {\n name: this.getFileNameOnly(data.name) + '.' + data.type.split('.')[data.type.split('.').length - 1],\n rawFile: '',\n size: data.size,\n status: this.localizedTexts('uploadSuccessMessage'),\n type: data.type,\n validationMessages: { minSize: '', maxSize: '' },\n statusCode: '2'\n };\n filesData.push(fileData);\n this.filesData.push(fileData);\n }\n this.createFileList(filesData);\n if (!this.autoUpload && this.listParent && !this.actionButtons && !this.isForm) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n };\n Uploader.prototype.checkActionButtonStatus = function () {\n if (this.actionButtons) {\n var length_1 = this.uploadWrapper.querySelectorAll('.' + VALIDATION_FAILS).length +\n this.uploadWrapper.querySelectorAll('.e-upload-fails:not(.e-upload-progress)').length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_SUCCESS).length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_INPROGRESS).length;\n if (length_1 > 0 && length_1 === this.uploadWrapper.querySelectorAll('li').length) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n else {\n this.uploadButton.removeAttribute('disabled');\n }\n }\n };\n Uploader.prototype.setDropArea = function () {\n var dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');\n if (this.dropArea) {\n this.dropZoneElement = (typeof (this.dropArea) !== 'string') ? this.dropArea :\n document.querySelector(this.dropArea);\n var element = this.element;\n var enableDropText = false;\n while (element.parentNode) {\n element = element.parentNode;\n if (element === this.dropZoneElement) {\n enableDropText = true;\n }\n }\n if (!enableDropText) {\n dropTextArea.textContent = '';\n }\n }\n else {\n this.dropZoneElement = this.uploadWrapper;\n dropTextArea.textContent = this.localizedTexts('dropFilesHint');\n }\n this.bindDropEvents();\n };\n Uploader.prototype.setMultipleSelection = function () {\n if (this.multiple && !this.element.hasAttribute('multiple')) {\n var newAttr = document.createAttribute('multiple');\n this.element.setAttributeNode(newAttr);\n }\n else if (!this.multiple) {\n this.element.removeAttribute('multiple');\n }\n };\n Uploader.prototype.checkAutoUpload = function (fileData) {\n if (this.autoUpload) {\n this.upload(fileData);\n this.removeActionButtons();\n }\n else if (!this.actionButtons) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n };\n Uploader.prototype.wireEvents = function () {\n EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);\n EventHandler.add(this.element, 'change', this.onSelectFiles, this);\n EventHandler.add(document, 'click', this.removeFocus, this);\n this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown',\n });\n if (this.isForm) {\n EventHandler.add(this.element.closest('form'), 'reset', this.resetForm, this);\n }\n };\n Uploader.prototype.unWireEvents = function () {\n EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);\n EventHandler.remove(this.element, 'change', this.onSelectFiles);\n EventHandler.remove(document, 'click', this.removeFocus);\n this.keyboardModule.destroy();\n };\n Uploader.prototype.resetForm = function () {\n this.clearAll();\n this.element.value = '';\n };\n Uploader.prototype.keyActionHandler = function (e) {\n switch (e.action) {\n case 'next':\n if (e.target === this.browseButton && isNullOrUndefined(this.listParent)) {\n this.browseButton.blur();\n }\n else if (e.target === this.uploadButton) {\n this.uploadButton.blur();\n }\n else {\n this.setTabFocus(e);\n e.preventDefault();\n e.stopPropagation();\n if (e.target === this.clearButton && this.uploadButton.hasAttribute('disabled')) {\n this.clearButton.blur();\n }\n }\n break;\n case 'previous':\n if (e.target === this.browseButton) {\n this.browseButton.blur();\n }\n else {\n this.setReverseFocus(e);\n e.preventDefault();\n e.stopPropagation();\n }\n break;\n case 'enter':\n if (e.target === this.clearButton) {\n this.clearButtonClick();\n }\n else if (e.target === this.uploadButton) {\n this.uploadButtonClick();\n }\n else if (e.target === this.browseButton) {\n this.browseButtonClick();\n }\n else {\n this.removeFiles(e);\n this.browseButton.focus();\n }\n e.preventDefault();\n e.stopPropagation();\n break;\n }\n };\n Uploader.prototype.setReverseFocus = function (e) {\n var target = e.target;\n if (target === this.uploadButton) {\n this.uploadButton.blur();\n this.clearButton.focus();\n }\n else if (target === this.clearButton && this.listParent && this.listParent.querySelector('.e-icons')) {\n this.clearButton.blur();\n var items = [].slice.call(this.listParent.querySelectorAll('span.e-icons'));\n items[items.length - 1].classList.add(ICON_FOCUSED);\n items[items.length - 1].focus();\n }\n else {\n var iconElements = [].slice.call(this.listParent.querySelectorAll('span.e-icons'));\n var index = iconElements.indexOf(target);\n if (index > 0) {\n this.removeFocus();\n iconElements[index - 1].classList.add(ICON_FOCUSED);\n iconElements[index - 1].focus();\n }\n else {\n this.removeFocus();\n this.browseButton.focus();\n }\n }\n };\n Uploader.prototype.setTabFocus = function (e) {\n var target = e.target;\n if (target === this.clearButton) {\n this.removeFocus();\n if (this.uploadButton.hasAttribute('disabled')) {\n return;\n }\n this.uploadButton.focus();\n }\n else if (target.classList.contains('e-icons')) {\n var iconElements = [].slice.call(this.listParent.querySelectorAll('span.e-icons'));\n var index = iconElements.indexOf(target);\n if (index < (iconElements.length - 1)) {\n this.removeFocus();\n iconElements[index + 1].classList.add(ICON_FOCUSED);\n iconElements[index + 1].focus();\n }\n else {\n this.removeFocus();\n this.clearButton.focus();\n }\n }\n else {\n this.browseButton.blur();\n var iconElement = this.listParent.querySelector('span.e-icons');\n iconElement.focus();\n iconElement.classList.add(ICON_FOCUSED);\n }\n };\n Uploader.prototype.removeFocus = function () {\n if (this.uploadWrapper && this.listParent && this.listParent.querySelector('.' + ICON_FOCUSED)) {\n document.activeElement.blur();\n this.listParent.querySelector('.' + ICON_FOCUSED).classList.remove(ICON_FOCUSED);\n }\n };\n Uploader.prototype.browseButtonClick = function () {\n this.element.click();\n };\n Uploader.prototype.uploadButtonClick = function () {\n this.upload(this.filesData);\n };\n Uploader.prototype.clearButtonClick = function () {\n this.clearAll();\n };\n Uploader.prototype.bindDropEvents = function () {\n if (this.dropZoneElement) {\n EventHandler.add(this.dropZoneElement, 'drop', this.dropElement, this);\n EventHandler.add(this.dropZoneElement, 'dragover', this.dragHover, this);\n EventHandler.add(this.dropZoneElement, 'dragleave', this.onDragLeave, this);\n }\n };\n Uploader.prototype.unBindDropEvents = function () {\n if (this.dropZoneElement) {\n EventHandler.remove(this.dropZoneElement, 'drop', this.dropElement);\n EventHandler.remove(this.dropZoneElement, 'dragover', this.dragHover);\n EventHandler.remove(this.dropZoneElement, 'dragleave', this.onDragLeave);\n }\n };\n Uploader.prototype.onDragLeave = function (e) {\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n };\n Uploader.prototype.dragHover = function (e) {\n if (!this.enabled) {\n return;\n }\n this.dropZoneElement.classList.add(DRAG_HOVER);\n e.preventDefault();\n e.stopPropagation();\n };\n Uploader.prototype.dropElement = function (e) {\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n this.onSelectFiles(e);\n e.preventDefault();\n e.stopPropagation();\n };\n Uploader.prototype.removeFiles = function (args) {\n if (!this.enabled) {\n return;\n }\n var selectedElement = args.target.parentElement;\n var index = this.fileList.indexOf(selectedElement);\n var fileData = this.filesData[index];\n this.remove(fileData);\n this.element.value = '';\n this.checkActionButtonStatus();\n };\n Uploader.prototype.removeFilesData = function (file, customTemplate) {\n if (customTemplate) {\n return;\n }\n var selectedElement = this.getLiElement(file);\n if (isNullOrUndefined(selectedElement)) {\n return;\n }\n detach(selectedElement);\n var index = this.fileList.indexOf(selectedElement);\n this.fileList.splice(index, 1);\n this.filesData.splice(index, 1);\n if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n this.removeActionButtons();\n }\n };\n Uploader.prototype.removeUploadedFile = function (file, eventArgs, custom) {\n var _this = this;\n var selectedFiles = file;\n var ajax = new XMLHttpRequest();\n ajax.addEventListener('load', function (e) { _this.removeCompleted(e, selectedFiles, custom); }, false);\n /* istanbul ignore next */\n ajax.addEventListener('error', function (e) { _this.removeFailed(e, selectedFiles, custom); }, false);\n ajax.open('POST', this.asyncSettings.removeUrl);\n eventArgs.currentRequest = ajax;\n this.trigger('removing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var name = this.element.getAttribute('name');\n var formData = new FormData();\n formData.append(name, selectedFiles.rawFile);\n this.updateFormData(formData, eventArgs.customFormData);\n ajax.send(formData);\n };\n Uploader.prototype.removeCompleted = function (e, files, customTemplate) {\n var args = {\n e: e, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedSuccessMessage'), '2')\n };\n this.trigger('success', args);\n this.removeFilesData(files, customTemplate);\n var index = this.uploadedFilesData.indexOf(files);\n this.uploadedFilesData.splice(index, 1);\n this.trigger('change', { files: this.uploadedFilesData });\n };\n Uploader.prototype.removeFailed = function (e, files, customTemplate) {\n var args = {\n e: e, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedFailedMessage'), '0')\n };\n if (!customTemplate) {\n var index = this.filesData.indexOf(files);\n var rootElement = this.fileList[index];\n if (rootElement) {\n var statusElement = rootElement.querySelector('.' + STATUS);\n rootElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.remove(UPLOAD_SUCCESS);\n rootElement.classList.add(UPLOAD_FAILED);\n statusElement.classList.add(UPLOAD_FAILED);\n }\n this.checkActionButtonStatus();\n }\n this.trigger('failure', args);\n };\n Uploader.prototype.onSelectFiles = function (args) {\n if (!this.enabled) {\n return;\n }\n var fileData = [];\n var targetFiles;\n if (args.type === 'drop') {\n var files = args.dataTransfer.files;\n targetFiles = this.multiple ? this.sortFileList(files) : [files[0]];\n }\n else {\n targetFiles = [].slice.call(args.target.files);\n }\n if (!this.multiple) {\n this.clearData();\n targetFiles = [targetFiles[0]];\n }\n for (var i = 0; i < targetFiles.length; i++) {\n var file = targetFiles[i];\n var eventArgs_1 = {\n name: file.name,\n rawFile: file,\n size: file.size,\n status: this.localizedTexts('readyToUploadMessage'),\n type: this.getFileType(file.name),\n validationMessages: this.validatedFileSize(file.size),\n statusCode: '1'\n };\n eventArgs_1.status = eventArgs_1.validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n eventArgs_1.validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : eventArgs_1.status;\n if (eventArgs_1.validationMessages.minSize !== '' || eventArgs_1.validationMessages.maxSize !== '') {\n eventArgs_1.statusCode = '0';\n }\n fileData.push(eventArgs_1);\n }\n var eventArgs = {\n cancel: false,\n filesData: fileData,\n isModified: false,\n modifiedFilesData: [],\n progressInterval: ''\n };\n if (args.type === 'drop') {\n fileData = this.checkExtension(fileData);\n }\n this.trigger('selected', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n if (eventArgs.isModified && eventArgs.modifiedFilesData.length > 0) {\n var dataFiles = this.checkExtension(eventArgs.modifiedFilesData);\n this.updateSortedFileList(dataFiles);\n if (!this.isForm) {\n this.checkAutoUpload(dataFiles);\n }\n this.filesData = dataFiles;\n }\n else {\n this.createFileList(fileData);\n this.filesData = this.filesData.concat(fileData);\n if (!this.isForm) {\n this.checkAutoUpload(fileData);\n }\n }\n if (!isNullOrUndefined(eventArgs.progressInterval) && eventArgs.progressInterval !== '') {\n this.progressInterval = eventArgs.progressInterval;\n }\n };\n Uploader.prototype.clearData = function () {\n if (!isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n }\n if (Browser.info.name !== 'msie') {\n this.element.value = '';\n }\n this.fileList = [];\n this.filesData = [];\n this.removeActionButtons();\n };\n Uploader.prototype.updateSortedFileList = function (filesData) {\n var previousListClone = createElement('div', { id: 'clonewrapper' });\n var added = -1;\n var removedList;\n if (this.listParent) {\n for (var i = 0; i < this.listParent.querySelectorAll('li').length; i++) {\n var liElement = this.listParent.querySelectorAll('li')[i];\n previousListClone.appendChild(liElement.cloneNode(true));\n }\n removedList = this.listParent.querySelectorAll('li');\n for (var _i = 0, removedList_1 = removedList; _i < removedList_1.length; _i++) {\n var item = removedList_1[_i];\n detach(item);\n }\n this.removeActionButtons();\n var oldList = [].slice.call(previousListClone.childNodes);\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.createParentUL();\n for (var index = 0; index < filesData.length; index++) {\n for (var j = 0; j < this.filesData.length; j++) {\n if (this.filesData[j].name === filesData[index].name) {\n this.listParent.appendChild(oldList[j]);\n EventHandler.add(oldList[j].querySelector('.e-icons'), 'click', this.removeFiles, this);\n this.fileList.push(oldList[j]);\n added = index;\n }\n }\n if (added !== index) {\n this.createFileList([filesData[index]]);\n }\n }\n }\n else {\n this.createFileList(filesData);\n }\n };\n Uploader.prototype.checkExtension = function (files) {\n var dropFiles = files;\n if (this.allowedExtensions !== '') {\n var allowedExtensions = [];\n var extensions = this.allowedExtensions.split(',');\n for (var _i = 0, extensions_1 = extensions; _i < extensions_1.length; _i++) {\n var extension = extensions_1[_i];\n allowedExtensions.push(extension.trim().toLocaleLowerCase());\n }\n for (var i = 0; i < files.length; i++) {\n if (allowedExtensions.indexOf(('.' + files[i].type).toLocaleLowerCase()) === -1) {\n files[i].status = this.localizedTexts('invalidFileType');\n files[i].statusCode = '0';\n }\n }\n }\n return dropFiles;\n };\n Uploader.prototype.validatedFileSize = function (fileSize) {\n var minSizeError = '';\n var maxSizeError = '';\n if (fileSize < this.minFileSize) {\n minSizeError = this.localizedTexts('invalidMinFileSize');\n }\n else if (fileSize > this.maxFileSize) {\n maxSizeError = this.localizedTexts('invalidMaxFileSize');\n }\n else {\n minSizeError = '';\n maxSizeError = '';\n }\n var errorMessage = { minSize: minSizeError, maxSize: maxSizeError };\n return errorMessage;\n };\n Uploader.prototype.createCustomfileList = function (fileData) {\n this.createParentUL();\n for (var _i = 0, fileData_1 = fileData; _i < fileData_1.length; _i++) {\n var listItem = fileData_1[_i];\n var liElement = createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });\n this.uploadTemplateFn = this.templateComplier(this.template);\n var length_2 = this.uploadTemplateFn(listItem).length;\n for (var i = 0; i < length_2; i++) {\n liElement.appendChild(this.uploadTemplateFn(listItem)[i]);\n }\n this.listParent.appendChild(liElement);\n this.fileList.push(liElement);\n }\n };\n Uploader.prototype.createParentUL = function () {\n if (isNullOrUndefined(this.listParent)) {\n this.listParent = createElement('ul', { className: LIST_PARENT });\n this.uploadWrapper.appendChild(this.listParent);\n this.listParent.style.display = this.showFileList ? 'block' : 'none';\n }\n };\n Uploader.prototype.createFileList = function (fileData) {\n this.createParentUL();\n if (this.template !== '' && !isNullOrUndefined(this.template)) {\n this.createCustomfileList(fileData);\n }\n else {\n for (var _i = 0, fileData_2 = fileData; _i < fileData_2.length; _i++) {\n var listItem = fileData_2[_i];\n var liElement = createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });\n var textContainer = createElement('span', { className: TEXT_CONTAINER });\n var textElement = createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });\n textElement.innerHTML = this.getFileNameOnly(listItem.name);\n var fileExtension = createElement('span', { className: FILE_TYPE });\n fileExtension.innerHTML = '.' + this.getFileType(listItem.name);\n if (!this.enableRtl) {\n textContainer.appendChild(textElement);\n textContainer.appendChild(fileExtension);\n }\n else {\n var rtlContainer = createElement('span', { className: RTL_CONTAINER });\n rtlContainer.appendChild(fileExtension);\n rtlContainer.appendChild(textElement);\n textContainer.appendChild(rtlContainer);\n }\n var fileSize = createElement('span', { className: FILE_SIZE });\n fileSize.innerHTML = this.bytesToSize(listItem.size);\n textContainer.appendChild(fileSize);\n var statusElement = createElement('span', { className: STATUS });\n textContainer.appendChild(statusElement);\n statusElement.innerHTML = listItem.status;\n liElement.appendChild(textContainer);\n var iconElement = createElement('span', { className: ' e-icons', attrs: { 'tabindex': '-1' } });\n if (Browser.info.name === 'msie') {\n iconElement.classList.add('e-msie');\n }\n if (listItem.statusCode !== '2') {\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n }\n else {\n iconElement.setAttribute('title', this.localizedTexts('delete'));\n }\n liElement.appendChild(iconElement);\n EventHandler.add(iconElement, 'click', this.removeFiles, this);\n if (listItem.statusCode === '2') {\n statusElement.classList.add(UPLOAD_SUCCESS);\n iconElement.classList.add(REMOVE_ICON);\n }\n else if (listItem.statusCode !== '1') {\n statusElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.add(VALIDATION_FAILS);\n }\n if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {\n statusElement.innerHTML = '';\n }\n if (!iconElement.classList.contains(REMOVE_ICON)) {\n iconElement.classList.add(CLEAR_ICON);\n }\n this.listParent.appendChild(liElement);\n this.fileList.push(liElement);\n this.truncateName(textElement);\n }\n }\n };\n Uploader.prototype.truncateName = function (name) {\n var nameElement = name;\n var text;\n if (nameElement.offsetWidth < nameElement.scrollWidth) {\n text = nameElement.textContent;\n nameElement.dataset.tail = text.slice(text.length - 10);\n }\n };\n Uploader.prototype.getFileType = function (name) {\n var extension;\n var index = name.lastIndexOf('.');\n if (index >= 0) {\n extension = name.substring(index + 1);\n }\n return extension ? extension : '';\n };\n Uploader.prototype.getFileNameOnly = function (name) {\n var type = this.getFileType(name);\n var names = name.split('.' + type);\n return type = names[0];\n };\n Uploader.prototype.setInitialAttributes = function () {\n if (this.initialAttr.accept) {\n this.element.setAttribute('accept', this.initialAttr.accept);\n }\n if (this.initialAttr.disabled) {\n this.element.setAttribute('disabled', 'disabled');\n }\n if (this.initialAttr.multiple) {\n var newAttr = document.createAttribute('multiple');\n this.element.setAttributeNode(newAttr);\n }\n };\n Uploader.prototype.filterfileList = function (files) {\n var filterFiles = [];\n var li;\n for (var i = 0; i < files.length; i++) {\n li = this.getLiElement(files[i]);\n if (!li.classList.contains(UPLOAD_SUCCESS)) {\n filterFiles.push(files[i]);\n }\n }\n return filterFiles;\n };\n Uploader.prototype.updateStatus = function (files, status, statusCode) {\n if (!(status === '' || isNullOrUndefined(status)) && !(statusCode === '' || isNullOrUndefined(statusCode))) {\n files.status = status;\n files.statusCode = statusCode;\n }\n var li = this.getLiElement(files);\n if (!isNullOrUndefined(li)) {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS)) && !((status === '' || isNullOrUndefined(status)))) {\n li.querySelector('.' + STATUS).textContent = status;\n }\n }\n return files;\n };\n Uploader.prototype.getLiElement = function (files) {\n var liElements = [];\n var li;\n if (this.uploadWrapper) {\n liElements = this.uploadWrapper.querySelectorAll('.' + LIST_PARENT + '> li');\n for (var i = 0; i < liElements.length; i++) {\n if (liElements[i].getAttribute('data-file-name') === files.name) {\n li = liElements[i];\n }\n }\n }\n return li;\n };\n Uploader.prototype.createProgressBar = function (liElement) {\n var progressbarWrapper = createElement('span', { className: PROGRESS_WRAPPER });\n var progressBar = createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });\n var progressbarInnerWrapper = createElement('span', { className: PROGRESS_INNER_WRAPPER });\n progressBar.setAttribute('style', 'width: 0%');\n var progressbarText = createElement('span', { className: PROGRESSBAR_TEXT });\n progressbarText.textContent = '0%';\n progressbarInnerWrapper.appendChild(progressBar);\n progressbarWrapper.appendChild(progressbarInnerWrapper);\n progressbarWrapper.appendChild(progressbarText);\n liElement.querySelector('.' + TEXT_CONTAINER).appendChild(progressbarWrapper);\n };\n Uploader.prototype.updateProgressbar = function (e, li) {\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && !isNullOrUndefined(li.querySelector('.' + PROGRESSBAR))) {\n if (!isNullOrUndefined(this.progressInterval) && this.progressInterval !== '') {\n var value = (Math.round((e.loaded / e.total) * 100)) % parseInt(this.progressInterval, 10);\n if (value === 0 || value === 100) {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n else {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n };\n Uploader.prototype.changeProgressValue = function (li, progressValue) {\n li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);\n li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;\n };\n Uploader.prototype.uploadInProgress = function (e, files, customUI) {\n var li = this.getLiElement(files);\n if (isNullOrUndefined(li) && (!customUI || isNullOrUndefined(customUI))) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n if (!(li.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0) && li.querySelector('.' + STATUS)) {\n li.querySelector('.' + STATUS).classList.add(UPLOAD_INPROGRESS);\n this.createProgressBar(li);\n this.updateProgressBarClasses(li, UPLOAD_INPROGRESS);\n }\n this.updateProgressbar(e, li);\n if (!isNullOrUndefined(li.querySelector('.e-icons'))) {\n li.querySelector('.e-icons').removeAttribute('title');\n li.querySelector('.e-icons').classList.add(UPLOAD_INPROGRESS);\n }\n }\n var args = { e: e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('inProgress'), '3') };\n this.trigger('progress', args);\n };\n /* istanbul ignore next */\n Uploader.prototype.uploadComplete = function (e, files, customUI) {\n var status = e.target;\n if (status.readyState === 4 && status.status === 200) {\n var li = this.getLiElement(files);\n if (isNullOrUndefined(li) && (!customUI || isNullOrUndefined(customUI))) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n this.updateProgressBarClasses(li, UPLOAD_SUCCESS);\n this.removeProgressbar(li, 'success');\n if (!isNullOrUndefined(li.querySelector('.' + CLEAR_ICON))) {\n li.querySelector('.' + CLEAR_ICON).classList.add(REMOVE_ICON);\n li.querySelector('.' + CLEAR_ICON).setAttribute('title', this.localizedTexts('delete'));\n li.querySelector('.' + CLEAR_ICON).classList.remove(CLEAR_ICON);\n }\n if (!isNullOrUndefined(li.querySelector('.e-icons'))) {\n li.querySelector('.e-icons').classList.remove(UPLOAD_INPROGRESS);\n li.querySelector('.e-icons').setAttribute('title', this.localizedTexts('delete'));\n }\n }\n var args = { e: e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('uploadSuccessMessage'), '2') };\n this.trigger('success', args);\n this.uploadedFilesData.push(files);\n this.trigger('change', { files: this.uploadedFilesData });\n this.checkActionButtonStatus();\n }\n else {\n this.uploadFailed(e, files);\n }\n };\n Uploader.prototype.uploadFailed = function (e, files) {\n var li = this.getLiElement(files);\n var args = { e: e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('uploadFailedMessage'), '0') };\n if (!isNullOrUndefined(li)) {\n this.updateProgressBarClasses(li, UPLOAD_FAILED);\n this.removeProgressbar(li, 'failure');\n li.querySelector('.' + CLEAR_ICON).setAttribute('title', this.localizedTexts('remove'));\n li.querySelector('.e-icons').classList.remove(UPLOAD_INPROGRESS);\n }\n this.trigger('failure', args);\n this.checkActionButtonStatus();\n };\n Uploader.prototype.updateProgressBarClasses = function (li, className) {\n var progressBar = li.querySelector('.' + PROGRESSBAR);\n if (!isNullOrUndefined(progressBar)) {\n progressBar.classList.add(className);\n }\n };\n Uploader.prototype.removeProgressbar = function (li, callType) {\n var _this = this;\n if (!isNullOrUndefined(li.querySelector('.' + PROGRESS_WRAPPER))) {\n this.progressAnimation = new Animation({ duration: 1250 });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESS_WRAPPER), { name: 'FadeOut' });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESSBAR_TEXT), { name: 'FadeOut' });\n setTimeout(function () { _this.animateProgressBar(li, callType); }, 750);\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.animateProgressBar = function (li, callType) {\n if (callType === 'success') {\n li.classList.add(UPLOAD_SUCCESS);\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_SUCCESS);\n }\n }\n else {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n }\n }\n detach(li.querySelector('.' + PROGRESS_WRAPPER));\n };\n Uploader.prototype.setExtensions = function (extensions) {\n this.element.setAttribute('accept', extensions);\n };\n Uploader.prototype.templateComplier = function (uploadTemplate) {\n if (uploadTemplate) {\n var exception = void 0;\n try {\n if (document.querySelectorAll(uploadTemplate).length) {\n return compile(document.querySelector(uploadTemplate).innerHTML.trim());\n }\n }\n catch (exception) {\n return compile(uploadTemplate);\n }\n }\n return undefined;\n };\n Uploader.prototype.setRTL = function () {\n this.enableRtl ? addClass([this.uploadWrapper], RTL) : removeClass([this.uploadWrapper], RTL);\n };\n Uploader.prototype.localizedTexts = function (localeText) {\n this.l10n.setLocale(this.locale);\n return this.l10n.getConstant(localeText);\n };\n Uploader.prototype.setControlStatus = function () {\n if (!this.enabled) {\n this.uploadWrapper.classList.add(DISABLED);\n this.element.setAttribute('disabled', 'disabled');\n this.browseButton.setAttribute('disabled', 'disabled');\n if (!isNullOrUndefined(this.clearButton)) {\n this.clearButton.setAttribute('disabled', 'disabled');\n }\n if (!isNullOrUndefined(this.uploadButton)) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n }\n else {\n if (this.uploadWrapper.classList.contains(DISABLED)) {\n this.uploadWrapper.classList.remove(DISABLED);\n }\n if (!isNullOrUndefined(this.browseButton) && this.element.hasAttribute('disabled')) {\n this.element.removeAttribute('disabled');\n this.browseButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.clearButton) && this.clearButton.hasAttribute('disabled')) {\n this.clearButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.uploadButton) && this.uploadButton.hasAttribute('disabled')) {\n this.uploadButton.hasAttribute('disabled');\n }\n }\n };\n Uploader.prototype.checkHTMLAttributes = function () {\n if (this.element.hasAttribute('accept')) {\n this.allowedExtensions = this.element.getAttribute('accept');\n this.initialAttr.accept = this.allowedExtensions;\n }\n if (this.element.hasAttribute('multiple')) {\n this.multiple = true;\n this.initialAttr.multiple = true;\n }\n if (this.element.hasAttribute('disabled')) {\n this.enabled = false;\n this.initialAttr.disabled = true;\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.updateFormData = function (formData, customData) {\n if (customData.length > 0 && customData[0]) {\n for (var i = 0; i < customData.length; i++) {\n var data = customData[i];\n // tslint:disable-next-line\n formData.append(Object.keys(data)[i], Object.values(data)[i]);\n }\n }\n };\n /**\n * It is used to convert bytes value into kilobytes or megabytes depending on the size based\n * on [binary prefix](https://en.wikipedia.org/wiki/Binary_prefix).\n * @param { number } bytes - specifies the file size in bytes.\n * @returns string\n */\n Uploader.prototype.bytesToSize = function (bytes) {\n var i = -1;\n var size;\n if (!bytes) {\n return '0.0 KB';\n }\n do {\n bytes = bytes / 1000;\n i++;\n } while (bytes > 99);\n if (i >= 2) {\n bytes = bytes * 1000;\n i = 1;\n }\n return Math.max(bytes, 0).toFixed(1) + ' ' + ['KB', 'MB'][i];\n };\n /**\n * Allows you to sort the file data alphabetically based on its file name clearly.\n * @param { FileList } filesData - specifies the files data for upload.\n * @returns File[]\n */\n Uploader.prototype.sortFileList = function (filesData) {\n var files = filesData;\n var fileNames = [];\n for (var i = 0; i < files.length; i++) {\n fileNames.push(files[i].name);\n }\n var sortedFileNames = fileNames.sort();\n var sortedFilesData = [];\n var index = 0;\n for (var _i = 0, sortedFileNames_1 = sortedFileNames; _i < sortedFileNames_1.length; _i++) {\n var name_1 = sortedFileNames_1[_i];\n for (var i = 0; i < files.length; i++) {\n if (name_1 === files[i].name) {\n sortedFilesData.push(files[i]);\n }\n }\n }\n return sortedFilesData;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n Uploader.prototype.destroy = function () {\n this.element.value = null;\n this.clearAll();\n this.unWireEvents();\n this.unBindDropEvents();\n if (this.multiple) {\n this.element.removeAttribute('multiple');\n }\n if (!this.enabled) {\n this.element.removeAttribute('disabled');\n }\n this.element.removeAttribute('accept');\n this.setInitialAttributes();\n this.uploadWrapper.parentElement.appendChild(this.cloneElement);\n this.cloneElement.classList.remove('e-control', ROOT);\n detach(this.uploadWrapper);\n this.uploadWrapper = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Allows you to call the upload process manually by calling save URL action.\n * To process the selected files (added in upload queue), pass an empty argument otherwise\n * upload the specific file based on its argument.\n * @param { FileInfo[] } files - specifies the files data for upload.\n * @returns void\n */\n Uploader.prototype.upload = function (files, custom) {\n var _this = this;\n var selectedFiles = [];\n if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {\n return;\n }\n if (!custom || isNullOrUndefined(custom)) {\n if (!this.multiple) {\n var file = [];\n file.push(files[0]);\n selectedFiles = this.filterfileList(file);\n }\n else {\n selectedFiles = this.filterfileList(files);\n }\n }\n else {\n selectedFiles = files;\n }\n var _loop_1 = function (i) {\n var ajax = new XMLHttpRequest();\n ajax.addEventListener('load', function (e) { _this.uploadComplete(e, selectedFiles[i], custom); }, false);\n /* istanbul ignore next */\n ajax.addEventListener('error', function (e) { _this.uploadFailed(e, selectedFiles[i]); }, false);\n ajax.upload.addEventListener('progress', function (e) { _this.uploadInProgress(e, selectedFiles[i], custom); }, false);\n ajax.open('POST', this_1.asyncSettings.saveUrl);\n var formData = new FormData();\n if (selectedFiles[i].statusCode === '1') {\n var eventArgs = {\n fileData: selectedFiles[i],\n customFormData: [],\n cancel: false,\n currentRequest: ajax\n };\n this_1.trigger('uploading', eventArgs);\n if (eventArgs.cancel) {\n return { value: void 0 };\n }\n var name_2 = this_1.element.getAttribute('name');\n formData.append(name_2, selectedFiles[i].rawFile, selectedFiles[i].name);\n this_1.updateFormData(formData, eventArgs.customFormData);\n ajax.send(formData);\n }\n };\n var this_1 = this;\n for (var i = 0; i < selectedFiles.length; i++) {\n var state_1 = _loop_1(i);\n if (typeof state_1 === \"object\")\n return state_1.value;\n }\n };\n /**\n * Remove the uploaded file from server manually by calling the remove URL action.\n * If you pass an empty argument to this method, the complete file list can be cleared,\n * otherwise remove the specific file based on its argument (“file_data”).\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to remove from file list/server.\n * @returns void\n */\n Uploader.prototype.remove = function (fileData, customTemplate) {\n var removeFiles = [];\n fileData = !isNullOrUndefined(fileData) ? fileData : this.filesData;\n if (fileData instanceof Array) {\n removeFiles = fileData;\n }\n else {\n removeFiles.push(fileData);\n }\n var eventArgs = {\n cancel: false,\n filesData: removeFiles,\n customFormData: []\n };\n var removeUrl = this.asyncSettings.removeUrl;\n var validUrl = (removeUrl === '' || isNullOrUndefined(removeUrl)) ? false : true;\n for (var _i = 0, removeFiles_1 = removeFiles; _i < removeFiles_1.length; _i++) {\n var files = removeFiles_1[_i];\n if (files.statusCode === '2' && validUrl) {\n this.removeUploadedFile(files, eventArgs, customTemplate);\n }\n else {\n this.trigger('removing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.removeFilesData(files, customTemplate);\n }\n }\n };\n /**\n * Clear all the file entries from list that can be uploaded files or added in upload queue.\n * @returns void\n */\n Uploader.prototype.clearAll = function () {\n if (isNullOrUndefined(this.listParent)) {\n return;\n }\n var eventArgs = {\n cancel: false,\n filesData: this.filesData\n };\n this.trigger('clearing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.clearData();\n };\n Uploader.prototype.getFilesData = function () {\n return this.filesData;\n };\n __decorate([\n Complex({ saveUrl: '', removeUrl: '' }, AsyncSettings)\n ], Uploader.prototype, \"asyncSettings\", void 0);\n __decorate([\n Property(false)\n ], Uploader.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"enabled\", void 0);\n __decorate([\n Property(null)\n ], Uploader.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"multiple\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"autoUpload\", void 0);\n __decorate([\n Complex({}, ButtonsProps)\n ], Uploader.prototype, \"buttons\", void 0);\n __decorate([\n Property('')\n ], Uploader.prototype, \"allowedExtensions\", void 0);\n __decorate([\n Property(0)\n ], Uploader.prototype, \"minFileSize\", void 0);\n __decorate([\n Property(30000000)\n ], Uploader.prototype, \"maxFileSize\", void 0);\n __decorate([\n Property(null)\n ], Uploader.prototype, \"dropArea\", void 0);\n __decorate([\n Collection([{}], FilesProp)\n ], Uploader.prototype, \"files\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"showFileList\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"selected\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"uploading\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"success\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"failure\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"clearing\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"change\", void 0);\n Uploader = __decorate([\n NotifyPropertyChanges\n ], Uploader);\n return Uploader;\n}(Component));\nexport { Uploader };\n","import { DataUtil } from './util';\n/**\n * Query class is used to build query which is used by the DataManager to communicate with datasource.\n */\nvar Query = /** @class */ (function () {\n /**\n * Constructor for Query class.\n * @param {string|string[]} from?\n * @hidden\n */\n function Query(from) {\n /** @hidden */\n this.subQuery = null;\n /** @hidden */\n this.isChild = false;\n this.queries = [];\n this.key = '';\n this.fKey = '';\n if (typeof from === 'string') {\n this.fromTable = from;\n }\n else if (from && from instanceof Array) {\n this.lookups = from;\n }\n this.expands = [];\n this.sortedColumns = [];\n this.groupedColumns = [];\n this.subQuery = null;\n this.isChild = false;\n this.params = [];\n return this;\n }\n /**\n * Sets the primary key.\n * @param {string} field - Defines the column field.\n */\n Query.prototype.setKey = function (field) {\n this.key = field;\n return this;\n };\n /**\n * Sets default DataManager to execute query.\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.using = function (dataManager) {\n this.dataManager = dataManager;\n return this;\n };\n /**\n * Executes query with the given DataManager.\n * @param {DataManager} dataManager - Defines the DataManager.\n * @param {Function} done - Defines the success callback.\n * @param {Function} fail - Defines the failure callback.\n * @param {Function} always - Defines the callback which will be invoked on either success or failure.\n *\n * \n * let dataManager: DataManager = new DataManager([{ ID: '10' }, { ID: '2' }, { ID: '1' }, { ID: '20' }]);\n * let query: Query = new Query();\n * query.sortBy('ID', (x: string, y: string): number => { return parseInt(x, 10) - parseInt(y, 10) });\n * let promise: Promise< Object > = query.execute(dataManager);\n * promise.then((e: { result: Object }) => { });\n * \n */\n Query.prototype.execute = function (dataManager, done, fail, always) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeQuery(this, done, fail, always);\n }\n return DataUtil.throwError('Query - execute() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Executes query with the local datasource.\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.executeLocal = function (dataManager) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeLocal(this);\n }\n return DataUtil.throwError('Query - executeLocal() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Creates deep copy of the Query object.\n */\n Query.prototype.clone = function () {\n var cloned = new Query();\n cloned.queries = this.queries.slice(0);\n cloned.key = this.key;\n cloned.isChild = this.isChild;\n cloned.dataManager = this.dataManager;\n cloned.fromTable = this.fromTable;\n cloned.params = this.params.slice(0);\n cloned.expands = this.expands.slice(0);\n cloned.sortedColumns = this.sortedColumns.slice(0);\n cloned.groupedColumns = this.groupedColumns.slice(0);\n cloned.subQuerySelector = this.subQuerySelector;\n cloned.subQuery = this.subQuery;\n cloned.fKey = this.fKey;\n cloned.isCountRequired = this.isCountRequired;\n return cloned;\n };\n /**\n * Specifies the name of table to retrieve data in query execution.\n * @param {string} tableName - Defines the table name.\n */\n Query.prototype.from = function (tableName) {\n this.fromTable = tableName;\n return this;\n };\n /**\n * Adds additional parameter which will be sent along with the request which will be generated while DataManager execute.\n * @param {string} key - Defines the key of additional parameter.\n * @param {Function|string} value - Defines the value for the key.\n */\n Query.prototype.addParams = function (key, value) {\n if (typeof value === 'function') {\n this.params.push({ key: key, fn: value });\n }\n else {\n this.params.push({ key: key, value: value });\n }\n return this;\n };\n /**\n * Expands the related table.\n * @param {string|Object[]} tables\n */\n Query.prototype.expand = function (tables) {\n if (typeof tables === 'string') {\n this.expands = [].slice.call([tables], 0);\n }\n else {\n this.expands = tables.slice(0);\n }\n return this;\n };\n /**\n * Filter data with given filter criteria.\n * @param {string|Predicate} fieldName - Defines the column field or Predicate.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string|number|boolean} value - Defines the values to match with data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Query.prototype.where = function (fieldName, operator, value, ignoreCase, ignoreAccent) {\n operator = operator ? (operator).toLowerCase() : null;\n var predicate = null;\n if (typeof fieldName === 'string') {\n predicate = new Predicate(fieldName, operator, value, ignoreCase, ignoreAccent);\n }\n else if (fieldName instanceof Predicate) {\n predicate = fieldName;\n }\n this.queries.push({\n fn: 'onWhere',\n e: predicate\n });\n return this;\n };\n /**\n * Search data with given search criteria.\n * @param {string|number|boolean} searchKey - Defines the search key.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n * @param {string} operator - Defines the operator how to search data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Query.prototype.search = function (searchKey, fieldNames, operator, ignoreCase, ignoreAccent) {\n if (typeof fieldNames === 'string') {\n fieldNames = [fieldNames];\n }\n operator = operator || 'contains';\n var comparer = DataUtil.fnOperators[operator];\n this.queries.push({\n fn: 'onSearch',\n e: {\n fieldNames: fieldNames,\n operator: operator,\n searchKey: searchKey,\n ignoreCase: ignoreCase,\n ignoreAccent: ignoreAccent,\n comparer: comparer\n }\n });\n return this;\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n */\n Query.prototype.sortBy = function (fieldName, comparer, isFromGroup) {\n var order = 'ascending';\n var sorts;\n var temp;\n if (typeof fieldName === 'string' && DataUtil.endsWith(fieldName.toLowerCase(), ' desc')) {\n fieldName = fieldName.replace(/ desc$/i, '');\n comparer = 'descending';\n }\n if (!comparer || typeof comparer === 'string') {\n order = comparer ? comparer.toLowerCase() : 'ascending';\n comparer = DataUtil.fnSort(comparer);\n }\n if (isFromGroup) {\n sorts = Query.filterQueries(this.queries, 'onSortBy');\n for (var i = 0; i < sorts.length; i++) {\n temp = sorts[i].e.fieldName;\n if (typeof temp === 'string') {\n if (temp === fieldName) {\n return this;\n }\n }\n else if (temp instanceof Array) {\n for (var j = 0; j < temp.length; j++) {\n if (temp[j] === fieldName || fieldName.toLowerCase() === temp[j] + ' desc') {\n return this;\n }\n }\n }\n }\n }\n this.queries.push({\n fn: 'onSortBy',\n e: {\n fieldName: fieldName,\n comparer: comparer,\n direction: order\n }\n });\n return this;\n };\n /**\n * Sorts data in descending order.\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.sortByDesc = function (fieldName) {\n return this.sortBy(fieldName, 'descending');\n };\n /**\n * Groups data with the given field name.\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.group = function (fieldName, fn, format) {\n this.sortBy(fieldName, null, true);\n this.queries.push({\n fn: 'onGroup',\n e: {\n fieldName: fieldName,\n comparer: fn ? fn : null,\n format: format ? format : null\n }\n });\n return this;\n };\n /**\n * Gets data based on the given page index and size.\n * @param {number} pageIndex - Defines the current page index.\n * @param {number} pageSize - Defines the no of records per page.\n */\n Query.prototype.page = function (pageIndex, pageSize) {\n this.queries.push({\n fn: 'onPage',\n e: {\n pageIndex: pageIndex,\n pageSize: pageSize\n }\n });\n return this;\n };\n /**\n * Gets data based on the given start and end index.\n * @param {number} start - Defines the start index of the datasource.\n * @param {number} end - Defines the end index of the datasource.\n */\n Query.prototype.range = function (start, end) {\n this.queries.push({\n fn: 'onRange',\n e: {\n start: start,\n end: end\n }\n });\n return this;\n };\n /**\n * Gets data from the top of the data source based on given number of records count.\n * @param {number} nos - Defines the no of records to retrieve from datasource.\n */\n Query.prototype.take = function (nos) {\n this.queries.push({\n fn: 'onTake',\n e: {\n nos: nos\n }\n });\n return this;\n };\n /**\n * Skips data with given number of records count from the top of the data source.\n * @param {number} nos - Defines the no of records skip in the datasource.\n */\n Query.prototype.skip = function (nos) {\n this.queries.push({\n fn: 'onSkip',\n e: { nos: nos }\n });\n return this;\n };\n /**\n * Selects specified columns from the data source.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n */\n Query.prototype.select = function (fieldNames) {\n if (typeof fieldNames === 'string') {\n fieldNames = [].slice.call([fieldNames], 0);\n }\n this.queries.push({\n fn: 'onSelect',\n e: { fieldNames: fieldNames }\n });\n return this;\n };\n /**\n * Gets the records in hierarchical relationship from two tables. It requires the foreign key to relate two tables.\n * @param {Query} query - Defines the query to relate two tables.\n * @param {Function} selectorFn - Defines the custom function to select records.\n */\n Query.prototype.hierarchy = function (query, selectorFn) {\n this.subQuerySelector = selectorFn;\n this.subQuery = query;\n return this;\n };\n /**\n * Sets the foreign key which is used to get data from the related table.\n * @param {string} key - Defines the foreign key.\n */\n Query.prototype.foreignKey = function (key) {\n this.fKey = key;\n return this;\n };\n /**\n * It is used to get total number of records in the DataManager execution result.\n */\n Query.prototype.requiresCount = function () {\n this.isCountRequired = true;\n return this;\n };\n //type - sum, avg, min, max\n /**\n * Aggregate the data with given type and field name.\n * @param {string} type - Defines the aggregate type.\n * @param {string} field - Defines the column field to aggregate.\n */\n Query.prototype.aggregate = function (type, field) {\n this.queries.push({\n fn: 'onAggregates',\n e: { field: field, type: type }\n });\n return this;\n };\n /**\n * Pass array of filterColumn query for performing filter operation.\n * @param {QueryOptions[]} queries\n * @param {string} name\n * @hidden\n */\n Query.filterQueries = function (queries, name) {\n return queries.filter(function (q) {\n return q.fn === name;\n });\n };\n /**\n * To get the list of queries which is already filtered in current data source.\n * @param {Object[]} queries\n * @param {string[]} singles\n * @hidden\n */\n Query.filterQueryLists = function (queries, singles) {\n var filtered = queries.filter(function (q) {\n return singles.indexOf(q.fn) !== -1;\n });\n var res = {};\n for (var i = 0; i < filtered.length; i++) {\n if (!res[filtered[i].fn]) {\n res[filtered[i].fn] = filtered[i].e;\n }\n }\n return res;\n };\n return Query;\n}());\nexport { Query };\n/**\n * Predicate class is used to generate complex filter criteria.\n * This will be used by DataManager to perform multiple filtering operation.\n */\nvar Predicate = /** @class */ (function () {\n /**\n * Constructor for Predicate class.\n * @param {string|Predicate} field\n * @param {string} operator\n * @param {string|number|boolean|Predicate|Predicate[]} value\n * @param {boolean=false} ignoreCase\n * @hidden\n */\n function Predicate(field, operator, value, ignoreCase, ignoreAccent) {\n if (ignoreCase === void 0) { ignoreCase = false; }\n /** @hidden */\n this.ignoreAccent = false;\n /** @hidden */\n this.isComplex = false;\n if (typeof field === 'string') {\n this.field = field;\n this.operator = operator.toLowerCase();\n this.value = value;\n this.ignoreCase = ignoreCase;\n this.ignoreAccent = ignoreAccent;\n this.isComplex = false;\n this.comparer = DataUtil.fnOperators.processOperator(this.operator);\n }\n else if (field instanceof Predicate && value instanceof Predicate || value instanceof Array) {\n this.isComplex = true;\n this.condition = operator.toLowerCase();\n this.predicates = [field];\n if (value instanceof Array) {\n [].push.apply(this.predicates, value);\n }\n else {\n this.predicates.push(value);\n }\n }\n return this;\n }\n /**\n * Adds n-number of new predicates on existing predicate with “and” condition.\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.and = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'and');\n };\n /**\n * Adds new predicate on existing predicate with “and” condition.\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Predicate.prototype.and = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'and', ignoreCase, ignoreAccent);\n };\n /**\n * Adds n-number of new predicates on existing predicate with “or” condition.\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.or = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'or');\n };\n /**\n * Adds new predicate on existing predicate with “or” condition.\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Predicate.prototype.or = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'or', ignoreCase, ignoreAccent);\n };\n /**\n * Converts plain JavaScript object to Predicate object.\n * @param {Predicate[]|Predicate} json - Defines single or collection of Predicate.\n */\n Predicate.fromJson = function (json) {\n if (json instanceof Array) {\n var res = [];\n for (var i = 0, len = json.length; i < len; i++) {\n res.push(this.fromJSONData(json[i]));\n }\n return res;\n }\n var pred = json;\n return this.fromJSONData(pred);\n };\n /**\n * Validate the record based on the predicates.\n * @param {Object} record - Defines the datasource record.\n */\n Predicate.prototype.validate = function (record) {\n var predicate = this.predicates ? this.predicates : [];\n var isAnd;\n var ret;\n if (!this.isComplex && this.comparer) {\n return this.comparer.call(this, DataUtil.getObject(this.field, record), this.value, this.ignoreCase, this.ignoreAccent);\n }\n isAnd = this.condition === 'and';\n for (var i = 0; i < predicate.length; i++) {\n ret = predicate[i].validate(record);\n if (isAnd) {\n if (!ret) {\n return false;\n }\n }\n else {\n if (ret) {\n return true;\n }\n }\n }\n return isAnd;\n };\n /**\n * Converts predicates to plain JavaScript.\n * This method is uses Json stringify when serializing Predicate object.\n */\n Predicate.prototype.toJson = function () {\n var predicates;\n var p;\n if (this.isComplex) {\n predicates = [];\n p = this.predicates;\n for (var i = 0; i < p.length; i++) {\n predicates.push(p[i].toJson());\n }\n }\n return {\n isComplex: this.isComplex,\n field: this.field,\n operator: this.operator,\n value: this.value,\n ignoreCase: this.ignoreCase,\n ignoreAccent: this.ignoreAccent,\n condition: this.condition,\n predicates: predicates\n };\n };\n Predicate.combinePredicates = function (predicates, operator) {\n if (predicates.length === 1) {\n if (!(predicates[0] instanceof Array)) {\n return predicates[0];\n }\n predicates = predicates[0];\n }\n return new Predicate(predicates[0], operator, predicates.slice(1));\n };\n Predicate.combine = function (pred, field, operator, value, condition, ignoreCase, ignoreAccent) {\n if (field instanceof Predicate) {\n return Predicate[condition](pred, field);\n }\n if (typeof field === 'string') {\n return Predicate[condition](pred, new Predicate(field, operator, value, ignoreCase, ignoreAccent));\n }\n return DataUtil.throwError('Predicate - ' + condition + ' : invalid arguments');\n };\n Predicate.fromJSONData = function (json) {\n var preds = json.predicates || [];\n var len = preds.length;\n var predicates = [];\n var result;\n for (var i = 0; i < len; i++) {\n predicates.push(this.fromJSONData(preds[i]));\n }\n if (!json.isComplex) {\n result = new Predicate(json.field, json.operator, json.value, json.ignoreCase, json.ignoreAccent);\n }\n else {\n result = new Predicate(predicates[0], json.condition, predicates.slice(1));\n }\n return result;\n };\n return Predicate;\n}());\nexport { Predicate };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataManager } from './manager';\nimport { Query } from './query';\nvar consts = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Data manager common utility methods.\n * @hidden\n */\nvar DataUtil = /** @class */ (function () {\n function DataUtil() {\n }\n /**\n * Returns the value by invoking the provided parameter function.\n * If the paramater is not of type function then it will be returned as it is.\n * @param {Function|string|string[]|number} value\n * @param {Object} inst?\n * @hidden\n */\n DataUtil.getValue = function (value, inst) {\n if (typeof value === 'function') {\n return value.call(inst || {});\n }\n return value;\n };\n /**\n * Returns true if the input string ends with given string.\n * @param {string} input\n * @param {string} substr\n */\n DataUtil.endsWith = function (input, substr) {\n return input.slice(-substr.length) === substr;\n };\n /**\n * Returns true if the input string starts with given string.\n * @param {string} str\n * @param {string} startstr\n */\n DataUtil.startsWith = function (input, start) {\n return input.slice(0, start.length) === start;\n };\n /**\n * To return the sorting function based on the string.\n * @param {string} order\n * @hidden\n */\n DataUtil.fnSort = function (order) {\n order = order ? DataUtil.toLowerCase(order) : 'ascending';\n if (order === 'ascending') {\n return this.fnAscending;\n }\n return this.fnDescending;\n };\n /**\n * Comparer function which is used to sort the data in ascending order.\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnAscending = function (x, y) {\n if (y === null || y === undefined) {\n return -1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y);\n }\n if (x === null || x === undefined) {\n return 1;\n }\n return x - y;\n };\n /**\n * Comparer function which is used to sort the data in descending order.\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnDescending = function (x, y) {\n if (y === null || y === undefined) {\n return 1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y) * -1;\n }\n if (x === null || x === undefined) {\n return -1;\n }\n return y - x;\n };\n DataUtil.extractFields = function (obj, fields) {\n var newObj = {};\n for (var i = 0; i < fields.length; i++) {\n newObj = this.setValue(fields[i], this.getObject(fields[i], obj), newObj);\n }\n return newObj;\n };\n /**\n * Select objects by given fields from jsonArray.\n * @param {Object[]} jsonArray\n * @param {string[]} fields\n */\n DataUtil.select = function (jsonArray, fields) {\n var newData = [];\n for (var i = 0; i < jsonArray.length; i++) {\n newData.push(this.extractFields(jsonArray[i], fields));\n }\n return newData;\n };\n /**\n * Group the input data based on the field name.\n * It also performs aggregation of the grouped records based on the aggregates paramater.\n * @param {Object[]} jsonArray\n * @param {string} field?\n * @param {Object[]} agg?\n * @param {number} level?\n * @param {Object[]} groupDs?\n */\n DataUtil.group = function (jsonArray, field, aggregates, level, groupDs, format) {\n level = level || 1;\n var jsonData = jsonArray;\n var guid = 'GroupGuid';\n if (jsonData.GroupGuid === consts[guid]) {\n var _loop_1 = function (j) {\n if (!isNullOrUndefined(groupDs)) {\n var indx = -1;\n var temp = groupDs.filter(function (e) { return e.key === jsonData[j].key; });\n indx = groupDs.indexOf(temp[0]);\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, groupDs[indx].items, format);\n jsonData[j].count = groupDs[indx].count;\n }\n else {\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, null, format);\n jsonData[j].count = jsonData[j].items.length;\n }\n };\n var this_1 = this;\n for (var j = 0; j < jsonData.length; j++) {\n _loop_1(j);\n }\n jsonData.childLevels += 1;\n return jsonData;\n }\n var grouped = {};\n var groupedArray = [];\n groupedArray.GroupGuid = consts[guid];\n groupedArray.level = level;\n groupedArray.childLevels = 0;\n groupedArray.records = jsonData;\n var _loop_2 = function (i) {\n var val = this_2.getVal(jsonData, i, field);\n if (!isNullOrUndefined(format)) {\n val = format(val, field);\n }\n if (!grouped[val]) {\n grouped[val] = {\n key: val,\n count: 0,\n items: [],\n aggregates: {},\n field: field\n };\n groupedArray.push(grouped[val]);\n if (!isNullOrUndefined(groupDs)) {\n var tempObj = groupDs.filter(function (e) { return e.key === grouped[val].key; });\n grouped[val].count = tempObj[0].count;\n }\n }\n grouped[val].count = !isNullOrUndefined(groupDs) ? grouped[val].count : grouped[val].count += 1;\n grouped[val].items.push(jsonData[i]);\n };\n var this_2 = this;\n for (var i = 0; i < jsonData.length; i++) {\n _loop_2(i);\n }\n if (aggregates && aggregates.length) {\n var _loop_3 = function (i) {\n var res = {};\n var fn = void 0;\n var aggs = aggregates;\n for (var j = 0; j < aggregates.length; j++) {\n fn = DataUtil.aggregates[aggregates[j].type];\n if (!isNullOrUndefined(groupDs)) {\n var temp = groupDs.filter(function (e) { return e.key === groupedArray[i].key; });\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(temp[0].items, aggs[j].field);\n }\n }\n else {\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(groupedArray[i].items, aggs[j].field);\n }\n }\n }\n groupedArray[i].aggregates = res;\n };\n for (var i = 0; i < groupedArray.length; i++) {\n _loop_3(i);\n }\n }\n return jsonData.length && groupedArray || jsonData;\n };\n /**\n * It is used to categorize the multiple items based on a specific field in jsonArray.\n * The hierarchical queries are commonly required when you use foreign key binding.\n * @param {string} fKey\n * @param {string} from\n * @param {Object[]} source\n * @param {Group} lookup?\n * @param {string} pKey?\n * @hidden\n */\n DataUtil.buildHierarchy = function (fKey, from, source, lookup, pKey) {\n var i;\n var grp = {};\n var temp;\n if (lookup.result) {\n lookup = lookup.result;\n }\n if (lookup.GroupGuid) {\n this.throwError('DataManager: Do not have support Grouping in hierarchy');\n }\n for (i = 0; i < lookup.length; i++) {\n var fKeyData = this.getObject(fKey, lookup[i]);\n temp = grp[fKeyData] || (grp[fKeyData] = []);\n temp.push(lookup[i]);\n }\n for (i = 0; i < source.length; i++) {\n var fKeyData = this.getObject(pKey || fKey, source[i]);\n source[i][from] = grp[fKeyData];\n }\n };\n /**\n * The method used to get the field names which started with specified characters.\n * @param {Object} obj\n * @param {string[]} fields?\n * @param {string} prefix?\n * @hidden\n */\n DataUtil.getFieldList = function (obj, fields, prefix) {\n if (prefix === undefined) {\n prefix = '';\n }\n if (fields === undefined || fields === null) {\n return this.getFieldList(obj, [], prefix);\n }\n var copyObj = obj;\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (typeof copyObj[prop] === 'object' && !(copyObj[prop] instanceof Array)) {\n this.getFieldList(copyObj[prop], fields, prefix + prop + '.');\n }\n else {\n fields.push(prefix + prop);\n }\n }\n return fields;\n };\n /**\n * Gets the value of the property in the given object.\n * The complex object can be accessed by providing the field names concatenated with dot(.).\n * @param {string} nameSpace - The name of the property to be accessed.\n * @param {Object} from - Defines the source object.\n */\n DataUtil.getObject = function (nameSpace, from) {\n if (!nameSpace) {\n return from;\n }\n if (!from) {\n return undefined;\n }\n if (nameSpace.indexOf('.') === -1) {\n return from[nameSpace];\n }\n var value = from;\n var splits = nameSpace.split('.');\n for (var i = 0; i < splits.length; i++) {\n if (value == null) {\n break;\n }\n value = value[splits[i]];\n }\n return value;\n };\n /**\n * To set value for the nameSpace in desired object.\n * @param {string} nameSpace - String value to the get the inner object.\n * @param {Object} value - Value that you need to set.\n * @param {Object} obj - Object to get the inner object value.\n * @return { [key: string]: Object; } | Object\n * @hidden\n */\n DataUtil.setValue = function (nameSpace, value, obj) {\n var keys = nameSpace.toString().split('.');\n var start = obj || {};\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[i];\n if (i + 1 === length) {\n fromObj[key] = value === undefined ? undefined : value;\n }\n else if (isNullOrUndefined(fromObj[key])) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return start;\n };\n /**\n * Sort the given data based on the field and comparer.\n * @param {Object[]} ds - Defines the input data.\n * @param {string} field - Defines the field to be sorted.\n * @param {Function} comparer - Defines the comparer function used to sort the records.\n */\n DataUtil.sort = function (ds, field, comparer) {\n if (ds.length <= 1) {\n return ds;\n }\n var middle = parseInt((ds.length / 2).toString(), 10);\n var left = ds.slice(0, middle);\n var right = ds.slice(middle);\n left = this.sort(left, field, comparer);\n right = this.sort(right, field, comparer);\n return this.merge(left, right, field, comparer);\n };\n DataUtil.ignoreDiacritics = function (value) {\n if (typeof value !== 'string') {\n return value;\n }\n var result = value.split('');\n var newValue = result.map(function (temp) { return temp in DataUtil.diacritics ? DataUtil.diacritics[temp] : temp; });\n return newValue.join('');\n };\n DataUtil.merge = function (left, right, fieldName, comparer) {\n var result = [];\n var current;\n while (left.length > 0 || right.length > 0) {\n if (left.length > 0 && right.length > 0) {\n if (comparer) {\n current = comparer(this.getVal(left, 0, fieldName), this.getVal(right, 0, fieldName)) <= 0 ? left : right;\n }\n else {\n current = left[0][fieldName] < left[0][fieldName] ? left : right;\n }\n }\n else {\n current = left.length > 0 ? left : right;\n }\n result.push(current.shift());\n }\n return result;\n };\n DataUtil.getVal = function (array, index, field) {\n return field ? this.getObject(field, array[index]) : array[index];\n };\n DataUtil.toLowerCase = function (val) {\n return val ? typeof val === 'string' ? val.toLowerCase() : val.toString() : (val === 0 || val === false) ? val.toString() : '';\n };\n /**\n * To perform the filter operation with specified adaptor and returns the result.\n * @param {Object} adaptor\n * @param {string} fnName\n * @param {Object} param1?\n * @param {Object} param2?\n * @hidden\n */\n DataUtil.callAdaptorFunction = function (adaptor, fnName, param1, param2) {\n if (fnName in adaptor) {\n var res = adaptor[fnName](param1, param2);\n if (!this.fnOperators.isnull(res)) {\n param1 = res;\n }\n }\n return param1;\n };\n /**\n * Checks wheather the given input is a plain object or not.\n * @param {Object|Object[]} obj\n */\n DataUtil.isPlainObject = function (obj) {\n return (!!obj) && (obj.constructor === Object);\n };\n /**\n * Returns true when the browser cross origin request.\n */\n DataUtil.isCors = function () {\n var xhr = null;\n var request = 'XMLHttpRequest';\n try {\n xhr = new window[request]();\n }\n catch (e) {\n // No exception handling\n }\n return !!xhr && ('withCredentials' in xhr);\n };\n /**\n * Generate random GUID value which will be prefixed with the given value.\n * @param {string} prefix\n */\n DataUtil.getGuid = function (prefix) {\n var hexs = '0123456789abcdef';\n var rand;\n return (prefix || '') + '00000000-0000-4000-0000-000000000000'.replace(/0/g, function (val, i) {\n if ('crypto' in window && 'getRandomValues' in crypto) {\n var arr = new Uint8Array(1);\n window.crypto.getRandomValues(arr);\n rand = arr[0] % 16 | 0;\n }\n else {\n rand = Math.random() * 16 | 0;\n }\n return hexs[i === 19 ? rand & 0x3 | 0x8 : rand];\n });\n };\n /**\n * Checks wheather the given value is null or not.\n * @param {string|Object} val\n * @returns boolean\n */\n DataUtil.isNull = function (val) {\n return val === undefined || val === null;\n };\n /**\n * To get the required items from collection of objects.\n * @param {Object[]} array\n * @param {string} field\n * @param {Function} comparer\n * @returns Object\n * @hidden\n */\n DataUtil.getItemFromComparer = function (array, field, comparer) {\n var keyVal;\n var current;\n var key;\n var i = 0;\n var castRequired = typeof DataUtil.getVal(array, 0, field) === 'string';\n if (array.length) {\n while (isNullOrUndefined(keyVal) && i < array.length) {\n keyVal = DataUtil.getVal(array, i, field);\n key = array[i++];\n }\n }\n for (; i < array.length; i++) {\n current = DataUtil.getVal(array, i, field);\n if (isNullOrUndefined(current)) {\n continue;\n }\n if (castRequired) {\n keyVal = +keyVal;\n current = +current;\n }\n if (comparer(keyVal, current) > 0) {\n keyVal = current;\n key = array[i];\n }\n }\n return key;\n };\n /**\n * To get distinct values of Array or Array of Objects.\n * @param {Object[]} json\n * @param {string} field\n * @param {boolean} requiresCompleteRecord\n * @returns Object[]\n * * distinct array of objects is return when requiresCompleteRecord set as true.\n * @hidden\n */\n DataUtil.distinct = function (json, fieldName, requiresCompleteRecord) {\n requiresCompleteRecord = isNullOrUndefined(requiresCompleteRecord) ? false : requiresCompleteRecord;\n var result = [];\n var val;\n var tmp = {};\n json.forEach(function (data, index) {\n val = DataUtil.getVal(json, index, fieldName);\n if (!(val in tmp)) {\n result.push(!requiresCompleteRecord ? val : json[index]);\n tmp[val] = 1;\n }\n });\n return result;\n };\n /**\n * Specifies the value which will be used to adjust the date value to server timezone.\n * @default null\n */\n DataUtil.serverTimezoneOffset = null;\n /**\n * Throw error with the given string as message.\n * @param {string} er\n */\n DataUtil.throwError = function (error) {\n try {\n throw new Error(error);\n }\n catch (e) {\n throw e.message + '\\n' + e.stack;\n }\n };\n DataUtil.aggregates = {\n /**\n * Calculate sum of the given field in the data.\n * @param {Object[]} ds\n * @param {string} field\n */\n sum: function (ds, field) {\n var result = 0;\n var val;\n var castRequired = typeof DataUtil.getVal(ds, 0, field) !== 'number';\n for (var i = 0; i < ds.length; i++) {\n val = DataUtil.getVal(ds, i, field);\n if (!isNaN(val) && val !== null) {\n if (castRequired) {\n val = +val;\n }\n result += val;\n }\n }\n return result;\n },\n /**\n * Calculate average value of the given field in the data.\n * @param {Object[]} ds\n * @param {string} field\n */\n average: function (ds, field) {\n return DataUtil.aggregates.sum(ds, field) / ds.length;\n },\n /**\n * Returns the min value of the data based on the field.\n * @param {Object[]} ds\n * @param {string|Function} field\n */\n min: function (ds, field) {\n var result;\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n result = DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnAscending));\n return isNullOrUndefined(result) ? null : result;\n },\n /**\n * Returns the max value of the data based on the field.\n * @param {Object[]} ds\n * @param {string} field\n * @returns number\n */\n max: function (ds, field) {\n var result;\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n /* tslint:disable-next-line:no-any */\n result = DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnDescending));\n return isNullOrUndefined(result) ? null : result;\n },\n /**\n * Returns the total number of true value present in the data based on the given boolean field name.\n * @param {Object[]} ds\n * @param {string} field\n */\n truecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', true, true)).length;\n },\n /**\n * Returns the total number of false value present in the data based on the given boolean field name.\n * @param {Object[]} ds\n * @param {string} field\n */\n falsecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', false, true)).length;\n },\n /**\n * Returns the length of the given data.\n * @param {Object[]} ds\n * @param {string} field?\n * @returns number\n */\n count: function (ds, field) {\n return ds.length;\n }\n };\n /**\n * Specifies the Object with filter operators.\n */\n DataUtil.operatorSymbols = {\n '<': 'lessthan',\n '>': 'greaterthan',\n '<=': 'lessthanorequal',\n '>=': 'greaterthanorequal',\n '==': 'equal',\n '!=': 'notequal',\n '*=': 'contains',\n '$=': 'endswith',\n '^=': 'startswith'\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * * It will be used for date/number type filter query.\n */\n DataUtil.odBiOperator = {\n '<': ' lt ',\n '>': ' gt ',\n '<=': ' le ',\n '>=': ' ge ',\n '==': ' eq ',\n '!=': ' ne ',\n 'lessthan': ' lt ',\n 'lessthanorequal': ' le ',\n 'greaterthan': ' gt ',\n 'greaterthanorequal': ' ge ',\n 'equal': ' eq ',\n 'notequal': ' ne '\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odUniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'substringof',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'substringof'\n };\n /**\n * Specifies the Object with filter operators which will be used for ODataV4 filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odv4UniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'contains',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'contains'\n };\n DataUtil.diacritics = {\n '\\u24B6': 'A',\n '\\uFF21': 'A',\n '\\u00C0': 'A',\n '\\u00C1': 'A',\n '\\u00C2': 'A',\n '\\u1EA6': 'A',\n '\\u1EA4': 'A',\n '\\u1EAA': 'A',\n '\\u1EA8': 'A',\n '\\u00C3': 'A',\n '\\u0100': 'A',\n '\\u0102': 'A',\n '\\u1EB0': 'A',\n '\\u1EAE': 'A',\n '\\u1EB4': 'A',\n '\\u1EB2': 'A',\n '\\u0226': 'A',\n '\\u01E0': 'A',\n '\\u00C4': 'A',\n '\\u01DE': 'A',\n '\\u1EA2': 'A',\n '\\u00C5': 'A',\n '\\u01FA': 'A',\n '\\u01CD': 'A',\n '\\u0200': 'A',\n '\\u0202': 'A',\n '\\u1EA0': 'A',\n '\\u1EAC': 'A',\n '\\u1EB6': 'A',\n '\\u1E00': 'A',\n '\\u0104': 'A',\n '\\u023A': 'A',\n '\\u2C6F': 'A',\n '\\uA732': 'AA',\n '\\u00C6': 'AE',\n '\\u01FC': 'AE',\n '\\u01E2': 'AE',\n '\\uA734': 'AO',\n '\\uA736': 'AU',\n '\\uA738': 'AV',\n '\\uA73A': 'AV',\n '\\uA73C': 'AY',\n '\\u24B7': 'B',\n '\\uFF22': 'B',\n '\\u1E02': 'B',\n '\\u1E04': 'B',\n '\\u1E06': 'B',\n '\\u0243': 'B',\n '\\u0182': 'B',\n '\\u0181': 'B',\n '\\u24B8': 'C',\n '\\uFF23': 'C',\n '\\u0106': 'C',\n '\\u0108': 'C',\n '\\u010A': 'C',\n '\\u010C': 'C',\n '\\u00C7': 'C',\n '\\u1E08': 'C',\n '\\u0187': 'C',\n '\\u023B': 'C',\n '\\uA73E': 'C',\n '\\u24B9': 'D',\n '\\uFF24': 'D',\n '\\u1E0A': 'D',\n '\\u010E': 'D',\n '\\u1E0C': 'D',\n '\\u1E10': 'D',\n '\\u1E12': 'D',\n '\\u1E0E': 'D',\n '\\u0110': 'D',\n '\\u018B': 'D',\n '\\u018A': 'D',\n '\\u0189': 'D',\n '\\uA779': 'D',\n '\\u01F1': 'DZ',\n '\\u01C4': 'DZ',\n '\\u01F2': 'Dz',\n '\\u01C5': 'Dz',\n '\\u24BA': 'E',\n '\\uFF25': 'E',\n '\\u00C8': 'E',\n '\\u00C9': 'E',\n '\\u00CA': 'E',\n '\\u1EC0': 'E',\n '\\u1EBE': 'E',\n '\\u1EC4': 'E',\n '\\u1EC2': 'E',\n '\\u1EBC': 'E',\n '\\u0112': 'E',\n '\\u1E14': 'E',\n '\\u1E16': 'E',\n '\\u0114': 'E',\n '\\u0116': 'E',\n '\\u00CB': 'E',\n '\\u1EBA': 'E',\n '\\u011A': 'E',\n '\\u0204': 'E',\n '\\u0206': 'E',\n '\\u1EB8': 'E',\n '\\u1EC6': 'E',\n '\\u0228': 'E',\n '\\u1E1C': 'E',\n '\\u0118': 'E',\n '\\u1E18': 'E',\n '\\u1E1A': 'E',\n '\\u0190': 'E',\n '\\u018E': 'E',\n '\\u24BB': 'F',\n '\\uFF26': 'F',\n '\\u1E1E': 'F',\n '\\u0191': 'F',\n '\\uA77B': 'F',\n '\\u24BC': 'G',\n '\\uFF27': 'G',\n '\\u01F4': 'G',\n '\\u011C': 'G',\n '\\u1E20': 'G',\n '\\u011E': 'G',\n '\\u0120': 'G',\n '\\u01E6': 'G',\n '\\u0122': 'G',\n '\\u01E4': 'G',\n '\\u0193': 'G',\n '\\uA7A0': 'G',\n '\\uA77D': 'G',\n '\\uA77E': 'G',\n '\\u24BD': 'H',\n '\\uFF28': 'H',\n '\\u0124': 'H',\n '\\u1E22': 'H',\n '\\u1E26': 'H',\n '\\u021E': 'H',\n '\\u1E24': 'H',\n '\\u1E28': 'H',\n '\\u1E2A': 'H',\n '\\u0126': 'H',\n '\\u2C67': 'H',\n '\\u2C75': 'H',\n '\\uA78D': 'H',\n '\\u24BE': 'I',\n '\\uFF29': 'I',\n '\\u00CC': 'I',\n '\\u00CD': 'I',\n '\\u00CE': 'I',\n '\\u0128': 'I',\n '\\u012A': 'I',\n '\\u012C': 'I',\n '\\u0130': 'I',\n '\\u00CF': 'I',\n '\\u1E2E': 'I',\n '\\u1EC8': 'I',\n '\\u01CF': 'I',\n '\\u0208': 'I',\n '\\u020A': 'I',\n '\\u1ECA': 'I',\n '\\u012E': 'I',\n '\\u1E2C': 'I',\n '\\u0197': 'I',\n '\\u24BF': 'J',\n '\\uFF2A': 'J',\n '\\u0134': 'J',\n '\\u0248': 'J',\n '\\u24C0': 'K',\n '\\uFF2B': 'K',\n '\\u1E30': 'K',\n '\\u01E8': 'K',\n '\\u1E32': 'K',\n '\\u0136': 'K',\n '\\u1E34': 'K',\n '\\u0198': 'K',\n '\\u2C69': 'K',\n '\\uA740': 'K',\n '\\uA742': 'K',\n '\\uA744': 'K',\n '\\uA7A2': 'K',\n '\\u24C1': 'L',\n '\\uFF2C': 'L',\n '\\u013F': 'L',\n '\\u0139': 'L',\n '\\u013D': 'L',\n '\\u1E36': 'L',\n '\\u1E38': 'L',\n '\\u013B': 'L',\n '\\u1E3C': 'L',\n '\\u1E3A': 'L',\n '\\u0141': 'L',\n '\\u023D': 'L',\n '\\u2C62': 'L',\n '\\u2C60': 'L',\n '\\uA748': 'L',\n '\\uA746': 'L',\n '\\uA780': 'L',\n '\\u01C7': 'LJ',\n '\\u01C8': 'Lj',\n '\\u24C2': 'M',\n '\\uFF2D': 'M',\n '\\u1E3E': 'M',\n '\\u1E40': 'M',\n '\\u1E42': 'M',\n '\\u2C6E': 'M',\n '\\u019C': 'M',\n '\\u24C3': 'N',\n '\\uFF2E': 'N',\n '\\u01F8': 'N',\n '\\u0143': 'N',\n '\\u00D1': 'N',\n '\\u1E44': 'N',\n '\\u0147': 'N',\n '\\u1E46': 'N',\n '\\u0145': 'N',\n '\\u1E4A': 'N',\n '\\u1E48': 'N',\n '\\u0220': 'N',\n '\\u019D': 'N',\n '\\uA790': 'N',\n '\\uA7A4': 'N',\n '\\u01CA': 'NJ',\n '\\u01CB': 'Nj',\n '\\u24C4': 'O',\n '\\uFF2F': 'O',\n '\\u00D2': 'O',\n '\\u00D3': 'O',\n '\\u00D4': 'O',\n '\\u1ED2': 'O',\n '\\u1ED0': 'O',\n '\\u1ED6': 'O',\n '\\u1ED4': 'O',\n '\\u00D5': 'O',\n '\\u1E4C': 'O',\n '\\u022C': 'O',\n '\\u1E4E': 'O',\n '\\u014C': 'O',\n '\\u1E50': 'O',\n '\\u1E52': 'O',\n '\\u014E': 'O',\n '\\u022E': 'O',\n '\\u0230': 'O',\n '\\u00D6': 'O',\n '\\u022A': 'O',\n '\\u1ECE': 'O',\n '\\u0150': 'O',\n '\\u01D1': 'O',\n '\\u020C': 'O',\n '\\u020E': 'O',\n '\\u01A0': 'O',\n '\\u1EDC': 'O',\n '\\u1EDA': 'O',\n '\\u1EE0': 'O',\n '\\u1EDE': 'O',\n '\\u1EE2': 'O',\n '\\u1ECC': 'O',\n '\\u1ED8': 'O',\n '\\u01EA': 'O',\n '\\u01EC': 'O',\n '\\u00D8': 'O',\n '\\u01FE': 'O',\n '\\u0186': 'O',\n '\\u019F': 'O',\n '\\uA74A': 'O',\n '\\uA74C': 'O',\n '\\u01A2': 'OI',\n '\\uA74E': 'OO',\n '\\u0222': 'OU',\n '\\u24C5': 'P',\n '\\uFF30': 'P',\n '\\u1E54': 'P',\n '\\u1E56': 'P',\n '\\u01A4': 'P',\n '\\u2C63': 'P',\n '\\uA750': 'P',\n '\\uA752': 'P',\n '\\uA754': 'P',\n '\\u24C6': 'Q',\n '\\uFF31': 'Q',\n '\\uA756': 'Q',\n '\\uA758': 'Q',\n '\\u024A': 'Q',\n '\\u24C7': 'R',\n '\\uFF32': 'R',\n '\\u0154': 'R',\n '\\u1E58': 'R',\n '\\u0158': 'R',\n '\\u0210': 'R',\n '\\u0212': 'R',\n '\\u1E5A': 'R',\n '\\u1E5C': 'R',\n '\\u0156': 'R',\n '\\u1E5E': 'R',\n '\\u024C': 'R',\n '\\u2C64': 'R',\n '\\uA75A': 'R',\n '\\uA7A6': 'R',\n '\\uA782': 'R',\n '\\u24C8': 'S',\n '\\uFF33': 'S',\n '\\u1E9E': 'S',\n '\\u015A': 'S',\n '\\u1E64': 'S',\n '\\u015C': 'S',\n '\\u1E60': 'S',\n '\\u0160': 'S',\n '\\u1E66': 'S',\n '\\u1E62': 'S',\n '\\u1E68': 'S',\n '\\u0218': 'S',\n '\\u015E': 'S',\n '\\u2C7E': 'S',\n '\\uA7A8': 'S',\n '\\uA784': 'S',\n '\\u24C9': 'T',\n '\\uFF34': 'T',\n '\\u1E6A': 'T',\n '\\u0164': 'T',\n '\\u1E6C': 'T',\n '\\u021A': 'T',\n '\\u0162': 'T',\n '\\u1E70': 'T',\n '\\u1E6E': 'T',\n '\\u0166': 'T',\n '\\u01AC': 'T',\n '\\u01AE': 'T',\n '\\u023E': 'T',\n '\\uA786': 'T',\n '\\uA728': 'TZ',\n '\\u24CA': 'U',\n '\\uFF35': 'U',\n '\\u00D9': 'U',\n '\\u00DA': 'U',\n '\\u00DB': 'U',\n '\\u0168': 'U',\n '\\u1E78': 'U',\n '\\u016A': 'U',\n '\\u1E7A': 'U',\n '\\u016C': 'U',\n '\\u00DC': 'U',\n '\\u01DB': 'U',\n '\\u01D7': 'U',\n '\\u01D5': 'U',\n '\\u01D9': 'U',\n '\\u1EE6': 'U',\n '\\u016E': 'U',\n '\\u0170': 'U',\n '\\u01D3': 'U',\n '\\u0214': 'U',\n '\\u0216': 'U',\n '\\u01AF': 'U',\n '\\u1EEA': 'U',\n '\\u1EE8': 'U',\n '\\u1EEE': 'U',\n '\\u1EEC': 'U',\n '\\u1EF0': 'U',\n '\\u1EE4': 'U',\n '\\u1E72': 'U',\n '\\u0172': 'U',\n '\\u1E76': 'U',\n '\\u1E74': 'U',\n '\\u0244': 'U',\n '\\u24CB': 'V',\n '\\uFF36': 'V',\n '\\u1E7C': 'V',\n '\\u1E7E': 'V',\n '\\u01B2': 'V',\n '\\uA75E': 'V',\n '\\u0245': 'V',\n '\\uA760': 'VY',\n '\\u24CC': 'W',\n '\\uFF37': 'W',\n '\\u1E80': 'W',\n '\\u1E82': 'W',\n '\\u0174': 'W',\n '\\u1E86': 'W',\n '\\u1E84': 'W',\n '\\u1E88': 'W',\n '\\u2C72': 'W',\n '\\u24CD': 'X',\n '\\uFF38': 'X',\n '\\u1E8A': 'X',\n '\\u1E8C': 'X',\n '\\u24CE': 'Y',\n '\\uFF39': 'Y',\n '\\u1EF2': 'Y',\n '\\u00DD': 'Y',\n '\\u0176': 'Y',\n '\\u1EF8': 'Y',\n '\\u0232': 'Y',\n '\\u1E8E': 'Y',\n '\\u0178': 'Y',\n '\\u1EF6': 'Y',\n '\\u1EF4': 'Y',\n '\\u01B3': 'Y',\n '\\u024E': 'Y',\n '\\u1EFE': 'Y',\n '\\u24CF': 'Z',\n '\\uFF3A': 'Z',\n '\\u0179': 'Z',\n '\\u1E90': 'Z',\n '\\u017B': 'Z',\n '\\u017D': 'Z',\n '\\u1E92': 'Z',\n '\\u1E94': 'Z',\n '\\u01B5': 'Z',\n '\\u0224': 'Z',\n '\\u2C7F': 'Z',\n '\\u2C6B': 'Z',\n '\\uA762': 'Z',\n '\\u24D0': 'a',\n '\\uFF41': 'a',\n '\\u1E9A': 'a',\n '\\u00E0': 'a',\n '\\u00E1': 'a',\n '\\u00E2': 'a',\n '\\u1EA7': 'a',\n '\\u1EA5': 'a',\n '\\u1EAB': 'a',\n '\\u1EA9': 'a',\n '\\u00E3': 'a',\n '\\u0101': 'a',\n '\\u0103': 'a',\n '\\u1EB1': 'a',\n '\\u1EAF': 'a',\n '\\u1EB5': 'a',\n '\\u1EB3': 'a',\n '\\u0227': 'a',\n '\\u01E1': 'a',\n '\\u00E4': 'a',\n '\\u01DF': 'a',\n '\\u1EA3': 'a',\n '\\u00E5': 'a',\n '\\u01FB': 'a',\n '\\u01CE': 'a',\n '\\u0201': 'a',\n '\\u0203': 'a',\n '\\u1EA1': 'a',\n '\\u1EAD': 'a',\n '\\u1EB7': 'a',\n '\\u1E01': 'a',\n '\\u0105': 'a',\n '\\u2C65': 'a',\n '\\u0250': 'a',\n '\\uA733': 'aa',\n '\\u00E6': 'ae',\n '\\u01FD': 'ae',\n '\\u01E3': 'ae',\n '\\uA735': 'ao',\n '\\uA737': 'au',\n '\\uA739': 'av',\n '\\uA73B': 'av',\n '\\uA73D': 'ay',\n '\\u24D1': 'b',\n '\\uFF42': 'b',\n '\\u1E03': 'b',\n '\\u1E05': 'b',\n '\\u1E07': 'b',\n '\\u0180': 'b',\n '\\u0183': 'b',\n '\\u0253': 'b',\n '\\u24D2': 'c',\n '\\uFF43': 'c',\n '\\u0107': 'c',\n '\\u0109': 'c',\n '\\u010B': 'c',\n '\\u010D': 'c',\n '\\u00E7': 'c',\n '\\u1E09': 'c',\n '\\u0188': 'c',\n '\\u023C': 'c',\n '\\uA73F': 'c',\n '\\u2184': 'c',\n '\\u24D3': 'd',\n '\\uFF44': 'd',\n '\\u1E0B': 'd',\n '\\u010F': 'd',\n '\\u1E0D': 'd',\n '\\u1E11': 'd',\n '\\u1E13': 'd',\n '\\u1E0F': 'd',\n '\\u0111': 'd',\n '\\u018C': 'd',\n '\\u0256': 'd',\n '\\u0257': 'd',\n '\\uA77A': 'd',\n '\\u01F3': 'dz',\n '\\u01C6': 'dz',\n '\\u24D4': 'e',\n '\\uFF45': 'e',\n '\\u00E8': 'e',\n '\\u00E9': 'e',\n '\\u00EA': 'e',\n '\\u1EC1': 'e',\n '\\u1EBF': 'e',\n '\\u1EC5': 'e',\n '\\u1EC3': 'e',\n '\\u1EBD': 'e',\n '\\u0113': 'e',\n '\\u1E15': 'e',\n '\\u1E17': 'e',\n '\\u0115': 'e',\n '\\u0117': 'e',\n '\\u00EB': 'e',\n '\\u1EBB': 'e',\n '\\u011B': 'e',\n '\\u0205': 'e',\n '\\u0207': 'e',\n '\\u1EB9': 'e',\n '\\u1EC7': 'e',\n '\\u0229': 'e',\n '\\u1E1D': 'e',\n '\\u0119': 'e',\n '\\u1E19': 'e',\n '\\u1E1B': 'e',\n '\\u0247': 'e',\n '\\u025B': 'e',\n '\\u01DD': 'e',\n '\\u24D5': 'f',\n '\\uFF46': 'f',\n '\\u1E1F': 'f',\n '\\u0192': 'f',\n '\\uA77C': 'f',\n '\\u24D6': 'g',\n '\\uFF47': 'g',\n '\\u01F5': 'g',\n '\\u011D': 'g',\n '\\u1E21': 'g',\n '\\u011F': 'g',\n '\\u0121': 'g',\n '\\u01E7': 'g',\n '\\u0123': 'g',\n '\\u01E5': 'g',\n '\\u0260': 'g',\n '\\uA7A1': 'g',\n '\\u1D79': 'g',\n '\\uA77F': 'g',\n '\\u24D7': 'h',\n '\\uFF48': 'h',\n '\\u0125': 'h',\n '\\u1E23': 'h',\n '\\u1E27': 'h',\n '\\u021F': 'h',\n '\\u1E25': 'h',\n '\\u1E29': 'h',\n '\\u1E2B': 'h',\n '\\u1E96': 'h',\n '\\u0127': 'h',\n '\\u2C68': 'h',\n '\\u2C76': 'h',\n '\\u0265': 'h',\n '\\u0195': 'hv',\n '\\u24D8': 'i',\n '\\uFF49': 'i',\n '\\u00EC': 'i',\n '\\u00ED': 'i',\n '\\u00EE': 'i',\n '\\u0129': 'i',\n '\\u012B': 'i',\n '\\u012D': 'i',\n '\\u00EF': 'i',\n '\\u1E2F': 'i',\n '\\u1EC9': 'i',\n '\\u01D0': 'i',\n '\\u0209': 'i',\n '\\u020B': 'i',\n '\\u1ECB': 'i',\n '\\u012F': 'i',\n '\\u1E2D': 'i',\n '\\u0268': 'i',\n '\\u0131': 'i',\n '\\u24D9': 'j',\n '\\uFF4A': 'j',\n '\\u0135': 'j',\n '\\u01F0': 'j',\n '\\u0249': 'j',\n '\\u24DA': 'k',\n '\\uFF4B': 'k',\n '\\u1E31': 'k',\n '\\u01E9': 'k',\n '\\u1E33': 'k',\n '\\u0137': 'k',\n '\\u1E35': 'k',\n '\\u0199': 'k',\n '\\u2C6A': 'k',\n '\\uA741': 'k',\n '\\uA743': 'k',\n '\\uA745': 'k',\n '\\uA7A3': 'k',\n '\\u24DB': 'l',\n '\\uFF4C': 'l',\n '\\u0140': 'l',\n '\\u013A': 'l',\n '\\u013E': 'l',\n '\\u1E37': 'l',\n '\\u1E39': 'l',\n '\\u013C': 'l',\n '\\u1E3D': 'l',\n '\\u1E3B': 'l',\n '\\u017F': 'l',\n '\\u0142': 'l',\n '\\u019A': 'l',\n '\\u026B': 'l',\n '\\u2C61': 'l',\n '\\uA749': 'l',\n '\\uA781': 'l',\n '\\uA747': 'l',\n '\\u01C9': 'lj',\n '\\u24DC': 'm',\n '\\uFF4D': 'm',\n '\\u1E3F': 'm',\n '\\u1E41': 'm',\n '\\u1E43': 'm',\n '\\u0271': 'm',\n '\\u026F': 'm',\n '\\u24DD': 'n',\n '\\uFF4E': 'n',\n '\\u01F9': 'n',\n '\\u0144': 'n',\n '\\u00F1': 'n',\n '\\u1E45': 'n',\n '\\u0148': 'n',\n '\\u1E47': 'n',\n '\\u0146': 'n',\n '\\u1E4B': 'n',\n '\\u1E49': 'n',\n '\\u019E': 'n',\n '\\u0272': 'n',\n '\\u0149': 'n',\n '\\uA791': 'n',\n '\\uA7A5': 'n',\n '\\u01CC': 'nj',\n '\\u24DE': 'o',\n '\\uFF4F': 'o',\n '\\u00F2': 'o',\n '\\u00F3': 'o',\n '\\u00F4': 'o',\n '\\u1ED3': 'o',\n '\\u1ED1': 'o',\n '\\u1ED7': 'o',\n '\\u1ED5': 'o',\n '\\u00F5': 'o',\n '\\u1E4D': 'o',\n '\\u022D': 'o',\n '\\u1E4F': 'o',\n '\\u014D': 'o',\n '\\u1E51': 'o',\n '\\u1E53': 'o',\n '\\u014F': 'o',\n '\\u022F': 'o',\n '\\u0231': 'o',\n '\\u00F6': 'o',\n '\\u022B': 'o',\n '\\u1ECF': 'o',\n '\\u0151': 'o',\n '\\u01D2': 'o',\n '\\u020D': 'o',\n '\\u020F': 'o',\n '\\u01A1': 'o',\n '\\u1EDD': 'o',\n '\\u1EDB': 'o',\n '\\u1EE1': 'o',\n '\\u1EDF': 'o',\n '\\u1EE3': 'o',\n '\\u1ECD': 'o',\n '\\u1ED9': 'o',\n '\\u01EB': 'o',\n '\\u01ED': 'o',\n '\\u00F8': 'o',\n '\\u01FF': 'o',\n '\\u0254': 'o',\n '\\uA74B': 'o',\n '\\uA74D': 'o',\n '\\u0275': 'o',\n '\\u01A3': 'oi',\n '\\u0223': 'ou',\n '\\uA74F': 'oo',\n '\\u24DF': 'p',\n '\\uFF50': 'p',\n '\\u1E55': 'p',\n '\\u1E57': 'p',\n '\\u01A5': 'p',\n '\\u1D7D': 'p',\n '\\uA751': 'p',\n '\\uA753': 'p',\n '\\uA755': 'p',\n '\\u24E0': 'q',\n '\\uFF51': 'q',\n '\\u024B': 'q',\n '\\uA757': 'q',\n '\\uA759': 'q',\n '\\u24E1': 'r',\n '\\uFF52': 'r',\n '\\u0155': 'r',\n '\\u1E59': 'r',\n '\\u0159': 'r',\n '\\u0211': 'r',\n '\\u0213': 'r',\n '\\u1E5B': 'r',\n '\\u1E5D': 'r',\n '\\u0157': 'r',\n '\\u1E5F': 'r',\n '\\u024D': 'r',\n '\\u027D': 'r',\n '\\uA75B': 'r',\n '\\uA7A7': 'r',\n '\\uA783': 'r',\n '\\u24E2': 's',\n '\\uFF53': 's',\n '\\u00DF': 's',\n '\\u015B': 's',\n '\\u1E65': 's',\n '\\u015D': 's',\n '\\u1E61': 's',\n '\\u0161': 's',\n '\\u1E67': 's',\n '\\u1E63': 's',\n '\\u1E69': 's',\n '\\u0219': 's',\n '\\u015F': 's',\n '\\u023F': 's',\n '\\uA7A9': 's',\n '\\uA785': 's',\n '\\u1E9B': 's',\n '\\u24E3': 't',\n '\\uFF54': 't',\n '\\u1E6B': 't',\n '\\u1E97': 't',\n '\\u0165': 't',\n '\\u1E6D': 't',\n '\\u021B': 't',\n '\\u0163': 't',\n '\\u1E71': 't',\n '\\u1E6F': 't',\n '\\u0167': 't',\n '\\u01AD': 't',\n '\\u0288': 't',\n '\\u2C66': 't',\n '\\uA787': 't',\n '\\uA729': 'tz',\n '\\u24E4': 'u',\n '\\uFF55': 'u',\n '\\u00F9': 'u',\n '\\u00FA': 'u',\n '\\u00FB': 'u',\n '\\u0169': 'u',\n '\\u1E79': 'u',\n '\\u016B': 'u',\n '\\u1E7B': 'u',\n '\\u016D': 'u',\n '\\u00FC': 'u',\n '\\u01DC': 'u',\n '\\u01D8': 'u',\n '\\u01D6': 'u',\n '\\u01DA': 'u',\n '\\u1EE7': 'u',\n '\\u016F': 'u',\n '\\u0171': 'u',\n '\\u01D4': 'u',\n '\\u0215': 'u',\n '\\u0217': 'u',\n '\\u01B0': 'u',\n '\\u1EEB': 'u',\n '\\u1EE9': 'u',\n '\\u1EEF': 'u',\n '\\u1EED': 'u',\n '\\u1EF1': 'u',\n '\\u1EE5': 'u',\n '\\u1E73': 'u',\n '\\u0173': 'u',\n '\\u1E77': 'u',\n '\\u1E75': 'u',\n '\\u0289': 'u',\n '\\u24E5': 'v',\n '\\uFF56': 'v',\n '\\u1E7D': 'v',\n '\\u1E7F': 'v',\n '\\u028B': 'v',\n '\\uA75F': 'v',\n '\\u028C': 'v',\n '\\uA761': 'vy',\n '\\u24E6': 'w',\n '\\uFF57': 'w',\n '\\u1E81': 'w',\n '\\u1E83': 'w',\n '\\u0175': 'w',\n '\\u1E87': 'w',\n '\\u1E85': 'w',\n '\\u1E98': 'w',\n '\\u1E89': 'w',\n '\\u2C73': 'w',\n '\\u24E7': 'x',\n '\\uFF58': 'x',\n '\\u1E8B': 'x',\n '\\u1E8D': 'x',\n '\\u24E8': 'y',\n '\\uFF59': 'y',\n '\\u1EF3': 'y',\n '\\u00FD': 'y',\n '\\u0177': 'y',\n '\\u1EF9': 'y',\n '\\u0233': 'y',\n '\\u1E8F': 'y',\n '\\u00FF': 'y',\n '\\u1EF7': 'y',\n '\\u1E99': 'y',\n '\\u1EF5': 'y',\n '\\u01B4': 'y',\n '\\u024F': 'y',\n '\\u1EFF': 'y',\n '\\u24E9': 'z',\n '\\uFF5A': 'z',\n '\\u017A': 'z',\n '\\u1E91': 'z',\n '\\u017C': 'z',\n '\\u017E': 'z',\n '\\u1E93': 'z',\n '\\u1E95': 'z',\n '\\u01B6': 'z',\n '\\u0225': 'z',\n '\\u0240': 'z',\n '\\u2C6C': 'z',\n '\\uA763': 'z',\n '\\u0386': '\\u0391',\n '\\u0388': '\\u0395',\n '\\u0389': '\\u0397',\n '\\u038A': '\\u0399',\n '\\u03AA': '\\u0399',\n '\\u038C': '\\u039F',\n '\\u038E': '\\u03A5',\n '\\u03AB': '\\u03A5',\n '\\u038F': '\\u03A9',\n '\\u03AC': '\\u03B1',\n '\\u03AD': '\\u03B5',\n '\\u03AE': '\\u03B7',\n '\\u03AF': '\\u03B9',\n '\\u03CA': '\\u03B9',\n '\\u0390': '\\u03B9',\n '\\u03CC': '\\u03BF',\n '\\u03CD': '\\u03C5',\n '\\u03CB': '\\u03C5',\n '\\u03B0': '\\u03C5',\n '\\u03C9': '\\u03C9',\n '\\u03C2': '\\u03C3'\n };\n DataUtil.fnOperators = {\n /**\n * Returns true when the actual input is equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param {boolean} ignoreAccent?\n */\n equal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) === DataUtil.toLowerCase(expected);\n }\n return actual === expected;\n },\n /**\n * Returns true when the actual input is not equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n notequal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n return !DataUtil.fnOperators.equal(actual, expected, ignoreCase);\n },\n /**\n * Returns true when the actual input is less than to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n lessthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) < DataUtil.toLowerCase(expected);\n }\n return actual < expected;\n },\n /**\n * Returns true when the actual input is greater than to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n greaterthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) > DataUtil.toLowerCase(expected);\n }\n return actual > expected;\n },\n /**\n * Returns true when the actual input is less than or equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n lessthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) <= DataUtil.toLowerCase(expected);\n }\n return actual <= expected;\n },\n /**\n * Returns true when the actual input is greater than or equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n greaterthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) >= DataUtil.toLowerCase(expected);\n }\n return actual >= expected;\n },\n /**\n * Returns true when the actual input contains the given string.\n * @param {string|number} actual\n * @param {string|number} expected\n * @param {boolean} ignoreCase?\n */\n contains: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n DataUtil.toLowerCase(actual).indexOf(DataUtil.toLowerCase(expected)) !== -1;\n }\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n actual.toString().indexOf(expected) !== -1;\n },\n /**\n * Returns true when the given input value is not null.\n * @param {string|number} actual\n * @returns boolean\n */\n notnull: function (actual) {\n return actual !== null;\n },\n /**\n * Returns true when the given input value is null.\n * @param {string|number} actual\n * @returns boolean\n */\n isnull: function (actual) {\n return actual === null;\n },\n /**\n * Returns true when the actual input starts with the given string\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n startswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.startsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.startsWith(actual, expected);\n },\n /**\n * Returns true when the actual input ends with the given string.\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n endswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.endsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.endsWith(actual, expected);\n },\n /**\n * It will return the filter operator based on the filter symbol.\n * @param {string} operator\n * @hidden\n */\n processSymbols: function (operator) {\n var fnName = DataUtil.operatorSymbols[operator];\n if (fnName) {\n var fn = DataUtil.fnOperators[fnName];\n return fn;\n }\n return DataUtil.throwError('Query - Process Operator : Invalid operator');\n },\n /**\n * It will return the valid filter operator based on the specified operators.\n * @param {string} operator\n * @hidden\n */\n processOperator: function (operator) {\n var fn = DataUtil.fnOperators[operator];\n if (fn) {\n return fn;\n }\n return DataUtil.fnOperators.processSymbols(operator);\n }\n };\n /**\n * To perform the parse operation on JSON data, like convert to string from JSON or convert to JSON from string.\n */\n DataUtil.parse = {\n /**\n * Parse the given string to the plain JavaScript object.\n * @param {string|Object|Object[]} jsonText\n */\n parseJson: function (jsonText) {\n if (typeof jsonText === 'string') {\n jsonText = JSON.parse(jsonText, DataUtil.parse.jsonReviver);\n }\n else if (jsonText instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(jsonText);\n }\n else if (typeof jsonText === 'object') {\n DataUtil.parse.iterateAndReviveJson(jsonText);\n }\n return jsonText;\n },\n /**\n * It will perform on array of values.\n * @param {string[]|Object[]} array\n * @hidden\n */\n iterateAndReviveArray: function (array) {\n for (var i = 0; i < array.length; i++) {\n if (typeof array[i] === 'object') {\n DataUtil.parse.iterateAndReviveJson(array[i]);\n }\n else if (typeof array[i] === 'string' && !/^[\\s]*\\[|^[\\s]*\\{|\\\"/g.test(array[i])) {\n array[i] = DataUtil.parse.jsonReviver('', array[i]);\n }\n else {\n array[i] = DataUtil.parse.parseJson(array[i]);\n }\n }\n },\n /**\n * It will perform on JSON values\n * @param {JSON} json\n * @hidden\n */\n iterateAndReviveJson: function (json) {\n var value;\n var keys = Object.keys(json);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var prop = keys_2[_i];\n if (DataUtil.startsWith(prop, '__')) {\n continue;\n }\n value = json[prop];\n if (typeof value === 'object') {\n if (value instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(value);\n }\n else if (value) {\n DataUtil.parse.iterateAndReviveJson(value);\n }\n }\n else {\n json[prop] = DataUtil.parse.jsonReviver(json[prop], value);\n }\n }\n },\n /**\n * It will perform on JSON values\n * @param {string} field\n * @param {string|Date} value\n * @hidden\n */\n jsonReviver: function (field, value) {\n var dupValue = value;\n if (typeof value === 'string') {\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n if (ms) {\n return DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), DataUtil.serverTimezoneOffset, true);\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var arr = dupValue.split(/[^0-9]/);\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10)), DataUtil.serverTimezoneOffset, true);\n }\n }\n return value;\n },\n /**\n * Check wheather the given value is JSON or not.\n * @param {Object[]} jsonData\n */\n isJson: function (jsonData) {\n if (typeof jsonData[0] === 'string') {\n return jsonData;\n }\n return DataUtil.parse.parseJson(jsonData);\n },\n /**\n * Checks wheather the given value is GUID or not.\n * @param {string} value\n */\n isGuid: function (value) {\n var regex = /[A-Fa-f0-9]{8}(?:-[A-Fa-f0-9]{4}){3}-[A-Fa-f0-9]{12}/i;\n var match = regex.exec(value);\n return match != null;\n },\n /**\n * The method used to replace the value based on the type.\n * @param {Object} value\n * @param {boolean} stringify\n * @hidden\n */\n replacer: function (value, stringify) {\n if (DataUtil.isPlainObject(value)) {\n return DataUtil.parse.jsonReplacer(value, stringify);\n }\n if (value instanceof Array) {\n return DataUtil.parse.arrayReplacer(value);\n }\n if (value instanceof Date) {\n return DataUtil.parse.jsonReplacer({ val: value }, stringify).val;\n }\n return value;\n },\n /**\n * It will replace the JSON value.\n * @param {string} key\n * @param {Object} val\n * @hidden\n */\n jsonReplacer: function (val, stringify) {\n var value;\n var keys = Object.keys(val);\n for (var _i = 0, keys_3 = keys; _i < keys_3.length; _i++) {\n var prop = keys_3[_i];\n value = val[prop];\n if (!(value instanceof Date)) {\n continue;\n }\n var d = value;\n val[prop] = DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(d), DataUtil.serverTimezoneOffset).toJSON();\n }\n return val;\n },\n /**\n * It will replace the Array of value.\n * @param {string} key\n * @param {Object[]} val\n * @hidden\n */\n arrayReplacer: function (val) {\n for (var i = 0; i < val.length; i++) {\n if (DataUtil.isPlainObject(val[i])) {\n val[i] = DataUtil.parse.jsonReplacer(val[i]);\n }\n else if (val[i] instanceof Date) {\n val[i] = DataUtil.parse.jsonReplacer({ date: val[i] }).date;\n }\n }\n return val;\n }\n };\n /**\n * @hidden\n */\n DataUtil.dateParse = {\n addSelfOffset: function (input) {\n return new Date(+input - (input.getTimezoneOffset() * 60000));\n },\n toUTC: function (input) {\n return new Date(+input + (input.getTimezoneOffset() * 60000));\n },\n toTimeZone: function (input, offset, utc) {\n if (offset === null) {\n return input;\n }\n var unix = utc ? DataUtil.dateParse.toUTC(input) : input;\n return new Date(+unix - (offset * 3600000));\n }\n };\n return DataUtil;\n}());\nexport { DataUtil };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { merge, extend, isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';\nimport { DataUtil } from './util';\nimport { Query, Predicate } from './query';\n/**\n * Adaptors are specific data source type aware interfaces that are used by DataManager to communicate with DataSource.\n * This is the base adaptor class that other adaptors can extend.\n * @hidden\n */\nvar Adaptor = /** @class */ (function () {\n /**\n * Constructor for Adaptor class\n * @param {DataOptions} ds?\n * @hidden\n * @returns aggregates\n */\n function Adaptor(ds) {\n // common options for all the adaptors \n this.options = {\n from: 'table',\n requestType: 'json',\n sortBy: 'sorted',\n select: 'select',\n skip: 'skip',\n group: 'group',\n take: 'take',\n search: 'search',\n count: 'requiresCounts',\n where: 'where',\n aggregates: 'aggregates'\n };\n /**\n * Specifies the type of adaptor.\n * @default Adaptor\n */\n this.type = Adaptor;\n this.dataSource = ds;\n this.pvt = {};\n }\n /**\n * Returns the data from the query processing.\n * @param {Object} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @returns Object\n */\n Adaptor.prototype.processResponse = function (data, ds, query, xhr) {\n return data;\n };\n return Adaptor;\n}());\nexport { Adaptor };\n/**\n * JsonAdaptor is used to process JSON data. It contains methods to process the given JSON data based on the queries.\n * @hidden\n */\nvar JsonAdaptor = /** @class */ (function (_super) {\n __extends(JsonAdaptor, _super);\n function JsonAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the JSON data based on the provided queries.\n * @param {DataManager} dataManager\n * @param {Query} query\n * @returns Object\n */\n JsonAdaptor.prototype.processQuery = function (dataManager, query) {\n var result = dataManager.dataSource.json.slice(0);\n var count = result.length;\n var countFlg = true;\n var ret;\n var key;\n var agg = {};\n for (var i = 0; i < query.queries.length; i++) {\n key = query.queries[i];\n ret = this[key.fn].call(this, result, key.e, query);\n if (key.fn === 'onAggregates') {\n agg[key.e.field + ' - ' + key.e.type] = ret;\n }\n else {\n result = ret !== undefined ? ret : result;\n }\n if (key.fn === 'onPage' || key.fn === 'onSkip' || key.fn === 'onTake' || key.fn === 'onRange') {\n countFlg = false;\n }\n if (countFlg) {\n count = result.length;\n }\n }\n if (query.isCountRequired) {\n result = {\n result: result,\n count: count,\n aggregates: agg\n };\n }\n return result;\n };\n /**\n * Performs batch update in the JSON array which add, remove and update records.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n JsonAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var i;\n for (i = 0; i < changes.addedRecords.length; i++) {\n this.insert(dm, changes.addedRecords[i]);\n }\n for (i = 0; i < changes.changedRecords.length; i++) {\n this.update(dm, e.key, changes.changedRecords[i]);\n }\n for (i = 0; i < changes.deletedRecords.length; i++) {\n this.remove(dm, e.key, changes.deletedRecords[i]);\n }\n return changes;\n };\n /**\n * Performs filter operation with the given data and where query.\n * @param {Object[]} ds\n * @param {{validate:Function}} e\n */\n JsonAdaptor.prototype.onWhere = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.filter(function (obj) {\n if (e) {\n return e.validate(obj);\n }\n });\n };\n /**\n * Returns aggregate function based on the aggregate type.\n * @param {Object[]} ds\n * @param {{field:string} e\n * @param {string}} type\n */\n JsonAdaptor.prototype.onAggregates = function (ds, e) {\n var fn = DataUtil.aggregates[e.type];\n if (!ds || !fn || ds.length === 0) {\n return null;\n }\n return fn(ds, e.field);\n };\n /**\n * Performs search operation based on the given query.\n * @param {Object[]} ds\n * @param {QueryOptions} e\n */\n JsonAdaptor.prototype.onSearch = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n if (e.fieldNames.length === 0) {\n DataUtil.getFieldList(ds[0], e.fieldNames);\n }\n return ds.filter(function (obj) {\n for (var j = 0; j < e.fieldNames.length; j++) {\n if (e.comparer.call(obj, DataUtil.getObject(e.fieldNames[j], obj), e.searchKey, e.ignoreCase)) {\n return true;\n }\n }\n return false;\n });\n };\n /**\n * Sort the data with given direction and field.\n * @param {Object[]} ds\n * @param {{comparer:(a:Object} e\n * @param {Object} b\n */\n JsonAdaptor.prototype.onSortBy = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var fnCompare;\n var field = DataUtil.getValue(e.fieldName, query);\n if (!field) {\n return ds.sort(e.comparer);\n }\n if (field instanceof Array) {\n field = field.slice(0);\n for (var i = field.length - 1; i >= 0; i--) {\n if (!field[i]) {\n continue;\n }\n fnCompare = e.comparer;\n if (DataUtil.endsWith(field[i], ' desc')) {\n fnCompare = DataUtil.fnSort('descending');\n field[i] = field[i].replace(' desc', '');\n }\n ds = DataUtil.sort(ds, field[i], fnCompare);\n }\n return ds;\n }\n return DataUtil.sort(ds, field, e.comparer);\n };\n /**\n * Group the data based on the given query.\n * @param {Object[]} ds\n * @param {QueryOptions} e\n * @param {Query} query\n */\n JsonAdaptor.prototype.onGroup = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var aggQuery = Query.filterQueries(query.queries, 'onAggregates');\n var agg = [];\n if (aggQuery.length) {\n var tmp = void 0;\n for (var i = 0; i < aggQuery.length; i++) {\n tmp = aggQuery[i].e;\n agg.push({ type: tmp.type, field: DataUtil.getValue(tmp.field, query) });\n }\n }\n return DataUtil.group(ds, DataUtil.getValue(e.fieldName, query), agg, null, null, e.comparer);\n };\n /**\n * Retrieves records based on the given page index and size.\n * @param {Object[]} ds\n * @param {{pageSize:number} e\n * @param {number}} pageIndex\n * @param {Query} query\n */\n JsonAdaptor.prototype.onPage = function (ds, e, query) {\n var size = DataUtil.getValue(e.pageSize, query);\n var start = (DataUtil.getValue(e.pageIndex, query) - 1) * size;\n var end = start + size;\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(start, end);\n };\n /**\n * Retrieves records based on the given start and end index from query.\n * @param {Object[]} ds\n * @param {{start:number} e\n * @param {number}} end\n */\n JsonAdaptor.prototype.onRange = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.start), DataUtil.getValue(e.end));\n };\n /**\n * Picks the given count of records from the top of the datasource.\n * @param {Object[]} ds\n * @param {{nos:number}} e\n */\n JsonAdaptor.prototype.onTake = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(0, DataUtil.getValue(e.nos));\n };\n /**\n * Skips the given count of records from the data source.\n * @param {Object[]} ds\n * @param {{nos:number}} e\n */\n JsonAdaptor.prototype.onSkip = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.nos));\n };\n /**\n * Selects specified columns from the data source.\n * @param {Object[]} ds\n * @param {{fieldNames:string}} e\n */\n JsonAdaptor.prototype.onSelect = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return DataUtil.select(ds, DataUtil.getValue(e.fieldNames));\n };\n /**\n * Inserts new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {number} position\n */\n JsonAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n if (isNullOrUndefined(position)) {\n return dm.dataSource.json.push(data);\n }\n else {\n return dm.dataSource.json.splice(position, 0, data);\n }\n };\n /**\n * Remove the data from the dataSource based on the key field value.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns null\n */\n JsonAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n if (typeof value === 'object') {\n value = value[keyField];\n }\n for (i = 0; i < ds.length; i++) {\n if (ds[i][keyField] === value) {\n break;\n }\n }\n return i !== ds.length ? ds.splice(i, 1) : null;\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns null\n */\n JsonAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n var key = value[keyField];\n for (i = 0; i < ds.length; i++) {\n if (ds[i][keyField] === key) {\n break;\n }\n }\n return i < ds.length ? merge(ds[i], value) : null;\n };\n return JsonAdaptor;\n}(Adaptor));\nexport { JsonAdaptor };\n/**\n * URL Adaptor of DataManager can be used when you are required to use remote service to retrieve data.\n * It interacts with server-side for all DataManager Queries and CRUD operations.\n * @hidden\n */\nvar UrlAdaptor = /** @class */ (function (_super) {\n __extends(UrlAdaptor, _super);\n function UrlAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the query to generate request body.\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @returns p\n */\n UrlAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var params = query.params;\n var url = dm.dataSource.url;\n var temp;\n var skip;\n var take = null;\n var options = this.options;\n var request = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n // calc Paging & Range\n if ('onPage' in singles) {\n temp = singles.onPage;\n skip = DataUtil.getValue(temp.pageIndex, query);\n take = DataUtil.getValue(temp.pageSize, query);\n skip = (skip - 1) * take;\n }\n else if ('onRange' in singles) {\n temp = singles.onRange;\n skip = temp.start;\n take = temp.end - temp.start;\n }\n // Sorting\n for (var i = 0; i < queries.sorts.length; i++) {\n temp = DataUtil.getValue(queries.sorts[i].e.fieldName, query);\n request.sorts.push(DataUtil.callAdaptorFunction(this, 'onEachSort', { name: temp, direction: queries.sorts[i].e.direction }, query));\n }\n // hierarchy\n if (hierarchyFilters) {\n temp = this.getFiltersFrom(hierarchyFilters, query);\n if (temp) {\n request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', temp.toJson(), query));\n }\n }\n // Filters\n for (var i = 0; i < queries.filters.length; i++) {\n request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', queries.filters[i].e.toJson(), query));\n var keys_1 = typeof request.filters[i] === 'object' ? Object.keys(request.filters[i]) : [];\n for (var _i = 0, keys_2 = keys_1; _i < keys_2.length; _i++) {\n var prop = keys_2[_i];\n if (DataUtil.isNull((request)[prop])) {\n delete request[prop];\n }\n }\n }\n // Searches\n for (var i = 0; i < queries.searches.length; i++) {\n temp = queries.searches[i].e;\n request.searches.push(DataUtil.callAdaptorFunction(this, 'onEachSearch', {\n fields: temp.fieldNames,\n operator: temp.operator,\n key: temp.searchKey,\n ignoreCase: temp.ignoreCase\n }, query));\n }\n // Grouping\n for (var i = 0; i < queries.groups.length; i++) {\n request.groups.push(DataUtil.getValue(queries.groups[i].e.fieldName, query));\n }\n // aggregates\n for (var i = 0; i < queries.aggregates.length; i++) {\n temp = queries.aggregates[i].e;\n request.aggregates.push({ type: temp.type, field: DataUtil.getValue(temp.field, query) });\n }\n var req = {};\n this.getRequestQuery(options, query, singles, request, req);\n // Params\n DataUtil.callAdaptorFunction(this, 'addParams', { dm: dm, query: query, params: params, reqParams: req });\n // cleanup\n var keys = Object.keys(req);\n for (var _a = 0, keys_3 = keys; _a < keys_3.length; _a++) {\n var prop = keys_3[_a];\n if (DataUtil.isNull(req[prop]) || req[prop] === '' || req[prop].length === 0) {\n delete req[prop];\n }\n }\n if (!(options.skip in req && options.take in req) && take !== null) {\n req[options.skip] = DataUtil.callAdaptorFunction(this, 'onSkip', skip, query);\n req[options.take] = DataUtil.callAdaptorFunction(this, 'onTake', take, query);\n }\n var p = this.pvt;\n this.pvt = {};\n if (this.options.requestType === 'json') {\n return {\n data: JSON.stringify(req),\n url: url,\n pvtData: p,\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n }\n temp = this.convertToQueryString(req, query, dm);\n temp = (dm.dataSource.url.indexOf('?') !== -1 ? '&' : '/') + temp;\n return {\n type: 'GET', url: temp.length ? url.replace(/\\/*$/, temp) : url, pvtData: p\n };\n };\n UrlAdaptor.prototype.getRequestQuery = function (options, query, singles, request, request1) {\n var param = 'param';\n var req = request1;\n req[options.from] = query.fromTable;\n if (options.expand) {\n req[options.expand] = query.expands;\n }\n req[options.select] = 'onSelect' in singles ?\n DataUtil.callAdaptorFunction(this, 'onSelect', DataUtil.getValue(singles.onSelect.fieldNames, query), query) : '';\n req[options.count] = query.isCountRequired ? DataUtil.callAdaptorFunction(this, 'onCount', query.isCountRequired, query) : '';\n req[options.search] = request.searches.length ? DataUtil.callAdaptorFunction(this, 'onSearch', request.searches, query) : '';\n req[options.skip] = 'onSkip' in singles ?\n DataUtil.callAdaptorFunction(this, 'onSkip', DataUtil.getValue(singles.onSkip.nos, query), query) : '';\n req[options.take] = 'onTake' in singles ?\n DataUtil.callAdaptorFunction(this, 'onTake', DataUtil.getValue(singles.onTake.nos, query), query) : '';\n req[options.where] = request.filters.length || request.searches.length ?\n DataUtil.callAdaptorFunction(this, 'onWhere', request.filters, query) : '';\n req[options.sortBy] = request.sorts.length ? DataUtil.callAdaptorFunction(this, 'onSortBy', request.sorts, query) : '';\n req[options.group] = request.groups.length ? DataUtil.callAdaptorFunction(this, 'onGroup', request.groups, query) : '';\n req[options.aggregates] = request.aggregates.length ?\n DataUtil.callAdaptorFunction(this, 'onAggregates', request.aggregates, query) : '';\n req[param] = [];\n };\n /**\n * Convert the object from processQuery to string which can be added query string.\n * @param {Object} req\n * @param {Query} query\n * @param {DataManager} dm\n */\n UrlAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n return '';\n // this needs to be overridden\n };\n /**\n * Return the data from the data manager processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Object} request?\n * @param {CrudOptions} changes?\n */\n UrlAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var requests = request;\n var pvt = requests.pvtData || {};\n var groupDs = data.groupDs;\n if (xhr && xhr.getResponseHeader('Content-Type') &&\n xhr.getResponseHeader('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n var d = JSON.parse(requests.data);\n if (d && d.action === 'batch' && data.addedRecords) {\n changes.addedRecords = data.addedRecords;\n return changes;\n }\n if (data.d) {\n data = data.d;\n }\n var args = {};\n if ('count' in data) {\n args.count = data.count;\n }\n args.result = data.result ? data.result : data;\n this.getAggregateResult(pvt, data, args, groupDs);\n return DataUtil.isNull(args.count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n /**\n * Add the group query to the adaptor`s option.\n * @param {Object[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return e;\n };\n /**\n * Add the aggregate query to the adaptor`s option.\n * @param {Aggregates[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {Object} e\n */\n UrlAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var url;\n var key;\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.removeUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify({\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e[url],\n key: e[key]\n })\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @returns void\n */\n UrlAdaptor.prototype.beforeSend = function (dm, request) {\n // need to extend this method\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName\n */\n UrlAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify({\n value: data,\n table: tableName,\n action: 'insert'\n })\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number|string} value\n * @param {string} tableName\n */\n UrlAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify({\n key: value,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n })\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n UrlAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify({\n value: value,\n action: 'update',\n keyColumn: keyField,\n key: value[keyField],\n table: tableName\n })\n };\n };\n /**\n * To generate the predicate based on the filtered query.\n * @param {Object[]|string[]|number[]} data\n * @param {Query} query\n * @hidden\n */\n UrlAdaptor.prototype.getFiltersFrom = function (data, query) {\n var key = query.fKey;\n var value;\n var prop = key;\n var pKey = query.key;\n var predicats = [];\n if (typeof data[0] !== 'object') {\n prop = null;\n }\n for (var i = 0; i < data.length; i++) {\n if (typeof data[0] === 'object') {\n value = DataUtil.getObject(pKey || prop, data[i]);\n }\n else {\n value = data[i];\n }\n predicats.push(new Predicate(key, 'equal', value));\n }\n return Predicate.or(predicats);\n };\n UrlAdaptor.prototype.getAggregateResult = function (pvt, data, args, groupDs) {\n var pData = data;\n if (data && data.result) {\n pData = data.result;\n }\n if (pvt && pvt.aggregates && pvt.aggregates.length) {\n var agg = pvt.aggregates;\n var fn = void 0;\n var aggregateData = pData;\n var res = {};\n if (data.aggregate) {\n aggregateData = data.aggregate;\n }\n for (var i = 0; i < agg.length; i++) {\n fn = DataUtil.aggregates[agg[i].type];\n if (fn) {\n res[agg[i].field + ' - ' + agg[i].type] = fn(aggregateData, agg[i].field);\n }\n }\n args.aggregates = res;\n }\n if (pvt && pvt.groups && pvt.groups.length) {\n var groups = pvt.groups;\n for (var i = 0; i < groups.length; i++) {\n var level = null;\n if (!isNullOrUndefined(groupDs)) {\n groupDs = DataUtil.group(groupDs, groups[i]);\n }\n pData = DataUtil.group(pData, groups[i], pvt.aggregates, level, groupDs);\n }\n args.result = pData;\n }\n return args;\n };\n UrlAdaptor.prototype.getQueryRequest = function (query) {\n var req = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n req.sorts = Query.filterQueries(query.queries, 'onSortBy');\n req.groups = Query.filterQueries(query.queries, 'onGroup');\n req.filters = Query.filterQueries(query.queries, 'onWhere');\n req.searches = Query.filterQueries(query.queries, 'onSearch');\n req.aggregates = Query.filterQueries(query.queries, 'onAggregates');\n return req;\n };\n UrlAdaptor.prototype.addParams = function (options) {\n var req = options.reqParams;\n if (options.params.length) {\n req.params = {};\n }\n for (var _i = 0, _a = options.params; _i < _a.length; _i++) {\n var tmp = _a[_i];\n if (req[tmp.key]) {\n throw new Error('Query() - addParams: Custom Param is conflicting other request arguments');\n }\n req[tmp.key] = tmp.value;\n if (tmp.fn) {\n req[tmp.key] = tmp.fn.call(options.query, tmp.key, options.query, options.dm);\n }\n req.params[tmp.key] = req[tmp.key];\n }\n };\n return UrlAdaptor;\n}(Adaptor));\nexport { UrlAdaptor };\n/**\n * OData Adaptor that is extended from URL Adaptor, is used for consuming data through OData Service.\n * @hidden\n */\nvar ODataAdaptor = /** @class */ (function (_super) {\n __extends(ODataAdaptor, _super);\n function ODataAdaptor() {\n var _this = _super.call(this) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$inlinecount',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 '\n });\n _this.getModuleName = getValue('getModulename', _this);\n return _this;\n }\n /**\n * Generate request string based on the filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var operator;\n var guid;\n var val = predicate.value;\n var type = typeof val;\n var field = predicate.field ? ODataAdaptor.getField(predicate.field) : null;\n if (val instanceof Date) {\n val = 'datetime\\'' + DataUtil.parse.replacer(val) + '\\'';\n }\n if (type === 'string') {\n val = '\\'' + val + '\\'';\n if (requiresCast) {\n field = 'cast(' + field + ', \\'Edm.String\\')';\n }\n if (DataUtil.parse.isGuid(val)) {\n guid = 'guid';\n }\n if (predicate.ignoreCase) {\n if (!guid) {\n field = 'tolower(' + field + ')';\n }\n val = val.toLowerCase();\n }\n }\n operator = DataUtil.odBiOperator[predicate.operator];\n if (operator) {\n returnValue += field;\n returnValue += operator;\n if (guid) {\n returnValue += guid;\n }\n return returnValue + val;\n }\n if (!isNullOrUndefined(this.getModuleName)) {\n if (this.getModuleName() === 'ODataV4Adaptor') {\n operator = DataUtil.odv4UniOperator[predicate.operator];\n }\n }\n else {\n operator = DataUtil.odUniOperator[predicate.operator];\n }\n if (operator === 'substringof') {\n var temp = val;\n val = field;\n field = temp;\n }\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += val + ')';\n return returnValue;\n };\n /**\n * Generate request string based on the multiple filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onComplexPredicate = function (predicate, query, requiresCast) {\n var res = [];\n for (var i = 0; i < predicate.predicates.length; i++) {\n res.push('(' + this.onEachWhere(predicate.predicates[i], query, requiresCast) + ')');\n }\n return res.join(' ' + predicate.condition + ' ');\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n * @param {Predicate} filter\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onEachWhere = function (filter, query, requiresCast) {\n return filter.isComplex ? this.onComplexPredicate(filter, query, requiresCast) : this.onPredicate(filter, query, requiresCast);\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n * @param {string[]} filters\n */\n ODataAdaptor.prototype.onWhere = function (filters) {\n if (this.pvt.search) {\n filters.push(this.onEachWhere(this.pvt.search, null, true));\n }\n return filters.join(' and ');\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n * @param {{fields:string[]} e\n * @param {string} operator\n * @param {string} key\n * @param {boolean}} ignoreCase\n */\n ODataAdaptor.prototype.onEachSearch = function (e) {\n if (e.fields && e.fields.length === 0) {\n DataUtil.throwError('Query() - Search : oData search requires list of field names to search');\n }\n var filter = this.pvt.search || [];\n for (var i = 0; i < e.fields.length; i++) {\n filter.push(new Predicate(e.fields[i], e.operator, e.key, e.ignoreCase));\n }\n this.pvt.search = filter;\n };\n /**\n * Generate query string based on the search criteria from query.\n * @param {Object} e\n */\n ODataAdaptor.prototype.onSearch = function (e) {\n this.pvt.search = Predicate.or(this.pvt.search);\n return '';\n };\n /**\n * Generate query string based on multiple sort criteria from query.\n * @param {QueryOptions} e\n */\n ODataAdaptor.prototype.onEachSort = function (e) {\n var res = [];\n if (e.name instanceof Array) {\n for (var i = 0; i < e.name.length; i++) {\n res.push(ODataAdaptor.getField(e.name[i]) + (e.direction === 'descending' ? ' desc' : ''));\n }\n }\n else {\n res.push(ODataAdaptor.getField(e.name) + (e.direction === 'descending' ? ' desc' : ''));\n }\n return res.join(',');\n };\n /**\n * Returns sort query string.\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSortBy = function (e) {\n return e.reverse().join(',');\n };\n /**\n * Adds the group query to the adaptor option.\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return [];\n };\n /**\n * Returns the select query string.\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSelect = function (e) {\n for (var i = 0; i < e.length; i++) {\n e[i] = ODataAdaptor.getField(e[i]);\n }\n return e.join(',');\n };\n /**\n * Add the aggregate query to the adaptor option.\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n return '';\n };\n /**\n * Returns the query string which requests total count from the data source.\n * @param {boolean} e\n * @returns string\n */\n ODataAdaptor.prototype.onCount = function (e) {\n return e === true ? 'allpages' : '';\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings?\n */\n ODataAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (DataUtil.endsWith(settings.url, this.options.batch) && settings.type.toLowerCase() === 'post') {\n request.setRequestHeader('Accept', this.options.multipartAccept);\n request.setRequestHeader('DataServiceVersion', '2.0');\n request.overrideMimeType('text/plain; charset=x-user-defined');\n }\n else {\n request.setRequestHeader('Accept', this.options.accept);\n }\n request.setRequestHeader('DataServiceVersion', '2.0');\n request.setRequestHeader('MaxDataServiceVersion', '2.0');\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n ODataAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var pvtData = 'pvtData';\n if (!isNullOrUndefined(data.d)) {\n var dataCopy = ((query && query.isCountRequired) ? data.d.results : data.d);\n var metaData = '__metadata';\n if (!isNullOrUndefined(dataCopy)) {\n for (var i = 0; i < dataCopy.length; i++) {\n if (!isNullOrUndefined(dataCopy[i][metaData])) {\n delete dataCopy[i][metaData];\n }\n }\n }\n }\n var pvt = request && request[pvtData];\n var emptyAndBatch = this.processBatchResponse(data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var versionCheck = xhr && request.getResponseHeader('DataServiceVersion');\n var count = null;\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n var oDataCount = '__count';\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n if (data.d) {\n data = data.d;\n }\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n }\n if (version === 3 && data.value) {\n data = data.value;\n }\n if (data.d) {\n data = data.d;\n }\n if (version < 3 && data.results) {\n data = data.results;\n }\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n /**\n * Converts the request object to query string.\n * @param {Object} req\n * @param {Query} query\n * @param {DataManager} dm\n * @returns tableName\n */\n ODataAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n var res = [];\n var table = 'table';\n var tableName = request[table] || '';\n var format = '$format';\n delete request[table];\n if (dm.dataSource.requiresFormat) {\n request[format] = 'json';\n }\n var keys = Object.keys(request);\n for (var _i = 0, keys_4 = keys; _i < keys_4.length; _i++) {\n var prop = keys_4[_i];\n res.push(prop + '=' + request[prop]);\n }\n res = res.join('&');\n if (dm.dataSource.url && dm.dataSource.url.indexOf('?') !== -1 && !tableName) {\n return res;\n }\n return res.length ? tableName + '?' + res : tableName || '';\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n ODataAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n url: dm.dataSource.url.replace(/\\/*$/, tableName ? '/' + tableName : ''),\n data: JSON.stringify(data)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n */\n ODataAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n return {\n type: 'DELETE',\n url: dm.dataSource.url.replace(/\\/*$/, tableName ? '/' + tableName : '') + '(' + value + ')'\n };\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns this\n */\n ODataAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n return {\n type: 'PUT',\n url: dm.dataSource.url.replace(/\\/*$/, tableName ? '/' + tableName : '') + '(' + value[keyField] + ')',\n data: JSON.stringify(value),\n accept: this.options.accept\n };\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n * @returns {Object}\n */\n ODataAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = dm.dataSource.url.replace(/\\/*$/, '/' + this.options.batch);\n var args = {\n url: e.url,\n key: e.key,\n cid: 1,\n cSet: DataUtil.getGuid(this.options.changeSet)\n };\n var req = '--' + initialGuid + '\\n';\n req += 'Content-Type: multipart/mixed; boundary=' + args.cSet.replace('--', '') + '\\n';\n this.pvt.changeSet = 0;\n req += this.generateInsertRequest(changes.addedRecords, args);\n req += this.generateUpdateRequest(changes.changedRecords, args);\n req += this.generateDeleteRequest(changes.deletedRecords, args);\n req += args.cSet + '--\\n';\n req += '--' + initialGuid + '--';\n return {\n type: 'POST',\n url: url,\n dataType: 'json',\n contentType: 'multipart/mixed; charset=UTF-8;boundary=' + initialGuid,\n data: req\n };\n };\n /**\n * Generate the string content from the removed records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n * @returns this\n */\n ODataAdaptor.prototype.generateDeleteRequest = function (arr, e) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'DELETE ',\n 'url': function (data, i, key) { return '(' + data[i][key] + ')'; },\n 'data': function (data, i) { return ''; }\n };\n req = this.generateBodyContent(arr, e, stat);\n return req + '\\n';\n };\n /**\n * Generate the string content from the inserted records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n */\n ODataAdaptor.prototype.generateInsertRequest = function (arr, e) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat);\n return req;\n };\n /**\n * Generate the string content from the updated records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n */\n ODataAdaptor.prototype.generateUpdateRequest = function (arr, e) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'PUT ',\n 'url': function (data, i, key) { return '(' + data[i][key] + ')'; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat);\n return req;\n };\n ODataAdaptor.getField = function (prop) {\n return prop.replace(/\\./g, '/');\n };\n ODataAdaptor.prototype.generateBodyContent = function (arr, e, stat) {\n var req = '';\n for (var i = 0; i < arr.length; i++) {\n req += '\\n' + e.cSet + '\\n';\n req += this.options.changeSetContent + '\\n\\n';\n req += stat.method;\n req += e.url + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n req += 'Accept: ' + this.options.accept + '\\n';\n req += 'Content-Id: ' + this.pvt.changeSet++ + '\\n';\n req += this.options.batchChangeSetContentType + '\\n\\n';\n req += stat.data(arr, i);\n }\n return req;\n };\n ODataAdaptor.prototype.processBatchResponse = function (data, query, xhr, request, changes) {\n if (xhr && xhr.getResponseHeader('Content-Type') && xhr.getResponseHeader('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n if (request && this.options.batch && DataUtil.endsWith(request.url, this.options.batch) && request.type.toLowerCase() === 'post') {\n var guid = xhr.getResponseHeader('Content-Type');\n var cIdx = void 0;\n var jsonObj = void 0;\n var d = data + '';\n guid = guid.substring(guid.indexOf('=batchresponse') + 1);\n d = d.split(guid);\n if (d.length < 2) {\n return {};\n }\n d = d[1];\n var exVal = /(?:\\bContent-Type.+boundary=)(changesetresponse.+)/i.exec(d);\n if (exVal) {\n d.replace(exVal[0], '');\n }\n var changeGuid = exVal ? exVal[1] : '';\n d = d.split(changeGuid);\n for (var i = d.length; i > -1; i--) {\n if (!/\\bContent-ID:/i.test(d[i]) || !/\\bHTTP.+201/.test(d[i])) {\n continue;\n }\n cIdx = parseInt(/\\bContent-ID: (\\d+)/i.exec(d[i])[1], 10);\n if (changes.addedRecords[cIdx]) {\n jsonObj = DataUtil.parse.parseJson(/^\\{.+\\}/m.exec(d[i])[0]);\n extend({}, changes.addedRecords[cIdx], this.processResponse(jsonObj));\n }\n }\n return changes;\n }\n return null;\n };\n return ODataAdaptor;\n}(UrlAdaptor));\nexport { ODataAdaptor };\n/**\n * The OData v4 is an improved version of OData protocols.\n * The DataManager uses the ODataV4Adaptor to consume OData v4 services.\n * @hidden\n */\nvar ODataV4Adaptor = /** @class */ (function (_super) {\n __extends(ODataV4Adaptor, _super);\n function ODataV4Adaptor() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json, text/javascript, */*; q=0.01',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$count',\n search: '$search',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 '\n });\n return _this;\n }\n /**\n * @hidden\n */\n ODataV4Adaptor.prototype.getModulename = function () {\n return 'ODataV4Adaptor';\n };\n ;\n /**\n * Returns the query string which requests total count from the data source.\n * @param {boolean} e\n * @returns string\n */\n ODataV4Adaptor.prototype.onCount = function (e) {\n return e === true ? 'true' : '';\n };\n /**\n * Generate request string based on the filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataV4Adaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var val = predicate.value;\n var isDate = val instanceof Date;\n returnValue = _super.prototype.onPredicate.call(this, predicate, query, requiresCast);\n if (isDate) {\n returnValue = returnValue.replace(/datetime'(.*)'$/, '$1');\n }\n return returnValue;\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n * @param {{fields:string[]} e\n * @param {string} operator\n * @param {string} key\n * @param {boolean}} ignoreCase\n */\n ODataV4Adaptor.prototype.onEachSearch = function (e) {\n var search = this.pvt.searches || [];\n search.push(e.key);\n this.pvt.searches = search;\n };\n /**\n * Generate query string based on the search criteria from query.\n * @param {Object} e\n */\n ODataV4Adaptor.prototype.onSearch = function (e) {\n return this.pvt.searches.join(' OR ');\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings\n * @returns void\n */\n ODataV4Adaptor.prototype.beforeSend = function (dm, request, settings) {\n request.setRequestHeader('Accept', this.options.accept);\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n ODataV4Adaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var emptyAndBatch = _super.prototype.processBatchResponse.call(this, data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var count = null;\n var dataCount = '@odata.count';\n if (query && query.isCountRequired) {\n if (dataCount in data) {\n count = data[dataCount];\n }\n }\n data = data.value;\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: count, aggregates: args.aggregates };\n };\n return ODataV4Adaptor;\n}(ODataAdaptor));\nexport { ODataV4Adaptor };\n/**\n * The Web API is a programmatic interface to define the request and response messages system that is mostly exposed in JSON or XML.\n * The DataManager uses the WebApiAdaptor to consume Web API.\n * Since this adaptor is targeted to interact with Web API created using OData endpoint, it is extended from ODataAdaptor\n * @hidden\n */\nvar WebApiAdaptor = /** @class */ (function (_super) {\n __extends(WebApiAdaptor, _super);\n function WebApiAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n type: 'POST',\n url: dm.dataSource.url,\n data: JSON.stringify(data)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n return {\n type: 'DELETE',\n url: dm.dataSource.url + '/' + value,\n data: JSON.stringify(value)\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n return {\n type: 'PUT',\n url: dm.dataSource.url,\n data: JSON.stringify(value)\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings\n * @returns void\n */\n WebApiAdaptor.prototype.beforeSend = function (dm, request, settings) {\n request.setRequestHeader('Accept', 'application/json, text/javascript, */*; q=0.01');\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n WebApiAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var count = null;\n var args = {};\n if (request && request.type.toLowerCase() !== 'post') {\n var versionCheck = xhr && request.getResponseHeader('DataServiceVersion');\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n if (!DataUtil.isNull(data.Count)) {\n count = data.Count;\n }\n }\n if (version < 3 && data.Items) {\n data = data.Items;\n }\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args);\n }\n args.result = args.result || data;\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n return WebApiAdaptor;\n}(ODataAdaptor));\nexport { WebApiAdaptor };\n/**\n * WebMethodAdaptor can be used by DataManager to interact with web method.\n * @hidden\n */\nvar WebMethodAdaptor = /** @class */ (function (_super) {\n __extends(WebMethodAdaptor, _super);\n function WebMethodAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Prepare the request body based on the query.\n * The query information can be accessed at the WebMethod using variable named `value`.\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @returns application\n */\n WebMethodAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var obj = new UrlAdaptor().processQuery(dm, query, hierarchyFilters);\n var getData = 'data';\n var data = DataUtil.parse.parseJson(obj[getData]);\n var result = {};\n var value = 'value';\n if (data.param) {\n for (var i = 0; i < data.param.length; i++) {\n var param = data.param[i];\n var key = Object.keys(param)[0];\n result[key] = param[key];\n }\n }\n result[value] = data;\n var pvtData = 'pvtData';\n var url = 'url';\n return {\n data: JSON.stringify(result),\n url: obj[url],\n pvtData: obj[pvtData],\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n };\n return WebMethodAdaptor;\n}(UrlAdaptor));\nexport { WebMethodAdaptor };\n/**\n * RemoteSaveAdaptor, extended from JsonAdaptor and it is used for binding local data and performs all DataManager queries in client-side.\n * It interacts with server-side only for CRUD operations.\n * @hidden\n */\nvar RemoteSaveAdaptor = /** @class */ (function (_super) {\n __extends(RemoteSaveAdaptor, _super);\n /**\n * @hidden\n */\n function RemoteSaveAdaptor() {\n var _this = _super.call(this) || this;\n setValue('beforeSend', UrlAdaptor.prototype.beforeSend, _this);\n return _this;\n }\n RemoteSaveAdaptor.prototype.insert = function (dm, data, tableName) {\n _super.prototype.insert.call(this, dm, data, null, null, 0);\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify({\n value: data,\n table: tableName,\n action: 'insert'\n })\n };\n };\n RemoteSaveAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n _super.prototype.remove.call(this, dm, keyField, value);\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify({\n key: value,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n })\n };\n };\n RemoteSaveAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n _super.prototype.update.call(this, dm, keyField, value);\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify({\n value: value,\n action: 'update',\n keyColumn: keyField,\n key: value[keyField],\n table: tableName\n })\n };\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * Also perform the changes in the locally cached data to sync with the remote data.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n RemoteSaveAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var i;\n for (i = 0; i < changes.addedRecords.length; i++) {\n JsonAdaptor.prototype.insert(dm, changes.addedRecords[i]);\n }\n for (i = 0; i < changes.changedRecords.length; i++) {\n JsonAdaptor.prototype.update(dm, e.key, changes.changedRecords[i]);\n }\n for (i = 0; i < changes.deletedRecords.length; i++) {\n JsonAdaptor.prototype.remove(dm, e.key, changes.deletedRecords[i]);\n }\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify({\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e.url,\n key: e.key\n })\n };\n };\n return RemoteSaveAdaptor;\n}(JsonAdaptor));\nexport { RemoteSaveAdaptor };\n/**\n * Cache Adaptor is used to cache the data of the visited pages. It prevents new requests for the previously visited pages.\n * You can configure cache page size and duration of caching by using cachingPageSize and timeTillExpiration properties of the DataManager\n * @hidden\n */\nvar CacheAdaptor = /** @class */ (function (_super) {\n __extends(CacheAdaptor, _super);\n /**\n * Constructor for CacheAdaptor class.\n * @param {CacheAdaptor} adaptor?\n * @param {number} timeStamp?\n * @param {number} pageSize?\n * @hidden\n */\n function CacheAdaptor(adaptor, timeStamp, pageSize) {\n var _this = _super.call(this) || this;\n _this.isCrudAction = false;\n _this.isInsertAction = false;\n if (!isNullOrUndefined(adaptor)) {\n _this.cacheAdaptor = adaptor;\n }\n _this.pageSize = pageSize;\n _this.guidId = DataUtil.getGuid('cacheAdaptor');\n var obj = { keys: [], results: [] };\n window.localStorage.setItem(_this.guidId, JSON.stringify(obj));\n var guid = _this.guidId;\n if (!isNullOrUndefined(timeStamp)) {\n setInterval(function () {\n var data;\n data = DataUtil.parse.parseJson(window.localStorage.getItem(guid));\n var forDel = [];\n for (var i = 0; i < data.results.length; i++) {\n var currentTime = +new Date();\n var requestTime = +new Date(data.results[i].timeStamp);\n data.results[i].timeStamp = currentTime - requestTime;\n if (currentTime - requestTime > timeStamp) {\n forDel.push(i);\n }\n }\n for (var i = 0; i < forDel.length; i++) {\n data.results.splice(forDel[i], 1);\n data.keys.splice(forDel[i], 1);\n }\n window.localStorage.removeItem(guid);\n window.localStorage.setItem(guid, JSON.stringify(data));\n }, timeStamp);\n }\n return _this;\n }\n /**\n * It will generate the key based on the URL when we send a request to server.\n * @param {string} url\n * @param {Query} query?\n * @hidden\n */\n CacheAdaptor.prototype.generateKey = function (url, query) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var key = url;\n var page = 'onPage';\n if (page in singles) {\n key += singles[page].pageIndex;\n }\n queries.sorts.forEach(function (obj) {\n key += obj.e.direction + obj.e.fieldName;\n });\n queries.groups.forEach(function (obj) {\n key += obj.e.fieldName;\n });\n queries.searches.forEach(function (obj) {\n key += obj.e.searchKey;\n });\n for (var filter = 0; filter < queries.filters.length; filter++) {\n var currentFilter = queries.filters[filter];\n if (currentFilter.e.isComplex) {\n var newQuery = query.clone();\n newQuery.queries = [];\n for (var i = 0; i < currentFilter.e.predicates.length; i++) {\n newQuery.queries.push({ fn: 'onWhere', e: currentFilter.e.predicates[i], filter: query.queries.filter });\n }\n key += currentFilter.e.condition + this.generateKey(url, newQuery);\n }\n else {\n key += currentFilter.e.field + currentFilter.e.operator + currentFilter.e.value;\n }\n }\n return key;\n };\n /**\n * Process the query to generate request body.\n * If the data is already cached, it will return the cached data.\n * @param {DataManager} dm\n * @param {Query} query?\n * @param {Object[]} hierarchyFilters?\n */\n CacheAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var key = this.generateKey(dm.dataSource.url, query);\n var cachedItems;\n cachedItems = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var data = cachedItems ? cachedItems.results[cachedItems.keys.indexOf(key)] : null;\n if (data != null && !this.isCrudAction && !this.isInsertAction) {\n return data;\n }\n this.isCrudAction = null;\n this.isInsertAction = null;\n return this.cacheAdaptor.processQuery.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n };\n /**\n * Returns the data from the query processing.\n * It will also cache the data for later usage.\n * @param {DataResult} data\n * @param {DataManager} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n */\n CacheAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (this.isInsertAction || (request && this.cacheAdaptor.options.batch &&\n DataUtil.endsWith(request.url, this.cacheAdaptor.options.batch) && request.type.toLowerCase() === 'post')) {\n return this.cacheAdaptor.processResponse(data, ds, query, xhr, request, changes);\n }\n data = this.cacheAdaptor.processResponse.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n var key = query ? this.generateKey(ds.dataSource.url, query) : ds.dataSource.url;\n var obj = {};\n obj = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var index = obj.keys.indexOf(key);\n if (index !== -1) {\n obj.results.splice(index, 1);\n obj.keys.splice(index, 1);\n }\n obj.results[obj.keys.push(key) - 1] = { keys: key, result: data.result, timeStamp: new Date(), count: data.count };\n while (obj.results.length > this.pageSize) {\n obj.results.splice(0, 1);\n obj.keys.splice(0, 1);\n }\n window.localStorage.setItem(this.guidId, JSON.stringify(obj));\n return data;\n };\n /**\n * Method will trigger before send the request to server side. Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings?\n */\n CacheAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (DataUtil.endsWith(settings.url, this.cacheAdaptor.options.batch) && settings.type.toLowerCase() === 'post') {\n request.setRequestHeader('Accept', this.cacheAdaptor.options.multipartAccept);\n }\n if (!dm.dataSource.crossDomain) {\n request.setRequestHeader('Accept', this.cacheAdaptor.options.accept);\n }\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n CacheAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.update(dm, keyField, value, tableName);\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n CacheAdaptor.prototype.insert = function (dm, data, tableName) {\n this.isInsertAction = true;\n return this.cacheAdaptor.insert(dm, data, tableName);\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n */\n CacheAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.remove(dm, keyField, value, tableName);\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n CacheAdaptor.prototype.batchRequest = function (dm, changes, e) {\n return this.cacheAdaptor.batchRequest(dm, changes, e);\n };\n return CacheAdaptor;\n}(UrlAdaptor));\nexport { CacheAdaptor };\n","import { Ajax } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataUtil } from './util';\nimport { Query } from './query';\nimport { ODataAdaptor, JsonAdaptor, CacheAdaptor, RemoteSaveAdaptor } from './adaptors';\n/**\n * DataManager is used to manage and manipulate relational data.\n */\nvar DataManager = /** @class */ (function () {\n /**\n * Constructor for DataManager class\n * @param {DataOptions|JSON[]} dataSource?\n * @param {Query} query?\n * @param {AdaptorOptions|string} adaptor?\n * @hidden\n */\n function DataManager(dataSource, query, adaptor) {\n var _this = this;\n /** @hidden */\n this.dateParse = true;\n this.requests = [];\n if (!dataSource && !this.dataSource) {\n dataSource = [];\n }\n adaptor = adaptor || dataSource.adaptor;\n var data;\n if (dataSource instanceof Array) {\n data = {\n json: dataSource,\n offline: true\n };\n }\n else if (typeof dataSource === 'object') {\n if (!dataSource.json) {\n dataSource.json = [];\n }\n data = {\n url: dataSource.url,\n insertUrl: dataSource.insertUrl,\n removeUrl: dataSource.removeUrl,\n updateUrl: dataSource.updateUrl,\n crudUrl: dataSource.crudUrl,\n batchUrl: dataSource.batchUrl,\n json: dataSource.json,\n headers: dataSource.headers,\n accept: dataSource.accept,\n data: dataSource.data,\n timeTillExpiration: dataSource.timeTillExpiration,\n cachingPageSize: dataSource.cachingPageSize,\n enableCaching: dataSource.enableCaching,\n requestType: dataSource.requestType,\n key: dataSource.key,\n crossDomain: dataSource.crossDomain,\n jsonp: dataSource.jsonp,\n dataType: dataSource.dataType,\n offline: dataSource.offline !== undefined ? dataSource.offline\n : dataSource.adaptor instanceof RemoteSaveAdaptor ? false : dataSource.url ? false : true,\n requiresFormat: dataSource.requiresFormat\n };\n }\n else {\n DataUtil.throwError('DataManager: Invalid arguments');\n }\n if (data.requiresFormat === undefined && !DataUtil.isCors()) {\n data.requiresFormat = isNullOrUndefined(data.crossDomain) ? true : data.crossDomain;\n }\n if (data.dataType === undefined) {\n data.dataType = 'json';\n }\n this.dataSource = data;\n this.defaultQuery = query;\n if (data.url && data.offline && !data.json.length) {\n this.isDataAvailable = false;\n this.adaptor = adaptor || new ODataAdaptor();\n this.dataSource.offline = false;\n this.ready = this.executeQuery(query || new Query());\n this.ready.then(function (e) {\n _this.dataSource.offline = true;\n _this.isDataAvailable = true;\n data.json = e.result;\n _this.adaptor = new JsonAdaptor();\n });\n }\n else {\n this.adaptor = data.offline ? new JsonAdaptor() : new ODataAdaptor();\n }\n if (!data.jsonp && this.adaptor instanceof ODataAdaptor) {\n data.jsonp = 'callback';\n }\n this.adaptor = adaptor || this.adaptor;\n if (data.enableCaching) {\n this.adaptor = new CacheAdaptor(this.adaptor, data.timeTillExpiration, data.cachingPageSize);\n }\n return this;\n }\n /**\n * Overrides DataManager's default query with given query.\n * @param {Query} query - Defines the new default query.\n */\n DataManager.prototype.setDefaultQuery = function (query) {\n this.defaultQuery = query;\n return this;\n };\n /**\n * Executes the given query with local data source.\n * @param {Query} query - Defines the query to retrieve data.\n */\n DataManager.prototype.executeLocal = function (query) {\n if (!this.defaultQuery && !(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeLocal() : A query is required to execute');\n }\n if (!this.dataSource.json) {\n DataUtil.throwError('DataManager - executeLocal() : Json data is required to execute');\n }\n query = query || this.defaultQuery;\n var result = this.adaptor.processQuery(this, query);\n if (query.subQuery) {\n var from = query.subQuery.fromTable;\n var lookup = query.subQuery.lookups;\n var res = query.isCountRequired ? result.result :\n result;\n if (lookup && lookup instanceof Array) {\n DataUtil.buildHierarchy(query.subQuery.fKey, from, res, lookup, query.subQuery.key);\n }\n for (var j = 0; j < res.length; j++) {\n if (res[j][from] instanceof Array) {\n res[j] = extend({}, {}, res[j]);\n res[j][from] = this.adaptor.processResponse(query.subQuery.using(new DataManager(res[j][from].slice(0))).executeLocal(), this, query);\n }\n }\n }\n return this.adaptor.processResponse(result, this, query);\n };\n /**\n * Executes the given query with either local or remote data source.\n * It will be executed as asynchronously and returns Promise object which will be resolved or rejected after action completed.\n * @param {Query|Function} query - Defines the query to retrieve data.\n * @param {Function} done - Defines the callback function and triggers when the Promise is resolved.\n * @param {Function} fail - Defines the callback function and triggers when the Promise is rejected.\n * @param {Function} always - Defines the callback function and triggers when the Promise is resolved or rejected.\n */\n DataManager.prototype.executeQuery = function (query, done, fail, always) {\n var _this = this;\n if (typeof query === 'function') {\n always = fail;\n fail = done;\n done = query;\n query = null;\n }\n if (!query) {\n query = this.defaultQuery;\n }\n if (!(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeQuery() : A query is required to execute');\n }\n var deffered = new Deferred();\n var args = { query: query };\n if (!this.dataSource.offline && this.dataSource.url !== undefined) {\n var result = this.adaptor.processQuery(this, query);\n this.makeRequest(result, deffered, args, query);\n }\n else {\n DataManager.nextTick(function () {\n var res = _this.executeLocal(query);\n args = DataManager.getDeferedArgs(query, res, args);\n deffered.resolve(args);\n });\n }\n return deffered.promise;\n };\n DataManager.getDeferedArgs = function (query, result, args) {\n if (query.isCountRequired) {\n args.result = result.result;\n args.count = result.count;\n args.aggregates = result.aggregates;\n }\n else {\n args.result = result;\n }\n return args;\n };\n DataManager.nextTick = function (fn) {\n (window.setImmediate || window.setTimeout)(fn, 0);\n };\n DataManager.prototype.extendRequest = function (url, fnSuccess, fnFail) {\n return extend({}, {\n type: 'GET',\n dataType: this.dataSource.dataType,\n crossDomain: this.dataSource.crossDomain,\n jsonp: this.dataSource.jsonp,\n cache: true,\n processData: false,\n onSuccess: fnSuccess,\n onFailure: fnFail\n }, url);\n };\n DataManager.prototype.makeRequest = function (url, deffered, args, query) {\n var _this = this;\n var isSelector = !!query.subQuerySelector;\n var fnFail = function (e) {\n args.error = e;\n deffered.reject(args);\n };\n var process = function (data, count, xhr, request, actual, aggregates, virtualSelectRecords) {\n args.xhr = xhr;\n args.count = count ? parseInt(count.toString(), 10) : 0;\n args.result = data;\n args.request = request;\n args.aggregates = aggregates;\n args.actual = actual;\n args.virtualSelectRecords = virtualSelectRecords;\n deffered.resolve(args);\n };\n var fnQueryChild = function (data, selector) {\n var subDeffer = new Deferred();\n var childArgs = { parent: args };\n query.subQuery.isChild = true;\n var subUrl = _this.adaptor.processQuery(_this, query.subQuery, data ? _this.adaptor.processResponse(data) : selector);\n var childReq = _this.makeRequest(subUrl, subDeffer, childArgs, query.subQuery);\n if (!isSelector) {\n subDeffer.then(function (subData) {\n if (data) {\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, data, subData, query.subQuery.key);\n process(data, subData.count, subData.xhr);\n }\n }, fnFail);\n }\n return childReq;\n };\n var fnSuccess = function (data, request) {\n if (request.httpRequest.getResponseHeader('Content-Type').indexOf('xml') === -1 && _this.dateParse) {\n data = DataUtil.parse.parseJson(data);\n }\n var result = _this.adaptor.processResponse(data, _this, query, request.httpRequest, request);\n var count = 0;\n var aggregates = null;\n var virtualSelectRecords = 'virtualSelectRecords';\n var virtualRecords = data[virtualSelectRecords];\n if (query.isCountRequired) {\n count = result.count;\n aggregates = result.aggregates;\n result = result.result;\n }\n if (!query.subQuery) {\n process(result, count, request.httpRequest, request.type, data, aggregates, virtualRecords);\n return;\n }\n if (!isSelector) {\n fnQueryChild(result, request);\n }\n };\n var req = this.extendRequest(url, fnSuccess, fnFail);\n var ajax = new Ajax(req);\n ajax.beforeSend = function () {\n _this.beforeSend(ajax.httpRequest, ajax);\n };\n req = ajax.send();\n req.catch(function (e) { return true; }); // to handle failure remote requests. \n this.requests.push(ajax);\n if (isSelector) {\n var promise = void 0;\n var res = query.subQuerySelector.call(this, { query: query.subQuery, parent: query });\n if (res && res.length) {\n promise = Promise.all([req, fnQueryChild(null, res)]);\n promise.then(function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var result = args[0];\n var pResult = _this.adaptor.processResponse(result[0], _this, query, _this.requests[0].httpRequest, _this.requests[0]);\n var count = 0;\n if (query.isCountRequired) {\n count = pResult.count;\n pResult = pResult.result;\n }\n var cResult = _this.adaptor.processResponse(result[1], _this, query.subQuery, _this.requests[1].httpRequest, _this.requests[1]);\n count = 0;\n if (query.subQuery.isCountRequired) {\n count = cResult.count;\n cResult = cResult.result;\n }\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, pResult, cResult, query.subQuery.key);\n isSelector = false;\n process(pResult, count, _this.requests[0].httpRequest);\n });\n }\n else {\n isSelector = false;\n }\n }\n return req;\n };\n DataManager.prototype.beforeSend = function (request, settings) {\n this.adaptor.beforeSend(this, request, settings);\n var headers = this.dataSource.headers;\n var props;\n for (var i = 0; headers && i < headers.length; i++) {\n props = [];\n var keys = Object.keys(headers[i]);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n props.push(prop);\n request.setRequestHeader(prop, headers[i][prop]);\n }\n }\n };\n /**\n * Save bulk changes to the given table name.\n * User can add a new record, edit an existing record, and delete a record at the same time.\n * If the datasource from remote, then updated in a single post.\n * @param {Object} changes - Defines the CrudOptions.\n * @param {string} key - Defines the column field.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.saveChanges = function (changes, key, tableName, query) {\n var _this = this;\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var args = {\n url: tableName,\n key: key || this.dataSource.key\n };\n var req = this.adaptor.batchRequest(this, changes, args, query);\n if (this.dataSource.offline) {\n return req;\n }\n var deff = new Deferred();\n var ajax = new Ajax(req);\n ajax.beforeSend = function () {\n _this.beforeSend(ajax.httpRequest, ajax);\n };\n ajax.onSuccess = function (data, request) {\n deff.resolve(_this.adaptor.processResponse(DataUtil.parse.parseJson(data), _this, null, request.httpRequest, request, changes));\n };\n ajax.onFailure = function (e) {\n deff.reject([{ error: e }]);\n };\n ajax.send().catch(function (e) { return true; }); // to handle the failure requests. \n return deff.promise;\n };\n /**\n * Inserts new record in the given table.\n * @param {Object} data - Defines the data to insert.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.insert = function (data, tableName, query, position) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var req = this.adaptor.insert(this, data, tableName, query, position);\n if (this.dataSource.offline) {\n return req;\n }\n return this.doAjaxRequest(req);\n };\n /**\n * Removes data from the table with the given key.\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.remove = function (keyField, value, tableName, query) {\n if (typeof value === 'object') {\n value = value[keyField];\n }\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.remove(this, keyField, value, tableName, query);\n if (this.dataSource.offline) {\n return res;\n }\n return this.doAjaxRequest(res);\n };\n /**\n * Updates existing record in the given table.\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.update = function (keyField, value, tableName, query) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.update(this, keyField, value, tableName, query);\n if (this.dataSource.offline) {\n return res;\n }\n return this.doAjaxRequest(res);\n };\n DataManager.prototype.doAjaxRequest = function (res) {\n var _this = this;\n var defer = new Deferred();\n res = extend({}, {\n type: 'POST',\n contentType: 'application/json; charset=utf-8',\n processData: false\n }, res);\n var ajax = new Ajax(res);\n ajax.beforeSend = function () {\n _this.beforeSend(ajax.httpRequest, ajax);\n };\n ajax.onSuccess = function (record, request) {\n try {\n DataUtil.parse.parseJson(record);\n }\n catch (e) {\n record = [];\n }\n record = _this.adaptor.processResponse(DataUtil.parse.parseJson(record), _this, null, request.httpRequest, request);\n defer.resolve(record);\n };\n ajax.onFailure = function (e) {\n defer.reject([{ error: e }]);\n };\n ajax.send().catch(function (e) { return true; }); // to handle the failure requests.\n return defer.promise;\n };\n return DataManager;\n}());\nexport { DataManager };\n/**\n * Deferred is used to handle asynchronous operation.\n */\nvar Deferred = /** @class */ (function () {\n function Deferred() {\n var _this = this;\n /**\n * Promise is an object that represents a value that may not be available yet, but will be resolved at some point in the future.\n */\n this.promise = new Promise(function (resolve, reject) {\n _this.resolve = resolve;\n _this.reject = reject;\n });\n /**\n * Defines the callback function triggers when the Deferred object is resolved.\n */\n this.then = this.promise.then.bind(this.promise);\n /**\n * Defines the callback function triggers when the Deferred object is rejected.\n */\n this.catch = this.promise.catch.bind(this.promise);\n }\n return Deferred;\n}());\nexport { Deferred };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { merge, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, createElement, prepend, closest, remove } from '@syncfusion/ej2-base';\nimport { Component, EventHandler, Property, Complex, Event } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { Animation, rippleEffect, Touch } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { ListBase, getFieldValues } from '../common/list-base';\n// Effect Configuration Effect[] = [fromViewBackward,fromViewForward,toViewBackward,toviewForward];\nvar effectsConfig = {\n 'None': [],\n 'SlideLeft': ['SlideRightOut', 'SlideLeftOut', 'SlideLeftIn', 'SlideRightIn'],\n 'SlideDown': ['SlideTopOut', 'SlideBottomOut', 'SlideBottomIn', 'SlideTopIn'],\n 'Zoom': ['FadeOut', 'FadeZoomOut', 'FadeZoomIn', 'FadeIn'],\n 'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']\n};\nvar effectsRTLConfig = {\n 'None': [],\n 'SlideLeft': ['SlideLeftOut', 'SlideRightOut', 'SlideRightIn', 'SlideLeftIn'],\n 'SlideDown': ['SlideBottomOut', 'SlideTopOut', 'SlideTopIn', 'SlideBottomIn'],\n 'Zoom': ['FadeZoomOut', 'FadeOut', 'FadeIn', 'FadeZoomIn'],\n 'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']\n};\n// don't use space in classnames.\nvar classNames = {\n root: 'e-listview',\n hover: 'e-hover',\n selected: 'e-active',\n focused: 'e-focused',\n parentItem: 'e-list-parent',\n listItem: 'e-list-item',\n listItemText: 'e-list-text',\n grpListItem: 'e-list-group-item',\n hasChild: 'e-has-child',\n view: 'e-view',\n header: 'e-list-header',\n headerText: 'e-headertext',\n text: 'e-text',\n disable: 'e-disabled',\n content: 'e-content',\n icon: 'e-icons',\n backIcon: 'e-icon-back',\n checkboxWrapper: 'e-checkbox-wrapper',\n checkbox: 'e-checkbox',\n checked: 'e-check',\n checkboxIcon: 'e-frame',\n checkboxRight: 'e-checkbox-right',\n checkboxLeft: 'e-checkbox-left',\n listviewCheckbox: 'e-listview-checkbox',\n itemCheckList: 'e-checklist'\n};\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('id')\n ], FieldSettings.prototype, \"id\", void 0);\n __decorate([\n Property('text')\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property('isChecked')\n ], FieldSettings.prototype, \"isChecked\", void 0);\n __decorate([\n Property('isVisible')\n ], FieldSettings.prototype, \"isVisible\", void 0);\n __decorate([\n Property('enabled')\n ], FieldSettings.prototype, \"enabled\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('child')\n ], FieldSettings.prototype, \"child\", void 0);\n __decorate([\n Property('tooltip')\n ], FieldSettings.prototype, \"tooltip\", void 0);\n __decorate([\n Property('groupBy')\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property('text')\n ], FieldSettings.prototype, \"sortBy\", void 0);\n __decorate([\n Property('htmlAttributes')\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('tableName')\n ], FieldSettings.prototype, \"tableName\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\n/**\n * Represents the EJ2 ListView control.\n * ```html\n * \n *
\n * Favourite \n * Documents \n * Downloads \n * \n *
\n * ```\n * ```typescript\n * var lvObj = new ListView({});\n * lvObj.appendTo(\"#listview\");\n * ```\n */\nvar ListView = /** @class */ (function (_super) {\n __extends(ListView, _super);\n /**\n * Constructor for creating the widget\n */\n function ListView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.curDSLevel = [];\n _this.curViewDS = [];\n _this.keyConfigs = {\n moveDown: 'downarrow',\n moveUp: 'uparrow',\n back: 'backspace',\n home: 'home',\n select: 'enter',\n end: 'end',\n tab: 'tab',\n space: 'space'\n };\n _this.animateOptions = {};\n _this.isNestedList = false;\n _this.currentLiElements = [];\n _this.resetList = false;\n _this.selectedData = [];\n _this.selectedId = [];\n _this.aniObj = new Animation(_this.animateOptions);\n return _this;\n }\n ListView.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'htmlAttributes':\n this.setHTMLAttribute();\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'enable':\n this.setEnable();\n break;\n case 'width':\n case 'height':\n this.setSize();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'fields':\n this.listBaseOption.fields = this.fields.properties;\n this.reRender();\n break;\n case 'headerTitle':\n if (!this.curDSLevel.length) {\n this.header(this.headerTitle, false);\n }\n break;\n case 'showHeader':\n {\n this.header(this.headerTitle, false);\n }\n break;\n case 'showCheckBox':\n case 'checkBoxPosition':\n this.setCheckbox();\n break;\n case 'dataSource':\n this.reRender();\n break;\n case 'sortOrder':\n case 'showIcon':\n this.listBaseOption.showIcon = this.showIcon;\n this.curViewDS = this.getSubDS();\n this.resetCurrentList();\n break;\n default:\n break;\n }\n }\n };\n // Model Changes\n ListView.prototype.setHTMLAttribute = function () {\n if (Object.keys(this.htmlAttributes).length) {\n attributes(this.element, this.htmlAttributes);\n }\n };\n ListView.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n ListView.prototype.setSize = function () {\n this.element.style.height = formatUnit(this.height);\n this.element.style.width = formatUnit(this.width);\n };\n ListView.prototype.setEnable = function () {\n this.enableElement(this.element, this.enable);\n };\n ListView.prototype.setEnableRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n ListView.prototype.enableElement = function (element, isEnabled) {\n if (isEnabled) {\n element.classList.remove(classNames.disable);\n }\n else {\n element.classList.add(classNames.disable);\n }\n };\n //Suport Component Functions\n ListView.prototype.header = function (text, showBack) {\n if (this.headerEle === undefined && this.showHeader) {\n this.headerEle = createElement('div', { className: classNames.header });\n var innerHeaderEle = createElement('span', { className: classNames.headerText, innerHTML: this.headerTitle });\n var textEle = createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });\n var hedBackButton = createElement('div', {\n className: classNames.icon + ' ' + classNames.backIcon + ' e-but-back',\n attrs: { style: 'display:none;' }\n });\n this.headerEle.appendChild(hedBackButton);\n this.headerEle.appendChild(textEle);\n this.element.classList.add('e-has-header');\n prepend([this.headerEle], this.element);\n }\n else if (this.headerEle) {\n if (this.showHeader) {\n this.headerEle.style.display = '';\n var textEle = this.headerEle.querySelector('.' + classNames.headerText);\n var hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);\n textEle.innerHTML = text;\n if (showBack === true) {\n hedBackButton.style.display = '';\n }\n else {\n hedBackButton.style.display = 'none';\n }\n }\n else {\n this.headerEle.style.display = 'none';\n }\n }\n };\n // Animation Related Functions\n ListView.prototype.switchView = function (fromView, toView, reverse) {\n var _this = this;\n if (fromView && toView) {\n var fPos_1 = fromView.style.position;\n var overflow_1 = (this.element.style.overflow !== 'hidden') ? this.element.style.overflow : '';\n fromView.style.position = 'absolute';\n fromView.classList.add('e-view');\n var anim = void 0;\n var duration = this.animation.duration;\n if (this.animation.effect) {\n anim = (this.enableRtl ? effectsRTLConfig[this.animation.effect] : effectsConfig[this.animation.effect]);\n }\n else {\n var slideLeft = 'SlideLeft';\n anim = effectsConfig[slideLeft];\n reverse = this.enableRtl;\n duration = 0;\n }\n this.element.style.overflow = 'hidden';\n this.aniObj.animate(fromView, {\n name: (reverse === true ? anim[0] : anim[1]),\n duration: duration,\n timingFunction: this.animation.easing,\n end: function (model) {\n fromView.style.display = 'none';\n _this.element.style.overflow = overflow_1;\n fromView.style.position = fPos_1;\n fromView.classList.remove('e-view');\n }\n });\n toView.style.display = '';\n this.aniObj.animate(toView, {\n name: (reverse === true ? anim[2] : anim[3]),\n duration: duration,\n timingFunction: this.animation.easing,\n end: function () {\n _this.trigger('actionComplete');\n }\n });\n this.curUL = toView;\n }\n };\n ListView.prototype.preRender = function () {\n this.listBaseOption = {\n template: this.template,\n groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',\n ariaAttributes: {\n itemRole: 'listitem', listRole: 'list', itemText: '',\n groupItemRole: 'group', wrapperRole: 'presentation'\n },\n fields: this.fields.properties, sortOrder: this.sortOrder, showIcon: this.showIcon,\n itemCreated: this.renderCheckbox.bind(this)\n };\n };\n ListView.prototype.renderCheckbox = function (args) {\n if (args.item.classList.contains(classNames.hasChild)) {\n this.isNestedList = true;\n }\n if (this.showCheckBox && this.isValidLI(args.item)) {\n var checkboxElement = void 0;\n var fieldData = void 0;\n checkboxElement = createCheckBox(false, { checked: false, enableRtl: this.enableRtl,\n cssClass: classNames.listviewCheckbox });\n checkboxElement.setAttribute('role', 'checkbox');\n var frameElement_1 = checkboxElement.querySelector('.' + classNames.checkboxIcon);\n args.item.classList.add(classNames.itemCheckList);\n args.item.firstElementChild.classList.add(classNames.checkbox);\n if (typeof this.dataSource[0] !== 'string') {\n fieldData = getFieldValues(args.curData, this.listBaseOption.fields);\n if (!this.resetList && fieldData[this.listBaseOption.fields.isChecked]) {\n this.checkInternally(args, checkboxElement);\n }\n else if (this.selectedData.indexOf(fieldData[this.listBaseOption.fields.text]) !== -1 &&\n this.selectedId.indexOf(fieldData[this.listBaseOption.fields.id]) !== -1) {\n this.checkInternally(args, checkboxElement);\n }\n }\n else if ((typeof this.dataSource[0] === 'string' && this.selectedData.indexOf(args.text) !== -1)) {\n this.checkInternally(args, checkboxElement);\n }\n checkboxElement.setAttribute('aria-checked', frameElement_1.classList.contains(classNames.checked) ? 'true' : 'false');\n if (this.checkBoxPosition === 'Left') {\n checkboxElement.classList.add(classNames.checkboxLeft);\n args.item.firstElementChild.classList.add(classNames.checkboxLeft);\n args.item.firstElementChild.insertBefore(checkboxElement, args.item.firstElementChild.childNodes[0]);\n }\n else {\n checkboxElement.classList.add(classNames.checkboxRight);\n args.item.firstElementChild.classList.add(classNames.checkboxRight);\n args.item.firstElementChild.appendChild(checkboxElement);\n }\n this.currentLiElements.push(args.item);\n }\n };\n ListView.prototype.checkInternally = function (args, checkboxElement) {\n args.item.classList.add(classNames.selected);\n args.item.setAttribute('aria-selected', 'true');\n checkboxElement.querySelector('.' + classNames.checkboxIcon).classList.add(classNames.checked);\n checkboxElement.setAttribute('aria-checked', 'true');\n };\n /**\n * It is used to check the checkbox of an item.\n * @param {Fields | HTMLElement} item - It accepts Fields or HTML list element as an argument.\n */\n ListView.prototype.checkItem = function (item) {\n this.toggleCheckBase(item, true);\n };\n ListView.prototype.toggleCheckBase = function (item, checked) {\n if (this.showCheckBox) {\n var liElement = item;\n if (item instanceof Object && item.constructor !== HTMLLIElement) {\n liElement = this.getLiFromObjOrElement(item);\n }\n if (!isNullOrUndefined(liElement)) {\n var checkboxIcon = liElement.querySelector('.' + classNames.checkboxIcon);\n checked ? liElement.classList.add(classNames.selected) : liElement.classList.remove(classNames.selected);\n liElement.setAttribute('aria-selected', checked ? 'true' : 'false');\n checked ? checkboxIcon.classList.add(classNames.checked) : checkboxIcon.classList.remove(classNames.checked);\n checkboxIcon.parentElement.setAttribute('aria-checked', checked ? 'true' : 'false');\n }\n this.setSelectedItemData(liElement);\n }\n };\n /**\n * It is used to uncheck the checkbox of an item.\n * @param {Fields | HTMLElement} item - It accepts Fields or HTML list element as an argument.\n */\n ListView.prototype.unCheckItem = function (item) {\n this.toggleCheckBase(item, false);\n };\n /**\n * It is used to check all the items in ListView.\n */\n ListView.prototype.checkAllItem = function () {\n this.toggleAllCheckBase(true);\n };\n /**\n * It is used to un-check all the items in ListView.\n */\n ListView.prototype.unCheckAllItem = function () {\n this.toggleAllCheckBase(false);\n };\n ListView.prototype.toggleAllCheckBase = function (checked) {\n if (this.showCheckBox) {\n for (var i = 0; i < this.liCollection.length; i++) {\n var checkIcon = this.liCollection[i].querySelector('.' + classNames.checkboxIcon);\n if (checked) {\n if (!checkIcon.classList.contains(classNames.checked)) {\n this.checkItem(this.liCollection[i]);\n }\n }\n else {\n if (checkIcon.classList.contains(classNames.checked)) {\n this.unCheckItem(this.liCollection[i]);\n }\n }\n }\n }\n };\n ListView.prototype.setCheckbox = function () {\n var _this = this;\n if (this.showCheckBox) {\n var liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.listItem));\n var args_1 = {\n item: undefined, curData: undefined, dataSource: undefined, fields: undefined,\n options: undefined, text: ''\n };\n liCollection.forEach(function (element) {\n args_1.item = element;\n args_1.curData = _this.getItemData(element);\n if (element.querySelector('.' + classNames.checkboxWrapper)) {\n _this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));\n }\n _this.renderCheckbox(args_1);\n if (args_1.item.classList.contains(classNames.selected)) {\n _this.checkInternally(args_1, args_1.item.querySelector('.' + classNames.checkboxWrapper));\n }\n });\n }\n else {\n var liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.itemCheckList));\n liCollection.forEach(function (element) {\n element.classList.remove(classNames.selected);\n element.firstElementChild.classList.remove(classNames.checkbox);\n _this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));\n });\n if (this.selectedItems) {\n this.selectedItems.item.classList.add(classNames.selected);\n }\n }\n };\n ListView.prototype.clickHandler = function (e) {\n var target = e.target;\n var classList = target.classList;\n if (classList.contains(classNames.backIcon) || classList.contains(classNames.headerText)) {\n if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {\n this.unCheckAllItem();\n }\n this.back();\n }\n else {\n var li = closest(target.parentNode, '.' + classNames.listItem);\n if (li === null) {\n li = target;\n }\n this.removeFocus();\n if (this.enable && this.showCheckBox && this.isValidLI(li)) {\n if (e.target.classList.contains(classNames.checkboxIcon)) {\n li.classList.add(classNames.focused);\n if (isNullOrUndefined(li.querySelector('.' + classNames.checked))) {\n var args = { curData: undefined, dataSource: undefined, fields: undefined, options: undefined,\n text: undefined, item: li };\n this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));\n }\n else {\n this.unCheckItem(li);\n li.classList.add(classNames.focused);\n }\n }\n else if (li.classList.contains(classNames.hasChild)) {\n this.removeHover();\n this.removeSelect();\n this.removeSelect(li);\n this.setSelectLI(li, e);\n li.classList.remove(classNames.selected);\n }\n else {\n this.setCheckboxLI(li, e);\n }\n }\n else {\n this.setSelectLI(li, e);\n }\n }\n };\n ListView.prototype.removeElement = function (element) {\n return element && element.parentNode && element.parentNode.removeChild(element);\n };\n ListView.prototype.hoverHandler = function (e) {\n var curLi = closest(e.target.parentNode, '.' + classNames.listItem);\n this.setHoverLI(curLi);\n };\n ListView.prototype.leaveHandler = function (e) {\n this.removeHover();\n };\n ;\n ListView.prototype.homeKeyHandler = function (e, end) {\n var li = this.curUL.querySelectorAll('.' + classNames.listItem);\n var focusedElement = this.curUL.querySelector('.' + classNames.focused) ||\n this.curUL.querySelector('.' + classNames.selected);\n if (focusedElement) {\n focusedElement.classList.remove(classNames.focused);\n if (!this.showCheckBox) {\n focusedElement.classList.remove(classNames.selected);\n }\n }\n var index = !end ? 0 : li.length - 1;\n if (li[index].classList.contains(classNames.hasChild) || this.showCheckBox) {\n li[index].classList.add(classNames.focused);\n }\n else {\n this.setSelectLI(li[index], e);\n }\n };\n ListView.prototype.arrowKeyHandler = function (e, prev) {\n var siblingLI;\n var li;\n var hasChild = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;\n if (hasChild || this.showCheckBox) {\n li = this.curUL.querySelector('.' + classNames.focused) || this.curUL.querySelector('.' + classNames.selected);\n siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);\n if (!isNullOrUndefined(siblingLI)) {\n if (li) {\n li.classList.remove(classNames.focused);\n if (!this.showCheckBox) {\n li.classList.remove(classNames.selected);\n }\n }\n if (siblingLI.classList.contains(classNames.hasChild) || this.showCheckBox) {\n siblingLI.classList.add(classNames.focused);\n }\n else {\n this.setSelectLI(siblingLI, e);\n }\n }\n }\n else {\n li = this.curUL.querySelector('.' + classNames.selected);\n siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);\n this.setSelectLI(siblingLI, e);\n }\n };\n ListView.prototype.enterKeyHandler = function (e) {\n var hasChild = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;\n var li = this.curUL.querySelector('.' + classNames.focused);\n if (hasChild && li) {\n li.classList.remove(classNames.focused);\n if (this.showCheckBox) {\n this.removeSelect();\n this.removeSelect(li);\n this.removeHover();\n }\n this.setSelectLI(li, e);\n }\n };\n ListView.prototype.spaceKeyHandler = function (e) {\n if (this.enable && this.showCheckBox) {\n var li = this.curUL.querySelector('.' + classNames.focused);\n if (!isNullOrUndefined(li) && isNullOrUndefined(li.querySelector('.' + classNames.checked))) {\n var args = { curData: undefined, dataSource: undefined, fields: undefined, options: undefined,\n text: undefined, item: li };\n this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));\n }\n else {\n this.unCheckItem(li);\n }\n }\n };\n ListView.prototype.keyActionHandler = function (e) {\n e.preventDefault();\n switch (e.action) {\n case 'home':\n this.homeKeyHandler(e);\n break;\n case 'end':\n this.homeKeyHandler(e, true);\n break;\n case 'moveDown':\n this.arrowKeyHandler(e);\n break;\n case 'moveUp':\n this.arrowKeyHandler(e, true);\n break;\n case 'select':\n this.enterKeyHandler(e);\n break;\n case 'back':\n if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {\n this.unCheckAllItem();\n }\n this.back();\n break;\n case 'tab':\n this.tabFocus(e);\n break;\n case 'space':\n this.spaceKeyHandler(e);\n break;\n }\n };\n ListView.prototype.swipeActionHandler = function (e) {\n if (e.swipeDirection === 'Right') {\n if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {\n this.unCheckAllItem();\n }\n this.back();\n }\n };\n ListView.prototype.focusout = function () {\n var focusedElement = this.curUL.querySelector('.' + classNames.focused);\n var activeElement = this.curUL.querySelector('[aria-selected = true]');\n if (focusedElement && !this.showCheckBox) {\n focusedElement.classList.remove(classNames.focused);\n if (activeElement) {\n activeElement.classList.add(classNames.selected);\n }\n }\n };\n ListView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusout, this);\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });\n };\n ListView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.element, 'mouseout', this.leaveHandler);\n this.keyboardModule.destroy();\n this.touchModule.destroy();\n };\n ListView.prototype.tabFocus = function (e) {\n var selectedList = this.curUL.querySelector('.' + classNames.selected);\n if ((!selectedList && this.curUL) || this.showCheckBox) {\n var li = this.curUL.querySelector('.' + classNames.listItem);\n if (li.classList.contains(classNames.hasChild) || this.showCheckBox) {\n var focusedElement = this.curUL.querySelector('.' + classNames.focused);\n if (isNullOrUndefined(focusedElement)) {\n li.classList.add(classNames.focused);\n }\n }\n else {\n this.setSelectLI(li, e);\n }\n }\n };\n ListView.prototype.removeFocus = function () {\n var focusedLI = this.element.querySelectorAll('.' + classNames.focused);\n for (var _i = 0, focusedLI_1 = focusedLI; _i < focusedLI_1.length; _i++) {\n var ele = focusedLI_1[_i];\n ele.classList.remove(classNames.focused);\n }\n };\n ListView.prototype.removeHover = function () {\n var hoverLI = this.element.querySelector('.' + classNames.hover);\n if (hoverLI) {\n hoverLI.classList.remove(classNames.hover);\n }\n };\n ListView.prototype.removeSelect = function (li) {\n if (isNullOrUndefined(li)) {\n var selectedLI = this.element.querySelectorAll('.' + classNames.selected);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.showCheckBox && ele.querySelector('.' + classNames.checked)) {\n continue;\n }\n else {\n ele.setAttribute('aria-selected', 'false');\n ele.classList.remove(classNames.selected);\n }\n }\n }\n else {\n li.classList.remove(classNames.selected);\n li.setAttribute('aria-selected', 'false');\n }\n };\n ListView.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(classNames.listItem)\n && !li.classList.contains(classNames.grpListItem)\n && !li.classList.contains(classNames.disable));\n };\n ListView.prototype.setCheckboxLI = function (li, e) {\n if (this.isValidLI(li) && this.enable && this.showCheckBox) {\n if (this.curUL.querySelector('.' + classNames.focused)) {\n this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);\n }\n li.classList.add(classNames.focused);\n var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);\n var checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);\n this.removeHover();\n if (!checkIcon.classList.contains(classNames.checked)) {\n checkIcon.classList.add(classNames.checked);\n li.classList.add(classNames.selected);\n li.setAttribute('aria-selected', 'true');\n }\n else {\n checkIcon.classList.remove(classNames.checked);\n li.classList.remove(classNames.selected);\n li.setAttribute('aria-selected', 'false');\n }\n checkboxElement.setAttribute('aria-checked', checkIcon.classList.contains(classNames.checked) ?\n 'true' : 'false');\n if (e) {\n var eventArgs = this.selectEventData(li, e);\n merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });\n this.trigger('select', eventArgs);\n }\n this.setSelectedItemData(li);\n this.renderSubList(li);\n }\n };\n ListView.prototype.selectEventData = function (li, e) {\n var data = this.getItemData(li);\n var fieldData = getFieldValues(data, this.listBaseOption.fields);\n var selectedItem;\n if (isNullOrUndefined(data) && typeof this.dataSource[0] === 'string') {\n selectedItem = { item: li, text: li.innerText.trim(), data: this.dataSource };\n }\n else {\n selectedItem = { item: li, text: fieldData[this.listBaseOption.fields.text], data: data };\n }\n var eventArgs = {};\n merge(eventArgs, selectedItem);\n if (e) {\n merge(eventArgs, { isInteracted: true, event: e, index: Array.prototype.indexOf.call(this.curUL.children, li) });\n }\n return eventArgs;\n };\n ListView.prototype.setSelectedItemData = function (li) {\n var data = this.getItemData(li);\n var fieldData = getFieldValues(data, this.listBaseOption.fields);\n if (isNullOrUndefined(data) && (typeof this.dataSource[0] === 'string')) {\n this.selectedItems = {\n item: li,\n text: li.innerText.trim(),\n data: this.dataSource\n };\n }\n else {\n this.selectedItems = {\n item: li,\n text: fieldData[this.listBaseOption.fields.text],\n data: data\n };\n }\n };\n ListView.prototype.setSelectLI = function (li, e) {\n if (this.isValidLI(li) && !li.classList.contains(classNames.selected) && this.enable) {\n if (!this.showCheckBox) {\n this.removeSelect();\n }\n li.classList.add(classNames.selected);\n li.classList.add(classNames.focused);\n li.setAttribute('aria-selected', 'true');\n this.removeHover();\n this.setSelectedItemData(li);\n var eventArgs = this.selectEventData(li, e);\n this.trigger('select', eventArgs);\n this.selectedLI = li;\n this.renderSubList(li);\n }\n };\n ListView.prototype.setHoverLI = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(classNames.hover) && this.enable) {\n var lastLi = this.element.querySelectorAll('.' + classNames.hover);\n if (lastLi && lastLi.length) {\n removeClass(lastLi, classNames.hover);\n }\n if (!li.classList.contains(classNames.selected) || this.showCheckBox) {\n li.classList.add(classNames.hover);\n }\n }\n };\n ListView.prototype.hoverSiblingLI = function (prev) {\n var lastLi = this.curUL.querySelector('.' + classNames.hover);\n var siblingLI;\n if (!lastLi) {\n lastLi = this.curUL.querySelector('.' + classNames.selected);\n }\n if (lastLi) {\n siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), lastLi, prev);\n }\n else {\n if (prev) {\n var curLIs = this.curUL.querySelectorAll('.' + classNames.listItem);\n siblingLI = curLIs[curLIs.length - 1];\n }\n else {\n siblingLI = this.curUL.querySelector('.' + classNames.listItem);\n }\n }\n this.setHoverLI(siblingLI);\n };\n //Data Source Related Functions\n ListView.prototype.getSubDS = function () {\n var levelKeys = this.curDSLevel;\n if (levelKeys.length) {\n var ds = this.localData;\n for (var _i = 0, levelKeys_1 = levelKeys; _i < levelKeys_1.length; _i++) {\n var key = levelKeys_1[_i];\n this.curDSJSON = this.findItemFromDS(ds, { id: key });\n var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);\n ds = this.curDSJSON ? fieldData[this.fields.child] : ds;\n }\n return ds;\n }\n return this.localData;\n };\n ListView.prototype.getItemData = function (li) {\n var fields = this.getElementUID(li);\n var curDS = this.dataSource;\n return this.findItemFromDS(curDS, fields);\n };\n ListView.prototype.findItemFromDS = function (dataSource, fields, parent) {\n var _this = this;\n var resultJSON;\n if (dataSource && dataSource.length && fields) {\n dataSource.some(function (data) {\n var fieldData = getFieldValues(data, _this.listBaseOption.fields);\n //(!(fid) || id === fid) && (!(ftext) || text === ftext) && (!!fid || !!ftext)\n if ((fields.id || fields.text) &&\n (!fields.id || fieldData[_this.fields.id] === fields.id) &&\n (!fields.text || fieldData[_this.fields.text] === fields.text)) {\n resultJSON = (parent ? dataSource : data);\n }\n else if (!isNullOrUndefined(fields.id) && isNullOrUndefined(fieldData[_this.fields.id])) {\n var li = _this.element.querySelector('[data-uid=\"'\n + fields.id + '\"]');\n if (li.innerText.trim() === fieldData[_this.fields.text]) {\n resultJSON = data;\n }\n }\n else if (fieldData.hasOwnProperty(_this.fields.child) && fieldData[_this.fields.child].length) {\n resultJSON = _this.findItemFromDS(fieldData[_this.fields.child], fields, parent);\n }\n return !!resultJSON;\n });\n }\n else {\n resultJSON = dataSource;\n }\n return resultJSON;\n };\n ListView.prototype.getQuery = function () {\n var columns = [];\n var query = (this.query ? this.query : new Query());\n if (!this.query) {\n for (var _i = 0, _a = Object.keys(this.fields.properties); _i < _a.length; _i++) {\n var column = _a[_i];\n if (column !== 'tableName' && !!(this.fields[column]) &&\n this.fields[column] !==\n ListBase.defaultMappedFields[column]\n && columns.indexOf(this.fields[column]) === -1) {\n columns.push(this.fields[column]);\n }\n }\n query.select(columns);\n if (this.fields.properties.hasOwnProperty('tableName')) {\n query.from(this.fields.tableName);\n }\n }\n return query;\n };\n ListView.prototype.setViewDataSource = function (dataSource) {\n if (dataSource === void 0) { dataSource = this.localData; }\n if (dataSource && this.fields.groupBy) {\n this.curViewDS = ListBase.groupDataSource(dataSource, this.fields, this.sortOrder);\n }\n else if (dataSource && this.sortOrder !== 'None') {\n this.curViewDS = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, this.fields.sortBy));\n }\n else {\n this.curViewDS = dataSource;\n }\n };\n ListView.prototype.isInAnimation = function () {\n return this.curUL.classList.contains('.e-animate');\n };\n ListView.prototype.setLocalData = function () {\n var _this = this;\n this.trigger('actionBegin');\n if (this.dataSource instanceof DataManager) {\n this.dataSource.executeQuery(this.getQuery()).then(function (e) {\n if (_this.isDestroyed) {\n return;\n }\n _this.localData = e.result;\n _this.renderList();\n _this.trigger('actionComplete', e);\n }).catch(function (e) {\n if (_this.isDestroyed) {\n return;\n }\n _this.trigger('actionFailure', e);\n });\n }\n else if (!this.dataSource || !this.dataSource.length) {\n var ul = this.element.querySelector('ul');\n if (ul) {\n remove(ul);\n this.setProperties({ dataSource: ListBase.createJsonFromElement(ul) }, true);\n this.localData = this.dataSource;\n this.renderList();\n this.trigger('actionComplete', { data: this.localData });\n }\n }\n else {\n this.localData = this.dataSource;\n this.renderList();\n this.trigger('actionComplete', { data: this.localData });\n }\n };\n ListView.prototype.reRender = function () {\n this.element.innerHTML = '';\n this.curUL = this.headerEle = undefined;\n this.setLocalData();\n this.header();\n };\n ListView.prototype.resetCurrentList = function () {\n this.setViewDataSource(this.curViewDS);\n this.contentContainer.innerHTML = '';\n this.createList();\n this.renderIntoDom(this.curUL);\n };\n ListView.prototype.createList = function () {\n this.currentLiElements = [];\n this.isNestedList = false;\n this.ulElement = this.curUL = ListBase.createList(this.curViewDS, this.listBaseOption);\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n };\n ListView.prototype.renderSubList = function (li) {\n var uID = li.getAttribute('data-uid');\n if (li.classList.contains(classNames.hasChild) && uID) {\n var ul = closest(li.parentNode, '.' + classNames.parentItem);\n var ele = this.element.querySelector('[pid=\\'' + uID + '\\']');\n this.curDSLevel.push(uID);\n this.setViewDataSource(this.getSubDS());\n if (!ele) {\n ele = ListBase.createListFromJson(this.curViewDS, this.listBaseOption, this.curDSLevel.length);\n ele.setAttribute('pID', uID);\n ele.style.display = 'none';\n this.renderIntoDom(ele);\n }\n this.switchView(ul, ele);\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n var fieldData = getFieldValues(this.selectedItems.data, this.listBaseOption.fields);\n this.header((fieldData[this.listBaseOption.fields.text]), true);\n this.selectedLI = undefined;\n }\n };\n ListView.prototype.renderIntoDom = function (ele) {\n this.contentContainer.appendChild(ele);\n };\n ListView.prototype.renderList = function () {\n this.setViewDataSource();\n this.createList();\n this.contentContainer = createElement('div', { className: classNames.content });\n this.element.appendChild(this.contentContainer);\n this.renderIntoDom(this.ulElement);\n };\n ListView.prototype.getElementUID = function (obj) {\n var fields = {};\n if (obj instanceof Element) {\n fields.id = obj.getAttribute('data-uid');\n }\n else {\n fields = obj;\n }\n return fields;\n };\n /**\n * It is used to Initialize the control rendering.\n */\n ListView.prototype.render = function () {\n this.element.classList.add(classNames.root);\n attributes(this.element, { role: 'list', tabindex: '0' });\n this.setCSSClass();\n this.setEnableRTL();\n this.setEnable();\n this.setSize();\n this.wireEvents();\n this.header();\n this.setLocalData();\n this.setHTMLAttribute();\n this.rippleFn = rippleEffect(this.element, {\n selector: '.' + classNames.listItem\n });\n };\n /**\n * It is used to destroy the ListView component.\n */\n ListView.prototype.destroy = function () {\n this.unWireEvents();\n var classAr = [classNames.root, this.cssClass, classNames.disable, 'e-rtl',\n 'e-has-header'];\n removeClass([this.element], classAr);\n this.rippleFn();\n _super.prototype.destroy.call(this);\n };\n /**\n * It helps to switch back from navigated sub list.\n */\n ListView.prototype.back = function () {\n var pID = this.curDSLevel[this.curDSLevel.length - 1];\n if (pID === undefined || this.isInAnimation()) {\n return;\n }\n this.curDSLevel.pop();\n this.setViewDataSource(this.getSubDS());\n var toUL = this.element.querySelector('[data-uid=\\'' + pID + '\\']');\n var fromUL = this.curUL;\n if (!toUL) {\n this.createList();\n this.renderIntoDom(this.ulElement);\n toUL = this.curUL;\n }\n else {\n toUL = toUL.parentElement;\n }\n var fieldData = getFieldValues(this.curDSJSON, this.listBaseOption.fields);\n var text = fieldData[this.fields.text];\n this.switchView(fromUL, toUL, true);\n this.removeFocus();\n var li = this.element.querySelector('[data-uid=\\'' + pID + '\\']');\n li.classList.add(classNames.focused);\n if (this.showCheckBox && li.querySelector('.' + classNames.checkboxIcon).classList.contains(classNames.checked)) {\n li.setAttribute('aria-selected', 'true');\n }\n else {\n li.classList.remove(classNames.selected);\n li.setAttribute('aria-selected', 'false');\n }\n this.liCollection = this.curUL.querySelectorAll('.' + classNames.listItem);\n this.header((this.curDSLevel.length ? text : this.headerTitle), (this.curDSLevel.length ? true : false));\n };\n /**\n * It is used to select the list item from the ListView.\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.selectItem = function (obj) {\n if (!isNullOrUndefined(obj)) {\n if (this.showCheckBox) {\n this.setCheckboxLI(this.getLiFromObjOrElement(obj));\n }\n else {\n this.setSelectLI(this.getLiFromObjOrElement(obj));\n }\n }\n };\n ListView.prototype.getLiFromObjOrElement = function (obj) {\n var li;\n if (!isNullOrUndefined(obj)) {\n if (typeof this.dataSource[0] === 'string') {\n if (obj instanceof Object && obj.constructor === HTMLLIElement) {\n var uid = obj.getAttribute('data-uid').toString();\n for (var i = 0; i < this.liCollection.length; i++) {\n if (this.liCollection[i].getAttribute('data-uid').toString() === uid) {\n li = this.liCollection[i];\n break;\n }\n }\n }\n }\n else {\n var resultJSON = this.getItemData(obj);\n var fieldData = getFieldValues(resultJSON, this.listBaseOption.fields);\n if (resultJSON) {\n li = this.element.querySelector('[data-uid=\"'\n + fieldData[this.fields.id] + '\"]');\n if (isNullOrUndefined(li)) {\n var curLi = this.element.querySelectorAll('.' + classNames.listItem);\n for (var i = 0; i < curLi.length; i++) {\n if (curLi[i].innerText.trim() === resultJSON.text) {\n li = curLi[i];\n }\n }\n }\n }\n }\n }\n return li;\n };\n ListView.prototype.selectMultipleItems = function (obj) {\n if (!isNullOrUndefined(obj)) {\n for (var i = 0; i < obj.length; i++) {\n if (!isNullOrUndefined(obj[i])) {\n this.selectItem(obj[i]);\n }\n }\n }\n };\n ListView.prototype.getParentId = function () {\n var parentId = [];\n if (this.isNestedList) {\n for (var i = this.curDSLevel.length - 1; i >= 0; i--) {\n parentId.push(this.curDSLevel[i]);\n }\n }\n return parentId;\n };\n /**\n * It is used to get the currently\n * {@link http://ej2.syncfusion.com/documentation/list-view/api-selectedItem.html?lang=typescript selected}\n * item details from the list items.\n */\n ListView.prototype.getSelectedItems = function () {\n this.selectedId = [];\n if (this.showCheckBox) {\n var liCollection = this.curUL.getElementsByClassName(classNames.selected);\n var liTextCollection = [];\n var liDataCollection = [];\n this.selectedId = [];\n var dataParent = [];\n for (var i = 0; i < liCollection.length; i++) {\n if (typeof this.dataSource[0] === 'string') {\n liTextCollection.push(liCollection[i].innerText.trim());\n }\n else {\n var tempData = this.getItemData(liCollection[i]);\n var fieldData = getFieldValues(tempData, this.listBaseOption.fields);\n if (this.isNestedList) {\n dataParent.push({ data: tempData, parentId: this.getParentId() });\n }\n else {\n liDataCollection.push(tempData);\n }\n liTextCollection.push(fieldData[this.listBaseOption.fields.text]);\n this.selectedId.push(fieldData[this.listBaseOption.fields.id]);\n }\n }\n if (typeof this.dataSource[0] === 'string') {\n return { item: liCollection, data: this.dataSource, text: liTextCollection };\n }\n if (this.isNestedList) {\n return { item: liCollection, data: dataParent, text: liTextCollection };\n }\n else {\n return { item: liCollection, data: liDataCollection, text: liTextCollection };\n }\n }\n else {\n var liElement = this.element.getElementsByClassName(classNames.selected)[0];\n var fieldData = getFieldValues(this.getItemData(liElement), this.listBaseOption.fields);\n if (typeof this.dataSource[0] === 'string') {\n return (!isNullOrUndefined(liElement)) ? {\n item: liElement, data: this.dataSource,\n text: liElement.innerText.trim()\n } : undefined;\n }\n else {\n if (isNullOrUndefined(fieldData) || isNullOrUndefined(liElement)) {\n return undefined;\n }\n else {\n this.selectedId.push(fieldData[this.listBaseOption.fields.id]);\n return {\n text: fieldData[this.listBaseOption.fields.text], item: liElement,\n data: this.getItemData(liElement)\n };\n }\n }\n }\n };\n /**\n * It is used to find out an item details from the current list.\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.findItem = function (obj) {\n return this.getItemData(obj);\n };\n /**\n * A function that used to enable the disabled list items based on passed element.\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.enableItem = function (obj) {\n this.setItemState(obj, true);\n };\n /**\n * It is used to disable the list items based on passed element.\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.disableItem = function (obj) {\n this.setItemState(obj, false);\n };\n //A function that used to set state of the list item like enable, disable.\n ListView.prototype.setItemState = function (obj, isEnable) {\n var resultJSON = this.getItemData(obj);\n var fieldData = getFieldValues(resultJSON, this.listBaseOption.fields);\n if (resultJSON) {\n var li = this.element.querySelector('[data-uid=\"' + fieldData[this.fields.id] + '\"]');\n if (isEnable) {\n if (li) {\n li.classList.remove(classNames.disable);\n }\n delete resultJSON[this.fields.enabled];\n }\n else if (!isEnable) {\n if (li) {\n li.classList.add(classNames.disable);\n }\n resultJSON[this.fields.enabled] = false;\n }\n }\n };\n /**\n * It is used to show an list item from the ListView.\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.showItem = function (obj) {\n this.showHideItem(obj, false, '');\n };\n /**\n * It is used to hide an item from the ListView.\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.hideItem = function (obj) {\n this.showHideItem(obj, true, 'none');\n };\n ListView.prototype.showHideItem = function (obj, isHide, display) {\n var resultJSON = this.getItemData(obj);\n var fieldData = getFieldValues(resultJSON, this.listBaseOption.fields);\n if (resultJSON) {\n var li = this.element.querySelector('[data-uid=\"' + fieldData[this.fields.id] + '\"]');\n if (li) {\n li.style.display = display;\n }\n if (isHide) {\n resultJSON[this.fields.isVisible] = false;\n }\n else {\n delete resultJSON[this.fields.isVisible];\n }\n }\n };\n /**\n * It adds new item to current ListView.\n * To add a new item in the list view, we need to pass ‘data’ as array or object and ‘fields’ as object.\n * For example fields: { text: 'Name', tooltip: 'Name', id:'id'}\n * @param {{[key:string]:Object}[]} data - Array JSON Data that need to add.\n * @param {Fields} fields - Fields as an Object with ID and Text fields.\n */\n ListView.prototype.addItem = function (data, fields) {\n var ds = this.findItemFromDS(this.dataSource, fields);\n var fieldData = getFieldValues(ds, this.listBaseOption.fields);\n var child = fieldData[this.fields.child];\n if (!child) {\n child = [];\n }\n child = child.concat(data);\n if (ds instanceof Array) {\n this.dataSource = this.localData = ds.concat(data);\n this.setViewDataSource();\n }\n else {\n ds[this.fields.child] = child;\n }\n this.resetCurrentList();\n };\n /**\n * A function that removes the item from data source based on passed element like fields: { text: 'Name', tooltip: 'Name', id:'id'}\n * @param {Fields|HTMLElement} obj - We can pass element Object or Fields as Object with ID and Text fields.\n */\n ListView.prototype.removeItem = function (obj) {\n this.removeItemFromList(obj, true);\n };\n ListView.prototype.removeItemFromList = function (obj, resetList) {\n var _this = this;\n var currentlySelectedItems = [];\n var selectedElements = [];\n var valid = false;\n if (typeof this.dataSource[0] === 'string') {\n if (typeof obj === 'object') {\n var liCollection_1 = [];\n var idx_1 = 0;\n this.liCollection.forEach(function (element) {\n if (element === obj) {\n valid = true;\n _this.removeElement(element);\n _this.dataSource.splice(idx_1, 1);\n _this.localData = _this.dataSource;\n }\n else {\n liCollection_1.push(element);\n }\n idx_1++;\n });\n this.liCollection = liCollection_1;\n }\n else if (typeof obj === 'string') {\n var liCollection_2 = [];\n var idx_2 = 0;\n var ds_1 = [];\n this.liCollection.forEach(function (element) {\n if (element.innerText.trim() === obj) {\n valid = true;\n _this.removeElement(element);\n }\n else {\n liCollection_2.push(element);\n ds_1.push(_this.dataSource[idx_2]);\n }\n idx_2++;\n });\n this.localData = this.curViewDS = this.dataSource = ds_1;\n this.liCollection = liCollection_2;\n }\n var values = this.getSelectedItems();\n this.selectedData = (!isNullOrUndefined(values)) ? values.text : undefined;\n selectedElements = undefined;\n if (resetList && valid) {\n this.resetList = true;\n this.resetCurrentList();\n if (!this.showCheckBox && this.selectedData && this.selectedData.length) {\n this.removeSelect();\n var index = this.dataSource.lastIndexOf(this.selectedData);\n this.liCollection[index].classList.add(classNames.selected);\n this.liCollection[index].setAttribute('aria-selected', 'true');\n }\n this.resetList = false;\n }\n }\n else {\n selectedElements = (!isNullOrUndefined(this.getSelectedItems())) ?\n this.getSelectedItems().data : undefined;\n var fields_1 = this.getElementUID(obj);\n var curAr_1;\n var curDS = this.findItemFromDS(this.dataSource, fields_1, true);\n if (curDS && obj) {\n var idx_3;\n curDS.some(function (data, index, arr) {\n var fieldData = getFieldValues(data, _this.listBaseOption.fields);\n if ((fields_1.id || fields_1.text) &&\n (!fields_1.id || fieldData[_this.fields.id] === fields_1.id) &&\n (!fields_1.text || fieldData[_this.fields.text] === fields_1.text)) {\n curAr_1 = arr;\n idx_3 = index;\n return true;\n }\n return false;\n });\n this.removeElement(this.getLiFromObjOrElement(curAr_1[idx_3]));\n curAr_1.splice(idx_3, 1);\n this.curViewDS = curAr_1;\n }\n var values = this.getSelectedItems();\n this.selectedData = (!isNullOrUndefined(values)) ? values.text : undefined;\n if (resetList && curAr_1) {\n this.resetList = true;\n this.resetCurrentList();\n if (!this.showCheckBox && !isNullOrUndefined(values)) {\n this.selectItem(values.item);\n }\n this.resetList = false;\n }\n }\n };\n /**\n * A function that removes multiple item from list view based on given input.\n * @param {Fields[] | HTMLElement[]} obj - We can pass array of elements or array of field Object with ID and Text fields.\n */\n ListView.prototype.removeMultipleItems = function (obj) {\n if (obj.length) {\n for (var i = 0; i < obj.length; i++) {\n (i === obj.length - 1) ? this.removeItemFromList(obj[i], true) : this.removeItemFromList(obj[i], false);\n }\n }\n };\n // Module Required function\n ListView.prototype.getModuleName = function () {\n return 'listview';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n ListView.prototype.getPersistData = function () {\n return this.addOnPersist(['cssClass', 'enableRtl', 'htmlAttributes',\n 'enable', 'fields', 'animation', 'headerTitle',\n 'sortOrder', 'showIcon', 'height', 'width', 'showCheckBox', 'checkBoxPosition']);\n };\n __decorate([\n Property()\n ], ListView.prototype, \"cssClass\", void 0);\n __decorate([\n Property({})\n ], ListView.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], ListView.prototype, \"enable\", void 0);\n __decorate([\n Property([])\n ], ListView.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], ListView.prototype, \"query\", void 0);\n __decorate([\n Complex(ListBase.defaultMappedFields, FieldSettings)\n ], ListView.prototype, \"fields\", void 0);\n __decorate([\n Property({ effect: 'SlideLeft', duration: 400, easing: 'ease' })\n ], ListView.prototype, \"animation\", void 0);\n __decorate([\n Property('None')\n ], ListView.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"showIcon\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"showCheckBox\", void 0);\n __decorate([\n Property('Left')\n ], ListView.prototype, \"checkBoxPosition\", void 0);\n __decorate([\n Property('')\n ], ListView.prototype, \"headerTitle\", void 0);\n __decorate([\n Property(false)\n ], ListView.prototype, \"showHeader\", void 0);\n __decorate([\n Property('')\n ], ListView.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], ListView.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], ListView.prototype, \"template\", void 0);\n __decorate([\n Property(null)\n ], ListView.prototype, \"groupTemplate\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], ListView.prototype, \"actionFailure\", void 0);\n ListView = __decorate([\n NotifyPropertyChanges\n ], ListView);\n return ListView;\n}(Component));\nexport { ListView };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base';\nimport { Event, cldrData, L10n, Component, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, getUniqueID } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\nvar WRAPPERCLASS = 'e-time-wrapper';\nvar POPUP = 'e-popup';\nvar INPUTCONTAINER = 'e-input-group';\nvar ERROR = 'e-error';\nvar POPUPDIMENSION = '240px';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar ROOT = 'e-timepicker';\nvar RTL = 'e-rtl';\nvar CONTENT = 'e-content';\nvar SELECTED = 'e-active';\nvar HOVER = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar FOCUS = 'e-input-focus';\nvar DEVICE = 'e-device';\nvar LISTCLASS = ListBaseClasses.li;\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nexport var TimePickerBase;\n(function (TimePickerBase) {\n function createListItems(min, max, globalize, timeFormat, step) {\n var start;\n var end;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n * \n * \n * ```\n */\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.disableItemCollection = [];\n return _this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n this.inputElement = this.element;\n this.angularTag = null;\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = createElement('input');\n this.element.appendChild(this.inputElement);\n }\n };\n // element creation\n TimePicker.prototype.render = function () {\n this.initialize();\n this.createInputElement();\n this.setEnable();\n this.validateInterval();\n this.bindEvents();\n this.validateDisable();\n this.setValue(this.getFormattedValue(this.value));\n };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n this.popupCreation();\n this.popupObj.hide();\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date('' + this.value)) }, true);\n this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);\n this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);\n this.checkAttributes(); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n },\n buttons: [' e-input-group-icon e-time-icon e-icons']\n });\n this.inputWrapper.container.style.width = this.setWidth(this.width);\n attributes(this.inputElement, {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n // destroy function\n TimePicker.prototype.destroy = function () {\n this.hide();\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n this.ensureInputAttribute();\n this.enableElement([this.inputElement]);\n this.inputElement.classList.remove('e-input');\n if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {\n Input.setEnabled(true, this.inputElement, this.floatLabelType);\n }\n remove(this.inputWrapper.container);\n this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;\n this.liCollections = this.timeCollections = this.disableItemCollection = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n _super.prototype.destroy.call(this);\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n var prop = this.inputElement.attributes[i].name;\n if (isNullOrUndefined(this.cloneElement.getAttribute(prop))) {\n if (prop.toLowerCase() === 'value' || isNullOrUndefined(this.cloneElement.getAttribute('value'))) {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop);\n }\n }\n };\n //popup creation\n TimePicker.prototype.popupCreation = function () {\n this.popupWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.classList.add(this.cssClass);\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.generateList();\n append([this.listWrapper], this.popupWrapper);\n }\n document.body.appendChild(this.popupWrapper);\n this.addSelection();\n this.renderPopup();\n this.setScrollPosition();\n };\n TimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.popupWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n TimePicker.prototype.generateList = function () {\n this.createListItems();\n this.wireListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n TimePicker.prototype.popupCalculation = function () {\n var left = 0;\n if (Browser.isDevice) {\n var firstItem = this.isEmptyList() ? this.listTag : this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n (this.enableRtl ? parseInt(getComputedStyle(this.inputElement).paddingRight, 10) :\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10)));\n }\n return left;\n };\n TimePicker.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0 ||\n isNullOrUndefined(this.liCollections);\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n var offset = Browser.isDevice ? this.setPopupPosition() : 2;\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n collision: { X: 'flip', Y: 'flip' },\n relateTo: this.inputWrapper.container,\n position: { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n offsetX: this.popupCalculation(),\n open: function () {\n _this.popupWrapper.style.visibility = 'visible';\n addClass([_this.inputWrapper.buttons[0]], SELECTED);\n }, close: function () {\n removeClass([_this.inputWrapper.buttons[0]], SELECTED);\n _this.unWireListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\n _this.listWrapper = _this.popupWrapper = _this.listTag = undefined;\n }\n });\n if (!Browser.isDevice) {\n this.popupObj.collision = { X: 'none', Y: 'flip' };\n }\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: 'medium', type: 'time' });\n }\n };\n TimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = !this.isNullOrEmpty(this.initValue);\n if (this.checkDateValue(dateValue)) {\n var date = value ? this.initValue.getDate() : DAY;\n var month = value ? this.initValue.getMonth() : MONTH;\n var year = value ? this.initValue.getFullYear() : YEAR;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());\n }\n }\n return null;\n };\n TimePicker.prototype.checkErrorState = function (val) {\n var value = this.getDateObject(val);\n if (this.validateState(value)) {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n };\n TimePicker.prototype.validateInterval = function () {\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.enableElement([this.inputWrapper.buttons[0]]);\n }\n else {\n this.disableTimeIcon();\n }\n };\n TimePicker.prototype.disableTimeIcon = function () {\n this.disableElement([this.inputWrapper.buttons[0]]);\n this.hide();\n };\n TimePicker.prototype.disableElement = function (element) {\n addClass(element, DISABLED);\n };\n TimePicker.prototype.enableElement = function (element) {\n removeClass(element, DISABLED);\n };\n TimePicker.prototype.selectInputText = function () {\n this.inputElement.setSelectionRange(0, (this.inputElement).value.length);\n };\n TimePicker.prototype.getMeridianText = function () {\n var meridian;\n if (this.locale === 'en' || this.locale === 'en-US') {\n meridian = getValue('dayPeriods.format.wide', getDefaultDateObject());\n }\n else {\n meridian = getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.dayPeriods.format.abbreviated', cldrData);\n }\n return meridian;\n };\n TimePicker.prototype.getCursorSelection = function () {\n var input = (this.inputElement);\n var start = 0;\n var end = 0;\n if (!isNaN(input.selectionStart)) {\n start = input.selectionStart;\n end = input.selectionEnd;\n }\n return { start: Math.abs(start), end: Math.abs(end) };\n };\n TimePicker.prototype.getActiveElement = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n return this.popupWrapper.querySelectorAll('.' + SELECTED);\n }\n else {\n return null;\n }\n };\n TimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n TimePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n TimePicker.prototype.setPopupWidth = function (width) {\n width = this.setWidth(width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice) {\n var firstItem = this.isEmptyList() ? this.listTag : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).textIndent, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var listHeight = this.getPopupHeight();\n var element;\n element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.getText = function () {\n return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);\n };\n TimePicker.prototype.getValue = function (value) {\n return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {\n format: this.cldrTimeFormat(), type: 'time'\n });\n };\n TimePicker.prototype.cldrDateFormat = function () {\n var cldrDate;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDate = (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\n };\n TimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.format)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.format;\n }\n return cldrTime;\n };\n TimePicker.prototype.dateToNumeric = function () {\n var cldrTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));\n }\n return cldrTime;\n };\n TimePicker.prototype.getExactDateTime = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });\n }\n };\n TimePicker.prototype.setValue = function (value) {\n var time = this.checkValue(value);\n if (!this.strictMode && !this.validateState(time)) {\n this.initValue = this.valueWithMinutes = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n if (this.isNullOrEmpty(time)) {\n this.initValue = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.initValue = this.getDateObject(time);\n }\n }\n this.updateInput(true, this.initValue);\n };\n TimePicker.prototype.updatePlaceHolder = function () {\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n };\n //event related functions\n TimePicker.prototype.popupHandler = function () {\n if (this.isPopupOpen()) {\n this.closePopup();\n }\n else {\n if (!Browser.isDevice) {\n this.inputElement.focus();\n }\n this.show();\n addClass([this.inputWrapper.container], FOCUS);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.readonly) {\n var curPos = this.getCursorSelection();\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n this.keyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.updateValue(this.inputElement.value, event);\n }\n this.hide();\n addClass([this.inputWrapper.container], FOCUS);\n this.isNavigate = false;\n break;\n case 'open':\n this.show();\n break;\n case 'escape':\n Input.setValue(this.objToString(this.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousState(this.value);\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS)) {\n this.hide();\n if (!Browser.isDevice) {\n addClass([this.inputWrapper.container], FOCUS);\n }\n }\n };\n TimePicker.prototype.closePopup = function (delay) {\n if (this.isPopupOpen() && this.popupObj) {\n var args = {\n popup: this.popupObj\n };\n this.trigger('close', args);\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: delay ? delay : 0\n };\n this.popupObj.hide(new Animation(animModel));\n removeClass([this.inputWrapper.container], [ICONANIMATION, FOCUS]);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n this.initValue = this.valueWithMinutes = null;\n this.setProperties({ value: this.getDateObject(this.inputElement.value) }, true);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.getDateObject(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setHover(currentLi, HOVER);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(SELECTED)) {\n this.checkValue(li.getAttribute('data-value'));\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n //protected function\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n Input.setValue(this.getValue(this.initValue), this.inputElement, this.floatLabelType, this.showClearButton);\n return this.inputElement.value;\n }\n else if (+minValue >= +value) {\n return this.getDateObject(minValue);\n }\n else if (+value >= +maxValue || +minValue === +maxValue) {\n return this.getDateObject(maxValue);\n }\n }\n else {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n if (!isNaN(+this.createDateObj(dateVal))) {\n return dateVal;\n }\n }\n }\n return dateVal;\n };\n TimePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'click', this.popupHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.focusOut, this);\n EventHandler.add(this.inputElement, 'focus', this.focusIn, this);\n this.bindClearEvent();\n if (!Browser.isDevice) {\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n EventHandler.add(this.inputElement, 'mousedown touchstart', this.mouseDownHandler, this);\n }\n };\n TimePicker.prototype.unBindEvents = function () {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.popupHandler);\n EventHandler.remove(this.inputElement, 'blur', this.focusOut);\n EventHandler.remove(this.inputElement, 'focus', this.focusIn);\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n };\n TimePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler, this);\n }\n };\n TimePicker.prototype.clearHandler = function (e) {\n e.preventDefault();\n this.clear(e);\n };\n TimePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.initValue = null;\n this.resetState();\n this.changeEvent(event);\n };\n TimePicker.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.zIndex = this.zIndex;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.checkAttributes = function () {\n var attributes = ['step', 'disabled', 'readonly', 'style', 'name', 'value', 'min', 'max', 'placeholder'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n var enabled = isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ enabled: enabled }, true);\n break;\n case 'readonly':\n var readonly = !isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\n break;\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'placeholder':\n this.placeholder = this.inputElement.getAttribute(prop);\n break;\n case 'min':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, true);\n }\n break;\n case 'max':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, true);\n }\n break;\n case 'value':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.initValue = value;\n this.updateInput(false, this.initValue);\n }\n break;\n }\n }\n }\n };\n TimePicker.prototype.setCurrentDate = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n return new Date(YEAR, MONTH, DAY, value.getHours(), value.getMinutes(), value.getSeconds());\n };\n TimePicker.prototype.getSeparator = function () {\n var result = '';\n var formats = this.cldrTimeFormat().split(' ')[this.getTextFormat()];\n if (isNullOrUndefined(formats)) {\n if (this.cldrTimeFormat().indexOf('a') === 0) {\n formats = 'a ' + this.cldrTimeFormat().split('a')[1];\n }\n else if (this.cldrTimeFormat().indexOf('a') === this.cldrTimeFormat().length - 1) {\n formats = this.cldrTimeFormat().split('a')[0] + ' a';\n }\n }\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n for (var i = 0; i < formats.length; i++) {\n if (!regex.test(formats.charAt(i))) {\n result = formats.charAt(i);\n }\n }\n return result;\n };\n TimePicker.prototype.getTextFormat = function () {\n var time = 0;\n if (this.cldrTimeFormat().split(' ')[0] === 'a' || this.cldrTimeFormat().indexOf('a') === 0) {\n time = 1;\n }\n else if (this.cldrTimeFormat().indexOf('a') < 0) {\n var strArray = this.cldrTimeFormat().split(' ');\n for (var i = 0; i < strArray.length; i++) {\n if (strArray[i].toLowerCase().indexOf('h') >= 0) {\n time = i;\n break;\n }\n }\n }\n return time;\n };\n TimePicker.prototype.updateValue = function (value, event) {\n var val;\n if (this.isNullOrEmpty(value)) {\n this.resetState();\n }\n else {\n val = this.checkValue(value);\n if (this.strictMode) {\n // this case set previous value to the text box when set invalid date\n var inputVal = (val === null && value.trim().length > 0) ?\n this.previousState(this.prevDate) : this.inputElement.value;\n Input.setValue(inputVal, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n this.checkValueChange(event, typeof value === 'string' ? false : true);\n };\n TimePicker.prototype.previousState = function (date) {\n var value = this.getDateObject(date);\n for (var i = 0; i < this.timeCollections.length; i++) {\n if (+value === this.timeCollections[i]) {\n this.activeIndex = i;\n this.selectedElement = this.liCollections[i];\n this.valueWithMinutes = new Date(this.timeCollections[i]);\n break;\n }\n }\n return this.prevValue;\n };\n TimePicker.prototype.resetState = function () {\n this.removeSelection();\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = this.activeIndex = null;\n if (!this.strictMode) {\n this.checkErrorState(null);\n }\n };\n TimePicker.prototype.objToString = function (val) {\n if (isNullOrUndefined(this.checkDateValue(val))) {\n return null;\n }\n else {\n return this.globalize.formatDate(val, { format: this.cldrTimeFormat(), type: 'time' });\n }\n };\n TimePicker.prototype.checkValue = function (value) {\n if (!this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.validateValue(date, value);\n }\n this.resetState();\n return this.valueWithMinutes = null;\n };\n TimePicker.prototype.validateValue = function (date, value) {\n var time;\n var val = this.validateMinMax(value, this.min, this.max);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n Input.setValue(value_1, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(time, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(this.timeCollections.length - 1, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (+value < this.timeCollections[i]) {\n var index = this.validLiElement(i);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n var index = this.validLiElement(i, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\n }\n else {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n }\n };\n TimePicker.prototype.elementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.checkValue(value);\n }\n };\n TimePicker.prototype.validLiElement = function (index, backward) {\n var elementIndex = null;\n var items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :\n this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n var isCheck = true;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === 0) {\n if (isCheck) {\n index = i = items.length;\n isCheck = false;\n }\n }\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === items.length - 1) {\n if (isCheck) {\n index = i = -1;\n isCheck = false;\n }\n }\n }\n }\n }\n return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n return;\n }\n var count = this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n var nextItem = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (count) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;\n this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?\n false : true);\n nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(new Date(nextItem));\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n this.selectInputText();\n if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setScrollPosition();\n }\n };\n TimePicker.prototype.setPopupPosition = function () {\n var offsetValue;\n var padding = 1;\n var popupHeight = this.getPopupHeight();\n var element = this.getActiveElement();\n var liHeight = this.liCollections[0].getBoundingClientRect().height;\n var listHeight = popupHeight / HALFPOSITION;\n var height = element.length === 0 ? this.liCollections[0].offsetTop : element[0].offsetTop;\n var lastItemOffsetValue = this.liCollections[this.liCollections.length - 1].offsetTop;\n var ulPadding = (parseInt(getComputedStyle(this.listTag).paddingTop, 10));\n if (lastItemOffsetValue - listHeight < height) {\n var count = popupHeight / liHeight;\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - ulPadding - HALFPOSITION;\n }\n else if ((height + liHeight) > listHeight) {\n offsetValue = listHeight - liHeight / HALFPOSITION;\n }\n else {\n offsetValue = height;\n }\n offsetValue = offsetValue + HALFPOSITION + ((liHeight - this.containerStyle.height) / HALFPOSITION);\n return -offsetValue;\n };\n TimePicker.prototype.getCultureTimeObject = function (ld, c) {\n return getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);\n };\n TimePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n TimePicker.prototype.unWireListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n if (!Browser.isDevice) {\n EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);\n }\n }\n };\n TimePicker.prototype.valueProcess = function (event, value) {\n var result = (isNullOrUndefined(this.checkDateValue(value))) ? null : value;\n if (+this.prevDate !== +result) {\n this.initValue = result;\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.changeEvent = function (event) {\n this.addSelection();\n this.updateInput(true, this.initValue);\n var eventArgs = {\n e: event,\n value: this.value,\n text: (this.inputElement).value,\n isInteracted: isNullOrUndefined(event) ? false : true\n };\n eventArgs.value = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.prevDate = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.trigger('change', eventArgs);\n };\n TimePicker.prototype.updateInput = function (isUpdate, date) {\n if (isUpdate) {\n this.prevValue = this.getValue(date);\n }\n this.prevDate = this.valueWithMinutes = date;\n this.setProperties({ value: date }, true);\n };\n TimePicker.prototype.setActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED);\n if (items.length) {\n removeClass(items, SELECTED);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n };\n TimePicker.prototype.addSelection = function () {\n this.selectedElement = null;\n this.removeSelection();\n this.setActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n TimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n TimePicker.prototype.createDateObj = function (val) {\n var today = this.globalize.formatDate(new Date(), { skeleton: 'short', type: 'date' });\n var value = null;\n if (typeof val === 'string') {\n if (val.toUpperCase().indexOf('AM') > -1 || val.toUpperCase().indexOf('PM') > -1) {\n today = this.defaultCulture.formatDate(new Date(), { skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.TimeParse(today, val);\n }\n }\n else {\n value = this.TimeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.TimeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var start;\n var end;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs);\n if (eventArgs.isDisabled) {\n eventArgs.element.classList.add(DISABLED);\n }\n if (eventArgs.element.classList.contains(DISABLED)) {\n _this.disableItemCollection.push(eventArgs.element.getAttribute('data-value'));\n }\n }\n };\n this.listTag = ListBase.createList(listItems, listBaseOptions, true);\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n var target = event.target;\n if (!(closest(target, '#' + this.popupObj.element.id)) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.container)) {\n if (this.isPopupOpen()) {\n this.hide();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);\n event.preventDefault();\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date('' + date.min));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date('' + date.max));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n /**\n * Focuses out the TimePicker textbox element.\n * @returns void\n */\n TimePicker.prototype.focusOut = function () {\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup();\n this.inputElement.blur();\n this.trigger('blur');\n if (this.getText() !== this.inputElement.value) {\n this.updateValue((this.inputElement).value, null);\n }\n else if (this.inputElement.value.trim().length === 0) {\n this.resetState();\n }\n this.cursorDetails = null;\n this.isNavigate = false;\n };\n TimePicker.prototype.isPopupOpen = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + ROOT)) {\n return true;\n }\n return false;\n };\n /**\n * Focused the TimePicker textbox element.\n * @returns void\n */\n TimePicker.prototype.focusIn = function () {\n this.inputElement.focus();\n if (!this.readonly && !Browser.isDevice) {\n this.selectInputText();\n }\n this.trigger('focus');\n };\n /**\n * Hides the TimePicker popup.\n * @returns void\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100);\n };\n /**\n * Opens the popup to show the list items.\n * @returns void\n */\n TimePicker.prototype.show = function () {\n if (!this.isPopupOpen() && this.enabled && !this.readonly && !this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n this.popupCreation();\n var args = {\n popup: this.popupObj\n };\n this.trigger('open', args);\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION,\n };\n this.popupObj.refreshPosition(this.inputElement);\n this.popupObj.show(new Animation(openAnimation));\n this.setActiveDescendant();\n attributes(this.inputElement, { 'aria-expanded': 'true' });\n EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);\n }\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To get component name\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n TimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n break;\n case 'cssClass':\n addClass([this.inputWrapper.container], [newProp.cssClass]);\n if (this.popupWrapper) {\n addClass([this.popupWrapper], [newProp.cssClass]);\n }\n this.setProperties({ cssClass: newProp.cssClass }, true);\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'enableRtl':\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.updatePlaceHolder();\n this.setValue(this.value);\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.setValue(this.value);\n break;\n case 'value':\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n this.initValue = newProp.value;\n this.setProperties({ value: isNullOrUndefined(this.checkValue(newProp.value)) ? null : newProp.value }, true);\n this.checkValueChange(null, false);\n break;\n case 'strictMode':\n if (newProp.strictMode) {\n this.checkErrorState(null);\n }\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.checkValue((this.inputElement).value);\n this.checkValueChange(null, false);\n break;\n case 'scrollTo':\n if (this.checkDateValue(newProp.scrollTo)) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: newProp.scrollTo }, true);\n }\n else {\n this.setProperties({ scrollTo: null });\n }\n }\n }\n };\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property('Never')\n ], TimePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(1000)\n ], TimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(30)\n ], TimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"itemRender\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\nexport { TimePicker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Internationalization } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, KeyboardEvents, L10n } from '@syncfusion/ej2-base';\nimport { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';\nimport { createElement, removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';\n//class constant defination.\nvar ROOT = 'e-calendar';\nvar DEVICE = 'e-device';\nvar HEADER = 'e-header';\nvar RTL = 'e-rtl';\nvar CONTENT = 'e-content';\nvar YEAR = 'e-year';\nvar MONTH = 'e-month';\nvar DECADE = 'e-decade';\nvar ICON = 'e-icons';\nvar PREVICON = 'e-prev';\nvar NEXTICON = 'e-next';\nvar RIPPLESTYLE = 'e-ripple-style';\nvar PREVSPAN = 'e-date-icon-prev';\nvar NEXTSPAN = 'e-date-icon-next ';\nvar ICONCONTAINER = 'e-icon-container';\nvar DISABLED = 'e-disabled';\nvar OVERLAY = 'e-overlay';\nvar WEEKEND = 'e-weekend';\nvar WEEKNUMBER = 'e-week-number';\nvar OTHERMONTH = 'e-other-month';\nvar SELECTED = 'e-selected';\nvar FOCUSEDDATE = 'e-focused-date';\nvar OTHERMONTHROW = 'e-month-hide';\nvar TODAY = 'e-today';\nvar TITLE = 'e-title';\nvar LINK = 'e-day';\nvar CELL = 'e-cell';\nvar WEEKHEADER = 'e-week-header';\nvar ZOOMIN = 'e-zoomin';\nvar FOOTER = 'e-footer-container';\nvar BTN = 'e-btn';\nvar FLAT = 'e-flat';\nvar dayMilliSeconds = 86400000;\nvar minutesMilliSeconds = 60000;\n/**\n * Represents the Calendar component that allows the user to select a date.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Calendar = /** @class */ (function (_super) {\n __extends(Calendar, _super);\n /**\n * Initialized new instance of Calendar Class.\n * Constructor for creating the widget\n * @param {CalendarModel} options?\n * @param {string|HTMLElement} element?\n */\n function Calendar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.effect = '';\n _this.keyConfigs = {\n controlUp: 'ctrl+38',\n controlDown: 'ctrl+40',\n moveDown: 'downarrow',\n moveUp: 'uparrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n select: 'enter',\n home: 'home',\n end: 'end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n shiftPageUp: 'shift+pageup',\n shiftPageDown: 'shift+pagedown',\n controlHome: 'ctrl+home',\n controlEnd: 'ctrl+end'\n };\n return _this;\n }\n /**\n * To Initialize the control rendering.\n * @returns void\n * @private\n */\n Calendar.prototype.render = function () {\n this.globalize = new Internationalization(this.locale);\n this.todayDisabled = false;\n this.todayDate = new Date(new Date().setHours(0, 0, 0, 0));\n if (this.getModuleName() === 'calendar') {\n this.element.classList.add(ROOT);\n if (this.enableRtl) {\n this.element.classList.add(RTL);\n }\n if (Browser.isDevice) {\n this.element.classList.add(DEVICE);\n }\n attributes(this.element, {\n 'data-role': 'calendar'\n });\n }\n else {\n this.calendarElement = createElement('div');\n this.calendarElement.classList.add(ROOT);\n if (this.enableRtl) {\n this.calendarElement.classList.add(RTL);\n }\n if (Browser.isDevice) {\n this.calendarElement.classList.add(DEVICE);\n }\n attributes(this.calendarElement, {\n 'role': 'calendar'\n });\n }\n this.processDate();\n this.header();\n this.content();\n this.wireEvents();\n };\n Calendar.prototype.processDate = function () {\n this.validateDate();\n this.minMaxUpdate();\n };\n Calendar.prototype.validateDate = function () {\n this.setProperties({ value: this.checkDateValue(new Date('' + this.value)) }, true); // persist the value propeerty.\n this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);\n this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);\n this.currentDate = this.currentDate ? this.currentDate : new Date(new Date().setHours(0, 0, 0, 0));\n if (!isNullOrUndefined(this.value) && this.min <= this.max && this.value >= this.min && this.value <= this.max) {\n this.currentDate = new Date('' + this.value);\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n };\n Calendar.prototype.minMaxUpdate = function () {\n if (!(this.min <= this.max)) {\n this.setProperties({ min: this.min }, true);\n addClass([this.element], OVERLAY);\n }\n else {\n removeClass([this.element], OVERLAY);\n }\n this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;\n this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;\n if (!isNullOrUndefined(this.value) && this.value <= this.min && this.min <= this.max) {\n this.setProperties({ value: this.min }, true);\n this.changedArgs = { value: this.value };\n }\n else {\n if (!isNullOrUndefined(this.value) && this.value >= this.max && this.min <= this.max) {\n this.setProperties({ value: this.max }, true);\n this.changedArgs = { value: this.value };\n }\n }\n if (this.min <= this.max && this.value && this.value <= this.max && this.value >= this.min) {\n this.currentDate = new Date('' + this.value);\n }\n else {\n if (this.min <= this.max && !this.value && this.currentDate > this.max) {\n this.currentDate = new Date('' + this.max);\n }\n else {\n if (this.currentDate < this.min) {\n this.currentDate = new Date('' + this.min);\n }\n }\n }\n };\n Calendar.prototype.header = function () {\n var ariaPrevAttrs = {\n 'aria-disabled': 'false',\n 'aria-label': 'previous month'\n };\n var ariaNextAttrs = {\n 'aria-disabled': 'false',\n 'aria-label': 'next month'\n };\n var ariaTitleAttrs = {\n 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title'\n };\n this.headerElement = createElement('div', { className: HEADER });\n var iconContainer = createElement('div', { className: ICONCONTAINER });\n this.previousIcon = createElement('button', { className: '' + PREVICON, attrs: { type: 'button' } });\n rippleEffect(this.previousIcon, {\n duration: 400,\n selector: '.e-prev',\n isCenterRipple: true\n });\n attributes(this.previousIcon, ariaPrevAttrs);\n this.nextIcon = createElement('button', { className: '' + NEXTICON, attrs: { type: 'button' } });\n rippleEffect(this.nextIcon, {\n selector: '.e-next',\n duration: 400,\n isCenterRipple: true\n });\n attributes(this.nextIcon, ariaNextAttrs);\n this.headerTitleElement = createElement('div', { className: '' + LINK + ' ' + TITLE });\n attributes(this.headerTitleElement, ariaTitleAttrs);\n this.headerElement.appendChild(this.headerTitleElement);\n this.previousIcon.appendChild(createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));\n this.nextIcon.appendChild(createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));\n iconContainer.appendChild(this.previousIcon);\n iconContainer.appendChild(this.nextIcon);\n this.headerElement.appendChild(iconContainer);\n if (this.getModuleName() === 'calendar') {\n this.element.appendChild(this.headerElement);\n }\n else {\n this.calendarElement.appendChild(this.headerElement);\n }\n };\n Calendar.prototype.content = function () {\n this.previousDate = this.value;\n this.contentElement = createElement('div', { className: CONTENT });\n this.table = createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '' } });\n if (this.getModuleName() === 'calendar') {\n this.element.appendChild(this.contentElement);\n }\n else {\n this.calendarElement.appendChild(this.contentElement);\n }\n this.contentElement.appendChild(this.table);\n this.contentHdr();\n this.contentBody();\n if (this.showTodayButton) {\n this.contentFooter();\n }\n };\n Calendar.prototype.getCultureValues = function () {\n var culShortNames = [];\n var cldrObj;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrObj = (getValue('days.stand-alone.short', getDefaultDateObject()));\n }\n else {\n cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));\n }\n for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {\n var obj = _a[_i];\n culShortNames.push(getValue(obj, cldrObj));\n }\n return culShortNames;\n };\n Calendar.prototype.contentHdr = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.element.querySelectorAll('.e-content .e-week-header')[0])) {\n detach(this.element.querySelectorAll('.e-content .e-week-header')[0]);\n }\n }\n else {\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0])) {\n detach(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0]);\n }\n }\n var daysCount = 6;\n var html = '';\n var shortNames;\n if (this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {\n this.setProperties({ firstDayOfWeek: 0 }, true);\n }\n this.tableHeadElement = createElement('thead', { className: WEEKHEADER });\n if (this.weekNumber) {\n html += '
';\n addClass([this.element], '' + WEEKNUMBER);\n }\n shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek);\n for (var days = 0; days <= daysCount; days++) {\n html += '
' + shortNames[days] + ' ';\n }\n html = '
' + html + ' ';\n this.tableHeadElement.innerHTML = html;\n this.table.appendChild(this.tableHeadElement);\n };\n Calendar.prototype.contentBody = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.element.querySelectorAll('.e-content tbody')[0])) {\n detach(this.element.querySelectorAll('.e-content tbody')[0]);\n }\n }\n else {\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content tbody')[0])) {\n detach(this.calendarElement.querySelectorAll('.e-content tbody')[0]);\n }\n }\n switch (this.start) {\n case 'Year':\n this.renderYears();\n break;\n case 'Decade':\n this.renderDecades();\n break;\n default:\n this.renderMonths();\n }\n };\n Calendar.prototype.updateFooter = function () {\n this.todayElement.textContent = this.l10.getConstant('today');\n };\n Calendar.prototype.contentFooter = function () {\n if (this.showTodayButton) {\n var minimum = new Date(this.min.toDateString());\n var maximum = new Date(this.max.toDateString());\n var l10nLocale = { today: 'Today' };\n this.globalize = new Internationalization(this.locale);\n this.l10 = new L10n(this.getModuleName(), l10nLocale, this.locale);\n this.todayElement = createElement('button');\n rippleEffect(this.todayElement);\n this.updateFooter();\n addClass([this.todayElement], [BTN, TODAY, FLAT]);\n if ((!(new Date(minimum.setHours(0, 0, 0, 0)) <= this.todayDate &&\n this.todayDate <= new Date(maximum.setHours(0, 0, 0, 0)))) || (this.todayDisabled)) {\n addClass([this.todayElement], DISABLED);\n }\n this.footer = createElement('div', { className: FOOTER });\n this.footer.appendChild(this.todayElement);\n if (this.getModuleName() === 'calendar') {\n this.element.appendChild(this.footer);\n }\n if (this.getModuleName() === 'datepicker') {\n this.calendarElement.appendChild(this.footer);\n }\n if (this.getModuleName() === 'datetimepicker') {\n this.calendarElement.appendChild(this.footer);\n }\n if (!this.todayElement.classList.contains(DISABLED)) {\n EventHandler.add(this.todayElement, 'click', this.todayButtonClick, this);\n }\n }\n };\n Calendar.prototype.wireEvents = function () {\n EventHandler.add(this.headerTitleElement, 'click', this.navTitle, this);\n if (this.getModuleName() === 'calendar') {\n this.keyboardModule = new KeyboardEvents(this.element, {\n eventName: 'keydown',\n keyAction: this.keyActionHandle.bind(this),\n keyConfigs: this.keyConfigs\n });\n }\n else {\n this.keyboardModule = new KeyboardEvents(this.calendarElement, {\n eventName: 'keydown',\n keyAction: this.keyActionHandle.bind(this),\n keyConfigs: this.keyConfigs\n });\n }\n };\n Calendar.prototype.todayButtonClick = function () {\n if (this.showTodayButton) {\n var tempValue = new Date();\n if (this.value) {\n tempValue.setHours(this.value.getHours());\n tempValue.setMinutes(this.value.getMinutes());\n tempValue.setSeconds(this.value.getSeconds());\n }\n else {\n tempValue = new Date(tempValue.getFullYear(), tempValue.getMonth(), tempValue.getDate(), 0, 0, 0);\n }\n this.setProperties({ value: tempValue }, true);\n if (this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n this.navigateTo(this.depth, new Date('' + this.value));\n }\n else {\n this.navigateTo('Month', new Date('' + this.value));\n }\n this.effect = '';\n }\n };\n Calendar.prototype.keyActionHandle = function (e) {\n var view = this.getViewNumber(this.currentView());\n var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');\n var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');\n var depthValue = this.getViewNumber(this.depth);\n var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);\n this.effect = '';\n switch (e.action) {\n case 'moveLeft':\n this.KeyboardNavigate(-1, view, e, this.max, this.min);\n e.preventDefault();\n break;\n case 'moveRight':\n this.KeyboardNavigate(1, view, e, this.max, this.min);\n e.preventDefault();\n break;\n case 'moveUp':\n if (view === 0) {\n this.KeyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.\n }\n else {\n this.KeyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.\n }\n e.preventDefault();\n break;\n case 'moveDown':\n if (view === 0) {\n this.KeyboardNavigate(7, view, e, this.max, this.min);\n }\n else {\n this.KeyboardNavigate(4, view, e, this.max, this.min);\n }\n e.preventDefault();\n break;\n case 'select':\n if (e.target === this.todayElement) {\n this.todayButtonClick();\n }\n else {\n var element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;\n if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {\n if (levelRestrict) {\n var d = new Date(parseInt('' + (element).id, 0));\n this.selectDate(e, d, (element));\n }\n else {\n this.contentClick(null, --view, (element));\n }\n }\n }\n break;\n case 'controlUp':\n this.title();\n e.preventDefault();\n break;\n case 'controlDown':\n if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {\n this.contentClick(null, --view, (focusedDate || selectedDate));\n }\n e.preventDefault();\n break;\n case 'home':\n this.currentDate = this.firstDay(this.currentDate);\n detach(this.tableBodyElement);\n this.renderMonths(e);\n e.preventDefault();\n break;\n case 'end':\n this.currentDate = this.lastDay(this.currentDate);\n detach(this.tableBodyElement);\n this.renderMonths(e);\n e.preventDefault();\n break;\n case 'pageUp':\n this.addMonths(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'pageDown':\n this.addMonths(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'shiftPageUp':\n this.addYears(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'shiftPageDown':\n this.addYears(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'controlHome':\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));\n e.preventDefault();\n break;\n case 'controlEnd':\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));\n e.preventDefault();\n break;\n }\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n Calendar.prototype.KeyboardNavigate = function (number, currentView, e, max, min) {\n var date = new Date('' + this.currentDate);\n switch (currentView) {\n case 2:\n this.addYears(this.currentDate, number);\n if (this.isMinMaxRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderDecades(e);\n }\n else {\n this.currentDate = date;\n }\n break;\n case 1:\n this.addMonths(this.currentDate, number);\n if (this.isMinMaxRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderYears(e);\n }\n else {\n this.currentDate = date;\n }\n break;\n case 0:\n this.addDay(this.currentDate, number, e, max, min);\n if (this.isMinMaxRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderMonths(e);\n }\n else {\n this.currentDate = date;\n }\n break;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Calendar.prototype.preRender = function () {\n var _this = this;\n this.navigatePreviousHandler = this.navigatePrevious.bind(this);\n this.navigateNextHandler = this.navigateNext.bind(this);\n this.changeHandler = function (e) {\n _this.triggerChange(e);\n };\n this.navigateHandler = function (e) {\n _this.triggerNavigate(e);\n };\n };\n ;\n Calendar.prototype.minMaxDate = function (localDate) {\n var currentDate = new Date(new Date(+localDate).setHours(0, 0, 0, 0));\n var minDate = new Date(new Date(+this.min).setHours(0, 0, 0, 0));\n var maxDate = new Date(new Date(+this.max).setHours(0, 0, 0, 0));\n if (+currentDate === +minDate || +currentDate === +maxDate) {\n if (+localDate < +this.min) {\n localDate = new Date(+this.min);\n }\n if (+localDate > +this.max) {\n localDate = new Date(+this.max);\n }\n }\n return localDate;\n };\n Calendar.prototype.renderMonths = function (e) {\n var numCells = this.weekNumber ? 8 : 7;\n var tdEles = this.renderDays(this.currentDate, e);\n this.contentHdr();\n this.renderTemplate(tdEles, numCells, MONTH, e);\n };\n Calendar.prototype.renderDays = function (currentDate, e) {\n var tdEles = [];\n var cellsCount = 42;\n var localDate = new Date('' + currentDate);\n var minMaxDate;\n var numCells = this.weekNumber ? 8 : 7;\n // 8 and 7 denotes the number of columns to be specified.\n var currentMonth = localDate.getMonth();\n this.titleUpdate(currentDate, 'days');\n var d = localDate;\n localDate = new Date(d.getFullYear(), d.getMonth(), 0, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());\n while (localDate.getDay() !== this.firstDayOfWeek) {\n this.setStartDate(localDate, -1 * dayMilliSeconds);\n }\n for (var day = 0; day < cellsCount; ++day) {\n var weekEle = createElement('td', { className: CELL });\n var weekAnchor = createElement('span');\n if (day % 7 === 0 && this.weekNumber) {\n weekAnchor.textContent = '' + this.getWeek(localDate);\n weekEle.appendChild(weekAnchor);\n addClass([weekEle], '' + WEEKNUMBER);\n tdEles.push(weekEle);\n }\n minMaxDate = new Date(+localDate);\n localDate = this.minMaxDate(localDate);\n var dateFormatOptions = { type: 'dateTime', skeleton: 'full' };\n var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);\n var tdEle = this.dayCell(localDate);\n var title = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'full' });\n var dayLink = createElement('span');\n dayLink.textContent = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'd' });\n var disabled = (this.min > localDate) || (this.max < localDate);\n if (disabled) {\n addClass([tdEle], DISABLED);\n addClass([tdEle], OVERLAY);\n }\n else {\n dayLink.setAttribute('title', '' + title);\n }\n if (currentMonth !== localDate.getMonth()) {\n addClass([tdEle], OTHERMONTH);\n }\n if (localDate.getDay() === 0 || localDate.getDay() === 6) {\n addClass([tdEle], WEEKEND);\n }\n tdEle.appendChild(dayLink);\n this.renderDaycellArg = {\n date: localDate,\n isDisabled: false,\n element: tdEle,\n isOutOfRange: disabled\n };\n var args = this.renderDaycellArg;\n this.renderDayCellEvent(args);\n if (args.isDisabled) {\n if (this.value && +this.value === +args.date) {\n this.setProperties({ value: null }, true);\n }\n }\n if (this.renderDaycellArg.isDisabled && !tdEle.classList.contains(SELECTED)) {\n addClass([tdEle], DISABLED);\n addClass([tdEle], OVERLAY);\n if (+this.renderDaycellArg.date === +this.todayDate) {\n this.todayDisabled = true;\n }\n }\n var otherMnthBool = tdEle.classList.contains(OTHERMONTH);\n var disabledCls = tdEle.classList.contains(DISABLED);\n if (!disabledCls) {\n EventHandler.add(tdEle, 'click', this.clickHandler, this);\n }\n // to set the value as null while setting the disabled date onProperty change.\n if (args.isDisabled && +this.value === +args.date) {\n this.setProperties({ value: null }, true);\n }\n if (!otherMnthBool && !disabledCls && this.getDateVal(localDate)) {\n addClass([tdEle], SELECTED);\n }\n else {\n if (currentDate.getDate() === localDate.getDate() && !otherMnthBool && !disabledCls) {\n addClass([tdEle], FOCUSEDDATE);\n }\n else {\n if (currentDate >= this.max && parseInt(tdEle.id, 0) === +this.max && !otherMnthBool && !disabledCls) {\n addClass([tdEle], FOCUSEDDATE);\n }\n if (currentDate <= this.min && parseInt(tdEle.id, 0) === +this.min && !otherMnthBool && !disabledCls) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n }\n if (date.getMonth() === new Date().getMonth() && date.getDate() === new Date().getDate()) {\n if (date.getFullYear() === new Date().getFullYear()) {\n addClass([tdEle], TODAY);\n }\n }\n tdEles.push(this.renderDaycellArg.element);\n localDate = new Date(+minMaxDate);\n this.addDay(localDate, 1, null, this.max, this.min);\n }\n return tdEles;\n };\n Calendar.prototype.renderYears = function (e) {\n this.removeTheadEle();\n var numCells = 4;\n var days;\n var tdEles = [];\n var valueUtil = isNullOrUndefined(this.value);\n var curDate = new Date('' + this.currentDate);\n var mon = curDate.getMonth();\n var yr = curDate.getFullYear();\n var localDate = curDate;\n var curYrs = localDate.getFullYear();\n var minYr = new Date('' + this.min).getFullYear();\n var minMonth = new Date('' + this.min).getMonth();\n var maxYr = new Date('' + this.max).getFullYear();\n var maxMonth = new Date('' + this.max).getMonth();\n localDate.setMonth(0);\n this.titleUpdate(this.currentDate, 'months');\n var disabled = (this.min > localDate) || (this.max < localDate);\n localDate.setDate(1);\n for (var month = 0; month < 12; ++month) {\n var tdEle = this.dayCell(localDate);\n var dayLink = createElement('span');\n var localMonth = (this.value && (this.value).getMonth() === localDate.getMonth());\n var select = (this.value && (this.value).getFullYear() === yr && localMonth);\n dayLink.textContent = this.globalize.formatDate(localDate, { type: 'dateTime', skeleton: 'MMM' });\n if ((this.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (this.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {\n addClass([tdEle], DISABLED);\n }\n else if (!valueUtil && select) {\n addClass([tdEle], SELECTED);\n }\n else {\n if (localDate.getMonth() === mon && this.currentDate.getMonth() === mon) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n localDate.setDate(1);\n localDate.setMonth(localDate.getMonth() + 1);\n if (!tdEle.classList.contains(DISABLED)) {\n EventHandler.add(tdEle, 'click', this.clickHandler, this);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.renderTemplate(tdEles, numCells, YEAR, e);\n };\n Calendar.prototype.renderDecades = function (e) {\n this.removeTheadEle();\n var numCells = 4;\n var yearCell = 12;\n var tdEles = [];\n var localDate = new Date('' + this.currentDate);\n localDate.setMonth(0);\n localDate.setDate(1);\n var localYr = localDate.getFullYear();\n var startYr = new Date('' + (localYr - localYr % 10));\n var endYr = new Date('' + (localYr - localYr % 10 + (10 - 1)));\n var startHdrYr = this.globalize.formatDate(startYr, { type: 'dateTime', skeleton: 'y' });\n var endHdrYr = this.globalize.formatDate(endYr, { type: 'dateTime', skeleton: 'y' });\n this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);\n var start = new Date(localYr - (localYr % 10) - 1, 0, 1);\n var startYear = start.getFullYear();\n for (var rowIterator = 0; rowIterator < yearCell; ++rowIterator) {\n var year = startYear + rowIterator;\n localDate.setFullYear(year);\n var tdEle = this.dayCell(localDate);\n attributes(tdEle, { 'role': 'gridcell' });\n var dayLink = createElement('span');\n dayLink.textContent = this.globalize.formatDate(localDate, { type: 'dateTime', skeleton: 'y' });\n if (year < new Date('' + this.min).getFullYear() || year > new Date('' + this.max).getFullYear()) {\n addClass([tdEle], DISABLED);\n }\n else if (!isNullOrUndefined(this.value) && localDate.getFullYear() === (this.value).getFullYear()) {\n addClass([tdEle], SELECTED);\n }\n else {\n if (localDate.getFullYear() === this.currentDate.getFullYear() && !tdEle.classList.contains(DISABLED)) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n if (!tdEle.classList.contains(DISABLED)) {\n EventHandler.add(tdEle, 'click', this.clickHandler, this);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.renderTemplate(tdEles, numCells, 'e-decade', e);\n };\n Calendar.prototype.dayCell = function (localDate) {\n var dateFormatOptions = { skeleton: 'full', type: 'dateTime' };\n var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);\n var value = date.valueOf();\n var attrs = {\n className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false', 'role': 'gridcell' }\n };\n return createElement('td', attrs);\n };\n Calendar.prototype.firstDay = function (date) {\n var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');\n if (collection.length) {\n for (var i = 0; i < collection.length; i++) {\n if (!collection[i].classList.contains(DISABLED)) {\n date = new Date(parseInt(collection[i].id, 0));\n break;\n }\n }\n }\n return date;\n };\n Calendar.prototype.lastDay = function (date) {\n var lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);\n var timeOffset = Math.abs(lastDate.getTimezoneOffset() - this.firstDay(date).getTimezoneOffset());\n if (timeOffset) {\n lastDate.setHours(this.firstDay(date).getHours() + (timeOffset / 60));\n }\n return this.findlastDay(lastDate);\n };\n ;\n Calendar.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n Calendar.prototype.findlastDay = function (date) {\n var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');\n if (collection.length) {\n for (var i = collection.length - 1; i >= 0; i--) {\n if (!collection[i].classList.contains(DISABLED)) {\n date = new Date(parseInt(collection[i].id, 0));\n break;\n }\n }\n }\n return date;\n };\n Calendar.prototype.removeTheadEle = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.element.querySelectorAll('.e-content table thead')[0])) {\n detach(this.tableHeadElement);\n }\n }\n else {\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content table thead')[0])) {\n detach(this.tableHeadElement);\n }\n }\n };\n Calendar.prototype.renderTemplate = function (elements, numCells, classNm, e) {\n var view = this.getViewNumber(this.currentView());\n var trEle;\n this.tableBodyElement = createElement('tbody');\n this.table.appendChild(this.tableBodyElement);\n removeClass([this.contentElement, this.headerElement], [MONTH, DECADE, YEAR]);\n addClass([this.contentElement, this.headerElement], [classNm]);\n var weekNumCell = 41;\n var numberCell = 35;\n var otherMonthCell = 6;\n var row = numCells;\n var rowIterator = 0;\n for (var dayCell = 0; dayCell < elements.length / numCells; ++dayCell) {\n trEle = createElement('tr', { attrs: { 'role': 'row' } });\n for (rowIterator = 0 + rowIterator; rowIterator < row; rowIterator++) {\n if (!elements[rowIterator].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowIterator].children[0])) {\n addClass([elements[rowIterator].children[0]], [LINK]);\n rippleEffect(elements[rowIterator].children[0], {\n duration: 600,\n isCenterRipple: true\n });\n }\n trEle.appendChild(elements[rowIterator]);\n if (!this.weekNumber && rowIterator === otherMonthCell && elements[otherMonthCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n if (this.weekNumber) {\n if (rowIterator === weekNumCell && elements[weekNumCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n }\n else {\n if (rowIterator === numberCell && elements[numberCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n }\n }\n row = row + numCells;\n rowIterator = rowIterator + 0;\n this.tableBodyElement.appendChild(trEle);\n }\n this.table.querySelector('tbody').className = this.effect;\n this.iconHandler();\n this.changedArgs = { value: this.value };\n if (view !== this.getViewNumber(this.currentView()) || (view === 0 && view !== this.getViewNumber(this.currentView()))) {\n this.navigateHandler(e);\n }\n this.setAriaActivedescendant();\n this.changeHandler();\n };\n Calendar.prototype.clickHandler = function (e) {\n e.preventDefault();\n var eve = e.currentTarget;\n var view = this.getViewNumber(this.currentView());\n if (eve.classList.contains(OTHERMONTH)) {\n this.value = this.getIdValue(e, null);\n this.contentClick(e, 0, null);\n }\n else if (view === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n this.contentClick(e, 1, null);\n }\n else if (2 === view) {\n this.contentClick(e, 1, null);\n }\n else if (!eve.classList.contains(OTHERMONTH) && view === 0) {\n this.selectDate(e, this.getIdValue(e, null), null);\n }\n else {\n this.contentClick(e, 0, eve);\n }\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n Calendar.prototype.contentClick = function (e, view, ele) {\n var currentView = this.getViewNumber(this.currentView());\n var d = this.getIdValue(e, ele);\n switch (view) {\n case 0:\n if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n detach(this.tableBodyElement);\n this.currentDate = d;\n this.effect = ZOOMIN;\n this.renderMonths(e);\n }\n else {\n this.currentDate.setMonth(d.getMonth());\n if (d.getMonth() > 0 && this.currentDate.getMonth() !== d.getMonth()) {\n this.currentDate.setDate(0);\n }\n this.currentDate.setFullYear(d.getFullYear());\n this.effect = ZOOMIN;\n detach(this.tableBodyElement);\n this.renderMonths(e);\n }\n break;\n case 1:\n if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n this.selectDate(e, d, null);\n }\n else {\n this.currentDate.setFullYear(d.getFullYear());\n this.effect = ZOOMIN;\n detach(this.tableBodyElement);\n this.renderYears(e);\n }\n }\n };\n Calendar.prototype.switchView = function (view, e) {\n switch (view) {\n case 0:\n detach(this.tableBodyElement);\n this.renderMonths(e);\n break;\n case 1:\n detach(this.tableBodyElement);\n this.renderYears(e);\n break;\n case 2:\n detach(this.tableBodyElement);\n this.renderDecades(e);\n }\n };\n /**\n * To get component name\n * @private\n */\n Calendar.prototype.getModuleName = function () {\n return 'calendar';\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n Calendar.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n Calendar.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.effect = '';\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n this.setProperties({ value: new Date('' + newProp.value) }, true);\n if (isNaN(+this.value)) {\n this.setProperties({ value: oldProp.value }, true);\n }\n this.validateDate();\n this.minMaxUpdate();\n this.setvalue();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n if (this.getModuleName() === 'calendar') {\n this.element.classList.add('e-rtl');\n }\n else {\n this.calendarElement.classList.add('e-rtl');\n }\n }\n else {\n if (this.getModuleName() === 'calendar') {\n this.element.classList.remove('e-rtl');\n }\n else {\n this.calendarElement.classList.remove('e-rtl');\n }\n }\n break;\n case 'start':\n case 'weekNumber':\n case 'firstDayOfWeek':\n this.contentHdr();\n this.contentBody();\n break;\n case 'min':\n case 'max':\n prop === 'min' ? this.setProperties({ min: this.checkDateValue(new Date('' + newProp.min)) }, true) :\n this.setProperties({ max: this.checkDateValue(new Date('' + newProp.max)) }, true);\n this.setProperties({ start: this.currentView() }, true);\n detach(this.tableBodyElement);\n this.minMaxUpdate();\n this.contentBody();\n if ((this.todayDate < this.min || this.max < this.todayDate) && (this.footer) && (this.todayElement)) {\n detach(this.todayElement);\n detach(this.footer);\n this.todayElement = this.footer = undefined;\n this.contentFooter();\n }\n else {\n if (this.todayElement.classList.contains('e-disabled') && (this.footer) && (this.todayElement)) {\n removeClass([this.todayElement], DISABLED);\n }\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.contentHdr();\n this.contentBody();\n this.l10.setLocale(this.locale);\n this.updateFooter();\n break;\n case 'showTodayButton':\n if (newProp.showTodayButton) {\n this.contentFooter();\n }\n else {\n detach(this.todayElement);\n detach(this.footer);\n this.todayElement = this.footer = undefined;\n }\n this.setProperties({ showTodayButton: newProp.showTodayButton }, true);\n break;\n }\n }\n };\n Calendar.prototype.setvalue = function () {\n detach(this.tableBodyElement);\n this.setProperties({ start: this.currentView() }, true);\n this.contentBody();\n };\n Calendar.prototype.titleUpdate = function (date, view) {\n var globalize = new Internationalization(this.locale);\n switch (view) {\n case 'days':\n this.headerTitleElement.textContent = globalize.formatDate(date, { type: 'dateTime', skeleton: 'yMMMM' });\n break;\n case 'months':\n this.headerTitleElement.textContent = globalize.formatDate(date, { type: 'dateTime', skeleton: 'y' });\n }\n };\n Calendar.prototype.setActiveDescendant = function () {\n var id;\n var focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');\n var selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');\n var title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'full' });\n if (selectedEle || focusedEle) {\n (focusedEle || selectedEle).setAttribute('aria-selected', 'true');\n (focusedEle || selectedEle).setAttribute('aria-label', 'The current focused date is ' + '' + title);\n id = (focusedEle || selectedEle).getAttribute('id');\n }\n return id;\n };\n Calendar.prototype.iconHandler = function () {\n new Date('' + this.currentDate).setDate(1);\n switch (this.currentView()) {\n case 'Month':\n this.previousIconHandler(this.compareMonth(new Date('' + this.currentDate), this.min) < 1);\n this.nextIconHandler(this.compareMonth(new Date('' + this.currentDate), this.max) > -1);\n break;\n case 'Year':\n this.previousIconHandler(this.compareYear(new Date('' + this.currentDate), this.min) < 1);\n this.nextIconHandler(this.compareYear(new Date('' + this.currentDate), this.max) > -1);\n break;\n case 'Decade':\n this.previousIconHandler(this.compareDecade(new Date('' + this.currentDate), this.min) < 1);\n this.nextIconHandler(this.compareDecade(new Date('' + this.currentDate), this.max) > -1);\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n Calendar.prototype.destroy = function () {\n if (this.getModuleName() === 'calendar') {\n removeClass([this.element], [ROOT]);\n }\n else {\n if (this.calendarElement) {\n removeClass([this.element], [ROOT]);\n }\n }\n if (this.getModuleName() === 'calendar') {\n EventHandler.remove(this.headerTitleElement, 'click', this.navTitle);\n if (this.todayElement) {\n EventHandler.remove(this.todayElement, 'click', this.todayButtonClick);\n }\n this.previousIconHandler(true);\n this.nextIconHandler(true);\n this.keyboardModule.destroy();\n this.element.removeAttribute('data-role');\n }\n this.element.innerHTML = '';\n _super.prototype.destroy.call(this);\n };\n Calendar.prototype.title = function (e) {\n var currentView = this.getViewNumber(this.currentView());\n this.effect = ZOOMIN;\n this.switchView(++currentView, e);\n };\n Calendar.prototype.getViewNumber = function (stringVal) {\n if (stringVal === 'Month') {\n return 0;\n }\n else if (stringVal === 'Year') {\n return 1;\n }\n else {\n return 2;\n }\n };\n Calendar.prototype.navTitle = function (e) {\n e.preventDefault();\n this.title(e);\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n Calendar.prototype.previous = function () {\n this.effect = '';\n var currentView = this.getViewNumber(this.currentView());\n switch (this.currentView()) {\n case 'Month':\n this.addMonths(this.currentDate, -1);\n this.switchView(currentView);\n break;\n case 'Year':\n this.addYears(this.currentDate, -1);\n this.switchView(currentView);\n break;\n case 'Decade':\n this.addYears(this.currentDate, -10);\n this.switchView(currentView);\n break;\n }\n };\n Calendar.prototype.navigatePrevious = function (e) {\n e.preventDefault();\n this.previous();\n this.triggerNavigate(e);\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n Calendar.prototype.next = function () {\n this.effect = '';\n var currentView = this.getViewNumber(this.currentView());\n switch (this.currentView()) {\n case 'Month':\n this.addMonths(this.currentDate, 1);\n this.switchView(currentView);\n break;\n case 'Year':\n this.addYears(this.currentDate, 1);\n this.switchView(currentView);\n break;\n case 'Decade':\n this.addYears(this.currentDate, 10);\n this.switchView(currentView);\n break;\n }\n };\n Calendar.prototype.navigateNext = function (eve) {\n eve.preventDefault();\n this.next();\n this.triggerNavigate(eve);\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n */\n Calendar.prototype.navigateTo = function (view, date) {\n this.minMaxUpdate();\n if (+date >= +this.min && +date <= +this.max) {\n this.currentDate = date;\n }\n if (+date <= +this.min) {\n this.currentDate = new Date('' + this.min);\n }\n if (+date >= +this.max) {\n this.currentDate = new Date('' + this.max);\n }\n this.switchView(this.getViewNumber(view));\n };\n /**\n * Gets the current view of the Calendar.\n * @returns string\n */\n Calendar.prototype.currentView = function () {\n if (this.contentElement.classList.contains(YEAR)) {\n return 'Year';\n }\n else if (this.contentElement.classList.contains(DECADE)) {\n return 'Decade';\n }\n else {\n return 'Month';\n }\n };\n Calendar.prototype.getDateVal = function (date) {\n return (!isNullOrUndefined(this.value) && date.getDate() === (this.value).getDate()\n && date.getMonth() === (this.value).getMonth() && date.getFullYear() === (this.value).getFullYear());\n };\n Calendar.prototype.getCultureObjects = function (ld, c) {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.days.format.short', ld);\n };\n ;\n Calendar.prototype.getWeek = function (d) {\n var currentDate = new Date('' + d).valueOf();\n var date = new Date(d.getFullYear(), 0, 1).valueOf();\n var a = (currentDate - date);\n return Math.ceil((((a) / dayMilliSeconds) + new Date(date).getDay() + 1) / 7);\n };\n Calendar.prototype.setStartDate = function (date, time) {\n var tzOffset = date.getTimezoneOffset();\n var d = new Date(date.getTime() + time);\n var tzOffsetDiff = d.getTimezoneOffset() - tzOffset;\n date.setTime(d.getTime() + tzOffsetDiff * minutesMilliSeconds);\n };\n Calendar.prototype.addMonths = function (date, i) {\n var day = date.getDate();\n date.setDate(1);\n date.setMonth(date.getMonth() + i);\n date.setDate(Math.min(day, this.getMaxDays(date)));\n };\n Calendar.prototype.addYears = function (date, i) {\n var day = date.getDate();\n date.setDate(1);\n date.setFullYear(date.getFullYear() + i);\n date.setDate(Math.min(day, this.getMaxDays(date)));\n };\n Calendar.prototype.getIdValue = function (e, element) {\n var eve;\n if (e) {\n eve = e.currentTarget;\n }\n else {\n eve = element;\n }\n var dateFormatOptions = { type: 'dateTime', skeleton: 'full' };\n var dateString = this.globalize.formatDate(new Date(parseInt('' + eve.getAttribute('id'), 0)), dateFormatOptions);\n var date = this.globalize.parseDate(dateString, dateFormatOptions);\n var value = date.valueOf() - date.valueOf() % 1000;\n return new Date(value);\n //return this.globalize.parseDate(dateString, dateFormatOptions);\n };\n Calendar.prototype.selectDate = function (e, date, element) {\n var ele = element || e.currentTarget;\n if (this.currentView() === 'Decade') {\n this.setDateDecade(this.currentDate, date.getFullYear());\n }\n else if (this.currentView() === 'Year') {\n this.setDateYear(this.currentDate, date);\n }\n else {\n this.setProperties({ value: new Date('' + date) }, true);\n this.currentDate = new Date('' + date);\n }\n var tableBodyElement = closest(ele, '.' + ROOT);\n if (isNullOrUndefined(tableBodyElement)) {\n tableBodyElement = this.tableBodyElement;\n }\n if (!isNullOrUndefined(tableBodyElement.querySelector('.' + SELECTED))) {\n removeClass([tableBodyElement.querySelector('.' + SELECTED)], SELECTED);\n }\n if (!isNullOrUndefined(tableBodyElement.querySelector('.' + FOCUSEDDATE))) {\n removeClass([tableBodyElement.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);\n }\n addClass([ele], SELECTED);\n this.changedArgs = { value: this.value };\n this.changeHandler(e);\n };\n Calendar.prototype.setAriaActivedescendant = function () {\n attributes(this.table, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n };\n Calendar.prototype.previousIconHandler = function (disabled) {\n if (disabled) {\n EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);\n addClass([this.previousIcon], '' + DISABLED);\n addClass([this.previousIcon], '' + OVERLAY);\n this.previousIcon.setAttribute('aria-disabled', 'true');\n }\n else {\n EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);\n removeClass([this.previousIcon], '' + DISABLED);\n removeClass([this.previousIcon], '' + OVERLAY);\n this.previousIcon.setAttribute('aria-disabled', 'false');\n }\n };\n Calendar.prototype.renderDayCellEvent = function (args) {\n extend(this.renderDaycellArg, { name: 'renderDayCell' });\n this.trigger('renderDayCell', args);\n };\n Calendar.prototype.navigatedEvent = function (eve) {\n extend(this.navigatedArgs, { name: 'navigated', event: eve });\n this.trigger('navigated', this.navigatedArgs);\n };\n Calendar.prototype.triggerNavigate = function (event) {\n this.navigatedArgs = { view: this.currentView(), date: this.currentDate };\n this.navigatedEvent(event);\n };\n Calendar.prototype.changeEvent = function (e) {\n this.trigger('change', this.changedArgs);\n };\n Calendar.prototype.triggerChange = function (e) {\n this.changedArgs.event = e;\n if (!isNullOrUndefined(this.value)) {\n this.setProperties({ value: this.value }, true);\n }\n if (+this.value !== Number.NaN && +this.value !== +this.previousDate) {\n this.changeEvent(e);\n }\n this.previousDate = this.value;\n };\n Calendar.prototype.nextIconHandler = function (disabled) {\n if (disabled) {\n EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);\n addClass([this.nextIcon], DISABLED);\n addClass([this.nextIcon], OVERLAY);\n this.nextIcon.setAttribute('aria-disabled', 'true');\n }\n else {\n EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);\n removeClass([this.nextIcon], DISABLED);\n removeClass([this.nextIcon], OVERLAY);\n this.nextIcon.setAttribute('aria-disabled', 'false');\n }\n };\n Calendar.prototype.compare = function (startDate, endDate, modifier) {\n var start = endDate.getFullYear();\n var end;\n var result;\n end = start;\n result = 0;\n if (modifier) {\n start = start - start % modifier;\n end = start - start % modifier + modifier - 1;\n }\n if (startDate.getFullYear() > end) {\n result = 1;\n }\n else if (startDate.getFullYear() < start) {\n result = -1;\n }\n return result;\n };\n Calendar.prototype.isMinMaxRange = function (date) {\n return +date >= +this.min && +date <= +this.max;\n };\n Calendar.prototype.compareYear = function (start, end) {\n return this.compare(start, end, 0);\n };\n Calendar.prototype.compareDecade = function (start, end) {\n return this.compare(start, end, 10);\n };\n Calendar.prototype.shiftArray = function (array, i) {\n return array.slice(i).concat(array.slice(0, i));\n };\n Calendar.prototype.addDay = function (date, i, e, max, min) {\n var column = i;\n var value = new Date(+date);\n if (!isNullOrUndefined(this.tableBodyElement) && !isNullOrUndefined(e)) {\n while (this.findNextTD(new Date(+date), column, max, min)) {\n column += i;\n }\n var rangeValue = new Date(value.setDate(value.getDate() + column));\n column = (+rangeValue > +max || +rangeValue < +min) ? column === i ? i - i : i : column;\n }\n date.setDate(date.getDate() + column);\n };\n Calendar.prototype.findNextTD = function (date, column, max, min) {\n var value = new Date(date.setDate(date.getDate() + column));\n var collection = [];\n var isDisabled = false;\n if ((!isNullOrUndefined(value) && value.getMonth()) !== (!isNullOrUndefined(this.currentDate) && this.currentDate.getMonth())) {\n var tdEles = this.renderDays(value, null);\n collection = tdEles.filter(function (ele) {\n return ele.classList.contains(DISABLED);\n });\n }\n else {\n collection = this.tableBodyElement.querySelectorAll('td.' + DISABLED);\n }\n if (+value <= (+(max)) && +value >= (+(min))) {\n if (collection.length) {\n for (var i = 0; i < collection.length; i++) {\n isDisabled = (+value === +new Date(parseInt(collection[i].id, 0))) ? true : false;\n if (isDisabled) {\n break;\n }\n }\n }\n }\n return isDisabled;\n };\n Calendar.prototype.getMaxDays = function (d) {\n var date;\n var month;\n var tmpDate = new Date('' + d);\n date = 28;\n month = tmpDate.getMonth();\n while (tmpDate.getMonth() === month) {\n ++date;\n tmpDate.setDate(date);\n }\n return date - 1;\n };\n Calendar.prototype.setDateDecade = function (date, year) {\n date.setFullYear(year);\n this.setProperties({ value: new Date('' + date) }, true);\n };\n ;\n Calendar.prototype.setDateYear = function (date, value) {\n date.setFullYear(value.getFullYear(), value.getMonth(), date.getDate());\n if (value.getMonth() !== date.getMonth()) {\n date.setDate(0);\n }\n this.setProperties({ value: new Date('' + date) }, true);\n this.currentDate = new Date('' + this.value);\n };\n Calendar.prototype.compareMonth = function (start, end) {\n var result;\n if (start.getFullYear() > end.getFullYear()) {\n result = 1;\n }\n else if (start.getFullYear() < end.getFullYear()) {\n result = -1;\n }\n else {\n result = start.getMonth() === end.getMonth() ? 0 : start.getMonth() > end.getMonth() ? 1 : -1;\n }\n return result;\n };\n __decorate([\n Property(null)\n ], Calendar.prototype, \"value\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], Calendar.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], Calendar.prototype, \"max\", void 0);\n __decorate([\n Property(0)\n ], Calendar.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Month')\n ], Calendar.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], Calendar.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], Calendar.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], Calendar.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property(false)\n ], Calendar.prototype, \"enablePersistence\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"navigated\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"renderDayCell\", void 0);\n Calendar = __decorate([\n NotifyPropertyChanges\n ], Calendar);\n return Calendar;\n}(Component));\nexport { Calendar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Event, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';\nimport { createElement, detach, addClass, removeClass, closest, attributes } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, setValue, getUniqueID, merge } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { Calendar } from '../calendar/calendar';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar ROOT = 'e-datepicker';\nvar POPUPWRAPPER = 'e-popup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar INPUTCONTAINER = 'e-input-group';\nvar INPUTFOCUS = 'e-input-focus';\nvar INPUTROOT = 'e-input';\nvar ERROR = 'e-error';\nvar RTL = 'e-rtl';\nvar LINK = 'e-day';\nvar ACTIVE = 'e-active';\nvar OVERFLOW = 'e-date-overflow';\nvar DATEICON = 'e-date-icon';\nvar ICONS = 'e-icons';\nvar OPENDURATION = 300;\nvar CLOSEDURATION = 200;\nvar OFFSETVALUE = 4;\n/**\n * Represents the DatePicker component that allows user to select\n * or enter a date value.\n * ```html\n *
\n * ````\n * ````typescript\n * \n * ```\n */\nvar DatePicker = /** @class */ (function (_super) {\n __extends(DatePicker, _super);\n /**\n * Constructor for creating the widget.\n */\n function DatePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousEleValue = '';\n _this.isDateIconClicked = false;\n _this.keyConfigs = {\n altUpArrow: 'alt+uparrow',\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n controlUp: 'ctrl+38',\n controlDown: 'ctrl+40',\n moveDown: 'downarrow',\n moveUp: 'uparrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n select: 'enter',\n home: 'home',\n end: 'end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n shiftPageUp: 'shift+pageup',\n shiftPageDown: 'shift+pagedown',\n controlHome: 'ctrl+home',\n controlEnd: 'ctrl+end',\n tab: 'tab'\n };\n _this.calendarKeyConfigs = {\n escape: 'escape',\n enter: 'enter',\n tab: 'tab'\n };\n return _this;\n }\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DatePicker.prototype.render = function () {\n this.initialize();\n this.bindEvents();\n };\n DatePicker.prototype.initialize = function () {\n this.createInput();\n this.updateInput();\n this.previousEleValue = this.inputElement.value;\n };\n DatePicker.prototype.createInput = function () {\n var ariaAttrs = {\n 'aria-live': 'assertive', 'aria-atomic': 'true',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n };\n if (this.getModuleName() === 'datepicker') {\n var l10nLocale = { placeholder: null };\n this.globalize = new Internationalization(this.locale);\n this.l10n = new L10n('datepicker', l10nLocale, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n },\n buttons: [INPUTWRAPPER + ' ' + DATEICON + ' ' + ICONS]\n });\n this.setWidth(this.width);\n if (this.inputElement.name !== '') {\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute('name'));\n }\n else {\n this.inputElement.setAttribute('name', '' + this.element.id);\n }\n attributes(this.inputElement, ariaAttrs);\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n }\n Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);\n addClass([this.inputWrapper.container], DATEWRAPPER);\n };\n DatePicker.prototype.updateInput = function () {\n if (this.value && !this.isCalendar()) {\n this.disabledDates();\n }\n if (+new Date('' + this.value)) {\n if (typeof this.value === 'string') {\n this.value = this.checkDateValue(new Date('' + this.value));\n var dateOptions = void 0;\n if (this.getModuleName() === 'datetimepicker') {\n dateOptions = {\n format: !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n dateOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd' };\n }\n var dateString = this.globalize.formatDate(this.value, dateOptions);\n this.setProperties({ value: this.globalize.parseDate(dateString, dateOptions) }, true);\n }\n }\n else {\n this.setProperties({ value: null }, true);\n }\n if (this.strictMode) {\n //calls the Calendar processDate protected method to update the date value according to the strictMode true behaviour.\n _super.prototype.processDate.call(this);\n }\n if (!isNullOrUndefined(this.value)) {\n var dateValue = this.value;\n var dateString = void 0;\n var tempFormat = !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;\n if (this.getModuleName() === 'datetimepicker') {\n dateString = this.globalize.formatDate(this.value, { format: tempFormat, type: 'dateTime', skeleton: 'yMd' });\n }\n else {\n dateString = this.globalize.formatDate(this.value, { format: this.format, type: 'dateTime', skeleton: 'yMd' });\n }\n if ((+dateValue <= +this.max) && (+dateValue >= +this.min)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n var value = (+dateValue >= +this.max || !+this.value) || (!+this.value || +dateValue <= +this.min);\n if (!this.strictMode && value) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n }\n if (isNullOrUndefined(this.value) && this.strictMode) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.changedArgs = { value: this.value };\n this.errorClass();\n };\n ;\n DatePicker.prototype.bindEvents = function () {\n if (this.enabled) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n this.bindClearEvent();\n }\n else {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n }\n this.keyboardModules = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyActionHandle.bind(this),\n keyConfigs: this.keyConfigs\n });\n };\n DatePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n DatePicker.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clear(e);\n };\n DatePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.changeEvent(event);\n };\n DatePicker.prototype.dateIconHandler = function (e) {\n e.preventDefault();\n if (!this.readonly) {\n if (this.isCalendar()) {\n this.hide();\n }\n else {\n this.isDateIconClicked = true;\n this.show();\n if (!Browser.isDevice) {\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n addClass(this.inputWrapper.buttons, ACTIVE);\n }\n }\n };\n DatePicker.prototype.CalendarKeyActionHandle = function (e) {\n switch (e.action) {\n case 'escape':\n if (this.isCalendar()) {\n this.hide();\n }\n else {\n this.inputWrapper.container.children[this.index].blur();\n }\n break;\n case 'enter':\n if (!this.isCalendar()) {\n this.show();\n }\n else {\n if (+this.value !== +this.currentDate && !this.isCalendar()) {\n this.inputWrapper.container.children[this.index].focus();\n }\n }\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n break;\n case 'tab':\n this.hide();\n }\n };\n DatePicker.prototype.inputFocusHandler = function () {\n this.isDateIconClicked = false;\n this.trigger('focus');\n };\n DatePicker.prototype.inputBlurHandler = function () {\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger();\n this.errorClass();\n if (this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide();\n }\n this.inputElement.blur();\n this.trigger('blur');\n if (this.isCalendar()) {\n this.calendarKeyboardModules = new KeyboardEvents(this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: this.CalendarKeyActionHandle.bind(this),\n keyConfigs: this.calendarKeyConfigs\n });\n }\n };\n DatePicker.prototype.documentHandler = function (e) {\n if (!Browser.isDevice) {\n e.preventDefault();\n }\n var target = e.target;\n if (!(closest(target, '.e-datepicker.e-popup-wrapper'))\n && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)\n && (!target.classList.contains('e-day'))) {\n this.hide();\n }\n };\n DatePicker.prototype.inputKeyActionHandle = function (e) {\n switch (e.action) {\n case 'altUpArrow':\n this.hide();\n this.inputElement.focus();\n break;\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n if (this.getModuleName() === 'datepicker') {\n this.show();\n }\n break;\n case 'escape':\n this.hide();\n break;\n case 'enter':\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger();\n this.errorClass();\n if (!this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide();\n }\n break;\n case 'tab':\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger();\n this.errorClass();\n this.hide();\n break;\n default:\n this.previousDate = (!isNullOrUndefined(this.value) && new Date('' + this.value) || null);\n if (this.isCalendar()) {\n _super.prototype.keyActionHandle.call(this, e);\n }\n }\n };\n DatePicker.prototype.strictModeUpdate = function () {\n var format;\n if (this.getModuleName() === 'datetimepicker') {\n format = !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;\n }\n else {\n format = isNullOrUndefined(this.format) ? this.format : this.format.replace('dd', 'd');\n }\n if (!isNullOrUndefined(format)) {\n var len = format.split('M').length - 1;\n if (len < 3) {\n format = format.replace('MM', 'M');\n }\n }\n var dateOptions;\n if (this.getModuleName() === 'datetimepicker') {\n dateOptions = {\n format: !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n dateOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };\n }\n var date = this.globalize.parseDate(this.inputElement.value, dateOptions);\n if (this.strictMode && date) {\n Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputElement, this.floatLabelType, this.showClearButton);\n if (this.inputElement.value !== this.previousEleValue) {\n this.setProperties({ value: date }, true);\n }\n }\n else if (!this.strictMode) {\n if (this.inputElement.value !== this.previousEleValue) {\n this.setProperties({ value: date }, true);\n }\n }\n if (this.strictMode && !date && this.inputElement.value === '') {\n this.setProperties({ value: null }, true);\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n if (isNullOrUndefined(this.value)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n };\n DatePicker.prototype.createCalendar = function () {\n var _this = this;\n this.popupWrapper = createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.classList.add(this.cssClass);\n }\n document.body.appendChild(this.popupWrapper);\n if (Browser.isDevice) {\n this.modelHeader();\n this.modal = createElement('div');\n this.modal.className = '' + ROOT + ' e-date-modal';\n document.body.className += ' ' + OVERFLOW;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n //this.calendarElement represent the Calendar object from the Calendar class.\n this.calendarElement.querySelector('table tbody').className = '';\n this.popupObj = new Popup(this.popupWrapper, {\n content: this.calendarElement,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n offsetY: OFFSETVALUE,\n targetType: 'container',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n open: function () {\n if (_this.getModuleName() !== 'datetimepicker') {\n if (document.activeElement !== _this.inputElement && !Browser.isDevice) {\n _this.calendarElement.children[1].firstElementChild.focus();\n _this.calendarKeyboardModules = new KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: _this.CalendarKeyActionHandle.bind(_this),\n keyConfigs: _this.calendarKeyConfigs\n });\n _this.calendarKeyboardModules = new KeyboardEvents(_this.inputWrapper.container.children[_this.index], {\n eventName: 'keydown',\n keyAction: _this.CalendarKeyActionHandle.bind(_this),\n keyConfigs: _this.calendarKeyConfigs\n });\n }\n }\n }, close: function () {\n if (!Browser.isDevice) {\n if (_this.isDateIconClicked) {\n _this.inputWrapper.container.children[_this.index].focus();\n }\n }\n if (_this.value) {\n _this.disabledDates();\n }\n _this.popupObj.destroy();\n detach(_this.popupWrapper);\n _this.popupObj = _this.popupWrapper = null;\n _this.setAriaAttributes();\n }\n });\n this.popupObj.element.classList.add(this.cssClass);\n this.setAriaAttributes();\n };\n DatePicker.prototype.modelHeader = function () {\n var modelHeader = createElement('div', { className: 'e-model-header' });\n var yearHeading = createElement('h1', { className: 'e-model-year' });\n var h2 = createElement('div');\n var daySpan = createElement('span', { className: 'e-model-day' });\n var monthSpan = createElement('span', { className: 'e-model-month' });\n yearHeading.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'y', skeleton: 'dateTime' });\n daySpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'E', skeleton: 'dateTime' }) + ', ';\n monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), { format: 'MMM d', skeleton: 'dateTime' });\n modelHeader.appendChild(yearHeading);\n h2.appendChild(daySpan);\n h2.appendChild(monthSpan);\n modelHeader.appendChild(h2);\n this.calendarElement.insertBefore(modelHeader, this.calendarElement.firstElementChild);\n };\n DatePicker.prototype.changeTrigger = function () {\n if (this.inputElement.value !== this.previousEleValue) {\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n this.changedArgs.value = this.value;\n this.trigger('change', this.changedArgs);\n this.previousEleValue = this.inputElement.value;\n this.previousDate = new Date('' + this.value);\n }\n }\n };\n DatePicker.prototype.navigatedEvent = function () {\n this.trigger('navigated', this.navigatedArgs);\n };\n DatePicker.prototype.changeEvent = function (e) {\n this.selectCalendar(e);\n this.changedArgs.event = e;\n this.trigger('change', this.changedArgs);\n this.previousDate = this.value;\n };\n DatePicker.prototype.selectCalendar = function (e) {\n var date;\n var tempFormat;\n if (this.getModuleName() === 'datetimepicker') {\n tempFormat = !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;\n }\n else {\n tempFormat = this.format;\n }\n if (this.value) {\n if (this.getModuleName() === 'datetimepicker') {\n date = this.globalize.formatDate(this.changedArgs.value, { format: tempFormat, type: 'dateTime', skeleton: 'yMd' });\n }\n else {\n date = this.globalize.formatDate(this.changedArgs.value, { format: this.format, type: 'dateTime', skeleton: 'yMd' });\n }\n }\n if (!isNullOrUndefined(date)) {\n Input.setValue(date, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.hide();\n this.previousEleValue = this.inputElement.value;\n this.errorClass();\n };\n DatePicker.prototype.isCalendar = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + POPUPWRAPPER)) {\n return true;\n }\n return false;\n };\n DatePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (this.width);\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n /**\n * Shows the Calendar.\n * @returns void\n */\n DatePicker.prototype.show = function () {\n var prevent = true;\n var outOfRange;\n if (!isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max)) {\n outOfRange = new Date('' + this.value);\n this.setProperties({ 'value': null }, true);\n }\n else {\n outOfRange = this.value || null;\n }\n if (!this.isCalendar()) {\n _super.prototype.render.call(this);\n this.setProperties({ 'value': outOfRange || null }, true);\n this.previousDate = outOfRange;\n this.createCalendar();\n }\n this.preventArgs = {\n preventDefault: function () {\n prevent = false;\n }\n };\n var args = {\n popup: this.popupObj\n };\n merge(args, this.preventArgs);\n this.trigger('open', args);\n if (prevent) {\n addClass(this.inputWrapper.buttons, ACTIVE);\n document.body.appendChild(this.popupObj.element);\n this.popupObj.refreshPosition(this.inputElement);\n var openAnimation = {\n name: 'FadeIn',\n duration: Browser.isDevice ? 0 : OPENDURATION,\n };\n this.popupObj.show(new Animation(openAnimation));\n this.setAriaAttributes();\n }\n else {\n detach(this.popupWrapper);\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n }\n EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);\n };\n /**\n * Hide the Calendar.\n * @returns void\n */\n DatePicker.prototype.hide = function () {\n var args = {\n popup: this.popupObj\n };\n this.preventArgs = {\n preventDefault: function () {\n prevent = false;\n }\n };\n var prevent = true;\n removeClass(this.inputWrapper.buttons, ACTIVE);\n removeClass([document.body], OVERFLOW);\n merge(args, this.preventArgs);\n this.trigger('close', args);\n if (this.isCalendar() && prevent) {\n var closeAnimation = {\n name: 'FadeOut',\n duration: CLOSEDURATION,\n };\n this.popupObj.hide();\n this.keyboardModule.destroy();\n removeClass(this.inputWrapper.buttons, ACTIVE);\n }\n this.setAriaAttributes();\n this.previousEleValue = this.inputElement.value;\n if (Browser.isDevice && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n DatePicker.prototype.focusIn = function (triggerEvent) {\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.trigger('focus');\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DatePicker.prototype.focusOut = function () {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.trigger('blur');\n };\n /**\n * Gets the current view of the DatePicker.\n * @returns string\n */\n DatePicker.prototype.currentView = function () {\n var currentView;\n if (this.calendarElement) {\n // calls the Calendar currentView public method\n currentView = _super.prototype.currentView.call(this);\n }\n return currentView;\n };\n /**\n * This method used to navigate to the month/year/decade view of the DatePicker.\n * @param {string} view - Specifies the view of the calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n */\n DatePicker.prototype.navigateTo = function (view, date) {\n if (this.calendarElement) {\n // calls the Calendar navigateTo public method\n _super.prototype.navigateTo.call(this, view, date);\n }\n };\n /**\n * To destroy the widget.\n * @returns void\n */\n DatePicker.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.keyboardModules.destroy();\n if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {\n _super.prototype.destroy.call(this);\n }\n var ariaAttrs = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n };\n Input.removeAttributes(ariaAttrs, this.inputElement);\n if (this.isCalendar()) {\n detach(this.popupWrapper);\n this.popupObj = this.popupWrapper = null;\n this.keyboardModule.destroy();\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n this.ensureInputAttribute();\n if (this.ngTag === null) {\n this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);\n removeClass([this.inputElement], [INPUTROOT]);\n removeClass([this.element], [ROOT]);\n detach(this.inputWrapper.container);\n }\n };\n DatePicker.prototype.ensureInputAttribute = function () {\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n var prop = this.inputElement.attributes[i].name;\n if (isNullOrUndefined(this.inputEleCopy.getAttribute(prop))) {\n if (prop.toLowerCase() === 'value' || isNullOrUndefined(this.inputEleCopy.getAttribute('value'))) {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop);\n }\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n DatePicker.prototype.preRender = function () {\n this.inputEleCopy = this.element.cloneNode(true);\n this.inputElement = this.element;\n this.index = this.showClearButton ? 2 : 1;\n this.ngTag = null;\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.ngTag = this.element.tagName;\n this.inputElement = createElement('input');\n this.element.appendChild(this.inputElement);\n }\n if (this.element.getAttribute('id')) {\n if (this.ngTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n }\n this.checkHtmlAttributes();\n _super.prototype.preRender.call(this);\n };\n ;\n DatePicker.prototype.checkHtmlAttributes = function () {\n this.globalize = new Internationalization(this.locale);\n var attributes = ['value', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder', 'type'];\n var options;\n if (this.getModuleName() === 'datetimepicker') {\n options = {\n format: !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };\n }\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ enabled: !enabled }, true);\n if (!enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n }\n break;\n case 'readonly':\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'placeholder':\n if (this.placeholder === null) {\n var placeholder = this.inputElement.getAttribute(prop);\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, true);\n }\n break;\n case 'style':\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n break;\n case 'name':\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n break;\n case 'value':\n if (!this.value) {\n var value = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), true);\n }\n break;\n case 'min':\n if (+this.min === +new Date(1900, 0, 1)) {\n this.setProperties(setValue(prop, this.globalize.parseDate(this.inputElement.getAttribute(prop)), {}), true);\n }\n break;\n case 'max':\n if (+this.max === +new Date(2099, 11, 31)) {\n this.setProperties(setValue(prop, this.globalize.parseDate(this.inputElement.getAttribute(prop)), {}), true);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text') {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n /**\n * To get component name.\n * @private\n */\n DatePicker.prototype.getModuleName = function () {\n return 'datepicker';\n };\n DatePicker.prototype.disabledDates = function () {\n var valueCopy = new Date('' + this.value);\n var previousValCopy = this.previousDate;\n //calls the Calendar render method to check the disabled dates through renderDayCell event and update the input value accordingly.\n _super.prototype.render.call(this);\n this.previousDate = previousValCopy;\n var date = valueCopy && +(valueCopy);\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + date);\n if (!this.strictMode) {\n this.setProperties({ 'value': valueCopy }, true);\n }\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll(dateIdString)[0])) {\n if (this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled')) {\n if (!this.strictMode) {\n this.setProperties({ 'value': null }, true);\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n }\n }\n var inputVal;\n if (this.getModuleName() === 'datetimepicker') {\n inputVal = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n inputVal = this.globalize.formatDate(valueCopy, { format: this.format, type: 'dateTime', skeleton: 'yMd' });\n }\n Input.setValue(inputVal, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DatePicker.prototype.setAriaAttributes = function () {\n if (this.isCalendar()) {\n Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);\n attributes(this.inputElement, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n }\n else {\n Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);\n attributes(this.inputElement, {\n 'aria-activedescendant': 'null'\n });\n }\n };\n DatePicker.prototype.errorClass = function () {\n if ((!isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max))\n || (!this.strictMode && this.inputElement.value !== '' && isNullOrUndefined(this.value))) {\n addClass([this.inputWrapper.container], ERROR);\n }\n else {\n removeClass([this.inputWrapper.container], ERROR);\n }\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n DatePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n if (typeof newProp.value === 'string') {\n newProp.value = this.globalize.parseDate(newProp.value, options);\n }\n this.setProperties({ value: newProp.value }, true);\n this.previousEleValue = this.inputElement.value;\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.updateInput();\n this.changeTrigger();\n break;\n case 'format':\n this.updateInput();\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.inputElement);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n }\n this.bindEvents();\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.popupWrapper) {\n addClass([this.popupWrapper], [newProp.cssClass]);\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'strictMode':\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n default:\n if (this.calendarElement) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n }\n this.hide();\n }\n };\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(1000)\n ], DatePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property('Never')\n ], DatePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"destroyed\", void 0);\n DatePicker = __decorate([\n NotifyPropertyChanges\n ], DatePicker);\n return DatePicker;\n}(Calendar));\nexport { DatePicker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Event, L10n, Browser, ChildProperty } from '@syncfusion/ej2-base';\nimport { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend } from '@syncfusion/ej2-base';\nimport { Calendar } from '../calendar/calendar';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\nvar DATERANGEWRAPPER = 'e-date-range-wrapper';\nvar INPUTCONTAINER = 'e-input-group';\nvar DATERANGEICON = 'e-input-group-icon e-range-icon e-icons';\nvar POPUP = 'e-popup';\nvar LEFTCALENDER = 'e-left-calendar';\nvar RIGHTCALENDER = 'e-right-calendar';\nvar LEFTCONTAINER = 'e-left-container';\nvar RIGHTCONTAINER = 'e-right-container';\nvar ROOT = 'e-daterangepicker';\nvar ERROR = 'e-error';\nvar ACTIVE = 'e-active';\nvar STARTENDCONTAINER = 'e-start-end';\nvar STARTDATE = 'e-start-date';\nvar ENDDATE = 'e-end-date';\nvar STARTBUTTON = 'e-start-btn';\nvar INPUTFOCUS = 'e-input-focus';\nvar ENDBUTTON = 'e-end-btn';\nvar RANGEHOVER = 'e-range-hover';\nvar OTHERMONTH = 'e-other-month';\nvar STARTLABEL = 'e-start-label';\nvar ENDLABEL = 'e-end-label';\nvar DISABLED = 'e-disabled';\nvar SELECTED = 'e-selected';\nvar CALENDAR = 'e-calendar';\nvar NEXTICON = 'e-next';\nvar PREVICON = 'e-prev';\nvar HEADER = 'e-header';\nvar TITLE = 'e-title';\nvar ICONCONTAINER = 'e-icon-container';\nvar RANGECONTAINER = 'e-date-range-container';\nvar RANGEHEADER = 'e-range-header';\nvar PRESETS = 'e-presets';\nvar FOOTER = 'e-footer';\nvar RANGEBORDER = 'e-range-border';\nvar TODAY = 'e-today';\nvar FOCUSDATE = 'e-focused-date';\nvar CONTENT = 'e-content';\nvar DAYSPAN = 'e-day-span';\nvar WEEKNUMBER = 'e-week-number';\nvar DATEDISABLED = 'e-date-disabled';\nvar ICONDISABLED = 'e-icon-disabled';\nvar CALENDARCONTAINER = 'e-calendar-container';\nvar SEPARATOR = 'e-separator';\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar DEVICE = 'e-device';\nvar OVERLAY = 'e-overlay';\nvar CHANGEICON = 'e-change-icon e-icons';\nvar LISTCLASS = ListBaseClasses.li;\nvar RTL = 'e-rtl';\nvar HOVER = 'e-hover';\nvar HIDE = 'e-hide';\nvar OVERFLOW = 'e-range-overflow';\nvar OFFSETVALUE = 4;\nvar Presets = /** @class */ (function (_super) {\n __extends(Presets, _super);\n function Presets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Presets.prototype, \"label\", void 0);\n __decorate([\n Property()\n ], Presets.prototype, \"start\", void 0);\n __decorate([\n Property()\n ], Presets.prototype, \"end\", void 0);\n return Presets;\n}(ChildProperty));\nexport { Presets };\n/**\n * Represents the DateRangePicker component that allows user to select the date range from the calendar\n * or entering the range through the input element.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DateRangePicker = /** @class */ (function (_super) {\n __extends(DateRangePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function DateRangePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isCustomRange = false;\n _this.isCustomWindow = false;\n _this.presetsItem = [];\n _this.liCollections = [];\n _this.previousEleValue = '';\n _this.isTab = false;\n _this.isKeyPopup = false;\n _this.dateDisabled = false;\n _this.isRangeIconClicked = false;\n _this.isMaxDaysClicked = false;\n _this.disabledDays = [];\n return _this;\n }\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DateRangePicker.prototype.render = function () {\n this.initialize();\n };\n /**\n * Initialize the event handler\n * @returns void\n * @private\n */\n DateRangePicker.prototype.preRender = function () {\n this.presetKeyConfig = {\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n enter: 'enter',\n tab: 'tab'\n };\n this.keyInputConfigs = {\n altUpArrow: 'alt+uparrow',\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n tab: 'tab',\n };\n this.defaultConstant = {\n placeholder: '',\n startLabel: 'Start Date',\n endLabel: 'End Date',\n customRange: 'Custom Range',\n applyText: 'Apply',\n cancelText: 'Cancel',\n selectedDays: 'Selected Days',\n days: 'days'\n };\n /**\n * Mobile View\n */\n this.isMobile = window.matchMedia('(max-width:550px)').matches;\n this.inputElement = this.element;\n this.angularTag = null;\n if (this.element.tagName === 'EJS-DATERANGEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.cloneElement = this.element.cloneNode(true);\n if (this.element.getAttribute('id')) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n this.initProperty();\n _super.prototype.preRender.call(this);\n this.navNextFunction = this.navNextMonth.bind(this);\n this.navPrevFunction = this.navPrevMonth.bind(this);\n this.deviceNavNextFunction = this.deviceNavNext.bind(this);\n this.deviceNavPrevFunction = this.deviceNavPrevious.bind(this);\n };\n ;\n DateRangePicker.prototype.initProperty = function () {\n this.value = null;\n this.start = this.depth = 'Month';\n };\n DateRangePicker.prototype.initialize = function () {\n merge(this.keyConfigs, { shiftTab: 'shift+tab' });\n this.setProperties({ startDate: this.checkDateValue(new Date('' + this.startDate)) }, true); // persis the value propeerty.\n this.setProperties({ endDate: this.checkDateValue(new Date('' + this.endDate)) }, true);\n this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);\n this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);\n this.checkHtmlAttributes();\n this.globalize = new Internationalization(this.locale);\n this.l10n = new L10n('daterangepicker', this.defaultConstant, this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.processPresets();\n this.createInput();\n this.bindEvents();\n };\n DateRangePicker.prototype.processPresets = function () {\n var i = 0;\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n for (var _i = 0, _a = this.presets; _i < _a.length; _i++) {\n var range = _a[_i];\n var id = range.label.replace(/\\s+/g, '') + '_' + (++i);\n this.presetsItem.push({ id: id, text: range.label, start: range.start, end: range.end });\n }\n this.validateDates();\n var startDate = isNullOrUndefined(this.startDate) ? null : new Date(+this.startDate);\n var endDate = isNullOrUndefined(this.endDate) ? null : new Date(+this.endDate);\n this.presetsItem.push({ id: 'custom_range', text: this.l10n.getConstant('customRange'), start: startDate, end: endDate });\n if (!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) {\n this.isCustomRange = true;\n this.activeIndex = this.presetsItem.length - 1;\n }\n }\n };\n DateRangePicker.prototype.bindEvents = function () {\n if (this.enabled) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n this.bindClearEvent();\n if (!this.isMobile) {\n this.inputKeyboardModule = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown', keyAction: this.inputHandler.bind(this), keyConfigs: this.keyInputConfigs\n });\n }\n }\n else {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.inputKeyboardModule)) {\n this.inputKeyboardModule.destroy();\n }\n }\n }\n };\n DateRangePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DateRangePicker.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clear();\n };\n DateRangePicker.prototype.clear = function () {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n Input.setValue('', this.inputElement, this.floatLabelType);\n this.changeTrigger();\n };\n DateRangePicker.prototype.rangeIconHandler = function (e) {\n e.preventDefault();\n this.targetElement = null;\n if (this.isPopupOpen()) {\n this.applyFunction(e);\n }\n else {\n this.isRangeIconClicked = true;\n this.show();\n if (!Browser.isDevice) {\n this.inputWrapper.container.children[0].focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n }\n };\n DateRangePicker.prototype.checkHtmlAttributes = function () {\n this.globalize = new Internationalization(this.locale);\n var attributes;\n attributes = ['startDate', 'endDate', 'minDays', 'maxDays', 'min', 'max', 'disabled',\n 'readonly', 'style', 'name', 'placeholder', 'type'];\n var format = { format: this.format, type: 'date', skeleton: 'yMd' };\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n var disabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ enabled: !disabled }, true);\n break;\n case 'readonly':\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'placeholder':\n if (isNullOrUndefined(this.placeholder) || this.placeholder.trim() === '') {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, true);\n }\n break;\n case 'style':\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n break;\n case 'min':\n if (isNullOrUndefined(this.min) || +this.min === +new Date(1900, 0, 1)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.setProperties(setValue(prop, dateValue, {}), true);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n break;\n case 'max':\n if (isNullOrUndefined(this.max) || +this.max === +new Date(2099, 11, 31)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.setProperties(setValue(prop, dateValue, {}), true);\n }\n break;\n case 'startDate':\n if (isNullOrUndefined(this.startDate)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.setProperties(setValue(prop, dateValue, {}), true);\n }\n break;\n case 'endDate':\n if (isNullOrUndefined(this.endDate)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.setProperties(setValue(prop, dateValue, {}), true);\n }\n break;\n case 'minDays':\n if (isNullOrUndefined(this.minDays)) {\n this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);\n }\n break;\n case 'maxDays':\n if (isNullOrUndefined(this.maxDays)) {\n this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text') {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n DateRangePicker.prototype.createPopup = function () {\n this.activeIndex = this.presetsItem.length - 1;\n this.isCustomRange = true;\n for (var i = 0; i <= this.presetsItem.length - 2; i++) {\n var startDate = this.presetsItem[i].start;\n var endDate = this.presetsItem[i].end;\n if (this.startDate && this.endDate) {\n if ((+startDate.setMilliseconds(0) === +this.startDate.setMilliseconds(0)) &&\n (+endDate.setMilliseconds(0) === +this.endDate.setMilliseconds(0))) {\n this.activeIndex = i;\n this.isCustomRange = false;\n }\n }\n }\n this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });\n var isPreset = (!this.isCustomRange || this.isMobile);\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {\n this.isCustomWindow = false;\n this.createPresets();\n document.body.appendChild(this.popupWrapper);\n this.listRippleEffect();\n this.renderPopup();\n }\n else {\n this.isCustomWindow = true;\n this.renderControl();\n }\n };\n DateRangePicker.prototype.renderControl = function () {\n this.createControl();\n this.bindCalendarEvents();\n this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n this.disabledDateRender();\n }\n this.updateHeader();\n };\n DateRangePicker.prototype.clearCalendarEvents = function () {\n EventHandler.clearEvents(this.leftCalPrevIcon);\n EventHandler.clearEvents(this.leftCalNextIcon);\n EventHandler.clearEvents(this.rightCalPrevIcon);\n EventHandler.clearEvents(this.rightCalNextIcon);\n EventHandler.clearEvents(this.headerTitleElement);\n };\n DateRangePicker.prototype.updateNavIcons = function () {\n this.previousIcon = this.rightCalPrevIcon;\n this.nextIcon = this.leftCalNextIcon;\n this.nextIconHandler(this.compareMonths(new Date('' + this.leftCalCurrentDate), this.rightCalCurrentDate) < 1);\n this.previousIconHandler(this.compareMonths(new Date('' + this.leftCalCurrentDate), this.rightCalCurrentDate) < 1);\n };\n DateRangePicker.prototype.calendarIconEvent = function () {\n this.clearCalendarEvents();\n if (this.leftCalPrevIcon && !this.leftCalPrevIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.leftCalPrevIcon, 'mousedown', this.navPrevFunction);\n }\n if (this.leftCalNextIcon && !this.leftCalNextIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.leftCalNextIcon, 'mousedown', this.navNextFunction);\n }\n if (this.rightCalPrevIcon && !this.rightCalPrevIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.rightCalPrevIcon, 'mousedown', this.navPrevFunction);\n }\n if (this.rightCalNextIcon && !this.rightCalNextIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.rightCalNextIcon, 'mousedown', this.navNextFunction);\n }\n };\n DateRangePicker.prototype.bindCalendarEvents = function () {\n if (!this.isMobile) {\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n this.headerTitleElement = this.popupObj.element.querySelector('.' + RIGHTCALENDER + ' .' + HEADER + ' .' + TITLE);\n EventHandler.clearEvents(this.headerTitleElement);\n this.headerTitleElement = this.popupObj.element.querySelector('.' + LEFTCALENDER + ' .' + HEADER + ' .' + TITLE);\n EventHandler.clearEvents(this.headerTitleElement);\n this.leftKeyboardModule = new KeyboardEvents(this.leftCalendar, {\n eventName: 'keydown',\n keyAction: this.keyInputHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n this.rightKeyboardModule = new KeyboardEvents(this.rightCalendar, {\n eventName: 'keydown',\n keyAction: this.keyInputHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n }\n else {\n EventHandler.clearEvents(this.headerTitleElement);\n this.deviceCalendarEvent();\n EventHandler.add(this.startButton.element, 'click', this.deviceHeaderClick, this);\n EventHandler.add(this.endButton.element, 'click', this.deviceHeaderClick, this);\n }\n this.bindCalendarCellEvents();\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.calendarIconRipple = function () {\n rippleEffect(this.leftCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.leftCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n rippleEffect(this.rightCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.rightCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n };\n DateRangePicker.prototype.deviceCalendarEvent = function () {\n EventHandler.clearEvents(this.nextIcon);\n EventHandler.clearEvents(this.previousIcon);\n rippleEffect(this.nextIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.previousIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n if (this.nextIcon && !this.nextIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.nextIcon, 'mousedown', this.deviceNavNextFunction);\n }\n if (this.previousIcon && !this.previousIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.previousIcon, 'mousedown', this.deviceNavPrevFunction);\n }\n };\n DateRangePicker.prototype.deviceNavNext = function (e) {\n var calendar = closest(e.target, '.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n this.navigateNext(e);\n this.deviceNavigation();\n };\n DateRangePicker.prototype.deviceNavPrevious = function (e) {\n var calendar = closest(e.target, '.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n this.navigatePrevious(e);\n this.deviceNavigation();\n };\n DateRangePicker.prototype.updateDeviceCalendar = function (calendar) {\n if (calendar) {\n this.previousIcon = calendar.querySelector('.' + PREVICON);\n this.nextIcon = calendar.querySelector('.' + NEXTICON);\n this.calendarElement = calendar;\n this.deviceCalendar = calendar;\n this.contentElement = calendar.querySelector('.' + CONTENT);\n this.tableBodyElement = select('.' + CONTENT + ' tbody', calendar);\n this.table = calendar.querySelector('.' + CONTENT).getElementsByTagName('table')[0];\n this.headerTitleElement = calendar.querySelector('.' + HEADER + ' .' + TITLE);\n this.headerElement = calendar.querySelector('.' + HEADER);\n }\n };\n DateRangePicker.prototype.deviceHeaderClick = function (event) {\n var element = event.currentTarget;\n if (element.classList.contains(STARTBUTTON) && !isNullOrUndefined(this.startDate)) {\n this.endButton.element.classList.remove(ACTIVE);\n this.startButton.element.classList.add(ACTIVE);\n var calendar = this.popupObj.element.querySelector('.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n if (isNullOrUndefined(this.calendarElement.querySelector('.' + STARTDATE + ':not(.e-other-month)'))) {\n this.currentDate = new Date(+this.startDate);\n remove(this.tableBodyElement);\n this.renderMonths();\n this.deviceNavigation();\n }\n this.removeClassDisabled();\n }\n else if (!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) {\n this.startButton.element.classList.remove(ACTIVE);\n this.endButton.element.classList.add(ACTIVE);\n var calendar = this.popupObj.element.querySelector('.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n if (isNullOrUndefined(this.calendarElement.querySelector('.' + ENDDATE + ':not(.e-other-month)'))) {\n this.currentDate = new Date(+this.endDate);\n remove(this.tableBodyElement);\n this.renderMonths();\n this.deviceNavigation();\n }\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n this.selectableDates();\n }\n };\n DateRangePicker.prototype.inputFocusHandler = function () {\n this.trigger('focus');\n };\n DateRangePicker.prototype.inputBlurHandler = function () {\n var value = this.inputElement.value;\n if (!isNullOrUndefined(this.presetsItem)) {\n if (this.presetsItem.length > 0 && this.previousEleValue !== this.inputElement.value) {\n this.activeIndex = this.presetsItem.length - 1;\n this.isCustomRange = true;\n }\n }\n if (!isNullOrUndefined(value) && value.trim() !== '') {\n var range = value.split(' ' + this.separator + ' ');\n if (range.length > 1) {\n var dateOptions = { format: this.format, type: 'date', skeleton: 'yMd' };\n var startDate = this.globalize.parseDate(range[0].trim(), dateOptions);\n var endDate = this.globalize.parseDate(range[1].trim(), dateOptions);\n if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {\n this.setProperties({ startDate: startDate }, true);\n this.setProperties({ endDate: endDate }, true);\n this.refreshControl();\n this.changeTrigger();\n this.trigger('blur');\n return;\n }\n }\n }\n if (!this.strictMode) {\n this.clearRange();\n }\n else {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.updateInput();\n }\n this.errorClass();\n this.changeTrigger();\n this.trigger('blur');\n };\n DateRangePicker.prototype.clearRange = function () {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n this.previousStartValue = this.previousEndValue = null;\n this.currentDate = null;\n };\n DateRangePicker.prototype.errorClass = function () {\n var inputStr = this.inputElement.value.trim();\n if (isNullOrUndefined(this.endDate) && isNullOrUndefined(this.startDate) && inputStr !== '') {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n else {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n };\n DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele) {\n this.removeFocusedDate();\n if (isLeftCalendar) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n ele = this.leftCalendar;\n }\n else {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n ele = this.rightCalendar;\n }\n this.updateCalendarElement(ele);\n this.table.focus();\n return ele;\n };\n DateRangePicker.prototype.navInCalendar = function (e, isLeftCalendar, leftLimit, rightLimit, ele) {\n var date;\n var min = this.min;\n var max;\n if (!isNullOrUndefined(this.maxDays) && this.isMaxDaysClicked) {\n max = new Date(new Date(+this.startDate).setDate(this.startDate.getDate() + (this.maxDays - 1)));\n }\n else {\n max = this.max;\n }\n switch (e.action) {\n case 'moveRight':\n date = new Date(+this.currentDate);\n this.addDay(date, 1, e, max, min);\n if (isLeftCalendar && +date === +rightLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.KeyboardNavigate(1, 0, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveLeft':\n date = new Date(+this.currentDate);\n this.addDay(date, -1, e, max, min);\n if (!isLeftCalendar && +date === +leftLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.KeyboardNavigate(-1, 0, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveUp':\n date = new Date(+this.currentDate);\n this.addDay(date, -7, e, max, min);\n if (!isLeftCalendar && +date <= +leftLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.KeyboardNavigate(-7, 0, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveDown':\n date = new Date(+this.currentDate);\n this.addDay(date, 7, e, max, min);\n if (isLeftCalendar && +date >= +rightLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.KeyboardNavigate(7, 0, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'home':\n this.currentDate = this.firstDay(this.currentDate);\n remove(this.tableBodyElement);\n this.renderMonths();\n this.keyNavigation(ele, e);\n break;\n case 'end':\n this.currentDate = this.lastDay(this.currentDate);\n remove(this.tableBodyElement);\n this.renderMonths();\n this.keyNavigation(ele, e);\n break;\n }\n };\n DateRangePicker.prototype.keyInputHandler = function (e) {\n var date;\n var rightDateLimit = new Date(this.rightCalCurrentDate.getFullYear(), this.rightCalCurrentDate.getMonth(), 1);\n var leftDateLimit = new Date(this.leftCalCurrentDate.getFullYear(), this.leftCalCurrentDate.getMonth() + 1, 0);\n var ele = closest(e.target, '.' + RIGHTCALENDER);\n ele = isNullOrUndefined(ele) ? this.leftCalendar : ele;\n var isLeftCalendar = ele.classList.contains(LEFTCALENDER);\n this.updateCalendarElement(ele);\n var focusedDate = ele.querySelector('tr td.' + FOCUSDATE);\n var startDate = ele.querySelector('tr td.' + STARTDATE);\n var endDate = ele.querySelector('tr td.' + ENDDATE);\n if (!isNullOrUndefined(focusedDate)) {\n this.currentDate = this.currentDate;\n }\n else if (!isNullOrUndefined(endDate) && !this.dateDisabled) {\n this.currentDate = new Date(+this.endDate);\n }\n else if (!isNullOrUndefined(startDate) && !this.dateDisabled) {\n this.currentDate = new Date(+this.startDate);\n }\n else if (!this.dateDisabled) {\n this.currentDate.setDate(1);\n }\n switch (e.action) {\n case 'select':\n var element = !isNullOrUndefined(focusedDate) ? focusedDate : startDate;\n if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {\n this.selectRange(e, (element));\n }\n e.preventDefault();\n break;\n case 'controlHome':\n var yearDate = new Date(this.currentDate.getFullYear(), 0, 1);\n if (!isLeftCalendar && +yearDate < +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));\n this.keyNavigation(ele, e);\n break;\n case 'controlEnd':\n yearDate = new Date(this.currentDate.getFullYear(), 11, 31);\n if (isLeftCalendar && +yearDate > +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));\n this.keyNavigation(ele, e);\n break;\n case 'pageUp':\n date = new Date(+this.currentDate);\n this.addMonths(date, -1);\n if (!isLeftCalendar && +date <= +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.addMonths(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'pageDown':\n date = new Date(+this.currentDate);\n this.addMonths(date, 1);\n if (isLeftCalendar && +date >= +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.addMonths(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftPageUp':\n date = new Date(+this.currentDate);\n this.addYears(date, -1);\n if (!isLeftCalendar && +date <= +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.addYears(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftPageDown':\n date = new Date(+this.currentDate);\n this.addYears(date, 1);\n if (isLeftCalendar && +date >= +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.addYears(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftTab':\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetElement.setAttribute('tabindex', '0');\n this.presetElement.focus();\n this.removeFocusedDate();\n }\n e.preventDefault();\n break;\n default:\n this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);\n this.checkMinMaxDays();\n }\n this.presetHeight();\n };\n DateRangePicker.prototype.keyNavigation = function (calendar, e) {\n this.bindCalendarCellEvents(calendar);\n if (calendar.classList.contains(LEFTCALENDER)) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n }\n else {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n }\n this.updateNavIcons();\n this.calendarIconEvent();\n this.updateRange([calendar]);\n this.dateDisabled = this.isDateDisabled(this.currentDate);\n e.preventDefault();\n };\n DateRangePicker.prototype.inputHandler = function (e) {\n switch (e.action) {\n case 'altUpArrow':\n if (this.isPopupOpen()) {\n this.hide();\n }\n break;\n case 'altDownArrow':\n if (!this.isPopupOpen()) {\n this.show();\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftCalendar)) {\n this.calendarFocus();\n }\n }\n this.isKeyPopup = true;\n this.isRangeIconClicked = false;\n }\n break;\n case 'escape':\n if (this.isPopupOpen()) {\n this.hide();\n }\n break;\n case 'enter':\n if (document.activeElement === this.inputElement) {\n this.inputBlurHandler();\n this.hide();\n }\n break;\n case 'tab':\n if (document.activeElement === this.inputElement && this.isPopupOpen()) {\n this.hide();\n e.preventDefault();\n }\n break;\n }\n };\n DateRangePicker.prototype.bindCalendarCellEvents = function (calendar) {\n var tdCells;\n if (calendar) {\n tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n }\n else {\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td');\n }\n for (var _i = 0, tdCells_1 = tdCells; _i < tdCells_1.length; _i++) {\n var cell = tdCells_1[_i];\n EventHandler.clearEvents(cell);\n var disabledCell = void 0;\n disabledCell = cell.classList.contains(DISABLED) || cell.classList.contains(DATEDISABLED);\n if (!disabledCell && !cell.classList.contains(WEEKNUMBER)) {\n EventHandler.add(cell, 'mousedown', this.selectRange, this);\n if (!this.isMobile) {\n EventHandler.add(cell, 'mouseover', this.hoverSelection, this);\n }\n }\n }\n };\n DateRangePicker.prototype.removeFocusedDate = function () {\n var isDate = !isNullOrUndefined(this.startDate) || !isNullOrUndefined(this.endDate);\n var focusedDate;\n focusedDate = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' .' + FOCUSDATE);\n for (var _i = 0, focusedDate_1 = focusedDate; _i < focusedDate_1.length; _i++) {\n var ele = focusedDate_1[_i];\n if (!ele.classList.contains(TODAY) || (ele.classList.contains(TODAY) && (isDate))) {\n ele.classList.remove(FOCUSDATE);\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(ENDDATE)) {\n ele.removeAttribute('aria-label');\n }\n }\n }\n };\n DateRangePicker.prototype.hoverSelection = function (event, element) {\n var currentElement = element || event.currentTarget;\n var currentDate = this.getIdValue(null, currentElement);\n if (!isNullOrUndefined(this.startDate) && isNullOrUndefined(this.endDate)) {\n var tdCells = void 0;\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td');\n for (var _i = 0, tdCells_2 = tdCells; _i < tdCells_2.length; _i++) {\n var ele = tdCells_2[_i];\n var isDisabledCell = (!ele.classList.contains(DISABLED) || ele.classList.contains(DATEDISABLED));\n if (!ele.classList.contains(WEEKNUMBER) && isDisabledCell) {\n var eleDate = this.getIdValue(null, ele);\n if (+eleDate >= +this.startDate && +eleDate <= +currentDate) {\n addClass([ele], RANGEHOVER);\n }\n else {\n removeClass([ele], [RANGEHOVER]);\n }\n }\n }\n }\n };\n DateRangePicker.prototype.updateRange = function (elementCollection) {\n if (!isNullOrUndefined(this.startDate)) {\n for (var _i = 0, elementCollection_1 = elementCollection; _i < elementCollection_1.length; _i++) {\n var calendar = elementCollection_1[_i];\n var tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n for (var _a = 0, tdCells_3 = tdCells; _a < tdCells_3.length; _a++) {\n var ele = tdCells_3[_a];\n if (!ele.classList.contains(WEEKNUMBER) && !ele.classList.contains(DISABLED)) {\n var eleDate = this.getIdValue(null, ele);\n if (!isNullOrUndefined(this.endDate)) {\n if (+eleDate >= +this.startDate && +eleDate <= +this.endDate && +this.startDate !== +this.endDate) {\n addClass([ele], RANGEHOVER);\n }\n }\n else {\n removeClass([ele], [RANGEHOVER]);\n }\n if (!ele.classList.contains(OTHERMONTH)) {\n if (+eleDate === +this.startDate) {\n addClass([ele], [STARTDATE, SELECTED]);\n this.addSelectedAttributes(ele, this.startDate, true);\n }\n if (!isNullOrUndefined(this.endDate) && +eleDate === +this.endDate) {\n addClass([ele], [ENDDATE, SELECTED]);\n this.addSelectedAttributes(ele, this.endDate, false);\n }\n if (+eleDate === +this.startDate && !isNullOrUndefined(this.endDate) && +eleDate === +this.endDate) {\n this.addSelectedAttributes(ele, this.endDate, false, true);\n }\n }\n }\n }\n }\n }\n };\n DateRangePicker.prototype.checkMinMaxDays = function () {\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) || (!isNullOrUndefined(this.maxDays) && this.maxDays > 0)) {\n if (!this.isMobile) {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + LEFTCALENDER));\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + RIGHTCALENDER));\n }\n else {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n }\n }\n };\n DateRangePicker.prototype.rangeArgs = function () {\n var inputValue;\n var range;\n var startDate = !isNullOrUndefined(this.startDate) ?\n this.globalize.formatDate(this.startDate, { format: this.format, type: 'date', skeleton: 'yMd' }) : null;\n var endDate = !isNullOrUndefined(this.endDate) ?\n this.globalize.formatDate(this.endDate, { format: this.format, type: 'date', skeleton: 'yMd' }) : null;\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n inputValue = startDate + ' ' + this.separator + ' ' + endDate;\n range = (Math.round(Math.abs((this.startDate.getTime() - this.endDate.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n }\n else {\n inputValue = '';\n range = 0;\n }\n var args = {\n value: inputValue,\n startDate: this.startDate,\n endDate: this.endDate,\n daySpan: range\n };\n return args;\n };\n DateRangePicker.prototype.otherMonthSelect = function (ele, isStartDate, sameDate) {\n var value = +this.getIdValue(null, ele);\n var dateIdString = '*[id^=\"/id\"]:not(.e-other-month)'.replace('/id', '' + value);\n var tdCell = this.popupObj.element.querySelector(dateIdString);\n if (!isNullOrUndefined(tdCell)) {\n if (isStartDate) {\n addClass([tdCell], [STARTDATE, SELECTED]);\n this.addSelectedAttributes(tdCell, this.startDate, true);\n }\n else {\n addClass([tdCell], [ENDDATE, SELECTED]);\n this.addSelectedAttributes(tdCell, this.endDate, true);\n }\n if (sameDate) {\n this.addSelectedAttributes(ele, this.endDate, false, true);\n }\n }\n };\n // tslint:disable-next-line:max-func-body-length\n DateRangePicker.prototype.selectRange = function (event, element) {\n event.preventDefault();\n var date;\n date = event instanceof MouseEvent ? this.getIdValue(event, null) : this.getIdValue(null, element);\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n if (!this.isMobile || this.isMobile && !this.endButton.element.classList.contains(ACTIVE)) {\n this.removeSelection();\n }\n }\n else if (this.isMobile && this.startButton.element.classList.contains(ACTIVE)) {\n this.removeSelection();\n }\n var ele = element || event.currentTarget;\n if (isNullOrUndefined(this.startDate)) {\n if (!isNullOrUndefined(this.previousStartValue)) {\n date.setHours(this.previousStartValue.getHours());\n date.setMinutes(this.previousStartValue.getMinutes());\n date.setSeconds(this.previousStartValue.getSeconds());\n }\n this.setProperties({ startDate: new Date('' + date) }, true);\n this.setProperties({ endDate: null }, true);\n addClass([ele], STARTDATE);\n this.addSelectedAttributes(ele, this.startDate, true);\n if (ele.classList.contains(OTHERMONTH)) {\n this.otherMonthSelect(ele, true);\n }\n this.checkMinMaxDays();\n this.applyButton.disabled = true;\n this.applyButton.element.disabled = true;\n if (this.isMobile) {\n this.endButton.element.classList.add(ACTIVE);\n this.startButton.element.classList.remove(ACTIVE);\n this.endButton.element.removeAttribute('disabled');\n this.selectableDates();\n }\n this.trigger('select', this.rangeArgs());\n }\n else {\n if (+date === +this.startDate || +date > +this.startDate) {\n if (+date === +this.startDate && !isNullOrUndefined(this.minDays) && this.minDays > 1) {\n return;\n }\n this.setProperties({ endDate: null }, true);\n if (this.isMobile || element) {\n this.hoverSelection(event, element);\n }\n if (!isNullOrUndefined(this.previousEndValue)) {\n date.setHours(this.previousEndValue.getHours());\n date.setMinutes(this.previousEndValue.getMinutes());\n date.setSeconds(this.previousEndValue.getSeconds());\n }\n this.setProperties({ endDate: new Date('' + date) }, true);\n var endEle = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n if (this.isMobile) {\n this.startButton.element.classList.remove(ACTIVE);\n this.endButton.element.classList.add(ACTIVE);\n for (var _i = 0, endEle_1 = endEle; _i < endEle_1.length; _i++) {\n var ele_1 = endEle_1[_i];\n ele_1.removeAttribute('aria-label');\n if (!ele_1.classList.contains(STARTDATE)) {\n ele_1.setAttribute('aria-selected', 'false');\n removeClass([ele_1], [ENDDATE, SELECTED]);\n }\n else {\n this.addSelectedAttributes(ele_1, this.startDate, true);\n removeClass([ele_1], [ENDDATE]);\n }\n }\n }\n addClass([ele], ENDDATE);\n if (+this.endDate === +this.startDate) {\n this.addSelectedAttributes(ele, this.endDate, false, true);\n }\n else {\n this.addSelectedAttributes(ele, this.endDate, false);\n }\n if (ele.classList.contains(OTHERMONTH)) {\n if (+this.endDate === +this.startDate) {\n this.otherMonthSelect(ele, false, true);\n }\n else {\n this.otherMonthSelect(ele, false);\n }\n }\n endEle = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n for (var _a = 0, endEle_2 = endEle; _a < endEle_2.length; _a++) {\n var ele_2 = endEle_2[_a];\n if (ele_2.classList.contains(STARTDATE)) {\n removeClass([ele_2], [RANGEHOVER]);\n }\n }\n this.applyButton.disabled = false;\n this.applyButton.element.disabled = false;\n if (!this.isMobile) {\n this.removeClassDisabled();\n }\n this.disabledDateRender();\n this.trigger('select', this.rangeArgs());\n }\n else if (+date < +this.startDate) {\n this.removeClassDisabled();\n this.setProperties({ startDate: new Date('' + date) }, true);\n this.removeSelectedAttributes();\n removeClass(this.popupObj.element.querySelectorAll('.' + STARTDATE), [STARTDATE, SELECTED]);\n addClass([ele], STARTDATE);\n this.addSelectedAttributes(ele, this.startDate, true);\n if (ele.classList.contains(OTHERMONTH)) {\n this.otherMonthSelect(ele, true);\n }\n this.checkMinMaxDays();\n }\n }\n addClass([ele], SELECTED);\n this.updateHeader();\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.selectableDates = function () {\n if (!isNullOrUndefined(this.startDate)) {\n var tdCells = this.calendarElement.querySelectorAll('.' + CALENDAR + ' td');\n var isStartDate = false;\n for (var _i = 0, tdCells_4 = tdCells; _i < tdCells_4.length; _i++) {\n var ele = tdCells_4[_i];\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(WEEKNUMBER)) {\n if (!ele.classList.contains(DISABLED)) {\n var eleDate = this.getIdValue(null, ele);\n if (+eleDate < +this.startDate) {\n addClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n EventHandler.clearEvents(ele);\n continue;\n }\n else {\n break;\n }\n }\n }\n if (ele.classList.contains(STARTDATE) && !ele.classList.contains(OTHERMONTH)) {\n isStartDate = true;\n break;\n }\n }\n if (isStartDate) {\n if (!this.previousIcon.classList.contains(DISABLED)) {\n addClass([this.previousIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n }\n };\n DateRangePicker.prototype.updateMinMaxDays = function (calendar) {\n if (!isNullOrUndefined(this.startDate) && (isNullOrUndefined(this.endDate) || this.isMobile)) {\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) || (!isNullOrUndefined(this.maxDays) && this.maxDays > 0)) {\n var minDate = new Date(new Date(+this.startDate).setDate(this.startDate.getDate() + (this.minDays - 1)));\n var maxDate = new Date(new Date(+this.startDate).setDate(this.startDate.getDate() + (this.maxDays - 1)));\n minDate = (!isNullOrUndefined(this.minDays) && this.minDays > 0) ? minDate : null;\n maxDate = (!isNullOrUndefined(this.maxDays) && this.maxDays > 0) ? maxDate : null;\n var tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n var maxEle = void 0;\n for (var _i = 0, tdCells_5 = tdCells; _i < tdCells_5.length; _i++) {\n var ele = tdCells_5[_i];\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(WEEKNUMBER)) {\n var eleDate = this.getIdValue(null, ele);\n if (!isNullOrUndefined(minDate) && +eleDate === +minDate && ele.classList.contains(DISABLED)) {\n minDate.setDate(minDate.getDate() + 1);\n }\n if (!ele.classList.contains(DISABLED)) {\n if (+eleDate <= +this.startDate) {\n continue;\n }\n if (!isNullOrUndefined(minDate) && +eleDate < +minDate) {\n addClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n EventHandler.clearEvents(ele);\n }\n if (!isNullOrUndefined(maxDate) && +eleDate > +maxDate) {\n addClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n this.isMaxDaysClicked = true;\n EventHandler.clearEvents(ele);\n if (isNullOrUndefined(maxEle) && !ele.classList.contains(OTHERMONTH)) {\n maxEle = ele;\n }\n }\n }\n }\n }\n if (!isNullOrUndefined(maxEle)) {\n if (this.isMobile) {\n if (!this.nextIcon.classList.contains(DISABLED)) {\n addClass([this.nextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n else {\n var calendar_1 = closest(maxEle, '.' + RIGHTCALENDER);\n calendar_1 = isNullOrUndefined(calendar_1) ? this.leftCalendar : calendar_1;\n var isLeftCalendar = calendar_1.classList.contains(LEFTCALENDER);\n if (!isLeftCalendar) {\n if (!this.rightCalNextIcon.classList.contains(DISABLED)) {\n addClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n else {\n if (!this.rightCalNextIcon.classList.contains(DISABLED)) {\n addClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (!this.leftCalNextIcon.classList.contains(DISABLED)) {\n addClass([this.leftCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (!this.rightCalPrevIcon.classList.contains(DISABLED)) {\n addClass([this.rightCalPrevIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n }\n }\n }\n }\n else {\n this.isMaxDaysClicked = false;\n }\n };\n DateRangePicker.prototype.removeClassDisabled = function () {\n var tdCells;\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td' + '.' + DATEDISABLED);\n for (var _i = 0, tdCells_6 = tdCells; _i < tdCells_6.length; _i++) {\n var ele = tdCells_6[_i];\n if (ele.classList.contains(DATEDISABLED)) {\n removeClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n EventHandler.add(ele, 'click', this.selectRange, this);\n if (!this.isMobile) {\n EventHandler.add(ele, 'mouseover', this.hoverSelection, this);\n }\n }\n }\n if (this.isMobile) {\n if (this.nextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.nextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (this.previousIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.previousIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n else {\n if (this.rightCalNextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (this.rightCalPrevIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.rightCalPrevIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (this.leftCalNextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.leftCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n };\n DateRangePicker.prototype.updateHeader = function () {\n var format = { type: 'date', skeleton: 'yMMMd' };\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n var range = (Math.round(Math.abs((this.startDate.getTime() - this.endDate.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if (!isNullOrUndefined(this.disabledDayCnt)) {\n range = range - this.disabledDayCnt;\n this.disabledDayCnt = null;\n }\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = range.toString() + ' ' + this.l10n.getConstant('days');\n }\n else {\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.globalize.formatDate(this.endDate, format);\n }\n else {\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.l10n.getConstant('endLabel');\n }\n if (!isNullOrUndefined(this.startDate)) {\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.globalize.formatDate(this.startDate, format);\n }\n else {\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.l10n.getConstant('startLabel');\n }\n }\n else {\n if (!isNullOrUndefined(this.startDate)) {\n this.startButton.element.textContent = this.globalize.formatDate(this.startDate, format);\n }\n else {\n this.startButton.element.textContent = this.l10n.getConstant('startLabel');\n }\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n this.endButton.element.textContent = this.globalize.formatDate(this.endDate, format);\n }\n else {\n this.endButton.element.textContent = this.l10n.getConstant('endLabel');\n }\n }\n };\n DateRangePicker.prototype.removeSelection = function () {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n this.removeSelectedAttributes();\n if (this.popupObj.element.querySelectorAll('.' + SELECTED).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED), [STARTDATE, ENDDATE, SELECTED]);\n }\n if (this.popupObj.element.querySelectorAll('.' + FOCUSDATE).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + FOCUSDATE), FOCUSDATE);\n }\n if (this.popupObj.element.querySelectorAll('.' + RANGEHOVER).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + RANGEHOVER), [RANGEHOVER]);\n }\n };\n DateRangePicker.prototype.addSelectedAttributes = function (ele, date, isStartDate, sameDate) {\n if (ele) {\n var title = this.globalize.formatDate(date, { type: 'date', skeleton: 'full' });\n if (!isNullOrUndefined(sameDate) && sameDate) {\n ele.setAttribute('aria-label', 'The current start and end date is ' + '' + title);\n }\n else {\n ele.setAttribute('aria-label', 'The current ' + (isStartDate ? 'start' : 'end') + ' date is ' + '' + title);\n }\n ele.setAttribute('aria-selected', 'true');\n }\n };\n DateRangePicker.prototype.removeSelectedAttributes = function () {\n var start = this.popupObj.element.querySelectorAll('.' + STARTDATE);\n for (var _i = 0, start_1 = start; _i < start_1.length; _i++) {\n var ele = start_1[_i];\n ele.setAttribute('aria-selected', 'false');\n ele.removeAttribute('aria-label');\n }\n var end = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n for (var _a = 0, end_1 = end; _a < end_1.length; _a++) {\n var ele = end_1[_a];\n ele.setAttribute('aria-selected', 'false');\n ele.removeAttribute('aria-label');\n }\n };\n DateRangePicker.prototype.updateCalendarElement = function (calendar) {\n if (calendar.classList.contains(LEFTCALENDER)) {\n this.calendarElement = this.leftCalendar;\n this.currentDate = this.leftCalCurrentDate;\n this.previousIcon = this.leftCalPrevIcon;\n this.nextIcon = this.leftCalNextIcon;\n }\n else {\n this.calendarElement = this.rightCalendar;\n this.currentDate = this.rightCalCurrentDate;\n this.previousIcon = this.rightCalPrevIcon;\n this.nextIcon = this.rightCalNextIcon;\n }\n this.contentElement = calendar.querySelector('.' + CONTENT);\n this.tableBodyElement = select('.' + CONTENT + ' tbody', calendar);\n this.table = calendar.querySelector('.' + CONTENT).getElementsByTagName('table')[0];\n this.headerTitleElement = calendar.querySelector('.' + HEADER + ' .' + TITLE);\n this.headerElement = calendar.querySelector('.' + HEADER);\n };\n DateRangePicker.prototype.navPrevMonth = function (e) {\n e.preventDefault();\n var ele = closest(e.target, '.' + LEFTCALENDER);\n ele = isNullOrUndefined(ele) ? closest(e.target, '.' + RIGHTCALENDER) : ele;\n this.updateCalendarElement(ele);\n this.navigatePrevious(e);\n if (!isNullOrUndefined(this.startDate) && isNullOrUndefined(this.endDate)) {\n this.updateMinMaxDays(ele);\n }\n this.updateControl(ele);\n };\n DateRangePicker.prototype.deviceNavigation = function (ele) {\n this.deviceCalendarEvent();\n this.updateRange([this.popupObj.element.querySelector('.' + CALENDAR)]);\n if ((!isNullOrUndefined(this.endDate) && this.endButton.element.classList.contains(ACTIVE))) {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n }\n if (this.endButton.element.classList.contains(ACTIVE)) {\n this.selectableDates();\n }\n this.bindCalendarCellEvents();\n this.removeFocusedDate();\n this.popupObj.refreshPosition(this.inputElement);\n this.popupObj.show();\n };\n DateRangePicker.prototype.updateControl = function (calendar) {\n if (calendar.classList.contains(RIGHTCALENDER)) {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n }\n else {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n }\n this.updateNavIcons();\n this.calendarIconEvent();\n this.bindCalendarCellEvents();\n this.removeFocusedDate();\n this.updateRange([calendar]);\n this.presetHeight();\n if (!(this.isMobile || this.enableRtl)) {\n this.popupObj.offsetX = -this.popupWrapper.getBoundingClientRect().width;\n this.popupObj.show();\n }\n };\n DateRangePicker.prototype.navNextMonth = function (event) {\n event.preventDefault();\n var ele = closest(event.target, '.' + LEFTCALENDER);\n ele = isNullOrUndefined(ele) ? closest(event.target, '.' + RIGHTCALENDER) : ele;\n this.updateCalendarElement(ele);\n this.navigateNext(event);\n if (!isNullOrUndefined(this.startDate) && isNullOrUndefined(this.endDate)) {\n this.updateMinMaxDays(ele);\n }\n this.updateControl(ele);\n };\n DateRangePicker.prototype.compareMonths = function (start, end) {\n var result;\n if (start.getFullYear() > end.getFullYear()) {\n result = -1;\n }\n else if (start.getFullYear() < end.getFullYear()) {\n if (start.getFullYear() + 1 === end.getFullYear() && start.getMonth() === 11 && end.getMonth() === 0) {\n result = -1;\n }\n else {\n result = 1;\n }\n }\n else {\n result = start.getMonth() === end.getMonth() ? 0 : start.getMonth() + 1 === end.getMonth() ? -1 : 1;\n }\n return result;\n };\n DateRangePicker.prototype.isPopupOpen = function () {\n if (!isNullOrUndefined(this.popupObj) && this.popupObj.element.classList.contains(POPUP)) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.createHeader = function () {\n var labelContainer = createElement('div', { className: STARTENDCONTAINER });\n if (!this.isMobile) {\n var startLabel = createElement('a', { className: STARTLABEL });\n var endLabel = createElement('a', { className: ENDLABEL });\n var changeIcon = createElement('span', { className: CHANGEICON });\n attributes(startLabel, { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'Start Date', 'role': 'button' });\n attributes(endLabel, { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'End Date', 'role': 'button' });\n labelContainer.appendChild(startLabel);\n labelContainer.appendChild(changeIcon);\n labelContainer.appendChild(endLabel);\n startLabel.textContent = this.l10n.getConstant('startLabel');\n endLabel.textContent = this.l10n.getConstant('endLabel');\n }\n else {\n var endBtn = createElement('button', { className: ENDBUTTON });\n var startBtn = createElement('button', { className: STARTBUTTON });\n this.startButton = new Button({ content: this.l10n.getConstant('startLabel') }, startBtn);\n this.endButton = new Button({ content: this.l10n.getConstant('endLabel') }, endBtn);\n labelContainer.appendChild(startBtn);\n labelContainer.appendChild(endBtn);\n }\n return labelContainer;\n };\n DateRangePicker.prototype.disableInput = function () {\n if (this.strictMode) {\n if (!isNullOrUndefined(this.previousStartValue) && !isNullOrUndefined(this.previousEndValue)) {\n this.setProperties({ startDate: this.previousStartValue }, true);\n this.setProperties({ endDate: this.previousEndValue }, true);\n this.updateInput();\n }\n }\n else {\n this.updateInput();\n this.clearRange();\n this.errorClass();\n }\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n };\n DateRangePicker.prototype.validateMinMax = function () {\n this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;\n this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;\n if (!(this.min <= this.max)) {\n this.disableInput();\n return;\n }\n if (!isNullOrUndefined(this.minDays) && !isNullOrUndefined(this.maxDays)) {\n if (this.maxDays > 0 && this.minDays > 0 && (this.minDays > this.maxDays)) {\n this.maxDays = null;\n }\n }\n if (!isNullOrUndefined(this.minDays) && this.minDays < 0) {\n this.minDays = null;\n }\n if (!isNullOrUndefined(this.maxDays) && this.maxDays < 0) {\n this.maxDays = null;\n }\n };\n DateRangePicker.prototype.validateDates = function () {\n this.setProperties({ value: null }, true);\n this.startDate = isNullOrUndefined(this.startDate) || isNaN(+this.startDate) ? null : (this.startDate);\n this.endDate = isNullOrUndefined(this.endDate) || isNaN(+this.endDate) ? null : (this.endDate);\n };\n DateRangePicker.prototype.validateRangeStrict = function () {\n if (!isNullOrUndefined(this.startDate)) {\n if (+this.startDate < +this.min) {\n this.setProperties({ startDate: this.min }, true);\n }\n else if (+this.startDate > +this.max) {\n this.setProperties({ startDate: this.max }, true);\n }\n }\n if (!isNullOrUndefined(this.endDate)) {\n if (+this.endDate > +this.max) {\n this.setProperties({ endDate: this.max }, true);\n }\n else if (+this.endDate < +this.min) {\n this.setProperties({ endDate: this.min }, true);\n }\n }\n if ((!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) && +this.startDate > +this.endDate) {\n this.setProperties({ endDate: this.max }, true);\n }\n this.validateMinMaxDays();\n };\n DateRangePicker.prototype.validateRange = function () {\n if (!isNullOrUndefined(this.startDate) && +this.startDate < +this.min) {\n this.setProperties({ endDate: null }, true);\n this.setProperties({ startDate: null }, true);\n }\n if (!isNullOrUndefined(this.endDate) && +this.endDate > +this.max) {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n }\n if ((!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) && +this.startDate > +this.endDate) {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n }\n this.validateMinMaxDays();\n };\n DateRangePicker.prototype.validateMinMaxDays = function () {\n if (!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) {\n var range = (Math.round(Math.abs((this.startDate.getTime() - this.endDate.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) && !(range >= this.minDays)) {\n if (this.strictMode) {\n var date = new Date(+this.startDate);\n date.setDate(date.getDate() + (this.minDays - 1));\n if (+date > +this.max) {\n this.setProperties({ endDate: this.max }, true);\n }\n else {\n this.setProperties({ endDate: date }, true);\n }\n }\n else {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n }\n }\n if ((!isNullOrUndefined(this.maxDays) && this.maxDays > 0) && !(range <= this.maxDays)) {\n if (this.strictMode) {\n this.endDate = new Date(+this.startDate);\n this.endDate.setDate(this.endDate.getDate() + (this.maxDays - 1));\n this.setProperties({ endDate: this.endDate }, true);\n }\n else {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n }\n }\n }\n };\n DateRangePicker.prototype.renderCalendar = function () {\n this.calendarElement = createElement('div');\n this.calendarElement.classList.add(CALENDAR);\n if (this.enableRtl) {\n this.calendarElement.classList.add(RTL);\n }\n attributes(this.calendarElement, { 'role': 'calendar' });\n _super.prototype.header.call(this);\n _super.prototype.content.call(this);\n };\n DateRangePicker.prototype.isSameMonth = function (start, end) {\n if (start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear()) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.selectNextMonth = function () {\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate) && !this.isSameMonth(this.endDate, this.currentDate)) {\n this.currentDate = new Date(+this.endDate);\n }\n else {\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() + 1);\n }\n };\n DateRangePicker.prototype.selectStartMonth = function () {\n if (!isNullOrUndefined(this.startDate)) {\n if (!isNullOrUndefined(this.max) && this.isSameMonth(this.startDate, this.max)) {\n this.currentDate = new Date(+this.max);\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() - 1);\n }\n else {\n this.currentDate = new Date(+this.startDate);\n }\n }\n else {\n this.currentDate = new Date();\n if (this.currentDate > this.max || this.isSameMonth(this.min, this.max) || this.isSameMonth(this.currentDate, this.max)) {\n this.currentDate = new Date(+this.max);\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() - 1);\n }\n else if (this.currentDate < this.min) {\n this.currentDate = new Date('' + this.min);\n }\n }\n };\n DateRangePicker.prototype.createCalendar = function () {\n var calendarContainer = createElement('div', { className: CALENDARCONTAINER });\n if (!this.isMobile) {\n this.selectStartMonth();\n this.renderCalendar();\n this.leftCalCurrentDate = new Date(+this.currentDate);\n this.calendarElement.classList.add(LEFTCALENDER);\n this.leftCalPrevIcon = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + PREVICON);\n this.leftCalNextIcon = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + NEXTICON);\n remove(this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + ICONCONTAINER));\n this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER).appendChild(this.leftCalNextIcon);\n this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER).appendChild(this.leftCalPrevIcon);\n prepend([this.leftCalPrevIcon], this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER));\n this.leftCalendar = this.calendarElement;\n var leftContainer = createElement('div', { className: LEFTCONTAINER });\n var rightContainer = createElement('div', { className: RIGHTCONTAINER });\n leftContainer.appendChild(this.leftCalendar);\n calendarContainer.appendChild(leftContainer);\n this.selectNextMonth();\n this.renderCalendar();\n this.rightCalCurrentDate = new Date(+this.currentDate);\n addClass([this.calendarElement], RIGHTCALENDER);\n this.rightCalendar = this.calendarElement;\n this.rightCalPrevIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + PREVICON);\n this.rightCalNextIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON);\n remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER));\n this.calendarElement.querySelector('table').setAttribute('tabindex', '-1');\n this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalNextIcon);\n this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalPrevIcon);\n prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER));\n rightContainer.appendChild(this.rightCalendar);\n calendarContainer.appendChild(rightContainer);\n }\n else {\n if (!isNullOrUndefined(this.startDate)) {\n this.currentDate = new Date(+this.startDate);\n }\n _super.prototype.render.call(this);\n var prevIcon = this.calendarElement.querySelector('.' + CALENDAR + ' .' + PREVICON);\n var nextIcon = this.calendarElement.querySelector('.' + CALENDAR + ' .' + NEXTICON);\n remove(this.calendarElement.querySelector('.' + CALENDAR + ' .' + ICONCONTAINER));\n this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER).appendChild(nextIcon);\n this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER).appendChild(prevIcon);\n prepend([prevIcon], this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER));\n this.deviceCalendar = this.calendarElement;\n calendarContainer.appendChild(this.calendarElement);\n this.headerTitleElement = this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER + ' .' + TITLE);\n }\n return calendarContainer;\n };\n DateRangePicker.prototype.createControl = function () {\n var controlContainer = createElement('div', { className: RANGECONTAINER });\n var headerContainer = createElement('div', { className: RANGEHEADER });\n var labelContainer = this.createHeader();\n headerContainer.appendChild(labelContainer);\n var daySpan = createElement('div', { className: DAYSPAN });\n attributes(daySpan, { 'aria-label': 'Selected Days' });\n daySpan.textContent = this.l10n.getConstant('selectedDays');\n headerContainer.appendChild(daySpan);\n var separator = createElement('div', { className: SEPARATOR });\n var calendarContainer = this.createCalendar();\n controlContainer.appendChild(headerContainer);\n controlContainer.appendChild(separator);\n controlContainer.appendChild(calendarContainer);\n var footerSection = createElement('div', { className: FOOTER });\n var cancelBtn = createElement('button', { className: CANCEL + ' e-flat' });\n var applyBtn = createElement('button', { className: APPLY + ' e-flat e-primary' });\n footerSection.appendChild(applyBtn);\n footerSection.appendChild(cancelBtn);\n var enable = !isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate);\n this.cancelButton = new Button({ content: this.l10n.getConstant('cancelText') }, cancelBtn);\n this.applyButton = new Button({ content: this.l10n.getConstant('applyText'), disabled: !enable }, applyBtn);\n EventHandler.add(applyBtn, 'click', this.applyFunction, this);\n EventHandler.add(cancelBtn, 'click', this.cancelFunction, this);\n this.popupWrapper.appendChild(controlContainer);\n document.body.appendChild(this.popupWrapper);\n if (!this.isMobile) {\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n this.createPresets();\n this.listRippleEffect();\n addClass([controlContainer], RANGEBORDER);\n addClass([this.popupWrapper], 'e-preset-wrapper');\n var presets = this.popupWrapper.querySelector('.' + PRESETS);\n presets.style.height = this.popupWrapper.querySelector('.' + RANGECONTAINER).getBoundingClientRect().height + 'px';\n }\n }\n this.popupWrapper.appendChild(footerSection);\n if (this.isMobile) {\n this.deviceHeaderUpdate();\n }\n this.renderPopup();\n };\n DateRangePicker.prototype.cancelFunction = function (eve) {\n if (!this.isMobile && this.isKeyPopup) {\n this.inputElement.focus();\n this.isKeyPopup = false;\n }\n this.hide();\n };\n DateRangePicker.prototype.deviceHeaderUpdate = function () {\n if (isNullOrUndefined(this.startDate) && isNullOrUndefined(this.endDate)) {\n this.endButton.element.setAttribute('disabled', '');\n this.startButton.element.classList.add(ACTIVE);\n }\n else if (!isNullOrUndefined(this.startDate)) {\n this.startButton.element.classList.add(ACTIVE);\n }\n };\n DateRangePicker.prototype.applyFunction = function (eve) {\n eve.preventDefault();\n if (!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) {\n this.previousStartValue = new Date(+this.startDate);\n this.previousEndValue = new Date(+this.endDate);\n this.previousEleValue = this.inputElement.value;\n Input.setValue(this.rangeArgs().value, this.inputElement, this.floatLabelType, this.showClearButton);\n this.changeTrigger();\n this.hide();\n this.errorClass();\n }\n else {\n this.hide();\n }\n if (!this.isMobile) {\n this.isKeyPopup = false;\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.children[1].focus();\n this.popupKeyboardModule = new KeyboardEvents(this.inputWrapper.container.children[1], {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: this.keyInputConfigs\n });\n }\n }\n };\n DateRangePicker.prototype.onMouseClick = function (event, item) {\n var target = item || event.target;\n var li = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.setListSelection(li, event);\n }\n };\n DateRangePicker.prototype.onMouseOver = function (event) {\n var li = closest(event.target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS) && !li.classList.contains(HOVER)) {\n addClass([li], HOVER);\n }\n };\n DateRangePicker.prototype.onMouseLeave = function (event) {\n var item = closest(event.target, '.' + HOVER);\n if (!isNullOrUndefined(item)) {\n removeClass([item], HOVER);\n }\n };\n DateRangePicker.prototype.setListSelection = function (li, event) {\n if (li && (!li.classList.contains(ACTIVE) || (this.isMobile && li.classList.contains(ACTIVE)))) {\n if (this.isMobile && li.classList.contains(ACTIVE)) {\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n var values_1 = this.presetsItem[this.activeIndex];\n if (values_1.id === 'custom_range') {\n this.renderCustomPopup();\n return;\n }\n return;\n }\n this.removeListSelection();\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n addClass([li], ACTIVE);\n li.setAttribute('aria-selected', 'true');\n var values = this.presetsItem[this.activeIndex];\n if (values.id === 'custom_range') {\n this.renderCustomPopup();\n }\n else {\n this.applyPresetRange(values);\n }\n }\n };\n DateRangePicker.prototype.removeListSelection = function () {\n var item = this.presetElement.querySelector('.' + ACTIVE);\n if (!isNullOrUndefined(item)) {\n removeClass([item], ACTIVE);\n item.removeAttribute('aria-selected');\n }\n };\n DateRangePicker.prototype.applyPresetRange = function (values) {\n this.hide();\n this.presetsItem[this.presetsItem.length - 1].start = null;\n this.presetsItem[this.presetsItem.length - 1].end = null;\n this.setProperties({ startDate: values.start }, true);\n this.setProperties({ endDate: values.end }, true);\n this.refreshControl();\n this.trigger('select', this.rangeArgs());\n this.changeTrigger();\n this.previousEleValue = this.inputElement.value;\n this.isCustomRange = false;\n this.leftCalendar = this.rightCalendar = null;\n if (this.isKeyPopup) {\n this.isRangeIconClicked = false;\n this.inputElement.focus();\n }\n };\n DateRangePicker.prototype.renderCustomPopup = function () {\n this.isCustomWindow = true;\n this.popupObj.hide();\n this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });\n this.renderControl();\n this.isCustomRange = true;\n if (!this.isMobile) {\n this.calendarFocus();\n }\n };\n DateRangePicker.prototype.listRippleEffect = function () {\n for (var _i = 0, _a = this.liCollections; _i < _a.length; _i++) {\n var li = _a[_i];\n rippleEffect(li);\n }\n };\n DateRangePicker.prototype.createPresets = function () {\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n this.presetElement = createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });\n var listTag = ListBase.createList(this.presetsItem, null, true);\n attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n this.presetElement.appendChild(listTag);\n this.popupWrapper.appendChild(this.presetElement);\n this.liCollections = this.presetElement.querySelectorAll('.' + LISTCLASS);\n this.wireListEvents();\n if (this.isMobile) {\n this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';\n }\n if (!isNullOrUndefined(this.activeIndex) && this.activeIndex > -1) {\n addClass([this.liCollections[this.activeIndex]], ACTIVE);\n }\n }\n };\n DateRangePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.presetElement, 'click', this.onMouseClick, this);\n if (!this.isMobile) {\n EventHandler.add(this.presetElement, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.presetElement, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateRangePicker.prototype.unWireListEvents = function () {\n if (!isNullOrUndefined(this.presetElement)) {\n EventHandler.remove(this.presetElement, 'click', this.onMouseClick);\n if (!this.isMobile) {\n EventHandler.remove(this.presetElement, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.presetElement, 'mouseout', this.onMouseLeave);\n }\n }\n };\n DateRangePicker.prototype.renderPopup = function () {\n var _this = this;\n this.popupWrapper.classList.add('e-control');\n var popupWidth = this.popupWrapper.getBoundingClientRect().width;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass.trim() !== '') {\n this.popupWrapper.classList.add(this.cssClass);\n }\n if (this.isMobile && this.isCustomWindow) {\n this.modal = createElement('div');\n document.body.appendChild(this.modal);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n relateTo: this.isMobile && this.isCustomWindow ? document.body :\n (!isNullOrUndefined(this.targetElement) ? this.targetElement : this.inputWrapper.container),\n position: (this.isMobile ?\n (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && !this.isCustomWindow ?\n { X: 'left', Y: 'bottom' } : { X: 'center', Y: 'center' }) :\n this.enableRtl ? { X: 'left', Y: 'bottom' } : { X: 'right', Y: 'bottom' }),\n offsetX: this.isMobile || this.enableRtl ? 0 : -popupWidth,\n offsetY: OFFSETVALUE,\n collision: this.isMobile ?\n (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && !this.isCustomWindow ?\n { X: 'fit' } : { X: 'fit', Y: 'fit' }) : { X: 'fit' },\n targetType: this.isMobile && this.isCustomWindow ? 'container' : 'relative',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n open: function () {\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n addClass([_this.inputWrapper.buttons[0]], ACTIVE);\n if (!_this.isMobile) {\n if (_this.cancelButton) {\n _this.btnKeyboardModule = new KeyboardEvents(_this.cancelButton.element, {\n eventName: 'keydown',\n keyAction: _this.hide.bind(_this),\n keyConfigs: { tab: 'tab' }\n });\n }\n if (!isNullOrUndefined(_this.leftCalendar)) {\n if (!_this.isRangeIconClicked) {\n _this.calendarFocus();\n }\n }\n if (!isNullOrUndefined(_this.presetElement)) {\n _this.presetKeyboardModule = new KeyboardEvents(_this.presetElement, {\n eventName: 'keydown',\n keyAction: _this.presetKeyActionHandler.bind(_this),\n keyConfigs: _this.presetKeyConfig\n });\n if (isNullOrUndefined(_this.leftCalendar)) {\n _this.presetElement.focus();\n }\n else {\n _this.presetElement.setAttribute('tabindex', '-1');\n }\n }\n _this.popupKeyBoardHandler();\n }\n },\n close: function () {\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n removeClass([_this.inputWrapper.buttons[0]], ACTIVE);\n if (!_this.isMobile) {\n if (_this.isRangeIconClicked) {\n _this.inputWrapper.container.children[1].focus();\n }\n }\n if (!isUndefined(_this.presets[0].start && _this.presets[0].end && _this.presets[0].label)) {\n _this.unWireListEvents();\n }\n if (!isNullOrUndefined(_this.popupObj)) {\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupObj = null;\n }\n }\n });\n document.body.appendChild(this.popupObj.element);\n if (this.isMobile) {\n this.popupObj.element.classList.add(DEVICE);\n if (!Browser.isDevice) {\n this.popupObj.element.classList.add('e-bigger');\n }\n }\n if (this.isMobile && this.isCustomWindow) {\n addClass([this.modal], [DEVICE, ROOT, 'e-range-modal']);\n document.body.className += ' ' + OVERFLOW;\n this.modal.style.display = 'block';\n }\n this.presetHeight();\n if (!(this.isMobile || this.enableRtl)) {\n this.popupObj.offsetX = -this.popupWrapper.getBoundingClientRect().width;\n }\n this.popupObj.refreshPosition(this.inputElement);\n this.popupObj.show();\n EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);\n };\n DateRangePicker.prototype.calendarFocus = function () {\n var startDate = this.popupObj.element.querySelector('.' + STARTDATE);\n if (startDate) {\n var ele = closest(startDate, '.' + RIGHTCALENDER);\n ele = isNullOrUndefined(ele) ? this.leftCalendar : ele;\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.focus();\n }\n else {\n ele.children[1].firstElementChild.focus();\n }\n addClass([startDate], FOCUSDATE);\n }\n else {\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.focus();\n }\n else {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n };\n DateRangePicker.prototype.presetHeight = function () {\n var presets = this.popupObj && this.popupObj.element.querySelector('.' + PRESETS);\n var rangeContainer = this.popupObj && this.popupObj.element.querySelector('.' + RANGECONTAINER);\n if (!isNullOrUndefined(presets) && !isNullOrUndefined(rangeContainer)) {\n presets.style.height = rangeContainer.getBoundingClientRect().height + 'px';\n }\n };\n DateRangePicker.prototype.presetKeyActionHandler = function (e) {\n switch (e.action) {\n case 'moveDown':\n this.listMoveDown(e);\n this.setScrollPosition();\n e.preventDefault();\n break;\n case 'moveUp':\n this.listMoveUp(e);\n this.setScrollPosition();\n e.preventDefault();\n break;\n case 'enter':\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(this.leftCalendar) && !isNullOrUndefined(actItem)) {\n if (isNullOrUndefined(hvrItem) || (!isNullOrUndefined(actItem) && actItem === hvrItem)) {\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(actItem);\n var values = this.presetsItem[this.activeIndex];\n if (values.id === 'custom_range') {\n this.calendarFocus();\n actItem.classList.remove(HOVER);\n e.preventDefault();\n return;\n }\n }\n }\n if (!isNullOrUndefined(hvrItem) || !isNullOrUndefined(actItem)) {\n this.onMouseClick(e, hvrItem || actItem);\n }\n e.preventDefault();\n break;\n case 'tab':\n if (this.leftCalendar) {\n var item = this.getHoverLI();\n if (!isNullOrUndefined(item)) {\n item.classList.remove(HOVER);\n }\n }\n else {\n this.hide();\n e.preventDefault();\n }\n break;\n }\n };\n DateRangePicker.prototype.listMoveDown = function (e) {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(hvrItem)) {\n var li = hvrItem.nextElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n removeClass([hvrItem], HOVER);\n addClass([li], HOVER);\n }\n }\n else if (!isNullOrUndefined(actItem)) {\n var li = actItem.nextElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n addClass([li], HOVER);\n }\n }\n else {\n addClass([this.liCollections[0]], HOVER);\n }\n };\n DateRangePicker.prototype.listMoveUp = function (e) {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(hvrItem)) {\n var li = hvrItem.previousElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n removeClass([hvrItem], HOVER);\n addClass([li], HOVER);\n }\n }\n else if (!isNullOrUndefined(actItem)) {\n var li = actItem.previousElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n addClass([li], HOVER);\n }\n }\n };\n DateRangePicker.prototype.getHoverLI = function () {\n var item = this.presetElement.querySelector('.' + HOVER);\n return item;\n };\n DateRangePicker.prototype.getActiveLI = function () {\n var item = this.presetElement.querySelector('.' + ACTIVE);\n return item;\n };\n DateRangePicker.prototype.popupKeyBoardHandler = function () {\n this.popupKeyboardModule = new KeyboardEvents(this.popupWrapper, {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: { escape: 'escape' }\n });\n this.popupKeyboardModule = new KeyboardEvents(this.inputWrapper.container.children[1], {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: this.keyInputConfigs\n });\n };\n DateRangePicker.prototype.setScrollPosition = function () {\n var listHeight = this.presetElement.getBoundingClientRect().height;\n var hover = this.presetElement.querySelector('.' + HOVER);\n var active = this.presetElement.querySelector('.' + ACTIVE);\n var element = !isNullOrUndefined(hover) ? hover : active;\n if (!isNullOrUndefined(element)) {\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.presetElement.scrollTop = nextEle ? (height - (listHeight / 2 + liHeight / 2)) : height;\n }\n else {\n this.presetElement.scrollTop = 0;\n }\n }\n };\n DateRangePicker.prototype.popupKeyActionHandle = function (e) {\n switch (e.action) {\n case 'escape':\n if (this.isPopupOpen()) {\n if (this.isKeyPopup) {\n this.inputElement.focus();\n this.isKeyPopup = false;\n }\n this.hide();\n }\n else {\n this.inputWrapper.container.children[1].blur();\n }\n break;\n case 'enter':\n if (!this.isPopupOpen()) {\n this.show();\n }\n else {\n this.inputWrapper.container.children[1].focus();\n }\n break;\n case 'tab':\n this.hide();\n }\n };\n DateRangePicker.prototype.documentHandler = function (e) {\n e.preventDefault();\n if (isNullOrUndefined(this.popupObj)) {\n return;\n }\n var target = e.target;\n if ((isNullOrUndefined(this.targetElement) ||\n (!isNullOrUndefined(this.targetElement) && !(target === this.targetElement))) &&\n !(closest(target, '#' + this.popupObj.element.id))\n && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)) {\n if (this.isPopupOpen()) {\n if (!this.isMobile) {\n this.isRangeIconClicked = false;\n }\n this.applyFunction(e);\n }\n }\n };\n DateRangePicker.prototype.createInput = function () {\n this.inputWrapper = Input.createInput({\n floatLabelType: this.floatLabelType,\n element: this.inputElement,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n },\n buttons: [DATERANGEICON]\n });\n attributes(this.inputElement, {\n 'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '1', 'aria-haspopup': 'true',\n 'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',\n 'role': 'daterangepicker', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n });\n Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);\n if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {\n Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);\n }\n this.setEleWidth(this.width);\n addClass([this.inputWrapper.container], DATERANGEWRAPPER);\n if (isNullOrUndefined(this.element.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n if (this.inputElement.type === 'hidden') {\n this.inputWrapper.container.style.display = 'none';\n }\n this.refreshControl();\n this.previousEleValue = this.inputElement.value;\n };\n DateRangePicker.prototype.setEleWidth = function (width) {\n if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (this.width);\n }\n else if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n DateRangePicker.prototype.refreshControl = function () {\n this.validateMinMax();\n this.validateDates();\n if (this.strictMode) {\n this.validateRangeStrict();\n }\n var isDisabled = this.disabledDates();\n if (this.strictMode && (isDisabled)) {\n this.setProperties({ startDate: this.previousStartValue }, true);\n this.setProperties({ endDate: this.previousEndValue }, true);\n }\n this.updateInput();\n if (!this.strictMode) {\n this.validateRange();\n }\n if (!this.strictMode && (isDisabled)) {\n this.clearRange();\n }\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate) && !isDisabled) {\n this.disabledDateRender();\n }\n this.errorClass();\n this.previousStartValue = isNullOrUndefined(this.startDate) || isNaN(+this.startDate) ? null : new Date(+this.startDate);\n this.previousEndValue = isNullOrUndefined(this.endDate) || isNaN(+this.endDate) ? null : new Date(+this.endDate);\n };\n DateRangePicker.prototype.updateInput = function () {\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n var startDate = this.globalize.formatDate(this.startDate, { format: this.format, type: 'date', skeleton: 'yMd' });\n var endDate = this.globalize.formatDate(this.endDate, { format: this.format, type: 'date', skeleton: 'yMd' });\n Input.setValue(startDate + ' ' + this.separator + ' ' + endDate, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousStartValue = new Date(+this.startDate);\n this.previousEndValue = new Date(+this.endDate);\n }\n };\n DateRangePicker.prototype.isDateDisabled = function (date) {\n var value = new Date(+date);\n if (+value < +this.min || +value > +this.max) {\n return true;\n }\n this.virtualRenderCellArgs = {\n date: value,\n isDisabled: false,\n };\n var args = this.virtualRenderCellArgs;\n this.virtualRenderCellEvent(args);\n if (args.isDisabled) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.disabledDateRender = function () {\n this.disabledDays = [];\n this.disabledDayCnt = null;\n var localDate = new Date(+this.startDate);\n var count = 0;\n while (+localDate <= +this.endDate) {\n this.virtualRenderCellArgs = {\n date: localDate,\n isDisabled: false,\n };\n var args = this.virtualRenderCellArgs;\n this.virtualRenderCellEvent(args);\n if (args.isDisabled) {\n this.disabledDays.push(new Date(+args.date));\n if (+localDate > +this.startDate && +localDate < +this.endDate) {\n count++;\n }\n }\n this.addDay(localDate, 1, null, this.max, this.min);\n }\n this.disabledDayCnt = count;\n };\n DateRangePicker.prototype.virtualRenderCellEvent = function (args) {\n extend(this.virtualRenderCellArgs, { name: 'renderDayCell' });\n this.trigger('renderDayCell', args);\n };\n DateRangePicker.prototype.disabledDates = function () {\n var isStartDisabled = false;\n var isEndDisabled = false;\n if (!isNullOrUndefined(this.endDate) && !isNullOrUndefined(this.startDate)) {\n this.value = null;\n isStartDisabled = this.isDateDisabled(this.startDate);\n isEndDisabled = this.isDateDisabled(this.endDate);\n this.currentDate = null;\n this.value = null;\n }\n return (isStartDisabled || isEndDisabled);\n };\n DateRangePicker.prototype.changeTrigger = function () {\n if (this.previousEleValue !== this.inputElement.value) {\n this.trigger('change', this.rangeArgs());\n }\n this.previousEleValue = this.inputElement.value;\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n * @hidden\n */\n DateRangePicker.prototype.navigateTo = function (view, value) {\n _super.prototype.navigateTo.call(this, view, value);\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n DateRangePicker.prototype.focusIn = function () {\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.inputElement.focus();\n this.trigger('focus');\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DateRangePicker.prototype.focusOut = function () {\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.inputElement.blur();\n this.trigger('blur');\n };\n /**\n * To destroy the widget.\n * @returns void\n */\n DateRangePicker.prototype.destroy = function () {\n this.hide();\n removeClass([this.inputElement], [ROOT]);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n var ariaAttrs = {\n 'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '1', 'aria-haspopup': 'true',\n 'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',\n 'role': 'daterangepicker', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'aria-invalid': 'false', 'spellcheck': 'false'\n };\n Input.removeAttributes(ariaAttrs, this.inputElement);\n this.ensureInputAttribute();\n this.inputElement.classList.remove('e-input');\n if (!isNullOrUndefined(this.inputWrapper)) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'click', this.rangeIconHandler);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n detach(this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputKeyboardModule) && !this.isMobile) {\n this.inputKeyboardModule.destroy();\n }\n if (this.popupObj) {\n if (!this.isMobile) {\n this.clearCalendarEvents();\n }\n }\n _super.prototype.destroy.call(this);\n this.inputWrapper = this.popupWrapper = this.popupObj = this.cloneElement = this.presetElement = null;\n };\n DateRangePicker.prototype.ensureInputAttribute = function () {\n for (var attr = 0; attr < this.inputElement.attributes.length; attr++) {\n var prop = this.inputElement.attributes[attr].name;\n if (isNullOrUndefined(this.cloneElement.getAttribute(prop))) {\n if (prop.toLowerCase() === 'value' || isNullOrUndefined(this.cloneElement.getAttribute('value'))) {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop);\n }\n }\n };\n /**\n * To get component name\n * @returns string\n * @private\n */\n DateRangePicker.prototype.getModuleName = function () {\n return 'daterangepicker';\n };\n /**\n * Return the properties that are maintained upon browser refresh.\n * @returns string\n */\n DateRangePicker.prototype.getPersistData = function () {\n var keyEntity = ['startDate', 'endDate'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Return the selected range and day span in the DateRangePicker.\n * @returns Object\n */\n DateRangePicker.prototype.getSelectedRange = function () {\n var range;\n if (!isNullOrUndefined(this.startDate) && !isNullOrUndefined(this.endDate)) {\n range = (Math.round(Math.abs((this.startDate.getTime() - this.endDate.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n this.disabledDateRender();\n if (!isNullOrUndefined(this.disabledDayCnt)) {\n range = range - this.disabledDayCnt;\n this.disabledDayCnt = null;\n }\n }\n else {\n range = 0;\n }\n return { startDate: this.startDate, endDate: this.endDate, daySpan: range };\n };\n /**\n * To open the Popup container in the DateRangePicker component.\n * @returns void\n */\n DateRangePicker.prototype.show = function (element) {\n if (element) {\n this.targetElement = element;\n }\n if (!this.readonly) {\n this.createPopup();\n var isPreset = (!this.isCustomRange || (this.isMobile && this.isCustomRange));\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {\n this.setScrollPosition();\n }\n if (this.isPopupOpen() && !this.readonly) {\n var args = {\n date: this.inputElement.value,\n model: this,\n popup: this.popupObj\n };\n this.trigger('open', args);\n }\n }\n };\n /**\n * To close the Popup container in the DateRangePicker component.\n * @returns void\n */\n DateRangePicker.prototype.hide = function () {\n if (isNullOrUndefined(this.previousEndValue) && isNullOrUndefined(this.previousStartValue)) {\n this.clearRange();\n }\n else {\n if (!isNullOrUndefined(this.previousStartValue)) {\n this.setProperties({ startDate: new Date('' + this.previousStartValue) }, true);\n this.currentDate = new Date('' + this.startDate);\n }\n else {\n this.setProperties({ startDate: null }, true);\n }\n if (!isNullOrUndefined(this.previousEndValue)) {\n this.setProperties({ endDate: new Date('' + this.previousEndValue) }, true);\n }\n else {\n this.setProperties({ endDate: null }, true);\n }\n }\n if (this.isPopupOpen()) {\n var args = {\n date: this.inputElement.value,\n model: this,\n popup: this.popupObj\n };\n this.trigger('close', args);\n if (this.isMobile) {\n if (!isNullOrUndefined(this.startButton) && !isNullOrUndefined(this.endButton)) {\n EventHandler.remove(this.startButton.element, 'click', this.deviceHeaderClick);\n EventHandler.remove(this.endButton.element, 'click', this.deviceHeaderClick);\n }\n }\n if (this.popupObj) {\n this.popupObj.hide();\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftKeyboardModule) && !isNullOrUndefined(this.rightKeyboardModule)) {\n this.leftKeyboardModule.destroy();\n this.rightKeyboardModule.destroy();\n }\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetKeyboardModule.destroy();\n }\n if (!isNullOrUndefined(this.cancelButton)) {\n this.btnKeyboardModule.destroy();\n }\n }\n this.targetElement = null;\n }\n removeClass([document.body], OVERFLOW);\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n if (this.isMobile && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n this.isKeyPopup = this.dateDisabled = false;\n };\n DateRangePicker.prototype.setLocale = function () {\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n this.updateInput();\n this.changeTrigger();\n };\n DateRangePicker.prototype.refreshChange = function () {\n this.refreshControl();\n this.changeTrigger();\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n DateRangePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var format = { format: this.format, type: 'date', skeleton: 'yMd' };\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n this.hide();\n switch (prop) {\n case 'width':\n this.setEleWidth(this.width);\n break;\n case 'separator':\n this.previousEleValue = this.inputElement.value;\n this.setProperties({ separator: newProp.separator }, true);\n this.updateInput();\n this.changeTrigger();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.setProperties({ placeholder: newProp.placeholder }, true);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n this.inputElement.setAttribute('aria-readonly', '' + this.readonly);\n break;\n case 'cssClass':\n if (this.popupWrapper) {\n addClass([this.popupWrapper], [newProp.cssClass]);\n }\n addClass([this.inputWrapper.container], [newProp.cssClass]);\n this.setProperties({ cssClass: newProp.cssClass }, true);\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n break;\n case 'enableRtl':\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.updateInput();\n this.changeTrigger();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.setLocale();\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'startDate':\n if (typeof newProp.startDate === 'string') {\n newProp.value = this.globalize.parseDate(newProp.startDate, format);\n }\n this.setProperties({ startDate: newProp.startDate }, true);\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.refreshControl();\n this.changeTrigger();\n break;\n case 'endDate':\n if (typeof newProp.endDate === 'string') {\n newProp.value = this.globalize.parseDate(newProp.endDate, format);\n }\n this.setProperties({ endDate: this.checkDateValue(new Date('' + newProp.endDate)) }, true);\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.refreshControl();\n this.changeTrigger();\n break;\n case 'minDays':\n this.setProperties({ minDays: newProp.minDays }, true);\n this.refreshChange();\n break;\n case 'maxDays':\n this.setProperties({ maxDays: newProp.maxDays }, true);\n this.refreshChange();\n break;\n case 'min':\n this.setProperties({ min: this.checkDateValue(new Date('' + newProp.min)) }, true);\n this.previousEleValue = this.inputElement.value;\n this.refreshChange();\n break;\n case 'max':\n this.setProperties({ max: this.checkDateValue(new Date('' + newProp.max)) }, true);\n this.refreshChange();\n break;\n case 'strictMode':\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.refreshChange();\n break;\n case 'presets':\n this.setProperties({ presets: newProp.presets }, true);\n this.processPresets();\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"startDate\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"endDate\", void 0);\n __decorate([\n Collection([{}], Presets)\n ], DateRangePicker.prototype, \"presets\", void 0);\n __decorate([\n Property('')\n ], DateRangePicker.prototype, \"width\", void 0);\n __decorate([\n Property(1000)\n ], DateRangePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateRangePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property('')\n ], DateRangePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property('-')\n ], DateRangePicker.prototype, \"separator\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"minDays\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"maxDays\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], DateRangePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property('Never')\n ], DateRangePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property('Month')\n ], DateRangePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateRangePicker.prototype, \"depth\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"value\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"navigated\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"blur\", void 0);\n DateRangePicker = __decorate([\n NotifyPropertyChanges\n ], DateRangePicker);\n return DateRangePicker;\n}(Calendar));\nexport { DateRangePicker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\nimport { cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar RTL = 'e-rtl';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = ListBaseClasses.li;\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n *
\n * ````\n * ````typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.previousDateTime = null;\n return _this;\n }\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n DateTimePicker.prototype.focusIn = function () {\n this.inputElement.focus();\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DateTimePicker.prototype.focusOut = function () {\n if (this.isTimePopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n this.closePopup();\n };\n /**\n * To destroy the widget.\n * @returns void\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n if (this.isCalendar()) {\n detach(this.popupWrapper);\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n this.checkAttributes();\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n this.bindInputEvents();\n this.setValue();\n };\n DateTimePicker.prototype.setValue = function () {\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n if (!isNullOrUndefined(value)) {\n var dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown touchstart', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.focusOut, this);\n EventHandler.add(this.inputElement, 'focus', this.focusIn, this);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.keyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n EventHandler.remove(this.inputElement, 'blur', this.focusOut);\n EventHandler.remove(this.inputElement, 'focus', this.focusIn);\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });\n if (this.isNullOrEmpty(this.format)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.format;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (e.currentTarget === this.timeIcon) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n _super.prototype.hide.call(this);\n if (this.isTimePopupOpen()) {\n this.closePopup();\n }\n else {\n if (!Browser.isDevice) {\n this.inputElement.focus();\n }\n this.popupCreation('time');\n }\n }\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n };\n DateTimePicker.prototype.dateHandler = function (e) {\n if (this.getModuleName() === 'datetimepicker') {\n if (e.currentTarget === this.inputWrapper.buttons[0]) {\n e.preventDefault();\n }\n }\n if (this.enabled && !this.readonly) {\n this.closePopup();\n if (!isNullOrUndefined(this.popupWrapper)) {\n this.popupCreation('date');\n }\n }\n };\n DateTimePicker.prototype.show = function (type) {\n if (type === 'time') {\n if (this.isDatePopupOpen()) {\n this.hide();\n }\n this.popupCreation('time');\n }\n else {\n if (this.isTimePopupOpen()) {\n this.hide();\n }\n _super.prototype.show.call(this);\n this.popupCreation('date');\n }\n this.trigger('open');\n };\n DateTimePicker.prototype.toggle = function () {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this);\n this.popupCreation('time');\n }\n else if (this.isTimePopupOpen()) {\n this.hide();\n _super.prototype.show.call(this);\n this.popupCreation('date');\n }\n else {\n this.show();\n }\n };\n DateTimePicker.prototype.listCreation = function () {\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n this.globalize.parseDate(this.inputElement.value, { format: this.cldrDateTimeFormat(), type: 'datetime' }) :\n new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n DateTimePicker.prototype.popupCreation = function (type) {\n if (type === 'date') {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });\n this.trigger('open', this.popupWrapper);\n }\n else {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.classList.add(this.cssClass);\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup();\n this.popupObject.refreshPosition(this.inputElement);\n }\n };\n DateTimePicker.prototype.openPopup = function () {\n this.trigger('open');\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION,\n };\n this.popupObject.show(new Animation(openAnimation));\n addClass([this.inputWrapper.container], [ICONANIMATION]);\n attributes(this.inputElement, { 'aria-expanded': 'true' });\n EventHandler.add(document, 'mousedown touchstart', this.documentClickHandler, this);\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if (!(closest(target, '#' + (this.popupObject && this.popupObject.element.id))) && target !== this.inputElement\n && target !== this.timeIcon && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide();\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.TimeKeyActionHandle.bind(_this), keyConfigs: _this.timekeyConfigure, eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = null;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setTimeHover(currentLi, HOVER);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function () {\n if (+this.previousDateTime !== +this.value) {\n _super.prototype.changeEvent.call(this);\n if (!Browser.isDevice) {\n this.inputElement.focus();\n }\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n }\n };\n DateTimePicker.prototype.updateValue = function () {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs.value = this.value;\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupHeight = this.getPopupHeight();\n var popupElement;\n popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n var nextEle = popupElement.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : popupElement.offsetTop;\n var liHeight = popupElement.getBoundingClientRect().height;\n if ((height + popupElement.offsetTop) > popupHeight) {\n this.dateTimeWrapper.scrollTop = nextEle ? (height - (popupHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n this.inputElement.value = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n }\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide();\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n var value = li.getAttribute('data-value');\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue();\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value;\n value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value;\n value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function () {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup();\n removeClass([document.body], OVERFLOW);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n this.trigger('close');\n };\n DateTimePicker.prototype.closePopup = function () {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n if (Browser.isDevice) {\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ;\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function () {\n var attributes = ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n var readonly = !isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'placeholder':\n this.placeholder = this.inputElement.getAttribute(prop);\n break;\n case 'min':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, true);\n }\n break;\n case 'disabled':\n var enabled = isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ enabled: enabled }, true);\n break;\n case 'max':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, true);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text') {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n var dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.format) ? this.format : this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd'\n });\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n this.activeIndex = 0;\n nextItemValue = this.timeCollections[0];\n }\n else if (event.action === 'end') {\n this.activeIndex = listCount - 1;\n nextItemValue = this.timeCollections[listCount - 1];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(new Date(nextItemValue));\n }\n this.isNavigate = true;\n this.setTimeHover(this.selectedElement, NAVIGATION);\n this.setTimeActiveDescendant();\n if (this.isTimePopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setTimeScrollPosition();\n }\n };\n DateTimePicker.prototype.TimeKeyActionHandle = function (event) {\n if (this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'up':\n case 'down':\n case 'home':\n case 'end':\n this.timeKeyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue();\n }\n else {\n this.updateValue();\n }\n this.hide();\n addClass([this.inputWrapper.container], INPUTFOCUS);\n this.isNavigate = false;\n break;\n case 'escape':\n this.hide();\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n DateTimePicker.prototype.inputKeyAction = function (event) {\n switch (event.action) {\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n this.toggle();\n break;\n }\n };\n DateTimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'value':\n newProp.value = this.validateValue(newProp.value);\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger();\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.dateTimeWrapper) {\n addClass([this.dateTimeWrapper], [newProp.cssClass]);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.setValue();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n break;\n case 'strictMode':\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n this.hide();\n }\n };\n /**\n * To get component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\nexport { DateTimePicker };\n","/**\n * Save class provide method to save file\n * ```typescript\n * let blob : Blob = new Blob([''], { type: 'text/plain' });\n * Save.save('fileName.txt',blob);\n */\nvar Save = /** @class */ (function () {\n /**\n * Initialize new instance of {save}\n */\n function Save() {\n // tslint:disable\n }\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n * @param {boolean} isMicrosoftBrowser- specify whether microsoft browser or not\n * @returns {void}\n */\n Save.save = function (fileName, buffer) {\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('ArgumentException: fileName cannot be undefined, null or empty');\n }\n var extension = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);\n var mimeType = this.getMimeType(extension);\n if (mimeType !== '') {\n buffer = new Blob([buffer], { type: mimeType });\n }\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(buffer, fileName);\n }\n else {\n var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n this.saveInternal(fileName, extension, buffer, downloadLink, 'download' in downloadLink);\n }\n };\n Save.saveInternal = function (fileName, extension, buffer, downloadLink, hasDownloadAttribute) {\n if (hasDownloadAttribute) {\n downloadLink.download = fileName;\n var dataUrl_1 = window.URL.createObjectURL(buffer);\n downloadLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n downloadLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n dataUrl_1 = undefined;\n });\n }\n else {\n if (extension !== 'docx' && extension !== 'xlsx') {\n var url = window.URL.createObjectURL(buffer);\n var isPopupBlocked = window.open(url, '_blank');\n if (!isPopupBlocked) {\n window.location.href = url;\n }\n }\n else {\n var reader_1 = new FileReader();\n reader_1.onloadend = function () {\n var isPopupBlocked = window.open(reader_1.result, '_blank');\n if (!isPopupBlocked) {\n window.location.href = reader_1.result;\n }\n };\n reader_1.readAsDataURL(buffer);\n }\n }\n };\n /**\n *\n * @param {string} extension - get mime type of the specified extension\n * @private\n */\n Save.getMimeType = function (extension) {\n var mimeType = '';\n switch (extension) {\n case 'html':\n mimeType = 'text/html';\n break;\n case 'pdf':\n mimeType = 'application/pdf';\n break;\n case 'docx':\n mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';\n break;\n case 'xlsx':\n mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';\n break;\n case 'txt':\n mimeType = 'text/plain';\n break;\n }\n return mimeType;\n };\n return Save;\n}());\nexport { Save };\n","import { Encoding, validateNullOrUndefined } from './encoding';\nimport { Save } from './save';\n/**\n * StreamWriter class contains the implementation for writing characters to a file in a particular encoding\n * ```typescript\n * let writer = new StreamWriter();\n * writer.write('Hello World');\n * writer.save('Sample.txt');\n * writer.dispose();\n * ```\n */\nvar StreamWriter = /** @class */ (function () {\n /**\n * Initializes a new instance of the StreamWriter class by using the specified encoding.\n * @param {Encoding} encoding?- The character encoding to use.\n */\n function StreamWriter(encoding) {\n this.bufferBlob = new Blob(['']);\n this.bufferText = '';\n this.init(encoding);\n Save.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n }\n Object.defineProperty(StreamWriter.prototype, \"buffer\", {\n /**\n * Gets the content written to the StreamWriter as Blob.\n * @returns Blob\n */\n get: function () {\n this.flush();\n return this.bufferBlob;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(StreamWriter.prototype, \"encoding\", {\n /**\n * Gets the encoding.\n * @returns Encoding\n */\n get: function () {\n return this.enc;\n },\n enumerable: true,\n configurable: true\n });\n StreamWriter.prototype.init = function (encoding) {\n if (encoding === null || encoding === undefined) {\n this.enc = new Encoding(false);\n this.enc.type = 'Utf8';\n }\n else {\n this.enc = encoding;\n this.setBomByte();\n }\n };\n /**\n * Private method to set Byte Order Mark(BOM) value based on EncodingType\n */\n StreamWriter.prototype.setBomByte = function () {\n if (this.encoding.includeBom) {\n switch (this.encoding.type) {\n case 'Unicode':\n var arrayUnicode = new ArrayBuffer(2);\n var uint8 = new Uint8Array(arrayUnicode);\n uint8[0] = 255;\n uint8[1] = 254;\n this.bufferBlob = new Blob([arrayUnicode]);\n break;\n case 'Utf8':\n var arrayUtf8 = new ArrayBuffer(3);\n var utf8 = new Uint8Array(arrayUtf8);\n utf8[0] = 239;\n utf8[1] = 187;\n utf8[2] = 191;\n this.bufferBlob = new Blob([arrayUtf8]);\n break;\n default:\n this.bufferBlob = new Blob(['']);\n break;\n }\n }\n };\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName - The file name to save\n * @returns {void}\n */\n StreamWriter.prototype.save = function (fileName) {\n if (this.bufferText !== '') {\n this.flush();\n }\n Save.save(fileName, this.buffer);\n };\n /**\n * Writes the specified string.\n * @param {string} value - The string to write. If value is null or undefined, nothing is written.\n * @returns {void}\n */\n StreamWriter.prototype.write = function (value) {\n if (this.encoding === undefined) {\n throw new Error('Object Disposed Exception: current writer is disposed');\n }\n validateNullOrUndefined(value, 'string');\n this.bufferText += value;\n if (this.bufferText.length >= 10240) {\n this.flush();\n }\n };\n StreamWriter.prototype.flush = function () {\n if (this.bufferText === undefined || this.bufferText === null || this.bufferText.length === 0) {\n return;\n }\n var bufferArray = this.encoding.getBytes(this.bufferText, 0, this.bufferText.length);\n this.bufferText = '';\n this.bufferBlob = new Blob([this.bufferBlob, bufferArray]);\n };\n /**\n * Writes the specified string followed by a line terminator\n * @param {string} value - The string to write. If value is null or undefined, nothing is written\n * @returns {void}\n */\n StreamWriter.prototype.writeLine = function (value) {\n if (this.encoding === undefined) {\n throw new Error('Object Disposed Exception: current writer is disposed');\n }\n validateNullOrUndefined(value, 'string');\n this.bufferText = this.bufferText + value + '\\r\\n';\n if (this.bufferText.length >= 10240) {\n this.flush();\n }\n };\n /**\n * Releases the resources used by the StreamWriter\n * @returns {void}\n */\n StreamWriter.prototype.destroy = function () {\n this.bufferBlob = undefined;\n this.bufferText = undefined;\n if (this.enc instanceof Encoding) {\n this.enc.destroy();\n }\n this.enc = undefined;\n };\n return StreamWriter;\n}());\nexport { StreamWriter };\n","import { Encoding } from '@syncfusion/ej2-file-utils';\n/**\n * array literal codes\n */\nvar arrLiteralCodes = new Int16Array(286);\nvar arrLiteralLengths = new Uint8Array(286);\nvar arrDistanceCodes = new Int16Array(30);\nvar arrDistanceLengths = new Uint8Array(30);\n/**\n * represent compression stream writer\n * ```typescript\n * let compressedWriter = new CompressedStreamWriter();\n * let text: string = 'Hello world!!!';\n * compressedWriter.write(text, 0, text.length);\n * compressedWriter.close();\n * ```\n */\nvar CompressedStreamWriter = /** @class */ (function () {\n /**\n * Initializes compressor and writes ZLib header if needed.\n * @param {boolean} noWrap - optional if true, ZLib header and checksum will not be written.\n */\n function CompressedStreamWriter(noWrap) {\n this.pendingBuffer = new Uint8Array(1 << 16);\n this.pendingBufLength = 0;\n this.pendingBufCache = 0;\n this.pendingBufBitsInCache = 0;\n this.bufferPosition = 0;\n this.extraBits = 0;\n this.currentHash = 0;\n this.matchStart = 0;\n this.matchLength = 0;\n this.matchPrevAvail = false;\n this.blockStart = 0;\n this.stringStart = 0;\n this.lookAhead = 0;\n this.totalBytesIn = 0;\n this.inputOffset = 0;\n this.inputEnd = 0;\n this.windowSize = 1 << 15;\n this.windowMask = this.windowSize - 1;\n this.hashSize = 1 << 15;\n this.hashMask = this.hashSize - 1;\n this.hashShift = Math.floor((15 + 3 - 1) / 3);\n this.maxDist = this.windowSize - 262;\n this.checkSum = 1;\n this.noWrap = false;\n this.treeLiteral = new CompressorHuffmanTree(this, 286, 257, 15);\n this.treeDistances = new CompressorHuffmanTree(this, 30, 1, 15);\n this.treeCodeLengths = new CompressorHuffmanTree(this, 19, 4, 7);\n this.arrDistances = new Uint16Array((1 << 14));\n this.arrLiterals = new Uint8Array((1 << 14));\n this.stream = [];\n this.dataWindow = new Uint8Array(2 * this.windowSize);\n this.hashHead = new Int16Array(this.hashSize);\n this.hashPrevious = new Int16Array(this.windowSize);\n this.blockStart = this.stringStart = 1;\n this.noWrap = noWrap;\n if (!noWrap) {\n this.writeZLibHeader();\n }\n }\n Object.defineProperty(CompressedStreamWriter.prototype, \"compressedData\", {\n /**\n * get compressed data\n */\n get: function () {\n return this.stream;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CompressedStreamWriter.prototype, \"getCompressedString\", {\n get: function () {\n var compressedString = '';\n if (this.stream !== undefined) {\n for (var i = 0; i < this.stream.length; i++) {\n compressedString += String.fromCharCode.apply(null, this.stream[i]);\n }\n }\n return compressedString;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Compresses data and writes it to the stream.\n * @param {Uint8Array} data - data to compress\n * @param {number} offset - offset in data\n * @param {number} length - length of the data\n * @returns {void}\n */\n CompressedStreamWriter.prototype.write = function (data, offset, length) {\n if (data === undefined || data === null) {\n throw new Error('ArgumentException: data cannot null or undefined');\n }\n var end = offset + length;\n if (0 > offset || offset > end || end > data.length) {\n throw new Error('ArgumentOutOfRangeException: Offset or length is incorrect');\n }\n if (typeof data === 'string') {\n var encode = new Encoding(false);\n encode.type = 'Utf8';\n data = new Uint8Array(encode.getBytes(data, 0, data.length));\n end = offset + data.length;\n }\n this.inputBuffer = data;\n this.inputOffset = offset;\n this.inputEnd = end;\n if (!this.noWrap) {\n this.checkSum = ChecksumCalculator.checksumUpdate(this.checkSum, this.inputBuffer, this.inputOffset, end);\n }\n while (!(this.inputEnd === this.inputOffset) || !(this.pendingBufLength === 0)) {\n this.pendingBufferFlush();\n this.compressData(false);\n }\n };\n /**\n * write ZLib header to the compressed data\n * @return {void}\n */\n CompressedStreamWriter.prototype.writeZLibHeader = function () {\n /* Initialize header.*/\n var headerDate = (8 + (7 << 4)) << 8;\n /* Save compression level.*/\n headerDate |= ((5 >> 2) & 3) << 6;\n /* Align header.*/\n headerDate += 31 - (headerDate % 31);\n /* Write header to stream.*/\n this.pendingBufferWriteShortBytes(headerDate);\n };\n /**\n * Write Most Significant Bytes in to stream\n * @param {number} s - check sum value\n */\n CompressedStreamWriter.prototype.pendingBufferWriteShortBytes = function (s) {\n this.pendingBuffer[this.pendingBufLength++] = s >> 8;\n this.pendingBuffer[this.pendingBufLength++] = s;\n };\n CompressedStreamWriter.prototype.compressData = function (finish) {\n var success;\n do {\n this.fillWindow();\n var canFlush = (finish && this.inputEnd === this.inputOffset);\n success = this.compressSlow(canFlush, finish);\n } while (this.pendingBufLength === 0 && success);\n return success;\n };\n CompressedStreamWriter.prototype.compressSlow = function (flush, finish) {\n if (this.lookAhead < 262 && !flush) {\n return false;\n }\n while (this.lookAhead >= 262 || flush) {\n if (this.lookAhead === 0) {\n return this.lookAheadCompleted(finish);\n }\n if (this.stringStart >= 2 * this.windowSize - 262) {\n this.slideWindow();\n }\n var prevMatch = this.matchStart;\n var prevLen = this.matchLength;\n if (this.lookAhead >= 3) {\n this.discardMatch();\n }\n if (prevLen >= 3 && this.matchLength <= prevLen) {\n prevLen = this.matchPreviousBest(prevMatch, prevLen);\n }\n else {\n this.matchPreviousAvailable();\n }\n if (this.bufferPosition >= (1 << 14)) {\n return this.huffmanIsFull(finish);\n }\n }\n return true;\n };\n CompressedStreamWriter.prototype.discardMatch = function () {\n var hashHead = this.insertString();\n if (hashHead !== 0 && this.stringStart - hashHead <= this.maxDist && this.findLongestMatch(hashHead)) {\n if (this.matchLength <= 5 && (this.matchLength === 3 && this.stringStart - this.matchStart > 4096)) {\n this.matchLength = 3 - 1;\n }\n }\n };\n CompressedStreamWriter.prototype.matchPreviousAvailable = function () {\n if (this.matchPrevAvail) {\n this.huffmanTallyLit(this.dataWindow[this.stringStart - 1] & 0xff);\n }\n this.matchPrevAvail = true;\n this.stringStart++;\n this.lookAhead--;\n };\n CompressedStreamWriter.prototype.matchPreviousBest = function (prevMatch, prevLen) {\n this.huffmanTallyDist(this.stringStart - 1 - prevMatch, prevLen);\n prevLen -= 2;\n do {\n this.stringStart++;\n this.lookAhead--;\n if (this.lookAhead >= 3) {\n this.insertString();\n }\n } while (--prevLen > 0);\n this.stringStart++;\n this.lookAhead--;\n this.matchPrevAvail = false;\n this.matchLength = 3 - 1;\n return prevLen;\n };\n CompressedStreamWriter.prototype.lookAheadCompleted = function (finish) {\n if (this.matchPrevAvail) {\n this.huffmanTallyLit(this.dataWindow[this.stringStart - 1] & 0xff);\n }\n this.matchPrevAvail = false;\n this.huffmanFlushBlock(this.dataWindow, this.blockStart, this.stringStart - this.blockStart, finish);\n this.blockStart = this.stringStart;\n return false;\n };\n CompressedStreamWriter.prototype.huffmanIsFull = function (finish) {\n var len = this.stringStart - this.blockStart;\n if (this.matchPrevAvail) {\n len--;\n }\n var lastBlock = (finish && this.lookAhead === 0 && !this.matchPrevAvail);\n this.huffmanFlushBlock(this.dataWindow, this.blockStart, len, lastBlock);\n this.blockStart += len;\n return !lastBlock;\n };\n CompressedStreamWriter.prototype.fillWindow = function () {\n if (this.stringStart >= this.windowSize + this.maxDist) {\n this.slideWindow();\n }\n while (this.lookAhead < 262 && this.inputOffset < this.inputEnd) {\n var more = 2 * this.windowSize - this.lookAhead - this.stringStart;\n if (more > this.inputEnd - this.inputOffset) {\n more = this.inputEnd - this.inputOffset;\n }\n this.dataWindow.set(this.inputBuffer.subarray(this.inputOffset, this.inputOffset + more), this.stringStart + this.lookAhead);\n this.inputOffset += more;\n this.totalBytesIn += more;\n this.lookAhead += more;\n }\n if (this.lookAhead >= 3) {\n this.updateHash();\n }\n };\n CompressedStreamWriter.prototype.slideWindow = function () {\n this.dataWindow.set(this.dataWindow.subarray(this.windowSize, this.windowSize + this.windowSize), 0);\n this.matchStart -= this.windowSize;\n this.stringStart -= this.windowSize;\n this.blockStart -= this.windowSize;\n for (var i = 0; i < this.hashSize; ++i) {\n var m = this.hashHead[i] & 0xffff;\n this.hashHead[i] = (((m >= this.windowSize) ? (m - this.windowSize) : 0));\n }\n for (var i = 0; i < this.windowSize; i++) {\n var m = this.hashPrevious[i] & 0xffff;\n this.hashPrevious[i] = ((m >= this.windowSize) ? (m - this.windowSize) : 0);\n }\n };\n CompressedStreamWriter.prototype.insertString = function () {\n var match;\n var hash = ((this.currentHash << this.hashShift) ^ this.dataWindow[this.stringStart + (3 - 1)]) & this.hashMask;\n this.hashPrevious[this.stringStart & this.windowMask] = match = this.hashHead[hash];\n this.hashHead[hash] = this.stringStart;\n this.currentHash = hash;\n return match & 0xffff;\n };\n CompressedStreamWriter.prototype.findLongestMatch = function (curMatch) {\n var chainLen = 4096;\n var niceLen = 258;\n var scan = this.stringStart;\n var match;\n var bestEnd = this.stringStart + this.matchLength;\n var bestLength = Math.max(this.matchLength, 3 - 1);\n var limit = Math.max(this.stringStart - this.maxDist, 0);\n var stringEnd = this.stringStart + 258 - 1;\n var scanEnd1 = this.dataWindow[bestEnd - 1];\n var scanEnd = this.dataWindow[bestEnd];\n var data = this.dataWindow;\n if (bestLength >= 32) {\n chainLen >>= 2;\n }\n if (niceLen > this.lookAhead) {\n niceLen = this.lookAhead;\n }\n do {\n if (data[curMatch + bestLength] !== scanEnd ||\n data[curMatch + bestLength - 1] !== scanEnd1 ||\n data[curMatch] !== data[scan] ||\n data[curMatch + 1] !== data[scan + 1]) {\n continue;\n }\n match = curMatch + 2;\n scan += 2;\n /* tslint:disable */\n while (data[++scan] === data[++match] && data[++scan] === data[++match] &&\n data[++scan] === data[++match] && data[++scan] === data[++match] &&\n data[++scan] === data[++match] && data[++scan] === data[++match] &&\n data[++scan] === data[++match] && data[++scan] === data[++match] && scan < stringEnd) {\n /* tslint:disable */\n }\n if (scan > bestEnd) {\n this.matchStart = curMatch;\n bestEnd = scan;\n bestLength = scan - this.stringStart;\n if (bestLength >= niceLen) {\n break;\n }\n scanEnd1 = data[bestEnd - 1];\n scanEnd = data[bestEnd];\n }\n scan = this.stringStart;\n } while ((curMatch = (this.hashPrevious[curMatch & this.windowMask] & 0xffff)) > limit && --chainLen !== 0);\n this.matchLength = Math.min(bestLength, this.lookAhead);\n return this.matchLength >= 3;\n };\n CompressedStreamWriter.prototype.updateHash = function () {\n this.currentHash = (this.dataWindow[this.stringStart] << this.hashShift) ^ this.dataWindow[this.stringStart + 1];\n };\n CompressedStreamWriter.prototype.huffmanTallyLit = function (literal) {\n this.arrDistances[this.bufferPosition] = 0;\n this.arrLiterals[this.bufferPosition++] = literal;\n this.treeLiteral.codeFrequencies[literal]++;\n return this.bufferPosition >= (1 << 14);\n };\n CompressedStreamWriter.prototype.huffmanTallyDist = function (dist, len) {\n this.arrDistances[this.bufferPosition] = dist;\n this.arrLiterals[this.bufferPosition++] = (len - 3);\n var lc = this.huffmanLengthCode(len - 3);\n this.treeLiteral.codeFrequencies[lc]++;\n if (lc >= 265 && lc < 285) {\n this.extraBits += Math.floor((lc - 261) / 4);\n }\n var dc = this.huffmanDistanceCode(dist - 1);\n this.treeDistances.codeFrequencies[dc]++;\n if (dc >= 4) {\n this.extraBits += Math.floor((dc / 2 - 1));\n }\n return this.bufferPosition >= (1 << 14);\n };\n CompressedStreamWriter.prototype.huffmanFlushBlock = function (stored, storedOffset, storedLength, lastBlock) {\n this.treeLiteral.codeFrequencies[256]++;\n this.treeLiteral.buildTree();\n this.treeDistances.buildTree();\n this.treeLiteral.calculateBLFreq(this.treeCodeLengths);\n this.treeDistances.calculateBLFreq(this.treeCodeLengths);\n this.treeCodeLengths.buildTree();\n var blTreeCodes = 4;\n for (var i = 18; i > blTreeCodes; i--) {\n if (this.treeCodeLengths.codeLengths[CompressorHuffmanTree.huffCodeLengthOrders[i]] > 0) {\n blTreeCodes = i + 1;\n }\n }\n var opt_len = 14 + blTreeCodes * 3 + this.treeCodeLengths.getEncodedLength() +\n this.treeLiteral.getEncodedLength() + this.treeDistances.getEncodedLength() + this.extraBits;\n var static_len = this.extraBits;\n for (var i = 0; i < 286; i++) {\n static_len += this.treeLiteral.codeFrequencies[i] * arrLiteralLengths[i];\n }\n for (var i = 0; i < 30; i++) {\n static_len += this.treeDistances.codeFrequencies[i] * arrDistanceLengths[i];\n }\n if (opt_len >= static_len) {\n // Force static trees.\n opt_len = static_len;\n }\n if (storedOffset >= 0 && storedLength + 4 < opt_len >> 3) {\n this.huffmanFlushStoredBlock(stored, storedOffset, storedLength, lastBlock);\n }\n else if (opt_len == static_len) {\n // Encode with static tree.\n this.pendingBufferWriteBits((1 << 1) + (lastBlock ? 1 : 0), 3);\n this.treeLiteral.setStaticCodes(arrLiteralCodes, arrLiteralLengths);\n this.treeDistances.setStaticCodes(arrDistanceCodes, arrDistanceLengths);\n this.huffmanCompressBlock();\n this.huffmanReset();\n }\n else {\n this.pendingBufferWriteBits((2 << 1) + (lastBlock ? 1 : 0), 3);\n this.huffmanSendAllTrees(blTreeCodes);\n this.huffmanCompressBlock();\n this.huffmanReset();\n }\n };\n CompressedStreamWriter.prototype.huffmanFlushStoredBlock = function (stored, storedOffset, storedLength, lastBlock) {\n this.pendingBufferWriteBits((0 << 1) + (lastBlock ? 1 : 0), 3);\n this.pendingBufferAlignToByte();\n this.pendingBufferWriteShort(storedLength);\n this.pendingBufferWriteShort(~storedLength);\n this.pendingBufferWriteByteBlock(stored, storedOffset, storedLength);\n this.huffmanReset();\n };\n CompressedStreamWriter.prototype.huffmanLengthCode = function (len) {\n if (len === 255) {\n return 285;\n }\n var code = 257;\n while (len >= 8) {\n code += 4;\n len >>= 1;\n }\n return code + len;\n };\n CompressedStreamWriter.prototype.huffmanDistanceCode = function (distance) {\n var code = 0;\n while (distance >= 4) {\n code += 2;\n distance >>= 1;\n }\n return code + distance;\n };\n CompressedStreamWriter.prototype.huffmanSendAllTrees = function (blTreeCodes) {\n this.treeCodeLengths.buildCodes();\n this.treeLiteral.buildCodes();\n this.treeDistances.buildCodes();\n this.pendingBufferWriteBits(this.treeLiteral.treeLength - 257, 5);\n this.pendingBufferWriteBits(this.treeDistances.treeLength - 1, 5);\n this.pendingBufferWriteBits(blTreeCodes - 4, 4);\n for (var rank = 0; rank < blTreeCodes; rank++) {\n this.pendingBufferWriteBits(this.treeCodeLengths.codeLengths[CompressorHuffmanTree.huffCodeLengthOrders[rank]], 3);\n }\n this.treeLiteral.writeTree(this.treeCodeLengths);\n this.treeDistances.writeTree(this.treeCodeLengths);\n };\n CompressedStreamWriter.prototype.huffmanReset = function () {\n this.bufferPosition = 0;\n this.extraBits = 0;\n this.treeLiteral.reset();\n this.treeDistances.reset();\n this.treeCodeLengths.reset();\n };\n CompressedStreamWriter.prototype.huffmanCompressBlock = function () {\n for (var i = 0; i < this.bufferPosition; i++) {\n var literalLen = this.arrLiterals[i] & 255;\n var dist = this.arrDistances[i];\n if (dist-- !== 0) {\n var lc = this.huffmanLengthCode(literalLen);\n this.treeLiteral.writeCodeToStream(lc);\n var bits = Math.floor((lc - 261) / 4);\n if (bits > 0 && bits <= 5) {\n this.pendingBufferWriteBits(literalLen & ((1 << bits) - 1), bits);\n }\n var dc = this.huffmanDistanceCode(dist);\n this.treeDistances.writeCodeToStream(dc);\n bits = Math.floor(dc / 2 - 1);\n if (bits > 0) {\n this.pendingBufferWriteBits(dist & ((1 << bits) - 1), bits);\n }\n }\n else {\n this.treeLiteral.writeCodeToStream(literalLen);\n }\n }\n this.treeLiteral.writeCodeToStream(256);\n };\n /**\n * write bits in to internal buffer\n * @param {number} b - source of bits\n * @param {number} count - count of bits to write\n */\n CompressedStreamWriter.prototype.pendingBufferWriteBits = function (b, count) {\n var uint = new Uint32Array(1);\n uint[0] = this.pendingBufCache | (b << this.pendingBufBitsInCache);\n this.pendingBufCache = uint[0];\n this.pendingBufBitsInCache += count;\n this.pendingBufferFlushBits();\n };\n CompressedStreamWriter.prototype.pendingBufferFlush = function (isClose) {\n this.pendingBufferFlushBits();\n if (this.pendingBufLength > 0) {\n var array = new Uint8Array(this.pendingBufLength);\n array.set(this.pendingBuffer.subarray(0, this.pendingBufLength), 0);\n this.stream.push(array);\n }\n this.pendingBufLength = 0;\n };\n CompressedStreamWriter.prototype.pendingBufferFlushBits = function () {\n var result = 0;\n while (this.pendingBufBitsInCache >= 8 && this.pendingBufLength < (1 << 16)) {\n this.pendingBuffer[this.pendingBufLength++] = this.pendingBufCache;\n this.pendingBufCache >>= 8;\n this.pendingBufBitsInCache -= 8;\n result++;\n }\n return result;\n };\n CompressedStreamWriter.prototype.pendingBufferWriteByteBlock = function (data, offset, length) {\n var array = data.subarray(offset, offset + length);\n this.pendingBuffer.set(array, this.pendingBufLength);\n this.pendingBufLength += length;\n };\n CompressedStreamWriter.prototype.pendingBufferWriteShort = function (s) {\n this.pendingBuffer[this.pendingBufLength++] = s;\n this.pendingBuffer[this.pendingBufLength++] = (s >> 8);\n };\n CompressedStreamWriter.prototype.pendingBufferAlignToByte = function () {\n if (this.pendingBufBitsInCache > 0) {\n this.pendingBuffer[this.pendingBufLength++] = this.pendingBufCache;\n }\n this.pendingBufCache = 0;\n this.pendingBufBitsInCache = 0;\n };\n /**\n * close the stream and write all pending buffer in to stream\n * @returns {void}\n */\n CompressedStreamWriter.prototype.close = function () {\n do {\n this.pendingBufferFlush(true);\n if (!this.compressData(true)) {\n this.pendingBufferFlush(true);\n this.pendingBufferAlignToByte();\n if (!this.noWrap) {\n this.pendingBufferWriteShortBytes(this.checkSum >> 16);\n this.pendingBufferWriteShortBytes(this.checkSum & 0xffff);\n }\n this.pendingBufferFlush(true);\n }\n } while (!(this.inputEnd === this.inputOffset) ||\n !(this.pendingBufLength === 0));\n };\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n CompressedStreamWriter.prototype.destroy = function () {\n this.stream = [];\n this.stream = undefined;\n this.pendingBuffer = undefined;\n this.treeLiteral = undefined;\n this.treeDistances = undefined;\n this.treeCodeLengths = undefined;\n this.arrLiterals = undefined;\n this.arrDistances = undefined;\n this.hashHead = undefined;\n this.hashPrevious = undefined;\n this.dataWindow = undefined;\n this.inputBuffer = undefined;\n this.pendingBufLength = undefined;\n this.pendingBufCache = undefined;\n this.pendingBufBitsInCache = undefined;\n this.bufferPosition = undefined;\n this.extraBits = undefined;\n this.currentHash = undefined;\n this.matchStart = undefined;\n this.matchLength = undefined;\n this.matchPrevAvail = undefined;\n this.blockStart = undefined;\n this.stringStart = undefined;\n this.lookAhead = undefined;\n this.totalBytesIn = undefined;\n this.inputOffset = undefined;\n this.inputEnd = undefined;\n this.windowSize = undefined;\n this.windowMask = undefined;\n this.hashSize = undefined;\n this.hashMask = undefined;\n this.hashShift = undefined;\n this.maxDist = undefined;\n this.checkSum = undefined;\n this.noWrap = undefined;\n };\n return CompressedStreamWriter;\n}());\nexport { CompressedStreamWriter };\n/**\n * represent the Huffman Tree\n */\nvar CompressorHuffmanTree = /** @class */ (function () {\n /**\n * Create new Huffman Tree\n * @param {CompressedStreamWriter} writer instance\n * @param {number} elementCount - element count\n * @param {number} minCodes - minimum count\n * @param {number} maxLength - maximum count\n */\n function CompressorHuffmanTree(writer, elementCount, minCodes, maxLength) {\n this.writer = writer;\n this.codeMinCount = minCodes;\n this.maxLength = maxLength;\n this.codeFrequency = new Uint16Array(elementCount);\n this.lengthCount = new Int32Array(maxLength);\n }\n Object.defineProperty(CompressorHuffmanTree.prototype, \"treeLength\", {\n get: function () {\n return this.codeCount;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CompressorHuffmanTree.prototype, \"codeLengths\", {\n get: function () {\n return this.codeLength;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(CompressorHuffmanTree.prototype, \"codeFrequencies\", {\n get: function () {\n return this.codeFrequency;\n },\n enumerable: true,\n configurable: true\n });\n CompressorHuffmanTree.prototype.setStaticCodes = function (codes, lengths) {\n var temp = new Int16Array(codes.length);\n temp.set(codes, 0);\n this.codes = temp;\n var lengthTemp = new Uint8Array(lengths.length);\n lengthTemp.set(lengths, 0);\n this.codeLength = lengthTemp;\n };\n /**\n * reset all code data in tree\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.reset = function () {\n for (var i = 0; i < this.codeFrequency.length; i++) {\n this.codeFrequency[i] = 0;\n }\n this.codes = undefined;\n this.codeLength = undefined;\n };\n /**\n * write code to the compressor output stream\n * @param {number} code - code to be written\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.writeCodeToStream = function (code) {\n this.writer.pendingBufferWriteBits(this.codes[code] & 0xffff, this.codeLength[code]);\n };\n /**\n * calculate code from their frequencies\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.buildCodes = function () {\n var nextCode = new Int32Array(this.maxLength);\n this.codes = new Int16Array(this.codeCount);\n var code = 0;\n for (var bitsCount = 0; bitsCount < this.maxLength; bitsCount++) {\n nextCode[bitsCount] = code;\n code += this.lengthCount[bitsCount] << (15 - bitsCount);\n }\n for (var i = 0; i < this.codeCount; i++) {\n var bits = this.codeLength[i];\n if (bits > 0) {\n this.codes[i] = CompressorHuffmanTree.bitReverse(nextCode[bits - 1]);\n nextCode[bits - 1] += 1 << (16 - bits);\n }\n }\n };\n CompressorHuffmanTree.bitReverse = function (value) {\n return (CompressorHuffmanTree.reverseBits[value & 15] << 12\n | CompressorHuffmanTree.reverseBits[(value >> 4) & 15] << 8\n | CompressorHuffmanTree.reverseBits[(value >> 8) & 15] << 4\n | CompressorHuffmanTree.reverseBits[value >> 12]);\n };\n /**\n * calculate length of compressed data\n * @returns {number}\n */\n CompressorHuffmanTree.prototype.getEncodedLength = function () {\n var len = 0;\n for (var i = 0; i < this.codeFrequency.length; i++) {\n len += this.codeFrequency[i] * this.codeLength[i];\n }\n return len;\n };\n /**\n * calculate code frequencies\n * @param {CompressorHuffmanTree} blTree\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.calculateBLFreq = function (blTree) {\n var maxCount;\n var minCount;\n var count;\n var curLen = -1;\n var i = 0;\n while (i < this.codeCount) {\n count = 1;\n var nextLen = this.codeLength[i];\n if (nextLen === 0) {\n maxCount = 138;\n minCount = 3;\n }\n else {\n maxCount = 6;\n minCount = 3;\n if (curLen !== nextLen) {\n blTree.codeFrequency[nextLen]++;\n count = 0;\n }\n }\n curLen = nextLen;\n i++;\n while (i < this.codeCount && curLen === this.codeLength[i]) {\n i++;\n if (++count >= maxCount) {\n break;\n }\n }\n if (count < minCount) {\n blTree.codeFrequency[curLen] += count;\n }\n else if (curLen !== 0) {\n blTree.codeFrequency[16]++;\n }\n else if (count <= 10) {\n blTree.codeFrequency[17]++;\n }\n else {\n blTree.codeFrequency[18]++;\n }\n }\n };\n /**\n * @param {CompressorHuffmanTree} blTree - write tree to output stream\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.writeTree = function (blTree) {\n var maxRepeatCount;\n var minRepeatCount;\n var currentRepeatCount;\n var currentCodeLength = -1;\n var i = 0;\n while (i < this.codeCount) {\n currentRepeatCount = 1;\n var nextLen = this.codeLength[i];\n if (nextLen === 0) {\n maxRepeatCount = 138;\n minRepeatCount = 3;\n }\n else {\n maxRepeatCount = 6;\n minRepeatCount = 3;\n if (currentCodeLength !== nextLen) {\n blTree.writeCodeToStream(nextLen);\n currentRepeatCount = 0;\n }\n }\n currentCodeLength = nextLen;\n i++;\n while (i < this.codeCount && currentCodeLength === this.codeLength[i]) {\n i++;\n if (++currentRepeatCount >= maxRepeatCount) {\n break;\n }\n }\n if (currentRepeatCount < minRepeatCount) {\n while (currentRepeatCount-- > 0) {\n blTree.writeCodeToStream(currentCodeLength);\n }\n }\n else if (currentCodeLength !== 0) {\n blTree.writeCodeToStream(16);\n this.writer.pendingBufferWriteBits(currentRepeatCount - 3, 2);\n }\n else if (currentRepeatCount <= 10) {\n blTree.writeCodeToStream(17);\n this.writer.pendingBufferWriteBits(currentRepeatCount - 3, 3);\n }\n else {\n blTree.writeCodeToStream(18);\n this.writer.pendingBufferWriteBits(currentRepeatCount - 11, 7);\n }\n }\n };\n /**\n * Build huffman tree\n * @returns {void}\n */\n CompressorHuffmanTree.prototype.buildTree = function () {\n var codesCount = this.codeFrequency.length;\n var arrTree = new Int32Array(codesCount);\n var treeLength = 0;\n var maxCount = 0;\n for (var n = 0; n < codesCount; n++) {\n var freq = this.codeFrequency[n];\n if (freq !== 0) {\n var pos = treeLength++;\n var pPos = 0;\n while (pos > 0 && this.codeFrequency[arrTree[pPos = Math.floor((pos - 1) / 2)]] > freq) {\n arrTree[pos] = arrTree[pPos];\n pos = pPos;\n }\n arrTree[pos] = n;\n maxCount = n;\n }\n }\n while (treeLength < 2) {\n arrTree[treeLength++] =\n (maxCount < 2) ? ++maxCount : 0;\n }\n this.codeCount = Math.max(maxCount + 1, this.codeMinCount);\n var leafsCount = treeLength;\n var nodesCount = leafsCount;\n var child = new Int32Array(4 * treeLength - 2);\n var values = new Int32Array(2 * treeLength - 1);\n for (var i = 0; i < treeLength; i++) {\n var node = arrTree[i];\n var iIndex = 2 * i;\n child[iIndex] = node;\n child[iIndex + 1] = -1;\n values[i] = (this.codeFrequency[node] << 8);\n arrTree[i] = i;\n }\n this.constructHuffmanTree(arrTree, treeLength, values, nodesCount, child);\n this.buildLength(child);\n };\n CompressorHuffmanTree.prototype.constructHuffmanTree = function (arrTree, treeLength, values, nodesCount, child) {\n do {\n var first = arrTree[0];\n var last = arrTree[--treeLength];\n var lastVal = values[last];\n var pPos = 0;\n var path = 1;\n while (path < treeLength) {\n if (path + 1 < treeLength && values[arrTree[path]] > values[arrTree[path + 1]]) {\n path++;\n }\n arrTree[pPos] = arrTree[path];\n pPos = path;\n path = pPos * 2 + 1;\n }\n while ((path = pPos) > 0 && values[arrTree[pPos = Math.floor((path - 1) / 2)]] > lastVal) {\n arrTree[path] = arrTree[pPos];\n }\n arrTree[path] = last;\n var second = arrTree[0];\n last = nodesCount++;\n child[2 * last] = first;\n child[2 * last + 1] = second;\n var minDepth = Math.min(values[first] & 0xff, values[second] & 0xff);\n values[last] = lastVal = values[first] + values[second] - minDepth + 1;\n pPos = 0;\n path = 1;\n /* tslint:disable */\n while (path < treeLength) {\n if (path + 1 < treeLength && values[arrTree[path]] > values[arrTree[path + 1]]) {\n path++;\n }\n arrTree[pPos] = arrTree[path];\n pPos = path;\n path = pPos * 2 + 1;\n } /* tslint:disable */\n while ((path = pPos) > 0 && values[arrTree[pPos = Math.floor((path - 1) / 2)]] > lastVal) {\n arrTree[path] = arrTree[pPos];\n }\n arrTree[path] = last;\n } while (treeLength > 1);\n };\n CompressorHuffmanTree.prototype.buildLength = function (child) {\n this.codeLength = new Uint8Array(this.codeFrequency.length);\n var numNodes = Math.floor(child.length / 2);\n var numLeafs = Math.floor((numNodes + 1) / 2);\n var overflow = 0;\n for (var i = 0; i < this.maxLength; i++) {\n this.lengthCount[i] = 0;\n }\n overflow = this.calculateOptimalCodeLength(child, overflow, numNodes);\n if (overflow === 0) {\n return;\n }\n var iIncreasableLength = this.maxLength - 1;\n do {\n while (this.lengthCount[--iIncreasableLength] === 0) {\n /* tslint:disable */\n }\n do {\n this.lengthCount[iIncreasableLength]--;\n this.lengthCount[++iIncreasableLength]++;\n overflow -= (1 << (this.maxLength - 1 - iIncreasableLength));\n } while (overflow > 0 && iIncreasableLength < this.maxLength - 1);\n } while (overflow > 0);\n this.recreateTree(child, overflow, numLeafs);\n };\n CompressorHuffmanTree.prototype.recreateTree = function (child, overflow, numLeafs) {\n this.lengthCount[this.maxLength - 1] += overflow;\n this.lengthCount[this.maxLength - 2] -= overflow;\n var nodePtr = 2 * numLeafs;\n for (var bits = this.maxLength; bits !== 0; bits--) {\n var n = this.lengthCount[bits - 1];\n while (n > 0) {\n var childPtr = 2 * child[nodePtr++];\n if (child[childPtr + 1] === -1) {\n this.codeLength[child[childPtr]] = bits;\n n--;\n }\n }\n }\n };\n CompressorHuffmanTree.prototype.calculateOptimalCodeLength = function (child, overflow, numNodes) {\n var lengths = new Int32Array(numNodes);\n lengths[numNodes - 1] = 0;\n for (var i = numNodes - 1; i >= 0; i--) {\n var childIndex = 2 * i + 1;\n if (child[childIndex] !== -1) {\n var bitLength = lengths[i] + 1;\n if (bitLength > this.maxLength) {\n bitLength = this.maxLength;\n overflow++;\n }\n lengths[child[childIndex - 1]] = lengths[child[childIndex]] = bitLength;\n }\n else {\n var bitLength = lengths[i];\n this.lengthCount[bitLength - 1]++;\n this.codeLength[child[childIndex - 1]] = lengths[i];\n }\n }\n return overflow;\n };\n CompressorHuffmanTree.reverseBits = [0, 8, 4, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15];\n CompressorHuffmanTree.huffCodeLengthOrders = [16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15];\n return CompressorHuffmanTree;\n}());\nexport { CompressorHuffmanTree };\n/**\n * Checksum calculator, based on Adler32 algorithm.\n */\nvar ChecksumCalculator = /** @class */ (function () {\n function ChecksumCalculator() {\n }\n /**\n * Updates checksum by calculating checksum of the\n * given buffer and adding it to current value.\n * @param {number} checksum - current checksum.\n * @param {Uint8Array} buffer - data byte array.\n * @param {number} offset - offset in the buffer.\n * @param {number} length - length of data to be used from the stream.\n * @returns {number}\n */\n ChecksumCalculator.checksumUpdate = function (checksum, buffer, offset, length) {\n var uint = new Uint32Array(1);\n uint[0] = checksum;\n var checksum_uint = uint[0];\n var s1 = uint[0] = checksum_uint & 65535;\n var s2 = uint[0] = checksum_uint >> ChecksumCalculator.checkSumBitOffset;\n while (length > 0) {\n var steps = Math.min(length, ChecksumCalculator.checksumIterationCount);\n length -= steps;\n while (--steps >= 0) {\n s1 = s1 + (uint[0] = (buffer[offset++] & 255));\n s2 = s2 + s1;\n }\n s1 %= ChecksumCalculator.checksumBase;\n s2 %= ChecksumCalculator.checksumBase;\n }\n checksum_uint = (s2 << ChecksumCalculator.checkSumBitOffset) | s1;\n return checksum_uint;\n };\n ChecksumCalculator.checkSumBitOffset = 16;\n ChecksumCalculator.checksumBase = 65521;\n ChecksumCalculator.checksumIterationCount = 3800;\n return ChecksumCalculator;\n}());\nexport { ChecksumCalculator };\n/**\n * Huffman Tree literal calculation\n */\n(function () {\n var i = 0;\n while (i < 144) {\n arrLiteralCodes[i] = CompressorHuffmanTree.bitReverse((0x030 + i) << 8);\n arrLiteralLengths[i++] = 8;\n }\n while (i < 256) {\n arrLiteralCodes[i] = CompressorHuffmanTree.bitReverse((0x190 - 144 + i) << 7);\n arrLiteralLengths[i++] = 9;\n }\n while (i < 280) {\n arrLiteralCodes[i] = CompressorHuffmanTree.bitReverse((0x000 - 256 + i) << 9);\n arrLiteralLengths[i++] = 7;\n }\n while (i < 286) {\n arrLiteralCodes[i] = CompressorHuffmanTree.bitReverse((0x0c0 - 280 + i) << 8);\n arrLiteralLengths[i++] = 8;\n }\n for (i = 0; i < 30; i++) {\n arrDistanceCodes[i] = CompressorHuffmanTree.bitReverse(i << 11);\n arrDistanceLengths[i] = 5;\n }\n})();\n","import { CompressedStreamWriter } from './compression-writer';\nimport { Save } from '@syncfusion/ej2-file-utils';\nvar crc32Table = [];\n/**\n * class provide compression library\n * ```typescript\n * let archive = new ZipArchive();\n * archive.compressionLevel = 'Normal';\n * let archiveItem = new ZipArchiveItem(archive, 'directoryName\\fileName.txt');\n * archive.addItem(archiveItem);\n * archive.save(fileName.zip);\n * ```\n */\nvar ZipArchive = /** @class */ (function () {\n /**\n * constructor for creating ZipArchive instance\n */\n function ZipArchive() {\n this.files = [];\n this.level = 'Normal';\n Save.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n }\n Object.defineProperty(ZipArchive.prototype, \"compressionLevel\", {\n /**\n * gets compression level\n */\n get: function () {\n return this.level;\n },\n /**\n * sets compression level\n */\n set: function (level) {\n this.level = level;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ZipArchive.prototype, \"length\", {\n /**\n * gets items count\n */\n get: function () {\n if (this.files === undefined) {\n return 0;\n }\n return this.files.length;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * add new item to archive\n * @param {ZipArchiveItem} item - item to be added\n * @returns {void}\n */\n ZipArchive.prototype.addItem = function (item) {\n if (item === null || item === undefined) {\n throw new Error('ArgumentException: item cannot be null or undefined');\n }\n for (var i = 0; i < this.files.length; i++) {\n var file = this.files[i];\n if (file instanceof ZipArchiveItem) {\n if (file.name === item.name) {\n throw new Error('item with same name already exist');\n }\n }\n }\n this.files.push(item);\n };\n /**\n * add new directory to archive\n * @param directoryName directoryName to be created\n * @returns {void}\n */\n ZipArchive.prototype.addDirectory = function (directoryName) {\n if (directoryName === null || directoryName === undefined) {\n throw new Error('ArgumentException: string cannot be null or undefined');\n }\n if (directoryName.length === 0) {\n throw new Error('ArgumentException: string cannot be empty');\n }\n if (directoryName.slice(-1) !== '/') {\n directoryName += '/';\n }\n if (this.files.indexOf(directoryName) !== -1) {\n throw new Error('item with same name already exist');\n }\n this.files.push(directoryName);\n };\n /**\n * gets item at specified index\n * @param {number} index - item index\n * @returns {ZipArchiveItem}\n */\n ZipArchive.prototype.getItem = function (index) {\n if (index >= 0 && index < this.files.length) {\n return this.files[index];\n }\n return undefined;\n };\n /**\n * determines whether an element is in the collection\n * @param {string | ZipArchiveItem} item - item to search\n * @returns {boolean}\n */\n ZipArchive.prototype.contains = function (item) {\n return this.files.indexOf(item) !== -1 ? true : false;\n };\n /**\n * save archive with specified file name\n * @param {string} fileName save archive with specified file name\n * @returns {Promise
}\n */\n ZipArchive.prototype.save = function (fileName) {\n if (fileName === null || fileName === undefined || fileName.length === 0) {\n throw new Error('ArgumentException: fileName cannot be null or undefined');\n }\n if (this.files.length === 0) {\n throw new Error('InvalidOperation');\n }\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n zipArchive.saveInternal(fileName, false).then(function () {\n resolve(zipArchive);\n });\n });\n };\n /**\n * Save archive as blob\n * @return {Promise}\n */\n ZipArchive.prototype.saveAsBlob = function () {\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n zipArchive.saveInternal('', true).then(function (blob) {\n resolve(blob);\n });\n });\n };\n ZipArchive.prototype.saveInternal = function (fileName, skipFileSave) {\n var _this = this;\n var zipArchive = this;\n var promise;\n return promise = new Promise(function (resolve, reject) {\n var zipData = [];\n var dirLength = 0;\n for (var i = 0; i < zipArchive.files.length; i++) {\n var compressedObject = _this.getCompressedData(_this.files[i]);\n compressedObject.then(function (data) {\n dirLength = zipArchive.constructZippedObject(zipData, data, dirLength, data.isDirectory);\n if (zipData.length === zipArchive.files.length) {\n var blob = zipArchive.writeZippedContent(fileName, zipData, dirLength, skipFileSave);\n resolve(blob);\n }\n });\n }\n });\n };\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n ZipArchive.prototype.destroy = function () {\n if (this.files !== undefined && this.files.length > 0) {\n for (var i = 0; i < this.files.length; i++) {\n var file = this.files[i];\n if (file instanceof ZipArchiveItem) {\n file.destroy();\n }\n file = undefined;\n }\n this.files = [];\n }\n this.files = undefined;\n this.level = undefined;\n };\n ZipArchive.prototype.getCompressedData = function (item) {\n var zipArchive = this;\n var promise = new Promise(function (resolve, reject) {\n if (item instanceof ZipArchiveItem) {\n var reader_1 = new FileReader();\n reader_1.onload = function () {\n var input = new Uint8Array(reader_1.result);\n var data = {\n fileName: item.name, crc32Value: 0, compressedData: [],\n compressedSize: undefined, uncompressedDataSize: input.length, compressionType: undefined,\n isDirectory: false\n };\n if (zipArchive.level === 'Normal') {\n zipArchive.compressData(input, data, crc32Table);\n var length_1 = 0;\n for (var i = 0; i < data.compressedData.length; i++) {\n length_1 += data.compressedData[i].length;\n }\n data.compressedSize = length_1;\n data.compressionType = '\\x08\\x00'; //Deflated = 8\n }\n else {\n data.compressedSize = input.length;\n data.crc32Value = zipArchive.calculateCrc32Value(0, input, crc32Table);\n data.compressionType = '\\x00\\x00'; // Stored = 0\n data.compressedData.push(input);\n }\n resolve(data);\n };\n reader_1.readAsArrayBuffer(item.data);\n }\n else {\n var data = {\n fileName: item, crc32Value: 0, compressedData: '', compressedSize: 0, uncompressedDataSize: 0,\n compressionType: '\\x00\\x00', isDirectory: true\n };\n resolve(data);\n }\n });\n return promise;\n };\n ZipArchive.prototype.compressData = function (input, data, crc32Table) {\n var compressor = new CompressedStreamWriter(true);\n var currentIndex = 0;\n var nextIndex = 0;\n do {\n if (currentIndex >= input.length) {\n compressor.close();\n break;\n }\n nextIndex = Math.min(input.length, currentIndex + 16384);\n var subArray = input.subarray(currentIndex, nextIndex);\n data.crc32Value = this.calculateCrc32Value(data.crc32Value, subArray, crc32Table);\n compressor.write(subArray, 0, nextIndex - currentIndex);\n currentIndex = nextIndex;\n } while (currentIndex <= input.length);\n data.compressedData = compressor.compressedData;\n compressor.destroy();\n };\n ZipArchive.prototype.constructZippedObject = function (zipParts, data, dirLength, isDirectory) {\n var extFileAttr = 0;\n var date = new Date();\n if (isDirectory) {\n extFileAttr = extFileAttr | 0x00010; // directory flag\n }\n extFileAttr = extFileAttr | (0 & 0x3F);\n var header = this.writeHeader(data, date);\n var localHeader = 'PK\\x03\\x04' + header + data.fileName;\n var centralDir = this.writeCentralDirectory(data, header, dirLength, extFileAttr);\n zipParts.push({ localHeader: localHeader, centralDir: centralDir, compressedData: data });\n return dirLength + localHeader.length + data.compressedSize;\n };\n ZipArchive.prototype.writeHeader = function (data, date) {\n var zipHeader = '';\n zipHeader += '\\x0A\\x00' + '\\x00\\x00'; // version needed to extract & general purpose bit flag\n zipHeader += data.compressionType; // compression method Deflate=8,Stored=0\n zipHeader += this.getBytes(this.getModifiedTime(date), 2); // last modified Time\n zipHeader += this.getBytes(this.getModifiedDate(date), 2); // last modified date\n zipHeader += this.getBytes(data.crc32Value, 4); // crc-32 value\n zipHeader += this.getBytes(data.compressedSize, 4); // compressed file size\n zipHeader += this.getBytes(data.uncompressedDataSize, 4); // uncompressed file size\n zipHeader += this.getBytes(data.fileName.length, 2); // file name length\n zipHeader += this.getBytes(0, 2); // extra field length\n return zipHeader;\n };\n ZipArchive.prototype.writeZippedContent = function (fileName, zipData, localDirLen, skipFileSave) {\n var cenDirLen = 0;\n var buffer = [];\n for (var i = 0; i < zipData.length; i++) {\n var item = zipData[i];\n cenDirLen += item.centralDir.length;\n buffer.push(this.getArrayBuffer(item.localHeader));\n while (item.compressedData.compressedData.length) {\n buffer.push(item.compressedData.compressedData.shift().buffer);\n }\n }\n for (var i = 0; i < zipData.length; i++) {\n buffer.push(this.getArrayBuffer(zipData[i].centralDir));\n }\n buffer.push(this.getArrayBuffer(this.writeFooter(zipData, cenDirLen, localDirLen)));\n var blob = new Blob(buffer, { type: 'application/zip' });\n if (!skipFileSave) {\n Save.save(fileName, blob);\n }\n return blob;\n };\n ZipArchive.prototype.writeCentralDirectory = function (data, localHeader, offset, externalFileAttribute) {\n var directoryHeader = 'PK\\x01\\x02' +\n this.getBytes(0x0014, 2) + localHeader + // inherit from file header\n this.getBytes(0, 2) + // comment length\n '\\x00\\x00' + '\\x00\\x00' + // internal file attributes \n this.getBytes(externalFileAttribute, 4) + // external file attributes\n this.getBytes(offset, 4) + // local fileHeader relative offset\n data.fileName;\n return directoryHeader;\n };\n ZipArchive.prototype.writeFooter = function (zipData, centralLength, localLength) {\n var dirEnd = 'PK\\x05\\x06' + '\\x00\\x00' + '\\x00\\x00' +\n this.getBytes(zipData.length, 2) + this.getBytes(zipData.length, 2) +\n this.getBytes(centralLength, 4) + this.getBytes(localLength, 4) +\n this.getBytes(0, 2);\n return dirEnd;\n };\n ZipArchive.prototype.getArrayBuffer = function (input) {\n var a = new Uint8Array(input.length);\n for (var j = 0; j < input.length; ++j) {\n a[j] = input.charCodeAt(j) & 0xFF;\n }\n return a.buffer;\n };\n ZipArchive.prototype.getBytes = function (value, offset) {\n var bytes = '';\n for (var i = 0; i < offset; i++) {\n bytes += String.fromCharCode(value & 0xff);\n value = value >>> 8;\n }\n return bytes;\n };\n ZipArchive.prototype.getModifiedTime = function (date) {\n var modTime = date.getHours();\n modTime = modTime << 6;\n modTime = modTime | date.getMinutes();\n modTime = modTime << 5;\n return modTime = modTime | date.getSeconds() / 2;\n };\n ZipArchive.prototype.getModifiedDate = function (date) {\n var modiDate = date.getFullYear() - 1980;\n modiDate = modiDate << 4;\n modiDate = modiDate | (date.getMonth() + 1);\n modiDate = modiDate << 5;\n return modiDate = modiDate | date.getDate();\n };\n ZipArchive.prototype.calculateCrc32Value = function (crc32Value, input, crc32Table) {\n crc32Value ^= -1;\n for (var i = 0; i < input.length; i++) {\n crc32Value = (crc32Value >>> 8) ^ crc32Table[(crc32Value ^ input[i]) & 0xFF];\n }\n return (crc32Value ^ (-1));\n };\n return ZipArchive;\n}());\nexport { ZipArchive };\n/**\n * Class represent unique ZipArchive item\n * ```typescript\n * let archiveItem = new ZipArchiveItem(archive, 'directoryName\\fileName.txt');\n * ```\n */\nvar ZipArchiveItem = /** @class */ (function () {\n /**\n * constructor for creating {ZipArchiveItem} instance\n * @param {Blob|ArrayBuffer} data file data\n * @param {itemName} itemName absolute file path\n */\n function ZipArchiveItem(data, itemName) {\n if (data === null || data === undefined) {\n throw new Error('ArgumentException: data cannot be null or undefined');\n }\n if (itemName === null || itemName === undefined) {\n throw new Error('ArgumentException: string cannot be null or undefined');\n }\n if (itemName.length === 0) {\n throw new Error('string cannot be empty');\n }\n this.data = data;\n this.name = itemName;\n }\n Object.defineProperty(ZipArchiveItem.prototype, \"name\", {\n /**\n * Get the name of archive item\n * @returns string\n */\n get: function () {\n return this.fileName;\n },\n /**\n * Set the name of archive item\n * @param {string} value\n */\n set: function (value) {\n this.fileName = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * release allocated un-managed resource\n * @returns {void}\n */\n ZipArchiveItem.prototype.destroy = function () {\n this.fileName = undefined;\n this.data = undefined;\n };\n return ZipArchiveItem;\n}());\nexport { ZipArchiveItem };\n/**\n * construct cyclic redundancy code table\n */\n(function () {\n var i;\n for (var j = 0; j < 256; j++) {\n i = j;\n for (var k = 0; k < 8; k++) {\n i = ((i & 1) ? (0xEDB88320 ^ (i >>> 1)) : (i >>> 1));\n }\n crc32Table[j] = i;\n }\n})();\n","/**\n * Dictionary.ts class for EJ2-PDF\n * @private\n * @hidden\n */\nimport { defaultToString } from './utils';\n/**\n * @private\n * @hidden\n */\nvar Dictionary = /** @class */ (function () {\n /**\n * @private\n * @hidden\n */\n function Dictionary(toStringFunction) {\n this.table = {};\n this.nElements = 0;\n this.toStr = toStringFunction || defaultToString;\n }\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.getValue = function (key) {\n var pair = this.table['$' + this.toStr(key)];\n if (typeof pair === 'undefined') {\n return undefined;\n }\n return pair.value;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.setValue = function (key, value) {\n // if (typeof key === 'undefined' || typeof value === 'undefined') {\n // return undefined;\n // }\n var ret;\n var k = '$' + this.toStr(key);\n var previousElement = this.table[k];\n // if (typeof previousElement === 'undefined') {\n this.nElements++;\n ret = undefined;\n // }\n this.table[k] = {\n key: key,\n value: value\n };\n return ret;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.remove = function (key) {\n var k = '$' + this.toStr(key);\n var previousElement = this.table[k];\n // if (typeof previousElement !== 'undefined') {\n delete this.table[k];\n this.nElements--;\n return previousElement.value;\n // }\n // return undefined;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.keys = function () {\n var keysArray = [];\n var namesOfKeys = Object.keys(this.table);\n for (var index1 = 0; index1 < namesOfKeys.length; index1++) {\n // if (Object.prototype.hasOwnProperty.call(this.table, namesOfKeys[index1])) {\n var pair1 = this.table[namesOfKeys[index1]];\n keysArray.push(pair1.key);\n // }\n }\n return keysArray;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.values = function () {\n var valuesArray = [];\n var namesOfValues = Object.keys(this.table);\n for (var index2 = 0; index2 < namesOfValues.length; index2++) {\n // if (Object.prototype.hasOwnProperty.call(this.table, namesOfValues[index2])) {\n var pair2 = this.table[namesOfValues[index2]];\n valuesArray.push(pair2.value);\n // }\n }\n return valuesArray;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.containsKey = function (key) {\n var retutnValue = true;\n if (typeof this.getValue(key) === 'undefined') {\n retutnValue = true;\n }\n else {\n retutnValue = false;\n }\n return !retutnValue;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.clear = function () {\n this.table = {};\n this.nElements = 0;\n };\n /**\n * @private\n * @hidden\n */\n Dictionary.prototype.size = function () {\n return this.nElements;\n };\n return Dictionary;\n}()); // End of dictionary\nexport { Dictionary };\n","/**\n * `PdfString` class is used to perform string related primitive operations.\n * @private\n */\nexport var InternalEnum;\n(function (InternalEnum) {\n //Internals\n /**\n * public Enum for `ForceEncoding`.\n * @private\n */\n var ForceEncoding;\n (function (ForceEncoding) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n ForceEncoding[ForceEncoding[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `Ascii`.\n * @private\n */\n ForceEncoding[ForceEncoding[\"Ascii\"] = 1] = \"Ascii\";\n /**\n * Specifies the type of `Unicode`.\n * @private\n */\n ForceEncoding[ForceEncoding[\"Unicode\"] = 2] = \"Unicode\";\n })(ForceEncoding = InternalEnum.ForceEncoding || (InternalEnum.ForceEncoding = {}));\n /**\n * public Enum for `SourceType`.\n * @private\n */\n var SourceType;\n (function (SourceType) {\n /**\n * Specifies the type of `StringValue`.\n * @private\n */\n SourceType[SourceType[\"StringValue\"] = 0] = \"StringValue\";\n /**\n * Specifies the type of `ByteBuffer`.\n * @private\n */\n SourceType[SourceType[\"ByteBuffer\"] = 1] = \"ByteBuffer\";\n })(SourceType || (SourceType = {}));\n})(InternalEnum || (InternalEnum = {}));\nvar PdfString = /** @class */ (function () {\n function PdfString(value) {\n /**\n * Value indicating whether the string was converted to hex.\n * @default false\n * @private\n */\n this.bHex = false;\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.position1 = -1;\n /**\n * Internal variable to hold `cloned object`.\n * @default null\n * @private\n */\n this.clonedObject1 = null;\n /**\n * `Shows` if the data of the stream was decrypted.\n * @default false\n * @private\n */\n this.bDecrypted = false;\n /**\n * Shows if the data of the stream `was decrypted`.\n * @default false\n * @private\n */\n this.isParentDecrypted = false;\n /**\n * Gets a value indicating whether the object is `packed or not`.\n * @default false\n * @private\n */\n this.isPacked = false;\n /**\n * @hidden\n * @private\n */\n this.isFormField = false;\n /**\n * @hidden\n * @private\n */\n this.isColorSpace = false;\n /**\n * @hidden\n * @private\n */\n this.isHexString = true;\n if (typeof value === 'undefined') {\n this.bHex = false;\n }\n else {\n if (!(value.length > 0 && value[0] === '0xfeff')) {\n this.stringValue = value;\n this.data = [];\n for (var i = 0; i < value.length; ++i) {\n this.data.push(value.charCodeAt(i));\n }\n }\n }\n }\n Object.defineProperty(PdfString.prototype, \"hex\", {\n //Property\n /**\n * Gets a value indicating whether string is in `hex`.\n * @private\n */\n get: function () {\n return this.bHex;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"value\", {\n /**\n * Gets or sets string `value` of the object.\n * @private\n */\n get: function () {\n return this.stringValue;\n },\n set: function (value) {\n this.stringValue = value;\n this.data = null;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"status\", {\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status1;\n },\n set: function (value) {\n this.status1 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving1;\n },\n set: function (value) {\n this.isSaving1 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index1;\n },\n set: function (value) {\n this.index1 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n return this.clonedObject1;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position1;\n },\n set: function (value) {\n this.position1 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfString.prototype, \"CrossTable\", {\n /**\n * Returns `PdfCrossTable` associated with the object.\n * @private\n */\n get: function () {\n return this.crossTable;\n },\n enumerable: true,\n configurable: true\n });\n //Methods\n /**\n * Converts `bytes to string using hex format` for representing string.\n * @private\n */\n PdfString.bytesToHex = function (bytes) {\n if (bytes == null) {\n return '';\n }\n var builder = '';\n return builder;\n };\n /**\n * `Saves` the object using the specified writer.\n * @private\n */\n PdfString.prototype.save = function (writer) {\n if (writer === null) {\n throw new Error('ArgumentNullException : writer');\n }\n writer.write(PdfString.stringMark[0] + this.value + PdfString.stringMark[1]);\n };\n /**\n * Creates a `copy of PdfString`.\n * @private\n */\n PdfString.prototype.clone = function (crossTable) {\n if (this.clonedObject1 !== null && this.clonedObject1.CrossTable === crossTable) {\n return this.clonedObject1;\n }\n else {\n this.clonedObject1 = null;\n }\n var newString = new PdfString(this.stringValue);\n newString.bHex = this.bHex;\n newString.crossTable = crossTable;\n newString.isColorSpace = this.isColorSpace;\n this.clonedObject1 = newString;\n return newString;\n };\n //constants = ;\n /**\n * `General markers` for string.\n * @private\n */\n PdfString.stringMark = '()';\n /**\n * `Hex markers` for string.\n * @private\n */\n PdfString.hexStringMark = '<>';\n /**\n * Format of password data.\n * @private\n */\n PdfString.hexFormatPattern = '{0:X2}';\n return PdfString;\n}());\nexport { PdfString };\n","/**\n * `PdfName` class is used to perform name (element names) related primitive operations.\n * @private\n */\nvar PdfName = /** @class */ (function () {\n function PdfName(value) {\n /**\n * `Start symbol` of the name object.\n * @default /\n * @private\n */\n this.stringStartMark = '/';\n /**\n * `Value` of the element.\n * @private\n */\n this.internalValue = '';\n /**\n * Indicates if the object is currently in `saving state or not`.\n * @default false\n * @private\n */\n this.isSaving6 = false;\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.position6 = -1;\n this.internalValue = this.normalizeValue(value);\n }\n Object.defineProperty(PdfName.prototype, \"status\", {\n //property\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status6;\n },\n set: function (value) {\n this.status6 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfName.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving6;\n },\n set: function (value) {\n this.isSaving6 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfName.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index6;\n },\n set: function (value) {\n this.index6 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfName.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position6;\n },\n set: function (value) {\n this.position6 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfName.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n return null;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfName.prototype, \"value\", {\n /**\n * Gets or sets the `value` of the object.\n * @private\n */\n get: function () {\n return this.internalValue;\n },\n set: function (value) {\n // if (value !== this.value) {\n var val = value;\n if (value !== null && value.length > 0) {\n // val = (value.substring(0, 1) === this.stringStartMark) ? value.substring(1) : value;\n val = value;\n this.internalValue = this.normalizeValue(val);\n }\n else {\n this.internalValue = val;\n }\n // }\n },\n enumerable: true,\n configurable: true\n });\n //public methods\n /**\n * `Saves` the name using the specified writer.\n * @private\n */\n PdfName.prototype.save = function (writer) {\n // if (writer === null) {\n // throw new Error('ArgumentNullException : writer');\n // }\n writer.write(this.toString());\n };\n /**\n * Gets `string` representation of the primitive.\n * @private\n */\n PdfName.prototype.toString = function () {\n return (this.stringStartMark + this.escapeString(this.value));\n };\n /**\n * Creates a `copy of PdfName`.\n * @private\n */\n PdfName.prototype.clone = function (crossTable) {\n var newName = new PdfName();\n newName.value = this.internalValue;\n return newName;\n };\n /**\n * Replace some characters with its `escape sequences`.\n * @private\n */\n PdfName.prototype.escapeString = function (stringValue) {\n // if (str === null) {\n // throw new Error('ArgumentNullException : str');\n // }\n // if (str === '') {\n // return str;\n // }\n var result = '';\n var len = 0;\n for (var i = 0, len_1 = stringValue.length; i < len_1; i++) {\n var ch = stringValue[i];\n var index = PdfName.delimiters.indexOf(ch);\n // switch (ch) {\n // case '\\r' :\n // result = result + '\\\\r';\n // break;\n // case '\\n' :\n // result = result + '\\n';\n // break;\n // case '(' :\n // case ')' :\n // case '\\\\' :\n // //result.Append( '\\\\' ).Append( ch );\n // result = result + ch;\n // break;\n // default :\n // result = result + ch;\n // break;\n // }\n result = result + ch;\n }\n return result;\n };\n //methiods\n /**\n * Replace a symbol with its code with the precedence of the `sharp sign`.\n * @private\n */\n PdfName.prototype.normalizeValue = function (value, c) {\n // if (typeof c === undefined) {\n // let str : string = value;\n // for (let i : number = 0; i < PdfName.replacements.length; i++) {\n // str = this.normalizeValue(str, c);\n // }\n // return str;\n // } else {\n var strFormat = '#{0:X}';\n //return value.replace(c.toString(),String.format(strFormat,c));\n return value;\n // }\n };\n /**\n * PDF `special characters`.\n * @private\n */\n PdfName.delimiters = '()<>[]{}/%}';\n /**\n * The symbols that are not allowed in PDF names and `should be replaced`.\n * @private\n */\n PdfName.replacements = [' ', '\\t', '\\n', '\\r'];\n return PdfName;\n}());\nexport { PdfName };\n","/**\n * PdfOperators.ts class for EJ2-PDF\n * Class of string PDF common operators.\n * @private\n */\nvar Operators = /** @class */ (function () {\n /**\n * Create an instance of `PdfOperator` class.\n * @private\n */\n function Operators() {\n /**\n * Specifies the value of `test`.\n * @private\n */\n this.forTest = 'test';\n this.forTest = Operators.obj;\n }\n /**\n * Specifies the value of `obj`.\n * @private\n */\n Operators.obj = 'obj';\n /**\n * Specifies the value of `endObj`.\n * @private\n */\n Operators.endObj = 'endobj';\n /**\n * Specifies the value of `R`.\n * @private\n */\n Operators.r = 'R';\n /**\n * Specifies the value of ` `.\n * @private\n */\n Operators.whiteSpace = ' ';\n /**\n * Specifies the value of `/`.\n * @private\n */\n Operators.slash = '/';\n /**\n * Specifies the value of `\\r\\n`.\n * @private\n */\n Operators.newLine = '\\r\\n';\n /**\n * Specifies the value of `stream`.\n * @private\n */\n Operators.stream = 'stream';\n /**\n * Specifies the value of `endStream`.\n * @private\n */\n Operators.endStream = 'endstream';\n /**\n * Specifies the value of `xref`.\n * @private\n */\n Operators.xref = 'xref';\n /**\n * Specifies the value of `f`.\n * @private\n */\n Operators.f = 'f';\n /**\n * Specifies the value of `n`.\n * @private\n */\n Operators.n = 'n';\n /**\n * Specifies the value of `trailer`.\n * @private\n */\n Operators.trailer = 'trailer';\n /**\n * Specifies the value of `startxref`.\n * @private\n */\n Operators.startxref = 'startxref';\n /**\n * Specifies the value of `eof`.\n * @private\n */\n Operators.eof = '%%EOF';\n /**\n * Specifies the value of `header`.\n * @private\n */\n Operators.header = '%PDF-1.5';\n /**\n * Specifies the value of `beginText`.\n * @private\n */\n Operators.beginText = 'BT';\n /**\n * Specifies the value of `endText`.\n * @private\n */\n Operators.endText = 'ET';\n /**\n * Specifies the value of `m`.\n * @private\n */\n Operators.beginPath = 'm';\n /**\n * Specifies the value of `l`.\n * @private\n */\n Operators.appendLineSegment = 'l';\n /**\n * Specifies the value of `S`.\n * @private\n */\n Operators.stroke = 'S';\n /**\n * Specifies the value of `f`.\n * @private\n */\n Operators.fill = 'f';\n /**\n * Specifies the value of `f*`.\n * @private\n */\n Operators.fillEvenOdd = 'f*';\n /**\n * Specifies the value of `B`.\n * @private\n */\n Operators.fillStroke = 'B';\n /**\n * Specifies the value of `B*`.\n * @private\n */\n Operators.fillStrokeEvenOdd = 'B*';\n /**\n * Specifies the value of `c`.\n * @private\n */\n Operators.appendbeziercurve = 'c';\n /**\n * Specifies the value of `re`.\n * @private\n */\n Operators.appendRectangle = 're';\n /**\n * Specifies the value of `q`.\n * @private\n */\n Operators.saveState = 'q';\n /**\n * Specifies the value of `Q`.\n * @private\n */\n Operators.restoreState = 'Q';\n /**\n * Specifies the value of `Do`.\n * @private\n */\n Operators.paintXObject = 'Do';\n /**\n * Specifies the value of `cm`.\n * @private\n */\n Operators.modifyCtm = 'cm';\n /**\n * Specifies the value of `Tm`.\n * @private\n */\n Operators.modifyTM = 'Tm';\n /**\n * Specifies the value of `w`.\n * @private\n */\n Operators.setLineWidth = 'w';\n /**\n * Specifies the value of `J`.\n * @private\n */\n Operators.setLineCapStyle = 'J';\n /**\n * Specifies the value of `j`.\n * @private\n */\n Operators.setLineJoinStyle = 'j';\n /**\n * Specifies the value of `d`.\n * @private\n */\n Operators.setDashPattern = 'd';\n /**\n * Specifies the value of `i`.\n * @private\n */\n Operators.setFlatnessTolerance = 'i';\n /**\n * Specifies the value of `h`.\n * @private\n */\n Operators.closePath = 'h';\n /**\n * Specifies the value of `s`.\n * @private\n */\n Operators.closeStrokePath = 's';\n /**\n * Specifies the value of `b`.\n * @private\n */\n Operators.closeFillStrokePath = 'b';\n /**\n * Specifies the value of `setCharacterSpace`.\n * @private\n */\n Operators.setCharacterSpace = 'Tc';\n /**\n * Specifies the value of `setWordSpace`.\n * @private\n */\n Operators.setWordSpace = 'Tw';\n /**\n * Specifies the value of `setHorizontalScaling`.\n * @private\n */\n Operators.setHorizontalScaling = 'Tz';\n /**\n * Specifies the value of `setTextLeading`.\n * @private\n */\n Operators.setTextLeading = 'TL';\n /**\n * Specifies the value of `setFont`.\n * @private\n */\n Operators.setFont = 'Tf';\n /**\n * Specifies the value of `setRenderingMode`.\n * @private\n */\n Operators.setRenderingMode = 'Tr';\n /**\n * Specifies the value of `setTextRise`.\n * @private\n */\n Operators.setTextRise = 'Ts';\n /**\n * Specifies the value of `setTextScaling`.\n * @private\n */\n Operators.setTextScaling = 'Tz';\n /**\n * Specifies the value of `setCoords`.\n * @private\n */\n Operators.setCoords = 'Td';\n /**\n * Specifies the value of `goToNextLine`.\n * @private\n */\n Operators.goToNextLine = 'T*';\n /**\n * Specifies the value of `setText`.\n * @private\n */\n Operators.setText = 'Tj';\n /**\n * Specifies the value of `setTextWithFormatting`.\n * @private\n */\n Operators.setTextWithFormatting = 'TJ';\n /**\n * Specifies the value of `setTextOnNewLine`.\n * @private\n */\n Operators.setTextOnNewLine = '\\'';\n /**\n * Specifies the value of `selectcolorspaceforstroking`.\n * @private\n */\n Operators.selectcolorspaceforstroking = 'CS';\n /**\n * Specifies the value of `selectcolorspacefornonstroking`.\n * @private\n */\n Operators.selectcolorspacefornonstroking = 'cs';\n /**\n * Specifies the value of `setrbgcolorforstroking`.\n * @private\n */\n Operators.setrbgcolorforstroking = 'RG';\n /**\n * Specifies the value of `setrbgcolorfornonstroking`.\n * @private\n */\n Operators.setrbgcolorfornonstroking = 'rg';\n /**\n * Specifies the value of `K`.\n * @private\n */\n Operators.setcmykcolorforstroking = 'K';\n /**\n * Specifies the value of `k`.\n * @private\n */\n Operators.setcmykcolorfornonstroking = 'k';\n /**\n * Specifies the value of `G`.\n * @private\n */\n Operators.setgraycolorforstroking = 'G';\n /**\n * Specifies the value of `g`.\n * @private\n */\n Operators.setgraycolorfornonstroking = 'g';\n /**\n * Specifies the value of `W`.\n * @private\n */\n Operators.clipPath = 'W';\n /**\n * Specifies the value of `clipPathEvenOdd`.\n * @private\n */\n Operators.clipPathEvenOdd = 'W*';\n /**\n * Specifies the value of `n`.\n * @private\n */\n Operators.endPath = 'n';\n /**\n * Specifies the value of `setGraphicsState`.\n * @private\n */\n Operators.setGraphicsState = 'gs';\n /**\n * Specifies the value of `%`.\n * @private\n */\n Operators.comment = '%';\n /**\n * Specifies the value of `*`.\n * @private\n */\n Operators.evenOdd = '*';\n /**\n * Specifies the value of `M`.\n * @private\n */\n Operators.setMiterLimit = 'M';\n return Operators;\n}());\nexport { Operators };\n","/**\n * dictionaryProperties.ts class for EJ2-PDF\n * PDF dictionary properties.\n * @private\n */\nvar DictionaryProperties = /** @class */ (function () {\n /**\n * Initialize an instance for `PdfDictionaryProperties` class.\n * @private\n */\n function DictionaryProperties() {\n /**\n * Specifies the value of `Pages`.\n * @private\n */\n this.pages = 'Pages';\n /**\n * Specifies the value of `Kids`.\n * @private\n */\n this.kids = 'Kids';\n /**\n * Specifies the value of `Count`.\n * @private\n */\n this.count = 'Count';\n /**\n * Specifies the value of `Resources`.\n * @private\n */\n this.resources = 'Resources';\n /**\n * Specifies the value of `Type`.\n * @private\n */\n this.type = 'Type';\n /**\n * Specifies the value of `Size`.\n * @private\n */\n this.size = 'Size';\n /**\n * Specifies the value of `MediaBox`.\n * @private\n */\n this.mediaBox = 'MediaBox';\n /**\n * Specifies the value of `Parent`.\n * @private\n */\n this.parent = 'Parent';\n /**\n * Specifies the value of `Root`.\n * @private\n */\n this.root = 'Root';\n /**\n * Specifies the value of `DecodeParms`.\n * @private\n */\n this.decodeParms = 'DecodeParms';\n /**\n * Specifies the value of `Filter`.\n * @private\n */\n this.filter = 'Filter';\n /**\n * Specifies the value of `Font`.\n * @private\n */\n this.font = 'Font';\n /**\n * Specifies the value of `Type1`.\n * @private\n */\n this.type1 = 'Type1';\n /**\n * Specifies the value of `BaseFont`.\n * @private\n */\n this.baseFont = 'BaseFont';\n /**\n * Specifies the value of `Encoding`.\n * @private\n */\n this.encoding = 'Encoding';\n /**\n * Specifies the value of `Subtype`.\n * @private\n */\n this.subtype = 'Subtype';\n /**\n * Specifies the value of `Contents`.\n * @private\n */\n this.contents = 'Contents';\n /**\n * Specifies the value of `ProcSet`.\n * @private\n */\n this.procset = 'ProcSet';\n /**\n * Specifies the value of `ColorSpace`.\n * @private\n */\n this.colorSpace = 'ColorSpace';\n /**\n * Specifies the value of `ExtGState`.\n * @private\n */\n this.extGState = 'ExtGState';\n /**\n * Specifies the value of `Pattern`.\n * @private\n */\n this.pattern = 'Pattern';\n /**\n * Specifies the value of `XObject`.\n * @private\n */\n this.xObject = 'XObject';\n /**\n * Specifies the value of `Length`.\n * @private\n */\n this.length = 'Length';\n /**\n * Specifies the value of `Width`.\n * @private\n */\n this.width = 'Width';\n /**\n * Specifies the value of `Height`.\n * @private\n */\n this.height = 'Height';\n /**\n * Specifies the value of `BitsPerComponent`.\n * @private\n */\n this.bitsPerComponent = 'BitsPerComponent';\n /**\n * Specifies the value of `Image`.\n * @private\n */\n this.image = 'Image';\n /**\n * Specifies the value of `dctdecode`.\n * @private\n */\n this.dctdecode = 'DCTDecode';\n /**\n * Specifies the value of `Columns`.\n * @private\n */\n this.columns = 'Columns';\n /**\n * Specifies the value of `BlackIs1`.\n * @private\n */\n this.blackIs1 = 'BlackIs1';\n /**\n * Specifies the value of `K`.\n * @private\n */\n this.k = 'K';\n /**\n * Specifies the value of `S`.\n * @private\n */\n this.s = 'S';\n /**\n * Specifies the value of `Predictor`.\n * @private\n */\n this.predictor = 'Predictor';\n /**\n * Specifies the value of `DeviceRGB`.\n * @private\n */\n this.deviceRgb = 'DeviceRGB';\n /**\n * Specifies the value of `Next`.\n * @private\n */\n this.next = 'Next';\n /**\n * Specifies the value of `Action`.\n * @private\n */\n this.action = 'Action';\n /**\n * Specifies the value of `Link`.\n * @private\n */\n this.link = 'Link';\n /**\n *\n * Specifies the value of `A`.\n * @private\n */\n this.a = 'A';\n /**\n * Specifies the value of `Annot`.\n * @private\n */\n this.annot = 'Annot';\n /**\n * Specifies the value of `P`.\n * @private\n */\n this.p = 'P';\n /**\n * Specifies the value of `C`.\n * @private\n */\n this.c = 'C';\n /**\n * Specifies the value of `Rect`.\n * @private\n */\n this.rect = 'Rect';\n /**\n * Specifies the value of `URI`.\n * @private\n */\n this.uri = 'URI';\n /**\n * Specifies the value of `Annots`.\n * @private\n */\n this.annots = 'Annots';\n /**\n * Specifies the value of `ca`.\n * @private\n */\n this.ca = 'ca';\n /**\n * Specifies the value of `CA`.\n * @private\n */\n this.CA = 'CA';\n /**\n * Specifies the value of `XYZ`.\n * @private\n */\n this.xyz = 'XYZ';\n /**\n * Specifies the value of `Fit`.\n * @private\n */\n this.fit = 'Fit';\n /**\n * Specifies the value of `Dest`.\n * @private\n */\n this.dest = 'Dest';\n /**\n * Specifies the value of `BM`.\n * @private\n */\n this.BM = 'BM';\n /**\n * Specifies the value of `flatedecode`.\n * @private\n */\n this.flatedecode = 'FlateDecode';\n /**\n * Specifies the value of `Rotate`.\n * @private\n */\n this.rotate = 'Rotate';\n /**\n * Specifies the value of 'bBox'.\n * @private\n */\n this.bBox = 'BBox';\n /**\n * Specifies the value of 'form'.\n * @private\n */\n this.form = 'Form';\n //\n }\n return DictionaryProperties;\n}());\nexport { DictionaryProperties };\n","import { Dictionary } from './../collections/dictionary';\nimport { PdfName } from './pdf-name';\nimport { Operators } from './../input-output/pdf-operators';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\n/**\n * `PdfDictionary` class is used to perform primitive operations.\n * @private\n */\nvar PdfDictionary = /** @class */ (function () {\n function PdfDictionary(dictionary) {\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.position7 = -1;\n /**\n * The `IPdfSavable` with the specified key.\n * @private\n */\n this.primitiveItems = new Dictionary();\n /**\n * `Start marker` for dictionary.\n * @private\n */\n this.prefix = '<<';\n /**\n * `End marker` for dictionary.\n * @private\n */\n this.suffix = '>>';\n /**\n * @hidden\n * @private\n */\n this.resources = [];\n /**\n * Internal variable to hold `cloned object`.\n * @default null\n * @private\n */\n this.object = null;\n /**\n * Flag for PDF file formar 1.5 is dictionary `archiving` needed.\n * @default true\n * @private\n */\n this.archive = true;\n if (typeof dictionary === 'undefined') {\n this.primitiveItems = new Dictionary();\n this.encrypt = true;\n this.dictionaryProperties = new DictionaryProperties();\n }\n else {\n this.primitiveItems = new Dictionary();\n var keys = dictionary.items.keys();\n var values = dictionary.items.values();\n for (var index = 0; index < dictionary.items.size(); index++) {\n this.primitiveItems.setValue(keys[index], values[index]);\n }\n this.status = dictionary.status;\n this.freezeChanges(this);\n this.encrypt = true;\n this.dictionaryProperties = new DictionaryProperties();\n }\n }\n Object.defineProperty(PdfDictionary.prototype, \"items\", {\n //Properties\n /**\n * Gets or sets the `IPdfSavable` with the specified key.\n * @private\n */\n get: function () {\n return this.primitiveItems;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"status\", {\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status7;\n },\n set: function (value) {\n this.status7 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving7;\n },\n set: function (value) {\n this.isSaving7 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index7;\n },\n set: function (value) {\n this.index7 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n return this.object;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position7;\n },\n set: function (value) {\n this.position7 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"Count\", {\n /**\n * Gets the `count`.\n * @private\n */\n get: function () {\n return this.primitiveItems.size();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDictionary.prototype, \"Dictionary\", {\n /**\n * Collection of `items` in the object.\n * @private\n */\n get: function () {\n return this;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Get flag if need to `archive` dictionary.\n * @private\n */\n PdfDictionary.prototype.getArchive = function () {\n return this.archive;\n };\n /**\n * Set flag if need to `archive` dictionary.\n * @private\n */\n PdfDictionary.prototype.setArchive = function (value) {\n this.archive = value;\n };\n /**\n * Sets flag if `encryption` is needed.\n * @private\n */\n PdfDictionary.prototype.setEncrypt = function (value) {\n this.encrypt = value;\n this.modify();\n };\n /**\n * Gets flag if `encryption` is needed.\n * @private\n */\n PdfDictionary.prototype.getEncrypt = function () {\n return this.encrypt;\n };\n /**\n * `Freezes` the changes.\n * @private\n */\n PdfDictionary.prototype.freezeChanges = function (freezer) {\n this.bChanged = false;\n };\n /**\n * Creates a `copy of PdfDictionary`.\n * @private\n */\n PdfDictionary.prototype.clone = function (crossTable) {\n //Need to add more codings\n var newDict = new PdfDictionary();\n return newDict;\n };\n /**\n * `Mark` this instance modified.\n * @private\n */\n PdfDictionary.prototype.modify = function () {\n this.bChanged = true;\n };\n /**\n * `Removes` the specified key.\n * @private\n */\n PdfDictionary.prototype.remove = function (key) {\n if (typeof key !== 'string') {\n this.primitiveItems.remove(key.value);\n this.modify();\n }\n else {\n this.remove(new PdfName(key));\n }\n };\n /**\n * `Determines` whether the dictionary contains the key.\n * @private\n */\n PdfDictionary.prototype.containsKey = function (key) {\n var returnValue = false;\n returnValue = this.primitiveItems.containsKey(key.toString());\n return returnValue;\n };\n /**\n * Raises event `BeginSave`.\n * @private\n */\n PdfDictionary.prototype.onBeginSave = function () {\n this.beginSave.sender.beginSave();\n };\n /**\n * Raises event 'BeginSave'.\n * @private\n */\n PdfDictionary.prototype.onTemplateBeginSave = function () {\n this.pageBeginDrawTemplate.sender.pageBeginSave();\n };\n /**\n * Raises event `BeginSave`.\n * @private\n */\n PdfDictionary.prototype.onBeginAnnotationSave = function () {\n this.annotationBeginSave.sender.beginSave();\n };\n /**\n * Raises event `BeginSave`.\n * @private\n */\n PdfDictionary.prototype.onSectionBeginSave = function (writer) {\n var saveEvent = this.sectionBeginSave;\n saveEvent.sender.beginSave(saveEvent.state, writer);\n };\n PdfDictionary.prototype.save = function (writer, bRaiseEvent) {\n if (typeof bRaiseEvent === 'undefined') {\n this.save(writer, true);\n }\n else {\n writer.write(this.prefix);\n if (typeof this.beginSave !== 'undefined') {\n this.onBeginSave();\n }\n if (typeof this.annotationBeginSave !== 'undefined') {\n this.onBeginAnnotationSave();\n }\n if (typeof this.sectionBeginSave !== 'undefined') {\n this.onSectionBeginSave(writer);\n }\n if (typeof this.pageBeginDrawTemplate !== 'undefined') {\n this.onTemplateBeginSave();\n }\n // }\n if (this.Count > 0) {\n this.saveItems(writer);\n }\n writer.write(this.suffix);\n writer.write(Operators.newLine);\n }\n };\n /**\n * `Save dictionary items`.\n * @private\n */\n PdfDictionary.prototype.saveItems = function (writer) {\n writer.write(Operators.newLine);\n var keys = this.primitiveItems.keys();\n var values = this.primitiveItems.values();\n for (var index = 0; index < keys.length; index++) {\n var key = keys[index];\n var name_1 = new PdfName(key);\n name_1.save(writer);\n writer.write(Operators.whiteSpace);\n var resources = values[index];\n resources.save(writer);\n writer.write(Operators.newLine);\n }\n };\n return PdfDictionary;\n}());\nexport { PdfDictionary };\nvar SaveSectionCollectionEventHandler = /** @class */ (function () {\n /**\n * New instance for `save section collection event handler` class.\n * @private\n */\n function SaveSectionCollectionEventHandler(sender) {\n this.sender = sender;\n }\n return SaveSectionCollectionEventHandler;\n}());\nexport { SaveSectionCollectionEventHandler };\nvar SaveAnnotationEventHandler = /** @class */ (function () {\n /**\n * New instance for `save annotation event handler` class.\n * @private\n */\n function SaveAnnotationEventHandler(sender) {\n this.sender = sender;\n }\n return SaveAnnotationEventHandler;\n}());\nexport { SaveAnnotationEventHandler };\nvar SaveSectionEventHandler = /** @class */ (function () {\n // constructors\n /**\n * New instance for `save section event handler` class.\n * @private\n */\n function SaveSectionEventHandler(sender, state) {\n this.sender = sender;\n this.state = state;\n }\n return SaveSectionEventHandler;\n}());\nexport { SaveSectionEventHandler };\n/**\n * SaveTemplateEventHandler class used to store information about template elements.\n * @private\n * @hidden\n */\nvar SaveTemplateEventHandler = /** @class */ (function () {\n /**\n * New instance for save section collection event handler class.\n * @public\n */\n function SaveTemplateEventHandler(sender) {\n this.sender = sender;\n }\n return SaveTemplateEventHandler;\n}());\nexport { SaveTemplateEventHandler };\n","/**\n * `PdfNumber` class is used to perform number related primitive operations.\n * @private\n */\nvar PdfNumber = /** @class */ (function () {\n /**\n * Initializes a new instance of the `PdfNumber` class.\n * @private\n */\n function PdfNumber(value) {\n /**\n * Sotres the `position`.\n * @default -1\n * @private\n */\n this.position5 = -1;\n this.value = value;\n }\n Object.defineProperty(PdfNumber.prototype, \"intValue\", {\n /**\n * Gets or sets the `integer` value.\n * @private\n */\n get: function () {\n return this.value;\n },\n set: function (value) {\n this.value = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfNumber.prototype, \"isInteger\", {\n /**\n * Gets or sets a value indicating whether this instance `is integer`.\n * @private\n */\n get: function () {\n return this.integer;\n },\n set: function (value) {\n this.integer = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfNumber.prototype, \"status\", {\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status5;\n },\n set: function (value) {\n this.status5 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfNumber.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving5;\n },\n set: function (value) {\n this.isSaving5 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfNumber.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index5;\n },\n set: function (value) {\n this.index5 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfNumber.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position5;\n },\n set: function (value) {\n this.position5 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfNumber.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n var rValue = null;\n return rValue;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Saves the object`.\n * @private\n */\n PdfNumber.prototype.save = function (writer) {\n writer.write(this.intValue.toString()); //tostring(CultureInfo.InletiantCulture)\n };\n /**\n * Creates a `copy of PdfNumber`.\n * @private\n */\n PdfNumber.prototype.clone = function (crossTable) {\n var newNumber = new PdfNumber(this.value);\n return newNumber;\n };\n /**\n * Converts a `float value to a string` using Adobe PDF rules.\n * @private\n */\n PdfNumber.floatToString = function (number) {\n // let tempString1 : string = number.toString();\n // let tempString2 : string = tempString1.indexOf('.') != -1 ? tempString1.substring(0, tempString1.indexOf('.')) : tempString1;\n var returnString = number.toFixed(2);\n if (returnString === '0.00') {\n returnString = '.00';\n }\n // let prefixLength : number = (22 - tempString2.length) >= 0 ? (22 - tempString2.length) : 0;\n // for (let index : number = 0; index < prefixLength; index++) {\n // returnString += '0';\n // }\n // returnString += tempString2 + '.00';\n // returnString += (tempString3.length > 6) ? tempString3.substring(0,6) : tempString3;\n // let suffixLength : number = (6 - tempString3.length) >= 0 ? (6 - tempString3.length) : 0;\n // for (let index : number = 0; index < suffixLength; index++) {\n // returnString += '0';\n // }\n return returnString;\n };\n /**\n * Determines the `minimum of the three values`.\n * @private\n */\n PdfNumber.min = function (x, y, z) {\n var r = Math.min(x, y);\n return Math.min(z, r);\n };\n return PdfNumber;\n}());\nexport { PdfNumber };\n","import { PdfNumber } from './pdf-number';\nimport { Operators } from './../input-output/pdf-operators';\n/**\n * `PdfArray` class is used to perform array related primitive operations.\n * @private\n */\nvar PdfArray = /** @class */ (function () {\n function PdfArray(array) {\n //Fields\n /**\n * `startMark` - '['\n * @private\n */\n this.startMark = '[';\n /**\n * `endMark` - ']'.\n * @private\n */\n this.endMark = ']';\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.position9 = -1;\n /**\n * Internal variable to hold `cloned object`.\n * @default null\n * @private\n */\n this.clonedObject9 = null;\n if (typeof array === 'undefined') {\n this.internalElements = [];\n }\n else {\n if (typeof array !== 'undefined' && !(array instanceof PdfArray)) {\n var tempNumberArray = array;\n for (var index = 0; index < tempNumberArray.length; index++) {\n var pdfNumber = new PdfNumber(tempNumberArray[index]);\n this.add(pdfNumber);\n }\n // } else if (typeof array !== 'undefined' && (array instanceof PdfArray)) {\n }\n else {\n var tempArray = array;\n // if (tempArray.Elements.length > 0) {\n this.internalElements = [];\n for (var index = 0; index < tempArray.elements.length; index++) {\n this.internalElements.push(tempArray.elements[index]);\n }\n // }\n }\n }\n }\n //property\n /**\n * Gets the `IPdfSavable` at the specified index.\n * @private\n */\n PdfArray.prototype.items = function (index) {\n // if (index < 0 || index >= this.Count) {\n // throw new Error('ArgumentOutOfRangeException : index, The index can\"t be less then zero or greater then Count.');\n // }\n return this.internalElements[index];\n };\n Object.defineProperty(PdfArray.prototype, \"count\", {\n /**\n * Gets the `count`.\n * @private\n */\n get: function () {\n return this.internalElements.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"status\", {\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status9;\n },\n set: function (value) {\n this.status9 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving9;\n },\n set: function (value) {\n this.isSaving9 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n return this.clonedObject9;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position9;\n },\n set: function (value) {\n this.position9 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index9;\n },\n set: function (value) {\n this.index9 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"CrossTable\", {\n /**\n * Returns `PdfCrossTable` associated with the object.\n * @private\n */\n get: function () {\n return this.pdfCrossTable;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfArray.prototype, \"elements\", {\n /**\n * Gets the `elements` of the Pdf Array.\n * @private\n */\n get: function () {\n return this.internalElements;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Adds` the specified element to the PDF array.\n * @private\n */\n PdfArray.prototype.add = function (element) {\n // if (element === null) {\n // throw new Error('ArgumentNullException : obj');\n // }\n if (typeof this.internalElements === 'undefined') {\n this.internalElements = [];\n }\n this.internalElements.push(element);\n this.markedChange();\n };\n /**\n * `Marks` the object changed.\n * @private\n */\n PdfArray.prototype.markedChange = function () {\n this.bChanged = true;\n };\n /**\n * `Determines` whether the specified element is within the array.\n * @private\n */\n PdfArray.prototype.contains = function (element) {\n var returnValue = false;\n for (var index = 0; index < this.internalElements.length; index++) {\n var tempElement = this.internalElements[index];\n var inputElement = element;\n if (tempElement != null && typeof tempElement !== 'undefined' && inputElement != null && typeof inputElement !== 'undefined') {\n if (tempElement.value === inputElement.value) {\n return true;\n }\n }\n // if (this.internalElements[index] === element) {\n // returnValue = true;\n // }\n }\n return returnValue;\n };\n /**\n * Returns the `primitive object` of input index.\n * @private\n */\n PdfArray.prototype.getItems = function (index) {\n // if (index < 0 || index >= this.Count) {\n // throw new Error('ArgumentOutOfRangeException : index , The index can\"t be less then zero or greater then Count.');\n // }\n return this.internalElements[index];\n };\n /**\n * `Saves` the object using the specified writer.\n * @private\n */\n PdfArray.prototype.save = function (writer) {\n // if (writer === null) {\n // throw new Error('ArgumentNullException : writer');\n // }\n writer.write(this.startMark);\n for (var i = 0, len = this.count; i < len; i++) {\n this.getItems(i).save(writer);\n if (i + 1 !== len) {\n writer.write(Operators.whiteSpace);\n }\n }\n writer.write(this.endMark);\n };\n /**\n * Creates a `copy of PdfArray`.\n * @private\n */\n PdfArray.prototype.clone = function (crossTable) {\n // if (this.clonedObject9 !== null && this.clonedObject9.CrossTable === crossTable) {\n // return this.clonedObject9;\n // } else {\n this.clonedObject9 = null;\n // Else clone the object.\n var newArray = new PdfArray();\n for (var index = 0; index < this.internalElements.length; index++) {\n var obj = this.internalElements[index];\n newArray.add(obj.clone(crossTable));\n }\n newArray.pdfCrossTable = crossTable;\n this.clonedObject9 = newArray;\n return newArray;\n };\n /**\n * Creates filled PDF array `from the rectangle`.\n * @private\n */\n PdfArray.fromRectangle = function (bounds) {\n var values = [bounds.x, bounds.y, bounds.width, bounds.height];\n var array = new PdfArray(values);\n return array;\n };\n // /**\n // * Creates the rectangle from filled PDF array.\n // * @private\n // */\n // public ToRectangle() : RectangleF {\n // if (this.Count < 4) {\n // throw Error('InvalidOperationException-Can not convert to rectangle.');\n // }\n // let x1 : number;\n // let x2 : number;\n // let y1 : number;\n // let y2 : number;\n // let num : PdfNumber = this.getItems(0) as PdfNumber;\n // x1 = num.IntValue;\n // num = this.getItems(1) as PdfNumber;\n // y1 = num.IntValue;\n // num = this.getItems(2) as PdfNumber;\n // x2 = num.IntValue;\n // num = this.getItems(3) as PdfNumber;\n // y2 = num.IntValue;\n // let x : number = Math.min(x1, x2);\n // let y : number = Math.min(y1, y2);\n // let width : number = Math.abs(x1 - x2);\n // let height : number = Math.abs(y1 - y2);\n // let rect : RectangleF = new RectangleF(new PointF(x, y), new SizeF(width, height));\n // return rect;\n // }\n /**\n * `Inserts` the element into the array.\n * @private\n */\n PdfArray.prototype.insert = function (index, element) {\n if (index < this.internalElements.length && index > 0) {\n var tempElements = [];\n for (var i = 0; i < index; i++) {\n tempElements.push(this.internalElements[i]);\n }\n tempElements.push(element);\n for (var i = index; i < this.internalElements.length; i++) {\n tempElements.push(this.internalElements[i]);\n }\n this.internalElements = tempElements;\n }\n else {\n this.internalElements.push(element);\n }\n this.markChanged();\n };\n /**\n * `Checks whether array contains the element`.\n * @private\n */\n PdfArray.prototype.indexOf = function (element) {\n return this.internalElements.indexOf(element);\n };\n /**\n * `Removes` element from the array.\n * @private\n */\n PdfArray.prototype.remove = function (element) {\n // if (element === null) {\n // throw new Error('ArgumentNullException : element');\n // }\n var index = this.internalElements.indexOf(element);\n // if (index >= 0 && index < this.internalElements.length) {\n this.internalElements[index] = null;\n // }\n this.markChanged();\n };\n /**\n * `Remove` the element from the array by its index.\n * @private\n */\n PdfArray.prototype.removeAt = function (index) {\n // this.internalElements.RemoveAt(index);\n if (this.internalElements.length > index) {\n var tempArray = [];\n for (var i = 0; i < index; i++) {\n tempArray.push(this.internalElements[i]);\n }\n for (var i = index + 1; i < this.internalElements.length; i++) {\n tempArray.push(this.internalElements[i]);\n }\n this.internalElements = tempArray;\n }\n this.markChanged();\n };\n /**\n * `Clear` the array.\n * @private\n */\n PdfArray.prototype.clear = function () {\n this.internalElements = [];\n this.markChanged();\n };\n /**\n * `Marks` the object changed.\n * @private\n */\n PdfArray.prototype.markChanged = function () {\n this.bChanged = true;\n };\n return PdfArray;\n}());\nexport { PdfArray };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfDictionary } from './pdf-dictionary';\nimport { PdfNumber } from './pdf-number';\nimport { Operators } from './../input-output/pdf-operators';\nimport { PdfName } from './pdf-name';\nimport { PdfArray } from './pdf-array';\nimport { PdfReferenceHolder } from './pdf-reference';\nimport { CompressedStreamWriter } from '@syncfusion/ej2-compression';\n/**\n * `PdfStream` class is used to perform stream related primitive operations.\n * @private\n */\nvar PdfStream = /** @class */ (function (_super) {\n __extends(PdfStream, _super);\n function PdfStream(dictionary, data) {\n var _this = _super.call(this, dictionary) || this;\n //Constants\n /**\n * @hidden\n * @private\n */\n _this.dicPrefix = 'stream';\n /**\n * @hidden\n * @private\n */\n _this.dicSuffix = 'endstream';\n /**\n * Internal variable to hold `cloned object`.\n * @private\n */\n _this.clonedObject2 = null;\n /**\n * @hidden\n * @private\n */\n _this.bCompress = true;\n /**\n * @hidden\n * @private\n */\n _this.isImageStream = false;\n if (typeof dictionary !== 'undefined' || typeof data !== 'undefined') {\n _this.dataStream2 = [];\n _this.dataStream2 = data;\n _this.bCompress2 = false;\n }\n else {\n _this.dataStream2 = [];\n _this.bCompress2 = true;\n //Pending\n }\n return _this;\n }\n Object.defineProperty(PdfStream.prototype, \"internalStream\", {\n /**\n * Gets the `internal` stream.\n * @private\n */\n get: function () {\n return this.dataStream2;\n },\n set: function (value) {\n this.dataStream2 = [];\n this.dataStream2 = value;\n this.modify();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStream.prototype, \"isImage\", {\n /**\n * Gets or sets 'is image' flag.\n * @private\n */\n get: function () {\n return this.isImageStream;\n },\n set: function (value) {\n this.isImageStream = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStream.prototype, \"compress\", {\n /**\n * Gets or sets `compression` flag.\n * @private\n */\n get: function () {\n return this.bCompress;\n },\n set: function (value) {\n this.bCompress = value;\n this.modify();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStream.prototype, \"data\", {\n /**\n * Gets or sets the `data`.\n * @private\n */\n get: function () {\n return this.dataStream2;\n },\n set: function (value) {\n this.dataStream2 = [];\n this.dataStream2 = value;\n this.modify();\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Clear` the internal stream.\n * @private\n */\n PdfStream.prototype.clearStream = function () {\n this.internalStream = [];\n this.remove(this.dictionaryProperties.filter);\n this.bCompress = true;\n this.modify();\n };\n /**\n * `Writes` the specified string.\n * @private\n */\n PdfStream.prototype.write = function (text) {\n if (text == null) {\n throw new Error('ArgumentNullException:text');\n }\n if (text.length <= 0) {\n throw new Error('ArgumentException: Can not write an empty string, text');\n }\n this.dataStream2.push(text);\n this.modify();\n };\n /**\n * `Compresses the content` if it's required.\n * @private\n */\n PdfStream.prototype.compressContent = function (data, writer) {\n if (this.bCompress) {\n var sw = new CompressedStreamWriter();\n // data = 'Hello World!!!';\n sw.write(data, 0, data.length);\n sw.close();\n data = sw.getCompressedString;\n this.addFilter(this.dictionaryProperties.flatedecode);\n }\n return data;\n };\n /**\n * `Adds a filter` to the filter array.\n * @private\n */\n PdfStream.prototype.addFilter = function (filterName) {\n var obj = this.items.getValue(this.dictionaryProperties.filter);\n if (obj instanceof PdfReferenceHolder) {\n var rh = obj;\n obj = rh.object;\n }\n var array = obj;\n var name = obj;\n if (name != null) {\n array = new PdfArray();\n array.insert(0, name);\n this.items.setValue(this.dictionaryProperties.filter, array);\n }\n name = new PdfName(filterName);\n if (array == null) {\n this.items.setValue(this.dictionaryProperties.filter, name);\n }\n else {\n array.insert(0, name);\n }\n };\n /**\n * `Saves` the object using the specified writer.\n * @private\n */\n PdfStream.prototype.save = function (writer) {\n var data = '';\n for (var i = 0; i < this.data.length; i++) {\n data = data + this.data[i];\n }\n if (data.length > 1 && !this.isImage) {\n data = 'q\\r\\n' + data + 'Q\\r\\n';\n }\n data = this.compressContent(data, writer);\n var length = data.length;\n this.items.setValue(this.dictionaryProperties.length, new PdfNumber(length));\n _super.prototype.save.call(this, writer, false);\n writer.write(this.dicPrefix);\n writer.write(Operators.newLine);\n if (data.length > 0) {\n writer.write(data);\n }\n writer.write(Operators.newLine);\n writer.write(this.dicSuffix);\n writer.write(Operators.newLine);\n };\n /**\n * Converts `bytes to string`.\n * @private\n */\n PdfStream.bytesToString = function (byteArray) {\n var output = '';\n for (var i = 0; i < byteArray.length; i++) {\n output = output + String.fromCharCode(byteArray[i]);\n }\n return output;\n };\n return PdfStream;\n}(PdfDictionary));\nexport { PdfStream };\n","/**\n * public Enum for `PdfHorizontalAlignment`.\n * @private\n */\nexport var PdfHorizontalAlignment;\n(function (PdfHorizontalAlignment) {\n /**\n * Specifies the type of `Left`.\n * @private\n */\n PdfHorizontalAlignment[PdfHorizontalAlignment[\"Left\"] = 0] = \"Left\";\n /**\n * Specifies the type of `Center`.\n * @private\n */\n PdfHorizontalAlignment[PdfHorizontalAlignment[\"Center\"] = 1] = \"Center\";\n /**\n * Specifies the type of `Right`.\n * @private\n */\n PdfHorizontalAlignment[PdfHorizontalAlignment[\"Right\"] = 2] = \"Right\";\n})(PdfHorizontalAlignment || (PdfHorizontalAlignment = {}));\n/**\n * public Enum for `PdfVerticalAlignment`.\n * @private\n */\nexport var PdfVerticalAlignment;\n(function (PdfVerticalAlignment) {\n /**\n * Specifies the type of `Top`.\n * @private\n */\n PdfVerticalAlignment[PdfVerticalAlignment[\"Top\"] = 0] = \"Top\";\n /**\n * Specifies the type of `Middle`.\n * @private\n */\n PdfVerticalAlignment[PdfVerticalAlignment[\"Middle\"] = 1] = \"Middle\";\n /**\n * Specifies the type of `Bottom`.\n * @private\n */\n PdfVerticalAlignment[PdfVerticalAlignment[\"Bottom\"] = 2] = \"Bottom\";\n})(PdfVerticalAlignment || (PdfVerticalAlignment = {}));\n/**\n * public Enum for `public`.\n * @private\n */\nexport var PdfTextAlignment;\n(function (PdfTextAlignment) {\n /**\n * Specifies the type of `Left`.\n * @private\n */\n PdfTextAlignment[PdfTextAlignment[\"Left\"] = 0] = \"Left\";\n /**\n * Specifies the type of `Center`.\n * @private\n */\n PdfTextAlignment[PdfTextAlignment[\"Center\"] = 1] = \"Center\";\n /**\n * Specifies the type of `Right`.\n * @private\n */\n PdfTextAlignment[PdfTextAlignment[\"Right\"] = 2] = \"Right\";\n /**\n * Specifies the type of `Justify`.\n * @private\n */\n PdfTextAlignment[PdfTextAlignment[\"Justify\"] = 3] = \"Justify\";\n})(PdfTextAlignment || (PdfTextAlignment = {}));\n/**\n * public Enum for `TextRenderingMode`.\n * @private\n */\nexport var TextRenderingMode;\n(function (TextRenderingMode) {\n /**\n * Specifies the type of `Fill`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"Fill\"] = 0] = \"Fill\";\n /**\n * Specifies the type of `Stroke`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"Stroke\"] = 1] = \"Stroke\";\n /**\n * Specifies the type of `FillStroke`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"FillStroke\"] = 2] = \"FillStroke\";\n /**\n * Specifies the type of `None`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"None\"] = 3] = \"None\";\n /**\n * Specifies the type of `ClipFlag`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"ClipFlag\"] = 4] = \"ClipFlag\";\n /**\n * Specifies the type of `ClipFill`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"ClipFill\"] = 4] = \"ClipFill\";\n /**\n * Specifies the type of `ClipStroke`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"ClipStroke\"] = 5] = \"ClipStroke\";\n /**\n * Specifies the type of `ClipFillStroke`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"ClipFillStroke\"] = 6] = \"ClipFillStroke\";\n /**\n * Specifies the type of `Clip`.\n * @private\n */\n TextRenderingMode[TextRenderingMode[\"Clip\"] = 7] = \"Clip\";\n})(TextRenderingMode || (TextRenderingMode = {}));\n/**\n * public Enum for `PdfLineJoin`.\n * @private\n */\nexport var PdfLineJoin;\n(function (PdfLineJoin) {\n /**\n * Specifies the type of `Miter`.\n * @private\n */\n PdfLineJoin[PdfLineJoin[\"Miter\"] = 0] = \"Miter\";\n /**\n * Specifies the type of `Round`.\n * @private\n */\n PdfLineJoin[PdfLineJoin[\"Round\"] = 1] = \"Round\";\n /**\n * Specifies the type of `Bevel`.\n * @private\n */\n PdfLineJoin[PdfLineJoin[\"Bevel\"] = 2] = \"Bevel\";\n})(PdfLineJoin || (PdfLineJoin = {}));\n/**\n * public Enum for `PdfLineCap`.\n * @private\n */\nexport var PdfLineCap;\n(function (PdfLineCap) {\n /**\n * Specifies the type of `Flat`.\n * @private\n */\n PdfLineCap[PdfLineCap[\"Flat\"] = 0] = \"Flat\";\n /**\n * Specifies the type of `Round`.\n * @private\n */\n PdfLineCap[PdfLineCap[\"Round\"] = 1] = \"Round\";\n /**\n * Specifies the type of `Square`.\n * @private\n */\n PdfLineCap[PdfLineCap[\"Square\"] = 2] = \"Square\";\n})(PdfLineCap || (PdfLineCap = {}));\n/**\n * public Enum for `PdfDashStyle`.\n * @private\n */\nexport var PdfDashStyle;\n(function (PdfDashStyle) {\n /**\n * Specifies the type of `Solid`.\n * @private\n */\n PdfDashStyle[PdfDashStyle[\"Solid\"] = 0] = \"Solid\";\n /**\n * Specifies the type of `Dash`.\n * @private\n */\n PdfDashStyle[PdfDashStyle[\"Dash\"] = 1] = \"Dash\";\n /**\n * Specifies the type of `Dot`.\n * @private\n */\n PdfDashStyle[PdfDashStyle[\"Dot\"] = 2] = \"Dot\";\n /**\n * Specifies the type of `DashDot`.\n * @private\n */\n PdfDashStyle[PdfDashStyle[\"DashDot\"] = 3] = \"DashDot\";\n /**\n * Specifies the type of `DashDotDot`.\n * @private\n */\n PdfDashStyle[PdfDashStyle[\"DashDotDot\"] = 4] = \"DashDotDot\";\n /**\n * Specifies the type of `Custom`.\n * @private\n */\n PdfDashStyle[PdfDashStyle[\"Custom\"] = 5] = \"Custom\";\n})(PdfDashStyle || (PdfDashStyle = {}));\n/**\n * public Enum for `PdfFillMode`.\n * @private\n */\nexport var PdfFillMode;\n(function (PdfFillMode) {\n /**\n * Specifies the type of `Winding`.\n * @private\n */\n PdfFillMode[PdfFillMode[\"Winding\"] = 0] = \"Winding\";\n /**\n * Specifies the type of `Alternate`.\n * @private\n */\n PdfFillMode[PdfFillMode[\"Alternate\"] = 1] = \"Alternate\";\n})(PdfFillMode || (PdfFillMode = {}));\n/**\n * public Enum for `PdfColorSpace`.\n * @private\n */\nexport var PdfColorSpace;\n(function (PdfColorSpace) {\n /**\n * Specifies the type of `Rgb`.\n * @private\n */\n PdfColorSpace[PdfColorSpace[\"Rgb\"] = 0] = \"Rgb\";\n /**\n * Specifies the type of `Cmyk`.\n * @private\n */\n PdfColorSpace[PdfColorSpace[\"Cmyk\"] = 1] = \"Cmyk\";\n /**\n * Specifies the type of `GrayScale`.\n * @private\n */\n PdfColorSpace[PdfColorSpace[\"GrayScale\"] = 2] = \"GrayScale\";\n /**\n * Specifies the type of `Indexed`.\n * @private\n */\n PdfColorSpace[PdfColorSpace[\"Indexed\"] = 3] = \"Indexed\";\n})(PdfColorSpace || (PdfColorSpace = {}));\n/**\n * public Enum for `PdfBlendMode`.\n * @private\n */\nexport var PdfBlendMode;\n(function (PdfBlendMode) {\n /**\n * Specifies the type of `Normal`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Normal\"] = 0] = \"Normal\";\n /**\n * Specifies the type of `Multiply`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Multiply\"] = 1] = \"Multiply\";\n /**\n * Specifies the type of `Screen`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Screen\"] = 2] = \"Screen\";\n /**\n * Specifies the type of `Overlay`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Overlay\"] = 3] = \"Overlay\";\n /**\n * Specifies the type of `Darken`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Darken\"] = 4] = \"Darken\";\n /**\n * Specifies the type of `Lighten`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Lighten\"] = 5] = \"Lighten\";\n /**\n * Specifies the type of `ColorDodge`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"ColorDodge\"] = 6] = \"ColorDodge\";\n /**\n * Specifies the type of `ColorBurn`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"ColorBurn\"] = 7] = \"ColorBurn\";\n /**\n * Specifies the type of `HardLight`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"HardLight\"] = 8] = \"HardLight\";\n /**\n * Specifies the type of `SoftLight`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"SoftLight\"] = 9] = \"SoftLight\";\n /**\n * Specifies the type of `Difference`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Difference\"] = 10] = \"Difference\";\n /**\n * Specifies the type of `Exclusion`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Exclusion\"] = 11] = \"Exclusion\";\n /**\n * Specifies the type of `Hue`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Hue\"] = 12] = \"Hue\";\n /**\n * Specifies the type of `Saturation`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Saturation\"] = 13] = \"Saturation\";\n /**\n * Specifies the type of `Color`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Color\"] = 14] = \"Color\";\n /**\n * Specifies the type of `Luminosity`.\n * @private\n */\n PdfBlendMode[PdfBlendMode[\"Luminosity\"] = 15] = \"Luminosity\";\n})(PdfBlendMode || (PdfBlendMode = {}));\n/**\n * public Enum for `PdfGraphicsUnit`.\n * @private\n */\nexport var PdfGraphicsUnit;\n(function (PdfGraphicsUnit) {\n /**\n * Specifies the type of `Centimeter`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Centimeter\"] = 0] = \"Centimeter\";\n /**\n * Specifies the type of `Pica`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Pica\"] = 1] = \"Pica\";\n /**\n * Specifies the type of `Pixel`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Pixel\"] = 2] = \"Pixel\";\n /**\n * Specifies the type of `Point`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Point\"] = 3] = \"Point\";\n /**\n * Specifies the type of `Inch`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Inch\"] = 4] = \"Inch\";\n /**\n * Specifies the type of `Document`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Document\"] = 5] = \"Document\";\n /**\n * Specifies the type of `Millimeter`.\n * @private\n */\n PdfGraphicsUnit[PdfGraphicsUnit[\"Millimeter\"] = 6] = \"Millimeter\";\n})(PdfGraphicsUnit || (PdfGraphicsUnit = {}));\n/**\n * public Enum for `PdfGridImagePosition`.\n * @private\n */\nexport var PdfGridImagePosition;\n(function (PdfGridImagePosition) {\n /**\n * Specifies the type of `Fit`.\n * @private\n */\n PdfGridImagePosition[PdfGridImagePosition[\"Fit\"] = 0] = \"Fit\";\n /**\n * Specifies the type of `Center`.\n * @private\n */\n PdfGridImagePosition[PdfGridImagePosition[\"Center\"] = 1] = \"Center\";\n /**\n * Specifies the type of `Stretch`.\n * @private\n */\n PdfGridImagePosition[PdfGridImagePosition[\"Stretch\"] = 2] = \"Stretch\";\n /**\n * Specifies the type of `Tile`.\n * @private\n */\n PdfGridImagePosition[PdfGridImagePosition[\"Tile\"] = 3] = \"Tile\";\n})(PdfGridImagePosition || (PdfGridImagePosition = {}));\n","import { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { PdfStream } from './../primitives/pdf-stream';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { PdfString } from './../primitives/pdf-string';\n/**\n * `PdfReference` class is used to perform reference related primitive operations.\n * @private\n */\nvar PdfReference = /** @class */ (function () {\n function PdfReference(objNumber, genNumber) {\n /**\n * Holds the `index` number of the object.\n * @default -1\n * @private\n */\n this.index3 = -1;\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.position3 = -1;\n /**\n * Holds the `object number`.\n * @default 0\n * @private\n */\n this.objNumber = 0;\n /**\n * Holds the `generation number` of the object.\n * @default 0\n * @private\n */\n this.genNumber = 0;\n if (typeof objNumber === 'number' && typeof genNumber === 'number') {\n this.objNumber = objNumber;\n this.genNumber = genNumber;\n // } else if (typeof objNum === 'string' && typeof genNum === 'string') {\n }\n else {\n this.objNumber = Number(objNumber);\n this.genNumber = Number(genNumber);\n }\n }\n Object.defineProperty(PdfReference.prototype, \"status\", {\n //Property\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status3;\n },\n set: function (value) {\n this.status3 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReference.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving3;\n },\n set: function (value) {\n this.isSaving3 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReference.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index3;\n },\n set: function (value) {\n this.index3 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReference.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position3;\n },\n set: function (value) {\n this.position3 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReference.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n var returnObject3 = null;\n return returnObject3;\n },\n enumerable: true,\n configurable: true\n });\n //IPdfPrimitives methods\n /**\n * `Saves` the object.\n * @private\n */\n PdfReference.prototype.save = function (writer) {\n writer.write(this.toString());\n };\n /**\n * Returns a `string` representing the object.\n * @private\n */\n PdfReference.prototype.toString = function () {\n return this.objNumber.toString() + ' ' + this.genNumber.toString() + ' R';\n };\n /**\n * Creates a `deep copy` of the IPdfPrimitive object.\n * @private\n */\n PdfReference.prototype.clone = function (crossTable) {\n return null;\n };\n return PdfReference;\n}());\nexport { PdfReference };\n/**\n * `PdfReferenceHolder` class is used to perform reference holder related primitive operations.\n * @private\n */\nvar PdfReferenceHolder = /** @class */ (function () {\n function PdfReferenceHolder(obj1, obj2) {\n /**\n * Holds the `index` number of the object.\n * @default -1\n * @private\n */\n this.index4 = -1;\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.position4 = -1;\n /**\n * The `index` of the object within the object collection.\n * @default -1\n * @private\n */\n this.objectIndex = -1;\n /**\n * @hidden\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n // if (typeof obj2 === 'undefined') {\n if (obj1 instanceof PdfArray\n || obj1 instanceof PdfDictionary\n || obj1 instanceof PdfName\n || obj1 instanceof PdfNumber\n || obj1 instanceof PdfStream\n || obj1 instanceof PdfReference\n || obj1 instanceof PdfString) {\n // if (obj1 === null) {\n // throw new Error('ArgumentNullException : obj');\n // }\n this.primitiveObject = obj1;\n // } else if (obj1 instanceof PdfPageBase\n // || obj1 instanceof PdfPage\n // || obj1 instanceof PdfSection\n // || obj1 instanceof PdfSectionCollection) {\n }\n else {\n var tempObj = obj1;\n this.constructor(tempObj.element);\n }\n // }\n // else {\n // if (obj2 === null) {\n // throw new Error('ArgumentNullException : crossTable');\n // }\n // if (obj1 === null) {\n // throw new Error('ArgumentNullException : reference');\n // }\n // this.crossTable = obj2;\n // let tempObj1 : PdfReference = obj1;\n // this.reference = tempObj1;\n // }\n }\n Object.defineProperty(PdfReferenceHolder.prototype, \"status\", {\n //Properties\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.status4;\n },\n set: function (value) {\n this.status4 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.isSaving4;\n },\n set: function (value) {\n this.isSaving4 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index4;\n },\n set: function (value) {\n this.index4 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.position4;\n },\n set: function (value) {\n this.position4 = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n return null;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"object\", {\n /**\n * Gets the `object` the reference is of.\n * @private\n */\n get: function () {\n // if ((this.reference != null) || (this.object == null)) {\n // this.object = this.GetterObject();\n // }\n return this.primitiveObject;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"reference\", {\n /**\n * Gets the `reference`.\n * @private\n */\n get: function () {\n return this.pdfReference;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"index\", {\n /**\n * Gets the `index` of the object.\n * @private\n */\n get: function () {\n // let items : PdfMainObjectCollection = this.crossTable.PdfObjects;\n // this.objectIndex = items.GetObjectIndex(this.reference);\n // if (this.objectIndex < 0) {\n // let obj : IPdfPrimitive = this.crossTable.GetObject(this.reference);\n // this.objectIndex = items.Count - 1;\n // }\n return this.objectIndex;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfReferenceHolder.prototype, \"element\", {\n /**\n * Gets the `element`.\n * @private\n */\n get: function () {\n return this.primitiveObject;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Writes` a reference into a PDF document.\n * @private\n */\n PdfReferenceHolder.prototype.save = function (writer) {\n // if (writer == null) {\n // throw new Error('ArgumentNullException : writer');\n // }\n var position = writer.position;\n var cTable = writer.document.crossTable;\n // if (cTable.Document instanceof PdfDocument) {\n this.object.isSaving = true;\n // }\n var reference = null;\n // if (writer.Document.FileStructure.IncrementalUpdate === true && writer.Document.isStreamCopied === true) {\n // if (this.reference === null) {\n // reference = cTable.GetReference(this.Object);\n // } else {\n // reference = this.reference;\n // }\n // } else {\n // reference = cTable.GetReference(this.Object);\n // }\n // if (!(writer.Document.FileStructure.IncrementalUpdate === true && writer.Document.isStreamCopied === true)) {\n reference = cTable.getReference(this.object);\n // }\n // if (writer.Position !== position) {\n // writer.Position = position;\n // }\n reference.save(writer);\n };\n /**\n * Creates a `copy of PdfReferenceHolder`.\n * @private\n */\n PdfReferenceHolder.prototype.clone = function (crossTable) {\n var refHolder = null;\n var temp = null;\n var refNum = '';\n var reference = null;\n // Restricts addition of same object multiple time.\n /* if (this.Reference != null && this.crossTable != null && this.crossTable.PageCorrespondance.containsKey(this.Reference)) {\n refHolder = new PdfReferenceHolder(this.crossTable.PageCorrespondance.getValue(this.Reference) as PdfReference, crossTable);\n return refHolder;\n }\n if (Object instanceof PdfNumber) {\n return new PdfNumber((Object as PdfNumber).IntValue);\n }\n */\n // if (Object instanceof PdfDictionary) {\n // // Meaning the referenced page is not available for import.\n // let type : PdfName = new PdfName(this.dictionaryProperties.type);\n // let dict : PdfDictionary = Object as PdfDictionary;\n // if (dict.ContainsKey(type)) {\n // let pageName : PdfName = dict.Items.getValue(type.Value) as PdfName;\n // if (pageName !== null) {\n // if (pageName.Value === 'Page') {\n // return new PdfNull();\n // }\n // }\n // }\n // }\n /* if (Object instanceof PdfName) {\n return new PdfName ((Object as PdfName ).Value);\n }\n */\n // Resolves circular references.\n // if (crossTable.PrevReference !== null && (crossTable.PrevReference.indexOf(this.Reference) !== -1)) {\n // let obj : IPdfPrimitive = this.crossTable.GetObject(this.Reference).ClonedObject;\n // if (obj !== null) {\n // reference = crossTable.GetReference(obj);\n // return new PdfReferenceHolder(reference, crossTable);\n // } else {\n // return new PdfNull();\n // }\n // }\n /*if (this.Reference !== null) {\n crossTable.PrevReference.push(this.Reference);\n }\n reference = crossTable.GetReference(temp);\n refHolder = new PdfReferenceHolder(reference, crossTable);\n return refHolder;\n */\n return null;\n };\n return PdfReferenceHolder;\n}());\nexport { PdfReferenceHolder };\n","import { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { PdfName } from './../primitives/pdf-name';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\n/**\n * `PdfAction` class represents base class for all action types.\n * @private\n */\nvar PdfAction = /** @class */ (function () {\n // Constructors\n /**\n * Initialize instance for `Action` class.\n * @private\n */\n function PdfAction() {\n /**\n * Specifies the Next `action` to perform.\n * @private\n */\n this.action = null;\n /**\n * Specifies the Internal variable to store `dictionary properties`.\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n // super(); -> Object()\n this.initialize();\n }\n Object.defineProperty(PdfAction.prototype, \"next\", {\n // Properties\n /**\n * Gets and Sets the `Next` action to perform.\n * @private\n */\n get: function () {\n return this.action;\n },\n set: function (value) {\n // if (this.action !== value) {\n this.action = value;\n this.dictionary.items.setValue(this.dictionaryProperties.next, new PdfReferenceHolder(this.action));\n // }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAction.prototype, \"dictionary\", {\n /**\n * Gets and Sets the instance of PdfDictionary class for `Dictionary`.\n * @private\n */\n get: function () {\n if (typeof this.pdfDictionary === 'undefined') {\n this.pdfDictionary = new PdfDictionary();\n }\n return this.pdfDictionary;\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Initialize` the action type.\n * @private\n */\n PdfAction.prototype.initialize = function () {\n this.dictionary.items.setValue(this.dictionaryProperties.type, new PdfName(this.dictionaryProperties.action));\n };\n Object.defineProperty(PdfAction.prototype, \"element\", {\n // IPdfWrapper Members\n /**\n * Gets the `Element` as IPdfPrimitive class.\n * @private\n */\n get: function () {\n return this.dictionary;\n },\n enumerable: true,\n configurable: true\n });\n return PdfAction;\n}());\nexport { PdfAction };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfAction } from './action';\nimport { PdfString } from './../primitives/pdf-string';\nimport { PdfName } from './../primitives/pdf-name';\n/**\n * `PdfUriAction` class for initialize the uri related internals.\n * @private\n */\nvar PdfUriAction = /** @class */ (function (_super) {\n __extends(PdfUriAction, _super);\n function PdfUriAction(uri) {\n var _this = _super.call(this) || this;\n // Fields\n /**\n * Specifies the `uri` string.\n * @default ''.\n * @private\n */\n _this.uniformResourceIdentifier = '';\n return _this;\n }\n Object.defineProperty(PdfUriAction.prototype, \"uri\", {\n // Properties\n /**\n * Gets and Sets the value of `Uri`.\n * @private\n */\n get: function () {\n return this.uniformResourceIdentifier;\n },\n set: function (value) {\n this.uniformResourceIdentifier = value;\n this.dictionary.items.setValue(this.dictionaryProperties.uri, new PdfString(this.uniformResourceIdentifier));\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Initialize` the internals.\n * @private\n */\n PdfUriAction.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n this.dictionary.items.setValue(this.dictionaryProperties.s, new PdfName(this.dictionaryProperties.uri));\n };\n return PdfUriAction;\n}(PdfAction));\nexport { PdfUriAction };\n","import { PdfColorSpace } from './enum';\nimport { Operators } from './../input-output/pdf-operators';\nimport { Dictionary } from './../collections/dictionary';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PdfArray } from './../primitives/pdf-array';\n/**\n * Implements structures and routines working with `color`.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * // set the font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * //\n * // set color\n * let brushColor : PdfColor = new PdfColor(0, 0, 0);\n * //\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(brushColor);\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n * @default black color\n */\nvar PdfColor = /** @class */ (function () {\n function PdfColor(color1, color2, color3, color4) {\n if (color1 instanceof PdfColor) {\n this.redColor = color1.r;\n this.greenColor = color1.g;\n this.blueColor = color1.b;\n this.grayColor = color1.gray;\n this.alpha = color1.alpha;\n this.filled = (this.alpha !== 0);\n }\n else if (typeof color1 === 'number' && typeof color2 === 'number' && typeof color3 === 'number' &&\n typeof color4 === 'undefined') {\n this.constructor(PdfColor.maxColourChannelValue, color1, color2, color3); //doubt-byte/float\n }\n else if (typeof color1 === 'number' && typeof color2 === 'number' && typeof color3 === 'number' && typeof color4 === 'number') {\n this.redColor = color2;\n this.cyanColor = 0;\n this.greenColor = color3;\n this.magentaColor = 0;\n this.blueColor = color4;\n this.yellowColor = 0;\n this.blackColor = 0;\n this.grayColor = 0;\n this.alpha = color1;\n this.filled = true;\n this.assignCMYK(color2, color3, color4);\n }\n }\n /**\n * `Calculate and assign` cyan, megenta, yellow colors from rgb values..\n * @private\n */\n PdfColor.prototype.assignCMYK = function (r, g, b) {\n var red = r / PdfColor.maxColourChannelValue;\n var green = g / PdfColor.maxColourChannelValue;\n var blue = b / PdfColor.maxColourChannelValue;\n var black = PdfNumber.min(1 - red, 1 - green, 1 - blue);\n var cyan = (black === 1.0) ? 0 : (1 - red - black) / (1 - black);\n var magenta = (black === 1.0) ? 0 : (1 - green - black) / (1 - black);\n var yellow = (black === 1.0) ? 0 : (1 - blue - black) / (1 - black);\n this.blackColor = black;\n this.cyanColor = cyan;\n this.magentaColor = magenta;\n this.yellowColor = yellow;\n };\n Object.defineProperty(PdfColor.prototype, \"r\", {\n //Properties\n // public static get Empty():PdfColor\n // {\n // return this.s_emptyColor\n // }\n /**\n * Gets or sets `Red` channel value.\n * @private\n */\n get: function () {\n return this.redColor;\n },\n set: function (value) {\n this.redColor = value;\n this.assignCMYK(this.redColor, this.greenColor, this.blueColor);\n this.filled = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"red\", {\n /**\n * Gets the `Red` color\n * @private\n */\n get: function () {\n return (this.r / PdfColor.maxColourChannelValue);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"b\", {\n /**\n * Gets or sets `Blue` channel value.\n * @private\n */\n get: function () {\n return this.blueColor;\n },\n set: function (value) {\n this.blueColor = value;\n this.assignCMYK(this.redColor, this.greenColor, this.blueColor);\n this.filled = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"blue\", {\n /**\n * Gets the `blue` color.\n * @private\n */\n get: function () {\n return (this.b / PdfColor.maxColourChannelValue);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"g\", {\n /**\n * Gets or sets `Green` channel value.\n * @private\n */\n get: function () {\n return this.greenColor;\n },\n set: function (value) {\n this.greenColor = value;\n this.assignCMYK(this.redColor, this.greenColor, this.blueColor);\n this.filled = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"green\", {\n /**\n * Gets the `Green` color.\n * @private\n */\n get: function () {\n return (this.g / PdfColor.maxColourChannelValue);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"gray\", {\n /**\n * Gets or sets `Gray` channel value.\n * @private\n */\n get: function () {\n return ((((this.redColor + this.greenColor) + this.blueColor)) / (PdfColor.maxColourChannelValue * 3));\n },\n set: function (value) {\n if (value < 0) {\n this.grayColor = 0;\n }\n else if (value > 1) {\n this.grayColor = 1;\n }\n else {\n this.grayColor = value;\n }\n this.r = (this.grayColor * PdfColor.maxColourChannelValue);\n this.g = (this.grayColor * PdfColor.maxColourChannelValue);\n this.b = (this.grayColor * PdfColor.maxColourChannelValue);\n this.assignCMYK(this.redColor, this.greenColor, this.blueColor);\n this.filled = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"isEmpty\", {\n /**\n * Gets whether the PDFColor `is Empty` or not.\n * @private\n */\n get: function () {\n return !this.filled;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfColor.prototype, \"a\", {\n /**\n * Gets or sets `Alpha` channel value.\n * @private\n */\n get: function () {\n return this.alpha;\n },\n set: function (value) {\n if (value < 0) {\n this.alpha = 0;\n }\n else {\n // if (this.alpha !== value) {\n this.alpha = value;\n // }\n }\n this.filled = true;\n },\n enumerable: true,\n configurable: true\n });\n //Public methods\n /**\n * Converts `PDFColor to PDF string` representation.\n * @private\n */\n PdfColor.prototype.toString = function (colorSpace, stroke) {\n if (this.isEmpty) {\n return '';\n }\n return this.rgbToString(stroke);\n };\n /**\n * Sets `RGB` color.\n * @private\n */\n PdfColor.prototype.rgbToString = function (ifStroking) {\n var r = this.r;\n var g = this.g;\n var b = this.b;\n var key = (r << 16) + (g << 8) + b;\n if (ifStroking) {\n key += 1 << 24;\n }\n var colour = '';\n var obj = null;\n if (PdfColor.rgbStrings.containsKey(key)) {\n obj = PdfColor.rgbStrings.getValue(key);\n }\n if (obj == null) {\n var red = r / PdfColor.maxColourChannelValue;\n var green = g / PdfColor.maxColourChannelValue;\n var blue = b / PdfColor.maxColourChannelValue;\n if (ifStroking) {\n colour = red.toString() + ' ' + green.toString() + ' ' + blue.toString() + ' RG';\n }\n else {\n colour = red.toString() + ' ' + green.toString() + ' ' + blue.toString() + ' rg';\n }\n PdfColor.rgbStrings.setValue(key, colour);\n }\n else {\n colour = obj.toString();\n }\n return colour + Operators.newLine;\n };\n /**\n * Converts `colour to a PDF array`.\n * @private\n */\n PdfColor.prototype.toArray = function (colorSpace) {\n var array = new PdfArray();\n switch (colorSpace) {\n case PdfColorSpace.Rgb:\n array.add(new PdfNumber(this.red));\n array.add(new PdfNumber(this.green));\n array.add(new PdfNumber(this.blue));\n break;\n default:\n throw new Error('NotSupportedException : Unsupported colour space.');\n }\n return array;\n };\n //Fields\n /**\n * Holds `RGB colors` converted into strings.\n * @private\n */\n PdfColor.rgbStrings = new Dictionary();\n /**\n * Holds Gray scale colors converted into strings for `stroking`.\n * @private\n */\n PdfColor.grayStringsSroke = new Dictionary();\n /**\n * Holds Gray scale colors converted into strings for `filling`.\n * @private\n */\n PdfColor.grayStringsFill = new Dictionary();\n /**\n * `Max value` of color channel.\n * @private\n */\n PdfColor.maxColourChannelValue = 255.0;\n return PdfColor;\n}());\nexport { PdfColor };\n","/**\n * public Enum for `PdfFontStyle`.\n * @private\n */\nexport var PdfFontStyle;\n(function (PdfFontStyle) {\n /**\n * Specifies the type of `Regular`.\n * @private\n */\n PdfFontStyle[PdfFontStyle[\"Regular\"] = 0] = \"Regular\";\n /**\n * Specifies the type of `Bold`.\n * @private\n */\n PdfFontStyle[PdfFontStyle[\"Bold\"] = 1] = \"Bold\";\n /**\n * Specifies the type of `Italic`.\n * @private\n */\n PdfFontStyle[PdfFontStyle[\"Italic\"] = 2] = \"Italic\";\n /**\n * Specifies the type of `Underline`.\n * @private\n */\n PdfFontStyle[PdfFontStyle[\"Underline\"] = 4] = \"Underline\";\n /**\n * Specifies the type of `Strikeout`.\n * @private\n */\n PdfFontStyle[PdfFontStyle[\"Strikeout\"] = 8] = \"Strikeout\";\n})(PdfFontStyle || (PdfFontStyle = {}));\n/**\n * Specifies the font family from the standard font.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * // create new standard font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * ```\n */\nexport var PdfFontFamily;\n(function (PdfFontFamily) {\n /**\n * Specifies the `Helvetica` font.\n */\n PdfFontFamily[PdfFontFamily[\"Helvetica\"] = 0] = \"Helvetica\";\n /**\n * Specifies the `Courier` font.\n */\n PdfFontFamily[PdfFontFamily[\"Courier\"] = 1] = \"Courier\";\n /**\n * Specifies the `TimesRoman` font.\n */\n PdfFontFamily[PdfFontFamily[\"TimesRoman\"] = 2] = \"TimesRoman\";\n /**\n * Specifies the `Symbol` font.\n */\n PdfFontFamily[PdfFontFamily[\"Symbol\"] = 3] = \"Symbol\";\n /**\n * Specifies the `ZapfDingbats` font.\n */\n PdfFontFamily[PdfFontFamily[\"ZapfDingbats\"] = 4] = \"ZapfDingbats\";\n})(PdfFontFamily || (PdfFontFamily = {}));\n/**\n * public Enum for `PdfFontType`.\n * @private\n */\nexport var PdfFontType;\n(function (PdfFontType) {\n /**\n * Specifies the type of `Standard`.\n * @private\n */\n PdfFontType[PdfFontType[\"Standard\"] = 0] = \"Standard\";\n /**\n * Specifies the type of `TrueType`.\n * @private\n */\n PdfFontType[PdfFontType[\"TrueType\"] = 1] = \"TrueType\";\n /**\n * Specifies the type of `TrueTypeEmbedded`.\n * @private\n */\n PdfFontType[PdfFontType[\"TrueTypeEmbedded\"] = 2] = \"TrueTypeEmbedded\";\n})(PdfFontType || (PdfFontType = {}));\n/**\n * public Enum for `PdfWordWrapType`.\n * @private\n */\nexport var PdfWordWrapType;\n(function (PdfWordWrapType) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n PdfWordWrapType[PdfWordWrapType[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `Word`.\n * @private\n */\n PdfWordWrapType[PdfWordWrapType[\"Word\"] = 1] = \"Word\";\n /**\n * Specifies the type of `WordOnly`.\n * @private\n */\n PdfWordWrapType[PdfWordWrapType[\"WordOnly\"] = 2] = \"WordOnly\";\n /**\n * Specifies the type of `Character`.\n * @private\n */\n PdfWordWrapType[PdfWordWrapType[\"Character\"] = 3] = \"Character\";\n})(PdfWordWrapType || (PdfWordWrapType = {}));\n/**\n * public Enum for `PdfSubSuperScript`.\n * @private\n */\nexport var PdfSubSuperScript;\n(function (PdfSubSuperScript) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n PdfSubSuperScript[PdfSubSuperScript[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `SuperScript`.\n * @private\n */\n PdfSubSuperScript[PdfSubSuperScript[\"SuperScript\"] = 1] = \"SuperScript\";\n /**\n * Specifies the type of `SubScript`.\n * @private\n */\n PdfSubSuperScript[PdfSubSuperScript[\"SubScript\"] = 2] = \"SubScript\";\n})(PdfSubSuperScript || (PdfSubSuperScript = {}));\n/**\n * public Enum for `FontEncoding`.\n * @private\n */\nexport var FontEncoding;\n(function (FontEncoding) {\n /**\n * Specifies the type of `Unknown`.\n * @private\n */\n FontEncoding[FontEncoding[\"Unknown\"] = 0] = \"Unknown\";\n /**\n * Specifies the type of `StandardEncoding`.\n * @private\n */\n FontEncoding[FontEncoding[\"StandardEncoding\"] = 1] = \"StandardEncoding\";\n /**\n * Specifies the type of `MacRomanEncoding`.\n * @private\n */\n FontEncoding[FontEncoding[\"MacRomanEncoding\"] = 2] = \"MacRomanEncoding\";\n /**\n * Specifies the type of `MacExpertEncoding`.\n * @private\n */\n FontEncoding[FontEncoding[\"MacExpertEncoding\"] = 3] = \"MacExpertEncoding\";\n /**\n * Specifies the type of `WinAnsiEncoding`.\n * @private\n */\n FontEncoding[FontEncoding[\"WinAnsiEncoding\"] = 4] = \"WinAnsiEncoding\";\n /**\n * Specifies the type of `PdfDocEncoding`.\n * @private\n */\n FontEncoding[FontEncoding[\"PdfDocEncoding\"] = 5] = \"PdfDocEncoding\";\n /**\n * Specifies the type of `IdentityH`.\n * @private\n */\n FontEncoding[FontEncoding[\"IdentityH\"] = 6] = \"IdentityH\";\n})(FontEncoding || (FontEncoding = {}));\n","/**\n * Coordinates of Position for `PointF`.\n * @private\n */\nvar PointF = /** @class */ (function () {\n function PointF(x, y) {\n if (typeof x === 'undefined') {\n this.x = 0;\n this.y = 0;\n }\n else {\n if (x !== null) {\n this.x = x;\n }\n else {\n this.x = 0;\n }\n if (y !== null) {\n this.y = y;\n }\n else {\n this.y = 0;\n }\n }\n }\n return PointF;\n}());\nexport { PointF };\n/**\n * Width and Height as `Size`.\n * @private\n */\nvar SizeF = /** @class */ (function () {\n function SizeF(width, height) {\n if (typeof height === 'undefined') {\n this.height = 0;\n this.width = 0;\n }\n else {\n if (height !== null) {\n this.height = height;\n }\n else {\n this.height = 0;\n }\n if (width !== null) {\n this.width = width;\n }\n else {\n this.width = 0;\n }\n }\n }\n return SizeF;\n}());\nexport { SizeF };\n/**\n * `RectangleF` with Position and size.\n * @private\n */\nvar RectangleF = /** @class */ (function () {\n function RectangleF(arg1, arg2, arg3, arg4) {\n if (typeof arg1 === typeof arg1 && typeof arg1 === 'undefined') {\n this.x = 0;\n this.y = 0;\n this.height = 0;\n this.width = 0;\n }\n else {\n if (arg1 instanceof PointF && arg2 instanceof SizeF && typeof arg3 === 'undefined') {\n var pointf = arg1;\n this.x = pointf.x;\n this.y = pointf.y;\n var sizef = arg2;\n this.height = sizef.height;\n this.width = sizef.width;\n }\n else {\n var x = arg1;\n var y = arg2;\n var width = arg3;\n var height = arg4;\n this.x = x;\n this.y = y;\n this.height = height;\n this.width = width;\n }\n }\n }\n return RectangleF;\n}());\nexport { RectangleF };\n","/**\n * `PdfBrush` class provides objects used to fill the interiors of graphical shapes such as rectangles,\n * ellipses, pies, polygons, and paths.\n * @private\n */\nvar PdfBrush = /** @class */ (function () {\n /**\n * Creates instanceof `PdfBrush` class.\n * @hidden\n * @private\n */\n function PdfBrush() {\n //\n }\n return PdfBrush;\n}());\nexport { PdfBrush };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfColor } from './../pdf-color';\nimport { PdfColorSpace } from './../enum';\nimport { PdfBrush } from './pdf-brush';\n/**\n * Represents a brush that fills any object with a solid color.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfSolidBrush = /** @class */ (function (_super) {\n __extends(PdfSolidBrush, _super);\n //Constructors\n /**\n * Initializes a new instance of the `PdfSolidBrush` class.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n * @param color color of the brush\n */\n function PdfSolidBrush(color) {\n var _this = _super.call(this) || this;\n _this.pdfColor = color;\n return _this;\n }\n Object.defineProperty(PdfSolidBrush.prototype, \"color\", {\n //Properties\n /**\n * Gets or sets the `color` of the brush.\n * @private\n */\n get: function () {\n return this.pdfColor;\n },\n set: function (value) {\n this.pdfColor = value;\n },\n enumerable: true,\n configurable: true\n });\n //Implementation\n /**\n * `Monitors` the changes of the brush and modify PDF state respectively.\n * @private\n */\n PdfSolidBrush.prototype.monitorChanges = function (brush, streamWriter, getResources, saveChanges, currentColorSpace) {\n if (streamWriter == null) {\n throw new Error('ArgumentNullException:streamWriter');\n }\n var diff = false;\n if (brush == null) {\n diff = true;\n streamWriter.setColorAndSpace(this.pdfColor, currentColorSpace, false);\n return diff;\n }\n else {\n var sBrush = brush;\n diff = true;\n streamWriter.setColorAndSpace(this.pdfColor, currentColorSpace, false);\n return diff;\n }\n };\n /**\n * `Resets` the changes, which were made by the brush.\n * @private\n */\n PdfSolidBrush.prototype.resetChanges = function (streamWriter) {\n streamWriter.setColorAndSpace(new PdfColor(0, 0, 0), PdfColorSpace.Rgb, false);\n };\n return PdfSolidBrush;\n}(PdfBrush));\nexport { PdfSolidBrush };\n","/**\n * PdfStringFormat.ts class for EJ2-PDF\n */\nimport { PdfVerticalAlignment } from './../../graphics/enum';\nimport { PdfSubSuperScript, PdfWordWrapType } from './../../graphics/fonts/enum';\n/**\n * `PdfStringFormat` class represents the text layout information on PDF.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * // set the format for string\n * let stringFormat : PdfStringFormat = new PdfStringFormat();\n * // set the text alignment\n * stringFormat.alignment = PdfTextAlignment.Center;\n * // set the vertical alignment\n * stringFormat.lineAlignment = PdfVerticalAlignment.Middle;\n * //\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10), stringFormat);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfStringFormat = /** @class */ (function () {\n function PdfStringFormat(arg1, arg2) {\n /**\n * The `scaling factor` of the text being drawn.\n * @private\n */\n this.scalingFactor = 100.0;\n if (typeof arg1 === 'undefined') {\n this.internalLineLimit = true;\n this.wordWrapType = PdfWordWrapType.Word;\n }\n else if (typeof arg1 === 'string') {\n this.constructor();\n }\n else {\n if (typeof arg2 === 'undefined') {\n this.constructor();\n this.textAlignment = arg1;\n }\n else {\n this.constructor(arg1);\n this.verticalAlignment = arg2;\n }\n }\n }\n Object.defineProperty(PdfStringFormat.prototype, \"alignment\", {\n //Properties\n /**\n * Gets or sets the `horizontal` text alignment\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * // set the format for string\n * let stringFormat : PdfStringFormat = new PdfStringFormat();\n * // set the text alignment\n * stringFormat.alignment = PdfTextAlignment.Center;\n * //\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10), stringFormat);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.textAlignment;\n },\n set: function (value) {\n this.textAlignment = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"lineAlignment\", {\n /**\n * Gets or sets the `vertical` text alignment.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * // set the format for string\n * let stringFormat : PdfStringFormat = new PdfStringFormat();\n * // set the vertical alignment\n * stringFormat.lineAlignment = PdfVerticalAlignment.Middle;\n * //\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10), stringFormat);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n if (typeof this.verticalAlignment === 'undefined' || this.verticalAlignment == null) {\n return PdfVerticalAlignment.Top;\n }\n else {\n return this.verticalAlignment;\n }\n },\n set: function (value) {\n this.verticalAlignment = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"rightToLeft\", {\n /**\n * Gets or sets the value that indicates text `direction` mode.\n * @private\n */\n get: function () {\n if (typeof this.isRightToLeft === 'undefined' || this.isRightToLeft == null) {\n return false;\n }\n else {\n return this.isRightToLeft;\n }\n },\n set: function (value) {\n this.isRightToLeft = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"characterSpacing\", {\n /**\n * Gets or sets value that indicates a `size` among the characters in the text.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * // set the format for string\n * let stringFormat : PdfStringFormat = new PdfStringFormat();\n * // set character spacing\n * stringFormat.characterSpacing = 10;\n * //\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10), stringFormat);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n if (typeof this.internalCharacterSpacing === 'undefined' || this.internalCharacterSpacing == null) {\n return 0;\n }\n else {\n return this.internalCharacterSpacing;\n }\n },\n set: function (value) {\n this.internalCharacterSpacing = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"wordSpacing\", {\n /**\n * Gets or sets value that indicates a `size` among the words in the text.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * // set the format for string\n * let stringFormat : PdfStringFormat = new PdfStringFormat();\n * // set word spacing\n * stringFormat.wordSpacing = 10;\n * //\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(10, 10), stringFormat);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n if (typeof this.internalWordSpacing === 'undefined' || this.internalWordSpacing == null) {\n return 0;\n }\n else {\n return this.internalWordSpacing;\n }\n },\n set: function (value) {\n this.internalWordSpacing = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"lineSpacing\", {\n /**\n * Gets or sets value that indicates the `vertical distance` between the baselines of adjacent lines of text.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // set string\n * let text : string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n * incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati';\n * // set rectangle bounds\n * let rectangle : RectangleF = new RectangleF({x : 0, y : 0}, {width : 300, height : 100})\n * //\n * // set the format for string\n * let stringFormat : PdfStringFormat = new PdfStringFormat();\n * // set line spacing\n * stringFormat.lineSpacing = 10;\n * //\n * // draw the text\n * page1.graphics.drawString(text, font, blackBrush, rectangle, stringFormat);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n if (typeof this.leading === 'undefined' || this.leading == null) {\n return 0;\n }\n else {\n return this.leading;\n }\n },\n set: function (value) {\n this.leading = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"clipPath\", {\n /**\n * Gets or sets a value indicating whether the text is `clipped` or not.\n * @private\n */\n get: function () {\n if (typeof this.clip === 'undefined' || this.clip == null) {\n return false;\n }\n else {\n return this.clip;\n }\n },\n set: function (value) {\n this.clip = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"subSuperScript\", {\n /**\n * Gets or sets value indicating whether the text is in `subscript or superscript` mode.\n * @private\n */\n get: function () {\n if (typeof this.pdfSubSuperScript === 'undefined' || this.pdfSubSuperScript == null) {\n return PdfSubSuperScript.None;\n }\n else {\n return this.pdfSubSuperScript;\n }\n },\n set: function (value) {\n this.pdfSubSuperScript = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"paragraphIndent\", {\n /**\n * Gets or sets the `indent` of the first line in the paragraph.\n * @private\n */\n get: function () {\n if (typeof this.internalParagraphIndent === 'undefined' || this.internalParagraphIndent == null) {\n return 0;\n }\n else {\n return this.internalParagraphIndent;\n }\n },\n set: function (value) {\n this.internalParagraphIndent = value;\n this.firstLineIndent = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"lineLimit\", {\n /**\n * Gets or sets a value indicating whether [`line limit`].\n * @private\n */\n get: function () {\n return this.internalLineLimit;\n },\n set: function (value) {\n this.internalLineLimit = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"measureTrailingSpaces\", {\n /**\n * Gets or sets a value indicating whether [`measure trailing spaces`].\n * @private\n */\n get: function () {\n if (typeof this.trailingSpaces === 'undefined' || this.trailingSpaces == null) {\n return false;\n }\n else {\n return this.trailingSpaces;\n }\n },\n set: function (value) {\n this.trailingSpaces = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"noClip\", {\n /**\n * Gets or sets a value indicating whether [`no clip`].\n * @private\n */\n get: function () {\n if (typeof this.isNoClip === 'undefined' || this.isNoClip == null) {\n return false;\n }\n else {\n return this.isNoClip;\n }\n },\n set: function (value) {\n this.isNoClip = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"wordWrap\", {\n /**\n * Gets or sets value indicating type of the text `wrapping`.\n * @private\n */\n get: function () {\n // if (typeof this.wrapType === 'undefined' || this.wrapType == null) {\n // return PdfWordWrapType.Word;\n // } else {\n return this.wordWrapType;\n // }\n },\n set: function (value) {\n this.wordWrapType = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"horizontalScalingFactor\", {\n /**\n * Gets or sets the `scaling factor`.\n * @private\n */\n get: function () {\n // if (typeof this.scalingFactor === 'undefined' || this.scalingFactor == null) {\n // return 100;\n // } else {\n return this.scalingFactor;\n // }\n },\n set: function (value) {\n if (value <= 0) {\n throw new Error('ArgumentOutOfRangeException:The scaling factor cant be less of equal to zero, ScalingFactor');\n }\n this.scalingFactor = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringFormat.prototype, \"firstLineIndent\", {\n /**\n * Gets or sets the `indent` of the first line in the text.\n * @private\n */\n get: function () {\n if (typeof this.initialLineIndent === 'undefined' || this.initialLineIndent == null) {\n return 0;\n }\n else {\n return this.initialLineIndent;\n }\n },\n set: function (value) {\n this.initialLineIndent = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Clones` the object.\n * @private\n */\n //IClonable implementation\n PdfStringFormat.prototype.clone = function () {\n var format = this;\n return format;\n };\n return PdfStringFormat;\n}());\nexport { PdfStringFormat };\n","import { SizeF, RectangleF, PointF } from './../../drawing/pdf-drawing';\nimport { PdfWordWrapType } from './enum';\nimport { StringTokenizer } from './string-tokenizer';\n/**\n * Class `lay outing the text`.\n */\nvar PdfStringLayouter = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `StringLayouter` class.\n * @private\n */\n function PdfStringLayouter() {\n /**\n * Checks whether the x co-ordinate is need to set as client size or not.\n * @hidden\n * @private\n */\n this.isOverloadWithPosition = false;\n //\n }\n PdfStringLayouter.prototype.layout = function (arg1, arg2, arg3, arg4, arg5, arg6, arg7) {\n if (arg4 instanceof RectangleF) {\n this.initialize(arg1, arg2, arg3, arg4, arg5);\n this.isOverloadWithPosition = arg6;\n this.clientSize = arg7;\n var result = this.doLayout();\n this.clear();\n return result;\n }\n else {\n this.initialize(arg1, arg2, arg3, arg4);\n this.isOverloadWithPosition = arg5;\n this.clientSize = arg6;\n var result = this.doLayout();\n this.clear();\n return result;\n }\n };\n PdfStringLayouter.prototype.initialize = function (text, font, format, rectSize, pageHeight) {\n if (typeof pageHeight === 'number') {\n if (text == null) {\n throw new Error('ArgumentNullException:text');\n }\n if (font == null) {\n throw new Error('ArgumentNullException:font');\n }\n this.text = text;\n this.font = font;\n this.format = format;\n this.size = new SizeF(rectSize.width, rectSize.height);\n this.rectangle = rectSize;\n this.pageHeight = pageHeight;\n this.reader = new StringTokenizer(text);\n }\n else {\n this.initialize(text, font, format, new RectangleF(new PointF(0, 0), rectSize), 0);\n }\n };\n /**\n * `Clear` all resources.\n * @private\n */\n PdfStringLayouter.prototype.clear = function () {\n this.font = null;\n this.format = null;\n this.reader.close();\n this.reader = null;\n this.text = null;\n };\n /**\n * `Layouts` the text.\n * @private\n */\n PdfStringLayouter.prototype.doLayout = function () {\n var result = new PdfStringLayoutResult();\n var lineResult = new PdfStringLayoutResult();\n var lines = [];\n var line = this.reader.peekLine();\n var lineIndent = this.getLineIndent(true);\n while (line != null) {\n lineResult = this.layoutLine(line, lineIndent);\n // if (!lineResult.Empty) {\n var numSymbolsInserted = 0;\n /* tslint:disable */\n var returnedValue = this.copyToResult(result, lineResult, lines, /*out*/ numSymbolsInserted);\n /* tslint:enable */\n var success = returnedValue.success;\n numSymbolsInserted = returnedValue.numInserted;\n this.reader.readLine();\n line = this.reader.peekLine();\n lineIndent = this.getLineIndent(false);\n }\n this.finalizeResult(result, lines);\n return result;\n };\n /**\n * Returns `line indent` for the line.\n * @private\n */\n PdfStringLayouter.prototype.getLineIndent = function (firstLine) {\n var lineIndent = 0;\n if (this.format != null) {\n lineIndent = (firstLine) ? this.format.firstLineIndent : this.format.paragraphIndent;\n lineIndent = (this.size.width > 0) ? Math.min(this.size.width, lineIndent) : lineIndent;\n }\n return lineIndent;\n };\n /**\n * Calculates `height` of the line.\n * @private\n */\n PdfStringLayouter.prototype.getLineHeight = function () {\n var height = this.font.height;\n if (this.format != null && this.format.lineSpacing !== 0) {\n height = this.format.lineSpacing + this.font.height;\n }\n return height;\n };\n /**\n * Calculates `width` of the line.\n * @private\n */\n PdfStringLayouter.prototype.getLineWidth = function (line) {\n var width = this.font.getLineWidth(line, this.format);\n return width;\n };\n // tslint:disable\n /**\n * `Layouts` line.\n * @private\n */\n PdfStringLayouter.prototype.layoutLine = function (line, lineIndent) {\n var lineResult = new PdfStringLayoutResult();\n lineResult.layoutLineHeight = this.getLineHeight();\n var lines = [];\n var maxWidth = this.size.width;\n var lineWidth = this.getLineWidth(line) + lineIndent;\n var lineType = LineType.FirstParagraphLine;\n var readWord = true;\n // line is in bounds.\n if (maxWidth <= 0 || Math.round(lineWidth) <= Math.round(maxWidth)) {\n this.addToLineResult(lineResult, lines, line, lineWidth, LineType.NewLineBreak | lineType);\n }\n else {\n var builder = '';\n var curLine = '';\n lineWidth = lineIndent;\n var curIndent = lineIndent;\n var reader = new StringTokenizer(line);\n var word = reader.peekWord();\n var isSingleWord = false;\n while (word != null) {\n curLine = curLine + word;\n var curLineWidth = this.getLineWidth(curLine.toString()) + curIndent /*)*/;\n if (curLineWidth > maxWidth) {\n if (this.getWrapType() == PdfWordWrapType.None)\n break;\n if (this.getWrapType() != PdfWordWrapType.Character || !readWord) {\n var ln = builder.toString();\n if (ln.indexOf(' ') === -1) {\n isSingleWord = true;\n this.addToLineResult(lineResult, lines, curLine, lineWidth, LineType.LayoutBreak | lineType);\n }\n else {\n this.addToLineResult(lineResult, lines, ln, lineWidth, LineType.LayoutBreak | lineType);\n }\n if (this.isOverloadWithPosition) {\n maxWidth = this.clientSize.width;\n }\n curLine = '';\n builder = '';\n lineWidth = 0;\n curIndent = 0;\n curLineWidth = 0;\n lineType = LineType.None;\n if (isSingleWord) {\n reader.readWord();\n readWord = false;\n }\n word = (readWord) ? word : reader.peekWord();\n isSingleWord = false;\n readWord = true;\n }\n else {\n readWord = false;\n curLine = curLine + builder.toString();\n word = reader.peek().toString();\n }\n continue;\n }\n builder = builder + word;\n lineWidth = curLineWidth;\n if (readWord) {\n reader.readWord();\n word = reader.peekWord();\n isSingleWord = false;\n }\n else {\n reader.read();\n word = reader.peek().toString();\n }\n }\n if (builder.length > 0) {\n var ln = builder.toString();\n this.addToLineResult(lineResult, lines, ln, lineWidth, LineType.NewLineBreak | LineType.LastParagraphLine);\n }\n reader.close();\n }\n lineResult.layoutLines = [];\n for (var index = 0; index < lines.length; index++) {\n lineResult.layoutLines.push(lines[index]);\n }\n lines = [];\n return lineResult;\n };\n /**\n * `Adds` line to line result.\n * @private\n */\n PdfStringLayouter.prototype.addToLineResult = function (lineResult, lines, line, lineWidth, breakType) {\n var info = new LineInfo();\n info.text = line;\n info.width = lineWidth;\n info.lineType = breakType;\n lines.push(info);\n var size = lineResult.actualSize;\n size.height += this.getLineHeight();\n size.width = Math.max(size.width, lineWidth);\n lineResult.size = size;\n };\n /**\n * `Copies` layout result from line result to entire result. Checks whether we can proceed lay outing or not.\n * @private\n */\n PdfStringLayouter.prototype.copyToResult = function (result, lineResult, lines, \n /*out*/ numInserted) {\n var success = true;\n var allowPartialLines = (this.format != null && !this.format.lineLimit);\n var height = result.actualSize.height;\n var maxHeight = this.size.height;\n if ((this.pageHeight > 0) && (maxHeight + this.rectangle.y > this.pageHeight)) {\n maxHeight = this.rectangle.y - this.pageHeight;\n maxHeight = Math.max(maxHeight, -maxHeight);\n }\n numInserted = 0;\n for (var i = 0, len = lineResult.lines.length; i < len; i++) {\n var expHeight = height + lineResult.lineHeight;\n var info = lineResult.lines[i];\n numInserted += info.text.length;\n info = this.trimLine(info, (lines.length === 0));\n lines.push(info);\n // Update width.\n var size_1 = result.actualSize;\n size_1.width = Math.max(size_1.width, info.width);\n result.size = size_1;\n height = expHeight;\n }\n var size = result.actualSize;\n size.height = height;\n result.size = size;\n return { success: success, numInserted: numInserted };\n };\n /**\n * `Finalizes` final result.\n * @private\n */\n PdfStringLayouter.prototype.finalizeResult = function (result, lines) {\n result.layoutLines = [];\n for (var index = 0; index < lines.length; index++) {\n result.layoutLines.push(lines[index]);\n }\n result.layoutLineHeight = this.getLineHeight();\n lines = [];\n };\n /**\n * `Trims` whitespaces at the line.\n * @private\n */\n PdfStringLayouter.prototype.trimLine = function (info, firstLine) {\n var line = info.text;\n var lineWidth = info.width;\n // Trim start whitespaces if the line is not a start of the paragraph only.\n // let trimStartSpaces : boolean = ((info.LineType & LineType.FirstParagraphLine) === 0);\n var start = (this.format == null || !this.format.rightToLeft);\n var spaces = StringTokenizer.spaces;\n line = (start) ? line.trim() : line.trim();\n // Recalculate line width.\n if (line.length !== info.text.length) {\n lineWidth = this.getLineWidth(line);\n lineWidth += this.getLineIndent(firstLine);\n }\n info.text = line;\n info.width = lineWidth;\n return info;\n };\n /**\n * Returns `wrap` type.\n * @private\n */\n PdfStringLayouter.prototype.getWrapType = function () {\n var wrapType = (this.format != null) ? this.format.wordWrap : PdfWordWrapType.Word;\n return wrapType;\n };\n return PdfStringLayouter;\n}());\nexport { PdfStringLayouter };\n//Internal declaration\nvar PdfStringLayoutResult = /** @class */ (function () {\n function PdfStringLayoutResult() {\n }\n Object.defineProperty(PdfStringLayoutResult.prototype, \"remainder\", {\n // Properties\n /**\n * Gets the `text` which is not lay outed.\n * @private\n */\n get: function () {\n return this.textRemainder;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringLayoutResult.prototype, \"actualSize\", {\n /**\n * Gets the actual layout text `bounds`.\n * @private\n */\n get: function () {\n if (typeof this.size === 'undefined') {\n this.size = new SizeF(0, 0);\n }\n return this.size;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringLayoutResult.prototype, \"lines\", {\n /**\n * Gets layout `lines` information.\n * @private\n */\n get: function () {\n return this.layoutLines;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringLayoutResult.prototype, \"lineHeight\", {\n /**\n * Gets the `height` of the line.\n * @private\n */\n get: function () {\n return this.layoutLineHeight;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringLayoutResult.prototype, \"empty\", {\n /**\n * Gets value that indicates whether any layout text [`empty`].\n * @private\n */\n get: function () {\n return (this.layoutLines == null || this.layoutLines.length === 0);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStringLayoutResult.prototype, \"lineCount\", {\n /**\n * Gets `number of` the layout lines.\n * @private\n */\n get: function () {\n var count = (!this.empty) ? this.layoutLines.length : 0;\n return count;\n },\n enumerable: true,\n configurable: true\n });\n return PdfStringLayoutResult;\n}());\nexport { PdfStringLayoutResult };\nvar LineInfo = /** @class */ (function () {\n function LineInfo() {\n }\n Object.defineProperty(LineInfo.prototype, \"lineType\", {\n //Properties\n /**\n * Gets the `type` of the line text.\n * @private\n */\n get: function () {\n return this.type;\n },\n set: function (value) {\n this.type = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LineInfo.prototype, \"text\", {\n /**\n * Gets the line `text`.\n * @private\n */\n get: function () {\n return this.content;\n },\n set: function (value) {\n this.content = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(LineInfo.prototype, \"width\", {\n /**\n * Gets `width` of the line text.\n * @private\n */\n get: function () {\n return this.lineWidth;\n },\n set: function (value) {\n this.lineWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n return LineInfo;\n}());\nexport { LineInfo };\n/**\n* Break type of the `line`.\n* @private\n*/\nexport var LineType;\n(function (LineType) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n LineType[LineType[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `NewLineBreak`.\n * @private\n */\n LineType[LineType[\"NewLineBreak\"] = 1] = \"NewLineBreak\";\n /**\n * Specifies the type of `LayoutBreak`.\n * @private\n */\n LineType[LineType[\"LayoutBreak\"] = 2] = \"LayoutBreak\";\n /**\n * Specifies the type of `FirstParagraphLine`.\n * @private\n */\n LineType[LineType[\"FirstParagraphLine\"] = 4] = \"FirstParagraphLine\";\n /**\n * Specifies the type of `LastParagraphLine`.\n * @private\n */\n LineType[LineType[\"LastParagraphLine\"] = 8] = \"LastParagraphLine\";\n})(LineType || (LineType = {}));\n","/**\n * StringTokenizer.ts class for EJ2-PDF\n * Utility class for working with strings.\n * @private\n */\nvar StringTokenizer = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `StringTokenizer` class.\n * @private\n */\n function StringTokenizer(textValue) {\n /**\n * Current `position`.\n * @private\n */\n this.currentPosition = 0;\n if (textValue == null) {\n throw new Error('ArgumentNullException:text');\n }\n this.text = textValue;\n }\n Object.defineProperty(StringTokenizer.prototype, \"length\", {\n // Properties\n /**\n * Gets text `length`.\n * @private\n */\n get: function () {\n return this.text.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(StringTokenizer.prototype, \"position\", {\n /**\n * Gets or sets the position.\n * @private\n */\n get: function () {\n return this.currentPosition;\n },\n set: function (value) {\n this.currentPosition = value;\n },\n enumerable: true,\n configurable: true\n });\n StringTokenizer.getCharsCount = function (text, symbols) {\n if (typeof symbols === 'string') {\n if (text == null) {\n throw new Error('ArgumentNullException:wholeText');\n }\n var numSymbols = 0;\n var curIndex = 0;\n for (;;) {\n curIndex = text.indexOf(symbols, curIndex);\n if (curIndex === -1) {\n break;\n }\n else {\n numSymbols++;\n curIndex++;\n }\n }\n return numSymbols;\n }\n else {\n if (text == null) {\n throw new Error('ArgumentNullException:text');\n }\n if (symbols == null) {\n throw new Error('ArgumentNullException:symbols');\n }\n var count = 0;\n for (var i = 0, len = text.length; i < len; i++) {\n var ch = text[i];\n if (this.contains(symbols, ch)) {\n count++;\n }\n }\n return count;\n }\n };\n /**\n * Reads line of the text.\n * @private\n */\n StringTokenizer.prototype.readLine = function () {\n var pos = this.currentPosition;\n while (pos < this.length) {\n var ch = this.text[pos];\n switch (ch) {\n case '\\r':\n case '\\n': {\n var text = this.text.substring(this.currentPosition, pos - this.currentPosition);\n this.currentPosition = pos + 1;\n this.currentPosition++;\n return text;\n }\n }\n pos++;\n }\n // The remaining text.\n if (pos > this.currentPosition) {\n var text2 = this.text.substring(this.currentPosition, pos - this.currentPosition);\n this.currentPosition = pos;\n return text2;\n }\n return null;\n };\n /**\n * Reads line of the text.\n * @private\n */\n StringTokenizer.prototype.peekLine = function () {\n var pos = this.currentPosition;\n var line = this.readLine();\n this.currentPosition = pos;\n return line;\n };\n /**\n * Reads a word from the text.\n * @private\n */\n StringTokenizer.prototype.readWord = function () {\n var pos = this.currentPosition;\n while (pos < this.length) {\n var ch = this.text[pos];\n switch (ch) {\n case '\\r':\n case '\\n':\n var textValue = this.text.substr(this.currentPosition, pos - this.currentPosition);\n this.currentPosition = pos + 1;\n if (((ch === '\\r') && (this.currentPosition < this.length)) && (this.text[this.currentPosition] === '\\n')) {\n this.currentPosition++;\n }\n return textValue;\n case ' ':\n case '\\t': {\n if (pos === this.currentPosition) {\n pos++;\n }\n var text = this.text.substr(this.currentPosition, pos - this.currentPosition);\n this.currentPosition = pos;\n return text;\n }\n }\n pos++;\n }\n // The remaining text.\n if (pos > this.currentPosition) {\n var text2 = this.text.substr(this.currentPosition, pos - this.currentPosition);\n this.currentPosition = pos;\n return text2;\n }\n return null;\n };\n /**\n * Peeks a word from the text.\n * @private\n */\n StringTokenizer.prototype.peekWord = function () {\n var pos = this.currentPosition;\n var word = this.readWord();\n this.currentPosition = pos;\n return word;\n };\n StringTokenizer.prototype.read = function (count) {\n if (typeof count === 'undefined') {\n var ch = '0';\n return ch;\n }\n else {\n var num = 0;\n var builder = '';\n return builder;\n }\n };\n /**\n * Peeks char form the data.\n * @private\n */\n StringTokenizer.prototype.peek = function () {\n var ch = '0';\n return ch;\n };\n /**\n * Closes a reader.\n * @private\n */\n StringTokenizer.prototype.close = function () {\n this.text = null;\n };\n //Implementation\n /**\n * Checks whether array contains a symbol.\n * @private\n */\n StringTokenizer.contains = function (array, symbol) {\n var contains = false;\n for (var i = 0; i < array.length; i++) {\n if (array[i] === symbol) {\n contains = true;\n break;\n }\n }\n return contains;\n };\n // Constants\n /**\n * `Whitespace` symbol.\n * @private\n */\n StringTokenizer.whiteSpace = ' ';\n /**\n * `tab` symbol.\n * @private\n */\n StringTokenizer.tab = '\\t';\n /**\n * Array of `spaces`.\n * @private\n */\n StringTokenizer.spaces = [StringTokenizer.whiteSpace, StringTokenizer.tab];\n /**\n * `Pattern` for WhiteSpace.\n * @private\n */\n StringTokenizer.whiteSpacePattern = '^[ \\t]+$';\n return StringTokenizer;\n}());\nexport { StringTokenizer };\n","/**\n * PdfFont.ts class for EJ2-PDF\n */\nimport { PdfFontStyle } from './enum';\nimport { SizeF } from './../../drawing/pdf-drawing';\nimport { PdfStringFormat } from './pdf-string-format';\nimport { PdfStringLayouter } from './string-layouter';\nimport { StringTokenizer } from './string-tokenizer';\n/**\n * Defines a particular format for text, including font face, size, and style attributes.\n * @private\n */\nvar PdfFont = /** @class */ (function () {\n function PdfFont(size, style) {\n /**\n * `Style` of the font.\n * @private\n */\n this.fontStyle = PdfFontStyle.Regular;\n if (typeof size === 'number' && typeof style === 'undefined') {\n this.fontSize = size;\n }\n else {\n this.fontSize = size;\n this.setStyle(style);\n }\n }\n Object.defineProperty(PdfFont.prototype, \"name\", {\n //Properties\n /**\n * Gets the face name of this Font.\n * @private\n */\n get: function () {\n return this.metrics.name;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"size\", {\n /**\n * Gets the size of this font.\n * @private\n */\n get: function () {\n return this.fontSize;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"height\", {\n /**\n * Gets the height of the font in points.\n * @private\n */\n get: function () {\n return this.metrics.getHeight(null);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"style\", {\n /**\n * Gets the style information for this font.\n * @private\n */\n get: function () {\n return this.fontStyle;\n },\n set: function (value) {\n this.fontStyle = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"bold\", {\n /**\n * Gets a value indicating whether this `PdfFont` is `bold`.\n * @private\n */\n get: function () {\n return ((this.style & PdfFontStyle.Bold) > 0);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"italic\", {\n /**\n * Gets a value indicating whether this `PdfFont` has the `italic` style applied.\n * @private\n */\n get: function () {\n return ((this.style & PdfFontStyle.Italic) > 0);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"strikeout\", {\n /**\n * Gets a value indicating whether this `PdfFont` is `strikeout`.\n * @private\n */\n get: function () {\n return ((this.style & PdfFontStyle.Strikeout) > 0);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"underline\", {\n /**\n * Gets a value indicating whether this `PdfFont` is `underline`.\n * @private\n */\n get: function () {\n return ((this.style & PdfFontStyle.Underline) > 0);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"metrics\", {\n /**\n * Gets or sets the `metrics` for this font.\n * @private\n */\n get: function () {\n return this.fontMetrics;\n },\n set: function (value) {\n this.fontMetrics = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfFont.prototype, \"element\", {\n // /**\n // * Gets and Sets the font `internals`.\n // * @private\n // */\n // public get fontInternal() : IPdfPrimitive {\n // return this.pdfFontInternals;\n // }\n // public set fontInternal(value : IPdfPrimitive) {\n // this.pdfFontInternals = value;\n // }\n //IPdfWrapper Members\n /**\n * Gets the `element` representing the font.\n * @private\n */\n get: function () {\n return this.pdfFontInternals;\n },\n enumerable: true,\n configurable: true\n });\n PdfFont.prototype.measureString = function (text, arg2, arg3, arg4, arg5) {\n if (typeof text === 'string' && typeof arg2 === 'undefined') {\n return this.measureString(text, null);\n }\n else if (typeof text === 'string' && (arg2 instanceof PdfStringFormat || arg2 == null) && typeof arg3 === 'undefined' && typeof arg4 === 'undefined') {\n var temparg2 = arg2;\n var charactersFitted = 0;\n var linesFilled = 0;\n return this.measureString(text, temparg2, charactersFitted, linesFilled);\n }\n else if (typeof text === 'string' && (arg2 instanceof PdfStringFormat || arg2 == null) && typeof arg3 === 'number' && typeof arg4 === 'number') {\n var temparg2 = arg2;\n return this.measureString(text, 0, temparg2, arg3, arg4);\n // } else if (typeof text === 'string' && typeof arg2 === 'number' && typeof arg3 === 'undefined') {\n // return this.measureString(text, arg2, null);\n // } else if (typeof text === 'string' && typeof arg2 === 'number' && (arg3 instanceof PdfStringFormat || arg3 == null) && typeof arg4 === 'undefined' && typeof arg5 === 'undefined') {\n // let temparg3 : PdfStringFormat = arg3 as PdfStringFormat;\n // let charactersFitted : number = 0;\n // let linesFilled : number = 0;\n // return this.measureString(text, arg2, temparg3, charactersFitted, linesFilled);\n }\n else if (typeof text === 'string' && typeof arg2 === 'number' && (arg3 instanceof PdfStringFormat || arg3 == null) && typeof arg4 === 'number' && typeof arg5 === 'number') {\n var layoutArea = new SizeF(arg2, 0);\n var temparg3 = arg3;\n return this.measureString(text, layoutArea, temparg3, arg4, arg5);\n // } else if (typeof text === 'string' && arg2 instanceof SizeF && typeof arg3 === 'undefined') {\n // return this.measureString(text, arg2, null);\n // } else if (typeof text === 'string' && arg2 instanceof SizeF && (arg3 instanceof PdfStringFormat || arg3 == null) && typeof arg4 === 'undefined' && typeof arg5 === 'undefined') {\n // let temparg3 : PdfStringFormat = arg3 as PdfStringFormat;\n // let charactersFitted : number = 0;\n // let linesFilled : number = 0;\n // return this.measureString(text, arg2, temparg3, charactersFitted, linesFilled);\n }\n else {\n if (text == null) {\n throw Error(\"ArgumentNullException(\\\"text\\\")\");\n }\n var temparg2 = arg2;\n var temparg3 = arg3;\n var layouter = new PdfStringLayouter();\n var result = layouter.layout(text, this, temparg3, temparg2, false, new SizeF(0, 0));\n // arg4 = (result.Remainder == null) ? text.length : text.length - result.Remainder.length;\n arg4 = text.length;\n arg5 = (result.empty) ? 0 : result.lines.length;\n return result.actualSize;\n }\n };\n /* tslint:enable */\n //IPdfCache Members\n /**\n * `Checks` whether the object is similar to another object.\n * @private\n */\n PdfFont.prototype.equalsTo = function (obj) {\n var result = this.equalsToFont(obj);\n return result;\n };\n /**\n * Returns `internals` of the object.\n * @private\n */\n PdfFont.prototype.getInternals = function () {\n return this.pdfFontInternals;\n };\n /**\n * Sets `internals` to the object.\n * @private\n */\n PdfFont.prototype.setInternals = function (internals) {\n if (internals == null) {\n throw new Error('ArgumentNullException:internals');\n }\n this.pdfFontInternals = internals;\n };\n /**\n * Sets the `style` of the font.\n * @private\n */\n PdfFont.prototype.setStyle = function (style) {\n this.fontStyle = style;\n };\n /**\n * Applies `settings` to the default line width.\n * @private\n */\n PdfFont.prototype.applyFormatSettings = function (line, format, width) {\n // if (line == null) {\n // throw new Error(`ArgumentNullException:line`);\n // }\n var realWidth = width;\n if (format != null && width > 0) {\n // Space among characters is not default.\n if (format.characterSpacing !== 0) {\n realWidth += (line.length - 1) * format.characterSpacing;\n }\n // Space among words is not default.\n if (format.wordSpacing !== 0) {\n var symbols = StringTokenizer.spaces;\n var whitespacesCount = StringTokenizer.getCharsCount(line, symbols);\n realWidth += whitespacesCount * format.wordSpacing;\n }\n }\n return realWidth;\n };\n //Constants\n /**\n * `Multiplier` of the symbol width.\n * @default 0.001\n * @private\n */\n PdfFont.charSizeMultiplier = 0.001;\n /**\n * `Synchronization` object.\n * @private\n */\n PdfFont.syncObject = new Object();\n return PdfFont;\n}());\nexport { PdfFont };\n","/**\n * public Enum for `CompositeFontType`.\n * @private\n */\nexport var ObjectStatus;\n(function (ObjectStatus) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n ObjectStatus[ObjectStatus[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `Registered`.\n * @private\n */\n ObjectStatus[ObjectStatus[\"Registered\"] = 1] = \"Registered\";\n})(ObjectStatus || (ObjectStatus = {}));\n","/**\n * Used to `write a string` into output file.\n * @private\n */\nvar PdfWriter = /** @class */ (function () {\n /**\n * Initialize an instance of `PdfWriter` class.\n * @private\n */\n function PdfWriter(stream) {\n this.streamWriter = stream;\n }\n Object.defineProperty(PdfWriter.prototype, \"document\", {\n //properties\n /**\n * Gets and Sets the `document`.\n * @private\n */\n get: function () {\n return this.pdfDocument;\n },\n set: function (value) {\n this.pdfDocument = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfWriter.prototype, \"position\", {\n /**\n * Gets the `position`.\n * @private\n */\n get: function () {\n return this.streamWriter.buffer.size;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfWriter.prototype, \"length\", {\n /**\n * Gets the `length` of the stream'.\n * @private\n */\n get: function () {\n return this.streamWriter.buffer.size;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfWriter.prototype, \"stream\", {\n /**\n * Gets the `stream`.\n * @private\n */\n get: function () {\n var result = this.streamWriter;\n return result;\n },\n enumerable: true,\n configurable: true\n });\n //public Methods\n /**\n * `Writes the specified data`.\n * @private\n */\n PdfWriter.prototype.write = function (overload) {\n var data = [];\n var tempOverload = overload;\n this.streamWriter.write(tempOverload);\n };\n return PdfWriter;\n}());\nexport { PdfWriter };\n","/**\n * PdfMainObjectCollection.ts class for EJ2-PDF\n */\nimport { Dictionary } from './../collections/dictionary';\nimport { ObjectStatus } from './enum';\n/**\n * The collection of all `objects` within a PDF document.\n * @private\n */\nvar PdfMainObjectCollection = /** @class */ (function () {\n function PdfMainObjectCollection() {\n //Fields\n /**\n * The collection of the `indirect objects`.\n * @default []\n * @private\n */\n this.objectCollections = [];\n /**\n * The collection of the `Indirect objects`.\n * @default new Dictionary()\n * @private\n */\n this.mainObjectCollection = new Dictionary();\n /**\n * The collection of `primitive objects`.\n * @private\n */\n this.primitiveObjectCollection = new Dictionary();\n }\n Object.defineProperty(PdfMainObjectCollection.prototype, \"count\", {\n //Properties\n /**\n * Gets the `count`.\n * @private\n */\n get: function () {\n return this.objectCollections.length;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets the value of `ObjectInfo` from object collection.\n * @private\n */\n PdfMainObjectCollection.prototype.items = function (index) {\n return this.objectCollections[index];\n };\n Object.defineProperty(PdfMainObjectCollection.prototype, \"outIsNew\", {\n //Methods\n /**\n * Specifies the value of `IsNew`.\n * @private\n */\n get: function () {\n return this.isNew;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Adds` the specified element.\n * @private\n */\n PdfMainObjectCollection.prototype.add = function (element) {\n var objInfo = new ObjectInfo(element);\n this.objectCollections.push(objInfo);\n if (!this.primitiveObjectCollection.containsKey(element)) {\n this.primitiveObjectCollection.setValue(element, this.objectCollections.length - 1);\n }\n element.position = this.index = this.objectCollections.length - 1;\n element.status = ObjectStatus.Registered;\n };\n /**\n * `Looks` through the collection for the object specified.\n * @private\n */\n PdfMainObjectCollection.prototype.lookFor = function (obj) {\n var index = -1;\n if (obj.position !== -1) {\n return obj.position;\n }\n if (this.primitiveObjectCollection.containsKey(obj) && this.count === this.primitiveObjectCollection.size()) {\n index = this.primitiveObjectCollection.getValue(obj);\n }\n else {\n for (var i = this.count - 1; i >= 0; i--) {\n var oi = this.objectCollections[i];\n if (oi.object === obj) {\n index = i;\n break;\n }\n }\n }\n return index;\n };\n /**\n * Gets the `reference of the object`.\n * @private\n */\n PdfMainObjectCollection.prototype.getReference = function (index, isNew) {\n this.index = this.lookFor(index);\n var reference;\n this.isNew = false;\n var oi = this.objectCollections[this.index];\n reference = oi.reference;\n var obj = { reference: reference, wasNew: isNew };\n return obj;\n };\n /**\n * Tries to set the `reference to the object`.\n * @private\n */\n PdfMainObjectCollection.prototype.trySetReference = function (obj, reference, found) {\n var result = true;\n found = true;\n this.index = this.lookFor(obj);\n var oi = this.objectCollections[this.index];\n oi.setReference(reference);\n return result;\n };\n PdfMainObjectCollection.prototype.destroy = function () {\n for (var _i = 0, _a = this.objectCollections; _i < _a.length; _i++) {\n var obj = _a[_i];\n if (obj !== undefined) {\n obj.pdfObject.position = -1;\n obj.pdfObject.isSaving = undefined;\n obj.pdfObject.objectCollectionIndex = undefined;\n obj.pdfObject.position = undefined;\n }\n }\n this.objectCollections = [];\n this.mainObjectCollection = new Dictionary();\n this.primitiveObjectCollection = new Dictionary();\n };\n return PdfMainObjectCollection;\n}());\nexport { PdfMainObjectCollection };\nvar ObjectInfo = /** @class */ (function () {\n function ObjectInfo(obj, reference) {\n this.pdfObject = obj;\n this.pdfReference = reference;\n }\n Object.defineProperty(ObjectInfo.prototype, \"object\", {\n //Properties\n /**\n * Gets the `object`.\n * @private\n */\n get: function () {\n return this.pdfObject;\n },\n set: function (value) {\n this.pdfObject = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ObjectInfo.prototype, \"reference\", {\n /**\n * Gets the `reference`.\n * @private\n */\n get: function () {\n return this.pdfReference;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Sets the `reference`.\n * @private\n */\n ObjectInfo.prototype.setReference = function (reference) {\n this.pdfReference = reference;\n };\n return ObjectInfo;\n}());\nexport { ObjectInfo };\n","/**\n * public Enum for `ObjectType`.\n * @private\n */\nexport var ObjectType;\n(function (ObjectType) {\n /**\n * Specifies the type of `Free`.\n * @private\n */\n ObjectType[ObjectType[\"Free\"] = 0] = \"Free\";\n /**\n * Specifies the type of `Normal`.\n * @private\n */\n ObjectType[ObjectType[\"Normal\"] = 1] = \"Normal\";\n /**\n * Specifies the type of `Packed`.\n * @private\n */\n ObjectType[ObjectType[\"Packed\"] = 2] = \"Packed\";\n})(ObjectType || (ObjectType = {}));\n","import { StreamWriter } from '@syncfusion/ej2-file-utils';\nimport { Encoding } from '@syncfusion/ej2-file-utils';\nimport { PdfDocument } from './pdf-document';\n/**\n * `PdfDocumentBase` class represent common properties of PdfDocument classes.\n * @private\n */\nvar PdfDocumentBase = /** @class */ (function () {\n function PdfDocumentBase(document) {\n /**\n * If the stream is copied, then it specifies true.\n * @private\n */\n this.isStreamCopied = false;\n if (document instanceof PdfDocument) {\n this.document = document;\n }\n }\n Object.defineProperty(PdfDocumentBase.prototype, \"pdfObjects\", {\n //Prpperties\n /**\n * Gets the `PDF objects` collection, which stores all objects and references to it..\n * @private\n */\n get: function () {\n return this.objects;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentBase.prototype, \"crossTable\", {\n /**\n * Gets the `cross-reference` table.\n * @private\n */\n get: function () {\n return this.pdfCrossTable;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentBase.prototype, \"currentSavingObj\", {\n /**\n * Gets or sets the current saving `object number`.\n * @private\n */\n get: function () {\n return this.currentSavingObject;\n },\n set: function (value) {\n this.currentSavingObject = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentBase.prototype, \"catalog\", {\n /**\n * Gets the PDF document `catalog`.\n * @private\n */\n get: function () {\n return this.pdfCatalog;\n },\n set: function (value) {\n this.pdfCatalog = value;\n },\n enumerable: true,\n configurable: true\n });\n //Public methods\n /**\n * Sets the `main object collection`.\n * @private\n */\n PdfDocumentBase.prototype.setMainObjectCollection = function (mainObjectCollection) {\n this.objects = mainObjectCollection;\n };\n /**\n * Sets the `cross table`.\n * @private\n */\n PdfDocumentBase.prototype.setCrossTable = function (cTable) {\n this.pdfCrossTable = cTable;\n };\n /**\n * Sets the `catalog`.\n * @private\n */\n PdfDocumentBase.prototype.setCatalog = function (catalog) {\n this.pdfCatalog = catalog;\n };\n PdfDocumentBase.prototype.save = function (filename) {\n var _this = this;\n var encoding = new Encoding(true);\n var SW = new StreamWriter(encoding);\n if (typeof filename === 'undefined') {\n var encoding_1 = new Encoding(true);\n var SW_1 = new StreamWriter(encoding_1);\n return new Promise(function (resolve, reject) {\n /* tslint:disable-next-line:no-any */\n var obj = {};\n obj.blobData = new Blob([_this.document.docSave(SW_1, true)], { type: 'application/pdf' });\n resolve(obj);\n });\n }\n else {\n this.document.docSave(SW, filename, true);\n }\n };\n /**\n * `Clone` of parent object - PdfDocument.\n * @private\n */\n PdfDocumentBase.prototype.clone = function () {\n return this.document;\n };\n return PdfDocumentBase;\n}());\nexport { PdfDocumentBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfCatalog.ts class for EJ2-PDF\n */\nimport { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\n/**\n * `PdfCatalog` class represents internal catalog of the Pdf document.\n * @private\n */\nvar PdfCatalog = /** @class */ (function (_super) {\n __extends(PdfCatalog, _super);\n //constructor\n /**\n * Initializes a new instance of the `PdfCatalog` class.\n * @private\n */\n function PdfCatalog() {\n var _this = _super.call(this) || this;\n //fields\n /**\n * Internal variable to store collection of `sections`.\n * @default null\n * @private\n */\n _this.sections = null;\n /**\n * Internal variable for accessing fields from `DictionryProperties` class.\n * @private\n */\n _this.tempDictionaryProperties = new DictionaryProperties();\n _this.items.setValue(new DictionaryProperties().type, new PdfName('Catalog'));\n return _this;\n }\n Object.defineProperty(PdfCatalog.prototype, \"pages\", {\n //Properties\n /**\n * Gets or sets the sections, which contain `pages`.\n * @private\n */\n get: function () {\n return this.sections;\n },\n set: function (value) {\n var dictionary = value.element;\n // if (this.sections !== value) {\n // this.sections = value;\n // this.Items.setValue(this.tempDictionaryProperties.pages, new PdfReferenceHolder(value));\n // }\n this.sections = value;\n this.items.setValue(this.tempDictionaryProperties.pages, new PdfReferenceHolder(value));\n },\n enumerable: true,\n configurable: true\n });\n return PdfCatalog;\n}(PdfDictionary));\nexport { PdfCatalog };\n","/**\n * public Enum for `PdfPageOrientation`.\n * @private\n */\nexport var PdfPageOrientation;\n(function (PdfPageOrientation) {\n /**\n * Specifies the type of `Portrait`.\n * @private\n */\n PdfPageOrientation[PdfPageOrientation[\"Portrait\"] = 0] = \"Portrait\";\n /**\n * Specifies the type of `Landscape`.\n * @private\n */\n PdfPageOrientation[PdfPageOrientation[\"Landscape\"] = 1] = \"Landscape\";\n})(PdfPageOrientation || (PdfPageOrientation = {}));\n/**\n * public Enum for `PdfPageRotateAngle`.\n * @private\n */\nexport var PdfPageRotateAngle;\n(function (PdfPageRotateAngle) {\n /**\n * Specifies the type of `RotateAngle0`.\n * @private\n */\n PdfPageRotateAngle[PdfPageRotateAngle[\"RotateAngle0\"] = 0] = \"RotateAngle0\";\n /**\n * Specifies the type of `RotateAngle90`.\n * @private\n */\n PdfPageRotateAngle[PdfPageRotateAngle[\"RotateAngle90\"] = 1] = \"RotateAngle90\";\n /**\n * Specifies the type of `RotateAngle180`.\n * @private\n */\n PdfPageRotateAngle[PdfPageRotateAngle[\"RotateAngle180\"] = 2] = \"RotateAngle180\";\n /**\n * Specifies the type of `RotateAngle270`.\n * @private\n */\n PdfPageRotateAngle[PdfPageRotateAngle[\"RotateAngle270\"] = 3] = \"RotateAngle270\";\n})(PdfPageRotateAngle || (PdfPageRotateAngle = {}));\n/**\n * public Enum for `PdfNumberStyle`.\n * @private\n */\nexport var PdfNumberStyle;\n(function (PdfNumberStyle) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n PdfNumberStyle[PdfNumberStyle[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `Numeric`.\n * @private\n */\n PdfNumberStyle[PdfNumberStyle[\"Numeric\"] = 1] = \"Numeric\";\n /**\n * Specifies the type of `LowerLatin`.\n * @private\n */\n PdfNumberStyle[PdfNumberStyle[\"LowerLatin\"] = 2] = \"LowerLatin\";\n /**\n * Specifies the type of `LowerRoman`.\n * @private\n */\n PdfNumberStyle[PdfNumberStyle[\"LowerRoman\"] = 3] = \"LowerRoman\";\n /**\n * Specifies the type of `UpperLatin`.\n * @private\n */\n PdfNumberStyle[PdfNumberStyle[\"UpperLatin\"] = 4] = \"UpperLatin\";\n /**\n * Specifies the type of `UpperRoman`.\n * @private\n */\n PdfNumberStyle[PdfNumberStyle[\"UpperRoman\"] = 5] = \"UpperRoman\";\n})(PdfNumberStyle || (PdfNumberStyle = {}));\n/**\n * public Enum for `PdfDockStyle`.\n * @private\n */\nexport var PdfDockStyle;\n(function (PdfDockStyle) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n PdfDockStyle[PdfDockStyle[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `Bottom`.\n * @private\n */\n PdfDockStyle[PdfDockStyle[\"Bottom\"] = 1] = \"Bottom\";\n /**\n * Specifies the type of `Top`.\n * @private\n */\n PdfDockStyle[PdfDockStyle[\"Top\"] = 2] = \"Top\";\n /**\n * Specifies the type of `Left`.\n * @private\n */\n PdfDockStyle[PdfDockStyle[\"Left\"] = 3] = \"Left\";\n /**\n * Specifies the type of `Right`.\n * @private\n */\n PdfDockStyle[PdfDockStyle[\"Right\"] = 4] = \"Right\";\n /**\n * Specifies the type of `Fill`.\n * @private\n */\n PdfDockStyle[PdfDockStyle[\"Fill\"] = 5] = \"Fill\";\n})(PdfDockStyle || (PdfDockStyle = {}));\n/**\n * public Enum for `PdfAlignmentStyle`.\n * @private\n */\nexport var PdfAlignmentStyle;\n(function (PdfAlignmentStyle) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `TopLeft`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"TopLeft\"] = 1] = \"TopLeft\";\n /**\n * Specifies the type of `TopCenter`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"TopCenter\"] = 2] = \"TopCenter\";\n /**\n * Specifies the type of `TopRight`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"TopRight\"] = 3] = \"TopRight\";\n /**\n * Specifies the type of `MiddleLeft`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"MiddleLeft\"] = 4] = \"MiddleLeft\";\n /**\n * Specifies the type of `MiddleCenter`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"MiddleCenter\"] = 5] = \"MiddleCenter\";\n /**\n * Specifies the type of `MiddleRight`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"MiddleRight\"] = 6] = \"MiddleRight\";\n /**\n * Specifies the type of `BottomLeft`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"BottomLeft\"] = 7] = \"BottomLeft\";\n /**\n * Specifies the type of `BottomCenter`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"BottomCenter\"] = 8] = \"BottomCenter\";\n /**\n * Specifies the type of `BottomRight`.\n * @private\n */\n PdfAlignmentStyle[PdfAlignmentStyle[\"BottomRight\"] = 9] = \"BottomRight\";\n})(PdfAlignmentStyle || (PdfAlignmentStyle = {}));\n/**\n * public Enum for `TemplateType`.\n * @private\n */\nexport var TemplateType;\n(function (TemplateType) {\n /**\n * Specifies the type of `None`.\n * @private\n */\n TemplateType[TemplateType[\"None\"] = 0] = \"None\";\n /**\n * Specifies the type of `Top`.\n * @private\n */\n TemplateType[TemplateType[\"Top\"] = 1] = \"Top\";\n /**\n * Specifies the type of `Bottom`.\n * @private\n */\n TemplateType[TemplateType[\"Bottom\"] = 2] = \"Bottom\";\n /**\n * Specifies the type of `Left`.\n * @private\n */\n TemplateType[TemplateType[\"Left\"] = 3] = \"Left\";\n /**\n * Specifies the type of `Right`.\n * @private\n */\n TemplateType[TemplateType[\"Right\"] = 4] = \"Right\";\n})(TemplateType || (TemplateType = {}));\n","import { ObjectStatus } from './../input-output/enum';\nimport { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { DictionaryProperties } from './pdf-dictionary-properties';\nimport { Operators } from './pdf-operators';\nimport { Dictionary } from './../collections/dictionary';\nimport { PdfReference } from './../primitives/pdf-reference';\nimport { ObjectType } from './cross-table';\nimport { PdfStream } from './../primitives/pdf-stream';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PdfCatalog } from './../document/pdf-catalog';\n/**\n * `PdfCrossTable` is responsible for intermediate level parsing\n * and savingof a PDF document.\n * @private\n */\nvar PdfCrossTable = /** @class */ (function () {\n function PdfCrossTable() {\n /**\n * The modified `objects` that should be saved.\n * @private\n */\n this.objects = new Dictionary();\n /**\n * Holds `maximal generation number` or offset to object.\n * @default 0\n * @private\n */\n this.maxGenNumIndex = 0;\n /**\n * The `number of the objects`.\n * @default 0\n * @private\n */\n this.objectCount = 0;\n /**\n * Internal variable for accessing fields from `DictionryProperties` class.\n * @default new PdfDictionaryProperties()\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n }\n Object.defineProperty(PdfCrossTable.prototype, \"isMerging\", {\n //Properties\n /**\n * Gets or sets if the document `is merged`.\n * @private\n */\n get: function () {\n return this.merging;\n },\n set: function (value) {\n this.merging = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCrossTable.prototype, \"trailer\", {\n /**\n * Gets the `trailer`.\n * @private\n */\n get: function () {\n if (this.internalTrailer == null) {\n this.internalTrailer = new PdfStream();\n }\n return this.internalTrailer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCrossTable.prototype, \"document\", {\n /**\n * Gets or sets the main `PdfDocument` class instance.\n * @private\n */\n get: function () {\n return this.pdfDocument;\n },\n set: function (value) {\n this.pdfDocument = value;\n this.items = this.pdfDocument.pdfObjects;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCrossTable.prototype, \"pdfObjects\", {\n /**\n * Gets the catched `PDF object` main collection.\n * @private\n */\n get: function () {\n return this.items;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCrossTable.prototype, \"objectCollection\", {\n /**\n * Gets the `object collection`.\n * @private\n */\n get: function () {\n return this.pdfDocument.pdfObjects;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCrossTable.prototype, \"count\", {\n /**\n * Gets or sets the `number of the objects` within the document.\n * @private\n */\n get: function () {\n return this.objectCount;\n },\n set: function (value) {\n this.objectCount = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCrossTable.prototype, \"nextObjNumber\", {\n /**\n * Returns `next available object number`.\n * @private\n */\n get: function () {\n this.count = this.count + 1;\n return this.count;\n },\n enumerable: true,\n configurable: true\n });\n PdfCrossTable.prototype.save = function (writer, filename) {\n this.saveHead(writer);\n var state = false;\n this.mappedReferences = null;\n this.objects.clear();\n this.markTrailerReferences();\n this.saveObjects(writer);\n var saveCount = this.count;\n var xrefPos = writer.position;\n this.registerObject(0, new PdfReference(0, -1), true);\n var prevXRef = 0;\n writer.write(Operators.xref);\n writer.write(Operators.newLine);\n this.saveSections(writer);\n this.saveTrailer(writer, this.count, prevXRef);\n this.saveTheEndess(writer, xrefPos);\n this.count = saveCount;\n for (var i = 0; i < this.objectCollection.count; ++i) {\n var oi = this.objectCollection.items(i);\n oi.object.isSaving = false;\n }\n if (typeof filename === 'undefined') {\n return writer.stream.buffer;\n }\n else {\n writer.stream.save(filename);\n }\n };\n /**\n * `Saves the endess` of the file.\n * @private\n */\n PdfCrossTable.prototype.saveTheEndess = function (writer, xrefPos) {\n writer.write(Operators.newLine + Operators.startxref + Operators.newLine);\n writer.write(xrefPos.toString() + Operators.newLine);\n writer.write(Operators.eof + Operators.newLine);\n };\n /**\n * `Saves the new trailer` dictionary.\n * @private\n */\n PdfCrossTable.prototype.saveTrailer = function (writer, count, prevXRef) {\n writer.write(Operators.trailer + Operators.newLine);\n // Save the dictionary.\n var trailer = this.trailer;\n trailer.items.setValue(this.dictionaryProperties.size, new PdfNumber(this.objectCount + 1));\n trailer = new PdfDictionary(trailer); // Make it real dictionary.\n trailer.setEncrypt(false);\n trailer.save(writer);\n };\n /**\n * `Saves the xref section`.\n * @private\n */\n PdfCrossTable.prototype.saveSections = function (writer) {\n var objectNum = 0;\n var count = 0;\n do {\n count = this.prepareSubsection(objectNum);\n this.saveSubsection(writer, objectNum, count);\n objectNum += count;\n } while (count !== 0);\n };\n /**\n * `Saves a subsection`.\n * @private\n */\n PdfCrossTable.prototype.saveSubsection = function (writer, objectNum, count) {\n if (count <= 0 || objectNum >= this.count) {\n return;\n }\n var subsectionHead = '{0} {1}{2}';\n writer.write(objectNum + ' ' + (count + 1) + Operators.newLine);\n for (var i = objectNum; i <= objectNum + count; ++i) {\n var obj = this.objects.getValue(i);\n var str = '';\n if (obj.type === ObjectType.Free) {\n str = this.getItem(obj.offset, 65535, true);\n }\n else {\n str = this.getItem(obj.offset, obj.generation, false);\n }\n writer.write(str);\n }\n };\n /**\n * Generates string for `xref table item`.\n * @private\n */\n PdfCrossTable.prototype.getItem = function (offset, genNumber, isFree) {\n var returnString = '';\n var addOffsetLength = 10 - offset.toString().length;\n if (genNumber <= 0) {\n genNumber = 0;\n }\n var addGenNumberLength = (5 - genNumber.toString().length) <= 0 ? 0 : (5 - genNumber.toString().length);\n for (var index = 0; index < addOffsetLength; index++) {\n returnString = returnString + '0';\n }\n returnString = returnString + offset.toString() + ' ';\n for (var index = 0; index < addGenNumberLength; index++) {\n returnString = returnString + '0';\n }\n returnString = returnString + genNumber.toString() + ' ';\n returnString = returnString + ((isFree) ? Operators.f : Operators.n) + Operators.newLine;\n return returnString;\n };\n /**\n * `Prepares a subsection` of the current section within the cross-reference table.\n * @private\n */\n PdfCrossTable.prototype.prepareSubsection = function (objectNum) {\n var count = 0;\n var i;\n var total = this.count;\n for (var k = 0; k < this.document.pdfObjects.count; k++) {\n var reference = this.document.pdfObjects.items(k).reference;\n var refString = reference.toString();\n var refArray = refString.split(' ');\n }\n if (objectNum >= total) {\n return count;\n }\n // search for first changed indirect object.\n for (i = objectNum; i < total; ++i) {\n break;\n }\n objectNum = i;\n // look up for all indirect objects in one subsection.\n for (; i < total; ++i) {\n ++count;\n }\n return count;\n };\n /**\n * `Marks the trailer references` being saved.\n * @private\n */\n PdfCrossTable.prototype.markTrailerReferences = function () {\n var tempArray;\n var keys = this.trailer.items.keys();\n var values = this.trailer.items.values();\n };\n /**\n * `Saves the head`.\n * @private\n */\n PdfCrossTable.prototype.saveHead = function (writer) {\n var version = this.generateFileVersion(writer.document);\n writer.write('%PDF-' + version);\n writer.write(Operators.newLine);\n };\n /**\n * Generates the `version` of the file.\n * @private\n */\n PdfCrossTable.prototype.generateFileVersion = function (document) {\n var iVersion = 4;\n var version = '1.' + iVersion.toString();\n return version;\n };\n PdfCrossTable.prototype.getReference = function (obj, bNew) {\n if (typeof bNew === 'undefined') {\n var wasNew = false;\n return this.getReference(obj, wasNew);\n }\n else {\n //code splitted for reducing lines of code exceeds 100.\n return this.getSubReference(obj, bNew);\n }\n };\n /**\n * Retrieves the `reference` of the object given.\n * @private\n */\n PdfCrossTable.prototype.getSubReference = function (obj, bNew) {\n var isNew = false;\n var wasNew;\n var reference = null;\n // if (obj.IsSaving) {\n if (this.items.count > 0 && obj.objectCollectionIndex > 0 && this.items.count > obj.objectCollectionIndex - 1) {\n var tempObj = this.document.pdfObjects.getReference(obj, wasNew);\n reference = tempObj.reference;\n wasNew = tempObj.wasNew;\n }\n if (reference == null) {\n if (obj.status === ObjectStatus.Registered) {\n wasNew = false;\n }\n else {\n wasNew = true;\n }\n }\n else {\n wasNew = false;\n }\n // need to add mapped reference code\n if (reference == null) {\n var objnumber = this.nextObjNumber;\n reference = new PdfReference(objnumber, 0);\n var found = void 0;\n if (wasNew) {\n this.document.pdfObjects.add(obj);\n this.document.pdfObjects.trySetReference(obj, reference, found);\n var tempIndex = this.document.pdfObjects.count - 1;\n var tempkey = this.document.pdfObjects.objectCollections[tempIndex].reference.objNumber;\n var tempvalue = this.document.pdfObjects.objectCollections[this.document.pdfObjects.count - 1];\n this.document.pdfObjects.mainObjectCollection.setValue(tempkey, tempvalue);\n obj.position = -1;\n }\n else {\n this.document.pdfObjects.trySetReference(obj, reference, found);\n }\n obj.objectCollectionIndex = reference.objNumber;\n obj.status = ObjectStatus.None;\n isNew = true;\n }\n bNew = isNew || this.bForceNew;\n return reference;\n };\n /**\n * `Saves all objects` in the collection.\n * @private\n */\n PdfCrossTable.prototype.saveObjects = function (writer) {\n var objectCollection = this.objectCollection;\n for (var i = 0; i < objectCollection.count; ++i) {\n var oi = objectCollection.items(i);\n var obj = oi.object;\n obj.isSaving = true;\n this.saveIndirectObject(obj, writer);\n }\n };\n /**\n * `Saves indirect object`.\n * @private\n */\n PdfCrossTable.prototype.saveIndirectObject = function (obj, writer) {\n var reference = this.getReference(obj);\n if (obj instanceof PdfCatalog) {\n this.trailer.items.setValue(this.dictionaryProperties.root, reference);\n }\n // NOTE : This is needed for correct string objects encryption.\n this.pdfDocument.currentSavingObj = reference;\n var tempArchive = false;\n tempArchive = obj.getArchive();\n var allowedType = !((obj instanceof PdfStream) || !tempArchive || (obj instanceof PdfCatalog));\n var sigFlag = false;\n this.registerObject(writer.position, reference);\n this.doSaveObject(obj, reference, writer);\n };\n /**\n * Performs `real saving` of the save object.\n * @private\n */\n PdfCrossTable.prototype.doSaveObject = function (obj, reference, writer) {\n var correctPosition = writer.length;\n writer.write(reference.objNumber.toString());\n writer.write(Operators.whiteSpace);\n writer.write(reference.genNumber.toString());\n writer.write(Operators.whiteSpace);\n writer.write(Operators.obj);\n writer.write(Operators.newLine);\n obj.save(writer);\n var stream = writer.stream;\n writer.write(Operators.endObj);\n writer.write(Operators.newLine);\n };\n PdfCrossTable.prototype.registerObject = function (offset, reference, free) {\n if (typeof free === 'boolean') {\n // Register the object by its number.\n this.objects.setValue(reference.objNumber, new RegisteredObject(offset, reference, free));\n this.maxGenNumIndex = Math.max(this.maxGenNumIndex, reference.genNumber);\n }\n else if (typeof free === 'undefined') {\n // Register the object by its number.\n this.objects.setValue(reference.objNumber, new RegisteredObject(offset, reference));\n this.maxGenNumIndex = Math.max(this.maxGenNumIndex, reference.genNumber);\n }\n };\n /**\n * `Dereferences` the specified primitive object.\n * @private\n */\n PdfCrossTable.dereference = function (obj) {\n var rh = obj;\n if (rh != null) {\n obj = rh.object;\n }\n return obj;\n };\n return PdfCrossTable;\n}());\nexport { PdfCrossTable };\nvar RegisteredObject = /** @class */ (function () {\n function RegisteredObject(offset, reference, free) {\n if (typeof free === 'undefined') {\n var tempOffset = offset;\n this.offsetNumber = tempOffset;\n var tempReference = reference;\n this.generation = tempReference.genNumber;\n this.object = tempReference.objNumber;\n this.type = ObjectType.Normal;\n }\n else {\n var tempOffset = offset;\n var tempReference = reference;\n this.constructor(tempOffset, tempReference);\n var tempFree = free;\n this.type = ObjectType.Free;\n }\n }\n Object.defineProperty(RegisteredObject.prototype, \"objectNumber\", {\n //Properties\n /**\n * Gets the `object number`.\n * @private\n */\n get: function () {\n return this.object;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(RegisteredObject.prototype, \"offset\", {\n /**\n * Gets the `offset`.\n * @private\n */\n get: function () {\n var result;\n result = this.offsetNumber;\n return result;\n },\n enumerable: true,\n configurable: true\n });\n return RegisteredObject;\n}());\nexport { RegisteredObject };\n","/**\n * PdfPageSize.ts class for EJ2-PDF\n */\nimport { SizeF } from './../drawing/pdf-drawing';\n/**\n * Represents information about various predefined `page sizes`.\n */\nvar PdfPageSize = /** @class */ (function () {\n //constructor\n /**\n * Initialize an instance for `PdfPageSize` class.\n * @private\n */\n function PdfPageSize() {\n // \n }\n /**\n * Specifies the size of `letter`.\n * @private\n */\n PdfPageSize.letter = new SizeF(612, 792);\n /**\n * Specifies the size of `note`.\n * @private\n */\n PdfPageSize.note = new SizeF(540, 720);\n /**\n * Specifies the size of `legal`.\n * @private\n */\n PdfPageSize.legal = new SizeF(612, 1008);\n /**\n * Specifies the size of `a0`.\n * @private\n */\n PdfPageSize.a0 = new SizeF(2380, 3368);\n /**\n * Specifies the size of `a1`.\n * @private\n */\n PdfPageSize.a1 = new SizeF(1684, 2380);\n /**\n * Specifies the size of `a2`.\n * @private\n */\n PdfPageSize.a2 = new SizeF(1190, 1684);\n /**\n * Specifies the size of `a3`.\n * @private\n */\n PdfPageSize.a3 = new SizeF(842, 1190);\n /**\n * Specifies the size of `a4`.\n * @private\n */\n PdfPageSize.a4 = new SizeF(595, 842);\n /**\n * Specifies the size of `a5`.\n * @private\n */\n PdfPageSize.a5 = new SizeF(421, 595);\n /**\n * Specifies the size of `a6`.\n * @private\n */\n PdfPageSize.a6 = new SizeF(297, 421);\n /**\n * Specifies the size of `a7`.\n * @private\n */\n PdfPageSize.a7 = new SizeF(210, 297);\n /**\n * Specifies the size of `a8`.\n * @private\n */\n PdfPageSize.a8 = new SizeF(148, 210);\n /**\n * Specifies the size of `a9`.\n * @private\n */\n PdfPageSize.a9 = new SizeF(105, 148);\n /**\n * Specifies the size of `a10`.\n * @private\n */\n PdfPageSize.a10 = new SizeF(74, 105);\n /**\n * Specifies the size of `b0`.\n * @private\n */\n PdfPageSize.b0 = new SizeF(2836, 4008);\n /**\n * Specifies the size of `b1`.\n * @private\n */\n PdfPageSize.b1 = new SizeF(2004, 2836);\n /**\n * Specifies the size of `b2`.\n * @private\n */\n PdfPageSize.b2 = new SizeF(1418, 2004);\n /**\n * Specifies the size of `b3`.\n * @private\n */\n PdfPageSize.b3 = new SizeF(1002, 1418);\n /**\n * Specifies the size of `b4`.\n * @private\n */\n PdfPageSize.b4 = new SizeF(709, 1002);\n /**\n * Specifies the size of `b5`.\n * @private\n */\n PdfPageSize.b5 = new SizeF(501, 709);\n /**\n * Specifies the size of `archE`.\n * @private\n */\n PdfPageSize.archE = new SizeF(2592, 3456);\n /**\n * Specifies the size of `archD`.\n * @private\n */\n PdfPageSize.archD = new SizeF(1728, 2592);\n /**\n * Specifies the size of `archC`.\n * @private\n */\n PdfPageSize.archC = new SizeF(1296, 1728);\n /**\n * Specifies the size of `archB`.\n * @private\n */\n PdfPageSize.archB = new SizeF(864, 1296);\n /**\n * Specifies the size of `archA`.\n * @private\n */\n PdfPageSize.archA = new SizeF(648, 864);\n /**\n * Specifies the size of `flsa`.\n * @private\n */\n PdfPageSize.flsa = new SizeF(612, 936);\n /**\n * Specifies the size of `halfLetter`.\n * @private\n */\n PdfPageSize.halfLetter = new SizeF(396, 612);\n /**\n * Specifies the size of `letter11x17`.\n * @private\n */\n PdfPageSize.letter11x17 = new SizeF(792, 1224);\n /**\n * Specifies the size of `ledger`.\n * @private\n */\n PdfPageSize.ledger = new SizeF(1224, 792);\n return PdfPageSize;\n}());\nexport { PdfPageSize };\n","/**\n * PdfMargins.ts class for EJ2-PDF\n * A class representing PDF page margins.\n */\nvar PdfMargins = /** @class */ (function () {\n /**\n * Initializes a new instance of the `PdfMargins` class.\n * @private\n */\n function PdfMargins() {\n /**\n * Represents the `Default Page Margin` value.\n * @default 0.0\n * @private\n */\n this.pdfMargin = 40.0;\n this.setMargins(this.pdfMargin);\n }\n Object.defineProperty(PdfMargins.prototype, \"left\", {\n //Properties\n /**\n * Gets or sets the `left margin` size.\n * @private\n */\n get: function () {\n return this.leftMargin;\n },\n set: function (value) {\n this.leftMargin = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfMargins.prototype, \"top\", {\n /**\n * Gets or sets the `top margin` size.\n * @private\n */\n get: function () {\n return this.topMargin;\n },\n set: function (value) {\n this.topMargin = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfMargins.prototype, \"right\", {\n /**\n * Gets or sets the `right margin` size.\n * @private\n */\n get: function () {\n return this.rightMargin;\n },\n set: function (value) {\n this.rightMargin = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfMargins.prototype, \"bottom\", {\n /**\n * Gets or sets the `bottom margin` size.\n * @private\n */\n get: function () {\n return this.bottomMargin;\n },\n set: function (value) {\n this.bottomMargin = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfMargins.prototype, \"all\", {\n /**\n * Sets the `margins`.\n * @private\n */\n set: function (value) {\n this.setMargins(value);\n },\n enumerable: true,\n configurable: true\n });\n PdfMargins.prototype.setMargins = function (margin1, margin2, margin3, margin4) {\n if (typeof margin2 === 'undefined') {\n this.leftMargin = this.topMargin = this.rightMargin = this.bottomMargin = margin1;\n }\n else {\n if (typeof margin3 === 'undefined') {\n this.leftMargin = this.rightMargin = margin1;\n this.bottomMargin = this.topMargin = margin2;\n }\n else {\n this.leftMargin = margin1;\n this.topMargin = margin2;\n this.rightMargin = margin3;\n this.bottomMargin = margin4;\n }\n }\n };\n /**\n * `Clones` the object.\n * @private\n */\n PdfMargins.prototype.clone = function () {\n return this;\n };\n return PdfMargins;\n}());\nexport { PdfMargins };\n","/**\n * ImageDecoder class\n */\nimport { ByteArray } from './byte-array';\nimport { PdfStream } from './../../primitives/pdf-stream';\nimport { DictionaryProperties } from './../../input-output/pdf-dictionary-properties';\nimport { PdfName } from './../../primitives/pdf-name';\nimport { PdfNumber } from './../../primitives/pdf-number';\nimport { PdfBoolean } from './../../primitives/pdf-boolean';\nimport { PdfDictionary } from './../../primitives/pdf-dictionary';\n/**\n * Specifies the image `format`.\n * @private\n */\nexport var ImageFormat;\n(function (ImageFormat) {\n /**\n * Specifies the type of `Unknown`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Unknown\"] = 0] = \"Unknown\";\n /**\n * Specifies the type of `Bmp`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Bmp\"] = 1] = \"Bmp\";\n /**\n * Specifies the type of `Emf`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Emf\"] = 2] = \"Emf\";\n /**\n * Specifies the type of `Gif`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Gif\"] = 3] = \"Gif\";\n /**\n * Specifies the type of `Jpeg`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Jpeg\"] = 4] = \"Jpeg\";\n /**\n * Specifies the type of `Png`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Png\"] = 5] = \"Png\";\n /**\n * Specifies the type of `Wmf`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Wmf\"] = 6] = \"Wmf\";\n /**\n * Specifies the type of `Icon`.\n * @hidden\n * @private\n */\n ImageFormat[ImageFormat[\"Icon\"] = 7] = \"Icon\";\n})(ImageFormat || (ImageFormat = {}));\n/**\n * `Decode the image stream`.\n * @private\n */\nvar ImageDecoder = /** @class */ (function () {\n /**\n * Initialize the new instance for `image-decoder` class.\n * @private\n */\n function ImageDecoder(stream) {\n /**\n * Specifies `format` of image.\n * @hidden\n * @private\n */\n this.mFormat = ImageFormat.Unknown;\n /**\n * `Bits per component`.\n * @default 8\n * @hidden\n * @private\n */\n this.mbitsPerComponent = 8;\n /**\n * Internal variable for accessing fields from `DictionryProperties` class.\n * @hidden\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n this.mStream = stream;\n this.initialize();\n }\n Object.defineProperty(ImageDecoder.prototype, \"height\", {\n /**\n * Gets the `height` of image.\n * @hidden\n * @private\n */\n get: function () {\n return this.mHeight;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageDecoder.prototype, \"width\", {\n /**\n * Gets the `width` of image.\n * @hidden\n * @private\n */\n get: function () {\n return this.mWidth;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageDecoder.prototype, \"bitsPerComponent\", {\n /**\n * Gets `bits per component`.\n * @hidden\n * @private\n */\n get: function () {\n return this.mbitsPerComponent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageDecoder.prototype, \"size\", {\n /**\n * Gets the `size` of an image data.\n * @hidden\n * @private\n */\n get: function () {\n return this.mImageData.count;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageDecoder.prototype, \"imageData\", {\n /**\n * Gets the value of an `image data`.\n * @hidden\n * @private\n */\n get: function () {\n return this.mImageData;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ImageDecoder.prototype, \"imageDataAsNumberArray\", {\n /**\n * Gets the value of an `image data as number array`.\n * @hidden\n * @private\n */\n get: function () {\n return this.mImageData.internalBuffer.buffer;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Initialize` image data and image stream.\n * @hidden\n * @private\n */\n ImageDecoder.prototype.initialize = function () {\n if (this.mFormat === ImageFormat.Unknown && this.checkIfJpeg()) {\n this.mFormat = ImageFormat.Jpeg;\n this.parseJpegImage();\n }\n this.reset();\n this.mImageData = new ByteArray(this.mStream.count);\n this.mStream.read(this.mImageData, 0, this.mImageData.count);\n };\n /**\n * `Reset` stream position into 0.\n * @hidden\n * @private\n */\n ImageDecoder.prototype.reset = function () {\n this.mStream.position = 0;\n };\n /**\n * `Parse` Jpeg image.\n * @hidden\n * @private\n */\n ImageDecoder.prototype.parseJpegImage = function () {\n this.reset();\n var imgData = new ByteArray(this.mStream.count);\n this.mStream.read(imgData, 0, imgData.count);\n var i = 4;\n /* tslint:disable */\n if (String.fromCharCode(imgData.getBuffer(i + 2)) === 'J' && String.fromCharCode(imgData.getBuffer(i + 3)) === 'F' && String.fromCharCode(imgData.getBuffer(i + 4)) === 'I' && String.fromCharCode(imgData.getBuffer(i + 5)) === 'F' && imgData.getBuffer(i + 6) === 0) {\n var length_1 = imgData.getBuffer(i) * 256 + imgData.getBuffer(i + 1);\n while (i + length_1 < imgData.count) {\n i += length_1;\n if (imgData.getBuffer(i + 1) === 192) {\n this.mHeight = imgData.getBuffer(i + 5) * 256 + imgData.getBuffer(i + 6);\n this.mWidth = imgData.getBuffer(i + 7) * 256 + imgData.getBuffer(i + 8);\n return;\n }\n else {\n i += 2;\n length_1 = imgData.getBuffer(i) * 256 + imgData.getBuffer(i + 1);\n }\n }\n }\n /* tslint:enable */\n };\n Object.defineProperty(ImageDecoder.prototype, \"format\", {\n /**\n * Gets the image `format`.\n * @private\n * @hidden\n */\n get: function () {\n return this.mFormat;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Checks if JPG`.\n * @private\n * @hidden\n */\n ImageDecoder.prototype.checkIfJpeg = function () {\n this.reset();\n for (var i = 0; i < ImageDecoder.mJpegHeader.length; i++) {\n if (ImageDecoder.mJpegHeader[i] !== this.mStream.readByte(i)) {\n return false;\n }\n this.mStream.position++;\n }\n return true;\n };\n /**\n * Return image `dictionary`.\n * @hidden\n * @private\n */\n ImageDecoder.prototype.getImageDictionary = function () {\n if (this.mFormat === ImageFormat.Jpeg) {\n var tempArrayBuffer = this.imageData.internalBuffer.length;\n this.imageStream = new PdfStream();\n this.imageStream.isImage = true;\n var tempString = '';\n var decodedString = '';\n for (var i = 0; i < this.imageDataAsNumberArray.byteLength; i++) {\n tempString += String.fromCharCode(null, this.mStream.readByte(i));\n }\n for (var i = 0; i < tempString.length; i++) {\n if (i % 2 !== 0) {\n decodedString += tempString[i];\n }\n }\n this.imageStream.data = [decodedString];\n this.imageStream.compress = false;\n this.imageStream.items.setValue(this.dictionaryProperties.type, new PdfName(this.dictionaryProperties.xObject));\n this.imageStream.items.setValue(this.dictionaryProperties.subtype, new PdfName(this.dictionaryProperties.image));\n this.imageStream.items.setValue(this.dictionaryProperties.width, new PdfNumber(this.width));\n this.imageStream.items.setValue(this.dictionaryProperties.height, new PdfNumber(this.height));\n this.imageStream.items.setValue(this.dictionaryProperties.bitsPerComponent, new PdfNumber(this.bitsPerComponent));\n this.imageStream.items.setValue(this.dictionaryProperties.filter, new PdfName(this.dictionaryProperties.dctdecode));\n this.imageStream.items.setValue(this.dictionaryProperties.colorSpace, new PdfName(this.getColorSpace()));\n this.imageStream.items.setValue(this.dictionaryProperties.decodeParms, this.getDecodeParams());\n return this.imageStream;\n }\n else {\n return this.imageStream;\n }\n };\n /**\n * Return `colorSpace` of an image.\n * @hidden\n * @private\n */\n ImageDecoder.prototype.getColorSpace = function () {\n return this.dictionaryProperties.deviceRgb;\n };\n /**\n * Return `decode parameters` of an image.\n * @hidden\n * @private\n */\n ImageDecoder.prototype.getDecodeParams = function () {\n var decodeParams = new PdfDictionary();\n decodeParams.items.setValue(this.dictionaryProperties.columns, new PdfNumber(this.width));\n decodeParams.items.setValue(this.dictionaryProperties.blackIs1, new PdfBoolean(true));\n decodeParams.items.setValue(this.dictionaryProperties.k, new PdfNumber(-1));\n decodeParams.items.setValue(this.dictionaryProperties.predictor, new PdfNumber(15));\n decodeParams.items.setValue(this.dictionaryProperties.bitsPerComponent, new PdfNumber(this.bitsPerComponent));\n return decodeParams;\n };\n /**\n * Number array for `png header`.\n * @hidden\n * @private\n */\n ImageDecoder.mPngHeader = [137, 80, 78, 71, 13, 10, 26, 10];\n /**\n * Number Array for `jpeg header`.\n * @hidden\n * @private\n */\n ImageDecoder.mJpegHeader = [255, 216];\n /**\n * Number array for `gif header`.\n * @hidden\n * @private\n */\n ImageDecoder.GIF_HEADER = 'G,I,F,8';\n /**\n * Number array for `bmp header.`\n * @hidden\n * @private\n */\n ImageDecoder.BMP_HEADER = 'B,M';\n return ImageDecoder;\n}());\nexport { ImageDecoder };\n","/**\n * PdfPageSettings.ts class for EJ2-PDF\n */\nimport { SizeF, PointF } from './../drawing/pdf-drawing';\nimport { PdfPageSize } from './pdf-page-size';\nimport { PdfPageRotateAngle, PdfPageOrientation } from './enum';\nimport { PdfMargins } from './../graphics/pdf-margins';\n/**\n * The class provides various `setting` related with PDF pages.\n */\nvar PdfPageSettings = /** @class */ (function () {\n function PdfPageSettings(margins) {\n //Fields\n /**\n * The page `margins`.\n * @private\n */\n this.pageMargins = new PdfMargins();\n /**\n * The page `size`.\n * @default a4\n * @private\n */\n this.pageSize = PdfPageSize.a4;\n /**\n * The page `rotation angle`.\n * @default PdfPageRotateAngle.RotateAngle0\n * @private\n */\n this.rotateAngle = PdfPageRotateAngle.RotateAngle0;\n /**\n * The page `orientation`.\n * @default PdfPageOrientation.Portrait\n * @private\n */\n this.pageOrientation = PdfPageOrientation.Portrait;\n /**\n * The page `origin`.\n * @default 0,0\n * @private\n */\n this.pageOrigin = new PointF(0, 0);\n /**\n * Checks the Whether the `rotation` is applied or not.\n * @default false\n * @private\n */\n this.isRotation = false;\n if (typeof margins === 'number') {\n this.pageMargins.setMargins(margins);\n }\n }\n Object.defineProperty(PdfPageSettings.prototype, \"size\", {\n //Properties\n /**\n * Gets or sets the `size` of the page.\n * @private\n */\n get: function () {\n return this.pageSize;\n },\n set: function (value) {\n this.setSize(value);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageSettings.prototype, \"orientation\", {\n /**\n * Gets or sets the page `orientation`.\n * @private\n */\n get: function () {\n return this.pageOrientation;\n },\n set: function (orientation) {\n if (this.pageOrientation !== orientation) {\n this.pageOrientation = orientation;\n this.updateSize(orientation);\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageSettings.prototype, \"margins\", {\n /**\n * Gets or sets the `margins` of the page.\n * @private\n */\n get: function () {\n return this.pageMargins;\n },\n set: function (value) {\n this.pageMargins = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageSettings.prototype, \"width\", {\n /**\n * Gets or sets the `width` of the page.\n * @private\n */\n get: function () {\n return this.pageSize.width;\n },\n set: function (value) {\n this.pageSize.width = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageSettings.prototype, \"height\", {\n /**\n * Gets or sets the `height` of the page.\n * @private\n */\n get: function () {\n return this.pageSize.height;\n },\n set: function (value) {\n this.pageSize.height = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageSettings.prototype, \"origin\", {\n /**\n * Gets or sets the `origin` of the page.\n * @private\n */\n get: function () {\n return this.pageOrigin;\n },\n set: function (value) {\n this.pageOrigin = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageSettings.prototype, \"rotate\", {\n /**\n * Gets or sets the number of degrees by which the page should be `rotated` clockwise when displayed or printed.\n * @private\n */\n get: function () {\n return this.rotateAngle;\n },\n set: function (value) {\n this.rotateAngle = value;\n this.isRotation = true;\n },\n enumerable: true,\n configurable: true\n });\n //Methods\n /**\n * `Update page size` depending on orientation.\n * @private\n */\n PdfPageSettings.prototype.updateSize = function (orientation) {\n var min = Math.min(this.pageSize.width, this.pageSize.height);\n var max = Math.max(this.pageSize.width, this.pageSize.height);\n switch (orientation) {\n case PdfPageOrientation.Portrait:\n this.pageSize = new SizeF(min, max);\n break;\n case PdfPageOrientation.Landscape:\n this.pageSize = new SizeF(max, min);\n break;\n }\n };\n /**\n * Creates a `clone` of the object.\n * @private\n */\n PdfPageSettings.prototype.clone = function () {\n var settings = this;\n settings.pageMargins = this.pageMargins.clone();\n // if (GetTransition() != null)\n // {\n // settings.Transition = (PdfPageTransition)Transition.clone();\n // }\n return settings;\n };\n /**\n * Returns `size`, shrinked by the margins.\n * @private\n */\n PdfPageSettings.prototype.getActualSize = function () {\n var width = this.width - (this.margins.left + this.margins.right);\n var height = this.height - (this.margins.top + this.margins.bottom);\n var size = new SizeF(width, height);\n return size;\n };\n /**\n * Sets `size` to the page aaccording to the orientation.\n * @private\n */\n PdfPageSettings.prototype.setSize = function (size) {\n var min = Math.min(size.width, size.height);\n var max = Math.max(size.width, size.height);\n if (this.orientation === PdfPageOrientation.Portrait) {\n this.pageSize = new SizeF(min, max);\n }\n else {\n this.pageSize = new SizeF(max, min);\n }\n };\n return PdfPageSettings;\n}());\nexport { PdfPageSettings };\n","import { Operators } from './pdf-operators';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PointF, RectangleF } from './../drawing/pdf-drawing';\nimport { PdfString } from './../primitives/pdf-string';\nimport { PdfName } from './../primitives/pdf-name';\n/**\n * Helper class to `write PDF graphic streams` easily.\n * @private\n */\nvar PdfStreamWriter = /** @class */ (function () {\n /**\n * Initialize an instance of `PdfStreamWriter` class.\n * @private\n */\n function PdfStreamWriter(stream) {\n if (stream == null) {\n throw new Error('ArgumentNullException:stream');\n }\n this.stream = stream;\n }\n //Implementation\n /**\n * `Clear` the stream.\n * @public\n */\n PdfStreamWriter.prototype.clear = function () {\n this.stream.clearStream();\n };\n PdfStreamWriter.prototype.setGraphicsState = function (dictionaryName) {\n if (dictionaryName instanceof PdfName) {\n this.stream.write(dictionaryName.toString());\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setGraphicsState);\n }\n else {\n this.stream.write(Operators.slash);\n this.stream.write(dictionaryName);\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setGraphicsState);\n }\n };\n /**\n * `Executes the XObject`.\n * @private\n */\n PdfStreamWriter.prototype.executeObject = function (name) {\n this.stream.write(name.toString());\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.paintXObject);\n this.stream.write(Operators.newLine);\n };\n /**\n * `Closes path object`.\n * @private\n */\n PdfStreamWriter.prototype.closePath = function () {\n this.writeOperator(Operators.closePath);\n };\n /**\n * `Clips the path`.\n * @private\n */\n PdfStreamWriter.prototype.clipPath = function (useEvenOddRule) {\n this.stream.write(Operators.clipPath);\n if (useEvenOddRule) {\n this.stream.write(Operators.evenOdd);\n }\n this.stream.write(Operators.whiteSpace);\n this.stream.write(Operators.endPath);\n this.stream.write(Operators.newLine);\n };\n /**\n * `Closes, then fills and strokes the path`.\n * @private\n */\n PdfStreamWriter.prototype.closeFillStrokePath = function (useEvenOddRule) {\n this.stream.write(Operators.closeFillStrokePath);\n if (useEvenOddRule) {\n this.stream.write(Operators.evenOdd);\n this.stream.write(Operators.newLine);\n }\n else {\n this.stream.write(Operators.newLine);\n }\n };\n /**\n * `Fills and strokes path`.\n * @private\n */\n PdfStreamWriter.prototype.fillStrokePath = function (useEvenOddRule) {\n this.stream.write(Operators.fillStroke);\n if (useEvenOddRule) {\n this.stream.write(Operators.evenOdd);\n this.stream.write(Operators.newLine);\n }\n else {\n this.stream.write(Operators.newLine);\n }\n };\n /**\n * `Fills path`.\n * @private\n */\n PdfStreamWriter.prototype.fillPath = function (useEvenOddRule) {\n this.stream.write(Operators.fill);\n if (useEvenOddRule) {\n this.stream.write(Operators.evenOdd);\n this.stream.write(Operators.newLine);\n }\n else {\n this.stream.write(Operators.newLine);\n }\n };\n /**\n * `Ends the path`.\n * @private\n */\n PdfStreamWriter.prototype.endPath = function () {\n this.writeOperator(Operators.n);\n };\n /**\n * `Closes and fills the path`.\n * @private\n */\n PdfStreamWriter.prototype.closeFillPath = function (useEvenOddRule) {\n this.writeOperator(Operators.closePath);\n this.stream.write(Operators.fill);\n if (useEvenOddRule) {\n this.stream.write(Operators.evenOdd);\n this.stream.write(Operators.newLine);\n }\n else {\n this.stream.write(Operators.newLine);\n }\n };\n /**\n * `Closes and strokes the path`.\n * @private\n */\n PdfStreamWriter.prototype.closeStrokePath = function () {\n this.writeOperator(Operators.closeStrokePath);\n };\n /**\n * `Sets the text scaling`.\n * @private\n */\n PdfStreamWriter.prototype.setTextScaling = function (textScaling) {\n this.stream.write(PdfNumber.floatToString(textScaling));\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setTextScaling);\n };\n /**\n * `Strokes path`.\n * @private\n */\n PdfStreamWriter.prototype.strokePath = function () {\n this.writeOperator(Operators.stroke);\n };\n /**\n * `Restores` the graphics state.\n * @private\n */\n PdfStreamWriter.prototype.restoreGraphicsState = function () {\n this.writeOperator(Operators.restoreState);\n };\n /**\n * `Saves` the graphics state.\n * @private\n */\n PdfStreamWriter.prototype.saveGraphicsState = function () {\n this.writeOperator(Operators.saveState);\n };\n PdfStreamWriter.prototype.startNextLine = function (arg1, arg2) {\n if (typeof arg1 === 'undefined') {\n this.writeOperator(Operators.goToNextLine);\n }\n else if (arg1 instanceof PointF) {\n this.writePoint(arg1);\n this.writeOperator(Operators.setCoords);\n }\n else {\n this.writePoint(arg1, arg2);\n this.writeOperator(Operators.setCoords);\n }\n };\n /**\n * Sets `text leading`.\n * @private\n */\n PdfStreamWriter.prototype.setLeading = function (leading) {\n this.stream.write(PdfNumber.floatToString(leading));\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setTextLeading);\n };\n /**\n * `Begins the path`.\n * @private\n */\n PdfStreamWriter.prototype.beginPath = function (x, y) {\n this.writePoint(x, y);\n this.writeOperator(Operators.beginPath);\n };\n /**\n * `Begins text`.\n * @private\n */\n PdfStreamWriter.prototype.beginText = function () {\n this.writeOperator(Operators.beginText);\n };\n /**\n * `Ends text`.\n * @private\n */\n PdfStreamWriter.prototype.endText = function () {\n this.writeOperator(Operators.endText);\n };\n PdfStreamWriter.prototype.appendRectangle = function (arg1, arg2, arg3, arg4) {\n if (arg1 instanceof RectangleF) {\n this.appendRectangle(arg1.x, arg1.y, arg1.width, arg1.height);\n }\n else {\n this.writePoint(arg1, arg2);\n this.writePoint(arg3, arg4);\n this.writeOperator(Operators.appendRectangle);\n }\n };\n PdfStreamWriter.prototype.appendLineSegment = function (arg1, arg2) {\n if (arg1 instanceof PointF) {\n this.appendLineSegment(arg1.x, arg1.y);\n }\n else {\n this.writePoint(arg1, arg2);\n this.writeOperator(Operators.appendLineSegment);\n }\n };\n /**\n * Sets the `text rendering mode`.\n * @private\n */\n PdfStreamWriter.prototype.setTextRenderingMode = function (renderingMode) {\n this.stream.write(renderingMode.toString());\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setRenderingMode);\n };\n /**\n * Sets the `character spacing`.\n * @private\n */\n PdfStreamWriter.prototype.setCharacterSpacing = function (charSpacing) {\n this.stream.write(PdfNumber.floatToString(charSpacing));\n this.stream.write(Operators.whiteSpace);\n this.stream.write(Operators.setCharacterSpace);\n this.stream.write(Operators.newLine);\n };\n /**\n * Sets the `word spacing`.\n * @private\n */\n PdfStreamWriter.prototype.setWordSpacing = function (wordSpacing) {\n this.stream.write(PdfNumber.floatToString(wordSpacing));\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setWordSpace);\n };\n PdfStreamWriter.prototype.showNextLineText = function (arg1, arg2) {\n if (arg1 instanceof PdfString) {\n this.checkTextParam(arg1);\n this.writeText(arg1);\n this.writeOperator(Operators.setTextOnNewLine);\n }\n else {\n this.checkTextParam(arg1);\n this.writeText(arg1, arg2);\n this.writeOperator(Operators.setTextOnNewLine);\n }\n };\n PdfStreamWriter.prototype.setColorSpace = function (arg1, arg2) {\n if (arg1 instanceof PdfName && typeof arg2 === 'boolean') {\n var temparg1 = arg1;\n var temparg2 = arg2;\n // if (temparg1 == null) {\n // throw new Error('ArgumentNullException:name');\n // }\n var op = (temparg2) ? Operators.selectcolorspaceforstroking : Operators.selectcolorspacefornonstroking;\n this.stream.write(temparg1.toString());\n this.stream.write(Operators.whiteSpace);\n this.stream.write(op);\n this.stream.write(Operators.newLine);\n }\n else {\n var temparg1 = arg1;\n var temparg2 = arg2;\n this.setColorSpace(new PdfName(temparg1), temparg2);\n }\n };\n /**\n * Modifies current `transformation matrix`.\n * @private\n */\n PdfStreamWriter.prototype.modifyCtm = function (matrix) {\n if (matrix == null) {\n throw new Error('ArgumentNullException:matrix');\n }\n this.stream.write(matrix.toString());\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.modifyCtm);\n };\n PdfStreamWriter.prototype.setFont = function (font, name, size) {\n if (typeof name === 'string') {\n this.setFont(font, new PdfName(name), size);\n }\n else {\n if (font == null) {\n throw new Error('ArgumentNullException:font');\n }\n this.stream.write(name.toString());\n this.stream.write(Operators.whiteSpace);\n this.stream.write(PdfNumber.floatToString(size));\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setFont);\n }\n };\n /**\n * `Writes the operator`.\n * @private\n */\n PdfStreamWriter.prototype.writeOperator = function (opcode) {\n this.stream.write(opcode);\n this.stream.write(Operators.newLine);\n };\n PdfStreamWriter.prototype.checkTextParam = function (text) {\n if (text == null) {\n throw new Error('ArgumentNullException:text');\n }\n if (typeof text === 'string' && text === '') {\n throw new Error('ArgumentException:The text can not be an empty string, text');\n }\n };\n PdfStreamWriter.prototype.writeText = function (arg1, arg2) {\n if ((arg1 instanceof PdfString) && (typeof arg2 === 'undefined')) {\n this.stream.write(arg1.value);\n }\n else {\n var start = void 0;\n var end = void 0;\n if (arg2) {\n start = PdfString.hexStringMark[0];\n end = PdfString.hexStringMark[1];\n }\n else {\n start = PdfString.stringMark[0];\n end = PdfString.stringMark[1];\n }\n this.stream.write(start);\n this.stream.write(arg1);\n this.stream.write(end);\n }\n };\n PdfStreamWriter.prototype.writePoint = function (arg1, arg2) {\n if ((arg1 instanceof PointF) && (typeof arg2 === 'undefined')) {\n this.writePoint(arg1.x, arg1.y);\n }\n else {\n var temparg1 = arg1;\n this.stream.write(PdfNumber.floatToString(temparg1));\n this.stream.write(Operators.whiteSpace);\n // NOTE: Change Y co-ordinate because we shifted co-ordinate system only.\n arg2 = this.updateY(arg2);\n this.stream.write(PdfNumber.floatToString(arg2));\n this.stream.write(Operators.whiteSpace);\n }\n };\n /**\n * `Updates y` co-ordinate.\n * @private\n */\n PdfStreamWriter.prototype.updateY = function (arg) {\n return -arg;\n };\n /**\n * `Writes string` to the file.\n * @private\n */\n PdfStreamWriter.prototype.write = function (string) {\n var builder = '';\n builder += string;\n builder += Operators.newLine;\n this.writeOperator(builder);\n };\n /**\n * `Writes comment` to the file.\n * @private\n */\n PdfStreamWriter.prototype.writeComment = function (comment) {\n if (comment != null && comment.length > 0) {\n var builder = '';\n builder += Operators.comment;\n builder += Operators.whiteSpace;\n builder += comment;\n //builder.Append( Operators.NewLine );\n this.writeOperator(builder);\n }\n else {\n throw new Error('Invalid comment');\n }\n };\n /**\n * Sets the `color and space`.\n * @private\n */\n PdfStreamWriter.prototype.setColorAndSpace = function (color, colorSpace, forStroking) {\n if (!color.isEmpty) {\n // bool test = color is PdfExtendedColor;\n this.stream.write(color.toString(colorSpace, forStroking));\n this.stream.write(Operators.newLine);\n }\n };\n // public setLineDashPattern(pattern : number[], patternOffset : number) : void\n // {\n // let pat : PdfArray = new PdfArray(pattern);\n // let off : PdfNumber = new PdfNumber(patternOffset);\n // this.setLineDashPatternHelper(pat, off);\n // }\n // private setLineDashPatternHelper(pattern : PdfArray, patternOffset : PdfNumber) : void\n // {\n // pattern.Save(this);\n // this.m_stream.write(Operators.whiteSpace);\n // patternOffset.Save(this);\n // this.m_stream.write(Operators.whiteSpace);\n // this.writeOperator(Operators.setDashPattern);\n // }\n /**\n * Sets the `line dash pattern`.\n * @private\n */\n PdfStreamWriter.prototype.setLineDashPattern = function (pattern, patternOffset) {\n // let pat : PdfArray = new PdfArray(pattern);\n // let off : PdfNumber = new PdfNumber(patternOffset);\n // this.setLineDashPatternHelper(pat, off);\n this.setLineDashPatternHelper(pattern, patternOffset);\n };\n /**\n * Sets the `line dash pattern`.\n * @private\n */\n PdfStreamWriter.prototype.setLineDashPatternHelper = function (pattern, patternOffset) {\n var tempPattern = '[';\n if (pattern.length > 1) {\n for (var index = 0; index < pattern.length; index++) {\n if (index === pattern.length - 1) {\n tempPattern += pattern[index].toString();\n }\n else {\n tempPattern += pattern[index].toString() + ' ';\n }\n }\n }\n tempPattern += '] ';\n tempPattern += patternOffset.toString();\n tempPattern += ' ' + Operators.setDashPattern;\n this.stream.write(tempPattern);\n this.stream.write(Operators.newLine);\n };\n /**\n * Sets the `miter limit`.\n * @private\n */\n PdfStreamWriter.prototype.setMiterLimit = function (miterLimit) {\n this.stream.write(PdfNumber.floatToString(miterLimit));\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setMiterLimit);\n };\n /**\n * Sets the `width of the line`.\n * @private\n */\n PdfStreamWriter.prototype.setLineWidth = function (width) {\n this.stream.write(PdfNumber.floatToString(width));\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setLineWidth);\n };\n /**\n * Sets the `line cap`.\n * @private\n */\n PdfStreamWriter.prototype.setLineCap = function (lineCapStyle) {\n this.stream.write((lineCapStyle).toString());\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setLineCapStyle);\n };\n /**\n * Sets the `line join`.\n * @private\n */\n PdfStreamWriter.prototype.setLineJoin = function (lineJoinStyle) {\n this.stream.write((lineJoinStyle).toString());\n this.stream.write(Operators.whiteSpace);\n this.writeOperator(Operators.setLineJoinStyle);\n };\n Object.defineProperty(PdfStreamWriter.prototype, \"position\", {\n //IPdfWriter members\n /**\n * Gets or sets the current `position` within the stream.\n * @private\n */\n get: function () {\n return this.stream.position;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStreamWriter.prototype, \"length\", {\n /**\n * Gets `stream length`.\n * @private\n */\n get: function () {\n var returnValue = 0;\n if (this.stream.data.length !== 0 && this.stream.data.length !== -1) {\n for (var index = 0; index < this.stream.data.length; index++) {\n returnValue += this.stream.data[index].length;\n }\n }\n return returnValue;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfStreamWriter.prototype, \"document\", {\n /**\n * Gets and Sets the `current document`.\n * @private\n */\n get: function () {\n return null;\n },\n enumerable: true,\n configurable: true\n });\n return PdfStreamWriter;\n}());\nexport { PdfStreamWriter };\n","/**\n * PdfPen.ts class for EJ2-PDF\n */\nimport { PdfColor } from './pdf-color';\nimport { PdfDashStyle, PdfColorSpace } from './enum';\nimport { PdfBrush } from './brushes/pdf-brush';\n/**\n * `PdfPen` class defining settings for drawing operations, that determines the color,\n * width, and style of the drawing elements.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // set pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * // draw rectangle\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 0, y : 0}, {width : 100, height : 50}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfPen = /** @class */ (function () {\n function PdfPen(arg1, arg2) {\n //Fields\n /**\n * Specifies the `color of the pen`.\n * @default new PdfColor()\n * @private\n */\n this.pdfColor = new PdfColor(0, 0, 0);\n /**\n * Specifies the `dash offset of the pen`.\n * @default 0\n * @private\n */\n this.dashOffsetValue = 0;\n /**\n * Specifies the `dash pattern of the pen`.\n * @default [0]\n * @private\n */\n this.penDashPattern = [0];\n /**\n * Specifies the `dash style of the pen`.\n * @default Solid\n * @private\n */\n this.pdfDashStyle = PdfDashStyle.Solid;\n /**\n * Specifies the `line cap of the pen`.\n * @default 0\n * @private\n */\n this.pdfLineCap = 0;\n /**\n * Specifies the `line join of the pen`.\n * @default 0\n * @private\n */\n this.pdfLineJoin = 0;\n /**\n * Specifies the `width of the pen`.\n * @default 1.0\n * @private\n */\n this.penWidth = 1.0;\n /**\n * Specifies the `mitter limit of the pen`.\n * @default 0.0\n * @private\n */\n this.internalMiterLimit = 0.0;\n /**\n * Stores the `colorspace` value.\n * @default Rgb\n * @private\n */\n this.colorSpace = PdfColorSpace.Rgb;\n if (typeof arg2 === 'number') {\n this.constructor(arg1);\n this.width = arg2;\n }\n else if (typeof arg2 === 'undefined' && arg1 instanceof PdfBrush) {\n this.setBrush(arg1);\n }\n else if (typeof arg2 === 'undefined' && arg1 instanceof PdfColor) {\n this.color = arg1;\n }\n }\n Object.defineProperty(PdfPen.prototype, \"color\", {\n //Properties\n /**\n * Gets or sets the `color of the pen`.\n * @private\n */\n get: function () {\n return this.pdfColor;\n },\n set: function (value) {\n this.pdfColor = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"dashOffset\", {\n /**\n * Gets or sets the `dash offset of the pen`.\n * @private\n */\n get: function () {\n if (typeof this.dashOffsetValue === 'undefined' || this.dashOffsetValue == null) {\n return 0;\n }\n else {\n return this.dashOffsetValue;\n }\n },\n set: function (value) {\n this.dashOffsetValue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"dashPattern\", {\n /**\n * Gets or sets the `dash pattern of the pen`.\n * @private\n */\n get: function () {\n return this.penDashPattern;\n },\n set: function (value) {\n this.penDashPattern = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"dashStyle\", {\n /**\n * Gets or sets the `dash style of the pen`.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // set pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * //\n * // set pen style\n * pen.dashStyle = PdfDashStyle.DashDot;\n * // get pen style\n * let style : PdfDashStyle = pen.dashStyle;\n * //\n * // draw rectangle\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 0, y : 0}, {width : 100, height : 50}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.pdfDashStyle;\n },\n set: function (value) {\n if (this.pdfDashStyle !== value) {\n this.pdfDashStyle = value;\n switch (this.pdfDashStyle) {\n case PdfDashStyle.Custom:\n break;\n case PdfDashStyle.Dash:\n this.penDashPattern = [3, 1];\n break;\n case PdfDashStyle.Dot:\n this.penDashPattern = [1, 1];\n break;\n case PdfDashStyle.DashDot:\n this.penDashPattern = [3, 1, 1, 1];\n break;\n case PdfDashStyle.DashDotDot:\n this.penDashPattern = [3, 1, 1, 1, 1, 1];\n break;\n case PdfDashStyle.Solid:\n break;\n default:\n this.pdfDashStyle = PdfDashStyle.Solid;\n this.penDashPattern = [0];\n break;\n }\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"lineCap\", {\n /**\n * Gets or sets the `line cap of the pen`.\n * @private\n */\n get: function () {\n return this.pdfLineCap;\n },\n set: function (value) {\n this.pdfLineCap = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"lineJoin\", {\n /**\n * Gets or sets the `line join style of the pen`.\n * @private\n */\n get: function () {\n return this.pdfLineJoin;\n },\n set: function (value) {\n this.pdfLineJoin = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"miterLimit\", {\n /**\n * Gets or sets the `miter limit`.\n * @private\n */\n get: function () {\n return this.internalMiterLimit;\n },\n set: function (value) {\n this.internalMiterLimit = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPen.prototype, \"width\", {\n /**\n * Gets or sets the `width of the pen`.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // set pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * //\n * // set pen width\n * pen.width = 2;\n * //\n * // draw rectangle\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 0, y : 0}, {width : 100, height : 50}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.penWidth;\n },\n set: function (value) {\n this.penWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n //Helper\n /**\n * `Clones` this instance of PdfPen class.\n * @private\n */\n PdfPen.prototype.clone = function () {\n var pen = this;\n return pen;\n };\n /**\n * `Sets the brush`.\n * @private\n */\n PdfPen.prototype.setBrush = function (brush) {\n var sBrush = brush;\n this.color = sBrush.color;\n this.pdfBrush = sBrush;\n };\n /**\n * `Monitors the changes`.\n * @private\n */\n PdfPen.prototype.monitorChanges = function (currentPen, streamWriter, getResources, saveState, currentColorSpace, matrix) {\n var diff = false;\n saveState = true;\n if (currentPen == null) {\n diff = true;\n }\n diff = this.dashControl(currentPen, saveState, streamWriter);\n streamWriter.setLineWidth(this.width);\n streamWriter.setLineJoin(this.lineJoin);\n streamWriter.setLineCap(this.lineCap);\n var miterLimit = this.miterLimit;\n if (miterLimit > 0) {\n streamWriter.setMiterLimit(miterLimit);\n diff = true;\n }\n var brush = this.pdfBrush;\n streamWriter.setColorAndSpace(this.color, currentColorSpace, true);\n diff = true;\n return diff;\n };\n /**\n * `Controls the dash style` and behaviour of each line.\n * @private\n */\n PdfPen.prototype.dashControl = function (pen, saveState, streamWriter) {\n saveState = true;\n var lineWidth = this.width;\n var pattern = this.getPattern();\n streamWriter.setLineDashPattern(pattern, this.dashOffset * lineWidth);\n return saveState;\n };\n /**\n * `Gets the pattern` of PdfPen.\n * @private\n */\n PdfPen.prototype.getPattern = function () {\n var pattern = this.dashPattern;\n for (var i = 0; i < pattern.length; ++i) {\n pattern[i] *= this.width;\n }\n return pattern;\n };\n return PdfPen;\n}());\nexport { PdfPen };\n","/**\n * PdfTransformationMatrix.ts class for EJ2-PDF\n */\nimport { PointF } from './../drawing/pdf-drawing';\nimport { PdfNumber } from './../primitives/pdf-number';\n/**\n * Class for representing Root `transformation matrix`.\n */\nvar PdfTransformationMatrix = /** @class */ (function () {\n function PdfTransformationMatrix(value) {\n /**\n * Value for `angle converting`.\n * @default 180.0 / Math.PI\n * @private\n */\n this.radDegFactor = 180.0 / Math.PI;\n if (typeof value === 'undefined') {\n this.transformationMatrix = new Matrix(1.00, 0.00, 0.00, 1.00, 0.00, 0.00);\n }\n else {\n this.transformationMatrix = new Matrix(1.00, 0.00, 0.00, -1.00, 0.00, 0.00);\n }\n }\n Object.defineProperty(PdfTransformationMatrix.prototype, \"matrix\", {\n // Properties\n /**\n * Gets or sets the `internal matrix object`.\n * @private\n */\n get: function () {\n return this.transformationMatrix;\n },\n set: function (value) {\n this.transformationMatrix = value;\n },\n enumerable: true,\n configurable: true\n });\n // Public methods\n /**\n * `Translates` coordinates by specified coordinates.\n * @private\n */\n PdfTransformationMatrix.prototype.translate = function (offsetX, offsetY) {\n this.transformationMatrix.translate(offsetX, offsetY);\n };\n /**\n * `Scales` coordinates by specified coordinates.\n * @private\n */\n PdfTransformationMatrix.prototype.scale = function (scaleX, scaleY) {\n this.transformationMatrix.elements[0] = scaleX;\n this.transformationMatrix.elements[3] = scaleY;\n };\n /**\n * `Rotates` coordinate system in counterclockwise direction.\n * @private\n */\n PdfTransformationMatrix.prototype.rotate = function (angle) {\n //Convert from degree to radian \n angle = (angle * Math.PI) / 180;\n //Rotation \n this.transformationMatrix.elements[0] = Math.cos(angle);\n this.transformationMatrix.elements[1] = Math.sin(angle);\n this.transformationMatrix.elements[2] = -Math.sin(angle);\n this.transformationMatrix.elements[3] = Math.cos(angle);\n };\n // Overrides\n /**\n * Gets `PDF representation`.\n * @private\n */\n PdfTransformationMatrix.prototype.toString = function () {\n var builder = '';\n var whitespace = ' ';\n for (var i = 0, len = this.transformationMatrix.elements.length; i < len; i++) {\n var temp = this.matrix.elements[i];\n builder += PdfNumber.floatToString(this.transformationMatrix.elements[i]);\n builder += whitespace;\n }\n return builder;\n };\n // Implementation\n /**\n * `Multiplies` matrices (changes coordinate system.)\n * @private\n */\n PdfTransformationMatrix.prototype.multiply = function (matrix) {\n this.transformationMatrix.multiply(matrix.matrix);\n };\n /**\n * Converts `degrees to radians`.\n * @private\n */\n PdfTransformationMatrix.degreesToRadians = function (degreesX) {\n return this.degRadFactor * degreesX;\n };\n /**\n * Converts `radians to degrees`.\n * @private\n */\n PdfTransformationMatrix.prototype.radiansToDegrees = function (radians) {\n return this.radDegFactor * radians;\n };\n /**\n * `Clones` this instance of PdfTransformationMatrix.\n * @private\n */\n PdfTransformationMatrix.prototype.clone = function () {\n return this;\n };\n // Constants\n /**\n * Value for `angle converting`.\n * @default Math.PI / 180.0\n * @private\n */\n PdfTransformationMatrix.degRadFactor = Math.PI / 180.0;\n return PdfTransformationMatrix;\n}());\nexport { PdfTransformationMatrix };\nvar Matrix = /** @class */ (function () {\n function Matrix(arg1, arg2, arg3, arg4, arg5, arg6) {\n if (typeof arg1 === 'undefined') {\n this.metrixElements = [];\n }\n else if (typeof arg1 === 'number') {\n this.constructor();\n this.metrixElements.push(arg1);\n this.metrixElements.push(arg2);\n this.metrixElements.push(arg3);\n this.metrixElements.push(arg4);\n this.metrixElements.push(arg5);\n this.metrixElements.push(arg6);\n }\n else {\n this.metrixElements = arg1;\n }\n }\n Object.defineProperty(Matrix.prototype, \"elements\", {\n // Properties\n /**\n * Gets the `elements`.\n * @private\n */\n get: function () {\n return this.metrixElements;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Matrix.prototype, \"offsetX\", {\n /**\n * Gets the off set `X`.\n * @private\n */\n get: function () {\n return this.metrixElements[4];\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Matrix.prototype, \"offsetY\", {\n /**\n * Gets the off set `Y`.\n * @private\n */\n get: function () {\n return this.metrixElements[5];\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Translates` coordinates by specified coordinates.\n * @private\n */\n Matrix.prototype.translate = function (offsetX, offsetY) {\n this.metrixElements[4] = offsetX;\n this.metrixElements[5] = offsetY;\n };\n /**\n * `Translates` the specified offset X.\n * @private\n */\n Matrix.prototype.transform = function (point) {\n var x = point.x;\n var y = point.y;\n var x2 = x * this.elements[0] + y * this.elements[2] + this.offsetX;\n var y2 = x * this.elements[1] + y * this.elements[3] + this.offsetY;\n return new PointF(x2, y2);\n };\n /**\n * `Multiplies matrices` (changes coordinate system.)\n * @private\n */\n Matrix.prototype.multiply = function (matrix) {\n var tempMatrix = [];\n tempMatrix.push(this.elements[0] * matrix.elements[0] + this.elements[1] * matrix.elements[2]);\n tempMatrix[1] = (this.elements[0] * matrix.elements[1] + this.elements[1] * matrix.elements[3]);\n tempMatrix[2] = (this.elements[2] * matrix.elements[0] + this.elements[3] * matrix.elements[2]);\n tempMatrix[3] = (this.elements[2] * matrix.elements[1] + this.elements[3] * matrix.elements[3]);\n tempMatrix[4] = (this.offsetX * matrix.elements[0] + this.offsetY * matrix.elements[2] + matrix.offsetX);\n tempMatrix[5] = (this.offsetX * matrix.elements[1] + this.offsetY * matrix.elements[3] + matrix.offsetY);\n for (var i = 0; i < tempMatrix.length; i++) {\n this.elements[i] = tempMatrix[i];\n }\n };\n // IDisposable Members\n /**\n * `Dispose` this instance of PdfTransformationMatrix class.\n * @private\n */\n Matrix.prototype.dispose = function () {\n this.metrixElements = null;\n };\n // ICloneable Members\n /**\n * `Clones` this instance of PdfTransformationMatrix class.\n * @private\n */\n Matrix.prototype.clone = function () {\n var m = new Matrix(this.metrixElements);\n return m;\n };\n return Matrix;\n}());\nexport { Matrix };\n","/**\n * `constants.ts` class for EJ2-PDF\n * @private\n */\nvar ProcedureSets = /** @class */ (function () {\n function ProcedureSets() {\n /**\n * Specifies the `PDF` procedure set.\n * @private\n */\n this.pdf = 'PDF';\n /**\n * Specifies the `Text` procedure set.\n * @private\n */\n this.text = 'Text';\n /**\n * Specifies the `ImageB` procedure set.\n * @private\n */\n this.imageB = 'ImageB';\n /**\n * Specifies the `ImageC` procedure set.\n * @private\n */\n this.imageC = 'ImageC';\n /**\n * Specifies the `ImageI` procedure set.\n * @private\n */\n this.imageI = 'ImageI';\n }\n return ProcedureSets;\n}());\nexport { ProcedureSets };\n","/**\n * Dictionary class\n * @private\n * @hidden\n */\nvar TemporaryDictionary = /** @class */ (function () {\n function TemporaryDictionary() {\n /**\n * @hidden\n * @private\n */\n this.mKeys = [];\n /**\n * @hidden\n * @private\n */\n this.mValues = [];\n }\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.size = function () {\n return this.mKeys.length;\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.add = function (key, value) {\n if (key === undefined || key === null || value === undefined || value === null) {\n throw new ReferenceError('Provided key or value is not valid.');\n }\n var index = this.mKeys.indexOf(key);\n if (index < 0) {\n this.mKeys.push(key);\n this.mValues.push(value);\n return 1;\n }\n else {\n throw new RangeError('An item with the same key has already been added.');\n }\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.keys = function () {\n return this.mKeys;\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.values = function () {\n return this.mValues;\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.getValue = function (key) {\n if (key === undefined || key === null) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.mKeys.indexOf(key);\n if (index < 0) {\n throw new RangeError('No item with the specified key has been added.');\n }\n else {\n return this.mValues[index];\n }\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.setValue = function (key, value) {\n if (key === undefined || key === null) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.mKeys.indexOf(key);\n if (index < 0) {\n this.mKeys.push(key);\n this.mValues.push(value);\n }\n else {\n this.mValues[index] = value;\n }\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.remove = function (key) {\n if (key === undefined || key === null) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.mKeys.indexOf(key);\n if (index < 0) {\n throw new RangeError('No item with the specified key has been added.');\n }\n else {\n this.mKeys.splice(index, 1);\n this.mValues.splice(index, 1);\n return true;\n }\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.containsKey = function (key) {\n if (key === undefined || key === null) {\n throw new ReferenceError('Provided key is not valid.');\n }\n var index = this.mKeys.indexOf(key);\n if (index < 0) {\n return false;\n }\n return true;\n };\n /**\n * @hidden\n * @private\n */\n TemporaryDictionary.prototype.clear = function () {\n this.mKeys = [];\n this.mValues = [];\n };\n return TemporaryDictionary;\n}());\nexport { TemporaryDictionary };\n","import { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PdfName } from './../primitives/pdf-name';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\n/**\n * Represents a simple `transparency`.\n * @private\n */\nvar PdfTransparency = /** @class */ (function () {\n // Properties\n // /**\n // * Gets the `stroke` operation alpha value.\n // * @private\n // */\n // public get stroke() : number {\n // let result : number = this.getNumber(this.dictionaryProperties.CA);\n // return result;\n // }\n // /**\n // * Gets the `fill` operation alpha value.\n // * @private\n // */\n // public get fill() : number {\n // let result : number = this.getNumber(this.dictionaryProperties.ca);\n // return result;\n // }\n // /**\n // * Gets the `blend mode`.\n // * @private\n // */\n // public get mode() : PdfBlendMode {\n // let result : string = this.getName(this.dictionaryProperties.ca);\n // return PdfBlendMode.Normal;\n // }\n // Constructors\n /**\n * Initializes a new instance of the `Transparency` class.\n * @private\n */\n function PdfTransparency(stroke, fill, mode) {\n // Fields\n /**\n * Internal variable to store `dictionary`.\n * @default new PdfDictionary()\n * @private\n */\n this.dictionary = new PdfDictionary();\n /**\n * Internal variable for accessing fields from `DictionryProperties` class.\n * @default new DictionaryProperties()\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n this.dictionary.items.setValue(this.dictionaryProperties.CA, new PdfNumber(stroke));\n this.dictionary.items.setValue(this.dictionaryProperties.ca, new PdfNumber(fill));\n this.dictionary.items.setValue(this.dictionaryProperties.BM, new PdfName(mode.toString()));\n }\n Object.defineProperty(PdfTransparency.prototype, \"element\", {\n // // Implementation\n // /**\n // * Gets the `number value`.\n // * @private\n // */\n // private getNumber(keyName : string) : number {\n // let result : number = 0.0;\n // let numb : PdfNumber = this.dictionary.items.getValue(keyName) as PdfNumber;\n // result = numb.intValue;\n // return result;\n // }\n // /**\n // * Gets the `name value`.\n // * @private\n // */\n // private getName(keyName : string) : string {\n // let result : string = null;\n // let name : PdfName = this.dictionary.items.getValue(keyName) as PdfName;\n // result = name.value;\n // return result;\n // }\n // IPdfWrapper Members\n /**\n * Gets the `element`.\n * @private\n */\n get: function () {\n return this.dictionary;\n },\n enumerable: true,\n configurable: true\n });\n return PdfTransparency;\n}());\nexport { PdfTransparency };\n","/**\n * Represent a `collection of automatic fields information`.\n * @private\n */\nvar PdfAutomaticFieldInfoCollection = /** @class */ (function () {\n /**\n * Initializes a new instance of the 'PdfPageNumberFieldInfoCollection' class.\n * @private\n */\n function PdfAutomaticFieldInfoCollection() {\n /**\n * Internal variable to store instance of `pageNumberFields` class.\n * @private\n */\n this.automaticFieldsInformation = [];\n //\n }\n Object.defineProperty(PdfAutomaticFieldInfoCollection.prototype, \"automaticFields\", {\n /**\n * Gets the `page number fields collection`.\n * @private\n */\n get: function () {\n return this.automaticFieldsInformation;\n },\n enumerable: true,\n configurable: true\n });\n // Public methods\n /// Adds the specified field info.\n /**\n * Add page number field into collection.\n * @private\n */\n PdfAutomaticFieldInfoCollection.prototype.add = function (fieldInfo) {\n return this.automaticFields.push(fieldInfo);\n };\n return PdfAutomaticFieldInfoCollection;\n}());\nexport { PdfAutomaticFieldInfoCollection };\n","/**\n * Represents a base class for all page graphics elements.\n */\nvar PdfGraphicsElement = /** @class */ (function () {\n // Constructors\n function PdfGraphicsElement() {\n //\n }\n /**\n * `Draws` the page number field.\n * @public\n */\n PdfGraphicsElement.prototype.drawHelper = function (graphics, x, y) {\n var bNeedSave = (x !== 0 || y !== 0);\n var gState = null;\n // Translate co-ordinates.\n if (bNeedSave) {\n // Save state.\n gState = graphics.save();\n graphics.translateTransform(x, y);\n }\n this.drawInternal(graphics);\n if (bNeedSave) {\n // Restore state.\n graphics.restore(gState);\n }\n };\n return PdfGraphicsElement;\n}());\nexport { PdfGraphicsElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfAutomaticField.ts class for EJ2-PDF\n */\nimport { RectangleF, SizeF, PointF } from './../../drawing/pdf-drawing';\nimport { PdfSolidBrush } from './../../graphics/brushes/pdf-solid-brush';\nimport { PdfColor } from './../../graphics/pdf-color';\nimport { PdfDocument } from './../pdf-document';\nimport { PdfGraphicsElement } from './../../graphics/figures/base/graphics-element';\nimport { PdfAutomaticFieldInfo } from './automatic-field-info';\n/**\n * Represents a fields which is calculated before the document saves.\n */\nvar PdfAutomaticField = /** @class */ (function (_super) {\n __extends(PdfAutomaticField, _super);\n // Constructors\n function PdfAutomaticField() {\n var _this = _super.call(this) || this;\n // Fields\n _this.internalBounds = new RectangleF(0, 0, 0, 0);\n _this.internalTemplateSize = new SizeF(0, 0);\n return _this;\n }\n Object.defineProperty(PdfAutomaticField.prototype, \"bounds\", {\n // Properties\n get: function () {\n return this.internalBounds;\n },\n set: function (value) {\n this.internalBounds = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticField.prototype, \"size\", {\n get: function () {\n return new SizeF(this.bounds.width, this.bounds.height);\n },\n set: function (value) {\n this.bounds.width = value.width;\n this.bounds.height = value.height;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticField.prototype, \"location\", {\n get: function () {\n return new PointF(this.bounds.x, this.bounds.y);\n },\n set: function (value) {\n this.bounds.x = value.x;\n this.bounds.y = value.y;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticField.prototype, \"font\", {\n get: function () {\n return this.internalFont;\n },\n set: function (value) {\n this.internalFont = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticField.prototype, \"brush\", {\n get: function () {\n return this.internalBrush;\n },\n set: function (value) {\n this.internalBrush = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticField.prototype, \"pen\", {\n get: function () {\n return this.internalPen;\n },\n set: function (value) {\n this.internalPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticField.prototype, \"stringFormat\", {\n get: function () {\n return this.internalStringFormat;\n },\n set: function (value) {\n this.internalStringFormat = value;\n },\n enumerable: true,\n configurable: true\n });\n PdfAutomaticField.prototype.performDrawHelper = function (graphics, location, scalingX, scalingY) {\n if (this.bounds.height === 0 || this.bounds.width === 0) {\n var text = this.getValue(graphics);\n this.internalTemplateSize = this.getFont().measureString(text, this.size, this.stringFormat);\n }\n };\n PdfAutomaticField.prototype.draw = function (arg1, arg2, arg3) {\n if (typeof arg2 === 'undefined') {\n var location_1 = new PointF(0, 0);\n this.draw(arg1, location_1);\n }\n else if (arg2 instanceof PointF) {\n this.draw(arg1, arg2.x, arg2.y);\n }\n else {\n this.drawHelper(arg1, arg2, arg3);\n var info = new PdfAutomaticFieldInfo(this, new PointF(arg2, arg3));\n arg1.automaticFields.add(info);\n }\n };\n PdfAutomaticField.prototype.getSize = function () {\n if (this.bounds.height === 0 || this.bounds.width === 0) {\n return this.internalTemplateSize;\n }\n else {\n return this.size;\n }\n };\n PdfAutomaticField.prototype.drawInternal = function (graphics) {\n //\n };\n /* tslint:disable */\n PdfAutomaticField.prototype.getBrush = function () {\n return (typeof this.internalBrush === 'undefined' || this.internalBrush == null) ? new PdfSolidBrush(new PdfColor(0, 0, 0)) : this.internalBrush;\n };\n PdfAutomaticField.prototype.getFont = function () {\n return (typeof this.internalFont === 'undefined' || this.internalFont == null) ? PdfDocument.defaultFont : this.internalFont;\n };\n /* tslint:enable */\n PdfAutomaticField.prototype.getPageFromGraphics = function (graphics) {\n if (typeof graphics.page !== 'undefined' && graphics.page !== null) {\n var page = graphics.page;\n return page;\n }\n else {\n var page = graphics.currentPage;\n return page;\n }\n };\n return PdfAutomaticField;\n}(PdfGraphicsElement));\nexport { PdfAutomaticField };\n","/**\n * PdfAutomaticFieldInfo.ts class for EJ2-PDF\n * @private\n */\nimport { PointF } from './../../drawing/pdf-drawing';\nimport { PdfAutomaticField } from './automatic-field';\n/**\n * Represents information about the automatic field.\n * @private\n */\nvar PdfAutomaticFieldInfo = /** @class */ (function () {\n function PdfAutomaticFieldInfo(field, location, scaleX, scaleY) {\n // Fields\n /**\n * Internal variable to store location of the field.\n * @private\n */\n this.pageNumberFieldLocation = new PointF();\n /**\n * Internal variable to store field.\n * @private\n */\n this.pageNumberField = null;\n /**\n * Internal variable to store x scaling factor.\n * @private\n */\n this.scaleX = 1;\n /**\n * Internal variable to store y scaling factor.\n * @private\n */\n this.scaleY = 1;\n if (typeof location === 'undefined' && field instanceof PdfAutomaticFieldInfo) {\n this.pageNumberField = field.field;\n this.pageNumberFieldLocation = field.location;\n this.scaleX = field.scalingX;\n this.scaleY = field.scalingY;\n }\n else if (typeof scaleX === 'undefined' && location instanceof PointF && field instanceof PdfAutomaticField) {\n this.pageNumberField = field;\n this.pageNumberFieldLocation = location;\n }\n else {\n this.pageNumberField = field;\n this.pageNumberFieldLocation = location;\n this.scaleX = scaleX;\n this.scaleY = scaleY;\n }\n }\n Object.defineProperty(PdfAutomaticFieldInfo.prototype, \"location\", {\n /* tslint:enable */\n // Properties\n /**\n * Gets or sets the location.\n * @private\n */\n get: function () {\n return this.pageNumberFieldLocation;\n },\n set: function (value) {\n this.pageNumberFieldLocation = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticFieldInfo.prototype, \"field\", {\n /**\n * Gets or sets the field.\n * @private\n */\n get: function () {\n return this.pageNumberField;\n },\n set: function (value) {\n this.pageNumberField = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticFieldInfo.prototype, \"scalingX\", {\n /**\n * Gets or sets the scaling X factor.\n * @private\n */\n get: function () {\n return this.scaleX;\n },\n set: function (value) {\n this.scaleX = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAutomaticFieldInfo.prototype, \"scalingY\", {\n /**\n * Gets or sets the scaling Y factor.\n * @private\n */\n get: function () {\n return this.scaleY;\n },\n set: function (value) {\n this.scaleY = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfAutomaticFieldInfo;\n}());\nexport { PdfAutomaticFieldInfo };\n","/**\n * PdfGraphics.ts class for EJ2-PDF\n */\nimport { PdfColorSpace, TextRenderingMode, PdfFillMode, PdfTextAlignment } from './enum';\nimport { PdfVerticalAlignment, PdfBlendMode } from './enum';\nimport { PdfSubSuperScript } from './fonts/enum';\nimport { PdfStreamWriter } from './../input-output/pdf-stream-writer';\nimport { PdfPen } from './pdf-pen';\nimport { PdfBrush } from './brushes/pdf-brush';\nimport { PdfSolidBrush } from './brushes/pdf-solid-brush';\nimport { PdfFont } from './fonts/pdf-font';\nimport { PdfTransformationMatrix } from './pdf-transformation-matrix';\nimport { PointF, SizeF, RectangleF } from './../drawing/pdf-drawing';\nimport { ProcedureSets } from './constants';\nimport { PdfString } from './../primitives/pdf-string';\nimport { PdfStringFormat } from './fonts/pdf-string-format';\nimport { TemporaryDictionary } from './../collections/object-object-pair/dictionary';\nimport { PdfTransparency } from './pdf-transparency';\nimport { PdfStringLayouter, LineType } from './fonts/string-layouter';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { StringTokenizer } from './fonts/string-tokenizer';\nimport { PdfAutomaticFieldInfoCollection } from './../document/automatic-fields/automatic-field-info-collection';\nimport { PdfAutomaticFieldInfo } from './../document/automatic-fields/automatic-field-info';\nimport { Operators } from './../input-output/pdf-operators';\n/**\n * `PdfGraphics` class represents a graphics context of the objects.\n * It's used for performing all the graphics operations.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * // set the font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * //graphics of the page\n * let page1Graphics : PdfGraphics = page1.graphics;\n * // draw the text on the page1 graphics\n * page1Graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * //\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfGraphics = /** @class */ (function () {\n function PdfGraphics(arg1, arg2, arg3) {\n /**\n * Represents the `Current color space`.\n * @private\n */\n this.currentColorSpace = PdfColorSpace.Rgb;\n /**\n * Stores `previous rendering mode`.\n * @private\n */\n this.previousTextRenderingMode = TextRenderingMode.Fill;\n /**\n * Previous `character spacing` value or 0.\n * @private\n */\n this.previousCharacterSpacing = 0.0;\n /**\n * Previous `word spacing` value or 0.\n * @private\n */\n this.previousWordSpacing = 0.0;\n /**\n * The `previously used text scaling` value.\n * @private\n */\n this.previousTextScaling = 100.0;\n /**\n * Instance of `ProcedureSets` class.\n * @private\n */\n this.procedureSets = new ProcedureSets();\n /**\n * To check wihether it is a `direct text rendering`.\n * @default true\n * @private\n */\n this.isNormalRender = true;\n /**\n * check whether to `use font size` to calculate the shift.\n * @default false\n * @private\n */\n this.isUseFontSize = false;\n /**\n * check whether the font is in `italic type`.\n * @default false\n * @private\n */\n this.isItalic = false;\n /**\n * Check whether it is an `emf Text Matrix`.\n * @default false\n * @private\n */\n this.isEmfTextScaled = false;\n /**\n * Check whether it is an `emf` call.\n * @default false\n * @private\n */\n this.isEmf = false;\n /**\n * Check whether it is an `emf plus` call.\n * @default false\n * @private\n */\n this.isEmfPlus = false;\n /**\n * Check whether it is in `base line format`.\n * @default true\n * @private\n */\n this.isBaselineFormat = true;\n /**\n * Emf Text `Scaling Factor`.\n * @private\n */\n this.emfScalingFactor = new SizeF(0, 0);\n /**\n * To check whether the `last color space` of document and garphics is saved.\n * @private\n */\n this.colorSpaceChanged = false;\n /**\n * Stores an instance of `DictionaryProperties`.\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n /**\n * Checks whether the x co-ordinate is need to set as client size or not.\n * @hidden\n * @private\n */\n this.isOverloadWithPosition = false;\n /**\n * Checks whether the x co-ordinate is need to set as client size or not.\n * @hidden\n * @private\n */\n this.isPointOverload = false;\n /**\n * Current colorspaces.\n * @hidden\n * @private\n */\n this.currentColorSpaces = ['RGB', 'CMYK', 'GrayScale', 'Indexed'];\n /**\n * Checks the current image `is optimized` or not.\n * @default false.\n * @private\n */\n this.isImageOptimized = false;\n /**\n * Stores the `graphics states`.\n * @private\n */\n this.graphicsState = [];\n /**\n * Indicates whether the object `had trasparency`.\n * @default false\n * @private\n */\n this.istransparencySet = false;\n /**\n * Stores the instance of `PdfAutomaticFieldInfoCollection` class .\n * @default null\n * @private\n */\n this.internalAutomaticFields = null;\n /**\n * Stores the index of the start line that should draw with in the next page.\n * @private\n */\n this.startCutIndex = -1;\n if (arg3 instanceof PdfStreamWriter) {\n this.pdfStreamWriter = arg3;\n this.getResources = arg2;\n this.canvasSize = arg1;\n this.initialize();\n }\n else {\n this.constructor(arg1, arg2, new PdfStreamWriter(arg3));\n }\n }\n Object.defineProperty(PdfGraphics.prototype, \"stringLayoutResult\", {\n // Properties\n /**\n * Returns the `result` after drawing string.\n * @private\n */\n get: function () {\n return this.pdfStringLayoutResult;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"size\", {\n /**\n * Gets the `size` of the canvas.\n * @private\n */\n get: function () {\n return this.canvasSize;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"mediaBoxUpperRightBound\", {\n /**\n * Gets and Sets the value of `MediaBox upper right bound`.\n * @private\n */\n get: function () {\n if (typeof this.internalMediaBoxUpperRightBound === 'undefined') {\n this.internalMediaBoxUpperRightBound = 0;\n }\n return this.internalMediaBoxUpperRightBound;\n },\n set: function (value) {\n this.internalMediaBoxUpperRightBound = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"clientSize\", {\n /**\n * Gets the `size` of the canvas reduced by margins and page templates.\n * @private\n */\n get: function () {\n return new SizeF(this.clipBounds.width, this.clipBounds.height);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"colorSpace\", {\n /**\n * Gets or sets the current `color space` of the document\n * @private\n */\n get: function () {\n return this.currentColorSpace;\n },\n set: function (value) {\n this.currentColorSpace = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"streamWriter\", {\n /**\n * Gets the `stream writer`.\n * @private\n */\n get: function () {\n return this.pdfStreamWriter;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"matrix\", {\n /**\n * Gets the `transformation matrix` reflecting current transformation.\n * @private\n */\n get: function () {\n if (this.transformationMatrix == null) {\n this.transformationMatrix = new PdfTransformationMatrix();\n }\n return this.transformationMatrix;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"layer\", {\n /**\n * Gets the `layer` for the graphics, if exists.\n * @private\n */\n get: function () {\n return this.pageLayer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"page\", {\n /**\n * Gets the `page` for this graphics, if exists.\n * @private\n */\n get: function () {\n return this.pageLayer.page;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphics.prototype, \"automaticFields\", {\n get: function () {\n if (this.internalAutomaticFields == null || typeof this.internalAutomaticFields === 'undefined') {\n this.internalAutomaticFields = new PdfAutomaticFieldInfoCollection();\n }\n return this.internalAutomaticFields;\n },\n enumerable: true,\n configurable: true\n });\n //Implementation\n /**\n * `Initializes` this instance.\n * @private\n */\n PdfGraphics.prototype.initialize = function () {\n this.bStateSaved = false;\n this.currentPen = null;\n this.currentBrush = null;\n this.currentFont = null;\n this.currentColorSpace = PdfColorSpace.Rgb;\n this.bCSInitialized = false;\n this.transformationMatrix = null;\n this.previousTextRenderingMode = (-1); //.Fill;\n this.previousCharacterSpacing = -1.0;\n this.previousWordSpacing = -1.0;\n this.previousTextScaling = -100.0;\n // this.m_trasparencies = null;\n this.currentStringFormat = null;\n this.clipBounds = new RectangleF(new PointF(0, 0), this.size);\n this.getResources.getResources().requireProcedureSet(this.procedureSets.pdf);\n };\n PdfGraphics.prototype.drawPdfTemplate = function (template, location, size) {\n if (typeof size === 'undefined') {\n if (template == null) {\n throw Error('ArgumentNullException-template');\n }\n this.drawPdfTemplate(template, location, template.size);\n }\n else {\n // let crossTable : PdfCrossTable = null;\n // if (this.pageLayer != null) {\n // crossTable = (this.page as PdfPage).section.parentDocument.crossTable;\n // }\n if (template == null) {\n throw Error('ArgumentNullException-template');\n }\n var scaleX = (template.width > 0) ? size.width / template.width : 1;\n var scaleY = (template.height > 0) ? size.height / template.height : 1;\n var bNeedScale = !(scaleX === 1 && scaleY === 1);\n // Save state.\n var state = this.save();\n // Take into consideration that rect location is bottom/left.\n var matrix = new PdfTransformationMatrix();\n if (this.pageLayer != null) {\n this.getTranslateTransform(location.x, location.y + size.height, matrix);\n }\n if (bNeedScale) {\n this.getScaleTransform(scaleX, scaleY, matrix);\n }\n this.pdfStreamWriter.modifyCtm(matrix);\n // Output template.\n var resources = this.getResources.getResources();\n var name_1 = resources.getName(template);\n this.pdfStreamWriter.executeObject(name_1);\n // Restore state.\n this.restore(state);\n //Transfer automatic fields from template.\n var g = template.graphics;\n if (g != null) {\n for (var index = 0; index < g.automaticFields.automaticFields.length; index++) {\n var fieldInfo = g.automaticFields.automaticFields[index];\n var newLocation = new PointF(fieldInfo.location.x + location.x, fieldInfo.location.y + location.y);\n var scalingX = template.size.width == 0 ? 0 : size.width / template.size.width;\n var scalingY = template.size.height == 0 ? 0 : size.height / template.size.height;\n this.automaticFields.add(new PdfAutomaticFieldInfo(fieldInfo.field, newLocation, scalingX, scalingY));\n this.page.dictionary.modify();\n }\n }\n this.getResources.getResources().requireProcedureSet(this.procedureSets.imageB);\n this.getResources.getResources().requireProcedureSet(this.procedureSets.imageC);\n this.getResources.getResources().requireProcedureSet(this.procedureSets.imageI);\n this.getResources.getResources().requireProcedureSet(this.procedureSets.text);\n }\n };\n /* tslint:disable */\n /**\n * @public\n */\n PdfGraphics.prototype.drawString = function (arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) {\n if (typeof arg1 === 'string' && arg2 instanceof PdfFont && (arg3 instanceof PdfPen || arg3 === null) && (arg4 instanceof PdfBrush || arg4 === null) && typeof arg5 === 'number' && typeof arg6 === 'number' && (arg7 instanceof PdfStringFormat || arg7 === null) && typeof arg8 === 'undefined') {\n this.isOverloadWithPosition = true;\n this.drawString(arg1, arg2, arg3, arg4, arg5, arg6, (this.clientSize.width - arg5), 0, arg7);\n }\n else {\n var temparg3 = arg3;\n var temparg4 = arg4;\n var temparg5 = arg5;\n var temparg6 = arg6;\n var temparg7 = arg7;\n var temparg8 = arg8;\n var temparg9 = arg9;\n var layouter = new PdfStringLayouter();\n var result = layouter.layout(arg1, arg2, temparg9, new SizeF(temparg7, 0), this.isOverloadWithPosition, this.clientSize);\n if (!result.empty) {\n var rect = this.checkCorrectLayoutRectangle(result.actualSize, temparg5, temparg6, temparg9);\n if (temparg7 <= 0) {\n temparg5 = rect.x;\n temparg7 = rect.width;\n }\n if (temparg8 <= 0) {\n temparg6 = rect.y;\n temparg8 = rect.height;\n }\n this.drawStringLayoutResult(result, arg2, temparg3, temparg4, new RectangleF(temparg5, temparg6, temparg7, temparg8), temparg9);\n this.isEmfTextScaled = false;\n this.emfScalingFactor = new SizeF(0, 0);\n }\n this.getResources.getResources().requireProcedureSet(this.procedureSets.text);\n this.isNormalRender = true;\n this.pdfStringLayoutResult = result;\n this.isUseFontSize = false;\n }\n }; /* tslint:enable */\n PdfGraphics.prototype.drawLine = function (arg1, arg2, arg3, arg4, arg5) {\n if (arg2 instanceof PointF) {\n var temparg2 = arg2;\n var temparg3 = arg3;\n this.drawLine(arg1, temparg2.x, temparg2.y, temparg3.x, temparg3.y);\n }\n else {\n var temparg2 = arg2;\n var temparg3 = arg3;\n var temparg4 = arg4;\n var temparg5 = arg5;\n this.stateControl(arg1, null, null);\n var sw = this.streamWriter;\n sw.beginPath(temparg2, temparg3);\n sw.appendLineSegment(temparg4, temparg5);\n sw.strokePath();\n this.getResources.getResources().requireProcedureSet(this.procedureSets.pdf);\n }\n };\n /* tslint:disable */\n PdfGraphics.prototype.drawRectangle = function (arg1, arg2, arg3, arg4, arg5, arg6) {\n if (arg1 instanceof PdfPen && typeof arg2 === 'number') {\n var temparg3 = arg3;\n this.drawRectangle(arg1, null, arg2, temparg3, arg4, arg5);\n }\n else if (arg1 instanceof PdfBrush && typeof arg2 === 'number') {\n var temparg3 = arg3;\n this.drawRectangle(null, arg1, arg2, temparg3, arg4, arg5);\n }\n else {\n var temparg3 = arg3;\n var temparg4 = arg4;\n var temparg5 = arg5;\n var temparg6 = arg6;\n if (arg2 instanceof PdfSolidBrush && arg2.color.isEmpty) {\n arg2 = null;\n }\n var temparg1 = arg1;\n var temparg2 = arg2;\n this.stateControl(temparg1, temparg2, null);\n this.streamWriter.appendRectangle(temparg3, temparg4, temparg5, temparg6);\n this.drawPath(temparg1, temparg2, false);\n }\n };\n PdfGraphics.prototype.drawPath = function (arg1, arg2, arg3, arg4) {\n if (typeof arg3 === 'boolean') {\n var temparg3 = arg3;\n this.drawPath(arg1, arg2, PdfFillMode.Winding, temparg3);\n }\n else {\n var temparg3 = arg3;\n var temparg4 = arg4;\n var isPen = arg1 != null;\n var isBrush = arg2 != null;\n var isEvenOdd = (temparg3 === PdfFillMode.Alternate);\n if (isPen && isBrush) {\n this.streamWriter.fillStrokePath(isEvenOdd);\n }\n else if (!isPen && !isBrush) {\n this.streamWriter.endPath();\n }\n else if (isPen) {\n this.streamWriter.strokePath();\n }\n else {\n this.streamWriter.fillPath(isEvenOdd);\n }\n }\n };\n /* tslint:disable */\n PdfGraphics.prototype.drawImage = function (arg1, arg2, arg3, arg4, arg5) {\n if (typeof arg2 === 'number' && typeof arg3 === 'number' && typeof arg4 === 'undefined') {\n var size = arg1.physicalDimension;\n this.drawImage(arg1, arg2, arg3, size.width, size.height);\n }\n else {\n var temparg2 = arg2;\n var temparg3 = arg3;\n var temparg4 = arg4;\n var temparg5 = arg5;\n arg1.save();\n var matrix = new PdfTransformationMatrix();\n this.getTranslateTransform(temparg2, (temparg3 + temparg5), matrix);\n this.getScaleTransform(arg4, arg5, matrix);\n this.pdfStreamWriter.write('q');\n this.pdfStreamWriter.modifyCtm(matrix);\n // Output template.\n var resources = this.getResources.getResources();\n if (typeof this.pageLayer !== 'undefined' && this.page != null) {\n resources.document = this.page.document;\n }\n var name_2 = resources.getName(arg1);\n if (typeof this.pageLayer !== 'undefined') {\n this.page.setResources(resources);\n }\n this.pdfStreamWriter.executeObject(name_2);\n this.pdfStreamWriter.write(Operators.restoreState);\n this.pdfStreamWriter.write(Operators.newLine);\n var resource = this.getResources.getResources();\n resource.requireProcedureSet(this.procedureSets.imageB);\n resource.requireProcedureSet(this.procedureSets.imageC);\n resource.requireProcedureSet(this.procedureSets.imageI);\n resource.requireProcedureSet(this.procedureSets.text);\n }\n };\n //Implementation\n /* tslint:disable */\n /**\n * Returns `bounds` of the line info.\n * @private\n */\n PdfGraphics.prototype.getLineBounds = function (lineIndex, result, font, layoutRectangle, format) {\n var bounds;\n if (!result.empty && lineIndex < result.lineCount && lineIndex >= 0) {\n var line = result.lines[lineIndex];\n var vShift = this.getTextVerticalAlignShift(result.actualSize.height, layoutRectangle.height, format);\n var y = vShift + layoutRectangle.y + (result.lineHeight * lineIndex);\n var lineWidth = line.width;\n var hShift = this.getHorizontalAlignShift(lineWidth, layoutRectangle.width, format);\n var lineIndent = this.getLineIndent(line, format, layoutRectangle, (lineIndex === 0));\n hShift += (!this.rightToLeft(format)) ? lineIndent : 0;\n var x = layoutRectangle.x + hShift;\n /* tslint:disable */\n var width = (!this.shouldJustify(line, layoutRectangle.width, format)) ? lineWidth - lineIndent : layoutRectangle.width - lineIndent; /* tslint:enable */\n var height = result.lineHeight;\n bounds = new RectangleF(x, y, width, height);\n }\n else {\n bounds = new RectangleF(0, 0, 0, 0);\n }\n return bounds;\n };\n /**\n * Creates `lay outed rectangle` depending on the text settings.\n * @private\n */\n PdfGraphics.prototype.checkCorrectLayoutRectangle = function (textSize, x, y, format) {\n var layoutedRectangle = new RectangleF(x, y, textSize.width, textSize.width);\n if (format != null) {\n switch (format.alignment) {\n case PdfTextAlignment.Center:\n layoutedRectangle.x -= layoutedRectangle.width / 2;\n break;\n case PdfTextAlignment.Right:\n layoutedRectangle.x -= layoutedRectangle.width;\n break;\n }\n switch (format.lineAlignment) {\n case PdfVerticalAlignment.Middle:\n layoutedRectangle.y -= layoutedRectangle.height / 2;\n break;\n case PdfVerticalAlignment.Bottom:\n layoutedRectangle.y -= layoutedRectangle.height;\n break;\n }\n }\n return layoutedRectangle;\n };\n /**\n * Sets the `layer` for the graphics.\n * @private\n */\n PdfGraphics.prototype.setLayer = function (layer) {\n this.pageLayer = layer;\n var page = layer.page;\n if (page != null && typeof page !== 'undefined') {\n page.beginSave = this.pageSave;\n }\n };\n /**\n * Adding page number field before page saving.\n * @private\n */\n /* tslint:disable */\n PdfGraphics.prototype.pageSave = function (page) {\n if (page.graphics.automaticFields != null) {\n for (var i = 0; i < page.graphics.automaticFields.automaticFields.length; i++) {\n var fieldInfo = page.graphics.automaticFields.automaticFields[i];\n fieldInfo.field.performDraw(page.graphics, fieldInfo.location, fieldInfo.scalingX, fieldInfo.scalingY);\n }\n }\n };\n /**\n * `Draws a layout result`.\n * @private\n */\n PdfGraphics.prototype.drawStringLayoutResult = function (result, font, pen, brush, layoutRectangle, format) {\n if (!result.empty) {\n this.applyStringSettings(font, pen, brush, format, layoutRectangle);\n // Set text scaling\n var textScaling = (format != null) ? format.horizontalScalingFactor : 100.0;\n if (textScaling !== this.previousTextScaling && !this.isEmfTextScaled) {\n this.pdfStreamWriter.setTextScaling(textScaling);\n this.previousTextScaling = textScaling;\n }\n var height = (format == null || format.lineSpacing === 0) ? font.height : format.lineSpacing + font.height;\n var subScript = (format != null && format.subSuperScript === PdfSubSuperScript.SubScript);\n var shift = 0;\n shift = (subScript) ? height - (font.height + font.metrics.getDescent(format)) : (height - font.metrics.getAscent(format));\n this.shift = shift;\n this.pdfStreamWriter.startNextLine(layoutRectangle.x, layoutRectangle.y - shift);\n this.pdfStreamWriter.setLeading(+height);\n var resultHeight = 0;\n var remainingString = '';\n for (var i = 0; i < result.lines.length; i++) {\n resultHeight += result.lineHeight;\n if ((layoutRectangle.y + resultHeight) > this.clientSize.height) {\n this.startCutIndex = i;\n break;\n }\n }\n for (var j = this.startCutIndex; (j < result.lines.length && j >= 0); j++) {\n remainingString += result.lines[j].text;\n }\n var bounds = new RectangleF(layoutRectangle.x, layoutRectangle.y, layoutRectangle.width, layoutRectangle.height);\n this.drawLayoutResult(result, font, format, layoutRectangle);\n this.underlineStrikeoutText(pen, brush, result, font, bounds, format);\n this.isEmfPlus = false;\n this.isUseFontSize = false;\n if (this.startCutIndex !== -1) {\n var page = this.getNextPage();\n page.graphics.drawString(remainingString, font, pen, brush, layoutRectangle.x, 0, layoutRectangle.width, 0, format);\n }\n }\n else {\n throw new Error('ArgumentNullException:result');\n }\n };\n /**\n * Gets the `next page`.\n * @private\n */\n PdfGraphics.prototype.getNextPage = function () {\n var section = this.currentPage.section;\n var nextPage = null;\n var index = section.indexOf(this.currentPage);\n if (index === section.count - 1) {\n nextPage = section.add();\n }\n else {\n nextPage = section.getPages()[index + 1];\n }\n return nextPage;\n };\n PdfGraphics.prototype.setClip = function (rectangle, mode) {\n if (typeof mode === 'undefined') {\n this.setClip(rectangle, PdfFillMode.Winding);\n }\n else {\n this.pdfStreamWriter.appendRectangle(rectangle);\n this.pdfStreamWriter.clipPath((mode === PdfFillMode.Alternate));\n }\n };\n /**\n * Applies all the `text settings`.\n * @private\n */\n PdfGraphics.prototype.applyStringSettings = function (font, pen, brush, format, bounds) {\n var setLineWidth = false;\n var tm = this.getTextRenderingMode(pen, brush, format);\n this.stateControl(pen, brush, font, format);\n this.pdfStreamWriter.beginText();\n if ((tm) !== this.previousTextRenderingMode) {\n this.pdfStreamWriter.setTextRenderingMode(tm);\n this.previousTextRenderingMode = tm;\n }\n // Set character spacing.\n var cs = (format != null) ? format.characterSpacing : 0;\n if (cs !== this.previousCharacterSpacing && !this.isEmfTextScaled) {\n this.pdfStreamWriter.setCharacterSpacing(cs);\n this.previousCharacterSpacing = cs;\n }\n // Set word spacing.\n // NOTE: it works only if the space code is equal to 32 (0x20).\n var ws = (format != null) ? format.wordSpacing : 0;\n if (ws !== this.previousWordSpacing) {\n this.pdfStreamWriter.setWordSpacing(ws);\n this.previousWordSpacing = ws;\n }\n };\n /**\n * Calculates `shift value` if the text is vertically aligned.\n * @private\n */\n PdfGraphics.prototype.getTextVerticalAlignShift = function (textHeight, boundsHeight, format) {\n var shift = 0;\n if (boundsHeight >= 0 && format != null && format.lineAlignment !== PdfVerticalAlignment.Top) {\n switch (format.lineAlignment) {\n case PdfVerticalAlignment.Middle:\n shift = (boundsHeight - textHeight) / 2;\n break;\n case PdfVerticalAlignment.Bottom:\n shift = boundsHeight - textHeight;\n break;\n }\n }\n return shift;\n };\n /* tslint:disable */\n /**\n * `Draws layout result`.\n * @private\n */\n PdfGraphics.prototype.drawLayoutResult = function (result, font, format, layoutRectangle) {\n var vAlignShift = this.getTextVerticalAlignShift(result.actualSize.height, layoutRectangle.height, format);\n if (vAlignShift !== 0) {\n this.pdfStreamWriter.startNextLine(0, vAlignShift);\n }\n var lines = result.lines;\n for (var i = 0, len = lines.length; (i < len && i !== this.startCutIndex); i++) {\n var lineInfo = lines[i];\n var line = lineInfo.text;\n var lineWidth = lineInfo.width;\n var hAlignShift = this.getHorizontalAlignShift(lineWidth, layoutRectangle.width, format);\n var lineIndent = this.getLineIndent(lineInfo, format, layoutRectangle, (i === 0));\n hAlignShift += (!this.rightToLeft(format)) ? lineIndent : 0;\n if (hAlignShift !== 0 && !this.isEmfTextScaled) {\n this.pdfStreamWriter.startNextLine(hAlignShift, 0);\n }\n this.drawAsciiLine(lineInfo, layoutRectangle, font, format);\n if (hAlignShift !== 0 && !this.isEmfTextScaled) {\n this.pdfStreamWriter.startNextLine(-hAlignShift, 0);\n }\n if (this.isOverloadWithPosition && lines.length > 1) {\n this.pdfStreamWriter.startNextLine(-(layoutRectangle.x), 0);\n layoutRectangle.x = 0;\n layoutRectangle.width = this.clientSize.width;\n this.isOverloadWithPosition = false;\n this.isPointOverload = true;\n }\n }\n this.getResources.getResources().requireProcedureSet(this.procedureSets.text);\n if (vAlignShift !== 0) {\n this.pdfStreamWriter.startNextLine(0, -(vAlignShift - result.lineHeight));\n }\n this.pdfStreamWriter.endText();\n };\n /**\n * `Draws Ascii line`.\n * @private\n */\n PdfGraphics.prototype.drawAsciiLine = function (lineInfo, layoutRectangle, font, format) {\n this.justifyLine(lineInfo, layoutRectangle.width, format);\n var value = '';\n if (lineInfo.text.indexOf('(') !== -1 || lineInfo.text.indexOf(')') !== -1) {\n for (var i = 0; i < lineInfo.text.length; i++) {\n if (lineInfo.text[i] === '(') {\n value += '\\\\\\(';\n }\n else if (lineInfo.text[i] === ')') {\n value += '\\\\\\)';\n }\n else {\n value += lineInfo.text[i];\n }\n }\n }\n if (value === '') {\n value = lineInfo.text;\n }\n var line = '(' + value + ')';\n this.pdfStreamWriter.showNextLineText(new PdfString(line));\n };\n /**\n * `Justifies` the line if needed.\n * @private\n */\n PdfGraphics.prototype.justifyLine = function (lineInfo, boundsWidth, format) {\n var line = lineInfo.text;\n var lineWidth = lineInfo.width;\n var shouldJustify = this.shouldJustify(lineInfo, boundsWidth, format);\n var hasWordSpacing = (format != null && format.wordSpacing !== 0);\n var symbols = StringTokenizer.spaces;\n var whitespacesCount = StringTokenizer.getCharsCount(line, symbols);\n var wordSpace = 0;\n if (shouldJustify) {\n // Correct line width.\n if (hasWordSpacing) {\n lineWidth -= (whitespacesCount * format.wordSpacing);\n }\n var difference = boundsWidth - lineWidth;\n wordSpace = difference / whitespacesCount;\n this.pdfStreamWriter.setWordSpacing(wordSpace);\n }\n else {\n // If there is justifying, but the line shouldn't be justified, restore default word spacing.\n if (hasWordSpacing) {\n this.pdfStreamWriter.setWordSpacing(format.wordSpacing);\n }\n else {\n this.pdfStreamWriter.setWordSpacing(0);\n }\n }\n return wordSpace;\n };\n /**\n * `Reset` or reinitialize the current graphic value.\n * @private\n */\n PdfGraphics.prototype.reset = function (size) {\n this.canvasSize = size;\n this.streamWriter.clear();\n this.initialize();\n this.initializeCoordinates();\n };\n /**\n * Checks whether the line should be `justified`.\n * @private\n */\n PdfGraphics.prototype.shouldJustify = function (lineInfo, boundsWidth, format) {\n var line = lineInfo.text;\n var lineWidth = lineInfo.width;\n var justifyStyle = (format != null && format.alignment === PdfTextAlignment.Justify);\n var goodWidth = (boundsWidth >= 0 && lineWidth < boundsWidth);\n var symbols = StringTokenizer.spaces;\n var whitespacesCount = StringTokenizer.getCharsCount(line, symbols);\n var hasSpaces = (whitespacesCount > 0 && line[0] !== StringTokenizer.whiteSpace);\n var goodLineBreakStyle = ((lineInfo.lineType & LineType.LayoutBreak) > 0);\n /* tslint:disable */\n var shouldJustify = (justifyStyle && goodWidth && hasSpaces && (goodLineBreakStyle || format.alignment === PdfTextAlignment.Justify)); /* tslint:enable */\n return shouldJustify;\n };\n /* tslint:disable */\n /**\n * Emulates `Underline, Strikeout` of the text if needed.\n * @private\n */\n PdfGraphics.prototype.underlineStrikeoutText = function (pen, brush, result, font, layoutRectangle, format) {\n if (font.underline || font.strikeout) {\n // Calculate line width.\n var linePen = this.createUnderlineStikeoutPen(pen, brush, font, format);\n if (linePen != null) {\n // Approximate line positions.\n var vShift = this.getTextVerticalAlignShift(result.actualSize.height, layoutRectangle.height, format);\n var underlineYOffset = 0;\n underlineYOffset = layoutRectangle.y + vShift + font.metrics.getAscent(format) + 1.5 * linePen.width;\n var strikeoutYOffset = layoutRectangle.y + vShift + font.metrics.getHeight(format) / 2 + 1.5 * linePen.width;\n var lines = result.lines;\n // Run through the text and draw lines.\n for (var i = 0, len = result.lineCount; i < len; i++) {\n var lineInfo = lines[i];\n var line = lineInfo.text;\n var lineWidth = lineInfo.width;\n var hShift = this.getHorizontalAlignShift(lineWidth, layoutRectangle.width, format);\n var lineIndent = this.getLineIndent(lineInfo, format, layoutRectangle, (i === 0));\n hShift += (!this.rightToLeft(format)) ? lineIndent : 0;\n var x1 = layoutRectangle.x + hShift;\n /* tslint:disable */\n var x2 = (!this.shouldJustify(lineInfo, layoutRectangle.width, format)) ? x1 + lineWidth - lineIndent : x1 + layoutRectangle.width - lineIndent;\n /* tslint:enable */\n if (font.underline) {\n var y = underlineYOffset;\n this.drawLine(linePen, x1, y, x2, y);\n underlineYOffset += result.lineHeight;\n }\n if (font.strikeout) {\n var y = strikeoutYOffset;\n this.drawLine(linePen, x1, y, x2, y);\n strikeoutYOffset += result.lineHeight;\n }\n if (this.isPointOverload && lines.length > 1) {\n layoutRectangle.x = 0;\n layoutRectangle.width = this.clientSize.width;\n }\n }\n this.isPointOverload = false;\n }\n }\n };\n /**\n * `Creates a pen` for drawing lines in the text.\n * @private\n */\n PdfGraphics.prototype.createUnderlineStikeoutPen = function (pen, brush, font, format) {\n // Calculate line width.\n var lineWidth = font.metrics.getSize(format) / 20;\n var linePen = null;\n // Create a pen fo the lines.\n if (pen != null) {\n linePen = new PdfPen(pen.color, lineWidth);\n }\n else if (brush != null) {\n linePen = new PdfPen(brush, lineWidth);\n }\n return linePen;\n };\n /**\n * Return `text rendering mode`.\n * @private\n */\n PdfGraphics.prototype.getTextRenderingMode = function (pen, brush, format) {\n var tm = TextRenderingMode.None;\n if (pen != null && brush != null) {\n tm = TextRenderingMode.FillStroke;\n }\n else if (pen != null) {\n tm = TextRenderingMode.Stroke;\n }\n else {\n tm = TextRenderingMode.Fill;\n }\n if (format != null && format.clipPath) {\n tm |= TextRenderingMode.ClipFlag;\n }\n return tm;\n };\n /**\n * Returns `line indent` for the line.\n * @private\n */\n PdfGraphics.prototype.getLineIndent = function (lineInfo, format, layoutBounds, firstLine) {\n var lineIndent = 0;\n var firstParagraphLine = ((lineInfo.lineType & LineType.FirstParagraphLine) > 0);\n if (format != null && firstParagraphLine) {\n lineIndent = (firstLine) ? format.firstLineIndent : format.paragraphIndent;\n lineIndent = (layoutBounds.width > 0) ? Math.min(layoutBounds.width, lineIndent) : lineIndent;\n }\n return lineIndent;\n };\n /**\n * Calculates shift value if the line is `horizontaly aligned`.\n * @private\n */\n PdfGraphics.prototype.getHorizontalAlignShift = function (lineWidth, boundsWidth, format) {\n var shift = 0;\n if (boundsWidth >= 0 && format != null && format.alignment !== PdfTextAlignment.Left) {\n switch (format.alignment) {\n case PdfTextAlignment.Center:\n shift = (boundsWidth - lineWidth) / 2;\n break;\n case PdfTextAlignment.Right:\n shift = boundsWidth - lineWidth;\n break;\n }\n }\n return shift;\n };\n /**\n * Gets or sets the value that indicates `text direction` mode.\n * @private\n */\n PdfGraphics.prototype.rightToLeft = function (format) {\n var rtl = (format != null && format.rightToLeft);\n return rtl;\n };\n PdfGraphics.prototype.stateControl = function (pen, brush, font, format) {\n if (typeof format === 'undefined') {\n this.stateControl(pen, brush, font, null);\n }\n else {\n var saveState = false;\n if (brush !== null) {\n var solidBrush = brush;\n if (typeof this.pageLayer !== 'undefined' && this.pageLayer != null) {\n if (this.colorSpaceChanged === false) {\n this.lastDocumentCS = this.pageLayer.page.document.colorSpace;\n this.lastGraphicsCS = this.pageLayer.page.graphics.colorSpace;\n this.colorSpace = this.pageLayer.page.document.colorSpace;\n this.currentColorSpace = this.pageLayer.page.document.colorSpace;\n this.colorSpaceChanged = true;\n }\n }\n this.initCurrentColorSpace(this.currentColorSpace);\n }\n else if (pen != null) {\n var pdfPen = pen;\n if (typeof this.pageLayer !== 'undefined' && this.pageLayer != null) {\n /* tslint:disable */\n this.colorSpace = this.pageLayer.page.document.colorSpace;\n this.currentColorSpace = this.pageLayer.page.document.colorSpace;\n }\n this.initCurrentColorSpace(this.currentColorSpace);\n }\n this.penControl(pen, saveState);\n this.brushControl(brush, saveState);\n this.fontControl(font, format, saveState);\n }\n };\n /**\n * Initializes the `current color space`.\n * @private\n */\n PdfGraphics.prototype.initCurrentColorSpace = function (colorspace) {\n var re = this.getResources.getResources();\n if (!this.bCSInitialized) {\n this.pdfStreamWriter.setColorSpace('Device' + this.currentColorSpaces[this.currentColorSpace], true);\n this.pdfStreamWriter.setColorSpace('Device' + this.currentColorSpaces[this.currentColorSpace], false);\n this.bCSInitialized = true;\n }\n };\n /**\n * Controls the `pen state`.\n * @private\n */\n PdfGraphics.prototype.penControl = function (pen, saveState) {\n if (pen != null) {\n this.currentPen = pen;\n this.colorSpace = PdfColorSpace.Rgb;\n /* tslint:disable */\n pen.monitorChanges(this.currentPen, this.pdfStreamWriter, this.getResources, saveState, this.colorSpace, this.matrix.clone());\n /* tslint:enable */\n this.currentPen = pen.clone();\n }\n };\n /**\n * Controls the `brush state`.\n * @private\n */\n PdfGraphics.prototype.brushControl = function (brush, saveState) {\n if (brush != null) {\n this.currentBrush = brush;\n /* tslint:disable */\n brush.monitorChanges(this.currentBrush, this.pdfStreamWriter, this.getResources, saveState, this.colorSpace);\n /* tslint:enable */\n this.currentBrush = brush;\n brush = null;\n }\n };\n /**\n * Saves the font and other `font settings`.\n * @private\n */\n PdfGraphics.prototype.fontControl = function (font, format, saveState) {\n if (font != null) {\n var curSubSuper = (format != null) ? format.subSuperScript : PdfSubSuperScript.None;\n /* tslint:disable */\n var prevSubSuper = (this.currentStringFormat != null) ? this.currentStringFormat.subSuperScript : PdfSubSuperScript.None; /* tslint:enable */\n if (saveState || font !== this.currentFont || curSubSuper !== prevSubSuper) {\n var resources = this.getResources.getResources();\n this.currentFont = font;\n this.currentStringFormat = format;\n var size = font.metrics.getSize(format);\n /* tslint:disable */\n this.isEmfTextScaled = false;\n var fontName = resources.getName(font);\n this.pdfStreamWriter.setFont(font, fontName, size);\n }\n }\n };\n PdfGraphics.prototype.setTransparency = function (arg1, arg2, arg3) {\n if (typeof arg2 === 'undefined') {\n this.istransparencySet = true;\n this.setTransparency(arg1, arg1, PdfBlendMode.Normal);\n }\n else if (typeof arg2 === 'number' && typeof arg3 === 'undefined') {\n this.setTransparency(arg1, arg2, PdfBlendMode.Normal);\n }\n else {\n if (this.trasparencies == null) {\n this.trasparencies = new TemporaryDictionary();\n }\n var transp = null;\n var td = new TransparencyData(arg1, arg2, arg3);\n if (this.trasparencies.containsKey(td)) {\n transp = this.trasparencies.getValue(td);\n }\n if (transp == null) {\n transp = new PdfTransparency(arg1, arg2, arg3);\n this.trasparencies.setValue(td, transp);\n }\n var resources = this.getResources.getResources();\n var name_3 = resources.getName(transp);\n var sw = this.streamWriter;\n sw.setGraphicsState(name_3);\n }\n };\n PdfGraphics.prototype.clipTranslateMargins = function (x, y, left, top, right, bottom) {\n if (x instanceof RectangleF && typeof y === 'undefined') {\n this.clipBounds = x;\n this.pdfStreamWriter.writeComment('Clip margins.');\n this.pdfStreamWriter.appendRectangle(x);\n this.pdfStreamWriter.closePath();\n this.pdfStreamWriter.clipPath(false);\n this.pdfStreamWriter.writeComment('Translate co-ordinate system.');\n this.translateTransform(x.x, x.y);\n }\n else if (typeof x === 'number') {\n var clipArea = new RectangleF(left, top, this.size.width - left - right, this.size.height - top - bottom);\n this.clipBounds = clipArea;\n this.pdfStreamWriter.writeComment(\"Clip margins.\");\n this.pdfStreamWriter.appendRectangle(clipArea);\n this.pdfStreamWriter.closePath();\n this.pdfStreamWriter.clipPath(false);\n this.pdfStreamWriter.writeComment(\"Translate co-ordinate system.\");\n this.translateTransform(x, y);\n }\n };\n /**\n * `Updates y` co-ordinate.\n * @private\n */\n PdfGraphics.prototype.updateY = function (y) {\n return -y;\n };\n /**\n * Used to `translate the transformation`.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // set pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * //\n * // set translate transform\n * page1.graphics.translateTransform(100, 100);\n * //\n * // draw the rectangle after applying translate transform\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 0, y : 0}, {width : 100, height : 50}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n * @param offsetX The x-coordinate of the translation.\n * @param offsetY The y-coordinate of the translation.\n */\n PdfGraphics.prototype.translateTransform = function (offsetX, offsetY) {\n var matrix = new PdfTransformationMatrix();\n this.getTranslateTransform(offsetX, offsetY, matrix);\n this.pdfStreamWriter.modifyCtm(matrix);\n this.matrix.multiply(matrix);\n };\n /**\n * `Translates` coordinates of the input matrix.\n * @private\n */\n PdfGraphics.prototype.getTranslateTransform = function (x, y, input) {\n input.translate(x, this.updateY(y));\n return input;\n };\n /* tslint:disable */\n /**\n * Applies the specified `scaling operation` to the transformation matrix of this Graphics by prepending it to the object's transformation matrix.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // create pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * //\n * // apply scaling trasformation\n * page1.graphics.scaleTransform(1.5, 2);\n * //\n * // draw the rectangle after applying scaling transform\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 100, y : 100}, {width : 100, height : 50}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n * @param scaleX Scale factor in the x direction.\n * @param scaleY Scale factor in the y direction.\n */\n /* tslint:enable */\n PdfGraphics.prototype.scaleTransform = function (scaleX, scaleY) {\n var matrix = new PdfTransformationMatrix();\n this.getScaleTransform(scaleX, scaleY, matrix);\n this.pdfStreamWriter.modifyCtm(matrix);\n this.matrix.multiply(matrix);\n };\n /**\n * `Scales` coordinates of the input matrix.\n * @private\n */\n PdfGraphics.prototype.getScaleTransform = function (x, y, input) {\n if (input == null) {\n input = new PdfTransformationMatrix();\n }\n input.scale(x, y);\n return input;\n };\n /**\n * Applies the specified `rotation` to the transformation matrix of this Graphics.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // create pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * //\n * // set RotateTransform with 25 degree of angle\n * page1.graphics.rotateTransform(25);\n * //\n * // draw the rectangle after RotateTransformation\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 100, y : 100}, {width : 100, height : 50}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n * @param angle Angle of rotation in degrees.\n */\n PdfGraphics.prototype.rotateTransform = function (angle) {\n var matrix = new PdfTransformationMatrix();\n this.getRotateTransform(angle, matrix);\n this.pdfStreamWriter.modifyCtm(matrix);\n this.matrix.multiply(matrix);\n };\n /**\n * `Initializes coordinate system`.\n * @private\n */\n PdfGraphics.prototype.initializeCoordinates = function () {\n // Matrix equation: TM(T-1)=M', where T=[1 0 0 -1 0 h]\n this.pdfStreamWriter.writeComment('Change co-ordinate system to left/top.');\n // Translate co-ordinates only, don't flip.\n if (this.mediaBoxUpperRightBound !== -(this.size.height)) {\n if (this.cropBox == null) {\n if (this.mediaBoxUpperRightBound === this.size.height || this.mediaBoxUpperRightBound === 0) {\n this.translateTransform(0, this.updateY(this.size.height));\n }\n else {\n this.translateTransform(0, this.updateY(this.mediaBoxUpperRightBound));\n }\n }\n }\n };\n /**\n * `Rotates` coordinates of the input matrix.\n * @private\n */\n PdfGraphics.prototype.getRotateTransform = function (angle, input) {\n if (input == null || typeof input === 'undefined') {\n input = new PdfTransformationMatrix();\n }\n input.rotate(this.updateY(angle));\n return input;\n };\n /**\n * `Saves` the current state of this Graphics and identifies the saved state with a GraphicsState.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create a new page\n * let page1 : PdfPage = document.pages.add();\n * // create pen\n * let pen : PdfPen = new PdfPen(new PdfColor(0, 0, 0));\n * //\n * // save the graphics state\n * let state1 : PdfGraphicsState = page1.graphics.save();\n * //\n * page1.graphics.scaleTransform(1.5, 2);\n * // draw the rectangle\n * page1.graphics.drawRectangle(pen, new RectangleF({x : 100, y : 100}, {width : 100, height : 50}));\n * // restore the graphics state\n * page1.graphics.restore(state1);\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n PdfGraphics.prototype.save = function () {\n var state = new PdfGraphicsState(this, this.matrix.clone());\n state.brush = this.currentBrush;\n state.pen = this.currentPen;\n state.font = this.currentFont;\n state.colorSpace = this.currentColorSpace;\n state.characterSpacing = this.previousCharacterSpacing;\n state.wordSpacing = this.previousWordSpacing;\n state.textScaling = this.previousTextScaling;\n state.textRenderingMode = this.previousTextRenderingMode;\n this.graphicsState.push(state);\n this.pdfStreamWriter.saveGraphicsState();\n return state;\n };\n PdfGraphics.prototype.restore = function (state) {\n if (typeof state === 'undefined') {\n if (this.graphicsState.length > 0) {\n this.doRestoreState();\n }\n }\n else {\n if (this.graphicsState.indexOf(state) !== -1) {\n for (;;) {\n if (this.graphicsState.length === 0) {\n break;\n }\n var popState = this.doRestoreState();\n if (popState === state) {\n break;\n }\n }\n }\n }\n };\n /**\n * `Restores graphics state`.\n * @private\n */\n PdfGraphics.prototype.doRestoreState = function () {\n var state = this.graphicsState.pop();\n this.transformationMatrix = state.matrix;\n this.currentBrush = state.brush;\n this.currentPen = state.pen;\n this.currentFont = state.font;\n this.currentColorSpace = state.colorSpace;\n this.previousCharacterSpacing = state.characterSpacing;\n this.previousWordSpacing = state.wordSpacing;\n this.previousTextScaling = state.textScaling;\n this.previousTextRenderingMode = state.textRenderingMode;\n this.pdfStreamWriter.restoreGraphicsState();\n return state;\n };\n // Constants\n /**\n * Specifies the mask of `path type values`.\n * @private\n */\n PdfGraphics.pathTypesValuesMask = 0xf;\n /**\n * Checks whether the object is `transparencyObject`.\n * @hidden\n * @private\n */\n PdfGraphics.transparencyObject = false;\n return PdfGraphics;\n}());\nexport { PdfGraphics };\n/**\n * `GetResourceEventHandler` class is alternate for event handlers and delegates.\n * @private\n * @hidden\n */\nvar GetResourceEventHandler = /** @class */ (function () {\n /**\n * Initialize instance of `GetResourceEventHandler` class.\n * Alternate for event handlers and delegates.\n * @private\n */\n function GetResourceEventHandler(sender) {\n this.sender = sender;\n }\n /**\n * Return the instance of `PdfResources` class.\n * @private\n */\n GetResourceEventHandler.prototype.getResources = function () {\n return this.sender.getResources();\n };\n return GetResourceEventHandler;\n}());\nexport { GetResourceEventHandler };\nvar PdfGraphicsState = /** @class */ (function () {\n function PdfGraphicsState(graphics, matrix) {\n /**\n * Stores `previous rendering mode`.\n * @default TextRenderingMode.Fill\n * @private\n */\n this.internalTextRenderingMode = TextRenderingMode.Fill;\n /**\n * `Previous character spacing` value or 0.\n * @default 0.0\n * @private\n */\n this.internalCharacterSpacing = 0.0;\n /**\n * `Previous word spacing` value or 0.\n * @default 0.0\n * @private\n */\n this.internalWordSpacing = 0.0;\n /**\n * The previously used `text scaling value`.\n * @default 100.0\n * @private\n */\n this.internalTextScaling = 100.0;\n /**\n * `Current color space`.\n * @default PdfColorSpace.Rgb\n * @private\n */\n this.pdfColorSpace = PdfColorSpace.Rgb;\n if (typeof graphics !== 'undefined') {\n this.pdfGraphics = graphics;\n this.transformationMatrix = matrix;\n }\n }\n Object.defineProperty(PdfGraphicsState.prototype, \"graphics\", {\n // Properties\n /**\n * Gets the parent `graphics object`.\n * @private\n */\n get: function () {\n return this.pdfGraphics;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"matrix\", {\n /**\n * Gets the `current matrix`.\n * @private\n */\n get: function () {\n return this.transformationMatrix;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"characterSpacing\", {\n /**\n * Gets or sets the `current character spacing`.\n * @private\n */\n get: function () {\n return this.internalCharacterSpacing;\n },\n set: function (value) {\n this.internalCharacterSpacing = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"wordSpacing\", {\n /**\n * Gets or sets the `word spacing` value.\n * @private\n */\n get: function () {\n return this.internalWordSpacing;\n },\n set: function (value) {\n this.internalWordSpacing = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"textScaling\", {\n /**\n * Gets or sets the `text scaling` value.\n * @private\n */\n get: function () {\n return this.internalTextScaling;\n },\n set: function (value) {\n this.internalTextScaling = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"pen\", {\n /**\n * Gets or sets the `current pen` object.\n * @private\n */\n get: function () {\n return this.pdfPen;\n },\n set: function (value) {\n this.pdfPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"brush\", {\n /**\n * Gets or sets the `brush`.\n * @private\n */\n get: function () {\n return this.pdfBrush;\n },\n set: function (value) {\n this.pdfBrush = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"font\", {\n /**\n * Gets or sets the `current font` object.\n * @private\n */\n get: function () {\n return this.pdfFont;\n },\n set: function (value) {\n this.pdfFont = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"colorSpace\", {\n /**\n * Gets or sets the `current color space` value.\n * @private\n */\n get: function () {\n return this.pdfColorSpace;\n },\n set: function (value) {\n this.pdfColorSpace = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGraphicsState.prototype, \"textRenderingMode\", {\n /**\n * Gets or sets the `text rendering mode`.\n * @private\n */\n get: function () {\n return this.internalTextRenderingMode;\n },\n set: function (value) {\n this.internalTextRenderingMode = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGraphicsState;\n}());\nexport { PdfGraphicsState };\nvar TransparencyData = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `TransparencyData` class.\n * @private\n */\n function TransparencyData(alphaPen, alphaBrush, blendMode) {\n this.alphaPen = alphaPen;\n this.alphaBrush = alphaBrush;\n this.blendMode = blendMode;\n }\n return TransparencyData;\n}());\n","import { PdfStream } from './../primitives/pdf-stream';\nimport { PdfGraphics, GetResourceEventHandler } from './../graphics/pdf-graphics';\nimport { PdfPageLayerCollection } from './pdf-page-layer-collection';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { PdfColorSpace } from './../graphics/enum';\n/**\n * The `PdfPageLayer` used to create layers in PDF document.\n * @private\n */\nvar PdfPageLayer = /** @class */ (function () {\n function PdfPageLayer(page, streamClipPageTemplates) {\n // private bSaved : boolean;\n /**\n * Local Variable to store the `color space` of the document.\n * @private\n */\n this.pdfColorSpace = PdfColorSpace.Rgb;\n /**\n * Local Variable to set `visibility`.\n * @default true\n * @private\n */\n this.isVisible = true;\n /**\n * Indicates if `Sublayer` is present.\n * @default false\n * @private\n */\n this.sublayer = false;\n /**\n * Local variable to store `length` of the graphics.\n * @default 0\n * @private\n */\n this.contentLength = 0;\n /**\n * Instance for `PdfDictionaryProperties` Class.\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n if (typeof streamClipPageTemplates === 'undefined') {\n this.pdfPage = page;\n this.clipPageTemplates = true;\n this.content = new PdfStream();\n }\n else if (streamClipPageTemplates instanceof PdfStream || streamClipPageTemplates === null) {\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n if (streamClipPageTemplates == null) {\n throw new Error('ArgumentNullException:stream');\n }\n this.pdfPage = page;\n this.content = streamClipPageTemplates;\n }\n else {\n this.constructor(page);\n this.clipPageTemplates = streamClipPageTemplates;\n }\n }\n Object.defineProperty(PdfPageLayer.prototype, \"colorSpace\", {\n // Properties\n /**\n * Get or set the `color space`.\n * @private\n */\n get: function () {\n return this.pdfColorSpace;\n },\n set: function (value) {\n this.pdfColorSpace = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageLayer.prototype, \"page\", {\n /**\n * Gets parent `page` of the layer.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageLayer.prototype, \"layerId\", {\n /**\n * Gets and Sets the `id of the layer`.\n * @private\n */\n get: function () {\n return this.layerid;\n },\n set: function (value) {\n this.layerid = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageLayer.prototype, \"name\", {\n /**\n * Gets or sets the `name` of the layer.\n * @private\n */\n get: function () {\n return this.layerName;\n },\n set: function (value) {\n this.layerName = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageLayer.prototype, \"visible\", {\n /**\n * Gets or sets the `visibility` of the layer.\n * @private\n */\n get: function () {\n return this.isVisible;\n },\n set: function (value) {\n this.isVisible = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageLayer.prototype, \"graphics\", {\n /**\n * Gets `Graphics` context of the layer, used to draw various graphical content on layer.\n * @private\n */\n get: function () {\n if ((this.pdfGraphics == null)) {\n this.initializeGraphics(this.page);\n }\n return this.pdfGraphics;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageLayer.prototype, \"layers\", {\n /**\n * Gets the collection of `PdfPageLayer`, this collection handle by the class 'PdfPageLayerCollection'.\n * @private\n */\n get: function () {\n if (this.layer == null) {\n this.layer = new PdfPageLayerCollection(this.page);\n this.layer.sublayer = true;\n return this.layer;\n }\n else {\n return this.layer;\n }\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Adds` a new PDF Page layer.\n * @private\n */\n PdfPageLayer.prototype.add = function () {\n var layer = new PdfPageLayer(this.pdfPage);\n layer.name = '';\n return layer;\n };\n /**\n * Returns a value indicating the `sign` of a single-precision floating-point number.\n * @private\n */\n PdfPageLayer.prototype.sign = function (number) {\n if (number === 0) {\n return 0;\n }\n else if (number > 0) {\n return 1;\n }\n else {\n return -1;\n }\n };\n /**\n * `Initializes Graphics context` of the layer.\n * @private\n */\n PdfPageLayer.prototype.initializeGraphics = function (page) {\n var oPage = page;\n var gr = new GetResourceEventHandler(this.page);\n var cropBox = null;\n this.pdfGraphics = new PdfGraphics(page.size, gr, this.content);\n this.pdfGraphics.mediaBoxUpperRightBound = 0;\n if (oPage != null) {\n var sc = oPage.section.parent;\n if (sc != null) {\n this.pdfGraphics.colorSpace = sc.document.colorSpace;\n this.colorSpace = sc.document.colorSpace;\n }\n }\n // Transform coordinates to the left/top and activate margins.\n var isSame = (this.sign(page.origin.y) === this.sign(page.origin.x));\n // if (page != null) {\n if (page.origin.x >= 0 && page.origin.y >= 0 || !(isSame)) {\n this.pdfGraphics.initializeCoordinates();\n }\n else {\n // this.m_graphics.InitializeCoordinates(page);\n }\n var clipRect = oPage.section.getActualBounds(oPage, true);\n var margins = oPage.section.pageSettings.margins;\n if (this.clipPageTemplates) {\n if (page.origin.x >= 0 && page.origin.y >= 0) {\n this.pdfGraphics.clipTranslateMargins(clipRect);\n }\n }\n else {\n this.graphics.clipTranslateMargins(clipRect.x, clipRect.y, margins.left, margins.top, margins.right, margins.bottom);\n }\n this.pdfGraphics.setLayer(this);\n // this.bSaved = false;\n };\n Object.defineProperty(PdfPageLayer.prototype, \"element\", {\n // IPdfWrapper Members\n /**\n * Gets the wrapped `element`.\n * @private\n */\n get: function () {\n return this.content;\n },\n enumerable: true,\n configurable: true\n });\n return PdfPageLayer;\n}());\nexport { PdfPageLayer };\n","/**\n * PdfCollection.ts class for EJ2-PDF\n * The class used to handle the collection of PdF objects.\n */\nvar PdfCollection = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `Collection` class.\n * @private\n */\n function PdfCollection() {\n //\n }\n Object.defineProperty(PdfCollection.prototype, \"count\", {\n // Properties\n /**\n * Gets the `Count` of stored objects.\n * @private\n */\n get: function () {\n if (typeof this.collection === 'undefined') {\n this.collection = [];\n }\n return this.collection.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCollection.prototype, \"list\", {\n /**\n * Gets the `list` of stored objects.\n * @private\n */\n get: function () {\n if (typeof this.collection === 'undefined') {\n this.collection = [];\n }\n return this.collection;\n },\n enumerable: true,\n configurable: true\n });\n return PdfCollection;\n}());\nexport { PdfCollection };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfPageLayerCollection.ts class for EJ2-PDF\n */\nimport { PdfPageBase } from './pdf-page-base';\nimport { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { PdfPageLayer } from './pdf-page-layer';\nimport { PdfCollection } from './../general/pdf-collection';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { PdfStream } from './../primitives/pdf-stream';\n/**\n * The class provides methods and properties to handle the collections of `PdfPageLayer`.\n */\nvar PdfPageLayerCollection = /** @class */ (function (_super) {\n __extends(PdfPageLayerCollection, _super);\n function PdfPageLayerCollection(page) {\n var _this = _super.call(this) || this;\n /**\n * Stores the `number of first level layers` in the document.\n * @default 0\n * @private\n */\n _this.parentLayerCount = 0;\n /**\n * Indicates if `Sublayer` is present.\n * @default false\n * @private\n */\n _this.sublayer = false;\n /**\n * Stores the `optional content dictionary`.\n * @private\n */\n _this.optionalContent = new PdfDictionary();\n if (page instanceof PdfPageBase) {\n // if (page == null) {\n // throw new Error('ArgumentNullException:page');\n // }\n _this.page = page;\n var lPage = page;\n // if (lPage != null) {\n _this.parseLayers(lPage);\n // }\n }\n return _this;\n }\n PdfPageLayerCollection.prototype.items = function (index, value) {\n if (typeof index === 'number' && typeof value === 'undefined') {\n var obj = this.list[index];\n return obj;\n }\n else {\n if (value == null) {\n throw new Error('ArgumentNullException: layer');\n }\n if (value.page !== this.page) {\n throw new Error('ArgumentException: The layer belongs to another page');\n }\n // // Add/remove the layer.\n // let layer : PdfPageLayer = this.items(index);\n // if (layer != null) {\n // this.RemoveLayer(layer);\n // }\n // this.List[index] = value;\n // this.InsertLayer(index, value);\n }\n };\n PdfPageLayerCollection.prototype.add = function (firstArgument, secondArgument) {\n if (typeof firstArgument === 'undefined') {\n var layer = new PdfPageLayer(this.page);\n layer.name = '';\n this.add(layer);\n return layer;\n }\n else if (firstArgument instanceof PdfPageLayer) {\n // if (layer == null)\n // throw new ArgumentNullException(\"layer\");\n // if (layer.Page != m_page)\n // throw new ArgumentException(\"The layer belongs to another page\");\n var index = this.list.push(firstArgument);\n // Register layer.\n this.addLayer(index, firstArgument);\n return index;\n }\n else {\n return 0;\n }\n };\n /**\n * Registers `layer` at the page.\n * @private\n */\n PdfPageLayerCollection.prototype.addLayer = function (index, layer) {\n var reference = new PdfReferenceHolder(layer);\n this.page.contents.add(reference);\n };\n // private RemoveLayer(layer : PdfPageLayer) : void {\n // if (layer == null) {\n // throw new Error('ArgumentNullException:layer');\n // }\n // let reference : PdfReferenceHolder = new PdfReferenceHolder(layer);\n // if (this.page != null) {\n // this.page.Contents.Remove(reference);\n // }\n // }\n /**\n * Inserts `PdfPageLayer` into the collection at specified index.\n * @private\n */\n PdfPageLayerCollection.prototype.insert = function (index, layer) {\n // if (index < 0)\n // throw new ArgumentOutOfRangeException(\"index\", \"Value can not be less 0\");\n // if (layer == null)\n // throw new ArgumentNullException(\"layer\");\n // if (layer.Page != m_page)\n // throw new ArgumentException(\"The layer belongs to another page\");\n var list = [];\n var length = this.list.length;\n for (var i = index; i < length; i++) {\n list.push(this.list.pop());\n }\n this.list.push(layer);\n for (var i = 0; i < list.length; i++) {\n this.list.push(list[i]);\n }\n // Register layer.\n this.insertLayer(index, layer);\n };\n /**\n * Registers layer at the page.\n * @private\n */\n PdfPageLayerCollection.prototype.insertLayer = function (index, layer) {\n if (layer == null) {\n throw new Error('ArgumentNullException:layer');\n }\n var reference = new PdfReferenceHolder(layer);\n this.page.contents.insert(index, reference);\n };\n // tslint:disable\n /**\n * `Parses the layers`.\n * @private\n */\n PdfPageLayerCollection.prototype.parseLayers = function (loadedPage) {\n // if (loadedPage == null) {\n // throw new Error('ArgumentNullException:loadedPage');\n // }\n var contents = this.page.contents;\n var resource = this.page.getResources();\n var crossTable = null;\n var ocproperties = null;\n var propertie = null;\n var isLayerAdded = false;\n // if (loadedPage instanceof PdfPage) {\n crossTable = loadedPage.crossTable;\n // } else {\n // crossTable = (loadedPage as PdfLoadedPage).CrossTable;\n // Propertie = PdfCrossTable.Dereference(Resource[DictionaryProperties.Properties]) as PdfDictionary;\n // ocproperties = PdfCrossTable.Dereference((loadedPage as PdfLoadedPage).\n // Document.Catalog[DictionaryProperties.OCProperties]) as PdfDictionary;\n // }\n var saveStream = new PdfStream();\n var restoreStream = new PdfStream();\n var saveState = 'q';\n var newLine = '\\n';\n var restoreState = 'Q';\n // for (let index : number = 0; index < contents.Items.length; index++) {\n // let obj : IPdfPrimitive = contents[index];\n // let stream : PdfStream = crossTable.GetObject(obj) as PdfStream;\n // if (stream == null)\n // throw new PdfDocumentException(\"Invalid contents array.\");\n // // if (stream.Compress)\n // {\n // if (!loadedPage.Imported)\n // stream.Decompress();\n // }\n // byte[] contentId = stream.Data;\n // string str = PdfString.ByteToString(contentId);\n // if (!loadedPage.Imported && (contents.Count == 1) && ((stream.Data[stream.Data.Length - 2] ==\n // RestoreState) || (stream.Data[stream.Data.Length - 1] == RestoreState)))\n // {\n // byte[] content = stream.Data;\n // byte[] data = new byte[content.Length + 4];\n // data[0] = SaveState;\n // data[1] = NewLine;\n // content.CopyTo(data, 2);\n // data[data.Length - 2] = NewLine;\n // data[data.Length - 1] = RestoreState;\n // stream.Data = data;\n // }\n // if (ocproperties != null)\n // {\n // if (Propertie != null)\n // {\n // foreach (KeyValuePair prop in Propertie.Items)\n // {\n // String Key = prop.Key.ToString();\n // PdfReferenceHolder refh = prop.Value as PdfReferenceHolder;\n // PdfDictionary Dict = null;\n // if (refh != null)\n // {\n // Dict = refh.Object as PdfDictionary;\n // }\n // else\n // {\n // Dict = prop.Value as PdfDictionary;\n // }\n // PdfDictionary m_usage = PdfCrossTable.Dereference(Dict[DictionaryProperties.Usage]) as PdfDictionary;\n // if (m_usage != null)\n // {\n // if (str.Contains(Key))\n // {\n // PdfPageLayer layer = new PdfPageLayer(loadedPage, stream);\n // PdfDictionary printoption = PdfCrossTable.Dereference(m_usage[DictionaryProperties.Print])\n // as PdfDictionary;\n // if (printoption != null)\n // {\n // layer.m_printOption = printoption;\n // foreach (KeyValuePair value in printoption.Items)\n // {\n // if (value.Key.Value.Equals(DictionaryProperties.PrintState))\n // {\n // string printState = (value.Value as PdfName).Value;\n // if (printState.Equals(DictionaryProperties.OCGON))\n // {\n // layer.PrintState = PdfPrintState.AlwaysPrint;\n // break;\n // }\n // else\n // {\n // layer.PrintState = PdfPrintState.NeverPrint;\n // break;\n // }\n // }\n // }\n // }\n // PdfString layerName = PdfCrossTable.Dereference(Dict[DictionaryProperties.Name]) as PdfString;\n // layer.Name = layerName.Value;\n // List.add(layer);\n // isLayerAdded = true;\n // if(!str.Contains(\"EMC\"))\n // break;\n // }\n // }\n // else\n // {\n // if (str.Contains(Key))\n // {\n // PdfPageLayer layer = new PdfPageLayer(loadedPage, stream);\n // List.add(layer);\n // if(Dict.ContainsKey(DictionaryProperties.Name))\n // {\n // PdfString layerName = PdfCrossTable.Dereference(Dict[DictionaryProperties.Name]) as PdfString;\n // layer.Name = layerName.Value;\n // }\n // isLayerAdded = true;\n // break;\n // }\n // }\n // }\n // }\n // }\n // if (!isLayerAdded)\n // {\n // PdfPageLayer layer = new PdfPageLayer(loadedPage, stream);\n // List.add(layer);\n // }\n // else\n // isLayerAdded = false;\n // }\n var saveData = [];\n saveData.push(saveState);\n saveStream.data = saveData;\n contents.insert(0, new PdfReferenceHolder(saveStream));\n saveData = [];\n saveData.push(restoreState);\n restoreStream.data = saveData;\n contents.insert(contents.count, new PdfReferenceHolder(restoreStream));\n };\n /**\n * Returns `index of` the `PdfPageLayer` in the collection if exists, -1 otherwise.\n * @private\n */\n PdfPageLayerCollection.prototype.indexOf = function (layer) {\n if (layer == null) {\n throw new Error('ArgumentNullException: layer');\n }\n var index = this.list.indexOf(layer);\n return index;\n };\n return PdfPageLayerCollection;\n}(PdfCollection));\nexport { PdfPageLayerCollection };\n","/**\n * PdfTemplate.ts class for EJ2-PDF\n */\nimport { PdfStream } from './../../primitives/pdf-stream';\nimport { DictionaryProperties } from './../../input-output/pdf-dictionary-properties';\nimport { PdfArray } from './../../primitives/pdf-array';\nimport { PdfGraphics } from './../pdf-graphics';\nimport { PdfResources } from './../pdf-resources';\nimport { PdfName } from './../../primitives/pdf-name';\nimport { PointF, SizeF, RectangleF } from './../../drawing/pdf-drawing';\nimport { GetResourceEventHandler } from './../pdf-graphics';\n/**\n * Represents `Pdf Template` object.\n * @private\n */\nvar PdfTemplate = /** @class */ (function () {\n function PdfTemplate(arg1, arg2) {\n /**\n * Initialize an instance for `DictionaryProperties` class.\n * @private\n * @hidden\n */\n this.dictionaryProperties = new DictionaryProperties();\n /**\n * Checks whether the transformation 'is performed'.\n * @default true\n * @private\n */\n this.writeTransformation = true;\n if (typeof arg1 === 'undefined') {\n //\n }\n else if (arg1 instanceof SizeF && typeof arg2 === 'undefined') {\n this.content = new PdfStream();\n var tempSize = new SizeF(arg1.width, arg1.height);\n this.setSize(tempSize);\n this.initialize();\n }\n else {\n this.content = new PdfStream();\n this.setSize(new SizeF(arg1, arg2));\n this.initialize();\n }\n }\n Object.defineProperty(PdfTemplate.prototype, \"size\", {\n //Properties\n /**\n * Gets the size of the 'PdfTemplate'.\n */\n get: function () {\n return this.templateSize;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTemplate.prototype, \"width\", {\n /**\n * Gets the width of the 'PdfTemplate'.\n */\n get: function () {\n return this.size.width;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTemplate.prototype, \"height\", {\n /**\n * Gets the height of the 'PdfTemplate'.\n */\n get: function () {\n return this.size.height;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTemplate.prototype, \"graphics\", {\n /**\n * Gets the `graphics` of the 'PdfTemplate'.\n */\n get: function () {\n if (this.pdfGraphics == null || typeof this.pdfGraphics === 'undefined') {\n var gr = new GetResourceEventHandler(this);\n var g = new PdfGraphics(this.size, gr, this.content);\n this.pdfGraphics = g;\n // if(this.writeTransformation) {\n // Transform co-ordinates to Top/Left.\n this.pdfGraphics.initializeCoordinates();\n // }\n }\n return this.pdfGraphics;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets the resources and modifies the template dictionary.\n * @private\n */\n PdfTemplate.prototype.getResources = function () {\n if (this.resources == null) {\n this.resources = new PdfResources();\n this.content.items.setValue(this.dictionaryProperties.resources, this.resources);\n }\n return this.resources;\n };\n // Public methods\n /**\n * `Initialize` the type and subtype of the template.\n * @private\n */\n PdfTemplate.prototype.initialize = function () {\n this.addType();\n this.addSubType();\n };\n /**\n * `Adds type key`.\n * @private\n */\n PdfTemplate.prototype.addType = function () {\n var value = new PdfName(this.dictionaryProperties.xObject);\n this.content.items.setValue(this.dictionaryProperties.type, value);\n };\n /**\n * `Adds SubType key`.\n * @private\n */\n PdfTemplate.prototype.addSubType = function () {\n var value = new PdfName(this.dictionaryProperties.form);\n this.content.items.setValue(this.dictionaryProperties.subtype, value);\n };\n PdfTemplate.prototype.reset = function (size) {\n if (typeof size === 'undefined') {\n if (this.resources != null) {\n this.resources = null;\n this.content.remove(this.dictionaryProperties.resources);\n }\n if (this.graphics != null) {\n this.graphics.reset(this.size);\n }\n }\n else {\n this.setSize(size);\n this.reset();\n }\n };\n /**\n * `Set the size` of the 'PdfTemplate'.\n * @private\n */\n PdfTemplate.prototype.setSize = function (size) {\n var rect = new RectangleF(new PointF(0, 0), size);\n var val = PdfArray.fromRectangle(rect);\n this.content.items.setValue(this.dictionaryProperties.bBox, val);\n this.templateSize = size;\n };\n Object.defineProperty(PdfTemplate.prototype, \"element\", {\n // /**\n // * Returns the value of current graphics.\n // * @private\n // */\n // public GetGraphics(g : PdfGraphics) : PdfGraphics {\n // if (this.graphics == null || typeof this.graphics === 'undefined') {\n // this.graphics = g;\n // this.graphics.Size = this.Size;\n // this.graphics.StreamWriter = new PdfStreamWriter(this.content)\n // this.graphics.Initialize();\n // if(this.writeTransformation) {\n // this.graphics.InitializeCoordinates();\n // }\n // }\n // return this.graphics;\n // }\n // IPdfWrapper Members\n /**\n * Gets the `content stream` of 'PdfTemplate' class.\n * @private\n */\n get: function () {\n return this.content;\n },\n enumerable: true,\n configurable: true\n });\n return PdfTemplate;\n}());\nexport { PdfTemplate };\n","/**\n * ByteArray class\n * Used to keep information about image stream as byte array.\n * @private\n */\nvar ByteArray = /** @class */ (function () {\n /**\n * Initialize the new instance for `byte-array` class\n * @hidden\n * @private\n */\n function ByteArray(length) {\n /**\n * Current stream `position`.\n * @default 0\n * @private\n */\n this.mPosition = 0;\n this.buffer = new Uint8Array(length);\n this.dataView = new DataView(this.buffer.buffer);\n }\n Object.defineProperty(ByteArray.prototype, \"position\", {\n /**\n * Gets and Sets a current `position` of byte array.\n * @hidden\n * @private\n */\n get: function () {\n return this.mPosition;\n },\n set: function (value) {\n this.mPosition = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Read` from current stream position.\n * @default 0\n * @hidden\n * @private\n */\n ByteArray.prototype.read = function (buffer, offset, count) {\n for (var index = offset; index < count; index++) {\n var position = this.position;\n buffer.buffer[index] = this.readByte(position);\n this.position++;\n }\n };\n /**\n * @hidden\n */\n ByteArray.prototype.getBuffer = function (index) {\n return this.buffer[index];\n };\n /**\n * @hidden\n */\n ByteArray.prototype.writeFromBase64String = function (base64) {\n var arr = this.encodedString(base64);\n this.buffer = arr;\n };\n /**\n * @hidden\n */\n ByteArray.prototype.encodedString = function (input) {\n var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n var chr1;\n var chr2;\n var chr3;\n var enc1;\n var enc2;\n var enc3;\n var enc4;\n var i = 0;\n var resultIndex = 0;\n var dataUrlPrefix = 'data:';\n input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, '');\n var totalLength = input.length * 3 / 4;\n if (input.charAt(input.length - 1) === keyStr.charAt(64)) {\n totalLength--;\n }\n var output = new Uint8Array(totalLength | 0);\n while (i < input.length) {\n enc1 = keyStr.indexOf(input.charAt(i++));\n enc2 = keyStr.indexOf(input.charAt(i++));\n enc3 = keyStr.indexOf(input.charAt(i++));\n enc4 = keyStr.indexOf(input.charAt(i++));\n chr1 = (enc1 << 2) | (enc2 >> 4);\n chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);\n chr3 = ((enc3 & 3) << 6) | enc4;\n output[resultIndex++] = chr1;\n output[resultIndex++] = chr2;\n output[resultIndex++] = chr3;\n }\n return output;\n };\n /**\n * @hidden\n */\n ByteArray.prototype.readByte = function (offset) {\n return (this.buffer[offset]);\n };\n Object.defineProperty(ByteArray.prototype, \"internalBuffer\", {\n /**\n * @hidden\n */\n get: function () {\n return this.buffer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(ByteArray.prototype, \"count\", {\n /**\n * @hidden\n */\n get: function () {\n return this.buffer.byteLength;\n },\n enumerable: true,\n configurable: true\n });\n return ByteArray;\n}());\nexport { ByteArray };\n","/**\n * `PdfBoolean` class is used to perform boolean related primitive operations.\n * @private\n */\nvar PdfBoolean = /** @class */ (function () {\n //constructor\n /**\n * Initializes a new instance of the `PdfBoolean` class.\n * @private\n */\n function PdfBoolean(value) {\n /**\n * Internal variable to store the `position`.\n * @default -1\n * @private\n */\n this.currentPosition = -1;\n this.value = value;\n }\n Object.defineProperty(PdfBoolean.prototype, \"status\", {\n //Properties\n /**\n * Gets or sets the `Status` of the specified object.\n * @private\n */\n get: function () {\n return this.objectStatus;\n },\n set: function (value) {\n this.objectStatus = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBoolean.prototype, \"isSaving\", {\n /**\n * Gets or sets a value indicating whether this document `is saving` or not.\n * @private\n */\n get: function () {\n return this.saving;\n },\n set: function (value) {\n this.saving = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBoolean.prototype, \"objectCollectionIndex\", {\n /**\n * Gets or sets the `index` value of the specified object.\n * @private\n */\n get: function () {\n return this.index;\n },\n set: function (value) {\n this.index = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBoolean.prototype, \"position\", {\n /**\n * Gets or sets the `position` of the object.\n * @private\n */\n get: function () {\n return this.currentPosition;\n },\n set: function (value) {\n this.currentPosition = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBoolean.prototype, \"clonedObject\", {\n /**\n * Returns `cloned object`.\n * @private\n */\n get: function () {\n var rValue = null;\n return rValue;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Saves` the object using the specified writer.\n * @private\n */\n PdfBoolean.prototype.save = function (writer) {\n writer.write(this.boolToStr(this.value));\n };\n /**\n * Creates a `copy of PdfBoolean`.\n * @private\n */\n PdfBoolean.prototype.clone = function (crossTable) {\n var newNumber = new PdfBoolean(this.value);\n return newNumber;\n };\n // Implementation\n /**\n * Converts `boolean to string` - 0/1 'true'/'false'.\n * @private\n */\n PdfBoolean.prototype.boolToStr = function (value) {\n return value ? 'true' : 'false';\n };\n return PdfBoolean;\n}());\nexport { PdfBoolean };\n","/**\n * public Enum for `PdfLayoutType`.\n * @private\n */\nexport var PdfLayoutType;\n(function (PdfLayoutType) {\n /**\n * Specifies the type of `Paginate`.\n * @private\n */\n PdfLayoutType[PdfLayoutType[\"Paginate\"] = 0] = \"Paginate\";\n /**\n * Specifies the type of `OnePage`.\n * @private\n */\n PdfLayoutType[PdfLayoutType[\"OnePage\"] = 1] = \"OnePage\";\n})(PdfLayoutType || (PdfLayoutType = {}));\n/**\n * public Enum for `PdfLayoutBreakType`.\n * @private\n */\nexport var PdfLayoutBreakType;\n(function (PdfLayoutBreakType) {\n /**\n * Specifies the type of `FitPage`.\n * @private\n */\n PdfLayoutBreakType[PdfLayoutBreakType[\"FitPage\"] = 0] = \"FitPage\";\n /**\n * Specifies the type of `FitElement`.\n * @private\n */\n PdfLayoutBreakType[PdfLayoutBreakType[\"FitElement\"] = 1] = \"FitElement\";\n /**\n * Specifies the type of `FitColumnsToPage`.\n * @private\n */\n PdfLayoutBreakType[PdfLayoutBreakType[\"FitColumnsToPage\"] = 2] = \"FitColumnsToPage\";\n})(PdfLayoutBreakType || (PdfLayoutBreakType = {}));\n","/**\n * Used to perform `convertion between pixels and points`.\n * @private\n */\nvar PdfUnitConverter = /** @class */ (function () {\n //constructors\n /**\n * Initializes a new instance of the `UnitConvertor` class with DPI value.\n * @private\n */\n function PdfUnitConverter(dpi) {\n this.updateProportionsHelper(dpi);\n }\n /**\n * `Converts` the value, from one graphics unit to another graphics unit.\n * @private\n */\n PdfUnitConverter.prototype.convertUnits = function (value, from, to) {\n return this.convertFromPixels(this.convertToPixels(value, from), to);\n };\n /**\n * Converts the value `to pixel` from specified graphics unit.\n * @private\n */\n PdfUnitConverter.prototype.convertToPixels = function (value, from) {\n var index = from;\n var result = (value * this.proportions[index]);\n return result;\n };\n /**\n * Converts value, to specified graphics unit `from Pixel`.\n * @private\n */\n PdfUnitConverter.prototype.convertFromPixels = function (value, to) {\n var index = to;\n var result = (value / this.proportions[index]);\n return result;\n };\n /**\n * `Update proportions` matrix according to Graphics settings.\n * @private\n */\n PdfUnitConverter.prototype.updateProportionsHelper = function (pixelPerInch) {\n this.proportions = [\n pixelPerInch / 2.54,\n pixelPerInch / 6.0,\n 1,\n pixelPerInch / 72.0,\n pixelPerInch,\n pixelPerInch / 300.0,\n pixelPerInch / 25.4 // Millimeter\n ];\n };\n //Fields\n /**\n * Indicates default `horizontal resolution`.\n * @default 96\n * @private\n */\n PdfUnitConverter.horizontalResolution = 96;\n /**\n * Indicates default `vertical resolution`.\n * @default 96\n * @private\n */\n PdfUnitConverter.verticalResolution = 96;\n return PdfUnitConverter;\n}());\nexport { PdfUnitConverter };\n","import { SizeF } from './../../drawing/pdf-drawing';\nimport { PdfGraphicsUnit } from './../enum';\nimport { PdfUnitConverter } from './../unit-convertor';\n/**\n * `PdfImage` class represents the base class for images and provides functionality for the 'PdfBitmap' class.\n * @private\n */\nvar PdfImage = /** @class */ (function () {\n function PdfImage() {\n }\n Object.defineProperty(PdfImage.prototype, \"width\", {\n /**\n * Gets and Sets the `width` of an image.\n * @private\n */\n get: function () {\n return this.imageWidth;\n },\n set: function (value) {\n this.imageWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfImage.prototype, \"height\", {\n /**\n * Gets and Sets the `height` of an image.\n * @private\n */\n get: function () {\n return this.imageHeight;\n },\n set: function (value) {\n this.imageHeight = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfImage.prototype, \"size\", {\n /**\n * Gets or sets the size of the image.\n * @private\n */\n set: function (value) {\n this.width = value.width;\n this.height = value.height;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfImage.prototype, \"physicalDimension\", {\n /**\n * Gets the `physical dimension` of an image.\n * @private\n */\n get: function () {\n this.imagePhysicalDimension = this.getPointSize(this.width, this.height, this.horizontalResolution, this.verticalResolution);\n return new SizeF(this.width, this.height);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfImage.prototype, \"element\", {\n // /**\n // * Gets the `image stream as string`.\n // * @private\n // */\n // public static fromString(string : string) : PdfImage {\n // let image : PdfImage = new PdfBitmap(string);\n // return image;\n // }\n /**\n * Gets the `element` image stream.\n * @private\n */\n get: function () {\n return this.imageStream;\n },\n enumerable: true,\n configurable: true\n });\n PdfImage.prototype.getPointSize = function (width, height, horizontalResolution, verticalResolution) {\n if (typeof horizontalResolution === 'undefined') {\n var dpiX = PdfUnitConverter.horizontalResolution;\n var dpiY = PdfUnitConverter.verticalResolution;\n var size = this.getPointSize(width, height, dpiX, dpiY);\n return size;\n }\n else {\n var ucX = new PdfUnitConverter(horizontalResolution);\n var ucY = new PdfUnitConverter(verticalResolution);\n var ptWidth = ucX.convertUnits(width, PdfGraphicsUnit.Pixel, PdfGraphicsUnit.Point);\n var ptHeight = ucY.convertUnits(height, PdfGraphicsUnit.Pixel, PdfGraphicsUnit.Point);\n var size = new SizeF(ptWidth, ptHeight);\n return size;\n }\n };\n return PdfImage;\n}());\nexport { PdfImage };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfBitmap.ts class for EJ2-PDF\n */\nimport { ImageDecoder } from './../../graphics/images/image-decoder';\nimport { ByteArray } from './../../graphics/images/byte-array';\nimport { DictionaryProperties } from './../../input-output/pdf-dictionary-properties';\nimport { PdfImage } from './pdf-image';\n/**\n * The 'PdfBitmap' contains methods and properties to handle the Bitmap images.\n * ```typescript\n * // create a new PDF document.\n * let document : PdfDocument = new PdfDocument();\n * // add a page to the document.\n * let page1 : PdfPage = document.pages.add();\n * // base64 string of an image\n * let imageString : string = '/9j/3+2w7em7HzY/KiijFw … 1OEYRUYrQ45yc5OUtz/9k=';\n * // load the image from the base64 string of original image.\n * let image : PdfBitmap = new PdfBitmap(imageString);\n * // draw the image\n * page1.graphics.drawImage(image, new RectangleF({x : 10, y : 10}, {width : 200, height : 200}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfBitmap = /** @class */ (function (_super) {\n __extends(PdfBitmap, _super);\n /**\n * Create an instance for `PdfBitmap` class.\n * @param encodedString Base64 string of an image.\n * ```typescript\n * // create a new PDF document.\n * let document : PdfDocument = new PdfDocument();\n * // add a page to the document.\n * let page1 : PdfPage = document.pages.add();\n * // base64 string of an image\n * let imageString : string = '/9j/3+2w7em7HzY/KiijFw … 1OEYRUYrQ45yc5OUtz/9k=';\n * //\n * // load the image from the base64 string of original image.\n * let image : PdfBitmap = new PdfBitmap(imageString);\n * //\n * // draw the image\n * page1.graphics.drawImage(image, new RectangleF({x : 10, y : 10}, {width : 200, height : 200}));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n function PdfBitmap(encodedString) {\n var _this = _super.call(this) || this;\n //Fields\n /**\n * Specifies the `status` of an image.\n * @default true.\n * @hidden\n * @private\n */\n _this.imageStatus = true;\n /**\n * Internal variable for accessing fields from `DictionryProperties` class.\n * @hidden\n * @private\n */\n _this.dictionaryProperties = new DictionaryProperties();\n _this.loadImage(encodedString);\n return _this;\n }\n /**\n * `Load image`.\n * @hidden\n * @private\n */\n PdfBitmap.prototype.loadImage = function (encodedString) {\n var task = this.initializeAsync(encodedString);\n };\n /**\n * `Initialize` image parameters.\n * @private\n */\n PdfBitmap.prototype.initializeAsync = function (encodedString) {\n var byteArray = new ByteArray(encodedString.length);\n byteArray.writeFromBase64String(encodedString);\n this.decoder = new ImageDecoder(byteArray);\n this.height = this.decoder.height;\n this.width = this.decoder.width;\n // FrameCount = BitmapImageDecoder.FrameCount;\n this.bitsPerComponent = this.decoder.bitsPerComponent;\n };\n /**\n * `Saves` the image into stream.\n * @private\n */\n PdfBitmap.prototype.save = function () {\n this.imageStatus = true;\n this.imageStream = this.decoder.getImageDictionary();\n };\n return PdfBitmap;\n}(PdfImage));\nexport { PdfBitmap };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfResources.ts class for EJ2-PDF\n */\nimport { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { TemporaryDictionary } from './../collections/object-object-pair/dictionary';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { PdfCrossTable } from './../input-output/pdf-cross-table';\nimport { PdfFont } from './fonts/pdf-font';\nimport { PdfTemplate } from './figures/pdf-template';\nimport { PdfBrush } from './brushes/pdf-brush';\nimport { PdfTransparency } from './pdf-transparency';\nimport { PdfBitmap } from './../graphics/images/pdf-bitmap';\nimport { PdfImage } from './../graphics/images/pdf-image';\n/**\n * `PdfResources` class used to set resource contents like font, image.\n * @private\n */\nvar PdfResources = /** @class */ (function (_super) {\n __extends(PdfResources, _super);\n function PdfResources(baseDictionary) {\n var _this = _super.call(this) || this;\n /**\n * Dictionary for the `properties names`.\n * @private\n */\n _this.properties = new PdfDictionary();\n if (baseDictionary instanceof PdfDictionary) {\n _this = _super.call(this, baseDictionary) || this;\n }\n return _this;\n }\n Object.defineProperty(PdfResources.prototype, \"names\", {\n //Properties\n /**\n * Gets the `font names`.\n * @private\n */\n get: function () {\n return this.getNames();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfResources.prototype, \"document\", {\n /**\n * Get or set the `page document`.\n * @private\n */\n get: function () {\n return this.pdfDocument;\n },\n set: function (value) {\n this.pdfDocument = value;\n },\n enumerable: true,\n configurable: true\n });\n //Public Methods\n /**\n * `Generates name` for the object and adds to the resource if the object is new.\n * @private\n */\n PdfResources.prototype.getName = function (obj) {\n var primitive = obj.element;\n var name = null;\n if (this.names.containsKey(primitive)) {\n name = this.names.getValue(primitive);\n }\n // Object is new.\n if (name == null) {\n var sName = this.generateName();\n name = new PdfName(sName);\n this.names.setValue(primitive, name);\n if (obj instanceof PdfFont) {\n this.add(obj, name);\n }\n else if (obj instanceof PdfTemplate) {\n this.add(obj, name);\n }\n else if (obj instanceof PdfTransparency) {\n this.add(obj, name);\n }\n else if (obj instanceof PdfImage || obj instanceof PdfBitmap) {\n this.add(obj, name);\n }\n }\n return name;\n };\n /**\n * Gets `resource names` to font dictionaries.\n * @private\n */\n PdfResources.prototype.getNames = function () {\n if (this.pdfNames == null) {\n this.pdfNames = new TemporaryDictionary();\n }\n var fonts = this.items.getValue(this.dictionaryProperties.font);\n if (fonts != null) {\n var reference = fonts;\n var dictionary = fonts;\n dictionary = PdfCrossTable.dereference(fonts);\n }\n return this.pdfNames;\n };\n /**\n * Add `RequireProcedureSet` into procset array.\n * @private\n */\n PdfResources.prototype.requireProcedureSet = function (procedureSetName) {\n if (procedureSetName == null) {\n throw new Error('ArgumentNullException:procedureSetName');\n }\n var procSets = this.items.getValue(this.dictionaryProperties.procset);\n if (procSets == null) {\n procSets = new PdfArray();\n this.items.setValue(this.dictionaryProperties.procset, procSets);\n }\n var name = new PdfName(procedureSetName);\n if (!procSets.contains(name)) {\n procSets.add(name);\n }\n };\n //Helper Methods\n /**\n * `Remove font` from array.\n * @private\n */\n PdfResources.prototype.removeFont = function (name) {\n var key = null;\n var keys = this.pdfNames.keys();\n for (var index = 0; index < this.pdfNames.size(); index++) {\n if (this.pdfNames.getValue(keys[index]) === new PdfName(name)) {\n key = keys[index];\n break;\n }\n }\n if (key != null) {\n this.pdfNames.remove(key);\n }\n };\n /**\n * Generates `Unique string name`.\n * @private\n */\n PdfResources.prototype.generateName = function () {\n var name = Guid.getNewGuidString();\n return name;\n };\n PdfResources.prototype.add = function (arg1, arg2) {\n if (arg1 instanceof PdfFont) {\n var dictionary = null;\n var fonts = this.items.getValue(this.dictionaryProperties.font);\n if (fonts != null) {\n var reference = fonts;\n dictionary = fonts;\n dictionary = fonts;\n }\n else {\n dictionary = new PdfDictionary();\n this.items.setValue(this.dictionaryProperties.font, dictionary);\n }\n dictionary.items.setValue(arg2.value, new PdfReferenceHolder(arg1.element));\n }\n else if (arg1 instanceof PdfTemplate) {\n var xobjects = void 0;\n xobjects = this.items.getValue(this.dictionaryProperties.xObject);\n // Create fonts dictionary.\n if (xobjects == null) {\n xobjects = new PdfDictionary();\n this.items.setValue(this.dictionaryProperties.xObject, xobjects);\n }\n xobjects.items.setValue(arg2.value, new PdfReferenceHolder(arg1.element));\n }\n else if (arg1 instanceof PdfBrush) {\n // let savable : IPdfPrimitive = (arg1 as IPdfWrapper).Element;\n // if (savable != null)\n // {\n // let pattern : PdfDictionary = this.Items.getValue(this.dictionaryProperties.pattern) as PdfDictionary;\n // // Create a new pattern dictionary.\n // if (pattern == null) {\n // pattern = new PdfDictionary();\n // this.Items.setValue(this.dictionaryProperties.pattern, pattern);\n // }\n // pattern.Items.setValue(name, new PdfReferenceHolder(savable));\n // }\n }\n else if (arg1 instanceof PdfTransparency) {\n var savable = arg1.element;\n var transDic = null;\n transDic = this.items.getValue(this.dictionaryProperties.extGState);\n // Create a new pattern dictionary.\n if (transDic == null) {\n transDic = new PdfDictionary();\n this.items.setValue(this.dictionaryProperties.extGState, transDic);\n }\n transDic.items.setValue(arg2.value, new PdfReferenceHolder(savable));\n }\n else {\n /* tslint:disable */\n var xobjects = this.Dictionary.items.getValue(this.dictionaryProperties.xObject);\n var parentXObjects = void 0;\n if (typeof this.pdfDocument !== 'undefined') {\n parentXObjects = this.pdfDocument.sections.element.items.getValue(this.dictionaryProperties.resources).items.getValue(this.dictionaryProperties.xObject);\n }\n var values = this.Dictionary.items.values();\n var hasSameImageStream = false;\n var oldReference = void 0;\n if (typeof this.pdfDocument !== 'undefined' && (typeof parentXObjects === undefined || parentXObjects == null)) {\n parentXObjects = new PdfDictionary();\n this.pdfDocument.sections.element.items.getValue(this.dictionaryProperties.resources).items.setValue(this.dictionaryProperties.xObject, parentXObjects);\n }\n else if (typeof this.pdfDocument !== 'undefined') {\n var values_1 = parentXObjects.items.values();\n for (var i = 0; i < values_1.length; i++) {\n if (typeof values_1[i] !== 'undefined' && typeof values_1[i].element !== 'undefined') {\n if (values_1[i].element.data[0] === arg1.element.data[0]) {\n oldReference = values_1[i];\n hasSameImageStream = true;\n }\n }\n }\n }\n if (xobjects == null) {\n xobjects = new PdfDictionary();\n this.Dictionary.items.setValue(this.dictionaryProperties.xObject, xobjects);\n }\n if (hasSameImageStream && typeof oldReference !== 'undefined') {\n xobjects.items.setValue(arg2.value, oldReference);\n }\n else {\n var reference = new PdfReferenceHolder(arg1.element);\n xobjects.items.setValue(arg2.value, reference);\n if (typeof this.pdfDocument !== 'undefined') {\n parentXObjects.items.setValue(arg2.value, reference);\n }\n }\n /* tslint:enable */\n }\n };\n return PdfResources;\n}(PdfDictionary));\nexport { PdfResources };\n/**\n * Used to create new guid for resources.\n * @private\n */\nvar Guid = /** @class */ (function () {\n /**\n * Initialize an `instance of GUID` class.\n * @private\n */\n function Guid(stringValue) {\n this.stringValue = stringValue || Guid.getNewGuidString();\n }\n Object.defineProperty(Guid, \"randomNumber\", {\n /**\n * Generate `Random number` for GUID.\n * @private\n */\n get: function () {\n Guid.guid = Guid.guid + 1;\n Guid.guid = Guid.guid > 999999999999 ? 0 : Guid.guid;\n return Guid.guid;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Return the value of `GUID as string`.\n * @private\n */\n Guid.prototype.toString = function () {\n return this.stringValue;\n };\n /**\n * Generate `new GUID`.\n * @private\n */\n Guid.getNewGuidString = function () {\n var guid = 'abc7def4-ghi9-jkl2-m6n3-';\n var temproaryString = 'opqrstuvwxyz';\n var randomString = Guid.randomNumber.toString();\n randomString = guid + temproaryString.substr(0, (12 - randomString.length)) + randomString;\n return randomString;\n };\n /**\n * static field to store `endding value of current GUID`.\n * @private\n */\n Guid.guid = 0;\n return Guid;\n}());\nexport { Guid };\n","import { PdfArray } from './../primitives/pdf-array';\nimport { PdfPageLayerCollection } from './pdf-page-layer-collection';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { PdfResources } from './../graphics/pdf-resources';\n/**\n * The abstract base class for all pages,\n * `PdfPageBase` class provides methods and properties to create PDF pages and its elements.\n * @private\n */\nvar PdfPageBase = /** @class */ (function () {\n //constructors\n /**\n * Initializes a new instance of the `PdfPageBase` class.\n * @private\n */\n function PdfPageBase(dictionary) {\n /**\n * `Index` of the default layer.\n * @default -1.\n * @private\n */\n this.defLayerIndex = -1;\n /**\n * Local variable to store if page `updated`.\n * @default false.\n * @private\n */\n this.modified = false;\n /**\n * Instance of `DictionaryProperties` class.\n * @hidden\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n this.pageDictionary = dictionary;\n }\n Object.defineProperty(PdfPageBase.prototype, \"section\", {\n //Properties\n /**\n * Gets the `section` of a page.\n * @private\n */\n get: function () {\n // if (this.pdfSection === null) {\n // throw new Error('PdfException : Page must be added to some section before using.');\n // }\n return this.pdfSection;\n },\n set: function (value) {\n this.pdfSection = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageBase.prototype, \"dictionary\", {\n /**\n * Gets the page `dictionary`.\n * @private\n */\n get: function () {\n return this.pageDictionary;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageBase.prototype, \"element\", {\n /**\n * Gets the wrapped `element`.\n * @private\n */\n get: function () {\n return this.pageDictionary;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageBase.prototype, \"defaultLayer\", {\n /**\n * Gets the `default layer` of the page (Read only).\n * @private\n */\n get: function () {\n var layer = this.layers;\n var index = this.defaultLayerIndex;\n var returnlayer = layer.items(index);\n return returnlayer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageBase.prototype, \"defaultLayerIndex\", {\n /**\n * Gets or sets `index of the default layer`.\n * @private\n */\n get: function () {\n if (this.layerCollection.count === 0 || this.defLayerIndex === -1) {\n var layer = this.layerCollection.add();\n this.defLayerIndex = this.layerCollection.indexOf(layer);\n }\n return this.defLayerIndex;\n },\n /**\n * Gets or sets` index of the default layer`.\n * @private\n */\n set: function (value) {\n if (value < 0 || value > this.layers.count - 1) {\n throw new Error('ArgumentOutOfRangeException : value, Index can not be less 0 and greater Layers.Count - 1');\n }\n else {\n this.defLayerIndex = value;\n this.modified = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageBase.prototype, \"layers\", {\n /**\n * Gets the collection of the page's `layers` (Read only).\n * @private\n */\n get: function () {\n if (this.layerCollection == null || typeof this.layerCollection === 'undefined') {\n this.layerCollection = new PdfPageLayerCollection(this);\n }\n return this.layerCollection;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Return an instance of `PdfResources` class.\n * @private\n */\n PdfPageBase.prototype.getResources = function () {\n if (this.resources == null) {\n this.resources = new PdfResources();\n this.dictionary.items.setValue(this.dictionaryProperties.resources, this.resources);\n }\n return this.resources;\n };\n Object.defineProperty(PdfPageBase.prototype, \"contents\", {\n /**\n * Gets `array of page's content`.\n * @private\n */\n get: function () {\n var obj = this.pageDictionary.items.getValue(this.dictionaryProperties.contents);\n var contents = obj;\n var rh = obj;\n if (contents == null) {\n contents = new PdfArray();\n this.pageDictionary.items.setValue(this.dictionaryProperties.contents, contents);\n }\n return contents;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Sets the `resources`.\n * @private\n */\n PdfPageBase.prototype.setResources = function (res) {\n this.resources = res;\n this.dictionary.items.setValue(this.dictionaryProperties.resources, this.resources);\n this.modified = true;\n };\n return PdfPageBase;\n}());\nexport { PdfPageBase };\n","import { PdfArray } from './../primitives/pdf-array';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { SizeF, RectangleF, PointF } from './../drawing/pdf-drawing';\nimport { PdfStringLayouter } from './../graphics/fonts/string-layouter';\nimport { PdfColorSpace } from './../graphics/enum';\n/**\n * `PdfAnnotationCollection` class represents the collection of 'PdfAnnotation' objects.\n * @private\n */\nvar PdfAnnotationCollection = /** @class */ (function () {\n function PdfAnnotationCollection(page) {\n // Constants\n /**\n * `Error` constant message.\n * @private\n */\n this.alreadyExistsAnnotationError = 'This annotatation had been already added to page';\n /**\n * `Error` constant message.\n * @private\n */\n this.missingAnnotationException = 'Annotation is not contained in collection.';\n /**\n * Specifies the Internal variable to store fields of `PdfDictionaryProperties`.\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n /**\n * Array of the `annotations`.\n * @private\n */\n this.internalAnnotations = new PdfArray();\n /**\n * privte `list` for the annotations.\n * @private\n */\n this.lists = [];\n if (typeof page !== 'undefined') {\n this.page = page;\n }\n }\n Object.defineProperty(PdfAnnotationCollection.prototype, \"annotations\", {\n /**\n * Gets the `PdfAnnotation` object at the specified index. Read-Only.\n * @private\n */\n get: function () {\n return this.internalAnnotations;\n },\n set: function (value) {\n this.internalAnnotations = value;\n },\n enumerable: true,\n configurable: true\n });\n // Public methods\n /**\n * `Adds` a new annotation to the collection.\n * @private\n */\n PdfAnnotationCollection.prototype.add = function (annotation) {\n // this.SetPrint(annotation);\n this.doAdd(annotation);\n };\n /**\n * `Adds` a Annotation to collection.\n * @private\n */\n /* tslint:disable */\n PdfAnnotationCollection.prototype.doAdd = function (annotation) {\n if (typeof annotation.destination !== 'undefined') {\n var layout = new PdfStringLayouter();\n var layoutResult = layout.layout(annotation.text, annotation.font, annotation.stringFormat, new SizeF((annotation.bounds.width), 0), false, new SizeF(0, 0));\n var lastPosition = annotation.bounds.y;\n if (layoutResult.lines.length === 1) {\n var size = annotation.font.measureString(layoutResult.lines[0].text);\n annotation.bounds = new RectangleF(new PointF(annotation.bounds.x, lastPosition), size);\n annotation.text = layoutResult.lines[0].text;\n //Draw Annotation Text.\n this.page.graphics.drawString(annotation.text, annotation.font, null, annotation.brush, annotation.bounds.x, annotation.bounds.y, annotation.bounds.width, annotation.bounds.height, null);\n //Add annotation to dictionary.\n annotation.setPage(this.page);\n this.setColor(annotation);\n this.internalAnnotations.add(new PdfReferenceHolder(annotation));\n this.lists.push(annotation);\n }\n else {\n for (var i = 0; i < layoutResult.lines.length; i++) {\n var size = annotation.font.measureString(layoutResult.lines[i].text);\n if (i === 0) {\n annotation.bounds = new RectangleF(annotation.bounds.x, lastPosition, size.width, size.height);\n annotation.text = layoutResult.lines[i].text;\n //Draw Annotation Text.\n this.page.graphics.drawString(annotation.text, annotation.font, null, annotation.brush, annotation.bounds.x, lastPosition, size.width, size.height, null);\n //Add annotation to dictionary.\n annotation.setPage(this.page);\n this.setColor(annotation);\n this.internalAnnotations.add(new PdfReferenceHolder(annotation));\n this.lists.push(annotation);\n //Update y for drawing next line of the text.\n lastPosition += annotation.bounds.height;\n }\n else {\n var annot = annotation.clone();\n annot.bounds = new RectangleF(new PointF(annotation.bounds.x, lastPosition), size);\n annot.text = layoutResult.lines[i].text;\n //Draw Annotation Text.\n this.page.graphics.drawString(annot.text, annot.font, null, annot.brush, annot.bounds.x, annot.bounds.y, annot.bounds.width, annot.bounds.height, null);\n //Add annotation to dictionary.\n annot.setPage(this.page);\n this.setColor(annot);\n this.internalAnnotations.add(new PdfReferenceHolder(annot));\n this.lists.push(annot);\n //Update y for drawing next line of the text.\n lastPosition += annot.bounds.height;\n }\n }\n }\n }\n else {\n annotation.setPage(this.page);\n this.internalAnnotations.add(new PdfReferenceHolder(annotation));\n return this.lists.push(annotation);\n }\n };\n /* tslint:enable */\n /**\n * `Set a color of an annotation`.\n * @private\n */\n PdfAnnotationCollection.prototype.setColor = function (annotation) {\n var cs = PdfColorSpace.Rgb;\n var colours = annotation.color.toArray(cs);\n annotation.dictionary.items.setValue(this.dictionaryProperties.c, colours);\n };\n Object.defineProperty(PdfAnnotationCollection.prototype, \"element\", {\n // IPdfWrapper Members\n /**\n * Gets the `Element` representing this object.\n * @private\n */\n get: function () {\n return this.internalAnnotations;\n },\n enumerable: true,\n configurable: true\n });\n return PdfAnnotationCollection;\n}());\nexport { PdfAnnotationCollection };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfPageBase } from './pdf-page-base';\nimport { PdfDictionary, SaveTemplateEventHandler } from './../primitives/pdf-dictionary';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { SizeF } from './../drawing/pdf-drawing';\nimport { PdfAnnotationCollection } from './../annotations/annotation-collection';\nimport { PdfPageLayer } from './pdf-page-layer';\n/**\n * Provides methods and properties to create pages and its elements.\n * `PdfPage` class inherited from the `PdfPageBase` class.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * //\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * //\n * // set the font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfPage = /** @class */ (function (_super) {\n __extends(PdfPage, _super);\n //constructors\n /**\n * Initialize the new instance for `PdfPage` class.\n * @private\n */\n function PdfPage() {\n var _this = _super.call(this, new PdfDictionary()) || this;\n /**\n * Stores the instance of `PdfAnnotationCollection` class.\n * @hidden\n * @default null\n * @private\n */\n _this.annotationCollection = null;\n /**\n * Stores the instance of `PageBeginSave` event for Page Number Field.\n * @default null\n * @private\n */\n _this.beginSave = null;\n _this.initialize();\n return _this;\n }\n Object.defineProperty(PdfPage.prototype, \"document\", {\n //Properties\n /**\n * Gets current `document`.\n * @private\n */\n get: function () {\n if (this.section !== null && this.section.parent !== null) {\n return this.section.parent.document;\n }\n else {\n return null;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPage.prototype, \"graphics\", {\n /**\n * Get the current `graphics`.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * //\n * // get graphics\n * let graphics : PdfGraphics = page1.graphics;\n * //\n * // set the font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n var result = this.defaultLayer.graphics;\n result.currentPage = this;\n return result;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPage.prototype, \"crossTable\", {\n /**\n * Gets the `cross table`.\n * @private\n */\n get: function () {\n if (this.section === null) {\n throw new Error('PdfDocumentException : Page is not created');\n }\n return this.section.parent === null ? this.section.parentDocument.crossTable : this.section.parent.document.crossTable;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPage.prototype, \"size\", {\n /**\n * Gets the size of the PDF page- Read only.\n * @public\n */\n get: function () {\n return this.section.pageSettings.size;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPage.prototype, \"origin\", {\n /**\n * Gets the `origin` of the page.\n * @private\n */\n get: function () {\n return this.section.pageSettings.origin;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPage.prototype, \"annotations\", {\n /**\n * Gets a collection of the `annotations` of the page- Read only.\n * @private\n */\n get: function () {\n if (this.annotationCollection == null) {\n this.annotationCollection = new PdfAnnotationCollection(this);\n // if (!this.Dictionary.ContainsKey(this.dictionaryProperties.annots)) {\n this.dictionary.items.setValue(this.dictionaryProperties.annots, this.annotationCollection.element);\n // }\n this.annotationCollection.annotations = this.dictionary.items.getValue(this.dictionaryProperties.annots);\n }\n return this.annotationCollection;\n },\n enumerable: true,\n configurable: true\n });\n //Implementation\n /**\n * `Initializes` a page.\n * @private\n */\n PdfPage.prototype.initialize = function () {\n this.dictionary.items.setValue(this.dictionaryProperties.type, new PdfName('Page'));\n this.dictionary.pageBeginDrawTemplate = new SaveTemplateEventHandler(this);\n };\n /**\n * Sets parent `section` to the page.\n * @private\n */\n PdfPage.prototype.setSection = function (section) {\n this.section = section;\n this.dictionary.items.setValue(this.dictionaryProperties.parent, new PdfReferenceHolder(section));\n };\n /**\n * `Resets the progress`.\n * @private\n */\n PdfPage.prototype.resetProgress = function () {\n this.isProgressOn = false;\n };\n /**\n * Get the page size reduced by page margins and page template dimensions.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // create new standard font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * //\n * // set the specified point using `getClientSize` method\n * let point : PointF = new PointF(page1.getClientSize().width - 200, page1.getClientSize().height - 200);\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, point);\n * //\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n PdfPage.prototype.getClientSize = function () {\n var returnValue = this.section.getActualBounds(this, true);\n return new SizeF(returnValue.width, returnValue.height);\n };\n /**\n * Helper method to retrive the instance of `PageBeginSave` event for header and footer elements.\n * @private\n */\n PdfPage.prototype.pageBeginSave = function () {\n var doc = this.document;\n if (typeof doc !== undefined && doc != null) {\n this.drawPageTemplates(doc);\n }\n if (this.beginSave != null && typeof this.beginSave !== 'undefined') {\n this.beginSave(this);\n }\n };\n /**\n * Helper method to draw template elements.\n * @private\n */\n PdfPage.prototype.drawPageTemplates = function (document) {\n // Draw Background templates.\n var hasBackTemplates = this.section.containsTemplates(document, this, false);\n if (hasBackTemplates) {\n var backLayer = new PdfPageLayer(this, false);\n this.layers.insert(0, backLayer);\n this.section.drawTemplates(this, backLayer, document, false);\n if (backLayer.graphics !== null && typeof backLayer.graphics !== 'undefined') {\n for (var i = 0; i < backLayer.graphics.automaticFields.automaticFields.length; i++) {\n var fieldInfo = backLayer.graphics.automaticFields.automaticFields[i];\n fieldInfo.field.performDraw(backLayer.graphics, fieldInfo.location, fieldInfo.scalingX, fieldInfo.scalingY);\n }\n }\n }\n // Draw Foreground templates.\n var hasFrontTemplates = this.section.containsTemplates(document, this, true);\n if (hasFrontTemplates) {\n var frontLayer = new PdfPageLayer(this, false);\n this.layers.add(frontLayer);\n this.section.drawTemplates(this, frontLayer, document, true);\n }\n };\n return PdfPage;\n}(PdfPageBase));\nexport { PdfPage };\n","/**\n * Provides data for `PageAddedEventHandler` event.\n * This event raises when adding the new PDF page to the PDF document.\n */\nvar PageAddedEventArgs = /** @class */ (function () {\n function PageAddedEventArgs(page) {\n if (typeof page !== 'undefined') {\n this.pdfPage = page;\n }\n else {\n this.pdfPage = null;\n }\n }\n Object.defineProperty(PageAddedEventArgs.prototype, \"page\", {\n /**\n * Gets the `newly added page`.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n enumerable: true,\n configurable: true\n });\n return PageAddedEventArgs;\n}());\nexport { PageAddedEventArgs };\n","/**\n * Represents the `collection of pages in a section`.\n * @private\n */\nvar PdfSectionPageCollection = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `PdfSectionPageCollection` class.\n * @private\n */\n function PdfSectionPageCollection(section) {\n // Fields\n /**\n * @hidden\n * @private\n */\n this.pdfSection = null;\n if (section == null) {\n throw Error('ArgumentNullException(\"section\")');\n }\n this.section = section;\n }\n Object.defineProperty(PdfSectionPageCollection.prototype, \"section\", {\n // Properties\n /**\n * Gets the `PdfPage` at the specified index.\n * @private\n */\n get: function () {\n return this.pdfSection;\n },\n set: function (value) {\n this.pdfSection = value;\n },\n enumerable: true,\n configurable: true\n });\n // Public Methods\n /**\n * `Determines` whether the specified page is within the collection.\n * @private\n */\n PdfSectionPageCollection.prototype.contains = function (page) {\n return this.section.contains(page);\n };\n /**\n * `Removes` the specified page from collection.\n * @private\n */\n PdfSectionPageCollection.prototype.remove = function (page) {\n this.section.remove(page);\n };\n /**\n * `Adds` a new page from collection.\n * @private\n */\n PdfSectionPageCollection.prototype.add = function () {\n return this.section.add();\n };\n return PdfSectionPageCollection;\n}());\nexport { PdfSectionPageCollection };\n","import { TemplateType } from './../pages/enum';\n// import { PdfStampCollection } from `./../Pages/PdfStampCollection`;\n/**\n * `PdfDocumentTemplate` class encapsulates a page template for all the pages in the document.\n * @private\n */\nvar PdfDocumentTemplate = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `PdfDocumentTemplate` class.\n * @public\n */\n function PdfDocumentTemplate() {\n //\n }\n Object.defineProperty(PdfDocumentTemplate.prototype, \"left\", {\n // private m_stamps : PdfStampCollection;\n // Properties\n /**\n * `Left` page template object.\n * @public\n */\n get: function () {\n return this.leftTemplate;\n },\n set: function (value) {\n this.leftTemplate = this.checkElement(value, TemplateType.Left);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"top\", {\n /**\n * `Top` page template object.\n * @public\n */\n get: function () {\n return this.topTemplate;\n },\n set: function (value) {\n this.topTemplate = this.checkElement(value, TemplateType.Top);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"right\", {\n /**\n * `Right` page template object.\n * @public\n */\n get: function () {\n return this.rightTemplate;\n },\n set: function (value) {\n this.rightTemplate = this.checkElement(value, TemplateType.Right);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"bottom\", {\n /**\n * `Bottom` page template object.\n * @public\n */\n get: function () {\n return this.bottomTemplate;\n },\n set: function (value) {\n this.bottomTemplate = this.checkElement(value, TemplateType.Bottom);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"EvenLeft\", {\n /**\n * `EvenLeft` page template object.\n * @public\n */\n get: function () {\n return this.evenLeft;\n },\n set: function (value) {\n this.evenLeft = this.checkElement(value, TemplateType.Left);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"EvenTop\", {\n /**\n * `EvenTop` page template object.\n * @public\n */\n get: function () {\n return this.evenTop;\n },\n set: function (value) {\n this.evenTop = this.checkElement(value, TemplateType.Top);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"EvenRight\", {\n /**\n * `EvenRight` page template object.\n * @public\n */\n get: function () {\n return this.evenRight;\n },\n set: function (value) {\n this.evenRight = this.checkElement(value, TemplateType.Right);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"EvenBottom\", {\n /**\n * `EvenBottom` page template object.\n * @public\n */\n get: function () {\n return this.evenBottom;\n },\n set: function (value) {\n this.evenBottom = this.checkElement(value, TemplateType.Bottom);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"OddLeft\", {\n /**\n * `OddLeft` page template object.\n * @public\n */\n get: function () {\n return this.oddLeft;\n },\n set: function (value) {\n this.oddLeft = this.checkElement(value, TemplateType.Left);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"OddTop\", {\n /**\n * `OddTop` page template object.\n * @public\n */\n get: function () {\n return this.oddTop;\n },\n set: function (value) {\n this.oddTop = this.checkElement(value, TemplateType.Top);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"OddRight\", {\n /**\n * `OddRight` page template object.\n * @public\n */\n get: function () {\n return this.oddRight;\n },\n set: function (value) {\n this.oddRight = this.checkElement(value, TemplateType.Right);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentTemplate.prototype, \"OddBottom\", {\n /**\n * `OddBottom` page template object.\n * @public\n */\n get: function () {\n return this.oddBottom;\n },\n set: function (value) {\n this.oddBottom = this.checkElement(value, TemplateType.Bottom);\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * Returns `left` template.\n * @public\n */\n PdfDocumentTemplate.prototype.getLeft = function (page) {\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var template = null;\n // if (page.Document.Pages != null) {\n var even = this.isEven(page);\n if (even) {\n template = (this.EvenLeft != null) ? this.EvenLeft : this.left;\n }\n else {\n template = (this.OddLeft != null) ? this.OddLeft : this.left;\n }\n // }\n return template;\n };\n /**\n * Returns `top` template.\n * @public\n */\n PdfDocumentTemplate.prototype.getTop = function (page) {\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var template = null;\n // if (page.Document.Pages != null) {\n var even = this.isEven(page);\n if (even) {\n template = (this.EvenTop != null) ? this.EvenTop : this.top;\n }\n else {\n template = (this.OddTop != null) ? this.OddTop : this.top;\n }\n // }\n return template;\n };\n /**\n * Returns `right` template.\n * @public\n */\n PdfDocumentTemplate.prototype.getRight = function (page) {\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var template = null;\n // if (page.Document.Pages != null) {\n var even = this.isEven(page);\n if (even) {\n template = (this.EvenRight != null) ? this.EvenRight : this.right;\n }\n else {\n template = (this.OddRight != null) ? this.OddRight : this.right;\n }\n // }\n return template;\n };\n /**\n * Returns `bottom` template.\n * @public\n */\n PdfDocumentTemplate.prototype.getBottom = function (page) {\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var template = null;\n // if (page.Document.Pages != null) {\n var even = this.isEven(page);\n if (even) {\n template = (this.EvenBottom != null) ? this.EvenBottom : this.bottom;\n }\n else {\n template = (this.OddBottom != null) ? this.OddBottom : this.bottom;\n }\n // }\n return template;\n };\n /**\n * Checks whether the page `is even`.\n * @private\n */\n PdfDocumentTemplate.prototype.isEven = function (page) {\n var pages = page.section.document.pages;\n var index = 0;\n if (pages.pageCollectionIndex.containsKey(page)) {\n index = pages.pageCollectionIndex.getValue(page) + 1;\n }\n else {\n index = pages.indexOf(page) + 1;\n }\n var even = ((index % 2) === 0);\n return even;\n };\n /**\n * Checks a `template element`.\n * @private\n */\n PdfDocumentTemplate.prototype.checkElement = function (templateElement, type) {\n if (templateElement != null) {\n if ((typeof templateElement.type !== 'undefined') && (templateElement.type !== TemplateType.None)) {\n throw new Error('NotSupportedException:Can not reassign the template element. Please, create new one.');\n }\n templateElement.type = type;\n }\n return templateElement;\n };\n return PdfDocumentTemplate;\n}());\nexport { PdfDocumentTemplate };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfSectionTemplate.ts class for EJ2-PDF\n */\nimport { PdfDocumentTemplate } from './../document/pdf-document-template';\n/**\n * Represents a `page template` for all the pages in the section.\n */\nvar PdfSectionTemplate = /** @class */ (function (_super) {\n __extends(PdfSectionTemplate, _super);\n // Constructors\n /**\n * `Creates a new object`.\n * @private\n */\n function PdfSectionTemplate() {\n var _this = _super.call(this) || this;\n _this.leftValue = _this.topValue = _this.rightValue = _this.bottomValue = _this.stampValue = true;\n return _this;\n }\n Object.defineProperty(PdfSectionTemplate.prototype, \"applyDocumentLeftTemplate\", {\n // Properties\n /**\n * Gets or sets value indicating whether parent `Left page template should be used or not`.\n * @private\n */\n get: function () {\n return this.leftValue;\n },\n set: function (value) {\n this.leftValue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionTemplate.prototype, \"applyDocumentTopTemplate\", {\n /**\n * Gets or sets value indicating whether parent `Top page template should be used or not`.\n * @private\n */\n get: function () {\n return this.topValue;\n },\n set: function (value) {\n this.topValue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionTemplate.prototype, \"applyDocumentRightTemplate\", {\n /**\n * Gets or sets value indicating whether parent `Right page template should be used or not`.\n * @private\n */\n get: function () {\n return this.rightValue;\n },\n set: function (value) {\n this.rightValue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionTemplate.prototype, \"applyDocumentBottomTemplate\", {\n /**\n * Gets or sets value indicating whether parent `Bottom page template should be used or not`.\n * @private\n */\n get: function () {\n return this.bottomValue;\n },\n set: function (value) {\n this.bottomValue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionTemplate.prototype, \"applyDocumentStamps\", {\n /**\n * Gets or sets value indicating whether the `stamp value` is true or not.\n * @private\n */\n get: function () {\n return this.stampValue;\n },\n set: function (value) {\n this.stampValue = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfSectionTemplate;\n}(PdfDocumentTemplate));\nexport { PdfSectionTemplate };\n","import { PdfPage } from './pdf-page';\nimport { PageAddedEventArgs } from './page-added-event-arguments';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfDictionary } from './../primitives/pdf-dictionary';\nimport { SaveSectionEventHandler } from './../primitives/pdf-dictionary';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { PdfSectionCollection } from './pdf-section-collection';\nimport { PdfSectionPageCollection } from './pdf-section-page-collection';\nimport { RectangleF } from './../drawing/pdf-drawing';\nimport { PdfSectionTemplate } from './pdf-section-templates';\n/**\n * Represents a `section` entity. A section it's a set of the pages with similar page settings.\n */\nvar PdfSection = /** @class */ (function () {\n function PdfSection(document, pageSettings) {\n //Fields\n //public PageAdded() : PageAddedEventArgs.PageAddedEventHandler = new PageAddedEventArgs.PageAddedEventHandler(Object,args)\n /**\n * @hidden\n * @private\n */\n this.pageAdded = new PageAddedEventArgs();\n /**\n * @hidden\n * @private\n */\n this.pdfPages = [];\n /**\n * @hidden\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n if (typeof pageSettings === 'undefined') {\n this.constructor(document, document.pageSettings);\n }\n else {\n this.pdfDocument = document;\n this.settings = pageSettings.clone();\n this.initialSettings = this.settings.clone();\n this.initialize();\n }\n }\n Object.defineProperty(PdfSection.prototype, \"parent\", {\n //Property\n /**\n * Gets or sets the `parent`.\n * @private\n */\n get: function () {\n return this.sectionCollection;\n },\n set: function (value) {\n this.sectionCollection = value;\n this.section.items.setValue(this.dictionaryProperties.parent, new PdfReferenceHolder(value));\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"parentDocument\", {\n /**\n * Gets the `parent document`.\n * @private\n */\n get: function () {\n return this.pdfDocument;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"pageSettings\", {\n /**\n * Gets or sets the `page settings` of the section.\n * @private\n */\n get: function () {\n return this.settings;\n },\n set: function (value) {\n if (value != null) {\n this.settings = value;\n }\n else {\n throw Error('Value can not be null.');\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"element\", {\n /**\n * Gets the wrapped `element`.\n * @private\n */\n get: function () {\n return this.section;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"count\", {\n /**\n * Gets the `count` of the pages in the section.\n * @private\n */\n get: function () {\n return this.pagesReferences.count;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"template\", {\n /**\n * Gets or sets a `template` for the pages in the section.\n * @private\n */\n get: function () {\n if (this.pageTemplate == null) {\n this.pageTemplate = new PdfSectionTemplate();\n }\n return this.pageTemplate;\n },\n set: function (value) {\n this.pageTemplate = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"document\", {\n /**\n * Gets the `document`.\n * @private\n */\n get: function () {\n return this.sectionCollection.document;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSection.prototype, \"pages\", {\n /**\n * Gets the collection of `pages` in a section (Read only)\n * @private\n */\n get: function () {\n if (this.pagesCollection == null || typeof this.pagesCollection === 'undefined') {\n this.pagesCollection = new PdfSectionPageCollection(this);\n }\n return this.pagesCollection;\n },\n enumerable: true,\n configurable: true\n });\n //methods\n /**\n * `Return the page collection` of current section.\n * @private\n */\n PdfSection.prototype.getPages = function () {\n return this.pdfPages;\n };\n /**\n * `Translates` point into native coordinates of the page.\n * @private\n */\n PdfSection.prototype.pointToNativePdf = function (page, point) {\n var bounds = this.getActualBounds(page, true);\n point.x += bounds.x;\n point.y = this.pageSettings.height - (point.y);\n return point;\n };\n /**\n * Sets the page setting of the current section.\n * @public\n * @param settings Instance of `PdfPageSettings`\n */\n PdfSection.prototype.setPageSettings = function (settings) {\n this.settings = settings;\n this.state.orientation = settings.orientation;\n this.state.rotate = settings.rotate;\n this.state.size = settings.size;\n this.state.origin = settings.origin;\n };\n /**\n * `Initializes` the object.\n * @private\n */\n PdfSection.prototype.initialize = function () {\n this.pagesReferences = new PdfArray();\n this.section = new PdfDictionary();\n this.state = new PageSettingsState(this.pdfDocument);\n this.section.sectionBeginSave = new SaveSectionEventHandler(this, this.state);\n this.pageCount = new PdfNumber(0);\n this.section.items.setValue(this.dictionaryProperties.count, this.pageCount);\n this.section.items.setValue(this.dictionaryProperties.type, new PdfName(this.dictionaryProperties.pages));\n this.section.items.setValue(this.dictionaryProperties.kids, this.pagesReferences);\n };\n /**\n * Checks whether any template should be printed on this layer.\n * @private\n * @param document The parent document.\n * @param page The parent page.\n * @param foreground Layer z-order.\n * @returns True - if some content should be printed on the layer, False otherwise.\n */\n PdfSection.prototype.containsTemplates = function (document, page, foreground) {\n var documentHeaders = this.getDocumentTemplates(document, page, true, foreground);\n var documentTemplates = this.getDocumentTemplates(document, page, false, foreground);\n var contains = (documentHeaders.length > 0 || documentTemplates.length > 0);\n return contains;\n };\n /**\n * Returns array of the document templates.\n * @private\n * @param document The parent document.\n * @param page The parent page.\n * @param headers If true - return headers/footers, if false - return simple templates.\n * @param foreground If true - return foreground templates, if false - return background templates.\n * @returns Returns array of the document templates.\n */\n /* tslint:disable */\n PdfSection.prototype.getDocumentTemplates = function (document, page, headers, foreground) {\n var templates = [];\n if (headers) {\n if (this.template.applyDocumentTopTemplate && document.template.getTop(page) != null) {\n if ((!(document.template.getTop(page).foreground || foreground)) || (document.template.getTop(page).foreground && foreground)) {\n templates.push(document.template.getTop(page));\n }\n }\n if (this.template.applyDocumentBottomTemplate && document.template.getBottom(page) != null) {\n if ((!(document.template.getBottom(page).foreground || foreground)) || (document.template.getBottom(page).foreground && foreground)) {\n templates.push(document.template.getBottom(page));\n }\n }\n if (this.template.applyDocumentLeftTemplate && document.template.getLeft(page) != null) {\n if ((!(document.template.getLeft(page).foreground || foreground)) || (document.template.getLeft(page).foreground && foreground)) {\n templates.push(document.template.getLeft(page));\n }\n }\n if (this.template.applyDocumentRightTemplate && document.template.getRight(page) != null) {\n if ((!(document.template.getRight(page).foreground || foreground)) || (document.template.getRight(page).foreground && foreground)) {\n templates.push(document.template.getRight(page));\n }\n }\n }\n return templates;\n };\n /* tslint:enable */\n /**\n * `Adds` the specified page.\n * @private\n */\n PdfSection.prototype.add = function (page) {\n if (typeof page === 'undefined') {\n var page_1 = new PdfPage();\n this.add(page_1);\n return page_1;\n }\n else {\n var r = this.checkPresence(page);\n this.pdfPages.push(page);\n this.pagesReferences.add(r);\n page.setSection(this);\n page.resetProgress();\n this.pageAddedMethod(page);\n }\n };\n /**\n * `Checks the presence`.\n * @private\n */\n PdfSection.prototype.checkPresence = function (page) {\n var rh = new PdfReferenceHolder(page);\n var contains = false;\n var sc = this.parent;\n for (var index = 0; index < sc.section.length; index++) {\n var section = sc.section[index];\n contains = contains || section.contains(page);\n }\n return rh;\n };\n /**\n * `Determines` whether the page in within the section.\n * @private\n */\n PdfSection.prototype.contains = function (page) {\n var index = this.indexOf(page);\n return (0 <= index);\n };\n /**\n * Get the `index of` the page.\n * @private\n */\n PdfSection.prototype.indexOf = function (page) {\n for (var index = 0; index < this.pdfPages.length; index++) {\n if (this.pdfPages[index] === page) {\n return this.pdfPages.indexOf(page);\n }\n }\n var r = new PdfReferenceHolder(page);\n return this.pagesReferences.indexOf(r);\n };\n /**\n * Call two event's methods.\n * @hidden\n * @private\n */\n PdfSection.prototype.pageAddedMethod = function (page) {\n //Create event's arguments\n var args = new PageAddedEventArgs(page);\n this.onPageAdded(args);\n var parent = this.parent;\n parent.document.pages.onPageAdded(args);\n this.pageCount.intValue = this.count;\n };\n /**\n * Called when the page has been added.\n * @hidden\n * @private\n */\n PdfSection.prototype.onPageAdded = function (args) {\n //\n };\n PdfSection.prototype.getActualBounds = function (arg1, arg2, arg3) {\n if (arg1 instanceof PdfPage && typeof arg2 === 'boolean') {\n var result = void 0;\n var document_1 = this.parent.document;\n result = this.getActualBounds(document_1, arg1, arg2);\n return result;\n }\n else {\n arg1 = arg1;\n arg2 = arg2;\n arg3 = arg3;\n var bounds = new RectangleF(0, 0, 0, 0);\n bounds.height = (arg3) ? this.pageSettings.size.height : this.pageSettings.getActualSize().height;\n bounds.width = (arg3) ? this.pageSettings.size.width : this.pageSettings.getActualSize().width;\n var left = this.getLeftIndentWidth(arg1, arg2, arg3);\n var top_1 = this.getTopIndentHeight(arg1, arg2, arg3);\n var right = this.getRightIndentWidth(arg1, arg2, arg3);\n var bottom = this.getBottomIndentHeight(arg1, arg2, arg3);\n bounds.x += left;\n bounds.y += top_1;\n bounds.width -= (left + right);\n bounds.height -= (top_1 + bottom);\n return bounds;\n }\n };\n /**\n * Calculates width of the `left indent`.\n * @private\n */\n PdfSection.prototype.getLeftIndentWidth = function (document, page, includeMargins) {\n if (document == null) {\n throw new Error('ArgumentNullException:document');\n }\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var value = (includeMargins) ? this.pageSettings.margins.left : 0;\n var templateWidth = (this.template.getLeft(page) != null) ? this.template.getLeft(page).width : 0;\n var docTemplateWidth = (document.template.getLeft(page) != null) ? document.template.getLeft(page).width : 0;\n value += (this.template.applyDocumentLeftTemplate) ? Math.max(templateWidth, docTemplateWidth) : templateWidth;\n return value;\n };\n /**\n * Calculates `Height` of the top indent.\n * @private\n */\n PdfSection.prototype.getTopIndentHeight = function (document, page, includeMargins) {\n if (document == null) {\n throw new Error('ArgumentNullException:document');\n }\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var value = (includeMargins) ? this.pageSettings.margins.top : 0;\n var templateHeight = (this.template.getTop(page) != null) ? this.template.getTop(page).height : 0;\n var docTemplateHeight = (document.template.getTop(page) != null) ? document.template.getTop(page).height : 0;\n value += (this.template.applyDocumentTopTemplate) ? Math.max(templateHeight, docTemplateHeight) : templateHeight;\n return value;\n };\n /**\n * Calculates `width` of the right indent.\n * @private\n */\n PdfSection.prototype.getRightIndentWidth = function (document, page, includeMargins) {\n if (document == null) {\n throw new Error('ArgumentNullException:document');\n }\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var value = (includeMargins) ? this.pageSettings.margins.right : 0;\n var templateWidth = (this.template.getRight(page) != null) ? this.template.getRight(page).width : 0;\n var docTemplateWidth = (document.template.getRight(page) != null) ? document.template.getRight(page).width : 0;\n value += (this.template.applyDocumentRightTemplate) ? Math.max(templateWidth, docTemplateWidth) : templateWidth;\n return value;\n };\n /**\n * Calculates `Height` of the bottom indent.\n * @private\n */\n PdfSection.prototype.getBottomIndentHeight = function (document, page, includeMargins) {\n if (document == null) {\n throw new Error('ArgumentNullException:document');\n }\n if (page == null) {\n throw new Error('ArgumentNullException:page');\n }\n var value = (includeMargins) ? this.pageSettings.margins.bottom : 0;\n var templateHeight = (this.template.getBottom(page) != null) ? this.template.getBottom(page).height : 0;\n var docTemplateHeight = (document.template.getBottom(page) != null) ? document.template.getBottom(page).height : 0;\n value += (this.template.applyDocumentBottomTemplate) ? Math.max(templateHeight, docTemplateHeight) : templateHeight;\n return value;\n };\n /**\n * `Removes` the page from the section.\n * @private\n */\n PdfSection.prototype.remove = function (page) {\n if (page == null) {\n throw Error('ArgumentNullException(\"page\")');\n }\n var index = this.pdfPages.indexOf(page);\n this.pagesReferences.removeAt(index);\n var temproaryPages = [];\n for (var j = 0; j < index; j++) {\n temproaryPages.push(this.pdfPages[j]);\n }\n for (var j = index + 1; j < this.pdfPages.length; j++) {\n temproaryPages.push(this.pdfPages[j]);\n }\n this.pdfPages = temproaryPages;\n };\n /**\n * In fills dictionary by the data from `Page settings`.\n * @private\n */\n PdfSection.prototype.applyPageSettings = function (container, parentSettings, state) {\n var bounds = new RectangleF(state.origin, state.size);\n container.items.setValue(this.dictionaryProperties.mediaBox, PdfArray.fromRectangle(bounds));\n var rotate = 0;\n rotate = PdfSectionCollection.rotateFactor * state.rotate;\n var angle = new PdfNumber(rotate);\n container.items.setValue(this.dictionaryProperties.rotate, angle);\n };\n /**\n * Catches the Save event of the dictionary.\n * @hidden\n * @private\n */\n PdfSection.prototype.beginSave = function (state, writer) {\n var doc = writer.document;\n this.applyPageSettings(this.section, doc.pageSettings, state);\n };\n /**\n * Draws page templates on the page.\n * @private\n */\n PdfSection.prototype.drawTemplates = function (page, layer, document, foreground) {\n var documentHeaders = this.getDocumentTemplates(document, page, true, foreground);\n var documentTemplates = this.getDocumentTemplates(document, page, false, foreground);\n if (foreground) {\n this.drawTemplatesHelper(layer, document, documentHeaders);\n this.drawTemplatesHelper(layer, document, documentTemplates);\n }\n else {\n this.drawTemplatesHelper(layer, document, documentHeaders);\n this.drawTemplatesHelper(layer, document, documentTemplates);\n }\n };\n /**\n * Draws page templates on the page.\n * @private\n */\n PdfSection.prototype.drawTemplatesHelper = function (layer, document, templates) {\n if (templates != null && templates.length > 0) {\n var len = templates.length;\n for (var i = 0; i < len; i++) {\n var template = templates[i];\n template.draw(layer, document);\n }\n }\n };\n return PdfSection;\n}());\nexport { PdfSection };\nvar PageSettingsState = /** @class */ (function () {\n //Public Constructor\n /**\n * New instance to store the `PageSettings`.\n * @private\n */\n function PageSettingsState(document) {\n this.pageOrientation = document.pageSettings.orientation;\n this.pageRotate = document.pageSettings.rotate;\n this.pageSize = document.pageSettings.size;\n this.pageOrigin = document.pageSettings.origin;\n }\n Object.defineProperty(PageSettingsState.prototype, \"orientation\", {\n //public Properties\n /**\n * @hidden\n * @private\n */\n get: function () {\n return this.pageOrientation;\n },\n set: function (value) {\n this.pageOrientation = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PageSettingsState.prototype, \"rotate\", {\n /**\n * @hidden\n * @private\n */\n get: function () {\n return this.pageRotate;\n },\n set: function (value) {\n this.pageRotate = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PageSettingsState.prototype, \"size\", {\n /**\n * @hidden\n * @private\n */\n get: function () {\n return this.pageSize;\n },\n set: function (value) {\n this.pageSize = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PageSettingsState.prototype, \"origin\", {\n /**\n * @hidden\n * @private\n */\n get: function () {\n return this.pageOrigin;\n },\n set: function (value) {\n this.pageOrigin = value;\n },\n enumerable: true,\n configurable: true\n });\n return PageSettingsState;\n}());\nexport { PageSettingsState };\n","import { PdfNumber } from './../primitives/pdf-number';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfDictionary, SaveSectionCollectionEventHandler } from './../primitives/pdf-dictionary';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { RectangleF, PointF } from './../drawing/pdf-drawing';\nimport { PdfSection } from './pdf-section';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\n/**\n * Represents the `collection of the sections`.\n * @private\n */\nvar PdfSectionCollection = /** @class */ (function () {\n //constructor\n /**\n * Initializes a new instance of the `PdfSectionCollection` class.\n * @private\n */\n function PdfSectionCollection(document) {\n /**\n * @hidden\n * @private\n */\n this.sections = [];\n /**\n * @hidden\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n // if (document === null) {\n // throw new Error('ArgumentNullException : document');\n // }\n this.pdfDocument = document.clone();\n this.initialize();\n }\n Object.defineProperty(PdfSectionCollection.prototype, \"section\", {\n //Properties\n /**\n * Gets the `Section` collection.\n */\n get: function () {\n return this.sections;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionCollection.prototype, \"document\", {\n /**\n * Gets a parent `document`.\n * @private\n */\n get: function () {\n return this.pdfDocument;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionCollection.prototype, \"count\", {\n /**\n * Gets the `number of sections` in a document.\n * @private\n */\n get: function () {\n return this.sections.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfSectionCollection.prototype, \"element\", {\n /**\n * Gets the wrapped `element`.\n * @private\n */\n get: function () {\n return this.pages;\n },\n enumerable: true,\n configurable: true\n });\n //Methods\n /**\n * `Initializes the object`.\n * @private\n */\n PdfSectionCollection.prototype.initialize = function () {\n this.sectionCount = new PdfNumber(0);\n this.sectionCollection = new PdfArray();\n this.pages = new PdfDictionary();\n this.pages.beginSave = new SaveSectionCollectionEventHandler(this);\n this.pages.items.setValue(this.dictionaryProperties.type, new PdfName('Pages'));\n this.pages.items.setValue(this.dictionaryProperties.kids, this.sectionCollection);\n this.pages.items.setValue(this.dictionaryProperties.count, this.sectionCount);\n this.pages.items.setValue(this.dictionaryProperties.resources, new PdfDictionary());\n this.setPageSettings(this.pages, this.pdfDocument.pageSettings);\n };\n /**\n * Initializes a new instance of the `PdfSectionCollection` class.\n * @private\n */\n PdfSectionCollection.prototype.pdfSectionCollection = function (index) {\n if (index < 0 || index >= this.count) {\n throw new Error('IndexOutOfRangeException()');\n }\n return this.sections[index];\n };\n /**\n * In fills dictionary by the data from `Page settings`.\n * @private\n */\n PdfSectionCollection.prototype.setPageSettings = function (container, pageSettings) {\n // if (container === null) {\n // throw new Error('ArgumentNullException : container');\n // }\n // if (pageSettings === null) {\n // throw new Error('ArgumentNullException : pageSettings');\n // }\n var bounds = new RectangleF(new PointF(), pageSettings.size);\n container.items.setValue(this.dictionaryProperties.mediaBox, PdfArray.fromRectangle(bounds));\n };\n /**\n * `Adds` the specified section.\n * @private\n */\n PdfSectionCollection.prototype.add = function (section) {\n if (typeof section === 'undefined') {\n var section_1 = new PdfSection(this.pdfDocument);\n this.add(section_1);\n return section_1;\n }\n else {\n // if (section === null) {\n // throw new Error('ArgumentNullException : section');\n // }\n var r = this.checkSection(section);\n this.sections.push(section);\n section.parent = this;\n this.sectionCollection.add(r);\n return this.sections.indexOf(section);\n }\n };\n /**\n * `Checks` if the section is within the collection.\n * @private\n */\n PdfSectionCollection.prototype.checkSection = function (section) {\n var r = new PdfReferenceHolder(section);\n var contains = this.sectionCollection.contains(r);\n // if (contains) {\n // throw new Error('ArgumentException : The object can not be added twice to the collection,section');\n // }\n return r;\n };\n /**\n * Catches the Save event of the dictionary to `count the pages`.\n * @private\n */\n PdfSectionCollection.prototype.countPages = function () {\n var count = 0;\n this.sections.forEach(function (n) { return (count += n.count); });\n return count;\n };\n /**\n * Catches the Save event of the dictionary to `count the pages`.\n * @hidden\n * @private\n */\n PdfSectionCollection.prototype.beginSave = function () {\n this.sectionCount.intValue = this.countPages();\n };\n //Fields\n /**\n * Rotate factor for page `rotation`.\n * @default 90\n * @private\n */\n PdfSectionCollection.rotateFactor = 90;\n return PdfSectionCollection;\n}());\nexport { PdfSectionCollection };\n","import { PdfPage } from './pdf-page';\nimport { Dictionary } from './../collections/dictionary';\nimport { PdfPageOrientation } from './enum';\n/**\n * Represents a virtual collection of all the pages in the document.\n * @private\n */\nvar PdfDocumentPageCollection = /** @class */ (function () {\n //constructor\n /**\n * Initializes a new instance of the `PdfPageCollection` class.\n * @private\n */\n function PdfDocumentPageCollection(document) {\n /**\n * It holds the page collection with the `index`.\n * @private\n */\n this.pdfPageCollectionIndex = new Dictionary();\n /**\n * Stores the previous pages's `orientation`.\n * @default PdfPageOrientation.Portrait\n * @private\n */\n this.previousPageOrientation = PdfPageOrientation.Portrait;\n this.document = document;\n }\n Object.defineProperty(PdfDocumentPageCollection.prototype, \"count\", {\n //Property\n /**\n * Gets the total `number of the pages`.\n * @private\n */\n get: function () {\n return this.countPages();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocumentPageCollection.prototype, \"pageCollectionIndex\", {\n /**\n * Gets a `page index` from the document.\n * @private\n */\n get: function () {\n return this.pdfPageCollectionIndex;\n },\n enumerable: true,\n configurable: true\n });\n PdfDocumentPageCollection.prototype.add = function (page) {\n if (typeof page === 'undefined') {\n var page_1 = new PdfPage();\n this.add(page_1);\n return page_1;\n }\n else {\n var section = this.getLastSection();\n if (section.pageSettings.orientation !== this.previousPageOrientation) {\n section = this.document.sections.add();\n section.pageSettings.orientation = this.document.pageSettings.orientation;\n }\n section.add(page);\n }\n };\n /**\n * Returns `last section` in the document.\n * @private\n */\n PdfDocumentPageCollection.prototype.getLastSection = function () {\n var sc = this.document.sections;\n if (sc.section.length === 0) {\n sc.add();\n }\n var section = sc.section[sc.section.length - 1];\n return section;\n };\n /**\n * Called when `new page has been added`.\n * @private\n */\n PdfDocumentPageCollection.prototype.onPageAdded = function (args) {\n // if (PageAdded !== null)\n // {\n // PageAdded(this, args);\n // }\n };\n /**\n * Gets the `total number of pages`.\n * @private\n */\n PdfDocumentPageCollection.prototype.countPages = function () {\n var sc = this.document.sections;\n var count = 0;\n for (var index = 0; index < sc.section.length; index++) {\n count += sc.section[index].count;\n }\n return count;\n };\n /**\n * Gets the `page object` from page index.\n * @private\n */\n PdfDocumentPageCollection.prototype.getPageByIndex = function (index) {\n return this.getPage(index);\n };\n /**\n * Gets a page by its `index` in the document.\n * @private\n */\n PdfDocumentPageCollection.prototype.getPage = function (index) {\n if ((index < 0) || (index >= this.count)) {\n throw Error('ArgumentOutOfRangeException(\"index\", \"Value can not be less 0\")');\n }\n var page = null;\n var sectionStartIndex = 0;\n var sectionCount = 0;\n var pageIndex = 0;\n var length = this.document.sections.count;\n for (var i = 0; i < length; i++) {\n var section = this.document.sections.section[i];\n sectionCount = section.count;\n pageIndex = index - sectionStartIndex;\n // We found a section containing the page.\n if ((index >= sectionStartIndex && pageIndex < sectionCount)) {\n page = section.getPages()[pageIndex];\n break;\n }\n sectionStartIndex += sectionCount;\n }\n return page;\n };\n /**\n * Gets the `index of` the page in the document.\n * @private\n */\n PdfDocumentPageCollection.prototype.indexOf = function (page) {\n var index = -1;\n if (page == null) {\n throw new Error('ArgumentNullException: page');\n }\n else {\n var numPages = 0;\n for (var i = 0, len = this.document.sections.count; i < len; i++) {\n var section = this.document.sections.pdfSectionCollection(i);\n index = section.indexOf(page);\n if (index >= 0) {\n index += numPages;\n break;\n }\n else {\n index = -1;\n }\n numPages += section.count;\n }\n }\n return index;\n };\n /**\n * `Removes` the specified page.\n * @private\n */\n PdfDocumentPageCollection.prototype.remove = function (page) {\n if (page == null) {\n throw Error('ArgumentNullException(\"page\")');\n }\n var section = null;\n var len;\n for (var i = 0, len_1 = this.document.sections.count; i < len_1; i++) {\n section = this.document.sections.pdfSectionCollection(i);\n if (section.pages.contains(page)) {\n section.pages.remove(page);\n break;\n }\n }\n return section;\n };\n return PdfDocumentPageCollection;\n}());\nexport { PdfDocumentPageCollection };\n","/**\n * PdfCacheCollection.ts class for EJ2-PDF\n */\nimport { Dictionary } from './../collections/dictionary';\n/**\n * `Collection of the cached objects`.\n * @private\n */\nvar PdfCacheCollection = /** @class */ (function () {\n // Constructors\n /**\n * Initializes a new instance of the `PdfCacheCollection` class.\n * @private\n */\n function PdfCacheCollection() {\n this.referenceObjects = [];\n this.pdfFontCollection = new Dictionary();\n }\n // Public methods\n /**\n * `Searches` for the similar cached object. If is not found - adds the object to the cache.\n * @private\n */\n PdfCacheCollection.prototype.search = function (obj) {\n var result = null;\n var group = this.createNewGroup();\n group.push(obj);\n return result;\n };\n // Implementation\n /**\n * `Creates` a new group.\n * @private\n */\n PdfCacheCollection.prototype.createNewGroup = function () {\n var group = [];\n this.referenceObjects.push(group);\n return group;\n };\n PdfCacheCollection.prototype.destroy = function () {\n this.pdfFontCollection = undefined;\n this.referenceObjects = undefined;\n };\n return PdfCacheCollection;\n}());\nexport { PdfCacheCollection };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfWriter } from './../input-output/pdf-writer';\nimport { PdfMainObjectCollection } from './../input-output/pdf-main-object-collection';\nimport { PdfDocumentBase } from './pdf-document-base';\nimport { PdfCrossTable } from './../input-output/pdf-cross-table';\nimport { PdfCatalog } from './pdf-catalog';\nimport { PdfPageSettings } from './../pages/pdf-page-settings';\nimport { PdfSectionCollection } from './../pages/pdf-section-collection';\nimport { PdfDocumentPageCollection } from './../pages/pdf-document-page-collection';\nimport { PdfCacheCollection } from './../general/pdf-cache-collection';\nimport { PdfColorSpace } from './../graphics/enum';\nimport { PdfDocumentTemplate } from './pdf-document-template';\nimport { PdfFontFamily } from './../graphics/fonts/enum';\nimport { PdfStandardFont } from './../graphics/fonts/pdf-standard-font';\n/**\n * Represents a PDF document and can be used to create a new PDF document from the scratch.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * // set the font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfDocument = /** @class */ (function (_super) {\n __extends(PdfDocument, _super);\n function PdfDocument(isMerging) {\n var _this = _super.call(this) || this;\n /**\n * Default `margin` value.\n * @default 40.0\n * @private\n */\n _this.defaultMargin = 40.0;\n /**\n * Internal variable to store instance of `StreamWriter` classes..\n * @default null\n * @private\n */\n _this.streamWriter = null;\n _this = _super.call(this, _this) || this;\n if (isMerging === true || isMerging === false || typeof isMerging !== 'undefined') {\n var objects = new PdfMainObjectCollection();\n _this.setMainObjectCollection(objects);\n var crossTable = new PdfCrossTable();\n crossTable.isMerging = isMerging;\n crossTable.document = _this;\n _this.setCrossTable(crossTable);\n var catalog = new PdfCatalog();\n _this.setCatalog(catalog);\n objects.add(catalog);\n catalog.position = -1;\n _this.sectionCollection = new PdfSectionCollection(_this);\n _this.documentPageCollection = new PdfDocumentPageCollection(_this);\n catalog.pages = _this.sectionCollection;\n }\n else {\n PdfDocument.cacheCollection = new PdfCacheCollection();\n _this.constructor(false);\n }\n return _this;\n }\n Object.defineProperty(PdfDocument, \"defaultFont\", {\n //Properties\n /**\n * Gets the `default font`. It is used for complex objects when font is not explicitly defined.\n * @private\n */\n get: function () {\n if (this.defaultStandardFont == null) {\n this.defaultStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 8);\n }\n return this.defaultStandardFont;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocument.prototype, \"sections\", {\n /**\n * Gets the collection of the `sections` in the document.\n * @private\n */\n get: function () {\n return this.sectionCollection;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocument.prototype, \"pageSettings\", {\n /**\n * Gets the document's page setting.\n * @public\n */\n get: function () {\n if (this.settings == null) {\n this.settings = new PdfPageSettings(this.defaultMargin);\n }\n return this.settings;\n },\n /**\n * Sets the document's page setting.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n *\n * // sets the right margin of the page\n * document.pageSettings.margins.right = 0;\n * // set the page size.\n * document.pageSettings.size = new SizeF(500, 500);\n * // change the page orientation to landscape\n * document.pageSettings.orientation = PdfPageOrientation.Landscape;\n * // apply 90 degree rotation on the page\n * document.pageSettings.rotate = PdfPageRotateAngle.RotateAngle90;\n *\n * // add a pages to the document\n * let page1 : PdfPage = document.pages.add();\n * // set font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // set brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // set the specified Point\n * let point : PointF = new PointF(page1.getClientSize().width - 200, page1.getClientSize().height - 200);\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, point);\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n set: function (value) {\n this.settings = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocument.prototype, \"pages\", {\n /**\n * Represents the collection of pages in the PDF document.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * //\n * // get the collection of pages in the document\n * let pageCollection : PdfDocumentPageCollection = document.pages;\n * //\n * // add pages\n * let page1 : PdfPage = pageCollection.add();\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.documentPageCollection;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocument, \"cache\", {\n /**\n * Gets collection of the `cached objects`.\n * @private\n */\n get: function () {\n if (typeof PdfDocument.cacheCollection === 'undefined' || PdfDocument.cacheCollection == null) {\n return new PdfCacheCollection();\n }\n return PdfDocument.cacheCollection;\n },\n /**\n * Sets collection of the `cached objects`.\n * @private\n */\n set: function (value) {\n this.cacheCollection = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocument.prototype, \"colorSpace\", {\n /* tslint:disable */\n /**\n * Gets or sets the `color space` of the document. This property can be used to create PDF document in RGB, Gray scale or CMYK color spaces.\n * @private\n */\n get: function () {\n if ((this.pdfColorSpace === PdfColorSpace.Rgb) || ((this.pdfColorSpace === PdfColorSpace.Cmyk)\n || (this.pdfColorSpace === PdfColorSpace.GrayScale))) {\n return this.pdfColorSpace;\n }\n else {\n return PdfColorSpace.Rgb;\n }\n },\n set: function (value) {\n if ((value === PdfColorSpace.Rgb) || ((value === PdfColorSpace.Cmyk) ||\n (value === PdfColorSpace.GrayScale))) {\n this.pdfColorSpace = value;\n }\n else {\n this.pdfColorSpace = PdfColorSpace.Rgb;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDocument.prototype, \"template\", {\n /* tslint:enable */\n /**\n * Gets or sets a `template` to all pages in the document.\n * @private\n */\n get: function () {\n if (this.pageTemplate == null) {\n this.pageTemplate = new PdfDocumentTemplate();\n }\n return this.pageTemplate;\n },\n set: function (value) {\n this.pageTemplate = value;\n },\n enumerable: true,\n configurable: true\n });\n PdfDocument.prototype.docSave = function (stream, arg2, arg3) {\n this.checkPagesPresence();\n if (stream === null) {\n throw new Error('ArgumentNullException : stream');\n }\n this.streamWriter = stream;\n var writer = new PdfWriter(stream);\n writer.document = this;\n if (typeof arg2 === 'boolean' && typeof arg3 === 'undefined') {\n return this.crossTable.save(writer);\n }\n else {\n this.crossTable.save(writer, arg2);\n }\n };\n /**\n * Checks the pages `presence`.\n * @private\n */\n PdfDocument.prototype.checkPagesPresence = function () {\n if (this.pages.count === 0) {\n this.pages.add();\n }\n };\n /**\n * disposes the current instance of `PdfDocument` class.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * // set the font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n PdfDocument.prototype.destroy = function () {\n this.catalog = undefined;\n this.colorSpace = undefined;\n this.currentSavingObj = undefined;\n this.documentPageCollection = undefined;\n this.isStreamCopied = undefined;\n this.pageSettings = undefined;\n this.pageTemplate = undefined;\n this.pdfColorSpace = undefined;\n this.sectionCollection = undefined;\n PdfDocument.cache.destroy();\n this.crossTable.pdfObjects.destroy();\n PdfDocument.cache = undefined;\n this.streamWriter.destroy();\n };\n /**\n * `Font` used in complex objects to draw strings and text when it is not defined explicitly.\n * @default null\n * @private\n */\n PdfDocument.defaultStandardFont = null;\n return PdfDocument;\n}(PdfDocumentBase));\nexport { PdfDocument };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfFont } from './pdf-font';\nimport { PdfSubSuperScript } from './enum';\nimport { PdfArray } from './../../primitives/pdf-array';\n/**\n * `Metrics` of the font.\n * @private\n */\nvar PdfFontMetrics = /** @class */ (function () {\n function PdfFontMetrics() {\n /**\n * `Line gap`.\n * @private\n */\n this.lineGap = 0;\n }\n // Public methods\n /**\n * Returns `ascent` taking into consideration font`s size.\n * @private\n */\n PdfFontMetrics.prototype.getAscent = function (format) {\n var returnValue = this.ascent * PdfFont.charSizeMultiplier * this.getSize(format);\n return returnValue;\n };\n /**\n * Returns `descent` taking into consideration font`s size.\n * @private\n */\n PdfFontMetrics.prototype.getDescent = function (format) {\n var returnValue = this.descent * PdfFont.charSizeMultiplier * this.getSize(format);\n return returnValue;\n };\n /**\n * Returns `Line gap` taking into consideration font`s size.\n * @private\n */\n PdfFontMetrics.prototype.getLineGap = function (format) {\n var returnValue = this.lineGap * PdfFont.charSizeMultiplier * this.getSize(format);\n return returnValue;\n };\n /**\n * Returns `height` taking into consideration font`s size.\n * @private\n */\n PdfFontMetrics.prototype.getHeight = function (format) {\n var height;\n var clearTypeFonts = ['cambria', 'candara', 'constantia', 'corbel', 'cariadings'];\n var clearTypeFontCollection = [];\n for (var index = 0; index < clearTypeFonts.length; index++) {\n var font = clearTypeFonts[index];\n clearTypeFontCollection.push(font);\n }\n if (this.getDescent(format) < 0) {\n // if ((clearTypeFontCollection.indexOf(this.name.toLowerCase()) !== -1) && !this.isUnicodeFont) {\n // height = (this.GetAscent(format) - this.GetDescent(format) - this.GetLineGap(format));\n // } else {\n height = (this.getAscent(format) - this.getDescent(format) + this.getLineGap(format));\n // }\n }\n else {\n height = (this.getAscent(format) + this.getDescent(format) + this.getLineGap(format));\n }\n return height;\n };\n /**\n * Calculates `size` of the font depending on the subscript/superscript value.\n * @private\n */\n PdfFontMetrics.prototype.getSize = function (format) {\n var size = this.size;\n if (format != null) {\n switch (format.subSuperScript) {\n case PdfSubSuperScript.SubScript:\n size /= this.subScriptSizeFactor;\n break;\n case PdfSubSuperScript.SuperScript:\n size /= this.superscriptSizeFactor;\n break;\n }\n }\n return size;\n };\n /**\n * `Clones` the metrics.\n * @private\n */\n PdfFontMetrics.prototype.clone = function () {\n var metrics = this;\n metrics.widthTable = WidthTable.clone();\n return metrics;\n };\n Object.defineProperty(PdfFontMetrics.prototype, \"widthTable\", {\n // Properies\n /**\n * Gets or sets the `width table`.\n * @private\n */\n get: function () {\n return this.internalWidthTable;\n },\n set: function (value) {\n this.internalWidthTable = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfFontMetrics;\n}());\nexport { PdfFontMetrics };\nvar WidthTable = /** @class */ (function () {\n function WidthTable() {\n }\n /**\n * Static `clones` this instance of the WidthTable class.\n * @private\n */\n WidthTable.clone = function () {\n return null;\n };\n return WidthTable;\n}());\nexport { WidthTable };\nvar StandardWidthTable = /** @class */ (function (_super) {\n __extends(StandardWidthTable, _super);\n // Constructors\n /**\n * Initializes a new instance of the `StandardWidthTable` class.\n * @private\n */\n function StandardWidthTable(widths) {\n var _this = _super.call(this) || this;\n if (widths == null) {\n throw new Error('ArgumentNullException:widths');\n }\n _this.widths = widths;\n return _this;\n }\n //Properties\n /**\n * Gets the `32 bit number` at the specified index.\n * @private\n */\n StandardWidthTable.prototype.items = function (index) {\n if (index < 0 || index >= this.widths.length) {\n throw new Error('ArgumentOutOfRangeException:index, The character is not supported by the font.');\n }\n var result = this.widths[index];\n return result;\n };\n Object.defineProperty(StandardWidthTable.prototype, \"length\", {\n /**\n * Gets the `length` of the internal array.\n * @private\n */\n get: function () {\n return this.widths.length;\n },\n enumerable: true,\n configurable: true\n });\n //Overrides\n /**\n * `Clones` this instance of the WidthTable class.\n * @private\n */\n StandardWidthTable.prototype.clone = function () {\n var swt = this;\n swt.widths = this.widths;\n return swt;\n };\n /**\n * Converts width table to a `PDF array`.\n * @private\n */\n StandardWidthTable.prototype.toArray = function () {\n var arr = new PdfArray(this.widths);\n return arr;\n };\n return StandardWidthTable;\n}(WidthTable));\nexport { StandardWidthTable };\n","/**\n * PdfStandardFontMetricsFactory.ts class for EJ2-PDF\n */\nimport { PdfFontStyle, PdfFontFamily } from './enum';\nimport { PdfFontMetrics, StandardWidthTable } from './pdf-font-metrics';\n/**\n * @private\n * `Factory of the standard fonts metrics`.\n */\nvar PdfStandardFontMetricsFactory = /** @class */ (function () {\n function PdfStandardFontMetricsFactory() {\n }\n /**\n * Returns `metrics` of the font.\n * @private\n */\n PdfStandardFontMetricsFactory.getMetrics = function (fontFamily, fontStyle, size) {\n var metrics = null;\n switch (fontFamily) {\n case PdfFontFamily.Helvetica:\n metrics = this.getHelveticaMetrics(fontFamily, fontStyle, size);\n break;\n case PdfFontFamily.Courier:\n metrics = this.getCourierMetrics(fontFamily, fontStyle, size);\n break;\n case PdfFontFamily.TimesRoman:\n metrics = this.getTimesMetrics(fontFamily, fontStyle, size);\n break;\n case PdfFontFamily.Symbol:\n metrics = this.getSymbolMetrics(fontFamily, fontStyle, size);\n break;\n case PdfFontFamily.ZapfDingbats:\n metrics = this.getZapfDingbatsMetrics(fontFamily, fontStyle, size);\n break;\n default:\n metrics = this.getHelveticaMetrics(PdfFontFamily.Helvetica, fontStyle, size);\n break;\n }\n metrics.name = fontFamily.toString();\n metrics.subScriptSizeFactor = this.subSuperScriptFactor;\n metrics.superscriptSizeFactor = this.subSuperScriptFactor;\n return metrics;\n };\n // Implementation\n /**\n * Creates `Helvetica font metrics`.\n * @private\n */\n PdfStandardFontMetricsFactory.getHelveticaMetrics = function (fontFamily, fontStyle, size) {\n var metrics = new PdfFontMetrics();\n if ((fontStyle & PdfFontStyle.Bold) > 0 && (fontStyle & PdfFontStyle.Italic) > 0) {\n metrics.ascent = this.helveticaBoldItalicAscent;\n metrics.descent = this.helveticaBoldItalicDescent;\n metrics.postScriptName = this.helveticaBoldItalicName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.arialBoldWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else if ((fontStyle & PdfFontStyle.Bold) > 0) {\n metrics.ascent = this.helveticaBoldAscent;\n metrics.descent = this.helveticaBoldDescent;\n metrics.postScriptName = this.helveticaBoldName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.arialBoldWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else if ((fontStyle & PdfFontStyle.Italic) > 0) {\n metrics.ascent = this.helveticaItalicAscent;\n metrics.descent = this.helveticaItalicDescent;\n metrics.postScriptName = this.helveticaItalicName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.arialWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else {\n metrics.ascent = this.helveticaAscent;\n metrics.descent = this.helveticaDescent;\n metrics.postScriptName = this.helveticaName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.arialWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n return metrics;\n };\n /**\n * Creates `Courier font metrics`.\n * @private\n */\n PdfStandardFontMetricsFactory.getCourierMetrics = function (fontFamily, fontStyle, size) {\n var metrics = new PdfFontMetrics();\n if ((fontStyle & PdfFontStyle.Bold) > 0 && (fontStyle & PdfFontStyle.Italic) > 0) {\n metrics.ascent = this.courierBoldItalicAscent;\n metrics.descent = this.courierBoldItalicDescent;\n metrics.postScriptName = this.courierBoldItalicName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.fixedWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else if ((fontStyle & PdfFontStyle.Bold) > 0) {\n metrics.ascent = this.courierBoldAscent;\n metrics.descent = this.courierBoldDescent;\n metrics.postScriptName = this.courierBoldName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.fixedWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else if ((fontStyle & PdfFontStyle.Italic) > 0) {\n metrics.ascent = this.courierItalicAscent;\n metrics.descent = this.courierItalicDescent;\n metrics.postScriptName = this.courierItalicName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.fixedWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else {\n metrics.ascent = this.courierAscent;\n metrics.descent = this.courierDescent;\n metrics.postScriptName = this.courierName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.fixedWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n return metrics;\n };\n /**\n * Creates `Times font metrics`.\n * @private\n */\n PdfStandardFontMetricsFactory.getTimesMetrics = function (fontFamily, fontStyle, size) {\n var metrics = new PdfFontMetrics();\n if ((fontStyle & PdfFontStyle.Bold) > 0 && (fontStyle & PdfFontStyle.Italic) > 0) {\n metrics.ascent = this.timesBoldItalicAscent;\n metrics.descent = this.timesBoldItalicDescent;\n metrics.postScriptName = this.timesBoldItalicName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.timesRomanBoldItalicWidths);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else if ((fontStyle & PdfFontStyle.Bold) > 0) {\n metrics.ascent = this.timesBoldAscent;\n metrics.descent = this.timesBoldDescent;\n metrics.postScriptName = this.timesBoldName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.timesRomanBoldWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else if ((fontStyle & PdfFontStyle.Italic) > 0) {\n metrics.ascent = this.timesItalicAscent;\n metrics.descent = this.timesItalicDescent;\n metrics.postScriptName = this.timesItalicName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.timesRomanItalicWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n else {\n metrics.ascent = this.timesAscent;\n metrics.descent = this.timesDescent;\n metrics.postScriptName = this.timesName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.timesRomanWidth);\n metrics.height = metrics.ascent - metrics.descent;\n }\n return metrics;\n };\n /**\n * Creates `Symbol font metrics`.\n * @private\n */\n PdfStandardFontMetricsFactory.getSymbolMetrics = function (fontFamily, fontStyle, size) {\n var metrics = new PdfFontMetrics();\n metrics.ascent = this.symbolAscent;\n metrics.descent = this.symbolDescent;\n metrics.postScriptName = this.symbolName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.symbolWidth);\n metrics.height = metrics.ascent - metrics.descent;\n return metrics;\n };\n /**\n * Creates `ZapfDingbats font metrics`.\n * @private\n */\n PdfStandardFontMetricsFactory.getZapfDingbatsMetrics = function (fontFamily, fontStyle, size) {\n var metrics = new PdfFontMetrics();\n metrics.ascent = this.zapfDingbatsAscent;\n metrics.descent = this.zapfDingbatsDescent;\n metrics.postScriptName = this.zapfDingbatsName;\n metrics.size = size;\n metrics.widthTable = new StandardWidthTable(this.zapfDingbatsWidth);\n metrics.height = metrics.ascent - metrics.descent;\n return metrics;\n };\n /**\n * `Multiplier` os subscript superscript.\n * @private\n */\n PdfStandardFontMetricsFactory.subSuperScriptFactor = 1.52;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaAscent = 931;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaDescent = -225;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaName = 'Helvetica';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaBoldAscent = 962;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaBoldDescent = -228;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaBoldName = 'Helvetica-Bold';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaItalicAscent = 931;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaItalicDescent = -225;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaItalicName = 'Helvetica-Oblique';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaBoldItalicAscent = 962;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaBoldItalicDescent = -228;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.helveticaBoldItalicName = 'Helvetica-BoldOblique';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierAscent = 805;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierDescent = -250;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.courierName = 'Courier';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierBoldAscent = 801;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierBoldDescent = -250;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.courierBoldName = 'Courier-Bold';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierItalicAscent = 805;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierItalicDescent = -250;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.courierItalicName = 'Courier-Oblique';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierBoldItalicAscent = 801;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.courierBoldItalicDescent = -250;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.courierBoldItalicName = 'Courier-BoldOblique';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesAscent = 898;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesDescent = -218;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.timesName = 'Times-Roman';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesBoldAscent = 935;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesBoldDescent = -218;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.timesBoldName = 'Times-Bold';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesItalicAscent = 883;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesItalicDescent = -217;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.timesItalicName = 'Times-Italic';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesBoldItalicAscent = 921;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.timesBoldItalicDescent = -218;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.timesBoldItalicName = 'Times-BoldItalic';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.symbolAscent = 1010;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.symbolDescent = -293;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.symbolName = 'Symbol';\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.zapfDingbatsAscent = 820;\n /**\n * `Ascender` value for the font.\n * @private\n */\n PdfStandardFontMetricsFactory.zapfDingbatsDescent = -143;\n /**\n * `Font type`.\n * @private\n */\n PdfStandardFontMetricsFactory.zapfDingbatsName = 'ZapfDingbats';\n /**\n * `Arial` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.arialWidth = [\n 278, 278, 355, 556, 556, 889, 667, 191, 333, 333, 389, 584, 278, 333,\n 278, 278, 556, 556, 556, 556, 556, 556, 556, 556, 556, 556, 278, 278, 584, 584,\n 584, 556, 1015, 667, 667, 722, 722, 667, 611, 778, 722, 278, 500, 667, 556, 833,\n 722, 778, 667, 778, 722, 667, 611, 722, 667, 944, 667, 667, 611, 278, 278, 278,\n 469, 556, 333, 556, 556, 500, 556, 556, 278, 556, 556, 222, 222, 500, 222, 833,\n 556, 556, 556, 556, 333, 500, 278, 556, 500, 722, 500, 500, 500, 334, 260, 334,\n 584, 0, 556, 0, 222, 556, 333, 1000, 556, 556, 333, 1000, 667, 333, 1000, 0,\n 611, 0, 0, 222, 222, 333, 333, 350, 556, 1000, 333, 1000, 500, 333, 944, 0,\n 500, 667, 0, 333, 556, 556, 556, 556, 260, 556, 333, 737, 370, 556, 584, 0,\n 737, 333, 400, 584, 333, 333, 333, 556, 537, 278, 333, 333, 365, 556, 834, 834,\n 834, 611, 667, 667, 667, 667, 667, 667, 1000, 722, 667, 667, 667, 667, 278, 278,\n 278, 278, 722, 722, 778, 778, 778, 778, 778, 584, 778, 722, 722, 722, 722, 667,\n 667, 611, 556, 556, 556, 556, 556, 556, 889, 500, 556, 556, 556, 556, 278, 278,\n 278, 278, 556, 556, 556, 556, 556, 556, 556, 584, 611, 556, 556, 556, 556, 500,\n 556, 500\n ];\n /**\n * `Arial bold` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.arialBoldWidth = [\n 278, 333, 474, 556, 556, 889, 722, 238, 333, 333, 389, 584, 278, 333,\n 278, 278, 556, 556, 556, 556, 556, 556, 556, 556, 556, 556, 333, 333, 584, 584,\n 584, 611, 975, 722, 722, 722, 722, 667, 611, 778, 722, 278, 556, 722, 611, 833,\n 722, 778, 667, 778, 722, 667, 611, 722, 667, 944, 667, 667, 611, 333, 278, 333,\n 584, 556, 333, 556, 611, 556, 611, 556, 333, 611, 611, 278, 278, 556, 278, 889,\n 611, 611, 611, 611, 389, 556, 333, 611, 556, 778, 556, 556, 500, 389, 280, 389,\n 584, 0, 556, 0, 278, 556, 500, 1000, 556, 556, 333, 1000, 667, 333, 1000, 0,\n 611, 0, 0, 278, 278, 500, 500, 350, 556, 1000, 333, 1000, 556, 333, 944, 0,\n 500, 667, 0, 333, 556, 556, 556, 556, 280, 556, 333, 737, 370, 556, 584, 0,\n 737, 333, 400, 584, 333, 333, 333, 611, 556, 278, 333, 333, 365, 556, 834, 834,\n 834, 611, 722, 722, 722, 722, 722, 722, 1000, 722, 667, 667, 667, 667, 278, 278,\n 278, 278, 722, 722, 778, 778, 778, 778, 778, 584, 778, 722, 722, 722, 722, 667,\n 667, 611, 556, 556, 556, 556, 556, 556, 889, 556, 556, 556, 556, 556, 278, 278,\n 278, 278, 611, 611, 611, 611, 611, 611, 611, 584, 611, 611, 611, 611, 611, 556,\n 611, 556\n ];\n /**\n * `Fixed` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.fixedWidth = [\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600,\n 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600\n ];\n /**\n * `Times` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.timesRomanWidth = [\n 250, 333, 408, 500, 500, 833, 778, 180, 333, 333, 500, 564, 250, 333,\n 250, 278, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 278, 278, 564, 564,\n 564, 444, 921, 722, 667, 667, 722, 611, 556, 722, 722, 333, 389, 722, 611, 889,\n 722, 722, 556, 722, 667, 556, 611, 722, 722, 944, 722, 722, 611, 333, 278, 333,\n 469, 500, 333, 444, 500, 444, 500, 444, 333, 500, 500, 278, 278, 500, 278, 778,\n 500, 500, 500, 500, 333, 389, 278, 500, 500, 722, 500, 500, 444, 480, 200, 480,\n 541, 0, 500, 0, 333, 500, 444, 1000, 500, 500, 333, 1000, 556, 333, 889, 0,\n 611, 0, 0, 333, 333, 444, 444, 350, 500, 1000, 333, 980, 389, 333, 722, 0,\n 444, 722, 0, 333, 500, 500, 500, 500, 200, 500, 333, 760, 276, 500, 564, 0,\n 760, 333, 400, 564, 300, 300, 333, 500, 453, 250, 333, 300, 310, 500, 750, 750,\n 750, 444, 722, 722, 722, 722, 722, 722, 889, 667, 611, 611, 611, 611, 333, 333,\n 333, 333, 722, 722, 722, 722, 722, 722, 722, 564, 722, 722, 722, 722, 722, 722,\n 556, 500, 444, 444, 444, 444, 444, 444, 667, 444, 444, 444, 444, 444, 278, 278,\n 278, 278, 500, 500, 500, 500, 500, 500, 500, 564, 500, 500, 500, 500, 500, 500,\n 500, 500\n ];\n /**\n * `Times bold` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.timesRomanBoldWidth = [\n 250, 333, 555, 500, 500, 1000, 833, 278, 333, 333, 500, 570, 250, 333,\n 250, 278, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 333, 333, 570, 570,\n 570, 500, 930, 722, 667, 722, 722, 667, 611, 778, 778, 389, 500, 778, 667, 944,\n 722, 778, 611, 778, 722, 556, 667, 722, 722, 1000, 722, 722, 667, 333, 278, 333,\n 581, 500, 333, 500, 556, 444, 556, 444, 333, 500, 556, 278, 333, 556, 278, 833,\n 556, 500, 556, 556, 444, 389, 333, 556, 500, 722, 500, 500, 444, 394, 220, 394,\n 520, 0, 500, 0, 333, 500, 500, 1000, 500, 500, 333, 1000, 556, 333, 1000, 0,\n 667, 0, 0, 333, 333, 500, 500, 350, 500, 1000, 333, 1000, 389, 333, 722, 0,\n 444, 722, 0, 333, 500, 500, 500, 500, 220, 500, 333, 747, 300, 500, 570, 0,\n 747, 333, 400, 570, 300, 300, 333, 556, 540, 250, 333, 300, 330, 500, 750, 750,\n 750, 500, 722, 722, 722, 722, 722, 722, 1000, 722, 667, 667, 667, 667, 389, 389,\n 389, 389, 722, 722, 778, 778, 778, 778, 778, 570, 778, 722, 722, 722, 722, 722,\n 611, 556, 500, 500, 500, 500, 500, 500, 722, 444, 444, 444, 444, 444, 278, 278,\n 278, 278, 500, 556, 500, 500, 500, 500, 500, 570, 500, 556, 556, 556, 556, 500,\n 556, 500\n ];\n /**\n * `Times italic` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.timesRomanItalicWidth = [\n 250, 333, 420, 500, 500, 833, 778, 214, 333, 333, 500, 675, 250, 333,\n 250, 278, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 333, 333, 675, 675,\n 675, 500, 920, 611, 611, 667, 722, 611, 611, 722, 722, 333, 444, 667, 556, 833,\n 667, 722, 611, 722, 611, 500, 556, 722, 611, 833, 611, 556, 556, 389, 278, 389,\n 422, 500, 333, 500, 500, 444, 500, 444, 278, 500, 500, 278, 278, 444, 278, 722,\n 500, 500, 500, 500, 389, 389, 278, 500, 444, 667, 444, 444, 389, 400, 275, 400,\n 541, 0, 500, 0, 333, 500, 556, 889, 500, 500, 333, 1000, 500, 333, 944, 0,\n 556, 0, 0, 333, 333, 556, 556, 350, 500, 889, 333, 980, 389, 333, 667, 0,\n 389, 556, 0, 389, 500, 500, 500, 500, 275, 500, 333, 760, 276, 500, 675, 0,\n 760, 333, 400, 675, 300, 300, 333, 500, 523, 250, 333, 300, 310, 500, 750, 750,\n 750, 500, 611, 611, 611, 611, 611, 611, 889, 667, 611, 611, 611, 611, 333, 333,\n 333, 333, 722, 667, 722, 722, 722, 722, 722, 675, 722, 722, 722, 722, 722, 556,\n 611, 500, 500, 500, 500, 500, 500, 500, 667, 444, 444, 444, 444, 444, 278, 278,\n 278, 278, 500, 500, 500, 500, 500, 500, 500, 675, 500, 500, 500, 500, 500, 444,\n 500, 444\n ];\n /**\n * `Times bold italic` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.timesRomanBoldItalicWidths = [\n 250, 389, 555, 500, 500, 833, 778, 278, 333, 333, 500, 570, 250, 333,\n 250, 278, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 333, 333, 570, 570,\n 570, 500, 832, 667, 667, 667, 722, 667, 667, 722, 778, 389, 500, 667, 611, 889,\n 722, 722, 611, 722, 667, 556, 611, 722, 667, 889, 667, 611, 611, 333, 278, 333,\n 570, 500, 333, 500, 500, 444, 500, 444, 333, 500, 556, 278, 278, 500, 278, 778,\n 556, 500, 500, 500, 389, 389, 278, 556, 444, 667, 500, 444, 389, 348, 220, 348,\n 570, 0, 500, 0, 333, 500, 500, 1000, 500, 500, 333, 1000, 556, 333, 944, 0,\n 611, 0, 0, 333, 333, 500, 500, 350, 500, 1000, 333, 1000, 389, 333, 722, 0,\n 389, 611, 0, 389, 500, 500, 500, 500, 220, 500, 333, 747, 266, 500, 606, 0,\n 747, 333, 400, 570, 300, 300, 333, 576, 500, 250, 333, 300, 300, 500, 750, 750,\n 750, 500, 667, 667, 667, 667, 667, 667, 944, 667, 667, 667, 667, 667, 389, 389,\n 389, 389, 722, 722, 722, 722, 722, 722, 722, 570, 722, 722, 722, 722, 722, 611,\n 611, 500, 500, 500, 500, 500, 500, 500, 722, 444, 444, 444, 444, 444, 278, 278,\n 278, 278, 500, 556, 500, 500, 500, 500, 500, 570, 500, 556, 556, 556, 556, 444,\n 500, 444\n ];\n /**\n * `Symbol` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.symbolWidth = [\n 250, 333, 713, 500, 549, 833, 778, 439, 333, 333, 500, 549, 250, 549,\n 250, 278, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 278, 278,\n 549, 549, 549, 444, 549, 722, 667, 722, 612, 611, 763, 603, 722, 333,\n 631, 722, 686, 889, 722, 722, 768, 741, 556, 592, 611, 690, 439, 768,\n 645, 795, 611, 333, 863, 333, 658, 500, 500, 631, 549, 549, 494, 439,\n 521, 411, 603, 329, 603, 549, 549, 576, 521, 549, 549, 521, 549, 603,\n 439, 576, 713, 686, 493, 686, 494, 480, 200, 480, 549, 750, 620, 247,\n 549, 167, 713, 500, 753, 753, 753, 753, 1042, 987, 603, 987, 603, 400,\n 549, 411, 549, 549, 713, 494, 460, 549, 549, 549, 549, 1000, 603, 1000,\n 658, 823, 686, 795, 987, 768, 768, 823, 768, 768, 713, 713, 713, 713,\n 713, 713, 713, 768, 713, 790, 790, 890, 823, 549, 250, 713, 603, 603,\n 1042, 987, 603, 987, 603, 494, 329, 790, 790, 786, 713, 384, 384, 384,\n 384, 384, 384, 494, 494, 494, 494, 329, 274, 686, 686, 686, 384, 384,\n 384, 384, 384, 384, 494, 494, 494, -1\n ];\n /**\n * `Zip dingbats` widths table.\n * @private\n */\n PdfStandardFontMetricsFactory.zapfDingbatsWidth = [\n 278, 974, 961, 974, 980, 719, 789, 790, 791, 690, 960, 939, 549, 855,\n 911, 933, 911, 945, 974, 755, 846, 762, 761, 571, 677, 763, 760, 759,\n 754, 494, 552, 537, 577, 692, 786, 788, 788, 790, 793, 794, 816, 823,\n 789, 841, 823, 833, 816, 831, 923, 744, 723, 749, 790, 792, 695, 776,\n 768, 792, 759, 707, 708, 682, 701, 826, 815, 789, 789, 707, 687, 696,\n 689, 786, 787, 713, 791, 785, 791, 873, 761, 762, 762, 759, 759, 892,\n 892, 788, 784, 438, 138, 277, 415, 392, 392, 668, 668, 390, 390, 317,\n 317, 276, 276, 509, 509, 410, 410, 234, 234, 334, 334, 732, 544, 544,\n 910, 667, 760, 760, 776, 595, 694, 626, 788, 788, 788, 788, 788, 788,\n 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788,\n 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788, 788,\n 788, 788, 788, 788, 788, 788, 894, 838, 1016, 458, 748, 924, 748, 918,\n 927, 928, 928, 834, 873, 828, 924, 924, 917, 930, 931, 463, 883, 836,\n 836, 867, 867, 696, 696, 874, 874, 760, 946, 771, 865, 771, 888, 967,\n 888, 831, 873, 927, 970, 918\n ];\n return PdfStandardFontMetricsFactory;\n}());\nexport { PdfStandardFontMetricsFactory };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfFontFamily, PdfFontStyle, FontEncoding } from './enum';\nimport { PdfFont } from './pdf-font';\nimport { PdfDocument } from './../../document/pdf-document';\nimport { PdfStandardFontMetricsFactory } from './pdf-standard-font-metrics-factory';\nimport { PdfDictionary } from './../../primitives/pdf-dictionary';\nimport { DictionaryProperties } from './../../input-output/pdf-dictionary-properties';\nimport { PdfName } from './../../primitives/pdf-name';\n/**\n * Represents one of the 14 standard fonts.\n * It's used to create a standard PDF font to draw the text in to the PDF.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // add a new page to the document\n * let page1 : PdfPage = document.pages.add();\n * //\n * // create new standard font\n * let font : PdfStandardFont = new PdfStandardFont(PdfFontFamily.Helvetica, 20);\n * //\n * // create black brush\n * let blackBrush : PdfSolidBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n * // draw the text\n * page1.graphics.drawString('Hello World', font, blackBrush, new PointF(0, 0));\n * // save the document\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfStandardFont = /** @class */ (function (_super) {\n __extends(PdfStandardFont, _super);\n function PdfStandardFont(fontFamilyPrototype, size, style) {\n var _this = _super.call(this, size, style) || this;\n /**\n * Gets `ascent` of the font.\n * @private\n */\n _this.dictionaryProperties = new DictionaryProperties();\n /**\n * Gets `encodings` for internal class use.\n * @hidden\n * @private\n */\n _this.encodings = ['Unknown', 'StandardEncoding', 'MacRomanEncoding', 'MacExpertEncoding',\n 'WinAnsiEncoding', 'PDFDocEncoding', 'IdentityH'];\n if ((typeof fontFamilyPrototype === 'number') && (typeof style === 'undefined')) {\n _this.constructor(fontFamilyPrototype, size, PdfFontStyle.Regular);\n }\n else if ((typeof fontFamilyPrototype === 'number') && (typeof style !== 'undefined')) {\n _this = _super.call(this, size, style) || this;\n _this.pdfFontFamily = fontFamilyPrototype;\n _this.checkStyle();\n _this.initializeInternals();\n }\n else if ((fontFamilyPrototype instanceof PdfStandardFont) && (typeof style === 'undefined')) {\n _this.constructor(fontFamilyPrototype.fontFamily, size, fontFamilyPrototype.style);\n }\n else if ((fontFamilyPrototype instanceof PdfStandardFont) && (typeof style !== 'undefined')) {\n _this.constructor(fontFamilyPrototype.fontFamily, size, style);\n }\n return _this;\n }\n Object.defineProperty(PdfStandardFont.prototype, \"fontFamily\", {\n //Properties\n /**\n * Gets the `FontFamily`.\n * @private\n */\n get: function () {\n return this.pdfFontFamily;\n },\n enumerable: true,\n configurable: true\n });\n //methods\n /**\n * Checks font `style` of the font.\n * @private\n */\n PdfStandardFont.prototype.checkStyle = function () {\n if (this.fontFamily === PdfFontFamily.Symbol || this.fontFamily === PdfFontFamily.ZapfDingbats) {\n var style = this.style;\n style &= ~(PdfFontStyle.Bold | PdfFontStyle.Italic);\n this.setStyle(style);\n }\n };\n /**\n * Returns `width` of the line.\n * @public\n */\n PdfStandardFont.prototype.getLineWidth = function (line, format) {\n if (line == null) {\n throw new Error('ArgumentNullException:line');\n }\n var width = 0;\n var name = this.name;\n line = PdfStandardFont.convert(line);\n for (var i = 0, len = line.length; i < len; i++) {\n var ch = line[i];\n var charWidth = this.getCharWidthInternal(ch, format);\n width += charWidth;\n }\n var size = this.metrics.getSize(format);\n width *= (PdfFont.charSizeMultiplier * size);\n width = this.applyFormatSettings(line, format, width);\n return width;\n };\n /**\n * Checks whether fonts are `equals`.\n * @private\n */\n PdfStandardFont.prototype.equalsToFont = function (font) {\n var equal = false;\n var stFont = font;\n if (stFont != null) {\n var fontFamilyEqual = (this.fontFamily === stFont.fontFamily);\n var lineReducer = (~(PdfFontStyle.Underline | PdfFontStyle.Strikeout));\n var styleEqual = (this.style & lineReducer) === (stFont.style & lineReducer);\n equal = (fontFamilyEqual && styleEqual);\n }\n return equal;\n };\n /**\n * `Initializes` font internals..\n * @private\n */\n PdfStandardFont.prototype.initializeInternals = function () {\n var equalFont = null;\n // if (PdfDocument.EnableCache) {\n equalFont = PdfDocument.cache.search(this);\n // }\n var internals = null;\n // if (equalFont == null) {\n // Create font metrics.\n var metrics = PdfStandardFontMetricsFactory.getMetrics(this.pdfFontFamily, this.style, this.size);\n this.metrics = metrics;\n internals = this.createInternals();\n this.setInternals(internals);\n };\n /**\n * `Creates` font`s dictionary.\n * @private\n */\n PdfStandardFont.prototype.createInternals = function () {\n var dictionary = new PdfDictionary();\n dictionary.items.setValue(this.dictionaryProperties.type, new PdfName(this.dictionaryProperties.font));\n dictionary.items.setValue(this.dictionaryProperties.subtype, new PdfName(this.dictionaryProperties.type1));\n dictionary.items.setValue(this.dictionaryProperties.baseFont, new PdfName(this.metrics.postScriptName));\n if (this.fontFamily !== PdfFontFamily.Symbol && this.fontFamily !== PdfFontFamily.ZapfDingbats) {\n var encoding = this.encodings[FontEncoding.WinAnsiEncoding];\n dictionary.items.setValue(this.dictionaryProperties.encoding, new PdfName(encoding));\n }\n return dictionary;\n };\n /**\n * Returns `width` of the char. This methods doesn`t takes into consideration font`s size.\n * @private\n */\n PdfStandardFont.prototype.getCharWidthInternal = function (charCode, format) {\n var width = 0;\n var code = 0;\n code = charCode.charCodeAt(0);\n if (this.name === '0' || this.name === '1' || this.name === '2' ||\n this.name === '3' || this.name === '4') {\n code = code - PdfStandardFont.charOffset;\n }\n code = (code >= 0 && code !== 128) ? code : 0;\n var metrics = this.metrics;\n var widthTable = metrics.widthTable;\n width = widthTable.items(code);\n return width;\n };\n /**\n * `Converts` the specified text.\n * @private\n */\n PdfStandardFont.convert = function (text) {\n return text;\n };\n //Constants\n /**\n * First character `position`.\n * @private\n */\n PdfStandardFont.charOffset = 32;\n return PdfStandardFont;\n}(PdfFont));\nexport { PdfStandardFont };\n","import { PdfColor } from './../graphics/pdf-color';\nimport { RectangleF, PointF } from './../drawing/pdf-drawing';\nimport { PdfDictionary, SaveAnnotationEventHandler } from './../primitives/pdf-dictionary';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { PdfString } from './../primitives/pdf-string';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfSolidBrush } from './../graphics/brushes/pdf-solid-brush';\nimport { PdfStandardFont } from './../graphics/fonts/pdf-standard-font';\nimport { PdfFontFamily } from './../graphics/fonts/enum';\nimport { PdfStringFormat } from './../graphics/fonts/pdf-string-format';\nimport { PdfTextAlignment } from './../graphics/enum';\n/**\n * `PdfAnnotation` class represents the base class for annotation objects.\n * @private\n */\nvar PdfAnnotation = /** @class */ (function () {\n function PdfAnnotation(arg1) {\n // Fields\n /**\n * Specifies the Internal variable to store fields of `PdfDictionaryProperties`.\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n /**\n * `Color` of the annotation\n * @private\n */\n this.pdfColor = new PdfColor(255, 255, 255);\n /**\n * `Bounds` of the annotation.\n * @private\n */\n this.rectangle = new RectangleF(0, 0, 0, 0);\n /**\n * Parent `page` of the annotation.\n * @private\n */\n this.pdfPage = null;\n /**\n * `Brush of the text` of the annotation.\n * @default new PdfSolidBrush(new PdfColor(0, 0, 0))\n * @private\n */\n this.textBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n /**\n * `Font of the text` of the annotation.\n * @default new PdfStandardFont(PdfFontFamily.TimesRoman, 10)\n * @private\n */\n this.textFont = new PdfStandardFont(PdfFontFamily.TimesRoman, 10);\n /**\n * `StringFormat of the text` of the annotation.\n * @default new PdfStringFormat(PdfTextAlignment.Left)\n * @private\n */\n this.format = new PdfStringFormat(PdfTextAlignment.Left);\n /**\n * `Text` of the annotation.\n * @private\n */\n this.content = '';\n /**\n * Internal variable to store `dictionary`.\n * @private\n */\n this.pdfDictionary = new PdfDictionary();\n /**\n * To specifying the `Inner color` with which to fill the annotation\n * @private\n */\n this.internalColor = new PdfColor();\n /**\n * `opacity or darkness` of the annotation.\n * @private\n * @default 1.0\n */\n this.darkness = 1.0;\n if (typeof arg1 === 'undefined') {\n this.initialize();\n }\n else {\n this.initialize();\n this.bounds = arg1;\n }\n }\n Object.defineProperty(PdfAnnotation.prototype, \"color\", {\n // Properties\n /**\n * `Color` of the annotation\n * @private\n */\n get: function () {\n return this.pdfColor;\n },\n set: function (value) {\n this.pdfColor = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"innerColor\", {\n /**\n * To specifying the `Inner color` with which to fill the annotation\n * @private\n */\n get: function () {\n return this.internalColor;\n },\n set: function (value) {\n this.internalColor = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"bounds\", {\n /**\n * `bounds` of the annotation.\n * @private\n */\n get: function () {\n return this.rectangle;\n },\n set: function (value) {\n this.rectangle = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"page\", {\n /**\n * Parent `page` of the annotation.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"font\", {\n /**\n * To specifying the `Font of the text` in the annotation.\n * @private\n */\n get: function () {\n return this.textFont;\n },\n set: function (value) {\n this.textFont = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"stringFormat\", {\n /**\n * To specifying the `StringFormat of the text` in the annotation.\n * @private\n */\n get: function () {\n return this.format;\n },\n set: function (value) {\n this.format = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"brush\", {\n /**\n * To specifying the `Brush of the text` in the annotation.\n * @private\n */\n get: function () {\n return this.textBrush;\n },\n set: function (value) {\n this.textBrush = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"text\", {\n /**\n * `Text` of the annotation.\n * @private\n */\n get: function () {\n return this.content;\n },\n set: function (value) {\n this.content = value;\n this.dictionary.items.setValue(this.dictionaryProperties.contents, new PdfString(this.content));\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfAnnotation.prototype, \"dictionary\", {\n /**\n * Internal variable to store `dictionary`.\n * @hidden\n */\n get: function () {\n return this.pdfDictionary;\n },\n set: function (value) {\n this.pdfDictionary = value;\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Initialize` the annotation event handler and specifies the type of the annotation.\n * @private\n */\n PdfAnnotation.prototype.initialize = function () {\n this.pdfDictionary.annotationBeginSave = new SaveAnnotationEventHandler(this);\n this.pdfDictionary.items.setValue(this.dictionaryProperties.type, new PdfName(this.dictionaryProperties.annot));\n };\n /**\n * Sets related `page` of the annotation.\n * @private\n */\n PdfAnnotation.prototype.setPage = function (page) {\n this.pdfPage = page;\n this.pdfDictionary.items.setValue(this.dictionaryProperties.p, new PdfReferenceHolder(this.pdfPage));\n };\n /**\n * Handles the `BeginSave` event of the Dictionary.\n * @private\n */\n PdfAnnotation.prototype.beginSave = function () {\n this.save();\n };\n /**\n * `Saves` an annotation.\n * @private\n */\n /* tslint:disable */\n PdfAnnotation.prototype.save = function () {\n var nativeRectangle = new RectangleF(this.rectangle.x, this.rectangle.y, this.rectangle.width, this.rectangle.height);\n var section = this.pdfPage.section;\n var initialHeight = nativeRectangle.height;\n var tempLoacation = section.pointToNativePdf(this.page, new PointF(nativeRectangle.x, nativeRectangle.y));\n nativeRectangle.x = tempLoacation.x;\n nativeRectangle.width = tempLoacation.x + nativeRectangle.width;\n nativeRectangle.y = (tempLoacation.y - this.page.document.pageSettings.margins.top);\n nativeRectangle.height = nativeRectangle.y - initialHeight;\n this.pdfDictionary.items.setValue(this.dictionaryProperties.rect, PdfArray.fromRectangle(nativeRectangle));\n this.dictionary.items.setValue(this.dictionaryProperties.ca, new PdfNumber(this.darkness));\n };\n Object.defineProperty(PdfAnnotation.prototype, \"element\", {\n /* tslint:enable */\n // IPdfWrapper Members\n /**\n * Gets the `element`.\n * @private\n */\n get: function () {\n return this.pdfDictionary;\n },\n enumerable: true,\n configurable: true\n });\n return PdfAnnotation;\n}());\nexport { PdfAnnotation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfAnnotation } from './annotation';\nimport { PdfName } from './../primitives/pdf-name';\n/**\n * `PdfLinkAnnotation` class represents the ink annotation class.\n * @private\n */\nvar PdfLinkAnnotation = /** @class */ (function (_super) {\n __extends(PdfLinkAnnotation, _super);\n function PdfLinkAnnotation(rectangle) {\n var _this = this;\n if (typeof rectangle === 'undefined') {\n _this = _super.call(this) || this;\n }\n else {\n _this = _super.call(this, rectangle) || this;\n }\n return _this;\n }\n // Implementation\n /**\n * `Initializes` annotation object.\n * @private\n */\n PdfLinkAnnotation.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n this.dictionary.items.setValue(this.dictionaryProperties.subtype, new PdfName(this.dictionaryProperties.link));\n };\n return PdfLinkAnnotation;\n}(PdfAnnotation));\nexport { PdfLinkAnnotation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfLinkAnnotation } from './link-annotation';\n/**\n * Represents base class for `link annotations` with associated action.\n * @private\n */\nvar PdfActionLinkAnnotation = /** @class */ (function (_super) {\n __extends(PdfActionLinkAnnotation, _super);\n // Constructors\n /**\n * Specifies the constructor for `ActionLinkAnnotation`.\n * @private\n */\n function PdfActionLinkAnnotation(rectangle) {\n var _this = _super.call(this, rectangle) || this;\n // Fields\n /**\n * Internal variable to store annotation's `action`.\n * @default null\n * @private\n */\n _this.pdfAction = null;\n return _this;\n }\n //Public method\n /**\n * get and set the `action`.\n * @hidden\n */\n PdfActionLinkAnnotation.prototype.getSetAction = function (value) {\n if (typeof value === 'undefined') {\n return this.pdfAction;\n }\n else {\n this.pdfAction = value;\n }\n };\n return PdfActionLinkAnnotation;\n}(PdfLinkAnnotation));\nexport { PdfActionLinkAnnotation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfLinkAnnotation } from './link-annotation';\n/**\n * `PdfDocumentLinkAnnotation` class represents an annotation object with holds link on another location within a document.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create new pages\n * let page1 : PdfPage = document.pages.add();\n * let page2 : PdfPage = document.pages.add();\n * // create a new rectangle\n * let bounds : RectangleF = new RectangleF({x : 10, y : 200}, {width : 300, height : 25});\n * //\n * // create a new document link annotation\n * let documentLinkAnnotation : PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation(bounds);\n * // set the annotation text\n * documentLinkAnnotation.text = 'Document link annotation';\n * // set the destination\n * documentLinkAnnotation.destination = new PdfDestination(page2);\n * // set the documentlink annotation location\n * documentLinkAnnotation.destination.location = new PointF(10, 0);\n * // add this annotation to a new page\n * page1.annotations.add(documentLinkAnnotation);\n * //\n * // save the document to disk\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfDocumentLinkAnnotation = /** @class */ (function (_super) {\n __extends(PdfDocumentLinkAnnotation, _super);\n function PdfDocumentLinkAnnotation(rectangle, destination) {\n var _this = _super.call(this, rectangle) || this;\n // Fields\n /**\n * `Destination` of the annotation.\n * @default null\n * @private\n */\n _this.pdfDestination = null;\n if (typeof destination !== 'undefined') {\n _this.destination = destination;\n }\n return _this;\n }\n Object.defineProperty(PdfDocumentLinkAnnotation.prototype, \"destination\", {\n // Properties\n /**\n * Gets or sets the `destination` of the annotation.\n * ```typescript\n * // create a new PDF document\n * let document : PdfDocument = new PdfDocument();\n * // create new pages\n * let page1 : PdfPage = document.pages.add();\n * let page2 : PdfPage = document.pages.add();\n * // create a new rectangle\n * let bounds : RectangleF = new RectangleF({x : 10, y : 200}, {width : 300, height : 25});\n * //\n * // create a new document link annotation\n * let documentLinkAnnotation : PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation(bounds);\n * // set the annotation text\n * documentLinkAnnotation.text = 'Document link annotation';\n * // set the destination\n * documentLinkAnnotation.destination = new PdfDestination(page2);\n * // set the documentlink annotation location\n * documentLinkAnnotation.destination.location = new PointF(10, 0);\n * // add this annotation to a new page\n * page1.annotations.add(documentLinkAnnotation);\n * //\n * // save the document to disk\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n * @default null\n */\n get: function () {\n return this.pdfDestination;\n },\n set: function (value) {\n // if (this.pdfDestination !== value) {\n this.pdfDestination = value;\n // }\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Saves` annotation object.\n * @private\n */\n PdfDocumentLinkAnnotation.prototype.save = function () {\n _super.prototype.save.call(this);\n if (this.pdfDestination != null) {\n this.dictionary.items.setValue(this.dictionaryProperties.dest, this.pdfDestination.element);\n }\n };\n /**\n * `Clone` the document link annotation.\n * @private\n */\n PdfDocumentLinkAnnotation.prototype.clone = function () {\n var annot = new PdfDocumentLinkAnnotation(this.bounds, this.destination);\n annot.color = this.color;\n annot.brush = this.brush;\n annot.destination = this.destination;\n annot.font = this.font;\n return annot;\n };\n return PdfDocumentLinkAnnotation;\n}(PdfLinkAnnotation));\nexport { PdfDocumentLinkAnnotation };\n","/**\n * ElementLayouter.ts class for EJ2-PDF\n */\nimport { RectangleF } from './../../../drawing/pdf-drawing';\nimport { PdfLayoutType, PdfLayoutBreakType } from './../enum';\n/**\n * Base class for `elements lay outing`.\n * @private\n */\nvar ElementLayouter = /** @class */ (function () {\n // Constructor\n /**\n * Initializes a new instance of the `ElementLayouter` class.\n * @private\n */\n function ElementLayouter(element) {\n this.layoutElement = element;\n }\n Object.defineProperty(ElementLayouter.prototype, \"elements\", {\n // Properties\n /**\n * Gets the `element`.\n * @private\n */\n get: function () {\n return this.layoutElement;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets the `element`.\n * @private\n */\n ElementLayouter.prototype.getElement = function () {\n return this.layoutElement;\n };\n ElementLayouter.prototype.layout = function (param, isBoundsChanged) {\n if (typeof isBoundsChanged === 'boolean' && isBoundsChanged === true) {\n return this.layoutInternal(param, true);\n }\n else {\n return this.layoutInternal(param);\n }\n };\n /**\n * Returns the `next page`.\n * @private\n */\n ElementLayouter.prototype.getNextPage = function (currentPage) {\n var section = currentPage.section;\n var nextPage = section.add();\n return nextPage;\n };\n return ElementLayouter;\n}());\nexport { ElementLayouter };\nvar PdfLayoutFormat = /** @class */ (function () {\n function PdfLayoutFormat(baseFormat) {\n if (typeof baseFormat === 'undefined') {\n //\n }\n else {\n this.break = baseFormat.break;\n this.layout = baseFormat.layout;\n this.paginateBounds = baseFormat.paginateBounds;\n this.boundsSet = baseFormat.usePaginateBounds;\n }\n }\n Object.defineProperty(PdfLayoutFormat.prototype, \"layout\", {\n // Properties\n /**\n * Gets or sets `layout` type of the element.\n * @private\n */\n get: function () {\n if (typeof this.layoutType === 'undefined' || this.layoutType == null) {\n this.layoutType = PdfLayoutType.Paginate;\n }\n return this.layoutType;\n },\n set: function (value) {\n this.layoutType = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfLayoutFormat.prototype, \"break\", {\n /**\n * Gets or sets `break` type of the element.\n * @private\n */\n get: function () {\n if (typeof this.breakType === 'undefined' || this.boundsSet == null) {\n this.breakType = PdfLayoutBreakType.FitPage;\n }\n return this.breakType;\n },\n set: function (value) {\n this.breakType = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfLayoutFormat.prototype, \"paginateBounds\", {\n /**\n * Gets or sets the `bounds` on the next page.\n * @private\n */\n get: function () {\n if (typeof this.layoutPaginateBounds === 'undefined' && this.layoutPaginateBounds == null) {\n this.layoutPaginateBounds = new RectangleF(0, 0, 0, 0);\n }\n return this.layoutPaginateBounds;\n },\n set: function (value) {\n this.layoutPaginateBounds = value;\n this.boundsSet = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfLayoutFormat.prototype, \"usePaginateBounds\", {\n /**\n * Gets a value indicating whether [`use paginate bounds`].\n * @private\n */\n get: function () {\n if (typeof this.boundsSet === 'undefined' || this.boundsSet == null) {\n this.boundsSet = false;\n }\n return this.boundsSet;\n },\n enumerable: true,\n configurable: true\n });\n return PdfLayoutFormat;\n}());\nexport { PdfLayoutFormat };\nvar PdfLayoutParams = /** @class */ (function () {\n function PdfLayoutParams() {\n }\n Object.defineProperty(PdfLayoutParams.prototype, \"page\", {\n // Properties\n /**\n * Gets or sets the layout `page` for the element.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n set: function (value) {\n this.pdfPage = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfLayoutParams.prototype, \"bounds\", {\n /**\n * Gets or sets layout `bounds` for the element.\n * @private\n */\n get: function () {\n return new RectangleF(this.layoutBounds.x, this.layoutBounds.y, this.layoutBounds.width, this.layoutBounds.height);\n },\n set: function (value) {\n this.layoutBounds = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfLayoutParams.prototype, \"format\", {\n /**\n * Gets or sets `layout settings` for the element.\n * @private\n */\n get: function () {\n return this.layoutFormat;\n },\n set: function (value) {\n this.layoutFormat = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfLayoutParams;\n}());\nexport { PdfLayoutParams };\nvar PdfLayoutResult = /** @class */ (function () {\n // Constructors\n /**\n * Initializes the new instance of `PdfLayoutResult` class.\n * @private\n */\n function PdfLayoutResult(page, bounds) {\n this.pdfPage = page;\n this.layoutBounds = bounds;\n }\n Object.defineProperty(PdfLayoutResult.prototype, \"page\", {\n // Properties\n /**\n * Gets the last `page` where the element was drawn.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfLayoutResult.prototype, \"bounds\", {\n /**\n * Gets the `bounds` of the element on the last page where it was drawn.\n * @private\n */\n get: function () {\n return this.layoutBounds;\n },\n enumerable: true,\n configurable: true\n });\n return PdfLayoutResult;\n}());\nexport { PdfLayoutResult };\n","/**\n * public Enum for `PdfDestinationMode`.\n * @private\n */\nexport var PdfDestinationMode;\n(function (PdfDestinationMode) {\n /**\n * Specifies the type of `Location`.\n * @private\n */\n PdfDestinationMode[PdfDestinationMode[\"Location\"] = 0] = \"Location\";\n /**\n * Specifies the type of `FitToPage`.\n * @private\n */\n PdfDestinationMode[PdfDestinationMode[\"FitToPage\"] = 1] = \"FitToPage\";\n /**\n * Specifies the type of `FitR`.\n * @private\n */\n PdfDestinationMode[PdfDestinationMode[\"FitR\"] = 2] = \"FitR\";\n})(PdfDestinationMode || (PdfDestinationMode = {}));\n","import { RectangleF, PointF } from './../../drawing/pdf-drawing';\nimport { PdfLayoutParams, PdfLayoutFormat } from './base/element-layouter';\n/**\n * `PdfLayoutElement` class represents the base class for all elements that can be layout on the pages.\n * @private\n */\nvar PdfLayoutElement = /** @class */ (function () {\n function PdfLayoutElement() {\n }\n PdfLayoutElement.prototype.drawHelper = function (arg2, arg3, arg4, arg5) {\n if (arg3 instanceof PointF && typeof arg3.width === 'undefined' && typeof arg3 === 'undefined') {\n return this.drawHelper(arg2, arg3.x, arg3.y);\n }\n else if (typeof arg3 === 'number' && typeof arg4 === 'number' && typeof arg5 === 'undefined') {\n return this.drawHelper(arg2, arg3, arg4, null);\n }\n else if (arg3 instanceof RectangleF && typeof arg3.width !== 'undefined' && typeof arg4 === 'undefined') {\n return this.drawHelper(arg2, arg3, null);\n }\n else if (arg3 instanceof PointF && typeof arg3.width === 'undefined' && arg4 instanceof PdfLayoutFormat) {\n return this.drawHelper(arg2, arg3.x, arg3.y, arg4);\n }\n else if (typeof arg3 === 'number' && typeof arg4 === 'number' && (arg5 instanceof PdfLayoutFormat || arg5 == null)) {\n var width = (arg2.graphics.clientSize.width - arg3);\n var layoutRectangle = new RectangleF(arg3, arg4, width, 0);\n return this.drawHelper(arg2, layoutRectangle, arg5);\n }\n else if (arg3 instanceof RectangleF && typeof arg3.width !== 'undefined' && typeof arg4 === 'boolean') {\n this.bEmbedFonts = arg4;\n return this.drawHelper(arg2, arg3, null);\n }\n else {\n var param = new PdfLayoutParams();\n var temparg3 = arg3;\n var temparg4 = arg4;\n param.page = arg2;\n param.bounds = temparg3;\n param.format = (temparg4 != null) ? temparg4 : new PdfLayoutFormat();\n var result = this.layout(param);\n return result;\n }\n };\n return PdfLayoutElement;\n}());\nexport { PdfLayoutElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * TextLayouter.ts class for EJ2-PDF\n */\nimport { ElementLayouter, PdfLayoutResult } from './element-layouter';\nimport { RectangleF, SizeF } from './../../../drawing/pdf-drawing';\nimport { PdfStringLayouter } from './../../fonts/string-layouter';\nimport { PdfLayoutBreakType } from './../../figures/enum';\nimport { PdfColor } from './../../pdf-color';\nimport { PdfTextWebLink } from './../../../annotations/pdf-text-web-link';\n/**\n * Class that `layouts the text`.\n * @private\n */\nvar TextLayouter = /** @class */ (function (_super) {\n __extends(TextLayouter, _super);\n // Constructors\n /**\n * Initializes a new instance of the `TextLayouter` class.\n * @private\n */\n function TextLayouter(element) {\n return _super.call(this, element) || this;\n }\n Object.defineProperty(TextLayouter.prototype, \"element\", {\n /**\n * Gets the layout `element`.\n * @private\n */\n get: function () {\n return _super.prototype.getElement.call(this);\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Layouts` the element.\n * @private\n */\n TextLayouter.prototype.layoutInternal = function (param) {\n /* tslint:disable */\n this.format = (this.element.stringFormat != null && typeof this.element.stringFormat !== 'undefined') ? this.element.stringFormat : null;\n var currentPage = param.page;\n var currentBounds = param.bounds;\n var text = this.element.value;\n var result = null;\n var pageResult = new TextPageLayoutResult();\n pageResult.page = currentPage;\n pageResult.remainder = text;\n for (;;) {\n pageResult = this.layoutOnPage(text, currentPage, currentBounds, param);\n result = this.getLayoutResult(pageResult);\n break;\n }\n /* tslint:enable */\n return result;\n };\n /**\n * Raises `PageLayout` event if needed.\n * @private\n */\n TextLayouter.prototype.getLayoutResult = function (pageResult) {\n var result = new PdfTextLayoutResult(pageResult.page, pageResult.bounds, pageResult.remainder, pageResult.lastLineBounds);\n return result;\n };\n /* tslint:disable */\n /**\n * `Layouts` the text on the page.\n * @private\n */\n TextLayouter.prototype.layoutOnPage = function (text, currentPage, currentBounds, param) {\n var result = new TextPageLayoutResult();\n result.remainder = text;\n result.page = currentPage;\n currentBounds = this.checkCorrectBounds(currentPage, currentBounds);\n var layouter = new PdfStringLayouter();\n var stringResult = layouter.layout(text, this.element.font, this.format, currentBounds, currentPage.getClientSize().height, false, new SizeF(0, 0));\n var textFinished = (stringResult.remainder == null);\n var doesntFit = (param.format.break === PdfLayoutBreakType.FitElement);\n var canDraw = !(doesntFit || stringResult.empty);\n // Draw the text.\n var graphics = currentPage.graphics;\n var brush = this.element.getBrush();\n if (this.element instanceof PdfTextWebLink) {\n brush.color = new PdfColor(0, 0, 255);\n }\n graphics.drawStringLayoutResult(stringResult, this.element.font, this.element.pen, brush, currentBounds, this.format);\n var lineInfo = stringResult.lines[stringResult.lineCount - 1];\n result.lastLineBounds = graphics.getLineBounds(stringResult.lineCount - 1, stringResult, this.element.font, currentBounds, this.format);\n result.bounds = this.getTextPageBounds(currentPage, currentBounds, stringResult);\n result.remainder = stringResult.remainder;\n result.end = (textFinished);\n return result;\n };\n /* tslint:enable */\n /**\n * `Corrects current bounds` on the page.\n * @private\n */\n TextLayouter.prototype.checkCorrectBounds = function (currentPage, currentBounds) {\n var pageSize = currentPage.graphics.clientSize;\n currentBounds.height = (currentBounds.height > 0) ? currentBounds.height : pageSize.height - currentBounds.y;\n return currentBounds;\n };\n /**\n * Returns a `rectangle` where the text was printed on the page.\n * @private\n */\n /* tslint:disable */\n TextLayouter.prototype.getTextPageBounds = function (currentPage, currentBounds, stringResult) {\n var textSize = stringResult.actualSize;\n var x = currentBounds.x;\n var y = currentBounds.y;\n var width = (currentBounds.width > 0) ? currentBounds.width : textSize.width;\n var height = textSize.height;\n var shiftedRect = currentPage.graphics.checkCorrectLayoutRectangle(textSize, currentBounds.x, currentBounds.y, this.format);\n // if (currentBounds.width <= 0) {\n x = shiftedRect.x;\n // }\n var verticalShift = currentPage.graphics.getTextVerticalAlignShift(textSize.height, currentBounds.height, this.format);\n y += verticalShift;\n var bounds = new RectangleF(x, y, width, height);\n return bounds;\n };\n return TextLayouter;\n}(ElementLayouter));\nexport { TextLayouter };\nvar TextPageLayoutResult = /** @class */ (function () {\n function TextPageLayoutResult() {\n }\n return TextPageLayoutResult;\n}());\nexport { TextPageLayoutResult };\nvar PdfTextLayoutResult = /** @class */ (function (_super) {\n __extends(PdfTextLayoutResult, _super);\n // Constructors\n /**\n * Initializes the new instance of `PdfTextLayoutResult` class.\n * @private\n */\n function PdfTextLayoutResult(page, bounds, remainder, lastLineBounds) {\n var _this = _super.call(this, page, bounds) || this;\n _this.remainderText = remainder;\n _this.lastLineTextBounds = lastLineBounds;\n return _this;\n }\n Object.defineProperty(PdfTextLayoutResult.prototype, \"remainder\", {\n // Properties\n /**\n * Gets a value that contains the `text` that was not printed.\n * @private\n */\n get: function () {\n return this.remainderText;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTextLayoutResult.prototype, \"lastLineBounds\", {\n /**\n * Gets a value that indicates the `bounds` of the last line that was printed on the page.\n * @private\n */\n get: function () {\n return this.lastLineTextBounds;\n },\n enumerable: true,\n configurable: true\n });\n return PdfTextLayoutResult;\n}(PdfLayoutResult));\nexport { PdfTextLayoutResult };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfTextElement.ts class for EJ2-PDF\n */\nimport { PdfLayoutElement } from './../figures/layout-element';\nimport { PdfBrush } from './../brushes/pdf-brush';\nimport { PdfFont } from './../fonts/pdf-font';\nimport { PdfStandardFont } from './../fonts/pdf-standard-font';\nimport { PdfPen } from './../pdf-pen';\nimport { PdfLayoutParams } from './../figures/base/element-layouter';\nimport { TextLayouter } from './base/text-layouter';\nimport { PdfSolidBrush } from './../brushes/pdf-solid-brush';\nimport { PdfColor } from './../pdf-color';\nimport { RectangleF, SizeF, PointF } from './../../drawing/pdf-drawing';\nimport { PdfLayoutFormat } from './base/element-layouter';\nimport { PdfStringLayouter } from './../fonts/string-layouter';\nimport { PdfTextAlignment } from './../enum';\n/**\n * `PdfTextElement` class represents the text area with the ability to span several pages\n * and inherited from the 'PdfLayoutElement' class.\n * @private\n */\nvar PdfTextElement = /** @class */ (function (_super) {\n __extends(PdfTextElement, _super);\n function PdfTextElement(arg1, arg2, arg3, arg4, arg5) {\n var _this = _super.call(this) || this;\n // Fields\n /**\n * `Text` data.\n * @private\n */\n _this.content = '';\n /**\n * `Value` of text data.\n * @private\n */\n _this.elementValue = '';\n /**\n * indicate whether the drawText with PointF overload is called or not.\n * @default false\n * @private\n */\n _this.hasPointOverload = false;\n /**\n * indicate whether the PdfGridCell value is `PdfTextElement`\n * @default false\n * @private\n */\n _this.isPdfTextElement = false;\n if (typeof arg1 === 'undefined') {\n //\n }\n else if (typeof arg1 === 'string' && typeof arg2 === 'undefined') {\n _this = _super.call(this) || this;\n _this.content = arg1;\n _this.elementValue = arg1;\n }\n else if (typeof arg1 === 'string' && arg2 instanceof PdfFont && typeof arg3 === 'undefined') {\n _this = _super.call(this) || this;\n _this.content = arg1;\n _this.elementValue = arg1;\n _this.pdfFont = arg2;\n }\n else if (typeof arg1 === 'string' && arg2 instanceof PdfFont && arg3 instanceof PdfPen && typeof arg4 === 'undefined') {\n _this = _super.call(this) || this;\n _this.content = arg1;\n _this.elementValue = arg1;\n _this.pdfFont = arg2;\n _this.pdfPen = arg3;\n }\n else if (typeof arg1 === 'string' && arg2 instanceof PdfFont && arg3 instanceof PdfBrush && typeof arg4 === 'undefined') {\n _this = _super.call(this) || this;\n _this.content = arg1;\n _this.elementValue = arg1;\n _this.pdfFont = arg2;\n _this.pdfBrush = arg3;\n }\n else {\n _this = _super.call(this) || this;\n _this.content = arg1;\n _this.elementValue = arg1;\n _this.pdfFont = arg2;\n _this.pdfPen = arg3;\n _this.pdfBrush = arg4;\n _this.format = arg5;\n }\n return _this;\n }\n Object.defineProperty(PdfTextElement.prototype, \"text\", {\n // Properties\n /**\n * Gets or sets a value indicating the `text` that should be printed.\n * ```typescript\n * // create a new PDF document.\n * let document : PdfDocument = new PdfDocument();\n * // add a page to the document.\n * let page1 : PdfPage = document.pages.add();\n * // create the font\n * let font : PdfFont = new PdfStandardFont(PdfFontFamily.Helvetica, 12);\n * // create the Text Web Link\n * let textLink : PdfTextWebLink = new PdfTextWebLink();\n * // set the hyperlink\n * textLink.url = 'http://www.google.com';\n * //\n * // set the link text\n * textLink.text = 'Google';\n * //\n * // set the font\n * textLink.font = font;\n * // draw the hyperlink in PDF page\n * textLink.draw(page1, new PointF(10, 40));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.content;\n },\n set: function (value) {\n this.elementValue = value;\n this.content = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTextElement.prototype, \"value\", {\n //get value\n /**\n * Gets or sets a `value` indicating the text that should be printed.\n * @private\n */\n get: function () {\n return this.elementValue;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTextElement.prototype, \"pen\", {\n //get pen\n /**\n * Gets or sets a `PdfPen` that determines the color, width, and style of the text\n * @private\n */\n get: function () {\n return this.pdfPen;\n },\n //Set pen value\n set: function (value) {\n this.pdfPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTextElement.prototype, \"brush\", {\n //get brush\n /**\n * Gets or sets the `PdfBrush` that will be used to draw the text with color and texture.\n * @private\n */\n get: function () {\n return this.pdfBrush;\n },\n //Set brush value\n set: function (value) {\n this.pdfBrush = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTextElement.prototype, \"font\", {\n //get font\n /**\n * Gets or sets a `PdfFont` that defines the text format.\n * ```typescript\n * // create a new PDF document.\n * let document : PdfDocument = new PdfDocument();\n * // add a page to the document.\n * let page1 : PdfPage = document.pages.add();\n * // create the font\n * let font : PdfFont = new PdfStandardFont(PdfFontFamily.Helvetica, 12);\n * // create the Text Web Link\n * let textLink : PdfTextWebLink = new PdfTextWebLink();\n * // set the hyperlink\n * textLink.url = 'http://www.google.com';\n * // set the link text\n * textLink.text = 'Google';\n * //\n * // set the font\n * textLink.font = font;\n * //\n * // draw the hyperlink in PDF page\n * textLink.draw(page1, new PointF(10, 40));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.pdfFont;\n },\n set: function (value) {\n this.pdfFont = value;\n if (this.pdfFont instanceof PdfStandardFont && this.content != null) {\n this.elementValue = PdfStandardFont.convert(this.content);\n }\n else {\n this.elementValue = this.content;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTextElement.prototype, \"stringFormat\", {\n /**\n * Gets or sets the `PdfStringFormat` that will be used to set the string format\n * @private\n */\n get: function () {\n return this.format;\n },\n set: function (value) {\n this.format = value;\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * Gets a `brush` for drawing.\n * @private\n */\n PdfTextElement.prototype.getBrush = function () {\n return (this.pdfBrush == null || typeof this.pdfBrush === 'undefined') ? new PdfSolidBrush(new PdfColor(0, 0, 0)) : this.pdfBrush;\n };\n // /**\n // * `Draws` an element on the Graphics.\n // * @private\n // */\n // public drawInternal(graphics : PdfGraphics) : void {\n // graphics.drawString(this.elementValue, this.pdfFont, this.pdfPen, this.getBrush(), 0, 0, this.stringFormat);\n // }\n /**\n * `Layouts` the element.\n * @private\n */\n PdfTextElement.prototype.layout = function (param) {\n var layouter = new TextLayouter(this);\n var result = layouter.layout(param);\n return result;\n };\n PdfTextElement.prototype.drawText = function (arg2, arg3, arg4, arg5) {\n if (arg3 instanceof PointF && typeof arg3.width === 'undefined' && typeof arg4 === 'undefined') {\n this.hasPointOverload = true;\n return this.drawText(arg2, arg3.x, arg3.y);\n }\n else if (typeof arg3 === 'number' && typeof arg4 === 'number' && typeof arg5 === 'undefined') {\n this.hasPointOverload = true;\n return this.drawText(arg2, arg3, arg4, null);\n }\n else if (arg3 instanceof RectangleF && typeof arg3.width !== 'undefined' && typeof arg4 === 'undefined') {\n return this.drawText(arg2, arg3, null);\n }\n else if (arg3 instanceof PointF && typeof arg3.width === 'undefined' && arg4 instanceof PdfLayoutFormat) {\n this.hasPointOverload = true;\n return this.drawText(arg2, arg3.x, arg3.y, arg4);\n }\n else if (typeof arg3 === 'number' && typeof arg4 === 'number' && (arg5 instanceof PdfLayoutFormat || arg5 == null)) {\n this.hasPointOverload = true;\n var width = (arg2.graphics.clientSize.width - arg3);\n var layoutRectangle = new RectangleF(arg3, arg4, width, 0);\n return this.drawText(arg2, layoutRectangle, arg5);\n }\n else if (arg3 instanceof RectangleF && typeof arg3.width !== 'undefined' && typeof arg4 === 'boolean') {\n return this.drawText(arg2, arg3, null);\n }\n else {\n var layout = new PdfStringLayouter();\n if (this.hasPointOverload) {\n var stringLayoutResult = layout.layout(this.value, this.font, this.stringFormat, new SizeF((arg2.graphics.clientSize.width - arg3.x), 0), true, arg2.graphics.clientSize);\n var layoutResult = void 0;\n var param = new PdfLayoutParams();\n var temparg3 = arg3;\n var temparg4 = arg4;\n param.page = arg2;\n var previousPage = arg2;\n param.bounds = temparg3;\n param.format = (temparg4 != null) ? temparg4 : new PdfLayoutFormat();\n if (stringLayoutResult.lines.length > 1) {\n this.text = stringLayoutResult.layoutLines[0].text;\n if (param.bounds.y <= param.page.graphics.clientSize.height) {\n var previousPosition = new PointF(param.bounds.x, param.bounds.y);\n layoutResult = this.layout(param);\n var bounds = new RectangleF(0, layoutResult.bounds.y + stringLayoutResult.lineHeight, arg2.graphics.clientSize.width, stringLayoutResult.lineHeight);\n var isPaginate = false;\n for (var i = 1; i < stringLayoutResult.lines.length; i++) {\n param.page = layoutResult.page;\n param.bounds = new RectangleF(new PointF(bounds.x, bounds.y), new SizeF(bounds.width, bounds.height));\n this.text = stringLayoutResult.layoutLines[i].text;\n if (bounds.y + stringLayoutResult.lineHeight > layoutResult.page.graphics.clientSize.height) {\n isPaginate = true;\n param.page = param.page.graphics.getNextPage();\n if (previousPosition.y > (layoutResult.page.graphics.clientSize.height - layoutResult.bounds.height)) {\n bounds = new RectangleF(0, layoutResult.bounds.height, layoutResult.page.graphics.clientSize.width, stringLayoutResult.lineHeight);\n }\n else {\n bounds = new RectangleF(0, 0, layoutResult.page.graphics.clientSize.width, stringLayoutResult.lineHeight);\n }\n param.bounds = bounds;\n }\n layoutResult = this.layout(param);\n if (i !== (stringLayoutResult.lines.length - 1)) {\n bounds = new RectangleF(0, layoutResult.bounds.y + stringLayoutResult.lineHeight, layoutResult.page.graphics.clientSize.width, stringLayoutResult.lineHeight);\n }\n else {\n var lineWidth = this.font.measureString(this.text, this.format).width;\n layoutResult = this.calculateResultBounds(layoutResult, lineWidth, layoutResult.page.graphics.clientSize.width, 0);\n }\n }\n }\n return layoutResult;\n }\n else {\n var lineSize = this.font.measureString(this.text, this.format);\n if (param.bounds.y <= param.page.graphics.clientSize.height) {\n layoutResult = this.layout(param);\n layoutResult = this.calculateResultBounds(layoutResult, lineSize.width, layoutResult.page.graphics.clientSize.width, 0);\n }\n return layoutResult;\n }\n }\n else {\n var layoutResult = layout.layout(this.value, this.font, this.stringFormat, new SizeF(arg3.width, 0), false, arg2.graphics.clientSize);\n var result = void 0;\n var param = new PdfLayoutParams();\n var temparg3 = arg3;\n var temparg4 = arg4;\n param.page = arg2;\n param.bounds = temparg3;\n param.format = (temparg4 != null) ? temparg4 : new PdfLayoutFormat();\n if (layoutResult.lines.length > 1) {\n this.text = layoutResult.layoutLines[0].text;\n if (param.bounds.y <= param.page.graphics.clientSize.height) {\n var previousPosition = new PointF(param.bounds.x, param.bounds.y);\n result = this.layout(param);\n var bounds = new RectangleF(temparg3.x, result.bounds.y + layoutResult.lineHeight, temparg3.width, layoutResult.lineHeight);\n var isPaginate = false;\n for (var i = 1; i < layoutResult.lines.length; i++) {\n param.page = result.page;\n param.bounds = new RectangleF(bounds.x, bounds.y, bounds.width, bounds.height);\n this.text = layoutResult.layoutLines[i].text;\n if (bounds.y + layoutResult.lineHeight > result.page.graphics.clientSize.height) {\n isPaginate = true;\n param.page = param.page.graphics.getNextPage();\n if (previousPosition.y > (result.page.graphics.clientSize.height - result.bounds.height)) {\n bounds = new RectangleF(temparg3.x, layoutResult.lineHeight, temparg3.width, layoutResult.lineHeight);\n }\n else {\n bounds = new RectangleF(temparg3.x, 0, temparg3.width, layoutResult.lineHeight);\n }\n param.bounds = bounds;\n }\n result = this.layout(param);\n if (i !== (layoutResult.lines.length - 1)) {\n bounds = new RectangleF(temparg3.x, result.bounds.y + layoutResult.lineHeight, temparg3.width, layoutResult.lineHeight);\n }\n else {\n var lineWidth = this.font.measureString(this.text, this.format).width;\n result = this.calculateResultBounds(result, lineWidth, temparg3.width, temparg3.x);\n }\n }\n }\n return result;\n }\n else {\n var lineSize = this.font.measureString(this.text, this.format);\n if (param.bounds.y <= param.page.graphics.clientSize.height) {\n result = this.layout(param);\n result = this.calculateResultBounds(result, lineSize.width, temparg3.width, temparg3.x);\n }\n return result;\n }\n }\n }\n };\n PdfTextElement.prototype.calculateResultBounds = function (result, lineWidth, maximumWidth, startPosition) {\n var shift = 0;\n if (this.stringFormat != null && typeof this.stringFormat !== 'undefined' && this.stringFormat.alignment === PdfTextAlignment.Center) {\n result.bounds.x = startPosition + (maximumWidth - lineWidth) / 2;\n result.bounds.width = lineWidth;\n }\n else if (this.stringFormat != null && typeof this.stringFormat !== 'undefined' && this.stringFormat.alignment === PdfTextAlignment.Right) {\n result.bounds.x = startPosition + (maximumWidth - lineWidth);\n result.bounds.width = lineWidth;\n }\n else if (this.stringFormat != null && typeof this.stringFormat !== 'undefined' && this.stringFormat.alignment === PdfTextAlignment.Justify) {\n result.bounds.x = startPosition;\n result.bounds.width = maximumWidth;\n }\n else {\n result.bounds.width = startPosition;\n result.bounds.width = lineWidth;\n }\n return result;\n };\n return PdfTextElement;\n}(PdfLayoutElement));\nexport { PdfTextElement };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfActionLinkAnnotation } from './action-link-annotation';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfUriAction } from './../actions/uri-action';\n/**\n * `PdfUriAnnotation` class represents the Uri annotation.\n * @private\n */\nvar PdfUriAnnotation = /** @class */ (function (_super) {\n __extends(PdfUriAnnotation, _super);\n function PdfUriAnnotation(rectangle, uri) {\n var _this = _super.call(this, rectangle) || this;\n if (typeof uri !== 'undefined') {\n _this.uri = uri;\n }\n return _this;\n }\n Object.defineProperty(PdfUriAnnotation.prototype, \"uriAction\", {\n /**\n * Get `action` of the annotation.\n * @private\n */\n get: function () {\n if (typeof this.pdfUriAction === 'undefined') {\n this.pdfUriAction = new PdfUriAction();\n }\n return this.pdfUriAction;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfUriAnnotation.prototype, \"uri\", {\n // Properties\n /**\n * Gets or sets the `Uri` address.\n * @private\n */\n get: function () {\n return this.uriAction.uri;\n },\n set: function (value) {\n if (this.uriAction.uri !== value) {\n this.uriAction.uri = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfUriAnnotation.prototype, \"action\", {\n /**\n * Gets or sets the `action`.\n * @private\n */\n get: function () {\n return this.getSetAction();\n },\n set: function (value) {\n this.getSetAction(value);\n this.uriAction.next = value;\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * `Initializes` annotation object.\n * @private\n */\n PdfUriAnnotation.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n this.dictionary.items.setValue(this.dictionaryProperties.subtype, new PdfName(this.dictionaryProperties.link));\n var tempPrimitive = this.uriAction.element;\n this.dictionary.items.setValue(this.dictionaryProperties.a, this.uriAction.element);\n };\n return PdfUriAnnotation;\n}(PdfActionLinkAnnotation));\nexport { PdfUriAnnotation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfPage } from './../pages/pdf-page';\nimport { PointF, RectangleF, SizeF } from './../drawing/pdf-drawing';\nimport { PdfTextElement } from './../graphics/figures/text-element';\nimport { PdfUriAnnotation } from './uri-annotation';\nimport { PdfStringLayouter } from './../graphics/fonts/string-layouter';\nimport { PdfFontStyle } from './../graphics/fonts/enum';\nimport { PdfTextAlignment } from './../graphics/enum';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfNumber } from './../primitives/pdf-number';\n/**\n * `PdfTextWebLink` class represents the class for text web link annotation.\n * ```typescript\n * // create a new PDF document.\n * let document : PdfDocument = new PdfDocument();\n * // add a page to the document.\n * let page1 : PdfPage = document.pages.add();\n * // create the font\n * let font : PdfFont = new PdfStandardFont(PdfFontFamily.Helvetica, 12);\n * //\n * // create the Text Web Link\n * let textLink : PdfTextWebLink = new PdfTextWebLink();\n * // set the hyperlink\n * textLink.url = 'http://www.google.com';\n * // set the link text\n * textLink.text = 'Google';\n * // set the font\n * textLink.font = font;\n * // draw the hyperlink in PDF page\n * textLink.draw(page1, new PointF(10, 40));\n * //\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\nvar PdfTextWebLink = /** @class */ (function (_super) {\n __extends(PdfTextWebLink, _super);\n // Constructors\n /**\n * Initializes a new instance of the `PdfTextWebLink` class.\n * @private\n */\n function PdfTextWebLink() {\n var _this = _super.call(this) || this;\n // Fields\n /**\n * Internal variable to store `Url`.\n * @default ''\n * @private\n */\n _this.uniformResourceLocator = '';\n /**\n * Internal variable to store `Uri Annotation` object.\n * @default null\n * @private\n */\n _this.uriAnnotation = null;\n /**\n * Checks whether the drawTextWebLink method with `PointF` overload is called or not.\n * If it set as true, then the start position of each lines excluding firest line is changed as (0, Y).\n * @private\n * @hidden\n */\n _this.recalculateBounds = false;\n _this.defaultBorder = new PdfArray();\n for (var i = 0; i < 3; i++) {\n _this.defaultBorder.add(new PdfNumber(0));\n }\n return _this;\n }\n Object.defineProperty(PdfTextWebLink.prototype, \"url\", {\n // Properties\n /**\n * Gets or sets the `Uri address`.\n * ```typescript\n * // create a new PDF document.\n * let document : PdfDocument = new PdfDocument();\n * // add a page to the document.\n * let page1 : PdfPage = document.pages.add();\n * // create the font\n * let font : PdfFont = new PdfStandardFont(PdfFontFamily.Helvetica, 12);\n * // create the Text Web Link\n * let textLink : PdfTextWebLink = new PdfTextWebLink();\n * //\n * // set the hyperlink\n * textLink.url = 'http://www.google.com';\n * //\n * // set the link text\n * textLink.text = 'Google';\n * // set the font\n * textLink.font = font;\n * // draw the hyperlink in PDF page\n * textLink.draw(page1, new PointF(10, 40));\n * // save the document.\n * document.save('output.pdf');\n * // destroy the document\n * document.destroy();\n * ```\n */\n get: function () {\n return this.uniformResourceLocator;\n },\n set: function (value) {\n if (value.length === 0) {\n throw new Error('ArgumentException : Url - string can not be empty');\n }\n this.uniformResourceLocator = value;\n },\n enumerable: true,\n configurable: true\n });\n PdfTextWebLink.prototype.draw = function (arg1, arg2) {\n if (arg1 instanceof PdfPage) {\n var layout = new PdfStringLayouter();\n var previousFontStyle = this.font.style;\n if (arg2 instanceof PointF) {\n this.recalculateBounds = true;\n this.font.style = PdfFontStyle.Underline;\n var layoutResult = layout.layout(this.value, this.font, this.stringFormat, new SizeF((arg1.graphics.clientSize.width - arg2.x), 0), true, arg1.graphics.clientSize);\n if (layoutResult.lines.length === 1) {\n var textSize = this.font.measureString(this.value);\n var rect = new RectangleF(arg2, textSize);\n rect = this.calculateBounds(rect, textSize.width, arg1.graphics.clientSize.width, arg2.x);\n this.uriAnnotation = new PdfUriAnnotation(rect, this.url);\n this.uriAnnotation.dictionary.items.setValue('Border', this.defaultBorder);\n arg1.annotations.add(this.uriAnnotation);\n var result = this.drawText(arg1, arg2);\n this.font.style = previousFontStyle;\n return result;\n }\n else {\n var result = this.drawMultipleLineWithPoint(layoutResult, arg1, arg2);\n this.font.style = previousFontStyle;\n return result;\n }\n }\n else {\n var layoutResult = layout.layout(this.value, this.font, this.stringFormat, new SizeF(arg2.width, 0), false, new SizeF(0, 0));\n this.font.style = PdfFontStyle.Underline;\n if (layoutResult.lines.length === 1) {\n var textSize = this.font.measureString(this.value);\n var rect = new RectangleF(new PointF(arg2.x, arg2.y), textSize);\n rect = this.calculateBounds(rect, textSize.width, arg2.width, arg2.x);\n this.uriAnnotation = new PdfUriAnnotation(rect, this.url);\n this.uriAnnotation.dictionary.items.setValue('Border', this.defaultBorder);\n arg1.annotations.add(this.uriAnnotation);\n var returnValue = this.drawText(arg1, arg2);\n this.font.style = previousFontStyle;\n return returnValue;\n }\n else {\n var returnValue = this.drawMultipleLineWithBounds(layoutResult, arg1, arg2);\n this.font.style = previousFontStyle;\n return returnValue;\n }\n }\n }\n else {\n var page = new PdfPage();\n page = arg1.page;\n return this.draw(page, arg2);\n }\n };\n /* tslint:enable */\n //Private methods\n /**\n * Helper method `Draw` a Multiple Line Text Web Link on the Graphics with the specified location.\n * @private\n */\n PdfTextWebLink.prototype.drawMultipleLineWithPoint = function (result, page, location) {\n var layoutResult;\n for (var i = 0; i < result.layoutLines.length; i++) {\n var size = this.font.measureString(result.lines[i].text);\n var bounds = new RectangleF(location, size);\n if (i !== 0) {\n bounds.x = 0;\n }\n this.text = result.lines[i].text;\n if (bounds.y + size.height > page.graphics.clientSize.height) {\n if (i !== 0) {\n page = page.graphics.getNextPage();\n bounds = new RectangleF(0, 0, page.graphics.clientSize.width, size.height);\n location.y = 0;\n }\n else {\n break;\n }\n }\n bounds = this.calculateBounds(bounds, size.width, page.graphics.clientSize.width, bounds.x);\n this.uriAnnotation = new PdfUriAnnotation(bounds, this.url);\n this.uriAnnotation.dictionary.items.setValue('Border', this.defaultBorder);\n page.annotations.add(this.uriAnnotation);\n if (i !== 0) {\n layoutResult = this.drawText(page, new PointF(0, bounds.y));\n }\n else {\n layoutResult = this.drawText(page, bounds.x, bounds.y);\n }\n location.y += size.height;\n }\n return layoutResult;\n };\n /**\n * Helper method `Draw` a Multiple Line Text Web Link on the Graphics with the specified bounds.\n * @private\n */\n PdfTextWebLink.prototype.drawMultipleLineWithBounds = function (result, page, bounds) {\n var layoutResult;\n for (var i = 0; i < result.layoutLines.length; i++) {\n var size = this.font.measureString(result.lines[i].text);\n var internalBounds = new RectangleF(new PointF(bounds.x, bounds.y), size);\n internalBounds = this.calculateBounds(internalBounds, size.width, bounds.width, bounds.x);\n this.text = result.lines[i].text;\n if (bounds.y + size.height > page.graphics.clientSize.height) {\n if (i !== 0) {\n page = page.graphics.getNextPage();\n bounds = new RectangleF(bounds.x, 0, bounds.width, size.height);\n internalBounds.y = 0;\n }\n else {\n break;\n }\n }\n this.uriAnnotation = new PdfUriAnnotation(internalBounds, this.url);\n this.uriAnnotation.dictionary.items.setValue('Border', this.defaultBorder);\n page.annotations.add(this.uriAnnotation);\n layoutResult = this.drawText(page, bounds);\n bounds.y += size.height;\n }\n return layoutResult;\n };\n /* tslint:disable */\n PdfTextWebLink.prototype.calculateBounds = function (currentBounds, lineWidth, maximumWidth, startPosition) {\n var shift = 0;\n if (this.stringFormat != null && typeof this.stringFormat !== 'undefined' && this.stringFormat.alignment === PdfTextAlignment.Center) {\n currentBounds.x = startPosition + (maximumWidth - lineWidth) / 2;\n currentBounds.width = lineWidth;\n }\n else if (this.stringFormat != null && typeof this.stringFormat !== 'undefined' && this.stringFormat.alignment === PdfTextAlignment.Right) {\n currentBounds.x = startPosition + (maximumWidth - lineWidth);\n currentBounds.width = lineWidth;\n }\n else if (this.stringFormat != null && typeof this.stringFormat !== 'undefined' && this.stringFormat.alignment === PdfTextAlignment.Justify) {\n currentBounds.x = startPosition;\n currentBounds.width = maximumWidth;\n }\n else {\n currentBounds.width = startPosition;\n currentBounds.width = lineWidth;\n }\n return currentBounds;\n };\n return PdfTextWebLink;\n}(PdfTextElement));\nexport { PdfTextWebLink };\n","/**\n * PdfNumbersConvertor.ts class for EJ2-PDF\n * @private\n */\nimport { PdfNumberStyle } from './../../pages/enum';\n/**\n * `PdfNumbersConvertor` for convert page number into numbers, roman letters, etc.,\n * @private\n */\nvar PdfNumbersConvertor = /** @class */ (function () {\n function PdfNumbersConvertor() {\n }\n // Static methods\n /**\n * Convert string value from page number with correct format.\n * @private\n */\n PdfNumbersConvertor.convert = function (intArabic, numberStyle) {\n var result = '';\n switch (numberStyle) {\n case PdfNumberStyle.None:\n result = '';\n break;\n case PdfNumberStyle.Numeric:\n result = intArabic.toString();\n break;\n case PdfNumberStyle.LowerLatin:\n result = this.arabicToLetter(intArabic).toLowerCase();\n break;\n case PdfNumberStyle.LowerRoman:\n result = this.arabicToRoman(intArabic).toLowerCase();\n break;\n case PdfNumberStyle.UpperLatin:\n result = this.arabicToLetter(intArabic);\n break;\n case PdfNumberStyle.UpperRoman:\n result = this.arabicToRoman(intArabic);\n break;\n }\n return result;\n };\n /**\n * Converts `arabic to roman` letters.\n * @private\n */\n PdfNumbersConvertor.arabicToRoman = function (intArabic) {\n var retval = '';\n retval += this.generateNumber(intArabic, 1000, 'M');\n retval += this.generateNumber(intArabic, 900, 'CM');\n retval += this.generateNumber(intArabic, 500, 'D');\n retval += this.generateNumber(intArabic, 400, 'CD');\n retval += this.generateNumber(intArabic, 100, 'C');\n retval += this.generateNumber(intArabic, 90, 'XC');\n retval += this.generateNumber(intArabic, 50, 'L');\n retval += this.generateNumber(intArabic, 40, 'XL');\n retval += this.generateNumber(intArabic, 10, 'X');\n retval += this.generateNumber(intArabic, 9, 'IX');\n retval += this.generateNumber(intArabic, 5, 'V');\n retval += this.generateNumber(intArabic, 4, 'IV');\n retval += this.generateNumber(intArabic, 1, 'I');\n return retval.toString();\n };\n /**\n * Converts `arabic to normal letters`.\n * @private\n */\n PdfNumbersConvertor.arabicToLetter = function (arabic) {\n var stack = this.convertToLetter(arabic);\n var result = '';\n while (stack.length > 0) {\n var num = stack.pop();\n result = this.appendChar(result, num);\n }\n return result.toString();\n };\n /**\n * Generate a string value of an input number.\n * @private\n */\n PdfNumbersConvertor.generateNumber = function (value, magnitude, letter) {\n var numberstring = '';\n while (value >= magnitude) {\n value -= magnitude;\n numberstring += letter;\n }\n return numberstring.toString();\n };\n /**\n * Convert a input number into letters.\n * @private\n */\n PdfNumbersConvertor.convertToLetter = function (arabic) {\n if (arabic <= 0) {\n throw Error('ArgumentOutOfRangeException-arabic, Value can not be less 0');\n }\n var stack = [];\n while (arabic > this.letterLimit) {\n var remainder = arabic % this.letterLimit;\n if (remainder === 0.0) {\n arabic = arabic / this.letterLimit - 1;\n remainder = this.letterLimit;\n }\n else {\n arabic /= this.letterLimit;\n }\n stack.push(remainder);\n }\n stack.push(arabic);\n return stack;\n };\n /**\n * Convert number to actual string value.\n * @private\n */\n PdfNumbersConvertor.appendChar = function (builder, value) {\n var letter = String.fromCharCode(PdfNumbersConvertor.acsiiStartIndex + value);\n builder += letter;\n return builder;\n };\n // Fields\n /**\n * numbers of letters in english [readonly].\n * @default = 26.0\n * @private\n */\n PdfNumbersConvertor.letterLimit = 26.0;\n /**\n * Resturns `acsii start index` value.\n * @default 64\n * @private\n */\n PdfNumbersConvertor.acsiiStartIndex = (65 - 1);\n return PdfNumbersConvertor;\n}());\nexport { PdfNumbersConvertor };\n","/**\n * Represent class to store information about `template and value pairs`.\n * @private\n */\nvar PdfTemplateValuePair = /** @class */ (function () {\n function PdfTemplateValuePair(template, value) {\n // Fields\n /**\n * Internal variable to store template.\n * @default null\n * @private\n */\n this.pdfTemplate = null;\n /**\n * Intenal variable to store value.\n * @private\n */\n this.content = '';\n if (typeof template === 'undefined') {\n //\n }\n else {\n this.template = template;\n this.value = value;\n }\n }\n Object.defineProperty(PdfTemplateValuePair.prototype, \"template\", {\n // Properties\n /**\n * Gets or sets the template.\n * @private\n */\n get: function () {\n return this.pdfTemplate;\n },\n set: function (value) {\n this.pdfTemplate = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfTemplateValuePair.prototype, \"value\", {\n /**\n * Gets or sets the value.\n * @private\n */\n get: function () {\n return this.content;\n },\n set: function (value) {\n this.content = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfTemplateValuePair;\n}());\nexport { PdfTemplateValuePair };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfAutomaticField.ts class for EJ2-PDF\n */\nimport { PdfAutomaticField } from './automatic-field';\nimport { TemporaryDictionary } from './../../collections/object-object-pair/dictionary';\nimport { PdfTemplateValuePair } from './pdf-template-value-pair';\nimport { SizeF, PointF } from './../../drawing/pdf-drawing';\nimport { PdfTemplate } from './../../graphics/figures/pdf-template';\n/**\n * Represents automatic field which has the same value within the `PdfGraphics`.\n */\nvar PdfMultipleValueField = /** @class */ (function (_super) {\n __extends(PdfMultipleValueField, _super);\n function PdfMultipleValueField() {\n var _this = _super.call(this) || this;\n // Fields\n /**\n * Stores the instance of dictionary values of `graphics and template value pair`.\n * @private\n */\n _this.list = new TemporaryDictionary();\n return _this;\n }\n // Implementation\n /* tslint:disable */\n PdfMultipleValueField.prototype.performDraw = function (graphics, location, scalingX, scalingY) {\n _super.prototype.performDrawHelper.call(this, graphics, location, scalingX, scalingY);\n var value = this.getValue(graphics);\n var template = new PdfTemplate(this.getSize());\n this.list.setValue(graphics, new PdfTemplateValuePair(template, value));\n var g = template.graphics;\n var size = this.getSize();\n template.graphics.drawString(value, this.getFont(), this.pen, this.getBrush(), 0, 0, size.width, size.height, this.stringFormat);\n var drawLocation = new PointF(location.x + this.location.x, location.y + this.location.y);\n graphics.drawPdfTemplate(template, drawLocation, new SizeF(template.width * scalingX, template.height * scalingY));\n };\n return PdfMultipleValueField;\n}(PdfAutomaticField));\nexport { PdfMultipleValueField };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfBrush } from './../../graphics/brushes/pdf-brush';\nimport { PdfNumberStyle } from './../../pages/enum';\nimport { PdfNumbersConvertor } from './pdf-numbers-convertor';\nimport { PdfMultipleValueField } from './multiple-value-field';\n/**\n * Represents PDF document `page number field`.\n * @public\n */\nvar PdfPageNumberField = /** @class */ (function (_super) {\n __extends(PdfPageNumberField, _super);\n function PdfPageNumberField(font, arg2) {\n var _this = _super.call(this) || this;\n // Fields\n /**\n * Stores the number style of the page number field.\n * @private\n */\n _this.internalNumberStyle = PdfNumberStyle.Numeric;\n if (typeof arg2 === 'undefined') {\n _this.font = font;\n }\n else if (arg2 instanceof PdfBrush) {\n _this.font = font;\n _this.brush = arg2;\n }\n else {\n _this.font = font;\n _this.bounds = arg2;\n }\n return _this;\n }\n Object.defineProperty(PdfPageNumberField.prototype, \"numberStyle\", {\n // Properties\n /**\n * Gets and sets the number style of the page number field.\n * @private\n */\n get: function () {\n return this.internalNumberStyle;\n },\n set: function (value) {\n this.internalNumberStyle = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Return the `string` value of page number field.\n * @public\n */\n PdfPageNumberField.prototype.getValue = function (graphics) {\n var result = null;\n var page = this.getPageFromGraphics(graphics);\n result = this.internalGetValue(page);\n return result;\n };\n /**\n * Internal method to `get actual value of page number`.\n * @private\n */\n PdfPageNumberField.prototype.internalGetValue = function (page) {\n var document = page.document;\n var pageIndex = document.pages.indexOf(page) + 1;\n return PdfNumbersConvertor.convert(pageIndex, this.numberStyle);\n };\n return PdfPageNumberField;\n}(PdfMultipleValueField));\nexport { PdfPageNumberField };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfCompositeField.ts class for EJ2-PDF\n */\nimport { PdfMultipleValueField } from './multiple-value-field';\n/**\n * Represents class which can concatenate multiple automatic fields into single string.\n */\nvar PdfCompositeField = /** @class */ (function (_super) {\n __extends(PdfCompositeField, _super);\n // Constructor\n /**\n * Initialize a new instance of `PdfCompositeField` class.\n * @param font Font of the field.\n * @param brush Color of the field.\n * @param text Content of the field.\n * @param list List of the automatic fields in specific order based on the text content.\n */\n function PdfCompositeField(font, brush, text) {\n var list = [];\n for (var _i = 3; _i < arguments.length; _i++) {\n list[_i - 3] = arguments[_i];\n }\n var _this = _super.call(this) || this;\n // Fields\n /**\n * Stores the array of automatic fields.\n * @private\n */\n _this.internalAutomaticFields = null;\n /**\n * Stores the text value of the field.\n * @private\n */\n _this.internalText = '';\n _this.font = font;\n _this.brush = brush;\n _this.text = text;\n _this.automaticFields = list;\n return _this;\n }\n Object.defineProperty(PdfCompositeField.prototype, \"text\", {\n // Properties\n /**\n * Gets and sets the content of the field.\n * @public\n */\n get: function () {\n return this.internalText;\n },\n set: function (value) {\n this.internalText = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfCompositeField.prototype, \"automaticFields\", {\n /**\n * Gets and sets the list of the field to drawn.\n * @public\n */\n get: function () {\n return this.internalAutomaticFields;\n },\n set: function (value) {\n this.internalAutomaticFields = value;\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * Return the actual value generated from the list of automatic fields.\n * @public\n */\n PdfCompositeField.prototype.getValue = function (graphics) {\n var values = [];\n var text = this.text.toString();\n if (typeof this.automaticFields !== 'undefined' && this.automaticFields != null && this.automaticFields.length > 0) {\n for (var i = 0; i < this.automaticFields.length; i++) {\n var automaticField = this.automaticFields[i];\n text = text.replace('{' + i + '}', automaticField.getValue(graphics));\n }\n }\n return text;\n };\n return PdfCompositeField;\n}(PdfMultipleValueField));\nexport { PdfCompositeField };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfSingleValueField.ts class for EJ2-PDF\n */\nimport { PdfAutomaticField } from './automatic-field';\nimport { TemporaryDictionary } from './../../collections/object-object-pair/dictionary';\nimport { PdfTemplateValuePair } from './pdf-template-value-pair';\nimport { PointF, SizeF } from './../../drawing/pdf-drawing';\nimport { PdfTemplate } from './../../graphics/figures/pdf-template';\n/**\n * Represents automatic field which has the same value in the whole document.\n */\nvar PdfSingleValueField = /** @class */ (function (_super) {\n __extends(PdfSingleValueField, _super);\n // Constructors\n function PdfSingleValueField() {\n var _this = _super.call(this) || this;\n // Fields\n /* tslint:disable */\n _this.list = new TemporaryDictionary();\n /* tslint:enable */\n _this.painterGraphics = [];\n return _this;\n }\n PdfSingleValueField.prototype.performDraw = function (graphics, location, scalingX, scalingY) {\n _super.prototype.performDrawHelper.call(this, graphics, location, scalingX, scalingY);\n var page = this.getPageFromGraphics(graphics);\n var document = page.document;\n var textValue = this.getValue(graphics);\n /* tslint:disable */\n if (this.list.containsKey(document)) {\n var pair = this.list.getValue(document);\n var drawLocation = new PointF(location.x + this.location.x, location.y + this.location.y);\n graphics.drawPdfTemplate(pair.template, drawLocation, new SizeF(pair.template.width * scalingX, pair.template.height * scalingY));\n this.painterGraphics.push(graphics);\n }\n else {\n var size = this.getSize();\n var template = new PdfTemplate(size);\n this.list.setValue(document, new PdfTemplateValuePair(template, textValue));\n template.graphics.drawString(textValue, this.getFont(), this.pen, this.getBrush(), 0, 0, size.width, size.height, this.stringFormat);\n var drawLocation = new PointF(location.x + this.location.x, location.y + this.location.y);\n graphics.drawPdfTemplate(template, drawLocation, new SizeF(template.width * scalingX, template.height * scalingY));\n this.painterGraphics.push(graphics);\n }\n /* tslint:enable */\n };\n return PdfSingleValueField;\n}(PdfAutomaticField));\nexport { PdfSingleValueField };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfPageCountField.ts class for EJ2-PDF\n */\nimport { PdfSingleValueField } from './single-value-field';\nimport { PdfNumberStyle } from './../../pages/enum';\nimport { PdfBrush } from './../../graphics/brushes/pdf-brush';\nimport { PdfNumbersConvertor } from './pdf-numbers-convertor';\n/**\n * Represents total PDF document page count automatic field.\n */\nvar PdfPageCountField = /** @class */ (function (_super) {\n __extends(PdfPageCountField, _super);\n function PdfPageCountField(font, arg2) {\n var _this = _super.call(this) || this;\n // Fields\n /**\n * Stores the number style of the field.\n * @private\n */\n _this.internalNumberStyle = PdfNumberStyle.Numeric;\n if (typeof arg2 === 'undefined') {\n _this.font = font;\n }\n else if (arg2 instanceof PdfBrush) {\n _this.font = font;\n _this.brush = arg2;\n }\n else {\n _this.font = font;\n _this.bounds = arg2;\n }\n return _this;\n }\n Object.defineProperty(PdfPageCountField.prototype, \"numberStyle\", {\n // Properties\n /**\n * Gets and sets the number style of the field.\n * @public\n */\n get: function () {\n return this.internalNumberStyle;\n },\n set: function (value) {\n this.internalNumberStyle = value;\n },\n enumerable: true,\n configurable: true\n });\n // Implementation\n /**\n * Return the actual value of the content to drawn.\n * @public\n */\n PdfPageCountField.prototype.getValue = function (graphics) {\n var result = null;\n var page = this.getPageFromGraphics(graphics);\n var document = page.section.parent.document;\n var count = document.pages.count;\n result = PdfNumbersConvertor.convert(count, this.numberStyle);\n return result;\n };\n return PdfPageCountField;\n}(PdfSingleValueField));\nexport { PdfPageCountField };\n","import { PointF, RectangleF } from './../drawing/pdf-drawing';\nimport { PdfArray } from './../primitives/pdf-array';\nimport { PdfPageRotateAngle } from './../pages/enum';\nimport { PdfDestinationMode } from './../general/enum';\nimport { PdfReferenceHolder } from './../primitives/pdf-reference';\nimport { PdfName } from './../primitives/pdf-name';\nimport { PdfNumber } from './../primitives/pdf-number';\nimport { DictionaryProperties } from './../input-output/pdf-dictionary-properties';\n/**\n * `PdfDestination` class represents an anchor in the document\n * where bookmarks or annotations can direct when clicked.\n */\nvar PdfDestination = /** @class */ (function () {\n function PdfDestination(arg1, arg2) {\n // Fields\n /**\n * Internal variable for accessing fields from `DictionryProperties` class.\n * @private\n */\n this.dictionaryProperties = new DictionaryProperties();\n /**\n * Type of the `destination`.\n * @private\n */\n this.destinationMode = PdfDestinationMode.Location;\n /**\n * `Zoom` factor.\n * @private\n * @default 0\n */\n this.zoomFactor = 0;\n /**\n * `Location` of the destination.\n * @default new PointF() with 0 ,0 as co-ordinates\n * @private\n */\n this.destinationLocation = new PointF(0, 0);\n /**\n * `Bounds` of the destination as RectangleF.\n * @default RectangleF.Empty\n * @private\n */\n this.bounds = new RectangleF();\n /**\n * Pdf primitive representing `this` object.\n * @private\n */\n this.array = new PdfArray();\n if (typeof arg2 === 'undefined') {\n var angle = PdfPageRotateAngle.RotateAngle0;\n this.destinationLocation = new PointF(0, this.destinationLocation.y);\n this.pdfPage = arg1;\n }\n else if (arg2 instanceof PointF) {\n this.constructor(arg1);\n this.destinationLocation = arg2;\n }\n else {\n this.constructor(arg1);\n this.bounds = arg2;\n }\n }\n Object.defineProperty(PdfDestination.prototype, \"zoom\", {\n // Properties\n /**\n * Gets and Sets the `zoom` factor.\n * @private\n */\n get: function () {\n return this.zoomFactor;\n },\n set: function (value) {\n this.zoomFactor = value;\n this.initializePrimitive();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDestination.prototype, \"page\", {\n /**\n * Gets and Sets the `page` object.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n set: function (value) {\n this.pdfPage = value;\n this.initializePrimitive();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDestination.prototype, \"mode\", {\n /**\n * Gets and Sets the destination `mode`.\n * @private\n */\n get: function () {\n return this.destinationMode;\n },\n set: function (value) {\n this.destinationMode = value;\n this.initializePrimitive();\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfDestination.prototype, \"location\", {\n /**\n * Gets and Sets the `location`.\n * @private\n */\n get: function () {\n return this.destinationLocation;\n },\n set: function (value) {\n this.destinationLocation = value;\n this.initializePrimitive();\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Translates` co-ordinates to PDF co-ordinate system (lower/left).\n * @private\n */\n PdfDestination.prototype.pointToNativePdf = function (page, point) {\n var section = page.section;\n return section.pointToNativePdf(page, point);\n };\n /**\n * `In fills` array by correct values.\n * @private\n */\n PdfDestination.prototype.initializePrimitive = function () {\n this.array.clear();\n this.array.add(new PdfReferenceHolder(this.pdfPage));\n switch (this.destinationMode) {\n case PdfDestinationMode.Location:\n var simplePage = this.pdfPage;\n var point = new PointF();\n point = this.pointToNativePdf(simplePage, this.destinationLocation);\n this.array.add(new PdfName(this.dictionaryProperties.xyz));\n this.array.add(new PdfNumber(point.x));\n this.array.add(new PdfNumber(point.y));\n this.array.add(new PdfNumber(this.zoomFactor));\n break;\n case PdfDestinationMode.FitToPage:\n this.array.add(new PdfName(this.dictionaryProperties.fit));\n break;\n }\n };\n Object.defineProperty(PdfDestination.prototype, \"element\", {\n /**\n * Gets the `element` representing this object.\n * @private\n */\n get: function () {\n this.initializePrimitive();\n return this.array;\n },\n enumerable: true,\n configurable: true\n });\n return PdfDestination;\n}());\nexport { PdfDestination };\n","/**\n * public Enum for `PdfBorderOverlapStyle`.\n * @private\n */\nexport var PdfBorderOverlapStyle;\n(function (PdfBorderOverlapStyle) {\n /**\n * Specifies the type of `Overlap`.\n * @private\n */\n PdfBorderOverlapStyle[PdfBorderOverlapStyle[\"Overlap\"] = 0] = \"Overlap\";\n /**\n * Specifies the type of `Inside`.\n * @private\n */\n PdfBorderOverlapStyle[PdfBorderOverlapStyle[\"Inside\"] = 1] = \"Inside\";\n})(PdfBorderOverlapStyle || (PdfBorderOverlapStyle = {}));\n","/**\n * PdfPageTemplateElement.ts class for EJ2-Pdf\n */\nimport { PdfDockStyle, PdfAlignmentStyle, TemplateType } from './enum';\nimport { PointF, SizeF } from './../drawing/pdf-drawing';\nimport { PdfTemplate } from './../graphics/figures/pdf-template';\nimport { PdfPage } from './pdf-page';\nimport { RectangleF } from './../drawing/pdf-drawing';\n/**\n * Describes a `page template` object that can be used as header/footer, watermark or stamp.\n */\nvar PdfPageTemplateElement = /** @class */ (function () {\n /* tslint:disable */\n function PdfPageTemplateElement(arg1, arg2, arg3, arg4, arg5) {\n if (arg1 instanceof RectangleF && typeof arg2 === 'undefined') {\n this.constructor(arg1.x, arg1.y, arg1.width, arg1.height);\n }\n else if (arg1 instanceof RectangleF && arg2 instanceof PdfPage && typeof arg3 === 'undefined') {\n this.constructor(arg1.x, arg1.y, arg1.width, arg1.height, arg2);\n }\n else if (arg1 instanceof PointF && arg2 instanceof SizeF && typeof arg3 === 'undefined') {\n this.constructor(arg1.x, arg1.y, arg2.width, arg2.height);\n }\n else if (arg1 instanceof PointF && arg2 instanceof SizeF && arg3 instanceof PdfPage && typeof arg4 === 'undefined') {\n this.constructor(arg1.x, arg1.y, arg2.width, arg2.height, arg3);\n }\n else if (arg1 instanceof SizeF && typeof arg2 === 'undefined') {\n this.constructor(arg1.width, arg1.height);\n }\n else if (typeof arg1 === 'number' && typeof arg2 === 'number' && typeof arg3 === 'undefined') {\n this.constructor(0, 0, arg1, arg2);\n }\n else if (typeof arg1 === 'number' && typeof arg2 === 'number' && arg3 instanceof PdfPage && typeof arg4 === 'undefined') {\n this.constructor(0, 0, arg1, arg2, arg3);\n }\n else if (typeof arg1 === 'number' && typeof arg2 === 'number' && typeof arg3 === 'number' && typeof arg4 === 'number' && typeof arg5 === 'undefined') {\n this.x = arg1;\n this.y = arg2;\n this.pdfTemplate = new PdfTemplate(arg3, arg4);\n }\n else {\n this.x = arg1;\n this.y = arg2;\n this.pdfTemplate = new PdfTemplate(arg3, arg4);\n // this.graphics.colorSpace = this.page.document.colorSpace;\n }\n /* tslint:enable */\n }\n Object.defineProperty(PdfPageTemplateElement.prototype, \"dock\", {\n // Properties\n /**\n * Gets or sets the `dock style` of the page template element.\n * @private\n */\n get: function () {\n return this.dockStyle;\n },\n set: function (value) {\n // if (this.dockStyle !== value && this.Type === TemplateType.None) {\n this.dockStyle = value;\n // Reset alignment.\n this.resetAlignment();\n // }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"alignment\", {\n /**\n * Gets or sets `alignment` of the page template element.\n * @private\n */\n get: function () {\n return this.alignmentStyle;\n },\n set: function (value) {\n // if (this.alignmentStyle !== value) {\n this.setAlignment(value);\n // }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"foreground\", {\n /**\n * Indicates whether the page template is located `in front of the page layers or behind of it`.\n * @private\n */\n get: function () {\n return this.isForeground;\n },\n set: function (value) {\n // if (this.foreground !== value) {\n this.isForeground = value;\n // }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"background\", {\n /**\n * Indicates whether the page template is located `behind of the page layers or in front of it`.\n * @private\n */\n get: function () {\n return !this.isForeground;\n },\n set: function (value) {\n this.isForeground = !value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"location\", {\n /**\n * Gets or sets `location` of the page template element.\n * @private\n */\n get: function () {\n return this.currentLocation;\n },\n set: function (value) {\n if (this.type === TemplateType.None) {\n this.currentLocation = value;\n }\n else {\n //\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"x\", {\n /**\n * Gets or sets `X` co-ordinate of the template element on the page.\n * @private\n */\n get: function () {\n var value = (typeof this.currentLocation !== 'undefined') ? this.currentLocation.x : 0;\n return value;\n },\n set: function (value) {\n if (this.type === TemplateType.None) {\n this.currentLocation.x = value;\n }\n else {\n //\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"y\", {\n /**\n * Gets or sets `Y` co-ordinate of the template element on the page.\n * @private\n */\n get: function () {\n var value = (typeof this.currentLocation !== 'undefined') ? this.currentLocation.y : 0;\n return value;\n },\n set: function (value) {\n if (this.type === TemplateType.None) {\n this.currentLocation.y = value;\n }\n else {\n //\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"size\", {\n /**\n * Gets or sets `size` of the page template element.\n * @private\n */\n get: function () {\n return this.template.size;\n },\n set: function (value) {\n if (this.type === TemplateType.None) {\n this.template.reset(value);\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"width\", {\n /**\n * Gets or sets `width` of the page template element.\n * @private\n */\n get: function () {\n return this.template.width;\n },\n set: function (value) {\n if (this.template.width !== value && this.type === TemplateType.None) {\n var size = this.template.size;\n size.width = value;\n this.template.reset(size);\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"height\", {\n /**\n * Gets or sets `height` of the page template element.\n * @private\n */\n get: function () {\n return this.template.height;\n },\n set: function (value) {\n if (this.template.height !== value && this.type === TemplateType.None) {\n var size = this.template.size;\n size.height = value;\n this.template.reset(size);\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"graphics\", {\n /**\n * Gets `graphics` context of the page template element.\n * @private\n */\n get: function () {\n return this.template.graphics;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"template\", {\n /**\n * Gets Pdf `template` object.\n * @private\n */\n get: function () {\n // if (typeof this.pdfTemplate === 'undefined' || this.pdfTemplate == null) {\n // this.pdfTemplate = new PdfTemplate(this.size);\n // }\n return this.pdfTemplate;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"type\", {\n /**\n * Gets or sets `type` of the usage of this page template.\n * @private\n */\n get: function () {\n return this.templateType;\n },\n set: function (value) {\n this.updateDocking(value);\n this.templateType = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPageTemplateElement.prototype, \"bounds\", {\n /**\n * Gets or sets `bounds` of the page template.\n * @public\n */\n get: function () {\n return new RectangleF(new PointF(this.x, this.y), this.size);\n },\n set: function (value) {\n if (this.type === TemplateType.None) {\n this.location = new PointF(value.x, value.y);\n this.size = new SizeF(value.width, value.height);\n }\n },\n enumerable: true,\n configurable: true\n });\n /**\n * `Updates Dock` property if template is used as header/footer.\n * @private\n */\n PdfPageTemplateElement.prototype.updateDocking = function (type) {\n if (type !== TemplateType.None) {\n switch (type) {\n case TemplateType.Top:\n this.dock = PdfDockStyle.Top;\n break;\n case TemplateType.Bottom:\n this.dock = PdfDockStyle.Bottom;\n break;\n case TemplateType.Left:\n this.dock = PdfDockStyle.Left;\n break;\n case TemplateType.Right:\n this.dock = PdfDockStyle.Right;\n break;\n }\n this.resetAlignment();\n }\n };\n /**\n * `Resets alignment` of the template.\n * @private\n */\n PdfPageTemplateElement.prototype.resetAlignment = function () {\n this.alignment = PdfAlignmentStyle.None;\n };\n /**\n * `Sets alignment` of the template.\n * @private\n */\n PdfPageTemplateElement.prototype.setAlignment = function (alignment) {\n if (this.dock === PdfDockStyle.None) {\n this.alignmentStyle = alignment;\n }\n else {\n // Template is docked and alignment has been changed.\n var canBeSet = false;\n switch (this.dock) {\n case PdfDockStyle.Left:\n canBeSet = (alignment === PdfAlignmentStyle.TopLeft || alignment === PdfAlignmentStyle.MiddleLeft ||\n alignment === PdfAlignmentStyle.BottomLeft || alignment === PdfAlignmentStyle.None);\n break;\n case PdfDockStyle.Top:\n canBeSet = (alignment === PdfAlignmentStyle.TopLeft || alignment === PdfAlignmentStyle.TopCenter ||\n alignment === PdfAlignmentStyle.TopRight || alignment === PdfAlignmentStyle.None);\n break;\n case PdfDockStyle.Right:\n canBeSet = (alignment === PdfAlignmentStyle.TopRight || alignment === PdfAlignmentStyle.MiddleRight ||\n alignment === PdfAlignmentStyle.BottomRight || alignment === PdfAlignmentStyle.None);\n break;\n case PdfDockStyle.Bottom:\n canBeSet = (alignment === PdfAlignmentStyle.BottomLeft || alignment === PdfAlignmentStyle.BottomCenter\n || alignment === PdfAlignmentStyle.BottomRight || alignment === PdfAlignmentStyle.None);\n break;\n case PdfDockStyle.Fill:\n canBeSet = (alignment === PdfAlignmentStyle.MiddleCenter || alignment === PdfAlignmentStyle.None);\n break;\n }\n if (canBeSet) {\n this.alignmentStyle = alignment;\n }\n }\n };\n /**\n * Draws the template.\n * @private\n */\n PdfPageTemplateElement.prototype.draw = function (layer, document) {\n var page = layer.page;\n var bounds = this.calculateBounds(page, document);\n if (bounds.x === -0) {\n bounds.x = 0;\n }\n layer.graphics.drawPdfTemplate(this.template, new PointF(bounds.x, bounds.y), new SizeF(bounds.width, bounds.height));\n };\n /**\n * Calculates bounds of the page template.\n * @private\n */\n PdfPageTemplateElement.prototype.calculateBounds = function (page, document) {\n var result = this.bounds;\n if (this.alignmentStyle !== PdfAlignmentStyle.None) {\n result = this.getAlignmentBounds(page, document);\n }\n else if (this.dockStyle !== PdfDockStyle.None) {\n result = this.getDockBounds(page, document);\n }\n return result;\n };\n /**\n * Calculates bounds according to the alignment.\n * @private\n */\n PdfPageTemplateElement.prototype.getAlignmentBounds = function (page, document) {\n var result = this.bounds;\n if (this.type === TemplateType.None) {\n result = this.getSimpleAlignmentBounds(page, document);\n }\n else {\n result = this.getTemplateAlignmentBounds(page, document);\n }\n return result;\n };\n /**\n * Calculates bounds according to the alignment.\n * @private\n */\n PdfPageTemplateElement.prototype.getSimpleAlignmentBounds = function (page, document) {\n var bounds = this.bounds;\n var pdfSection = page.section;\n var actualBounds = pdfSection.getActualBounds(document, page, false);\n var x = this.x;\n var y = this.y;\n switch (this.alignmentStyle) {\n case PdfAlignmentStyle.TopLeft:\n x = 0;\n y = 0;\n break;\n case PdfAlignmentStyle.TopCenter:\n x = (actualBounds.width - this.width) / 2;\n y = 0;\n break;\n case PdfAlignmentStyle.TopRight:\n x = actualBounds.width - this.width;\n y = 0;\n break;\n case PdfAlignmentStyle.MiddleLeft:\n x = 0;\n y = (actualBounds.height - this.height) / 2;\n break;\n case PdfAlignmentStyle.MiddleCenter:\n x = (actualBounds.width - this.width) / 2;\n y = (actualBounds.height - this.height) / 2;\n break;\n case PdfAlignmentStyle.MiddleRight:\n x = actualBounds.width - this.width;\n y = (actualBounds.height - this.height) / 2;\n break;\n case PdfAlignmentStyle.BottomLeft:\n x = 0;\n y = actualBounds.height - this.height;\n break;\n case PdfAlignmentStyle.BottomCenter:\n x = (actualBounds.width - this.width) / 2;\n y = actualBounds.height - this.height;\n break;\n case PdfAlignmentStyle.BottomRight:\n x = actualBounds.width - this.width;\n y = actualBounds.height - this.height;\n break;\n }\n bounds.x = x;\n bounds.y = y;\n return bounds;\n };\n /**\n * Calculates bounds according to the alignment.\n * @private\n */\n PdfPageTemplateElement.prototype.getTemplateAlignmentBounds = function (page, document) {\n var result = this.bounds;\n var section = page.section;\n var actualBounds = section.getActualBounds(document, page, false);\n var x = this.x;\n var y = this.y;\n switch (this.alignmentStyle) {\n case PdfAlignmentStyle.TopLeft:\n if (this.type === TemplateType.Left) {\n x = -actualBounds.x;\n y = 0;\n }\n else if (this.type === TemplateType.Top) {\n x = -actualBounds.x;\n y = -actualBounds.y;\n }\n break;\n case PdfAlignmentStyle.TopCenter:\n x = (actualBounds.width - this.width) / 2;\n y = -actualBounds.y;\n break;\n case PdfAlignmentStyle.TopRight:\n if (this.type === TemplateType.Right) {\n x = actualBounds.width + section.getRightIndentWidth(document, page, false) - this.width;\n y = 0;\n }\n else if (this.type === TemplateType.Top) {\n x = actualBounds.width + section.getRightIndentWidth(document, page, false) - this.width;\n y = -actualBounds.y;\n }\n break;\n case PdfAlignmentStyle.MiddleLeft:\n x = -actualBounds.x;\n y = (actualBounds.height - this.height) / 2;\n break;\n case PdfAlignmentStyle.MiddleCenter:\n x = (actualBounds.width - this.width) / 2;\n y = (actualBounds.height - this.height) / 2;\n break;\n case PdfAlignmentStyle.MiddleRight:\n x = actualBounds.width + section.getRightIndentWidth(document, page, false) - this.width;\n y = (actualBounds.height - this.height) / 2;\n break;\n case PdfAlignmentStyle.BottomLeft:\n if (this.type === TemplateType.Left) {\n x = -actualBounds.x;\n y = actualBounds.height - this.height;\n }\n else if (this.type === TemplateType.Bottom) {\n x = -actualBounds.x;\n y = actualBounds.height + section.getBottomIndentHeight(document, page, false) - this.height;\n }\n break;\n case PdfAlignmentStyle.BottomCenter:\n x = (actualBounds.width - this.width) / 2;\n y = actualBounds.height + section.getBottomIndentHeight(document, page, false) - this.height;\n break;\n case PdfAlignmentStyle.BottomRight:\n if (this.type === TemplateType.Right) {\n x = actualBounds.width + section.getRightIndentWidth(document, page, false) - this.width;\n y = actualBounds.height - this.height;\n }\n else if (this.type === TemplateType.Bottom) {\n x = actualBounds.width + section.getRightIndentWidth(document, page, false) - this.width;\n y = actualBounds.height + section.getBottomIndentHeight(document, page, false) - this.height;\n }\n break;\n }\n result.x = x;\n result.y = y;\n return result;\n };\n /**\n * Calculates bounds according to the docking.\n * @private\n */\n PdfPageTemplateElement.prototype.getDockBounds = function (page, document) {\n var result = this.bounds;\n if (this.type === TemplateType.None) {\n result = this.getSimpleDockBounds(page, document);\n }\n else {\n result = this.getTemplateDockBounds(page, document);\n }\n return result;\n };\n /**\n * Calculates bounds according to the docking.\n * @private\n */\n PdfPageTemplateElement.prototype.getSimpleDockBounds = function (page, document) {\n var result = this.bounds;\n var section = page.section;\n var actualBounds = section.getActualBounds(document, page, false);\n var x = this.x;\n var y = this.y;\n var width = this.width;\n var height = this.height;\n switch (this.dockStyle) {\n case PdfDockStyle.Left:\n x = 0;\n y = 0;\n width = this.width;\n height = actualBounds.height;\n break;\n case PdfDockStyle.Top:\n x = 0;\n y = 0;\n width = actualBounds.width;\n height = this.height;\n break;\n case PdfDockStyle.Right:\n x = actualBounds.width - this.width;\n y = 0;\n width = this.width;\n height = actualBounds.height;\n break;\n case PdfDockStyle.Bottom:\n x = 0;\n y = actualBounds.height - this.height;\n width = actualBounds.width;\n height = this.height;\n break;\n case PdfDockStyle.Fill:\n x = 0;\n x = 0;\n width = actualBounds.width;\n height = actualBounds.height;\n break;\n }\n result = new RectangleF(x, y, width, height);\n return result;\n };\n /**\n * Calculates template bounds basing on docking if template is a page template.\n * @private\n */\n PdfPageTemplateElement.prototype.getTemplateDockBounds = function (page, document) {\n var result = this.bounds;\n var section = page.section;\n var actualBounds = section.getActualBounds(document, page, false);\n var actualSize = section.pageSettings.getActualSize();\n var x = this.x;\n var y = this.y;\n var width = this.width;\n var height = this.height;\n switch (this.dockStyle) {\n case PdfDockStyle.Left:\n x = -actualBounds.x;\n y = 0;\n width = this.width;\n height = actualBounds.height;\n break;\n case PdfDockStyle.Top:\n x = -actualBounds.x;\n y = -actualBounds.y;\n width = actualSize.width;\n height = this.height;\n if (actualBounds.height < 0) {\n y = -actualBounds.y + actualSize.height;\n }\n break;\n case PdfDockStyle.Right:\n x = actualBounds.width + section.getRightIndentWidth(document, page, false) - this.width;\n y = 0;\n width = this.width;\n height = actualBounds.height;\n break;\n case PdfDockStyle.Bottom:\n x = -actualBounds.x;\n y = actualBounds.height + section.getBottomIndentHeight(document, page, false) - this.height;\n width = actualSize.width;\n height = this.height;\n if (actualBounds.height < 0) {\n y -= actualSize.height;\n }\n break;\n case PdfDockStyle.Fill:\n x = 0;\n x = 0;\n width = actualBounds.width;\n height = actualBounds.height;\n break;\n }\n result = new RectangleF(x, y, width, height);\n return result;\n };\n return PdfPageTemplateElement;\n}());\nexport { PdfPageTemplateElement };\n","/**\n * PdfBorders.ts class for EJ2-PDF\n */\nimport { PdfPen } from './../../../graphics/pdf-pen';\nimport { PdfDashStyle } from './../../../graphics/enum';\nimport { PdfColor } from './../../../graphics/pdf-color';\n/**\n * `PdfBorders` class used represents the cell border of the PDF grid.\n */\nvar PdfBorders = /** @class */ (function () {\n // Constructor\n /**\n * Create a new instance for `PdfBorders` class.\n * @private\n */\n function PdfBorders() {\n var defaultBorderPenLeft = new PdfPen(new PdfColor(0, 0, 0));\n defaultBorderPenLeft.dashStyle = PdfDashStyle.Solid;\n var defaultBorderPenRight = new PdfPen(new PdfColor(0, 0, 0));\n defaultBorderPenRight.dashStyle = PdfDashStyle.Solid;\n var defaultBorderPenTop = new PdfPen(new PdfColor(0, 0, 0));\n defaultBorderPenTop.dashStyle = PdfDashStyle.Solid;\n var defaultBorderPenBottom = new PdfPen(new PdfColor(0, 0, 0));\n defaultBorderPenBottom.dashStyle = PdfDashStyle.Solid;\n this.leftPen = defaultBorderPenLeft;\n this.rightPen = defaultBorderPenRight;\n this.topPen = defaultBorderPenTop;\n this.bottomPen = defaultBorderPenBottom;\n }\n Object.defineProperty(PdfBorders.prototype, \"left\", {\n // Properties\n /**\n * Gets or sets the `Left`.\n * @private\n */\n get: function () {\n return this.leftPen;\n },\n set: function (value) {\n this.leftPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBorders.prototype, \"right\", {\n /**\n * Gets or sets the `Right`.\n * @private\n */\n get: function () {\n return this.rightPen;\n },\n set: function (value) {\n this.rightPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBorders.prototype, \"top\", {\n /**\n * Gets or sets the `Top`.\n * @private\n */\n get: function () {\n return this.topPen;\n },\n set: function (value) {\n this.topPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBorders.prototype, \"bottom\", {\n /**\n * Gets or sets the `Bottom`.\n * @private\n */\n get: function () {\n return this.bottomPen;\n },\n set: function (value) {\n this.bottomPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBorders.prototype, \"all\", {\n /**\n * sets the `All`.\n * @private\n */\n set: function (value) {\n this.leftPen = this.rightPen = this.topPen = this.bottomPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBorders.prototype, \"isAll\", {\n /**\n * Gets a value indicating whether this instance `is all`.\n * @private\n */\n get: function () {\n return ((this.leftPen === this.rightPen) && (this.leftPen === this.topPen) && (this.leftPen === this.bottomPen));\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfBorders, \"default\", {\n /**\n * Gets the `default`.\n * @private\n */\n get: function () {\n return new PdfBorders();\n },\n enumerable: true,\n configurable: true\n });\n return PdfBorders;\n}());\nexport { PdfBorders };\nvar PdfPaddings = /** @class */ (function () {\n function PdfPaddings(left, right, top, bottom) {\n if (typeof left === 'undefined') {\n //5.76 and 0 are taken from ms-word default table margins.\n this.leftPad = this.rightPad = 5.76;\n //0.5 is set for top and bottom by default.\n this.bottom = this.topPad = 0.5;\n }\n else {\n this.leftPad = left;\n this.rightPad = right;\n this.topPad = top;\n this.bottomPad = bottom;\n }\n }\n Object.defineProperty(PdfPaddings.prototype, \"left\", {\n // Properties\n /**\n * Gets or sets the `left` value of the edge\n * @private\n */\n get: function () {\n return this.leftPad;\n },\n set: function (value) {\n this.leftPad = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPaddings.prototype, \"right\", {\n /**\n * Gets or sets the `right` value of the edge.\n * @private\n */\n get: function () {\n return this.rightPad;\n },\n set: function (value) {\n this.rightPad = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPaddings.prototype, \"top\", {\n /**\n * Gets or sets the `top` value of the edge\n * @private\n */\n get: function () {\n return this.topPad;\n },\n set: function (value) {\n this.topPad = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPaddings.prototype, \"bottom\", {\n /**\n * Gets or sets the `bottom` value of the edge.\n * @private\n */\n get: function () {\n return this.bottomPad;\n },\n set: function (value) {\n this.bottomPad = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfPaddings.prototype, \"all\", {\n /**\n * Sets value to all sides `left,right,top and bottom`.s\n * @private\n */\n set: function (value) {\n this.leftPad = this.rightPad = this.topPad = this.bottomPad = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfPaddings;\n}());\nexport { PdfPaddings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PdfBorders, PdfPaddings } from './pdf-borders';\nimport { PdfBorderOverlapStyle } from './../../tables/light-tables/enum';\n/**\n * Base class for the `grid style`,\n */\nvar PdfGridStyleBase = /** @class */ (function () {\n function PdfGridStyleBase() {\n }\n Object.defineProperty(PdfGridStyleBase.prototype, \"backgroundBrush\", {\n // Properties\n /**\n * Gets or sets the `background brush`.\n * @private\n */\n get: function () {\n return this.gridBackgroundBrush;\n },\n set: function (value) {\n this.gridBackgroundBrush = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyleBase.prototype, \"textBrush\", {\n /**\n * Gets or sets the `text brush`.\n * @private\n */\n get: function () {\n return this.gridTextBrush;\n },\n set: function (value) {\n this.gridTextBrush = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyleBase.prototype, \"textPen\", {\n /**\n * Gets or sets the `text pen`.\n * @private\n */\n get: function () {\n return this.gridTextPen;\n },\n set: function (value) {\n this.gridTextPen = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyleBase.prototype, \"font\", {\n /**\n * Gets or sets the `font`.\n * @private\n */\n get: function () {\n return this.gridFont;\n },\n set: function (value) {\n this.gridFont = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridStyleBase;\n}());\nexport { PdfGridStyleBase };\n/**\n * `PdfGridStyle` class provides customization of the appearance for the 'PdfGrid'.\n */\nvar PdfGridStyle = /** @class */ (function (_super) {\n __extends(PdfGridStyle, _super);\n //constructor\n /**\n * Initialize a new instance for `PdfGridStyle` class.\n * @private\n */\n function PdfGridStyle() {\n var _this = _super.call(this) || this;\n _this.gridBorderOverlapStyle = PdfBorderOverlapStyle.Overlap;\n _this.bAllowHorizontalOverflow = false;\n _this.gridHorizontalOverflowType = PdfHorizontalOverflowType.LastPage;\n return _this;\n }\n Object.defineProperty(PdfGridStyle.prototype, \"cellSpacing\", {\n //Properties\n /**\n * Gets or sets the `cell spacing` of the 'PdfGrid'.\n * @private\n */\n get: function () {\n if (typeof this.gridCellSpacing === 'undefined') {\n this.gridCellSpacing = 0;\n }\n return this.gridCellSpacing;\n },\n set: function (value) {\n this.gridCellSpacing = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyle.prototype, \"horizontalOverflowType\", {\n /**\n * Gets or sets the type of the `horizontal overflow` of the 'PdfGrid'.\n * @private\n */\n get: function () {\n return this.gridHorizontalOverflowType;\n },\n set: function (value) {\n this.gridHorizontalOverflowType = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyle.prototype, \"allowHorizontalOverflow\", {\n /**\n * Gets or sets a value indicating whether to `allow horizontal overflow`.\n * @private\n */\n get: function () {\n return this.bAllowHorizontalOverflow;\n },\n set: function (value) {\n this.bAllowHorizontalOverflow = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyle.prototype, \"cellPadding\", {\n /**\n * Gets or sets the `cell padding`.\n * @private\n */\n get: function () {\n if (typeof this.gridCellPadding === 'undefined') {\n this.gridCellPadding = new PdfPaddings();\n }\n return this.gridCellPadding;\n },\n set: function (value) {\n if (typeof this.gridCellPadding === 'undefined') {\n this.gridCellPadding = new PdfPaddings();\n this.gridCellPadding = value;\n }\n else {\n this.gridCellPadding = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridStyle.prototype, \"borderOverlapStyle\", {\n /**\n * Gets or sets the `border overlap style` of the 'PdfGrid'.\n * @private\n */\n get: function () {\n return this.gridBorderOverlapStyle;\n },\n set: function (value) {\n this.gridBorderOverlapStyle = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridStyle;\n}(PdfGridStyleBase));\nexport { PdfGridStyle };\n/**\n * `PdfGridCellStyle` class provides customization of the appearance for the 'PdfGridCell'.\n */\nvar PdfGridCellStyle = /** @class */ (function (_super) {\n __extends(PdfGridCellStyle, _super);\n /**\n * Initializes a new instance of the `PdfGridCellStyle` class.\n * @private\n */\n function PdfGridCellStyle() {\n var _this = _super.call(this) || this;\n /**\n * @hidden\n * @private\n */\n _this.gridCellBorders = PdfBorders.default;\n return _this;\n }\n Object.defineProperty(PdfGridCellStyle.prototype, \"stringFormat\", {\n //Properties\n /**\n * Gets the `string format` of the 'PdfGridCell'.\n * @private\n */\n get: function () {\n return this.format;\n },\n set: function (value) {\n this.format = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCellStyle.prototype, \"borders\", {\n /**\n * Gets or sets the `border` of the 'PdfGridCell'.\n * @private\n */\n get: function () {\n return this.gridCellBorders;\n },\n set: function (value) {\n this.gridCellBorders = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCellStyle.prototype, \"cellPadding\", {\n /**\n * Gets or sets the `cell padding`.\n * @private\n */\n get: function () {\n return this.gridCellPadding;\n },\n set: function (value) {\n if (this.gridCellPadding == null || typeof this.gridCellPadding === 'undefined') {\n this.gridCellPadding = new PdfPaddings();\n }\n this.gridCellPadding = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridCellStyle;\n}(PdfGridStyleBase));\nexport { PdfGridCellStyle };\n/**\n * `PdfGridRowStyle` class provides customization of the appearance for the `PdfGridRow`.\n */\nvar PdfGridRowStyle = /** @class */ (function () {\n // Constructor\n /**\n * Initializes a new instance of the `PdfGridRowStyle` class.\n * @private\n */\n function PdfGridRowStyle() {\n //\n }\n Object.defineProperty(PdfGridRowStyle.prototype, \"backgroundBrush\", {\n /**\n * Determine the value of the border is changed or not.\n * @private\n */\n // Properties\n /**\n * Gets or sets the `background brush`.\n * @private\n */\n get: function () {\n return this.gridRowBackgroundBrush;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridRowStyle.prototype.setBackgroundBrush = function (value) {\n this.gridRowBackgroundBrush = value;\n if (typeof this.parent !== 'undefined') {\n for (var i = 0; i < this.parent.cells.count; i++) {\n this.parent.cells.getCell(i).style.backgroundBrush = value;\n }\n }\n };\n Object.defineProperty(PdfGridRowStyle.prototype, \"textBrush\", {\n /**\n * Gets or sets the `text brush`.\n * @private\n */\n get: function () {\n return this.gridRowTextBrush;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridRowStyle.prototype.setTextBrush = function (value) {\n this.gridRowTextBrush = value;\n if (typeof this.parent !== 'undefined') {\n for (var i = 0; i < this.parent.cells.count; i++) {\n this.parent.cells.getCell(i).style.textBrush = value;\n }\n }\n };\n Object.defineProperty(PdfGridRowStyle.prototype, \"textPen\", {\n /**\n * Gets or sets the `text pen`.\n * @private\n */\n get: function () {\n return this.gridRowTextPen;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridRowStyle.prototype.setTextPen = function (value) {\n this.gridRowTextPen = value;\n if (typeof this.parent !== 'undefined') {\n for (var i = 0; i < this.parent.cells.count; i++) {\n this.parent.cells.getCell(i).style.textPen = value;\n }\n }\n };\n Object.defineProperty(PdfGridRowStyle.prototype, \"font\", {\n /**\n * Gets or sets the `font`.\n * @private\n */\n get: function () {\n return this.gridRowFont;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridRowStyle.prototype.setFont = function (value) {\n this.gridRowFont = value;\n if (typeof this.parent !== 'undefined') {\n for (var i = 0; i < this.parent.cells.count; i++) {\n this.parent.cells.getCell(i).style.font = value;\n }\n }\n };\n Object.defineProperty(PdfGridRowStyle.prototype, \"border\", {\n /**\n * Gets or sets the `border` of the current row.\n * @private\n */\n get: function () {\n if (typeof this.gridRowBorder === 'undefined') {\n this.setBorder(new PdfBorders());\n }\n return this.gridRowBorder;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridRowStyle.prototype.setBorder = function (value) {\n this.gridRowBorder = value;\n if (typeof this.parent !== 'undefined') {\n for (var i = 0; i < this.parent.cells.count; i++) {\n this.parent.cells.getCell(i).style.borders = value;\n }\n }\n };\n /**\n * sets the `parent row` of the current object.\n * @private\n */\n PdfGridRowStyle.prototype.setParent = function (parent) {\n this.parent = parent;\n };\n return PdfGridRowStyle;\n}());\nexport { PdfGridRowStyle };\n/**\n * public Enum for `PdfHorizontalOverflowType`.\n * @private\n */\nexport var PdfHorizontalOverflowType;\n(function (PdfHorizontalOverflowType) {\n /**\n * Specifies the type of `NextPage`.\n * @private\n */\n PdfHorizontalOverflowType[PdfHorizontalOverflowType[\"NextPage\"] = 0] = \"NextPage\";\n /**\n * Specifies the type of `LastPage`.\n * @private\n */\n PdfHorizontalOverflowType[PdfHorizontalOverflowType[\"LastPage\"] = 1] = \"LastPage\";\n})(PdfHorizontalOverflowType || (PdfHorizontalOverflowType = {}));\n","import { PdfGridCellStyle } from './styles/style';\nimport { PdfStringLayouter } from './../../graphics/fonts/string-layouter';\nimport { PdfDocument } from './../../document/pdf-document';\nimport { PdfStringFormat } from './../../graphics/fonts/pdf-string-format';\nimport { RectangleF, PointF, SizeF } from './../../drawing/pdf-drawing';\nimport { PdfDashStyle, PdfLineCap } from './../../graphics/enum';\nimport { PdfBorderOverlapStyle } from './../tables/light-tables/enum';\nimport { PdfSolidBrush } from './../../graphics/brushes/pdf-solid-brush';\nimport { PdfColor } from './../../graphics/pdf-color';\nimport { PdfImage } from './../../graphics/images/pdf-image';\nimport { PdfBitmap } from './../../graphics/images/pdf-bitmap';\nimport { PdfTextWebLink } from './../../annotations/pdf-text-web-link';\n/**\n * `PdfGridCell` class represents the schema of a cell in a 'PdfGrid'.\n */\nvar PdfGridCell = /** @class */ (function () {\n function PdfGridCell(row) {\n /**\n * `Width` of the cell.\n * @default 0\n * @private\n */\n this.cellWidth = 0;\n /**\n * `Height` of the cell.\n * @default 0\n * @private\n */\n this.cellHeight = 0;\n /**\n * Specifies weather the `cell is drawn`.\n * @default true\n * @private\n */\n this.finsh = true;\n /**\n * The `remaining height` of row span.\n * @default 0\n * @private\n */\n this.rowSpanRemainingHeight = 0;\n if (typeof row === 'undefined') {\n this.gridRowSpan = 1;\n this.colSpan = 1;\n }\n else {\n this.constructor();\n this.gridRow = row;\n }\n }\n Object.defineProperty(PdfGridCell.prototype, \"isCellMergeContinue\", {\n //Properties\n get: function () {\n return this.internalIsCellMergeContinue;\n },\n set: function (value) {\n this.internalIsCellMergeContinue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"isRowMergeContinue\", {\n get: function () {\n return this.internalIsRowMergeContinue;\n },\n set: function (value) {\n this.internalIsRowMergeContinue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"isCellMergeStart\", {\n get: function () {\n return this.internalIsCellMergeStart;\n },\n set: function (value) {\n this.internalIsCellMergeStart = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"isRowMergeStart\", {\n get: function () {\n return this.internalIsRowMergeStart;\n },\n set: function (value) {\n this.internalIsRowMergeStart = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"remainingString\", {\n /**\n * Gets or sets the `remaining string` after the row split between pages.\n * @private\n */\n get: function () {\n return this.remaining;\n },\n set: function (value) {\n this.remaining = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"stringFormat\", {\n /**\n * Gets or sets the `string format`.\n * @private\n */\n get: function () {\n if (this.format == null) {\n this.format = new PdfStringFormat();\n }\n return this.format;\n },\n set: function (value) {\n this.format = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"row\", {\n /**\n * Gets or sets the parent `row`.\n * @private\n */\n get: function () {\n return this.gridRow;\n },\n set: function (value) {\n this.gridRow = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"value\", {\n /**\n * Gets or sets the `value` of the cell.\n * @private\n */\n get: function () {\n return this.objectValue;\n },\n set: function (value) {\n this.objectValue = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"rowSpan\", {\n /**\n * Gets or sets a value that indicates the total number of rows that cell `spans` within a PdfGrid.\n * @private\n */\n get: function () {\n return this.gridRowSpan;\n },\n set: function (value) {\n if (value < 1) {\n throw new Error('ArgumentException : Invalid span specified, must be greater than or equal to 1');\n }\n else {\n this.gridRowSpan = value;\n this.row.rowSpanExists = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"style\", {\n /**\n * Gets or sets the cell `style`.\n * @private\n */\n get: function () {\n if (this.cellStyle == null) {\n this.cellStyle = new PdfGridCellStyle();\n }\n return this.cellStyle;\n },\n set: function (value) {\n this.cellStyle = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"height\", {\n /**\n * Gets the `height` of the PdfGrid cell.[Read-Only].\n * @private\n */\n get: function () {\n if (this.cellHeight === 0) {\n this.cellHeight = this.measureHeight();\n }\n return this.cellHeight;\n },\n set: function (value) {\n this.cellHeight = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"columnSpan\", {\n /**\n * Gets or sets a value that indicates the total number of columns that cell `spans` within a PdfGrid.\n * @private\n */\n get: function () {\n return this.colSpan;\n },\n set: function (value) {\n if (value < 1) {\n throw Error('Invalid span specified, must be greater than or equal to 1');\n }\n else {\n this.colSpan = value;\n this.row.columnSpanExists = true;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridCell.prototype, \"width\", {\n /**\n * Gets the `width` of the PdfGrid cell.[Read-Only].\n * @private\n */\n get: function () {\n if (this.cellWidth === 0 || this.row.grid.isComplete) {\n this.cellWidth = this.measureWidth();\n }\n return this.cellWidth;\n },\n set: function (value) {\n this.cellWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n //Implementation\n /**\n * `Calculates the width`.\n * @private\n */\n PdfGridCell.prototype.measureWidth = function () {\n // .. Calculate the cell text width.\n // .....Add border widths, cell spacings and paddings to the width.\n var width = 0;\n var layouter = new PdfStringLayouter();\n if (typeof this.objectValue === 'string') {\n /* tslint:disable */\n var slr = layouter.layout(this.objectValue, this.getTextFont(), this.stringFormat, new SizeF(0, 0), false, new SizeF(0, 0));\n width += slr.actualSize.width;\n width += (this.style.borders.left.width + this.style.borders.right.width) * 2;\n }\n else if (this.objectValue instanceof PdfImage || this.objectValue instanceof PdfBitmap) {\n width += this.objectValue.width;\n }\n else if (this.objectValue instanceof PdfTextWebLink) {\n var webLink = this.objectValue;\n var result = layouter.layout(webLink.text, webLink.font, webLink.stringFormat, new SizeF(0, 0), false, new SizeF(0, 0));\n /* tslint:enable */\n width += result.actualSize.width;\n width += (this.style.borders.left.width + this.style.borders.right.width) * 2;\n }\n width += (this.row.grid.style.cellPadding.left + this.row.grid.style.cellPadding.right);\n width += this.row.grid.style.cellSpacing;\n return width;\n };\n /**\n * Draw the `cell background`.\n * @private\n */\n PdfGridCell.prototype.drawCellBackground = function (graphics, bounds) {\n var backgroundBrush = this.getBackgroundBrush();\n if (backgroundBrush != null) {\n graphics.drawRectangle(backgroundBrush, bounds.x, bounds.y, bounds.width, bounds.height);\n }\n };\n /**\n * `Adjusts the text layout area`.\n * @private\n */\n /* tslint:disable */\n PdfGridCell.prototype.adjustContentLayoutArea = function (bounds) {\n //Add Padding value to its Cell Bounds\n var returnBounds = new RectangleF(bounds.x, bounds.y, bounds.width, bounds.height);\n if (typeof this.style.cellPadding === 'undefined' || this.style.cellPadding == null) {\n returnBounds.x += this.gridRow.grid.style.cellPadding.left + this.cellStyle.borders.left.width;\n returnBounds.y += this.gridRow.grid.style.cellPadding.top + this.cellStyle.borders.top.width;\n returnBounds.width -= (this.gridRow.grid.style.cellPadding.right + this.gridRow.grid.style.cellPadding.left);\n returnBounds.width -= (this.cellStyle.borders.left.width + this.cellStyle.borders.right.width);\n returnBounds.height -= (this.gridRow.grid.style.cellPadding.bottom + this.gridRow.grid.style.cellPadding.top);\n returnBounds.height -= (this.cellStyle.borders.top.width + this.cellStyle.borders.bottom.width);\n if (this.rowSpan === 1) {\n returnBounds.width -= (this.style.borders.left.width);\n }\n }\n else {\n returnBounds.x += this.style.cellPadding.left + this.cellStyle.borders.left.width;\n returnBounds.y += this.style.cellPadding.top + this.cellStyle.borders.top.width;\n returnBounds.width -= (this.style.cellPadding.right + this.style.cellPadding.left);\n returnBounds.width -= (this.cellStyle.borders.left.width + this.cellStyle.borders.right.width);\n returnBounds.height -= (this.style.cellPadding.bottom + this.style.cellPadding.top);\n returnBounds.height -= (this.cellStyle.borders.top.width + this.cellStyle.borders.bottom.width);\n if (this.rowSpan === 1) {\n returnBounds.width -= (this.style.borders.left.width);\n }\n }\n return returnBounds;\n };\n /**\n * `Draws` the specified graphics.\n * @private\n */\n PdfGridCell.prototype.draw = function (graphics, bounds, cancelSubsequentSpans) {\n var isrowbreak = false;\n var result = null;\n if (this.internalIsCellMergeContinue || this.internalIsRowMergeContinue) {\n if (this.internalIsCellMergeContinue && this.row.grid.style.allowHorizontalOverflow) {\n if ((this.row.rowOverflowIndex > 0 && (this.row.cells.indexOf(this) != this.row.rowOverflowIndex + 1)) || (this.row.rowOverflowIndex == 0 && this.internalIsCellMergeContinue)) {\n return result;\n }\n }\n else {\n return result;\n }\n }\n //Adjust bounds with Row and Column Spacing\n bounds = this.adjustOuterLayoutArea(bounds, graphics);\n var textPen = this.getTextPen();\n var textBrush = this.getTextBrush();\n if (typeof textPen === 'undefined' && typeof textBrush === 'undefined') {\n textBrush = new PdfSolidBrush(new PdfColor(0, 0, 0));\n }\n var font = this.getTextFont();\n var strFormat = this.getStringFormat();\n var innerLayoutArea = this.adjustContentLayoutArea(bounds);\n this.drawCellBackground(graphics, bounds);\n if (typeof this.objectValue === 'string' || typeof this.remaining === 'string') {\n var temp = void 0;\n temp = this.remaining === '' ? this.remaining : this.objectValue;\n graphics.drawString(temp, font, textPen, textBrush, innerLayoutArea.x, innerLayoutArea.y, innerLayoutArea.width, innerLayoutArea.height, strFormat);\n result = graphics.stringLayoutResult;\n }\n else if (this.objectValue instanceof PdfImage || this.objectValue instanceof PdfBitmap) {\n var imageBounds = void 0;\n if (this.objectValue.width <= innerLayoutArea.width) {\n imageBounds = new RectangleF(innerLayoutArea.x, innerLayoutArea.y, this.objectValue.width, innerLayoutArea.height);\n }\n else {\n imageBounds = innerLayoutArea;\n }\n graphics.drawImage(this.objectValue, imageBounds.x, imageBounds.y, imageBounds.width, imageBounds.height);\n }\n else if (this.objectValue instanceof PdfTextWebLink) {\n this.objectValue.draw(graphics.currentPage, innerLayoutArea);\n }\n if (this.style.borders != null) {\n this.drawCellBorders(graphics, bounds);\n }\n return result;\n };\n /* tslint:enable */\n /**\n * Draws the `cell border` constructed by drawing lines.\n * @private\n */\n PdfGridCell.prototype.drawCellBorders = function (graphics, bounds) {\n if (this.row.grid.style.borderOverlapStyle === PdfBorderOverlapStyle.Inside) {\n bounds.x += this.style.borders.left.width;\n bounds.y += this.style.borders.top.width;\n bounds.width -= this.style.borders.right.width;\n bounds.height -= this.style.borders.bottom.width;\n }\n var p1 = new PointF(bounds.x, bounds.y + bounds.height);\n var p2 = new PointF(bounds.x, bounds.y);\n var pen = this.cellStyle.borders.left;\n if (this.cellStyle.borders.left.dashStyle === PdfDashStyle.Solid) {\n pen.lineCap = PdfLineCap.Square;\n }\n // SetTransparency(ref graphics, pen);\n graphics.drawLine(pen, p1, p2);\n p1 = new PointF(bounds.x + bounds.width, bounds.y);\n p2 = new PointF(bounds.x + bounds.width, bounds.y + bounds.height);\n pen = this.cellStyle.borders.right;\n if ((bounds.x + bounds.width) > (graphics.clientSize.width - (pen.width / 2))) {\n p1 = new PointF(graphics.clientSize.width - (pen.width / 2), bounds.y);\n p2 = new PointF(graphics.clientSize.width - (pen.width / 2), bounds.y + bounds.height);\n }\n if (this.cellStyle.borders.right.dashStyle === PdfDashStyle.Solid) {\n pen.lineCap = PdfLineCap.Square;\n }\n graphics.drawLine(pen, p1, p2);\n p1 = new PointF(bounds.x, bounds.y);\n p2 = new PointF(bounds.x + bounds.width, bounds.y);\n pen = this.cellStyle.borders.top;\n if (this.cellStyle.borders.top.dashStyle === PdfDashStyle.Solid) {\n pen.lineCap = PdfLineCap.Square;\n }\n graphics.drawLine(pen, p1, p2);\n p1 = new PointF(bounds.x + bounds.width, bounds.y + bounds.height);\n p2 = new PointF(bounds.x, bounds.y + bounds.height);\n pen = this.cellStyle.borders.bottom;\n // if ((bounds.y + bounds.height) > (graphics.clientSize.height - (pen.width / 2))) {\n // p1 = new PointF((bounds.x + bounds.width), (graphics.clientSize.height - (pen.width / 2)));\n // p2 = new PointF(bounds.x, (graphics.clientSize.height - (pen.width / 2)));\n // }\n if (this.cellStyle.borders.bottom.dashStyle === PdfDashStyle.Solid) {\n pen.lineCap = PdfLineCap.Square;\n }\n graphics.drawLine(pen, p1, p2);\n };\n /**\n * `Adjusts the outer layout area`.\n * @private\n */\n /* tslint:disable */\n PdfGridCell.prototype.adjustOuterLayoutArea = function (bounds, g) {\n var isHeader = false;\n var cellSpacing = this.row.grid.style.cellSpacing;\n if (cellSpacing > 0) {\n bounds = new RectangleF(bounds.x + cellSpacing, bounds.y + cellSpacing, bounds.width - cellSpacing, bounds.height - cellSpacing);\n }\n var currentColIndex = this.row.cells.indexOf(this);\n if (this.columnSpan > 1) {\n var span = this.columnSpan;\n var totalWidth = 0;\n for (var i = currentColIndex; i < currentColIndex + span; i++) {\n if (this.row.grid.style.allowHorizontalOverflow) {\n var width = void 0;\n var compWidth = this.row.grid.size.width < g.clientSize.width ? this.row.grid.size.width : g.clientSize.width;\n if (this.row.grid.size.width > g.clientSize.width) {\n width = bounds.x + totalWidth + this.row.grid.columns.getColumn(i).width;\n }\n else {\n width = totalWidth + this.row.grid.columns.getColumn(i).width;\n }\n if (width > compWidth) {\n break;\n }\n }\n totalWidth += this.row.grid.columns.getColumn(i).width;\n }\n totalWidth -= this.row.grid.style.cellSpacing;\n bounds.width = totalWidth;\n }\n if (this.rowSpan > 1 || this.row.rowSpanExists) {\n var span = this.rowSpan;\n var currentRowIndex = this.row.grid.rows.rowCollection.indexOf(this.row);\n if (currentRowIndex == -1) {\n currentRowIndex = this.row.grid.headers.indexOf(this.row);\n if (currentRowIndex != -1) {\n isHeader = true;\n }\n }\n var totalHeight = 0;\n var max = 0;\n for (var i = currentRowIndex; i < currentRowIndex + span; i++) {\n totalHeight += (isHeader ? this.row.grid.headers.getHeader(i).height : this.row.grid.rows.getRow(i).height);\n var row = this.row.grid.rows.getRow(i);\n var rowIndex = this.row.grid.rows.rowCollection.indexOf(row);\n }\n var cellIndex = this.row.cells.indexOf(this);\n totalHeight -= this.row.grid.style.cellSpacing;\n // if (this.row.cells.getCell(cellIndex).height > totalHeight && (!this.row.grid.rows.getRow((currentRowIndex + span) - 1).isRowHeightSet)) {\n // this.row.grid.rows.getRow((currentRowIndex + span) - 1).cells.getCell(cellIndex).rowSpanRemainingHeight = this.row.cells.getCell(cellIndex).height - totalHeight;\n // totalHeight = this.row.cells.getCell(cellIndex).height;\n // bounds.height = totalHeight;\n // } else {\n bounds.height = totalHeight;\n // }\n if (!this.row.rowMergeComplete) {\n bounds.height = totalHeight;\n }\n }\n return bounds;\n };\n /* tslint:enable */\n /**\n * Gets the `text font`.\n * @private\n */\n PdfGridCell.prototype.getTextFont = function () {\n if (typeof this.style.font !== 'undefined' && this.style.font != null) {\n return this.style.font;\n }\n else if (typeof this.row.style.font !== 'undefined' && this.row.style.font != null) {\n return this.row.style.font;\n }\n else if (typeof this.row.grid.style.font !== 'undefined' && this.row.grid.style.font != null) {\n return this.row.grid.style.font;\n }\n else {\n return PdfDocument.defaultFont;\n }\n };\n /**\n * Gets the `text brush`.\n * @private\n */\n PdfGridCell.prototype.getTextBrush = function () {\n if (typeof this.style.textBrush !== 'undefined' && this.style.textBrush != null) {\n return this.style.textBrush;\n }\n else if (typeof this.row.style.textBrush !== 'undefined' && this.row.style.textBrush != null) {\n return this.row.style.textBrush;\n }\n else {\n return this.row.grid.style.textBrush;\n }\n };\n /**\n * Gets the `text pen`.\n * @private\n */\n PdfGridCell.prototype.getTextPen = function () {\n if (typeof this.style.textPen !== 'undefined' && this.style.textPen != null) {\n return this.style.textPen;\n }\n else if (typeof this.row.style.textPen !== 'undefined' && this.row.style.textPen != null) {\n return this.row.style.textPen;\n }\n else {\n return this.row.grid.style.textPen;\n }\n };\n /**\n * Gets the `background brush`.\n * @private\n */\n PdfGridCell.prototype.getBackgroundBrush = function () {\n if (typeof this.style.backgroundBrush !== 'undefined' && this.style.backgroundBrush != null) {\n return this.style.backgroundBrush;\n }\n else if (typeof this.row.style.backgroundBrush !== 'undefined' && this.row.style.backgroundBrush != null) {\n return this.row.style.backgroundBrush;\n }\n else {\n return this.row.grid.style.backgroundBrush;\n }\n };\n /**\n * Gets the current `StringFormat`.\n * @private\n */\n PdfGridCell.prototype.getStringFormat = function () {\n if (typeof this.style.stringFormat !== 'undefined' && this.style.stringFormat != null) {\n return this.style.stringFormat;\n }\n else {\n return this.stringFormat;\n }\n };\n /**\n * Calculates the `height`.\n * @private\n */\n PdfGridCell.prototype.measureHeight = function () {\n // .. Calculate the cell text height.\n // .....Add border widths, cell spacings and paddings to the height.\n var width = this.calculateWidth();\n // //check whether the Current PdfGridCell has padding\n if (this.style.cellPadding == null || typeof this.style.cellPadding === 'undefined') {\n width -= (this.gridRow.grid.style.cellPadding.right + this.gridRow.grid.style.cellPadding.left);\n width -= (this.style.borders.left.width + this.style.borders.right.width);\n }\n else {\n width -= (this.style.cellPadding.right + this.style.cellPadding.left);\n width -= (this.style.borders.left.width + this.style.borders.right.width);\n }\n var height = 0;\n var layouter = new PdfStringLayouter();\n if (typeof this.objectValue === 'string' || typeof this.remainingString === 'string') {\n var currentValue = this.objectValue;\n /* tslint:disable */\n var slr = layouter.layout(currentValue, this.getTextFont(), this.stringFormat, new SizeF(width, 0), false, new SizeF(0, 0));\n /* tslint:enable */\n height += slr.actualSize.height;\n }\n else if (this.objectValue instanceof PdfImage || this.objectValue instanceof PdfBitmap) {\n height += this.objectValue.height;\n }\n else if (this.objectValue instanceof PdfTextWebLink) {\n var webLink = this.objectValue;\n /* tslint:disable */\n var slr = layouter.layout(webLink.text, webLink.font, webLink.stringFormat, new SizeF(width, 0), false, new SizeF(0, 0));\n /* tslint:enable */\n height += slr.actualSize.height;\n }\n height += (this.style.borders.top.width + this.style.borders.bottom.width) * 2;\n //Add padding top and bottom value to height\n if (this.style.cellPadding == null || typeof this.style.cellPadding === 'undefined') {\n height += (this.row.grid.style.cellPadding.top + this.row.grid.style.cellPadding.bottom);\n }\n else {\n height += (this.style.cellPadding.top + this.style.cellPadding.bottom);\n }\n height += this.row.grid.style.cellSpacing;\n return height;\n };\n /**\n * return the calculated `width` of the cell.\n * @private\n */\n PdfGridCell.prototype.calculateWidth = function () {\n var cellIndex = this.row.cells.indexOf(this);\n var columnSpan = this.columnSpan;\n var width = 0;\n for (var i = 0; i < columnSpan; i++) {\n width += this.row.grid.columns.getColumn(cellIndex + i).width;\n }\n return width;\n };\n return PdfGridCell;\n}());\nexport { PdfGridCell };\n/**\n * `PdfGridCellCollection` class provides access to an ordered,\n * strongly typed collection of 'PdfGridCell' objects.\n * @private\n */\nvar PdfGridCellCollection = /** @class */ (function () {\n //Constructor\n /**\n * Initializes a new instance of the `PdfGridCellCollection` class with the row.\n * @private\n */\n function PdfGridCellCollection(row) {\n /**\n * @hidden\n * @private\n */\n this.cells = [];\n this.gridRow = row;\n }\n //Properties\n /**\n * Gets the current `cell`.\n * @private\n */\n PdfGridCellCollection.prototype.getCell = function (index) {\n if (index < 0 || index >= this.count) {\n throw new Error('IndexOutOfRangeException');\n }\n return this.cells[index];\n };\n Object.defineProperty(PdfGridCellCollection.prototype, \"count\", {\n /**\n * Gets the cells `count`.[Read-Only].\n * @private\n */\n get: function () {\n return this.cells.length;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridCellCollection.prototype.add = function (cell) {\n if (typeof cell === 'undefined') {\n var tempcell = new PdfGridCell();\n this.add(tempcell);\n return cell;\n }\n else {\n cell.row = this.gridRow;\n this.cells.push(cell);\n }\n };\n /**\n * Returns the `index of` a particular cell in the collection.\n * @private\n */\n PdfGridCellCollection.prototype.indexOf = function (cell) {\n return this.cells.indexOf(cell);\n };\n return PdfGridCellCollection;\n}());\nexport { PdfGridCellCollection };\n","import { PdfGridCell } from './pdf-grid-cell';\nimport { PdfStringFormat } from './../../graphics/fonts/pdf-string-format';\n/**\n * `PdfGridColumn` class represents the schema of a column in a 'PdfGrid'.\n */\nvar PdfGridColumn = /** @class */ (function () {\n //Constructors\n /**\n * Initializes a new instance of the `PdfGridColumn` class with the parent grid.\n * @private\n */\n function PdfGridColumn(grid) {\n /**\n * The `width` of the column.\n * @default 0\n * @private\n */\n this.columnWidth = 0;\n this.grid = grid;\n }\n Object.defineProperty(PdfGridColumn.prototype, \"width\", {\n /**\n * Gets or sets the `width` of the 'PdfGridColumn'.\n * @private\n */\n get: function () {\n return this.columnWidth;\n },\n set: function (value) {\n this.isCustomWidth = true;\n this.columnWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridColumn.prototype, \"format\", {\n /**\n * Gets or sets the information about the text `formatting`.\n * @private\n */\n get: function () {\n if (this.stringFormat == null) {\n this.stringFormat = new PdfStringFormat(); //GetDefaultFormat();\n }\n return this.stringFormat;\n },\n set: function (value) {\n this.stringFormat = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridColumn;\n}());\nexport { PdfGridColumn };\n/**\n * `PdfGridColumnCollection` class provides access to an ordered,\n * strongly typed collection of 'PdfGridColumn' objects.\n * @private\n */\nvar PdfGridColumnCollection = /** @class */ (function () {\n //properties\n //Constructors\n /**\n * Initializes a new instance of the `PdfGridColumnCollection` class with the parent grid.\n * @private\n */\n function PdfGridColumnCollection(grid) {\n /**\n * @hidden\n * @private\n */\n this.internalColumns = [];\n /**\n * @hidden\n * @private\n */\n this.columnWidth = 0;\n this.grid = grid;\n this.internalColumns = [];\n }\n //Iplementation\n /**\n * `Add` a new column to the 'PdfGrid'.\n * @private\n */\n PdfGridColumnCollection.prototype.add = function (count) {\n // public add(column : PdfGridColumn) : void\n // public add(arg : number|PdfGridColumn) : void {\n // if (typeof arg === 'number') {\n for (var i = 0; i < count; i++) {\n this.internalColumns.push(new PdfGridColumn(this.grid));\n for (var index = 0; index < this.grid.rows.count; index++) {\n var row = this.grid.rows.getRow(index);\n var cell = new PdfGridCell();\n cell.value = '';\n row.cells.add(cell);\n }\n }\n // } else {\n // let column : PdfGridColumn = new PdfGridColumn(this.grid);\n // this.columns.push(column);\n // return column;\n // }\n };\n Object.defineProperty(PdfGridColumnCollection.prototype, \"count\", {\n /**\n * Gets the `number of columns` in the 'PdfGrid'.[Read-Only].\n * @private\n */\n get: function () {\n return this.internalColumns.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridColumnCollection.prototype, \"width\", {\n /**\n * Gets the `widths`.\n * @private\n */\n get: function () {\n if (this.columnWidth === 0) {\n this.columnWidth = this.measureColumnsWidth();\n }\n if (this.grid.initialWidth !== 0 && this.columnWidth !== this.grid.initialWidth && !this.grid.style.allowHorizontalOverflow) {\n this.columnWidth = this.grid.initialWidth;\n this.grid.isPageWidth = true;\n }\n return this.columnWidth;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridColumnCollection.prototype, \"columns\", {\n /**\n * Gets the `array of PdfGridColumn`.[Read-Only]\n * @private\n */\n get: function () {\n return this.internalColumns;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Gets the `PdfGridColumn` from the specified index.[Read-Only]\n * @private\n */\n PdfGridColumnCollection.prototype.getColumn = function (index) {\n if (index >= 0 && index <= this.columns.length) {\n return this.columns[index];\n }\n else {\n throw Error('can not get the column from the index: ' + index);\n }\n };\n //Implementation\n /**\n * `Calculates the column widths`.\n * @private\n */\n PdfGridColumnCollection.prototype.measureColumnsWidth = function () {\n var totalWidth = 0;\n // this.m_grid.measureColumnsWidth();\n for (var i = 0, count = this.internalColumns.length; i < count; i++) {\n totalWidth += this.internalColumns[i].width;\n }\n return totalWidth;\n };\n /**\n * Gets the `widths of the columns`.\n * @private\n */\n PdfGridColumnCollection.prototype.getDefaultWidths = function (totalWidth) {\n var widths = [];\n var summ = 0.0;\n var subFactor = this.count;\n for (var i = 0; i < this.count; i++) {\n if (this.grid.isPageWidth && totalWidth >= 0 && !this.internalColumns[i].isCustomWidth) {\n this.internalColumns[i].width = 0;\n }\n else {\n widths[i] = this.internalColumns[i].width;\n if (this.internalColumns[i].width > 0 && this.internalColumns[i].isCustomWidth) {\n totalWidth -= this.internalColumns[i].width;\n subFactor--;\n }\n else {\n widths[i] = 0;\n }\n }\n }\n for (var i = 0; i < this.count; i++) {\n var width = totalWidth / subFactor;\n if (widths[i] <= 0) {\n widths[i] = width;\n }\n }\n return widths;\n };\n return PdfGridColumnCollection;\n}());\nexport { PdfGridColumnCollection };\n","import { PdfGridCell, PdfGridCellCollection } from './pdf-grid-cell';\nimport { PdfGridRowStyle } from './styles/style';\n/**\n * `PdfGridRow` class provides customization of the settings for the particular row.\n */\nvar PdfGridRow = /** @class */ (function () {\n //Constructor\n /**\n * Initializes a new instance of the `PdfGridRow` class with the parent grid.\n * @private\n */\n function PdfGridRow(grid) {\n /**\n * Stores the index of the overflowing row.\n * @private\n */\n this.gridRowOverflowIndex = 0;\n /**\n * Check whether the row height `is set explicitly`.\n * @default false\n * @private\n */\n this.isRowHeightSet = false;\n /**\n * Check weather the row merge `is completed` or not.\n * @default true\n * @private\n */\n this.isRowMergeComplete = true;\n this.pdfGrid = grid;\n }\n Object.defineProperty(PdfGridRow.prototype, \"rowSpanExists\", {\n //Properties\n /**\n * Gets or sets a value indicating [`row span exists`].\n * @private\n */\n get: function () {\n return this.bRowSpanExists;\n },\n set: function (value) {\n this.bRowSpanExists = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"cells\", {\n /**\n * Gets the `cells` from the selected row.[Read-Only].\n * @private\n */\n get: function () {\n if (this.gridCells == null) {\n this.gridCells = new PdfGridCellCollection(this);\n }\n return this.gridCells;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"grid\", {\n /**\n * Gets or sets the parent `grid`.\n * @private\n */\n get: function () {\n return this.pdfGrid;\n },\n set: function (value) {\n this.pdfGrid = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"style\", {\n /**\n * Gets or sets the row `style`.\n * @private\n */\n get: function () {\n if (typeof this.rowStyle === 'undefined') {\n this.rowStyle = new PdfGridRowStyle();\n this.rowStyle.setParent(this);\n }\n return this.rowStyle;\n },\n set: function (value) {\n this.rowStyle = value;\n for (var i = 0; i < this.cells.count; i++) {\n this.cells.getCell(i).style.borders = value.border;\n if (typeof value.font !== 'undefined') {\n this.cells.getCell(i).style.font = value.font;\n }\n if (typeof value.backgroundBrush !== 'undefined') {\n this.cells.getCell(i).style.backgroundBrush = value.backgroundBrush;\n }\n if (typeof value.textBrush !== 'undefined') {\n this.cells.getCell(i).style.textBrush = value.textBrush;\n }\n if (typeof value.textPen !== 'undefined') {\n this.cells.getCell(i).style.textPen = value.textPen;\n }\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"rowBreakHeight\", {\n /**\n * `Height` of the row yet to be drawn after split.\n * @private\n */\n get: function () {\n if (typeof this.gridRowBreakHeight === 'undefined') {\n this.gridRowBreakHeight = 0;\n }\n return this.gridRowBreakHeight;\n },\n set: function (value) {\n this.gridRowBreakHeight = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"rowOverflowIndex\", {\n get: function () {\n return this.gridRowOverflowIndex;\n },\n set: function (value) {\n this.gridRowOverflowIndex = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"height\", {\n /**\n * Gets or sets the `height` of the row.\n * @private\n */\n get: function () {\n if (!this.isRowHeightSet) {\n this.rowHeight = this.measureHeight();\n }\n return this.rowHeight;\n },\n set: function (value) {\n this.rowHeight = value;\n this.isRowHeightSet = true;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"columnSpanExists\", {\n /**\n * Gets or sets a value indicating [`column span exists`].\n * @private\n */\n get: function () {\n return this.bColumnSpanExists;\n },\n set: function (value) {\n this.bColumnSpanExists = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"rowMergeComplete\", {\n /**\n * Check whether the Row `has row span or row merge continue`.\n * @private\n */\n get: function () {\n return this.isRowMergeComplete;\n },\n set: function (value) {\n this.isRowMergeComplete = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRow.prototype, \"rowIndex\", {\n /**\n * Returns `index` of the row.\n * @private\n */\n get: function () {\n return this.grid.rows.rowCollection.indexOf(this);\n },\n enumerable: true,\n configurable: true\n });\n //Implementation\n /**\n * `Calculates the height`.\n * @private\n */\n PdfGridRow.prototype.measureHeight = function () {\n var rowSpanRemainingHeight = 0;\n var rowHeight;\n var maxHeight = 0;\n // if(this.cells.getCell(0).RowSpan > 1) {\n // rowHeight=0;\n // } else {\n rowHeight = this.cells.getCell(0).height;\n // }\n for (var i = 0; i < this.cells.count; i++) {\n var cell = this.cells.getCell(i);\n //get the maximum rowspan remaining height.\n if (cell.rowSpanRemainingHeight > rowSpanRemainingHeight) {\n rowSpanRemainingHeight = cell.rowSpanRemainingHeight;\n }\n //skip the cell if row spanned.\n // if (cell.IsRowMergeContinue)\n // continue; \n // if (!cell.IsRowMergeContinue)\n this.rowMergeComplete = false;\n if (cell.rowSpan > 1) {\n if (maxHeight < cell.height) {\n maxHeight = cell.height;\n }\n continue;\n }\n rowHeight = Math.max(rowHeight, cell.height);\n }\n if (rowHeight === 0) {\n rowHeight = maxHeight;\n }\n else if (rowSpanRemainingHeight > 0) {\n rowHeight += rowSpanRemainingHeight;\n }\n return rowHeight;\n };\n return PdfGridRow;\n}());\nexport { PdfGridRow };\n/**\n * `PdfGridRowCollection` class provides access to an ordered, strongly typed collection of 'PdfGridRow' objects.\n * @private\n */\nvar PdfGridRowCollection = /** @class */ (function () {\n // Constructor\n /**\n * Initializes a new instance of the `PdfGridRowCollection` class with the parent grid.\n * @private\n */\n function PdfGridRowCollection(grid) {\n this.rows = [];\n this.grid = grid;\n }\n Object.defineProperty(PdfGridRowCollection.prototype, \"count\", {\n //Properties\n /**\n * Gets the number of header in the `PdfGrid`.[Read-Only].\n * @private\n */\n get: function () {\n return this.rows.length;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridRowCollection.prototype, \"rowCollection\", {\n //Implementation\n /**\n * Return the row collection of the `grid`.\n * @private\n */\n get: function () {\n return this.rows;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridRowCollection.prototype.addRow = function (arg) {\n if (typeof arg === 'undefined') {\n var temprow = new PdfGridRow(this.grid);\n this.addRow(temprow);\n return temprow;\n }\n else {\n arg.style.setBackgroundBrush(this.grid.style.backgroundBrush);\n arg.style.setFont(this.grid.style.font);\n arg.style.setTextBrush(this.grid.style.textBrush);\n arg.style.setTextPen(this.grid.style.textPen);\n if (arg.cells.count === 0) {\n for (var i = 0; i < this.grid.columns.count; i++) {\n arg.cells.add(new PdfGridCell());\n }\n }\n this.rows.push(arg);\n }\n };\n /**\n * Return the row by index.\n * @private\n */\n PdfGridRowCollection.prototype.getRow = function (index) {\n return this.rows[index];\n };\n return PdfGridRowCollection;\n}());\nexport { PdfGridRowCollection };\n/**\n * `PdfGridHeaderCollection` class provides customization of the settings for the header.\n * @private\n */\nvar PdfGridHeaderCollection = /** @class */ (function () {\n //constructor\n /**\n * Initializes a new instance of the `PdfGridHeaderCollection` class with the parent grid.\n * @private\n */\n function PdfGridHeaderCollection(grid) {\n /**\n * The array to store the `rows` of the grid header.\n * @private\n */\n this.rows = [];\n this.grid = grid;\n this.rows = [];\n }\n //Properties\n /**\n * Gets a 'PdfGridRow' object that represents the `header` row in a 'PdfGridHeaderCollection' control.[Read-Only].\n * @private\n */\n PdfGridHeaderCollection.prototype.getHeader = function (index) {\n // if (index < 0 || index >= Count) {\n // throw new IndexOutOfRangeException();\n // }\n return (this.rows[index]);\n };\n Object.defineProperty(PdfGridHeaderCollection.prototype, \"count\", {\n /**\n * Gets the `number of header` in the 'PdfGrid'.[Read-Only]\n * @private\n */\n get: function () {\n return this.rows.length;\n },\n enumerable: true,\n configurable: true\n });\n PdfGridHeaderCollection.prototype.add = function (arg) {\n if (typeof arg === 'number') {\n var row = void 0;\n for (var i = 0; i < arg; i++) {\n row = new PdfGridRow(this.grid);\n for (var j = 0; j < this.grid.columns.count; j++) {\n row.cells.add(new PdfGridCell());\n }\n this.rows.push(row);\n }\n return this.rows;\n }\n else {\n this.rows.push(arg);\n }\n };\n PdfGridHeaderCollection.prototype.indexOf = function (row) {\n return this.rows.indexOf(row);\n };\n return PdfGridHeaderCollection;\n}());\nexport { PdfGridHeaderCollection };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * PdfGrid.ts class for EJ2-PDF\n */\nimport { PdfGridColumnCollection } from './pdf-grid-column';\nimport { PdfGridRowCollection, PdfGridHeaderCollection } from './pdf-grid-row';\nimport { RectangleF, SizeF, PointF } from './../../drawing/pdf-drawing';\nimport { PdfLayoutElement } from './../../graphics/figures/layout-element';\nimport { PdfLayoutResult, PdfLayoutFormat } from './../../graphics/figures/base/element-layouter';\nimport { PdfBorders } from './styles/pdf-borders';\nimport { PdfGridStyle } from './styles/style';\nimport { PdfLayoutType } from './../../graphics/figures/enum';\nimport { PdfHorizontalOverflowType } from './styles/style';\nimport { TemporaryDictionary } from './../../collections/object-object-pair/dictionary';\nimport { PdfStringFormat } from './../../graphics/fonts/pdf-string-format';\n/**\n * `PdfGridLayoutFormat` class represents a flexible grid that consists of columns and rows.\n */\nvar PdfGridLayoutFormat = /** @class */ (function (_super) {\n __extends(PdfGridLayoutFormat, _super);\n /**\n * Initializes a new instance of the `PdfGridLayoutFormat` class.\n * @private\n */\n function PdfGridLayoutFormat(baseFormat) {\n var _this = this;\n if (typeof baseFormat === 'undefined') {\n _this = _super.call(this) || this;\n }\n else {\n _this = _super.call(this, baseFormat) || this;\n }\n return _this;\n }\n return PdfGridLayoutFormat;\n}(PdfLayoutFormat));\nexport { PdfGridLayoutFormat };\nvar PdfGrid = /** @class */ (function (_super) {\n __extends(PdfGrid, _super);\n //constructor\n /**\n * Initialize a new instance for `PdfGrid` class.\n * @private\n */\n function PdfGrid() {\n var _this = _super.call(this) || this;\n /**\n * @hidden\n * @private\n */\n _this.gridSize = new SizeF(0, 0);\n /**\n * @hidden\n * @private\n */\n _this.isRearranged = false;\n /**\n * @hidden\n * @private\n */\n _this.pageBounds = new RectangleF();\n /**\n * @hidden\n * @private\n */\n _this.listOfNavigatePages = [];\n /**\n * @hidden\n * @private\n */\n _this.flag = true;\n /**\n * @hidden\n * @private\n */\n _this.columnRanges = [];\n /**\n * @hidden\n * @private\n */\n _this.currentLocation = new PointF(0, 0);\n /**\n * @hidden\n * @private\n */\n _this.breakRow = true;\n return _this;\n }\n Object.defineProperty(PdfGrid.prototype, \"raiseBeginCellDraw\", {\n //Properties\n /**\n * Gets a value indicating whether the `start cell layout event` should be raised.\n * @private\n */\n get: function () {\n return (typeof this.beginCellDraw !== 'undefined' && typeof this.beginCellDraw !== null);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"raiseEndCellDraw\", {\n /**\n * Gets a value indicating whether the `end cell layout event` should be raised.\n * @private\n */\n get: function () {\n return (typeof this.endCellDraw !== 'undefined' && typeof this.endCellDraw !== null);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"raiseBeginPageLayout\", {\n /**\n * Gets a value indicating whether the `start page layout event` should be raised.\n * @private\n */\n get: function () {\n return (typeof this.beginPageLayout !== 'undefined');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"raiseEndPageLayout\", {\n /**\n * Gets a value indicating whether the `ending page layout event` should be raised.\n * @private\n */\n get: function () {\n return (typeof this.endPageLayout !== 'undefined');\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"repeatHeader\", {\n /**\n * Gets or sets a value indicating whether to `repeat header`.\n * @private\n */\n get: function () {\n if (this.bRepeatHeader == null || typeof this.bRepeatHeader === 'undefined') {\n this.bRepeatHeader = false;\n }\n return this.bRepeatHeader;\n },\n set: function (value) {\n this.bRepeatHeader = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"allowRowBreakAcrossPages\", {\n /**\n * Gets or sets a value indicating whether to split or cut rows that `overflow a page`.\n * @private\n */\n get: function () {\n return this.breakRow;\n },\n set: function (value) {\n this.breakRow = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"columns\", {\n /**\n * Gets the `column` collection of the PdfGrid.[Read-Only]\n * @private\n */\n get: function () {\n if (this.gridColumns == null || typeof this.gridColumns === 'undefined') {\n this.gridColumns = new PdfGridColumnCollection(this);\n }\n return this.gridColumns;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"rows\", {\n /**\n * Gets the `row` collection from the PdfGrid.[Read-Only]\n * @private\n */\n get: function () {\n if (this.gridRows == null) {\n this.gridRows = new PdfGridRowCollection(this);\n }\n return this.gridRows;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"headers\", {\n /**\n * Gets the `headers` collection from the PdfGrid.[Read-Only]\n * @private\n */\n get: function () {\n if (this.gridHeaders == null || typeof this.gridHeaders === 'undefined') {\n this.gridHeaders = new PdfGridHeaderCollection(this);\n }\n return this.gridHeaders;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"initialWidth\", {\n /**\n * Indicating `initial width` of the page.\n * @private\n */\n get: function () {\n return this.gridInitialWidth;\n },\n set: function (value) {\n this.gridInitialWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"style\", {\n /**\n * Gets or sets the `grid style`.\n * @private\n */\n get: function () {\n if (this.gridStyle == null) {\n this.gridStyle = new PdfGridStyle();\n }\n return this.gridStyle;\n },\n set: function (value) {\n if (this.gridStyle == null) {\n this.gridStyle = value;\n }\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"isPageWidth\", {\n /**\n * Gets a value indicating whether the grid column width is considered to be `page width`.\n * @private\n */\n get: function () {\n return this.pageWidth;\n },\n set: function (value) {\n this.pageWidth = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"isChildGrid\", {\n /**\n * Gets or set if grid `is nested grid`.\n * @private\n */\n get: function () {\n return this.childGrid;\n },\n set: function (value) {\n this.childGrid = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGrid.prototype, \"size\", {\n /**\n * Gets the `size`.\n * @private\n */\n get: function () {\n if (this.gridSize.width === 0 && this.gridSize.height === 0) {\n this.gridSize = this.measure();\n return this.gridSize;\n }\n else {\n return this.gridSize;\n }\n },\n set: function (value) {\n this.gridSize = value;\n },\n enumerable: true,\n configurable: true\n });\n PdfGrid.prototype.draw = function (arg1, arg2, arg3, arg4) {\n if (arg2 instanceof PointF && typeof arg2.width === 'undefined' && typeof arg3 === 'undefined') {\n return this.drawHelper(arg1, arg2.x, arg2.y);\n }\n else if (typeof arg2 === 'number' && typeof arg3 === 'number' && typeof arg4 === 'undefined') {\n return this.drawHelper(arg1, arg2, arg3, null);\n }\n else if (arg2 instanceof RectangleF && typeof arg2.width !== 'undefined' && typeof arg3 === 'undefined') {\n return this.drawHelper(arg1, arg2, null);\n }\n else if (arg2 instanceof PointF && typeof arg2.width === 'undefined' && arg3 instanceof PdfLayoutFormat) {\n return this.drawHelper(arg1, arg2.x, arg2.y, arg3);\n }\n else if (typeof arg2 === 'number' && typeof arg3 === 'number' && (arg4 instanceof PdfLayoutFormat || arg4 == null)) {\n var width = (arg1.graphics.clientSize.width - arg2);\n var layoutRectangle = new RectangleF(arg2, arg3, width, 0);\n return this.drawHelper(arg1, layoutRectangle, arg4);\n }\n else if (arg2 instanceof RectangleF && typeof arg2.width !== 'undefined' && typeof arg3 === 'boolean') {\n return this.drawHelper(arg1, arg2, null);\n }\n else {\n return this.drawHelper(arg1, arg2, arg3);\n }\n };\n /**\n * `measures` this instance.\n * @private\n */\n PdfGrid.prototype.measure = function () {\n var height = 0;\n var width = this.columns.width;\n for (var i = 0; i < this.headers.count; i++) {\n var row = this.headers.getHeader(i);\n height += row.height;\n }\n for (var i = 0; i < this.rows.count; i++) {\n var row = this.rows.getRow(i);\n height += row.height;\n }\n return new SizeF(width, height);\n };\n PdfGrid.prototype.layout = function (param, isGridLayouter) {\n if (typeof isGridLayouter === 'undefined') {\n this.setSpan();\n this.layoutFormat = param.format;\n this.gridLocation = param.bounds;\n var result = this.layout(param, true);\n return result;\n }\n else {\n return this.layoutInternal(param);\n }\n };\n PdfGrid.prototype.setSpan = function () {\n var colSpan;\n var rowSpan = 1;\n var currentCellIndex;\n var currentRowIndex = 0;\n var rowCount = this.headers.count;\n for (var i = 0; i < rowCount; i++) {\n var row = this.headers.getHeader(i);\n var colCount = row.cells.count;\n for (var j = 0; j < colCount; j++) {\n var cell = row.cells.getCell(j);\n //Skip setting span map for already coverted rows/columns.\n if (!cell.isCellMergeContinue && !cell.isRowMergeContinue && (cell.columnSpan > 1 || cell.rowSpan > 1)) {\n if (cell.columnSpan + j > row.cells.count) {\n throw new Error('Invalid span specified at row ' + j.toString() + ' column ' + i.toString());\n }\n if (cell.rowSpan + i > this.headers.count) {\n throw new Error('Invalid span specified at Header ' + j.toString() + ' column ' + i.toString());\n }\n // if (this.rows.count !== 0 && cell.rowSpan + i > this.rows.count) {\n // throw new Error('Invalid span specified at row ' + j.toString() + ' column ' + i.toString());\n // }\n if (cell.columnSpan > 1 && cell.rowSpan > 1) {\n colSpan = cell.columnSpan;\n rowSpan = cell.rowSpan;\n currentCellIndex = j;\n currentRowIndex = i;\n cell.isCellMergeStart = true;\n cell.isRowMergeStart = true;\n //Set Column merges for first row\n while (colSpan > 1) {\n currentCellIndex++;\n row.cells.getCell(currentCellIndex).isCellMergeContinue = true;\n row.cells.getCell(currentCellIndex).isRowMergeContinue = true;\n row.cells.getCell(currentCellIndex).rowSpan = rowSpan;\n colSpan--;\n }\n currentCellIndex = j;\n colSpan = cell.columnSpan;\n //Set Row Merges and column merges foreach subsequent rows.\n while (rowSpan > 1) {\n currentRowIndex++;\n this.headers.getHeader(currentRowIndex).cells.getCell(j).isRowMergeContinue = true;\n this.headers.getHeader(currentRowIndex).cells.getCell(currentCellIndex).isRowMergeContinue = true;\n rowSpan--;\n while (colSpan > 1) {\n currentCellIndex++;\n this.headers.getHeader(currentRowIndex).cells.getCell(currentCellIndex).isCellMergeContinue = true;\n this.headers.getHeader(currentRowIndex).cells.getCell(currentCellIndex).isRowMergeContinue = true;\n colSpan--;\n }\n colSpan = cell.columnSpan;\n currentCellIndex = j;\n }\n }\n else if (cell.columnSpan > 1 && cell.rowSpan === 1) {\n colSpan = cell.columnSpan;\n currentCellIndex = j;\n cell.isCellMergeStart = true;\n //Set Column merges.\n while (colSpan > 1) {\n currentCellIndex++;\n row.cells.getCell(currentCellIndex).isCellMergeContinue = true;\n colSpan--;\n }\n }\n else if (cell.columnSpan === 1 && cell.rowSpan > 1) {\n rowSpan = cell.rowSpan;\n currentRowIndex = i;\n //Set row Merges.\n while (rowSpan > 1) {\n currentRowIndex++;\n this.headers.getHeader(currentRowIndex).cells.getCell(j).isRowMergeContinue = true;\n rowSpan--;\n }\n }\n }\n }\n }\n };\n /**\n * Gets the `format`.\n * @private\n */\n PdfGrid.prototype.getFormat = function (format) {\n var f = format;\n return f;\n };\n /**\n * `Layouts` the element.\n * @private\n */\n PdfGrid.prototype.layoutInternal = function (param) {\n this.initialWidth = param.bounds.width;\n var format = this.getFormat(param.format);\n this.currentPage = param.page;\n if (this.currentPage !== null) {\n var pageHeight = this.currentPage.getClientSize().height;\n var pageWidth = this.currentPage.getClientSize().width;\n this.currentPageBounds = this.currentPage.getClientSize();\n }\n else {\n throw Error('Can not set page as null');\n }\n this.currentGraphics = this.currentPage.graphics;\n var index = 0;\n index = this.currentGraphics.page.section.indexOf(this.currentGraphics.page);\n this.listOfNavigatePages.push(index);\n this.currentBounds = new RectangleF(new PointF(param.bounds.x, param.bounds.y), this.currentGraphics.clientSize);\n if (this.rows.count !== 0) {\n this.currentBounds.width = (param.bounds.width > 0) ? param.bounds.width :\n (this.currentBounds.width - this.rows.getRow(0).cells.getCell(0).style.borders.left.width / 2);\n }\n else if (this.headers.count !== 0) {\n this.currentBounds.width = param.bounds.width;\n }\n else {\n throw Error('Please add row or header into grid');\n }\n this.startLocation = new PointF(param.bounds.x, param.bounds.y);\n if (param.bounds.height > 0 && !this.isChildGrid) {\n this.currentBounds.height = param.bounds.height;\n }\n this.hType = this.style.horizontalOverflowType;\n if (!this.style.allowHorizontalOverflow) {\n this.measureColumnsWidth(this.currentBounds);\n this.columnRanges.push([0, this.columns.count - 1]);\n }\n else {\n this.measureColumnsWidth();\n this.determineColumnDrawRanges();\n }\n var result = this.layoutOnPage(param);\n return result;\n };\n PdfGrid.prototype.measureColumnsWidth = function (bounds) {\n if (typeof bounds !== 'undefined') {\n var widths = this.columns.getDefaultWidths(bounds.width);\n var tempWidth = this.columns.getColumn(0).width;\n for (var i = 0, count = this.columns.count; i < count; i++) {\n this.columns.getColumn(i).width = widths[i];\n }\n }\n else {\n var widths = [];\n var cellWidth = 0;\n var cellWidths = 0;\n if (this.headers.count > 0) {\n var colCount = this.headers.getHeader(0).cells.count;\n var rowCount = this.headers.count;\n for (var i = 0; i < colCount; i++) {\n cellWidth = 0;\n for (var j = 0; j < rowCount; j++) {\n var rowWidth = Math.min(this.initialWidth, this.headers.getHeader(j).cells.getCell(i).width);\n cellWidth = Math.max(cellWidth, rowWidth);\n }\n widths[i] = cellWidth;\n }\n }\n else {\n var colCount = this.rows.getRow(0).cells.count;\n var rowCount = this.rows.count;\n for (var i = 0; i < colCount; i++) {\n cellWidth = 0;\n for (var j = 0; j < rowCount; j++) {\n var rowWidth = Math.min(this.initialWidth, this.rows.getRow(j).cells.getCell(i).width);\n cellWidth = Math.max(cellWidth, rowWidth);\n }\n widths[i] = cellWidth;\n }\n }\n cellWidth = 0;\n for (var i = 0, colCount = this.columns.count; i < colCount; i++) {\n for (var j = 0, rowCount = this.rows.count; j < rowCount; j++) {\n if (this.rows.getRow(j).cells.getCell(i).columnSpan == 1 || this.rows.getRow(j).cells.getCell(i).value !== null || this.rows.getRow(j).cells.getCell(i).rowSpan >= 1) {\n if (this.rows.getRow(j).cells.getCell(i).value !== null &&\n !this.rows.getRow(j).grid.style.allowHorizontalOverflow) {\n var value = this.rows.getRow(j).grid.style.cellPadding.right +\n this.rows.getRow(j).grid.style.cellPadding.left\n + this.rows.getRow(j).cells.getCell(i).style.borders.left.width / 2\n + this.gridLocation.x;\n this.rows.getRow(j).cells.getCell(i).value.initialWidth = this.initialWidth - value;\n }\n var rowWidth = 0;\n var internalWidth = this.rows.getRow(j).cells.getCell(i).width;\n internalWidth += this.rows.getRow(j).cells.getCell(i).style.borders.left.width;\n internalWidth += this.rows.getRow(j).cells.getCell(i).style.borders.right.width;\n var internalHeight = this.rows.getRow(j).cells.getCell(i).height;\n internalHeight += (this.rows.getRow(j).cells.getCell(i).style.borders.top.width);\n internalHeight += (this.rows.getRow(j).cells.getCell(i).style.borders.bottom.width);\n var isCorrectWidth = (internalWidth + this.gridLocation.x) > this.currentGraphics.clientSize.width;\n var isCorrectHeight = (internalHeight + this.gridLocation.y) > this.currentGraphics.clientSize.height;\n if (isCorrectWidth || isCorrectHeight) {\n throw Error('Image size exceeds client size of the page. Can not insert this image');\n }\n rowWidth = Math.min(this.initialWidth, this.rows.getRow(j).cells.getCell(i).width);\n cellWidth = Math.max(widths[i], Math.max(cellWidth, rowWidth));\n cellWidth = Math.max(this.columns.getColumn(i).width, cellWidth);\n }\n }\n widths[i] = cellWidth;\n cellWidth = 0;\n }\n for (var i = 0, count = this.columns.count; i < count; i++) {\n this.columns.getColumn(i).width = widths[i];\n }\n }\n };\n /* tslint:enable */\n /**\n * `Determines the column draw ranges`.\n * @private\n */\n PdfGrid.prototype.determineColumnDrawRanges = function () {\n var startColumn = 0;\n var endColumn = 0;\n var cellWidths = 0;\n var availableWidth = this.currentGraphics.clientSize.width - this.currentBounds.x;\n for (var i = 0; i < this.columns.count; i++) {\n cellWidths += this.columns.getColumn(i).width;\n if (cellWidths >= availableWidth) {\n var subWidths = 0;\n for (var j = startColumn; j <= i; j++) {\n subWidths += this.columns.getColumn(j).width;\n if (subWidths > availableWidth) {\n break;\n }\n endColumn = j;\n }\n this.columnRanges.push([startColumn, endColumn]);\n startColumn = endColumn + 1;\n endColumn = startColumn;\n cellWidths = (endColumn <= i) ? this.columns.getColumn(i).width : 0;\n }\n }\n // if (startColumn !== this.columns.Count) {\n this.columnRanges.push([startColumn, this.columns.count - 1]);\n // }\n };\n /**\n * `Layouts the on page`.\n * @private\n */\n PdfGrid.prototype.layoutOnPage = function (param) {\n /* tslint:disable */\n this.pageBounds.x = param.bounds.x;\n this.pageBounds.y = param.bounds.y;\n this.pageBounds.height = param.bounds.height;\n var format = this.getFormat(param.format);\n var endArgs = null;\n var result = null;\n var layoutedPages = new TemporaryDictionary();\n var startPage = param.page;\n var isParentCell = false;\n var cellBounds = [];\n for (var index = 0; index < this.columnRanges.length; index++) {\n var range = this.columnRanges[index];\n this.cellStartIndex = range[0];\n this.cellEndIndex = range[1];\n var returnObject = this.raiseBeforePageLayout(this.currentPage, this.currentBounds, this.currentRowIndex);\n this.currentBounds = returnObject.currentBounds;\n this.currentRowIndex = returnObject.currentRowIndex;\n // if (returnObject.returnValue) {\n // result = new PdfGridLayoutResult(this.currentPage, this.currentBounds);\n // break;\n // }\n //Draw Headers.\n var drawHeader = void 0;\n for (var i_1 = 0; i_1 < this.headers.count; i_1++) {\n var row = this.headers.getHeader(i_1);\n var headerHeight = this.currentBounds.y;\n // RowLayoutResult\n var headerResult = this.drawRow(row);\n // if (headerHeight === this.currentBounds.y) {\n // drawHeader = true;\n // if (PdfGrid.repeatRowIndex === -1) {\n // PdfGrid.repeatRowIndex = this.rows.getRow.indexOf(row);\n // }\n // } else {\n drawHeader = false;\n // }\n }\n var i = 0;\n var length_1 = this.rows.count;\n var repeatRow = void 0;\n var startingHeight = 0;\n var flag = true;\n //Here is to draw parent Grid and Cells\n cellBounds = [];\n //Draw row by row with the specified cell range.\n for (var j = 0; j < this.rows.count; j++) {\n var row = this.rows.getRow(j);\n i++;\n this.currentRowIndex = i - 1;\n var originalHeight = this.currentBounds.y;\n startPage = this.currentPage;\n PdfGrid.repeatRowIndex = -1;\n var rowResult = this.drawRow(row);\n cellBounds.push(rowResult.bounds.width);\n //if height remains same, it is understood that row is not drawn in the page\n if (originalHeight === this.currentBounds.y) {\n repeatRow = true;\n PdfGrid.repeatRowIndex = this.rows.rowCollection.indexOf(row);\n }\n else {\n repeatRow = false;\n PdfGrid.repeatRowIndex = -1;\n }\n if (!rowResult.isFinish && startPage !== null && format.layout !== PdfLayoutType.OnePage && repeatRow) {\n // During pagination, cell position is maintained here.\n this.startLocation.x = this.currentBounds.x;\n var isAddNextPage = false;\n this.currentPage = this.getNextPage(format);\n if ((param.format !== null) && !param.format.usePaginateBounds && param.bounds !== null &&\n param.bounds.height > 0 && !this.isChildGrid) {\n this.currentBounds.height = param.bounds.height;\n }\n if ((param.format !== null) && !param.format.usePaginateBounds && param.bounds !== null &&\n param.bounds.y > 0 && !this.isChildGrid) {\n this.currentBounds.y = param.bounds.y;\n }\n this.startLocation.y = this.currentBounds.y;\n if ((format.paginateBounds.x === format.paginateBounds.y) &&\n (format.paginateBounds.y === format.paginateBounds.height) &&\n (format.paginateBounds.height === format.paginateBounds.width) && (format.paginateBounds.width === 0)) {\n this.currentBounds.x += this.startLocation.x;\n }\n if (this.currentBounds.x === PdfBorders.default.left.width / 2) {\n this.currentBounds.y += this.startLocation.x;\n }\n if (this.repeatHeader) {\n for (var i_2 = 0; i_2 < this.headers.count; i_2++) {\n var header = this.headers.getHeader(i_2);\n this.drawRow(header);\n }\n }\n this.drawRow(row);\n if (this.currentPage !== null && !layoutedPages.containsKey(this.currentPage)) {\n layoutedPages.add(this.currentPage, range);\n }\n }\n }\n var isPdfGrid = false;\n var maximumCellBoundsWidth = 0;\n if (cellBounds.length > 0) {\n maximumCellBoundsWidth = cellBounds[0];\n }\n var largeNavigatePage = [[0, 0]];\n if (!isPdfGrid && cellBounds.length > 0) {\n for (var c = 0; c < i - 1; c++) {\n if (maximumCellBoundsWidth < cellBounds[c]) {\n maximumCellBoundsWidth = cellBounds[c];\n }\n }\n this.rowLayoutBoundsWidth = maximumCellBoundsWidth;\n }\n else {\n this.rowLayoutBoundsWidth = largeNavigatePage[0][1];\n }\n if (this.columnRanges.length - 1 !== index && this.columnRanges.length > 1 && format.layout !== PdfLayoutType.OnePage) {\n this.currentPage = this.getNextPage(format);\n if ((format.paginateBounds.x === format.paginateBounds.y) && (format.paginateBounds.y === format.paginateBounds.height)\n && (format.paginateBounds.height === format.paginateBounds.width) && (format.paginateBounds.width === 0)) {\n this.currentBounds.x += this.startLocation.x;\n this.currentBounds.y += this.startLocation.y;\n // this.currentBounds.height = this.pageBounds.height;\n }\n }\n }\n result = this.getLayoutResult();\n if (this.style.allowHorizontalOverflow && this.style.horizontalOverflowType == PdfHorizontalOverflowType.NextPage) {\n this.reArrangePages(layoutedPages);\n }\n this.raisePageLayouted(result);\n return result;\n }; /* tslint:enable */\n /**\n * Gets the `next page`.\n * @private\n */\n PdfGrid.prototype.getNextPage = function (format) {\n var section = this.currentPage.section;\n var nextPage = null;\n var index = section.indexOf(this.currentPage);\n this.flag = false;\n if (index === section.count - 1) {\n nextPage = section.add();\n }\n else {\n nextPage = section.getPages()[index + 1];\n }\n this.currentGraphics = nextPage.graphics;\n var pageindex = this.currentGraphics.page.section.indexOf(this.currentGraphics.page);\n if (!(this.listOfNavigatePages.indexOf(pageindex) !== -1)) {\n this.listOfNavigatePages.push(pageindex);\n }\n this.currentBounds = new RectangleF(new PointF(0, 0), nextPage.getClientSize());\n // if ((format.PaginateBounds.x !== format.PaginateBounds.y) && (format.PaginateBounds.y !== format.PaginateBounds.height)\n // && (format.PaginateBounds.height !== format.PaginateBounds.width) && (format.PaginateBounds.width !== 0)) {\n // this.currentBounds.x = format.PaginateBounds.x;\n // this.currentBounds.y = format.PaginateBounds.y;\n // this.currentBounds.height = format.PaginateBounds.height;\n // }\n return nextPage;\n };\n /**\n * Gets the `layout result`.\n * @private\n */\n PdfGrid.prototype.getLayoutResult = function () {\n var bounds;\n /* tslint:disable */\n bounds = new RectangleF(this.startLocation, new SizeF(this.currentBounds.width, this.currentBounds.y - this.startLocation.y));\n /* tslint:enable */\n return new PdfGridLayoutResult(this.currentPage, bounds);\n };\n /**\n * `Recalculate row height` for the split cell to be drawn.\n * @private\n */\n PdfGrid.prototype.ReCalculateHeight = function (row, height) {\n var newHeight = 0.0;\n // for (let i : number = this.cellStartIndex; i <= this.cellEndIndex; i++) {\n // if (!(row.cells.getCell(i).RemainingString === null || row.cells.getCell(i).RemainingString === '' ||\n // typeof row.cells.getCell(i).RemainingString === 'undefined')) {\n // newHeight = Math.max(newHeight, row.cells.getCell(i).MeasureHeight());\n // }\n // }\n return Math.max(height, newHeight);\n };\n /**\n * `Raises BeforePageLayout event`.\n * @private\n */\n PdfGrid.prototype.raiseBeforePageLayout = function (currentPage, currentBounds, currentRow) {\n var cancel = false;\n if (this.raiseBeginPageLayout) {\n var args = new PdfGridBeginPageLayoutEventArgs(currentBounds, currentPage, currentRow);\n this.beginPageLayout(this, args);\n // if (currentBounds !== args.Bounds) {\n // this.isChanged = true;\n // this.currentLocation = new PointF(args.Bounds.x, args.Bounds.y);\n // this.measureColumnsWidth(new RectangleF(new PointF(args.Bounds.x, args.Bounds.y) ,\n // new SizeF(args.Bounds.width + args.Bounds.x ,\n // args.Bounds.height)));\n // }\n cancel = args.cancel;\n currentBounds = args.bounds;\n currentRow = args.startRowIndex;\n }\n return { returnValue: cancel, currentBounds: currentBounds, currentRowIndex: currentRow };\n };\n /**\n * `Raises PageLayout event` if needed.\n * @private\n */\n PdfGrid.prototype.raisePageLayouted = function (result) {\n var args = new PdfGridEndPageLayoutEventArgs(result);\n if (this.raiseEndPageLayout) {\n this.endPageLayout(this, args);\n }\n return args;\n };\n PdfGrid.prototype.drawRow = function (row, result, height) {\n if (typeof result === 'undefined') {\n //.. Check if required space available.\n //.....If the row conains spans which falls through more than one page, then draw the row to next page.\n var result_1 = new RowLayoutResult();\n var rowHeightWithSpan = 0;\n var location_1 = new PointF(0, 0);\n var size = new SizeF(0, 0);\n var isHeader = false;\n if (row.rowSpanExists) {\n var maxSpan = 0;\n var currRowIndex = this.rows.rowCollection.indexOf(row);\n if (currRowIndex === -1) {\n currRowIndex = this.headers.indexOf(row);\n if (currRowIndex !== -1) {\n isHeader = true;\n }\n }\n for (var i = 0; i < row.cells.count; i++) {\n var cell = row.cells.getCell(i);\n maxSpan = Math.max(maxSpan, cell.rowSpan);\n }\n for (var i = currRowIndex; i < currRowIndex + maxSpan; i++) {\n rowHeightWithSpan += (isHeader ? this.headers.getHeader(i).height : this.rows.getRow(i).height);\n }\n var rowMaxHeight = rowHeightWithSpan;\n for (var i = 0; i < row.cells.count; i++) {\n rowMaxHeight = rowMaxHeight > row.cells.getCell(i).height ? rowMaxHeight : row.cells.getCell(i).height;\n }\n var nextRow = this.headers.getHeader(this.headers.indexOf(row) + 1);\n var flag = true;\n for (var i = 0; i < nextRow.cells.count; i++) {\n if (nextRow.cells.getCell(i).value !== '' && nextRow.cells.getCell(i).value !== undefined) {\n flag = false;\n break;\n }\n }\n if ((rowMaxHeight > rowHeightWithSpan) && flag) {\n row.height += (rowMaxHeight - rowHeightWithSpan);\n }\n }\n var calculatedHeight = row.rowBreakHeight > 0.0 ? row.rowBreakHeight : row.height;\n if (this.currentBounds.y + calculatedHeight > this.currentPageBounds.height ||\n this.currentBounds.y + calculatedHeight > (this.currentBounds.height + this.startLocation.y) ||\n this.currentBounds.y + rowHeightWithSpan > this.currentPageBounds.height) {\n // If a row is repeated and still cannot fit in page, proceed draw.\n // if (PdfGrid.repeatRowIndex > -1 && PdfGrid.repeatRowIndex === row.RowIndex) {\n // if (this.AllowRowBreakAcrossPages) {\n // result.IsFinish = true;\n // // this.DrawRowWithBreak(ref result, row, height);\n // } else {\n // result.IsFinish = false;\n // this.drawRow(row, result, height);\n // }\n // } else {\n result_1.isFinish = false;\n // }\n }\n else {\n result_1.isFinish = true;\n this.drawRow(row, result_1, calculatedHeight);\n }\n return result_1;\n }\n else {\n var skipcell = false;\n var location_2 = new PointF(this.currentBounds.x, this.currentBounds.y);\n result.bounds = new RectangleF(location_2, new SizeF(0, 0));\n height = this.ReCalculateHeight(row, height);\n for (var i = this.cellStartIndex; i <= this.cellEndIndex; i++) {\n var cancelSpans = ((i > this.cellEndIndex + 1) && (row.cells.getCell(i).columnSpan > 1));\n // let cancelSpans : boolean = false;\n if (!cancelSpans) {\n for (var j = 1; j < row.cells.getCell(i).columnSpan; j++) {\n row.cells.getCell(i + j).isCellMergeContinue = true;\n }\n }\n var size = new SizeF(this.columns.getColumn(i).width, height);\n // if (size.width > this.currentGraphics.ClientSize.width) {\n // size.width = this.currentGraphics.ClientSize.width;\n // }\n // if (this.IsChildGrid && this.style.AllowHorizontalOverflow) {\n // if (size.width >= this.currentGraphics.ClientSize.width) {\n // size.width -= 2 * this.currentBounds.x;\n // }\n // }\n /* tslint:disable */\n if (!this.CheckIfDefaultFormat(this.columns.getColumn(i).format) &&\n this.CheckIfDefaultFormat(row.cells.getCell(i).stringFormat)) {\n row.cells.getCell(i).stringFormat = this.columns.getColumn(i).format;\n }\n var cellstyle = row.cells.getCell(i).style;\n var tempValue = ((typeof row.cells.getCell(i).value === 'string' &&\n row.cells.getCell(i).value !== null) ? row.cells.getCell(i).value : '');\n row.cells.getCell(i).style = this.RaiseBeforeCellDraw(this.currentGraphics, this.currentRowIndex, i, new RectangleF(location_2, size), tempValue, cellstyle);\n // if (!skipcell) {\n // let stringResult : PdfStringLayoutResult = row.cells.getCell(i).draw(this.currentGraphics, new RectangleF(location, size), cancelSpans);\n var stringResult = row.cells.getCell(i).draw(this.currentGraphics, new RectangleF(location_2, size), cancelSpans);\n if (row.grid.style.allowHorizontalOverflow && (row.cells.getCell(i).columnSpan > this.cellEndIndex || i + row.cells.getCell(i).columnSpan > this.cellEndIndex + 1) && this.cellEndIndex < row.cells.count - 1) {\n row.rowOverflowIndex = this.cellEndIndex;\n }\n if (row.grid.style.allowHorizontalOverflow && (row.rowOverflowIndex > 0 && (row.cells.getCell(i).columnSpan > this.cellEndIndex || i + row.cells.getCell(i).columnSpan > this.cellEndIndex + 1)) && row.cells.getCell(i).columnSpan - this.cellEndIndex + i - 1 > 0) {\n row.cells.getCell(row.rowOverflowIndex + 1).value = stringResult !== null ? (stringResult.remainder !== undefined) ? stringResult.remainder : '' : '';\n row.cells.getCell(row.rowOverflowIndex + 1).stringFormat = row.cells.getCell(i).stringFormat;\n row.cells.getCell(row.rowOverflowIndex + 1).style = row.cells.getCell(i).style;\n row.cells.getCell(row.rowOverflowIndex + 1).columnSpan = row.cells.getCell(i).columnSpan - this.cellEndIndex + i - 1;\n }\n // }\n /* tslint:enable */\n tempValue = ((typeof row.cells.getCell(i).value === 'string' &&\n row.cells.getCell(i).value !== null) ? row.cells.getCell(i).value : '');\n this.RaiseAfterCellDraw(this.currentGraphics, this.currentRowIndex, i, new RectangleF(location_2, size), tempValue, row.cells.getCell(i).style);\n location_2.x += this.columns.getColumn(i).width;\n }\n // if (!row.RowMergeComplete || row.isRowHeightSet) {\n this.currentBounds.y += height;\n // }\n result.bounds = new RectangleF(new PointF(result.bounds.x, result.bounds.y), new SizeF(location_2.x, location_2.y));\n }\n };\n /**\n * Checks if the given format `is default format` or not.\n * @private\n */\n PdfGrid.prototype.CheckIfDefaultFormat = function (format) {\n var defaultFormat = new PdfStringFormat();\n return (format.alignment === defaultFormat.alignment && format.characterSpacing === defaultFormat.characterSpacing &&\n format.clipPath === defaultFormat.clipPath && format.firstLineIndent === defaultFormat.firstLineIndent &&\n format.horizontalScalingFactor === defaultFormat.horizontalScalingFactor &&\n format.lineAlignment === defaultFormat.lineAlignment\n && format.lineLimit === defaultFormat.lineLimit && format.lineSpacing === defaultFormat.lineSpacing &&\n format.measureTrailingSpaces === defaultFormat.measureTrailingSpaces && format.noClip === defaultFormat.noClip &&\n format.paragraphIndent === defaultFormat.paragraphIndent && format.rightToLeft === defaultFormat.rightToLeft &&\n format.subSuperScript === defaultFormat.subSuperScript && format.wordSpacing === defaultFormat.wordSpacing &&\n format.wordWrap === defaultFormat.wordWrap);\n };\n /**\n * `Raises BeforeCellDraw event`.\n * @private\n */\n PdfGrid.prototype.RaiseBeforeCellDraw = function (graphics, rowIndex, cellIndex, bounds, value, style) {\n var args = null;\n if (this.raiseBeginCellDraw) {\n args = new PdfGridBeginCellDrawEventArgs(graphics, rowIndex, cellIndex, bounds, value, style);\n this.beginCellDraw(this, args);\n style = args.style;\n }\n return style;\n };\n /**\n * `Raises AfterCellDraw event`.\n * @private\n */\n PdfGrid.prototype.RaiseAfterCellDraw = function (graphics, rowIndex, cellIndex, bounds, value, cellstyle) {\n var args = null;\n if (this.raiseEndCellDraw) {\n args = new PdfGridEndCellDrawEventArgs(graphics, rowIndex, cellIndex, bounds, value, cellstyle);\n this.endCellDraw(this, args);\n }\n };\n /**\n * `Rearranges the pages`.\n * @private\n */\n PdfGrid.prototype.reArrangePages = function (layoutedPages) {\n var document = this.currentPage.document;\n var pages = [];\n var keys = layoutedPages.keys();\n var values = layoutedPages.values();\n for (var i = 0; i < keys.length; i++) {\n var page = keys[i];\n page.section = null;\n pages.push(page);\n document.pages.remove(page);\n }\n /* tslint:disable */\n for (var i = 0; i < layoutedPages.size(); i++) {\n var count = 0;\n for (var j = i, count_1 = (layoutedPages.size() / this.columnRanges.length); j < layoutedPages.size(); j += count_1) {\n var page = pages[j];\n if (document.pages.indexOf(page) === -1) {\n document.pages.add(page);\n }\n }\n }\n /* tslint:enable */\n };\n /**\n * @hidden\n * @private\n */\n PdfGrid.repeatRowIndex = -1;\n return PdfGrid;\n}(PdfLayoutElement));\nexport { PdfGrid };\n/**\n * `GridCellEventArgs` class is alternate for grid events.\n */\nvar GridCellEventArgs = /** @class */ (function () {\n // Constructors\n /**\n * Initialize a new instance for `GridCellEventArgs` class.\n * @private\n */\n function GridCellEventArgs(graphics, rowIndex, cellIndex, bounds, value) {\n this.gridRowIndex = rowIndex;\n this.gridCellIndex = cellIndex;\n this.internalValue = value;\n this.gridBounds = bounds;\n this.pdfGraphics = graphics;\n }\n Object.defineProperty(GridCellEventArgs.prototype, \"rowIndex\", {\n // Properties\n /**\n * Gets the value of current `row index`.\n * @private\n */\n get: function () {\n return this.gridRowIndex;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(GridCellEventArgs.prototype, \"cellIndex\", {\n /**\n * Gets the value of current `cell index`.\n * @private\n */\n get: function () {\n return this.gridCellIndex;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(GridCellEventArgs.prototype, \"value\", {\n /**\n * Gets the actual `value` of current cell.\n * @private\n */\n get: function () {\n return this.internalValue;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(GridCellEventArgs.prototype, \"bounds\", {\n /**\n * Gets the `bounds` of current cell.\n * @private\n */\n get: function () {\n return this.gridBounds;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(GridCellEventArgs.prototype, \"graphics\", {\n /**\n * Gets the instance of `current graphics`.\n * @private\n */\n get: function () {\n return this.pdfGraphics;\n },\n enumerable: true,\n configurable: true\n });\n return GridCellEventArgs;\n}());\nexport { GridCellEventArgs };\n/**\n * `PdfGridBeginCellDrawEventArgs` class is alternate for begin cell draw events.\n */\nvar PdfGridBeginCellDrawEventArgs = /** @class */ (function (_super) {\n __extends(PdfGridBeginCellDrawEventArgs, _super);\n // Constructors\n /**\n * Initializes a new instance of the `StartCellLayoutEventArgs` class.\n * @private\n */\n function PdfGridBeginCellDrawEventArgs(graphics, rowIndex, cellIndex, bounds, value, style) {\n var _this = _super.call(this, graphics, rowIndex, cellIndex, bounds, value) || this;\n _this.style = style;\n return _this;\n }\n Object.defineProperty(PdfGridBeginCellDrawEventArgs.prototype, \"skip\", {\n // Properties\n /**\n * Gets or sets a value indicating whether the value of this cell should be `skipped`.\n * @private\n */\n get: function () {\n return this.bSkip;\n },\n set: function (value) {\n this.bSkip = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(PdfGridBeginCellDrawEventArgs.prototype, \"style\", {\n /**\n * Gets or sets a `style` value of the cell.\n * @private\n */\n get: function () {\n return this.cellStyle;\n },\n set: function (value) {\n this.cellStyle = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridBeginCellDrawEventArgs;\n}(GridCellEventArgs));\nexport { PdfGridBeginCellDrawEventArgs };\n/**\n * `PdfGridEndCellDrawEventArgs` class is alternate for end cell draw events.\n */\nvar PdfGridEndCellDrawEventArgs = /** @class */ (function (_super) {\n __extends(PdfGridEndCellDrawEventArgs, _super);\n // Constructors\n /**\n * Initializes a new instance of the `PdfGridEndCellLayoutEventArgs` class.\n * @private\n */\n function PdfGridEndCellDrawEventArgs(graphics, rowIndex, cellIndex, bounds, value, style) {\n var _this = _super.call(this, graphics, rowIndex, cellIndex, bounds, value) || this;\n _this.cellStyle = style;\n return _this;\n }\n Object.defineProperty(PdfGridEndCellDrawEventArgs.prototype, \"style\", {\n // Propertise\n /**\n * Get the `PdfGridCellStyle`.\n * @private\n */\n get: function () {\n return this.cellStyle;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridEndCellDrawEventArgs;\n}(GridCellEventArgs));\nexport { PdfGridEndCellDrawEventArgs };\n/**\n * `PdfGridCancelEventArgs` class is alternate for cancel events.\n */\nvar PdfCancelEventArgs = /** @class */ (function () {\n function PdfCancelEventArgs() {\n }\n Object.defineProperty(PdfCancelEventArgs.prototype, \"cancel\", {\n // Properties\n /**\n * Gets and Sets the value of `cancel`.\n * @private\n */\n get: function () {\n return this.isCancel;\n },\n set: function (value) {\n this.isCancel = value;\n },\n enumerable: true,\n configurable: true\n });\n return PdfCancelEventArgs;\n}());\nexport { PdfCancelEventArgs };\n/**\n * `BeginPageLayoutEventArgs` class is alternate for begin page layout events.\n */\nvar BeginPageLayoutEventArgs = /** @class */ (function (_super) {\n __extends(BeginPageLayoutEventArgs, _super);\n // Constructors\n /**\n * Initializes a new instance of the `BeginPageLayoutEventArgs` class with the specified rectangle and page.\n * @private\n */\n function BeginPageLayoutEventArgs(bounds, page) {\n var _this = _super.call(this) || this;\n _this.bounds = bounds;\n _this.pdfPage = page;\n return _this;\n }\n Object.defineProperty(BeginPageLayoutEventArgs.prototype, \"bounds\", {\n // Properties\n /**\n * Gets or sets value that indicates the lay outing `bounds` on the page.\n * @private\n */\n get: function () {\n return this.cellBounds;\n },\n set: function (value) {\n this.cellBounds = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(BeginPageLayoutEventArgs.prototype, \"page\", {\n /**\n * Gets the `page` where the lay outing should start.\n * @private\n */\n get: function () {\n return this.pdfPage;\n },\n enumerable: true,\n configurable: true\n });\n return BeginPageLayoutEventArgs;\n}(PdfCancelEventArgs));\nexport { BeginPageLayoutEventArgs };\n/**\n * `EndPageLayoutEventArgs` class is alternate for end page layout events.\n */\nvar EndPageLayoutEventArgs = /** @class */ (function (_super) {\n __extends(EndPageLayoutEventArgs, _super);\n // Constructors\n /**\n * Initializes a new instance of the `EndPageLayoutEventArgs` class. with the specified 'PdfLayoutResult'.\n * @private\n */\n function EndPageLayoutEventArgs(result) {\n var _this = _super.call(this) || this;\n _this.layoutResult = result;\n return _this;\n }\n Object.defineProperty(EndPageLayoutEventArgs.prototype, \"result\", {\n // Properties\n /**\n * Gets the lay outing `result` of the page.\n * @private\n */\n get: function () {\n return this.layoutResult;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(EndPageLayoutEventArgs.prototype, \"nextPage\", {\n /**\n * Gets or sets a value indicating the `next page` where the element should be layout.\n * @private\n */\n get: function () {\n return this.nextPdfPage;\n },\n set: function (value) {\n this.nextPdfPage = value;\n },\n enumerable: true,\n configurable: true\n });\n return EndPageLayoutEventArgs;\n}(PdfCancelEventArgs));\nexport { EndPageLayoutEventArgs };\n/**\n * `PdfGridBeginPageLayoutEventArgs` class is alternate for begin page layout events.\n */\nvar PdfGridBeginPageLayoutEventArgs = /** @class */ (function (_super) {\n __extends(PdfGridBeginPageLayoutEventArgs, _super);\n // Constructors\n /**\n * Initialize a new instance of `PdfGridBeginPageLayoutEventArgs` class.\n * @private\n */\n function PdfGridBeginPageLayoutEventArgs(bounds, page, startRow) {\n var _this = _super.call(this, bounds, page) || this;\n _this.startRow = startRow;\n return _this;\n }\n Object.defineProperty(PdfGridBeginPageLayoutEventArgs.prototype, \"startRowIndex\", {\n // Properties\n /**\n * Gets the `start row index`.\n * @private\n */\n get: function () {\n return this.startRow;\n },\n enumerable: true,\n configurable: true\n });\n return PdfGridBeginPageLayoutEventArgs;\n}(BeginPageLayoutEventArgs));\nexport { PdfGridBeginPageLayoutEventArgs };\n/**\n * `PdfGridEndPageLayoutEventArgs` class is alternate for begin page layout events.\n */\nvar PdfGridEndPageLayoutEventArgs = /** @class */ (function (_super) {\n __extends(PdfGridEndPageLayoutEventArgs, _super);\n // Constructors\n /**\n * Initialize a new instance of `PdfGridEndPageLayoutEventArgs` class.\n * @private\n */\n function PdfGridEndPageLayoutEventArgs(result) {\n return _super.call(this, result) || this;\n }\n return PdfGridEndPageLayoutEventArgs;\n}(EndPageLayoutEventArgs));\nexport { PdfGridEndPageLayoutEventArgs };\n/**\n * `RowLayoutResult` class to store layout result of rows.\n */\nvar RowLayoutResult = /** @class */ (function () {\n //Constructors\n /**\n * Initializes a new instance of the `RowLayoutResult` class.\n * @private\n */\n function RowLayoutResult() {\n this.layoutedBounds = new RectangleF(0, 0, 0, 0);\n }\n Object.defineProperty(RowLayoutResult.prototype, \"isFinish\", {\n /**\n * Gets or sets a value indicating whether this instance `is finish`.\n * @private\n */\n get: function () {\n return this.bIsFinished;\n },\n set: function (value) {\n this.bIsFinished = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(RowLayoutResult.prototype, \"bounds\", {\n /**\n * Gets or sets the `bounds`.\n * @private\n */\n get: function () {\n return this.layoutedBounds;\n },\n set: function (value) {\n this.layoutedBounds = value;\n },\n enumerable: true,\n configurable: true\n });\n return RowLayoutResult;\n}());\nexport { RowLayoutResult };\n/**\n * `PdfGridLayoutResult` class represents the results of the PdfGrid including bounds and resultant page.\n */\nvar PdfGridLayoutResult = /** @class */ (function (_super) {\n __extends(PdfGridLayoutResult, _super);\n // Constructor\n /**\n * Initializes a new instance of the `PdfGridLayoutResult` class with the current page and bounds.\n * @private\n */\n function PdfGridLayoutResult(page, bounds) {\n return _super.call(this, page, bounds) || this;\n }\n return PdfGridLayoutResult;\n}(PdfLayoutResult));\nexport { PdfGridLayoutResult };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { Theme } from '../model/theme';\n/**\n * Defines the appearance of the connectors\n */\nvar Connector = /** @class */ (function (_super) {\n __extends(Connector, _super);\n function Connector() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Line')\n ], Connector.prototype, \"type\", void 0);\n __decorate([\n Property(null)\n ], Connector.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], Connector.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Connector.prototype, \"length\", void 0);\n __decorate([\n Property('')\n ], Connector.prototype, \"dashArray\", void 0);\n return Connector;\n}(ChildProperty));\nexport { Connector };\n/**\n * Configures the fonts in charts.\n */\nvar Font = /** @class */ (function (_super) {\n __extends(Font, _super);\n function Font() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('16px')\n ], Font.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], Font.prototype, \"color\", void 0);\n __decorate([\n Property('Segoe UI')\n ], Font.prototype, \"fontFamily\", void 0);\n __decorate([\n Property('Normal')\n ], Font.prototype, \"fontWeight\", void 0);\n __decorate([\n Property('Normal')\n ], Font.prototype, \"fontStyle\", void 0);\n __decorate([\n Property(1)\n ], Font.prototype, \"opacity\", void 0);\n __decorate([\n Property('Center')\n ], Font.prototype, \"textAlignment\", void 0);\n __decorate([\n Property('Trim')\n ], Font.prototype, \"textOverflow\", void 0);\n return Font;\n}(ChildProperty));\nexport { Font };\n/**\n * Configures the borders in the chart.\n */\nvar Border = /** @class */ (function (_super) {\n __extends(Border, _super);\n function Border() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Border.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], Border.prototype, \"width\", void 0);\n return Border;\n}(ChildProperty));\nexport { Border };\n/**\n * Configures the chart area.\n */\nvar ChartArea = /** @class */ (function (_super) {\n __extends(ChartArea, _super);\n function ChartArea() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({}, Border)\n ], ChartArea.prototype, \"border\", void 0);\n __decorate([\n Property('transparent')\n ], ChartArea.prototype, \"background\", void 0);\n __decorate([\n Property(1)\n ], ChartArea.prototype, \"opacity\", void 0);\n return ChartArea;\n}(ChildProperty));\nexport { ChartArea };\n/**\n * Configures the chart margins.\n */\nvar Margin = /** @class */ (function (_super) {\n __extends(Margin, _super);\n function Margin() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(10)\n ], Margin.prototype, \"left\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"right\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"top\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"bottom\", void 0);\n return Margin;\n}(ChildProperty));\nexport { Margin };\n/**\n * Configures the animation behavior for chart series.\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], Animation.prototype, \"enable\", void 0);\n __decorate([\n Property(1000)\n ], Animation.prototype, \"duration\", void 0);\n __decorate([\n Property(0)\n ], Animation.prototype, \"delay\", void 0);\n return Animation;\n}(ChildProperty));\nexport { Animation };\n/** @private */\nvar Indexes = /** @class */ (function (_super) {\n __extends(Indexes, _super);\n function Indexes() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], Indexes.prototype, \"series\", void 0);\n __decorate([\n Property(0)\n ], Indexes.prototype, \"point\", void 0);\n return Indexes;\n}(ChildProperty));\nexport { Indexes };\n/**\n * Column series rounded corner options\n */\nvar CornerRadius = /** @class */ (function (_super) {\n __extends(CornerRadius, _super);\n function CornerRadius() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], CornerRadius.prototype, \"topLeft\", void 0);\n __decorate([\n Property(0)\n ], CornerRadius.prototype, \"topRight\", void 0);\n __decorate([\n Property(0)\n ], CornerRadius.prototype, \"bottomLeft\", void 0);\n __decorate([\n Property(0)\n ], CornerRadius.prototype, \"bottomRight\", void 0);\n return CornerRadius;\n}(ChildProperty));\nexport { CornerRadius };\n/**\n * @private\n */\nvar Index = /** @class */ (function () {\n function Index(seriesIndex, pointIndex) {\n this.series = seriesIndex;\n this.point = pointIndex;\n }\n return Index;\n}());\nexport { Index };\n/**\n * Configures the Empty Points of series\n */\nvar EmptyPointSettings = /** @class */ (function (_super) {\n __extends(EmptyPointSettings, _super);\n function EmptyPointSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], EmptyPointSettings.prototype, \"fill\", void 0);\n __decorate([\n Complex({ color: 'transparent', width: 0 }, Border)\n ], EmptyPointSettings.prototype, \"border\", void 0);\n __decorate([\n Property('Gap')\n ], EmptyPointSettings.prototype, \"mode\", void 0);\n return EmptyPointSettings;\n}(ChildProperty));\nexport { EmptyPointSettings };\n/**\n * Configures the ToolTips in the chart.\n */\nvar TooltipSettings = /** @class */ (function (_super) {\n __extends(TooltipSettings, _super);\n function TooltipSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], TooltipSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(false)\n ], TooltipSettings.prototype, \"shared\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"fill\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"header\", void 0);\n __decorate([\n Property(0.75)\n ], TooltipSettings.prototype, \"opacity\", void 0);\n __decorate([\n Complex(Theme.tooltipLabelFont, Font)\n ], TooltipSettings.prototype, \"textStyle\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], TooltipSettings.prototype, \"enableAnimation\", void 0);\n __decorate([\n Complex({ color: '#cccccc', width: 0.5 }, Border)\n ], TooltipSettings.prototype, \"border\", void 0);\n return TooltipSettings;\n}(ChildProperty));\nexport { TooltipSettings };\n","/**\n * Numeric Range.\n * @private\n */\nvar DoubleRange = /** @class */ (function () {\n function DoubleRange(start, end) {\n /*\n if (!isNaN(start) && !isNaN(end)) {\n this.mIsEmpty = true;\n } else {\n this.mIsEmpty = false;\n }*/\n if (start < end) {\n this.mStart = start;\n this.mEnd = end;\n }\n else {\n this.mStart = end;\n this.mEnd = start;\n }\n }\n Object.defineProperty(DoubleRange.prototype, \"start\", {\n //private mIsEmpty: boolean;\n /** @private */\n get: function () {\n return this.mStart;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DoubleRange.prototype, \"end\", {\n /** @private */\n get: function () {\n return this.mEnd;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DoubleRange.prototype, \"delta\", {\n /*\n get isEmpty(): boolean {\n return this.mIsEmpty;\n }*/\n /** @private */\n get: function () {\n return (this.mEnd - this.mStart);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DoubleRange.prototype, \"median\", {\n /** @private */\n get: function () {\n return this.mStart + (this.mEnd - this.mStart) / 2;\n },\n enumerable: true,\n configurable: true\n });\n return DoubleRange;\n}());\nexport { DoubleRange };\n","import { getMinPointsDelta } from '../../common/utils/helper';\nimport { DoubleRange } from '../utils/double-range';\nimport { withIn, logBase } from '../../common/utils/helper';\n/**\n * Numeric module is used to render numeric axis.\n */\nvar Double = /** @class */ (function () {\n /**\n * Constructor for the dateTime module.\n * @private\n */\n function Double(chart) {\n this.chart = chart;\n }\n /**\n * Numeric Nice Interval for the axis.\n * @private\n */\n Double.prototype.calculateNumericNiceInterval = function (axis, delta, size) {\n var actualDesiredIntervalsCount = axis.getActualDesiredIntervalsCount(size);\n var niceInterval = delta / actualDesiredIntervalsCount;\n if (axis.desiredIntervals != null) {\n return niceInterval;\n }\n var minInterval = Math.pow(10, Math.floor(logBase(niceInterval, 10)));\n for (var _i = 0, _a = axis.intervalDivs; _i < _a.length; _i++) {\n var interval = _a[_i];\n var currentInterval = minInterval * interval;\n if (actualDesiredIntervalsCount < (delta / currentInterval)) {\n break;\n }\n niceInterval = currentInterval;\n }\n return niceInterval;\n };\n /**\n * Actual Range for the axis.\n * @private\n */\n Double.prototype.getActualRange = function (axis, size) {\n this.initializeDoubleRange(axis);\n axis.actualRange.interval = axis.interval || this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size);\n axis.actualRange.min = axis.doubleRange.start;\n axis.actualRange.max = axis.doubleRange.end;\n };\n /**\n * Range for the axis.\n * @private\n */\n Double.prototype.initializeDoubleRange = function (axis) {\n //Axis Min\n if (axis.minimum !== null) {\n this.min = axis.minimum;\n }\n else if (this.min === null || this.min === Number.POSITIVE_INFINITY) {\n this.min = 0;\n }\n // Axis Max\n if (axis.maximum !== null) {\n this.max = axis.maximum;\n }\n else if (this.max === null || this.max === Number.NEGATIVE_INFINITY) {\n this.max = 5;\n }\n if (this.min === this.max) {\n this.max = axis.valueType.indexOf('Category') > -1 ? this.max : this.min + 1;\n }\n axis.doubleRange = new DoubleRange(this.min, this.max);\n axis.actualRange = {};\n };\n /**\n * The function to calculate the range and labels for the axis.\n * @return {void}\n * @private\n */\n Double.prototype.calculateRangeAndInterval = function (size, axis) {\n this.calculateRange(axis, size);\n this.getActualRange(axis, size);\n this.applyRangePadding(axis, size);\n this.calculateVisibleLabels(axis, this.chart);\n };\n /**\n * Calculate Range for the axis.\n * @private\n */\n Double.prototype.calculateRange = function (axis, size) {\n /*! Generate axis range */\n var series;\n this.min = null;\n this.max = null;\n if (!axis.setRange()) {\n for (var _i = 0, _a = axis.series; _i < _a.length; _i++) {\n var series_1 = _a[_i];\n if (!series_1.visible) {\n continue;\n }\n this.paddingInterval = 0;\n if ((series_1.type.indexOf('Column') > -1 && axis.orientation === 'Horizontal')\n || (series_1.type.indexOf('Bar') > -1 && axis.orientation === 'Vertical')) {\n if ((series_1.xAxis.valueType === 'Double' || series_1.xAxis.valueType === 'DateTime')\n && series_1.xAxis.rangePadding === 'Auto') {\n this.paddingInterval = getMinPointsDelta(series_1.xAxis, axis.series) / 2;\n }\n }\n //For xRange\n if (axis.orientation === 'Horizontal') {\n if (this.chart.requireInvertedAxis) {\n this.findMinMax(series_1.yMin, series_1.yMax);\n }\n else {\n this.findMinMax(series_1.xMin - this.paddingInterval, series_1.xMax + this.paddingInterval);\n }\n }\n // For yRange\n if (axis.orientation === 'Vertical') {\n if (this.chart.requireInvertedAxis) {\n this.findMinMax(series_1.xMin - this.paddingInterval, series_1.xMax + this.paddingInterval);\n }\n else {\n this.findMinMax(series_1.yMin, series_1.yMax);\n }\n }\n }\n }\n };\n Double.prototype.findMinMax = function (min, max) {\n if (this.min === null || this.min > min) {\n this.min = min;\n }\n if (this.max === null || this.max < max) {\n this.max = max;\n }\n };\n /**\n * Apply padding for the range.\n * @private\n */\n Double.prototype.applyRangePadding = function (axis, size) {\n var range;\n var start = axis.actualRange.min;\n var end = axis.actualRange.max;\n if (!axis.setRange()) {\n var interval = axis.actualRange.interval;\n var padding = axis.getRangePadding(this.chart);\n if (padding === 'Additional' || padding === 'Round') {\n this.findAdditional(axis, start, end, interval);\n }\n else if (padding === 'Normal') {\n this.findNormal(axis, start, end, interval, size);\n }\n else {\n this.updateActualRange(axis, start, end, interval);\n }\n }\n axis.actualRange.delta = axis.actualRange.max - axis.actualRange.min;\n this.calculateVisibleRange(size, axis);\n };\n Double.prototype.updateActualRange = function (axis, minimum, maximum, interval) {\n axis.actualRange.min = axis.minimum != null ? axis.minimum : minimum;\n axis.actualRange.max = axis.maximum != null ? axis.maximum : maximum;\n axis.actualRange.interval = axis.interval != null ? axis.interval : interval;\n };\n Double.prototype.findAdditional = function (axis, start, end, interval) {\n var minimum;\n var maximum;\n minimum = Math.floor(start / interval) * interval;\n maximum = Math.ceil(end / interval) * interval;\n if (axis.rangePadding === 'Additional') {\n minimum -= interval;\n maximum += interval;\n }\n this.updateActualRange(axis, minimum, maximum, interval);\n };\n Double.prototype.findNormal = function (axis, start, end, interval, size) {\n var remaining;\n var minimum;\n var maximum;\n var startValue = start;\n if (start < 0) {\n startValue = 0;\n minimum = start + (start / 20);\n remaining = interval + (minimum % interval);\n if ((0.365 * interval) >= remaining) {\n minimum -= interval;\n }\n if (minimum % interval < 0) {\n minimum = (minimum - interval) - (minimum % interval);\n }\n }\n else {\n minimum = start < ((5.0 / 6.0) * end) ? 0 : (start - (end - start) / 2);\n if (minimum % interval > 0) {\n minimum -= (minimum % interval);\n }\n }\n maximum = (end > 0) ? (end + (end - startValue) / 20) : (end - (end - startValue) / 20);\n remaining = interval - (maximum % interval);\n if ((0.365 * interval) >= remaining) {\n maximum += interval;\n }\n if (maximum % interval > 0) {\n maximum = (maximum + interval) - (maximum % interval);\n }\n axis.doubleRange = new DoubleRange(minimum, maximum);\n if (minimum === 0) {\n interval = this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size);\n maximum = Math.ceil(maximum / interval) * interval;\n }\n this.updateActualRange(axis, minimum, maximum, interval);\n };\n /**\n * Calculate visible range for axis.\n * @private\n */\n Double.prototype.calculateVisibleRange = function (size, axis) {\n axis.visibleRange = {\n max: axis.actualRange.max, min: axis.actualRange.min,\n delta: axis.actualRange.delta, interval: axis.actualRange.interval\n };\n if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {\n axis.calculateVisibleRange(size);\n axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming && axis.valueType !== 'Category') ?\n this.calculateNumericNiceInterval(axis, axis.doubleRange.delta, size)\n : axis.visibleRange.interval;\n }\n axis.triggerRangeRender(this.chart, axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.interval);\n };\n /**\n * Calculate label for the axis.\n * @private\n */\n Double.prototype.calculateVisibleLabels = function (axis, chart) {\n /*! Generate axis labels */\n axis.visibleLabels = [];\n var tempInterval = axis.visibleRange.min;\n if (axis.zoomFactor < 1 || axis.zoomPosition > 0 || this.paddingInterval) {\n tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);\n }\n var format = this.getFormat(axis);\n var isCustom = format.match('{value}') !== null;\n axis.format = chart.intl.getNumberFormat({\n format: isCustom ? '' : format,\n useGrouping: chart.useGroupingSeparator\n });\n axis.startLabel = axis.format(axis.visibleRange.min);\n axis.endLabel = axis.format(axis.visibleRange.max);\n for (; tempInterval <= axis.visibleRange.max; tempInterval += axis.visibleRange.interval) {\n if (withIn(tempInterval, axis.visibleRange)) {\n axis.triggerLabelRender(chart, tempInterval, this.formatValue(axis, isCustom, format, tempInterval), axis.labelStyle);\n }\n }\n axis.getMaxLabelWidth(chart);\n };\n /**\n * Format of the axis label.\n * @private\n */\n Double.prototype.getFormat = function (axis) {\n if (axis.labelFormat) {\n return axis.labelFormat;\n }\n return axis.isStack100 ? '{value}%' : '';\n };\n /**\n * Formatted the axis label.\n * @private\n */\n Double.prototype.formatValue = function (axis, isCustom, format, tempInterval) {\n return isCustom ? format.replace('{value}', axis.format(tempInterval))\n : axis.format(tempInterval);\n };\n return Double;\n}());\nexport { Double };\n","/**\n * Specifies the chart constant value\n */\n/** @private */\nexport var loaded = 'loaded';\n/** @private */\nexport var load = 'load';\n/** @private */\nexport var animationComplete = 'animationComplete';\n/** @private */\nexport var legendRender = 'legendRender';\n/** @private */\nexport var textRender = 'textRender';\n/** @private */\nexport var pointRender = 'pointRender';\n/** @private */\nexport var seriesRender = 'seriesRender';\n/** @private */\nexport var axisLabelRender = 'axisLabelRender';\n/** @private */\nexport var axisRangeCalculated = 'axisRangeCalculated';\n/** @private */\nexport var axisMultiLabelRender = 'axisMultiLabelRender';\n/** @private */\nexport var tooltipRender = 'tooltipRender';\n/** @private */\nexport var chartMouseMove = 'chartMouseMove';\n/** @private */\nexport var chartMouseClick = 'chartMouseClick';\n/** @private */\nexport var pointClick = 'pointClick';\n/** @private */\nexport var pointMove = 'pointMove';\n/** @private */\nexport var chartMouseLeave = 'chartMouseLeave';\n/** @private */\nexport var chartMouseDown = 'chartMouseDown';\n/** @private */\nexport var chartMouseUp = 'chartMouseUp';\n/** @private */\nexport var zoomComplete = 'zoomComplete';\n/** @private */\nexport var dragComplete = 'dragComplete';\n/** @private */\nexport var resized = 'resized';\n/** @private */\nexport var beforePrint = 'beforePrint';\n/** @private */\nexport var annotationRender = 'annotationRender';\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';\nimport { Theme } from '../../common/model/theme';\nimport { Font, Border } from '../../common/model/base';\n/**\n * Configures the Annotation for chart.\n */\nvar ChartAnnotationSettings = /** @class */ (function (_super) {\n __extends(ChartAnnotationSettings, _super);\n function ChartAnnotationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('0')\n ], ChartAnnotationSettings.prototype, \"x\", void 0);\n __decorate([\n Property('0')\n ], ChartAnnotationSettings.prototype, \"y\", void 0);\n __decorate([\n Property(null)\n ], ChartAnnotationSettings.prototype, \"content\", void 0);\n __decorate([\n Property('Center')\n ], ChartAnnotationSettings.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Pixel')\n ], ChartAnnotationSettings.prototype, \"coordinateUnits\", void 0);\n __decorate([\n Property('Chart')\n ], ChartAnnotationSettings.prototype, \"region\", void 0);\n __decorate([\n Property('Middle')\n ], ChartAnnotationSettings.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Property(null)\n ], ChartAnnotationSettings.prototype, \"xAxisName\", void 0);\n __decorate([\n Property(null)\n ], ChartAnnotationSettings.prototype, \"yAxisName\", void 0);\n __decorate([\n Property(null)\n ], ChartAnnotationSettings.prototype, \"description\", void 0);\n return ChartAnnotationSettings;\n}(ChildProperty));\nexport { ChartAnnotationSettings };\n/**\n * label border properties.\n */\nvar LabelBorder = /** @class */ (function (_super) {\n __extends(LabelBorder, _super);\n function LabelBorder() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], LabelBorder.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], LabelBorder.prototype, \"width\", void 0);\n __decorate([\n Property('Rectangle')\n ], LabelBorder.prototype, \"type\", void 0);\n return LabelBorder;\n}(ChildProperty));\nexport { LabelBorder };\n/**\n * categories for multi level labels\n */\nvar MultiLevelCategories = /** @class */ (function (_super) {\n __extends(MultiLevelCategories, _super);\n function MultiLevelCategories() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], MultiLevelCategories.prototype, \"start\", void 0);\n __decorate([\n Property(null)\n ], MultiLevelCategories.prototype, \"end\", void 0);\n __decorate([\n Property('')\n ], MultiLevelCategories.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], MultiLevelCategories.prototype, \"maximumTextWidth\", void 0);\n return MultiLevelCategories;\n}(ChildProperty));\nexport { MultiLevelCategories };\n/**\n * Strip line properties\n */\nvar StripLineSettings = /** @class */ (function (_super) {\n __extends(StripLineSettings, _super);\n function StripLineSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], StripLineSettings.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], StripLineSettings.prototype, \"startFromAxis\", void 0);\n __decorate([\n Property(null)\n ], StripLineSettings.prototype, \"start\", void 0);\n __decorate([\n Property(null)\n ], StripLineSettings.prototype, \"end\", void 0);\n __decorate([\n Property(null)\n ], StripLineSettings.prototype, \"size\", void 0);\n __decorate([\n Property('#808080')\n ], StripLineSettings.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: 'transparent', width: 1 }, Border)\n ], StripLineSettings.prototype, \"border\", void 0);\n __decorate([\n Property('')\n ], StripLineSettings.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], StripLineSettings.prototype, \"rotation\", void 0);\n __decorate([\n Property('Middle')\n ], StripLineSettings.prototype, \"horizontalAlignment\", void 0);\n __decorate([\n Property('Middle')\n ], StripLineSettings.prototype, \"verticalAlignment\", void 0);\n __decorate([\n Complex(Theme.stripLineLabelFont, Font)\n ], StripLineSettings.prototype, \"textStyle\", void 0);\n __decorate([\n Property('Behind')\n ], StripLineSettings.prototype, \"zIndex\", void 0);\n __decorate([\n Property(1)\n ], StripLineSettings.prototype, \"opacity\", void 0);\n return StripLineSettings;\n}(ChildProperty));\nexport { StripLineSettings };\n/**\n * MultiLevelLabels properties\n */\nvar MultiLevelLabels = /** @class */ (function (_super) {\n __extends(MultiLevelLabels, _super);\n function MultiLevelLabels() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Center')\n ], MultiLevelLabels.prototype, \"alignment\", void 0);\n __decorate([\n Property('Wrap')\n ], MultiLevelLabels.prototype, \"overflow\", void 0);\n __decorate([\n Complex(Theme.axisLabelFont, Font)\n ], MultiLevelLabels.prototype, \"textStyle\", void 0);\n __decorate([\n Complex({ color: null, width: 1, type: 'Rectangle' }, LabelBorder)\n ], MultiLevelLabels.prototype, \"border\", void 0);\n __decorate([\n Collection([], MultiLevelCategories)\n ], MultiLevelLabels.prototype, \"categories\", void 0);\n return MultiLevelLabels;\n}(ChildProperty));\nexport { MultiLevelLabels };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty, Collection, extend } from '@syncfusion/ej2-base';\nimport { Font, Border } from '../../common/model/base';\nimport { Size, Rect, measureText, rotateTextSize, firstToLowerCase, valueToCoefficient, inside } from '../../common/utils/helper';\nimport { DoubleRange } from '../utils/double-range';\nimport { Double } from '../axis/double-axis';\nimport { Theme } from '../../common/model/theme';\nimport { axisLabelRender, axisRangeCalculated } from '../../common/model/constants';\nimport { StripLineSettings, MultiLevelLabels, LabelBorder } from '../model/chart-base';\nimport { textWrap } from '../../common/utils/helper';\nvar axisPadding = 10;\n/**\n * Configures the `rows` of the chart.\n */\nvar Row = /** @class */ (function (_super) {\n __extends(Row, _super);\n function Row() {\n /**\n * The height of the row as a string accept input both as '100px' and '100%'.\n * If specified as '100%, row renders to the full height of its chart.\n * @default '100%'\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.axes = [];\n /** @private */\n _this.nearSizes = [];\n /** @private */\n _this.farSizes = [];\n return _this;\n }\n /**\n * Measure the row size\n * @return {void}\n * @private\n */\n Row.prototype.computeSize = function (axis, clipRect) {\n var width = 0;\n var innerPadding = 5;\n if (axis.visible) {\n width += (axis.findTickSize(axis.crossInAxis) +\n axis.findLabelSize(axis.crossInAxis, innerPadding) + axis.lineStyle.width / 2);\n }\n if (axis.opposedPosition) {\n this.farSizes.push(width);\n }\n else {\n this.nearSizes.push(width);\n }\n };\n __decorate([\n Property('100%')\n ], Row.prototype, \"height\", void 0);\n __decorate([\n Complex({}, Border)\n ], Row.prototype, \"border\", void 0);\n return Row;\n}(ChildProperty));\nexport { Row };\n/**\n * Configures the `columns` of the chart.\n */\nvar Column = /** @class */ (function (_super) {\n __extends(Column, _super);\n function Column() {\n /**\n * The width of the column as a string accepts input both as like '100px' or '100%'.\n * If specified as '100%, column renders to the full width of its chart.\n * @default '100%'\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.axes = [];\n /** @private */\n _this.nearSizes = [];\n /** @private */\n _this.farSizes = [];\n /** @private */\n _this.padding = 0;\n return _this;\n }\n /**\n * Measure the column size\n * @return {void}\n * @private\n */\n Column.prototype.computeSize = function (axis, clipRect) {\n var height = 0;\n var innerPadding = 5;\n if (axis.visible) {\n height += (axis.findTickSize(axis.crossInAxis) +\n axis.findLabelSize(axis.crossInAxis, innerPadding) + axis.lineStyle.width / 2);\n }\n if (axis.opposedPosition) {\n this.farSizes.push(height);\n }\n else {\n this.nearSizes.push(height);\n }\n };\n __decorate([\n Property('100%')\n ], Column.prototype, \"width\", void 0);\n __decorate([\n Complex({}, Border)\n ], Column.prototype, \"border\", void 0);\n return Column;\n}(ChildProperty));\nexport { Column };\n/**\n * Configures the major grid lines in the `axis`.\n */\nvar MajorGridLines = /** @class */ (function (_super) {\n __extends(MajorGridLines, _super);\n function MajorGridLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], MajorGridLines.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], MajorGridLines.prototype, \"dashArray\", void 0);\n __decorate([\n Property(null)\n ], MajorGridLines.prototype, \"color\", void 0);\n return MajorGridLines;\n}(ChildProperty));\nexport { MajorGridLines };\n/**\n * Configures the minor grid lines in the `axis`.\n */\nvar MinorGridLines = /** @class */ (function (_super) {\n __extends(MinorGridLines, _super);\n function MinorGridLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0.7)\n ], MinorGridLines.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], MinorGridLines.prototype, \"dashArray\", void 0);\n __decorate([\n Property(null)\n ], MinorGridLines.prototype, \"color\", void 0);\n return MinorGridLines;\n}(ChildProperty));\nexport { MinorGridLines };\n/**\n * Configures the axis line of a chart.\n */\nvar AxisLine = /** @class */ (function (_super) {\n __extends(AxisLine, _super);\n function AxisLine() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], AxisLine.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], AxisLine.prototype, \"dashArray\", void 0);\n __decorate([\n Property(null)\n ], AxisLine.prototype, \"color\", void 0);\n return AxisLine;\n}(ChildProperty));\nexport { AxisLine };\n/**\n * Configures the major tick lines.\n */\nvar MajorTickLines = /** @class */ (function (_super) {\n __extends(MajorTickLines, _super);\n function MajorTickLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], MajorTickLines.prototype, \"width\", void 0);\n __decorate([\n Property(5)\n ], MajorTickLines.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], MajorTickLines.prototype, \"color\", void 0);\n return MajorTickLines;\n}(ChildProperty));\nexport { MajorTickLines };\n/**\n * Configures the minor tick lines.\n */\nvar MinorTickLines = /** @class */ (function (_super) {\n __extends(MinorTickLines, _super);\n function MinorTickLines() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0.7)\n ], MinorTickLines.prototype, \"width\", void 0);\n __decorate([\n Property(5)\n ], MinorTickLines.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], MinorTickLines.prototype, \"color\", void 0);\n return MinorTickLines;\n}(ChildProperty));\nexport { MinorTickLines };\n/**\n * Configures the crosshair ToolTip.\n */\nvar CrosshairTooltip = /** @class */ (function (_super) {\n __extends(CrosshairTooltip, _super);\n function CrosshairTooltip() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], CrosshairTooltip.prototype, \"enable\", void 0);\n __decorate([\n Property(null)\n ], CrosshairTooltip.prototype, \"fill\", void 0);\n __decorate([\n Complex(Theme.crosshairLabelFont, Font)\n ], CrosshairTooltip.prototype, \"textStyle\", void 0);\n return CrosshairTooltip;\n}(ChildProperty));\nexport { CrosshairTooltip };\n/**\n * Configures the axes in the chart.\n */\nvar Axis = /** @class */ (function (_super) {\n __extends(Axis, _super);\n function Axis() {\n /**\n * Options to customize the axis label.\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.visibleLabels = [];\n /** @private */\n _this.series = [];\n /** @private */\n _this.rect = new Rect(undefined, undefined, 0, 0);\n /** @private */\n _this.axisBottomLine = null;\n /** @private */\n _this.intervalDivs = [10, 5, 2, 1];\n /** @private */\n _this.angle = _this.labelRotation;\n /** @private */\n _this.isStack100 = false;\n /** @private */\n _this.crossAt = null;\n /** @private */\n _this.updatedRect = null;\n /** @private */\n _this.multiLevelLabelHeight = 0;\n return _this;\n }\n /**\n * The function used to find tick size.\n * @return {number}\n * @private\n */\n Axis.prototype.findTickSize = function (crossAxis) {\n if (this.tickPosition === 'Inside') {\n return 0;\n }\n if (crossAxis && (!crossAxis.visibleRange || this.isInside(crossAxis.visibleRange))) {\n return 0;\n }\n return this.majorTickLines.height;\n };\n /**\n * The function used to find axis position.\n * @return {number}\n * @private\n */\n Axis.prototype.isInside = function (range) {\n return (inside(this.crossAt, range) ||\n (!this.opposedPosition && this.crossAt >= range.max) || (this.opposedPosition && this.crossAt <= range.min));\n };\n /**\n * The function used to find label Size.\n * @return {number}\n * @private\n */\n Axis.prototype.findLabelSize = function (crossAxis, innerPadding) {\n var titleSize = 0;\n if (this.title) {\n titleSize = measureText(this.title, this.titleStyle).height + innerPadding;\n }\n if (this.labelPosition === 'Inside') {\n return titleSize + innerPadding;\n }\n var diff;\n var value;\n var labelSize = titleSize + innerPadding + axisPadding +\n ((this.orientation === 'Vertical') ? this.maxLabelSize.width : this.maxLabelSize.height) + this.multiLevelLabelHeight;\n if (crossAxis && this.placeNextToAxisLine) {\n var range = crossAxis.visibleRange;\n var size = (crossAxis.orientation === 'Horizontal') ? crossAxis.rect.width : crossAxis.rect.height;\n if (!range || !size) {\n return 0;\n }\n else if (this.isInside(range)) {\n value = this.findDifference(crossAxis);\n diff = (value) * (size / range.delta);\n diff = (value) * ((size - (diff < labelSize ? (labelSize - diff) : 0)) / range.delta);\n labelSize = (diff < labelSize) ? (labelSize - diff) : 0;\n }\n }\n return labelSize;\n };\n /**\n * The function used to find axis position.\n * @return {number}\n * @private\n */\n Axis.prototype.updateCrossValue = function (chart) {\n var value = this.crossAt;\n if (value === null || !this.isInside(this.crossInAxis.visibleRange)) {\n this.updatedRect = this.rect;\n return null;\n }\n var range = this.crossInAxis.visibleRange;\n if (!this.opposedPosition) {\n if (this.crossAt > range.max) {\n value = range.max;\n }\n }\n else {\n if (this.crossAt < range.min) {\n value = range.min;\n }\n }\n this.updatedRect = extend({}, this.rect, null, true);\n if (this.orientation === 'Horizontal') {\n value = this.crossInAxis.rect.height - (valueToCoefficient(value, this.crossInAxis) * this.crossInAxis.rect.height);\n this.updatedRect.y = this.crossInAxis.rect.y + value;\n }\n else {\n value = valueToCoefficient(value, this.crossInAxis) * this.crossInAxis.rect.width;\n this.updatedRect.x = this.crossInAxis.rect.x + value;\n }\n };\n Axis.prototype.findDifference = function (crossAxis) {\n var value = 0;\n if (this.opposedPosition) {\n value = crossAxis.isInversed ? crossAxis.visibleRange.min : crossAxis.visibleRange.max;\n }\n else {\n value = crossAxis.isInversed ? crossAxis.visibleRange.max : crossAxis.visibleRange.min;\n }\n return Math.abs(this.crossAt - value);\n };\n /**\n * The function used to find whether the range is set.\n * @return {boolean}\n * @private\n */\n Axis.prototype.setRange = function () {\n if (this.minimum != null && this.maximum != null) {\n return true;\n }\n return false;\n };\n /**\n * Calculate visible range for axis.\n * @return {void}\n * @private\n */\n Axis.prototype.calculateVisibleRange = function (size) {\n if (this.zoomFactor < 1 || this.zoomPosition > 0) {\n var baseRange = this.actualRange;\n var start = void 0;\n var end = void 0;\n if (!this.isInversed) {\n start = this.actualRange.min + this.zoomPosition * this.actualRange.delta;\n end = start + this.zoomFactor * this.actualRange.delta;\n }\n else {\n start = this.actualRange.max - (this.zoomPosition * this.actualRange.delta);\n end = start - (this.zoomFactor * this.actualRange.delta);\n }\n if (start < baseRange.min) {\n end = end + (baseRange.min - start);\n start = baseRange.min;\n }\n if (end > baseRange.max) {\n start = start - (end - baseRange.max);\n end = baseRange.max;\n }\n this.doubleRange = new DoubleRange(start, end);\n this.visibleRange.min = this.doubleRange.start;\n this.visibleRange.max = this.doubleRange.end;\n this.visibleRange.delta = this.doubleRange.delta;\n }\n };\n /**\n * Calculate desired interval for the axis.\n * @return {void}\n * @private\n */\n Axis.prototype.getActualDesiredIntervalsCount = function (availableSize) {\n var size = this.orientation === 'Horizontal' ? availableSize.width : availableSize.height;\n if (this.desiredIntervals === null) {\n var desiredIntervalsCount = (this.orientation === 'Horizontal' ? 0.533 : 1) * this.maximumLabels;\n desiredIntervalsCount = Math.max((size * (desiredIntervalsCount / 100)), 1);\n return desiredIntervalsCount;\n }\n else {\n return this.desiredIntervals;\n }\n };\n /**\n * Triggers the event.\n * @return {void}\n * @private\n */\n Axis.prototype.triggerLabelRender = function (chart, tempInterval, text, labelStyle) {\n var argsData;\n argsData = {\n cancel: false, name: axisLabelRender, axis: this,\n text: text, value: tempInterval, labelStyle: labelStyle\n };\n chart.trigger(axisLabelRender, argsData);\n if (!argsData.cancel) {\n this.visibleLabels.push(new VisibleLabels(argsData.text, argsData.value, argsData.labelStyle));\n }\n };\n /**\n * Triggers the event.\n * @return {void}\n * @private\n */\n Axis.prototype.triggerRangeRender = function (chart, minimum, maximum, interval) {\n var argsData;\n argsData = {\n cancel: false, name: axisRangeCalculated, axis: this,\n minimum: minimum, maximum: maximum, interval: interval\n };\n chart.trigger(axisRangeCalculated, argsData);\n if (!argsData.cancel) {\n this.visibleRange.min = argsData.minimum;\n this.visibleRange.max = argsData.maximum;\n this.visibleRange.interval = argsData.interval;\n this.visibleRange.delta = argsData.maximum - argsData.minimum;\n }\n };\n /**\n * Calculate padding for the axis.\n * @return {string}\n * @private\n */\n Axis.prototype.getRangePadding = function (chart) {\n var padding = this.rangePadding;\n if (padding !== 'Auto') {\n return padding;\n }\n switch (this.orientation) {\n case 'Horizontal':\n if (chart.requireInvertedAxis) {\n padding = (this.isStack100 ? 'Round' : 'Normal');\n }\n else {\n padding = 'None';\n }\n break;\n case 'Vertical':\n if (!chart.requireInvertedAxis) {\n padding = (this.isStack100 ? 'Round' : 'Normal');\n }\n else {\n padding = 'None';\n }\n break;\n }\n return padding;\n };\n /**\n * Calculate maximum label width for the axis.\n * @return {void}\n * @private\n */\n Axis.prototype.getMaxLabelWidth = function (chart) {\n var prevSize = new Size(0, 0);\n var rotatedLabel;\n var pointX;\n var previousEnd = 0;\n var isIntersect = false;\n this.angle = this.labelRotation;\n this.maxLabelSize = new Size(0, 0);\n var action = this.labelIntersectAction;\n var label;\n for (var i = 0; i < this.visibleLabels.length; i++) {\n label = this.visibleLabels[i];\n label.size = measureText(label.text, this.labelStyle);\n if (label.size.width > this.maxLabelSize.width) {\n this.maxLabelSize.width = label.size.width;\n this.rotatedLabel = label.text;\n }\n if (label.size.height > this.maxLabelSize.height) {\n this.maxLabelSize.height = label.size.height;\n }\n if (action === 'None' || action === 'Hide' || action === 'Trim') {\n continue;\n }\n if ((action !== 'None' || this.angle % 360 === 0) && this.orientation === 'Horizontal' &&\n this.rect.width > 0 && !isIntersect) {\n pointX = (valueToCoefficient(label.value, this) * this.rect.width) + this.rect.x;\n pointX -= label.size.width / 2;\n if (this.edgeLabelPlacement === 'Shift') {\n if (i === 0 && pointX < this.rect.x) {\n pointX = this.rect.x;\n }\n if (i === this.visibleLabels.length - 1 && ((pointX + label.size.width) > (this.rect.x + this.rect.width))) {\n pointX = this.rect.x + this.rect.width - label.size.width;\n }\n }\n switch (action) {\n case 'MultipleRows':\n if (i > 0) {\n this.findMultiRows(i, pointX, label);\n }\n break;\n case 'Rotate45':\n case 'Rotate90':\n if (i > 0 && (!this.isInversed ? pointX <= previousEnd : pointX + label.size.width >= previousEnd)) {\n this.angle = (action === 'Rotate45') ? 45 : 90;\n isIntersect = true;\n }\n break;\n default:\n label.text = textWrap(label.text, this.rect.width / this.visibleLabels.length, this.labelStyle);\n var height = (label.size.height * label.text.length);\n if (height > this.maxLabelSize.height) {\n this.maxLabelSize.height = height;\n }\n break;\n }\n previousEnd = this.isInversed ? pointX : pointX + label.size.width;\n }\n }\n if (this.angle !== 0 && this.orientation === 'Horizontal') {\n this.maxLabelSize = rotateTextSize(this.labelStyle, this.rotatedLabel, this.angle, chart);\n }\n if (chart.multiLevelLabelModule && this.multiLevelLabels.length > 0) {\n chart.multiLevelLabelModule.getMultilevelLabelsHeight(this);\n }\n };\n /**\n * Finds the multiple rows for axis.\n * @return {void}\n */\n Axis.prototype.findMultiRows = function (length, currentX, currentLabel) {\n var label;\n var pointX;\n var store = [];\n var isMultiRows;\n for (var i = length - 1; i >= 0; i--) {\n label = this.visibleLabels[i];\n pointX = (valueToCoefficient(label.value, this) * this.rect.width) + this.rect.x;\n isMultiRows = !this.isInversed ? currentX < (pointX + label.size.width / 2) :\n currentX + currentLabel.size.width > (pointX - label.size.width / 2);\n if (isMultiRows) {\n store.push(label.index);\n currentLabel.index = (currentLabel.index > label.index) ? currentLabel.index : label.index + 1;\n }\n else {\n currentLabel.index = store.indexOf(label.index) > -1 ? currentLabel.index : label.index;\n }\n }\n var height = (currentLabel.size.height * currentLabel.index) + (5 * (currentLabel.index - 1));\n if (height > this.maxLabelSize.height) {\n this.maxLabelSize.height = height;\n }\n };\n /**\n * Finds the default module for axis.\n * @return {void}\n * @private\n */\n Axis.prototype.getModule = function (chart) {\n if (this.valueType === 'Double') {\n this.baseModule = new Double(chart);\n }\n else {\n this.baseModule = chart[firstToLowerCase(this.valueType) + 'Module'];\n }\n };\n __decorate([\n Complex(Theme.axisLabelFont, Font)\n ], Axis.prototype, \"labelStyle\", void 0);\n __decorate([\n Complex({}, CrosshairTooltip)\n ], Axis.prototype, \"crosshairTooltip\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"title\", void 0);\n __decorate([\n Complex(Theme.axisTitleFont, Font)\n ], Axis.prototype, \"titleStyle\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"labelFormat\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"skeleton\", void 0);\n __decorate([\n Property('DateTime')\n ], Axis.prototype, \"skeletonType\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"plotOffset\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"isIndexed\", void 0);\n __decorate([\n Property(10)\n ], Axis.prototype, \"logBase\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"columnIndex\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"rowIndex\", void 0);\n __decorate([\n Property(1)\n ], Axis.prototype, \"span\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"desiredIntervals\", void 0);\n __decorate([\n Property(3)\n ], Axis.prototype, \"maximumLabels\", void 0);\n __decorate([\n Property(1)\n ], Axis.prototype, \"zoomFactor\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"zoomPosition\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"opposedPosition\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"enableAutoIntervalOnZooming\", void 0);\n __decorate([\n Property('Auto')\n ], Axis.prototype, \"rangePadding\", void 0);\n __decorate([\n Property('Double')\n ], Axis.prototype, \"valueType\", void 0);\n __decorate([\n Property('None')\n ], Axis.prototype, \"edgeLabelPlacement\", void 0);\n __decorate([\n Property('Auto')\n ], Axis.prototype, \"intervalType\", void 0);\n __decorate([\n Property('BetweenTicks')\n ], Axis.prototype, \"labelPlacement\", void 0);\n __decorate([\n Property('Outside')\n ], Axis.prototype, \"tickPosition\", void 0);\n __decorate([\n Property('Outside')\n ], Axis.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], Axis.prototype, \"name\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"visible\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"minorTicksPerInterval\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"labelRotation\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"crossesAt\", void 0);\n __decorate([\n Property(true)\n ], Axis.prototype, \"placeNextToAxisLine\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"crossesInAxis\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"minimum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"maximum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"interval\", void 0);\n __decorate([\n Complex({}, MajorTickLines)\n ], Axis.prototype, \"majorTickLines\", void 0);\n __decorate([\n Complex({}, MinorTickLines)\n ], Axis.prototype, \"minorTickLines\", void 0);\n __decorate([\n Complex({}, MajorGridLines)\n ], Axis.prototype, \"majorGridLines\", void 0);\n __decorate([\n Complex({}, MinorGridLines)\n ], Axis.prototype, \"minorGridLines\", void 0);\n __decorate([\n Complex({}, AxisLine)\n ], Axis.prototype, \"lineStyle\", void 0);\n __decorate([\n Property('Trim')\n ], Axis.prototype, \"labelIntersectAction\", void 0);\n __decorate([\n Property(false)\n ], Axis.prototype, \"isInversed\", void 0);\n __decorate([\n Property(100)\n ], Axis.prototype, \"coefficient\", void 0);\n __decorate([\n Property(0)\n ], Axis.prototype, \"startAngle\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"description\", void 0);\n __decorate([\n Property(2)\n ], Axis.prototype, \"tabIndex\", void 0);\n __decorate([\n Collection([], StripLineSettings)\n ], Axis.prototype, \"stripLines\", void 0);\n __decorate([\n Collection([], MultiLevelLabels)\n ], Axis.prototype, \"multiLevelLabels\", void 0);\n __decorate([\n Complex({ color: null, width: 0, type: 'Rectangle' }, LabelBorder)\n ], Axis.prototype, \"border\", void 0);\n return Axis;\n}(ChildProperty));\nexport { Axis };\n/** @private */\nvar VisibleLabels = /** @class */ (function () {\n function VisibleLabels(text, value, labelStyle, size, index) {\n if (size === void 0) { size = new Size(0, 0); }\n if (index === void 0) { index = 1; }\n this.text = text;\n this.originalText = text;\n this.value = value;\n this.labelStyle = labelStyle;\n this.size = size;\n this.index = 1;\n }\n return VisibleLabels;\n}());\nexport { VisibleLabels };\n","import { DataUtil } from '@syncfusion/ej2-data';\nimport { subtractThickness, valueToCoefficient, sum, subArray, TextOption, inside, measureText } from '../../common/utils/helper';\nimport { Size, Rect, Thickness, PathOption, logBase, createZoomingLabels, getElement, rotateTextSize } from '../../common/utils/helper';\nimport { textElement, textTrim } from '../../common/utils/helper';\n/**\n * Specifies the Cartesian Axis Layout.\n */\nvar axisPadding = 10;\nvar CartesianAxisLayoutPanel = /** @class */ (function () {\n /** @private */\n function CartesianAxisLayoutPanel(chartModule) {\n this.chart = chartModule;\n this.padding = 5;\n }\n /**\n * Measure the axis size.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.measureAxis = function (rect) {\n var chart = this.chart;\n this.crossAt(chart);\n this.seriesClipRect = new Rect(rect.x, rect.y, rect.width, rect.height);\n this.initialClipRect = rect;\n this.leftSize = 0;\n this.rightSize = 0;\n this.topSize = 0;\n this.bottomSize = 0;\n //Measure Axis size with initial Rect\n this.measureRowAxis(chart, this.initialClipRect);\n this.initialClipRect = subtractThickness(this.initialClipRect, new Thickness(this.leftSize, this.rightSize, 0, 0));\n this.measureColumnAxis(chart, this.initialClipRect);\n this.initialClipRect = subtractThickness(this.initialClipRect, new Thickness(0, 0, this.topSize, this.bottomSize));\n if (!this.chart.delayRedraw) {\n this.calculateAxisSize(this.initialClipRect);\n }\n this.leftSize = 0;\n this.rightSize = 0;\n this.topSize = 0;\n this.bottomSize = 0;\n //Measure Axis size with series Rect\n this.measureRowAxis(chart, this.initialClipRect);\n this.seriesClipRect = subtractThickness(this.seriesClipRect, new Thickness(this.leftSize, this.rightSize, 0, 0));\n this.measureColumnAxis(chart, this.initialClipRect);\n this.seriesClipRect = subtractThickness(this.seriesClipRect, new Thickness(0, 0, this.topSize, this.bottomSize));\n if (!this.chart.delayRedraw) {\n chart.refreshAxis();\n this.calculateAxisSize(this.seriesClipRect);\n }\n };\n CartesianAxisLayoutPanel.prototype.measureRowAxis = function (chart, rect) {\n var row;\n this.calculateRowSize(rect);\n for (var _i = 0, _a = chart.rows; _i < _a.length; _i++) {\n var item = _a[_i];\n row = item;\n row.nearSizes = [];\n row.farSizes = [];\n this.arrangeAxis(row);\n this.measureDefinition(row, chart, new Size(chart.availableSize.width, row.computedHeight), rect);\n if (this.leftSize < sum(row.nearSizes)) {\n this.leftSize = sum(row.nearSizes);\n }\n if (this.rightSize < sum(row.farSizes)) {\n this.rightSize = sum(row.farSizes);\n }\n }\n };\n CartesianAxisLayoutPanel.prototype.measureColumnAxis = function (chart, rect) {\n var column;\n this.calculateColumnSize(rect);\n for (var _i = 0, _a = chart.columns; _i < _a.length; _i++) {\n var item = _a[_i];\n column = item;\n column.farSizes = [];\n column.nearSizes = [];\n this.arrangeAxis(column);\n this.measureDefinition(column, chart, new Size(column.computedWidth, chart.availableSize.height), rect);\n if (this.bottomSize < sum(column.nearSizes)) {\n this.bottomSize = sum(column.nearSizes);\n }\n if (this.topSize < sum(column.farSizes)) {\n this.topSize = sum(column.farSizes);\n }\n }\n };\n /**\n * Measure the column and row in chart.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.measureDefinition = function (definition, chart, size, clipRect) {\n var axis;\n var axisType;\n for (var _i = 0, _a = definition.axes; _i < _a.length; _i++) {\n var axis_1 = _a[_i];\n axis_1.getModule(chart);\n axis_1.baseModule.calculateRangeAndInterval(size, axis_1);\n definition.computeSize(axis_1, clipRect);\n }\n if (definition.farSizes.length > 0) {\n definition.farSizes[definition.farSizes.length - 1] -= axisPadding;\n }\n if (definition.nearSizes.length > 0) {\n definition.nearSizes[definition.nearSizes.length - 1] -= axisPadding;\n }\n };\n /**\n * Measure the axis.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.calculateAxisSize = function (rect) {\n var chart = this.chart;\n var row;\n var column;\n var definition;\n var axis;\n var nearCount = 0;\n var farCount = 0;\n var size = 0;\n var x;\n var y;\n this.calculateRowSize(rect);\n for (var i = 0, len = chart.rows.length; i < len; i++) {\n row = chart.rows[i];\n nearCount = 0;\n farCount = 0;\n for (var j = 0, len_1 = row.axes.length; j < len_1; j++) {\n axis = row.axes[j];\n if (axis.rect.height === 0) {\n axis.rect.height = row.computedHeight;\n size = 0;\n for (var k = i + 1, len_2 = i + axis.span; k < len_2; k++) {\n definition = chart.rows[k];\n size += definition.computedHeight;\n }\n axis.rect.y = (row.computedTop - size) + axis.plotOffset;\n axis.rect.height = (axis.rect.height + size) - (2 * axis.plotOffset);\n axis.rect.width = 0;\n }\n if (axis.opposedPosition) {\n x = rect.x + rect.width + sum(subArray(row.farSizes, farCount));\n axis.rect.x = axis.rect.x >= x ? axis.rect.x : x;\n farCount++;\n }\n else {\n x = rect.x - sum(subArray(row.nearSizes, nearCount));\n axis.rect.x = axis.rect.x <= x ? axis.rect.x : x;\n nearCount++;\n }\n }\n }\n this.calculateColumnSize(rect);\n for (var i = 0, len = chart.columns.length; i < len; i++) {\n column = chart.columns[i];\n nearCount = 0;\n farCount = 0;\n for (var j = 0, len_3 = column.axes.length; j < len_3; j++) {\n axis = column.axes[j];\n if (axis.rect.width === 0) {\n for (var k = i, len_4 = (i + axis.span); k < len_4; k++) {\n definition = chart.columns[k];\n axis.rect.width += definition.computedWidth;\n }\n axis.rect.x = column.computedLeft + axis.plotOffset;\n axis.rect.width -= (2 * axis.plotOffset);\n axis.rect.height = 0;\n }\n if (axis.opposedPosition) {\n y = rect.y - sum(subArray(column.farSizes, farCount));\n axis.rect.y = axis.rect.y <= y ? axis.rect.y : y;\n farCount++;\n }\n else {\n y = rect.y + rect.height + sum(subArray(column.nearSizes, nearCount));\n axis.rect.y = axis.rect.y >= y ? axis.rect.y : y;\n nearCount++;\n }\n }\n }\n };\n /**\n * Measure the axis.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.measure = function () {\n var chart = this.chart;\n var row;\n var column;\n var definition;\n var axis;\n var actualIndex;\n var span;\n var axisLength;\n for (var _i = 0, _a = chart.axisCollections; _i < _a.length; _i++) {\n var axis_2 = _a[_i];\n //definition.Axes = axis;\n if (axis_2.orientation === 'Vertical') {\n chart.verticalAxes.push(axis_2);\n actualIndex = this.getActualRow(axis_2);\n row = chart.rows[actualIndex];\n this.pushAxis(row, axis_2);\n span = ((actualIndex + axis_2.span) > chart.rows.length ? chart.rows.length : (actualIndex + axis_2.span));\n for (var j = actualIndex + 1; j < span; j++) {\n definition = chart.rows[j];\n definition.axes[row.axes.length - 1] = axis_2;\n chart.rows[j] = definition;\n }\n chart.rows[actualIndex] = row;\n }\n else {\n chart.horizontalAxes.push(axis_2);\n actualIndex = this.getActualColumn(axis_2);\n column = chart.columns[actualIndex];\n this.pushAxis(column, axis_2);\n span = ((actualIndex + axis_2.span) > chart.columns.length ? chart.columns.length : (actualIndex + axis_2.span));\n for (var j = actualIndex + 1; j < span; j++) {\n definition = chart.columns[j];\n definition.axes[column.axes.length - 1] = axis_2;\n chart.columns[j] = definition;\n }\n chart.columns[actualIndex] = column;\n }\n }\n };\n CartesianAxisLayoutPanel.prototype.crossAt = function (chart) {\n for (var _i = 0, _a = chart.axisCollections; _i < _a.length; _i++) {\n var axis = _a[_i];\n if (axis.crossesAt === null) {\n continue;\n }\n var isTransposed = chart.isTransposed;\n if (!axis.crossesInAxis) {\n if (chart.requireInvertedAxis) {\n axis.crossInAxis = ((axis.orientation === 'Horizontal')) ? chart.primaryXAxis : chart.primaryYAxis;\n }\n else {\n axis.crossInAxis = ((axis.orientation === 'Horizontal')) ? chart.primaryYAxis : chart.primaryXAxis;\n }\n axis.crossAt = this.updateCrossAt(axis.crossInAxis, axis.crossesAt);\n continue;\n }\n else {\n for (var i = 2, len = chart.axisCollections.length; i < len; i++) {\n if (axis.crossesInAxis === chart.axisCollections[i].name) {\n axis.crossInAxis = chart.axisCollections[i];\n axis.crossAt = this.updateCrossAt(axis.crossInAxis, axis.crossesAt);\n continue;\n }\n }\n }\n }\n };\n CartesianAxisLayoutPanel.prototype.updateCrossAt = function (axis, crossAt) {\n switch (axis.valueType) {\n case 'DateTime':\n var option = {\n skeleton: 'full',\n type: 'dateTime'\n };\n var dateParser = this.chart.intl.getDateParser(option);\n var dateFormatter = this.chart.intl.getDateFormat(option);\n return Date.parse(dateParser(dateFormatter(new Date(DataUtil.parse.parseJson({ val: crossAt }).val))));\n case 'Category':\n return parseFloat(crossAt) ? parseFloat(crossAt) : axis.labels.indexOf(crossAt);\n case 'Logarithmic':\n return logBase(crossAt, axis.logBase);\n default:\n return crossAt;\n }\n };\n CartesianAxisLayoutPanel.prototype.pushAxis = function (definition, axis) {\n for (var i = 0, len = definition.axes.length; i <= len; i++) {\n if (!definition.axes[i]) {\n definition.axes[i] = axis;\n break;\n }\n }\n };\n CartesianAxisLayoutPanel.prototype.arrangeAxis = function (definition) {\n var axisCollection = [];\n for (var i = 0, len = definition.axes.length; i <= len; i++) {\n if (definition.axes[i]) {\n axisCollection.push(definition.axes[i]);\n }\n }\n definition.axes = axisCollection;\n };\n CartesianAxisLayoutPanel.prototype.getActualColumn = function (axis) {\n var actualLength = this.chart.columns.length;\n var pos = axis.columnIndex;\n var result = pos >= actualLength ? actualLength - 1 : (pos < 0 ? 0 : pos);\n return result;\n };\n CartesianAxisLayoutPanel.prototype.getActualRow = function (axis) {\n var actualLength = this.chart.rows.length;\n var pos = axis.rowIndex;\n var result = pos >= actualLength ? actualLength - 1 : (pos < 0 ? 0 : pos);\n return result;\n };\n /**\n * Measure the row size.\n * @return {void}\n */\n CartesianAxisLayoutPanel.prototype.calculateRowSize = function (rect) {\n /*! Calculate row size */\n var chart = this.chart;\n var row;\n var rowTop = rect.y + rect.height;\n var height = 0;\n var remainingHeight = Math.max(0, rect.height);\n for (var i = 0, len = chart.rows.length; i < len; i++) {\n row = chart.rows[i];\n if (row.height.indexOf('%') !== -1) {\n height = Math.min(remainingHeight, (rect.height * parseInt(row.height, 10) / 100));\n }\n else {\n height = Math.min(remainingHeight, parseInt(row.height, 10));\n }\n height = (i !== (len - 1)) ? height : remainingHeight;\n row.computedHeight = height;\n rowTop -= height;\n row.computedTop = rowTop;\n remainingHeight -= height;\n }\n };\n /**\n * Measure the row size.\n * @return {void}\n */\n CartesianAxisLayoutPanel.prototype.calculateColumnSize = function (rect) {\n /*! Calculate column size */\n var chart = this.chart;\n var column;\n var columnLeft = rect.x;\n var width = 0;\n var remainingWidth = Math.max(0, rect.width);\n for (var i = 0, len = chart.columns.length; i < len; i++) {\n column = chart.columns[i];\n if (column.width.indexOf('%') !== -1) {\n width = Math.min(remainingWidth, (rect.width * parseInt(column.width, 10) / 100));\n }\n else {\n width = Math.min(remainingWidth, parseInt(column.width, 10));\n }\n width = (i !== (len - 1)) ? width : remainingWidth;\n column.computedWidth = width;\n column.computedLeft = columnLeft;\n columnLeft += width;\n remainingWidth -= width;\n }\n };\n /**\n * To render the axis element.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.renderAxes = function () {\n var chart = this.chart;\n var axis;\n var axisElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisInsideCollection' });\n var axisLineElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisOutsideCollection' });\n var outsideElement;\n var isInside;\n for (var i = 0, len = chart.axisCollections.length; i < len; i++) {\n axis = chart.axisCollections[i];\n this.element = chart.renderer.createGroup({ id: chart.element.id + 'AxisGroup' + i + 'Inside' });\n outsideElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisGroup' + i + 'Outside' });\n isInside = this.findAxisPosition(axis);\n if (axis.orientation === 'Horizontal') {\n axis.updateCrossValue(chart);\n if (axis.visible && axis.lineStyle.width > 0) {\n this.drawAxisLine(axis, i, axis.plotOffset, 0, isInside ? outsideElement : this.element, axis.updatedRect);\n }\n if (axis.majorGridLines.width > 0 || axis.majorTickLines.width > 0) {\n this.drawXAxisGridLine(axis, i, (isInside || axis.tickPosition === 'Inside') ? outsideElement : this.element, axis.updatedRect);\n }\n if (axis.visible) {\n this.drawXAxisLabels(axis, i, (isInside || axis.labelPosition === 'Inside') ? outsideElement : this.element, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n this.drawXAxisBorder(axis, i, (isInside || axis.labelPosition === 'Inside') ? outsideElement : this.element, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n this.drawXAxisTitle(axis, i, isInside ? outsideElement : this.element, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n }\n }\n else {\n axis.updateCrossValue(chart);\n if (axis.visible && axis.lineStyle.width > 0) {\n this.drawAxisLine(axis, i, 0, axis.plotOffset, isInside ? outsideElement : this.element, axis.updatedRect);\n }\n if (axis.majorGridLines.width > 0 || axis.majorTickLines.width > 0) {\n this.drawYAxisGridLine(axis, i, (isInside || axis.tickPosition === 'Inside') ? outsideElement : this.element, axis.updatedRect);\n }\n if (axis.visible) {\n this.drawYAxisLabels(axis, i, (isInside || axis.labelPosition === 'Inside') ? outsideElement : this.element, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n this.drawYAxisBorder(axis, i, (isInside || axis.labelPosition === 'Inside') ? outsideElement : this.element, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n this.drawYAxisTitle(axis, i, isInside ? outsideElement : this.element, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n }\n }\n axisElement.appendChild(this.element);\n if (outsideElement && outsideElement.childNodes.length > 0) {\n axisLineElement.appendChild(outsideElement);\n }\n }\n this.element = chart.renderer.createGroup({ id: chart.element.id + 'DefinitionLine' });\n for (var j = 0, len = chart.rows.length; j < len; j++) {\n var row = chart.rows[j];\n if (row.border.color) {\n this.drawBottomLine(row, j, true);\n }\n }\n for (var j = 0, len = chart.columns.length; j < len; j++) {\n var column = chart.columns[j];\n if (column.border.color) {\n this.drawBottomLine(column, j, false);\n }\n }\n axisElement.appendChild(this.element);\n chart.svgObject.appendChild(axisElement);\n return axisLineElement;\n };\n CartesianAxisLayoutPanel.prototype.findAxisPosition = function (axis) {\n return axis.crossAt !== null && axis.isInside(axis.crossInAxis.visibleRange);\n };\n CartesianAxisLayoutPanel.prototype.drawBottomLine = function (definition, index, isRow) {\n var chart = this.chart;\n var optionsLine = {};\n var x1;\n var x2;\n var y1;\n var y2;\n var definitionName;\n if (isRow) {\n definition = definition;\n y1 = y2 = definition.computedTop + definition.computedHeight;\n x1 = this.seriesClipRect.x;\n x2 = x1 + this.seriesClipRect.width;\n definitionName = 'Row';\n }\n else {\n definition = definition;\n x1 = x2 = definition.computedLeft;\n y1 = this.seriesClipRect.y;\n y2 = y1 + this.seriesClipRect.height;\n definitionName = 'Column';\n }\n optionsLine = {\n 'id': chart.element.id + '_AxisBottom_' + definitionName + index,\n x1: x1,\n y1: y1,\n x2: x2,\n y2: y2,\n 'stroke-width': definition.border.width,\n 'stroke': definition.border.color,\n };\n this.htmlObject = chart.renderer.drawLine(optionsLine);\n this.element.appendChild(this.htmlObject);\n };\n CartesianAxisLayoutPanel.prototype.drawAxisLine = function (axis, index, plotX, plotY, parent, rect) {\n var chart = this.chart;\n var optionsLine = {};\n optionsLine = {\n 'id': chart.element.id + 'AxisLine_' + index,\n x1: rect.x - plotX,\n y1: rect.y - plotY,\n x2: rect.x + rect.width + plotX,\n y2: rect.y + rect.height + plotY,\n 'stroke-dasharray': axis.lineStyle.dashArray,\n 'stroke-width': axis.lineStyle.width,\n 'stroke': axis.lineStyle.color || chart.themeStyle.axisLine\n };\n this.htmlObject = chart.renderer.drawLine(optionsLine);\n parent.appendChild(this.htmlObject);\n };\n CartesianAxisLayoutPanel.prototype.drawYAxisGridLine = function (axis, index, parent, rect) {\n var chart = this.chart;\n var tempInterval;\n var pointY = 0;\n var majorGrid = '';\n var majorTick = '';\n var minorGird = '';\n var minorTick = '';\n var minorDirection;\n var tickSize = axis.opposedPosition ? axis.majorTickLines.height : -axis.majorTickLines.height;\n var axisLineSize = (axis.opposedPosition) ? axis.lineStyle.width / 2 : -axis.lineStyle.width / 2;\n var ticksbwtLabel = (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks') ?\n 0.5 : 0;\n var ticks = axis.tickPosition === 'Inside' ? (rect.x - tickSize - axisLineSize) : (rect.x + tickSize + axisLineSize);\n var length = axis.visibleLabels.length;\n if (axis.valueType.indexOf('Category') && axis.labelPlacement === 'BetweenTicks' && length > 0) {\n length += 1;\n }\n //Gridlines\n for (var i = 0; i < length; i++) {\n tempInterval = !axis.visibleLabels[i] ? (axis.visibleLabels[i - 1].value + axis.visibleRange.interval) - ticksbwtLabel\n : axis.visibleLabels[i].value - ticksbwtLabel;\n pointY = valueToCoefficient(tempInterval, axis) * rect.height;\n pointY = (pointY * -1) + (rect.y + rect.height);\n if (pointY >= rect.y && (rect.y + rect.height) >= pointY) {\n if ((inside(tempInterval, axis.visibleRange)) || this.isBorder(axis, i, pointY)) {\n majorGrid = majorGrid.concat('M ' + this.seriesClipRect.x + ' ' + (pointY) +\n ' L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + pointY + ' ');\n }\n majorTick = majorTick.concat('M ' + (rect.x + axisLineSize) + ' ' + pointY +\n ' L ' + (ticks) + ' ' + pointY + ' ');\n }\n if ((axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0) && axis.minorTicksPerInterval > 0) {\n minorDirection = this.drawAxisMinorLine(axis, tempInterval, minorGird, minorTick, rect, i);\n minorGird = minorDirection[0];\n minorTick = minorDirection[1];\n }\n }\n this.renderGridLine(axis, index, majorGrid, minorGird);\n this.renderTickLine(axis, index, majorTick, minorTick, parent);\n };\n CartesianAxisLayoutPanel.prototype.isBorder = function (axis, index, value) {\n var chart = this.chart;\n var border = chart.chartArea.border;\n var rect = this.seriesClipRect;\n var orientation = axis.orientation;\n var start = (orientation === 'Horizontal') ? rect.x : rect.y;\n var size = (orientation === 'Horizontal') ? rect.width : rect.height;\n var startIndex = (orientation === 'Horizontal') ? 0 : axis.visibleLabels.length - 1;\n var endIndex = (orientation === 'Horizontal') ? axis.visibleLabels.length - 1 : 0;\n if (axis.plotOffset > 0) {\n return true;\n }\n else if ((value === start || value === (start + size)) && (border.width <= 0 || border.color === 'transparent')) {\n return true;\n }\n else if ((value !== start && index === startIndex) || (value !== (start + size) && index === endIndex)) {\n return true;\n }\n return false;\n };\n /**\n * To render the axis label.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.drawYAxisLabels = function (axis, index, parent, rect) {\n var chart = this.chart;\n var pointX = 0;\n var pointY = 0;\n var elementSize;\n var options;\n var isLabelInside = axis.labelPosition === 'Inside';\n var isTickInside = axis.tickPosition === 'Inside';\n var isOpposed = axis.opposedPosition;\n var tickSpace = axis.labelPosition === axis.tickPosition ? axis.majorTickLines.height : 0;\n var padding = tickSpace + this.padding + axis.lineStyle.width / 2;\n padding = (axis.opposedPosition) ? padding : -padding;\n var anchor = ((isOpposed && isLabelInside) || (!isOpposed && !isLabelInside)) ? 'end' : 'start';\n var labelElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisLabels' + index });\n for (var i = 0, len = axis.visibleLabels.length; i < len; i++) {\n pointX = isLabelInside ? (rect.x - padding) : (rect.x + padding);\n elementSize = axis.visibleLabels[i].size;\n pointY = valueToCoefficient(axis.visibleLabels[i].value, axis) * rect.height;\n pointY = Math.floor((pointY * -1) + (rect.y + rect.height));\n options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY + (elementSize.height / 4), anchor, axis.visibleLabels[i].text);\n if (axis.edgeLabelPlacement) {\n switch (axis.edgeLabelPlacement) {\n case 'None':\n break;\n case 'Hide':\n if (((i === 0 || (axis.isInversed && i === len - 1)) && options.y > rect.y + rect.height) ||\n (((i === len - 1) || (axis.isInversed && i === 0)) && options.y - elementSize.height / 2 < rect.y)) {\n options.text = '';\n }\n break;\n case 'Shift':\n if ((i === 0 || (axis.isInversed && i === len - 1)) && options.y > rect.y + rect.height) {\n options.y = pointY = rect.y + rect.height;\n }\n else if (((i === len - 1) || (axis.isInversed && i === 0)) && (options.y - elementSize.height / 2 < rect.y)) {\n options.y = pointY = rect.y + elementSize.height / 2;\n }\n break;\n }\n }\n textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);\n }\n if (!chart.delayRedraw) {\n parent.appendChild(labelElement);\n }\n else if (axis.visible) {\n this.createZoomingLabel(this.chart, labelElement, axis, index, rect);\n }\n };\n /**\n * To render the axis label border.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.drawYAxisBorder = function (axis, index, parent, rect) {\n if (axis.border.width > 0) {\n var startY = void 0;\n var pointY = void 0;\n var gap = (rect.height / axis.visibleRange.delta) * (axis.valueType === 'DateTime' ? axis.dateTimeInterval\n : axis.visibleRange.interval);\n var endY = void 0;\n var length_1 = axis.maxLabelSize.width + 10 + ((axis.tickPosition === axis.labelPosition) ?\n axis.majorTickLines.height : 0);\n var labelBorder = '';\n var ticksbwtLabel = (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks') ? -0.5 : 0;\n var endX = ((axis.opposedPosition && axis.labelPosition === 'Inside') ||\n (!axis.opposedPosition && axis.labelPosition === 'Outside')) ? rect.x - length_1 : rect.x + length_1;\n for (var i = 0; i < axis.visibleLabels.length; i++) {\n pointY = valueToCoefficient(axis.visibleLabels[i].value + ticksbwtLabel, axis);\n pointY = (axis.isInversed ? (1 - pointY) : pointY) * rect.height;\n if (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks') {\n startY = Math.floor((pointY * -1) + (rect.y + rect.height));\n endY = Math.floor((pointY * -1) - (gap) + (rect.y + rect.height));\n }\n else {\n startY = Math.floor((pointY * -1) + gap / 2 + (rect.y + rect.height));\n endY = Math.floor((pointY * -1) - gap / 2 + (rect.y + rect.height));\n }\n switch (axis.border.type) {\n case 'Rectangle':\n case 'WithoutTopBorder':\n if (startY > (rect.y + rect.height)) {\n labelBorder += ('M' + ' ' + endX + ' ' + (rect.y + rect.height) + ' ' + 'L' + ' ' + endX + ' ' + endY + ' ');\n }\n else if (Math.floor(rect.y) > (endY)) {\n labelBorder += ('M' + ' ' + rect.x + ' ' + startY + ' ' + 'L' + ' ' + endX\n + ' ' + startY + ' ' + 'L' + ' ' + endX + ' ' + (rect.y) + ' ');\n }\n else {\n labelBorder += ('M' + ' ' + rect.x + ' ' + startY + ' ' + 'L' + ' ' + endX +\n ' ' + startY + ' ' + 'L' + ' ' + endX + ' ' + endY + ' ');\n if (i === axis.visibleLabels.length - 1) {\n labelBorder += ('M' + ' ' + rect.x + ' ' + endY + ' ' + 'L' + ' ' +\n endX + ' ' + endY + ' ');\n }\n }\n break;\n case 'WithoutTopandBottomBorder':\n if (!(startY > rect.y + rect.height) && !((endY) < Math.floor(rect.y))) {\n labelBorder += ('M' + ' ' + rect.x + ' ' + startY + ' ' + 'L' + ' ' + endX +\n ' ' + startY + ' ' + 'M' + ' ' + endX + ' ' + endY + ' ' +\n 'L' + ' ' + rect.x + ' ' + endY);\n }\n break;\n }\n }\n labelBorder += (axis.border.type === 'Rectangle') ? ('M' + ' ' + rect.x + ' ' + rect.y + ' ' + 'L' + ' ' +\n rect.x + ' ' + (rect.y + rect.height) + ' ') : '';\n if (labelBorder !== '') {\n this.createAxisBorderElement(axis, index, labelBorder, parent);\n }\n }\n if (axis.multiLevelLabels.length > 0 && this.chart.multiLevelLabelModule) {\n this.chart.multiLevelLabelModule.renderYAxisMultiLevelLabels(axis, index, parent, rect);\n }\n };\n CartesianAxisLayoutPanel.prototype.drawYAxisTitle = function (axis, index, parent, rect) {\n var chart = this.chart;\n var labelRotation = (axis.opposedPosition) ? 90 : -90;\n var elementSize = measureText(axis.title, axis.titleStyle);\n var padding = (axis.tickPosition === 'Inside' ? 0 : axis.majorTickLines.height + this.padding) +\n (axis.labelPosition === 'Inside' ? 0 :\n (axis.maxLabelSize.width + axis.multiLevelLabelHeight + this.padding));\n padding = axis.opposedPosition ? padding : -padding;\n var x = rect.x + padding;\n var y = rect.y + rect.height / 2;\n var options = new TextOption(chart.element.id + '_AxisTitle_' + index, x, y - this.padding, 'middle', axis.title, 'rotate(' + labelRotation + ',' + (x) + ',' + (y) + ')');\n var element = textElement(options, axis.titleStyle, axis.titleStyle.color || chart.themeStyle.axisTitle, parent);\n element.setAttribute('aria-label', axis.description || axis.title);\n element.setAttribute('tabindex', axis.tabIndex.toString());\n };\n CartesianAxisLayoutPanel.prototype.drawXAxisGridLine = function (axis, index, parent, rect) {\n var chart = this.chart;\n var tempInterval;\n var pointX = 0;\n var majorGrid = '';\n var majorTick = '';\n var minorGird = '';\n var minorTick = '';\n var minorDirection;\n var tickSize = (axis.opposedPosition) ? -axis.majorTickLines.height : axis.majorTickLines.height;\n var axisLineSize = (axis.opposedPosition) ? -axis.lineStyle.width / 2 : axis.lineStyle.width / 2;\n var ticksbwtLabel = (axis.valueType.indexOf('Category') > -1 && axis.labelPlacement === 'BetweenTicks') ?\n 0.5 : 0;\n var length = axis.visibleLabels.length;\n var ticks = axis.tickPosition === 'Inside' ? (rect.y - tickSize - axisLineSize) : (rect.y + tickSize + axisLineSize);\n if (axis.valueType.indexOf('Category') > -1 && length > 0 && axis.labelPlacement === 'BetweenTicks') {\n length += 1;\n }\n //Gridlines\n for (var i = 0; i < length; i++) {\n if (axis.valueType !== 'DateTimeCategory') {\n tempInterval = axis.visibleLabels[i] ? axis.visibleLabels[i].value - ticksbwtLabel\n : (axis.visibleLabels[i - 1].value + axis.visibleRange.interval) - ticksbwtLabel;\n }\n else {\n tempInterval = axis.visibleLabels[i] ?\n axis.visibleLabels[i].value - ticksbwtLabel : axis.visibleRange.max;\n }\n pointX = (valueToCoefficient(tempInterval, axis) * rect.width) + rect.x;\n if (pointX >= rect.x && (rect.x + rect.width) >= pointX) {\n if (inside(tempInterval, axis.visibleRange) || this.isBorder(axis, i, pointX)) {\n majorGrid = majorGrid.concat('M ' + pointX + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height) +\n ' L ' + pointX + ' ' + this.seriesClipRect.y + ' ');\n }\n majorTick = majorTick.concat('M ' + (pointX) + ' ' + (rect.y + axisLineSize) +\n ' L ' + (pointX) + ' ' + ticks + ' ');\n }\n if (axis.minorTicksPerInterval > 0 && (axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0)) {\n minorDirection = this.drawAxisMinorLine(axis, tempInterval, minorGird, minorTick, rect, i);\n minorGird = minorDirection[0];\n minorTick = minorDirection[1];\n }\n }\n this.renderGridLine(axis, index, majorGrid, minorGird);\n this.renderTickLine(axis, index, majorTick, minorTick, parent);\n };\n CartesianAxisLayoutPanel.prototype.drawAxisMinorLine = function (axis, tempInterval, minorGird, minorTick, rect, labelIndex) {\n var value = tempInterval;\n var coor = 0;\n var position = 0;\n var range = axis.visibleRange;\n var isTickInside = axis.tickPosition === 'Inside';\n var direction = [];\n var tickSize = axis.opposedPosition ? -axis.minorTickLines.height : axis.minorTickLines.height;\n var logStart;\n var logEnd;\n var logInterval = 1;\n var logPosition = 1;\n var ticksX = isTickInside ? (rect.y - tickSize) : (rect.y + tickSize);\n var ticksY = isTickInside ? (rect.x + tickSize) : (rect.x - tickSize);\n if (axis.valueType === 'Logarithmic') {\n logStart = Math.pow(axis.logBase, value - range.interval);\n logEnd = Math.pow(axis.logBase, value);\n logInterval = (logEnd - logStart) / (axis.minorTicksPerInterval + 1);\n logPosition = logStart + logInterval;\n }\n if (axis.orientation === 'Horizontal') {\n for (var j = 0; j < axis.minorTicksPerInterval; j++) {\n value = this.findLogNumeric(axis, logPosition, logInterval, value, labelIndex);\n logPosition += logInterval;\n if (inside(value, range)) {\n position = ((value - range.min) / (range.max - range.min));\n position = Math.ceil((axis.isInversed ? (1 - position) : position) * rect.width);\n coor = (Math.floor(position + rect.x));\n minorGird = minorGird.concat('M' + ' ' + coor + ' ' + (this.seriesClipRect.y)\n + 'L ' + coor + ' ' + (this.seriesClipRect.y + this.seriesClipRect.height));\n coor = (Math.floor(position + rect.x));\n minorTick = minorTick.concat('M' + ' ' + coor + ' ' + (rect.y)\n + 'L ' + coor + ' ' + ticksX);\n }\n }\n }\n else {\n tickSize = axis.opposedPosition ? axis.minorTickLines.height : -axis.minorTickLines.height;\n for (var j = 0; j < axis.minorTicksPerInterval; j++) {\n value = this.findLogNumeric(axis, logPosition, logInterval, value, labelIndex);\n if (inside(value, range)) {\n position = Math.ceil(((value - range.min) / (range.max - range.min)) * rect.height) * -1;\n coor = (Math.floor(position + rect.y + rect.height));\n minorGird = minorGird.concat('M' + ' ' + (this.seriesClipRect.x) + ' ' + coor\n + 'L ' + (this.seriesClipRect.x + this.seriesClipRect.width) + ' ' + coor);\n coor = (Math.floor(position + rect.y + rect.height));\n minorTick = minorTick.concat('M' + ' ' + rect.x + ' ' + coor + 'L ' + ticksY + ' ' + coor);\n }\n logPosition += logInterval;\n }\n }\n direction.push(minorGird);\n direction.push(minorTick);\n return direction;\n };\n CartesianAxisLayoutPanel.prototype.findLogNumeric = function (axis, logPosition, logInterval, value, labelIndex) {\n var range = axis.visibleRange;\n if (axis.valueType === 'Logarithmic') {\n value = logBase(logPosition, axis.logBase);\n }\n else if (axis.valueType === 'DateTime') {\n value += axis.dateTimeInterval / (axis.minorTicksPerInterval + 1);\n }\n else if (axis.valueType === 'DateTimeCategory') {\n var padding = axis.labelPlacement === 'BetweenTicks' ? 0.5 : 0;\n value += ((axis.visibleLabels[labelIndex + 1] ?\n axis.visibleLabels[labelIndex + 1].value - padding : axis.visibleRange.max) -\n (axis.visibleLabels[labelIndex] ?\n axis.visibleLabels[labelIndex].value - padding : axis.visibleRange.min)) /\n (axis.minorTicksPerInterval + 1);\n }\n else {\n value += range.interval / (axis.minorTicksPerInterval + 1);\n }\n return value;\n };\n /**\n * To render the axis label.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.drawXAxisLabels = function (axis, index, parent, rect) {\n var chart = this.chart;\n var pointX = 0;\n var pointY = 0;\n var elementSize;\n var labelElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisLabels' + index });\n var labelPosition = axis.labelPosition;\n var islabelInside = axis.labelPosition === 'Inside';\n var isTickInside = axis.tickPosition === 'Inside';\n var isOpposed = axis.opposedPosition;\n var tickSpace = axis.labelPosition === axis.tickPosition ? axis.majorTickLines.height : 0;\n var labelPadding;\n var padding = tickSpace + this.padding + axis.lineStyle.width / 2;\n var rotateSize;\n var diffHeight;\n var angle;\n var anglePadding = ((axis.angle === 90 || axis.angle === -90)) ? -2 : 0;\n var options;\n var yLocation;\n var previousEnd = axis.isInversed ? (rect.x + rect.width) : rect.x;\n var width = 0;\n var length = axis.visibleLabels.length;\n var intervalLength;\n var label;\n for (var i = 0, len = length; i < len; i++) {\n label = axis.visibleLabels[i];\n pointX = (valueToCoefficient(label.value, axis) * rect.width) + rect.x;\n elementSize = label.size;\n intervalLength = rect.width / length;\n width = ((axis.labelIntersectAction === 'Trim' || axis.labelIntersectAction === 'Wrap')\n && elementSize.width > intervalLength) ? intervalLength : elementSize.width;\n pointX -= width / 2;\n if (islabelInside && axis.angle) {\n pointY = isOpposed ? (rect.y + padding) : (rect.y - padding);\n }\n else {\n labelPadding = (isOpposed && !islabelInside) || (!isOpposed && islabelInside) ?\n -(padding + (axis.angle ? (3 * (elementSize.height / 4) + (2 * axis.maxLabelSize.height / 5)) :\n (label.index > 1 ? (2 * (elementSize.height / 4)) : 0)))\n : padding + (axis.angle ? (3 * (elementSize.height / 4)) + (2 * axis.maxLabelSize.height / 5)\n : (3 * (elementSize.height / 4)));\n pointY = (rect.y + (labelPadding * label.index));\n }\n options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY, '');\n if (axis.edgeLabelPlacement) {\n switch (axis.edgeLabelPlacement) {\n case 'None':\n break;\n case 'Hide':\n if (((i === 0 || (axis.isInversed && i === len - 1)) && options.x < rect.x) ||\n ((i === len - 1 || (axis.isInversed && i === 0)) && (options.x + width > rect.x + rect.width))) {\n continue;\n }\n break;\n case 'Shift':\n if ((i === 0 || (axis.isInversed && i === len - 1)) && options.x < rect.x) {\n intervalLength -= (rect.x - options.x);\n options.x = pointX = rect.x;\n }\n else if ((i === len - 1 || (axis.isInversed && i === 0)) && ((options.x + width) > rect.x + rect.width)) {\n if (elementSize.width > intervalLength && axis.labelIntersectAction === 'Trim') {\n intervalLength -= (options.x + width - (rect.x + rect.width));\n }\n else {\n intervalLength = width;\n }\n options.x = pointX = rect.x + rect.width - intervalLength;\n }\n break;\n }\n }\n options.text = this.findAxisLabel(axis, label.text, intervalLength);\n if (axis.angle % 360 === 0 && axis.labelIntersectAction === 'Hide' && i !== 0 &&\n (!axis.isInversed ? options.x <= previousEnd : options.x + width >= previousEnd)) {\n continue;\n }\n previousEnd = axis.isInversed ? options.x : options.x + width;\n if (axis.angle !== 0) {\n angle = (axis.angle > 360) ? axis.angle % 360 : axis.angle;\n rotateSize = rotateTextSize(axis.labelStyle, label.text, angle, chart);\n diffHeight = islabelInside ? rotateSize.height :\n axis.maxLabelSize.height - Math.ceil(rotateSize.height - elementSize.height);\n yLocation = axis.opposedPosition ? diffHeight / 2 : -diffHeight / 2;\n options.transform = 'rotate(' + angle + ',' + (pointX + width / 2 + anglePadding) + ','\n + (pointY + yLocation) + ')';\n options.y += yLocation;\n }\n textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement, (axis.opposedPosition !== (axis.labelPosition === 'Inside'))).setAttribute('style', 'cursor: default');\n }\n if (!chart.delayRedraw) {\n parent.appendChild(labelElement);\n }\n else if (axis.visible) {\n this.createZoomingLabel(this.chart, labelElement, axis, index, rect);\n }\n };\n /**\n * To render the axis label border.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.drawXAxisBorder = function (axis, index, parent, axisRect) {\n if (axis.border.width > 0) {\n var startX = void 0;\n var startY = axisRect.y;\n var padding = 10;\n var pointX = void 0;\n var gap = (axisRect.width / axis.visibleRange.delta) * (axis.valueType === 'DateTime' ? axis.dateTimeInterval\n : axis.visibleRange.interval);\n var endX = void 0;\n var length_2 = axis.maxLabelSize.height +\n ((axis.tickPosition === axis.labelPosition) ? axis.majorTickLines.height : 0);\n var labelBorder = '';\n var ticksbwtLabel = (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks') ? -0.5 : 0;\n var endY = ((axis.opposedPosition && axis.labelPosition === 'Inside') ||\n (!axis.opposedPosition && axis.labelPosition === 'Outside')) ?\n (axisRect.y + length_2 + padding) : (axisRect.y - length_2 - padding);\n for (var i = 0; i < axis.visibleLabels.length; i++) {\n pointX = valueToCoefficient(axis.visibleLabels[i].value + ticksbwtLabel, axis);\n pointX = (axis.isInversed ? (1 - pointX) : pointX) * axisRect.width;\n if (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks') {\n startX = pointX + axisRect.x;\n endX = pointX + (gap) + axisRect.x;\n }\n else {\n startX = pointX - gap / 2 + axisRect.x;\n endX = pointX + gap / 2 + axisRect.x;\n }\n switch (axis.border.type) {\n case 'Rectangle':\n case 'WithoutTopBorder':\n if (startX < axisRect.x) {\n labelBorder += ('M' + ' ' + axisRect.x + ' ' + endY + ' ' + 'L' + ' ' + endX + ' ' + endY + ' ');\n }\n else if (Math.floor(endX) > axisRect.width + axisRect.x) {\n labelBorder += ('M' + ' ' + startX + ' ' + startY + ' ' + 'L' + ' ' + startX + ' ' + endY + ' ' +\n 'L' + ' ' + (axisRect.width + axisRect.x) + ' ' + endY + ' ');\n }\n else {\n labelBorder += ('M' + ' ' + startX + ' ' + startY + ' ' + 'L' + ' ' + startX + ' ' +\n endY + ' ' + 'L' + ' ' + endX + ' ' + endY + ' ');\n if (i === axis.visibleLabels.length - 1) {\n labelBorder += ('M' + ' ' + endX + ' ' + startY + ' ' + 'L' + ' ' + endX + ' ' + endY + ' ' +\n 'M ' + endX + ' ' + endY + ' L ' + (axisRect.width + axisRect.x) + ' ' + endY);\n }\n }\n break;\n case 'WithoutTopandBottomBorder':\n if (!(startX < axisRect.x) && !(Math.floor(endX) > axisRect.width + axisRect.x)) {\n labelBorder += ('M' + ' ' + startX + ' ' + startY + ' ' + 'L' + ' ' + startX + ' ' + endY + ' ' +\n 'M ' + endX + ' ' + startY + ' L ' + endX + ' ' + endY);\n }\n break;\n }\n }\n labelBorder += (axis.border.type === 'Rectangle' ? ('M ' + ' ' + axisRect.x + ' ' + startY + 'L' + ' ' +\n (axisRect.x + axisRect.width) + ' ' + startY) : '');\n if (labelBorder !== '') {\n this.createAxisBorderElement(axis, index, labelBorder, parent);\n }\n }\n if (this.chart.multiLevelLabelModule && axis.multiLevelLabels.length > 0) {\n this.chart.multiLevelLabelModule.renderXAxisMultiLevelLabels(axis, index, parent, axisRect);\n }\n };\n /**\n * To create border element for axis.\n * @return {void}\n * @private\n */\n CartesianAxisLayoutPanel.prototype.createAxisBorderElement = function (axis, index, labelBorder, parent) {\n var borderElement = this.chart.renderer.drawPath(new PathOption(this.chart.element.id + '_BorderLine_' + index, 'transparent', axis.border.width, axis.border.color || this.chart.themeStyle.axisLine, 1, '', labelBorder));\n borderElement.setAttribute('style', 'pointer-events: none');\n parent.appendChild(borderElement);\n };\n CartesianAxisLayoutPanel.prototype.findAxisLabel = function (axis, label, width) {\n switch (axis.labelIntersectAction) {\n case 'Trim':\n return textTrim(width, label, axis.labelStyle);\n default:\n return label;\n }\n };\n CartesianAxisLayoutPanel.prototype.drawXAxisTitle = function (axis, index, parent, rect) {\n var chart = this.chart;\n var elementSize = measureText(axis.title, axis.titleStyle);\n var padding = (axis.tickPosition === 'Inside' ? 0 : axis.majorTickLines.height + this.padding) +\n (axis.labelPosition === 'Inside' ? 0 :\n axis.maxLabelSize.height + axis.multiLevelLabelHeight + this.padding);\n padding = axis.opposedPosition ? -(padding + elementSize.height / 4) : (padding + (3 * elementSize.height / 4));\n var options = new TextOption(chart.element.id + '_AxisTitle_' + index, rect.x + rect.width / 2, rect.y + padding, 'middle', axis.title);\n var element = textElement(options, axis.titleStyle, axis.titleStyle.color || chart.themeStyle.axisTitle, parent);\n element.setAttribute('aria-label', axis.description || axis.title);\n element.setAttribute('tabindex', axis.tabIndex.toString());\n };\n CartesianAxisLayoutPanel.prototype.renderTickLine = function (axis, index, majorTick, minorTick, parent) {\n var options;\n var chart = this.chart;\n if (axis.majorTickLines.width > 0 && axis.visible) {\n options = new PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTick);\n this.htmlObject = chart.renderer.drawPath(options);\n parent.appendChild(this.htmlObject);\n }\n if (axis.minorTickLines.width > 0 && axis.visible) {\n options = new PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTick);\n this.htmlObject = chart.renderer.drawPath(options);\n parent.appendChild(this.htmlObject);\n }\n };\n CartesianAxisLayoutPanel.prototype.renderGridLine = function (axis, index, majorGrid, minorGird) {\n var chart = this.chart;\n var options;\n if (axis.majorGridLines.width > 0) {\n options = new PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);\n this.htmlObject = chart.renderer.drawPath(options);\n this.element.appendChild(this.htmlObject);\n }\n if (axis.minorGridLines.width > 0) {\n options = new PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);\n this.htmlObject = chart.renderer.drawPath(options);\n this.element.appendChild(this.htmlObject);\n }\n };\n CartesianAxisLayoutPanel.prototype.findParentNode = function (chart, label, axis, index) {\n if (axis.crossAt === null) {\n return document.getElementById(chart.element.id + 'AxisGroup' + index + 'Inside');\n }\n if (document.getElementById(chart.element.id + 'AxisGroup' + index + 'Inside').contains(document.getElementById(label.id))) {\n return document.getElementById(chart.element.id + 'AxisGroup' + index + 'Inside');\n }\n else {\n return document.getElementById(chart.element.id + 'AxisGroup' + index + 'Outside');\n }\n };\n CartesianAxisLayoutPanel.prototype.createZoomingLabel = function (chart, labelElement, axis, index, rect) {\n var parentNode = this.findParentNode(chart, labelElement, axis, index);\n labelElement.setAttribute('opacity', '0.3');\n var zoomElement = chart.renderer.createGroup({\n id: chart.element.id + 'AxisLabels_Zoom' + index\n });\n zoomElement = createZoomingLabels(chart, axis, zoomElement, index, axis.orientation === 'Vertical', rect);\n parentNode.replaceChild(labelElement, document.getElementById(labelElement.id));\n if (getElement(chart.element.id + 'AxisLabels_Zoom' + index)) {\n parentNode.replaceChild(zoomElement, document.getElementById(zoomElement.id));\n }\n else {\n parentNode.appendChild(zoomElement);\n }\n };\n return CartesianAxisLayoutPanel;\n}());\nexport { CartesianAxisLayoutPanel };\n","import { withInBounds, PointData, Rect, getValueXByPoint, getValueYByPoint } from '../../common/utils/helper';\n/**\n * To get the data on mouse move.\n * @private\n */\nvar ChartData = /** @class */ (function () {\n /**\n * Constructor for the data.\n * @private\n */\n function ChartData(chart) {\n /** @private */\n this.currentPoints = [];\n /** @private */\n this.previousPoints = [];\n this.chart = chart;\n this.lierIndex = 0;\n }\n /**\n * Method to get the Data.\n * @private\n */\n ChartData.prototype.getData = function () {\n var chart = this.chart;\n var point = null;\n var series = null;\n var width;\n var height;\n for (var len = chart.visibleSeries.length, i = len - 1; i >= 0; i--) {\n series = chart.visibleSeries[i];\n width = (series.type === 'Scatter' || series.drawType === 'Scatter' || (!series.isRectSeries && series.marker.visible))\n ? (series.marker.height + 5) / 2 : 0;\n height = (series.type === 'Scatter' || series.drawType === 'Scatter' || (!series.isRectSeries && series.marker.visible))\n ? (series.marker.width + 5) / 2 : 0;\n if (series.visible && withInBounds(chart.mouseX, chart.mouseY, series.clipRect, width, height)) {\n point = this.getRectPoint(series, series.clipRect, chart.mouseX, chart.mouseY);\n }\n if (point) {\n return new PointData(point, series);\n }\n }\n return new PointData(point, series);\n };\n ChartData.prototype.isSelected = function (chart) {\n return (chart.selectionMode.indexOf('Drag') > -1 && chart.selectionModule && chart.selectionModule.rectPoints !== null);\n };\n ChartData.prototype.getRectPoint = function (series, rect, x, y) {\n var currentRect;\n var fromCenterX;\n var fromCenterY;\n var clickAngle;\n var arcAngle = 0;\n var startAngle;\n var endAngle;\n var distanceFromCenter;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (!point.regionData) {\n if (!point.regions || !point.regions.length) {\n continue;\n }\n }\n if (point.regionData && this.chart.chartAreaType === 'PolarRadar' && series.drawType.indexOf('Column') > -1) {\n fromCenterX = x - (series.clipRect.width / 2 + series.clipRect.x);\n fromCenterY = y - (series.clipRect.height / 2 + series.clipRect.y);\n arcAngle = 2 * Math.PI * (point.regionData.currentXPosition < 0 ? 1 + point.regionData.currentXPosition\n : point.regionData.currentXPosition);\n clickAngle = (Math.atan2(fromCenterY, fromCenterX) + 0.5 * Math.PI - arcAngle) % (2 * Math.PI);\n clickAngle = clickAngle < 0 ? 2 * Math.PI + clickAngle : clickAngle;\n clickAngle = clickAngle + 2 * Math.PI * series.chart.primaryXAxis.startAngle;\n startAngle = point.regionData.startAngle;\n startAngle -= arcAngle;\n startAngle = startAngle < 0 ? 2 * Math.PI + startAngle : startAngle;\n endAngle = point.regionData.endAngle;\n endAngle -= arcAngle;\n endAngle = endAngle < 0 ? 2 * Math.PI + endAngle : endAngle;\n distanceFromCenter = Math.sqrt(Math.pow(Math.abs(fromCenterX), 2) + Math.pow(Math.abs(fromCenterY), 2));\n if (clickAngle >= startAngle && clickAngle <= endAngle &&\n (((distanceFromCenter >= point.regionData.innerRadius && distanceFromCenter <= point.regionData.radius) ||\n (distanceFromCenter <= point.regionData.innerRadius && distanceFromCenter >= point.regionData.radius))\n && distanceFromCenter <= series.chart.radius)) {\n return point;\n }\n }\n else if (this.checkRegionContainsPoint(point.regions, rect, x, y)) {\n return point;\n }\n }\n return null;\n };\n /**\n * Checks whether the region contains a point\n */\n ChartData.prototype.checkRegionContainsPoint = function (regionRect, rect, x, y) {\n var _this = this;\n return regionRect.some(function (region, index) {\n _this.lierIndex = index;\n return withInBounds(x, y, new Rect((_this.chart.chartAreaType === 'Cartesian' ? rect.x : 0) + region.x, (_this.chart.chartAreaType === 'Cartesian' ? rect.y : 0) + region.y, region.width, region.height));\n });\n };\n ChartData.prototype.getClosest = function (series, value) {\n var xData = series.xData;\n var closest;\n if (value >= series.xMin - 0.5 && value <= series.xMax + 0.5) {\n for (var _i = 0, xData_1 = xData; _i < xData_1.length; _i++) {\n var data = xData_1[_i];\n if (closest == null || Math.abs(data - value) < Math.abs(closest - value)) {\n closest = data;\n }\n }\n }\n return closest;\n };\n ChartData.prototype.getClosestX = function (chart, series) {\n var value;\n var rect = series.clipRect;\n if (!chart.requireInvertedAxis) {\n value = getValueXByPoint(chart.mouseX - rect.x, rect.width, series.xAxis);\n }\n else {\n value = getValueYByPoint(chart.mouseY - rect.y, rect.height, series.xAxis);\n }\n var closest = this.getClosest(series, value);\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (closest === point.xValue && point.visible) {\n return new PointData(point, series);\n }\n }\n return null;\n };\n return ChartData;\n}());\nexport { ChartData };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { StackValues, RectOption } from '../../common/utils/helper';\nimport { firstToLowerCase, Rect, logBase, CircleOption } from '../../common/utils/helper';\nimport { Border, Font, Margin, Animation, EmptyPointSettings, CornerRadius, Connector } from '../../common/model/base';\nimport { DataUtil } from '@syncfusion/ej2-data';\nimport { seriesRender } from '../../common/model/constants';\n/**\n * Configures the data label in the series.\n */\nvar DataLabelSettings = /** @class */ (function (_super) {\n __extends(DataLabelSettings, _super);\n function DataLabelSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], DataLabelSettings.prototype, \"visible\", void 0);\n __decorate([\n Property(null)\n ], DataLabelSettings.prototype, \"name\", void 0);\n __decorate([\n Property('transparent')\n ], DataLabelSettings.prototype, \"fill\", void 0);\n __decorate([\n Property(1)\n ], DataLabelSettings.prototype, \"opacity\", void 0);\n __decorate([\n Property('Auto')\n ], DataLabelSettings.prototype, \"position\", void 0);\n __decorate([\n Property(5)\n ], DataLabelSettings.prototype, \"rx\", void 0);\n __decorate([\n Property(5)\n ], DataLabelSettings.prototype, \"ry\", void 0);\n __decorate([\n Property('Center')\n ], DataLabelSettings.prototype, \"alignment\", void 0);\n __decorate([\n Complex({ width: null, color: null }, Border)\n ], DataLabelSettings.prototype, \"border\", void 0);\n __decorate([\n Complex({ left: 5, right: 5, top: 5, bottom: 5 }, Margin)\n ], DataLabelSettings.prototype, \"margin\", void 0);\n __decorate([\n Complex({ size: '11px', color: null }, Font)\n ], DataLabelSettings.prototype, \"font\", void 0);\n __decorate([\n Property(null)\n ], DataLabelSettings.prototype, \"template\", void 0);\n return DataLabelSettings;\n}(ChildProperty));\nexport { DataLabelSettings };\n/**\n * Configures the marker in the series.\n */\nvar MarkerSettings = /** @class */ (function (_super) {\n __extends(MarkerSettings, _super);\n function MarkerSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], MarkerSettings.prototype, \"visible\", void 0);\n __decorate([\n Property('Circle')\n ], MarkerSettings.prototype, \"shape\", void 0);\n __decorate([\n Property('')\n ], MarkerSettings.prototype, \"imageUrl\", void 0);\n __decorate([\n Property(5)\n ], MarkerSettings.prototype, \"height\", void 0);\n __decorate([\n Property(5)\n ], MarkerSettings.prototype, \"width\", void 0);\n __decorate([\n Complex({ width: 2, color: null }, Border)\n ], MarkerSettings.prototype, \"border\", void 0);\n __decorate([\n Property(null)\n ], MarkerSettings.prototype, \"fill\", void 0);\n __decorate([\n Property(1)\n ], MarkerSettings.prototype, \"opacity\", void 0);\n __decorate([\n Complex({}, DataLabelSettings)\n ], MarkerSettings.prototype, \"dataLabel\", void 0);\n return MarkerSettings;\n}(ChildProperty));\nexport { MarkerSettings };\n/**\n * Points model for the series.\n * @private\n */\nvar Points = /** @class */ (function () {\n function Points() {\n this.symbolLocations = null;\n this.regions = null;\n this.regionData = null;\n this.marker = {\n visible: true\n };\n }\n return Points;\n}());\nexport { Points };\n/**\n * Defines the behavior of the Trendlines\n */\nvar Trendline = /** @class */ (function (_super) {\n __extends(Trendline, _super);\n function Trendline() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.clipRect = new Rect(0, 0, 0, 0);\n return _this;\n }\n /** @private */\n Trendline.prototype.setDataSource = function (series, chart) {\n if (series) {\n this.points = series.points;\n }\n var type = firstToLowerCase(this.type);\n chart.trendLineModule.initDataSource(this, chart);\n chart.visibleSeriesCount++;\n };\n __decorate([\n Property('')\n ], Trendline.prototype, \"name\", void 0);\n __decorate([\n Property('Linear')\n ], Trendline.prototype, \"type\", void 0);\n __decorate([\n Property(2)\n ], Trendline.prototype, \"period\", void 0);\n __decorate([\n Property(2)\n ], Trendline.prototype, \"polynomialOrder\", void 0);\n __decorate([\n Property(0)\n ], Trendline.prototype, \"backwardForecast\", void 0);\n __decorate([\n Property(0)\n ], Trendline.prototype, \"forwardForecast\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Trendline.prototype, \"animation\", void 0);\n __decorate([\n Complex({}, MarkerSettings)\n ], Trendline.prototype, \"marker\", void 0);\n __decorate([\n Property(true)\n ], Trendline.prototype, \"enableTooltip\", void 0);\n __decorate([\n Property(null)\n ], Trendline.prototype, \"intercept\", void 0);\n __decorate([\n Property('')\n ], Trendline.prototype, \"fill\", void 0);\n __decorate([\n Property(1)\n ], Trendline.prototype, \"width\", void 0);\n __decorate([\n Property('SeriesType')\n ], Trendline.prototype, \"legendShape\", void 0);\n return Trendline;\n}(ChildProperty));\nexport { Trendline };\n/**\n * Configures Error bar in series.\n */\nvar ErrorBarCapSettings = /** @class */ (function (_super) {\n __extends(ErrorBarCapSettings, _super);\n function ErrorBarCapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(1)\n ], ErrorBarCapSettings.prototype, \"width\", void 0);\n __decorate([\n Property(10)\n ], ErrorBarCapSettings.prototype, \"length\", void 0);\n __decorate([\n Property(null)\n ], ErrorBarCapSettings.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], ErrorBarCapSettings.prototype, \"opacity\", void 0);\n return ErrorBarCapSettings;\n}(ChildProperty));\nexport { ErrorBarCapSettings };\nvar ChartSegment = /** @class */ (function (_super) {\n __extends(ChartSegment, _super);\n function ChartSegment() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], ChartSegment.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], ChartSegment.prototype, \"color\", void 0);\n __decorate([\n Property('0')\n ], ChartSegment.prototype, \"dashArray\", void 0);\n return ChartSegment;\n}(ChildProperty));\nexport { ChartSegment };\nvar ErrorBarSettings = /** @class */ (function (_super) {\n __extends(ErrorBarSettings, _super);\n function ErrorBarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], ErrorBarSettings.prototype, \"visible\", void 0);\n __decorate([\n Property('Fixed')\n ], ErrorBarSettings.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], ErrorBarSettings.prototype, \"direction\", void 0);\n __decorate([\n Property('Vertical')\n ], ErrorBarSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(null)\n ], ErrorBarSettings.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], ErrorBarSettings.prototype, \"verticalError\", void 0);\n __decorate([\n Property(1)\n ], ErrorBarSettings.prototype, \"width\", void 0);\n __decorate([\n Property(1)\n ], ErrorBarSettings.prototype, \"horizontalError\", void 0);\n __decorate([\n Property(3)\n ], ErrorBarSettings.prototype, \"verticalPositiveError\", void 0);\n __decorate([\n Property(3)\n ], ErrorBarSettings.prototype, \"verticalNegativeError\", void 0);\n __decorate([\n Property(1)\n ], ErrorBarSettings.prototype, \"horizontalPositiveError\", void 0);\n __decorate([\n Property(1)\n ], ErrorBarSettings.prototype, \"horizontalNegativeError\", void 0);\n __decorate([\n Complex(null, ErrorBarCapSettings)\n ], ErrorBarSettings.prototype, \"errorBarCap\", void 0);\n return ErrorBarSettings;\n}(ChildProperty));\nexport { ErrorBarSettings };\n/**\n * Defines the common behavior of Series and Technical Indicators\n */\nvar SeriesBase = /** @class */ (function (_super) {\n __extends(SeriesBase, _super);\n function SeriesBase() {\n /**\n * The DataSource field that contains the x value.\n * It is applicable for series and technical indicators\n * @default ''\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.currentViewData = [];\n /** @private */\n _this.clipRect = new Rect(0, 0, 0, 0);\n /** @private */\n _this.seriesType = 'XY';\n return _this;\n }\n /**\n * Process data for the series.\n * @hidden\n */\n SeriesBase.prototype.processJsonData = function () {\n var i = 0;\n var len = Object.keys(this.currentViewData).length;\n var point = new Points();\n var textMappingName = this instanceof Series && this.marker.dataLabel.name ?\n this.marker.dataLabel.name : '';\n if (this instanceof Series && this.type === 'Waterfall') {\n this.chart[firstToLowerCase(this.type) + 'SeriesModule'].\n processWaterfallData(this.currentViewData, this);\n }\n this.points = [];\n this.xMin = Infinity;\n this.xMax = -Infinity;\n this.yMin = Infinity;\n this.yMax = -Infinity;\n this.sizeMax = -Infinity;\n this.getSeriesType();\n if (this.xAxis.valueType === 'Category') {\n while (i < len) {\n point = this.dataPoint(i, textMappingName);\n this.pushCategoryData(point, i, point.x);\n this.pushData(point, i);\n this.setEmptyPoint(point, i);\n i++;\n }\n }\n else if (this.xAxis.valueType.indexOf('DateTime') > -1) {\n var option = {\n skeleton: 'full',\n type: 'dateTime'\n };\n var dateParser = this.chart.intl.getDateParser(option);\n var dateFormatter = this.chart.intl.getDateFormat(option);\n while (i < len) {\n point = this.dataPoint(i, textMappingName);\n point.x = new Date(DataUtil.parse.parseJson({ val: point.x }).val);\n if (this.xAxis.valueType === 'DateTime') {\n point.xValue = Date.parse(dateParser(dateFormatter(point.x)));\n }\n else {\n this.pushCategoryData(point, i, Date.parse(dateParser(dateFormatter(point.x))).toString());\n }\n this.pushData(point, i);\n this.setEmptyPoint(point, i);\n i++;\n }\n }\n else {\n while (i < len) {\n point = this.dataPoint(i, textMappingName);\n point.xValue = point.x;\n this.pushData(point, i);\n this.setEmptyPoint(point, i);\n i++;\n }\n }\n if (this instanceof Series) {\n if (this.type.indexOf('Spline') > -1 || (this.drawType.indexOf('Spline') > -1 && this.chart.chartAreaType === 'PolarRadar')) {\n var isArea = (this.type.indexOf('Area') > -1 || this.drawType === 'Area');\n this.chart['spline' + (isArea ? 'Area' : '') + 'SeriesModule'].findSplinePoint(this);\n }\n }\n };\n SeriesBase.prototype.pushData = function (point, i) {\n point.index = i;\n point.yValue = point.y;\n // To find the min, max for the axis range.\n this.xMin = Math.min(this.xMin, point.xValue);\n this.xMax = Math.max(this.xMax, point.xValue);\n this.xData.push(point.xValue);\n };\n /** @private */\n SeriesBase.prototype.dataPoint = function (i, textMappingName) {\n var point;\n this.points[i] = new Points();\n point = this.points[i];\n var currentViewData = this.currentViewData;\n point.x = getValue(this.xName, currentViewData[i]);\n point.high = getValue(this.high, currentViewData[i]);\n point.low = getValue(this.low, currentViewData[i]);\n point.open = getValue(this.open, currentViewData[i]);\n point.close = getValue(this.close, currentViewData[i]);\n point.volume = getValue(this.volume, currentViewData[i]);\n point.interior = getValue(this.pointColorMapping, currentViewData[i]);\n if (this instanceof Series) {\n point.y = getValue(this.yName, currentViewData[i]);\n point.size = getValue(this.size, currentViewData[i]);\n point.text = getValue(textMappingName, currentViewData[i]);\n }\n return point;\n };\n /**\n * To set empty point value based on empty point mode\n * @private\n */\n SeriesBase.prototype.setEmptyPoint = function (point, i) {\n if (!this.findVisibility(point)) {\n point.visible = true;\n return null;\n }\n point.isEmpty = true;\n var mode = this instanceof Series ? this.emptyPointSettings.mode : 'Drop';\n switch (mode) {\n case 'Zero':\n point.visible = true;\n if (this instanceof Series && this.seriesType.indexOf('HighLow') > -1) {\n point.high = point.low = 0;\n if (this.seriesType.indexOf('HighLowOpenClose') > -1) {\n point.open = point.close = 0;\n }\n }\n else {\n point.y = point.yValue = this.yData[i] = 0;\n }\n break;\n case 'Average':\n if (this instanceof Series) {\n if (this.seriesType.indexOf('HighLow') > -1) {\n point.high = (isNullOrUndefined(point.high) || isNaN(+point.high)) ? this.getAverage(this.high, i) : point.high;\n point.low = (isNullOrUndefined(point.low) || isNaN(+point.low)) ? this.getAverage(this.low, i) : point.low;\n if (this.seriesType.indexOf('HighLowOpenClose') > -1) {\n point.open = (isNullOrUndefined(point.open) || isNaN(+point.open)) ? this.getAverage(this.open, i) : point.open;\n point.close = (isNullOrUndefined(point.close) || isNaN(+point.close)) ? this.getAverage(this.close, i) :\n point.close;\n }\n }\n else {\n point.y = point.yValue = this.yData[i] = this.getAverage(this.yName, i);\n }\n }\n point.visible = true;\n break;\n case 'Drop':\n case 'Gap':\n this.yData[i] = null;\n point.visible = false;\n break;\n }\n };\n SeriesBase.prototype.findVisibility = function (point) {\n var type = this instanceof Series ? this.seriesType : 'HighLowOpenClose';\n var yValues;\n switch (type) {\n case 'XY':\n this.setXYMinMax(point.yValue);\n this.yData.push(point.yValue);\n if (this instanceof Series && this.type === 'Bubble') {\n this.sizeMax = Math.max(this.sizeMax, (isNullOrUndefined(point.size) || isNaN(+point.size)) ? this.sizeMax\n : point.size);\n }\n return isNullOrUndefined(point.x) || (isNullOrUndefined(point.y) || isNaN(+point.y));\n case 'HighLow':\n this.setHiloMinMax(point.high, point.low);\n return isNullOrUndefined(point.x) || (isNullOrUndefined(point.low) || isNaN(+point.low)) ||\n (isNullOrUndefined(point.high) || isNaN(+point.high));\n case 'HighLowOpenClose':\n this.setHiloMinMax(point.high, point.low);\n return isNullOrUndefined(point.x) || (isNullOrUndefined(point.low) || isNaN(+point.low)) ||\n (isNullOrUndefined(point.open) || isNaN(+point.open)) || (isNullOrUndefined(point.close) || isNaN(+point.close))\n || (isNullOrUndefined(point.high) || isNaN(+point.high));\n case 'BoxPlot':\n yValues = (point.y || [null]).filter(function (value) {\n return !isNullOrUndefined(value) && !isNaN(value);\n }).sort(function (a, b) {\n return a - b;\n });\n point.y = yValues;\n this.yMin = Math.min(this.yMin, Math.min.apply(Math, yValues));\n this.yMax = Math.max(this.yMax, Math.max.apply(Math, yValues));\n return !yValues.length;\n }\n };\n /**\n * To get Y min max for the provided point seriesType XY\n */\n SeriesBase.prototype.setXYMinMax = function (yValue) {\n this.yMin = Math.min(this.yMin, (isNullOrUndefined(yValue) || isNaN(yValue)) ? this.yMin : yValue);\n this.yMax = Math.max(this.yMax, (isNullOrUndefined(yValue) || isNaN(yValue)) ? this.yMax : yValue);\n };\n /**\n * To get Y min max for the provided point seriesType XY\n */\n SeriesBase.prototype.setHiloMinMax = function (high, low) {\n this.yMin = Math.min(this.yMin, Math.min((isNullOrUndefined(low) || isNaN(low)) ? this.yMin : low, (isNullOrUndefined(high) || isNaN(high)) ? this.yMin : high));\n this.yMax = Math.max(this.yMax, Math.max((isNullOrUndefined(low) || isNaN(low)) ? this.yMax : low, (isNullOrUndefined(high) || isNaN(high)) ? this.yMax : high));\n };\n /**\n * Finds the type of the series\n * @private\n */\n SeriesBase.prototype.getSeriesType = function () {\n var type;\n if (this instanceof Series) {\n var seriesType = this.chart.chartAreaType === 'PolarRadar' ? this.drawType : this.type;\n if (seriesType) {\n switch (seriesType) {\n case 'RangeColumn':\n case 'RangeArea':\n case 'Hilo':\n type = 'HighLow';\n break;\n case 'HiloOpenClose':\n case 'Candle':\n type = 'HighLowOpenClose';\n break;\n case 'BoxAndWhisker':\n type = 'BoxPlot';\n break;\n default:\n type = 'XY';\n }\n }\n }\n this.seriesType = type;\n };\n /** @private */\n SeriesBase.prototype.pushCategoryData = function (point, index, pointX) {\n if (!this.xAxis.isIndexed) {\n if (this.xAxis.labels.indexOf(pointX) < 0) {\n this.xAxis.labels.push(pointX);\n }\n point.xValue = this.xAxis.labels.indexOf(pointX);\n }\n else {\n this.xAxis.labels[index] ? this.xAxis.labels[index] += ', ' + pointX :\n this.xAxis.labels.push(pointX);\n point.xValue = index;\n }\n };\n /**\n * To find average of given property\n */\n SeriesBase.prototype.getAverage = function (member, i, data) {\n if (data === void 0) { data = this.currentViewData; }\n var previous = data[i - 1] ? (data[i - 1][member] || 0) : 0;\n var next = data[i + 1] ? (data[i + 1][member] || 0) : 0;\n return (previous + next) / 2;\n };\n /**\n * To find the control points for spline.\n * @return {void}\n * @private\n */\n SeriesBase.prototype.refreshDataManager = function (chart) {\n var _this = this;\n this.chart = chart;\n if (isNullOrUndefined(this.query) && !isNullOrUndefined(this.dataSource)) {\n this.dataManagerSuccess({ result: this.dataSource, count: this.dataSource.length }, chart, false);\n return;\n }\n var dataManager = this.dataModule.getData(this.dataModule.generateQuery().requiresCount());\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, chart); });\n };\n SeriesBase.prototype.dataManagerSuccess = function (e, chart, isRemoteData) {\n if (isRemoteData === void 0) { isRemoteData = true; }\n this.currentViewData = e.result !== '' ? e.result : [];\n if (this instanceof Series) {\n var argsData = {\n name: seriesRender, series: this, data: this.currentViewData, fill: this.interior\n };\n this.chart.trigger(seriesRender, argsData);\n this.interior = argsData.fill;\n this.currentViewData = argsData.data;\n }\n this.processJsonData();\n this.recordsCount = e.count;\n this.refreshChart(isRemoteData);\n };\n SeriesBase.prototype.refreshChart = function (isRemoteData) {\n var chart = this.chart;\n if (this instanceof Series) {\n chart.visibleSeriesCount += isRemoteData ? 1 : 0;\n }\n chart.refreshTechnicalIndicator(this);\n if (this instanceof Series && this.category !== 'TrendLine') {\n for (var _i = 0, _a = this.trendlines; _i < _a.length; _i++) {\n var trendline = _a[_i];\n trendline.setDataSource(this, chart);\n }\n }\n //if (chart.visibleSeries.length === (chart.visibleSeriesCount - chart.indicators.length)) {\n if (chart.visibleSeries.length === (chart.visibleSeriesCount)) {\n chart.refreshBound();\n chart.trigger('loaded', { chart: chart });\n }\n if (this instanceof Series) {\n chart.visibleSeriesCount += isRemoteData ? 0 : 1;\n }\n };\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"xName\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"high\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"low\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"open\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"close\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"volume\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"pointColorMapping\", void 0);\n __decorate([\n Property(null)\n ], SeriesBase.prototype, \"xAxisName\", void 0);\n __decorate([\n Property(null)\n ], SeriesBase.prototype, \"yAxisName\", void 0);\n __decorate([\n Complex(null, Animation)\n ], SeriesBase.prototype, \"animation\", void 0);\n __decorate([\n Property(null)\n ], SeriesBase.prototype, \"fill\", void 0);\n __decorate([\n Property(1)\n ], SeriesBase.prototype, \"width\", void 0);\n __decorate([\n Property('0')\n ], SeriesBase.prototype, \"dashArray\", void 0);\n __decorate([\n Property('')\n ], SeriesBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], SeriesBase.prototype, \"query\", void 0);\n __decorate([\n Collection([], ChartSegment)\n ], SeriesBase.prototype, \"segments\", void 0);\n __decorate([\n Property('X')\n ], SeriesBase.prototype, \"segmentAxis\", void 0);\n return SeriesBase;\n}(ChildProperty));\nexport { SeriesBase };\n/**\n * Configures the series in charts.\n */\nvar Series = /** @class */ (function (_super) {\n __extends(Series, _super);\n // tslint:disable-next-line:no-any\n function Series(parent, propName, defaultValue, isArray) {\n var _this = _super.call(this, parent, propName, defaultValue, isArray) || this;\n _this.visibleSeriesCount = 0;\n /** @private */\n _this.category = 'Series';\n /** @private */\n _this.isRectSeries = false;\n /** @private */\n _this.drawPoints = [];\n /** @private */\n _this.delayedAnimation = false;\n return _this;\n }\n /**\n * Refresh the axis label.\n * @return {boolean}\n * @private\n */\n Series.prototype.refreshAxisLabel = function () {\n if (this.xAxis.valueType !== 'Category') {\n return null;\n }\n this.xAxis.labels = [];\n for (var _i = 0, _a = this.xAxis.series; _i < _a.length; _i++) {\n var item = _a[_i];\n if (item.visible) {\n item.xMin = Infinity;\n item.xMax = -Infinity;\n for (var _b = 0, _c = item.points; _b < _c.length; _b++) {\n var point = _c[_b];\n item.pushCategoryData(point, point.index, point.x);\n item.xMin = Math.min(item.xMin, point.xValue);\n item.xMax = Math.max(item.xMax, point.xValue);\n }\n }\n }\n };\n /**\n * To get the series collection.\n * @return {void}\n * @private\n */\n Series.prototype.findSeriesCollection = function (column, row, isStack) {\n var seriesCollection = [];\n for (var _i = 0, _a = row.axes; _i < _a.length; _i++) {\n var rowAxis = _a[_i];\n for (var _b = 0, _c = rowAxis.series; _b < _c.length; _b++) {\n var rowSeries = _c[_b];\n for (var _d = 0, _e = column.axes; _d < _e.length; _d++) {\n var axis = _e[_d];\n for (var _f = 0, _g = axis.series; _f < _g.length; _f++) {\n var series = _g[_f];\n if (series === rowSeries && series.visible && this.rectSeriesInChart(series, isStack)) {\n seriesCollection.push(series);\n }\n }\n }\n }\n }\n return seriesCollection;\n };\n /**\n * To get the column type series.\n * @return {void}\n * @private\n */\n Series.prototype.rectSeriesInChart = function (series, isStack) {\n var type = (series.type).toLowerCase();\n return (type.indexOf('column') !== -1 || type.indexOf('bar') !== -1 ||\n type.indexOf('hiloopenclose') !== -1 || type.indexOf('candle') !== -1 ||\n type.indexOf('hilo') !== -1 || series.drawType.indexOf('Column') !== -1 ||\n type.indexOf('waterfall') !== -1 || type.indexOf('boxandwhisker') !== -1 || isStack);\n };\n /**\n * To calculate the stacked values.\n * @return {void}\n * @private\n */\n Series.prototype.calculateStackedValue = function (isStacking100, chart) {\n var axisSeries;\n for (var _i = 0, _a = chart.columns; _i < _a.length; _i++) {\n var columnItem = _a[_i];\n for (var _b = 0, _c = chart.rows; _b < _c.length; _b++) {\n var item = _c[_b];\n this.calculateStackingValues(this.findSeriesCollection(columnItem, item, true), isStacking100);\n }\n }\n };\n Series.prototype.calculateStackingValues = function (seriesCollection, isStacking100) {\n var startValues;\n var endValues;\n var yValues = [];\n var lastPositive = [];\n var lastNegative = [];\n var stackingGroup;\n var lastValue;\n var value;\n var frequencies = [];\n if (isStacking100) {\n frequencies = this.findFrequencies(seriesCollection);\n }\n for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {\n var series = seriesCollection_1[_i];\n if (series.type.indexOf('Stacking') !== -1 || (series.drawType.indexOf('Stacking') !== -1 &&\n (series.chart.chartAreaType === 'PolarRadar'))) {\n stackingGroup = (series.type.indexOf('StackingArea') !== -1) ? 'StackingArea100' : series.stackingGroup;\n if (!lastPositive[stackingGroup]) {\n lastPositive[stackingGroup] = [];\n lastNegative[stackingGroup] = [];\n }\n yValues = series.yData;\n startValues = [];\n endValues = [];\n for (var j = 0, pointsLength = series.points.length; j < pointsLength; j++) {\n lastValue = 0;\n value = yValues[j];\n if (lastPositive[stackingGroup][series.points[j].xValue] === undefined) {\n lastPositive[stackingGroup][series.points[j].xValue] = 0;\n }\n if (lastNegative[stackingGroup][series.points[j].xValue] === undefined) {\n lastNegative[stackingGroup][series.points[j].xValue] = 0;\n }\n if (isStacking100) {\n value = value / frequencies[stackingGroup][series.points[j].xValue] * 100;\n value = !isNaN(value) ? value : 0;\n series.points[j].percent = value.toFixed(2);\n }\n if (value >= 0) {\n lastValue = lastPositive[stackingGroup][series.points[j].xValue];\n lastPositive[stackingGroup][series.points[j].xValue] += value;\n }\n else {\n lastValue = lastNegative[stackingGroup][series.points[j].xValue];\n lastNegative[stackingGroup][series.points[j].xValue] += value;\n }\n startValues.push(lastValue);\n endValues.push(value + lastValue);\n if (isStacking100 && (endValues[j] > 100)) {\n endValues[j] = 100;\n }\n }\n series.stackedValues = new StackValues(startValues, endValues);\n series.yMin = Math.min.apply(0, startValues);\n series.yMax = Math.max.apply(0, endValues);\n if (series.yMin > Math.min.apply(0, endValues)) {\n series.yMin = (isStacking100) ? -100 : Math.min.apply(0, endValues);\n }\n if (series.yMax < Math.max.apply(0, startValues)) {\n series.yMax = 0;\n }\n }\n }\n };\n Series.prototype.findFrequencies = function (seriesCollection) {\n var frequencies = [];\n var stackingGroup;\n for (var _i = 0, seriesCollection_2 = seriesCollection; _i < seriesCollection_2.length; _i++) {\n var series = seriesCollection_2[_i];\n series.yAxis.isStack100 = series.type.indexOf('100') !== -1 ? true : false;\n if (series.type.indexOf('Stacking') !== -1) {\n stackingGroup = (series.type.indexOf('StackingArea') !== -1) ? 'StackingArea100' : series.stackingGroup;\n if (!frequencies[stackingGroup]) {\n frequencies[stackingGroup] = [];\n }\n for (var j = 0, pointsLength = series.points.length; j < pointsLength; j++) {\n if (frequencies[stackingGroup][series.points[j].xValue] === undefined) {\n frequencies[stackingGroup][series.points[j].xValue] = 0;\n }\n if (series.yData[j] > 0) {\n frequencies[stackingGroup][series.points[j].xValue] += series.yData[j];\n }\n else {\n frequencies[stackingGroup][series.points[j].xValue] -= series.yData[j];\n }\n }\n }\n }\n return frequencies;\n };\n /**\n * To find the log values.\n * @return {void}\n * @private\n */\n Series.prototype.logWithIn = function (value, axis) {\n if (axis.valueType === 'Logarithmic') {\n value = logBase(value, axis.logBase);\n }\n else {\n value = value;\n }\n return value;\n };\n /* private dataManagerFailure(e: { result: Object[] }): void {\n this.currentViewData = [];\n this.refreshChart();\n }*/\n /** @private */\n Series.prototype.renderSeries = function (chart, index) {\n var seriesType = firstToLowerCase(this.type);\n if (seriesType.indexOf('100') !== -1) {\n seriesType = seriesType.replace('100', '');\n }\n if (chart[seriesType + 'SeriesModule']) {\n if (this.category !== 'Indicator' && this.category !== 'TrendLine') {\n this.createSeriesElements(chart);\n }\n chart[seriesType + 'SeriesModule'].render(this, this.xAxis, this.yAxis, chart.requireInvertedAxis);\n if (this.category !== 'Indicator') {\n if (this.errorBar.visible) {\n this.chart.errorBarModule.render(this);\n }\n if (this.marker.dataLabel.visible) {\n chart.dataLabelModule.render(this, this.chart, this.marker.dataLabel);\n }\n this.appendSeriesElement(chart.seriesElements, chart);\n }\n this.performAnimation(chart, seriesType, this.errorBar, this.marker, this.marker.dataLabel);\n }\n };\n /**\n * To create seris element.\n * @return {void}\n * @private\n */\n Series.prototype.createSeriesElements = function (chart) {\n if (this.category !== 'Indicator') {\n var elementId = chart.element.id;\n var xAxisRect = this.xAxis.rect;\n // 8 for extend border value 5 for extend size value\n var explodeValue = this.marker.border.width + 8 + 5;\n var yAxisRect = this.yAxis.rect;\n var marker = this.marker;\n var render = chart.renderer;\n var index = this.index;\n var markerHeight = (this.type === 'Scatter') ? (this.marker.height + explodeValue) / 2 : 0;\n var markerWidth = (this.type === 'Scatter') ? (this.marker.width + explodeValue) / 2 : 0;\n if (chart.chartAreaType === 'PolarRadar') {\n this.clipRectElement = render.drawCircularClipPath(new CircleOption(elementId + '_ChartSeriesClipRect_' + index, 'transparent', { width: 1, color: 'Gray' }, 1, this.clipRect.width / 2 + this.clipRect.x, this.clipRect.height / 2 + this.clipRect.y, chart.radius));\n }\n else {\n this.clipRectElement = render.drawClipPath(new RectOption(elementId + '_ChartSeriesClipRect_' + index, 'transparent', { width: 1, color: 'Gray' }, 1, {\n x: -markerWidth, y: -markerHeight,\n width: this.clipRect.width + markerWidth * 2,\n height: this.clipRect.height + markerHeight * 2\n }));\n }\n var transform = void 0;\n transform = chart.chartAreaType === 'Cartesian' ? 'translate(' + this.clipRect.x + ',' + (this.clipRect.y) + ')' : '';\n this.symbolElement = null;\n this.seriesElement = render.createGroup({\n 'id': elementId + 'SeriesGroup' + index,\n 'transform': transform,\n 'clip-path': 'url(#' + elementId + '_ChartSeriesClipRect_' + index + ')'\n });\n this.seriesElement.appendChild(this.clipRectElement);\n }\n };\n /**\n * To append the series.\n * @return {void}\n * @private\n */\n Series.prototype.appendSeriesElement = function (element, chart) {\n var marker = this.marker;\n var dataLabel = marker.dataLabel;\n if (this.category !== 'TrendLine') {\n chart.seriesElements.appendChild(this.seriesElement);\n var errorBar = this.errorBar;\n if (errorBar.visible) {\n if (chart.chartAreaType === 'PolarRadar') {\n chart.seriesElements.appendChild(this.seriesElement);\n }\n else {\n chart.seriesElements.appendChild(this.errorBarElement);\n }\n }\n if (this.type === 'Scatter' || this.type === 'Bubble') {\n chart.seriesElements.appendChild(this.seriesElement);\n }\n }\n if (marker.visible && ((chart.chartAreaType === 'Cartesian' && (!this.isRectSeries || this.type === 'BoxAndWhisker'))\n || ((this.drawType !== 'Scatter' && !this.isRectSeries) && chart.chartAreaType === 'PolarRadar')) &&\n this.type !== 'Scatter' && this.type !== 'Bubble') {\n chart.seriesElements.appendChild(this.symbolElement);\n }\n if (dataLabel.visible) {\n chart.dataLabelElements.appendChild(this.shapeElement);\n chart.dataLabelElements.appendChild(this.textElement);\n }\n if (chart.dataLabelElements.hasChildNodes()) {\n chart.seriesElements.appendChild(chart.dataLabelElements);\n }\n };\n /**\n * To perform animation for chart series.\n * @return {void}\n * @private\n */\n Series.prototype.performAnimation = function (chart, type, errorBar, marker, dataLabel) {\n if (this.animation.enable && chart.animateSeries) {\n chart[type + 'SeriesModule'].doAnimation(this);\n if (errorBar.visible) {\n chart.errorBarModule.doErrorBarAnimation(this);\n }\n if (marker.visible) {\n chart.markerRender.doMarkerAnimation(this);\n }\n if (dataLabel.visible) {\n chart.dataLabelModule.doDataLabelAnimation(this);\n }\n }\n };\n /**\n * To set border color for empty point\n * @private\n */\n Series.prototype.setPointColor = function (point, color) {\n color = point.interior || color;\n return point.isEmpty ? (this.emptyPointSettings.fill || color) : color;\n };\n /**\n * To set border color for empty point\n * @private\n */\n Series.prototype.setBorderColor = function (point, border) {\n border.width = point.isEmpty ? (this.emptyPointSettings.border.width || border.width) : border.width;\n border.color = point.isEmpty ? (this.emptyPointSettings.border.color || border.color) : border.color;\n return border;\n };\n __decorate([\n Property('')\n ], Series.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], Series.prototype, \"yName\", void 0);\n __decorate([\n Property('Line')\n ], Series.prototype, \"drawType\", void 0);\n __decorate([\n Property(true)\n ], Series.prototype, \"isClosed\", void 0);\n __decorate([\n Property('#2ecd71')\n ], Series.prototype, \"bearFillColor\", void 0);\n __decorate([\n Property('#e74c3d')\n ], Series.prototype, \"bullFillColor\", void 0);\n __decorate([\n Property(false)\n ], Series.prototype, \"enableSolidCandles\", void 0);\n __decorate([\n Property('')\n ], Series.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], Series.prototype, \"stackingGroup\", void 0);\n __decorate([\n Property(true)\n ], Series.prototype, \"visible\", void 0);\n __decorate([\n Complex({ color: 'transparent', width: 0 }, Border)\n ], Series.prototype, \"border\", void 0);\n __decorate([\n Property(1)\n ], Series.prototype, \"opacity\", void 0);\n __decorate([\n Property('Line')\n ], Series.prototype, \"type\", void 0);\n __decorate([\n Complex(null, ErrorBarSettings)\n ], Series.prototype, \"errorBar\", void 0);\n __decorate([\n Complex(null, MarkerSettings)\n ], Series.prototype, \"marker\", void 0);\n __decorate([\n Collection([], Trendline)\n ], Series.prototype, \"trendlines\", void 0);\n __decorate([\n Property(true)\n ], Series.prototype, \"enableTooltip\", void 0);\n __decorate([\n Property('SeriesType')\n ], Series.prototype, \"legendShape\", void 0);\n __decorate([\n Property(null)\n ], Series.prototype, \"selectionStyle\", void 0);\n __decorate([\n Property(1)\n ], Series.prototype, \"minRadius\", void 0);\n __decorate([\n Property(3)\n ], Series.prototype, \"maxRadius\", void 0);\n __decorate([\n Property('Natural')\n ], Series.prototype, \"splineType\", void 0);\n __decorate([\n Property(0.5)\n ], Series.prototype, \"cardinalSplineTension\", void 0);\n __decorate([\n Complex(null, EmptyPointSettings)\n ], Series.prototype, \"emptyPointSettings\", void 0);\n __decorate([\n Property(true)\n ], Series.prototype, \"showMean\", void 0);\n __decorate([\n Property('Normal')\n ], Series.prototype, \"boxPlotMode\", void 0);\n __decorate([\n Property(0.7)\n ], Series.prototype, \"columnWidth\", void 0);\n __decorate([\n Property(0)\n ], Series.prototype, \"columnSpacing\", void 0);\n __decorate([\n Property('#C64E4A')\n ], Series.prototype, \"negativeFillColor\", void 0);\n __decorate([\n Property('#4E81BC')\n ], Series.prototype, \"summaryFillColor\", void 0);\n __decorate([\n Property()\n ], Series.prototype, \"intermediateSumIndexes\", void 0);\n __decorate([\n Property()\n ], Series.prototype, \"sumIndexes\", void 0);\n __decorate([\n Complex({ color: 'black', width: 2 }, Connector)\n ], Series.prototype, \"connector\", void 0);\n __decorate([\n Complex(null, CornerRadius)\n ], Series.prototype, \"cornerRadius\", void 0);\n return Series;\n}(SeriesBase));\nexport { Series };\n","import { Query, DataManager } from '@syncfusion/ej2-data';\n/**\n * data module is used to generate query and dataSource\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module\n * @private\n */\n function Data(dataSource, query) {\n this.initDataManager(dataSource, query);\n }\n /**\n * The function used to initialize dataManager and query\n * @return {void}\n * @private\n */\n Data.prototype.initDataManager = function (dataSource, query) {\n this.dataManager = dataSource instanceof DataManager ? dataSource : new DataManager(dataSource);\n this.query = query instanceof Query ? query : new Query();\n };\n /**\n * The function used to generate updated Query from chart model\n * @return {void}\n * @private\n */\n Data.prototype.generateQuery = function () {\n var query = this.query.clone();\n return query;\n };\n /**\n * The function used to get dataSource by executing given Query\n * @param {Query} query - A Query that specifies to generate dataSource\n * @return {void}\n * @private\n */\n Data.prototype.getData = function (query) {\n return this.dataManager.executeQuery(query);\n };\n return Data;\n}());\nexport { Data };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { drawSymbol, PathOption, Size } from '../../common/utils/helper';\nimport { Browser, extend, remove } from '@syncfusion/ej2-base';\nimport { ChartData } from '../../chart/utils/get-data';\nimport { withInBounds, PointData, stopTimer } from '../../common/utils/helper';\nimport { colorNameToHex, convertHexToColor } from '../../common/utils/helper';\n/**\n * Marker Module used to render the marker for line type series.\n */\nvar MarkerExplode = /** @class */ (function (_super) {\n __extends(MarkerExplode, _super);\n /**\n * Constructor for the marker module.\n * @private\n */\n function MarkerExplode(chart) {\n var _this = _super.call(this, chart) || this;\n _this.addEventListener();\n _this.elementId = chart.element.id;\n return _this;\n }\n /**\n * @hidden\n */\n MarkerExplode.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n this.chart.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.chart.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n };\n /**\n * @hidden\n */\n /* public removeEventListener(): void {\n if (this.chart.isDestroyed) { return; }\n this.chart.off(Browser.touchMoveEvent, this.mouseMoveHandler);\n }*/\n /**\n * @hidden\n */\n MarkerExplode.prototype.mouseUpHandler = function () {\n var chart = this.chart;\n if (chart.isTouch && !chart.crosshair.enable && !this.isSelected(chart)) {\n this.markerMove(true);\n }\n };\n /**\n * @hidden\n */\n MarkerExplode.prototype.mouseMoveHandler = function () {\n var chart = this.chart;\n if ((!chart.crosshair.enable || (chart.tooltip.enable)) && (!chart.isTouch || chart.startMove) && !this.isSelected(chart)) {\n this.markerMove(false);\n }\n };\n MarkerExplode.prototype.markerMove = function (remove) {\n var _this = this;\n var chart = this.chart;\n this.currentPoints = [];\n var data;\n var previous;\n var explodeSeries;\n if (!chart.tooltip.shared || !chart.tooltip.enable) {\n data = this.getData();\n previous = this.previousPoints[0];\n explodeSeries = data.series && (data.series.type === 'BoxAndWhisker' || data.series.type === 'Bubble' || data.series.drawType === 'Scatter'\n || data.series.type === 'Scatter' || (!data.series.isRectSeries && data.series.marker.visible));\n data.lierIndex = this.lierIndex;\n if (data.point && explodeSeries && ((!previous || (previous.point !== data.point)) ||\n (previous && previous.lierIndex > 3 && previous.lierIndex !== this.lierIndex))) {\n this.currentPoints.push(data);\n }\n }\n else {\n if (!withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n return null;\n }\n if (chart.tooltip.enable) {\n var pointData = chart.chartAreaType === 'PolarRadar' ? this.getData() : null;\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var chartSeries = _a[_i];\n if (!chartSeries.enableTooltip || chartSeries.category === 'Indicator') {\n continue;\n }\n if (chart.chartAreaType === 'Cartesian' && chartSeries.visible) {\n data = this.getClosestX(chart, chartSeries);\n }\n else if (chart.chartAreaType === 'PolarRadar' && chartSeries.visible && pointData.point !== null) {\n data = new PointData(chartSeries.points[pointData.point.index], chartSeries);\n }\n if (data) {\n this.currentPoints.push(data);\n data = null;\n }\n }\n }\n }\n var length = this.previousPoints.length;\n if (this.currentPoints.length > 0) {\n if (length === 0 || (length > 0 && this.previousPoints[0].point !== this.currentPoints[0].point)) {\n if (this.previousPoints.length > 0) {\n this.removeHighlightedMarker();\n }\n var _loop_1 = function (data_1) {\n if (data_1 && data_1.point &&\n (!data_1.series.isRectSeries || data_1.series.type === 'BoxAndWhisker')) {\n stopTimer(this_1.markerExplode);\n this_1.isRemove = true;\n data_1.point.symbolLocations.map(function (location, index) {\n if (data_1.point.marker.visible) {\n _this.drawTrackBall(data_1.series, data_1.point, location, index);\n }\n });\n }\n };\n var this_1 = this;\n for (var _b = 0, _c = this.currentPoints; _b < _c.length; _b++) {\n var data_1 = _c[_b];\n _loop_1(data_1);\n }\n this.previousPoints = extend([], this.currentPoints, null, true);\n }\n }\n if (!chart.tooltip.enable && ((this.currentPoints.length === 0 && this.isRemove) || (remove && this.isRemove) ||\n !withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect))) {\n this.isRemove = false;\n this.markerExplode = setTimeout(function () {\n _this.removeHighlightedMarker();\n }, 2000);\n }\n this.currentPoints = [];\n };\n MarkerExplode.prototype.drawTrackBall = function (series, point, location, index) {\n var marker = point.marker;\n var seriesMarker = series.marker;\n var shape = marker.shape || seriesMarker.shape;\n var element = series.symbolElement || series.seriesElement;\n var symbolId = this.elementId + '_Series_' + series.index + '_Point_' + point.index + '_Trackball' +\n (index ? index : '');\n var size = new Size((marker.width || seriesMarker.width) + 5, (marker.height || seriesMarker.height) + 5);\n var border = (marker.border || series.border);\n var explodeSeries = (series.type === 'BoxAndWhisker' || series.type === 'Bubble' || series.type === 'Scatter');\n var borderColor = (border.color && border.color !== 'transparent') ? border.color :\n marker.fill || point.interior || (explodeSeries ? point.color : series.interior);\n var colorValue = convertHexToColor(colorNameToHex(borderColor));\n var borderWidth = marker.border ? marker.border.width : seriesMarker.border.width;\n var markerShadow = series.chart.themeStyle.markerShadow ||\n 'rgba(' + colorValue.r + ',' + colorValue.g + ',' + colorValue.b + ',0.2)';\n for (var i = 0; i < 2; i++) {\n var options = new PathOption(symbolId + '_' + i, i ? (marker.fill || point.color || (explodeSeries ? series.interior : '#ffffff')) : 'transparent', borderWidth + (i ? 0 : 8), i ? borderColor : markerShadow, (marker.opacity || seriesMarker.opacity), null, null);\n var symbol = drawSymbol(location, shape, size, seriesMarker.imageUrl, options, '');\n symbol.setAttribute('style', 'pointer-events:none');\n symbol.setAttribute('class', 'EJ2-Trackball');\n element.appendChild(symbol);\n }\n };\n /**\n * @hidden\n */\n MarkerExplode.prototype.removeHighlightedMarker = function () {\n var elements = document.getElementsByClassName('EJ2-Trackball');\n for (var i = 0, len = elements.length; i < len; i++) {\n remove(elements[0]);\n }\n this.previousPoints = [];\n };\n return MarkerExplode;\n}(ChartData));\nexport { MarkerExplode };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { drawSymbol, PathOption, Size, markerAnimate, CircleOption, RectOption } from '../../common/utils/helper';\nimport { findlElement } from '../../common/utils/helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { pointRender } from '../../common/model/constants';\nimport { MarkerExplode } from './marker-explode';\nimport { getSaturationColor } from '../../common/utils/helper';\n/**\n * Marker module used to render the marker for line type series.\n */\nvar Marker = /** @class */ (function (_super) {\n __extends(Marker, _super);\n /**\n * Constructor for the marker module.\n * @private\n */\n function Marker(chart) {\n var _this = _super.call(this, chart) || this;\n _this.addEventListener();\n return _this;\n }\n /**\n * Render the marker for series.\n * @return {void}\n * @private\n */\n Marker.prototype.render = function (series) {\n var _this = this;\n this.createElement(series);\n var _loop_1 = function (point) {\n if (point.visible && point.symbolLocations.length) {\n point.symbolLocations.map(function (location, index) {\n _this.renderMarker(series, point, location, index);\n });\n }\n };\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n _loop_1(point);\n }\n };\n Marker.prototype.renderMarker = function (series, point, location, index) {\n var seriesIndex = series.index;\n var marker = series.marker;\n var border = {\n color: marker.border.color,\n width: marker.border.width\n };\n var borderColor = marker.border.color;\n var symbolId;\n var shapeOption;\n var isBoxPlot = series.type === 'BoxAndWhisker';\n var fill = marker.fill || (isBoxPlot ? point.interior || series.interior : '#ffffff');\n var argsData;\n var parentElement = isBoxPlot ?\n findlElement(series.seriesElement.childNodes, 'Series_' + series.index + '_Point_' + point.index)\n : series.symbolElement;\n border.color = borderColor || series.setPointColor(point, series.interior);\n symbolId = this.elementId + '_Series_' + seriesIndex + '_Point_' + point.index + '_Symbol' +\n (index ? index : '');\n argsData = {\n cancel: false, name: pointRender, series: series, point: point,\n fill: point.isEmpty ? (series.emptyPointSettings.fill || fill) : fill,\n border: {\n color: series.type === 'BoxAndWhisker' ?\n (!isNullOrUndefined(borderColor) && borderColor !== 'transparent') ? borderColor :\n getSaturationColor(fill, -0.6)\n : border.color,\n width: border.width\n },\n height: marker.height,\n width: marker.width,\n shape: marker.shape\n };\n argsData.border = series.setBorderColor(point, { width: argsData.border.width, color: argsData.border.color });\n this.chart.trigger(pointRender, argsData);\n point.color = argsData.fill;\n if (!argsData.cancel) {\n var y = void 0;\n if (series.type === 'RangeArea') {\n y = index ? point.low : point.high;\n }\n else if (isBoxPlot) {\n y = point.outliers[index];\n }\n else {\n y = point.y;\n }\n shapeOption = new PathOption(symbolId, argsData.fill, argsData.border.width, argsData.border.color, marker.opacity, null);\n if (parentElement !== undefined && parentElement !== null) {\n parentElement.appendChild(drawSymbol(location, argsData.shape, new Size(argsData.width, argsData.height), marker.imageUrl, shapeOption, point.x.toString() + ':' + y.toString()));\n }\n point.marker = {\n border: argsData.border,\n fill: argsData.fill,\n height: argsData.height,\n visible: true,\n shape: argsData.shape,\n width: argsData.width\n };\n }\n else {\n location = null;\n point.marker = {\n visible: false\n };\n }\n };\n Marker.prototype.createElement = function (series) {\n var markerClipRect;\n var marker = series.marker;\n // 8 for extend border value 5 for extend size value\n var explodeValue = marker.border.width + 8 + 5;\n var render = series.chart.renderer;\n var transform;\n transform = series.chart.chartAreaType === 'Cartesian' ? 'translate(' + series.clipRect.x + ',' + (series.clipRect.y) + ')' : '';\n if (marker.visible) {\n var markerHeight = (marker.height + explodeValue) / 2;\n var markerWidth = (marker.width + explodeValue) / 2;\n if (series.chart.chartAreaType === 'Cartesian') {\n markerClipRect = render.drawClipPath(new RectOption(this.elementId + '_ChartMarkerClipRect_' + series.index, 'transparent', { width: 1, color: 'Gray' }, 1, {\n x: -markerWidth, y: -markerHeight,\n width: series.clipRect.width + markerWidth * 2,\n height: series.clipRect.height + markerHeight * 2\n }));\n }\n else {\n markerClipRect = render.drawCircularClipPath(new CircleOption(this.elementId + '_ChartMarkerClipRect_' + series.index, 'transparent', { width: 1, color: 'Gray' }, 1, series.clipRect.width / 2 + series.clipRect.x, series.clipRect.height / 2 + series.clipRect.y, series.chart.radius + Math.max(markerHeight, markerWidth)));\n }\n series.symbolElement = render.createGroup({\n 'id': this.elementId + 'SymbolGroup' + series.index,\n 'transform': transform,\n 'clip-path': 'url(#' + this.elementId + '_ChartMarkerClipRect_' + series.index + ')'\n });\n series.symbolElement.appendChild(markerClipRect);\n }\n };\n Marker.prototype.getRangeLowPoint = function (region, series) {\n var x = region.x;\n var y = region.y;\n if (series.chart.requireInvertedAxis) {\n y += region.height / 2;\n x += series.yAxis.isInversed ? region.width : 0;\n }\n else {\n y += series.yAxis.isInversed ? 0 : region.height;\n x += region.width / 2;\n }\n return { x: x, y: y };\n };\n /**\n * Animates the marker.\n * @return {void}.\n * @private\n */\n Marker.prototype.doMarkerAnimation = function (series) {\n if (!(series.isRectSeries || series.type === 'Scatter' || series.type === 'Bubble' ||\n (series.chart.chartAreaType === 'PolarRadar' && (series.drawType === 'Scatter' || series.drawType.indexOf('Column') > -1)))) {\n var markerElements = series.symbolElement.childNodes;\n var delay = series.animation.delay + series.animation.duration;\n var j = 1;\n var incFactor = series.type === 'RangeArea' ? 2 : 1;\n for (var i = 0; i < series.points.length; i++) {\n if (!series.points[i].symbolLocations.length || !markerElements[j]) {\n continue;\n }\n markerAnimate(markerElements[j], delay, 200, series, i, series.points[i].symbolLocations[0], false);\n if (incFactor === 2) {\n var lowPoint = this.getRangeLowPoint(series.points[i].regions[0], series);\n markerAnimate(markerElements[j + 1], delay, 200, series, i, lowPoint, false);\n }\n j += incFactor;\n }\n }\n };\n return Marker;\n}(MarkerExplode));\nexport { Marker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { Font, Border } from '../model/base';\nimport { Theme } from '../model/theme';\nimport { Size, Rect, subtractThickness, Thickness, drawSymbol, measureText, ChartLocation, PathOption } from '../utils/helper';\nimport { RectOption, TextOption, textElement, stringToNumber, removeElement, showTooltip, getElement } from '../utils/helper';\n/**\n * Configures the location for the legend.\n */\nvar Location = /** @class */ (function (_super) {\n __extends(Location, _super);\n function Location() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], Location.prototype, \"x\", void 0);\n __decorate([\n Property(0)\n ], Location.prototype, \"y\", void 0);\n return Location;\n}(ChildProperty));\nexport { Location };\n/**\n * Configures the legends in charts.\n */\nvar LegendSettings = /** @class */ (function (_super) {\n __extends(LegendSettings, _super);\n function LegendSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], LegendSettings.prototype, \"visible\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"width\", void 0);\n __decorate([\n Complex({ x: 0, y: 0 }, Location)\n ], LegendSettings.prototype, \"location\", void 0);\n __decorate([\n Property('Auto')\n ], LegendSettings.prototype, \"position\", void 0);\n __decorate([\n Property(8)\n ], LegendSettings.prototype, \"padding\", void 0);\n __decorate([\n Property('Center')\n ], LegendSettings.prototype, \"alignment\", void 0);\n __decorate([\n Complex(Theme.legendLabelFont, Font)\n ], LegendSettings.prototype, \"textStyle\", void 0);\n __decorate([\n Property(10)\n ], LegendSettings.prototype, \"shapeHeight\", void 0);\n __decorate([\n Property(10)\n ], LegendSettings.prototype, \"shapeWidth\", void 0);\n __decorate([\n Complex({}, Border)\n ], LegendSettings.prototype, \"border\", void 0);\n __decorate([\n Property(5)\n ], LegendSettings.prototype, \"shapePadding\", void 0);\n __decorate([\n Property('transparent')\n ], LegendSettings.prototype, \"background\", void 0);\n __decorate([\n Property(1)\n ], LegendSettings.prototype, \"opacity\", void 0);\n __decorate([\n Property(true)\n ], LegendSettings.prototype, \"toggleVisibility\", void 0);\n __decorate([\n Property(null)\n ], LegendSettings.prototype, \"description\", void 0);\n __decorate([\n Property(3)\n ], LegendSettings.prototype, \"tabIndex\", void 0);\n return LegendSettings;\n}(ChildProperty));\nexport { LegendSettings };\n/**\n * Legend base class for Chart and Accumulation chart.\n * @private\n */\nvar BaseLegend = /** @class */ (function () {\n /**\n * Constructor for the dateTime module.\n * @private\n */\n function BaseLegend(chart) {\n this.rowCount = 0; // legend row counts per page \n this.columnCount = 0; // legend column counts per page \n this.pageButtonSize = 8;\n this.pageXCollections = []; // pages of x locations\n this.maxColumns = 0;\n this.isTrimmed = false;\n this.maxWidth = 0;\n this.currentPage = 1;\n this.chart = chart;\n this.legend = chart.legendSettings;\n this.legendID = chart.element.id + '_chart_legend';\n this.isChartControl = (chart.getModuleName() === 'chart');\n }\n /**\n * Calculate the bounds for the legends.\n * @return {void}\n * @private\n */\n BaseLegend.prototype.calculateLegendBounds = function (rect, availableSize) {\n var legend = this.legend;\n this.getPosition(legend.position, availableSize);\n this.legendBounds = new Rect(rect.x, rect.y, 0, 0);\n this.isVertical = (this.position === 'Left' || this.position === 'Right');\n if (this.isVertical) {\n this.legendBounds.height = stringToNumber(legend.height, availableSize.height - (rect.y - this.chart.margin.top)) || rect.height;\n this.legendBounds.width = stringToNumber(legend.width || '20%', availableSize.width);\n }\n else {\n this.legendBounds.width = stringToNumber(legend.width, availableSize.width) || rect.width;\n this.legendBounds.height = stringToNumber(legend.height || '20%', availableSize.height);\n }\n this.library.getLegendBounds(availableSize, this.legendBounds, legend);\n this.getLocation(this.position, legend.alignment, this.legendBounds, rect, availableSize);\n };\n /**\n * To find legend position based on available size for chart and accumulation chart\n */\n BaseLegend.prototype.getPosition = function (position, availableSize) {\n if (this.isChartControl) {\n this.position = (position !== 'Auto') ? position : 'Bottom';\n }\n else {\n if (position === 'Auto' && this.chart.visibleSeries &&\n (this.chart.visibleSeries[0].type === 'Funnel' || this.chart.visibleSeries[0].type === 'Pyramid')) {\n position = 'Top';\n }\n this.position = (position !== 'Auto') ? position :\n (availableSize.width > availableSize.height ? 'Right' : 'Bottom');\n }\n };\n /**\n * To set bounds for chart and accumulation chart\n */\n BaseLegend.prototype.setBounds = function (computedWidth, computedHeight, legend, legendBounds) {\n computedWidth = computedWidth < legendBounds.width ? computedWidth : legendBounds.width;\n computedHeight = computedHeight < legendBounds.height ? computedHeight : legendBounds.height;\n legendBounds.width = !legend.width ? computedWidth : legendBounds.width;\n legendBounds.height = !legend.height ? computedHeight : legendBounds.height;\n this.rowCount = Math.max(1, Math.ceil((legendBounds.height - legend.padding) / (this.maxItemHeight + legend.padding)));\n };\n /**\n * To find legend location based on position, alignment for chart and accumulation chart\n */\n BaseLegend.prototype.getLocation = function (position, alignment, legendBounds, rect, availableSize) {\n var padding = this.legend.border.width;\n var legendHeight = legendBounds.height + padding;\n var legendWidth = legendBounds.width + padding;\n var marginBottom = this.chart.margin.bottom;\n if (position === 'Bottom') {\n legendBounds.x = this.alignLegend(legendBounds.x, availableSize.width, legendBounds.width, alignment);\n legendBounds.y = rect.y + (rect.height - legendHeight) + padding;\n subtractThickness(rect, new Thickness(0, 0, 0, legendHeight));\n }\n else if (position === 'Top') {\n legendBounds.x = this.alignLegend(legendBounds.x, availableSize.width, legendBounds.width, alignment);\n legendBounds.y = rect.y + padding;\n subtractThickness(rect, new Thickness(0, 0, legendHeight, 0));\n }\n else if (position === 'Right') {\n legendBounds.x = rect.x + (rect.width - legendBounds.width);\n legendBounds.y = rect.y + this.alignLegend(0, availableSize.height - (rect.y + marginBottom), legendBounds.height, alignment);\n subtractThickness(rect, new Thickness(0, legendWidth, 0, 0));\n }\n else if (position === 'Left') {\n legendBounds.y = rect.y + this.alignLegend(0, availableSize.height - (rect.y + marginBottom), legendBounds.height, alignment);\n subtractThickness(rect, new Thickness(legendWidth, 0, 0, 0));\n }\n else {\n legendBounds.x = this.legend.location.x;\n legendBounds.y = this.legend.location.y;\n subtractThickness(rect, new Thickness(0, 0, 0, 0));\n }\n };\n /**\n * To find legend alignment for chart and accumulation chart\n */\n BaseLegend.prototype.alignLegend = function (start, size, legendSize, alignment) {\n switch (alignment) {\n case 'Far':\n start = (size - legendSize) - start;\n break;\n case 'Center':\n start = ((size - legendSize) / 2);\n break;\n }\n return start;\n };\n /**\n * Renders the legend.\n * @return {void}\n * @private\n */\n BaseLegend.prototype.renderLegend = function (chart, legend, legendBounds) {\n var firstLegend = this.findFirstLegendPosition(this.legendCollections);\n var padding = legend.padding;\n this.maxItemHeight = Math.max(this.legendCollections[0].textSize.height, legend.shapeHeight);\n var legendGroup = chart.renderer.createGroup({ id: this.legendID + '_g' });\n var legendTranslateGroup = this.createLegendElements(chart, legendBounds, legendGroup, legend, this.legendID);\n if (firstLegend !== this.legendCollections.length) {\n var legendSeriesGroup = void 0; // legendItem group for each series group element\n var start = void 0; // starting shape center x,y position && to resolve lint error used new line for declaration\n start = new ChartLocation(legendBounds.x + padding + (legend.shapeWidth / 2), legendBounds.y + padding + this.maxItemHeight / 2);\n var textOptions = new TextOption('', start.x, start.y, 'start');\n // initialization for totalPages legend click totalpage again calculate\n this.totalPages = this.isChartControl ? this.totalPages : 0;\n var textPadding = legend.shapePadding + padding + legend.shapeWidth;\n var count = 0;\n this.pageXCollections = [];\n this.legendCollections[firstLegend].location = start;\n var previousLegend = this.legendCollections[firstLegend];\n for (var _i = 0, _a = this.legendCollections; _i < _a.length; _i++) {\n var legendOption = _a[_i];\n if (legendOption.render && legendOption.text !== '') {\n legendSeriesGroup = chart.renderer.createGroup({\n id: this.legendID + this.generateId(legendOption, '_g_', count)\n });\n legendSeriesGroup.setAttribute('tabindex', legend.tabIndex.toString());\n legendSeriesGroup.setAttribute('aria-label', legend.description || 'Click to show or hide the ' + legendOption.text + ' series');\n this.library.getRenderPoint(legendOption, start, textPadding, previousLegend, legendBounds, count, firstLegend);\n this.renderSymbol(legendOption, legendSeriesGroup, count);\n this.renderText(chart, legendOption, legendSeriesGroup, textOptions, count);\n legendSeriesGroup.setAttribute('style', 'cursor: ' + ((!legend.toggleVisibility && chart.selectionMode === 'None') ? 'auto' : 'pointer'));\n legendTranslateGroup.appendChild(legendSeriesGroup);\n previousLegend = legendOption;\n }\n count++;\n }\n if (this.isPaging) {\n this.renderPagingElements(chart, legendBounds, textOptions, legendGroup);\n }\n }\n chart.svgObject.appendChild(legendGroup);\n };\n /**\n * To find first valid legend text index for chart and accumulation chart\n */\n BaseLegend.prototype.findFirstLegendPosition = function (legendCollection) {\n var count = 0;\n for (var _i = 0, legendCollection_1 = legendCollection; _i < legendCollection_1.length; _i++) {\n var legend = legendCollection_1[_i];\n if (legend.render && legend.text !== '') {\n break;\n }\n count++;\n }\n return count;\n };\n /**\n * To create legend rendering elements for chart and accumulation chart\n */\n BaseLegend.prototype.createLegendElements = function (chart, legendBounds, legendGroup, legend, id) {\n var padding = legend.padding;\n var options = new RectOption(id + '_element', legend.background, legend.border, legend.opacity, legendBounds);\n legendGroup.appendChild(chart.renderer.drawRectangle(options));\n var legendItemsGroup = chart.renderer.createGroup({ id: id + '_collections' });\n legendGroup.appendChild(legendItemsGroup);\n this.legendTranslateGroup = chart.renderer.createGroup({ id: id + '_translate_g' });\n legendItemsGroup.appendChild(this.legendTranslateGroup);\n var clippath = chart.renderer.createClipPath({ id: id + '_clipPath' });\n options.y += padding;\n options.id += '_clipPath_rect';\n options.width = (!this.isChartControl && this.isVertical) ? this.maxWidth - padding : legendBounds.width;\n this.clipRect = chart.renderer.drawRectangle(options);\n clippath.appendChild(this.clipRect);\n chart.svgObject.appendChild(clippath);\n legendItemsGroup.setAttribute('style', 'clip-path:url(#' + clippath.id + ')');\n return this.legendTranslateGroup;\n };\n /**\n * To render legend symbols for chart and accumulation chart\n */\n BaseLegend.prototype.renderSymbol = function (legendOption, group, i) {\n var symbolColor = legendOption.visible ? legendOption.fill : '#D3D3D3';\n var shape = (legendOption.shape === 'SeriesType') ? legendOption.type : legendOption.shape;\n shape = shape === 'Scatter' ? legendOption.markerShape : shape;\n var symbolOption = new PathOption(this.legendID + this.generateId(legendOption, '_shape_', i), symbolColor, 1, symbolColor, 1, '', '');\n group.appendChild(drawSymbol(legendOption.location, shape, new Size(this.legend.shapeWidth, this.legend.shapeHeight), '', symbolOption, 'Click to show or hide the ' + legendOption.text + ' series'));\n if (shape === 'Line' && legendOption.markerVisibility && legendOption.markerShape !== 'Image' ||\n legendOption.type === 'Doughnut') {\n symbolOption.id = this.legendID + this.generateId(legendOption, '_shape_marker_', i);\n shape = legendOption.type === 'Doughnut' ? 'Circle' : legendOption.markerShape;\n symbolOption.fill = legendOption.type === 'Doughnut' ? '#FFFFFF' : symbolOption.fill;\n group.appendChild(drawSymbol(legendOption.location, shape, new Size(this.legend.shapeWidth / 2, this.legend.shapeHeight / 2), '', symbolOption, 'Click to show or hide the ' + legendOption.text + ' series'));\n }\n };\n /**\n * To render legend text for chart and accumulation chart\n */\n BaseLegend.prototype.renderText = function (chart, legendOption, group, textOptions, i) {\n var legend = chart.legendSettings;\n var hiddenColor = '#D3D3D3';\n textOptions.id = this.legendID + this.generateId(legendOption, '_text_', i);\n var fontcolor = legendOption.visible ? legend.textStyle.color || chart.themeStyle.legendLabel : hiddenColor;\n textOptions.text = legendOption.text;\n textOptions.x = legendOption.location.x + (legend.shapeWidth / 2) + legend.shapePadding;\n textOptions.y = legendOption.location.y + this.maxItemHeight / 4;\n var element = textElement(textOptions, legend.textStyle, fontcolor, group);\n element.setAttribute('aria-label', legend.description || 'Click to show or hide the ' + legendOption.text + ' series');\n };\n /**\n * To render legend paging elements for chart and accumulation chart\n */\n BaseLegend.prototype.renderPagingElements = function (chart, bounds, textOption, legendGroup) {\n var paginggroup = chart.renderer.createGroup({ id: this.legendID + '_navigation' });\n legendGroup.appendChild(paginggroup);\n var grayColor = '#545454';\n var legend = chart.legendSettings; // to solve parameter lint error, legend declaration is here\n var padding = 8; // const padding for paging elements\n if (this.isChartControl || !this.isVertical) {\n this.totalPages = Math.ceil(this.totalPages / Math.max(1, this.rowCount - 1));\n }\n else {\n this.totalPages = Math.ceil(this.totalPages / this.maxColumns);\n }\n var symbolOption = new PathOption(this.legendID + '_pageup', 'transparent', 5, grayColor, 1, '', '');\n var iconSize = this.pageButtonSize;\n paginggroup.setAttribute('style', 'cursor: pointer');\n // Page left arrow drawing calculation started here\n this.clipPathHeight = (this.rowCount - 1) * (this.maxItemHeight + legend.padding);\n this.clipRect.setAttribute('height', this.clipPathHeight.toString());\n var x = bounds.x + iconSize / 2;\n var y = bounds.y + this.clipPathHeight + ((bounds.height - this.clipPathHeight) / 2);\n paginggroup.appendChild(drawSymbol({ x: x, y: y }, 'LeftArrow', new Size(iconSize, iconSize), '', symbolOption, 'LeftArrow'));\n // Page numbering rendering calculation started here\n textOption.x = x + (iconSize / 2) + padding;\n var size = measureText(this.totalPages + '/' + this.totalPages, legend.textStyle);\n textOption.y = y + (size.height / 4);\n textOption.id = this.legendID + '_pagenumber';\n textOption.text = '1/' + this.totalPages;\n var pageTextElement = textElement(textOption, legend.textStyle, legend.textStyle.color, paginggroup);\n // Page right arrow rendering calculation started here\n x = (textOption.x + padding + (iconSize / 2) + size.width);\n symbolOption.id = this.legendID + '_pagedown';\n paginggroup.appendChild(drawSymbol({ x: x, y: y }, 'RightArrow', new Size(iconSize, iconSize), '', symbolOption, 'RightArrow'));\n // placing the navigation buttons and page numbering in legend right corner\n paginggroup.setAttribute('transform', 'translate(' + (bounds.width - (2 * (iconSize + padding) +\n padding + size.width)) + ', ' + 0 + ')');\n this.translatePage(pageTextElement, this.currentPage - 1, this.currentPage);\n };\n /**\n * To translate legend pages for chart and accumulation chart\n */\n BaseLegend.prototype.translatePage = function (pagingText, page, pageNumber) {\n var size = (this.clipPathHeight) * page;\n var translate = 'translate(0,-' + size + ')';\n if (!this.isChartControl && this.isVertical) {\n var pageLength = page * this.maxColumns;\n size = this.pageXCollections[page * this.maxColumns] - this.legendBounds.x;\n size = size < 0 ? 0 : size; // to avoid small pixel variation\n translate = 'translate(-' + size + ',0)';\n }\n this.legendTranslateGroup.setAttribute('transform', translate);\n pagingText.textContent = (pageNumber) + '/' + this.totalPages;\n this.currentPage = pageNumber;\n };\n /**\n * To change legend pages for chart and accumulation chart\n */\n BaseLegend.prototype.changePage = function (event, pageUp) {\n var pageText = document.getElementById(this.legendID + '_pagenumber');\n var page = parseInt(pageText.textContent.split('/')[0], 10);\n if (pageUp && page > 1) {\n this.translatePage(pageText, (page - 2), (page - 1));\n }\n else if (!pageUp && page < this.totalPages) {\n this.translatePage(pageText, page, (page + 1));\n }\n };\n /**\n * To find legend elements id based on chart or accumulation chart\n * @private\n */\n BaseLegend.prototype.generateId = function (option, prefix, count) {\n if (this.isChartControl) {\n return prefix + count;\n }\n else {\n return prefix + option.pointIndex;\n }\n };\n /**\n * To show or hide trimmed text tooltip for legend.\n * @return {void}\n * @private\n */\n BaseLegend.prototype.move = function (event) {\n var _this = this;\n var x = this.chart.mouseX;\n var y = this.chart.mouseY;\n if (event.target.textContent.indexOf('...') > -1) {\n var targetId = event.target.id.split(this.legendID + '_text_');\n if (targetId.length === 2) {\n var index = parseInt(targetId[1], 10);\n var element = this.chart.element;\n if (!isNaN(index)) {\n if (this.chart.isTouch) {\n removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');\n }\n if (this.isChartControl) {\n showTooltip(this.chart.series[index].name, x, y, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip', getElement(this.chart.element.id + '_Secondary_Element'));\n }\n else {\n showTooltip(this.chart.visibleSeries[0].points[index].x.toString(), x + 10, y + 10, element.offsetWidth, element.id + '_EJ2_Legend_Tooltip', getElement(this.chart.element.id + '_Secondary_Element'));\n }\n }\n }\n }\n else {\n removeElement(this.chart.element.id + '_EJ2_Legend_Tooltip');\n }\n if (this.chart.isTouch) {\n clearTimeout(this.clearTooltip);\n this.clearTooltip = setTimeout(function () { removeElement(_this.chart.element.id + '_EJ2_Legend_Tooltip'); }, 1000);\n }\n };\n return BaseLegend;\n}());\nexport { BaseLegend };\n/**\n * Class for legend options\n * @private\n */\nvar LegendOptions = /** @class */ (function () {\n function LegendOptions(text, fill, shape, visible, type, markerShape, markerVisibility, pointIndex, seriesIndex) {\n this.location = { x: 0, y: 0 };\n this.text = text;\n this.fill = fill;\n this.shape = shape;\n this.visible = visible;\n this.type = type;\n this.markerVisibility = markerVisibility;\n this.markerShape = markerShape;\n this.pointIndex = pointIndex;\n this.seriesIndex = seriesIndex;\n }\n return LegendOptions;\n}());\nexport { LegendOptions };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/// \nimport { Property, Complex } from '@syncfusion/ej2-base';\nimport { Connector } from '../../common/model/base';\nimport { SeriesBase } from '../series/chart-series';\nimport { Rect, firstToLowerCase } from '../../common/utils/helper';\n/**\n * Defines how to represent the market trend using technical indicators\n */\nvar TechnicalIndicator = /** @class */ (function (_super) {\n __extends(TechnicalIndicator, _super);\n function TechnicalIndicator() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.clipRect = new Rect(0, 0, 0, 0);\n return _this;\n }\n /** @private */\n TechnicalIndicator.prototype.setDataSource = function (series, chart) {\n if (series) {\n this.xData = series.xData;\n this.yData = series.yData;\n this.points = series.points;\n }\n var type = firstToLowerCase(this.type);\n chart[type + 'IndicatorModule'].initDataSource(this, chart);\n chart.visibleSeriesCount += this.targetSeries.length;\n };\n __decorate([\n Property('Sma')\n ], TechnicalIndicator.prototype, \"type\", void 0);\n __decorate([\n Property(14)\n ], TechnicalIndicator.prototype, \"period\", void 0);\n __decorate([\n Property(14)\n ], TechnicalIndicator.prototype, \"kPeriod\", void 0);\n __decorate([\n Property(3)\n ], TechnicalIndicator.prototype, \"dPeriod\", void 0);\n __decorate([\n Property(80)\n ], TechnicalIndicator.prototype, \"overBought\", void 0);\n __decorate([\n Property(20)\n ], TechnicalIndicator.prototype, \"overSold\", void 0);\n __decorate([\n Property(2)\n ], TechnicalIndicator.prototype, \"standardDeviation\", void 0);\n __decorate([\n Property('Close')\n ], TechnicalIndicator.prototype, \"field\", void 0);\n __decorate([\n Property(12)\n ], TechnicalIndicator.prototype, \"slowPeriod\", void 0);\n __decorate([\n Property(26)\n ], TechnicalIndicator.prototype, \"fastPeriod\", void 0);\n __decorate([\n Property(true)\n ], TechnicalIndicator.prototype, \"showZones\", void 0);\n __decorate([\n Complex({ color: '#ff9933', width: 2 }, Connector)\n ], TechnicalIndicator.prototype, \"macdLine\", void 0);\n __decorate([\n Property('Both')\n ], TechnicalIndicator.prototype, \"macdType\", void 0);\n __decorate([\n Property('#2ecd71')\n ], TechnicalIndicator.prototype, \"macdPositiveColor\", void 0);\n __decorate([\n Property('#e74c3d')\n ], TechnicalIndicator.prototype, \"macdNegativeColor\", void 0);\n __decorate([\n Property('rgba(211,211,211,0.25)')\n ], TechnicalIndicator.prototype, \"bandColor\", void 0);\n __decorate([\n Complex({ color: '#ffb735', width: 1 }, Connector)\n ], TechnicalIndicator.prototype, \"upperLine\", void 0);\n __decorate([\n Complex({ color: '#f2ec2f', width: 1 }, Connector)\n ], TechnicalIndicator.prototype, \"lowerLine\", void 0);\n __decorate([\n Complex({ color: '#f2ec2f', width: 1 }, Connector)\n ], TechnicalIndicator.prototype, \"periodLine\", void 0);\n __decorate([\n Property('')\n ], TechnicalIndicator.prototype, \"seriesName\", void 0);\n return TechnicalIndicator;\n}(SeriesBase));\nexport { TechnicalIndicator };\n","import { print as printWindow, createElement, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';\nimport { getElement } from '../utils/helper';\nimport { beforePrint } from '../model/constants';\nimport { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';\n/**\n * Annotation Module handles the Annotation for chart and accumulation series.\n */\nvar ExportUtils = /** @class */ (function () {\n /**\n * Constructor for chart and accumulation annotation\n * @param control\n */\n function ExportUtils(control) {\n this.control = control;\n }\n /**\n * To print the accumulation and chart elements\n * @param elements\n */\n ExportUtils.prototype.print = function (elements) {\n this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');\n this.printWindow.moveTo(0, 0);\n this.printWindow.resizeTo(screen.availWidth, screen.availHeight);\n var argsData = {\n cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint\n };\n this.control.trigger(beforePrint, argsData);\n if (!argsData.cancel) {\n printWindow(argsData.htmlContent, this.printWindow);\n }\n };\n /**\n * To get the html string of the chart and accumulation\n * @param elements\n * @private\n */\n ExportUtils.prototype.getHTMLContent = function (elements) {\n var div = createElement('div');\n if (elements) {\n if (elements instanceof Array) {\n elements.forEach(function (value) {\n div.appendChild(getElement(value).cloneNode(true));\n });\n }\n else if (elements instanceof Element) {\n div.appendChild(elements.cloneNode(true));\n }\n else {\n div.appendChild(getElement(elements).cloneNode(true));\n }\n }\n else {\n div.appendChild(this.control.element.cloneNode(true));\n }\n return div;\n };\n /**\n * To export the file as image/svg format\n * @param type\n * @param fileName\n */\n ExportUtils.prototype.export = function (type, fileName, orientation) {\n var _this = this;\n var element = createElement('canvas', {\n id: 'ej2-canvas',\n attrs: {\n 'width': this.control.availableSize.width.toString(),\n 'height': this.control.availableSize.height.toString()\n }\n });\n var isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);\n orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;\n var svgData = '' +\n this.control.svgObject.outerHTML +\n ' ';\n var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :\n [(new XMLSerializer()).serializeToString(this.control.svgObject)], { type: 'image/svg+xml' }));\n if (type === 'SVG') {\n this.triggerDownload(fileName, type, url, isDownload);\n }\n else {\n var image_1 = new Image();\n var ctx_1 = element.getContext('2d');\n image_1.onload = (function () {\n ctx_1.drawImage(image_1, 0, 0);\n window.URL.revokeObjectURL(url);\n if (type === 'PDF') {\n var document_1 = new PdfDocument();\n var imageString = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');\n document_1.pageSettings.orientation = orientation;\n imageString = imageString.slice(imageString.indexOf(',') + 1);\n document_1.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, _this.control.availableSize.width, _this.control.availableSize.height);\n if (isDownload) {\n document_1.save(fileName + '.pdf');\n document_1.destroy();\n }\n }\n else {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveOrOpenBlob(element.msToBlob(), fileName + '.' + type.toLocaleLowerCase());\n }\n else {\n _this.triggerDownload(fileName, type, element.toDataURL('image/png').replace('image/png', 'image/octet-stream'), isDownload);\n }\n }\n });\n image_1.src = url;\n }\n };\n /**\n * To trigger the download element\n * @param fileName\n * @param type\n * @param url\n */\n ExportUtils.prototype.triggerDownload = function (fileName, type, url, isDownload) {\n createElement('a', {\n attrs: {\n 'download': fileName + '.' + type.toLocaleLowerCase(),\n 'href': url\n }\n }).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {\n view: window,\n bubbles: false,\n cancelable: true\n }));\n };\n return ExportUtils;\n}());\nexport { ExportUtils };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, NotifyPropertyChanges, Internationalization } from '@syncfusion/ej2-base';\nimport { L10n, createElement } from '@syncfusion/ej2-base';\nimport { ChildProperty } from '@syncfusion/ej2-base';\nimport { remove, extend } from '@syncfusion/ej2-base';\nimport { Browser, Touch } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, Complex, Collection } from '@syncfusion/ej2-base';\nimport { findClipRect, measureText, TextOption, showTooltip, removeElement } from '../common/utils/helper';\nimport { textElement, RectOption, createSvg, firstToLowerCase, titlePositionX } from '../common/utils/helper';\nimport { getSeriesColor, Theme, getThemeColor } from '../common/model/theme';\nimport { Margin, Border, ChartArea, Font, Indexes, TooltipSettings } from '../common/model/base';\nimport { Row, Column, Axis } from './axis/axis';\nimport { CartesianAxisLayoutPanel } from './axis/cartesian-panel';\nimport { Rect } from '../common/utils/helper';\nimport { ChartData } from './utils/get-data';\nimport { Series } from './series/chart-series';\nimport { Data } from '../common/model/data';\nimport { Marker } from './series/marker';\nimport { LegendSettings } from '../common/legend/legend';\nimport { TechnicalIndicator } from './technical-indicators/technical-indicator';\nimport { chartMouseClick, pointClick, pointMove, chartMouseLeave } from '../common/model/constants';\nimport { chartMouseDown, chartMouseMove, chartMouseUp, load } from '../common/model/constants';\nimport { ExportUtils } from '../common/utils/export';\nimport { ChartAnnotationSettings } from './model/chart-base';\nimport { getElement, getTitle } from '../common/utils/helper';\n/**\n * Configures the crosshair in the chart.\n */\nvar CrosshairSettings = /** @class */ (function (_super) {\n __extends(CrosshairSettings, _super);\n function CrosshairSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], CrosshairSettings.prototype, \"enable\", void 0);\n __decorate([\n Complex({ color: null, width: 1 }, Border)\n ], CrosshairSettings.prototype, \"line\", void 0);\n __decorate([\n Property('Both')\n ], CrosshairSettings.prototype, \"lineType\", void 0);\n return CrosshairSettings;\n}(ChildProperty));\nexport { CrosshairSettings };\n/**\n * Configures the zooming behavior for the chart.\n */\nvar ZoomSettings = /** @class */ (function (_super) {\n __extends(ZoomSettings, _super);\n function ZoomSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], ZoomSettings.prototype, \"enableSelectionZooming\", void 0);\n __decorate([\n Property(false)\n ], ZoomSettings.prototype, \"enablePinchZooming\", void 0);\n __decorate([\n Property(false)\n ], ZoomSettings.prototype, \"enableMouseWheelZooming\", void 0);\n __decorate([\n Property(true)\n ], ZoomSettings.prototype, \"enableDeferredZooming\", void 0);\n __decorate([\n Property('XY')\n ], ZoomSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'])\n ], ZoomSettings.prototype, \"toolbarItems\", void 0);\n __decorate([\n Property(false)\n ], ZoomSettings.prototype, \"enablePan\", void 0);\n return ZoomSettings;\n}(ChildProperty));\nexport { ZoomSettings };\n/**\n * Represents the Chart control.\n * ```html\n * \n * \n * ```\n */\nvar Chart = /** @class */ (function (_super) {\n __extends(Chart, _super);\n /**\n * Constructor for creating the widget\n * @hidden\n */\n function Chart(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private */\n _this.chartAreaType = 'Cartesian';\n return _this;\n }\n /**\n * Initialize the event handler.\n */\n Chart.prototype.preRender = function () {\n this.unWireEvents();\n this.initPrivateVariable();\n this.setCulture();\n this.wireEvents();\n };\n Chart.prototype.initPrivateVariable = function () {\n this.animateSeries = true;\n this.delayRedraw = false;\n this.horizontalAxes = [];\n this.verticalAxes = [];\n this.refreshAxis();\n this.refreshDefinition(this.rows);\n this.refreshDefinition(this.columns);\n if (this.tooltipModule) {\n this.tooltipModule.previousPoints = [];\n }\n };\n /**\n * To Initialize the control rendering.\n */\n Chart.prototype.render = function () {\n this.trigger(load, { chart: this });\n this.createChartSvg();\n this.setTheme();\n this.markerRender = new Marker(this);\n this.calculateAreaType();\n this.calculateVisibleSeries();\n this.initTechnicalIndicators();\n this.initTrendLines();\n this.calculateVisibleAxis();\n this.processData();\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n Chart.prototype.getLocalizedLabel = function (key) {\n return this.localeObject.getConstant(key);\n };\n /**\n * Refresh the chart bounds.\n * @private\n */\n Chart.prototype.refreshBound = function () {\n if (this.legendModule && this.legendSettings.visible) {\n this.legendModule.getLegendOptions(this.visibleSeries, this);\n }\n var isCalculateStacking = false;\n var series;\n for (var i = 0, len = this.visibleSeries.length; i < len; i++) {\n series = this.visibleSeries[i];\n series.position = series.rectCount = undefined;\n if (((series.type.indexOf('Stacking') !== -1) || (series.drawType.indexOf('Stacking') !== -1\n && this.chartAreaType === 'PolarRadar')) && !isCalculateStacking) {\n series.calculateStackedValue(series.type.indexOf('100') > -1, this);\n isCalculateStacking = true;\n }\n }\n this.calculateBounds();\n this.renderElements();\n };\n Chart.prototype.renderElements = function () {\n this.renderBorder();\n this.renderTitle();\n this.renderAreaBorder();\n var axisElement = this.renderAxes();\n this.renderSeriesElements(axisElement);\n this.renderLegend();\n this.applyZoomkit();\n this.performSelection();\n this.setSecondaryElementPosition();\n this.renderAnnotation();\n };\n /**\n * To render the legend\n */\n Chart.prototype.renderAxes = function () {\n this.yAxisElements = this.renderer.createGroup({ id: this.element.id + 'yAxisCollection' });\n var axisElement;\n if (this.rows.length > 0 && this.columns.length > 0) {\n axisElement = this.chartAxisLayoutPanel.renderAxes();\n }\n if (this.stripLineModule) {\n this.stripLineModule.renderStripLine(this, 'Behind', this.axisCollections);\n }\n return axisElement;\n };\n /**\n * To render the legend\n */\n Chart.prototype.renderLegend = function () {\n if (this.legendModule && this.legendModule.legendCollections.length) {\n this.legendModule.renderLegend(this, this.legendSettings, this.legendModule.legendBounds);\n }\n this.element.appendChild(this.svgObject);\n };\n /**\n * To set the left and top position for data label template for center aligned chart\n */\n Chart.prototype.setSecondaryElementPosition = function () {\n var element = getElement(this.element.id + '_Secondary_Element');\n if (!element) {\n return;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n element.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';\n element.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';\n };\n Chart.prototype.initializeModuleElements = function () {\n this.dataLabelCollections = [];\n this.seriesElements = this.renderer.createGroup({ id: this.element.id + 'SeriesCollection' });\n if (this.indicators.length) {\n this.indicatorElements = this.renderer.createGroup({ id: this.element.id + 'IndicatorCollection' });\n }\n if (this.hasTrendlines()) {\n this.trendLineElements = this.renderer.createGroup({ id: this.element.id + 'TrendLineCollection' });\n }\n this.dataLabelElements = this.renderer.createGroup({ id: this.element.id + 'DataLabelCollection' });\n };\n Chart.prototype.hasTrendlines = function () {\n var isTrendline;\n for (var _i = 0, _a = this.series; _i < _a.length; _i++) {\n var series = _a[_i];\n isTrendline = series.trendlines.length ? true : false;\n if (isTrendline) {\n break;\n }\n }\n return isTrendline;\n };\n Chart.prototype.renderSeriesElements = function (axisElement) {\n // Initialize the series elements values\n this.initializeModuleElements();\n var tooltipDiv = document.createElement('div');\n tooltipDiv.id = this.element.id + '_Secondary_Element';\n tooltipDiv.setAttribute('style', 'position: relative');\n this.element.appendChild(tooltipDiv);\n // For userInteraction\n if (this.tooltip.enable) {\n this.svgObject.appendChild(this.renderer.createGroup({ id: this.element.id + '_UserInteraction', style: 'pointer-events:none;' }));\n }\n if (this.rows.length > 0 && this.columns.length > 0) {\n this.initializeIndicator();\n this.initializeTrendLine();\n this.renderSeries();\n this.appendElementsAfterSeries(axisElement);\n }\n };\n Chart.prototype.renderSeries = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var item = _a[_i];\n if (item.visible) {\n findClipRect(item);\n item.renderSeries(this, item.index);\n }\n }\n var clipRect = this.renderer.drawClipPath({\n 'id': this.element.id + '_ChartAreaClipRect_',\n 'x': this.chartAxisLayoutPanel.seriesClipRect.x,\n 'y': this.chartAxisLayoutPanel.seriesClipRect.y,\n 'width': this.chartAxisLayoutPanel.seriesClipRect.width,\n 'height': this.chartAxisLayoutPanel.seriesClipRect.height,\n 'fill': 'transparent',\n 'stroke-width': 1,\n 'stroke': 'Gray'\n });\n this.seriesElements.appendChild(clipRect);\n this.svgObject.appendChild(this.seriesElements);\n };\n Chart.prototype.initializeIndicator = function () {\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n if (this[firstToLowerCase(indicator.type) + 'IndicatorModule']) {\n this[firstToLowerCase(indicator.type) + 'IndicatorModule'].createIndicatorElements(this, indicator, indicator.index);\n }\n }\n if (this.indicatorElements) {\n this.svgObject.appendChild(this.indicatorElements);\n }\n };\n Chart.prototype.initializeTrendLine = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.trendlines.length) {\n this.trendLineModule.getTrendLineElements(series, this);\n }\n }\n if (this.trendLineElements) {\n this.svgObject.appendChild(this.trendLineElements);\n }\n };\n Chart.prototype.appendElementsAfterSeries = function (axisElement) {\n if (this.chartAreaType === 'PolarRadar') {\n this.svgObject.appendChild(this.yAxisElements);\n }\n this.svgObject.appendChild(axisElement);\n if (this.stripLineModule) {\n this.stripLineModule.renderStripLine(this, 'Over', this.axisCollections);\n }\n if (!this.tooltip.enable) {\n this.svgObject.appendChild(this.renderer.createGroup({ id: this.element.id + '_UserInteraction', style: 'pointer-events:none;' }));\n }\n };\n Chart.prototype.applyZoomkit = function () {\n if (this.zoomModule && this.zoomModule.isZoomed && (!this.zoomSettings.enablePan || this.zoomModule.performedUI)) {\n this.zoomModule.applyZoomToolkit(this, this.axisCollections);\n }\n };\n Chart.prototype.renderAnnotation = function () {\n if (this.annotationModule) {\n this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));\n }\n };\n Chart.prototype.performSelection = function () {\n var selectedDataIndexes = [];\n if (this.selectionModule) {\n selectedDataIndexes = extend([], this.selectionModule.selectedDataIndexes, null, true);\n this.selectionModule.invokeSelection(this);\n }\n if (selectedDataIndexes.length > 0) {\n this.selectionModule.selectedDataIndexes = selectedDataIndexes;\n this.selectionModule.redrawSelection(this, this.selectionMode);\n }\n };\n Chart.prototype.processData = function () {\n var series;\n this.visibleSeriesCount = 0;\n var check = true;\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series_1 = _a[_i];\n if (!series_1.visible && !this.legendSettings.visible) {\n this.visibleSeriesCount++;\n continue;\n }\n if (series_1.category !== 'Indicator' && series_1.category !== 'TrendLine') {\n this.initializeDataModule(series_1);\n }\n }\n for (var _b = 0, _c = this.indicators; _b < _c.length; _b++) {\n var indicator = _c[_b];\n if (indicator.dataSource) {\n var techIndicator = indicator;\n this.initializeDataModule(techIndicator);\n check = false;\n }\n }\n if (!this.visibleSeries.length || this.visibleSeriesCount === this.visibleSeries.length && check) {\n this.refreshBound();\n this.trigger('loaded', { chart: this });\n }\n };\n Chart.prototype.initializeDataModule = function (series) {\n series.xData = [];\n series.yData = [];\n series.dataModule = new Data(series.dataSource, series.query);\n series.points = [];\n series.refreshDataManager(this);\n };\n Chart.prototype.calculateBounds = function () {\n var margin = this.margin;\n // Title Height;\n var titleHeight = 0;\n var padding = 15;\n var left = margin.left;\n var width = this.availableSize.width - left - margin.right - this.border.width;\n this.titleCollection = [];\n if (this.title) {\n this.titleCollection = getTitle(this.title, this.titleStyle, width);\n titleHeight = (measureText(this.title, this.titleStyle).height * this.titleCollection.length) + padding;\n }\n var top = margin.top + titleHeight + this.chartArea.border.width / 2;\n var height = this.availableSize.height - top - this.border.width - margin.bottom;\n this.initialClipRect = new Rect(left, top, width, height);\n if (this.legendModule) {\n this.legendModule.calculateLegendBounds(this.initialClipRect, this.availableSize);\n }\n this.chartAxisLayoutPanel.measureAxis(this.initialClipRect);\n };\n /**\n * Handles the print method for chart control.\n */\n Chart.prototype.print = function (id) {\n var exportChart = new ExportUtils(this);\n exportChart.print(id);\n };\n /**\n * Handles the export method for chart control.\n * @param type\n * @param fileName\n */\n Chart.prototype.export = function (type, fileName, orientation) {\n var exportChart = new ExportUtils(this);\n exportChart.export(type, fileName, orientation);\n };\n /**\n * Defines the trendline initialization\n */\n Chart.prototype.initTrendLines = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n var trendIndex = 0;\n for (var _b = 0, _c = series.trendlines; _b < _c.length; _b++) {\n var trendline = _c[_b];\n var trendLine = trendline;\n var type = firstToLowerCase(trendLine.type);\n if (this.trendLineModule) {\n trendLine.index = trendIndex;\n trendLine.sourceIndex = series.index;\n this.trendLineModule.initSeriesCollection(trendLine, this);\n if (trendLine.targetSeries) {\n trendLine.targetSeries.xAxisName = series.xAxisName;\n trendLine.targetSeries.yAxisName = series.yAxisName;\n this.visibleSeries.push(trendLine.targetSeries);\n }\n }\n trendIndex++;\n }\n }\n };\n Chart.prototype.calculateAreaType = function () {\n var series = this.series[0];\n if (series) {\n this.requireInvertedAxis = ((series.type.indexOf('Bar') !== -1) && !this.isTransposed) ||\n ((series.type.indexOf('Bar') === -1) && this.isTransposed && this.chartAreaType !== 'PolarRadar');\n }\n this.chartAxisLayoutPanel = this.chartAreaType === 'PolarRadar' ? (this.polarSeriesModule || this.radarSeriesModule)\n : new CartesianAxisLayoutPanel(this);\n };\n Chart.prototype.calculateVisibleAxis = function () {\n var axis;\n var series;\n var axes = [this.primaryXAxis, this.primaryYAxis];\n axes = this.chartAreaType === 'Cartesian' ? axes.concat(this.axes) : axes;\n this.axisCollections = [];\n if (this.zoomModule) {\n this.zoomModule.isPanning = this.zoomModule.isAxisZoomed(axes) && this.zoomSettings.enablePan;\n this.svgObject.setAttribute('cursor', this.zoomModule.isPanning ? 'pointer' : 'auto');\n }\n for (var i = 0, len = axes.length; i < len; i++) {\n axis = axes[i];\n axis.series = [];\n axis.labels = [];\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series_2 = _a[_i];\n this.initAxis(series_2, axis, true);\n }\n for (var _b = 0, _c = this.indicators; _b < _c.length; _b++) {\n var indicator = _c[_b];\n this.initAxis(indicator, axis, false);\n }\n if (axis.orientation != null) {\n this.axisCollections.push(axis);\n }\n }\n if (this.rows.length > 0 && this.columns.length > 0) {\n this.chartAxisLayoutPanel.measure();\n }\n };\n Chart.prototype.initAxis = function (series, axis, isSeries) {\n if (series.xAxisName === axis.name || (series.xAxisName == null && axis.name === 'primaryXAxis')) {\n axis.orientation = this.requireInvertedAxis ? 'Vertical' : 'Horizontal';\n series.xAxis = axis;\n if (isSeries) {\n axis.series.push(series);\n }\n }\n else if (series.yAxisName === axis.name || (series.yAxisName == null && axis.name === 'primaryYAxis')) {\n axis.orientation = this.requireInvertedAxis ? 'Horizontal' : 'Vertical';\n series.yAxis = axis;\n if (isSeries) {\n axis.series.push(series);\n }\n }\n };\n Chart.prototype.initTechnicalIndicators = function () {\n var i = 0;\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n var techIndicator = indicator;\n var type = firstToLowerCase(techIndicator.type);\n if (this[type + 'IndicatorModule']) {\n techIndicator.index = i;\n this[type + 'IndicatorModule'].initSeriesCollection(techIndicator, this);\n for (var _b = 0, _c = techIndicator.targetSeries; _b < _c.length; _b++) {\n var targetSeries = _c[_b];\n if (indicator.seriesName || indicator.dataSource) {\n this.visibleSeries.push(targetSeries);\n }\n }\n }\n i++;\n }\n };\n /** @private */\n Chart.prototype.refreshTechnicalIndicator = function (series) {\n if (this.indicators.length) {\n var targetIndicator = null;\n if (series instanceof Series && series.category !== 'Indicator') {\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n if (indicator.seriesName === series.name && !indicator.dataSource) {\n targetIndicator = indicator;\n targetIndicator.setDataSource(series, this);\n }\n }\n }\n else if (series instanceof TechnicalIndicator) {\n targetIndicator = series;\n targetIndicator.setDataSource(series instanceof Series ? series : null, this);\n }\n }\n };\n Chart.prototype.calculateVisibleSeries = function () {\n var series;\n this.visibleSeries = [];\n var colors = this.palettes.length ? this.palettes : getSeriesColor(this.theme);\n var count = colors.length;\n for (var i = 0, len = this.series.length; i < len; i++) {\n series = this.series[i];\n series.index = i;\n series.interior = series.fill || colors[i % count];\n switch (series.type) {\n case 'Bar':\n case 'StackingBar':\n case 'StackingBar100':\n if (this.series[0].type.indexOf('Bar') === -1) {\n continue;\n }\n break;\n case 'Polar':\n case 'Radar':\n if (this.chartAreaType !== 'PolarRadar') {\n continue;\n }\n if (this.chartAreaType === 'PolarRadar' && ((series.xAxisName === null && series.yAxisName !== null) ||\n (series.xAxisName !== null && series.yAxisName === null) ||\n (series.xAxisName !== null && series.yAxisName !== null))) {\n continue;\n }\n break;\n default:\n if (this.chartAreaType === 'PolarRadar' || this.series[0].type.indexOf('Bar') > -1) {\n continue;\n }\n break;\n }\n this.visibleSeries.push(series);\n this.series[i] = series;\n }\n };\n Chart.prototype.renderTitle = function () {\n if (this.title) {\n var anchor = this.titleStyle.textAlignment === 'Near' ? 'start' :\n this.titleStyle.textAlignment === 'Far' ? 'end' : 'middle';\n this.elementSize = measureText(this.title, this.titleStyle);\n var options = new TextOption(this.element.id + '_ChartTitle', titlePositionX(this.availableSize, this.margin.left, this.margin.right, this.titleStyle), this.margin.top + ((this.elementSize.height) * 3 / 4), anchor, this.titleCollection, '', 'auto');\n var element = textElement(options, this.titleStyle, this.titleStyle.color || this.themeStyle.chartTitle, this.svgObject);\n element.setAttribute('aria-label', this.description || this.title);\n element.setAttribute('tabindex', this.tabIndex.toString());\n }\n };\n Chart.prototype.renderBorder = function () {\n var width = this.border.width;\n var rect = new RectOption(this.element.id + '_ChartBorder', this.background || this.themeStyle.background, this.border, 1, new Rect(width / 2, width / 2, this.availableSize.width - width, this.availableSize.height - width));\n this.htmlObject = this.renderer.drawRectangle(rect);\n this.svgObject.appendChild(this.htmlObject);\n };\n Chart.prototype.renderAreaBorder = function () {\n if (this.chartAreaType === 'PolarRadar') {\n return null;\n }\n else {\n var rect = new RectOption(this.element.id + '_ChartAreaBorder', this.chartArea.background, { width: this.chartArea.border.width, color: this.chartArea.border.color || this.themeStyle.areaBorder }, this.chartArea.opacity, this.chartAxisLayoutPanel.seriesClipRect);\n this.htmlObject = this.renderer.drawRectangle(rect);\n this.svgObject.appendChild(this.htmlObject);\n }\n };\n /**\n * To add series for the chart\n * @param {SeriesModel[]} seriesCollection - Defines the series collection to be added in chart.\n * @return {void}.\n */\n Chart.prototype.addSeries = function (seriesCollection) {\n for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {\n var series = seriesCollection_1[_i];\n series = new Series(this, 'series', series);\n this.series.push(series);\n }\n this.refresh();\n };\n /**\n * To Remove series for the chart\n * @param index - Defines the series index to be remove in chart series\n * @return {void}\n */\n Chart.prototype.removeSeries = function (index) {\n this.series.splice(index, 1);\n this.refresh();\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}.\n * @member of Chart\n */\n Chart.prototype.destroy = function () {\n this.unWireEvents();\n _super.prototype.destroy.call(this);\n this.element.classList.remove('e-chart');\n };\n /**\n * Get component name\n */\n Chart.prototype.getModuleName = function () {\n return 'chart';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Chart.prototype.getPersistData = function () {\n var keyEntity = ['loaded', 'animationComplete'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Method to create SVG element.\n */\n Chart.prototype.createChartSvg = function () {\n this.removeSvg();\n createSvg(this);\n };\n /**\n * Method to bind events for chart\n */\n Chart.prototype.unWireEvents = function () {\n /*! Find the Events type */\n var startEvent = Browser.touchStartEvent;\n var moveEvent = Browser.touchMoveEvent;\n var stopEvent = Browser.touchEndEvent;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n /*! UnBind the Event handler */\n EventHandler.remove(this.element, startEvent, this.chartOnMouseDown);\n EventHandler.remove(this.element, moveEvent, this.mouseMove);\n EventHandler.remove(this.element, stopEvent, this.mouseEnd);\n EventHandler.remove(this.element, 'click', this.chartOnMouseClick);\n EventHandler.remove(this.element, 'contextmenu', this.chartRightClick);\n EventHandler.remove(this.element, cancelEvent, this.mouseLeave);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.chartResize);\n };\n Chart.prototype.wireEvents = function () {\n /*! Find the Events type */\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n /*! Bind the Event handler */\n EventHandler.add(this.element, Browser.touchStartEvent, this.chartOnMouseDown, this);\n EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMove, this);\n EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEnd, this);\n EventHandler.add(this.element, 'click', this.chartOnMouseClick, this);\n EventHandler.add(this.element, 'contextmenu', this.chartRightClick, this);\n EventHandler.add(this.element, cancelEvent, this.mouseLeave, this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.chartResize.bind(this));\n this.longPress = this.longPress.bind(this);\n new Touch(this.element, { tapHold: this.longPress, tapHoldThreshold: 500 });\n /*! Apply the style for chart */\n this.setStyle(this.element);\n };\n Chart.prototype.chartRightClick = function (event) {\n if (this.crosshair.enable && this.crosshairModule &&\n (event.buttons === 2 || event.which === 0 || event.pointerType === 'touch')) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n return true;\n };\n Chart.prototype.setStyle = function (element) {\n var zooming = this.zoomSettings;\n var disableScroll = zooming.enableSelectionZooming || zooming.enableMouseWheelZooming || zooming.enablePinchZooming ||\n this.selectionMode !== 'None' || this.crosshair.enable;\n element.style.touchAction = disableScroll ? 'none' : 'element';\n element.style.msTouchAction = disableScroll ? 'none' : 'element';\n element.style.msContentZooming = 'none';\n element.style.msUserSelect = 'none';\n element.style.webkitUserSelect = 'none';\n element.style.position = 'relative';\n element.style.display = 'block';\n };\n /**\n * Finds the orientation.\n * @return {boolean}\n * @private\n */\n Chart.prototype.isOrientation = function () {\n return ('orientation' in window && 'onorientationchange' in window);\n };\n /**\n * Handles the long press on chart.\n * @return {boolean}\n * @private\n */\n Chart.prototype.longPress = function (e) {\n this.mouseX = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientX) : 0;\n this.mouseY = (e && e.originalEvent.changedTouches) ? (e.originalEvent.changedTouches[0].clientY) : 0;\n this.startMove = true;\n this.setMouseXY(this.mouseX, this.mouseY);\n this.notify('tapHold', e);\n return false;\n };\n /**\n * To find mouse x, y for aligned chart element svg position\n */\n Chart.prototype.setMouseXY = function (pageX, pageY) {\n var rect = this.element.getBoundingClientRect();\n var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\n this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);\n };\n /**\n * Handles the chart resize.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartResize = function (e) {\n var _this = this;\n this.animateSeries = false;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n if (_this.isDestroyed) {\n clearTimeout(_this.resizeTo);\n return;\n }\n _this.createChartSvg();\n _this.refreshAxis();\n _this.refreshBound();\n _this.trigger('loaded', { chart: _this });\n }, 500);\n return false;\n };\n /**\n * Handles the mouse move.\n * @return {boolean}\n * @private\n */\n Chart.prototype.mouseMove = function (e) {\n var pageX;\n var pageY;\n var touchArg;\n if (e.type === 'touchmove') {\n this.isTouch = true;\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2' || this.isTouch;\n pageX = e.clientX;\n pageY = e.clientY;\n }\n this.setMouseXY(pageX, pageY);\n this.chartOnMouseMove(e);\n return false;\n };\n /**\n * Handles the mouse leave.\n * @return {boolean}\n * @private\n */\n Chart.prototype.mouseLeave = function (e) {\n var pageX;\n var pageY;\n var touchArg;\n if (e.type === 'touchleave') {\n this.isTouch = true;\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n pageX = e.clientX;\n pageY = e.clientY;\n }\n this.setMouseXY(pageX, pageY);\n this.chartOnMouseLeave(e);\n return false;\n };\n /**\n * Handles the mouse leave on chart.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseLeave = function (e) {\n var element = e.target;\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n this.trigger(chartMouseLeave, { target: element.id, x: this.mouseX, y: this.mouseY });\n this.isChartDrag = false;\n this.notify(cancelEvent, e);\n return false;\n };\n /**\n * Handles the mouse click on chart.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseClick = function (e) {\n var element = e.target;\n this.trigger(chartMouseClick, { target: element.id, x: this.mouseX, y: this.mouseY });\n if (this.pointClick) {\n this.triggerPointEvent(pointClick);\n }\n this.notify('click', e);\n return false;\n };\n Chart.prototype.triggerPointEvent = function (event) {\n var data = new ChartData(this);\n var pointData = data.getData();\n if (pointData.series && pointData.point) {\n this.trigger(event, { series: pointData.series,\n point: pointData.point,\n seriesIndex: pointData.series.index, pointIndex: pointData.point.index,\n x: this.mouseX, y: this.mouseY });\n }\n };\n /**\n * Handles the mouse move on chart.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseMove = function (e) {\n var element = e.target;\n this.trigger(chartMouseMove, { target: element.id, x: this.mouseX, y: this.mouseY });\n if (this.pointMove) {\n this.triggerPointEvent(pointMove);\n }\n // Tooltip for chart series.\n if (!this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY);\n this.axisTooltip(e, this.mouseX, this.mouseY);\n }\n this.notify(Browser.touchMoveEvent, e);\n this.isTouch = false;\n return false;\n };\n Chart.prototype.titleTooltip = function (event, x, y, isTouch) {\n var targetId = event.target.id;\n if ((targetId === (this.element.id + '_ChartTitle')) && (event.target.textContent.indexOf('...') > -1)) {\n showTooltip(this.title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);\n }\n else {\n removeElement(this.element.id + '_EJ2_Title_Tooltip');\n }\n };\n Chart.prototype.axisTooltip = function (event, x, y, isTouch) {\n var targetId = event.target.id;\n if (((targetId.indexOf('AxisLabel') > -1) || targetId.indexOf('Axis_MultiLevelLabel') > -1) &&\n (event.target.textContent.indexOf('...') > -1)) {\n showTooltip(this.findAxisLabel(targetId), x, y, this.element.offsetWidth, this.element.id + '_EJ2_AxisLabel_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);\n }\n else {\n removeElement(this.element.id + '_EJ2_AxisLabel_Tooltip');\n }\n };\n Chart.prototype.findAxisLabel = function (text) {\n var texts;\n if (text.indexOf('AxisLabel') > -1) {\n texts = ((text.replace(this.element.id, '')).replace('AxisLabel_', '')).split('_');\n return this.axisCollections[parseInt(texts[0], 10)].visibleLabels[parseInt(texts[1], 10)].originalText;\n }\n else {\n texts = ((text.replace(this.element.id, '')).replace('Axis_MultiLevelLabel_Level_', '').replace('Text_', '')).split('_');\n return (this.axisCollections[parseInt(texts[0], 10)].multiLevelLabels[parseInt(texts[1], 10)]\n .categories[parseInt(texts[2], 10)].text);\n }\n };\n /**\n * Handles the mouse down on chart.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseDown = function (e) {\n var pageX;\n var pageY;\n var target;\n var touchArg;\n var offset = Browser.isDevice ? 20 : 30;\n var rect = this.element.getBoundingClientRect();\n var element = e.target;\n this.trigger(chartMouseDown, { target: element.id, x: this.mouseX, y: this.mouseY });\n if (e.type === 'touchstart') {\n this.isTouch = true;\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n pageY = touchArg.changedTouches[0].clientY;\n target = touchArg.target;\n }\n else {\n this.isTouch = e.pointerType === 'touch';\n pageX = e.clientX;\n pageY = e.clientY;\n target = e.target;\n }\n var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n this.mouseDownX = this.previousMouseMoveX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\n this.mouseDownY = this.previousMouseMoveY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);\n if (this.isTouch) {\n this.isDoubleTap = (new Date().getTime() < this.threshold && target.id.indexOf(this.element.id + '_Zooming_') === -1 &&\n (this.mouseDownX - offset >= this.mouseX || this.mouseDownX + offset >= this.mouseX) &&\n (this.mouseDownY - offset >= this.mouseY || this.mouseDownY + offset >= this.mouseY) &&\n (this.mouseX - offset >= this.mouseDownX || this.mouseX + offset >= this.mouseDownX) &&\n (this.mouseY - offset >= this.mouseDownY || this.mouseY + offset >= this.mouseDownY));\n }\n this.notify(Browser.touchStartEvent, e);\n return false;\n };\n /**\n * Handles the mouse up.\n * @return {boolean}\n * @private\n */\n Chart.prototype.mouseEnd = function (e) {\n var pageY;\n var pageX;\n var touchArg;\n if (e.type === 'touchend') {\n touchArg = e;\n pageX = touchArg.changedTouches[0].clientX;\n this.isTouch = true;\n pageY = touchArg.changedTouches[0].clientY;\n }\n else {\n pageY = e.clientY;\n pageX = e.clientX;\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n }\n this.setMouseXY(pageX, pageY);\n this.chartOnMouseUp(e);\n return false;\n };\n /**\n * Handles the mouse up.\n * @return {boolean}\n * @private\n */\n Chart.prototype.chartOnMouseUp = function (e) {\n var element = e.target;\n this.trigger(chartMouseUp, { target: element.id, x: this.mouseX, y: this.mouseY });\n this.isChartDrag = false;\n if (this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);\n this.axisTooltip(e, this.mouseX, this.mouseY, this.isTouch);\n this.threshold = new Date().getTime() + 300;\n }\n this.seriesElements.removeAttribute('clip-path');\n this.notify(Browser.touchEndEvent, e);\n return false;\n };\n /**\n * Method to set culture for chart\n */\n Chart.prototype.setCulture = function () {\n this.intl = new Internationalization();\n this.setLocaleConstants();\n this.localeObject = new L10n(this.getModuleName(), this.defaultLocalConstants, this.locale);\n };\n /**\n * Method to set the annotation content dynamically for chart.\n */\n Chart.prototype.setAnnotationValue = function (annotationIndex, content) {\n var parentNode = getElement(this.element.id + '_Annotation_Collections');\n var annotation = this.annotations[annotationIndex];\n var element;\n if (content !== null) {\n annotation.content = content;\n if (parentNode) {\n removeElement(this.element.id + '_Annotation_' + annotationIndex);\n element = createElement('div');\n this.annotationModule.processAnnotation(annotation, annotationIndex, element);\n parentNode.appendChild(element.children[0]);\n }\n else {\n this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));\n }\n }\n };\n /**\n * Method to set locale constants\n */\n Chart.prototype.setLocaleConstants = function () {\n this.defaultLocalConstants = {\n ZoomIn: 'ZoomIn',\n Zoom: 'Zoom',\n ZoomOut: 'ZoomOut',\n Pan: 'Pan',\n Reset: 'Reset',\n ResetZoom: 'Reset Zoom'\n };\n };\n /**\n * Theming for chart\n */\n Chart.prototype.setTheme = function () {\n /*! Set theme */\n this.themeStyle = getThemeColor(this.theme);\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n Chart.prototype.requiredModules = function () {\n var _this = this;\n var modules = [];\n var series = this.series;\n var enableAnnotation = false;\n var moduleName;\n var errorBarVisible = false;\n var dataLabelEnable = false;\n var zooming = this.zoomSettings;\n this.chartAreaType = (series.length > 0 && (series[0].type === 'Polar' || series[0].type === 'Radar')) ? 'PolarRadar' : 'Cartesian';\n if (this.tooltip.enable) {\n modules.push({\n member: 'Tooltip',\n args: [this]\n });\n }\n series.map(function (value) {\n _this.isLegend = (_this.legendSettings.visible && ((value.name !== '') || !!_this.isLegend));\n moduleName = value.type.indexOf('100') !== -1 ? value.type.replace('100', '') + 'Series' : value.type + 'Series';\n errorBarVisible = value.errorBar.visible || errorBarVisible;\n dataLabelEnable = value.marker.dataLabel.visible || dataLabelEnable;\n if (!modules.some(function (currentModule) {\n return currentModule.member === moduleName;\n })) {\n modules.push({\n member: moduleName,\n args: [_this, series]\n });\n }\n if (_this.chartAreaType === 'PolarRadar') {\n modules.push({\n member: value.drawType + 'Series',\n args: [_this, series]\n });\n }\n });\n this.findIndicatorModules(modules);\n this.findTrendLineModules(modules);\n modules = this.findAxisModule(modules);\n enableAnnotation = this.annotations.some(function (value) {\n return (value.content !== null);\n });\n if (errorBarVisible) {\n modules.push({\n member: 'ErrorBar',\n args: [this, series]\n });\n }\n if (this.isLegend) {\n modules.push({\n member: 'Legend',\n args: [this]\n });\n }\n if (this.chartAreaType !== 'PolarRadar' && (zooming.enableSelectionZooming\n || zooming.enableMouseWheelZooming || zooming.enablePinchZooming || zooming.enablePan)) {\n modules.push({\n member: 'Zoom',\n args: [this, this.zoomSettings]\n });\n }\n if (this.selectionMode !== 'None' && !(this.chartAreaType === 'PolarRadar' &&\n this.selectionMode.indexOf('Drag') > -1)) {\n modules.push({\n member: 'Selection',\n args: [this]\n });\n }\n if (dataLabelEnable) {\n modules.push({\n member: 'DataLabel',\n args: [this, series]\n });\n }\n if (enableAnnotation) {\n modules.push({\n member: 'Annotation',\n args: [this]\n });\n }\n if (this.chartAreaType !== 'PolarRadar' && this.crosshair.enable) {\n modules.push({\n member: 'Crosshair',\n args: [this]\n });\n }\n return modules;\n };\n Chart.prototype.findAxisModule = function (modules) {\n var axisCollections = [];\n axisCollections.push(this.primaryXAxis);\n axisCollections.push(this.primaryYAxis);\n axisCollections = axisCollections.concat(this.axes);\n var datetimeEnabled = false;\n var categoryEnabled = false;\n var logarithmicEnabled = false;\n var striplineEnabled = false;\n var dateTimeCategoryEnabled = false;\n var multiLevelEnabled = false;\n for (var _i = 0, axisCollections_1 = axisCollections; _i < axisCollections_1.length; _i++) {\n var axis = axisCollections_1[_i];\n datetimeEnabled = axis.valueType === 'DateTime' || datetimeEnabled;\n categoryEnabled = axis.valueType === 'Category' || categoryEnabled;\n logarithmicEnabled = axis.valueType === 'Logarithmic' || logarithmicEnabled;\n dateTimeCategoryEnabled = axis.valueType === 'DateTimeCategory' || dateTimeCategoryEnabled;\n striplineEnabled = this.findStriplineVisibility(axis.stripLines) || striplineEnabled;\n multiLevelEnabled = axis.multiLevelLabels.length > 0 || multiLevelEnabled;\n }\n if (datetimeEnabled) {\n modules.push({\n member: 'DateTime',\n args: [this]\n });\n }\n if (categoryEnabled) {\n modules.push({\n member: 'Category',\n args: [this]\n });\n }\n if (logarithmicEnabled) {\n modules.push({\n member: 'Logarithmic',\n args: [this]\n });\n }\n if (striplineEnabled) {\n modules.push({\n member: 'StripLine',\n args: [this]\n });\n }\n if (multiLevelEnabled) {\n modules.push({\n member: 'MultiLevelLabel',\n args: [this]\n });\n }\n if (dateTimeCategoryEnabled) {\n modules.push({\n member: 'DateTimeCategory',\n args: [this]\n });\n }\n return modules;\n };\n Chart.prototype.findIndicatorModules = function (modules) {\n var macdEnable;\n var bandEnable;\n var indicators = this.indicators;\n if (this.indicators.length) {\n modules.push({\n member: 'LineSeries',\n args: [this]\n });\n indicators.map(function (indicator) {\n macdEnable = macdEnable || indicator.type === 'Macd';\n bandEnable = bandEnable || indicator.type === 'BollingerBands';\n });\n if (macdEnable) {\n modules.push({\n member: 'ColumnSeries',\n args: [this]\n });\n }\n if (bandEnable) {\n modules.push({\n member: 'RangeAreaSeries',\n args: [this]\n });\n }\n for (var _i = 0, _a = this.indicators; _i < _a.length; _i++) {\n var indicator = _a[_i];\n modules.push({\n member: indicator.type + 'Indicator',\n args: [this]\n });\n }\n }\n };\n Chart.prototype.findTrendLineModules = function (modules) {\n var isLine;\n var isSpline;\n var _loop_1 = function (series) {\n var markerEnable;\n series.trendlines.map(function (trendline) {\n markerEnable = markerEnable || trendline.marker.visible;\n isLine = isLine || (trendline.type === 'Linear' || trendline.type === 'MovingAverage') ? true : false;\n isSpline = isSpline || !isLine ? true : false;\n });\n if (markerEnable) {\n modules.push({\n member: 'Marker',\n args: [this_1, series]\n });\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = this.series; _i < _a.length; _i++) {\n var series = _a[_i];\n _loop_1(series);\n }\n if (isLine || isSpline) {\n modules.push({\n member: 'TrendLine',\n args: [this]\n });\n }\n if (isLine) {\n modules.push({\n member: 'LineSeries',\n args: [this]\n });\n }\n if (isSpline) {\n modules.push({\n member: 'SplineSeries',\n args: [this]\n });\n }\n };\n Chart.prototype.findStriplineVisibility = function (striplines) {\n var visible = false;\n for (var _i = 0, striplines_1 = striplines; _i < striplines_1.length; _i++) {\n var stripline = striplines_1[_i];\n if (stripline.visible) {\n visible = true;\n break;\n }\n }\n return visible;\n };\n /**\n * To Remove the SVG.\n * @return {boolean}\n * @private\n */\n Chart.prototype.removeSvg = function () {\n if (document.getElementById(this.element.id + '_Secondary_Element')) {\n remove(document.getElementById(this.element.id + '_Secondary_Element'));\n }\n var removeLength = 0;\n if (this.zoomModule && this.zoomModule.pinchTarget) {\n this.zoomModule.pinchTarget.id = '';\n this.zoomModule.pinchTarget.setAttribute('opacity', '0');\n this.svgObject.appendChild(this.zoomModule.pinchTarget);\n removeLength = 1;\n }\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > removeLength) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n }\n };\n Chart.prototype.refreshDefinition = function (definitions) {\n for (var _i = 0, definitions_1 = definitions; _i < definitions_1.length; _i++) {\n var item = definitions_1[_i];\n item.axes = [];\n }\n };\n /**\n * Refresh the axis default value.\n * @return {boolean}\n * @private\n */\n Chart.prototype.refreshAxis = function () {\n var axis = this.primaryXAxis;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n axis = this.primaryYAxis;\n axis.isStack100 = false;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n for (var _i = 0, _a = this.axes; _i < _a.length; _i++) {\n var item = _a[_i];\n axis = item;\n axis.rect = new Rect(undefined, undefined, 0, 0);\n axis.isStack100 = false;\n }\n };\n Chart.prototype.axisChange = function (axis) {\n if (!axis.name && !axis.valueType) {\n return false;\n }\n this.refreshDefinition(this.columns);\n this.refreshDefinition(this.rows);\n this.calculateVisibleAxis();\n this.processData();\n return true;\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n Chart.prototype.onPropertyChanged = function (newProp, oldProp) {\n var renderer = false;\n var refreshBounds = false;\n if (Object.keys(newProp).length === 1 && Object.keys(newProp)[0] === 'indicators') {\n //add valid check, it should happen only when property change is triggered for target series\n return;\n }\n this.animateSeries = false;\n if (!this.delayRedraw) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'primaryXAxis':\n refreshBounds = this.axisChange(newProp.primaryXAxis);\n if (newProp.primaryXAxis.edgeLabelPlacement) {\n renderer = true;\n }\n if (!newProp.primaryXAxis.crosshairTooltip) {\n refreshBounds = true;\n }\n break;\n case 'primaryYAxis':\n refreshBounds = this.axisChange(newProp.primaryYAxis);\n if (newProp.primaryYAxis.edgeLabelPlacement) {\n renderer = true;\n }\n if (!newProp.primaryYAxis.crosshairTooltip) {\n refreshBounds = true;\n }\n break;\n case 'height':\n case 'width':\n this.createChartSvg();\n refreshBounds = true;\n break;\n case 'title':\n refreshBounds = true;\n break;\n case 'titleStyle':\n if (newProp.titleStyle && (newProp.titleStyle.size || newProp.titleStyle.textOverflow)) {\n refreshBounds = true;\n }\n else {\n renderer = true;\n }\n break;\n case 'border':\n renderer = true;\n break;\n case 'zoomSettings':\n case 'background':\n renderer = true;\n break;\n case 'chartArea':\n if (newProp.chartArea.border && newProp.chartArea.border.width) {\n refreshBounds = true;\n }\n renderer = true;\n break;\n case 'legendSettings':\n if (!newProp.legendSettings.background || !newProp.legendSettings.opacity) {\n refreshBounds = true;\n }\n renderer = true;\n break;\n case 'palettes':\n this.calculateVisibleSeries();\n renderer = true;\n break;\n case 'selectedDataIndexes':\n case 'selectionMode':\n if (this.selectionModule && newProp.selectionMode && newProp.selectionMode.indexOf('Drag') === -1) {\n this.selectionModule.redrawSelection(this, oldProp.selectionMode);\n }\n break;\n case 'isMultiSelect':\n if (this.selectionModule && !newProp.isMultiSelect && this.selectionModule.selectedDataIndexes.length > 1) {\n this.selectionModule.redrawSelection(this, oldProp.selectionMode);\n }\n break;\n case 'theme':\n this.animateSeries = true;\n break;\n case 'locale':\n case 'currencyCode':\n _super.prototype.refresh.call(this);\n break;\n case 'tooltip':\n this.tooltipModule.previousPoints = [];\n break;\n }\n }\n if (!refreshBounds && renderer) {\n this.removeSvg();\n this.renderElements();\n this.trigger('loaded', { chart: this });\n }\n if (refreshBounds) {\n this.removeSvg();\n this.refreshAxis();\n this.refreshBound();\n this.trigger('loaded', { chart: this });\n }\n }\n };\n __decorate([\n Property(null)\n ], Chart.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Chart.prototype, \"title\", void 0);\n __decorate([\n Complex(Theme.chartTitleFont, Font)\n ], Chart.prototype, \"titleStyle\", void 0);\n __decorate([\n Complex({}, Margin)\n ], Chart.prototype, \"margin\", void 0);\n __decorate([\n Complex({ color: '#DDDDDD', width: 0 }, Border)\n ], Chart.prototype, \"border\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"background\", void 0);\n __decorate([\n Complex({ border: { color: null, width: 0.5 }, background: 'transparent' }, ChartArea)\n ], Chart.prototype, \"chartArea\", void 0);\n __decorate([\n Complex({ name: 'primaryXAxis' }, Axis)\n ], Chart.prototype, \"primaryXAxis\", void 0);\n __decorate([\n Complex({ name: 'primaryYAxis' }, Axis)\n ], Chart.prototype, \"primaryYAxis\", void 0);\n __decorate([\n Collection([{}], Row)\n ], Chart.prototype, \"rows\", void 0);\n __decorate([\n Collection([{}], Column)\n ], Chart.prototype, \"columns\", void 0);\n __decorate([\n Collection([{}], Axis)\n ], Chart.prototype, \"axes\", void 0);\n __decorate([\n Collection([{}], Series)\n ], Chart.prototype, \"series\", void 0);\n __decorate([\n Collection([{}], ChartAnnotationSettings)\n ], Chart.prototype, \"annotations\", void 0);\n __decorate([\n Property([])\n ], Chart.prototype, \"palettes\", void 0);\n __decorate([\n Property('Material')\n ], Chart.prototype, \"theme\", void 0);\n __decorate([\n Complex({}, TooltipSettings)\n ], Chart.prototype, \"tooltip\", void 0);\n __decorate([\n Complex({}, CrosshairSettings)\n ], Chart.prototype, \"crosshair\", void 0);\n __decorate([\n Complex({}, LegendSettings)\n ], Chart.prototype, \"legendSettings\", void 0);\n __decorate([\n Complex({}, ZoomSettings)\n ], Chart.prototype, \"zoomSettings\", void 0);\n __decorate([\n Property('None')\n ], Chart.prototype, \"selectionMode\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"isMultiSelect\", void 0);\n __decorate([\n Collection([], Indexes)\n ], Chart.prototype, \"selectedDataIndexes\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"useGroupingSeparator\", void 0);\n __decorate([\n Property(false)\n ], Chart.prototype, \"isTransposed\", void 0);\n __decorate([\n Collection([], TechnicalIndicator)\n ], Chart.prototype, \"indicators\", void 0);\n __decorate([\n Property(null)\n ], Chart.prototype, \"description\", void 0);\n __decorate([\n Property(1)\n ], Chart.prototype, \"tabIndex\", void 0);\n __decorate([\n Property(true)\n ], Chart.prototype, \"enableSideBySidePlacement\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"annotationRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"beforePrint\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"legendRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"textRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"seriesRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisLabelRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisRangeCalculated\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"axisMultiLabelRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"tooltipRender\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseMove\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointClick\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"pointMove\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseLeave\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseDown\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"chartMouseUp\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"dragComplete\", void 0);\n __decorate([\n Event()\n ], Chart.prototype, \"zoomComplete\", void 0);\n __decorate([\n Property('USD')\n ], Chart.prototype, \"currencyCode\", void 0);\n Chart = __decorate([\n NotifyPropertyChanges\n ], Chart);\n return Chart;\n}(Component));\nexport { Chart };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Double } from '../axis/double-axis';\n/**\n * Common axis classes\n * @private\n */\nvar NiceInterval = /** @class */ (function (_super) {\n __extends(NiceInterval, _super);\n function NiceInterval() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Method to calculate numeric datetime interval\n */\n NiceInterval.prototype.calculateDateTimeNiceInterval = function (axis, size, start, end) {\n var oneDay = 24 * 60 * 60 * 1000;\n var startDate = new Date(start);\n var endDate = new Date(end);\n //var axisInterval ;\n var totalDays = (Math.abs((startDate.getTime() - endDate.getTime()) / (oneDay)));\n var interval;\n axis.actualIntervalType = axis.intervalType;\n switch (axis.intervalType) {\n case 'Years':\n interval = this.calculateNumericNiceInterval(axis, totalDays / 365, size);\n break;\n case 'Months':\n interval = this.calculateNumericNiceInterval(axis, totalDays / 30, size);\n break;\n case 'Days':\n interval = this.calculateNumericNiceInterval(axis, totalDays, size);\n break;\n case 'Hours':\n interval = this.calculateNumericNiceInterval(axis, totalDays * 24, size);\n break;\n case 'Minutes':\n interval = this.calculateNumericNiceInterval(axis, totalDays * 24 * 60, size);\n break;\n case 'Seconds':\n interval = this.calculateNumericNiceInterval(axis, totalDays * 24 * 60 * 60, size);\n break;\n case 'Auto':\n interval = this.calculateNumericNiceInterval(axis, totalDays / 365, size);\n if (interval >= 1) {\n axis.actualIntervalType = 'Years';\n return interval;\n }\n interval = this.calculateNumericNiceInterval(axis, totalDays / 30, size);\n if (interval >= 1) {\n axis.actualIntervalType = 'Months';\n return interval;\n }\n interval = this.calculateNumericNiceInterval(axis, totalDays, size);\n if (interval >= 1) {\n axis.actualIntervalType = 'Days';\n return interval;\n }\n interval = this.calculateNumericNiceInterval(axis, totalDays * 24, size);\n if (interval >= 1) {\n axis.actualIntervalType = 'Hours';\n return interval;\n }\n interval = this.calculateNumericNiceInterval(axis, totalDays * 24 * 60, size);\n if (interval >= 1) {\n axis.actualIntervalType = 'Minutes';\n return interval;\n }\n interval = this.calculateNumericNiceInterval(axis, totalDays * 24 * 60 * 60, size);\n axis.actualIntervalType = 'Seconds';\n return interval;\n }\n return interval;\n };\n /**\n * To get the skeleton for the DateTime axis.\n * @return {string}\n * @private\n */\n NiceInterval.prototype.getSkeleton = function (axis) {\n var skeleton;\n if (axis.skeleton) {\n return axis.skeleton;\n }\n if (axis.actualIntervalType === 'Years') {\n skeleton = 'yMMM';\n }\n else if (axis.actualIntervalType === 'Months') {\n skeleton = 'MMMd';\n }\n else if (axis.actualIntervalType === 'Days') {\n skeleton = 'yMd';\n }\n else if (axis.actualIntervalType === 'Hours') {\n skeleton = 'EHm';\n }\n else if (axis.actualIntervalType === 'Minutes' || axis.actualIntervalType === 'Seconds') {\n skeleton = 'Hms';\n }\n else {\n skeleton = 'Hms';\n }\n return skeleton;\n };\n return NiceInterval;\n}(Double));\nexport { NiceInterval };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { DoubleRange } from '../utils/double-range';\nimport { withIn, firstToLowerCase } from '../../common/utils/helper';\nimport { DataUtil } from '@syncfusion/ej2-data';\nimport { NiceInterval } from '../axis/axis-helper';\n/**\n * `DateTime` module is used to render datetime axis.\n */\nvar DateTime = /** @class */ (function (_super) {\n __extends(DateTime, _super);\n /**\n * Constructor for the dateTime module.\n * @private\n */\n function DateTime(chart) {\n return _super.call(this, chart) || this;\n }\n /**\n * The function to calculate the range and labels for the axis.\n * @return {void}\n */\n DateTime.prototype.calculateRangeAndInterval = function (size, axis) {\n this.calculateRange(axis, size);\n this.getActualRange(axis, size);\n this.applyRangePadding(axis, size);\n this.calculateVisibleLabels(axis);\n };\n /**\n * Actual Range for the axis.\n * @private\n */\n DateTime.prototype.getActualRange = function (axis, size) {\n var option = {\n skeleton: 'full',\n type: 'dateTime'\n };\n var dateParser = this.chart.intl.getDateParser(option);\n var dateFormatter = this.chart.intl.getDateFormat(option);\n // Axis min\n if ((axis.minimum) !== null) {\n this.min = Date.parse(dateParser(dateFormatter(new Date(DataUtil.parse.parseJson({ val: axis.minimum }).val))));\n }\n else if (this.min === null || this.min === Number.POSITIVE_INFINITY) {\n this.min = Date.parse(dateParser(dateFormatter(new Date(1970, 1, 1))));\n }\n // Axis Max\n if ((axis.maximum) !== null) {\n this.max = Date.parse(dateParser(dateFormatter(new Date(DataUtil.parse.parseJson({ val: axis.maximum }).val))));\n }\n else if (this.max === null || this.max === Number.NEGATIVE_INFINITY) {\n this.max = Date.parse(dateParser(dateFormatter(new Date(1970, 5, 1))));\n }\n if (this.min === this.max) {\n this.max = this.max + 2592000000;\n this.min = this.min - 2592000000;\n }\n axis.actualRange = {};\n axis.doubleRange = new DoubleRange(this.min, this.max);\n var datetimeInterval = this.calculateDateTimeNiceInterval(axis, size, axis.doubleRange.start, axis.doubleRange.end);\n if (!axis.interval) {\n axis.actualRange.interval = datetimeInterval;\n }\n else {\n axis.actualRange.interval = axis.interval;\n }\n axis.actualRange.min = axis.doubleRange.start;\n axis.actualRange.max = axis.doubleRange.end;\n };\n /**\n * Apply padding for the range.\n * @private\n */\n DateTime.prototype.applyRangePadding = function (axis, size) {\n this.start = (axis.actualRange.min);\n this.end = (axis.actualRange.max);\n var minimum;\n var maximum;\n var interval = axis.actualRange.interval;\n if (!axis.setRange()) {\n var rangePadding = axis.getRangePadding(this.chart);\n minimum = new Date(this.start);\n maximum = new Date(this.end);\n var intervalType = axis.actualIntervalType;\n if (rangePadding === 'None') {\n this.start = minimum.getTime();\n this.end = maximum.getTime();\n }\n else if (rangePadding === 'Additional' || rangePadding === 'Round') {\n switch (intervalType) {\n case 'Years':\n this.getYear(minimum, maximum, rangePadding, interval);\n break;\n case 'Months':\n this.getMonth(minimum, maximum, rangePadding, interval);\n break;\n case 'Days':\n this.getDay(minimum, maximum, rangePadding, interval);\n break;\n case 'Hours':\n this.getHour(minimum, maximum, rangePadding, interval);\n break;\n case 'Minutes':\n var minute = (minimum.getMinutes() / interval) * interval;\n var endMinute = maximum.getMinutes() + (minimum.getMinutes() - minute);\n if (rangePadding === 'Round') {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minute, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), endMinute, 59)).getTime();\n }\n else {\n this.start = (new Date(minimum.getFullYear(), maximum.getMonth(), minimum.getDate(), minimum.getHours(), minute + (-interval), 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), endMinute + (interval), 0)).getTime();\n }\n break;\n case 'Seconds':\n var second = (minimum.getSeconds() / interval) * interval;\n var endSecond = maximum.getSeconds() + (minimum.getSeconds() - second);\n if (rangePadding === 'Round') {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minimum.getMinutes(), second, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), maximum.getMinutes(), endSecond, 0)).getTime();\n }\n else {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), minimum.getHours(), minimum.getMinutes(), second + (-interval), 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), maximum.getHours(), maximum.getMinutes(), endSecond + (interval), 0)).getTime();\n }\n break;\n }\n }\n }\n axis.actualRange.min = (axis.minimum != null) ? this.min : this.start;\n axis.actualRange.max = (axis.maximum != null) ? this.max : this.end;\n axis.actualRange.delta = (axis.actualRange.max - axis.actualRange.min);\n axis.doubleRange = new DoubleRange(axis.actualRange.min, axis.actualRange.max);\n this.calculateVisibleRange(size, axis);\n };\n DateTime.prototype.getYear = function (minimum, maximum, rangePadding, interval) {\n var startYear = minimum.getFullYear();\n var endYear = maximum.getFullYear();\n if (rangePadding === 'Additional') {\n this.start = (new Date(startYear - interval, 1, 1, 0, 0, 0)).getTime();\n this.end = (new Date(endYear + interval, 1, 1, 0, 0, 0)).getTime();\n }\n else {\n this.start = new Date(startYear, 0, 0, 0, 0, 0).getTime();\n this.end = new Date(endYear, 11, 30, 23, 59, 59).getTime();\n }\n };\n DateTime.prototype.getMonth = function (minimum, maximum, rangePadding, interval) {\n var month = minimum.getMonth();\n var endMonth = maximum.getMonth();\n if (rangePadding === 'Round') {\n this.start = (new Date(minimum.getFullYear(), month, 0, 0, 0, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), endMonth, new Date(maximum.getFullYear(), maximum.getMonth(), 0).getDate(), 23, 59, 59)).getTime();\n }\n else {\n this.start = (new Date(minimum.getFullYear(), month + (-interval), 1, 0, 0, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), endMonth + (interval), endMonth === 2 ? 28 : 30, 0, 0, 0)).getTime();\n }\n };\n DateTime.prototype.getDay = function (minimum, maximum, rangePadding, interval) {\n var day = minimum.getDate();\n var endDay = maximum.getDate();\n if (rangePadding === 'Round') {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), day, 0, 0, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), endDay, 23, 59, 59)).getTime();\n }\n else {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), day + (-interval), 0, 0, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), endDay + (interval), 0, 0, 0)).getTime();\n }\n };\n DateTime.prototype.getHour = function (minimum, maximum, rangePadding, interval) {\n var hour = (minimum.getHours() / interval) * interval;\n var endHour = maximum.getHours() + (minimum.getHours() - hour);\n if (rangePadding === 'Round') {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), hour, 0, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), endHour, 59, 59)).getTime();\n }\n else {\n this.start = (new Date(minimum.getFullYear(), minimum.getMonth(), minimum.getDate(), hour + (-interval), 0, 0)).getTime();\n this.end = (new Date(maximum.getFullYear(), maximum.getMonth(), maximum.getDate(), endHour + (interval), 0, 0)).getTime();\n }\n };\n /**\n * Calculate visible range for axis.\n * @private\n */\n DateTime.prototype.calculateVisibleRange = function (size, axis) {\n axis.visibleRange = {\n min: axis.actualRange.min,\n max: axis.actualRange.max,\n interval: axis.actualRange.interval,\n delta: axis.actualRange.delta,\n };\n if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {\n axis.calculateVisibleRange(size);\n axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming) ?\n this.calculateDateTimeNiceInterval(axis, size, axis.visibleRange.min, axis.visibleRange.max)\n : axis.visibleRange.interval;\n }\n axis.dateTimeInterval = this.increaseDateTimeInterval(axis, axis.visibleRange.min, axis.visibleRange.interval).getTime()\n - axis.visibleRange.min;\n axis.triggerRangeRender(this.chart, axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.interval);\n };\n /**\n * Calculate visible labels for the axis.\n * @private\n */\n DateTime.prototype.calculateVisibleLabels = function (axis) {\n axis.visibleLabels = [];\n var tempInterval = axis.visibleRange.min;\n if (!axis.setRange()) {\n tempInterval = this.alignRangeStart(axis, tempInterval, axis.visibleRange.interval, axis.actualIntervalType).getTime();\n }\n axis.format = this.chart.intl.getDateFormat({\n format: axis.labelFormat, type: firstToLowerCase(axis.skeletonType), skeleton: this.getSkeleton(axis)\n });\n axis.startLabel = axis.format(new Date(axis.visibleRange.min));\n axis.endLabel = axis.format(new Date(axis.visibleRange.max));\n while (tempInterval <= axis.visibleRange.max) {\n if (withIn(tempInterval, axis.visibleRange)) {\n axis.triggerLabelRender(this.chart, tempInterval, axis.format(new Date(tempInterval)), axis.labelStyle);\n }\n tempInterval = this.increaseDateTimeInterval(axis, tempInterval, axis.visibleRange.interval).getTime();\n }\n axis.getMaxLabelWidth(this.chart);\n };\n /** @private */\n DateTime.prototype.increaseDateTimeInterval = function (axis, value, interval) {\n var result = new Date(value);\n interval = Math.ceil(interval);\n switch (axis.actualIntervalType) {\n case 'Years':\n result.setFullYear(result.getFullYear() + interval);\n return result;\n case 'Months':\n result.setMonth(result.getMonth() + interval);\n return result;\n case 'Days':\n result.setDate(result.getDate() + interval);\n return result;\n case 'Hours':\n result.setHours(result.getHours() + interval);\n return result;\n case 'Minutes':\n result.setMinutes(result.getMinutes() + interval);\n return result;\n case 'Seconds':\n result.setSeconds(result.getSeconds() + interval);\n return result;\n }\n return result;\n };\n DateTime.prototype.alignRangeStart = function (axis, sDate, intervalSize, intervalType) {\n var sResult = new Date(sDate);\n switch (axis.actualIntervalType) {\n case 'Years':\n var year = Math.floor(Math.floor(sResult.getFullYear() / intervalSize) * intervalSize);\n sResult = new Date(year, sResult.getMonth(), sResult.getDate(), 0, 0, 0);\n return sResult;\n case 'Months':\n var month = Math.floor(Math.floor((sResult.getMonth()) / intervalSize) * intervalSize);\n sResult = new Date(sResult.getFullYear(), month, sResult.getDate(), 0, 0, 0);\n return sResult;\n case 'Days':\n var day = Math.floor(Math.floor((sResult.getDate()) / intervalSize) * intervalSize);\n sResult = new Date(sResult.getFullYear(), sResult.getMonth(), day, 0, 0, 0);\n return sResult;\n case 'Hours':\n var hour = Math.floor(Math.floor((sResult.getHours()) / intervalSize) * intervalSize);\n sResult = new Date(sResult.getFullYear(), sResult.getMonth(), sResult.getDate(), hour, 0, 0);\n return sResult;\n case 'Minutes':\n var minutes = Math.floor(Math.floor((sResult.getMinutes()) / intervalSize) * intervalSize);\n sResult = new Date(sResult.getFullYear(), sResult.getMonth(), sResult.getDate(), sResult.getHours(), minutes, 0, 0);\n return sResult;\n case 'Seconds':\n var seconds = Math.floor(Math.floor((sResult.getSeconds()) / intervalSize) * intervalSize);\n sResult = new Date(sResult.getFullYear(), sResult.getMonth(), sResult.getDate(), sResult.getHours(), sResult.getMinutes(), seconds, 0);\n return sResult;\n }\n return sResult;\n };\n /**\n * Get module name\n */\n DateTime.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'DateTime';\n };\n /**\n * To destroy the category axis.\n * @return {void}\n * @private\n */\n DateTime.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return DateTime;\n}(NiceInterval));\nexport { DateTime };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { DoubleRange } from '../utils/double-range';\nimport { withIn } from '../../common/utils/helper';\nimport { NiceInterval } from '../axis/axis-helper';\n/**\n * `Category` module is used to render category axis.\n */\nvar Category = /** @class */ (function (_super) {\n __extends(Category, _super);\n /**\n * Constructor for the category module.\n * @private\n */\n function Category(chart) {\n return _super.call(this, chart) || this;\n }\n /**\n * The function to calculate the range and labels for the axis.\n * @return {void}\n */\n Category.prototype.calculateRangeAndInterval = function (size, axis) {\n this.calculateRange(axis, size);\n this.getActualRange(axis, size);\n this.applyRangePadding(axis, size);\n this.calculateVisibleLabels(axis);\n };\n /**\n * Actual Range for the axis.\n * @private\n */\n Category.prototype.getActualRange = function (axis, size) {\n this.initializeDoubleRange(axis);\n // axis.doubleRange = new DoubleRange(
this.min, this.max);\n axis.actualRange = {};\n if (!axis.interval) {\n axis.actualRange.interval = Math.max(1, Math.floor(axis.doubleRange.delta / axis.getActualDesiredIntervalsCount(size)));\n }\n else {\n axis.actualRange.interval = Math.ceil(axis.interval);\n }\n axis.actualRange.min = axis.doubleRange.start;\n axis.actualRange.max = axis.doubleRange.end;\n axis.actualRange.delta = axis.doubleRange.delta;\n };\n /**\n * Padding for the axis.\n * @private\n */\n Category.prototype.applyRangePadding = function (axis, size) {\n var ticks = (axis.labelPlacement === 'BetweenTicks' && this.chart.chartAreaType !== 'PolarRadar') ? 0.5 : 0;\n if (ticks > 0) {\n axis.actualRange.min -= ticks;\n axis.actualRange.max += ticks;\n }\n else {\n axis.actualRange.max += axis.actualRange.max ? 0 : 0.5;\n }\n axis.doubleRange = new DoubleRange(axis.actualRange.min, axis.actualRange.max);\n axis.actualRange.delta = axis.doubleRange.delta;\n this.calculateVisibleRange(size, axis);\n };\n /**\n * Calculate label for the axis.\n * @private\n */\n Category.prototype.calculateVisibleLabels = function (axis) {\n /*! Generate axis labels */\n axis.visibleLabels = [];\n var tempInterval = Math.ceil(axis.visibleRange.min);\n if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {\n tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);\n }\n var position;\n axis.startLabel = axis.labels[Math.round(axis.visibleRange.min)];\n axis.endLabel = axis.labels[Math.floor(axis.visibleRange.max)];\n for (; tempInterval <= axis.visibleRange.max; tempInterval += axis.visibleRange.interval) {\n if (withIn(tempInterval, axis.visibleRange) && axis.labels.length > 0) {\n position = Math.round(tempInterval);\n axis.triggerLabelRender(this.chart, position, axis.labels[position] ? axis.labels[position] : position.toString(), axis.labelStyle);\n }\n }\n axis.getMaxLabelWidth(this.chart);\n };\n /**\n * Get module name\n */\n Category.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Category';\n };\n /**\n * To destroy the category axis.\n * @return {void}\n * @private\n */\n Category.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return Category;\n}(NiceInterval));\nexport { Category };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Double } from '../axis/double-axis';\nimport { logBase, withIn } from '../../common/utils/helper';\n/**\n * `Logarithmic` module is used to render log axis.\n */\nvar Logarithmic = /** @class */ (function (_super) {\n __extends(Logarithmic, _super);\n /**\n * Constructor for the logerithmic module.\n * @private\n */\n function Logarithmic(chart) {\n return _super.call(this, chart) || this;\n }\n /**\n * The method to calculate the range and labels for the axis.\n * @return {void}\n */\n Logarithmic.prototype.calculateRangeAndInterval = function (size, axis) {\n this.calculateRange(axis, size);\n this.getActualRange(axis, size);\n this.calculateVisibleRange(size, axis);\n this.calculateVisibleLabels(axis, this.chart);\n };\n /**\n * Calculates actual range for the axis.\n * @private\n */\n Logarithmic.prototype.getActualRange = function (axis, size) {\n this.initializeDoubleRange(axis);\n this.min = this.min < 0 ? 0 : this.min;\n var logStart = logBase(this.min, axis.logBase);\n logStart = isFinite(logStart) ? logStart : this.min;\n var logEnd = logBase(this.max, axis.logBase);\n logEnd = isFinite(logStart) ? logEnd : this.max;\n this.min = Math.floor(logStart / 1);\n this.max = Math.ceil(logEnd / 1);\n axis.actualRange.interval = axis.interval || this.calculateLogNiceInterval(this.max - this.min, size, axis);\n axis.actualRange.min = this.min;\n axis.actualRange.max = this.max;\n axis.actualRange.delta = this.max - this.min;\n };\n /**\n * Calculates visible range for the axis.\n * @private\n */\n Logarithmic.prototype.calculateVisibleRange = function (size, axis) {\n axis.visibleRange = {\n interval: axis.actualRange.interval, max: axis.actualRange.max,\n min: axis.actualRange.min, delta: axis.actualRange.delta\n };\n if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {\n axis.calculateVisibleRange(size);\n axis.visibleRange.interval = (axis.enableAutoIntervalOnZooming) ?\n this.calculateLogNiceInterval(axis.doubleRange.delta, size, axis)\n : axis.visibleRange.interval;\n axis.visibleRange.interval = Math.floor(axis.visibleRange.interval) === 0 ? 1 : Math.floor(axis.visibleRange.interval);\n axis.triggerRangeRender(this.chart, axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.interval);\n }\n };\n /**\n * Calculates log iInteval for the axis.\n * @private\n */\n Logarithmic.prototype.calculateLogNiceInterval = function (delta, size, axis) {\n var actualDesiredIntervalsCount = axis.getActualDesiredIntervalsCount(size);\n var niceInterval = delta;\n var minInterval = Math.pow(10, Math.floor(logBase(niceInterval, 10)));\n for (var j = 0, len = axis.intervalDivs.length; j < len; j++) {\n var currentInterval = minInterval * axis.intervalDivs[j];\n if (actualDesiredIntervalsCount < (delta / currentInterval)) {\n break;\n }\n niceInterval = currentInterval;\n }\n return niceInterval;\n };\n /**\n * Calculates labels for the axis.\n * @private\n */\n Logarithmic.prototype.calculateVisibleLabels = function (axis, chart) {\n /*! Generate axis labels */\n var tempInterval = axis.visibleRange.min;\n axis.visibleLabels = [];\n if (axis.zoomFactor < 1 || axis.zoomPosition > 0) {\n tempInterval = axis.visibleRange.min - (axis.visibleRange.min % axis.visibleRange.interval);\n }\n var axisFormat = this.getFormat(axis);\n var isCustomFormat = axisFormat.match('{value}') !== null;\n axis.format = chart.intl.getNumberFormat({\n format: isCustomFormat ? '' : axisFormat,\n useGrouping: chart.useGroupingSeparator\n });\n axis.startLabel = axis.format(Math.pow(axis.logBase, axis.visibleRange.min));\n axis.endLabel = axis.format(Math.pow(axis.logBase, axis.visibleRange.max));\n for (; tempInterval <= axis.visibleRange.max; tempInterval += axis.visibleRange.interval) {\n if (withIn(tempInterval, axis.visibleRange)) {\n axis.triggerLabelRender(this.chart, tempInterval, this.formatValue(axis, isCustomFormat, axisFormat, Math.pow(axis.logBase, tempInterval)), axis.labelStyle);\n }\n }\n axis.getMaxLabelWidth(this.chart);\n };\n /**\n * Get module name\n */\n Logarithmic.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Logarithmic';\n };\n /**\n * To destroy the category axis.\n * @return {void}\n * @private\n */\n Logarithmic.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return Logarithmic;\n}(Double));\nexport { Logarithmic };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Category } from '../axis/category-axis';\nimport { withIn, firstToLowerCase } from '../../common/utils/helper';\n/**\n * Category module is used to render category axis.\n */\nvar DateTimeCategory = /** @class */ (function (_super) {\n __extends(DateTimeCategory, _super);\n /**\n * Constructor for the category module.\n * @private\n */\n function DateTimeCategory(chart) {\n return _super.call(this, chart) || this;\n }\n /**\n * The function to calculate the range and labels for the axis.\n * @return {void}\n * @private\n */\n DateTimeCategory.prototype.calculateRangeAndInterval = function (size, axis) {\n this.axisSize = size;\n this.calculateRange(axis, size);\n this.getActualRange(axis, size);\n this.applyRangePadding(axis, size);\n this.calculateVisibleLabels(axis);\n };\n /**\n * Calculate label for the axis.\n * @private\n */\n DateTimeCategory.prototype.calculateVisibleLabels = function (axis) {\n /*! Generate axis labels */\n axis.visibleLabels = [];\n var padding = axis.labelPlacement === 'BetweenTicks' ? 0.5 : 0;\n if (axis.intervalType === 'Auto') {\n this.calculateDateTimeNiceInterval(axis, this.axisSize, parseInt(axis.labels[0], 10), parseInt(axis.labels[axis.labels.length - 1], 10));\n }\n else {\n axis.actualIntervalType = axis.intervalType;\n }\n axis.format = this.chart.intl.getDateFormat({\n format: axis.labelFormat, type: firstToLowerCase(axis.skeletonType), skeleton: this.getSkeleton(axis)\n });\n for (var i = 0; i < axis.labels.length; i++) {\n if (!this.sameInterval(axis.labels.map(Number)[i], axis.labels.map(Number)[i - 1], axis.actualIntervalType, i)) {\n if (withIn(i - padding, axis.visibleRange)) {\n axis.triggerLabelRender(this.chart, i, axis.format(new Date(axis.labels.map(Number)[i])), axis.labelStyle);\n }\n }\n }\n axis.getMaxLabelWidth(this.chart);\n };\n /**\n * get same interval\n */\n DateTimeCategory.prototype.sameInterval = function (currentDate, previousDate, type, index) {\n var sameValue;\n if (index === 0) {\n sameValue = false;\n }\n else {\n switch (type) {\n case 'Years':\n sameValue = new Date(currentDate).getFullYear() === new Date(previousDate).getFullYear();\n break;\n case 'Months':\n sameValue = new Date(currentDate).getFullYear() === new Date(previousDate).getFullYear() &&\n new Date(currentDate).getMonth() === new Date(previousDate).getMonth();\n break;\n case 'Days':\n sameValue = (Math.abs(currentDate - previousDate) < 24 * 60 * 60 * 1000 &&\n new Date(currentDate).getDay() === new Date(previousDate).getDay());\n break;\n case 'Hours':\n sameValue = (Math.abs(currentDate - previousDate) < 60 * 60 * 1000 &&\n new Date(currentDate).getDay() === new Date(previousDate).getDay());\n break;\n case 'Minutes':\n sameValue = (Math.abs(currentDate - previousDate) < 60 * 1000 &&\n new Date(currentDate).getMinutes() === new Date(previousDate).getMinutes());\n break;\n case 'Seconds':\n sameValue = (Math.abs(currentDate - previousDate) < 1000 &&\n new Date(currentDate).getDay() === new Date(previousDate).getDay());\n break;\n }\n }\n return sameValue;\n };\n /**\n * Get module name\n */\n DateTimeCategory.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'DateTimeCategory';\n };\n /**\n * To destroy the category axis.\n * @return {void}\n * @private\n */\n DateTimeCategory.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return DateTimeCategory;\n}(Category));\nexport { DateTimeCategory };\n","/**\n * StripLine src\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Rect, TextOption, measureText, valueToCoefficient, textElement, logBase, RectOption } from '../../common/utils/helper';\n/**\n * `StripLine` module is used to render the stripLine in chart.\n */\nvar StripLine = /** @class */ (function () {\n function StripLine() {\n }\n StripLine.prototype.measureStripLine = function (axis, stripline, seriesClipRect) {\n var actualStart;\n var actualEnd;\n if (axis.valueType === 'DateTimeCategory') {\n var start = stripline.start;\n var end = stripline.end;\n actualStart = start ? axis.labels.indexOf(start.getTime().toString()) : null;\n actualEnd = end ? axis.labels.indexOf(end.getTime().toString()) : null;\n }\n else {\n actualStart = stripline.start;\n actualEnd = stripline.end;\n }\n var rect = this.getFromTovalue(actualStart, actualEnd, stripline.size, stripline.startFromAxis, axis);\n var height = (axis.orientation === 'Vertical') ? (rect.to - rect.from) * axis.rect.height : seriesClipRect.height;\n var width = (axis.orientation === 'Horizontal') ? (rect.to - rect.from) * axis.rect.width : seriesClipRect.width;\n var x = (axis.orientation === 'Vertical') ? seriesClipRect.x : ((rect.from * axis.rect.width) + axis.rect.x);\n var y = (axis.orientation === 'Horizontal') ? seriesClipRect.y : (axis.rect.y + axis.rect.height -\n (rect.to * axis.rect.height));\n if (height !== 0 && width !== 0) {\n return new Rect(x, y, width, height);\n }\n return new Rect(0, 0, 0, 0);\n };\n /**\n * To get from to value from start, end, size, start from axis\n */\n StripLine.prototype.getFromTovalue = function (start, end, size, startFromAxis, axis) {\n var from = startFromAxis ? axis.visibleRange.min : this.findValue(Math.min(start, isNullOrUndefined(end) ? start : end), axis);\n var to = this.findValue(this.getToValue(Math.max(start, isNullOrUndefined(end) ? start : end), from, size, axis, end), axis);\n return { from: valueToCoefficient(axis.isInversed ? to : from, axis), to: valueToCoefficient(axis.isInversed ? from : to, axis) };\n };\n StripLine.prototype.getToValue = function (to, from, size, axis, end) {\n if (axis.valueType === 'DateTime') {\n return (isNullOrUndefined(end) ? new Date(new Date(from).getTime() + size) : to);\n }\n else {\n return isNullOrUndefined(end) ? (axis.valueType === 'Logarithmic' ? Math.pow(axis.logBase, from) : from) + size : to;\n }\n };\n StripLine.prototype.findValue = function (value, axis) {\n if (axis.valueType === 'Logarithmic') {\n value = logBase(value, axis.logBase);\n }\n if (value < axis.visibleRange.min) {\n value = axis.visibleRange.min;\n }\n else if (value > axis.visibleRange.max) {\n value = axis.visibleRange.max;\n }\n return value;\n };\n /**\n * To render striplines based start and end.\n * @private\n * @param chart\n * @param position\n * @param axes\n */\n StripLine.prototype.renderStripLine = function (chart, position, axes) {\n var id = chart.element.id + '_stripline_' + position + '_';\n var striplineGroup = chart.renderer.createGroup({ id: id + 'collections' });\n var seriesClipRect = chart.chartAxisLayoutPanel.seriesClipRect;\n var rect;\n var count = 0;\n for (var _i = 0, axes_1 = axes; _i < axes_1.length; _i++) {\n var axis = axes_1[_i];\n for (var _a = 0, _b = axis.stripLines; _a < _b.length; _a++) {\n var stripline = _b[_a];\n if (stripline.visible && stripline.zIndex === position) {\n rect = this.measureStripLine(axis, stripline, seriesClipRect);\n this.renderRectangle(stripline, rect, id + 'rect_' + count, striplineGroup, chart);\n this.renderText(stripline, rect, id + 'text_' + count, striplineGroup, chart, axis);\n count++;\n }\n }\n }\n chart.svgObject.appendChild(striplineGroup);\n };\n StripLine.prototype.renderRectangle = function (stripline, rect, id, parent, chart) {\n parent.appendChild(chart.renderer.drawRectangle(new RectOption(id, stripline.color, stripline.border, stripline.opacity, rect, 0, 0, '', '')));\n };\n StripLine.prototype.renderText = function (stripline, rect, id, parent, chart, axis) {\n var textSize = measureText(stripline.text, stripline.textStyle);\n var textMid = 3 * (textSize.height / 8);\n var ty = rect.y + (rect.height / 2) + textMid;\n var rotation = (stripline.rotation === null) ? ((axis.orientation === 'Vertical') ? 0 : -90) : stripline.rotation;\n var tx = rect.x + (rect.width / 2);\n var alignment;\n var anchor;\n var padding = 5;\n if (axis.orientation === 'Horizontal') {\n tx = this.getTextStart(tx + (textMid * this.factor(stripline.horizontalAlignment)), rect.width, stripline.horizontalAlignment);\n ty = this.getTextStart(ty - textMid, rect.height, stripline.verticalAlignment);\n alignment = this.invertAlignment(stripline.horizontalAlignment);\n }\n else {\n tx = this.getTextStart(tx, rect.width, stripline.horizontalAlignment);\n ty = this.getTextStart(ty + (textMid * this.factor(stripline.verticalAlignment)) - padding, rect.height, stripline.verticalAlignment);\n alignment = stripline.verticalAlignment;\n }\n anchor = alignment;\n textElement(new TextOption(id, tx, ty, anchor, stripline.text, 'rotate(' + rotation + ' ' + tx + ',' + ty + ')', 'middle'), stripline.textStyle, stripline.textStyle.color, parent);\n };\n StripLine.prototype.invertAlignment = function (anchor) {\n switch (anchor) {\n case 'Start':\n anchor = 'Start';\n break;\n case 'End':\n anchor = 'End';\n break;\n }\n return anchor;\n };\n StripLine.prototype.factor = function (anchor) {\n var factor = 0;\n switch (anchor) {\n case 'Start':\n factor = 1;\n break;\n case 'End':\n factor = -1;\n break;\n }\n return factor;\n };\n StripLine.prototype.getTextStart = function (xy, size, textAlignment) {\n var padding = 5;\n switch (textAlignment) {\n case 'Start':\n xy = xy - (size / 2) + padding;\n break;\n case 'End':\n xy = xy + (size / 2) - padding;\n break;\n }\n return xy;\n };\n /**\n * To get the module name for `StripLine`.\n * @private\n */\n StripLine.prototype.getModuleName = function () {\n return 'StripLine';\n };\n /**\n * To destroy the `StripLine` module.\n * @private\n */\n StripLine.prototype.destroy = function () {\n // destroy peform here\n };\n return StripLine;\n}());\nexport { StripLine };\n","import { Rect, getAnimationFunction } from '../../common/utils/helper';\nimport { Animation } from '@syncfusion/ej2-base';\n/**\n * Base for line type series.\n */\nvar LineBase = /** @class */ (function () {\n /** @private */\n function LineBase(chartModule) {\n this.chart = chartModule;\n this.padding = 5;\n }\n /**\n * To improve the chart performance.\n * @return {void}\n * @private\n */\n LineBase.prototype.improveChartPerformance = function (series) {\n var tempPoints = [];\n var xVisibleRange = series.xAxis.visibleRange;\n var yVisibleRange = series.yAxis.visibleRange;\n var seriesPoints = series.points;\n var areaBounds = series.clipRect;\n var xTolerance = Math.abs(xVisibleRange.delta / areaBounds.width);\n var yTolerance = Math.abs(yVisibleRange.delta / areaBounds.height);\n var prevXValue = (seriesPoints[0] && seriesPoints[0].x > xTolerance) ? 0 : xTolerance;\n var prevYValue = (seriesPoints[0] && seriesPoints[0].y > yTolerance) ? 0 : yTolerance;\n var xVal = 0;\n var yVal = 0;\n var currentPoint;\n for (var _i = 0, seriesPoints_1 = seriesPoints; _i < seriesPoints_1.length; _i++) {\n var currentPoint_1 = seriesPoints_1[_i];\n currentPoint_1.symbolLocations = [];\n xVal = currentPoint_1.xValue ? currentPoint_1.xValue : xVisibleRange.min;\n yVal = currentPoint_1.yValue ? currentPoint_1.yValue : yVisibleRange.min;\n if (Math.abs(prevXValue - xVal) >= xTolerance || Math.abs(prevYValue - yVal) >= yTolerance) {\n tempPoints.push(currentPoint_1);\n prevXValue = xVal;\n prevYValue = yVal;\n }\n }\n return tempPoints;\n };\n /**\n * To generate the line path direction\n * @param firstPoint\n * @param secondPoint\n * @param series\n * @param isInverted\n * @param getPointLocation\n * @param startPoint\n */\n LineBase.prototype.getLineDirection = function (firstPoint, secondPoint, series, isInverted, getPointLocation, startPoint) {\n var direction = '';\n if (firstPoint != null) {\n var point1 = getPointLocation(firstPoint.xValue, firstPoint.yValue, series.xAxis, series.yAxis, isInverted, series);\n var point2 = getPointLocation(secondPoint.xValue, secondPoint.yValue, series.xAxis, series.yAxis, isInverted, series);\n direction = startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' +\n 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ';\n }\n return direction;\n };\n /**\n * To append the line path.\n * @return {void}\n * @private\n */\n LineBase.prototype.appendLinePath = function (options, series, clipRect) {\n var htmlObject = series.chart.renderer.drawPath(options);\n htmlObject.setAttribute('clip-path', clipRect);\n series.pathElement = htmlObject;\n series.seriesElement.appendChild(htmlObject);\n series.isRectSeries = false;\n };\n /**\n * To render the marker for the series.\n * @return {void}\n * @private\n */\n LineBase.prototype.renderMarker = function (series) {\n if (series.marker.visible) {\n series.chart.markerRender.render(series);\n }\n };\n /**\n * To do the progressive animation.\n * @return {void}\n * @private\n */\n LineBase.prototype.doProgressiveAnimation = function (series, option) {\n var animation = new Animation({});\n var path = series.pathElement;\n var strokeDashArray = path.getAttribute('stroke-dasharray');\n var pathLength = series.pathElement.getTotalLength();\n var currentTime;\n path.style.visibility = 'hidden';\n animation.animate(path, {\n duration: option.duration,\n delay: option.delay,\n progress: function (args) {\n if (args.timeStamp >= args.delay) {\n path.style.visibility = 'visible';\n currentTime = Math.abs(Math.round(((args.timeStamp - args.delay) * pathLength) / args.duration));\n path.setAttribute('stroke-dasharray', currentTime + ',' + pathLength);\n }\n },\n end: function (model) {\n path.setAttribute('stroke-dasharray', strokeDashArray);\n series.chart.trigger('animationComplete', { series: series });\n }\n });\n };\n /**\n * To store the symbol location and region\n * @param point\n * @param series\n * @param isInverted\n * @param getLocation\n */\n LineBase.prototype.storePointLocation = function (point, series, isInverted, getLocation) {\n point.symbolLocations.push(getLocation(point.xValue, point.yValue, series.xAxis, series.yAxis, isInverted, series));\n point.regions.push(new Rect(point.symbolLocations[0].x - series.marker.width, point.symbolLocations[0].y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height));\n };\n /**\n * To do the linear animation.\n * @return {void}\n * @private\n */\n LineBase.prototype.doLinearAnimation = function (series, animation) {\n var clipRect = series.clipRectElement.childNodes[0].childNodes[0];\n var effect = getAnimationFunction('Linear');\n var elementHeight = +clipRect.getAttribute('height');\n var elementWidth = +clipRect.getAttribute('width');\n var xCenter = +clipRect.getAttribute('x');\n var yCenter = series.chart.requireInvertedAxis ? +clipRect.getAttribute('height') + +clipRect.getAttribute('y') :\n +clipRect.getAttribute('y');\n var value;\n clipRect.style.visibility = 'hidden';\n new Animation({}).animate(clipRect, {\n duration: animation.duration,\n delay: animation.delay,\n progress: function (args) {\n if (args.timeStamp >= args.delay) {\n clipRect.style.visibility = 'visible';\n if (series.chart.requireInvertedAxis) {\n value = effect(args.timeStamp - args.delay, 0, elementHeight, args.duration);\n clipRect.setAttribute('transform', 'translate(' + xCenter + ' ' + yCenter +\n ') scale(1,' + (value / elementHeight) + ') translate(' + (-xCenter) + ' ' + (-yCenter) + ')');\n }\n else {\n value = effect(args.timeStamp - args.delay, 0, elementWidth, args.duration);\n clipRect.setAttribute('transform', 'translate(' + xCenter + ' ' + yCenter +\n ') scale(' + (value / elementWidth) + ', 1) translate(' + (-xCenter) + ' ' + (-yCenter) + ')');\n }\n }\n },\n end: function (model) {\n clipRect.setAttribute('transform', 'translate(0,0)');\n series.chart.trigger('animationComplete', { series: series });\n }\n });\n };\n return LineBase;\n}());\nexport { LineBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, getPoint, PathOption, TransformToVisible } from '../../common/utils/helper';\nimport { LineBase } from './line-base';\n/**\n * `LineSeries` module used to render the line series.\n */\nvar LineSeries = /** @class */ (function (_super) {\n __extends(LineSeries, _super);\n function LineSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Line Series.\n * @return {void}.\n * @private\n */\n LineSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var point1;\n var point2;\n var direction = '';\n var prevPoint = null;\n var startPoint = 'M';\n var options;\n var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? TransformToVisible : getPoint;\n var visiblePoints = this.improveChartPerformance(series);\n for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {\n var point = visiblePoints_1[_i];\n point.regions = [];\n if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {\n direction += this.getLineDirection(prevPoint, point, series, isInverted, getCoordinate, startPoint);\n startPoint = prevPoint ? 'L' : startPoint;\n prevPoint = point;\n this.storePointLocation(point, series, isInverted, getCoordinate);\n }\n else {\n prevPoint = (series.emptyPointSettings.mode === 'Drop') ? prevPoint : null;\n startPoint = (series.emptyPointSettings.mode === 'Drop') ? startPoint : 'M';\n point.symbolLocations = [];\n }\n }\n if (series.chart.chartAreaType === 'PolarRadar') {\n if (series.isClosed) {\n point2 = getCoordinate(visiblePoints[visiblePoints.length - 1].xValue, visiblePoints[visiblePoints.length - 1].yValue, xAxis, yAxis, isInverted, series);\n point1 = getCoordinate(visiblePoints[0].xValue, visiblePoints[0].yValue, xAxis, yAxis, isInverted, series);\n direction = direction.concat(startPoint + ' ' + point2.x + ' ' + point2.y + ' ' + 'L' + ' ' + point1.x + ' ' + point1.y);\n }\n }\n var name = series.category === 'Indicator' ? series.chart.element.id + '_Indicator_' + series.index + '_' + series.name :\n series.category === 'TrendLine' ? series.chart.element.id + '_Series_' + series.sourceIndex + '_TrendLine_' + series.index :\n series.chart.element.id + '_Series_' + series.index;\n options = new PathOption(name, 'none', series.width, series.interior, series.opacity, series.dashArray, direction);\n this.appendLinePath(options, series, '');\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n LineSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doProgressiveAnimation(series, option);\n };\n /**\n * Get module name.\n */\n LineSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'LineSeries';\n };\n /**\n * To destroy the line series.\n * @return {void}\n * @private\n */\n LineSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return LineSeries;\n}(LineBase));\nexport { LineSeries };\n","import { Animation } from '@syncfusion/ej2-base';\nimport { DoubleRange } from '../utils/double-range';\nimport { Rect, valueToCoefficient, getMinPointsDelta, PathOption } from '../../common/utils/helper';\nimport { getAnimationFunction, getPoint } from '../../common/utils/helper';\nimport { pointRender } from '../../common/model/constants';\n/**\n * Column Series Base\n */\nvar ColumnBase = /** @class */ (function () {\n function ColumnBase() {\n }\n /**\n * To get the position of the column series.\n * @return {DoubleRange}\n * @private\n */\n ColumnBase.prototype.getSideBySideInfo = function (series) {\n if (series.chart.enableSideBySidePlacement && !series.position) {\n this.getSideBySidePositions(series);\n }\n var position = !series.chart.enableSideBySidePlacement ? 0 : series.position;\n var rectCount = !series.chart.enableSideBySidePlacement ? 1 : series.rectCount;\n series.isRectSeries = true;\n var visibleSeries = series.chart.visibleSeries;\n var seriesSpacing = series.chart.enableSideBySidePlacement ? series.columnSpacing : 0; // Column Spacing\n var pointSpacing = series.columnWidth; // Column width\n var minimumPointDelta = getMinPointsDelta(series.xAxis, visibleSeries);\n var width = minimumPointDelta * pointSpacing;\n var radius;\n var location = (position) / rectCount - 0.5;\n var doubleRange = new DoubleRange(location, location + (1 / rectCount));\n if (!(isNaN(doubleRange.start) || isNaN(doubleRange.end))) {\n doubleRange = new DoubleRange(doubleRange.start * width, doubleRange.end * width);\n radius = seriesSpacing * doubleRange.delta;\n doubleRange = new DoubleRange(doubleRange.start + radius / 2, doubleRange.end - radius / 2);\n }\n return doubleRange;\n };\n /**\n * To get the rect values.\n * @return {Rect}\n * @private\n */\n ColumnBase.prototype.getRectangle = function (x1, y1, x2, y2, series) {\n var point1 = getPoint(x1, y1, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n var point2 = getPoint(x2, y2, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n return new Rect(Math.min(point1.x, point2.x), Math.min(point1.y, point2.y), Math.abs(point2.x - point1.x), Math.abs(point2.y - point1.y));\n };\n /**\n * To get the position of each series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.getSideBySidePositions = function (series) {\n var chart = series.chart;\n var seriesCollection = [];\n for (var _i = 0, _a = chart.columns; _i < _a.length; _i++) {\n var columnItem = _a[_i];\n for (var _b = 0, _c = chart.rows; _b < _c.length; _b++) {\n var item = _c[_b];\n this.findRectPosition(series.findSeriesCollection(columnItem, item, false));\n }\n }\n };\n ColumnBase.prototype.findRectPosition = function (seriesCollection) {\n var stackingGroup = [];\n var vSeries = { rectCount: 0, position: null };\n seriesCollection.forEach(function (value) {\n if (value.type.indexOf('Stacking') !== -1) {\n if (value.stackingGroup) {\n if (stackingGroup[value.stackingGroup] === undefined) {\n value.position = vSeries.rectCount;\n stackingGroup[value.stackingGroup] = vSeries.rectCount++;\n }\n else {\n value.position = stackingGroup[value.stackingGroup];\n }\n }\n else {\n if (vSeries.position === null) {\n value.position = vSeries.rectCount;\n vSeries.position = vSeries.rectCount++;\n }\n else {\n value.position = vSeries.position;\n }\n }\n }\n else {\n value.position = vSeries.rectCount++;\n }\n });\n seriesCollection.forEach(function (value) {\n value.rectCount = vSeries.rectCount;\n });\n };\n /**\n * Updates the symbollocation for points\n * @return void\n * @private\n */\n ColumnBase.prototype.updateSymbolLocation = function (point, rect, series) {\n if (!series.chart.requireInvertedAxis) {\n this.updateXRegion(point, rect, series);\n }\n else {\n this.updateYRegion(point, rect, series);\n }\n };\n /**\n * Update the region for the point.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.updateXRegion = function (point, rect, series) {\n point.regions.push(rect);\n point.symbolLocations.push({\n x: rect.x + (rect.width) / 2,\n y: (series.seriesType === 'BoxPlot' || series.seriesType.indexOf('HighLow') !== -1 ||\n (point.yValue >= 0 === !series.yAxis.isInversed)) ? rect.y : (rect.y + rect.height)\n });\n };\n /**\n * Update the region for the point in bar series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.updateYRegion = function (point, rect, series) {\n point.regions.push(rect);\n point.symbolLocations.push({\n x: (series.seriesType === 'BoxPlot' || series.seriesType.indexOf('HighLow') !== -1 ||\n (point.yValue >= 0 === !series.yAxis.isInversed)) ? rect.x + rect.width : rect.x,\n y: rect.y + rect.height / 2\n });\n };\n /**\n * To trigger the point rendering event.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.triggerEvent = function (series, point, fill, border) {\n var argsData = {\n cancel: false, name: pointRender, series: series, point: point,\n fill: series.setPointColor(point, fill),\n border: series.setBorderColor(point, border)\n };\n series.chart.trigger(pointRender, argsData);\n point.color = argsData.fill;\n return argsData;\n };\n /**\n * To draw the rectangle for points.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.drawRectangle = function (series, point, rect, argsData) {\n var check = series.chart.requireInvertedAxis ? rect.height : rect.width;\n if (check <= 0) {\n return null;\n }\n var direction = this.calculateRoundedRectPath(rect, series.cornerRadius.topLeft, series.cornerRadius.topRight, series.cornerRadius.bottomLeft, series.cornerRadius.bottomRight);\n var name = series.category === 'Indicator' ? series.chart.element.id + '_Indicator_' + series.index + '_' + series.name +\n '_Point_' + point.index : series.chart.element.id + '_Series_' + series.index + '_Point_' + point.index;\n var options = new PathOption(name, argsData.fill, argsData.border.width, argsData.border.color, series.opacity, series.dashArray, direction);\n var element = series.chart.renderer.drawPath(options);\n switch (series.seriesType) {\n case 'XY':\n element.setAttribute('aria-label', point.x.toString() + ':' + point.yValue.toString());\n break;\n case 'HighLow':\n element.setAttribute('aria-label', point.x.toString() + ':' + point.high.toString() + ':' + point.low.toString());\n break;\n }\n series.seriesElement.appendChild(element);\n };\n /**\n * To animate the series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.animate = function (series) {\n var rectElements = series.seriesElement.childNodes;\n var count = series.category === 'Indicator' ? 0 : 1;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (!point.symbolLocations.length && !(series.type === 'BoxAndWhisker' && point.regions.length)) {\n continue;\n }\n this.animateRect(rectElements[count], series, point);\n count++;\n }\n };\n /**\n * To animate the series.\n * @return {void}\n * @private\n */\n ColumnBase.prototype.animateRect = function (element, series, point) {\n var option = series.animation;\n var effect = getAnimationFunction('Linear');\n var isPlot = point.yValue < 0;\n var x;\n var y;\n var elementHeight = +point.regions[0].height;\n var elementWidth = +point.regions[0].width;\n var centerX;\n var centerY;\n if (!series.chart.requireInvertedAxis) {\n x = +point.regions[0].x;\n if (series.type.indexOf('Stacking') > -1) {\n y = (1 - valueToCoefficient(0, series.yAxis)) * (series.yAxis.rect.height);\n centerX = x;\n centerY = y;\n }\n else {\n y = +point.regions[0].y;\n centerY = (series.seriesType.indexOf('HighLow') !== -1 || series.type.indexOf('Waterfall') !== -1) ? y + elementHeight / 2 :\n (isPlot !== series.yAxis.isInversed) ? y : y + elementHeight;\n centerX = isPlot ? x : x + elementWidth;\n }\n }\n else {\n y = +point.regions[0].y;\n if (series.type.indexOf('Stacking') > -1) {\n x = (valueToCoefficient(0, series.yAxis)) * series.yAxis.rect.width;\n centerX = x;\n centerY = y;\n }\n else {\n x = +point.regions[0].x;\n centerY = isPlot ? y : y + elementHeight;\n centerX = (series.seriesType.indexOf('HighLow') !== -1 || series.type.indexOf('Waterfall') !== -1) ? x + elementWidth / 2 :\n (isPlot !== series.yAxis.isInversed) ? x + elementWidth : x;\n }\n }\n var value;\n element.style.visibility = 'hidden';\n new Animation({}).animate(element, {\n duration: option.duration,\n delay: option.delay,\n progress: function (args) {\n if (args.timeStamp >= args.delay) {\n element.style.visibility = 'visible';\n if (!series.chart.requireInvertedAxis) {\n elementHeight = elementHeight ? elementHeight : 1;\n value = effect(args.timeStamp - args.delay, 0, elementHeight, args.duration);\n element.setAttribute('transform', 'translate(' + centerX + ' ' + centerY +\n ') scale(1,' + (value / elementHeight) + ') translate(' + (-centerX) + ' ' + (-centerY) + ')');\n }\n else {\n elementWidth = elementWidth ? elementWidth : 1;\n value = effect(args.timeStamp - args.delay, 0, elementWidth, args.duration);\n element.setAttribute('transform', 'translate(' + centerX + ' ' + centerY +\n ') scale(' + (value / elementWidth) + ', 1) translate(' + (-centerX) + ' ' + (-centerY) + ')');\n }\n }\n },\n end: function (model) {\n element.setAttribute('transform', 'translate(0,0)');\n var seriesElement = series.seriesElement;\n if (element === seriesElement.lastElementChild || point.index === series.points.length - 1 ||\n (series.type === 'Waterfall' && element === seriesElement.children[seriesElement.childElementCount - 2])) {\n series.chart.trigger('animationComplete', { series: series });\n if (series.type === 'Waterfall') {\n var rectElements = seriesElement.childNodes;\n for (var i = 0; i < rectElements.length; i++) {\n if (rectElements[i].id.indexOf('Connector') !== -1) {\n rectElements[i].style.visibility = 'visible';\n rectElements[i].setAttribute('transform', 'translate(0,0)');\n }\n }\n }\n }\n }\n });\n };\n /**\n * To get rounded rect path direction\n */\n ColumnBase.prototype.calculateRoundedRectPath = function (rect, topLeft, topRight, bottomLeft, bottomRight) {\n return 'M' + ' ' + rect.x + ' ' + (topLeft + rect.y) +\n ' Q ' + rect.x + ' ' + rect.y + ' ' + (rect.x + topLeft) + ' ' +\n rect.y + ' ' + 'L' + ' ' + (rect.x + rect.width - topRight) + ' ' + rect.y +\n ' Q ' + (rect.x + rect.width) + ' ' + rect.y + ' ' +\n (rect.x + rect.width) + ' ' + (rect.y + topRight) + ' ' + 'L ' +\n (rect.x + rect.width) + ' ' + (rect.y + rect.height - bottomRight)\n + ' Q ' + (rect.x + rect.width) + ' ' + (rect.y + rect.height) + ' ' + (rect.x + rect.width - bottomRight) + ' ' +\n (rect.y + rect.height) + ' ' + 'L ' + (rect.x + bottomLeft) + ' ' + (rect.y + rect.height) + ' Q ' + rect.x + ' ' +\n (rect.y + rect.height) + ' ' + rect.x + ' ' + (rect.y + rect.height - bottomLeft) + ' ' + 'L' + ' ' + rect.x + ' ' +\n (topLeft + rect.y) + ' ' + 'Z';\n };\n return ColumnBase;\n}());\nexport { ColumnBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `ColumnSeries` Module used to render the column series.\n */\nvar ColumnSeries = /** @class */ (function (_super) {\n __extends(ColumnSeries, _super);\n function ColumnSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Column series.\n * @return {void}\n * @private\n */\n ColumnSeries.prototype.render = function (series) {\n var rect;\n var sideBySideInfo = this.getSideBySideInfo(series);\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var argsData;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var pointColumn = _a[_i];\n pointColumn.symbolLocations = [];\n pointColumn.regions = [];\n if (pointColumn.visible && withInRange(series.points[pointColumn.index - 1], pointColumn, series.points[pointColumn.index + 1], series)) {\n rect = this.getRectangle(pointColumn.xValue + sideBySideInfo.start, pointColumn.yValue, pointColumn.xValue + sideBySideInfo.end, origin, series);\n var color = series.category === 'Indicator' ? pointColumn.color : series.interior;\n argsData = this.triggerEvent(series, pointColumn, color, { width: series.border.width, color: series.border.color });\n if (!argsData.cancel) {\n this.updateSymbolLocation(pointColumn, rect, series);\n this.drawRectangle(series, pointColumn, rect, argsData);\n }\n }\n }\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n ColumnSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * Get module name.\n */\n ColumnSeries.prototype.getModuleName = function () {\n return 'ColumnSeries';\n /**\n * return the module name\n */\n };\n /**\n * To destroy the column series.\n * @return {void}\n * @private\n */\n ColumnSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return ColumnSeries;\n}(ColumnBase));\nexport { ColumnSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { getPoint } from '../../common/utils/helper';\nimport { LineBase } from './line-base';\nimport { RectOption } from '../../common/utils/helper';\nimport { DataUtil } from '@syncfusion/ej2-data';\n/**\n * Base class for multi colored series\n */\nvar MultiColoredSeries = /** @class */ (function (_super) {\n __extends(MultiColoredSeries, _super);\n function MultiColoredSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * To Generate the area path direction\n * @param xValue\n * @param yValue\n * @param series\n * @param isInverted\n * @param getPointLocation\n * @param startPoint\n * @param startPath\n */\n MultiColoredSeries.prototype.getAreaPathDirection = function (xValue, yValue, series, isInverted, getPointLocation, startPoint, startPath) {\n var direction = '';\n var firstPoint;\n if (startPoint === null) {\n firstPoint = getPointLocation(xValue, yValue, series.xAxis, series.yAxis, isInverted, series);\n direction += (startPath + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');\n }\n return direction;\n };\n /**\n * To Generate the empty point direction\n * @param firstPoint\n * @param secondPoint\n * @param series\n * @param isInverted\n * @param getPointLocation\n */\n MultiColoredSeries.prototype.getAreaEmptyDirection = function (firstPoint, secondPoint, series, isInverted, getPointLocation) {\n var direction = '';\n direction += this.getAreaPathDirection(firstPoint.x, firstPoint.y, series, isInverted, getPointLocation, null, 'L');\n direction += this.getAreaPathDirection(secondPoint.x, secondPoint.y, series, isInverted, getPointLocation, null, 'L');\n return direction;\n };\n /**\n * To set point color\n * @param points\n */\n MultiColoredSeries.prototype.setPointColor = function (currentPoint, previous, series, isXSegment, segments) {\n if (series.pointColorMapping === '') {\n var segment = void 0;\n var value = void 0;\n for (var i = 0; i < segments.length; i++) {\n segment = segments[i];\n value = isXSegment ? currentPoint.xValue : currentPoint.yValue;\n if (value <= this.getAxisValue(segment.value, isXSegment ? series.xAxis : series.yAxis, series.chart) || !segment.value) {\n currentPoint.interior = segment.color;\n break;\n }\n }\n if (currentPoint.interior == null) {\n currentPoint.interior = series.interior;\n }\n return false;\n }\n else {\n if (previous) {\n return series.setPointColor(currentPoint, series.interior) !== series.setPointColor(previous, series.interior);\n }\n else {\n return false;\n }\n }\n };\n MultiColoredSeries.prototype.sortSegments = function (series, chartSegments) {\n var axis = series.segmentAxis === 'X' ? series.xAxis : series.yAxis;\n var segments = [].concat(chartSegments);\n var access = this;\n return segments.sort(function (a, b) {\n return access.getAxisValue(a.value, axis, series.chart) - access.getAxisValue(b.value, axis, series.chart);\n });\n };\n /**\n * Segment calculation performed here\n * @param series\n * @param options\n * @param chartSegments\n */\n MultiColoredSeries.prototype.applySegmentAxis = function (series, options, segments) {\n var _this = this;\n if (series.pointColorMapping !== '') {\n options.map(function (option) {\n _this.appendLinePath(option, series, '');\n });\n return null;\n }\n var isXSegment = series.segmentAxis === 'X';\n var axis = isXSegment ? series.xAxis : series.yAxis;\n var chart = series.chart;\n var segment;\n this.includeSegment(segments, axis, series, segments.length);\n var length = segments.length;\n var value;\n var clipPath;\n var _loop_1 = function (index) {\n segment = segments[index];\n value = this_1.getAxisValue(segment.value, axis, series.chart);\n clipPath = this_1.createClipRect(index ? this_1.getAxisValue(segments[index - 1].value, axis, series.chart)\n : axis.visibleRange.min, value, series, index, isXSegment);\n if (clipPath) {\n options.map(function (option) {\n series.seriesElement.appendChild(chart.renderer.drawPath({\n 'clip-path': clipPath,\n 'stroke-dasharray': segment.dashArray,\n 'opacity': option.opacity,\n 'stroke': series.type.indexOf('Line') > -1 ? segment.color || series.interior : series.border.color,\n 'stroke-width': option['stroke-width'],\n 'fill': series.type.indexOf('Line') > -1 ? 'none' : segment.color || series.interior,\n 'id': option.id + '_Segment_' + index,\n 'd': option.d\n }));\n });\n }\n };\n var this_1 = this;\n for (var index = 0; index < length; index++) {\n _loop_1(index);\n }\n };\n MultiColoredSeries.prototype.includeSegment = function (segments, axis, series, length) {\n if (length <= 0) {\n segments.push({ value: axis.visibleRange.max, color: series.interior });\n return null;\n }\n if (this.getAxisValue(segments[length - 1].value, axis, series.chart) < axis.visibleRange.max) {\n segments.push({ value: axis.visibleRange.max, color: series.interior });\n }\n };\n /**\n * To create clip rect for segment axis\n * @param startValue\n * @param endValue\n * @param series\n * @param index\n * @param isX\n * @param chart\n */\n MultiColoredSeries.prototype.createClipRect = function (startValue, endValue, series, index, isX) {\n var isRequired = series.chart.requireInvertedAxis;\n var startPointLocation = getPoint(isX ? startValue : series.xAxis.visibleRange.min, isX ? series.yAxis.visibleRange.max : endValue, series.xAxis, series.yAxis, isRequired);\n var endPointLocation = getPoint(isX ? endValue : series.xAxis.visibleRange.max, isX ? series.yAxis.visibleRange.min : startValue, series.xAxis, series.yAxis, isRequired);\n endPointLocation = isRequired ?\n [startPointLocation, startPointLocation = endPointLocation][0] : endPointLocation;\n if ((endPointLocation.x - startPointLocation.x > 0) && (endPointLocation.y - startPointLocation.y > 0)) {\n series.seriesElement.appendChild(series.chart.renderer.drawClipPath(new RectOption(series.chart.element.id + '_ChartSegmentClipRect_' + index, 'transparent', { width: 1, color: 'Gray' }, 1, {\n x: startPointLocation.x,\n y: startPointLocation.y,\n width: endPointLocation.x - startPointLocation.x,\n height: endPointLocation.y - startPointLocation.y\n })));\n return 'url(#' + series.chart.element.id + '_ChartSegmentClipRect_' + index + ')';\n }\n return null;\n };\n /**\n * To get exact value from segment value\n * @param segmentValue\n * @param axis\n * @param chart\n */\n MultiColoredSeries.prototype.getAxisValue = function (segmentValue, axis, chart) {\n if (segmentValue === null) {\n segmentValue = axis.visibleRange.max;\n }\n if (axis.valueType === 'DateTime') {\n var option = { skeleton: 'full', type: 'dateTime' };\n return Date.parse(chart.intl.getDateParser(option)(chart.intl.getDateFormat(option)(new Date(DataUtil.parse.parseJson({ val: segmentValue }).val))));\n }\n else if (axis.valueType.indexOf('Category') > -1) {\n var xValue = axis.valueType === 'DateTimeCategory' ?\n (segmentValue.getTime()).toString() :\n segmentValue;\n return (axis.labels.indexOf(xValue) < 0) ? +segmentValue : axis.labels.indexOf(xValue);\n }\n else {\n return +segmentValue;\n }\n };\n return MultiColoredSeries;\n}(LineBase));\nexport { MultiColoredSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { getPoint, withInRange, ChartLocation, PathOption, TransformToVisible } from '../../common/utils/helper';\nimport { MultiColoredSeries } from './multi-colored-base';\n/**\n * `AreaSeries` module is used to render the area series.\n */\nvar AreaSeries = /** @class */ (function (_super) {\n __extends(AreaSeries, _super);\n function AreaSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Area series.\n * @return {void}\n * @private\n */\n AreaSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var _this = this;\n var startPoint = null;\n var direction = '';\n var origin = series.chart.chartAreaType === 'PolarRadar' ? series.points[0].yValue :\n Math.max(series.yAxis.visibleRange.min, 0);\n var currentXValue;\n var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? TransformToVisible : getPoint;\n series.points.map(function (point, i, seriesPoints) {\n currentXValue = point.xValue;\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(seriesPoints[i - 1], point, seriesPoints[i + 1], series)) {\n direction += _this.getAreaPathDirection(currentXValue, origin, series, isInverted, getCoordinate, startPoint, 'M');\n startPoint = startPoint || new ChartLocation(currentXValue, origin);\n // First Point to draw the area path\n direction += _this.getAreaPathDirection(currentXValue, point.yValue, series, isInverted, getCoordinate, null, 'L');\n if (seriesPoints[i + 1] && !seriesPoints[i + 1].visible && series.emptyPointSettings.mode !== 'Drop') {\n direction += _this.getAreaEmptyDirection({ 'x': currentXValue, 'y': origin }, startPoint, series, isInverted, getCoordinate);\n startPoint = null;\n }\n _this.storePointLocation(point, series, isInverted, getPoint);\n }\n });\n this.appendLinePath(new PathOption(series.chart.element.id + '_Series_' + series.index, series.interior, series.border.width, series.border.color, series.opacity, series.dashArray, (series.points.length > 1 ? (direction + this.getAreaPathDirection(series.points[series.points.length - 1].xValue, series.chart.chartAreaType === 'PolarRadar' ?\n series.points[series.points.length - 1].yValue : origin, series, isInverted, getCoordinate, null, 'L')) : '')), series, '');\n this.renderMarker(series);\n };\n /**\n * To destroy the area series.\n * @return {void}\n * @private\n */\n AreaSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n /**\n * Get module name\n */\n AreaSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'AreaSeries';\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n AreaSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doLinearAnimation(series, option);\n };\n return AreaSeries;\n}(MultiColoredSeries));\nexport { AreaSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `BarSeries` module is used to render the bar series.\n */\nvar BarSeries = /** @class */ (function (_super) {\n __extends(BarSeries, _super);\n function BarSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Bar series.\n * @return {void}\n * @private\n */\n BarSeries.prototype.render = function (series) {\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var sideBySideInfo = this.getSideBySideInfo(series);\n var rect;\n var argsData;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var pointBar = _a[_i];\n pointBar.symbolLocations = [];\n pointBar.regions = [];\n if (pointBar.visible && withInRange(series.points[pointBar.index - 1], pointBar, series.points[pointBar.index + 1], series)) {\n rect = this.getRectangle(pointBar.xValue + sideBySideInfo.start, pointBar.yValue, pointBar.xValue + sideBySideInfo.end, origin, series);\n argsData = this.triggerEvent(series, pointBar, series.interior, { width: series.border.width, color: series.border.color });\n if (!argsData.cancel) {\n this.updateSymbolLocation(pointBar, rect, series);\n this.drawRectangle(series, pointBar, rect, argsData);\n }\n }\n }\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n BarSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * To destroy the bar series.\n * @return {void}\n * @private\n */\n BarSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name\n */\n BarSeries.prototype.getModuleName = function () {\n return 'BarSeries';\n };\n return BarSeries;\n}(ColumnBase));\nexport { BarSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { valueToCoefficient, TextOption, inside, measureText } from '../../common/utils/helper';\nimport { Size, Rect, PathOption, CircleOption } from '../../common/utils/helper';\nimport { LineBase } from '../series/line-base';\nimport { textElement, valueToPolarCoefficient, CoefficientToVector } from '../../common/utils/helper';\n/**\n * Specifies the Polar Axis Layout.\n */\nvar axisPadding = 10;\nvar PolarRadarPanel = /** @class */ (function (_super) {\n __extends(PolarRadarPanel, _super);\n function PolarRadarPanel() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Measure the polar radar axis size.\n * @return {void}\n * @private\n */\n PolarRadarPanel.prototype.measureAxis = function (rect) {\n var chart = this.chart;\n this.initialClipRect = rect;\n this.seriesClipRect = new Rect(rect.x, rect.y, rect.width, rect.height);\n //Measure axis size calculation\n this.measureRowAxis(chart, this.initialClipRect);\n this.measureColumnAxis(chart, this.initialClipRect);\n this.calculateAxisSize();\n };\n PolarRadarPanel.prototype.measureRowAxis = function (chart, rect) {\n this.calculateRowSize(rect);\n var row = chart.rows[0];\n this.measureDefinition(row, chart, new Size(chart.availableSize.width, row.computedHeight), rect);\n };\n PolarRadarPanel.prototype.measureColumnAxis = function (chart, rect) {\n this.calculateColumnSize(rect);\n var column = chart.columns[0];\n this.measureDefinition(column, chart, new Size(column.computedWidth, chart.availableSize.height), rect);\n };\n /**\n * Measure the column and row in chart.\n * @return {void}\n * @private\n */\n PolarRadarPanel.prototype.measureDefinition = function (definition, chart, size, clipRect) {\n for (var _i = 0, _a = definition.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n axis.getModule(chart);\n axis.baseModule.calculateRangeAndInterval(size, axis);\n }\n };\n /**\n * Measure the axis.\n * @return {void}\n * @private\n */\n PolarRadarPanel.prototype.calculateAxisSize = function () {\n var chart = this.chart;\n var axis;\n var padding = 5;\n this.centerX = this.initialClipRect.width * 0.5 + this.initialClipRect.x;\n this.centerY = this.initialClipRect.height * 0.5 + this.initialClipRect.y;\n chart.radius = Math.min(this.initialClipRect.width, this.initialClipRect.height) / 2 - padding -\n chart.primaryXAxis.majorTickLines.height - chart.primaryXAxis.maxLabelSize.height;\n chart.radius = (chart.primaryXAxis.coefficient * chart.radius) / 100;\n this.seriesClipRect.y = this.centerY - chart.radius;\n this.seriesClipRect.x = this.centerX - chart.radius;\n this.seriesClipRect.height = 2 * chart.radius;\n this.seriesClipRect.width = 2 * chart.radius;\n this.calculateRowSize(this.seriesClipRect);\n axis = chart.primaryYAxis;\n axis.rect = this.seriesClipRect;\n this.calculateColumnSize(this.seriesClipRect);\n axis = chart.primaryXAxis;\n axis.rect = this.seriesClipRect;\n };\n /**\n * Measure the axis.\n * @return {void}\n * @private\n */\n PolarRadarPanel.prototype.measure = function () {\n var chart = this.chart;\n chart.verticalAxes.push(chart.primaryYAxis);\n var row = chart.rows[0];\n row.axes[0] = chart.primaryYAxis;\n chart.rows[0] = row;\n chart.horizontalAxes.push(chart.primaryXAxis);\n var column = chart.columns[0];\n column.axes[0] = chart.primaryXAxis;\n chart.columns[0] = column;\n };\n /**\n * Measure the row size.\n * @return {void}\n */\n PolarRadarPanel.prototype.calculateRowSize = function (rect) {\n /*! Calculate row size */\n var chart = this.chart;\n var row = chart.rows[0];\n row.computedHeight = rect.height / 2;\n row.computedTop = rect.y;\n chart.rows[0] = row;\n };\n /**\n * Measure the row size.\n * @return {void}\n */\n PolarRadarPanel.prototype.calculateColumnSize = function (rect) {\n /*! Calculate column size */\n var chart = this.chart;\n var column = chart.columns[0];\n column.computedLeft = rect.x;\n column.computedWidth = rect.width;\n chart.columns[0] = column;\n };\n /**\n * To render the axis element.\n * @return {void}\n * @private\n */\n PolarRadarPanel.prototype.renderAxes = function () {\n var axis;\n var chart = this.chart;\n this.startAngle = chart.primaryXAxis.startAngle;\n var axisElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisCollection' });\n var axisLineElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisOutsideCollection' });\n for (var i = 0, len = chart.axisCollections.length; i < len; i++) {\n this.element = chart.renderer.createGroup({ id: chart.element.id + 'AxisGroup' + i });\n axis = chart.axisCollections[i];\n if (axis.orientation === 'Horizontal') {\n if (axis.majorGridLines.width > 0 || axis.majorTickLines.width > 0) {\n this.drawXAxisGridLine(axis, i);\n }\n if (axis.visible) {\n this.drawXAxisLabels(axis, i);\n }\n }\n else {\n this.drawYAxisGridLine(axis, i);\n if (axis.lineStyle.width > 0) {\n this.drawYAxisLine(axis, i, axis.plotOffset, 0);\n }\n if (axis.visible) {\n this.drawYAxisLabels(axis, i);\n }\n }\n axisElement.appendChild(this.element);\n }\n axisElement.appendChild(this.element);\n chart.svgObject.appendChild(axisElement);\n return axisLineElement;\n };\n PolarRadarPanel.prototype.drawYAxisLine = function (axis, index, plotX, plotY) {\n var chart = this.chart;\n var optionsLine = {};\n var vector = CoefficientToVector(valueToPolarCoefficient(axis.visibleLabels[0].value, axis), this.startAngle);\n var axisLine = 'M ' + this.centerX + ' ' + this.centerY + 'L ' +\n (this.centerX + chart.radius * vector.x) + ' ' + (this.centerY + chart.radius * vector.y);\n optionsLine = {\n 'id': chart.element.id + 'AxisLine_' + index,\n 'd': axisLine,\n 'stroke-dasharray': axis.lineStyle.dashArray,\n 'stroke-width': axis.lineStyle.width,\n 'stroke': axis.lineStyle.color || chart.themeStyle.axisLine\n };\n chart.yAxisElements.appendChild(chart.renderer.drawPath(optionsLine));\n };\n PolarRadarPanel.prototype.drawYAxisLabels = function (axis, index) {\n var chart = this.chart;\n var elementSize;\n var options;\n var pointX = 0;\n var pointY = 0;\n var vector;\n var angle = this.startAngle < 0 ? this.startAngle + 360 : this.startAngle;\n var anchor = 'middle';\n var radius;\n var padding = 5;\n var labelElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisLabels' + index });\n vector = CoefficientToVector(valueToPolarCoefficient(axis.visibleLabels[0].value, axis), this.startAngle);\n for (var i = 0, len = axis.visibleLabels.length; i < len; i++) {\n radius = chart.radius * valueToCoefficient(axis.visibleLabels[i].value, axis);\n elementSize = axis.visibleLabels[i].size;\n radius = chart.radius * valueToCoefficient(axis.visibleLabels[i].value, axis);\n pointX = (this.centerX + radius * vector.x) + ((axis.majorTickLines.height + elementSize.width / 2 + padding / 2)\n * (Math.cos(angle * Math.PI / 180)) * (axis.labelPosition === 'Inside' ? 1 : -1));\n pointY = (this.centerY + radius * vector.y) + ((axis.majorTickLines.height + elementSize.height / 2)\n * (Math.sin(angle * Math.PI / 180)) * (axis.labelPosition === 'Inside' ? 1 : -1));\n options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY + (elementSize.height / 4), anchor, axis.visibleLabels[i].text);\n textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);\n }\n chart.yAxisElements.appendChild(labelElement);\n };\n PolarRadarPanel.prototype.drawYAxisGridLine = function (axis, index) {\n var chart = this.chart;\n var options;\n var radius;\n var majorTick = '';\n var majorGrid = '';\n var vector;\n var vector2;\n var angle = this.startAngle < 0 ? this.startAngle + 360 : this.startAngle;\n var rect = axis.rect;\n var x1;\n var y1;\n var x2;\n var y2;\n var border = {\n color: axis.majorGridLines.color || chart.themeStyle.majorGridLine,\n width: axis.majorGridLines.width\n };\n if (axis.majorGridLines.width > 0) {\n if (chart.visibleSeries[0].type === 'Polar') {\n for (var j = 0; j < axis.visibleLabels.length; j++) {\n radius = chart.radius * valueToCoefficient(axis.visibleLabels[j].value, axis);\n options = new CircleOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', border, axis.majorGridLines.width, this.centerX, this.centerY, radius);\n this.element.appendChild(chart.renderer.drawCircle(options));\n }\n }\n else {\n for (var j = 0; j < axis.visibleLabels.length; j++) {\n radius = chart.radius * valueToCoefficient(axis.visibleLabels[j].value, axis);\n for (var i = 0, len = chart.primaryXAxis.visibleLabels.length; i < len; i++) {\n vector = CoefficientToVector(valueToPolarCoefficient(chart.primaryXAxis.visibleLabels[i].value, chart.primaryXAxis), this.startAngle);\n if (i + 1 < len) {\n vector2 = CoefficientToVector(valueToPolarCoefficient(chart.primaryXAxis.visibleLabels[i + 1].value, chart.primaryXAxis), this.startAngle);\n }\n else {\n vector2 = CoefficientToVector(valueToPolarCoefficient(chart.primaryXAxis.visibleLabels[0].value, chart.primaryXAxis), this.startAngle);\n }\n x1 = this.centerX + radius * vector.x;\n y1 = this.centerY + radius * vector.y;\n x2 = this.centerX + radius * vector2.x;\n y2 = this.centerY + radius * vector2.y;\n majorGrid = majorGrid.concat('M' + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x2 + ' ' + y2 + ' ');\n }\n }\n options = new PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, null, majorGrid);\n this.element.appendChild(chart.renderer.drawPath(options));\n }\n }\n if (axis.majorTickLines.width > 0) {\n vector = CoefficientToVector(valueToPolarCoefficient(axis.visibleLabels[0].value, axis), this.startAngle);\n for (var i = 0; i < axis.visibleLabels.length; i++) {\n radius = chart.radius * valueToCoefficient(axis.visibleLabels[i].value, axis);\n x1 = this.centerX + radius * vector.x;\n y1 = this.centerY + radius * vector.y;\n x2 = x1 + (axis.majorTickLines.height * (Math.cos(angle * Math.PI / 180)) * (axis.tickPosition === 'Inside' ? 1 : -1));\n y2 = y1 + (axis.majorTickLines.height * (Math.sin(angle * Math.PI / 180)) * (axis.tickPosition === 'Inside' ? 1 : -1));\n majorTick = majorTick.concat('M ' + x1 + ' ' + y1 +\n ' L ' + x2 + ' ' + y2 + ' ');\n }\n }\n this.renderTickLine(axis, index, majorTick, '');\n };\n PolarRadarPanel.prototype.drawXAxisGridLine = function (axis, index) {\n var chart = this.chart;\n var tempInterval;\n var vector;\n var majorGrid = '';\n var majorTick = '';\n var minorGirdLine = '';\n var minorTickLine = '';\n var x1 = this.centerX;\n var x2;\n var y1 = this.centerY;\n var y2;\n var minorDirection;\n var tickSize = axis.majorTickLines.height;\n var rect = axis.rect;\n var length = axis.visibleLabels.length;\n //Gridlines\n for (var i = 0; i < length; i++) {\n tempInterval = axis.visibleLabels[i].value;\n vector = CoefficientToVector(valueToPolarCoefficient(axis.visibleLabels[i].value, axis), this.startAngle);\n x2 = this.centerX + chart.radius * vector.x;\n y2 = this.centerY + chart.radius * vector.y;\n var xLoc = x2 + (axis.majorTickLines.height * vector.x * (axis.tickPosition === 'Inside' ? -1 : 1));\n var yLoc = y2 + (axis.majorTickLines.height * vector.y * (axis.tickPosition === 'Inside' ? -1 : 1));\n majorGrid = majorGrid.concat('M ' + x1 + ' ' + y1 + ' ' + 'L' + x2 + ' ' + y2);\n majorTick = majorTick.concat('M ' + x2 + ' ' + y2 +\n ' L ' + xLoc + ' ' + yLoc + ' ');\n if (axis.minorTicksPerInterval > 0 && (axis.minorGridLines.width > 0 || axis.minorTickLines.width > 0)\n && axis.valueType !== 'Category' && chart.visibleSeries[0].type !== 'Radar') {\n minorDirection = this.drawAxisMinorLine(axis, tempInterval, minorGirdLine, minorTickLine);\n minorGirdLine = minorDirection[0];\n minorTickLine = minorDirection[1];\n }\n }\n this.renderTickLine(axis, index, majorTick, minorTickLine);\n this.renderGridLine(axis, index, majorGrid, minorGirdLine);\n };\n PolarRadarPanel.prototype.drawAxisMinorLine = function (axis, tempInterval, minorGird, minorTick) {\n var value = tempInterval;\n var x;\n var y;\n var vector;\n var range = axis.visibleRange;\n var direction = [];\n var tickSize = axis.minorTickLines.height;\n var rect = axis.rect;\n for (var j = 0; j < axis.minorTicksPerInterval; j++) {\n value += (axis.valueType === 'DateTime' ? axis.dateTimeInterval : axis.visibleRange.interval) /\n (axis.minorTicksPerInterval + 1);\n if (inside(value, range)) {\n vector = CoefficientToVector(valueToPolarCoefficient(value, axis), this.startAngle);\n x = this.centerX + this.chart.radius * vector.x;\n y = this.centerY + this.chart.radius * vector.y;\n var tickXSize = x + (axis.minorTickLines.height * vector.x * (axis.tickPosition === 'Inside' ? -1 : 1));\n var tickYSize = y + (axis.minorTickLines.height * vector.y * (axis.tickPosition === 'Inside' ? -1 : 1));\n minorGird = minorGird.concat('M' + ' ' + this.centerX + ' ' + this.centerY\n + 'L ' + x + ' ' + y);\n minorTick = minorTick.concat('M' + ' ' + x + ' ' + y + 'L' + ' ' + (tickXSize) + ' ' +\n (tickYSize));\n }\n }\n direction.push(minorGird);\n direction.push(minorTick);\n return direction;\n };\n /**\n * To render the axis label.\n * @return {void}\n * @private\n */\n PolarRadarPanel.prototype.drawXAxisLabels = function (axis, index) {\n var chart = this.chart;\n var pointX = 0;\n var elementSize;\n var pointY = 0;\n var labelElement = chart.renderer.createGroup({ id: chart.element.id + 'AxisLabels' + index });\n var options;\n var vector;\n var labelText;\n var firstLabelX;\n var islabelInside = axis.labelPosition === 'Inside';\n var padding = 5;\n var lastLabelX;\n var textAnchor = '';\n var ticksbwtLabel = axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks'\n && chart.visibleSeries[0].type !== 'Radar' ? 0.5 : 0;\n var radius = chart.radius + axis.majorTickLines.height;\n radius = (islabelInside) ? -radius : radius;\n for (var i = 0, len = axis.visibleLabels.length; i < len; i++) {\n vector = CoefficientToVector(valueToPolarCoefficient(axis.visibleLabels[i].value + ticksbwtLabel, axis), this.startAngle);\n if (!isNaN(vector.x) && !isNaN(vector.y)) {\n pointX = this.centerX + (radius + axis.majorTickLines.height + padding) * vector.x;\n pointY = this.centerY + (radius + axis.majorTickLines.height + padding) * vector.y;\n textAnchor = parseFloat(pointX.toFixed(1)) === parseFloat(this.centerX.toFixed(1)) ? 'middle' :\n ((pointX < this.centerX && !islabelInside) || (pointX > this.centerX && islabelInside)) ? 'end' : 'start';\n }\n labelText = axis.visibleLabels[i].text;\n if (i === 0) {\n firstLabelX = pointX;\n }\n else if (i === axis.visibleLabels.length - 1 && axis.valueType !== 'Category') {\n lastLabelX = measureText(labelText, axis.labelStyle).height;\n lastLabelX += pointX;\n labelText = (lastLabelX > firstLabelX) ? '' : labelText;\n }\n options = new TextOption(chart.element.id + index + '_AxisLabel_' + i, pointX, pointY, textAnchor, labelText, '', 'central');\n textElement(options, axis.labelStyle, axis.labelStyle.color || chart.themeStyle.axisLabel, labelElement);\n }\n this.element.appendChild(labelElement);\n };\n PolarRadarPanel.prototype.renderTickLine = function (axis, index, majorTickLine, minorTickLine) {\n var tickOptions;\n var chart = this.chart;\n if (axis.majorTickLines.width > 0) {\n tickOptions = new PathOption(chart.element.id + '_MajorTickLine_' + index, 'transparent', axis.majorTickLines.width, axis.majorTickLines.color || chart.themeStyle.majorTickLine, null, null, majorTickLine);\n chart.yAxisElements.appendChild(chart.renderer.drawPath(tickOptions));\n }\n if (axis.minorTickLines.width > 0) {\n tickOptions = new PathOption(chart.element.id + '_MinorTickLine_' + index, 'transparent', axis.minorTickLines.width, axis.minorTickLines.color || chart.themeStyle.minorTickLine, null, null, minorTickLine);\n chart.yAxisElements.appendChild(chart.renderer.drawPath(tickOptions));\n }\n };\n PolarRadarPanel.prototype.renderGridLine = function (axis, index, majorGrid, minorGird) {\n var chart = this.chart;\n var gridOptions;\n if (axis.majorGridLines.width > 0) {\n gridOptions = new PathOption(chart.element.id + '_MajorGridLine_' + index, 'transparent', axis.majorGridLines.width, axis.majorGridLines.color || chart.themeStyle.majorGridLine, null, axis.majorGridLines.dashArray, majorGrid);\n this.element.appendChild(chart.renderer.drawPath(gridOptions));\n }\n if (axis.minorGridLines.width > 0) {\n gridOptions = new PathOption(chart.element.id + '_MinorGridLine_' + index, 'transparent', axis.minorGridLines.width, axis.minorGridLines.color || chart.themeStyle.minorGridLine, null, axis.minorGridLines.dashArray, minorGird);\n this.element.appendChild(chart.renderer.drawPath(gridOptions));\n }\n };\n return PolarRadarPanel;\n}(LineBase));\nexport { PolarRadarPanel };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, PathOption, logBase, markerAnimate, PolarArc, valueToCoefficient, firstToLowerCase } from '../../common/utils/helper';\nimport { PolarRadarPanel } from '../axis/polar-radar-panel';\nimport { pointRender } from '../../common/model/constants';\nimport { Animation } from '@syncfusion/ej2-base';\n/**\n * `PolarSeries` module is used to render the polar series.\n */\nvar PolarSeries = /** @class */ (function (_super) {\n __extends(PolarSeries, _super);\n function PolarSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Polar Series.\n * @return {void}.\n * @private\n */\n PolarSeries.prototype.render = function (series) {\n var seriesType = firstToLowerCase(series.drawType);\n if (series.drawType.indexOf('Column') > -1) {\n this.columnDrawTypeRender(series);\n }\n else {\n series.chart[seriesType + 'SeriesModule'].render(series, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n }\n };\n /**\n * Render Column DrawType.\n * @return {void}.\n * @private\n */\n PolarSeries.prototype.columnDrawTypeRender = function (series) {\n var visiblePoints = series.points;\n var rect;\n var options;\n var argsData;\n var startAngle;\n var endAngle;\n var itemCurrentXPos;\n var radius;\n var pointStartAngle;\n var pointEndAngle;\n var x1;\n var x2;\n var y1;\n var y2;\n var startValue;\n var endValue;\n var innerRadius;\n var centerX = (series.clipRect.width / 2) + series.clipRect.x;\n var dStartX;\n var dStartY;\n var centerY = (series.clipRect.height / 2) + series.clipRect.y;\n var dEndX;\n var dEndY;\n var axisInversed = series.xAxis.isInversed ? 1 : 0;\n var direction = '';\n var sumofYValues = 0;\n var interval = (series.points[1] ? series.points[1].xValue : 2 * series.points[0].xValue) - series.points[0].xValue;\n var ticks = series.xAxis.valueType === 'Category' && series.xAxis.labelPlacement === 'BetweenTicks' ? 0 : interval / 2;\n var rangeInterval = series.xAxis.valueType === 'DateTime' ? series.xAxis.dateTimeInterval : 1;\n var min = series.xAxis.actualRange.min;\n var inversedValue;\n this.getSeriesPosition(series);\n var position = series.xAxis.isInversed ? (series.rectCount - 1 - series.position) : series.position;\n var ticksbwtLabel = series.xAxis.valueType === 'Category' && series.xAxis.labelPlacement === 'BetweenTicks' ? 0.5\n : 0.5 - (series.rectCount / 2);\n do {\n sumofYValues += rangeInterval;\n min += rangeInterval;\n } while (min <= series.xAxis.actualRange.max - (series.xAxis.valueType === 'Category' ? 0 : 1));\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n inversedValue = series.xAxis.isInversed ? (series.xAxis.visibleRange.max - point.xValue) :\n point.xValue - series.xAxis.visibleRange.min;\n itemCurrentXPos = (inversedValue) +\n ((interval / series.rectCount) * position - ticks) + (sumofYValues / 360 * series.xAxis.startAngle);\n itemCurrentXPos = (((itemCurrentXPos) / (sumofYValues)));\n startAngle = 2 * Math.PI * (itemCurrentXPos + series.xAxis.startAngle);\n endAngle = 2 * Math.PI * ((itemCurrentXPos + series.xAxis.startAngle) + (interval / series.rectCount) / (sumofYValues));\n pointStartAngle = startAngle;\n pointEndAngle = endAngle;\n startAngle = (startAngle - 0.5 * Math.PI);\n endAngle = (endAngle - 0.5 * Math.PI) - 0.000001;\n if (series.drawType === 'StackingColumn' || series.drawType === 'RangeColumn') {\n startValue = series.drawType === 'RangeColumn' ? point.low : series.stackedValues.startValues[point.index];\n endValue = series.drawType === 'RangeColumn' ? point.high : series.stackedValues.endValues[point.index];\n endValue = (series.yAxis.valueType === 'Logarithmic' ?\n logBase(endValue === 0 ? 1 : endValue, series.yAxis.logBase) : endValue);\n endValue = endValue > series.yAxis.actualRange.max ? series.yAxis.actualRange.max : endValue;\n radius = startValue === endValue ? 0 : series.chart.radius * valueToCoefficient(endValue, series.yAxis);\n x1 = centerX + radius * Math.cos(startAngle);\n x2 = centerX + radius * Math.cos(endAngle);\n y1 = centerY + radius * Math.sin(startAngle);\n y2 = centerY + radius * Math.sin(endAngle);\n innerRadius = series.chart.radius * valueToCoefficient((startValue === 0 && series.yAxis.visibleRange.min !== 0) ? series.yAxis.visibleRange.min : startValue, series.yAxis);\n dStartX = centerX + innerRadius * Math.cos(startAngle);\n dStartY = centerY + innerRadius * Math.sin(startAngle);\n dEndX = centerX + innerRadius * Math.cos(endAngle);\n dEndY = centerY + innerRadius * Math.sin(endAngle);\n if (series.type === 'Polar') {\n direction = ('M' + ' ' + x1 + ' ' + y1 + ' ' + 'A' + ' ' + radius + ' ' + radius + ' ' + '0' + ' '\n + '0' + ' ' + 1 + ' ' + x2 + ' ' + y2 + ' ' + 'L' + ' ' + dEndX + ' ' + dEndY + ' ' +\n 'A' + ' ' + innerRadius + ' ' + innerRadius + ' ' + '1' + ' ' + '0' + ' ' + '0' + ' '\n + dStartX + ' ' + dStartY + ' ' + 'z');\n }\n else {\n direction = ('M' + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x2 + ' ' + y2 + ' ' + 'L'\n + dEndX + ' ' + dEndY + ' ' + 'L' + ' ' + dStartX + ' ' + dStartY + ' ' + 'z');\n }\n point.regionData = new PolarArc(pointStartAngle, pointEndAngle, innerRadius, radius, itemCurrentXPos);\n }\n else {\n endValue = point.yValue > series.yAxis.actualRange.max ? series.yAxis.actualRange.max : point.yValue;\n radius = series.chart.radius * valueToCoefficient((series.yAxis.valueType === 'Logarithmic' ? logBase(endValue, series.yAxis.logBase) : endValue), series.yAxis);\n x1 = centerX + radius * Math.cos(startAngle);\n x2 = centerX + radius * Math.cos(endAngle);\n y1 = centerY + radius * Math.sin(startAngle);\n y2 = centerY + radius * Math.sin(endAngle);\n if (series.type === 'Polar') {\n direction = ('M' + ' ' + x1 + ' ' + y1 + ' ' + 'A' + ' ' + radius + ' ' + radius + ' ' + '0' + ' ' +\n '0' + ' ' + 1 + ' ' + x2 + ' ' + y2 + ' ' + 'L' + ' ' + centerX + ' ' +\n centerY + ' ' + 'z');\n }\n else {\n direction = ('M' + ' ' + x1 + ' ' + y1 + ' ' + 'L' + ' ' + x2 + ' ' + y2 + ' ' + 'L' + ' '\n + centerX + ' ' + centerY + ' ' + 'z');\n }\n point.regionData = new PolarArc(pointStartAngle, pointEndAngle, 0, radius, itemCurrentXPos);\n }\n argsData = this.triggerEvent(series.chart, series, point);\n options = new PathOption(series.chart.element.id + '_Series_' + series.index + '_Point_' + point.index, argsData.fill, argsData.border.width, argsData.border.color, series.opacity, series.dashArray, direction);\n if (!argsData.cancel) {\n this.appendLinePath(options, series, '');\n if (series.type === 'Polar') {\n point.symbolLocations.push({\n x: centerX + radius * Math.cos((startAngle + (endAngle - startAngle) / 2)),\n y: centerY + radius * Math.sin((startAngle + (endAngle - startAngle) / 2))\n });\n }\n else {\n point.symbolLocations.push({ x: (x1 + x2) / 2, y: (y1 + y2) / 2 });\n }\n }\n }\n }\n series.isRectSeries = true;\n };\n /**\n * To trigger the point rendering event.\n * @return {void}\n * @private\n */\n PolarSeries.prototype.triggerEvent = function (chart, series, point) {\n var argsData = {\n cancel: false, name: pointRender, series: series, point: point,\n fill: series.setPointColor(point, series.interior),\n border: series.setBorderColor(point, { width: series.border.width, color: series.border.color })\n };\n chart.trigger(pointRender, argsData);\n point.color = argsData.fill;\n return argsData;\n };\n /** get position for column drawtypes\n * @return {void}.\n * @private\n */\n PolarSeries.prototype.getSeriesPosition = function (series) {\n var chart = series.chart;\n var seriesCollection = [];\n var stackingGroup = [];\n var vSeries = { rectCount: 0, position: null };\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series_1 = _a[_i];\n if (series_1.visible && (series_1.type === 'Polar' || series_1.type === 'Radar') && series_1.drawType.indexOf('Column') !== -1) {\n seriesCollection.push(series_1);\n }\n }\n seriesCollection.forEach(function (series) {\n if (series.drawType.indexOf('Stacking') !== -1) {\n if (series.stackingGroup) {\n if (stackingGroup[series.stackingGroup] === undefined) {\n series.position = vSeries.rectCount;\n stackingGroup[series.stackingGroup] = vSeries.rectCount++;\n }\n else {\n series.position = stackingGroup[series.stackingGroup];\n }\n }\n else {\n if (vSeries.position === null) {\n series.position = vSeries.rectCount;\n vSeries.position = vSeries.rectCount++;\n }\n else {\n series.position = vSeries.position;\n }\n }\n }\n else {\n series.position = vSeries.rectCount++;\n }\n });\n seriesCollection.forEach(function (value) {\n value.rectCount = vSeries.rectCount;\n });\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n PolarSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n var duration = series.animation.duration;\n var delay = series.animation.delay;\n var rectElements = series.seriesElement.childNodes;\n var count = 1;\n if (series.drawType === 'Scatter') {\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (!point.symbolLocations.length || !rectElements[count]) {\n continue;\n }\n markerAnimate(rectElements[count], delay, duration, series, point.index, point.symbolLocations[0], false);\n count++;\n }\n }\n else {\n for (count = 1; count < rectElements.length; count++) {\n this.doPolarRadarAnimation(rectElements[count], delay, duration, series);\n }\n }\n };\n /**\n * To do the Polar Radar draw type column animation.\n * @return {void}\n * @private\n */\n PolarSeries.prototype.doPolarRadarAnimation = function (animateElement, delay, duration, series) {\n var chartcenterX = series.clipRect.width / 2 + series.clipRect.x;\n var chartcenterY = series.clipRect.height / 2 + series.clipRect.y;\n var elementHeight = 0;\n animateElement.style.visibility = 'hidden';\n new Animation({}).animate(animateElement, {\n duration: duration,\n delay: delay,\n progress: function (args) {\n if (args.timeStamp > args.delay) {\n args.element.style.visibility = 'visible';\n elementHeight = ((args.timeStamp - args.delay) / args.duration);\n animateElement.setAttribute('transform', 'translate(' + chartcenterX\n + ' ' + chartcenterY + ') scale(' + elementHeight + ') translate(' + (-chartcenterX) + ' ' + (-chartcenterY) + ')');\n }\n },\n end: function (model) {\n animateElement.style.visibility = 'visible';\n animateElement.removeAttribute('transform');\n series.chart.trigger('animationComplete', { series: series });\n }\n });\n };\n /**\n * Get module name.\n */\n PolarSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'PolarSeries';\n };\n /**\n * To destroy the polar series.\n * @return {void}\n * @private\n */\n PolarSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return PolarSeries;\n}(PolarRadarPanel));\nexport { PolarSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { firstToLowerCase } from '../../common/utils/helper';\nimport { PolarSeries } from '../series/polar-series';\n/**\n * `RadarSeries` module is used to render the radar series.\n */\nvar RadarSeries = /** @class */ (function (_super) {\n __extends(RadarSeries, _super);\n function RadarSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render radar Series.\n * @return {void}.\n * @private\n */\n RadarSeries.prototype.render = function (series) {\n var seriesType = firstToLowerCase(series.drawType);\n if (series.drawType.indexOf('Column') === -1) {\n series.chart[seriesType + 'SeriesModule'].render(series, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n }\n else {\n this.columnDrawTypeRender(series);\n }\n };\n /**\n * Get module name.\n */\n RadarSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'RadarSeries';\n };\n /**\n * To destroy the radar series.\n * @return {void}\n * @private\n */\n RadarSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return RadarSeries;\n}(PolarSeries));\nexport { RadarSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `StackingBarSeries` module is used to render the stacking bar series.\n */\nvar StackingBarSeries = /** @class */ (function (_super) {\n __extends(StackingBarSeries, _super);\n function StackingBarSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render the Stacking bar series.\n * @return {void}\n * @private\n */\n StackingBarSeries.prototype.render = function (series) {\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var sideBySideInfo = this.getSideBySideInfo(series);\n var stackedValue = series.stackedValues;\n var rect;\n var argsData;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var pointStack = _a[_i];\n pointStack.symbolLocations = [];\n pointStack.regions = [];\n if (pointStack.visible && withInRange(series.points[pointStack.index - 1], pointStack, series.points[pointStack.index + 1], series)) {\n rect = this.getRectangle(pointStack.xValue + sideBySideInfo.start, stackedValue.endValues[pointStack.index], pointStack.xValue + sideBySideInfo.end, stackedValue.startValues[pointStack.index], series);\n argsData = this.triggerEvent(series, pointStack, series.interior, { width: series.border.width, color: series.border.color });\n if (!argsData.cancel) {\n this.drawRectangle(series, pointStack, rect, argsData);\n this.updateSymbolLocation(pointStack, rect, series);\n }\n }\n }\n };\n /**\n * To destroy the stacking bar.\n * @return {void}\n * @private\n */\n StackingBarSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n StackingBarSeries.prototype.getModuleName = function () {\n return 'StackingBarSeries';\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n StackingBarSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n return StackingBarSeries;\n}(ColumnBase));\nexport { StackingBarSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, PathOption } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `CandleSeries` module is used to render the candle series.\n */\nvar CandleSeries = /** @class */ (function (_super) {\n __extends(CandleSeries, _super);\n function CandleSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Candle series.\n * @return {void}\n * @private\n */\n CandleSeries.prototype.render = function (series) {\n var sideBySideInfo = this.getSideBySideInfo(series);\n var argsData;\n var borderWidth = Math.max(series.border.width, 1);\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n var direction = '';\n var centerRegion = void 0;\n var tickRegion = void 0;\n var midPoint = void 0;\n midPoint = (sideBySideInfo.start + sideBySideInfo.end) / 2;\n //initializing after zooming and also normal initialization\n point.regions = [];\n point.symbolLocations = [];\n if (point.visible && withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n //region to cover the top and bottom ticks\n tickRegion = this.getRectangle((point.xValue + sideBySideInfo.median), Math.max(point.high, point.low), (point.xValue + sideBySideInfo.median), Math.min(point.high, point.low), series);\n if (!series.chart.requireInvertedAxis) {\n tickRegion.x -= borderWidth / 2;\n tickRegion.width = borderWidth;\n }\n else {\n tickRegion.y -= borderWidth / 2;\n tickRegion.height = borderWidth;\n }\n //get middleRect\n centerRegion = this.getRectangle((point.xValue + sideBySideInfo.start), Math.max(point.open, point.close), (point.xValue + sideBySideInfo.end), Math.min(point.open, point.close), series);\n direction = this.getPathString(tickRegion, centerRegion, series);\n argsData = this.triggerPointRenderEvent(series, point);\n if (!argsData.cancel) {\n this.drawCandle(series, point, centerRegion, argsData, direction);\n this.updateSymbolLocation(point, tickRegion, series);\n this.updateSymbolLocation(point, centerRegion, series);\n }\n }\n }\n };\n /**\n * Trigger point rendering event\n */\n CandleSeries.prototype.triggerPointRenderEvent = function (series, point) {\n var fill;\n fill = this.getCandleColor(point, series);\n var border = { color: series.border.color, width: Math.max(series.border.width, 1) };\n return this.triggerEvent(series, point, fill, border);\n };\n /**\n * Find the color of the candle\n * @param series\n * @private\n */\n CandleSeries.prototype.getCandleColor = function (point, series) {\n var currentPoint = point;\n var previousPoint = series.points[point.index - 1];\n if (series.enableSolidCandles === false) {\n if (!previousPoint) {\n return series.bearFillColor;\n }\n else {\n return previousPoint.close > point.close ? series.bullFillColor :\n series.bearFillColor;\n }\n }\n else {\n return point.open > point.close ? series.bullFillColor :\n series.bearFillColor;\n }\n };\n /**\n * Finds the path of the candle shape\n * @param Series\n * @private\n */\n CandleSeries.prototype.getPathString = function (topRect, midRect, series) {\n var direction = '';\n var width = series.chart.requireInvertedAxis ? topRect.height : topRect.width;\n var center = series.chart.requireInvertedAxis ? topRect.y + topRect.height / 2 :\n topRect.x + topRect.width / 2;\n //tick 1 segment\n direction += !series.chart.requireInvertedAxis ?\n 'M' + ' ' + (center) + ' ' + (topRect.y) + ' ' + 'L' + ' ' + (center) + ' ' + midRect.y :\n 'M' + ' ' + (topRect.x) + ' ' + (center) + ' ' + 'L' + ' ' + (midRect.x) + ' ' + center;\n direction = direction.concat(' M' + ' ' + (midRect.x) + ' ' + (midRect.y) + ' ' +\n 'L' + ' ' + (midRect.x + midRect.width) + ' ' + (midRect.y) + ' ' +\n 'L' + ' ' + (midRect.x + midRect.width) + ' ' +\n (midRect.y + midRect.height) + ' ' +\n 'L' + ' ' + (midRect.x) + ' ' + (midRect.y + midRect.height) +\n ' ' + 'Z');\n direction += !series.chart.requireInvertedAxis ?\n ' M' + ' ' + (center) + ' ' + (midRect.y + midRect.height) + ' ' + 'L' + ' ' + (center) + ' ' + (topRect.y +\n topRect.height) :\n ' M' + ' ' + (midRect.x + midRect.width) + ' ' + (center) + ' ' + 'L' + ' ' +\n (topRect.x + topRect.width) + ' ' + center;\n return direction;\n };\n /**\n * Draws the candle shape\n * @param series\n * @private\n */\n CandleSeries.prototype.drawCandle = function (series, point, rect, argsData, direction) {\n var check = series.chart.requireInvertedAxis ? rect.height : rect.width;\n if (check <= 0) {\n return null;\n }\n var fill = !series.enableSolidCandles ?\n (point.open > point.close ? argsData.fill : 'transparent') : argsData.fill;\n argsData.border.color = argsData.fill;\n var options = new PathOption(series.chart.element.id + '_Series_' + series.index + '_Point_' + point.index, fill, argsData.border.width, argsData.border.color, series.opacity, series.dashArray, direction);\n var candleElement = series.chart.renderer.drawPath(options);\n candleElement.setAttribute('aria-label', point.x.toString() + ':' + point.high.toString()\n + ':' + point.low.toString() + ':' + point.close.toString() + ':' + point.open.toString());\n series.seriesElement.appendChild(candleElement);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n CandleSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * Get module name.\n */\n CandleSeries.prototype.getModuleName = function () {\n return 'CandleSeries';\n /**\n * return the module name\n */\n };\n /**\n * To destroy the candle series.\n * @return {void}\n * @private\n */\n CandleSeries.prototype.destroy = function (chart) {\n /**\n * Destroys the candle series.\n */\n };\n return CandleSeries;\n}(ColumnBase));\nexport { CandleSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `StackingColumnSeries` module used to render the stacking column series.\n */\nvar StackingColumnSeries = /** @class */ (function (_super) {\n __extends(StackingColumnSeries, _super);\n function StackingColumnSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render the Stacking column series.\n * @return {void}\n * @private\n */\n StackingColumnSeries.prototype.render = function (series) {\n series.isRectSeries = true;\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var sideBySideInfo = this.getSideBySideInfo(series);\n var rect;\n var argsData;\n var stackedValue = series.stackedValues;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n rect = this.getRectangle(point.xValue + sideBySideInfo.start, stackedValue.endValues[point.index], point.xValue + sideBySideInfo.end, stackedValue.startValues[point.index], series);\n argsData = this.triggerEvent(series, point, series.interior, { width: series.border.width, color: series.border.color });\n if (!argsData.cancel) {\n this.drawRectangle(series, point, rect, argsData);\n this.updateSymbolLocation(point, rect, series);\n }\n }\n }\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n StackingColumnSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * To destroy the stacking column.\n * @return {void}\n * @private\n */\n StackingColumnSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n /**\n * Get module name.\n */\n StackingColumnSeries.prototype.getModuleName = function () {\n return 'StackingColumnSeries';\n };\n return StackingColumnSeries;\n}(ColumnBase));\nexport { StackingColumnSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PathOption, getPoint, withInRange } from '../../common/utils/helper';\nimport { LineBase } from './line-base';\n/**\n * `StepLineSeries` module is used to render the step line series.\n */\nvar StepLineSeries = /** @class */ (function (_super) {\n __extends(StepLineSeries, _super);\n function StepLineSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render the Step line series.\n * @return {void}\n * @private\n */\n StepLineSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var direction = '';\n var startPoint = 'M';\n var prevPoint = null;\n var pathOptions;\n var lineLength;\n var point1;\n var point2;\n var visiblePoints = this.improveChartPerformance(series);\n if (xAxis.valueType === 'Category' && xAxis.labelPlacement === 'BetweenTicks') {\n lineLength = 0.5;\n }\n else {\n lineLength = 0;\n }\n for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {\n var point = visiblePoints_1[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {\n if (prevPoint != null) {\n point2 = getPoint(point.xValue, point.yValue, xAxis, yAxis, isInverted);\n point1 = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis, isInverted);\n direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ' + 'L' + ' ' +\n (point2.x) + ' ' + (point1.y) + 'L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');\n startPoint = 'L';\n }\n else {\n point1 = getPoint(point.xValue - lineLength, point.yValue, xAxis, yAxis, isInverted);\n direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ');\n startPoint = 'L';\n }\n this.storePointLocation(point, series, isInverted, getPoint);\n prevPoint = point;\n }\n else {\n prevPoint = series.emptyPointSettings.mode === 'Drop' ? prevPoint : null;\n startPoint = series.emptyPointSettings.mode === 'Drop' ? startPoint : 'M';\n }\n }\n point1 = getPoint(visiblePoints[visiblePoints.length - 1].xValue + lineLength, visiblePoints[visiblePoints.length - 1].yValue, xAxis, yAxis, isInverted);\n direction = direction.concat(startPoint + ' ' + (point1.x) + ' ' + (point1.y) + ' ');\n pathOptions = new PathOption(series.chart.element.id + '_Series_' + series.index, 'transparent', series.width, series.interior, series.opacity, series.dashArray, direction);\n this.appendLinePath(pathOptions, series, '');\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n StepLineSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doLinearAnimation(series, option);\n };\n /**\n * To destroy the step line series.\n * @return {void}\n * @private\n */\n StepLineSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n /**\n * Get module name.\n */\n StepLineSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'StepLineSeries';\n };\n return StepLineSeries;\n}(LineBase));\nexport { StepLineSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { getPoint, withInRange, ChartLocation, PathOption } from '../../common/utils/helper';\nimport { LineBase } from './line-base';\n/**\n * `StepAreaSeries` Module used to render the step area series.\n */\nvar StepAreaSeries = /** @class */ (function (_super) {\n __extends(StepAreaSeries, _super);\n function StepAreaSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render StepArea series.\n * @return {void}\n * @private\n */\n StepAreaSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var currentPoint;\n var secondPoint;\n var start = null;\n var direction = '';\n var pointsLength = series.points.length;\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var options;\n var point;\n var xValue;\n var lineLength;\n var prevPoint = null;\n if (xAxis.valueType === 'Category' && xAxis.labelPlacement === 'BetweenTicks') {\n lineLength = 0.5;\n }\n else {\n lineLength = 0;\n }\n for (var i = 0; i < pointsLength; i++) {\n point = series.points[i];\n xValue = point.xValue;\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(series.points[i - 1], point, series.points[i + 1], series)) {\n if (start === null) {\n start = new ChartLocation(xValue, 0);\n // Start point for the current path\n currentPoint = getPoint(xValue - lineLength, origin, xAxis, yAxis, isInverted);\n direction += ('M' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');\n currentPoint = getPoint(xValue - lineLength, point.yValue, xAxis, yAxis, isInverted);\n direction += ('L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');\n }\n // First Point to draw the Steparea path\n if (prevPoint != null) {\n currentPoint = getPoint(point.xValue, point.yValue, xAxis, yAxis, isInverted);\n secondPoint = getPoint(prevPoint.xValue, prevPoint.yValue, xAxis, yAxis, isInverted);\n direction += ('L' + ' ' +\n (currentPoint.x) + ' ' + (secondPoint.y) + 'L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ');\n }\n else if (series.emptyPointSettings.mode === 'Gap') {\n currentPoint = getPoint(point.xValue, point.yValue, xAxis, yAxis, isInverted);\n direction += 'L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y) + ' ';\n }\n this.storePointLocation(point, series, isInverted, getPoint);\n prevPoint = point;\n }\n if (series.points[i + 1] && !series.points[i + 1].visible && series.emptyPointSettings.mode !== 'Drop') {\n // current start point\n currentPoint = getPoint(xValue + lineLength, origin, xAxis, yAxis, isInverted);\n direction += ('L' + ' ' + (currentPoint.x) + ' ' + (currentPoint.y));\n start = null;\n prevPoint = null;\n }\n }\n if (pointsLength > 1) {\n start = { 'x': series.points[pointsLength - 1].xValue + lineLength, 'y': series.points[pointsLength - 1].yValue };\n secondPoint = getPoint(start.x, start.y, xAxis, yAxis, isInverted);\n direction += ('L' + ' ' + (secondPoint.x) + ' ' + (secondPoint.y) + ' ');\n start = { 'x': series.points[pointsLength - 1].xValue + lineLength, 'y': origin };\n secondPoint = getPoint(start.x, start.y, xAxis, yAxis, isInverted);\n direction += ('L' + ' ' + (secondPoint.x) + ' ' + (secondPoint.y) + ' ');\n }\n options = new PathOption(series.chart.element.id + '_Series_' + series.index, series.interior, series.border.width, series.border.color, series.opacity, series.dashArray, direction);\n this.appendLinePath(options, series, '');\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n StepAreaSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doLinearAnimation(series, option);\n };\n /**\n * To destroy the step Area series.\n * @return {void}\n * @private\n */\n StepAreaSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n /**\n * Get module name.\n */\n StepAreaSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'StepAreaSeries';\n };\n return StepAreaSeries;\n}(LineBase));\nexport { StepAreaSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PathOption, getPoint, withInRange, Rect, TransformToVisible } from '../../common/utils/helper';\nimport { LineBase } from './line-base';\n/**\n * `StackingAreaSeries` module used to render the Stacking Area series.\n */\nvar StackingAreaSeries = /** @class */ (function (_super) {\n __extends(StackingAreaSeries, _super);\n function StackingAreaSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render the Stacking area series.\n * @return {void}\n * @private\n */\n StackingAreaSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var polarAreaType = series.chart.chartAreaType === 'PolarRadar';\n var getCoordinate = polarAreaType ? TransformToVisible : getPoint;\n var lineDirection = '';\n var visiblePoints = series.points;\n var pointsLength = visiblePoints.length;\n var stackedvalue = series.stackedValues;\n var origin = polarAreaType ?\n Math.max(series.yAxis.visibleRange.min, stackedvalue.endValues[0]) :\n Math.max(series.yAxis.visibleRange.min, stackedvalue.startValues[0]);\n var border = series.border;\n var options;\n var startPoint = 0;\n var point1 = getCoordinate(visiblePoints[0].xValue, origin, xAxis, yAxis, isInverted, series);\n var point2;\n lineDirection = lineDirection.concat('M' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');\n for (var i = 0; i < pointsLength; i++) {\n visiblePoints[i].symbolLocations = [];\n visiblePoints[i].regions = [];\n if (visiblePoints[i].visible && withInRange(visiblePoints[i - 1], visiblePoints[i], visiblePoints[i + 1], series)) {\n point1 = getCoordinate(visiblePoints[i].xValue, stackedvalue.endValues[i], xAxis, yAxis, isInverted, series);\n lineDirection = lineDirection.concat('L' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');\n visiblePoints[i].symbolLocations.push(getCoordinate(visiblePoints[i].xValue, stackedvalue.endValues[i], xAxis, yAxis, isInverted, series));\n visiblePoints[i].regions.push(new Rect(visiblePoints[i].symbolLocations[0].x - series.marker.width, visiblePoints[i].symbolLocations[0].y - series.marker.height, 2 * series.marker.width, 2 * series.marker.height));\n }\n else {\n if (series.emptyPointSettings.mode !== 'Drop') {\n for (var j = i - 1; j >= startPoint; j--) {\n point2 = getCoordinate(visiblePoints[j].xValue, stackedvalue.startValues[j], xAxis, yAxis, isInverted, series);\n lineDirection = lineDirection.concat('L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');\n }\n if (visiblePoints[i + 1] && visiblePoints[i + 1].visible) {\n point1 = getCoordinate(visiblePoints[i + 1].xValue, stackedvalue.startValues[i + 1], xAxis, yAxis, isInverted, series);\n lineDirection = lineDirection.concat('M' + ' ' + (point1.x) + ' ' + (point1.y) + ' ');\n }\n startPoint = i + 1;\n }\n }\n }\n if (series.chart.chartAreaType === 'PolarRadar' && visiblePoints.length > 1) {\n point1 = { 'x': series.points[0].xValue, 'y': stackedvalue.endValues[0] };\n point2 = getCoordinate(point1.x, point1.y, xAxis, yAxis, isInverted, series);\n lineDirection += ('L' + ' ' + (point2.x) + ' ' + (point2.y) + ' ');\n }\n for (var j = pointsLength - 1; j >= startPoint; j--) {\n var previousSeries = this.getPreviousSeries(series);\n if (previousSeries.emptyPointSettings.mode !== 'Drop' || !previousSeries.points[j].isEmpty) {\n point2 = getCoordinate(visiblePoints[j].xValue, stackedvalue.startValues[j], xAxis, yAxis, isInverted, series);\n lineDirection = lineDirection.concat(((j === (pointsLength - 1) && polarAreaType) ? 'M' : 'L')\n + ' ' + (point2.x) + ' ' + (point2.y) + ' ');\n }\n }\n options = new PathOption(series.chart.element.id + '_Series_' + series.index, series.interior, series.border.width, series.border.color, series.opacity, series.dashArray, lineDirection);\n this.appendLinePath(options, series, '');\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n StackingAreaSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doLinearAnimation(series, option);\n };\n /**\n * To destroy the stacking area.\n * @return {void}\n * @private\n */\n StackingAreaSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n /**\n * Get module name.\n */\n StackingAreaSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'StackingAreaSeries';\n };\n /**\n * To find previous visible series\n */\n StackingAreaSeries.prototype.getPreviousSeries = function (series) {\n var seriesCollection = series.chart.visibleSeries;\n for (var i = 0, length_1 = seriesCollection.length; i < length_1; i++) {\n if (series.index === seriesCollection[i].index && i !== 0) {\n return seriesCollection[i - 1];\n }\n }\n return seriesCollection[0];\n };\n return StackingAreaSeries;\n}(LineBase));\nexport { StackingAreaSeries };\n","import { withInRange, getPoint, PathOption, drawSymbol, Size, Rect, markerAnimate, TransformToVisible } from '../../common/utils/helper';\nimport { pointRender } from '../../common/model/constants';\n/**\n * `ScatterSeries` module is used to render the scatter series.\n */\nvar ScatterSeries = /** @class */ (function () {\n function ScatterSeries() {\n }\n /**\n * Render the scatter series.\n * @return {void}\n * @private\n */\n ScatterSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var seriesIndex = series.index;\n var marker = series.marker;\n var border = series.border;\n var visiblePoints = series.points;\n var pointIndex;\n var symbolId;\n var shapeOption;\n var argsData;\n var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? TransformToVisible : getPoint;\n for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {\n var point = visiblePoints_1[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {\n symbolId = series.chart.element.id + '_Series_' + seriesIndex + '_Point_' + point.index;\n argsData = {\n cancel: false, name: pointRender, series: series, point: point,\n fill: series.setPointColor(point, series.interior),\n border: series.setBorderColor(point, { width: series.border.width, color: series.border.color }),\n height: marker.height, width: marker.width, shape: marker.shape\n };\n series.chart.trigger(pointRender, argsData);\n if (!argsData.cancel) {\n point.symbolLocations.push(getCoordinate(point.xValue, point.yValue, xAxis, yAxis, isInverted, series));\n point.color = argsData.fill;\n shapeOption = new PathOption(symbolId, argsData.fill, argsData.border.width, argsData.border.color, series.opacity, null);\n series.seriesElement.appendChild(drawSymbol(point.symbolLocations[0], argsData.shape, new Size(argsData.width, argsData.height), marker.imageUrl, shapeOption, point.x.toString() + ':' + point.yValue.toString()));\n point.regions.push(new Rect(point.symbolLocations[0].x - marker.width, point.symbolLocations[0].y - marker.height, 2 * marker.width, 2 * marker.height));\n point.marker = {\n border: argsData.border, fill: argsData.fill,\n height: argsData.height, visible: true,\n width: argsData.width, shape: argsData.shape\n };\n }\n else {\n point.marker = { visible: true };\n }\n }\n }\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n ScatterSeries.prototype.doAnimation = function (series) {\n var duration = series.animation.duration;\n var delay = series.animation.delay;\n var rectElements = series.seriesElement.childNodes;\n var count = 1;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (!point.symbolLocations.length || !rectElements[count]) {\n continue;\n }\n markerAnimate(rectElements[count], delay, duration, series, point.index, point.symbolLocations[0], false);\n count++;\n }\n };\n /**\n * Get module name.\n */\n ScatterSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'ScatterSeries';\n };\n /**\n * To destroy the scatter.\n * @return {void}\n */\n ScatterSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n return ScatterSeries;\n}());\nexport { ScatterSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `RangeColumnSeries` module is used to render the range column series.\n */\nvar RangeColumnSeries = /** @class */ (function (_super) {\n __extends(RangeColumnSeries, _super);\n function RangeColumnSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Range Column series.\n * @return {void}\n * @private\n */\n RangeColumnSeries.prototype.render = function (series) {\n var rect;\n var sideBySideInfo = this.getSideBySideInfo(series);\n //let origin: number = Math.max(series.yAxis.visibleRange.min, 0);\n var argsData;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var rangePoint = _a[_i];\n rangePoint.symbolLocations = [];\n rangePoint.regions = [];\n if (rangePoint.visible && withInRange(series.points[rangePoint.index - 1], rangePoint, series.points[rangePoint.index + 1], series)) {\n rect = this.getRectangle(rangePoint.xValue + sideBySideInfo.start, rangePoint.high, rangePoint.xValue + sideBySideInfo.end, rangePoint.low, series);\n argsData = this.triggerEvent(series, rangePoint, series.interior, { width: series.border.width, color: series.border.color });\n if (!argsData.cancel) {\n this.updateSymbolLocation(rangePoint, rect, series);\n this.drawRectangle(series, rangePoint, rect, argsData);\n }\n }\n }\n };\n /**\n * Get module name.\n */\n RangeColumnSeries.prototype.getModuleName = function () {\n return 'RangeColumnSeries';\n /**\n * return the module name\n */\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n RangeColumnSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * To destroy the range column series.\n * @return {void}\n * @private\n */\n RangeColumnSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return RangeColumnSeries;\n}(ColumnBase));\nexport { RangeColumnSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PathOption, withInRange, subArraySum } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `WaterfallSeries` module is used to render the waterfall series.\n */\nvar WaterfallSeries = /** @class */ (function (_super) {\n __extends(WaterfallSeries, _super);\n function WaterfallSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render waterfall series.\n * @return {void}\n * @private\n */\n WaterfallSeries.prototype.render = function (series) {\n var rect;\n var sideBySideInfo = this.getSideBySideInfo(series);\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var argsData;\n var prevEndValue = 0;\n var direction = '';\n var currentEndValue = 0;\n var originValue;\n var prevRegion = null;\n var y;\n var isInversed = series.chart.requireInvertedAxis;\n var intermediateOrigin = 0;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n //Calcute the current point value to render waterfall series.\n var isSum = this.isIntermediateSum(series, point.index);\n var totalSum = this.isSumIndex(series, point.index);\n currentEndValue += isSum || totalSum === true ? 0 : point.yValue;\n //Calcute the origin value for points\n originValue = (isSum === true ? intermediateOrigin : ((prevEndValue !== null && !totalSum) ? prevEndValue : origin));\n rect = this.getRectangle(point.xValue + sideBySideInfo.start, currentEndValue, point.xValue + sideBySideInfo.end, originValue, series);\n argsData = this.triggerPointRenderEvent(series, point);\n //intermediateOrigin is used only for imtermediate data \n if (isSum) {\n intermediateOrigin = currentEndValue;\n }\n prevEndValue = currentEndValue;\n if (!argsData.cancel) {\n this.updateSymbolLocation(point, rect, series);\n this.drawRectangle(series, point, rect, argsData);\n }\n var currentRegion = point.regions[0];\n if (prevRegion !== null) {\n var prevLeft = isInversed ? prevRegion.x : prevRegion.y;\n var currentLeft = isInversed ? currentRegion.x : currentRegion.y;\n var prevBottom = isInversed ? prevRegion.x + prevRegion.width : prevRegion.y + prevRegion.height;\n var currentBottom = isInversed ?\n currentRegion.x + currentRegion.width : currentRegion.y + currentRegion.height;\n if (Math.round(prevLeft) === Math.round(currentLeft) ||\n Math.round(prevBottom) === Math.round(currentLeft)) {\n y = isInversed ? currentRegion.x : currentRegion.y;\n }\n else {\n y = currentBottom;\n }\n if (isInversed) {\n direction = direction.concat('M' + ' ' + y + ' ' + (prevRegion.y + prevRegion.height) + ' ' +\n 'L' + ' ' + y + ' ' + currentRegion.y + ' ');\n }\n else {\n direction = direction.concat('M' + ' ' + prevRegion.x + ' ' + y + ' ' +\n 'L' + ' ' + (currentRegion.x + currentRegion.width) + ' ' + y + ' ');\n }\n }\n prevRegion = point.regions[0];\n }\n }\n var options = new PathOption(series.chart.element.id + '_Series_' + series.index + '_Connector_', 'none', series.connector.width, series.connector.color, series.opacity, series.connector.dashArray, direction);\n var element = series.chart.renderer.drawPath(options);\n if (series.chart.animateSeries) {\n element.style.visibility = 'hidden';\n }\n series.seriesElement.appendChild(element);\n };\n /**\n * To check intermediateSumIndex in waterfall series.\n * @return boolean\n * @private\n */\n WaterfallSeries.prototype.isIntermediateSum = function (series, index) {\n if (series.intermediateSumIndexes !== undefined && series.intermediateSumIndexes.indexOf(index) !== -1) {\n return true;\n }\n return false;\n };\n /**\n * To check sumIndex in waterfall series.\n * @return boolean\n * @private\n */\n WaterfallSeries.prototype.isSumIndex = function (series, index) {\n if (series.sumIndexes !== undefined && series.sumIndexes.indexOf(index) !== -1) {\n return true;\n }\n return false;\n };\n /**\n * To trigger the point rendering event for waterfall series.\n * @return IPointRenderEventArgs\n * @private\n */\n WaterfallSeries.prototype.triggerPointRenderEvent = function (series, point) {\n var color;\n var isSum = this.isIntermediateSum(series, point.index);\n var totalSum = this.isSumIndex(series, point.index);\n if (isSum || totalSum) {\n color = series.summaryFillColor;\n }\n else if (point.y < 0) {\n color = series.negativeFillColor;\n }\n else {\n color = series.interior;\n }\n return this.triggerEvent(series, point, color, { color: series.border.color, width: series.border.width });\n };\n /**\n * Add sumIndex and intermediateSumIndex data.\n * @return {object[]}\n * @private\n */\n WaterfallSeries.prototype.processWaterfallData = function (json, series) {\n var data = json;\n var length = json.length;\n var index;\n var intermediateSum = series.intermediateSumIndexes;\n var sumIndex = series.sumIndexes;\n if (intermediateSum !== undefined && intermediateSum.length > 0) {\n for (var i = 0; i < intermediateSum.length; i++) {\n for (var j = 0; j < data.length; j++) {\n if (j === intermediateSum[i]) {\n if (i === 0) {\n index = subArraySum(data, -1, intermediateSum[i], null, series);\n }\n else {\n index = subArraySum(data, intermediateSum[i - 1], intermediateSum[i], null, series);\n }\n data[j][series.yName] = index;\n }\n }\n }\n }\n if (sumIndex !== undefined && sumIndex.length > 0) {\n for (var k = 0; k < sumIndex.length; k++) {\n for (var j = 0; j < data.length; j++) {\n if (j === sumIndex[k]) {\n if (intermediateSum !== undefined) {\n index = subArraySum(data, -1, sumIndex[k], sumIndex, series);\n }\n else {\n index = subArraySum(data, -1, sumIndex[k], null, series);\n }\n data[j][series.yName] = index;\n }\n }\n }\n }\n return data;\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n WaterfallSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * Get module name.\n */\n WaterfallSeries.prototype.getModuleName = function () {\n return 'WaterfallSeries';\n /**\n * return the module name\n */\n };\n /**\n * To destroy the waterfall series.\n * @return {void}\n * @private\n */\n WaterfallSeries.prototype.destroy = function (chart) {\n /**\n * Destroys the waterfall series.\n */\n };\n return WaterfallSeries;\n}(ColumnBase));\nexport { WaterfallSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `HiloSeries` module is used to render the hilo series.\n */\nvar HiloSeries = /** @class */ (function (_super) {\n __extends(HiloSeries, _super);\n function HiloSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Hiloseries.\n * @return {void}\n * @private\n */\n HiloSeries.prototype.render = function (series) {\n var region;\n var sideBySideInfo = this.getSideBySideInfo(series);\n var argsData;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible &&\n withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n region = this.getRectangle(point.xValue + sideBySideInfo.median, point.high, point.xValue + sideBySideInfo.median, point.low, series);\n argsData = this.triggerPointRenderEvent(series, point);\n if (!argsData.cancel) {\n if (!series.chart.requireInvertedAxis) {\n region.width = argsData.border.width;\n region.x = region.x - (region.width / 2);\n }\n else {\n region.height = argsData.border.width;\n region.y = region.y - (region.height / 2);\n }\n argsData.border.width = 0;\n this.updateSymbolLocation(point, region, series);\n this.drawRectangle(series, point, region, argsData);\n }\n }\n }\n };\n /**\n * To trigger the point rendering event.\n * @return {void}\n * @private\n */\n HiloSeries.prototype.triggerPointRenderEvent = function (series, point) {\n var border = { color: series.fill, width: Math.max(series.border.width, 2) };\n return _super.prototype.triggerEvent.call(this, series, point, series.interior, border);\n };\n /**\n * Get module name.\n */\n HiloSeries.prototype.getModuleName = function () {\n return 'HiloSeries';\n /**\n * return the module name\n */\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n HiloSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * To destroy the Hilo series.\n * @return {void}\n * @private\n */\n HiloSeries.prototype.destroy = function (chart) {\n /**\n * Destroys the Hilo Series\n */\n };\n return HiloSeries;\n}(ColumnBase));\nexport { HiloSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, PathOption } from '../../common/utils/helper';\nimport { ColumnBase } from './column-base';\n/**\n * `HiloOpenCloseSeries` module is used to render the hiloOpenClose series.\n */\nvar HiloOpenCloseSeries = /** @class */ (function (_super) {\n __extends(HiloOpenCloseSeries, _super);\n function HiloOpenCloseSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render HiloOpenCloseSeries series.\n * @return {void}\n * @private\n */\n HiloOpenCloseSeries.prototype.render = function (series) {\n var highLowRect;\n var open;\n var close;\n var sideBySideInfo = this.getSideBySideInfo(series);\n var argsData;\n var borderWidth = Math.max(series.border.width, 2);\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible &&\n withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n //highlow\n highLowRect = this.getRectangle(point.xValue + sideBySideInfo.start, Math.max(point.high, point.low), point.xValue + sideBySideInfo.end, Math.min(point.high, point.low), series);\n point.regions.push(this.getRectangle(point.xValue + sideBySideInfo.median, Math.max(point.high, point.low), point.xValue + sideBySideInfo.median, Math.min(point.high, point.low), series));\n this.updateTickRegion(!series.chart.requireInvertedAxis, point.regions[0], borderWidth);\n //open\n point.regions.push(this.getRectangle(point.xValue + sideBySideInfo.start, Math.max(point.open, point.close), point.xValue + sideBySideInfo.median, Math.max(point.open, point.close), series));\n //close\n point.regions.push(this.getRectangle(point.xValue + sideBySideInfo.median, Math.min(point.open, point.close), point.xValue + sideBySideInfo.end, Math.min(point.open, point.close), series));\n argsData = this.triggerPointRenderEvent(series, point);\n if (!argsData.cancel) {\n this.updateSymbolLocation(point, point.regions[0], series);\n var open_1 = { x: point.regions[1].x, y: point.regions[1].y };\n var close_1 = { x: point.regions[2].x, y: point.regions[2].y };\n this.drawHiloOpenClosePath(series, point, open_1, close_1, highLowRect, argsData);\n }\n this.updateTickRegion(series.chart.requireInvertedAxis, point.regions[1], borderWidth);\n this.updateTickRegion(series.chart.requireInvertedAxis, point.regions[2], borderWidth);\n }\n }\n };\n /**\n * Updates the tick region\n */\n HiloOpenCloseSeries.prototype.updateTickRegion = function (horizontal, region, borderWidth) {\n if (horizontal) {\n region.x -= borderWidth / 2;\n region.width = borderWidth;\n }\n else {\n region.y -= borderWidth / 2;\n region.height = borderWidth;\n }\n };\n /**\n * Trigger point rendering event\n */\n HiloOpenCloseSeries.prototype.triggerPointRenderEvent = function (series, point) {\n var fill = (point.open <= point.close) ? series.bearFillColor : series.bullFillColor;\n var border = { color: series.border.color, width: Math.max(series.border.width, 1) };\n return this.triggerEvent(series, point, fill, border);\n };\n /**\n * To draw the rectangle for points.\n * @return {void}\n * @private\n */\n HiloOpenCloseSeries.prototype.drawHiloOpenClosePath = function (series, point, open, close, rect, argsData) {\n // region highlow\n var direction;\n var options;\n if (series.chart.requireInvertedAxis) {\n direction = ('M' + ' ' + (rect.x) + ' ' + (rect.y + rect.height / 2) + ' ' +\n 'L' + ' ' + (rect.x + rect.width) + ' ' + (rect.y + rect.height / 2) + ' ');\n direction += ('M' + ' ' + (open.x) + ' ' + (rect.y + rect.height / 2) + ' ' +\n 'L' + ' ' + (open.x) + ' ' + (rect.y + rect.height) + ' ');\n direction += ('M' + ' ' + (close.x) + ' ' + (rect.y + rect.height / 2) + ' ' +\n 'L' + ' ' + (close.x) + ' ' + (rect.y) + ' ');\n }\n else {\n direction = ('M' + ' ' + (rect.x + rect.width / 2) + ' ' + (rect.y + rect.height) + ' ' +\n 'L' + ' ' + (rect.x + rect.width / 2) + ' ' + (rect.y) + ' ');\n //region opentick\n direction += ('M' + ' ' + (rect.x) + ' ' + (open.y) + ' ' +\n 'L' + ' ' + (rect.x + rect.width / 2) + ' ' + (open.y) + ' ');\n //region closetick\n direction += ('M' + ' ' + (rect.x + rect.width / 2) + ' ' + (close.y) + ' ' +\n 'L' + ' ' + (rect.x + rect.width) + ' ' + (close.y) + ' ');\n }\n options = new PathOption(series.chart.element.id + '_Series_' + series.index + '_Point_' + point.index, argsData.fill, argsData.border.width, argsData.fill, series.opacity, series.dashArray, direction);\n var element = series.chart.renderer.drawPath(options);\n element.setAttribute('aria-label', point.x.toString() + ':' + point.high.toString()\n + ':' + point.low.toString() + ':' + point.close.toString() + ':' + point.open.toString());\n series.seriesElement.appendChild(element);\n };\n /**\n * Get module name.\n */\n HiloOpenCloseSeries.prototype.getModuleName = function () {\n return 'HiloOpenCloseSeries';\n /**\n * return the module name\n */\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n HiloOpenCloseSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * To destroy the column series.\n * @return {void}\n * @private\n */\n HiloOpenCloseSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return HiloOpenCloseSeries;\n}(ColumnBase));\nexport { HiloOpenCloseSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, getPoint, PathOption, Rect } from '../../common/utils/helper';\nimport { LineBase } from './line-base';\n/**\n * `RangeAreaSeries` module is used to render the range area series.\n */\nvar RangeAreaSeries = /** @class */ (function (_super) {\n __extends(RangeAreaSeries, _super);\n function RangeAreaSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render RangeArea Series.\n * @return {void}.\n * @private\n */\n RangeAreaSeries.prototype.render = function (series) {\n var point;\n var direction = '';\n var command = 'M';\n var closed = undefined;\n var visiblePoints = this.improveChartPerformance(series);\n for (var i = 0, length_1 = visiblePoints.length; i < length_1; i++) {\n point = visiblePoints[i];\n point.symbolLocations = [];\n point.regions = [];\n var low = Math.min(point.low, point.high);\n var high = Math.max(point.low, point.high);\n if (series.yAxis.isInversed) {\n var temp = low;\n low = high;\n high = temp;\n }\n var lowPoint = getPoint(point.xValue, low, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n var highPoint = getPoint(point.xValue, high, series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n point.symbolLocations.push(highPoint);\n point.symbolLocations.push(lowPoint);\n var rect = new Rect(Math.min(lowPoint.x, highPoint.x), Math.min(lowPoint.y, highPoint.y), Math.max(Math.abs(highPoint.x - lowPoint.x), series.marker.width), Math.max(Math.abs(highPoint.y - lowPoint.y), series.marker.width));\n if (!series.chart.requireInvertedAxis) {\n rect.x -= series.marker.width / 2;\n }\n else {\n rect.y -= series.marker.width / 2;\n }\n point.regions.push(rect);\n //Path to connect the high points\n if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {\n direction = direction.concat(command + ' ' + (lowPoint.x) + ' ' + (lowPoint.y) + ' ');\n closed = false;\n if ((i + 1 < visiblePoints.length && !visiblePoints[i + 1].visible)\n || i === visiblePoints.length - 1) {\n // Path to connect the low points\n direction = this.closeRangeAreaPath(visiblePoints, point, series, direction, i);\n command = 'M';\n direction = direction.concat(' ' + 'Z');\n closed = true;\n }\n command = 'L';\n }\n else {\n if (closed === false && i !== 0) {\n direction = this.closeRangeAreaPath(visiblePoints, point, series, direction, i);\n closed = true;\n }\n command = 'M';\n point.symbolLocations = [];\n }\n }\n var name = series.category === 'Indicator' ? series.chart.element.id + '_Indicator_' + series.index + '_' + series.name :\n series.chart.element.id + '_Series_' + series.index;\n var options = new PathOption(name, series.interior, series.border.width, series.border.color, series.opacity, series.dashArray, direction);\n this.appendLinePath(options, series, '');\n this.renderMarker(series);\n };\n /**\n * path for rendering the low points\n * @return {void}.\n * @private\n */\n RangeAreaSeries.prototype.closeRangeAreaPath = function (visiblePoints, point, series, direction, i) {\n for (var j = i; j >= 0; j--) {\n if (visiblePoints[j].visible && visiblePoints[j].symbolLocations[0]) {\n point = visiblePoints[j];\n direction += 'L' + ' ' + (point.symbolLocations[0].x) + ' ' + ((point.symbolLocations[0].y)) + ' ';\n }\n else {\n break;\n }\n }\n return direction;\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n RangeAreaSeries.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doLinearAnimation(series, option);\n };\n /**\n * Get module name.\n */\n RangeAreaSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'RangeAreaSeries';\n };\n /**\n * To destroy the line series.\n * @return {void}\n * @private\n */\n RangeAreaSeries.prototype.destroy = function (chart) {\n /**\n * Destroys range area series\n */\n };\n return RangeAreaSeries;\n}(LineBase));\nexport { RangeAreaSeries };\n","import { withInRange, getPoint, PathOption, drawSymbol, Size, Rect, markerAnimate } from '../../common/utils/helper';\nimport { pointRender } from '../../common/model/constants';\n/**\n * `BubbleSeries` module is used to render the bubble series.\n */\nvar BubbleSeries = /** @class */ (function () {\n function BubbleSeries() {\n }\n /**\n * Render the Bubble series.\n * @return {void}\n * @private\n */\n BubbleSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var marker = series.marker;\n var visiblePoints = series.points;\n var shapeOption;\n var argsData;\n //let bubbleMode: RadiusMode = bubbleOptions.radiusMode;\n var segmentRadius;\n var radius;\n var value = Math.max(series.chart.initialClipRect.height, series.chart.initialClipRect.width);\n var percentChange = value / 100;\n var maxRadius = series.maxRadius * percentChange;\n var minRadius = series.minRadius * percentChange;\n var maximumSize = null;\n var maxValue = null;\n if ((series.maxRadius === null || series.minRadius === null)) {\n for (var _i = 0, _a = series.chart.visibleSeries; _i < _a.length; _i++) {\n var value_1 = _a[_i];\n if (value_1.type === 'Bubble' && value_1.visible === true && (value_1.maxRadius === null || value_1.minRadius === null)) {\n maximumSize = value_1.sizeMax > maximumSize ? value_1.sizeMax : maximumSize;\n }\n }\n maxValue = (value / 5) / 2;\n minRadius = maxRadius = 1;\n radius = maxValue * maxRadius;\n }\n else {\n maximumSize = series.sizeMax;\n radius = maxRadius - minRadius;\n }\n for (var _b = 0, visiblePoints_1 = visiblePoints; _b < visiblePoints_1.length; _b++) {\n var bubblePoint = visiblePoints_1[_b];\n bubblePoint.symbolLocations = [];\n bubblePoint.regions = [];\n if (bubblePoint.visible &&\n withInRange(visiblePoints[bubblePoint.index - 1], bubblePoint, visiblePoints[bubblePoint.index + 1], series)) {\n if ((series.maxRadius === null || series.minRadius === null)) {\n segmentRadius = radius * Math.abs(+bubblePoint.size / maximumSize);\n }\n else {\n segmentRadius = minRadius + radius * Math.abs(+bubblePoint.size / maximumSize);\n }\n segmentRadius = segmentRadius || minRadius;\n argsData = {\n cancel: false, name: pointRender, series: series, point: bubblePoint,\n fill: series.setPointColor(bubblePoint, series.interior),\n border: series.setBorderColor(bubblePoint, { width: series.border.width, color: series.border.color }),\n height: 2 * segmentRadius, width: 2 * segmentRadius\n };\n series.chart.trigger(pointRender, argsData);\n if (!argsData.cancel) {\n bubblePoint.symbolLocations.push(getPoint(bubblePoint.xValue, bubblePoint.yValue, xAxis, yAxis, isInverted));\n bubblePoint.color = argsData.fill;\n shapeOption = new PathOption(series.chart.element.id + '_Series_' + series.index + '_Point_' + bubblePoint.index, argsData.fill, argsData.border.width, argsData.border.color, series.opacity, null);\n series.seriesElement.appendChild(drawSymbol(bubblePoint.symbolLocations[0], 'Circle', new Size(argsData.width, argsData.height), marker.imageUrl, shapeOption, bubblePoint.x.toString() + ':' + bubblePoint.yValue.toString()));\n bubblePoint.regions.push(new Rect(bubblePoint.symbolLocations[0].x - segmentRadius, bubblePoint.symbolLocations[0].y - segmentRadius, 2 * segmentRadius, 2 * segmentRadius));\n bubblePoint.marker = {\n border: argsData.border, fill: argsData.fill,\n height: argsData.height, visible: true,\n shape: 'Circle', width: argsData.width\n };\n }\n else {\n bubblePoint.marker = { visible: false };\n }\n }\n }\n };\n /**\n * To destroy the Bubble.\n * @return {void}\n * @private\n */\n BubbleSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n /**\n * Get module name.\n */\n BubbleSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'BubbleSeries';\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n BubbleSeries.prototype.doAnimation = function (series) {\n var duration = series.animation.duration;\n var delay = series.animation.delay;\n var rectElements = series.seriesElement.childNodes;\n var count = 1;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var bubblePoint = _a[_i];\n if (!bubblePoint.symbolLocations.length) {\n continue;\n }\n markerAnimate(rectElements[count], delay, duration, series, bubblePoint.index, bubblePoint.symbolLocations[0], false);\n count++;\n }\n };\n return BubbleSeries;\n}());\nexport { BubbleSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { ChartLocation, ControlPoints } from '../../common/utils/helper';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { LineBase } from './line-base';\n/**\n * render Line series\n */\nvar SplineBase = /** @class */ (function (_super) {\n __extends(SplineBase, _super);\n /** @private */\n function SplineBase(chartModule) {\n var _this = _super.call(this, chartModule) || this;\n _this.splinePoints = [];\n return _this;\n }\n /**\n * To find the control points for spline.\n * @return {void}\n * @private\n */\n SplineBase.prototype.findSplinePoint = function (series) {\n var value;\n var points = this.filterEmptyPoints(series);\n this.splinePoints = this.findSplineCoefficients(points, series);\n if (points.length > 1) {\n series.drawPoints = [];\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n if (point.index !== 0) {\n var previous = this.getPreviousIndex(points, point.index - 1, series);\n value = this.getControlPoints(points[previous], point, this.splinePoints[previous], this.splinePoints[point.index], series);\n series.drawPoints.push(value);\n if (point.yValue && value.controlPoint1.y && value.controlPoint2.y) {\n series.yMin = Math.floor(Math.min(series.yMin, point.yValue, value.controlPoint1.y, value.controlPoint2.y));\n series.yMax = Math.ceil(Math.max(series.yMax, point.yValue, value.controlPoint1.y, value.controlPoint2.y));\n }\n }\n }\n }\n };\n SplineBase.prototype.getPreviousIndex = function (points, i, series) {\n if (series.emptyPointSettings.mode !== 'Drop') {\n return i;\n }\n while (isNullOrUndefined(points[i]) && i > -1) {\n i = i - 1;\n }\n return i;\n };\n SplineBase.prototype.getNextIndex = function (points, i, series) {\n if (series.emptyPointSettings.mode !== 'Drop') {\n return i;\n }\n while (isNullOrUndefined(points[i]) && i < points.length) {\n i = i + 1;\n }\n return i;\n };\n SplineBase.prototype.filterEmptyPoints = function (series) {\n if (series.emptyPointSettings.mode !== 'Drop') {\n return series.points;\n }\n var points = extend([], series.points, null, true);\n for (var i = 0; i < points.length; i++) {\n points[i].index = i;\n if (points[i].isEmpty) {\n points[i].symbolLocations = [];\n points[i].regions = [];\n points.splice(i, 1);\n i--;\n }\n }\n return points;\n };\n /**\n * To find the natural spline.\n * @return {void}\n * @private\n */\n SplineBase.prototype.findSplineCoefficients = function (points, series) {\n var count = points.length;\n var ySpline = [];\n var ySplineDuplicate = [];\n var coefficient1;\n var coefficient2;\n var coefficient3;\n var dy1;\n var dy2;\n var dx = [];\n var dy = [];\n var slope = [];\n var interPoint;\n var slopeLength;\n var cardinalSplineTension = series.cardinalSplineTension ? series.cardinalSplineTension : 0.5;\n cardinalSplineTension = cardinalSplineTension < 0 ? 0 : cardinalSplineTension > 1 ? 1 : cardinalSplineTension;\n switch (series.splineType) {\n case 'Monotonic':\n for (var i = 0; i < count - 1; i++) {\n dx[i] = points[i + 1].xValue - points[i].xValue;\n dy[i] = points[i + 1].yValue - points[i].yValue;\n slope[i] = dy[i] / dx[i];\n }\n //interpolant points\n slopeLength = slope.length;\n // to find the first and last co-efficient value\n ySpline[0] = slope[0];\n ySpline[count - 1] = slope[slopeLength - 1];\n //to find the other co-efficient values\n for (var j = 0; j < dx.length; j++) {\n if (slopeLength > j + 1) {\n if (slope[j] * slope[j + 1] <= 0) {\n ySpline[j + 1] = 0;\n }\n else {\n interPoint = dx[j] + dx[j + 1];\n ySpline[j + 1] = 3 * interPoint / ((interPoint + dx[j + 1]) / slope[j] + (interPoint + dx[j]) / slope[j + 1]);\n }\n }\n }\n break;\n case 'Cardinal':\n for (var i = 0; i < count; i++) {\n if (i === 0) {\n ySpline[i] = (count > 2) ? (cardinalSplineTension * (points[i + 2].xValue - points[i].xValue)) : 0;\n }\n else if (i === (count - 1)) {\n ySpline[i] = (count > 2) ? (cardinalSplineTension * (points[count - 1].xValue - points[count - 3].xValue)) : 0;\n }\n else {\n ySpline[i] = (cardinalSplineTension * (points[i + 1].xValue - points[i - 1].xValue));\n }\n }\n break;\n default:\n if (series.splineType === 'Clamped') {\n var firstIndex = (points[1].yValue - points[0].yValue) / (points[1].xValue - points[0].xValue);\n var lastIndex = (points[count - 1].xValue - points[count - 2].xValue) /\n (points[count - 1].yValue - points[count - 2].yValue);\n ySpline[0] = (3 * (points[1].yValue - points[0].yValue)) / (points[1].xValue - points[0].xValue) - 3;\n ySplineDuplicate[0] = 0.5;\n ySpline[points.length - 1] = (3 * (points[points.length - 1].yValue - points[points.length - 2].yValue)) /\n (points[points.length - 1].xValue - points[points.length - 2].xValue);\n ySpline[0] = ySplineDuplicate[0] = Math.abs(ySpline[0]) === Infinity ? 0 : ySpline[0];\n ySpline[points.length - 1] = ySplineDuplicate[points.length - 1] = Math.abs(ySpline[points.length - 1]) === Infinity ?\n 0 : ySpline[points.length - 1];\n }\n else {\n // assigning the first and last value as zero\n ySpline[0] = ySplineDuplicate[0] = 0;\n ySpline[points.length - 1] = 0;\n }\n for (var i = 1; i < count - 1; i++) {\n coefficient1 = points[i].xValue - points[i - 1].xValue;\n coefficient2 = points[i + 1].xValue - points[i - 1].xValue;\n coefficient3 = points[i + 1].xValue - points[i].xValue;\n dy1 = points[i + 1].yValue - points[i].yValue || null;\n dy2 = points[i].yValue - points[i - 1].yValue || null;\n if (coefficient1 === 0 || coefficient2 === 0 || coefficient3 === 0) {\n ySpline[i] = 0;\n ySplineDuplicate[i] = 0;\n }\n else {\n var p = 1 / (coefficient1 * ySpline[i - 1] + 2 * coefficient2);\n ySpline[i] = -p * coefficient3;\n ySplineDuplicate[i] = p * (6 * (dy1 / coefficient3 - dy2 / coefficient1) - coefficient1 * ySplineDuplicate[i - 1]);\n }\n }\n for (var k = count - 2; k >= 0; k--) {\n ySpline[k] = ySpline[k] * ySpline[k + 1] + ySplineDuplicate[k];\n }\n break;\n }\n return ySpline;\n };\n /**\n * To find the control points for spline.\n * @return {void}\n * @private\n */\n SplineBase.prototype.getControlPoints = function (point1, point2, ySpline1, ySpline2, series) {\n var controlPoint1;\n var controlPoint2;\n var point;\n var ySplineDuplicate1 = ySpline1;\n var ySplineDuplicate2 = ySpline2;\n switch (series.splineType) {\n case 'Cardinal':\n if (series.xAxis.valueType === 'DateTime') {\n ySplineDuplicate1 = ySpline1 / this.dateTimeInterval(series);\n ySplineDuplicate2 = ySpline2 / this.dateTimeInterval(series);\n }\n controlPoint1 = new ChartLocation(point1.xValue + ySpline1 / 3, point1.yValue + ySplineDuplicate1 / 3);\n controlPoint2 = new ChartLocation(point2.xValue - ySpline2 / 3, point2.yValue - ySplineDuplicate2 / 3);\n point = new ControlPoints(controlPoint1, controlPoint2);\n break;\n case 'Monotonic':\n var value = (point2.xValue - point1.xValue) / 3;\n controlPoint1 = new ChartLocation(point1.xValue + value, point1.yValue + ySpline1 * value);\n controlPoint2 = new ChartLocation(point2.xValue - value, point2.yValue - ySpline2 * value);\n point = new ControlPoints(controlPoint1, controlPoint2);\n break;\n default:\n var one3 = 1 / 3.0;\n var deltaX2 = (point2.xValue - point1.xValue);\n deltaX2 = deltaX2 * deltaX2;\n var y1 = one3 * (((2 * point1.yValue) + point2.yValue) - one3 * deltaX2 * (ySpline1 + 0.5 * ySpline2));\n var y2 = one3 * ((point1.yValue + (2 * point2.yValue)) - one3 * deltaX2 * (0.5 * ySpline1 + ySpline2));\n controlPoint1 = new ChartLocation((2 * (point1.xValue) + (point2.xValue)) * one3, y1);\n controlPoint2 = new ChartLocation(((point1.xValue) + 2 * (point2.xValue)) * one3, y2);\n point = new ControlPoints(controlPoint1, controlPoint2);\n break;\n }\n return point;\n };\n /**\n * calculate datetime interval in hours\n *\n */\n SplineBase.prototype.dateTimeInterval = function (series) {\n var interval = series.xAxis.actualIntervalType;\n var intervalInMilliseconds;\n if (interval === 'Years') {\n intervalInMilliseconds = 365 * 24 * 60 * 60 * 1000;\n }\n else if (interval === 'Months') {\n intervalInMilliseconds = 30 * 24 * 60 * 60 * 1000;\n }\n else if (interval === 'Days') {\n intervalInMilliseconds = 24 * 60 * 60 * 1000;\n }\n else if (interval === 'Hours') {\n intervalInMilliseconds = 60 * 60 * 1000;\n }\n else if (interval === 'Minutes') {\n intervalInMilliseconds = 60 * 1000;\n }\n else if (interval === 'Seconds') {\n intervalInMilliseconds = 1000;\n }\n else {\n intervalInMilliseconds = 30 * 24 * 60 * 60 * 1000;\n }\n return intervalInMilliseconds;\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n SplineBase.prototype.doAnimation = function (series) {\n var option = series.animation;\n this.doLinearAnimation(series, option);\n };\n return SplineBase;\n}(LineBase));\nexport { SplineBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PathOption, getPoint, withInRange, TransformToVisible } from '../../common/utils/helper';\nimport { SplineBase } from './spline-base';\n/**\n * `SplineSeries` module is used to render the spline series.\n */\nvar SplineSeries = /** @class */ (function (_super) {\n __extends(SplineSeries, _super);\n function SplineSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render the spline series.\n * @return {void}\n * @private\n */\n SplineSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var chart = series.chart;\n var marker = series.marker;\n var ySpline;\n var options;\n var firstPoint = null;\n var secondPoint = null;\n var direction = '';\n var pt1;\n var pt2;\n var bpt1;\n var bpt2;\n var data;\n var controlPointCount = 0;\n var controlPoint1;\n var controlPoint2;\n var startPoint = 'M';\n var points = this.filterEmptyPoints(series);\n var previous;\n var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? TransformToVisible : getPoint;\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n previous = this.getPreviousIndex(points, point.index - 1, series);\n point.symbolLocations = [];\n point.regions = [];\n if (point.visible && withInRange(points[previous], point, points[this.getNextIndex(points, point.index - 1, series)], series)) {\n if (firstPoint !== null) {\n data = series.drawPoints[previous];\n controlPoint1 = data.controlPoint1;\n controlPoint2 = data.controlPoint2;\n pt1 = getCoordinate(firstPoint.xValue, firstPoint.yValue, xAxis, yAxis, isInverted, series);\n pt2 = getCoordinate(point.xValue, point.yValue, xAxis, yAxis, isInverted, series);\n bpt1 = getCoordinate(controlPoint1.x, controlPoint1.y, xAxis, yAxis, isInverted, series);\n bpt2 = getCoordinate(controlPoint2.x, controlPoint2.y, xAxis, yAxis, isInverted, series);\n direction = direction.concat((startPoint + ' ' + (pt1.x) + ' ' + (pt1.y) + ' ' + 'C' + ' ' + (bpt1.x) + ' '\n + (bpt1.y) + ' ' + (bpt2.x) + ' ' + (bpt2.y) + ' ' + (pt2.x) + ' ' + (pt2.y) + ' '));\n startPoint = 'L';\n }\n firstPoint = point;\n this.storePointLocation(point, series, isInverted, getCoordinate);\n }\n else {\n startPoint = 'M';\n firstPoint = null;\n point.symbolLocations = [];\n }\n }\n var name = series.category === 'TrendLine' ? series.chart.element.id + '_Series_' + series.sourceIndex + '_TrendLine_' + series.index :\n series.chart.element.id + '_Series_' + series.index;\n options = new PathOption(name, 'transparent', series.width, series.interior, series.opacity, series.dashArray, direction);\n this.appendLinePath(options, series, '');\n this.renderMarker(series);\n };\n /**\n * Get module name.\n */\n SplineSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'SplineSeries';\n };\n /**\n * To destroy the spline.\n * @return {void}\n * @private\n */\n SplineSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n return SplineSeries;\n}(SplineBase));\nexport { SplineSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PathOption, getPoint, withInRange, TransformToVisible } from '../../common/utils/helper';\nimport { SplineBase } from './spline-base';\n/**\n * `SplineAreaSeries` module used to render the spline area series.\n */\nvar SplineAreaSeries = /** @class */ (function (_super) {\n __extends(SplineAreaSeries, _super);\n function SplineAreaSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render the splineArea series.\n * @return {void}\n * @private\n */\n SplineAreaSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var firstPoint = null;\n var direction = '';\n var startPoint = null;\n var startPoint1 = null;\n var pt1;\n var pt2;\n var bpt1;\n var bpt2;\n var controlPt1;\n var controlPt2;\n var points = this.filterEmptyPoints(series);\n var pointsLength = series.points.length;\n var point;\n var previous;\n var getCoordinate = series.chart.chartAreaType === 'PolarRadar' ? TransformToVisible : getPoint;\n var origin = series.chart.chartAreaType === 'PolarRadar' ? series.points[0].yValue :\n Math.max(series.yAxis.visibleRange.min, 0);\n for (var i = 0; i < pointsLength; i++) {\n point = series.points[i];\n point.symbolLocations = [];\n point.regions = [];\n previous = this.getPreviousIndex(points, point.index - 1, series);\n if (point.visible &&\n withInRange(points[previous], point, points[this.getNextIndex(points, point.index - 1, series)], series)) {\n if (firstPoint) {\n controlPt1 = series.drawPoints[previous].controlPoint1;\n controlPt2 = series.drawPoints[previous].controlPoint2;\n pt1 = getCoordinate(firstPoint.xValue, firstPoint.yValue, xAxis, yAxis, isInverted, series);\n pt2 = getCoordinate(point.xValue, point.yValue, xAxis, yAxis, isInverted, series);\n bpt1 = getCoordinate(controlPt1.x, controlPt1.y, xAxis, yAxis, isInverted, series);\n bpt2 = getCoordinate(controlPt2.x, controlPt2.y, xAxis, yAxis, isInverted, series);\n direction = direction.concat(' C' + bpt1.x + ' '\n + bpt1.y + ' ' + bpt2.x + ' ' + bpt2.y + ' ' + pt2.x + ' ' + pt2.y + ' ');\n }\n else {\n // Start point for the current path\n startPoint = getCoordinate(point.xValue, origin, xAxis, yAxis, isInverted, series);\n direction += ('M ' + startPoint.x + ' ' + startPoint.y + ' ');\n // First Point to draw the area path\n startPoint1 = getCoordinate(point.xValue, point.yValue, xAxis, yAxis, isInverted, series);\n direction += ('L ' + startPoint1.x + ' ' + startPoint1.y + ' ');\n }\n this.storePointLocation(point, series, isInverted, getCoordinate);\n firstPoint = point;\n }\n else {\n firstPoint = null;\n point.symbolLocations = [];\n }\n if (((i + 1 < pointsLength && !series.points[i + 1].visible) || i === pointsLength - 1)\n && pt2 && startPoint) {\n startPoint = getCoordinate(point.xValue, origin, xAxis, yAxis, isInverted, series);\n direction = direction.concat('L ' + (startPoint.x) + ' ' + (startPoint.y));\n }\n }\n this.appendLinePath(new PathOption(series.chart.element.id + '_Series_' + series.index, series.interior, series.border.width, series.border.color, series.opacity, series.dashArray, direction), series, '');\n this.renderMarker(series);\n };\n /**\n * Get module name.\n */\n SplineAreaSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'SplineAreaSeries';\n };\n /**\n * To destroy the spline.\n * @return {void}\n * @private\n */\n SplineAreaSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n return SplineAreaSeries;\n}(SplineBase));\nexport { SplineAreaSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { LineBase } from '../series/line-base';\nimport { Series, Points } from '../series/chart-series';\nimport { RectOption, Rect } from '../../common/utils/helper';\nimport { findClipRect } from '../../common/utils/helper';\n/**\n * Technical Analysis module helps to predict the market trend\n */\nvar TechnicalAnalysis = /** @class */ (function (_super) {\n __extends(TechnicalAnalysis, _super);\n function TechnicalAnalysis() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the collection of series, that are used to represent the given technical indicator\n * @private\n */\n TechnicalAnalysis.prototype.initSeriesCollection = function (indicator, chart) {\n indicator.targetSeries = [];\n var signalLine = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(signalLine, indicator, 'SignalLine', indicator.fill, indicator.width, chart);\n };\n /**\n * Initializes the properties of the given series\n * @private\n */\n TechnicalAnalysis.prototype.setSeriesProperties = function (series, indicator, name, fill, width, chart) {\n series.name = name;\n series.xName = 'x';\n series.yName = 'y';\n series.fill = fill || '#606eff';\n series.dashArray = indicator.dashArray;\n series.width = width;\n series.xAxisName = indicator.xAxisName;\n series.animation = indicator.animation;\n series.yAxisName = indicator.yAxisName;\n series.clipRectElement = indicator.clipRectElement;\n series.points = [];\n series.enableTooltip = true;\n series.interior = series.fill;\n series.category = 'Indicator';\n series.index = indicator.index;\n series.chart = chart;\n series.xMin = Infinity;\n series.xMax = -Infinity;\n series.yMin = Infinity;\n series.yMax = -Infinity;\n series.xData = [];\n series.yData = [];\n series.marker.visible = false;\n indicator.targetSeries.push(series);\n };\n /**\n * Creates the elements of a technical indicator\n * @private\n */\n TechnicalAnalysis.prototype.createIndicatorElements = function (chart, indicator, index) {\n if (indicator.seriesName || indicator.dataSource) {\n findClipRect(indicator.targetSeries[0]);\n }\n var clipRect = new Rect(0, 0, 0, 0);\n if (indicator.seriesName || indicator.dataSource) {\n clipRect = indicator.targetSeries[0].clipRect;\n }\n //defines the clip rect element\n var clipRectElement = chart.renderer.drawClipPath(new RectOption(chart.element.id + '_ChartIndicatorClipRect_' + index, 'transparent', { width: 1, color: 'Gray' }, 1, {\n x: 0, y: 0, width: clipRect.width,\n height: clipRect.height,\n }));\n //creates the group for an indicator\n indicator.indicatorElement = chart.renderer.createGroup({\n 'id': chart.element.id + 'IndicatorGroup' + index,\n 'transform': 'translate(' + clipRect.x + ',' + clipRect.y + ')',\n 'clip-path': 'url(#' + chart.element.id + '_ChartIndicatorClipRect_' + index + ')'\n });\n indicator.indicatorElement.appendChild(clipRectElement);\n //Defines a group for each series in a technical indicator\n for (var _i = 0, _a = indicator.targetSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n series.clipRectElement = clipRectElement;\n var element = series.chart.renderer.createGroup({\n 'id': series.chart.element.id + '_Indicator_' +\n indicator.index + '_' + series.name + '_Group'\n });\n indicator.indicatorElement.appendChild(element);\n series.seriesElement = element;\n }\n chart.indicatorElements.appendChild(indicator.indicatorElement);\n };\n TechnicalAnalysis.prototype.getDataPoint = function (x, y, sourcePoint, series, index, indicator) {\n if (indicator === void 0) { indicator = null; }\n var point = new Points();\n point.x = x;\n point.y = y;\n point.xValue = sourcePoint.xValue;\n point.color = series.fill;\n point.index = index;\n point.yValue = y;\n point.visible = true;\n series.xMin = Math.min(series.xMin, point.xValue);\n series.yMin = Math.min(series.yMin, point.yValue);\n series.xMax = Math.max(series.xMax, point.xValue);\n series.yMax = Math.max(series.yMax, point.yValue);\n series.xData.push(point.xValue);\n if (indicator && indicator.type === 'Macd' && series.type === 'Column') {\n if (point.y >= 0) {\n point.color = indicator.macdPositiveColor;\n }\n else {\n point.color = indicator.macdNegativeColor;\n }\n }\n return point;\n };\n TechnicalAnalysis.prototype.getRangePoint = function (x, high, low, sourcePoint, series, index, indicator) {\n if (indicator === void 0) { indicator = null; }\n var point = new Points();\n point.x = x;\n point.high = high;\n point.low = low;\n point.xValue = sourcePoint.xValue;\n point.color = series.fill;\n point.index = index;\n point.visible = true;\n series.xData.push(point.xValue);\n return point;\n };\n TechnicalAnalysis.prototype.setSeriesRange = function (points, indicator, series) {\n if (series === void 0) { series = null; }\n if (!series) {\n indicator.targetSeries[0].points = points;\n }\n else {\n series.points = points;\n }\n };\n return TechnicalAnalysis;\n}(LineBase));\nexport { TechnicalAnalysis };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { firstToLowerCase } from '../../common/utils/helper';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `SmaIndicator` module is used to render SMA indicator.\n */\nvar SmaIndicator = /** @class */ (function (_super) {\n __extends(SmaIndicator, _super);\n function SmaIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the predictions based on SMA approach\n * @private\n */\n SmaIndicator.prototype.initDataSource = function (indicator, chart) {\n var smaPoints = [];\n var points = indicator.points;\n if (points && points.length) {\n //prepare data\n var validData = points;\n var field = firstToLowerCase(indicator.field);\n var xField = 'x';\n var signalSeries = indicator.targetSeries[0];\n if (validData && validData.length && validData.length >= indicator.period) {\n //find initial average\n var average = 0;\n var sum = 0;\n for (var i = 0; i < indicator.period; i++) {\n sum += validData[i][field];\n }\n average = sum / indicator.period;\n smaPoints.push(this.getDataPoint(validData[indicator.period - 1][xField], average, validData[indicator.period - 1], signalSeries, smaPoints.length));\n var index = indicator.period;\n while (index < validData.length) {\n sum -= validData[index - indicator.period][field];\n sum += validData[index][field];\n average = sum / indicator.period;\n smaPoints.push(this.getDataPoint(validData[index][xField], average, validData[index], signalSeries, smaPoints.length));\n index++;\n }\n }\n this.setSeriesRange(smaPoints, indicator);\n }\n };\n /**\n * To destroy the SMA indicator\n * @return {void}\n * @private\n */\n SmaIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the SMA indicator\n */\n };\n /**\n * Get module name.\n */\n SmaIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'SmaIndicator';\n };\n return SmaIndicator;\n}(TechnicalAnalysis));\nexport { SmaIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { firstToLowerCase } from '../../common/utils/helper';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `EmaIndicator` module is used to render EMA indicator.\n */\nvar EmaIndicator = /** @class */ (function (_super) {\n __extends(EmaIndicator, _super);\n function EmaIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the predictions based on EMA approach\n * @private\n */\n EmaIndicator.prototype.initDataSource = function (indicator, chart) {\n var field = firstToLowerCase(indicator.field);\n var xField = 'x';\n var emaPoints = [];\n var signalSeries = indicator.targetSeries[0];\n //prepare data\n var validData = indicator.points;\n if (validData && validData.length && validData.length >= indicator.period) {\n //find initial average\n var sum = 0;\n var average = 0;\n //smoothing factor\n var k = (2 / (indicator.period + 1));\n for (var i = 0; i < indicator.period; i++) {\n sum += validData[i][field];\n }\n average = sum / indicator.period;\n emaPoints.push(this.getDataPoint(validData[indicator.period - 1][xField], average, validData[indicator.period - 1], signalSeries, emaPoints.length));\n var index = indicator.period;\n while (index < validData.length) {\n //previous average\n var prevAverage = emaPoints[index - indicator.period][signalSeries.yName];\n var yValue = (validData[index][field] - prevAverage) * k + prevAverage;\n emaPoints.push(this.getDataPoint(validData[index][xField], yValue, validData[index], signalSeries, emaPoints.length));\n index++;\n }\n }\n this.setSeriesRange(emaPoints, indicator);\n };\n /**\n * To destroy the EMA Indicator\n * @return {void}\n * @private\n */\n EmaIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the EMA Indicator\n */\n };\n /**\n * Get module name.\n */\n EmaIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'EmaIndicator';\n };\n return EmaIndicator;\n}(TechnicalAnalysis));\nexport { EmaIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { firstToLowerCase } from '../../common/utils/helper';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `TmaIndicator` module is used to render TMA indicator.\n */\nvar TmaIndicator = /** @class */ (function (_super) {\n __extends(TmaIndicator, _super);\n function TmaIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the predictions based on TMA approach\n * @private\n */\n TmaIndicator.prototype.initDataSource = function (indicator, chart) {\n var tmaPoints = [];\n var field = firstToLowerCase(indicator.field);\n var xField = 'x';\n var signalSeries = indicator.targetSeries[0];\n //prepare data\n var validData = indicator.points;\n if (validData && validData.length && validData.length >= indicator.period) {\n var signalSeries_1 = indicator.targetSeries[0];\n //prepare data\n var validData_1 = indicator.points;\n if (validData_1.length && validData_1.length >= indicator.period) {\n //smoothing factor\n var k = (2 / (indicator.period + 1));\n //find initial average\n var average = 0;\n var sum = 0;\n var sumOfSMA = 0;\n var averageSMA = 0;\n var smaValues = [];\n //sma values\n var index = 0;\n var length_1 = validData_1.length;\n var period = indicator.period;\n while (length_1 >= period) {\n sum = 0;\n index = validData_1.length - length_1;\n for (var j = index; j < index + period; j++) {\n sum = sum + validData_1[j][field];\n }\n sum = sum / period;\n smaValues.push(sum);\n length_1--;\n }\n //initial values\n for (var k_1 = 0; k_1 < period - 1; k_1++) {\n sum = 0;\n for (var j = 0; j < k_1 + 1; j++) {\n sum = sum + validData_1[j][field];\n }\n sum = sum / (k_1 + 1);\n smaValues.splice(k_1, 0, sum);\n }\n index = indicator.period;\n while (index <= smaValues.length) {\n sum = 0;\n for (var j = index - indicator.period; j < index; j++) {\n sum = sum + smaValues[j];\n }\n sum = sum / indicator.period;\n tmaPoints.push(this.getDataPoint(validData_1[index - 1][xField], sum, validData_1[index - 1], signalSeries_1, tmaPoints.length));\n index++;\n }\n }\n }\n this.setSeriesRange(tmaPoints, indicator);\n };\n /**\n * To destroy the TMA indicator.\n * @return {void}\n * @private\n */\n TmaIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the TMA Indicator\n */\n };\n /**\n * Get module name.\n */\n TmaIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'TmaIndicator';\n };\n return TmaIndicator;\n}(TechnicalAnalysis));\nexport { TmaIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `AccumulationDistributionIndicator` module is used to render accumulation distribution indicator.\n */\nvar AccumulationDistributionIndicator = /** @class */ (function (_super) {\n __extends(AccumulationDistributionIndicator, _super);\n function AccumulationDistributionIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the predictions using accumulation distribution approach\n * @private\n */\n AccumulationDistributionIndicator.prototype.initDataSource = function (indicator, chart) {\n var sourceSeries = indicator.sourceSeries;\n var adPoints = [];\n var validData = indicator.points;\n if (validData.length > 0 && validData.length > indicator.period) {\n adPoints = this.calculateADPoints(indicator, validData);\n }\n this.setSeriesRange(adPoints, indicator);\n };\n /**\n * Calculates the Accumulation Distribution values\n * @private\n */\n AccumulationDistributionIndicator.prototype.calculateADPoints = function (indicator, validData) {\n var temp = [];\n var sum = 0;\n var i = 0;\n var value = 0;\n var high = 0;\n var low = 0;\n var close = 0;\n var signalSeries = indicator.targetSeries[0];\n for (i = 0; i < validData.length; i++) {\n high = Number(validData[i].high);\n low = Number(validData[i].low);\n close = Number(validData[i].close);\n /**\n * Money Flow Multiplier = [(Close - Low) - (High - Close)] /(High - Low)\n * Money Flow Volume = Money Flow Multiplier x Volume for the Period\n * ADL = Previous ADL + Current Period's Money Flow Volume\n */\n value = ((close - low) - (high - close)) / (high - low);\n /**\n * Sum is to calculate the Y values of the Accumulation distribution indicator\n */\n sum = sum + value * Number(validData[i].volume);\n /**\n * To calculate the x and y values for the Accumulation distribution indicator\n */\n temp[i] = this.getDataPoint(validData[i].x, sum, validData[i], signalSeries, temp.length);\n }\n return temp;\n };\n /**\n * To destroy the Accumulation Distribution Technical Indicator.\n * @return {void}\n * @private\n */\n AccumulationDistributionIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the Accumulation Distribution Technical indicator\n */\n };\n /**\n * Get module name.\n */\n AccumulationDistributionIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the Indicator\n */\n return 'AccumulationDistributionIndicator';\n };\n return AccumulationDistributionIndicator;\n}(TechnicalAnalysis));\nexport { AccumulationDistributionIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `AtrIndicator` module is used to render ATR indicator.\n */\nvar AtrIndicator = /** @class */ (function (_super) {\n __extends(AtrIndicator, _super);\n function AtrIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the predictions using Average True Range approach\n * @private\n */\n AtrIndicator.prototype.initDataSource = function (indicator, chart) {\n var sourceSeries = indicator.sourceSeries;\n var atrPoints = [];\n var validData = indicator.points;\n if (validData.length > 0 && validData.length > indicator.period) {\n this.calculateATRPoints(indicator, validData);\n }\n };\n /**\n * To calculate Average True Range indicator points\n * @private\n */\n AtrIndicator.prototype.calculateATRPoints = function (indicator, validData) {\n var average = 0;\n var highLow = 0;\n var highClose = 0;\n var lowClose = 0;\n var trueRange = 0;\n var points = [];\n var temp = [];\n var period = indicator.period;\n var sum = 0;\n var y = 'y';\n var signalSeries = indicator.targetSeries[0];\n for (var i = 0; i < validData.length; i++) {\n /**\n * Current High less the current Low\n * Current High less the previous Close (absolute value)\n * Current Low less the previous Close (absolute value)\n */\n highLow = Number(validData[i].high) - Number(validData[i].low);\n if (i > 0) {\n //\n highClose = Math.abs(Number(validData[i].high) - Number(validData[i - 1].close));\n lowClose = Math.abs(Number(validData[i].low) - Number(validData[i - 1].close));\n }\n /**\n * To find the maximum of highLow, highClose, lowClose\n */\n trueRange = Math.max(highLow, highClose, lowClose);\n sum = sum + trueRange;\n /**\n * Push the x and y values for the Average true range indicator\n */\n if (i >= period) {\n average = (Number(temp[i - 1][y]) * (period - 1) + trueRange) / period;\n points.push(this.getDataPoint(validData[i].x, average, validData[i], signalSeries, points.length));\n }\n else {\n average = sum / period;\n if (i === period - 1) {\n points.push(this.getDataPoint(validData[i].x, average, validData[i], signalSeries, points.length));\n }\n }\n temp[i] = { x: validData[i].x, y: average };\n }\n this.setSeriesRange(points, indicator);\n };\n /**\n * To destroy the Average true range indicator.\n * @return {void}\n * @private\n */\n AtrIndicator.prototype.destroy = function (chart) {\n /**\n * Destroy the Average true range indicator\n */\n };\n /**\n * Get module name.\n */\n AtrIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the Indicator\n */\n return 'AtrIndicator';\n };\n return AtrIndicator;\n}(TechnicalAnalysis));\nexport { AtrIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Series } from '../series/chart-series';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `MomentumIndicator` module is used to render Momentum indicator.\n */\nvar MomentumIndicator = /** @class */ (function (_super) {\n __extends(MomentumIndicator, _super);\n function MomentumIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the collection of series to represent a momentum indicator\n * @private\n */\n MomentumIndicator.prototype.initSeriesCollection = function (indicator, chart) {\n _super.prototype.initSeriesCollection.call(this, indicator, chart);\n var upperLine = new Series(indicator, 'targetSeries', {}, true);\n _super.prototype.setSeriesProperties.call(this, upperLine, indicator, 'UpperLine', indicator.upperLine.color, indicator.upperLine.width, chart);\n };\n /**\n * Defines the predictions using momentum approach\n * @private\n */\n MomentumIndicator.prototype.initDataSource = function (indicator, chart) {\n var upperCollection = [];\n var signalCollection = [];\n var validData = indicator.points;\n if (validData && validData.length) {\n var upperSeries = indicator.targetSeries[1];\n var signalSeries = indicator.targetSeries[0];\n var length_1 = indicator.period;\n if (validData.length >= indicator.period) {\n for (var i = 0; i < validData.length; i++) {\n upperCollection.push(this.getDataPoint(validData[i].x, 100, validData[i], upperSeries, upperCollection.length));\n if (!(i < length_1)) {\n signalCollection.push(this.getDataPoint(validData[i].x, (Number(validData[i].close) / Number(validData[i - length_1].close) * 100), validData[i], signalSeries, signalCollection.length));\n }\n }\n }\n this.setSeriesRange(signalCollection, indicator, indicator.targetSeries[0]);\n this.setSeriesRange(upperCollection, indicator, indicator.targetSeries[1]);\n }\n };\n /**\n * To destroy the momentum indicator\n * @return {void}\n * @private\n */\n MomentumIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the momentum indicator\n */\n };\n /**\n * Get module name.\n */\n MomentumIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'MomentumIndicator';\n };\n return MomentumIndicator;\n}(TechnicalAnalysis));\nexport { MomentumIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Series } from '../series/chart-series';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `RsiIndicator` module is used to render RSI indicator.\n */\nvar RsiIndicator = /** @class */ (function (_super) {\n __extends(RsiIndicator, _super);\n function RsiIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Initializes the series collection to represent the RSI Indicator\n * @private\n */\n RsiIndicator.prototype.initSeriesCollection = function (indicator, chart) {\n _super.prototype.initSeriesCollection.call(this, indicator, chart);\n if (indicator.showZones) {\n var lowerLine = new Series(indicator, 'targetSeries', {}, true);\n _super.prototype.setSeriesProperties.call(this, lowerLine, indicator, 'LowerLine', indicator.lowerLine.color, indicator.lowerLine.width, chart);\n var upperLine = new Series(indicator, 'targetSeries', {}, true);\n _super.prototype.setSeriesProperties.call(this, upperLine, indicator, 'UpperLine', indicator.upperLine.color, indicator.upperLine.width, chart);\n }\n };\n /**\n * Defines the predictions using RSI approach\n * @private\n */\n RsiIndicator.prototype.initDataSource = function (indicator, chart) {\n var signalCollection = [];\n var lowerCollection = [];\n var upperCollection = [];\n var signalSeries = indicator.targetSeries[0];\n //prepare data\n var validData = indicator.points;\n if (validData.length && validData.length >= indicator.period) {\n //Find upper band and lower band values\n if (indicator.showZones) {\n for (var i = 0; i < validData.length; i++) {\n upperCollection.push(this.getDataPoint(validData[i].x, indicator.overBought, validData[i], indicator.targetSeries[1], upperCollection.length));\n lowerCollection.push(this.getDataPoint(validData[i].x, indicator.overSold, validData[i], indicator.targetSeries[2], lowerCollection.length));\n }\n }\n //Find signal line value\n var prevClose = Number(validData[0].close);\n var gain = 0;\n var loss = 0;\n for (var i = 1; i <= indicator.period; i++) {\n var close_1 = Number(validData[i].close);\n if (close_1 > prevClose) {\n gain += close_1 - prevClose;\n }\n else {\n loss += prevClose - close_1;\n }\n prevClose = close_1;\n }\n gain = gain / indicator.period;\n loss = loss / indicator.period;\n signalCollection.push(this.getDataPoint(validData[indicator.period].x, 100 - (100 / (1 + gain / loss)), validData[indicator.period], signalSeries, signalCollection.length));\n for (var j = indicator.period + 1; j < validData.length; j++) {\n var close_2 = Number(validData[j].close);\n if (close_2 > prevClose) {\n gain = (gain * (indicator.period - 1) + (close_2 - prevClose)) / indicator.period;\n loss = (loss * (indicator.period - 1)) / indicator.period;\n }\n else if (close_2 < prevClose) {\n loss = (loss * (indicator.period - 1) + (prevClose - close_2)) / indicator.period;\n gain = (gain * (indicator.period - 1)) / indicator.period;\n }\n prevClose = close_2;\n signalCollection.push(this.getDataPoint(validData[j].x, 100 - (100 / (1 + gain / loss)), validData[j], signalSeries, signalCollection.length));\n }\n }\n this.setSeriesRange(signalCollection, indicator, indicator.targetSeries[0]);\n if (indicator.showZones) {\n this.setSeriesRange(upperCollection, indicator, indicator.targetSeries[1]);\n this.setSeriesRange(lowerCollection, indicator, indicator.targetSeries[2]);\n }\n };\n /**\n * To destroy the RSI Indicator.\n * @return {void}\n * @private\n */\n RsiIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the RSI Indicator\n */\n };\n /**\n * Get module name.\n */\n RsiIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the indicator.\n */\n return 'RsiIndicator';\n };\n return RsiIndicator;\n}(TechnicalAnalysis));\nexport { RsiIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Series } from '../series/chart-series';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `StochasticIndicator` module is used to render stochastic indicator.\n */\nvar StochasticIndicator = /** @class */ (function (_super) {\n __extends(StochasticIndicator, _super);\n function StochasticIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the collection of series that represents the stochastic indicator\n * @private\n */\n StochasticIndicator.prototype.initSeriesCollection = function (indicator, chart) {\n _super.prototype.initSeriesCollection.call(this, indicator, chart);\n var periodLine = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(periodLine, indicator, 'PeriodLine', indicator.periodLine.color, indicator.periodLine.width, chart);\n if (indicator.showZones) {\n var upperSeries = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(upperSeries, indicator, 'UpperLine', indicator.upperLine.color, indicator.upperLine.width, chart);\n var lowerSeries = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(lowerSeries, indicator, 'LowerLine', indicator.lowerLine.color, indicator.lowerLine.width, chart);\n }\n };\n /**\n * Defines the predictions based on stochastic approach\n * @private\n */\n StochasticIndicator.prototype.initDataSource = function (indicator, chart) {\n var signalCollection = [];\n var upperCollection = [];\n var lowerCollection = [];\n var periodCollection = [];\n var source = [];\n var sourceSeries = indicator.sourceSeries;\n var point = {};\n //prepare data\n var validData = indicator.points;\n if (validData.length && validData.length >= indicator.period) {\n if (indicator.showZones) {\n for (var i = 0; i < validData.length; i++) {\n upperCollection.push(this.getDataPoint(validData[i].x, indicator.overBought, validData[i], indicator.targetSeries[2], upperCollection.length));\n lowerCollection.push(this.getDataPoint(validData[i].x, indicator.overSold, validData[i], indicator.targetSeries[3], lowerCollection.length));\n }\n }\n source = this.calculatePeriod(indicator.period, indicator.kPeriod, validData, indicator.targetSeries[1]);\n periodCollection = this.smaCalculation(indicator.period, indicator.kPeriod, source, indicator.targetSeries[1]);\n signalCollection = this.smaCalculation(indicator.period + indicator.kPeriod - 1, indicator.dPeriod, source, indicator.targetSeries[0]);\n }\n this.setSeriesRange(signalCollection, indicator, indicator.targetSeries[0]);\n this.setSeriesRange(periodCollection, indicator, indicator.targetSeries[1]);\n if (indicator.showZones) {\n this.setSeriesRange(upperCollection, indicator, indicator.targetSeries[2]);\n this.setSeriesRange(lowerCollection, indicator, indicator.targetSeries[3]);\n }\n };\n /**\n * Calculates the SMA Values\n * @private\n */\n StochasticIndicator.prototype.smaCalculation = function (period, kPeriod, data, sourceSeries) {\n var pointCollection = [];\n if (data.length >= period + kPeriod) {\n var count = period + (kPeriod - 1);\n var temp = [];\n var values = [];\n for (var i = 0; i < data.length; i++) {\n var value = Number(data[i].y);\n temp.push(value);\n }\n var length_1 = temp.length;\n while (length_1 >= count) {\n var sum = 0;\n for (var i = period - 1; i < (period + kPeriod - 1); i++) {\n sum = sum + temp[i];\n }\n sum = sum / kPeriod;\n values.push(sum.toFixed(2));\n temp.splice(0, 1);\n length_1 = temp.length;\n }\n var len = count - 1;\n for (var i = 0; i < data.length; i++) {\n if (!(i < len)) {\n pointCollection.push(this.getDataPoint(data[i].x, Number(values[i - len]), data[i], sourceSeries, pointCollection.length));\n data[i].y = Number((values[i - len]));\n }\n }\n }\n return pointCollection;\n };\n /**\n * Calculates the period line values.\n * @private\n */\n StochasticIndicator.prototype.calculatePeriod = function (period, kPeriod, data, series) {\n var lowValues = [];\n var highValues = [];\n var closeValues = [];\n var modifiedSource = [];\n for (var j = 0; j < data.length; j++) {\n lowValues[j] = data[j].low;\n highValues[j] = data[j].high;\n closeValues[j] = data[j].close;\n }\n if (data.length > period) {\n var totalPeriod = period + kPeriod;\n var mins = [];\n var maxs = [];\n for (var i = 0; i < period - 1; ++i) {\n maxs.push(0);\n mins.push(0);\n modifiedSource.push(this.getDataPoint(data[i].x, data[i].close, data[i], series, modifiedSource.length));\n }\n for (var i = period - 1; i < data.length; ++i) {\n var min = Number.MAX_VALUE;\n var max = Number.MIN_VALUE;\n for (var j = 0; j < period; ++j) {\n min = Math.min(min, lowValues[i - j]);\n max = Math.max(max, highValues[i - j]);\n }\n maxs.push(max);\n mins.push(min);\n }\n for (var i = period - 1; i < data.length; ++i) {\n var top_1 = 0;\n var bottom = 0;\n top_1 += closeValues[i] - mins[i];\n bottom += maxs[i] - mins[i];\n modifiedSource.push(this.getDataPoint(data[i].x, (top_1 / bottom) * 100, data[i], series, modifiedSource.length));\n }\n }\n return modifiedSource;\n };\n /**\n * To destroy the Stocastic Indicator.\n * @return {void}\n * @private\n */\n StochasticIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the stochastic indicator\n */\n };\n /**\n * Get module name.\n */\n StochasticIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the indicator.\n */\n return 'StochasticIndicator';\n };\n return StochasticIndicator;\n}(TechnicalAnalysis));\nexport { StochasticIndicator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Series } from '../series/chart-series';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `BollingerBands` module is used to render bollinger band indicator.\n */\nvar BollingerBands = /** @class */ (function (_super) {\n __extends(BollingerBands, _super);\n function BollingerBands() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Initializes the series collection to represent bollinger band\n */\n BollingerBands.prototype.initSeriesCollection = function (indicator, chart) {\n indicator.targetSeries = [];\n var rangeArea = new Series(indicator, 'targetSeries', {}, true);\n rangeArea.type = 'RangeArea';\n if (indicator.bandColor !== 'transparent' && indicator.bandColor !== 'none') {\n this.setSeriesProperties(rangeArea, indicator, 'BollingerBand', indicator.bandColor, 0, chart);\n }\n var signalLine = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(signalLine, indicator, 'SignalLine', indicator.fill, indicator.width, chart);\n var upperLine = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(upperLine, indicator, 'UpperLine', indicator.upperLine.color, indicator.upperLine.width, chart);\n var lowerLine = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(lowerLine, indicator, 'LowerLine', indicator.lowerLine.color, indicator.lowerLine.width, chart);\n };\n /**\n * Defines the predictions using Bollinger Band Approach\n * @private\n */\n BollingerBands.prototype.initDataSource = function (indicator, chart) {\n var enableBand = indicator.bandColor !== 'transparent' && indicator.bandColor !== 'none';\n var start = enableBand ? 1 : 0;\n var signalCollection = [];\n var upperCollection = [];\n var lowerCollection = [];\n var bandCollection = [];\n var upperSeries = indicator.targetSeries[start + 1];\n var lowerSeries = indicator.targetSeries[start + 2];\n var signalSeries = indicator.targetSeries[start];\n var rangeAreaSeries = enableBand ? indicator.targetSeries[0] : null;\n //prepare data\n var validData = indicator.points;\n if (validData.length && validData.length >= indicator.period) {\n var sum = 0;\n var deviationSum = 0;\n var multiplier = indicator.standardDeviation;\n var limit = validData.length;\n var length_1 = Math.round(indicator.period);\n var smaPoints = [];\n var deviations = [];\n var bollingerPoints = [];\n for (var i_1 = 0; i_1 < length_1; i_1++) {\n sum += Number(validData[i_1].close);\n }\n var sma = sum / indicator.period;\n for (var i_2 = 0; i_2 < limit; i_2++) {\n var y = Number(validData[i_2].close);\n if (i_2 >= length_1 - 1 && i_2 < limit) {\n if (i_2 - indicator.period >= 0) {\n var diff = y - Number(validData[i_2 - length_1].close);\n sum = sum + diff;\n sma = sum / (indicator.period);\n smaPoints[i_2] = sma;\n deviations[i_2] = Math.pow(y - sma, 2);\n deviationSum += deviations[i_2] - deviations[i_2 - length_1];\n }\n else {\n smaPoints[i_2] = sma;\n deviations[i_2] = Math.pow(y - sma, 2);\n deviationSum += deviations[i_2];\n }\n var range = Math.sqrt(deviationSum / (indicator.period));\n var lowerBand = smaPoints[i_2] - (multiplier * range);\n var upperBand = smaPoints[i_2] + (multiplier * range);\n if (i_2 + 1 === length_1) {\n for (var j_1 = 0; j_1 < length_1 - 1; j_1++) {\n bollingerPoints[j_1] = {\n 'X': validData[j_1].x, 'mb': smaPoints[i_2],\n 'lb': lowerBand, 'ub': upperBand, visible: true\n };\n }\n }\n bollingerPoints[i_2] = {\n 'X': validData[i_2].x, 'mb': smaPoints[i_2],\n 'lb': lowerBand, 'ub': upperBand, visible: true\n };\n }\n else {\n if (i_2 < indicator.period - 1) {\n smaPoints[i_2] = sma;\n deviations[i_2] = Math.pow(y - sma, 2);\n deviationSum += deviations[i_2];\n }\n }\n }\n var i = -1;\n var j = -1;\n for (var k = 0; k < limit; k++) {\n if (k >= (length_1 - 1)) {\n var ub = 'ub';\n var lb = 'lb';\n var mb = 'mb';\n upperCollection.push(this.getDataPoint(validData[k].x, bollingerPoints[k][ub], validData[k], upperSeries, upperCollection.length));\n lowerCollection.push(this.getDataPoint(validData[k].x, bollingerPoints[k][lb], validData[k], lowerSeries, lowerCollection.length));\n signalCollection.push(this.getDataPoint(validData[k].x, bollingerPoints[k][mb], validData[k], signalSeries, signalCollection.length));\n if (enableBand) {\n bandCollection.push(this.getRangePoint(validData[k].x, upperCollection[++i].y, lowerCollection[++j].y, validData[k], rangeAreaSeries, bandCollection.length));\n }\n }\n }\n }\n if (enableBand) {\n this.setSeriesRange(bandCollection, indicator, indicator.targetSeries[0]);\n }\n this.setSeriesRange(signalCollection, indicator, indicator.targetSeries[start]);\n this.setSeriesRange(upperCollection, indicator, indicator.targetSeries[start + 1]);\n this.setSeriesRange(lowerCollection, indicator, indicator.targetSeries[start + 2]);\n };\n /**\n * To destroy the Bollinger Band.\n * @return {void}\n * @private\n */\n BollingerBands.prototype.destroy = function (chart) {\n /**\n * Destroys the bollinger band\n */\n };\n /**\n * Get module name.\n */\n BollingerBands.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'BollingerBandsIndicator';\n };\n return BollingerBands;\n}(TechnicalAnalysis));\nexport { BollingerBands };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Series } from '../series/chart-series';\nimport { TechnicalAnalysis } from './indicator-base';\n/**\n * `MacdIndicator` module is used to render MACD indicator.\n */\nvar MacdIndicator = /** @class */ (function (_super) {\n __extends(MacdIndicator, _super);\n function MacdIndicator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the collection of series to represent the MACD indicator\n * @private\n */\n MacdIndicator.prototype.initSeriesCollection = function (indicator, chart) {\n _super.prototype.initSeriesCollection.call(this, indicator, chart);\n if (indicator.macdType === 'Line' || indicator.macdType === 'Both') {\n var macdSeries = new Series(indicator, 'targetSeries', {}, true);\n this.setSeriesProperties(macdSeries, indicator, 'MacdLine', indicator.macdLine.color, indicator.macdLine.width, chart);\n }\n if (indicator.macdType === 'Histogram' || indicator.macdType === 'Both') {\n var histogramSeries = new Series(indicator, 'targetSeries', {}, true);\n histogramSeries.type = 'Column';\n this.setSeriesProperties(histogramSeries, indicator, 'Histogram', indicator.macdPositiveColor, indicator.width, chart);\n }\n };\n /**\n * Defines the predictions using MACD approach\n * @private\n */\n MacdIndicator.prototype.initDataSource = function (indicator, chart) {\n var signalCollection = [];\n var fastPeriod = indicator.fastPeriod;\n var slowPeriod = indicator.slowPeriod;\n var trigger = indicator.period;\n var length = fastPeriod + trigger;\n var macdCollection = [];\n var histogramCollection = [];\n var validData = indicator.points;\n var signalSeries = indicator.targetSeries[0];\n var histogramSeries;\n var macdLineSeries;\n if (indicator.macdType === 'Histogram') {\n histogramSeries = indicator.targetSeries[1];\n }\n else {\n macdLineSeries = indicator.targetSeries[1];\n if (indicator.macdType === 'Both') {\n histogramSeries = indicator.targetSeries[2];\n }\n }\n if (validData && length < validData.length && slowPeriod <= fastPeriod &&\n slowPeriod > 0 && (length - 2) >= 0) {\n var shortEMA = this.calculateEMAValues(slowPeriod, validData, 'close');\n var longEMA = this.calculateEMAValues(fastPeriod, validData, 'close');\n var macdValues = this.getMACDVales(indicator, shortEMA, longEMA);\n macdCollection = this.getMACDPoints(indicator, macdValues, validData, macdLineSeries || signalSeries);\n var signalEMA = this.calculateEMAValues(trigger, macdCollection, 'y');\n signalCollection = this.getSignalPoints(indicator, signalEMA, validData, signalSeries);\n if (histogramSeries) {\n histogramCollection = this.getHistogramPoints(indicator, macdValues, signalEMA, validData, histogramSeries);\n }\n }\n this.setSeriesRange(signalCollection, indicator, indicator.targetSeries[0]);\n if (histogramSeries) {\n this.setSeriesRange(histogramCollection, indicator, histogramSeries);\n }\n if (macdLineSeries) {\n this.setSeriesRange(macdCollection, indicator, macdLineSeries);\n }\n };\n /**\n * Calculates the EMA values for the given period\n */\n MacdIndicator.prototype.calculateEMAValues = function (period, validData, field) {\n var sum = 0;\n var initialEMA = 0;\n var emaValues = [];\n var emaPercent = (2 / (period + 1));\n for (var i = 0; i < period; i++) {\n sum += Number(validData[i][field]);\n }\n initialEMA = (sum / period);\n emaValues.push(initialEMA);\n var emaAvg = initialEMA;\n for (var j = period; j < validData.length; j++) {\n emaAvg = (Number(validData[j][field]) - emaAvg) * emaPercent + emaAvg;\n emaValues.push(emaAvg);\n }\n return emaValues;\n };\n /**\n * Defines the MACD Points\n */\n MacdIndicator.prototype.getMACDPoints = function (indicator, macdPoints, validData, series) {\n var macdCollection = [];\n var dataMACDIndex = indicator.fastPeriod - 1;\n var macdIndex = 0;\n while (dataMACDIndex < validData.length) {\n macdCollection.push(this.getDataPoint(validData[dataMACDIndex].x, macdPoints[macdIndex], validData[dataMACDIndex], series, macdCollection.length));\n dataMACDIndex++;\n macdIndex++;\n }\n return macdCollection;\n };\n /**\n * Calculates the signal points\n */\n MacdIndicator.prototype.getSignalPoints = function (indicator, signalEma, validData, series) {\n var dataSignalIndex = indicator.fastPeriod + indicator.period - 2;\n var signalIndex = 0;\n var signalCollection = [];\n while (dataSignalIndex < validData.length) {\n signalCollection.push(this.getDataPoint(validData[dataSignalIndex].x, signalEma[signalIndex], validData[dataSignalIndex], series, signalCollection.length));\n dataSignalIndex++;\n signalIndex++;\n }\n return signalCollection;\n };\n /**\n * Calculates the MACD values\n */\n MacdIndicator.prototype.getMACDVales = function (indicator, shortEma, longEma) {\n var macdPoints = [];\n var diff = indicator.fastPeriod - indicator.slowPeriod;\n for (var i = 0; i < longEma.length; i++) {\n macdPoints.push((shortEma[i + diff] - longEma[i]));\n }\n return macdPoints;\n };\n /**\n * Calculates the Histogram Points\n */\n MacdIndicator.prototype.getHistogramPoints = function (indicator, macdPoints, signalEma, validData, series) {\n var dataHistogramIndex = indicator.fastPeriod + indicator.period - 2;\n var histogramIndex = 0;\n var histogramCollection = [];\n while (dataHistogramIndex < validData.length) {\n histogramCollection.push(this.getDataPoint(validData[dataHistogramIndex].x, macdPoints[histogramIndex + (indicator.period - 1)] - signalEma[histogramIndex], validData[dataHistogramIndex], series, histogramCollection.length, indicator));\n dataHistogramIndex++;\n histogramIndex++;\n }\n return histogramCollection;\n };\n /**\n * To destroy the MACD Indicator.\n * @return {void}\n * @private\n */\n MacdIndicator.prototype.destroy = function (chart) {\n /**\n * Destroys the MACD indicator\n */\n };\n /**\n * Get module name.\n */\n MacdIndicator.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'MacdIndicator';\n };\n return MacdIndicator;\n}(TechnicalAnalysis));\nexport { MacdIndicator };\n","import { Series, Points } from '../series/chart-series';\nimport { findClipRect, RectOption } from '../../common/utils/helper';\n/**\n * `Trendline` module is used to render 6 types of trendlines in chart.\n */\nvar Trendlines = /** @class */ (function () {\n function Trendlines() {\n }\n /**\n * Defines the collection of series, that are used to represent a trendline\n * @private\n */\n Trendlines.prototype.initSeriesCollection = function (trendline, chart) {\n var trendLineSeries = new Series(trendline, 'targetSeries', {}, true);\n if (trendline.type === 'Linear' || trendline.type === 'MovingAverage') {\n trendLineSeries.type = 'Line';\n }\n else {\n trendLineSeries.type = 'Spline';\n }\n this.setSeriesProperties(trendLineSeries, trendline, trendline.type, trendline.fill, trendline.width, chart);\n };\n /**\n * Initializes the properties of the trendline series\n */\n Trendlines.prototype.setSeriesProperties = function (series, trendline, name, fill, width, chart) {\n series.name = trendline.name;\n series.xName = 'x';\n series.yName = 'y';\n series.fill = fill || 'blue';\n series.width = width;\n series.clipRectElement = trendline.clipRectElement;\n series.points = [];\n series.enableTooltip = trendline.enableTooltip;\n series.index = trendline.index;\n series.sourceIndex = trendline.sourceIndex;\n series.interior = series.fill;\n series.animation = trendline.animation;\n series.legendShape = 'HorizontalLine';\n series.marker = trendline.marker;\n series.category = 'TrendLine';\n series.chart = chart;\n series.xMin = Infinity;\n series.xMax = -Infinity;\n series.yMin = Infinity;\n series.yMax = -Infinity;\n series.xData = [];\n series.yData = [];\n trendline.targetSeries = series;\n };\n /**\n * Creates the elements of a trendline\n */\n Trendlines.prototype.createTrendLineElements = function (chart, trendline, index, element, clipRectElement) {\n trendline.trendLineElement = element;\n trendline.targetSeries.clipRectElement = clipRectElement;\n trendline.targetSeries.seriesElement = element;\n chart.trendLineElements.appendChild(trendline.trendLineElement);\n };\n /**\n * Defines the data point of trendline\n */\n Trendlines.prototype.getDataPoint = function (x, y, sourcePoint, series, index) {\n var trendPoint = new Points();\n trendPoint.x = x;\n trendPoint.y = y;\n trendPoint.xValue = Number(x);\n trendPoint.color = series.fill;\n trendPoint.index = index;\n trendPoint.yValue = Number(y);\n trendPoint.visible = true;\n series.xMin = Math.min(series.xMin, trendPoint.xValue);\n series.yMin = Math.min(series.yMin, trendPoint.yValue);\n series.xMax = Math.max(series.xMax, trendPoint.xValue);\n series.yMax = Math.max(series.yMax, trendPoint.yValue);\n series.xData.push(trendPoint.xValue);\n return trendPoint;\n };\n /**\n * Finds the slope and intercept of trendline\n */\n Trendlines.prototype.findSlopeIntercept = function (xValues, yValues, trendline, points) {\n var xAvg = 0;\n var yAvg = 0;\n var xyAvg = 0;\n var xxAvg = 0;\n var yyAvg = 0;\n var index = 0;\n var slope = 0;\n var intercept = 0;\n while (index < points.length) {\n xAvg += xValues[index];\n yAvg += yValues[index];\n xyAvg += xValues[index] * yValues[index];\n xxAvg += xValues[index] * xValues[index];\n yyAvg += yValues[index] * yValues[index];\n index++;\n }\n var type = trendline.type;\n if (trendline.intercept && (type === 'Linear' || type === 'Exponential')) {\n intercept = trendline.intercept;\n switch (type) {\n case 'Linear':\n slope = ((xyAvg) - (trendline.intercept * xAvg)) / xxAvg;\n break;\n case 'Exponential':\n slope = ((xyAvg) - (Math.log(Math.abs(trendline.intercept)) * xAvg)) / xxAvg;\n break;\n }\n }\n else {\n slope = ((points.length * xyAvg) - (xAvg * yAvg)) / ((points.length * xxAvg) - (xAvg * xAvg));\n if (type === 'Exponential' || type === 'Power') {\n intercept = Math.exp((yAvg - (slope * xAvg)) / points.length);\n }\n else {\n intercept = (yAvg - (slope * xAvg)) / points.length;\n }\n }\n return { slope: slope, intercept: intercept };\n };\n /**\n * Defines the points to draw the trendlines\n */\n Trendlines.prototype.initDataSource = function (trendline, chart) {\n var points = trendline.points;\n if (points && points.length) {\n //prepare data\n var trendlineSeries = trendline.targetSeries;\n switch (trendline.type) {\n case 'Linear':\n this.setLinearRange(points, trendline, trendlineSeries);\n break;\n case 'Exponential':\n this.setExponentialRange(points, trendline, trendlineSeries);\n break;\n case 'MovingAverage':\n this.setMovingAverageRange(points, trendline, trendlineSeries);\n break;\n case 'Polynomial':\n this.setPolynomialRange(points, trendline, trendlineSeries);\n break;\n case 'Power':\n this.setPowerRange(points, trendline, trendlineSeries);\n break;\n case 'Logarithmic':\n this.setLogarithmicRange(points, trendline, trendlineSeries);\n break;\n }\n if (trendline.type !== 'Linear' && trendline.type !== 'MovingAverage') {\n trendlineSeries.chart.splineSeriesModule.findSplinePoint(trendlineSeries);\n }\n }\n };\n /**\n * Calculation of exponential points\n */\n Trendlines.prototype.setExponentialRange = function (points, trendline, series) {\n var xValue = [];\n var yValue = [];\n var index = 0;\n var slopeIntercept;\n while (index < points.length) {\n var point = points[index];\n xValue.push(point.xValue);\n yValue.push(Math.log(point.yValue));\n index++;\n }\n slopeIntercept = this.findSlopeIntercept(xValue, yValue, trendline, points);\n series.points = this.getExponentialPoints(trendline, points, xValue, yValue, series, slopeIntercept);\n };\n /**\n * Calculation of logarithmic points\n */\n Trendlines.prototype.setLogarithmicRange = function (points, trendline, series) {\n var xLogValue = [];\n var yLogValue = [];\n var xPointsLgr = [];\n var slopeIntercept;\n var index = 0;\n while (index < points.length) {\n var point = points[index];\n xPointsLgr.push(point.xValue);\n xLogValue.push(Math.log(point.xValue));\n yLogValue.push(point.yValue);\n index++;\n }\n slopeIntercept = this.findSlopeIntercept(xLogValue, yLogValue, trendline, points);\n series.points = this.getLogarithmicPoints(trendline, points, xPointsLgr, yLogValue, series, slopeIntercept);\n };\n /**\n * Calculation of polynomial points\n */\n Trendlines.prototype.setPolynomialRange = function (points, trendline, series) {\n var xPolyValues = [];\n var yPolyValues = [];\n var index = 0;\n while (index < points.length) {\n var point = points[index];\n xPolyValues.push(point.xValue);\n yPolyValues.push(point.yValue);\n index++;\n }\n series.points = this.getPolynomialPoints(trendline, points, xPolyValues, yPolyValues, series);\n };\n /**\n * Calculation of power points\n */\n Trendlines.prototype.setPowerRange = function (points, trendline, series) {\n var xValues = [];\n var yValues = [];\n var powerPoints = [];\n var slopeIntercept;\n var index = 0;\n while (index < points.length) {\n var point = points[index];\n powerPoints.push(point.xValue);\n xValues.push(Math.log(point.xValue));\n yValues.push(Math.log(point.yValue));\n index++;\n }\n slopeIntercept = this.findSlopeIntercept(xValues, yValues, trendline, points);\n series.points = this.getPowerPoints(trendline, points, powerPoints, yValues, series, slopeIntercept);\n };\n /**\n * Calculation of linear points\n */\n Trendlines.prototype.setLinearRange = function (points, trendline, series) {\n var xValues = [];\n var yValues = [];\n var slopeIntercept;\n var index = 0;\n while (index < points.length) {\n var point = points[index];\n xValues.push(point.xValue);\n yValues.push(point.yValue);\n index++;\n }\n slopeIntercept = this.findSlopeIntercept(xValues, yValues, trendline, points);\n series.points = this.getLinearPoints(trendline, points, xValues, yValues, series, slopeIntercept);\n };\n /**\n * Calculation of moving average points\n */\n Trendlines.prototype.setMovingAverageRange = function (points, trendline, series) {\n var xValues = [];\n var yValues = [];\n var xAvgValues = [];\n var index = 0;\n while (index < points.length) {\n var point = points[index];\n xAvgValues.push(point.xValue);\n xValues.push(index + 1);\n yValues.push(point.yValue);\n index++;\n }\n series.points = this.getMovingAveragePoints(trendline, points, xAvgValues, yValues, series);\n };\n /**\n * Calculation of logarithmic points\n */\n Trendlines.prototype.getLogarithmicPoints = function (trendline, points, xValues, yValues, series, slopeInterceptLog) {\n var midPoint = Math.round((points.length / 2));\n var pts = [];\n var x1Log = xValues[0] - trendline.backwardForecast;\n var y1Log = slopeInterceptLog.intercept + (slopeInterceptLog.slope * Math.log(x1Log));\n var x2Log = xValues[midPoint - 1];\n var y2Log = slopeInterceptLog.intercept + (slopeInterceptLog.slope * Math.log(x2Log));\n var x3Log = xValues[xValues.length - 1] + trendline.forwardForecast;\n var y3Log = slopeInterceptLog.intercept + (slopeInterceptLog.slope * Math.log(x3Log));\n pts.push(this.getDataPoint(x1Log, y1Log, points[0], series, pts.length));\n pts.push(this.getDataPoint(x2Log, y2Log, points[midPoint - 1], series, pts.length));\n pts.push(this.getDataPoint(x3Log, y3Log, points[points.length - 1], series, pts.length));\n return pts;\n };\n /**\n * Defines the points based on data point\n */\n Trendlines.prototype.getPowerPoints = function (trendline, points, xValues, yValues, series, slopeInterceptPower) {\n var midPoint = Math.round((points.length / 2));\n var pts = [];\n var x1 = xValues[0] - trendline.backwardForecast;\n x1 = x1 > -1 ? x1 : 0;\n var y1 = slopeInterceptPower.intercept * Math.pow(x1, slopeInterceptPower.slope);\n var x2 = xValues[midPoint - 1];\n var y2 = slopeInterceptPower.intercept * Math.pow(x2, slopeInterceptPower.slope);\n var x3 = xValues[xValues.length - 1] + trendline.forwardForecast;\n var y3 = slopeInterceptPower.intercept * Math.pow(x3, slopeInterceptPower.slope);\n pts.push(this.getDataPoint(x1, y1, points[0], series, pts.length));\n pts.push(this.getDataPoint(x2, y2, points[midPoint - 1], series, pts.length));\n pts.push(this.getDataPoint(x3, y3, points[points.length - 1], series, pts.length));\n return pts;\n };\n /**\n * Get the polynomial points based on polynomial slopes\n */\n Trendlines.prototype.getPolynomialPoints = function (trendline, points, xValues, yValues, series) {\n var midPoint = Math.round((points.length / 2));\n var pts = [];\n var polynomialOrder = points.length <= trendline.polynomialOrder ? points.length : trendline.polynomialOrder;\n polynomialOrder = Math.max(2, polynomialOrder);\n polynomialOrder = Math.min(6, polynomialOrder);\n trendline.polynomialOrder = polynomialOrder;\n trendline.polynomialSlopes = [];\n trendline.polynomialSlopes.length = trendline.polynomialOrder + 1;\n var index = 0;\n while (index < xValues.length) {\n var xVal = xValues[index];\n var yVal = yValues[index];\n var subIndex = 0;\n while (subIndex <= trendline.polynomialOrder) {\n if (!trendline.polynomialSlopes[subIndex]) {\n trendline.polynomialSlopes[subIndex] = 0;\n }\n trendline.polynomialSlopes[subIndex] += Math.pow(xVal, subIndex) * yVal;\n ++subIndex;\n }\n index++;\n }\n var numArray = [];\n numArray.length = 1 + 2 * trendline.polynomialOrder;\n var matrix = [];\n matrix.length = trendline.polynomialOrder + 1;\n var newIndex = 0;\n while (newIndex < (trendline.polynomialOrder + 1)) {\n matrix[newIndex] = [];\n matrix[newIndex].length = 3;\n newIndex++;\n }\n var nIndex = 0;\n var num1 = 0;\n while (nIndex < xValues.length) {\n var d = xValues[nIndex];\n var num2 = 1.0;\n var nIndex2 = 0;\n while (nIndex2 < numArray.length) {\n if (!numArray[nIndex2]) {\n numArray[nIndex2] = 0;\n }\n numArray[nIndex2] += num2;\n num2 *= d;\n ++num1;\n ++nIndex2;\n }\n ++nIndex;\n }\n var nnIndex = 0;\n while (nnIndex <= trendline.polynomialOrder) {\n var nnIndex2 = 0;\n while (nnIndex2 <= trendline.polynomialOrder) {\n matrix[nnIndex][nnIndex2] = numArray[nnIndex + nnIndex2];\n ++nnIndex2;\n }\n ++nnIndex;\n }\n if (!this.gaussJordanElimination(matrix, trendline.polynomialSlopes)) {\n trendline.polynomialSlopes = null;\n }\n pts = this.getPoints(trendline, points, xValues, yValues, series);\n return pts;\n };\n /**\n * Defines the moving average points\n */\n Trendlines.prototype.getMovingAveragePoints = function (trendline, points, xValues, yValues, series) {\n var pts = [];\n var period = trendline.period >= points.length ? points.length - 1 : trendline.period;\n period = Math.max(2, period);\n var index = 0;\n var y;\n var x;\n var count;\n var nullCount;\n while (index < points.length - 1) {\n y = count = nullCount = 0;\n for (var j = index; count < period; j++) {\n count++;\n if (!yValues[j]) {\n nullCount++;\n }\n y += yValues[j];\n }\n y = period - nullCount <= 0 ? null : y / (period - nullCount);\n if (y && !isNaN(y)) {\n x = xValues[period - 1 + index];\n pts.push(this.getDataPoint(x, y, points[period - 1 + index], series, pts.length));\n }\n index++;\n }\n return pts;\n };\n /**\n * Defines the linear points\n */\n Trendlines.prototype.getLinearPoints = function (trendline, points, xValues, yValues, series, slopeInterceptLinear) {\n var pts = [];\n var x1Linear = xValues[0] - trendline.backwardForecast;\n var y1Linear = slopeInterceptLinear.slope * x1Linear + slopeInterceptLinear.intercept;\n var x2Linear = xValues[xValues.length - 1] + trendline.forwardForecast;\n var y2Linear = slopeInterceptLinear.slope * x2Linear + slopeInterceptLinear.intercept;\n pts.push(this.getDataPoint(x1Linear, y1Linear, points[0], series, pts.length));\n pts.push(this.getDataPoint(x2Linear, y2Linear, points[points.length - 1], series, pts.length));\n return pts;\n };\n /**\n * Defines the exponential points\n */\n Trendlines.prototype.getExponentialPoints = function (trendline, points, xValues, yValues, series, slopeInterceptExp) {\n var midPoint = Math.round((points.length / 2));\n var ptsExp = [];\n var x1 = xValues[0] - trendline.backwardForecast;\n var y1 = slopeInterceptExp.intercept * Math.exp(slopeInterceptExp.slope * x1);\n var x2 = xValues[midPoint - 1];\n var y2 = slopeInterceptExp.intercept * Math.exp(slopeInterceptExp.slope * x2);\n var x3 = xValues[xValues.length - 1] + trendline.forwardForecast;\n var y3 = slopeInterceptExp.intercept * Math.exp(slopeInterceptExp.slope * x3);\n ptsExp.push(this.getDataPoint(x1, y1, points[0], series, ptsExp.length));\n ptsExp.push(this.getDataPoint(x2, y2, points[midPoint - 1], series, ptsExp.length));\n ptsExp.push(this.getDataPoint(x3, y3, points[points.length - 1], series, ptsExp.length));\n return ptsExp;\n };\n /**\n * Defines the points based on data point\n */\n Trendlines.prototype.getPoints = function (trendline, points, xValues, yValues, series) {\n var midPoint = Math.round((points.length / 2));\n var polynomialSlopes = trendline.polynomialSlopes;\n var pts = [];\n var x1 = 1;\n var index = 1;\n var xValue;\n var yValue;\n while (index <= polynomialSlopes.length) {\n if (index === 1) {\n xValue = xValues[0] - trendline.backwardForecast;\n yValue = this.getPolynomialYValue(polynomialSlopes, xValue);\n pts.push(this.getDataPoint(xValue, yValue, points[0], series, pts.length));\n }\n else if (index === polynomialSlopes.length) {\n xValue = xValues[points.length - 1] + trendline.forwardForecast;\n yValue = this.getPolynomialYValue(polynomialSlopes, xValue);\n pts.push(this.getDataPoint(xValue, yValue, points[points.length - 1], series, pts.length));\n }\n else {\n x1 += (points.length + trendline.forwardForecast) / polynomialSlopes.length;\n xValue = xValues[parseInt(x1.toString(), 10) - 1];\n yValue = this.getPolynomialYValue(polynomialSlopes, xValue);\n pts.push(this.getDataPoint(xValue, yValue, points[parseInt(x1.toString(), 10) - 1], series, pts.length));\n }\n index++;\n }\n return pts;\n };\n /**\n * Defines the polynomial value of y\n */\n Trendlines.prototype.getPolynomialYValue = function (slopes, x) {\n var sum = 0;\n var index = 0;\n while (index < slopes.length) {\n sum += slopes[index] * Math.pow(x, index);\n index++;\n }\n return sum;\n };\n /**\n * Defines the gauss jordan elimination\n */\n Trendlines.prototype.gaussJordanElimination = function (matrix, polynomialSlopes) {\n var length = matrix.length;\n var numArray1 = [];\n var numArray2 = [];\n var numArray3 = [];\n numArray1.length = length;\n numArray2.length = length;\n numArray3.length = length;\n var index = 0;\n while (index < length) {\n numArray3[index] = 0;\n ++index;\n }\n var index1 = 0;\n while (index1 < length) {\n var num1 = 0;\n var index2 = 0;\n var index3 = 0;\n var index4 = 0;\n while (index4 < length) {\n if (numArray3[index4] !== 1) {\n var index5 = 0;\n while (index5 < length) {\n if (numArray3[index5] === 0 && Math.abs(matrix[index4][index5]) >= num1) {\n num1 = Math.abs(matrix[index4][index5]);\n index2 = index4;\n index3 = index5;\n }\n ++index5;\n }\n }\n ++index4;\n }\n ++numArray3[index3];\n if (index2 !== index3) {\n var index4_1 = 0;\n while (index4_1 < length) {\n var num2 = matrix[index2][index4_1];\n matrix[index2][index4_1] = matrix[index3][index4_1];\n matrix[index3][index4_1] = num2;\n ++index4_1;\n }\n var num3 = polynomialSlopes[index2];\n polynomialSlopes[index2] = polynomialSlopes[index3];\n polynomialSlopes[index3] = num3;\n }\n numArray2[index1] = index2;\n numArray1[index1] = index3;\n if (matrix[index3][index3] === 0.0) {\n return false;\n }\n var num4 = 1.0 / matrix[index3][index3];\n matrix[index3][index3] = 1.0;\n var iindex4 = 0;\n while (iindex4 < length) {\n matrix[index3][iindex4] *= num4;\n ++iindex4;\n }\n polynomialSlopes[index3] *= num4;\n var iandex4 = 0;\n while (iandex4 < length) {\n if (iandex4 !== index3) {\n var num2 = matrix[iandex4][index3];\n matrix[iandex4][index3] = 0.0;\n var index5 = 0;\n while (index5 < length) {\n matrix[iandex4][index5] -= matrix[index3][index5] * num2;\n ++index5;\n }\n polynomialSlopes[iandex4] -= polynomialSlopes[index3] * num2;\n }\n ++iandex4;\n }\n ++index1;\n }\n var iindex1 = length - 1;\n while (iindex1 >= 0) {\n if (numArray2[iindex1] !== numArray1[iindex1]) {\n var iindex2 = 0;\n while (iindex2 < length) {\n var num = matrix[iindex2][numArray2[iindex1]];\n matrix[iindex2][numArray2[iindex1]] = matrix[iindex2][numArray1[iindex1]];\n matrix[iindex2][numArray1[iindex1]] = num;\n ++iindex2;\n }\n }\n --iindex1;\n }\n return true;\n };\n /**\n * Defines the trendline elements\n */\n Trendlines.prototype.getTrendLineElements = function (series, chart) {\n findClipRect(series);\n var clipRect = series.clipRect;\n var clipRectElement = chart.renderer.drawClipPath(new RectOption(chart.element.id + '_ChartTrendlineClipRect_' + series.index, 'transparent', { width: 1, color: 'Gray' }, 1, {\n x: 0, y: 0, width: clipRect.width,\n height: clipRect.height,\n }));\n var element;\n element = chart.renderer.createGroup({\n 'id': chart.element.id + 'TrendlineSeriesGroup' + series.index,\n 'transform': 'translate(' + clipRect.x + ',' + clipRect.y + ')',\n 'clip-path': 'url(#' + chart.element.id + '_ChartTrendlineClipRect_' + series.index + ')'\n });\n //defines the clip rect element\n element.appendChild(clipRectElement);\n for (var _i = 0, _a = series.trendlines; _i < _a.length; _i++) {\n var trendline = _a[_i];\n this.createTrendLineElements(chart, trendline, trendline.index, element, clipRectElement);\n }\n };\n /**\n * To destroy the trendline\n */\n Trendlines.prototype.destroy = function (chart) {\n /**\n * Destroys the Linear Trendline\n */\n };\n /**\n * Get module name\n */\n Trendlines.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'TrendLine';\n };\n return Trendlines;\n}());\nexport { Trendlines };\n","import { Animation, Browser } from '@syncfusion/ej2-base';\nimport { measureText, findDirection, textElement, getValueXByPoint, stopTimer, getValueYByPoint, TextOption, Rect, ChartLocation, PathOption, withInBounds, removeElement } from '../../common/utils/helper';\n/**\n * `Crosshair` module is used to render the crosshair for chart.\n */\nvar Crosshair = /** @class */ (function () {\n /**\n * Constructor for crosshair module.\n * @private\n */\n function Crosshair(chart) {\n this.arrowLocation = new ChartLocation(0, 0);\n this.rx = 2;\n this.ry = 2;\n this.chart = chart;\n this.elementID = this.chart.element.id;\n this.addEventListener();\n }\n /**\n * @hidden\n */\n Crosshair.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n this.chart.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.chart.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n this.chart.on(cancelEvent, this.mouseLeaveHandler, this);\n this.chart.on('tapHold', this.longPress, this);\n };\n Crosshair.prototype.mouseUpHandler = function () {\n if (this.chart.startMove) {\n this.removeCrosshair(2000);\n }\n };\n Crosshair.prototype.mouseLeaveHandler = function () {\n this.removeCrosshair(1000);\n };\n Crosshair.prototype.mouseMoveHandler = function (event) {\n var chart = this.chart;\n if (event.type === 'touchmove' && (Browser.isIos || Browser.isIos7) && chart.startMove && event.preventDefault) {\n event.preventDefault();\n }\n // Tooltip for chart series.\n if (!chart.disableTrackTooltip) {\n if (withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n if (chart.startMove || !chart.isTouch) {\n this.crosshair();\n }\n }\n else {\n this.removeCrosshair(1000);\n }\n }\n };\n /**\n * Handles the long press on chart.\n * @return {boolean}\n * @private\n */\n Crosshair.prototype.longPress = function () {\n var chart = this.chart;\n if (withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n this.crosshair();\n }\n return false;\n };\n /**\n * Renders the crosshair.\n * @return {void}\n */\n Crosshair.prototype.crosshair = function () {\n var chart = this.chart;\n var horizontalCross = '';\n var verticalCross = '';\n var options;\n var crosshair = chart.crosshair;\n var chartRect = chart.chartAxisLayoutPanel.seriesClipRect;\n var crossGroup = document.getElementById(this.elementID + '_UserInteraction');\n this.stopAnimation();\n if (chart.tooltip.enable && !withInBounds(chart.tooltipModule.valueX, chart.tooltipModule.valueY, chartRect)) {\n return null;\n }\n this.valueX = chart.tooltip.enable ? chart.tooltipModule.valueX : chart.mouseX;\n this.valueY = chart.tooltip.enable ? chart.tooltipModule.valueY : chart.mouseY;\n crossGroup.setAttribute('opacity', '1');\n if (crosshair.lineType === 'Both' || crosshair.lineType === 'Horizontal') {\n horizontalCross += 'M ' + chartRect.x + ' ' + this.valueY +\n ' L ' + (chartRect.x + chartRect.width) + ' ' + this.valueY;\n }\n if (crosshair.lineType === 'Both' || crosshair.lineType === 'Vertical') {\n verticalCross += 'M ' + this.valueX + ' ' + chartRect.y +\n ' L ' + this.valueX + ' ' + (chartRect.y + chartRect.height);\n }\n if (crossGroup.childNodes.length === 0) {\n var axisTooltipGroup = chart.renderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });\n options = new PathOption(this.elementID + '_HorizontalLine', 'none', crosshair.line.width, crosshair.line.color || chart.themeStyle.crosshairLine, 1, null, horizontalCross);\n this.renderCrosshairLine(options, crossGroup);\n options.d = verticalCross;\n options.id = this.elementID + '_VerticalLine';\n this.renderCrosshairLine(options, crossGroup);\n crossGroup.appendChild(axisTooltipGroup);\n this.renderAxisTooltip(chart, chartRect, crossGroup.lastChild);\n }\n else {\n document.getElementById(this.elementID + '_HorizontalLine').setAttribute('d', horizontalCross);\n document.getElementById(this.elementID + '_VerticalLine').setAttribute('d', verticalCross);\n this.renderAxisTooltip(chart, chartRect, crossGroup.lastChild);\n }\n };\n Crosshair.prototype.renderCrosshairLine = function (options, crossGroup) {\n var htmlObject = this.chart.renderer.drawPath(options);\n crossGroup.appendChild(htmlObject);\n };\n Crosshair.prototype.renderAxisTooltip = function (chart, chartRect, axisGroup) {\n var axis;\n var text;\n var rect;\n var pathElement;\n var textElem;\n var options;\n var padding = 5;\n var direction;\n var axisRect;\n for (var k = 0, length_1 = chart.axisCollections.length; k < length_1; k++) {\n axis = chart.axisCollections[k];\n axisRect = !axis.placeNextToAxisLine ? axis.rect : axis.updatedRect;\n if (axis.crosshairTooltip.enable) {\n if ((this.valueX <= (axisRect.x + axisRect.width) && axisRect.x <= this.valueX) ||\n (this.valueY <= (axisRect.y + axisRect.height) && axisRect.y <= this.valueY)) {\n pathElement = document.getElementById(this.elementID + '_axis_tooltip_' + k);\n textElem = document.getElementById(this.elementID + '_axis_tooltip_text_' + k);\n text = this.getAxisText(axis);\n if (!text) {\n continue;\n }\n rect = this.tooltipLocation(text, axis, chartRect, axisRect);\n if (pathElement === null) {\n pathElement = chart.renderer.drawPath({\n 'id': this.elementID + '_axis_tooltip_' + k,\n 'fill': axis.crosshairTooltip.fill || chart.themeStyle.crosshairFill\n });\n axisGroup.appendChild(pathElement);\n options = new TextOption(this.elementID + '_axis_tooltip_text_' + k, 0, 0, 'start', text);\n textElem = textElement(options, axis.crosshairTooltip.textStyle, axis.crosshairTooltip.textStyle.color || chart.themeStyle.crosshairLabel, axisGroup);\n }\n direction = findDirection(this.rx, this.ry, rect, this.arrowLocation, 10, this.isTop, this.isBottom, this.isLeft, this.valueX, this.valueY);\n pathElement.setAttribute('d', direction);\n textElem.textContent = text;\n textElem.setAttribute('x', (rect.x + padding).toString());\n textElem.setAttribute('y', (rect.y + padding + 3 * this.elementSize.height / 4).toString());\n }\n else {\n removeElement(this.elementID + '_axis_tooltip_' + k);\n removeElement(this.elementID + '_axis_tooltip_text_' + k);\n }\n }\n }\n };\n Crosshair.prototype.getAxisText = function (axis) {\n var value;\n this.isBottom = false;\n this.isTop = false;\n this.isLeft = false;\n this.isRight = false;\n var labelValue = (axis.valueType === 'Category' && axis.labelPlacement === 'BetweenTicks')\n ? 0.5 : 0;\n if (axis.orientation === 'Horizontal') {\n value = getValueXByPoint(Math.abs(this.valueX - axis.rect.x), axis.rect.width, axis) + labelValue;\n this.isBottom = !axis.opposedPosition;\n this.isTop = axis.opposedPosition;\n }\n else {\n value = getValueYByPoint(Math.abs(this.valueY - axis.rect.y), axis.rect.height, axis) + labelValue;\n this.isRight = axis.opposedPosition;\n this.isLeft = !axis.opposedPosition;\n }\n if (axis.valueType === 'DateTime') {\n return axis.format(new Date(value));\n }\n else if (axis.valueType === 'Category') {\n return axis.labels[Math.floor(value)];\n }\n else if (axis.valueType === 'Logarithmic') {\n return value = axis.format(Math.pow(axis.logBase, value));\n }\n else {\n var customLabelFormat = axis.labelFormat && axis.labelFormat.match('{value}') !== null;\n return customLabelFormat ? axis.labelFormat.replace('{value}', axis.format(value)) : axis.format(value);\n }\n };\n Crosshair.prototype.tooltipLocation = function (text, axis, bounds, axisRect) {\n var isBottom = false;\n var isLeft = false;\n var padding = 5;\n var arrowPadding = 10;\n var tooltipRect;\n var boundsX = bounds.x;\n var boundsY = bounds.y;\n var islabelInside = axis.labelPosition === 'Inside';\n this.elementSize = measureText(text, axis.crosshairTooltip.textStyle);\n if (axis.orientation === 'Horizontal') {\n var yLocation = islabelInside ? axisRect.y - this.elementSize.height - (padding * 2 + arrowPadding) : axisRect.y;\n var height = islabelInside ? axisRect.y - this.elementSize.height - arrowPadding : axisRect.y + arrowPadding;\n this.arrowLocation = new ChartLocation(this.valueX, yLocation);\n tooltipRect = new Rect((this.valueX - (this.elementSize.width / 2) - padding), height, this.elementSize.width + padding * 2, this.elementSize.height + padding * 2);\n if (axis.opposedPosition) {\n tooltipRect.y = islabelInside ? axisRect.y : axisRect.y - (this.elementSize.height + padding * 2 + arrowPadding);\n }\n if (tooltipRect.x < boundsX) {\n tooltipRect.x = boundsX;\n }\n if (tooltipRect.x + tooltipRect.width > boundsX + bounds.width) {\n tooltipRect.x -= ((tooltipRect.x + tooltipRect.width) - (boundsX + bounds.width));\n }\n if (this.arrowLocation.x + arrowPadding / 2 > tooltipRect.x + tooltipRect.width - this.rx) {\n this.arrowLocation.x = tooltipRect.x + tooltipRect.width - this.rx - arrowPadding / 2;\n }\n if (this.arrowLocation.x - arrowPadding / 2 < tooltipRect.x + this.rx) {\n this.arrowLocation.x = tooltipRect.x + this.rx + arrowPadding / 2;\n }\n }\n else {\n this.arrowLocation = new ChartLocation(axisRect.x, this.valueY);\n var width = islabelInside ? axisRect.x : axisRect.x - (this.elementSize.width) - (padding * 2 + arrowPadding);\n tooltipRect = new Rect(width, this.valueY - (this.elementSize.height / 2) - padding, this.elementSize.width + (padding * 2), this.elementSize.height + padding * 2);\n if (axis.opposedPosition) {\n tooltipRect.x = islabelInside ? axisRect.x - this.elementSize.width - arrowPadding : axisRect.x + arrowPadding;\n if ((tooltipRect.x + tooltipRect.width) > this.chart.availableSize.width) {\n this.arrowLocation.x -= ((tooltipRect.x + tooltipRect.width) - this.chart.availableSize.width);\n tooltipRect.x -= ((tooltipRect.x + tooltipRect.width) - this.chart.availableSize.width);\n }\n }\n else {\n if (tooltipRect.x < 0) {\n this.arrowLocation.x -= tooltipRect.x;\n tooltipRect.x = 0;\n }\n }\n if (tooltipRect.y < boundsY) {\n tooltipRect.y = boundsY;\n }\n if (tooltipRect.y + tooltipRect.height >= boundsY + bounds.height) {\n tooltipRect.y -= ((tooltipRect.y + tooltipRect.height) - (boundsY + bounds.height));\n }\n if (this.arrowLocation.y + arrowPadding / 2 > tooltipRect.y + tooltipRect.height - this.ry) {\n this.arrowLocation.y = tooltipRect.y + tooltipRect.height - this.ry - arrowPadding / 2;\n }\n if (this.arrowLocation.y - arrowPadding / 2 < tooltipRect.y + this.ry) {\n this.arrowLocation.y = tooltipRect.y + this.ry + arrowPadding / 2;\n }\n }\n return tooltipRect;\n };\n Crosshair.prototype.stopAnimation = function () {\n stopTimer(this.crosshairInterval);\n };\n /**\n * Removes the crosshair on mouse leave.\n * @return {void}\n * @private\n */\n Crosshair.prototype.removeCrosshair = function (duration) {\n var chart = this.chart;\n var crosshair = document.getElementById(this.elementID + '_UserInteraction');\n this.stopAnimation();\n if (crosshair && crosshair.getAttribute('opacity') !== '0') {\n this.crosshairInterval = setTimeout(function () {\n new Animation({}).animate(crosshair, {\n duration: 200,\n progress: function (args) {\n // crosshair.removeAttribute('e-animate');\n crosshair.style.animation = '';\n crosshair.setAttribute('opacity', (1 - (args.timeStamp / args.duration)).toString());\n },\n end: function (model) {\n crosshair.setAttribute('opacity', '0');\n chart.startMove = false;\n if (chart.tooltipModule) {\n chart.tooltipModule.valueX = null;\n chart.tooltipModule.valueY = null;\n }\n }\n });\n }, duration);\n }\n };\n /**\n * Get module name.\n */\n Crosshair.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Crosshair';\n };\n /**\n * To destroy the crosshair.\n * @return {void}\n * @private\n */\n Crosshair.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return Crosshair;\n}());\nexport { Crosshair };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement, extend, Browser } from '@syncfusion/ej2-base';\nimport { Animation, compile as templateComplier } from '@syncfusion/ej2-base';\nimport { measureText, TextOption, Size, Rect, ChartLocation, textElement } from '../../common/utils/helper';\nimport { findDirection, stopTimer, removeElement } from '../../common/utils/helper';\nimport { ChartData } from '../../chart/utils/get-data';\nimport { tooltipRender } from '../../common/model/constants';\nimport { Theme } from '../../common/model/theme';\n/**\n * Tooltip Module used to render the tooltip for series.\n */\nvar BaseTooltip = /** @class */ (function (_super) {\n __extends(BaseTooltip, _super);\n /**\n * Constructor for tooltip module.\n * @private.\n */\n function BaseTooltip(chart) {\n var _this = _super.call(this, chart) || this;\n _this.padding = 5;\n _this.arrowPadding = 12;\n _this.rx = 2;\n _this.ry = 2;\n _this.markerPoint = [];\n _this.element = _this.chart.element;\n _this.textStyle = chart.tooltip.textStyle;\n _this.control = chart;\n return _this;\n }\n BaseTooltip.prototype.getElement = function (id) {\n return document.getElementById(id);\n };\n /**\n * Renders the tooltip.\n * @return {void}\n * @private\n */\n BaseTooltip.prototype.getTooltipElement = function (isTooltip) {\n this.inverted = this.chart.requireInvertedAxis;\n this.updateTemplateFn(this.control);\n this.formattedText = [];\n this.header = (this.control.tooltip.header === null) ?\n ((this.control.tooltip.shared) ? '${point.x} ' : '${series.name} ')\n : (this.control.tooltip.header);\n if (!isTooltip) {\n var elementCollection = document.getElementsByClassName('ejSVGTooltip');\n for (var i = elementCollection.length - 1; i >= 0; i--) {\n if (!this.getElement(this.element.id).contains(elementCollection[i])) {\n elementCollection[i].remove();\n }\n }\n return this.createElement(this.control);\n }\n return null;\n };\n BaseTooltip.prototype.createElement = function (chart) {\n this.textElements = [];\n var tooltipDiv = document.createElement('div');\n tooltipDiv.id = this.element.id + '_tooltip';\n tooltipDiv.className = 'ejSVGTooltip';\n tooltipDiv.setAttribute('style', 'pointer-events:none; position:absolute;z-index: 1');\n if (!chart.tooltip.template || chart.tooltip.shared) {\n // SVG element for tooltip\n var svgObject = chart.renderer.createSvg({ id: this.element.id + '_tooltip_svg' });\n tooltipDiv.appendChild(svgObject);\n // Group to hold text and path.\n var groupElement = chart.renderer.createGroup({ id: this.element.id + '_tooltip_group' });\n svgObject.appendChild(groupElement);\n var pathElement = chart.renderer.drawPath({\n 'id': this.element.id + '_tooltip_path', 'stroke-width': chart.tooltip.border.width,\n 'fill': chart.tooltip.fill || chart.themeStyle.tooltipFill, 'opacity': chart.tooltip.opacity,\n 'stroke': chart.tooltip.border.color\n });\n groupElement.appendChild(pathElement);\n }\n return tooltipDiv;\n };\n BaseTooltip.prototype.pushData = function (data, isFirst, tooltipDiv, isChart) {\n if (data.series.enableTooltip) {\n if (isChart) {\n this.currentPoints.push(data);\n }\n else {\n this.currentPoints.push(data);\n }\n this.stopAnimation();\n if (isFirst) {\n document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);\n }\n return true;\n }\n return false;\n };\n BaseTooltip.prototype.renderTooltip = function (data, areaRect, location, textCollection, isFirst, cartesain) {\n if (this.triggerEvent(data, isFirst, textCollection)) {\n this.renderText(isFirst, this.control);\n this.removeHighlight(this.control);\n this.highlightPoints(data);\n return this.renderTooltipElement(this.control, data, areaRect, location, cartesain, isFirst);\n }\n else {\n this.removeHighlight(this.control);\n this.getElement(this.element.id + '_tooltip').remove();\n return null;\n }\n };\n BaseTooltip.prototype.renderTemplate = function (data, rect, location, point, isFirst) {\n this.removeHighlight(this.control);\n this.createTemplate(point, data, rect, location, this.getElement(this.element.id + '_tooltip'), isFirst);\n };\n BaseTooltip.prototype.renderTooltipElement = function (chart, pointData, areaRect, location, cartesain, isFirst) {\n var tooltipDiv = this.getElement(this.element.id + '_tooltip');\n var arrowLocation = new ChartLocation(0, 0);\n var tipLocation = new ChartLocation(0, 0);\n var textHeights;\n var svgObject = this.getElement(this.element.id + '_tooltip_svg');\n var groupElement = this.getElement(this.element.id + '_tooltip_group');\n var pathElement = this.getElement(this.element.id + '_tooltip_path');\n var rect;\n var isTop = false;\n var isLeft = false;\n var isBottom = false;\n var x = 0;\n var y = 0;\n this.tipRadius = 1;\n var series = pointData.series;\n if (this.header !== '') {\n this.elementSize.height += 5;\n }\n if (this.currentPoints.length > 1) {\n this.arrowPadding = 0;\n rect = this.sharedTooltipLocation(areaRect, this.valueX, this.valueY);\n isTop = true;\n }\n else {\n this.arrowPadding = 12;\n rect = this.seriesTooltipLocation(pointData, areaRect, location, arrowLocation, tipLocation);\n if (!this.inverted || !series.isRectSeries) {\n isTop = (rect.y < (location.y + (cartesain ? series.clipRect.y : 0)));\n isBottom = !isTop;\n y = (isTop ? 0 : this.arrowPadding);\n }\n else {\n isLeft = (rect.x < (location.x + series.clipRect.x));\n x = (isLeft ? 0 : this.arrowPadding);\n }\n }\n if (this.header !== '') {\n var headerSize = measureText(this.header, chart.tooltip.textStyle).height + (this.padding * 2) +\n (isBottom ? this.arrowPadding : 0); //header padding;\n var xLength = (this.padding * 3) + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0);\n var direction = 'M ' + xLength + ' ' + headerSize +\n 'L ' + (rect.width + (!isLeft && !isTop && !isBottom ? this.arrowPadding : 0) - (this.padding * 2)) +\n ' ' + headerSize;\n var pathElement_1 = this.chart.renderer.drawPath({\n 'id': this.element.id + '_header_path', 'stroke-width': 1,\n 'fill': null, 'opacity': 0.8, 'stroke': chart.themeStyle.tooltipHeaderLine, 'd': direction\n });\n groupElement.appendChild(pathElement_1);\n }\n var start = chart.tooltip.border.width / 2;\n var pointRect = new Rect(start + x, start + y, rect.width - start, rect.height - start);\n groupElement.setAttribute('opacity', '1');\n if (chart.tooltip.enableAnimation && !chart.tooltip.shared && !isFirst && !this.isComplete) {\n this.animateTooltipDiv(tooltipDiv, rect);\n }\n else {\n this.updateDiv(tooltipDiv, rect.x, rect.y);\n }\n this.isComplete = false;\n svgObject.setAttribute('height', (rect.height + chart.tooltip.border.width + (!((!this.inverted) ||\n (!pointData.series.isRectSeries)) ? 0 : this.arrowPadding)).toString());\n svgObject.setAttribute('width', (rect.width + chart.tooltip.border.width + (((!this.inverted) ||\n (!pointData.series.isRectSeries)) ? 0 : this.arrowPadding)).toString());\n svgObject.setAttribute('opacity', '1');\n pathElement.setAttribute('d', findDirection(this.rx, this.ry, pointRect, arrowLocation, this.arrowPadding, isTop, isBottom, isLeft, tipLocation.x, tipLocation.y, this.tipRadius));\n pathElement.setAttribute('filter', Browser.isIE ? '' : 'url(#chart_shadow_tooltip)');\n var shadowElement = '';\n shadowElement += '';\n shadowElement += ' ';\n var defElement = chart.renderer.createDefs();\n defElement.setAttribute('id', 'chart_tooltip_definition');\n groupElement.appendChild(defElement);\n defElement.innerHTML = shadowElement;\n pathElement.setAttribute('stroke', chart.tooltip.border.color);\n this.changeText(new ChartLocation(x, y), isBottom, !isLeft && !isTop && !isBottom, rect);\n return new Side(isBottom, !isLeft && !isTop && !isBottom);\n };\n BaseTooltip.prototype.changeText = function (point, isBottom, isRight, rect) {\n var element = document.getElementById(this.element.id + '_tooltip_text');\n if (isBottom) {\n element.setAttribute('transform', 'translate(0,' + this.arrowPadding + ')');\n }\n if (isRight) {\n element.setAttribute('transform', 'translate(' + this.arrowPadding + ' 0)');\n }\n };\n BaseTooltip.prototype.renderText = function (isRender, chart) {\n var height = 0;\n var width = 0; // Padding for text;\n var subWidth = 0;\n var size;\n var lines;\n var key = 'properties';\n var font = extend({}, this.chart.tooltip.textStyle, null, true)[key];\n var groupElement = this.getElement(this.element.id + '_tooltip_group');\n var tspanElement;\n var tspanStyle = '';\n var line;\n var tspanOption;\n this.header = this.header.replace(//g, '').replace(/<\\/b>/g, '').trim();\n var headerSpace = (this.header !== '' && this.formattedText[0] !== '') ? 5 : 0;\n var isRow = true;\n var isColumn = true;\n this.markerPoint = [];\n var markerSize = 10;\n var spaceWidth = 4;\n var dy = (22 / parseFloat(Theme.tooltipLabelFont.size)) * (parseFloat(font.size));\n if (!isRender) {\n removeElement(this.element.id + '_tooltip_text');\n removeElement(this.element.id + '_header_path');\n removeElement(this.element.id + '_tooltip_trackball_group');\n removeElement('chart_tooltip_definition');\n }\n var options = new TextOption(this.element.id + '_tooltip_text', this.padding * 2, this.padding * 4, 'start', '');\n var parentElement = textElement(options, font, null, groupElement, false);\n for (var k = 0, pointsLength = this.formattedText.length; k < pointsLength; k++) {\n var textCollection = this.formattedText[k].replace(/<(b|strong)>/g, '')\n .replace(/<\\/(b|strong)>/g, ' ')\n .split(//g);\n size = measureText(this.formattedText[k], font);\n if ((k !== 0) || (this.header === '')) {\n this.markerPoint.push((this.header !== '' ? (this.padding) : 0) + options.y + height);\n }\n for (var i = 0, len = textCollection.length; i < len; i++) {\n lines = textCollection[i].replace(//g, '').replace(/<\\/b>/g, ' ').split(' ');\n subWidth = 0;\n isColumn = true;\n height += dy;\n for (var k_1 = 0, len_1 = lines.length; k_1 < len_1; k_1++) {\n line = lines[k_1];\n if (line.replace(//g, '').replace(/<\\/b>/g, '').trim() !== '') {\n subWidth += spaceWidth;\n if (isColumn && !isRow) {\n tspanOption = { x: (this.padding * 2) + (markerSize + 5), dy: dy + ((isColumn) ? headerSpace : 0), fill: '' };\n headerSpace = null;\n }\n else {\n if (isRow && isColumn) {\n tspanOption = { x: (this.header === '') ? ((this.padding * 2) + (markerSize + 5)) : (this.padding * 2) };\n }\n else {\n tspanOption = {};\n }\n }\n isColumn = false;\n tspanElement = chart.renderer.createTSpan(tspanOption, '');\n parentElement.appendChild(tspanElement);\n if (line.indexOf('') > -1) {\n tspanStyle = 'font-weight:bold';\n font.fontWeight = 'bold';\n (tspanElement).setAttribute('fill', chart.tooltip.textStyle.color || chart.themeStyle.tooltipBoldLabel);\n }\n else {\n tspanStyle = '';\n font.fontWeight = 'Normal';\n (tspanElement).setAttribute('fill', chart.tooltip.textStyle.color || chart.themeStyle.tooltipLightLabel);\n }\n (tspanElement).textContent = line = line.replace(/<[a-zA-Z\\/](.|\\n)*?>/g, '');\n subWidth += measureText(line, font).width;\n if (tspanStyle !== '') {\n tspanElement.setAttribute('style', tspanStyle);\n }\n isRow = false;\n }\n }\n subWidth -= spaceWidth;\n width = Math.max(width, subWidth);\n }\n }\n height -= (this.header ? this.padding : 0);\n this.elementSize = new Size(width + (width > 0 ? (2 * this.padding) : 0), height + (this.header !== '' ? this.padding : 0));\n this.elementSize.width += (markerSize + 5); // marker size + marker Spacing\n var element = (parentElement.childNodes[0]);\n if (this.header !== '' && element) {\n font.fontWeight = 'bold';\n var width_1 = (this.elementSize.width + (2 * this.padding)) / 2 - measureText(this.header, font).width / 2;\n element.setAttribute('x', width_1.toString());\n }\n };\n BaseTooltip.prototype.createTemplate = function (point, data, areaRect, location, parent, isFirst) {\n var chart = this.control;\n this.highlightPoints(data);\n var argsData = { cancel: false, name: tooltipRender, point: data.point, series: data.series, };\n this.chart.trigger(tooltipRender, argsData);\n var firstElement = this.getElement(this.element.id + '_tooltip').firstChild;\n if (firstElement) {\n firstElement.remove();\n }\n if (!argsData.cancel) {\n var templateElement = this.templateFn(point);\n var elem = createElement('div');\n while (templateElement.length > 0) {\n elem.appendChild(templateElement[0]);\n }\n parent.appendChild(elem);\n var rect = parent.getBoundingClientRect();\n this.padding = 0;\n this.elementSize = new Size(rect.width, rect.height);\n var tooltipRect = this.seriesTooltipLocation(data, areaRect, location, new ChartLocation(0, 0), new ChartLocation(0, 0));\n if (chart.tooltip.enableAnimation && !chart.tooltip.shared && !isFirst && !this.isComplete) {\n this.animateTooltipDiv(parent, tooltipRect);\n }\n else {\n this.updateDiv(parent, tooltipRect.x, tooltipRect.y);\n }\n this.isComplete = false;\n }\n else {\n this.removeHighlight(chart);\n this.getElement(this.element.id + '_tooltip').remove();\n }\n };\n BaseTooltip.prototype.sharedTooltipLocation = function (bounds, x, y) {\n var width = this.elementSize.width + (2 * this.padding);\n var height = this.elementSize.height + (2 * this.padding);\n var tooltipRect = new Rect(x + 2 * this.padding, y - height - this.padding, width, height);\n if (tooltipRect.y < bounds.y) {\n tooltipRect.y += (tooltipRect.height + 2 * this.padding);\n }\n if (tooltipRect.x + tooltipRect.width > bounds.x + bounds.width) {\n tooltipRect.x -= (tooltipRect.width + 4 * this.padding);\n }\n return tooltipRect;\n };\n BaseTooltip.prototype.seriesTooltipLocation = function (pointData, bounds, symbolLocation, arrowLocation, tipLocation) {\n var series = pointData.series;\n var location = new ChartLocation(symbolLocation.x, symbolLocation.y);\n if (series.type === 'RangeArea' && pointData.point.regions[0]) {\n if (!series.chart.requireInvertedAxis) {\n location.y = pointData.point.regions[0].y + pointData.point.regions[0].height / 2;\n }\n else {\n location.x = pointData.point.regions[0].x + pointData.point.regions[0].width / 2;\n }\n }\n var width = this.elementSize.width + (2 * this.padding);\n var height = this.elementSize.height + (2 * this.padding);\n var markerHeight = 0;\n if (!series.isRectSeries) {\n var chartSeries = pointData.series;\n markerHeight = (this.chart.tooltip.shared || chartSeries.marker.visible || series.type === 'Scatter'\n || chartSeries.drawType === 'Scatter') ? ((chartSeries.marker.height + 2) / 2 + (2 * chartSeries.marker.border.width)) : 0;\n }\n var clipX = this.chart.chartAreaType === 'PolarRadar' ? 0 : series.clipRect.x;\n var clipY = this.chart.chartAreaType === 'PolarRadar' ? 0 : series.clipRect.y;\n var boundsX = bounds.x;\n var boundsY = bounds.y;\n if (!this.inverted || !series.isRectSeries) {\n location.y = (series.type === 'Waterfall' && pointData.point.y < 0) ?\n location.y - pointData.point.regions[0].height : location.y;\n location = new ChartLocation(location.x + clipX - this.elementSize.width / 2 - this.padding, location.y + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight);\n arrowLocation.x = tipLocation.x = width / 2;\n if (location.y < boundsY || (series.isRectSeries && pointData.point.y < 0 && series.type !== 'Waterfall')) {\n location.y = (symbolLocation.y < 0 ? 0 : symbolLocation.y) + clipY + markerHeight;\n }\n if (location.y + height + this.arrowPadding > boundsY + bounds.height) {\n location.y = (symbolLocation.y > bounds.height ? bounds.height : symbolLocation.y)\n + clipY - this.elementSize.height - (2 * this.padding) - this.arrowPadding - markerHeight;\n }\n tipLocation.x = width / 2;\n if (location.x < boundsX) {\n arrowLocation.x -= (boundsX - location.x);\n tipLocation.x -= (boundsX - location.x);\n location.x = boundsX;\n }\n if (location.x + width > boundsX + bounds.width) {\n arrowLocation.x += ((location.x + width) - (boundsX + bounds.width));\n tipLocation.x += ((location.x + width) - (boundsX + bounds.width));\n location.x -= ((location.x + width) - (boundsX + bounds.width));\n }\n if (arrowLocation.x + this.arrowPadding / 2 > width - this.rx) {\n arrowLocation.x = width - this.rx - this.arrowPadding / 2;\n tipLocation.x = width;\n this.tipRadius = 0;\n }\n if (arrowLocation.x - this.arrowPadding / 2 < this.rx) {\n arrowLocation.x = this.rx + this.arrowPadding / 2;\n tipLocation.x = 0;\n this.tipRadius = 0;\n }\n }\n else {\n location.x = (series.type === 'Waterfall' && pointData.point.y < 0) ?\n location.x + pointData.point.regions[0].width : location.x;\n location = new ChartLocation(location.x + clipX + markerHeight, location.y + clipY - this.elementSize.height / 2 - (this.padding));\n arrowLocation.y = tipLocation.y = height / 2;\n if ((location.x + width + this.arrowPadding > boundsX + bounds.width) || (series.isRectSeries &&\n pointData.point.y < 0 && series.type !== 'Waterfall')) {\n location.x = (symbolLocation.x > bounds.width ? bounds.width : symbolLocation.x)\n + clipX - markerHeight - (width + this.arrowPadding);\n }\n if (location.x < boundsX) {\n location.x = (symbolLocation.x < 0 ? 0 : symbolLocation.x) + clipX + markerHeight;\n }\n if (location.y <= boundsY) {\n arrowLocation.y -= (boundsY - location.y);\n tipLocation.y -= (boundsY - location.y);\n location.y = boundsY;\n }\n if (location.y + height >= boundsY + bounds.height) {\n arrowLocation.y += ((location.y + height) - (boundsY + bounds.height));\n tipLocation.y += ((location.y + height) - (boundsY + bounds.height));\n location.y -= ((location.y + height) - (boundsY + bounds.height));\n }\n if (arrowLocation.y + this.arrowPadding / 2 > height - this.ry) {\n arrowLocation.y = height - this.ry - this.arrowPadding / 2;\n tipLocation.y = height;\n this.tipRadius = 0;\n }\n if (arrowLocation.y - this.arrowPadding / 2 < this.ry) {\n arrowLocation.y = this.ry + this.arrowPadding / 2;\n tipLocation.y = 0;\n this.tipRadius = 0;\n }\n }\n return new Rect(location.x, location.y, width, height);\n };\n /*\n * @hidden\n */\n BaseTooltip.prototype.progressAnimation = function (element, tooltipGroup, series, opacity, rectOpacity, timeStamp, isRect, shared) {\n tooltipGroup.style.animation = '';\n tooltipGroup.setAttribute('opacity', (opacity - timeStamp).toString());\n if (element && isRect && !shared) {\n element.setAttribute('opacity', (rectOpacity + (rectOpacity * timeStamp)).toString());\n }\n };\n /*\n * @hidden\n */\n BaseTooltip.prototype.endAnimation = function (element, tooltipGroup, series, shared) {\n this.currentPoints = [];\n if (element && series.isRectSeries) {\n element.setAttribute('opacity', series.opacity.toString());\n }\n this.removeHighlight(this.control);\n tooltipGroup.setAttribute('opacity', '0');\n if (this.control.tooltip.template && !shared) {\n tooltipGroup.style.display = 'none';\n }\n this.isComplete = true;\n this.control.trigger('animationComplete', {});\n };\n BaseTooltip.prototype.removeHighlight = function (chart) {\n var item;\n var series;\n for (var i = 0, len = this.previousPoints.length; i < len; i++) {\n item = this.previousPoints[i];\n if (item.series.isRectSeries) {\n if (item.series.visible) {\n this.highlightPoint(item.series, item.point.index, false);\n }\n continue;\n }\n series = item.series;\n if (!series.marker.visible && item.series.type !== 'Scatter' && item.series.type !== 'Bubble') {\n this.previousPoints.shift();\n len -= 1;\n }\n }\n };\n BaseTooltip.prototype.highlightPoint = function (series, pointIndex, highlight) {\n var element = this.getElement(this.element.id + '_Series_' + series.index + '_Point_' + pointIndex);\n if (element) {\n element.setAttribute('opacity', (highlight ? series.opacity / 2 : series.opacity).toString());\n }\n };\n BaseTooltip.prototype.highlightPoints = function (item) {\n if (item.series.isRectSeries) {\n this.highlightPoint(item.series, item.point.index, true);\n return null;\n }\n };\n BaseTooltip.prototype.animateTooltipDiv = function (tooltipDiv, rect) {\n var _this = this;\n var x = parseFloat(tooltipDiv.style.left);\n var y = parseFloat(tooltipDiv.style.top);\n var currenDiff;\n new Animation({}).animate(tooltipDiv, {\n duration: 300,\n progress: function (args) {\n currenDiff = (args.timeStamp / args.duration);\n tooltipDiv.style.animation = null;\n tooltipDiv.style.left = (x + currenDiff * (rect.x - x)) + 'px';\n tooltipDiv.style.top = (y + currenDiff * (rect.y - y)) + 'px';\n },\n end: function (model) {\n _this.updateDiv(tooltipDiv, rect.x, rect.y);\n }\n });\n };\n BaseTooltip.prototype.updateDiv = function (tooltipDiv, x, y) {\n tooltipDiv.style.left = x + 'px';\n tooltipDiv.style.top = y + 'px';\n };\n BaseTooltip.prototype.triggerEvent = function (point, isFirst, textCollection, firstText) {\n if (firstText === void 0) { firstText = true; }\n var argsData = {\n cancel: false, name: tooltipRender, text: textCollection,\n point: point.point, series: point.series, textStyle: this.textStyle\n };\n this.chart.trigger(tooltipRender, argsData);\n if (!argsData.cancel) {\n if (point.series.type === 'BoxAndWhisker') {\n this.removeText();\n isFirst = true;\n }\n this.formattedText = this.formattedText.concat(argsData.text);\n }\n return !argsData.cancel;\n };\n BaseTooltip.prototype.removeText = function () {\n this.textElements = [];\n var element = this.getElement(this.element.id + '_tooltip_group');\n if (element.childNodes.length > 0) {\n while (element.lastChild && element.childNodes.length !== 1) {\n element.removeChild(element.lastChild);\n }\n }\n };\n BaseTooltip.prototype.updateTemplateFn = function (chart) {\n if (chart.tooltip.template) {\n var e = void 0;\n try {\n if (document.querySelectorAll(chart.tooltip.template).length) {\n this.templateFn = templateComplier(document.querySelector(chart.tooltip.template).innerHTML.trim());\n }\n }\n catch (e) {\n this.templateFn = templateComplier(chart.tooltip.template);\n }\n }\n };\n BaseTooltip.prototype.stopAnimation = function () {\n stopTimer(this.toolTipInterval);\n };\n return BaseTooltip;\n}(ChartData));\nexport { BaseTooltip };\nvar Side = /** @class */ (function () {\n function Side(bottom, right) {\n this.isRight = right;\n this.isBottom = bottom;\n }\n return Side;\n}());\nexport { Side };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { extend, Browser } from '@syncfusion/ej2-base';\nimport { Animation } from '@syncfusion/ej2-base';\nimport { Size, PointData, ChartLocation } from '../../common/utils/helper';\nimport { drawSymbol, PathOption, valueToCoefficient, removeElement, valueToPolarCoefficient, withInBounds } from '../../common/utils/helper';\nimport { BaseTooltip } from '../../common/user-interaction/tooltip';\n/**\n * `Tooltip` module is used to render the tooltip for chart series.\n */\nvar Tooltip = /** @class */ (function (_super) {\n __extends(Tooltip, _super);\n /**\n * Constructor for tooltip module.\n * @private.\n */\n function Tooltip(chart) {\n var _this = _super.call(this, chart) || this;\n _this.addEventListener();\n return _this;\n }\n /**\n * @hidden\n */\n Tooltip.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n this.chart.on(cancelEvent, this.mouseLeaveHandler, this);\n this.chart.on('tapHold', this.longPress, this);\n this.chart.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.chart.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n };\n Tooltip.prototype.mouseUpHandler = function () {\n var chart = this.control;\n if (chart.isTouch && !this.isSelected(chart) &&\n ((withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect) && chart.tooltip.shared)\n || !chart.tooltip.shared)) {\n if (!chart.crosshair.enable) {\n this.tooltip();\n this.removeTooltip(2000);\n }\n else if (chart.startMove) {\n this.removeTooltip(2000);\n }\n }\n };\n Tooltip.prototype.mouseLeaveHandler = function () {\n this.removeTooltip(1000);\n };\n Tooltip.prototype.mouseMoveHandler = function () {\n var chart = this.chart;\n // Tooltip for chart series.\n if (!chart.disableTrackTooltip && !this.isSelected(chart)) {\n if (!chart.tooltip.shared && (!chart.isTouch || (chart.startMove))) {\n this.tooltip();\n }\n if (withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n if (chart.tooltip.shared && (!chart.isTouch || (chart.startMove))) {\n this.tooltip();\n }\n }\n else {\n if (chart.tooltip.shared) {\n this.removeTooltip(1000);\n }\n }\n }\n };\n /**\n * Handles the long press on chart.\n * @return {boolean}\n * @private\n */\n Tooltip.prototype.longPress = function () {\n var chart = this.chart;\n if (chart.crosshair.enable && withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n this.tooltip();\n }\n return false;\n };\n /**\n * Renders the tooltip.\n * @return {void}\n */\n Tooltip.prototype.tooltip = function () {\n var isTooltip = this.getElement(this.element.id + '_tooltip');\n var tooltipDiv = this.getTooltipElement(isTooltip);\n if (!this.chart.tooltip.shared) {\n this.renderSeriesTooltip(this.chart, !isTooltip, tooltipDiv);\n }\n else {\n this.renderGroupedTooltip(this.chart, !isTooltip, tooltipDiv);\n }\n };\n Tooltip.prototype.findHeader = function (data) {\n this.header = this.parseTemplate(data.point, data.series, this.header, data.series.xAxis, data.series.yAxis);\n if (this.header.replace(//g, '').replace(/<\\/b>/g, '').trim() !== '') {\n this.formattedText = this.formattedText.concat(this.header);\n }\n };\n Tooltip.prototype.renderSeriesTooltip = function (chart, isFirst, tooltipDiv) {\n var data = this.getData();\n var markerSide;\n data.lierIndex = this.lierIndex;\n var rect = chart.chartAxisLayoutPanel.seriesClipRect;\n this.currentPoints = [];\n if (this.findData(data, this.previousPoints[0])) {\n if (this.pushData(data, isFirst, tooltipDiv, true)) {\n var text = this.getTooltipText(data);\n if (!chart.tooltip.template) {\n if (this.header !== '') {\n this.findHeader(data);\n }\n markerSide = this.renderTooltip(data, rect, this.getSymbolLocation(data), text, isFirst, chart.chartAreaType === 'Cartesian');\n if (markerSide) {\n this.drawMarker(markerSide.isBottom, markerSide.isRight, 10);\n }\n }\n else {\n this.renderTemplate(data, rect, this.getSymbolLocation(data), this.getTemplateText(data), isFirst);\n }\n this.isRemove = true;\n }\n this.previousPoints = extend([], this.currentPoints, null, true);\n }\n else {\n if (!data.point && this.isRemove) {\n this.removeTooltip(1000);\n this.isRemove = false;\n }\n else {\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.visible) {\n data = this.getClosestX(chart, series) || data;\n }\n }\n }\n }\n if (data && data.point) {\n this.findMouseValue(data, chart);\n }\n };\n Tooltip.prototype.findData = function (data, previous) {\n return data.point && ((!previous || (previous.point !== data.point)) ||\n (previous && previous.lierIndex > 3 && previous.lierIndex !== this.lierIndex));\n };\n Tooltip.prototype.getSymbolLocation = function (data) {\n return data.series.type === 'BoxAndWhisker' ?\n this.getBoxLocation(data) : data.point.symbolLocations[0];\n };\n Tooltip.prototype.getTooltipText = function (pointData) {\n var series = pointData.series;\n var text;\n return this.parseTemplate(pointData.point, series, this.getFormat(this.chart, series), series.xAxis, series.yAxis);\n };\n Tooltip.prototype.getTemplateText = function (data) {\n var point = extend({}, data.point);\n point.x = this.formatPointValue(data.point, data.series.xAxis, 'x', true, false);\n if ((data.series.seriesType === 'XY')) {\n point.y = this.formatPointValue(data.point, data.series.yAxis, 'y', false, true);\n }\n else {\n point.low = this.formatPointValue(data.point, data.series.yAxis, 'low', false, true);\n point.high = this.formatPointValue(data.point, data.series.yAxis, 'high', false, true);\n }\n return point;\n };\n Tooltip.prototype.findMouseValue = function (data, chart) {\n if (!chart.requireInvertedAxis) {\n if (chart.chartAreaType === 'PolarRadar') {\n this.valueX = valueToPolarCoefficient(data.point.xValue, data.series.xAxis) * data.series.xAxis.rect.width\n + data.series.xAxis.rect.x;\n }\n else {\n this.valueX = valueToCoefficient(data.point.xValue, data.series.xAxis) * data.series.xAxis.rect.width\n + data.series.xAxis.rect.x;\n }\n this.valueY = chart.mouseY;\n }\n else {\n this.valueY = (1 - valueToCoefficient(data.point.xValue, data.series.xAxis)) * data.series.xAxis.rect.height\n + data.series.xAxis.rect.y;\n this.valueX = chart.mouseX;\n }\n };\n Tooltip.prototype.renderGroupedTooltip = function (chart, isFirst, tooltipDiv) {\n var data;\n var height = 0;\n var width = 0;\n var pointData = chart.chartAreaType === 'PolarRadar' ? this.getData() : null;\n this.stopAnimation();\n this.removeHighlight(chart);\n this.currentPoints = [];\n var extraPoints = [];\n var markerSide;\n if (isFirst) {\n document.getElementById(this.element.id + '_Secondary_Element').appendChild(tooltipDiv);\n }\n this.removeText();\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (!series.enableTooltip) {\n continue;\n }\n if (chart.chartAreaType === 'Cartesian' && series.visible) {\n data = this.getClosestX(chart, series);\n }\n else if (chart.chartAreaType === 'PolarRadar' && series.visible && pointData.point !== null) {\n data = new PointData(series.points[pointData.point.index], series);\n }\n if (data && this.header !== '' && this.currentPoints.length === 0) {\n this.findHeader(data);\n }\n if (data && this.triggerEvent(data, isFirst, this.getTooltipText(data))) {\n if (series.category === 'Series') {\n this.highlightPoints(data);\n }\n this.findMouseValue(data, chart);\n this.currentPoints.push(data);\n data = null;\n }\n else if (data) {\n extraPoints.push(data);\n }\n }\n if (this.currentPoints.length > 0) {\n this.renderText(isFirst, chart);\n markerSide = this.renderTooltipElement(chart, this.currentPoints[0], chart.chartAxisLayoutPanel.seriesClipRect, this.getSymbolLocation(this.currentPoints[0]), chart.chartAreaType === 'Cartesian', isFirst);\n this.drawMarker(markerSide.isBottom, markerSide.isRight, 10);\n }\n else {\n this.getElement(this.element.id + '_tooltip_path').setAttribute('d', '');\n }\n this.currentPoints = this.currentPoints.concat(extraPoints);\n this.previousPoints = extend([], this.currentPoints, null, true);\n };\n Tooltip.prototype.getBoxLocation = function (data) {\n var location;\n location = this.lierIndex > 3 ? data.point.symbolLocations[this.lierIndex - 4] :\n {\n x: data.point.regions[0].x + (data.point.regions[0].width / 2),\n y: data.point.regions[0].y + (data.point.regions[0].height / 2)\n };\n return location;\n };\n Tooltip.prototype.drawMarker = function (isBottom, isRight, size) {\n var shapeOption;\n var count = 0;\n var series;\n var markerGroup = this.chart.renderer.createGroup({ id: this.element.id + '_tooltip_trackball_group' });\n var groupElement = this.getElement(this.element.id + '_tooltip_group');\n var x = (this.padding * 2) + (size / 2) + (isRight ? this.arrowPadding : 0);\n for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {\n var data = _a[_i];\n series = data.series;\n if (series.visible && series.enableTooltip && data.point.visible) {\n shapeOption = new PathOption(this.element.id + '_Tooltip_Trackball_' + series.index, this.findColor(data, series) || series.interior, 1, '#cccccc', series.opacity, null);\n markerGroup.appendChild(drawSymbol(new ChartLocation(x, this.markerPoint[count] - this.padding + (isBottom ? this.arrowPadding : 0)), data.point.marker.shape || series.marker.shape, new Size(size, size), series.marker.imageUrl, shapeOption, null));\n count++;\n }\n }\n groupElement.appendChild(markerGroup);\n };\n Tooltip.prototype.findColor = function (data, series) {\n if (series.isRectSeries) {\n return data.point.color;\n }\n else {\n return (data.point.color && data.point.color !== '#ffffff' ? data.point.color : data.point.interior) || series.marker.fill;\n }\n };\n Tooltip.prototype.parseTemplate = function (point, series, format, xAxis, yAxis) {\n var val;\n var textValue;\n var xFormat;\n var customLabelFormat;\n var chart = this.chart;\n for (var _i = 0, _a = Object.keys(point); _i < _a.length; _i++) {\n var dataValue = _a[_i];\n val = new RegExp('${point' + '.' + dataValue + '}', 'gm');\n format = format.replace(val.source, this.formatPointValue(point, val.source === '${point.x}' ? xAxis : yAxis, dataValue, val.source === '${point.x}', (val.source === '${point.high}' ||\n val.source === '${point.open}' ||\n val.source === '${point.close}' ||\n val.source === '${point.low}' ||\n val.source === '${point.y}' ||\n val.source === '${point.minimum}' ||\n val.source === '${point.maximum}' ||\n val.source === '${point.outliers}' ||\n val.source === '${point.upperQuartile}' ||\n val.source === '${point.lowerQuartile}' ||\n val.source === '${point.median}')));\n }\n for (var _b = 0, _c = Object.keys(Object.getPrototypeOf(series)); _b < _c.length; _b++) {\n var dataValue = _c[_b];\n val = new RegExp('${series' + '.' + dataValue + '}', 'gm');\n textValue = series[dataValue];\n format = format.replace(val.source, textValue);\n }\n return format;\n };\n Tooltip.prototype.formatPointValue = function (point, axis, dataValue, isXPoint, isYPoint) {\n var textValue;\n var customLabelFormat;\n var value;\n if (axis.valueType !== 'Category' && isXPoint) {\n customLabelFormat = axis.labelFormat && axis.labelFormat.match('{value}') !== null;\n textValue = customLabelFormat ? axis.labelFormat.replace('{value}', axis.format(point[dataValue])) :\n axis.format(point[dataValue]);\n }\n else if (isYPoint) {\n customLabelFormat = axis.labelFormat && axis.labelFormat.match('{value}') !== null;\n value = dataValue === 'outliers' ? axis.format(point[dataValue][this.lierIndex - 4]) :\n axis.format(point[dataValue]);\n textValue = customLabelFormat ? axis.labelFormat.replace('{value}', value) : value;\n }\n else {\n textValue = point[dataValue];\n }\n return textValue;\n };\n Tooltip.prototype.getFormat = function (chart, series) {\n if (chart.tooltip.format) {\n if (series.seriesType === 'XY' && series.category === 'Indicator') {\n return this.getIndicatorTooltipFormat(series, chart, chart.tooltip.format);\n }\n return chart.tooltip.format;\n }\n var format = !chart.tooltip.shared ? '${point.x}' : '${series.name}';\n switch (series.seriesType) {\n case 'XY':\n if (series.category === 'Indicator') {\n this.getIndicatorTooltipFormat(series, chart, chart.tooltip.format);\n }\n return format + ' : ' + ((series.type === 'Bubble') ? '${point.y} Size : ${point.size} '\n : '${point.y} ');\n case 'HighLow':\n return format + (' High : ${point.high} Low : ${point.low} ');\n case 'HighLowOpenClose':\n return format + (' High : ${point.high} Low : ${point.low} ' +\n 'Open : ${point.open} Close : ${point.close} ');\n case 'BoxPlot': {\n return format + ' ' + (this.lierIndex > 3 ? 'Outliers : ${point.outliers} ' :\n 'Maximum : ${point.maximum} Q1 : ${point.upperQuartile} ' +\n 'Median : ${point.median} Q3 : ${point.lowerQuartile} Minimum : ${point.minimum} ');\n }\n }\n return '';\n };\n Tooltip.prototype.getIndicatorTooltipFormat = function (series, chart, format) {\n var toolTip;\n var points = [];\n if (series.seriesType === 'XY') {\n toolTip = series.name + ' : ${point.y}';\n }\n else {\n toolTip = format;\n }\n return toolTip;\n };\n /*\n * @hidden\n */\n Tooltip.prototype.removeHighlightedMarker = function (data) {\n for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {\n var item = data_1[_i];\n removeElement(this.element.id + '_Series_' + item.series.index +\n '_Point_' + item.point.index + '_Trackball');\n }\n if (this.chart.markerRender) {\n this.chart.markerRender.removeHighlightedMarker();\n }\n this.previousPoints = [];\n };\n /**\n * Removes the tooltip on mouse leave.\n * @return {void}\n * @private\n */\n Tooltip.prototype.removeTooltip = function (duration) {\n var _this = this;\n var chart = this.chart;\n var tooltipElement = this.getElement(this.element.id + '_tooltip');\n this.stopAnimation();\n if (tooltipElement && this.previousPoints.length > 0) {\n var data_2 = this.previousPoints;\n this.toolTipInterval = setTimeout(function () {\n var rectOpacity;\n var tooltipGroup = tooltipElement.firstChild;\n var series = data_2[0].series;\n var element = _this.getElement(chart.element.id + '_Series_' + data_2[0].series.index\n + '_Point_' + data_2[0].point.index);\n var opacity = parseFloat(tooltipGroup.getAttribute('opacity')) || 1;\n if (element && series.isRectSeries && !chart.tooltip.shared) {\n rectOpacity = parseFloat(element.getAttribute('opacity'));\n }\n new Animation({}).animate(tooltipGroup, {\n duration: 200,\n progress: function (args) {\n // tooltipGroup.removeAttribute('e-animate');\n _this.progressAnimation(element, tooltipGroup, series, opacity, rectOpacity, (args.timeStamp / args.duration), series.isRectSeries, !chart.tooltip.shared);\n },\n end: function (model) {\n _this.valueX = null;\n _this.valueY = null;\n _this.endAnimation(element, tooltipGroup, series, chart.tooltip.shared);\n _this.removeHighlightedMarker(data_2);\n }\n });\n }, duration);\n }\n };\n /**\n * Get module name.\n */\n Tooltip.prototype.getModuleName = function () {\n /**\n * Returns the module name\n */\n return 'Tooltip';\n };\n /**\n * To destroy the tooltip.\n * @return {void}\n * @private\n */\n Tooltip.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return Tooltip;\n}(BaseTooltip));\nexport { Tooltip };\n","import { EventHandler } from '@syncfusion/ej2-base';\nimport { remove } from '@syncfusion/ej2-base';\nimport { removeElement, measureText, RectOption, Rect, PolygonOption, PathOption, createTooltip, minMax } from '../../common/utils/helper';\nimport { textElement, TextOption } from '../../common/utils/helper';\n/**\n * Zooming Toolkit created here\n * @private\n */\nvar Toolkit = /** @class */ (function () {\n /** @private */\n function Toolkit(chart) {\n this.chart = chart;\n this.elementId = chart.element.id;\n this.selectionColor = '#ff4081';\n this.fillColor = '#737373';\n }\n /**\n * To create the pan button.\n * @return {void}\n * @private\n */\n Toolkit.prototype.createPanButton = function (childElement, parentElement, chart) {\n var render = this.chart.renderer;\n var fillColor = this.chart.zoomModule.isPanning ? this.selectionColor : this.fillColor;\n var direction = 'M5,3h2.3L7.275,5.875h1.4L8.65,3H11L8,0L5,3z M3,11V8.7l2.875,0.025v-1.4L3,7.35V5L0,8L3,';\n direction += '11z M11,13H8.7l0.025-2.875h-1.4L7.35,13H5l3,3L11,13z M13,5v2.3l-2.875-0.025v1.4L13,8.65V11l3-3L13,5z';\n childElement.id = this.elementId + '_Zooming_Pan';\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Pan'));\n this.panElements = childElement;\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Pan_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Pan_2', fillColor, null, null, 1, null, direction)));\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.pan);\n };\n /**\n * To create the zoom button.\n * @return {void}\n * @private\n */\n Toolkit.prototype.createZoomButton = function (childElement, parentElement, chart) {\n var render = this.chart.renderer;\n var fillColor = this.chart.zoomModule.isPanning ? this.fillColor : this.selectionColor;\n var direction = 'M0.001,14.629L1.372,16l4.571-4.571v-0.685l0.228-0.274c1.051,0.868,2.423,1.417,3.885,1.417c3.291,0,';\n direction += '5.943-2.651,5.943-5.943S13.395,0,10.103,0S4.16,2.651,4.16,5.943c0,1.508,0.503,2.834,1.417,3.885l-0.274,0.228H4.571';\n direction = direction + 'L0.001,14.629L0.001,14.629z M5.943,5.943c0-2.285,1.828-4.114,4.114-4.114s4.114,1.828,4.114,';\n childElement.id = this.elementId + '_Zooming_Zoom';\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Zoom'));\n this.zoomElements = childElement;\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Zoom_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Zoom_3', fillColor, null, null, 1, null, direction + '4.114s-1.828,4.114-4.114,4.114S5.943,8.229,5.943,5.943z')));\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.zoom);\n };\n /**\n * To create the ZoomIn button.\n * @return {void}\n * @private\n */\n Toolkit.prototype.createZoomInButton = function (childElement, parentElement, chart) {\n var render = this.chart.renderer;\n var fillColor = this.fillColor;\n var direction = 'M10.103,0C6.812,0,4.16,2.651,4.16,5.943c0,1.509,0.503,2.834,1.417,3.885l-0.274,0.229H4.571L0,';\n direction += '14.628l0,0L1.372,16l4.571-4.572v-0.685l0.228-0.275c1.052,0.868,2.423,1.417,3.885,1.417c3.291,0,5.943-2.651,';\n direction += '5.943-5.943C16,2.651,13.395,0,10.103,0z M10.058,10.058c-2.286,0-4.114-1.828-4.114-4.114c0-2.286,1.828-4.114,';\n childElement.id = this.elementId + '_Zooming_ZoomIn';\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('ZoomIn'));\n var polygonDirection = '12.749,5.466 10.749,5.466 10.749,3.466 9.749,3.466 9.749,5.466 7.749,5.466 7.749,6.466';\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_ZoomIn_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_ZoomIn_2', fillColor, null, null, 1, null, direction + '4.114-4.114c2.286,0,4.114,1.828,4.114,4.114C14.172,8.229,12.344,10.058,10.058,10.058z')));\n childElement.appendChild(render.drawPolygon(new PolygonOption(this.elementId + '_Zooming_ZoomIn_3', polygonDirection + ' 9.749,6.466 9.749,8.466 10.749,8.466 10.749,6.466 12.749,6.466', fillColor)));\n this.zoomInElements = childElement;\n this.elementOpacity = chart.zoomModule.isPanning ? '0.2' : '1';\n childElement.setAttribute('opacity', this.elementOpacity);\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.zoomIn);\n };\n /**\n * To create the ZoomOut button.\n * @return {void}\n * @private\n */\n Toolkit.prototype.createZoomOutButton = function (childElement, parentElement, chart) {\n var render = this.chart.renderer;\n var fillColor = this.fillColor;\n var direction = 'M0,14.622L1.378,16l4.533-4.533v-0.711l0.266-0.266c1.022,0.889,2.4,1.422,3.866,';\n direction += '1.422c3.289,0,5.955-2.666,5.955-5.955S13.333,0,10.044,0S4.089,2.667,4.134,5.911c0,1.466,0.533,2.844,';\n direction += '1.422,3.866l-0.266,0.266H4.578L0,14.622L0,14.622z M5.911,5.911c0-2.311,1.822-4.133,4.133-4.133s4.133,1.822,4.133,';\n childElement.id = this.elementId + '_Zooming_ZoomOut';\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('ZoomOut'));\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_ZoomOut_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_ZoomOut_2', fillColor, null, null, 1, null, direction + '4.133s-1.866,4.133-4.133,4.133S5.911,8.222,5.911,5.911z M12.567,6.466h-5v-1h5V6.466z')));\n this.zoomOutElements = childElement;\n this.elementOpacity = chart.zoomModule.isPanning ? '0.2' : '1';\n childElement.setAttribute('opacity', this.elementOpacity);\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.zoomOut);\n };\n /**\n * To create the Reset button.\n * @return {void}\n * @private\n */\n Toolkit.prototype.createResetButton = function (childElement, parentElement, chart, isDevice) {\n var render = this.chart.renderer;\n var fillColor = this.fillColor;\n var size;\n var direction = 'M12.364,8h-2.182l2.909,3.25L16,8h-2.182c0-3.575-2.618-6.5-5.818-6.5c-1.128,0-2.218,0.366-3.091,';\n direction += '1.016l1.055,1.178C6.581,3.328,7.272,3.125,8,3.125C10.4,3.125,12.363,5.319,12.364,8L12.364,8z M11.091,';\n direction += '13.484l-1.055-1.178C9.419,12.672,8.728,12.875,8,12.875c-2.4,0-4.364-2.194-4.364-4.875h2.182L2.909,4.75L0,8h2.182c0,';\n childElement.id = this.elementId + '_Zooming_Reset';\n childElement.setAttribute('aria-label', this.chart.getLocalizedLabel('Reset'));\n if (!isDevice) {\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Reset_1', 'transparent', {}, 1, new Rect(0, 0, 16, 16))));\n childElement.appendChild(render.drawPath(new PathOption(this.elementId + '_Zooming_Reset_2', fillColor, null, null, 1, null, direction + '3.575,2.618,6.5,5.818,6.5C9.128,14.5,10.219,14.134,11.091,13.484L11.091,13.484z')));\n }\n else {\n size = measureText(this.chart.getLocalizedLabel('ResetZoom'), { size: '12px' });\n childElement.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Reset_1', 'transparent', {}, 1, new Rect(0, 0, size.width, size.height))));\n textElement(new TextOption(this.elementId + '_Zooming_Reset_2', 0 + size.width / 2, 0 + size.height * 3 / 4, 'middle', this.chart.getLocalizedLabel('ResetZoom'), 'rotate(0,' + (0) + ',' + (0) + ')', 'auto'), { size: '12px' }, 'black', childElement);\n }\n parentElement.appendChild(childElement);\n this.wireEvents(childElement, this.reset);\n };\n /**\n * To bind events.\n * @return {void}\n * @private\n */\n Toolkit.prototype.wireEvents = function (element, process) {\n EventHandler.add(element, 'mousedown touchstart', process, this);\n EventHandler.add(element, 'mouseover', this.showTooltip, this);\n EventHandler.add(element, 'mouseout', this.removeTooltip, this);\n };\n /**\n * To show tooltip.\n * @return {void}\n * @private\n */\n Toolkit.prototype.showTooltip = function (event) {\n var text = event.currentTarget.id.split('_Zooming_')[1];\n var left = (event.pageX - (measureText(text, { size: '10px' }).width + 5));\n if (!this.chart.isTouch) {\n createTooltip('EJ2_Chart_ZoomTip', this.chart.getLocalizedLabel(text), (event.pageY + 10), left, '10px');\n }\n };\n /** @private */\n Toolkit.prototype.removeTooltip = function () {\n removeElement('EJ2_Chart_ZoomTip');\n };\n // Toolkit events function calculation here.\n /** @private */\n Toolkit.prototype.reset = function () {\n var chart = this.chart;\n if (!chart.zoomModule.isDevice) {\n remove(chart.zoomModule.toolkitElements);\n }\n this.removeTooltip();\n chart.svgObject.setAttribute('cursor', 'auto');\n chart.axisCollections.forEach(function (axis) {\n axis.zoomFactor = 1;\n axis.zoomPosition = 0;\n });\n chart.disableTrackTooltip = false;\n chart.zoomModule.isZoomed = chart.zoomModule.isPanning = chart.isChartDrag = chart.delayRedraw = false;\n chart.zoomModule.touchMoveList = chart.zoomModule.touchStartList = [];\n chart.zoomModule.pinchTarget = null;\n chart.removeSvg();\n chart.refreshAxis();\n chart.refreshBound();\n this.elementOpacity = '1';\n return false;\n };\n Toolkit.prototype.zoomIn = function (e) {\n this.zoomInOutCalculation(1, this.chart, this.chart.axisCollections, this.chart.zoomSettings.mode);\n return false;\n };\n Toolkit.prototype.zoomOut = function (e) {\n this.zoomInOutCalculation(-1, this.chart, this.chart.axisCollections, this.chart.zoomSettings.mode);\n return false;\n };\n Toolkit.prototype.zoom = function (e) {\n this.chart.zoomModule.isPanning = false;\n var zoomModule = this.chart.zoomModule;\n this.elementOpacity = '1';\n this.chart.svgObject.setAttribute('cursor', 'auto');\n this.zoomInElements.setAttribute('opacity', this.elementOpacity);\n this.zoomOutElements.setAttribute('opacity', this.elementOpacity);\n this.applySelection(this.zoomElements.childNodes, this.selectionColor);\n this.applySelection(this.panElements.childNodes, '#737373');\n return false;\n };\n /** @private */\n Toolkit.prototype.pan = function () {\n var zoomModule = this.chart.zoomModule;\n var element;\n this.chart.zoomModule.isPanning = true;\n this.chart.svgObject.setAttribute('cursor', 'pointer');\n this.elementOpacity = '0.2';\n element = this.zoomInElements ? this.zoomInElements.setAttribute('opacity', this.elementOpacity) : null;\n element = this.zoomOutElements ? this.zoomOutElements.setAttribute('opacity', this.elementOpacity) : null;\n element = this.panElements ? this.applySelection(this.panElements.childNodes, this.selectionColor) : null;\n element = this.zoomElements ? this.applySelection(this.zoomElements.childNodes, '#737373') : null;\n return false;\n };\n Toolkit.prototype.zoomInOutCalculation = function (scale, chart, axes, mode) {\n if (!chart.zoomModule.isPanning && this.elementOpacity !== '0.2') {\n var zoomFactor_1;\n var zoomPosition_1;\n var cumulative_1;\n chart.disableTrackTooltip = true;\n chart.delayRedraw = true;\n axes.forEach(function (axis) {\n if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||\n (axis.orientation === 'Vertical' && mode !== 'X')) {\n cumulative_1 = Math.max(Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1) + (0.25 * scale), 1);\n zoomFactor_1 = (cumulative_1 === 1) ? 1 : minMax(1 / cumulative_1, 0, 1);\n zoomPosition_1 = (cumulative_1 === 1) ? 0 : axis.zoomPosition + ((axis.zoomFactor - zoomFactor_1) * 0.5);\n if (axis.zoomPosition !== zoomPosition_1 || axis.zoomFactor !== zoomFactor_1) {\n zoomFactor_1 = (zoomPosition_1 + zoomFactor_1) > 1 ? (1 - zoomPosition_1) : zoomFactor_1;\n }\n axis.zoomFactor = zoomFactor_1;\n axis.zoomPosition = zoomPosition_1;\n }\n });\n }\n };\n Toolkit.prototype.applySelection = function (elements, color) {\n for (var i = 1, length_1 = elements.length; i < length_1; i++) {\n elements[i].setAttribute('fill', color);\n }\n };\n return Toolkit;\n}());\nexport { Toolkit };\n","import { EventHandler, Browser } from '@syncfusion/ej2-base';\nimport { getRectLocation, minMax, getElement, ChartLocation, Rect, RectOption, measureText } from '../../common/utils/helper';\nimport { Toolkit } from './zooming-toolkit';\nimport { zoomComplete } from '../../common/model/constants';\nimport { withInBounds } from '../../common/utils/helper';\n/**\n * `Zooming` module handles the zooming for chart.\n */\nvar Zoom = /** @class */ (function () {\n /**\n * Constructor for Zooming module.\n * @private.\n */\n function Zoom(chart) {\n this.chart = chart;\n this.isPointer = Browser.isPointer;\n this.browserName = Browser.info.name;\n this.wheelEvent = this.browserName === 'mozilla' ? (this.isPointer ? 'mousewheel' : 'DOMMouseScroll') : 'mousewheel';\n this.cancelEvent = this.isPointer ? 'pointerleave' : 'mouseleave';\n this.addEventListener();\n this.isDevice = Browser.isDevice;\n var zooming = chart.zoomSettings;\n this.toolkit = new Toolkit(chart);\n this.zooming = zooming;\n this.elementId = chart.element.id;\n this.zoomingRect = new Rect(0, 0, 0, 0);\n this.zoomAxes = [];\n this.zoomkitOpacity = 0.3;\n this.isIOS = Browser.isIos || Browser.isIos7;\n this.isZoomed = this.performedUI = this.zooming.enablePan && this.zooming.enableSelectionZooming;\n }\n /**\n * Function that handles the Rectangular zooming.\n * @return {void}\n */\n Zoom.prototype.renderZooming = function (e, chart, isTouch) {\n this.calculateZoomAxesRange(chart, chart.axisCollections);\n if (this.zooming.enableSelectionZooming && (!isTouch\n || (chart.isDoubleTap && this.touchStartList.length === 1)) && (!this.isPanning || chart.isDoubleTap)) {\n this.isPanning = this.isDevice ? true : this.isPanning;\n this.performedUI = true;\n this.drawZoomingRectangle(chart);\n }\n else if (this.isPanning && chart.isChartDrag) {\n if (!isTouch || (isTouch && this.touchStartList.length === 1)) {\n this.pinchTarget = isTouch ? e.target : null;\n this.doPan(chart, chart.axisCollections);\n }\n }\n };\n // Zooming rectangle drawn here\n Zoom.prototype.drawZoomingRectangle = function (chart) {\n var areaBounds = chart.chartAxisLayoutPanel.seriesClipRect;\n var startLocation = new ChartLocation(chart.previousMouseMoveX, chart.previousMouseMoveY);\n var endLocation = new ChartLocation(chart.mouseX, chart.mouseY);\n var rect = this.zoomingRect = getRectLocation(startLocation, endLocation, areaBounds);\n if (rect.width > 0 && rect.height > 0) {\n this.isZoomed = true;\n chart.disableTrackTooltip = true;\n chart.svgObject.setAttribute('cursor', 'crosshair');\n if (this.zooming.mode === 'X') {\n rect.height = areaBounds.height;\n rect.y = areaBounds.y;\n }\n else if (this.zooming.mode === 'Y') {\n rect.width = areaBounds.width;\n rect.x = areaBounds.x;\n }\n chart.svgObject.appendChild(chart.renderer.drawRectangle(new RectOption(this.elementId + '_ZoomArea', chart.themeStyle.selectionRectFill, { color: chart.themeStyle.selectionRectStroke, width: 1 }, 1, rect, 0, 0, '', '3')));\n }\n };\n // Panning performed here\n Zoom.prototype.doPan = function (chart, axes) {\n if (chart.startMove && chart.crosshair.enable) {\n return null;\n }\n var currentScale;\n var offset;\n this.isZoomed = true;\n var translateX;\n var translateY;\n this.offset = !chart.delayRedraw ? chart.chartAxisLayoutPanel.seriesClipRect : this.offset;\n chart.delayRedraw = true;\n chart.disableTrackTooltip = true;\n axes.forEach(function (axis) {\n currentScale = Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1);\n if (axis.orientation === 'Horizontal') {\n offset = (chart.previousMouseMoveX - chart.mouseX) / axis.rect.width / currentScale;\n axis.zoomPosition = minMax(axis.zoomPosition + offset, 0, (1 - axis.zoomFactor));\n }\n else {\n offset = (chart.previousMouseMoveY - chart.mouseY) / axis.rect.height / currentScale;\n axis.zoomPosition = minMax(axis.zoomPosition - offset, 0, (1 - axis.zoomFactor));\n }\n });\n if (this.zooming.enableDeferredZooming) {\n translateX = chart.mouseX - chart.mouseDownX;\n translateY = chart.mouseY - chart.mouseDownY;\n switch (this.zooming.mode) {\n case 'X':\n translateY = 0;\n break;\n case 'Y':\n translateX = 0;\n break;\n }\n this.setTransform(translateX, translateY, null, null, chart, false);\n this.refreshAxis(chart.chartAxisLayoutPanel, chart, chart.axisCollections);\n }\n else {\n this.performZoomRedraw(chart);\n }\n chart.previousMouseMoveX = chart.mouseX;\n chart.previousMouseMoveY = chart.mouseY;\n };\n /**\n * Redraw the chart on zooming.\n * @return {void}\n * @private\n */\n Zoom.prototype.performZoomRedraw = function (chart) {\n var rect = this.zoomingRect;\n chart.animateSeries = false;\n if (this.isZoomed) {\n if (rect.width > 0 && rect.height > 0) {\n this.performedUI = true;\n chart.svgObject.setAttribute('cursor', 'auto');\n this.doZoom(chart, chart.axisCollections, chart.chartAxisLayoutPanel.seriesClipRect);\n chart.isDoubleTap = false;\n }\n else if (chart.disableTrackTooltip) {\n chart.disableTrackTooltip = false;\n chart.delayRedraw = false;\n chart.removeSvg();\n chart.refreshAxis();\n chart.refreshBound();\n }\n }\n };\n Zoom.prototype.refreshAxis = function (layout, chart, axes) {\n var mode = chart.zoomSettings.mode;\n layout.measureAxis(new Rect(chart.initialClipRect.x, chart.initialClipRect.y, chart.initialClipRect.width, chart.initialClipRect.height));\n axes.map(function (axis, index) {\n if (axis.orientation === 'Horizontal' && mode !== 'Y') {\n layout.drawXAxisLabels(axis, index, null, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n }\n if (axis.orientation === 'Vertical' && mode !== 'X') {\n layout.drawYAxisLabels(axis, index, null, (axis.placeNextToAxisLine ? axis.updatedRect : axis.rect));\n }\n });\n };\n // Rectangular zoom calculated here performed here\n Zoom.prototype.doZoom = function (chart, axes, bounds) {\n var zoomRect = this.zoomingRect;\n var mode = this.zooming.mode;\n var argsData;\n var previousZF;\n var previousZP;\n var currentZF;\n var currentZP;\n this.isPanning = chart.zoomSettings.enablePan || this.isPanning;\n axes.forEach(function (axis) {\n previousZF = currentZF = axis.zoomFactor;\n previousZP = currentZP = axis.zoomPosition;\n argsData = {\n cancel: false, name: zoomComplete, axis: axis, previousZoomFactor: previousZF, previousZoomPosition: previousZP,\n currentZoomFactor: currentZF, currentZoomPosition: currentZP\n };\n if (axis.orientation === 'Horizontal') {\n if (mode !== 'Y') {\n currentZP += Math.abs((zoomRect.x - bounds.x) / (bounds.width)) * axis.zoomFactor;\n currentZF *= (zoomRect.width / bounds.width);\n argsData.currentZoomPosition = currentZP;\n argsData.currentZoomFactor = currentZF;\n chart.trigger(zoomComplete, argsData);\n }\n }\n else {\n if (mode !== 'X') {\n currentZP += (1 - Math.abs((zoomRect.height + (zoomRect.y - bounds.y)) / (bounds.height))) * axis.zoomFactor;\n currentZF *= (zoomRect.height / bounds.height);\n argsData.currentZoomFactor = currentZF;\n argsData.currentZoomPosition = currentZP;\n chart.trigger(zoomComplete, argsData);\n }\n }\n if (!argsData.cancel) {\n axis.zoomFactor = argsData.currentZoomFactor;\n axis.zoomPosition = argsData.currentZoomPosition;\n }\n });\n this.zoomingRect = new Rect(0, 0, 0, 0);\n this.performZoomRedraw(chart);\n };\n /**\n * Function that handles the Mouse wheel zooming.\n * @return {void}\n * @private\n */\n Zoom.prototype.performMouseWheelZooming = function (e, mouseX, mouseY, chart, axes) {\n var direction = (this.browserName === 'mozilla' && !this.isPointer) ?\n -(e.detail) / 3 > 0 ? 1 : -1 : (e.wheelDelta / 120) > 0 ? 1 : -1;\n var mode = this.zooming.mode;\n var origin = 0.5;\n var cumulative;\n var zoomFactor;\n var zoomPosition;\n this.isZoomed = true;\n this.calculateZoomAxesRange(chart, chart.axisCollections);\n chart.disableTrackTooltip = true;\n this.performedUI = true;\n this.isPanning = chart.zoomSettings.enablePan || this.isPanning;\n axes.forEach(function (axis) {\n if ((axis.orientation === 'Vertical' && mode !== 'X') ||\n (axis.orientation === 'Horizontal' && mode !== 'Y')) {\n cumulative = Math.max(Math.max(1 / minMax(axis.zoomFactor, 0, 1), 1) + (0.25 * direction), 1);\n if (cumulative >= 1) {\n origin = axis.orientation === 'Horizontal' ? mouseX / axis.rect.width : 1 - (mouseY / axis.rect.height);\n origin = origin > 1 ? 1 : origin < 0 ? 0 : origin;\n zoomFactor = (cumulative === 1) ? 1 : minMax(1 / cumulative, 0, 1);\n zoomPosition = (cumulative === 1) ? 0 : axis.zoomPosition + ((axis.zoomFactor - zoomFactor) * origin);\n if (axis.zoomPosition !== zoomPosition || axis.zoomFactor !== zoomFactor) {\n zoomFactor = (zoomPosition + zoomFactor) > 1 ? (1 - zoomPosition) : zoomFactor;\n }\n }\n axis.zoomFactor = zoomFactor;\n axis.zoomPosition = zoomPosition;\n }\n });\n this.performZoomRedraw(chart);\n };\n /**\n * Function that handles the Pinch zooming.\n * @return {void}\n * @private\n */\n Zoom.prototype.performPinchZooming = function (e, chart) {\n if ((this.zoomingRect.width > 0 && this.zoomingRect.height > 0) || (chart.startMove && chart.crosshair.enable)) {\n return false;\n }\n this.calculateZoomAxesRange(chart, chart.axisCollections);\n this.isZoomed = true;\n this.isPanning = true;\n this.performedUI = true;\n this.offset = !chart.delayRedraw ? chart.chartAxisLayoutPanel.seriesClipRect : this.offset;\n chart.delayRedraw = true;\n chart.disableTrackTooltip = true;\n var elementOffset = chart.element.getBoundingClientRect();\n var touchDown = this.touchStartList;\n var touchMove = this.touchMoveList;\n var touch0StartX = touchDown[0].pageX - elementOffset.left;\n var touch0StartY = touchDown[0].pageY - elementOffset.top;\n var touch0EndX = touchMove[0].pageX - elementOffset.left;\n var touch0EndY = touchMove[0].pageY - elementOffset.top;\n var touch1StartX = touchDown[1].pageX - elementOffset.left;\n var touch1StartY = touchDown[1].pageY - elementOffset.top;\n var touch1EndX = touchMove[1].pageX - elementOffset.left;\n var touch1EndY = touchMove[1].pageY - elementOffset.top;\n var scaleX;\n var scaleY;\n var translateXValue;\n var translateYValue;\n var pinchRect;\n var clipX;\n var clipY;\n scaleX = Math.abs(touch0EndX - touch1EndX) / Math.abs(touch0StartX - touch1StartX);\n scaleY = Math.abs(touch0EndY - touch1EndY) / Math.abs(touch0StartY - touch1StartY);\n clipX = ((this.offset.x - touch0EndX) / scaleX) + touch0StartX;\n clipY = ((this.offset.y - touch0EndY) / scaleY) + touch0StartY;\n pinchRect = new Rect(clipX, clipY, this.offset.width / scaleX, this.offset.height / scaleY);\n translateXValue = (touch0EndX - (scaleX * touch0StartX));\n translateYValue = (touch0EndY - (scaleY * touch0StartY));\n if (!isNaN(scaleX - scaleX) && !isNaN(scaleY - scaleY)) {\n switch (this.zooming.mode) {\n case 'XY':\n this.setTransform(translateXValue, translateYValue, scaleX, scaleY, chart, true);\n break;\n case 'X':\n this.setTransform(translateXValue, 0, scaleX, 1, chart, true);\n break;\n case 'Y':\n this.setTransform(0, translateYValue, 1, scaleY, chart, true);\n break;\n }\n }\n this.calculatePinchZoomFactor(chart, pinchRect);\n this.refreshAxis(chart.chartAxisLayoutPanel, chart, chart.axisCollections);\n return true;\n };\n Zoom.prototype.calculatePinchZoomFactor = function (chart, pinchRect) {\n var _this = this;\n var mode = this.zooming.mode;\n var selectionMin;\n var selectionMax;\n var rangeMin;\n var rangeMax;\n var value;\n var axisTrans;\n chart.axisCollections.forEach(function (axis, index) {\n if ((axis.orientation === 'Horizontal' && mode !== 'Y') ||\n (axis.orientation === 'Vertical' && mode !== 'X')) {\n if (axis.orientation === 'Horizontal') {\n value = pinchRect.x - _this.offset.x;\n axisTrans = axis.rect.width / _this.zoomAxes[index].delta;\n rangeMin = value / axisTrans + _this.zoomAxes[index].min;\n value = pinchRect.x + pinchRect.width - _this.offset.x;\n rangeMax = value / axisTrans + _this.zoomAxes[index].min;\n }\n else {\n value = pinchRect.y - _this.offset.y;\n axisTrans = axis.rect.height / _this.zoomAxes[index].delta;\n rangeMin = (value * -1 + axis.rect.height) / axisTrans + _this.zoomAxes[index].min;\n value = pinchRect.y + pinchRect.height - _this.offset.y;\n rangeMax = (value * -1 + axis.rect.height) / axisTrans + _this.zoomAxes[index].min;\n }\n selectionMin = Math.min(rangeMin, rangeMax);\n selectionMax = Math.max(rangeMin, rangeMax);\n axis.zoomPosition = (selectionMin - _this.zoomAxes[index].actualMin) / _this.zoomAxes[index].actualDelta;\n axis.zoomFactor = (selectionMax - selectionMin) / _this.zoomAxes[index].actualDelta;\n axis.zoomPosition = axis.zoomPosition < 0 ? 0 : axis.zoomPosition;\n axis.zoomFactor = axis.zoomFactor > 1 ? 1 : axis.zoomFactor;\n }\n });\n };\n // Series transformation style applied here.\n Zoom.prototype.setTransform = function (transX, transY, scaleX, scaleY, chart, isPinch) {\n chart.seriesElements.setAttribute('clip-path', 'url(#' + this.elementId + '_ChartAreaClipRect_)');\n if (chart.indicatorElements) {\n chart.indicatorElements.setAttribute('clip-path', 'url(#' + this.elementId + '_ChartAreaClipRect_)');\n }\n var translate;\n var xAxisLoc;\n var yAxisLoc;\n var element;\n if (transX !== null && transY !== null) {\n chart.visibleSeries.forEach(function (value) {\n xAxisLoc = chart.requireInvertedAxis ? value.yAxis.rect.x : value.xAxis.rect.x;\n yAxisLoc = chart.requireInvertedAxis ? value.xAxis.rect.y : value.yAxis.rect.y;\n translate = 'translate(' + (transX + (isPinch ? (scaleX * xAxisLoc) : xAxisLoc)) +\n ',' + (transY + (isPinch ? (scaleY * yAxisLoc) : yAxisLoc)) + ')';\n translate = (scaleX || scaleY) ? translate + ' scale(' + scaleX + ' ' + scaleY + ')' : translate;\n if (value.category === 'Indicator') {\n value.seriesElement.parentElement.setAttribute('transform', translate);\n }\n else {\n value.seriesElement.setAttribute('transform', translate);\n }\n element = getElement(chart.element.id + '_Series_' + value.index + '_DataLabelCollections');\n if (value.errorBarElement) {\n value.errorBarElement.setAttribute('transform', translate);\n }\n if (value.symbolElement) {\n value.symbolElement.setAttribute('transform', translate);\n }\n if (value.textElement) {\n value.textElement.setAttribute('visibility', 'hidden');\n value.shapeElement.setAttribute('visibility', 'hidden');\n }\n if (element) {\n element.style.visibility = 'hidden';\n }\n });\n }\n };\n Zoom.prototype.calculateZoomAxesRange = function (chart, axes) {\n var _this = this;\n var range;\n var axisRange;\n chart.axisCollections.forEach(function (axis, index) {\n axisRange = axis.visibleRange;\n if (_this.zoomAxes[index]) {\n if (!chart.delayRedraw) {\n _this.zoomAxes[index].min = axisRange.min;\n _this.zoomAxes[index].delta = axisRange.delta;\n }\n }\n else {\n range = {\n actualMin: axis.actualRange.min,\n actualDelta: axis.actualRange.delta,\n min: axisRange.min,\n delta: axisRange.delta\n };\n _this.zoomAxes[index] = range;\n }\n });\n };\n // Zooming Toolkit created here\n Zoom.prototype.showZoomingToolkit = function (chart) {\n var toolboxItems = this.zooming.toolbarItems;\n var areaBounds = chart.chartAxisLayoutPanel.seriesClipRect;\n var spacing = 5;\n var render = chart.renderer;\n var length = this.isDevice ? 1 : toolboxItems.length;\n var iconSize = this.isDevice ? measureText('Reset Zoom', { size: '12px' }).width : 16;\n var height = this.isDevice ? measureText('Reset Zoom', { size: '12px' }).height : 22;\n var width = (length * iconSize) + ((length + 1) * spacing) + ((length - 1) * spacing);\n var transX = areaBounds.x + areaBounds.width - width - spacing;\n var transY = (areaBounds.y + spacing);\n var xPosition = spacing;\n var outerElement;\n var toolkit = this.toolkit;\n var element;\n var shadowElement = '';\n shadowElement += '';\n shadowElement += ' ';\n if (length === 0 || getElement(this.elementId + '_Zooming_KitCollection')) {\n return false;\n }\n var defElement = render.createDefs();\n toolboxItems = this.isDevice ? ['Reset'] : toolboxItems;\n defElement.innerHTML = shadowElement;\n this.toolkitElements = render.createGroup({\n id: this.elementId + '_Zooming_KitCollection',\n transform: 'translate(' + transX + ',' + transY + ')'\n });\n this.toolkitElements.appendChild(defElement);\n this.toolkitElements.appendChild(render.drawRectangle(new RectOption(this.elementId + '_Zooming_Rect', '#fafafa', { color: 'transparent', width: 1 }, 1, new Rect(0, 0, width, (height + (spacing * 2))), 0, 0)));\n outerElement = render.drawRectangle(new RectOption(this.elementId + '_Zooming_Rect', '#fafafa', { color: 'transparent', width: 1 }, 0.1, new Rect(0, 0, width, (height + (spacing * 2))), 0, 0));\n outerElement.setAttribute('filter', 'url(#chart_shadow)');\n this.toolkitElements.appendChild(outerElement);\n var currentItem;\n for (var i = 1; i <= length; i++) {\n currentItem = toolboxItems[i - 1];\n element = render.createGroup({\n transform: 'translate(' + xPosition + ',' + (this.isDevice ? spacing : (spacing + 3)) + ')'\n });\n // for desktop toolkit hight is 32 and top padding is 8 icon size 16\n switch (currentItem) {\n case 'Pan':\n toolkit.createPanButton(element, this.toolkitElements, chart);\n break;\n case 'Zoom':\n toolkit.createZoomButton(element, this.toolkitElements, chart);\n break;\n case 'ZoomIn':\n toolkit.createZoomInButton(element, this.toolkitElements, chart);\n break;\n case 'ZoomOut':\n toolkit.createZoomOutButton(element, this.toolkitElements, chart);\n break;\n case 'Reset':\n toolkit.createResetButton(element, this.toolkitElements, chart, this.isDevice);\n break;\n }\n xPosition += iconSize + (spacing * 2);\n }\n this.toolkitElements.setAttribute('opacity', this.isDevice ? '1' : '' + this.zoomkitOpacity);\n this.toolkitElements.setAttribute('cursor', 'auto');\n chart.svgObject.appendChild(this.toolkitElements);\n if (!this.isDevice) {\n EventHandler.add(this.toolkitElements, 'mousemove touchstart', this.zoomToolkitMove, this);\n EventHandler.add(this.toolkitElements, 'mouseleave touchend', this.zoomToolkitLeave, this);\n if (this.isPanning) {\n toolkit.pan();\n }\n }\n return true;\n };\n /**\n * To the show the zooming toolkit.\n * @return {void}\n * @private\n */\n Zoom.prototype.applyZoomToolkit = function (chart, axes) {\n var showToolkit = this.isAxisZoomed(axes);\n if (showToolkit) {\n this.showZoomingToolkit(chart);\n this.isZoomed = true;\n }\n else {\n this.toolkit.removeTooltip();\n this.isPanning = false;\n this.isZoomed = false;\n chart.svgObject.setAttribute('cursor', 'auto');\n }\n };\n /**\n * Return boolean property to show zooming toolkit.\n * @return {void}\n * @private\n */\n Zoom.prototype.isAxisZoomed = function (axes) {\n var showToolkit = false;\n axes.forEach(function (axis) {\n showToolkit = (showToolkit || (axis.zoomFactor !== 1 || axis.zoomPosition !== 0));\n });\n return showToolkit;\n };\n Zoom.prototype.zoomToolkitMove = function (e) {\n var element = this.toolkitElements;\n var opacity = +element.getAttribute('opacity');\n this.zoomkitOpacity = 1;\n element.setAttribute('opacity', '' + this.zoomkitOpacity);\n return false;\n };\n Zoom.prototype.zoomToolkitLeave = function (e) {\n var element = this.toolkitElements;\n this.zoomkitOpacity = 0.3;\n element.setAttribute('opacity', '' + this.zoomkitOpacity);\n return false;\n };\n /**\n * @hidden\n */\n Zoom.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n EventHandler.add(this.chart.element, this.wheelEvent, this.chartMouseWheel, this);\n this.chart.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.chart.on(Browser.touchStartEvent, this.mouseDownHandler, this);\n this.chart.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n this.chart.on(this.cancelEvent, this.mouseCancelHandler, this);\n };\n /**\n * @hidden\n */\n Zoom.prototype.removeEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n EventHandler.remove(this.chart.element, this.wheelEvent, this.chartMouseWheel);\n this.chart.off(Browser.touchMoveEvent, this.mouseMoveHandler);\n this.chart.off(Browser.touchStartEvent, this.mouseDownHandler);\n this.chart.off(Browser.touchEndEvent, this.mouseUpHandler);\n this.chart.off(this.cancelEvent, this.mouseCancelHandler);\n };\n /**\n * Handles the mouse wheel on chart.\n * @return {boolean}\n * @private\n */\n Zoom.prototype.chartMouseWheel = function (e) {\n var chart = this.chart;\n var offset = chart.element.getBoundingClientRect();\n var svgRect = getElement(chart.element.id + '_svg').getBoundingClientRect();\n var mouseX = (e.clientX - offset.left) - Math.max(svgRect.left - offset.left, 0);\n var mouseY = (e.clientY - offset.top) - Math.max(svgRect.top - offset.top, 0);\n if (this.zooming.enableMouseWheelZooming &&\n withInBounds(mouseX, mouseY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n e.preventDefault();\n this.performMouseWheelZooming(e, mouseX, mouseY, chart, chart.axisCollections);\n }\n return false;\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseMoveHandler = function (e) {\n //Zooming for chart\n var chart = this.chart;\n var touches = null;\n if (e.type === 'touchmove') {\n if (e.preventDefault && this.isIOS &&\n (this.isPanning || (chart.isDoubleTap)\n || (this.zooming.enablePinchZooming && this.touchStartList.length > 1))) {\n e.preventDefault();\n }\n touches = e.touches;\n }\n if (chart.isChartDrag) {\n if (chart.isTouch) {\n this.touchMoveList = this.addTouchPointer(this.touchMoveList, e, touches);\n if (this.zooming.enablePinchZooming && this.touchMoveList.length > 1\n && this.touchStartList.length > 1) {\n this.performPinchZooming(e, chart);\n }\n }\n this.renderZooming(e, chart, chart.isTouch);\n }\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseDownHandler = function (e) {\n //Zooming for chart\n var chart = this.chart;\n var touches = null;\n var target;\n if (e.type === 'touchstart') {\n touches = e.touches;\n target = e.target;\n }\n else {\n target = e.target;\n }\n if (target.id.indexOf(chart.element.id + '_Zooming_') === -1 &&\n withInBounds(chart.previousMouseMoveX, chart.previousMouseMoveY, chart.chartAxisLayoutPanel.seriesClipRect)) {\n chart.isChartDrag = true;\n }\n if (chart.isTouch) {\n this.touchStartList = this.addTouchPointer(this.touchStartList, e, touches);\n }\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseUpHandler = function (e) {\n var chart = this.chart;\n var performZoomRedraw = e.target.id.indexOf(chart.element.id + '_ZoomOut_') === -1 ||\n e.target.id.indexOf(chart.element.id + '_ZoomIn_') === -1;\n if (chart.isChartDrag || performZoomRedraw) {\n this.performZoomRedraw(chart);\n }\n if (chart.isTouch) {\n if (chart.isDoubleTap && withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect)\n && this.touchStartList.length === 1 && this.isZoomed) {\n this.toolkit.reset();\n }\n this.touchStartList = [];\n chart.isDoubleTap = false;\n }\n };\n /**\n * @hidden\n */\n Zoom.prototype.mouseCancelHandler = function (e) {\n if (this.isZoomed) {\n this.performZoomRedraw(this.chart);\n }\n this.pinchTarget = null;\n this.touchStartList = [];\n this.touchMoveList = [];\n };\n /**\n * Handles the touch pointer.\n * @return {boolean}\n * @private\n */\n Zoom.prototype.addTouchPointer = function (touchList, e, touches) {\n if (touches) {\n touchList = [];\n for (var i = 0, length_1 = touches.length; i < length_1; i++) {\n touchList.push({ pageX: touches[i].clientX, pageY: touches[i].clientY, pointerId: null });\n }\n }\n else {\n touchList = touchList ? touchList : [];\n if (touchList.length === 0) {\n touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });\n }\n else {\n for (var i = 0, length_2 = touchList.length; i < length_2; i++) {\n if (touchList[i].pointerId === e.pointerId) {\n touchList[i] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };\n }\n else {\n touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });\n }\n }\n }\n }\n return touchList;\n };\n /**\n * Get module name.\n */\n Zoom.prototype.getModuleName = function () {\n // Returns te module name\n return 'Zoom';\n };\n /**\n * To destroy the zooming.\n * @return {void}\n * @private\n */\n Zoom.prototype.destroy = function (chart) {\n // Destroy method performed here\n this.removeEventListener();\n };\n return Zoom;\n}());\nexport { Zoom };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Selection Module handles the selection for chart.\n * @private\n */\nvar BaseSelection = /** @class */ (function () {\n function BaseSelection(control) {\n this.control = control;\n }\n /**\n * To create selection styles for series\n */\n BaseSelection.prototype.seriesStyles = function () {\n var seriesclass;\n var style = document.getElementById(this.styleId);\n if (isNullOrUndefined(style)) {\n style = document.createElement('style');\n style.setAttribute('id', this.styleId);\n for (var _i = 0, _a = this.control.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n seriesclass = series.selectionStyle || this.styleId + '_series_' + series.index;\n style.innerHTML += series.selectionStyle ? '' : '.' + seriesclass + ' { } ';\n }\n style.innerHTML += '.' + this.unselected + ' { opacity:' + (0.3) + ';} ';\n document.body.appendChild(style);\n }\n };\n /**\n * To concat indexes\n */\n BaseSelection.prototype.concatIndexes = function (userIndexes, localIndexes) {\n return userIndexes.concat(localIndexes);\n };\n /**\n * Selected points series visibility checking on legend click\n */\n BaseSelection.prototype.checkVisibility = function (selectedIndexes) {\n var visible = false;\n var uniqueSeries = [];\n for (var _i = 0, selectedIndexes_1 = selectedIndexes; _i < selectedIndexes_1.length; _i++) {\n var index = selectedIndexes_1[_i];\n if (uniqueSeries.indexOf(index.series) === -1) {\n uniqueSeries.push(index.series);\n }\n }\n for (var _a = 0, uniqueSeries_1 = uniqueSeries; _a < uniqueSeries_1.length; _a++) {\n var index = uniqueSeries_1[_a];\n if (this.control.series[index].visible) {\n visible = true;\n break;\n }\n }\n return visible;\n };\n /**\n * To add svg element style class\n * @private\n */\n BaseSelection.prototype.addSvgClass = function (element, className) {\n var elementClassName = element.getAttribute('class') || '';\n elementClassName += ((elementClassName !== '') ? ' ' : '');\n if (elementClassName.indexOf(className) === -1) {\n element.setAttribute('class', elementClassName + className);\n }\n };\n /**\n * To remove svg element style class\n * @private\n */\n BaseSelection.prototype.removeSvgClass = function (element, className) {\n var elementClassName = element.getAttribute('class') || '';\n if (elementClassName.indexOf(className) > -1) {\n element.setAttribute('class', elementClassName.replace(className, ''));\n }\n };\n /**\n * To get children from parent element\n */\n BaseSelection.prototype.getChildren = function (parent) {\n var children = [];\n for (var i = 0; i < parent.childNodes.length; i++) {\n if (parent.childNodes[i].tagName !== 'defs') {\n children.push(parent.childNodes[i]);\n }\n }\n return children;\n };\n return BaseSelection;\n}());\nexport { BaseSelection };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Selection src file\n */\nimport { Browser } from '@syncfusion/ej2-base';\nimport { remove } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { ChartLocation, Rect, RectOption, CircleOption, withInBounds, getDraggedRectLocation, removeElement, getElement } from '../../common/utils/helper';\nimport { Index } from '../../common/model/base';\nimport { dragComplete } from '../../common/model/constants';\nimport { BaseSelection } from '../../common/user-interaction/selection';\n/**\n * `Selection` module handles the selection for chart.\n * @private\n */\nvar Selection = /** @class */ (function (_super) {\n __extends(Selection, _super);\n /**\n * Constructor for selection module.\n * @private.\n */\n function Selection(chart) {\n var _this = _super.call(this, chart) || this;\n _this.chart = chart;\n _this.renderer = chart.renderer;\n _this.addEventListener();\n return _this;\n }\n /**\n * Binding events for selection module.\n */\n Selection.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n var cancelEvent = Browser.isPointer ? 'pointerleave' : 'mouseleave';\n this.chart.on(Browser.touchMoveEvent, this.mouseMove, this);\n this.chart.on(cancelEvent, this.completeSelection, this);\n this.chart.on('click', this.calculateSelectedElements, this);\n this.chart.on(Browser.touchStartEvent, this.mousedown, this);\n this.chart.on(Browser.touchEndEvent, this.completeSelection, this);\n };\n /**\n * Chart mouse down\n */\n Selection.prototype.mousedown = function (e) {\n var chart = this.chart;\n if (chart.selectionMode === 'None' || chart.isChartDrag) {\n return;\n }\n if (chart.isDoubleTap || !chart.isTouch || this.rectPoints) {\n this.dragStart(chart, chart.chartAxisLayoutPanel.seriesClipRect, chart.mouseDownX, chart.mouseDownY, e);\n }\n };\n /**\n * UnBinding events for selection module.\n */\n Selection.prototype.removeEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n this.chart.off(Browser.touchMoveEvent, this.mouseMove);\n this.chart.off('pointerleave' || 'mouseleave', this.completeSelection);\n this.chart.off('click', this.calculateSelectedElements);\n this.chart.off(Browser.touchStartEvent, this.mousedown);\n this.chart.off(Browser.touchEndEvent, this.completeSelection);\n };\n /**\n * To find private variable values\n */\n Selection.prototype.initPrivateVariables = function (chart) {\n this.styleId = chart.element.id + '_ej2_chart_selection';\n this.unselected = chart.element.id + '_ej2_deselected';\n this.closeIconId = chart.element.id + '_ej2_drag_close';\n this.draggedRectGroup = chart.element.id + '_ej2_drag_group';\n this.draggedRect = chart.element.id + '_ej2_drag_rect';\n this.selectedDataIndexes = [];\n this.rectPoints = null;\n this.isSeriesMode = chart.selectionMode === 'Series';\n };\n /**\n * Method to select the point and series.\n * @return {void}\n */\n Selection.prototype.invokeSelection = function (chart) {\n this.initPrivateVariables(chart);\n this.series = extend({}, chart.visibleSeries, null, true);\n this.seriesStyles();\n if (!(chart.selectionMode.indexOf('Drag') > -1)) {\n this.selectDataIndex(chart, this.concatIndexes(chart.selectedDataIndexes, this.selectedDataIndexes));\n }\n };\n Selection.prototype.generateStyle = function (series) {\n if (series) {\n return (series.selectionStyle || this.styleId + '_series_' + series.index);\n }\n return 'undefined';\n };\n Selection.prototype.selectDataIndex = function (chart, indexes) {\n for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {\n var index = indexes_1[_i];\n this.performSelection(index, chart, this.getElementByIndex(chart, index)[0]);\n }\n };\n Selection.prototype.getElementByIndex = function (chart, index, suffix) {\n if (suffix === void 0) { suffix = ''; }\n var elementId = chart.element.id + '_Series_' + index.series + '_Point' + '_' + index.point;\n var series = chart.series[index.series];\n elementId = (!series.isRectSeries && series.type !== 'Scatter' && series.type !== 'Bubble' &&\n series.marker.visible) ? (elementId + '_Symbol' + suffix) : elementId;\n return [getElement(elementId), (series.type === 'RangeArea' && series.marker.visible) ? getElement(elementId + '1') : null];\n };\n Selection.prototype.getClusterElements = function (chart, index) {\n var clusters = [];\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n index = new Index(series.index, index.point);\n clusters.push(this.getElementByIndex(chart, index)[0]);\n }\n return clusters;\n };\n Selection.prototype.findElements = function (chart, series, index, suffix) {\n if (suffix === void 0) { suffix = ''; }\n if (this.isSeriesMode) {\n return this.getSeriesElements(series);\n }\n else if (chart.selectionMode === 'Cluster') {\n return this.getClusterElements(chart, index);\n }\n else {\n return this.getElementByIndex(chart, index, suffix);\n }\n };\n /**\n * To find the selected element.\n * @return {void}\n * @private\n */\n Selection.prototype.calculateSelectedElements = function (event) {\n if (this.chart.selectionMode === 'None' || event.target.id.indexOf(this.chart.element.id + '_') === -1) {\n return;\n }\n if (event.target.id.indexOf('_Series_') > -1) {\n this.performSelection(this.indexFinder(event.target.id), this.chart, event.target);\n }\n };\n Selection.prototype.performSelection = function (index, chart, element) {\n this.isSeriesMode = chart.selectionMode === 'Series';\n if (chart.series[index.series].type === 'BoxAndWhisker' &&\n element.id === chart.element.id + '_Series_' + index.series + '_Point_' + index.point + '_BoxPath') {\n element = element.parentElement;\n }\n switch (chart.selectionMode) {\n case 'Series':\n this.selection(chart, index, this.getSeriesElements(chart.series[index.series]));\n this.blurEffect(chart.element.id, chart.visibleSeries);\n break;\n case 'Point':\n if (!isNaN(index.point)) {\n this.selection(chart, index, [element]);\n this.blurEffect(chart.element.id, chart.visibleSeries);\n }\n break;\n case 'Cluster':\n if (!isNaN(index.point)) {\n this.clusterSelection(chart, chart.series, index);\n this.blurEffect(chart.element.id, chart.visibleSeries);\n }\n break;\n }\n };\n Selection.prototype.selection = function (chart, index, selectedElements) {\n if (!chart.isMultiSelect && (chart.selectionMode.indexOf('Drag') === -1)) {\n this.removeMultiSelectEelments(chart, this.selectedDataIndexes, index, chart.series);\n }\n var className = selectedElements[0] && (selectedElements[0].getAttribute('class') || '');\n if (selectedElements[0] && className.indexOf(this.getSelectionClass(selectedElements[0].id)) > -1) {\n this.removeStyles(selectedElements);\n this.addOrRemoveIndex(this.selectedDataIndexes, index);\n }\n else {\n this.applyStyles(selectedElements);\n this.addOrRemoveIndex(this.selectedDataIndexes, index, true);\n }\n };\n Selection.prototype.clusterSelection = function (chart, series, index) {\n this.selection(chart, index, this.getClusterElements(chart, new Index(index.series, index.point)));\n };\n Selection.prototype.removeMultiSelectEelments = function (chart, index, currentIndex, seriesCollection) {\n var series;\n for (var i = 0; i < index.length; i++) {\n series = seriesCollection[index[i].series];\n if ((this.isSeriesMode && !this.toEquals(index[i], currentIndex, this.isSeriesMode)) ||\n (this.control.selectionMode === 'Cluster' && !this.toEquals(index[i], currentIndex, false)) ||\n (!this.isSeriesMode && this.toEquals(index[i], currentIndex, true) && !this.toEquals(index[i], currentIndex, false))) {\n this.removeStyles(this.findElements(chart, series, index[i]));\n index.splice(i, 1);\n i--;\n }\n }\n };\n Selection.prototype.blurEffect = function (chartId, visibleSeries) {\n var visibility = this.checkVisibility(this.selectedDataIndexes); // legend click scenario\n for (var _i = 0, visibleSeries_1 = visibleSeries; _i < visibleSeries_1.length; _i++) {\n var series = visibleSeries_1[_i];\n if (series.visible) {\n this.checkSelectionElements(getElement(chartId + 'SeriesGroup' + series.index), this.generateStyle(series), visibility);\n if (!isNullOrUndefined(getElement(chartId + 'SymbolGroup' + series.index))) {\n this.checkSelectionElements(getElement(chartId + 'SymbolGroup' + series.index), this.generateStyle(series), visibility);\n }\n }\n }\n };\n Selection.prototype.checkSelectionElements = function (element, className, visibility) {\n var children = (this.isSeriesMode ? [element] : element.childNodes);\n var elementClassName;\n var parentClassName;\n var legendShape;\n var selectElement = element;\n for (var i = 0; i < children.length; i++) {\n elementClassName = children[i].getAttribute('class') || '';\n parentClassName = children[i].parentNode.getAttribute('class') || '';\n if (elementClassName.indexOf(className) === -1 &&\n parentClassName.indexOf(className) === -1 && visibility) {\n this.addSvgClass(children[i], this.unselected);\n }\n else {\n selectElement = children[i];\n this.removeSvgClass(children[i], this.unselected);\n }\n }\n if (this.control.legendModule && this.control.legendSettings.visible) {\n legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + className.split('_series_')[1]);\n if (legendShape) {\n elementClassName = selectElement.getAttribute('class') || '';\n parentClassName = selectElement.parentNode.getAttribute('class') || '';\n if (elementClassName.indexOf(className) === -1 && parentClassName.indexOf(className) === -1 && visibility) {\n this.addSvgClass(legendShape, this.unselected);\n }\n else {\n this.removeSvgClass(legendShape, this.unselected);\n }\n }\n }\n };\n Selection.prototype.applyStyles = function (elements) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n if (element) {\n this.removeSvgClass(element.parentNode, this.unselected);\n this.removeSvgClass(element, this.unselected);\n this.addSvgClass(element, this.getSelectionClass(element.id));\n }\n }\n };\n Selection.prototype.getSelectionClass = function (id) {\n return this.generateStyle(this.control.series[this.indexFinder(id).series]);\n };\n Selection.prototype.removeStyles = function (elements) {\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n if (element) {\n this.removeSvgClass(element, this.getSelectionClass(element.id));\n }\n }\n };\n Selection.prototype.addOrRemoveIndex = function (indexes, index, add) {\n for (var i = 0; i < indexes.length; i++) {\n if (this.toEquals(indexes[i], index, this.isSeriesMode)) {\n indexes.splice(i, 1);\n i--;\n }\n }\n if (add) {\n indexes.push(index);\n }\n };\n Selection.prototype.toEquals = function (first, second, checkSeriesOnly) {\n return ((first.series === second.series || (this.control.selectionMode === 'Cluster' && !checkSeriesOnly))\n && (checkSeriesOnly || (first.point === second.point)));\n };\n /**\n * To redraw the selected points.\n * @return {void}\n * @private\n */\n Selection.prototype.redrawSelection = function (chart, oldMode) {\n this.isSeriesMode = oldMode === 'Series';\n var selectedDataIndexes = extend([], this.selectedDataIndexes, null, true);\n this.removeSelectedElements(chart, this.selectedDataIndexes, chart.series);\n this.blurEffect(chart.element.id, chart.visibleSeries);\n this.selectDataIndex(chart, selectedDataIndexes);\n };\n /** @private */\n Selection.prototype.legendSelection = function (chart, series) {\n var seriesStyle = this.generateStyle(chart.visibleSeries[series]);\n var selectedElements = document.getElementsByClassName(seriesStyle);\n this.isSeriesMode = chart.selectionMode === 'Series';\n var isBlurEffectNeeded = true;\n if (selectedElements.length > 0) {\n var elements = [];\n for (var i = 0; i < selectedElements.length; i++) {\n elements.push(selectedElements[i]);\n }\n this.removeStyles(elements);\n this.isSeriesMode = true;\n this.addOrRemoveIndex(this.selectedDataIndexes, new Index(series, NaN));\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series_1 = _a[_i];\n seriesStyle = this.generateStyle(series_1);\n if (document.getElementsByClassName(seriesStyle).length > 0) {\n for (var _b = 0, elements_3 = elements; _b < elements_3.length; _b++) {\n var element = elements_3[_b];\n this.checkSelectionElements(element, seriesStyle, true);\n }\n isBlurEffectNeeded = false;\n break;\n }\n }\n if (isBlurEffectNeeded) {\n this.isSeriesMode = chart.selectionMode === 'Series';\n this.blurEffect(chart.element.id, chart.visibleSeries);\n }\n }\n else {\n var seriesElements = this.getSeriesElements(chart.visibleSeries[series]);\n for (var _c = 0, seriesElements_1 = seriesElements; _c < seriesElements_1.length; _c++) {\n var seriesElement = seriesElements_1[_c];\n this.checkSelectionElements(seriesElement, seriesStyle, false);\n }\n this.isSeriesMode = true;\n this.selection(chart, new Index(series, NaN), seriesElements);\n this.isSeriesMode = chart.selectionMode === 'Series';\n this.blurEffect(chart.element.id, chart.visibleSeries);\n }\n };\n Selection.prototype.getSeriesElements = function (series) {\n var seriesElements = [series.seriesElement];\n if (series.marker.visible && series.type !== 'Scatter' && series.type !== 'Bubble' && !series.isRectSeries) {\n seriesElements.push(series.symbolElement);\n }\n return seriesElements;\n };\n Selection.prototype.indexFinder = function (id) {\n var ids = ['NaN', 'NaN'];\n if (id.indexOf('SeriesGroup') > -1) {\n ids = id.split('SeriesGroup');\n ids[0] = ids[1];\n }\n else if (id.indexOf('SymbolGroup') > -1) {\n ids = id.split('SymbolGroup');\n ids[0] = ids[1];\n }\n else if (id.indexOf('_Point_') > -1) {\n ids = id.split('_Series_')[1].split('_Point_');\n }\n else if (id.indexOf('_Series_') > -1) {\n ids[0] = id.split('_Series_')[1];\n }\n return new Index(parseInt(ids[0], 10), parseInt(ids[1], 10));\n };\n /**\n * Drag selection that returns the selected data.\n * @return {void}\n * @private\n */\n Selection.prototype.calculateDragSelectedElements = function (chart, dragRect) {\n this.removeSelectedElements(chart, this.selectedDataIndexes, chart.series);\n var rect = new Rect(dragRect.x, dragRect.y, dragRect.width, dragRect.height);\n var axisOffset = new ChartLocation(chart.chartAxisLayoutPanel.seriesClipRect.x, chart.chartAxisLayoutPanel.seriesClipRect.y);\n this.removeOffset(rect, axisOffset);\n var points;\n var index;\n var selectedPointValues = [];\n var selectedSeriesValues = [];\n this.isSeriesMode = false;\n var symbolLocation;\n var _loop_1 = function (series) {\n if (series.visible) {\n points = series.points;\n selectedPointValues = [];\n var xAxisOffset_1;\n var yAxisOffset_1;\n if ((chart.isTransposed || series.type.indexOf('Bar') !== -1) &&\n !(chart.isTransposed && series.type.indexOf('Bar') !== -1)) {\n xAxisOffset_1 = series.xAxis.rect.y - axisOffset.y;\n yAxisOffset_1 = series.yAxis.rect.x - axisOffset.x;\n }\n else {\n xAxisOffset_1 = series.xAxis.rect.x - axisOffset.x;\n yAxisOffset_1 = series.yAxis.rect.y - axisOffset.y;\n }\n for (var j = 0; j < points.length; j++) {\n var yValue = series.type !== 'RangeArea' ? points[j].yValue :\n points[j].regions[0].y;\n var isCurrentPoint = void 0;\n if (series.type === 'BoxAndWhisker') {\n isCurrentPoint = points[j].regions.some(function (region) {\n return withInBounds(region.x + xAxisOffset_1, region.y + yAxisOffset_1, rect);\n });\n }\n else {\n isCurrentPoint = points[j].symbolLocations.some(function (location) {\n return location && withInBounds(location.x + xAxisOffset_1, location.y + yAxisOffset_1, rect);\n });\n }\n if (isCurrentPoint && series.category !== 'Indicator') {\n index = new Index(series.index, points[j].index);\n this_1.selection(chart, index, this_1.findElements(chart, series, index));\n selectedPointValues.push({ x: points[j].xValue.toString(), y: yValue });\n }\n if (isCurrentPoint && series.type === 'RangeArea') {\n selectedPointValues.push({ x: points[j].xValue.toString(), y: points[j].regions[0].y });\n }\n }\n selectedSeriesValues.push(selectedPointValues);\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n _loop_1(series);\n }\n this.blurEffect(chart.element.id, chart.visibleSeries);\n this.rectPoints = new Rect(dragRect.x, dragRect.y, dragRect.width, dragRect.height);\n this.createCloseButton((dragRect.x + dragRect.width), dragRect.y);\n var args = {\n name: dragComplete,\n selectedDataValues: selectedSeriesValues,\n cancel: false\n };\n chart.trigger(dragComplete, args);\n };\n Selection.prototype.removeOffset = function (rect, clip) {\n rect.x -= clip.x;\n rect.y -= clip.y;\n };\n /**\n * Method to draw dragging rect.\n * @return {void}\n * @private\n */\n Selection.prototype.drawDraggingRect = function (chart, dragRect) {\n var cartesianLayout = chart.chartAxisLayoutPanel.seriesClipRect;\n switch (chart.selectionMode) {\n case 'DragX':\n dragRect.y = cartesianLayout.y;\n dragRect.height = cartesianLayout.height;\n break;\n case 'DragY':\n dragRect.x = cartesianLayout.x;\n dragRect.width = cartesianLayout.width;\n break;\n }\n if (dragRect.width < 5 || dragRect.height < 5) {\n return null;\n }\n var element = getElement(this.draggedRect);\n if (this.closeIcon) {\n removeElement(this.closeIconId);\n }\n if (element) {\n this.setAttributes(element, dragRect);\n }\n else {\n var dragGroup = chart.renderer.createGroup({ id: this.draggedRectGroup });\n chart.svgObject.appendChild(dragGroup);\n element = chart.renderer.drawRectangle(new RectOption(this.draggedRect, chart.themeStyle.selectionRectFill, { color: chart.themeStyle.selectionRectStroke, width: 1 }, 1, dragRect));\n element.setAttribute('style', 'cursor:move;');\n dragGroup.appendChild(element);\n }\n };\n Selection.prototype.createCloseButton = function (x, y) {\n var closeIcon = this.chart.renderer.createGroup({\n id: this.closeIconId,\n style: 'cursor:pointer; visibility: visible;'\n });\n closeIcon.appendChild(this.chart.renderer.drawCircle(new CircleOption(this.closeIconId + '_circle', '#FFFFFF', { color: this.chart.themeStyle.selectionCircleStroke, width: 1 }, 1, x, y, 10)));\n var direction = 'M ' + (x - 4) + ' ' + (y - 4) + ' L ' + (x + 4) + ' ' + (y + 4) + ' M ' + (x - 4) + ' ' + (y + 4) +\n ' L ' + (x + 4) + ' ' + (y - 4);\n closeIcon.appendChild(this.chart.renderer.drawPath({\n id: this.closeIconId + '_cross', d: direction,\n stroke: this.chart.themeStyle.selectionCircleStroke,\n 'stroke-width': 2, fill: this.chart.themeStyle.selectionCircleStroke\n }));\n this.closeIcon = closeIcon;\n getElement(this.draggedRectGroup).appendChild(closeIcon);\n };\n /**\n * Method to remove dragged element.\n * @return {void}\n * @private\n */\n Selection.prototype.removeDraggedElements = function (chart, event) {\n if ((event.target.id.indexOf(this.closeIconId) > -1) && (event.type.indexOf('move') === -1)) {\n this.removeSelectedElements(chart, this.selectedDataIndexes, chart.series);\n this.blurEffect(chart.element.id, chart.visibleSeries);\n remove(getElement(this.draggedRectGroup));\n this.changeCursorStyle(false, chart.svgObject, 'auto');\n this.rectPoints = null;\n }\n };\n /**\n * Method to resize the drag rect.\n * @return {void}\n * @private\n */\n Selection.prototype.resizingSelectionRect = function (chart, location, tapped) {\n var rect = new Rect(this.rectPoints.x, this.rectPoints.y, this.rectPoints.width, this.rectPoints.height);\n var resize = this.findResizeMode(chart.svgObject, rect, location);\n if (this.resizing) {\n rect = getDraggedRectLocation(rect.x, rect.y, (rect.x + rect.width), (rect.y + rect.height), chart.chartAxisLayoutPanel.seriesClipRect);\n this.drawDraggingRect(chart, rect);\n this.dragRect = rect;\n }\n if (tapped) {\n this.resizing = resize;\n }\n };\n Selection.prototype.findResizeMode = function (chartSvgObject, rect, location) {\n var cursorStyle = 'se-resize';\n var resize = false;\n if (!this.resizing) {\n var resizeEdges = [new Rect(rect.x, (rect.y - 10), rect.width - 5, 20),\n new Rect((rect.x - 10), rect.y, 20, rect.height),\n new Rect(rect.x, (rect.y + rect.height - 10), rect.width - 10, 20),\n new Rect((rect.x + rect.width - 10), rect.y + 5, 20, rect.height - 15),\n new Rect((rect.x + rect.width - 10), (rect.y + rect.height - 10), 20, 20)]; //corner\n for (var i = 0; i < resizeEdges.length; i++) {\n if (withInBounds(location.x, location.y, resizeEdges[i])) {\n cursorStyle = (i === 4) ? cursorStyle : (i % 2 === 0) ? 'ns-resize' : 'ew-resize';\n resize = true;\n this.resizeMode = i;\n break;\n }\n }\n }\n else {\n var x = rect.x;\n var y = rect.y;\n var width = (location.x - x);\n var height = (location.y - y);\n switch (this.resizeMode) {\n case 0:\n height = Math.abs((rect.height + rect.y) - location.y);\n rect.y = Math.min((rect.height + rect.y), location.y);\n rect.height = height;\n break;\n case 1:\n width = Math.abs((rect.width + rect.x) - location.x);\n rect.x = Math.min((rect.width + rect.x), location.x);\n rect.width = width;\n break;\n case 2:\n rect.height = Math.abs(height);\n rect.y = Math.min(location.y, y);\n break;\n case 3:\n rect.width = Math.abs(width);\n rect.x = Math.min(location.x, x);\n break;\n case 4:\n rect.width = Math.abs(width);\n rect.height = Math.abs(height);\n rect.x = Math.min(location.x, x);\n rect.y = Math.min(location.y, y);\n break;\n }\n }\n this.changeCursorStyle(resize, getElement(this.draggedRect), cursorStyle);\n this.changeCursorStyle(resize, chartSvgObject, cursorStyle);\n return resize;\n };\n Selection.prototype.changeCursorStyle = function (isResize, rectelement, cursorStyle) {\n cursorStyle = isResize ? cursorStyle : (this.control.svgObject === rectelement) ? 'auto' : 'move';\n rectelement.setAttribute('style', 'cursor:' + cursorStyle + ';');\n };\n Selection.prototype.removeSelectedElements = function (chart, index, seriesCollection) {\n index.splice(0, index.length);\n var seriesElements;\n for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {\n var series = seriesCollection_1[_i];\n seriesElements = this.getSeriesElements(series);\n this.removeStyles(seriesElements);\n for (var _a = 0, seriesElements_2 = seriesElements; _a < seriesElements_2.length; _a++) {\n var seriesElement = seriesElements_2[_a];\n this.removeStyles(this.getChildren(seriesElement));\n }\n }\n };\n Selection.prototype.setAttributes = function (ele, object) {\n var keys = Object.keys(object);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n ele.setAttribute(key, object[key]);\n }\n };\n /**\n * Method to move the dragged rect.\n * @return {void}\n * @private\n */\n Selection.prototype.draggedRectMoved = function (chart, grabbedPoint, doDrawing) {\n var rect = new Rect(this.rectPoints.x, this.rectPoints.y, this.rectPoints.width, this.rectPoints.height);\n rect.x -= (grabbedPoint.x - chart.mouseX);\n rect.y -= (grabbedPoint.y - chart.mouseY);\n rect = getDraggedRectLocation(rect.x, rect.y, rect.x + rect.width, rect.height + rect.y, chart.chartAxisLayoutPanel.seriesClipRect);\n if (doDrawing) {\n this.drawDraggingRect(chart, rect);\n }\n else {\n this.calculateDragSelectedElements(chart, rect);\n }\n };\n /**\n * To complete the selection.\n * @return {void}\n * @private\n */\n Selection.prototype.completeSelection = function (e) {\n var chart = this.chart;\n if (chart.selectionMode === 'None') {\n return;\n }\n if ((this.dragging || this.resizing) && this.dragRect.width > 5 && this.dragRect.height > 5) {\n this.calculateDragSelectedElements(chart, this.dragRect);\n }\n else if (this.rectGrabbing && this.rectPoints.width && this.rectPoints.height) {\n this.draggedRectMoved(chart, this.dragRect);\n }\n this.dragging = false;\n this.rectGrabbing = false;\n this.resizing = false;\n this.removeDraggedElements(chart, e);\n };\n Selection.prototype.getDragRect = function (chart, seriesClipRect) {\n return getDraggedRectLocation(chart.mouseDownX, chart.mouseDownY, chart.mouseX, chart.mouseY, seriesClipRect);\n };\n /** @private */\n Selection.prototype.dragStart = function (chart, seriesClipRect, mouseDownX, mouseDownY, event) {\n this.dragging = (chart.selectionMode.indexOf('Drag') > -1) && (chart.isDoubleTap || !chart.isTouch) &&\n chart.chartAreaType !== 'PolarRadar';\n if (this.dragging) {\n this.dragRect = new Rect(chart.mouseDownX, chart.mouseDownY, 0, 0);\n if (chart.mouseDownX < seriesClipRect.x || chart.mouseDownX > (seriesClipRect.x + seriesClipRect.width) ||\n chart.mouseDownY < seriesClipRect.y || chart.mouseDownY > (seriesClipRect.y + seriesClipRect.height)) {\n this.dragging = false;\n }\n }\n if (this.rectPoints) {\n this.dragRect = new Rect(chart.mouseDownX, chart.mouseDownY, 0, 0);\n this.resizingSelectionRect(chart, new ChartLocation(mouseDownX, mouseDownY), true);\n this.rectGrabbing = withInBounds(mouseDownX, mouseDownY, this.rectPoints);\n }\n };\n /** @private */\n Selection.prototype.mouseMove = function (event) {\n var chart = this.chart;\n if (chart.selectionMode === 'None') {\n return;\n }\n if (event.type === 'touchmove' && (Browser.isIos || Browser.isIos7) && this.dragging && event.preventDefault) {\n event.preventDefault();\n }\n var insideMoving = withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect);\n if (insideMoving) {\n if (this.rectGrabbing && !this.resizing) {\n this.draggedRectMoved(chart, this.dragRect, true);\n }\n else if (this.dragging && !this.resizing) {\n this.dragRect = this.getDragRect(chart, chart.chartAxisLayoutPanel.seriesClipRect);\n this.drawDraggingRect(chart, this.dragRect);\n }\n if (this.rectPoints) {\n this.resizingSelectionRect(chart, new ChartLocation(chart.mouseX, chart.mouseY));\n }\n }\n else {\n this.completeSelection(event);\n }\n };\n /**\n * Get module name.\n * @private\n */\n Selection.prototype.getModuleName = function () {\n return 'Selection';\n };\n /**\n * To destroy the selection.\n * @return {void}\n * @private\n */\n Selection.prototype.destroy = function (chart) {\n this.removeEventListener();\n // Destroy method performed here\n };\n return Selection;\n}(BaseSelection));\nexport { Selection };\n","import { ChartLocation, Rect, TextOption, RectOption, isCollide, markerAnimate } from '../../common/utils/helper';\nimport { getLabelText, measureText, convertHexToColor, calculateRect, textElement, colorNameToHex } from '../../common/utils/helper';\nimport { textRender } from '../../common/model/constants';\nimport { createTemplate, getFontStyle, getElement, measureElementRect, templateAnimate, withIn } from '../../common/utils/helper';\nimport { createElement } from '@syncfusion/ej2-base';\nimport { getPoint } from '../../common/utils/helper';\n/**\n * `DataLabel` module is used to render data label for the data point.\n */\nvar DataLabel = /** @class */ (function () {\n /**\n * Constructor for the data label module.\n * @private\n */\n function DataLabel(chart) {\n this.errorHeight = 0;\n this.chart = chart;\n }\n DataLabel.prototype.initPrivateVariables = function (series, marker) {\n var transform;\n var render = series.chart.renderer;\n transform = series.chart.chartAreaType === 'Cartesian' ? 'translate(' + series.clipRect.x + ',' + (series.clipRect.y) + ')' : '';\n if (marker.dataLabel.visible) {\n series.shapeElement = render.createGroup({\n 'id': this.chart.element.id + 'ShapeGroup' + series.index,\n 'transform': transform,\n 'clip-path': 'url(#' + this.chart.element.id + '_ChartSeriesClipRect_' + series.index + ')'\n });\n series.textElement = render.createGroup({\n 'id': this.chart.element.id + 'TextGroup' + series.index,\n 'transform': transform,\n 'clip-path': 'url(#' + this.chart.element.id + '_ChartSeriesClipRect_' + series.index + ')'\n });\n }\n this.markerHeight = ((series.type === 'Scatter' || marker.visible) && !this.isRectSeries(series)) ? (marker.height / 2) : 0;\n this.commonId = this.chart.element.id + '_Series_' + series.index + '_Point_';\n this.calculateErrorHeight(series, series.marker.dataLabel.position);\n this.chartBackground = this.chart.chartArea.background === 'trasparent' ?\n this.chart.background || this.chart.themeStyle.background : this.chart.chartArea.background;\n };\n DataLabel.prototype.calculateErrorHeight = function (series, position) {\n if (!series.errorBar.visible) {\n return null;\n }\n else if (series.errorBar.visible && this.chart.chartAreaType !== 'PolarRadar') {\n var direction = series.errorBar.direction;\n var positiveHeight = this.chart.errorBarModule.positiveHeight;\n var negativeHeight = this.chart.errorBarModule.negativeHeight;\n if (this.isRectSeries(series)) {\n if (position === 'Top' || position === 'Auto') {\n if (direction === 'Both' || direction === 'Minus') {\n this.errorHeight = negativeHeight;\n }\n else {\n this.errorHeight = 0;\n }\n }\n if (position === 'Outer' || position === 'Auto') {\n if (direction === 'Both' || direction === 'Plus') {\n this.errorHeight = positiveHeight;\n }\n else {\n this.errorHeight = 0;\n }\n }\n }\n else {\n if (position === 'Top' || position === 'Outer' || position === 'Auto') {\n if ((direction === 'Both' || direction === 'Plus') && (!series.chart.isTransposed)) {\n this.errorHeight = positiveHeight;\n }\n else {\n this.errorHeight = 0;\n }\n }\n if (position === 'Bottom' || position === 'Auto') {\n if (direction === 'Both' || direction === 'Minus') {\n this.errorHeight = negativeHeight;\n }\n else {\n this.errorHeight = 0;\n }\n }\n }\n }\n else {\n this.errorHeight = 0;\n }\n };\n DataLabel.prototype.isRectSeries = function (series) {\n return series.isRectSeries || series.type === 'RangeArea';\n };\n /**\n * Render the data label for series.\n * @return {void}\n */\n DataLabel.prototype.render = function (series, chart, dataLabel) {\n var _this = this;\n // initialize the private variable\n this.initPrivateVariables(series, series.marker);\n var rect;\n var rgbValue;\n var contrast;\n var argsData;\n var border;\n var textSize;\n this.inverted = chart.requireInvertedAxis;\n this.yAxisInversed = series.yAxis.isInversed;\n var element = createElement('div', {\n id: chart.element.id + '_Series_' + series.index + '_DataLabelCollections'\n });\n // Data label point iteration started\n series.points.map(function (point, index) {\n _this.margin = dataLabel.margin;\n var labelText = [];\n var labelLength;\n var clip = series.clipRect;\n border = { width: dataLabel.border.width, color: dataLabel.border.color };\n if ((point.symbolLocations.length && point.symbolLocations[0]) ||\n (series.type === 'BoxAndWhisker' && point.regions.length)) {\n labelText = getLabelText(point, series, chart);\n labelLength = labelText.length;\n for (var i = 0; i < labelLength; i++) {\n argsData = {\n cancel: false, name: textRender, series: series,\n point: point, text: labelText[i], border: border,\n color: dataLabel.fill, template: dataLabel.template\n };\n chart.trigger(textRender, argsData);\n if (!argsData.cancel) {\n _this.fontBackground = argsData.color;\n _this.isDataLabelShape(argsData);\n _this.markerHeight = series.type === 'Bubble' ? (point.regions[0].height / 2) : _this.markerHeight;\n if (argsData.template !== null) {\n _this.createDataLabelTemplate(element, series, dataLabel, point, argsData, i);\n }\n else {\n textSize = measureText(argsData.text, dataLabel.font);\n rect = _this.calculateTextPosition(point, series, textSize, dataLabel, i);\n if (!isCollide(rect, chart.dataLabelCollections, clip)) {\n chart.dataLabelCollections.push(new Rect(rect.x + clip.x, rect.y + clip.y, rect.width, rect.height));\n if (_this.isShape) {\n series.shapeElement.appendChild(chart.renderer.drawRectangle(new RectOption(_this.commonId + index + '_TextShape_' + i, argsData.color, argsData.border, dataLabel.opacity, rect, dataLabel.rx, dataLabel.ry)));\n }\n // Checking the font color\n rgbValue = convertHexToColor(colorNameToHex(_this.fontBackground));\n contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);\n textElement(new TextOption(_this.commonId + index + '_Text_' + i, rect.x + _this.margin.left + textSize.width / 2, rect.y + _this.margin.top + textSize.height * 3 / 4, 'middle', argsData.text, 'rotate(0,' + (rect.x) + ',' + (rect.y) + ')', 'auto'), dataLabel.font, dataLabel.font.color ||\n ((contrast >= 128 || series.type === 'Hilo') ? 'black' : 'white'), series.textElement);\n }\n }\n }\n }\n }\n });\n if (element.childElementCount) {\n getElement(chart.element.id + '_Secondary_Element').appendChild(element);\n }\n };\n /**\n * Render the data label template.\n * @return {void}\n * @private\n */\n DataLabel.prototype.createDataLabelTemplate = function (parentElement, series, dataLabel, point, data, labelIndex) {\n this.margin = { left: 0, right: 0, bottom: 0, top: 0 };\n var clip = series.clipRect;\n var childElement = createTemplate(createElement('div', {\n id: this.chart.element.id + '_Series_' + series.index + '_DataLabel_'\n + point.index + (labelIndex ? ('_' + labelIndex) : ''),\n styles: 'position: absolute;background-color:' + data.color + ';' +\n getFontStyle(dataLabel.font) + ';border:' + data.border.width + 'px solid ' + data.border.color + ';'\n }), point.index, data.template, this.chart, point, series);\n var elementRect = measureElementRect(childElement);\n var rect = this.calculateTextPosition(point, series, { width: elementRect.width, height: elementRect.height }, dataLabel, labelIndex);\n childElement.style.left = ((this.chart.chartAreaType === 'PolarRadar' ? 0 : series.clipRect.x) + rect.x) + 'px';\n childElement.style.top = ((this.chart.chartAreaType === 'PolarRadar' ? 0 : series.clipRect.y) + rect.y) + 'px';\n var rgbValue = convertHexToColor(colorNameToHex(this.fontBackground));\n var vAxis = series.chart.requireInvertedAxis ? series.xAxis : series.yAxis;\n var hAxis = series.chart.requireInvertedAxis ? series.yAxis : series.xAxis;\n childElement.style.color = dataLabel.font.color ||\n ((Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000)) >= 128 ? 'black' : 'white');\n if (childElement.childElementCount && !isCollide(rect, this.chart.dataLabelCollections, clip)\n && (series.seriesType !== 'XY' || point.yValue === undefined || withIn(point.yValue, series.yAxis.visibleRange) ||\n (series.type.indexOf('100') > -1 && withIn(series.stackedValues.endValues[point.index], series.yAxis.visibleRange)))\n && withIn(point.xValue, series.xAxis.visibleRange) && parseFloat(childElement.style.top) >= vAxis.rect.y &&\n parseFloat(childElement.style.left) >= hAxis.rect.x && parseFloat(childElement.style.top) <= vAxis.rect.y + vAxis.rect.height &&\n parseFloat(childElement.style.left) <= hAxis.rect.x + hAxis.rect.width) {\n this.chart.dataLabelCollections.push(new Rect(rect.x + clip.x, rect.y + clip.y, rect.width, rect.height));\n parentElement.appendChild(childElement);\n if (series.animation.enable && this.chart.animateSeries) {\n this.doDataLabelAnimation(series, childElement);\n }\n }\n };\n DataLabel.prototype.calculateTextPosition = function (point, series, textSize, dataLabel, labelIndex) {\n var labelRegion = labelIndex > 1 ? (series.type === 'Candle') ? point.regions[1] : point.regions[0] : point.regions[0];\n if (labelIndex > 1 && series.type === 'HiloOpenClose') {\n labelRegion = (labelIndex === 2) ? point.regions[1] : point.regions[2];\n }\n var location;\n location = this.getLabelLocation(point, series, textSize, labelIndex);\n var padding = 5;\n var clipRect = series.clipRect;\n var rect;\n // calculating alignment\n if (!this.chart.requireInvertedAxis || !this.isRectSeries(series) || series.type === 'BoxAndWhisker') {\n this.locationX = location.x;\n var alignmentValue = textSize.height + (this.borderWidth * 2) + this.markerHeight +\n this.margin.bottom + this.margin.top + padding;\n location.y = (dataLabel.position === 'Auto') ? location.y :\n this.calculateAlignment(alignmentValue, location.y, dataLabel.alignment, this.isRectSeries(series) ? point.yValue < 0 : false);\n // calculating position\n location.y = (!this.isRectSeries(series) || series.type === 'BoxAndWhisker') ?\n this.calculatePathPosition(location.y, dataLabel.position, series, point, textSize, labelIndex) :\n this.calculateRectPosition(location.y, labelRegion, point.yValue < 0 !== this.yAxisInversed, dataLabel.position, series, textSize, labelIndex, point);\n if (this.isRectSeries(series) && this.chart.chartAreaType === 'PolarRadar') {\n location = this.calculatePolarRectPosition(location, dataLabel.position, series, point, textSize, labelIndex);\n }\n }\n else {\n this.locationY = location.y;\n var alignmentValue = textSize.width + this.borderWidth + this.margin.left + this.margin.right - padding;\n location.x = dataLabel.position === 'Auto' ? location.x :\n this.calculateAlignment(alignmentValue, location.x, dataLabel.alignment, point.yValue < 0);\n location.x = this.calculateRectPosition(location.x, labelRegion, point.yValue < 0 !== this.yAxisInversed, dataLabel.position, series, textSize, labelIndex, point);\n }\n rect = calculateRect(location, textSize, this.margin);\n // Checking the condition whether data Label has been exist the clip rect\n if (!((rect.y > clipRect.height) || (rect.x > clipRect.width) ||\n (rect.x + rect.width < 0) || (rect.y + rect.height < 0))) {\n rect.x = rect.x < 0 ? padding : rect.x;\n rect.y = rect.y < 0 ? padding : rect.y;\n rect.x -= (rect.x + rect.width) > clipRect.width ? (rect.x + rect.width) - clipRect.width + padding : 0;\n rect.y -= (rect.y + rect.height) > clipRect.height ? (rect.y + rect.height) - clipRect.height + padding : 0;\n this.fontBackground = this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground;\n }\n return rect;\n };\n // Calculation label location for polar column draw types\n DataLabel.prototype.calculatePolarRectPosition = function (location, position, series, point, size, labelIndex) {\n var padding = 5;\n var columnRadius;\n var angle = (point.regionData.startAngle - 0.5 * Math.PI) + (point.regionData.endAngle - point.regionData.startAngle) / 2;\n if (labelIndex === 0) {\n columnRadius = point.regionData.radius < point.regionData.innerRadius ? point.regionData.innerRadius\n : point.regionData.radius;\n }\n else {\n columnRadius = point.regionData.radius > point.regionData.innerRadius ? point.regionData.innerRadius\n : point.regionData.radius;\n }\n this.fontBackground = this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground;\n if (series.drawType.indexOf('Stacking') > -1) {\n position = position === 'Outer' ? 'Top' : position;\n }\n else if (series.drawType.indexOf('Range') > -1) {\n position = (position === 'Outer' || position === 'Top') ? position : 'Auto';\n }\n if (position === 'Outer') {\n columnRadius = labelIndex === 0 ? columnRadius + 2 * padding : columnRadius - 2 * padding;\n }\n else if (position === 'Middle') {\n columnRadius = columnRadius / 2 + padding;\n }\n else if (position === 'Top') {\n columnRadius = labelIndex === 0 ? columnRadius - 2 * padding : columnRadius + 2 * padding;\n }\n else if (position === 'Bottom') {\n columnRadius = padding;\n }\n else {\n if (labelIndex === 0) {\n columnRadius = columnRadius >= series.chart.radius ? columnRadius - padding :\n series.drawType === 'StackingColumn' ? columnRadius - 2 * padding : columnRadius + 2 * padding;\n }\n else {\n columnRadius = columnRadius >= series.chart.radius ? columnRadius + padding : columnRadius - 2 * padding;\n }\n }\n location.x = series.clipRect.width / 2 + series.clipRect.x + columnRadius * Math.cos(angle);\n location.y = series.clipRect.height / 2 + series.clipRect.y + columnRadius * Math.sin(angle);\n return location;\n };\n /**\n * Get the label location\n */\n DataLabel.prototype.getLabelLocation = function (point, series, textSize, labelIndex) {\n var location = new ChartLocation(0, 0);\n var labelRegion = (series.type === 'Candle' && labelIndex > 1) ? point.regions[1] : point.regions[0];\n if (series.type === 'HiloOpenClose') {\n labelRegion = (labelIndex === 2) ? point.regions[1] : point.regions[2];\n }\n var xAxis = series.xAxis;\n var yAxis = series.yAxis;\n var isInverted = series.chart.requireInvertedAxis;\n if (series.type === 'BoxAndWhisker') {\n this.markerHeight = 0;\n switch (labelIndex) {\n case 0:\n location = getPoint(point.xValue, point.median, xAxis, yAxis, isInverted);\n break;\n case 1:\n location = getPoint(point.xValue, point.maximum, xAxis, yAxis, isInverted);\n break;\n case 2:\n location = getPoint(point.xValue, point.minimum, xAxis, yAxis, isInverted);\n break;\n case 3:\n location = getPoint(point.xValue, point.upperQuartile, xAxis, yAxis, isInverted);\n break;\n case 4:\n location = getPoint(point.xValue, point.lowerQuartile, xAxis, yAxis, isInverted);\n break;\n default: {\n location = getPoint(point.xValue, point.outliers[labelIndex - 5], xAxis, yAxis, isInverted);\n this.markerHeight = series.marker.height / 2;\n break;\n }\n }\n }\n else if (labelIndex === 0 || labelIndex === 1) {\n location = new ChartLocation(point.symbolLocations[0].x, point.symbolLocations[0].y);\n }\n else if ((labelIndex === 2 || labelIndex === 3) && series.type === 'Candle') {\n location = new ChartLocation(point.symbolLocations[1].x, point.symbolLocations[1].y);\n }\n else if (isInverted) {\n location = { x: labelRegion.x + (labelRegion.width) / 2, y: labelRegion.y };\n }\n else {\n location = { x: labelRegion.x + labelRegion.width, y: labelRegion.y + (labelRegion.height) / 2 };\n }\n //Aligning the label at the beginning of the tick, when tick size is less than text size\n if (labelIndex > 1 && series.type === 'HiloOpenClose') {\n if (series.chart.requireInvertedAxis) {\n var height = labelRegion.height;\n location.y = labelRegion.y + height / 2 + 2 * (labelIndex === 2 ? 1 : -1);\n }\n else {\n var width = labelRegion.width;\n location.x = labelRegion.x + width / 2 + 2 * (labelIndex === 2 ? 1 : -1);\n }\n }\n return location;\n };\n DataLabel.prototype.calculateRectPosition = function (labelLocation, rect, isMinus, position, series, textSize, labelIndex, point) {\n if (series.chart.chartAreaType === 'PolarRadar') {\n return null;\n }\n var padding = 5;\n var margin = this.margin;\n var textLength = !this.inverted ? textSize.height : textSize.width;\n var extraSpace = this.borderWidth + textLength / 2 + padding;\n if (series.type.indexOf('Stacking') > -1) {\n position = position === 'Outer' ? 'Top' : position;\n }\n else if (series.type.indexOf('Range') > -1) {\n position = (position === 'Outer' || position === 'Top') ? position : 'Auto';\n }\n else if (series.type === 'Waterfall') {\n position = position === 'Auto' ? 'Middle' : position;\n }\n switch (position) {\n case 'Bottom':\n labelLocation = !this.inverted ?\n isMinus ? (labelLocation - rect.height + extraSpace + margin.top) :\n (labelLocation + rect.height - extraSpace - margin.bottom) :\n isMinus ? (labelLocation + rect.width - extraSpace - margin.left) :\n (labelLocation - rect.width + extraSpace + margin.right);\n break;\n case 'Middle':\n labelLocation = labelLocation = !this.inverted ?\n (isMinus ? labelLocation - (rect.height / 2) : labelLocation + (rect.height / 2)) :\n (isMinus ? labelLocation + (rect.width / 2) : labelLocation - (rect.width / 2));\n break;\n case 'Auto':\n labelLocation = this.calculateRectActualPosition(labelLocation, rect, isMinus, series, textSize, labelIndex, point);\n break;\n default:\n extraSpace += this.errorHeight;\n labelLocation = this.calculateTopAndOuterPosition(labelLocation, rect, position, series, labelIndex, extraSpace, isMinus);\n break;\n }\n var check = !this.inverted ? (labelLocation < rect.y || labelLocation > rect.y + rect.height) :\n (labelLocation < rect.x || labelLocation > rect.x + rect.width);\n this.fontBackground = check ?\n (this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground)\n : this.fontBackground === 'transparent' ? (point.color || series.interior) : this.fontBackground;\n return labelLocation;\n };\n DataLabel.prototype.calculatePathPosition = function (labelLocation, position, series, point, size, labelIndex) {\n var padding = 5;\n if ((series.type.indexOf('Area') > -1 && series.type !== 'RangeArea')\n && this.yAxisInversed && series.marker.dataLabel.position !== 'Auto') {\n position = position === 'Top' ? 'Bottom' : position === 'Bottom' ? 'Top' : position;\n }\n this.fontBackground = this.fontBackground === 'transparent' ? this.chartBackground : this.fontBackground;\n switch (position) {\n case 'Top':\n case 'Outer':\n labelLocation = labelLocation - this.markerHeight - this.borderWidth - size.height / 2 - this.margin.bottom - padding -\n this.errorHeight;\n break;\n case 'Bottom':\n labelLocation = labelLocation + this.markerHeight + this.borderWidth + size.height / 2 + this.margin.top + padding +\n this.errorHeight;\n break;\n case 'Auto':\n labelLocation = this.calculatePathActualPosition(labelLocation, this.markerHeight, series, point, size, labelIndex);\n break;\n }\n return labelLocation;\n };\n DataLabel.prototype.isDataLabelShape = function (style) {\n this.isShape = (style.color !== 'transparent' || style.border.width > 0);\n this.borderWidth = style.border.width;\n if (!this.isShape) {\n this.margin = { left: 0, right: 0, bottom: 0, top: 0 };\n }\n };\n DataLabel.prototype.calculateRectActualPosition = function (labelLocation, rect, isMinus, series, size, labelIndex, point) {\n var location;\n var labelRect;\n var isOverLap = true;\n var position = 0;\n var collection = this.chart.dataLabelCollections;\n var finalPosition = series.type.indexOf('Range') !== -1 || series.type === 'Hilo' ? 2 : 4;\n while (isOverLap && position < finalPosition) {\n location = this.calculateRectPosition(labelLocation, rect, isMinus, this.getPosition(position), series, size, labelIndex, point);\n if (!this.inverted) {\n labelRect = calculateRect(new ChartLocation(this.locationX, location), size, this.margin);\n isOverLap = labelRect.y < 0 || isCollide(labelRect, collection, series.clipRect) || labelRect.y > series.clipRect.height;\n }\n else {\n labelRect = calculateRect(new ChartLocation(location, this.locationY), size, this.margin);\n isOverLap = labelRect.x < 0 || isCollide(labelRect, collection, series.clipRect) ||\n labelRect.x + labelRect.width > series.clipRect.width;\n }\n position++;\n }\n return location;\n };\n // alignment calculation assigned here\n DataLabel.prototype.calculateAlignment = function (value, labelLocation, alignment, isMinus) {\n switch (alignment) {\n case 'Far':\n labelLocation = !this.inverted ? (isMinus ? labelLocation + value : labelLocation - value) :\n (isMinus ? labelLocation - value : labelLocation + value);\n break;\n case 'Near':\n labelLocation = !this.inverted ? (isMinus ? labelLocation - value : labelLocation + value) :\n (isMinus ? labelLocation + value : labelLocation - value);\n break;\n case 'Center':\n labelLocation = labelLocation;\n break;\n }\n return labelLocation;\n };\n //calculation for top and outer position of datalabel for rect series\n DataLabel.prototype.calculateTopAndOuterPosition = function (location, rect, position, series, index, extraSpace, isMinus) {\n var margin = this.margin;\n var top;\n switch (series.type) {\n case 'RangeColumn':\n case 'RangeArea':\n case 'Hilo':\n top = (index === 0 && !this.yAxisInversed) || (index === 1 && this.yAxisInversed);\n location = this.updateLabelLocation(position, location, extraSpace, margin, rect, top);\n break;\n case 'Candle':\n top = (index === 0 || index === 2) && !this.yAxisInversed\n || (index === 1 || index === 3) && this.yAxisInversed;\n location = this.updateLabelLocation(position, location, extraSpace, margin, rect, top, index > 1);\n break;\n case 'HiloOpenClose':\n if (index <= 1) {\n top = (index === 0 && !this.yAxisInversed) || (index === 1 && this.yAxisInversed);\n location = this.updateLabelLocation(position, location, extraSpace, margin, rect, top);\n }\n else {\n if (this.yAxisInversed) {\n location = !this.inverted ? location + extraSpace + margin.top : location - extraSpace - margin.right;\n }\n else {\n location = !this.inverted ? location - extraSpace - margin.bottom : location + extraSpace + margin.left;\n }\n }\n break;\n default:\n if ((isMinus && position === 'Top') || (!isMinus && position === 'Outer')) {\n location = !this.inverted ? location - extraSpace - margin.bottom : location + extraSpace + margin.left;\n }\n else {\n location = !this.inverted ? location + extraSpace + margin.top : location - extraSpace - margin.right;\n }\n break;\n }\n return location;\n };\n /**\n * Updates the label location\n */\n DataLabel.prototype.updateLabelLocation = function (position, location, extraSpace, margin, rect, top, inside) {\n if (inside === void 0) { inside = false; }\n if (!this.inverted) {\n if (top) {\n location = (position === 'Outer' && !inside) ? location - extraSpace - margin.bottom : location + extraSpace + margin.top;\n }\n else {\n location = (position === 'Outer' && !inside) ? location + rect.height + extraSpace + margin.top :\n location + rect.height - extraSpace - margin.bottom;\n }\n }\n else {\n if (top) {\n location = (position === 'Outer' && !inside) ? location + extraSpace + margin.left : location - extraSpace - margin.right;\n }\n else {\n location = (position === 'Outer' && !inside) ? location - rect.width - extraSpace - margin.right :\n location - rect.width + extraSpace + margin.left;\n }\n }\n return location;\n };\n DataLabel.prototype.calculatePathActualPosition = function (y, markerSize, series, point, size, labelIndex) {\n var points = series.points;\n var index = point.index;\n var yValue = points[index].yValue;\n var position;\n var nextPoint = points.length - 1 > index ? points[index + 1] : null;\n var previousPoint = index > 0 ? points[index - 1] : null;\n var yLocation;\n var isOverLap = true;\n var labelRect;\n var isBottom;\n var positionIndex;\n var collection = this.chart.dataLabelCollections;\n if (series.type === 'Bubble') {\n position = 'Top';\n }\n else if (series.type.indexOf('Step') > -1) {\n position = 'Top';\n if (index) {\n position = (!previousPoint || !previousPoint.visible || (yValue > previousPoint.yValue !== this.yAxisInversed)\n || yValue === previousPoint.yValue) ? 'Top' : 'Bottom';\n }\n }\n else if (series.type === 'BoxAndWhisker') {\n if (labelIndex === 1 || labelIndex === 3 || labelIndex > 4) {\n position = series.yAxis.isInversed ? 'Bottom' : 'Top';\n }\n else if (labelIndex === 2 || labelIndex === 4) {\n position = series.yAxis.isInversed ? 'Top' : 'Bottom';\n }\n else {\n isOverLap = false;\n position = 'Middle';\n yLocation = this.calculatePathPosition(y, position, series, point, size, labelIndex);\n }\n }\n else {\n if (index === 0) {\n position = (!nextPoint || !nextPoint.visible || yValue > nextPoint.yValue ||\n (yValue < nextPoint.yValue && this.yAxisInversed)) ? 'Top' : 'Bottom';\n }\n else if (index === points.length - 1) {\n position = (!previousPoint || !previousPoint.visible || yValue > previousPoint.yValue ||\n (yValue < previousPoint.yValue && this.yAxisInversed)) ? 'Top' : 'Bottom';\n }\n else {\n if (!nextPoint.visible && !(previousPoint && previousPoint.visible)) {\n position = 'Top';\n }\n else if (!nextPoint.visible || !previousPoint) {\n position = (nextPoint.yValue > yValue || (previousPoint && previousPoint.yValue > yValue)) ?\n 'Bottom' : 'Top';\n }\n else {\n var slope = (nextPoint.yValue - previousPoint.yValue) / 2;\n var intersectY = (slope * index) + (nextPoint.yValue - (slope * (index + 1)));\n position = !this.yAxisInversed ? intersectY < yValue ? 'Top' : 'Bottom' :\n intersectY < yValue ? 'Bottom' : 'Top';\n }\n }\n }\n isBottom = position === 'Bottom';\n positionIndex = ['Outer', 'Top', 'Bottom', 'Middle', 'Auto'].indexOf(position);\n while (isOverLap && positionIndex < 4) {\n yLocation = this.calculatePathPosition(y, this.getPosition(positionIndex), series, point, size, labelIndex);\n labelRect = calculateRect(new ChartLocation(this.locationX, yLocation), size, this.margin);\n isOverLap = labelRect.y < 0 || isCollide(labelRect, collection, series.clipRect)\n || (labelRect.y + labelRect.height) > series.clipRect.height;\n positionIndex = isBottom ? positionIndex - 1 : positionIndex + 1;\n isBottom = false;\n }\n return yLocation;\n };\n /**\n * Animates the data label.\n * @param {Series} series - Data label of the series gets animated.\n * @return {void}\n */\n DataLabel.prototype.doDataLabelAnimation = function (series, element) {\n var shapeElements = series.shapeElement.childNodes;\n var textNode = series.textElement.childNodes;\n var delay = series.animation.delay + series.animation.duration;\n var location;\n var length = element ? 1 : textNode.length;\n for (var i = 0; i < length; i++) {\n if (element) {\n element.style.visibility = 'hidden';\n templateAnimate(element, delay, 200, 'ZoomIn');\n }\n else {\n location = new ChartLocation((+textNode[i].getAttribute('x')) + ((+textNode[i].getAttribute('width')) / 2), (+textNode[i].getAttribute('y')) + ((+textNode[i].getAttribute('height')) / 2));\n markerAnimate(textNode[i], delay, 200, series, null, location, true);\n if (shapeElements[i]) {\n location = new ChartLocation((+shapeElements[i].getAttribute('x')) + ((+shapeElements[i].getAttribute('width')) / 2), (+shapeElements[i].getAttribute('y')) + ((+shapeElements[i].getAttribute('height')) / 2));\n markerAnimate(shapeElements[i], delay, 200, series, null, location, true);\n }\n }\n }\n };\n DataLabel.prototype.getPosition = function (index) {\n return (['Outer', 'Top', 'Bottom', 'Middle', 'Auto'][index]);\n };\n /**\n * Get module name.\n */\n DataLabel.prototype.getModuleName = function () {\n // Returns the module name\n return 'DataLabel';\n };\n /**\n * To destroy the dataLabel for series.\n * @return {void}\n * @private\n */\n DataLabel.prototype.destroy = function (chart) {\n // Destroy method performed here\n };\n return DataLabel;\n}());\nexport { DataLabel };\n","import { Mean, RectOption } from '../../common/utils/helper';\nimport { getPoint, PathOption, sum, templateAnimate } from '../../common/utils/helper';\n/**\n * `ErrorBar` module is used to render the error bar for series.\n */\nvar ErrorBar = /** @class */ (function () {\n /**\n * Constructor for the error bar module.\n * @private\n */\n function ErrorBar(chart) {\n this.chart = chart;\n }\n /**\n * Render the error bar for series.\n * @return {void}\n */\n ErrorBar.prototype.render = function (series) {\n if (this.chart.chartAreaType === 'PolarRadar') {\n return null;\n }\n this.createElement(series);\n this.renderErrorBar(series);\n };\n ErrorBar.prototype.renderErrorBar = function (series) {\n var seriesIndex = series.index;\n var point;\n var symbolId;\n var capId;\n var errorbar = series.errorBar;\n var errorBarCap = series.errorBar.errorBarCap;\n var border = series.border;\n var start;\n var mid;\n var end;\n var isInverted;\n var isVert;\n var errorDirection = ['', ''];\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point_1 = _a[_i];\n if (point_1.visible && point_1.symbolLocations[0]) {\n var errorX = 0;\n var errorY = 0;\n switch (errorbar.mode) {\n case 'Vertical':\n errorY = errorbar.verticalError;\n break;\n case 'Horizontal':\n errorX = errorbar.horizontalError;\n break;\n case 'Both':\n errorX = errorbar.horizontalError;\n errorY = errorbar.verticalError;\n break;\n }\n errorDirection = this['calculate' + errorbar.type + 'Value'](point_1, series, this.chart.requireInvertedAxis, errorX, errorY);\n symbolId = this.chart.element.id + '_Series_' + '_ErrorBarGroup_' + seriesIndex + '_Point_' + point_1.index;\n capId = this.chart.element.id + '_Series_' + '_ErrorBarCap_' + seriesIndex + '_Point_' + point_1.index;\n var shapeOption = new PathOption(symbolId, '', errorbar.width, errorbar.color || this.chart.themeStyle.errorBar, null, '', errorDirection[0]);\n var path = this.chart.renderer.drawPath(shapeOption);\n series.errorBarElement.appendChild(path);\n var capOption = new PathOption(capId, '', errorBarCap.width, errorBarCap.color || this.chart.themeStyle.errorBar, null, '', errorDirection[1]);\n var capPath = this.chart.renderer.drawPath(capOption);\n series.errorBarElement.appendChild(capPath);\n }\n }\n };\n // path calculation for error bar\n ErrorBar.prototype.findLocation = function (point, series, isInverted, x1, y1) {\n var errorbar = series.errorBar;\n var direction = errorbar.direction;\n var location = [];\n var stackedValue = series.stackedValues;\n var yValue = series.type.indexOf('Stacking') > -1 ? series.stackedValues.endValues[point.index] :\n (series.seriesType === 'HighLow' || series.seriesType === 'HighLowOpenClose') ? (series.points[point.index].high) :\n point.yValue;\n var startPoint = getPoint(point.xValue + ((direction === 'Plus' || direction === 'Both') ? (errorbar.type === 'Custom' &&\n (errorbar.mode === 'Horizontal' || errorbar.mode === 'Both')) ? x1 = errorbar.horizontalPositiveError : x1 : 0), yValue + ((direction === 'Plus' || direction === 'Both') ? (errorbar.type === 'Custom' &&\n (errorbar.mode === 'Vertical' || errorbar.mode === 'Both')) ? y1 = errorbar.verticalPositiveError : y1 : 0), series.xAxis, series.yAxis, isInverted);\n location.push(startPoint);\n if (series.isRectSeries) {\n var midPoint = point.symbolLocations[0];\n location.push(midPoint);\n }\n else {\n var midPoint = getPoint(point.xValue, point.yValue, series.xAxis, series.yAxis, isInverted);\n location.push(midPoint);\n }\n var endPoint = getPoint(point.xValue - ((direction === 'Minus' || direction === 'Both') ? (errorbar.type === 'Custom' &&\n (errorbar.mode === 'Horizontal' || errorbar.mode === 'Both')) ? x1 = errorbar.horizontalNegativeError : x1 : 0), yValue - ((direction === 'Minus' || direction === 'Both') ? (errorbar.type === 'Custom' &&\n (errorbar.mode === 'Vertical' || errorbar.mode === 'Both')) ? y1 = errorbar.verticalNegativeError : y1 : 0), series.xAxis, series.yAxis, isInverted);\n location.push(endPoint);\n // calculate error height for datalabel position alignment\n point.error = (errorbar.mode === 'Vertical') ? errorbar.verticalError : errorbar.horizontalError;\n this.negativeHeight = (errorbar.mode === 'Vertical' || errorbar.mode === 'Both') ? (isInverted ? (location[1].x - location[2].x) :\n (location[2].y - location[1].y)) : 0;\n this.positiveHeight = (errorbar.mode === 'Vertical' || errorbar.mode === 'Both') ? (isInverted ? (location[0].x - location[1].x) :\n (location[1].y - location[0].y)) : 0;\n return this.getErrorDirection(location[0], location[1], location[2], series, isInverted);\n };\n // calculations for eror bar types\n ErrorBar.prototype.calculateFixedValue = function (point, series, isInverted, errorX, errorY, xAxis, yAxis) {\n var errorbar = series.errorBar;\n return this.findLocation(point, series, isInverted, errorX, errorY);\n };\n ErrorBar.prototype.calculatePercentageValue = function (point, series, isInverted, errorX, errorY, xAxis, yAxis) {\n errorX = (errorX / 100) * point.xValue;\n errorY = (errorY / 100) * point.yValue;\n return this.findLocation(point, series, isInverted, errorX, errorY);\n };\n ErrorBar.prototype.calculateStandardDeviationValue = function (point, series, isInverted, errorX, errorY, xAxis, yAxis) {\n var getMean = this.meanCalculation(series, series.errorBar.mode);\n errorX = errorX * (getMean.horizontalSquareRoot + getMean.horizontalMean);\n errorY = errorY * (getMean.verticalSquareRoot + getMean.verticalMean);\n return this.findLocation(point, series, isInverted, errorX, errorY);\n };\n ErrorBar.prototype.calculateStandardErrorValue = function (point, series, isInverted, errorX, errorY, xAxis, yAxis) {\n var length = series.points.length;\n var getMean = this.meanCalculation(series, series.errorBar.mode);\n errorX = ((errorX * getMean.horizontalSquareRoot) / Math.sqrt(length));\n errorY = ((errorY * getMean.verticalSquareRoot) / Math.sqrt(length));\n return this.findLocation(point, series, isInverted, errorX, errorY);\n };\n ErrorBar.prototype.calculateCustomValue = function (point, series, isInverted, errorX, errorY, xAxis, yAxis) {\n var errorbar = series.errorBar;\n return this.findLocation(point, series, isInverted, errorX, errorY);\n };\n ErrorBar.prototype.getHorizontalDirection = function (start, mid, end, direction, errorMode, capLength) {\n var path = '';\n var capDirection = '';\n path += ' M ' + start.x + ' ' + mid.y + ' L ' + end.x + ' ' + mid.y;\n capDirection += (direction === 'Plus' || direction === 'Both') ? ' M ' + (start.x) + ' ' + (mid.y - capLength) + ' L '\n + (start.x) + ' ' + (mid.y + capLength) : '';\n capDirection += (direction === 'Minus' || direction === 'Both') ? ' M ' + (end.x) + ' ' + (mid.y - capLength) + ' L '\n + (end.x) + ' ' + (mid.y + capLength) : ' ';\n return [path, capDirection];\n };\n ErrorBar.prototype.getVerticalDirection = function (start, mid, end, direction, errorMode, capLength) {\n var path = '';\n var capDirection = '';\n path += ' M ' + mid.x + ' ' + start.y + ' L ' + mid.x + ' ' + end.y;\n capDirection += (direction === 'Plus' || direction === 'Both') ? ' M ' + (mid.x - capLength) + ' ' + start.y + ' L '\n + (mid.x + capLength) + ' ' + start.y : '';\n capDirection += (direction === 'Minus' || direction === 'Both') ? ' M ' + (mid.x - capLength) + ' ' + end.y + ' L '\n + (mid.x + capLength) + ' ' + end.y : '';\n return [path, capDirection];\n };\n ErrorBar.prototype.getBothDirection = function (start, mid, end, direction, errorMode, capLength) {\n var capDirection = '';\n var path = '';\n var pathH = this.getHorizontalDirection(start, mid, end, direction, errorMode, capLength);\n var pathV = this.getVerticalDirection(start, mid, end, direction, errorMode, capLength);\n path = pathH[0].concat(pathV[0]);\n capDirection = pathH[1].concat(pathV[1]);\n return [path, capDirection];\n };\n ErrorBar.prototype.getErrorDirection = function (start, mid, end, series, isInverted) {\n var direction = series.errorBar.direction;\n var mode = series.errorBar.mode;\n var capLength = series.errorBar.errorBarCap.length;\n var path = '';\n var paths;\n var capDirection = '';\n var errorMode = mode;\n switch (mode) {\n case 'Both':\n errorMode = mode;\n break;\n case 'Horizontal':\n errorMode = (isInverted) ? 'Vertical' : mode;\n break;\n case 'Vertical':\n errorMode = (isInverted) ? 'Horizontal' : mode;\n break;\n }\n switch (errorMode) {\n case 'Horizontal':\n paths = this.getHorizontalDirection(start, mid, end, direction, errorMode, capLength);\n break;\n case 'Vertical':\n paths = this.getVerticalDirection(start, mid, end, direction, errorMode, capLength);\n break;\n case 'Both':\n paths = this.getBothDirection(start, mid, end, direction, errorMode, capLength);\n break;\n }\n return [paths[0], paths[1]];\n };\n // mean calculation for standard deviation and standard error\n ErrorBar.prototype.meanCalculation = function (series, mode) {\n var sumOfX = 0;\n var sumOfY = 0;\n var verticalMean = 0;\n var horizontalMean = 0;\n var horSquareDev;\n var verStandardMean;\n var horStandardMean;\n var verSquareTotal;\n var horSquareTotal;\n var verSquareRoot;\n var horSquareRoot;\n var length = series.points.length;\n switch (mode) {\n case 'Vertical':\n sumOfY = sum(series.yData);\n verticalMean = sumOfY / length;\n break;\n case 'Horizontal':\n sumOfX = sum(series.xData);\n horizontalMean = sumOfX / length;\n break;\n case 'Both':\n sumOfY = sum(series.yData);\n verticalMean = sumOfY / length;\n sumOfX = sum(series.xData);\n horizontalMean = sumOfX / length;\n }\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (mode === 'Vertical') {\n sumOfY = sumOfY + Math.pow((point.yValue - verticalMean), 2);\n }\n else if (mode === 'Horizontal') {\n sumOfX = sumOfX + Math.pow((point.xValue - horizontalMean), 2);\n }\n else {\n sumOfY = sumOfY + Math.pow((point.yValue - verticalMean), 2);\n sumOfX = sumOfX + Math.pow((point.xValue - horizontalMean), 2);\n }\n }\n verStandardMean = sumOfY / (length - 1);\n verSquareRoot = Math.sqrt(sumOfY / (length - 1));\n horStandardMean = sumOfX / (length - 1);\n horSquareRoot = Math.sqrt(sumOfX / (length - 1));\n return new Mean(verStandardMean, verSquareRoot, horStandardMean, horSquareRoot, verticalMean, horizontalMean);\n };\n ErrorBar.prototype.createElement = function (series) {\n var explodeValue = 5;\n var render = series.chart.renderer;\n var transform;\n transform = series.chart.chartAreaType === 'Cartesian' ? 'translate(' + series.clipRect.x + ',' + (series.clipRect.y) + ')' : '';\n var markerHeight = (series.marker.height + explodeValue) / 2;\n var markerWidth = (series.marker.width + explodeValue) / 2;\n if (series.chart.chartAreaType === 'Cartesian') {\n var errorBarClipRect = render.drawClipPath(new RectOption(this.chart.element.id + '_ChartErrorBarClipRect_' + series.index, 'transparent', { width: 1, color: 'Gray' }, 1, {\n x: -markerWidth, y: -markerHeight,\n width: series.clipRect.width + markerWidth * 2, height: series.clipRect.height + markerHeight * 2\n }));\n series.errorBarElement = render.createGroup({\n 'id': this.chart.element.id + 'ErrorBarGroup' + series.index,\n 'transform': transform,\n 'clip-path': 'url(#' + this.chart.element.id + '_ChartErrorBarClipRect_' + series.index + ')'\n });\n series.errorBarElement.appendChild(errorBarClipRect);\n }\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n ErrorBar.prototype.doErrorBarAnimation = function (series) {\n var errorBarElements = series.errorBarElement.childNodes;\n if (!errorBarElements) {\n return null;\n }\n var delay = series.animation.delay + series.animation.duration;\n var j = 1;\n while (j < errorBarElements.length) {\n for (var i = 0; i < series.points.length; i++) {\n if (!series.points[i].symbolLocations[0]) {\n continue;\n }\n errorBarElements[j].style.visibility = 'hidden';\n templateAnimate(errorBarElements[j], delay, 350, series.chart.requireInvertedAxis ? 'SlideLeftIn' : 'SlideBottomIn', false);\n }\n j++;\n }\n };\n /**\n * Get module name.\n */\n ErrorBar.prototype.getModuleName = function () {\n // Returns the module name\n return 'ErrorBar';\n };\n /**\n * To destroy the errorBar for series.\n * @return {void}\n * @private\n */\n ErrorBar.prototype.destroy = function (chart) {\n // Destroy method performed here\n };\n return ErrorBar;\n}());\nexport { ErrorBar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Chart legend\n */\nimport { remove, Browser } from '@syncfusion/ej2-base';\nimport { extend } from '@syncfusion/ej2-base';\nimport { LegendOptions, BaseLegend } from '../../common/legend/legend';\nimport { measureText, textTrim } from '../../common/utils/helper';\nimport { legendRender } from '../../common/model/constants';\n/**\n * `Legend` module is used to render legend for the chart.\n */\nvar Legend = /** @class */ (function (_super) {\n __extends(Legend, _super);\n function Legend(chart) {\n var _this = _super.call(this, chart) || this;\n _this.library = _this;\n _this.addEventListener();\n return _this;\n }\n /**\n * Binding events for legend module.\n */\n Legend.prototype.addEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n this.chart.on(Browser.touchMoveEvent, this.mouseMove, this);\n this.chart.on('click', this.click, this);\n this.chart.on(Browser.touchEndEvent, this.mouseEnd, this);\n };\n /**\n * UnBinding events for legend module.\n */\n Legend.prototype.removeEventListener = function () {\n if (this.chart.isDestroyed) {\n return;\n }\n this.chart.off(Browser.touchMoveEvent, this.mouseMove);\n this.chart.off('click', this.click);\n this.chart.off(Browser.touchEndEvent, this.mouseEnd);\n };\n /**\n * To handle mosue move for legend module\n */\n Legend.prototype.mouseMove = function (e) {\n if (this.chart.legendSettings.visible && !this.chart.isTouch) {\n this.move(e);\n }\n };\n /**\n * To handle mosue end for legend module\n */\n Legend.prototype.mouseEnd = function (e) {\n if (this.chart.legendSettings.visible && this.chart.isTouch) {\n this.move(e);\n }\n };\n /**\n * Get the legend options.\n * @return {void}\n * @private\n */\n Legend.prototype.getLegendOptions = function (visibleSeriesCollection, chart) {\n this.legendCollections = [];\n var seriesType;\n for (var _i = 0, visibleSeriesCollection_1 = visibleSeriesCollection; _i < visibleSeriesCollection_1.length; _i++) {\n var series = visibleSeriesCollection_1[_i];\n if (series.category !== 'Indicator') {\n seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :\n series.type;\n this.legendCollections.push(new LegendOptions(series.name, series.interior, series.legendShape, series.visible, seriesType, series.marker.shape, series.marker.visible));\n }\n }\n };\n /** @private */\n Legend.prototype.getLegendBounds = function (availableSize, legendBounds, legend) {\n var padding = legend.padding;\n var extraHeight = 0;\n var extraWidth = 0;\n if (!this.isVertical) {\n extraHeight = !legend.height ? ((availableSize.height / 100) * 5) : 0;\n }\n else {\n extraWidth = !legend.width ? ((availableSize.width / 100) * 5) : 0;\n }\n legendBounds.height += extraHeight;\n legendBounds.width += extraWidth;\n var shapeHeight = legend.shapeHeight;\n var shapeWidth = legend.shapeWidth;\n var shapePadding = legend.shapePadding;\n var maximumWidth = 0;\n var rowWidth = 0;\n var legendWidth = 0;\n var columnHeight = 0;\n var rowCount = 0;\n var legendEventArgs;\n this.maxItemHeight = Math.max(measureText('MeasureText', legend.textStyle).height, legend.shapeHeight);\n var render = false;\n for (var _i = 0, _a = this.legendCollections; _i < _a.length; _i++) {\n var legendOption = _a[_i];\n legendEventArgs = {\n fill: legendOption.fill, text: legendOption.text, shape: legendOption.shape,\n markerShape: legendOption.markerShape, name: legendRender, cancel: false\n };\n this.chart.trigger(legendRender, legendEventArgs);\n legendOption.render = !legendEventArgs.cancel;\n legendOption.text = legendEventArgs.text;\n legendOption.fill = legendEventArgs.fill;\n legendOption.shape = legendEventArgs.shape;\n legendOption.markerShape = legendEventArgs.markerShape;\n legendOption.textSize = measureText(legendOption.text, legend.textStyle);\n if (legendOption.render && legendOption.text !== '') {\n render = true;\n legendWidth = shapeWidth + shapePadding + legendOption.textSize.width + padding;\n rowWidth = rowWidth + legendWidth;\n if (legendBounds.width < (padding + rowWidth) || this.isVertical) {\n maximumWidth = Math.max(maximumWidth, (rowWidth + padding - (this.isVertical ? 0 : legendWidth)));\n if (rowCount === 0 && (legendWidth !== rowWidth)) {\n rowCount = 1;\n }\n rowWidth = this.isVertical ? 0 : legendWidth;\n rowCount++;\n columnHeight = (rowCount * (this.maxItemHeight + padding)) + padding;\n }\n }\n }\n columnHeight = Math.max(columnHeight, (this.maxItemHeight + padding) + padding);\n this.isPaging = legendBounds.height < columnHeight;\n this.totalPages = rowCount;\n if (render) {\n this.setBounds(Math.max((rowWidth + padding), maximumWidth), columnHeight, legend, legendBounds);\n }\n else {\n this.setBounds(0, 0, legend, legendBounds);\n }\n };\n /** @private */\n Legend.prototype.getRenderPoint = function (legendOption, start, textPadding, prevLegend, rect, count, firstLegend) {\n var padding = this.legend.padding;\n var previousBound = (prevLegend.location.x + textPadding + prevLegend.textSize.width);\n if ((previousBound + (legendOption.textSize.width + textPadding)) > (rect.x + rect.width + this.legend.shapeWidth / 2) ||\n this.isVertical) {\n legendOption.location.x = start.x;\n legendOption.location.y = (count === firstLegend) ? prevLegend.location.y :\n prevLegend.location.y + this.maxItemHeight + padding;\n }\n else {\n legendOption.location.x = (count === firstLegend) ? prevLegend.location.x : previousBound;\n legendOption.location.y = prevLegend.location.y;\n }\n var availwidth = (this.legendBounds.x + this.legendBounds.width) - (legendOption.location.x +\n textPadding - this.legend.shapeWidth / 2);\n legendOption.text = textTrim(+availwidth.toFixed(4), legendOption.text, this.legend.textStyle);\n };\n /** @private */\n Legend.prototype.LegendClick = function (seriesIndex) {\n var chart = this.chart;\n var series = chart.visibleSeries[seriesIndex];\n var legend = this.legendCollections[seriesIndex];\n var selectedDataIndexes = [];\n if (chart.selectionModule) {\n selectedDataIndexes = extend([], chart.selectionModule.selectedDataIndexes, null, true);\n }\n if (chart.legendSettings.toggleVisibility) {\n if (!series.visible) {\n series.visible = true;\n }\n else {\n series.visible = false;\n }\n legend.visible = (series.visible);\n if (chart.svgObject.childNodes.length > 0) {\n while (chart.svgObject.lastChild) {\n chart.svgObject.removeChild(chart.svgObject.lastChild);\n }\n remove(chart.svgObject);\n }\n chart.animateSeries = false;\n chart.removeSvg();\n chart.refreshAxis();\n series.refreshAxisLabel();\n this.refreshSeries(chart.visibleSeries);\n chart.refreshBound();\n if (selectedDataIndexes.length > 0) {\n chart.selectionModule.selectedDataIndexes = selectedDataIndexes;\n chart.selectionModule.redrawSelection(chart, chart.selectionMode);\n }\n }\n else if (chart.selectionModule) {\n chart.selectionModule.legendSelection(chart, seriesIndex);\n }\n };\n Legend.prototype.refreshSeries = function (seriesCollection) {\n for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {\n var series = seriesCollection_1[_i];\n series.position = undefined;\n }\n };\n /**\n * To show the tooltip for the trimmed text in legend.\n * @return {void}\n */\n Legend.prototype.click = function (event) {\n if (!this.chart.legendSettings.visible) {\n return;\n }\n var targetId = event.target.id;\n var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_marker_',\n this.legendID + '_shape_'];\n var seriesIndex;\n for (var _i = 0, legendItemsId_1 = legendItemsId; _i < legendItemsId_1.length; _i++) {\n var id = legendItemsId_1[_i];\n if (targetId.indexOf(id) > -1) {\n seriesIndex = parseInt(targetId.split(id)[1], 10);\n this.LegendClick(seriesIndex);\n }\n }\n if (targetId.indexOf(this.legendID + '_pageup') > -1) {\n this.changePage(event, true);\n }\n else if (targetId.indexOf(this.legendID + '_pagedown') > -1) {\n this.changePage(event, false);\n }\n };\n /**\n * Get module name\n */\n Legend.prototype.getModuleName = function () {\n return 'Legend';\n };\n /**\n * To destroy the Legend.\n * @return {void}\n * @private\n */\n Legend.prototype.destroy = function (chart) {\n this.removeEventListener();\n };\n return Legend;\n}(BaseLegend));\nexport { Legend };\n","import { createTemplate, measureElementRect, logBase } from '../utils/helper';\nimport { ChartLocation, stringToNumber, appendElement, withIn, Rect } from '../utils/helper';\nimport { getPoint } from '../utils/helper';\nimport { createElement } from '@syncfusion/ej2-base';\nimport { annotationRender } from '../model/constants';\nimport { DataUtil } from '@syncfusion/ej2-data';\n/**\n * Annotation Module handles the Annotation for chart and accumulation series.\n */\nvar AnnotationBase = /** @class */ (function () {\n /**\n * Constructor for chart and accumulation annotation\n * @param control\n */\n function AnnotationBase(control) {\n this.control = control;\n }\n /**\n * Method to render the annotation for chart and accumulation series.\n * @private\n * @param annotation\n * @param index\n */\n AnnotationBase.prototype.render = function (annotation, index) {\n this.isChart = this.control.getModuleName() === 'chart';\n this.annotation = annotation;\n var childElement = createTemplate(createElement('div', {\n id: this.control.element.id + '_Annotation_' + index,\n styles: 'position: absolute;'\n }), index, annotation.content, this.control);\n return childElement;\n };\n /**\n * Method to calculate the location for annotation - coordinate unit as pixel.\n * @private\n * @param location\n */\n AnnotationBase.prototype.setAnnotationPixelValue = function (location) {\n var rect;\n rect = this.annotation.region === 'Chart' ?\n new Rect(0, 0, this.control.availableSize.width, this.control.availableSize.height) :\n this.isChart ?\n this.control.chartAxisLayoutPanel.seriesClipRect :\n this.control.series[0].accumulationBound;\n location.x = ((typeof this.annotation.x !== 'string') ?\n ((typeof this.annotation.x === 'number') ? this.annotation.x : 0) :\n stringToNumber(this.annotation.x, rect.width)) + rect.x;\n location.y = ((typeof this.annotation.y === 'number') ? this.annotation.y :\n stringToNumber(this.annotation.y, rect.height)) + rect.y;\n return true;\n };\n /**\n * Method to calculate the location for annotation - coordinate unit as point.\n * @private\n * @param location\n */\n AnnotationBase.prototype.setAnnotationPointValue = function (location) {\n var symbolLocation = new ChartLocation(0, 0);\n if (this.isChart) {\n var xAxis = void 0;\n var yAxis = void 0;\n var chart = this.control;\n var annotation = this.annotation;\n var xValue = void 0;\n var isLog = false;\n var xAxisName = annotation.xAxisName;\n var yAxisName = annotation.yAxisName;\n var isInverted = chart.requireInvertedAxis;\n for (var _i = 0, _a = chart.axisCollections; _i < _a.length; _i++) {\n var axis = _a[_i];\n if (xAxisName === axis.name || (xAxisName == null && axis.name === 'primaryXAxis')) {\n xAxis = axis;\n if (xAxis.valueType.indexOf('Category') > -1) {\n var xAnnotation = xAxis.valueType === 'DateTimeCategory' ? (annotation.x.getTime()).toString() :\n annotation.x;\n if (xAxis.labels.indexOf(xAnnotation) < 0) {\n return false;\n }\n else {\n xValue = xAxis.labels.indexOf(xAnnotation);\n }\n }\n else if (xAxis.valueType === 'DateTime') {\n var option = { skeleton: 'full', type: 'dateTime' };\n xValue = (typeof this.annotation.x === 'object') ?\n Date.parse(chart.intl.getDateParser(option)(chart.intl.getDateFormat(option)(new Date(DataUtil.parse.parseJson({ val: annotation.x }).val)))) : 0;\n }\n else {\n xValue = +annotation.x;\n }\n }\n else if (yAxisName === axis.name || (yAxisName == null && axis.name === 'primaryYAxis')) {\n yAxis = axis;\n isLog = yAxis.valueType === 'Logarithmic';\n }\n }\n if (xAxis && yAxis && withIn(xAxis.valueType === 'Logarithmic' ? logBase(xValue, xAxis.logBase) : xValue, xAxis.visibleRange)) {\n symbolLocation = getPoint(xValue, withIn((isLog ? logBase(+this.annotation.y, yAxis.logBase) : +this.annotation.y), yAxis.visibleRange) ? +annotation.y :\n isLog ? Math.pow(yAxis.logBase, yAxis.visibleRange.max) :\n +annotation.y > yAxis.visibleRange.max ? yAxis.visibleRange.max : yAxis.visibleRange.min, xAxis, yAxis, isInverted);\n location.x = symbolLocation.x + (isInverted ? yAxis.rect.x : xAxis.rect.x);\n location.y = symbolLocation.y + (isInverted ? xAxis.rect.y : yAxis.rect.y);\n }\n else {\n return false;\n }\n return true;\n }\n else {\n return this.setAccumulationPointValue(location);\n }\n };\n /**\n * To process the annotation for accumulation chart\n * @param annotation\n * @param index\n * @param parentElement\n */\n AnnotationBase.prototype.processAnnotation = function (annotation, index, parentElement) {\n var annotationElement;\n var location;\n location = new ChartLocation(0, 0);\n annotationElement = this.render(annotation, index);\n if (this['setAnnotation' + annotation.coordinateUnits + 'Value'](location)) {\n this.setElementStyle(location, annotationElement, parentElement);\n }\n };\n /**\n * Method to calculate the location for annotation - coordinate unit as point in accumulation chart.\n * @private\n * @param location\n */\n AnnotationBase.prototype.setAccumulationPointValue = function (location) {\n var accumulation = this.control;\n var point;\n for (var _i = 0, _a = accumulation.visibleSeries[0].points; _i < _a.length; _i++) {\n var accPoint = _a[_i];\n if (typeof accPoint.x === 'object') {\n if (Date.parse(accPoint.x) === Date.parse(this.annotation.x) &&\n accPoint.y === this.annotation.y) {\n point = accPoint;\n break;\n }\n }\n else {\n if (accPoint.x === this.annotation.x && accPoint.y === this.annotation.y) {\n point = accPoint;\n break;\n }\n }\n }\n if (point && point.visible) {\n location.x = point.symbolLocation.x;\n location.y = point.symbolLocation.y;\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Method to set the element style for accumulation / chart annotation.\n * @private\n * @param location\n * @param element\n * @param parentElement\n */\n AnnotationBase.prototype.setElementStyle = function (location, element, parentElement) {\n var elementRect = measureElementRect(element);\n var argsData = {\n cancel: false, name: annotationRender, content: element,\n location: location\n };\n this.control.trigger(annotationRender, argsData);\n if (!argsData.cancel) {\n argsData.content.style.left = this.setAlignmentValue(this.annotation.horizontalAlignment, elementRect.width, argsData.location.x) + 'px';\n argsData.content.style.top = this.setAlignmentValue(this.annotation.verticalAlignment, elementRect.height, argsData.location.y) + 'px';\n argsData.content.setAttribute('aria-label', this.annotation.description || 'Annotation');\n appendElement(argsData.content, parentElement);\n }\n };\n /**\n * Method to calculate the alignment value for annotation.\n * @private\n * @param alignment\n * @param size\n * @param value\n */\n AnnotationBase.prototype.setAlignmentValue = function (alignment, size, value) {\n switch (alignment) {\n case 'Top':\n case 'Near':\n value -= size;\n break;\n case 'Bottom':\n case 'Far':\n value += 0;\n break;\n case 'Middle':\n case 'Center':\n value -= (size / 2);\n break;\n }\n return value;\n };\n return AnnotationBase;\n}());\nexport { AnnotationBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { AnnotationBase } from '../../common/annotation/annotation';\nimport { appendElement } from '../../common/utils/helper';\nimport { createElement } from '@syncfusion/ej2-base';\n/**\n * `ChartAnnotation` module handles the annotation for chart.\n */\nvar ChartAnnotation = /** @class */ (function (_super) {\n __extends(ChartAnnotation, _super);\n /**\n * Constructor for chart annotation.\n * @private.\n */\n function ChartAnnotation(control, annotations) {\n var _this = _super.call(this, control) || this;\n _this.chart = control;\n return _this;\n }\n /**\n * Method to render the annotation for chart\n * @param element\n * @private\n */\n ChartAnnotation.prototype.renderAnnotations = function (element) {\n var _this = this;\n this.annotations = this.chart.annotations;\n this.parentElement = createElement('div', {\n id: this.chart.element.id + '_Annotation_Collections'\n });\n this.annotations.map(function (annotation, index) {\n _this.processAnnotation(annotation, index, _this.parentElement);\n });\n appendElement(this.parentElement, element);\n };\n /**\n * To destroy the annotation.\n * @return {void}\n * @private\n */\n ChartAnnotation.prototype.destroy = function (control) {\n // Destroy method performed here\n };\n /**\n * Get module name.\n */\n ChartAnnotation.prototype.getModuleName = function () {\n // Returns te module name\n return 'Annotation';\n };\n return ChartAnnotation;\n}(AnnotationBase));\nexport { ChartAnnotation };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, PathOption, sum } from '../../common/utils/helper';\nimport { Size, getSaturationColor, getPoint } from '../../common/utils/helper';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { ColumnBase } from './column-base';\nimport { getMedian } from '../../common/utils/helper';\n/**\n * `BoxAndWhiskerSeries` module is used to render the box and whisker series.\n */\nvar BoxAndWhiskerSeries = /** @class */ (function (_super) {\n __extends(BoxAndWhiskerSeries, _super);\n function BoxAndWhiskerSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render BoxAndWhisker series.\n * @return {void}\n * @private\n */\n BoxAndWhiskerSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var sideBySideInfo = this.getSideBySideInfo(series);\n var argsData;\n var centerRegion;\n var borderWidth = series.border.width || 1;\n for (var _i = 0, _a = series.points; _i < _a.length; _i++) {\n var point = _a[_i];\n point.symbolLocations = [];\n point.regions = [];\n var centerRegion_1 = void 0;\n if (point.visible && withInRange(series.points[point.index - 1], point, series.points[point.index + 1], series)) {\n this.findBoxPlotValues(point.y, point, series.boxPlotMode);\n //region to cover the top and bottom ticks\n this.updateTipRegion(series, point, sideBySideInfo);\n //get middle rect\n centerRegion_1 = this.getRectangle((point.xValue + sideBySideInfo.start), point.upperQuartile, (point.xValue + sideBySideInfo.end), point.lowerQuartile, series);\n point.regions.push(centerRegion_1);\n argsData = this.triggerEvent(series, point, series.interior, {\n color: (!isNullOrUndefined(series.border.color) && series.border.color !== 'transparent') ? series.border.color :\n getSaturationColor(series.interior, -0.6),\n width: series.border.width ? series.border.width : 1\n });\n if (!argsData.cancel) {\n this.renderBoxAndWhisker(series, point, centerRegion_1, argsData, this.getPathString(point, series, getPoint(point.xValue, point.median, xAxis, yAxis, isInverted), getPoint(point.xValue, point.average, xAxis, yAxis, isInverted)));\n }\n }\n }\n if (series.marker.visible) {\n series.chart.markerRender.render(series);\n }\n };\n /**\n * update the tip region fo box plot\n * @param series\n * @param point\n * @param sideBySideInfo\n */\n BoxAndWhiskerSeries.prototype.updateTipRegion = function (series, point, sideBySideInfo) {\n var tipRegion = this.getRectangle((point.xValue + sideBySideInfo.median), point.maximum, (point.xValue + sideBySideInfo.median), point.minimum, series);\n this.updateTipSize(series, point, tipRegion, series.chart.requireInvertedAxis);\n };\n /**\n * Update tip size to tip regions\n * @param series\n * @param point\n * @param region\n * @param isInverted\n */\n BoxAndWhiskerSeries.prototype.updateTipSize = function (series, point, region, isInverted) {\n var borderWidth = series.border.width || 1;\n if (!isInverted) {\n region.x -= borderWidth / 2;\n region.width = region.width || borderWidth;\n }\n else {\n region.y -= borderWidth / 2;\n region.height = region.height || borderWidth;\n }\n point.regions.push(region);\n };\n /**\n * Calculation for path direction performed here\n * @param point\n * @param series\n * @param median\n * @param average\n */\n BoxAndWhiskerSeries.prototype.getPathString = function (point, series, median, average) {\n var topRect = point.regions[0];\n var midRect = point.regions[1];\n var direction = '';\n var width = series.chart.requireInvertedAxis ? topRect.height : topRect.width;\n var center = series.chart.requireInvertedAxis ? topRect.y + topRect.height / 2 :\n topRect.x + topRect.width / 2;\n var midWidth = midRect.x + midRect.width;\n var midHeight = midRect.y + midRect.height;\n var topWidth = topRect.x + topRect.width;\n var topHeight = topRect.y + topRect.height;\n if (!series.chart.requireInvertedAxis) {\n this.updateTipSize(series, point, { x: midRect.x, y: topRect.y, width: midWidth - midRect.x, height: 0 }, true);\n this.updateTipSize(series, point, { x: midRect.x, y: topHeight, width: midWidth - midRect.x, height: 0 }, true);\n direction += 'M ' + midRect.x + ' ' + topRect.y + ' ' + ' L ' + midWidth + ' ' + topRect.y;\n direction += ' M ' + center + ' ' + topRect.y + ' ' + ' L ' + center + ' ' + midRect.y;\n direction += ' M ' + midRect.x + ' ' + midRect.y + ' ' + ' L ' + midWidth + ' ' + midRect.y +\n ' L ' + midWidth + ' ' + midHeight + ' L ' + midRect.x + ' ' + midHeight + ' Z';\n direction += ' M ' + center + ' ' + midHeight + ' L ' + center + ' ' + topHeight;\n direction += ' M ' + midRect.x + ' ' + topHeight + ' L ' + midWidth + ' ' + topHeight;\n direction += ' M ' + midRect.x + ' ' + median.y + ' L ' + midWidth + ' ' + median.y;\n direction += series.showMean ?\n ' M ' + (average.x - 5) + ' ' + (average.y - 5) + ' L ' + (average.x + 5) + ' ' + (average.y + 5) +\n ' M ' + (average.x + 5) + ' ' + (average.y - 5) + ' L ' + (average.x - 5) + ' ' + (average.y + 5) : '';\n }\n else {\n this.updateTipSize(series, point, { x: topRect.x, y: midRect.y, width: 0, height: midHeight - midRect.y }, false);\n this.updateTipSize(series, point, { x: topWidth, y: midRect.y, width: 0, height: midHeight - midRect.y }, true);\n direction += 'M ' + topRect.x + ' ' + midRect.y + ' L ' + topRect.x + ' ' + midHeight;\n direction += 'M ' + topRect.x + ' ' + center + ' ' + ' L ' + midRect.x + ' ' + center;\n direction += ' M ' + midRect.x + ' ' + midRect.y + ' ' + ' L ' + midWidth + ' ' + midRect.y +\n ' L ' + midWidth + ' ' + midHeight + ' L ' + midRect.x + ' ' + midHeight + ' Z';\n direction += ' M ' + midWidth + ' ' + center + ' L ' + topWidth + ' ' + center;\n direction += ' M ' + topWidth + ' ' + midRect.y + ' L ' + topWidth + ' ' + midHeight;\n direction += ' M ' + median.x + ' ' + midRect.y + ' ' + ' L ' + median.x + ' ' + midHeight;\n direction += series.showMean ?\n 'M ' + (average.x + 5) + ' ' + (average.y - 5) + ' L ' + (average.x - 5) + ' ' + (average.y + 5) +\n 'M ' + (average.x - 5) + ' ' + (average.y - 5) + ' L ' + (average.x + 5) + ' ' + (average.y + 5) : '';\n }\n return direction;\n };\n /**\n * Rendering for box and whisker append here.\n * @param series\n * @param point\n * @param rect\n * @param argsData\n * @param direction\n */\n BoxAndWhiskerSeries.prototype.renderBoxAndWhisker = function (series, point, rect, argsData, direction) {\n var location;\n var size;\n var symbolId = series.chart.element.id + '_Series_' + series.index + '_Point_' + point.index;\n var element = series.chart.renderer.drawPath(new PathOption(symbolId + '_BoxPath', argsData.fill, argsData.border.width, argsData.border.color, series.opacity, series.dashArray, direction));\n element.setAttribute('aria-label', point.x.toString() + ':' + point.maximum.toString()\n + ':' + point.minimum.toString() + ':' + point.lowerQuartile.toString() + ':' + point.upperQuartile.toString());\n var parentElement = series.chart.renderer.createGroup({\n 'id': symbolId\n });\n parentElement.appendChild(element);\n for (var i = 0; i < point.outliers.length; i++) {\n location = getPoint(point.xValue, point.outliers[i], series.xAxis, series.yAxis, series.chart.requireInvertedAxis);\n size = new Size(series.marker.width, series.marker.height);\n point.symbolLocations.push(location);\n this.updateTipSize(series, point, {\n x: location.x - (size.width / 2), y: location.y - (size.height / 2),\n width: size.width, height: size.height\n }, true);\n }\n series.seriesElement.appendChild(parentElement);\n };\n /**\n * To find the box plot values\n * @param yValues\n * @param point\n * @param mode\n */\n BoxAndWhiskerSeries.prototype.findBoxPlotValues = function (yValues, point, mode) {\n var yCount = yValues.length;\n var quartile = {\n average: sum(yValues) / yCount,\n lowerQuartile: 0, upperQuartile: 0,\n maximum: 0, minimum: 0,\n median: 0, outliers: []\n };\n if (mode === 'Exclusive') {\n quartile.lowerQuartile = this.getExclusiveQuartileValue(yValues, yCount, 0.25);\n quartile.upperQuartile = this.getExclusiveQuartileValue(yValues, yCount, 0.75);\n quartile.median = this.getExclusiveQuartileValue(yValues, yCount, 0.5);\n }\n else if (mode === 'Inclusive') {\n quartile.lowerQuartile = this.getInclusiveQuartileValue(yValues, yCount, 0.25);\n quartile.upperQuartile = this.getInclusiveQuartileValue(yValues, yCount, 0.75);\n quartile.median = this.getInclusiveQuartileValue(yValues, yCount, 0.5);\n }\n else {\n quartile.median = getMedian(yValues);\n this.getQuartileValues(yValues, yCount, quartile);\n }\n this.getMinMaxOutlier(yValues, yCount, quartile);\n point.minimum = quartile.minimum;\n point.maximum = quartile.maximum;\n point.lowerQuartile = quartile.lowerQuartile;\n point.upperQuartile = quartile.upperQuartile;\n point.median = quartile.median;\n point.outliers = quartile.outliers;\n point.average = quartile.average;\n };\n /**\n * to find the exclusive quartile values\n * @param yValues\n * @param count\n * @param percentile\n */\n BoxAndWhiskerSeries.prototype.getExclusiveQuartileValue = function (yValues, count, percentile) {\n if (count === 0) {\n return 0;\n }\n else if (count === 1) {\n return yValues[0];\n }\n var value = 0;\n var rank = percentile * (count + 1);\n var integerRank = Math.floor(Math.abs(rank));\n var fractionRank = rank - integerRank;\n if (integerRank === 0) {\n value = yValues[0];\n }\n else if (integerRank > count - 1) {\n value = yValues[count - 1];\n }\n else {\n value = fractionRank * (yValues[integerRank] - yValues[integerRank - 1]) + yValues[integerRank - 1];\n }\n return value;\n };\n /**\n * to find the inclusive quartile values\n * @param yValues\n * @param count\n * @param percentile\n */\n BoxAndWhiskerSeries.prototype.getInclusiveQuartileValue = function (yValues, count, percentile) {\n if (count === 0) {\n return 0;\n }\n else if (count === 1) {\n return yValues[0];\n }\n var value = 0;\n var rank = percentile * (count - 1);\n var integerRank = Math.floor(Math.abs(rank));\n var fractionRank = rank - integerRank;\n value = fractionRank * (yValues[integerRank + 1] - yValues[integerRank]) + yValues[integerRank];\n return value;\n };\n /**\n * To find the quartile values\n * @param yValues\n * @param count\n * @param lowerQuartile\n * @param upperQuartile\n */\n BoxAndWhiskerSeries.prototype.getQuartileValues = function (yValues, count, quartile) {\n if (count === 1) {\n quartile.lowerQuartile = yValues[0];\n quartile.upperQuartile = yValues[0];\n return null;\n }\n var isEvenList = count % 2 === 0;\n var halfLength = count / 2;\n var lowerQuartileArray = yValues.slice(0, halfLength);\n var upperQuartileArray = yValues.slice(isEvenList ? halfLength : halfLength + 1, count);\n quartile.lowerQuartile = getMedian(lowerQuartileArray);\n quartile.upperQuartile = getMedian(upperQuartileArray);\n };\n /**\n * To find the min, max and outlier values\n * @param yValues\n * @param lowerQuartile\n * @param upperQuartile\n * @param minimum\n * @param maximum\n * @param outliers\n */\n BoxAndWhiskerSeries.prototype.getMinMaxOutlier = function (yValues, count, quartile) {\n var interquartile = quartile.upperQuartile - quartile.lowerQuartile;\n var rangeIQR = 1.5 * interquartile;\n for (var i = 0; i < count; i++) {\n if (yValues[i] < quartile.lowerQuartile - rangeIQR) {\n quartile.outliers.push(yValues[i]);\n }\n else {\n quartile.minimum = yValues[i];\n break;\n }\n }\n for (var i = count - 1; i >= 0; i--) {\n if (yValues[i] > quartile.upperQuartile + rangeIQR) {\n quartile.outliers.push(yValues[i]);\n }\n else {\n quartile.maximum = yValues[i];\n break;\n }\n }\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n BoxAndWhiskerSeries.prototype.doAnimation = function (series) {\n this.animate(series);\n };\n /**\n * Get module name.\n */\n BoxAndWhiskerSeries.prototype.getModuleName = function () {\n return 'BoxAndWhiskerSeries';\n /**\n * return the module name\n */\n };\n /**\n * To destroy the candle series.\n * @return {void}\n * @private\n */\n BoxAndWhiskerSeries.prototype.destroy = function (chart) {\n /**\n * Destroys the candle series.\n */\n };\n return BoxAndWhiskerSeries;\n}(ColumnBase));\nexport { BoxAndWhiskerSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { getPoint, withInRange, ChartLocation, PathOption } from '../../common/utils/helper';\nimport { MultiColoredSeries } from './multi-colored-base';\n/**\n * `MultiColoredAreaSeries` module used to render the area series with multi color.\n */\nvar MultiColoredAreaSeries = /** @class */ (function (_super) {\n __extends(MultiColoredAreaSeries, _super);\n function MultiColoredAreaSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Area series.\n * @return {void}\n * @private\n */\n MultiColoredAreaSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var _this = this;\n var firstPoint;\n var startPoint = null;\n var direction = '';\n var origin = Math.max(series.yAxis.visibleRange.min, 0);\n var options = [];\n var startRegion;\n var previous;\n var color;\n var rendered;\n var segments = this.sortSegments(series, series.segments);\n series.points.map(function (point, i, seriesPoints) {\n point.symbolLocations = [];\n point.regions = [];\n rendered = false;\n if (point.visible && withInRange(seriesPoints[i - 1], point, seriesPoints[i + 1], series)) {\n direction += _this.getAreaPathDirection(point.xValue, origin, series, isInverted, getPoint, startPoint, 'M');\n startPoint = startPoint || new ChartLocation(point.xValue, origin);\n firstPoint = getPoint(point.xValue, point.yValue, xAxis, yAxis, isInverted, series);\n if (previous && _this.setPointColor(point, previous, series, series.segmentAxis === 'X', segments)) {\n rendered = true;\n startRegion = getPoint(startPoint.x, origin, xAxis, yAxis, isInverted, series);\n direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');\n direction += ('L' + ' ' + (firstPoint.x) + ' ' + (startRegion.y) + ' ');\n _this.generatePathOption(options, series, previous, direction, '_Point_' + previous.index);\n direction = 'M' + ' ' + (firstPoint.x) + ' ' + (startRegion.y) + ' ' + 'L' + ' ' +\n (firstPoint.x) + ' ' + (firstPoint.y) + ' ';\n }\n else {\n direction += ('L' + ' ' + (firstPoint.x) + ' ' + (firstPoint.y) + ' ');\n _this.setPointColor(point, null, series, series.segmentAxis === 'X', segments);\n }\n if (seriesPoints[i + 1] && !seriesPoints[i + 1].visible && series.emptyPointSettings.mode !== 'Drop') {\n direction += _this.getAreaEmptyDirection({ 'x': point.xValue, 'y': origin }, startPoint, series, isInverted, getPoint);\n startPoint = null;\n }\n previous = point;\n _this.storePointLocation(point, series, isInverted, getPoint);\n }\n });\n if (!rendered) {\n direction = series.points.length > 1 ?\n (direction + this.getAreaPathDirection(previous.xValue, origin, series, isInverted, getPoint, null, 'L')) : '';\n this.generatePathOption(options, series, previous, direction, '');\n }\n this.applySegmentAxis(series, options, segments);\n this.renderMarker(series);\n };\n /**\n * To Store the path directions of the area\n */\n MultiColoredAreaSeries.prototype.generatePathOption = function (options, series, point, direction, id) {\n options.push(new PathOption(series.chart.element.id + '_Series_' + series.index + id, series.setPointColor(point, series.interior), series.border.width, series.border.color, series.opacity, series.dashArray, direction));\n };\n /**\n * To destroy the area series.\n * @return {void}\n * @private\n */\n MultiColoredAreaSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n /**\n * Get module name\n */\n MultiColoredAreaSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'MultiColoredAreaSeries';\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n MultiColoredAreaSeries.prototype.doAnimation = function (series) {\n this.doLinearAnimation(series, series.animation);\n };\n return MultiColoredAreaSeries;\n}(MultiColoredSeries));\nexport { MultiColoredAreaSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { withInRange, getPoint, PathOption } from '../../common/utils/helper';\nimport { MultiColoredSeries } from './multi-colored-base';\n/**\n * `MultiColoredLineSeries` used to render the line series with multi color.\n */\nvar MultiColoredLineSeries = /** @class */ (function (_super) {\n __extends(MultiColoredLineSeries, _super);\n function MultiColoredLineSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Render Line Series.\n * @return {void}.\n * @private\n */\n MultiColoredLineSeries.prototype.render = function (series, xAxis, yAxis, isInverted) {\n var previous = null;\n var startPoint = 'M';\n var visiblePoints = this.improveChartPerformance(series);\n var options = [];\n var direction = '';\n var segments = this.sortSegments(series, series.segments);\n for (var _i = 0, visiblePoints_1 = visiblePoints; _i < visiblePoints_1.length; _i++) {\n var point = visiblePoints_1[_i];\n point.regions = [];\n if (point.visible && withInRange(visiblePoints[point.index - 1], point, visiblePoints[point.index + 1], series)) {\n direction += this.getLineDirection(previous, point, series, isInverted, getPoint, startPoint);\n if (previous != null) {\n if (this.setPointColor(point, previous, series, series.segmentAxis === 'X', segments)) {\n options.push(new PathOption(series.chart.element.id + '_Series_' + series.index + '_Point_' + previous.index, 'none', series.width, series.setPointColor(previous, series.interior), series.opacity, series.dashArray, direction));\n startPoint = 'M';\n direction = '';\n }\n else {\n startPoint = 'L';\n }\n }\n else {\n this.setPointColor(point, null, series, series.segmentAxis === 'X', segments);\n }\n previous = point;\n this.storePointLocation(point, series, isInverted, getPoint);\n }\n else {\n previous = (series.emptyPointSettings.mode === 'Drop') ? previous : null;\n startPoint = (series.emptyPointSettings.mode === 'Drop') ? startPoint : 'M';\n point.symbolLocations = [];\n }\n }\n if (direction !== '') {\n options.push(new PathOption(series.chart.element.id + '_Series_' + series.index, 'none', series.width, series.setPointColor(visiblePoints[visiblePoints.length - 1], series.interior), series.opacity, series.dashArray, direction));\n }\n this.applySegmentAxis(series, options, segments);\n this.renderMarker(series);\n };\n /**\n * Animates the series.\n * @param {Series} series - Defines the series to animate.\n * @return {void}\n */\n MultiColoredLineSeries.prototype.doAnimation = function (series) {\n this.doLinearAnimation(series, series.animation);\n };\n /**\n * Get module name.\n */\n MultiColoredLineSeries.prototype.getModuleName = function () {\n /**\n * Returns the module name of the series\n */\n return 'MultiColoredLineSeries';\n };\n /**\n * To destroy the line series.\n * @return {void}\n * @private\n */\n MultiColoredLineSeries.prototype.destroy = function (chart) {\n /**\n * Destroy method performed here\n */\n };\n return MultiColoredLineSeries;\n}(MultiColoredSeries));\nexport { MultiColoredLineSeries };\n","import { textWrap, TextOption, PathOption } from '../../common/utils/helper';\nimport { valueToCoefficient, measureText, textTrim, textElement } from '../../common/utils/helper';\nimport { axisMultiLabelRender } from '../../common/model/constants';\n/**\n * `MultiLevelLabel` module is used to render the multi level label in chart.\n */\nvar MultiLevelLabel = /** @class */ (function () {\n /**\n * Constructor for the logerithmic module.\n * @private\n */\n function MultiLevelLabel(chart) {\n /** @private */\n this.xAxisPrevHeight = [];\n /** @private */\n this.xAxisMultiLabelHeight = [];\n /** @private */\n this.yAxisPrevHeight = [];\n /** @private */\n this.yAxisMultiLabelHeight = [];\n this.chart = chart;\n }\n /**\n * Finds multilevel label height\n * @return {void}\n */\n MultiLevelLabel.prototype.getMultilevelLabelsHeight = function (axis) {\n var value = 0;\n var multiLevelLabelsHeight = [];\n var prevHeight = [];\n var isVertical = axis.orientation === 'Vertical';\n var axisValue = isVertical ? axis.rect.height : axis.rect.width;\n var labelSize;\n var height;\n var padding = 10;\n var gap;\n axis.multiLevelLabels.map(function (multiLevel, index) {\n multiLevel.categories.map(function (categoryLabel) {\n if (categoryLabel.text !== '' && categoryLabel.start !== null && categoryLabel.end !== null) {\n labelSize = measureText(categoryLabel.text, multiLevel.textStyle);\n height = isVertical ? labelSize.width : labelSize.height;\n height += 2 * multiLevel.border.width +\n (multiLevel.border.type === 'CurlyBrace' ? padding : 0);\n gap = (categoryLabel.maximumTextWidth !== null) ? categoryLabel.maximumTextWidth :\n (valueToCoefficient(typeof categoryLabel.end === 'string' ? Number(new Date(categoryLabel.end)) :\n categoryLabel.end, axis) * axisValue) -\n (valueToCoefficient(typeof categoryLabel.start === 'string' ? Number(new Date(categoryLabel.start)) :\n categoryLabel.start, axis) * axisValue);\n if ((labelSize.width > gap - padding) && gap > 0 && (multiLevel.overflow === 'Wrap') && !isVertical) {\n height = (height * (textWrap(categoryLabel.text, gap - padding, multiLevel.textStyle).length));\n }\n multiLevelLabelsHeight[index] = !multiLevelLabelsHeight[index] ? height :\n ((multiLevelLabelsHeight[index] < height) ? height : multiLevelLabelsHeight[index]);\n }\n });\n prevHeight[index] = value;\n value += multiLevelLabelsHeight[index] ? (multiLevelLabelsHeight[index] + padding) : 0;\n });\n axis.multiLevelLabelHeight = value + ((axis.title !== '' || (this.chart.legendModule && this.chart.legendSettings.visible))\n ? padding / 2 : 0);\n if (isVertical) {\n this.yAxisMultiLabelHeight = multiLevelLabelsHeight;\n this.yAxisPrevHeight = prevHeight;\n }\n else {\n this.xAxisMultiLabelHeight = multiLevelLabelsHeight;\n this.xAxisPrevHeight = prevHeight;\n }\n };\n /**\n * render x axis multi level labels\n * @private\n * @return {void}\n */\n MultiLevelLabel.prototype.renderXAxisMultiLevelLabels = function (axis, index, parent, axisRect) {\n var _this = this;\n var x;\n var y;\n var padding = 10;\n var startX;\n var startY = (axis.labelPosition === axis.tickPosition ? axis.majorTickLines.height : 0) +\n (axis.maxLabelSize.height) + padding;\n var endX;\n var endY;\n var pathRect = '';\n var start;\n var end;\n var labelSize;\n var clipY;\n var isOutside = axis.labelPosition === 'Outside';\n var gap;\n var anchor;\n var isInversed = axis.isInversed;\n var argsData;\n var labelElement;\n var opposedPosition = axis.opposedPosition;\n clipY = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ?\n (axisRect.y + startY - axis.majorTickLines.width) : (axisRect.y - startY - axis.multiLevelLabelHeight);\n this.createClipRect(axisRect.x - axis.majorTickLines.width, clipY, axis.multiLevelLabelHeight + padding, axisRect.width + 2 * axis.majorTickLines.width, this.chart.element.id + '_XAxis_Clippath_' + index, this.chart.element.id + 'XAxisMultiLevelLabel' + index);\n axis.multiLevelLabels.map(function (multiLevel, level) {\n pathRect = '';\n multiLevel.categories.map(function (categoryLabel, i) {\n labelElement = _this.chart.renderer.createGroup({ id: _this.chart.element.id + index + '_MultiLevelLabel' + level });\n start = typeof categoryLabel.start === 'string' ? Number(new Date(categoryLabel.start)) : categoryLabel.start;\n end = typeof categoryLabel.end === 'string' ? Number(new Date(categoryLabel.end)) : categoryLabel.end;\n if (((start >= axis.visibleRange.min && start <= axis.visibleRange.max)\n || (end >= axis.visibleRange.min && end <= axis.visibleRange.max))) {\n argsData = _this.triggerMultiLabelRender(axis, categoryLabel.text, axis.multiLevelLabels[level].textStyle, axis.multiLevelLabels[level].alignment);\n if (!argsData.cancel) {\n startX = valueToCoefficient(start, axis) * axisRect.width;\n endX = valueToCoefficient(end, axis) * axisRect.width;\n endX = isInversed ? [startX, startX = endX][0] : endX;\n labelSize = measureText(argsData.text, argsData.textStyle);\n gap = ((categoryLabel.maximumTextWidth === null) ? endX - startX : categoryLabel.maximumTextWidth) - padding;\n x = startX + axisRect.x + padding;\n y = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ? (startY + axisRect.y +\n labelSize.height / 2 + padding + _this.xAxisPrevHeight[level]) : (axisRect.y - startY + labelSize.height / 2 -\n _this.xAxisMultiLabelHeight[level] - _this.xAxisPrevHeight[level]);\n if (argsData.alignment === 'Center') {\n x += (endX - startX - padding) / 2;\n anchor = 'middle';\n }\n else if (argsData.alignment === 'Far') {\n x = x + (endX - startX - padding) - multiLevel.border.width / 2;\n anchor = 'end';\n }\n else {\n anchor = 'start';\n x += multiLevel.border.width / 2;\n }\n y = multiLevel.border.type === 'CurlyBrace' ?\n (((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? y + padding : y - padding / 2) : y;\n var options = new TextOption(_this.chart.element.id + index + '_Axis_MultiLevelLabel_Level_' + level + '_Text_' + i, x, y, anchor, argsData.text);\n if (multiLevel.overflow !== 'None') {\n options.text = (multiLevel.overflow === 'Wrap') ?\n textWrap(argsData.text, gap, argsData.textStyle) : textTrim(gap, argsData.text, argsData.textStyle);\n options.x = options.x - padding / 2;\n }\n textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement);\n if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {\n pathRect = _this.renderXAxisLabelBorder(level, endX - startX - padding, axis, startX, startY, labelSize, options, axisRect, argsData.alignment, pathRect, isOutside, opposedPosition);\n }\n _this.multiElements.appendChild(labelElement);\n }\n }\n });\n if (pathRect !== '') {\n _this.createBorderElement(level, index, axis, pathRect);\n }\n });\n parent.appendChild(this.multiElements);\n };\n /**\n * render x axis multi level labels border\n * @private\n * @return {void}\n */\n MultiLevelLabel.prototype.renderXAxisLabelBorder = function (labelIndex, gap, axis, startX, startY, labelSize, textOptions, axisRect, alignment, path, isOutside, opposedPosition) {\n var padding = 10;\n var padding1;\n var padding2;\n var value;\n var value1;\n var groupLabel = axis.multiLevelLabels[labelIndex];\n var width = gap + padding;\n var height = this.xAxisMultiLabelHeight[labelIndex] + padding;\n var x = startX + axisRect.x;\n var y = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ?\n (startY + axisRect.y + this.xAxisPrevHeight[labelIndex]) : (axisRect.y - startY - this.xAxisPrevHeight[labelIndex]);\n switch (groupLabel.border.type) {\n case 'WithoutTopandBottomBorder':\n case 'Rectangle':\n case 'WithoutTopBorder':\n height = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? height : -height;\n path += 'M' + x + ' ' + y + 'L' + x + ' ' + (y + height) +\n 'M' + (x + width) + ' ' + y + 'L' + (x + width) + ' ' + (y + height);\n path += (groupLabel.border.type !== 'WithoutTopandBottomBorder') ? ('L' + ' ' + (x) + ' ' + (y + height) + ' ') : ' ';\n path += groupLabel.border.type === 'Rectangle' ? ('M' + x + ' ' + y + 'L' + (x + width) + ' ' + y) : ' ';\n break;\n case 'Brace':\n if (alignment === 'Near') {\n value = textOptions.x;\n value1 = textOptions.x + labelSize.width + 2;\n }\n else if (alignment === 'Center') {\n value = textOptions.x - labelSize.width / 2 - 2;\n value1 = textOptions.x + labelSize.width / 2 + 2;\n }\n else {\n value = textOptions.x - labelSize.width - 2;\n value1 = textOptions.x;\n }\n height = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? height : -height;\n path += 'M' + x + ' ' + y + 'L' + x + ' ' + (y + height / 2) +\n 'M' + x + ' ' + (y + height / 2) + 'L' + (value - 2) + ' ' + (y + height / 2) +\n 'M' + (value1) + ' ' + (y + height / 2) + 'L' + (x + width) + ' ' + (y + height / 2) +\n 'M' + (x + width) + ' ' + (y + height / 2) + 'L' + (x + width) + ' ' + (y);\n break;\n case 'CurlyBrace':\n if ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) {\n padding = 10;\n padding1 = 15;\n padding2 = 5;\n }\n else {\n padding = -10;\n padding1 = -15;\n padding2 = -5;\n }\n if (alignment === 'Center') {\n path += 'M' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +\n (y + padding) + 'L' + (x + width / 2 - 5) + ' ' + (y + padding) + 'L' + (x + width / 2) + ' ' + (y + padding1) +\n 'L' + (x + width / 2 + 5) + ' ' + (y + padding) + 'L' + (x + width - 10) + ' ' + (y + padding) + ' C ' +\n (x + width - 10) + ' ' + (y + padding) + ' ' + (x + width) + ' ' + (y + padding2) + ' ' + (x + width) + ' ' + (y);\n }\n else if (alignment === 'Near') {\n path += 'M' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +\n (y + padding) + 'L' + (x + 15) + ' ' + (y + padding1) + 'L' + (x + 20) + ' ' + (y + padding) + 'L' +\n (x + width - 10) + ' ' + (y + padding) + ' C ' + (x + width - 10) + ' ' + (y + padding) + ' ' + (x + width) + ' '\n + (y + padding2) + ' ' + (x + width) + ' ' + (y);\n }\n else {\n path += 'M' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + 5) + ' ' + (y + padding) + ' ' + (x + 10) + ' ' +\n (y + padding) + 'L' + (x + width - 20) + ' ' + (y + padding) + 'L' + (x + width - 15) + ' ' + (y + padding1) +\n 'L' + (x + width - 10) + ' ' + (y + padding) + 'L' + (x + width - 10) + ' ' + (y + padding) + ' C '\n + (x + width - 10) + ' ' + (y + padding) + ' ' + (x + width) + ' ' + (y + padding2) + ' ' + (x + width) + ' ' + (y);\n }\n break;\n }\n return path;\n };\n /**\n * render y axis multi level labels\n * @private\n * @return {void}\n */\n MultiLevelLabel.prototype.renderYAxisMultiLevelLabels = function (axis, index, parent, rect) {\n var _this = this;\n var labelSize;\n var clipX;\n var isOutside = axis.labelPosition === 'Outside';\n var x;\n var y;\n var padding = 10;\n var startX = (axis.tickPosition === axis.labelPosition ? axis.majorTickLines.height : 0) +\n (axis.maxLabelSize.width) + padding;\n var startY;\n var path = '';\n var labelElement;\n var endY;\n var argsData;\n var isInversed = axis.isInversed;\n var start;\n var end;\n var gap;\n var anchor = 'middle';\n var opposedPosition = axis.opposedPosition;\n clipX = ((opposedPosition && !isOutside) || (!opposedPosition && isOutside)) ?\n (rect.x - axis.multiLevelLabelHeight - startX - padding) : (rect.x + startX);\n this.createClipRect(clipX, rect.y - axis.majorTickLines.width, rect.height + 2 * axis.majorTickLines.width, axis.multiLevelLabelHeight + padding, this.chart.element.id + '_YAxis_Clippath_' + index, this.chart.element.id + 'YAxisMultiLevelLabel' + index);\n axis.multiLevelLabels.map(function (multiLevel, level) {\n path = '';\n multiLevel.categories.map(function (categoryLabel, i) {\n labelElement = _this.chart.renderer.createGroup({ id: _this.chart.element.id + index + '_MultiLevelLabel' + level });\n end = typeof categoryLabel.end === 'string' ? Number(new Date(categoryLabel.end)) : categoryLabel.end;\n start = typeof categoryLabel.start === 'string' ? Number(new Date(categoryLabel.start)) : categoryLabel.start;\n if (((start >= axis.visibleRange.min && start <= axis.visibleRange.max)\n || (end >= axis.visibleRange.min && end <= axis.visibleRange.max))) {\n startY = valueToCoefficient((start), axis) * (rect.height);\n endY = valueToCoefficient((end), axis) * (rect.height);\n endY = isInversed ? [startY, startY = endY][0] : endY;\n argsData = _this.triggerMultiLabelRender(axis, categoryLabel.text, multiLevel.textStyle, multiLevel.alignment);\n if (!argsData.cancel) {\n labelSize = measureText(argsData.text, argsData.textStyle);\n gap = endY - startY;\n x = rect.x - startX - _this.yAxisPrevHeight[level] -\n (_this.yAxisMultiLabelHeight[level] / 2) - padding / 2;\n y = rect.height + rect.y - startY - (gap / 2);\n if (opposedPosition) {\n x = isOutside ? rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +\n _this.yAxisPrevHeight[level] : rect.x - startX - (_this.yAxisMultiLabelHeight[level] / 2) -\n _this.yAxisPrevHeight[level] - padding / 2;\n }\n else {\n x = isOutside ? x : rect.x + startX + padding / 2 + (_this.yAxisMultiLabelHeight[level] / 2) +\n _this.yAxisPrevHeight[level];\n }\n if (argsData.alignment === 'Center') {\n y += labelSize.height / 4;\n }\n else if (argsData.alignment === 'Far') {\n y += gap / 2 - labelSize.height / 2;\n }\n else {\n y = y - gap / 2 + labelSize.height;\n }\n x = multiLevel.border.type === 'CurlyBrace' ? (((!opposedPosition && isOutside) ||\n (opposedPosition && !isOutside)) ? x - padding : x + padding) : x;\n var options = new TextOption(_this.chart.element.id + index + '_Axis_MultiLevelLabel_Level_' + level + '_Text_' + i, x, y, anchor, argsData.text);\n options.text = (multiLevel.overflow === 'Trim') ?\n textTrim((categoryLabel.maximumTextWidth === null ? _this.yAxisMultiLabelHeight[level] :\n categoryLabel.maximumTextWidth), argsData.text, argsData.textStyle) : options.text;\n textElement(options, argsData.textStyle, argsData.textStyle.color || _this.chart.themeStyle.axisLabel, labelElement);\n if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {\n path = _this.renderYAxisLabelBorder(level, gap, axis, endY, startX, startY, labelSize, options, rect, argsData.alignment, path, isOutside, opposedPosition);\n }\n _this.multiElements.appendChild(labelElement);\n }\n }\n });\n if (path !== '') {\n _this.createBorderElement(level, index, axis, path);\n }\n });\n parent.appendChild(this.multiElements);\n };\n /**\n * render y axis multi level labels border\n * @private\n * @return {void}\n */\n MultiLevelLabel.prototype.renderYAxisLabelBorder = function (labelIndex, gap, axis, endY, startX, startY, labelSize, textOptions, rect, alignment, path, isOutside, opposedPosition) {\n var height = endY - startY;\n var padding = 10;\n var padding1;\n var padding2;\n var groupLabel = axis.multiLevelLabels[labelIndex];\n var y = rect.y + rect.height - endY;\n var width = this.yAxisMultiLabelHeight[labelIndex] + padding;\n var x = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? rect.x - startX -\n this.yAxisPrevHeight[labelIndex] : rect.x + startX + this.yAxisPrevHeight[labelIndex];\n switch (groupLabel.border.type) {\n case 'WithoutTopandBottomBorder':\n case 'Rectangle':\n case 'WithoutTopBorder':\n width = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? -width : width;\n path += 'M' + x + ' ' + y + 'L' + (x + width) + ' ' + y +\n 'M' + x + ' ' + (y + height) + 'L' + (x + width) + ' ' + (y + height);\n path += (groupLabel.border.type !== 'WithoutTopandBottomBorder') ? ('L' + ' ' + (x + width) + ' ' + y + ' ') : ' ';\n path += (groupLabel.border.type === 'Rectangle') ? ('M' + (x) + ' ' + (y + height) + 'L' + ' ' + (x) + ' ' + y + ' ') : ' ';\n break;\n case 'Brace':\n width = ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) ? width : -width;\n path += 'M ' + (x) + ' ' + y + ' L ' + (x - width / 2) + ' ' + y + ' L ' + (x - width / 2) + ' ' +\n (textOptions.y - labelSize.height / 2 - 4) + ' M ' + (x - width / 2) + ' ' +\n (textOptions.y + labelSize.height / 4 + 2) +\n ' L ' + (x - width / 2) + ' ' + (y + height) + ' L ' + (x) + ' ' + (y + height);\n break;\n case 'CurlyBrace':\n if ((!opposedPosition && isOutside) || (opposedPosition && !isOutside)) {\n padding = -10;\n padding1 = -15;\n padding2 = -5;\n }\n else {\n padding = 10;\n padding1 = 15;\n padding2 = 5;\n }\n if (alignment === 'Center') {\n path += 'M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)\n + ' L ' + (x + padding) + ' ' + (y + (height - 10) / 2) + ' L ' + (x + padding1) + ' ' + (y + (height - 10) / 2 + 5)\n + ' L ' + (x + padding) + ' ' + (y + (height - 10) / 2 + 10) + ' L ' + (x + padding) + ' ' + (y + (height - 10)) +\n ' C ' + (x + padding) + ' ' + (y + (height - 10)) + ' ' + (x + padding2) + ' ' + (y + height) + ' '\n + x + ' ' + (y + height);\n }\n else if (alignment === 'Far') {\n path += 'M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)\n + ' L ' + (x + padding) + ' ' + (y + height - 20) + ' ' + ' L ' + (x + padding1) + ' ' + (y + (height - 15)) +\n ' L ' + (x + padding) + ' ' + (y + (height - 10)) + ' L ' + (x + padding) + ' ' + (y + (height - 10)) +\n ' C' + (x + padding) + ' ' + (y + (height - 10)) + ' ' + (x + padding) + ' ' + (y + height) + ' ' + x + ' '\n + (y + height);\n }\n else {\n path += 'M ' + x + ' ' + y + ' C ' + x + ' ' + y + ' ' + (x + padding) + ' ' + y + ' ' + (x + padding) + ' ' + (y + 10)\n + ' L ' + (x + padding1) + ' ' + (y + 15) +\n ' L ' + (x + padding) + ' ' + (y + 20) + ' L ' + (x + padding) + ' ' + (y + (height - 10)) +\n ' C' + (x + padding) + ' ' + (y + (height - 10)) + ' ' + (x + padding2) + ' ' + (y + height) + ' ' + x +\n ' ' + (y + height);\n }\n break;\n }\n return path;\n };\n /**\n * create cliprect\n * @return {void}\n * @private\n */\n MultiLevelLabel.prototype.createClipRect = function (x, y, height, width, clipId, axisId) {\n this.multiElements = this.chart.renderer.createGroup({\n 'id': axisId,\n 'clip-path': 'url(#' + clipId + ')'\n });\n this.multiElements.appendChild(this.chart.renderer.drawClipPath({\n 'id': clipId,\n 'x': x,\n 'y': y,\n 'width': width,\n 'height': height,\n 'fill': 'white',\n 'stroke-width': 1, 'stroke': 'Gray'\n }));\n };\n /**\n * create borer element\n * @return {void}\n * @private\n */\n MultiLevelLabel.prototype.createBorderElement = function (borderIndex, axisIndex, axis, path) {\n var borderElement = this.chart.renderer.drawPath(new PathOption(this.chart.element.id + axisIndex + '_Axis_MultiLevelLabel_Rect_' + borderIndex, 'Transparent', axis.multiLevelLabels[borderIndex].border.width, axis.multiLevelLabels[borderIndex].border.color || this.chart.themeStyle.axisLine, 1, '', path));\n borderElement.setAttribute('style', 'pointer-events: none');\n this.multiElements.appendChild(borderElement);\n };\n /**\n * Triggers the event.\n * @return {void}\n * @private\n */\n MultiLevelLabel.prototype.triggerMultiLabelRender = function (axis, text, textStyle, textAlignment) {\n var argsData;\n argsData = {\n cancel: false, name: axisMultiLabelRender, axis: axis,\n text: text, textStyle: textStyle, alignment: textAlignment\n };\n this.chart.trigger(axisMultiLabelRender, argsData);\n return argsData;\n };\n /**\n * To get the module name for `MultiLevelLabel`.\n * @private\n */\n MultiLevelLabel.prototype.getModuleName = function () {\n return 'MultiLevelLabel';\n };\n /**\n * To destroy the `MultiLevelLabel` module.\n * @private\n */\n MultiLevelLabel.prototype.destroy = function () {\n // destroy peform here\n };\n return MultiLevelLabel;\n}());\nexport { MultiLevelLabel };\n","/**\n * Defines the common functionalities of accumulation series\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { degreeToLocation, getElement, indexFinder } from '../../common/utils/helper';\nimport { pointByIndex } from '../model/acc-base';\n/**\n * Accumulation Base used to do some base calculation for accumulation chart.\n */\nvar AccumulationBase = /** @class */ (function () {\n /** @private */\n function AccumulationBase(accumulation) {\n this.accumulation = accumulation;\n }\n Object.defineProperty(AccumulationBase.prototype, \"center\", {\n /**\n * Gets the center of the pie\n * @private\n */\n get: function () {\n return this.pieCenter || (this.accumulation.visibleSeries[0].type === 'Pie' ?\n this.accumulation.pieSeriesModule.center : null);\n },\n /**\n * Sets the center of the pie\n * @private\n */\n set: function (value) {\n this.pieCenter = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(AccumulationBase.prototype, \"radius\", {\n /**\n * Gets the radius of the pie\n * @private\n */\n get: function () {\n return this.pieRadius !== undefined ? this.pieRadius :\n this.accumulation.pieSeriesModule.radius;\n },\n /**\n * Sets the radius of the pie\n * @private\n */\n set: function (value) {\n this.pieRadius = value;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(AccumulationBase.prototype, \"labelRadius\", {\n /**\n * Gets the label radius of the pie\n * @private\n */\n get: function () {\n return this.pieLabelRadius !== undefined ? this.pieLabelRadius :\n this.accumulation.pieSeriesModule.labelRadius;\n },\n /**\n * Sets the label radius of the pie\n * @private\n */\n set: function (value) {\n this.pieLabelRadius = value;\n },\n enumerable: true,\n configurable: true\n });\n /**\n * Checks whether the series is circular or not\n * @private\n */\n AccumulationBase.prototype.isCircular = function () {\n return this.accumulation.type === 'Pie';\n };\n /**\n * To process the explode on accumulation chart loading\n * @private\n */\n AccumulationBase.prototype.processExplode = function (event) {\n if (event.target.id.indexOf('_Series_') > -1 || event.target.id.indexOf('_datalabel_') > -1) {\n var pointIndex = indexFinder(event.target.id).point;\n if (isNaN(pointIndex) || (event.target.id.indexOf('_datalabel_') > -1 &&\n this.accumulation.visibleSeries[0].points[pointIndex].labelPosition === 'Outside')) {\n return null;\n }\n this.explodePoints(pointIndex, this.accumulation);\n this.deExplodeAll(pointIndex);\n }\n };\n /**\n * To invoke the explode on accumulation chart loading\n * @private\n */\n AccumulationBase.prototype.invokeExplode = function () {\n if (this.accumulation.visibleSeries[0].explodeAll) {\n for (var _i = 0, _a = this.accumulation.visibleSeries[0].points; _i < _a.length; _i++) {\n var point = _a[_i];\n this.explodePoints(point.index, this.accumulation);\n }\n }\n else if (!isNullOrUndefined(this.accumulation.visibleSeries[0].explodeIndex)) {\n this.explodePoints(this.accumulation.visibleSeries[0].explodeIndex, this.accumulation);\n }\n if (this.accumulation.accumulationSelectionModule && this.accumulation.selectionMode !== 'None' &&\n this.accumulation.accumulationSelectionModule.selectedDataIndexes.length) {\n for (var _b = 0, _c = this.accumulation.accumulationSelectionModule.selectedDataIndexes; _b < _c.length; _b++) {\n var index = _c[_b];\n this.explodePoints(index.point, this.accumulation, true);\n this.deExplodeAll(index.point);\n }\n }\n };\n /**\n * To deExplode all points in the series\n */\n AccumulationBase.prototype.deExplodeAll = function (index) {\n var pointId = this.accumulation.element.id + '_Series_0_Point_';\n var points = this.accumulation.visibleSeries[0].points;\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var currentPoint = points_1[_i];\n if (index !== currentPoint.index) {\n this.deExplodeSlice(currentPoint.index, pointId, this.center);\n }\n }\n };\n /**\n * To explode point by index\n * @private\n */\n AccumulationBase.prototype.explodePoints = function (index, chart, explode) {\n if (explode === void 0) { explode = false; }\n var pointId = this.accumulation.element.id + '_Series_0_Point_';\n var translate;\n var points = this.accumulation.visibleSeries[0].points;\n var point = pointByIndex(index, this.accumulation.visibleSeries[0].points);\n if (isNullOrUndefined(point)) {\n return null;\n }\n if (!this.isCircular()) {\n translate = { x: chart.explodeDistance, y: 0 };\n }\n else {\n translate = degreeToLocation(point.midAngle, chart.explodeDistance, this.center);\n }\n if (this.isExplode(pointId + index) || explode) {\n this.explodeSlice(index, translate, pointId, this.center || { x: 0, y: 0 });\n }\n else {\n this.deExplodeSlice(index, pointId, this.center);\n }\n };\n /**\n * To check point is exploded by id\n */\n AccumulationBase.prototype.isExplode = function (id) {\n var element = getElement(id);\n if (element && (element.getAttribute('transform') === 'translate(0, 0)' || element.getAttribute('transform') === null ||\n element.getAttribute('transform') === 'translate(0)')) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * To deExplode the point by index\n */\n AccumulationBase.prototype.deExplodeSlice = function (index, sliceId, center) {\n var position = 'translate(0, 0)';\n this.setTranslate(index, sliceId, position);\n };\n /**\n * To translate the point elements by index and position\n */\n AccumulationBase.prototype.setTranslate = function (index, sliceId, position) {\n this.setElementTransform(sliceId + index, position);\n if (this.accumulation.visibleSeries[0].dataLabel.visible) {\n sliceId = this.accumulation.element.id + '_datalabel_Series_0_';\n this.setElementTransform(sliceId + 'shape_' + index, position);\n this.setElementTransform(sliceId + 'text_' + index, position);\n this.setElementTransform(sliceId + 'connector_' + index, position);\n }\n };\n /**\n * To translate the point element by id and position\n */\n AccumulationBase.prototype.setElementTransform = function (id, position) {\n var element = getElement(id);\n if (element) {\n element.setAttribute('transform', position);\n }\n };\n /**\n * To translate the point elements by index position\n */\n AccumulationBase.prototype.explodeSlice = function (index, translate, sliceId, center) {\n var position = 'translate(' + (translate.x - center.x) + ', ' + (translate.y - center.y) + ')';\n this.setTranslate(index, sliceId, position);\n };\n return AccumulationBase;\n}());\nexport { AccumulationBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Accumulation charts base file\n */\nimport { Animation } from '@syncfusion/ej2-base';\nimport { stringToNumber, ChartLocation, degreeToLocation, Rect, getAnimationFunction, getElement } from '../../common/utils/helper';\nimport { animationComplete } from '../../common/model/constants';\nimport { AccumulationBase } from './accumulation-base';\n/**\n * PieBase class used to do pie base calculations.\n */\nvar PieBase = /** @class */ (function (_super) {\n __extends(PieBase, _super);\n function PieBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * To initialize the property values.\n * @private\n */\n PieBase.prototype.initProperties = function (chart, series) {\n this.accumulation = chart;\n var size = Math.min(chart.initialClipRect.width, chart.initialClipRect.height);\n this.initAngles(series);\n this.radius = stringToNumber(series.radius, size / 2);\n this.innerRadius = stringToNumber(series.innerRadius, this.radius);\n this.labelRadius = series.dataLabel.position === 'Inside' ? (((this.radius - this.innerRadius) / 2) + this.innerRadius) :\n (this.radius + stringToNumber(series.dataLabel.connectorStyle.length || '4%', size / 2));\n chart.explodeDistance = series.explode ? stringToNumber(series.explodeOffset, this.radius) : 0;\n this.findCenter(chart, series);\n this.defaultLabelBound(series, series.dataLabel.visible, series.dataLabel.position);\n this.totalAngle -= 0.001;\n };\n /**\n * To find the center of the accumulation.\n * @private\n */\n PieBase.prototype.findCenter = function (accumulation, series) {\n this.accumulation = accumulation;\n this.center = {\n x: stringToNumber('50%', accumulation.initialClipRect.width) + (accumulation.initialClipRect.x),\n y: stringToNumber('50%', accumulation.initialClipRect.height) + (accumulation.initialClipRect.y)\n };\n var accumulationRect = this.getSeriesBound(series);\n var accumulationRectCenter = new ChartLocation(accumulationRect.x + accumulationRect.width / 2, accumulationRect.y + accumulationRect.height / 2);\n this.center.x += (this.center.x - accumulationRectCenter.x);\n this.center.y += (this.center.y - accumulationRectCenter.y);\n this.accumulation.center = this.center;\n };\n /**\n * To find angles from series.\n */\n PieBase.prototype.initAngles = function (series) {\n this.totalAngle = (series.endAngle - series.startAngle) % 360;\n this.startAngle = series.startAngle - 90;\n this.totalAngle = this.totalAngle <= 0 ? (360 + this.totalAngle) : this.totalAngle;\n this.startAngle = (this.startAngle < 0 ? (this.startAngle + 360) : this.startAngle) % 360;\n };\n /**\n * To calculate data-label bound\n * @private\n */\n PieBase.prototype.defaultLabelBound = function (series, visible, position) {\n var accumulationBound = this.getSeriesBound(series);\n series.accumulationBound = accumulationBound;\n series.labelBound = new Rect(accumulationBound.x, accumulationBound.y, accumulationBound.width + accumulationBound.x, accumulationBound.height + accumulationBound.y);\n if (visible && position === 'Outside') {\n series.labelBound = new Rect(Infinity, Infinity, -Infinity, -Infinity);\n }\n };\n /**\n * To calculate series bound\n * @private\n */\n PieBase.prototype.getSeriesBound = function (series) {\n var rect = new Rect(Infinity, Infinity, -Infinity, -Infinity);\n this.initAngles(series);\n var start = this.startAngle;\n var total = this.totalAngle;\n var end = (this.startAngle + total) % 360;\n end = (end === 0) ? 360 : end;\n series.findMaxBounds(rect, this.getRectFromAngle(start));\n series.findMaxBounds(rect, this.getRectFromAngle(end));\n series.findMaxBounds(rect, new Rect(this.center.x, this.center.y, 0, 0));\n var nextQuandrant = (Math.floor(start / 90) * 90 + 90) % 360;\n var lastQuadrant = (Math.floor(end / 90) * 90) % 360;\n lastQuadrant = (lastQuadrant === 0) ? 360 : lastQuadrant;\n if (total >= 90 || lastQuadrant === nextQuandrant) {\n series.findMaxBounds(rect, this.getRectFromAngle(nextQuandrant));\n series.findMaxBounds(rect, this.getRectFromAngle(lastQuadrant));\n }\n if (start === 0 || (start + total >= 360)) {\n series.findMaxBounds(rect, this.getRectFromAngle(0));\n }\n var length = nextQuandrant === lastQuadrant ? 0 : Math.floor(total / 90);\n for (var i = 1; i < length; i++) {\n nextQuandrant = nextQuandrant + 90;\n if ((nextQuandrant < lastQuadrant || end < start) || total === 360) {\n series.findMaxBounds(rect, this.getRectFromAngle(nextQuandrant));\n }\n }\n rect.width -= rect.x;\n rect.height -= rect.y;\n return rect;\n };\n /**\n * To get rect location size from angle\n */\n PieBase.prototype.getRectFromAngle = function (angle) {\n var location = degreeToLocation(angle, this.radius, this.center);\n return new Rect(location.x, location.y, 0, 0);\n };\n /**\n * To get path arc direction\n */\n PieBase.prototype.getPathArc = function (center, start, end, radius, innerRadius) {\n var degree = end - start;\n degree = degree < 0 ? (degree + 360) : degree;\n var flag = (degree < 180) ? 0 : 1;\n if (!innerRadius && innerRadius === 0) {\n return this.getPiePath(center, degreeToLocation(start, radius, center), degreeToLocation(end, radius, center), radius, flag);\n }\n else {\n return this.getDoughnutPath(center, degreeToLocation(start, radius, center), degreeToLocation(end, radius, center), radius, degreeToLocation(start, innerRadius, center), degreeToLocation(end, innerRadius, center), innerRadius, flag);\n }\n };\n /**\n * To get pie direction\n */\n PieBase.prototype.getPiePath = function (center, start, end, radius, clockWise) {\n return 'M ' + center.x + ' ' + center.y + ' L ' + start.x + ' ' + start.y + ' A ' + radius + ' ' +\n radius + ' 0 ' + clockWise + ' 1 ' + end.x + ' ' + end.y + ' Z';\n };\n /**\n * To get doughnut direction\n */\n PieBase.prototype.getDoughnutPath = function (center, start, end, radius, innerStart, innerEnd, innerRadius, clockWise) {\n return 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' + radius + ' 0 ' + clockWise +\n ' 1 ' + end.x + ' ' + end.y + ' L ' + innerEnd.x + ' ' + innerEnd.y + ' A ' + innerRadius +\n ' ' + innerRadius + ' 0 ' + clockWise + ',0 ' + innerStart.x + ' ' + innerStart.y + ' Z';\n };\n /**\n * Method to start animation for pie series.\n */\n PieBase.prototype.doAnimation = function (slice, series) {\n var _this = this;\n var startAngle = series.startAngle - 85;\n var value;\n var radius = Math.max(this.accumulation.availableSize.height, this.accumulation.availableSize.width) * 0.75;\n radius += radius * (0.414); // formula r + r / 2 * (1.414 -1)\n var effect = getAnimationFunction('Linear'); // need to check animation type\n new Animation({}).animate(slice, {\n duration: series.animation.duration,\n delay: series.animation.delay,\n progress: function (args) {\n value = effect(args.timeStamp, startAngle, _this.totalAngle, args.duration);\n slice.setAttribute('d', _this.getPathArc(_this.center, startAngle, value, radius, 0));\n },\n end: function (args) {\n slice.setAttribute('d', _this.getPathArc(_this.center, 0, 359.99999, radius, 0));\n _this.accumulation.trigger(animationComplete, { series: series, accumulation: _this.accumulation });\n var datalabelGroup = getElement(_this.accumulation.element.id + '_datalabel_Series_' + series.index);\n datalabelGroup.style.visibility = _this.accumulation.isDestroyed ? 'hidden' : 'visible';\n }\n });\n };\n return PieBase;\n}(AccumulationBase));\nexport { PieBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { PathOption, degreeToLocation } from '../../common/utils/helper';\nimport { PieBase } from '../renderer/pie-base';\n/**\n * PieSeries module used to render `Pie` Series.\n */\nvar PieSeries = /** @class */ (function (_super) {\n __extends(PieSeries, _super);\n function PieSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * To get path option, degree, symbolLocation from the point.\n * @private\n */\n PieSeries.prototype.renderPoint = function (point, series, chart, option) {\n var sum = series.sumOfPoints;\n var degree = (sum) ? ((Math.abs(point.y) / sum) * (this.totalAngle)) : null;\n option.d = this.getPathOption(point, degree);\n point.midAngle = (this.startAngle - (degree / 2)) % 360;\n point.endAngle = this.startAngle % 360;\n point.symbolLocation = degreeToLocation(point.midAngle, (this.radius + this.innerRadius) / 2, this.center);\n return option;\n };\n /**\n * To get path option from the point.\n */\n PieSeries.prototype.getPathOption = function (point, degree) {\n if (degree === null || !point.y) {\n return '';\n }\n var path = this.getPathArc(this.center, this.startAngle % 360, (this.startAngle + degree) % 360, this.radius, this.innerRadius);\n this.startAngle += degree;\n return path;\n };\n /**\n * To animate the pie series.\n * @private\n */\n PieSeries.prototype.animateSeries = function (accumulation, option, series, slice) {\n var groupId = accumulation.element.id + 'SeriesGroup' + series.index;\n if (series.animation.enable && accumulation.animateSeries) {\n var clippath = accumulation.renderer.createClipPath({ id: groupId + '_clipPath' });\n var path = new PathOption(groupId + '_slice', 'transparent', 1, 'transparent', 1, '', '');\n var clipslice = accumulation.renderer.drawPath(path);\n clippath.appendChild(clipslice);\n accumulation.svgObject.appendChild(clippath);\n slice.setAttribute('style', 'clip-path:url(#' + clippath.id + ')');\n this.doAnimation(clipslice, series);\n }\n };\n /**\n * To get the module name of the Pie series.\n */\n PieSeries.prototype.getModuleName = function () {\n return 'PieSeries';\n };\n /**\n * To destroy the pie series.\n * @return {void}\n * @private\n */\n PieSeries.prototype.destroy = function (accumulation) {\n /**\n * Destroy method calling here\n */\n };\n return PieSeries;\n}(PieBase));\nexport { PieSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/**\n * AccumulationChart file\n */\nimport { Property, Component, Complex, Collection, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { Internationalization, Event, Browser, EventHandler, Touch } from '@syncfusion/ej2-base';\nimport { remove, extend, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';\nimport { Font, Margin, Border, TooltipSettings, Indexes } from '../common/model/base';\nimport { AccumulationSeries } from './model/acc-base';\nimport { Theme, getThemeColor } from '../common/model/theme';\nimport { load, pointClick } from '../common/model/constants';\nimport { pointMove, chartMouseClick, chartMouseDown } from '../common/model/constants';\nimport { chartMouseLeave, chartMouseMove, chartMouseUp, resized } from '../common/model/constants';\nimport { LegendSettings } from '../common/legend/legend';\nimport { Rect, Size, subtractRect, indexFinder } from '../common/utils/helper';\nimport { measureText, RectOption, showTooltip } from '../common/utils/helper';\nimport { textElement, TextOption, createSvg, calculateSize, removeElement, firstToLowerCase } from '../common/utils/helper';\nimport { getElement, titlePositionX } from '../common/utils/helper';\nimport { Data } from '../common/model/data';\nimport { AccumulationBase } from './renderer/accumulation-base';\nimport { PieSeries } from './renderer/pie-series';\nimport { AccumulationAnnotationSettings } from './model/acc-base';\nimport { ExportUtils } from '../common/utils/export';\nimport { getTitle } from '../common/utils/helper';\n/**\n * Represents the AccumulationChart control.\n * ```html\n * \n * \n * ```\n */\nvar AccumulationChart = /** @class */ (function (_super) {\n __extends(AccumulationChart, _super);\n /**\n * Constructor for creating the AccumulationChart widget\n * @private\n */\n function AccumulationChart(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @private explode radius internal property */\n _this.explodeDistance = 0;\n return _this;\n }\n Object.defineProperty(AccumulationChart.prototype, \"type\", {\n /** @private */\n get: function () {\n if (this.series && this.series.length) {\n return this.series[0].type;\n }\n return 'Pie';\n },\n enumerable: true,\n configurable: true\n });\n // accumulation chart methods\n /**\n * To create svg object, renderer and binding events for the container.\n */\n AccumulationChart.prototype.preRender = function () {\n this.unWireEvents();\n this.setCulture();\n this.animateSeries = true;\n calculateSize(this);\n this.wireEvents();\n };\n /**\n * Themeing for chart goes here\n */\n AccumulationChart.prototype.setTheme = function () {\n /*! Set theme for accumulation chart */\n this.themeStyle = getThemeColor(this.theme);\n };\n /**\n * To render the accumulation chart elements\n */\n AccumulationChart.prototype.render = function () {\n this.trigger(load, { accumulation: this });\n this.setTheme();\n this.accBaseModule = new AccumulationBase(this);\n this.pieSeriesModule = new PieSeries(this);\n this.calculateVisibleSeries();\n this.processData();\n };\n /**\n * Method to unbind events for accumulation chart\n */\n AccumulationChart.prototype.unWireEvents = function () {\n /*! Find the Events type */\n var isIE11Pointer = Browser.isPointer;\n var start = Browser.touchStartEvent;\n var move = Browser.touchMoveEvent;\n var stop = Browser.touchEndEvent;\n var cancel = isIE11Pointer ? 'pointerleave' : 'mouseleave';\n /*! UnBind the Event handler */\n EventHandler.remove(this.element, move, this.accumulationMouseMove);\n EventHandler.remove(this.element, stop, this.accumulationMouseEnd);\n EventHandler.remove(this.element, start, this.accumulationMouseStart);\n EventHandler.remove(this.element, 'click', this.accumulationOnMouseClick);\n EventHandler.remove(this.element, 'contextmenu', this.accumulationRightClick);\n EventHandler.remove(this.element, cancel, this.accumulationMouseLeave);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.accumulationResize);\n };\n /**\n * Method to bind events for the accumulation chart\n */\n AccumulationChart.prototype.wireEvents = function () {\n /*! Find the Events type */\n var isIE11Pointer = Browser.isPointer;\n var start = Browser.touchStartEvent;\n var stop = Browser.touchEndEvent;\n var move = Browser.touchMoveEvent;\n var cancel = isIE11Pointer ? 'pointerleave' : 'mouseleave';\n /*! Bind the Event handler */\n EventHandler.add(this.element, move, this.accumulationMouseMove, this);\n EventHandler.add(this.element, stop, this.accumulationMouseEnd, this);\n EventHandler.add(this.element, start, this.accumulationMouseStart, this);\n EventHandler.add(this.element, 'click', this.accumulationOnMouseClick, this);\n EventHandler.add(this.element, 'contextmenu', this.accumulationRightClick, this);\n EventHandler.add(this.element, cancel, this.accumulationMouseLeave, this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.accumulationResize.bind(this));\n new Touch(this.element); // To avoid geasture blocking for browser\n /*! Apply the style for chart */\n this.setStyle(this.element);\n };\n /**\n * Method to set mouse x, y from events\n */\n AccumulationChart.prototype.setMouseXY = function (e) {\n var pageX;\n var pageY;\n if (e.type.indexOf('touch') > -1) {\n this.isTouch = true;\n var touchArg = e;\n pageY = touchArg.changedTouches[0].clientY;\n pageX = touchArg.changedTouches[0].clientX;\n }\n else {\n this.isTouch = e.pointerType === 'touch' || e.pointerType === '2';\n pageX = e.clientX;\n pageY = e.clientY;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n this.mouseX = (pageX - rect.left) - Math.max(svgRect.left - rect.left, 0);\n this.mouseY = (pageY - rect.top) - Math.max(svgRect.top - rect.top, 0);\n };\n /**\n * Handles the mouse end.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseEnd = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseUp, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n if (this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY, this.isTouch);\n if (this.accumulationDataLabelModule && this.visibleSeries[0].dataLabel.visible) {\n this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY, this.isTouch);\n }\n if (this.accumulationLegendModule && this.legendSettings.visible) {\n this.accumulationLegendModule.move(e);\n }\n }\n this.notify(Browser.touchEndEvent, e);\n return false;\n };\n /*public removeSvgOffset(x: number, y: number): ChartLocation {\n let rect: ClientRect = this.element.getBoundingClientRect();\n let svgRect: ClientRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n return { x: (x - rect.left) - Math.max(svgRect.left - rect.left, 0), y: (y - rect.top) - Math.max(svgRect.top - rect.top, 0)};\n }*/\n /**\n * Handles the mouse start.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseStart = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseDown, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n return false;\n };\n /**\n * Handles the accumulation chart resize.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationResize = function (e) {\n var _this = this;\n this.animateSeries = false;\n var args = {\n accumulation: this,\n previousSize: new Size(this.availableSize.width, this.availableSize.height),\n name: resized,\n currentSize: new Size(0, 0)\n };\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n this.resizeTo = setTimeout(function () {\n if (_this.isDestroyed) {\n clearTimeout(_this.resizeTo);\n return;\n }\n calculateSize(_this);\n args.currentSize = _this.availableSize;\n _this.trigger(resized, args);\n _this.refreshSeries();\n _this.refreshChart();\n }, 500);\n return false;\n };\n /**\n * Handles the export method for chart control.\n */\n AccumulationChart.prototype.export = function (type, fileName, orientation) {\n var exportChart = new ExportUtils(this);\n exportChart.export(type, fileName, orientation);\n };\n /**\n * Handles the print method for accumulation chart control.\n */\n AccumulationChart.prototype.print = function (id) {\n var exportChart = new ExportUtils(this);\n exportChart.print(id);\n };\n /**\n * Applying styles for accumulation chart element\n */\n AccumulationChart.prototype.setStyle = function (element) {\n element.style.touchAction = 'element';\n element.style.msTouchAction = 'element';\n element.style.msContentZooming = 'none';\n element.style.msUserSelect = 'none';\n element.style.webkitUserSelect = 'none';\n element.style.position = 'relative';\n };\n /**\n * Method to set the annotation content dynamically for accumulation.\n */\n AccumulationChart.prototype.setAnnotationValue = function (annotationIndex, content) {\n var annotation = this.annotations[annotationIndex];\n var element;\n var parentNode = getElement(this.element.id + '_Annotation_Collections');\n if (content) {\n annotation.content = content;\n if (parentNode) {\n element = createElement('div');\n removeElement(this.element.id + '_Annotation_' + annotationIndex);\n this.annotationModule.processAnnotation(annotation, annotationIndex, element);\n parentNode.appendChild(element.children[0]);\n }\n else {\n this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));\n }\n }\n };\n /**\n * Handles the mouse move on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseMove = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseMove, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n if (this.pointMove) {\n this.triggerPointEvent(pointMove, e.target);\n }\n if (this.accumulationLegendModule && this.legendSettings.visible) {\n this.accumulationLegendModule.move(e);\n }\n if (this.accumulationDataLabelModule && this.visibleSeries[0] && this.visibleSeries[0].dataLabel.visible) {\n this.accumulationDataLabelModule.move(e, this.mouseX, this.mouseY);\n }\n if (!this.isTouch) {\n this.titleTooltip(e, this.mouseX, this.mouseY);\n }\n this.notify(Browser.touchMoveEvent, e);\n return false;\n };\n AccumulationChart.prototype.titleTooltip = function (event, x, y, isTouch) {\n var targetId = event.target.id;\n if ((event.target.textContent.indexOf('...') > -1) && (targetId === (this.element.id + '_title'))) {\n showTooltip(this.title, x, y, this.element.offsetWidth, this.element.id + '_EJ2_Title_Tooltip', getElement(this.element.id + '_Secondary_Element'), isTouch);\n }\n else {\n removeElement(this.element.id + '_EJ2_Title_Tooltip');\n }\n };\n /**\n * Handles the mouse click on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationOnMouseClick = function (e) {\n this.setMouseXY(e);\n if (this.accumulationLegendModule && this.legendSettings.visible) {\n this.accumulationLegendModule.click(e);\n }\n if (this.selectionMode !== 'None' && this.accumulationSelectionModule) {\n this.accumulationSelectionModule.calculateSelectedElements(this, e);\n }\n if (this.visibleSeries[0].explode) {\n this.accBaseModule.processExplode(e);\n }\n this.trigger(chartMouseClick, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n if (this.pointClick) {\n this.triggerPointEvent(pointClick, e.target);\n }\n return false;\n };\n AccumulationChart.prototype.triggerPointEvent = function (event, element) {\n var indexes = indexFinder(element.id, true);\n if (indexes.series >= 0 && indexes.point >= 0) {\n this.trigger(event, { series: this.series[indexes.series],\n point: this.series[indexes.series].points[indexes.point],\n seriesIndex: indexes.series, pointIndex: indexes.point,\n x: this.mouseX, y: this.mouseY });\n }\n };\n /**\n * Handles the mouse right click on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationRightClick = function (event) {\n if (event.buttons === 2 || event.pointerType === 'touch') {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n return true;\n };\n /**\n * Handles the mouse leave on accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.accumulationMouseLeave = function (e) {\n this.setMouseXY(e);\n this.trigger(chartMouseLeave, { target: e.target.id, x: this.mouseX, y: this.mouseY });\n this.notify(Browser.isPointer ? 'pointerleave' : 'mouseleave', e);\n return false;\n };\n /**\n * Method to set culture for chart\n */\n AccumulationChart.prototype.setCulture = function () {\n this.intl = new Internationalization();\n };\n /**\n * Method to create SVG element for accumulation chart.\n */\n AccumulationChart.prototype.createPieSvg = function () {\n this.removeSvg();\n createSvg(this);\n };\n /**\n * To Remove the SVG from accumulation chart.\n * @return {boolean}\n * @private\n */\n AccumulationChart.prototype.removeSvg = function () {\n removeElement(this.element.id + '_Secondary_Element');\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > 0) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n }\n removeElement('EJ2_legend_tooltip');\n removeElement('EJ2_datalabel_tooltip');\n };\n /**\n * Method to create the secondary element for tooltip, datalabel and annotaitons.\n */\n AccumulationChart.prototype.createSecondaryElement = function () {\n this.element.appendChild(createElement('div', {\n id: this.element.id + '_Secondary_Element',\n styles: 'position: relative'\n }));\n };\n /**\n * Method to find visible series based on series types\n */\n AccumulationChart.prototype.calculateVisibleSeries = function () {\n this.visibleSeries = [];\n for (var i = 0, length_1 = this.series.length; i < length_1; i++) {\n this.series[i].index = i;\n if (this.series[i].type === this.type && this.visibleSeries.length === 0) {\n this.visibleSeries.push(this.series[i]);\n break;\n }\n }\n };\n /**\n * To find points from dataSource\n */\n AccumulationChart.prototype.processData = function () {\n this.seriesCounts = 0;\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n series.dataModule = new Data(series.dataSource, series.query);\n series.refreshDataManager(this);\n }\n };\n /**\n * To refresh the accumulation chart\n * @private\n */\n AccumulationChart.prototype.refreshChart = function () {\n this.doGrouppingProcess();\n this.createPieSvg();\n this.calculateBounds();\n this.renderElements();\n };\n /**\n * Method to find groupped points\n */\n AccumulationChart.prototype.doGrouppingProcess = function () {\n var series = this.visibleSeries[0];\n if (!isNullOrUndefined(series.resultData) && ((!isNullOrUndefined(series.lastGroupTo) &&\n series.lastGroupTo !== series.groupTo))) {\n series.getPoints(series.resultData, this);\n }\n };\n /**\n * Method to calculate bounds for accumulation chart\n */\n AccumulationChart.prototype.calculateBounds = function () {\n this.initialClipRect = new Rect(this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height);\n this.titleCollection = [];\n this.titleCollection = getTitle(this.title, this.titleStyle, this.initialClipRect.width);\n subtractRect(this.initialClipRect, new Rect(0, (measureText(this.title, this.titleStyle).height * this.titleCollection.length), this.margin.right + this.margin.left, this.margin.bottom + this.margin.top));\n this.calculateLegendBounds();\n };\n /*\n * Method to calculate legend bounds for accumulation chart\n */\n AccumulationChart.prototype.calculateLegendBounds = function () {\n if (!this.accumulationLegendModule || !this.legendSettings.visible) {\n return null;\n }\n this.accumulationLegendModule.getLegendOptions(this, this.visibleSeries);\n this.accumulationLegendModule.calculateLegendBounds(this.initialClipRect, this.availableSize);\n };\n /**\n * To render elements for accumulation chart\n * @private\n */\n AccumulationChart.prototype.renderElements = function () {\n this.renderBorder();\n this.renderTitle();\n this.createSecondaryElement();\n this.renderSeries();\n this.renderLegend();\n this.element.appendChild(this.svgObject);\n this.processSelection();\n this.processExplode();\n this.renderAnnotation();\n this.setSecondaryElementPosition();\n this.trigger('loaded', { accumulation: this });\n this.animateSeries = false;\n };\n /**\n * To set the left and top position for data label template for center aligned chart\n */\n AccumulationChart.prototype.setSecondaryElementPosition = function () {\n var tooltipParent = getElement(this.element.id + '_Secondary_Element');\n if (!tooltipParent) {\n return;\n }\n var rect = this.element.getBoundingClientRect();\n var svgRect = getElement(this.element.id + '_svg').getBoundingClientRect();\n tooltipParent.style.left = Math.max(svgRect.left - rect.left, 0) + 'px';\n tooltipParent.style.top = Math.max(svgRect.top - rect.top, 0) + 'px';\n };\n /**\n * To render the annotaitions for accumulation series.\n */\n AccumulationChart.prototype.renderAnnotation = function () {\n if (this.annotationModule) {\n this.annotationModule.renderAnnotations(getElement(this.element.id + '_Secondary_Element'));\n }\n };\n /**\n * Method to process the explode in accumulation chart\n */\n AccumulationChart.prototype.processExplode = function () {\n if (!this.visibleSeries[0].explode) {\n return null;\n }\n this.accBaseModule.invokeExplode();\n };\n /**\n * Method to render series for accumulation chart\n */\n AccumulationChart.prototype.renderSeries = function () {\n this.svgObject.appendChild(this.renderer.createGroup({ id: this.element.id + '_SeriesCollection' }));\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.visible && this[(firstToLowerCase(series.type) + 'SeriesModule')]) {\n this[(firstToLowerCase(series.type) + 'SeriesModule')].initProperties(this, series);\n series.renderSeries(this);\n }\n }\n };\n /**\n * Method to render border for accumulation chart\n */\n AccumulationChart.prototype.renderBorder = function () {\n var padding = this.border.width;\n this.svgObject.appendChild(this.renderer.drawRectangle(new RectOption(this.element.id + '_border', this.background || this.themeStyle.background, this.border, 1, new Rect(padding / 2, padding / 2, this.availableSize.width - padding, this.availableSize.height - padding))));\n };\n /**\n * Method to render legend for accumulation chart\n */\n AccumulationChart.prototype.renderLegend = function () {\n if (!this.accumulationLegendModule || !this.legendSettings.visible) {\n return null;\n }\n if (this.accumulationLegendModule.legendCollections.length) {\n if (this.visibleSeries[0].type === 'Pie') {\n this.accumulationLegendModule.getSmartLegendLocation(this.visibleSeries[0].labelBound, this.accumulationLegendModule.legendBounds, this.margin);\n }\n this.accumulationLegendModule.renderLegend(this, this.legendSettings, this.accumulationLegendModule.legendBounds);\n }\n };\n /**\n * To process the selection in accumulation chart\n */\n AccumulationChart.prototype.processSelection = function () {\n if (!this.accumulationSelectionModule || this.selectionMode === 'None') {\n return null;\n }\n var selectedDataIndexes = extend([], this.accumulationSelectionModule.selectedDataIndexes, null, true);\n this.accumulationSelectionModule.invokeSelection(this);\n if (selectedDataIndexes.length > 0) {\n this.accumulationSelectionModule.selectedDataIndexes = selectedDataIndexes;\n this.accumulationSelectionModule.redrawSelection(this, this.selectionMode);\n }\n };\n /**\n * To render title for accumulation chart\n */\n AccumulationChart.prototype.renderTitle = function () {\n if (!this.title) {\n return null;\n }\n var titleSize = measureText(this.title, this.titleStyle);\n var anchor = this.titleStyle.textAlignment === 'Near' ? 'start' :\n this.titleStyle.textAlignment === 'Far' ? 'end' : 'middle';\n textElement(new TextOption(this.element.id + '_title', titlePositionX(this.availableSize, this.margin.left, this.margin.left, this.titleStyle), this.margin.top + (titleSize.height * 3 / 4), anchor, this.titleCollection, '', 'auto'), this.titleStyle, this.titleStyle.color || this.themeStyle.chartTitle, this.svgObject);\n };\n /**\n * To get the series parent element\n * @private\n */\n AccumulationChart.prototype.getSeriesElement = function () {\n return this.svgObject.getElementsByTagName('g')[0];\n };\n /**\n * To refresh the all visible series points\n * @private\n */\n AccumulationChart.prototype.refreshSeries = function () {\n for (var _i = 0, _a = this.visibleSeries; _i < _a.length; _i++) {\n var series = _a[_i];\n this.refreshPoints(series.points);\n }\n };\n /**\n * To refresh points label region and visible\n * @private\n */\n AccumulationChart.prototype.refreshPoints = function (points) {\n for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {\n var point = points_1[_i];\n point.labelPosition = null;\n point.labelRegion = null;\n point.labelVisible = true;\n }\n };\n /**\n * To get Module name\n * @private\n */\n AccumulationChart.prototype.getModuleName = function () {\n return 'accumulationchart';\n };\n /**\n * To destroy the accumulationcharts\n * @private\n */\n AccumulationChart.prototype.destroy = function () {\n this.unWireEvents();\n _super.prototype.destroy.call(this);\n this.element.classList.remove('e-accumulationchart');\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n AccumulationChart.prototype.requiredModules = function () {\n var modules = [];\n var enableAnnotation = false;\n modules.push({\n member: this.type + 'Series',\n args: [this]\n });\n if (this.legendSettings.visible) {\n modules.push({\n member: 'AccumulationLegend',\n args: [this]\n });\n }\n if (this.findDatalabelVisibility()) {\n modules.push({\n member: 'AccumulationDataLabel',\n args: [this]\n });\n }\n if (this.tooltip.enable) {\n modules.push({\n member: 'AccumulationTooltip',\n args: [this]\n });\n }\n if (this.selectionMode !== 'None') {\n modules.push({\n member: 'AccumulationSelection',\n args: [this]\n });\n }\n enableAnnotation = this.annotations.some(function (value) {\n return (value.content !== null);\n });\n if (enableAnnotation) {\n modules.push({\n member: 'Annotation',\n args: [this]\n });\n }\n return modules;\n };\n /**\n * To find datalabel visibility in series\n */\n AccumulationChart.prototype.findDatalabelVisibility = function () {\n for (var _i = 0, _a = this.series; _i < _a.length; _i++) {\n var series = _a[_i];\n if (series.dataLabel.visible) {\n return true;\n }\n }\n return false;\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n AccumulationChart.prototype.getPersistData = function () {\n return '';\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n AccumulationChart.prototype.onPropertyChanged = function (newProp, oldProp) {\n var update = {\n refreshElements: false, refreshBounds: false\n };\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'theme':\n this.animateSeries = true;\n break;\n case 'title':\n case 'height':\n case 'width':\n case 'margin':\n update.refreshBounds = true;\n break;\n case 'titleStyle':\n if (newProp.titleStyle && (newProp.titleStyle.size || newProp.titleStyle.textOverflow)) {\n update.refreshBounds = true;\n }\n else {\n update.refreshElements = true;\n }\n break;\n case 'legendSettings':\n update.refreshBounds = true;\n update.refreshElements = true;\n break;\n case 'locale':\n case 'currencyCode':\n _super.prototype.refresh.call(this);\n break;\n case 'background':\n case 'border':\n case 'annotations':\n case 'enableSmartLabels':\n update.refreshElements = true;\n break;\n case 'isMultiSelect':\n case 'selectedDataIndexes':\n case 'selectionMode':\n if (this.accumulationSelectionModule) {\n if (isNullOrUndefined(this.accumulationSelectionModule.selectedDataIndexes)) {\n this.accumulationSelectionModule.invokeSelection(this);\n }\n else {\n this.accumulationSelectionModule.redrawSelection(this, oldProp.selectionMode);\n }\n }\n break;\n }\n }\n if (!update.refreshBounds && update.refreshElements) {\n this.createPieSvg();\n this.renderElements();\n }\n else if (update.refreshBounds) {\n this.refreshSeries();\n this.createPieSvg();\n this.calculateBounds();\n this.renderElements();\n }\n };\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"title\", void 0);\n __decorate([\n Complex(Theme.chartTitleFont, Font)\n ], AccumulationChart.prototype, \"titleStyle\", void 0);\n __decorate([\n Complex({}, LegendSettings)\n ], AccumulationChart.prototype, \"legendSettings\", void 0);\n __decorate([\n Complex({}, TooltipSettings)\n ], AccumulationChart.prototype, \"tooltip\", void 0);\n __decorate([\n Property('None')\n ], AccumulationChart.prototype, \"selectionMode\", void 0);\n __decorate([\n Property(false)\n ], AccumulationChart.prototype, \"isMultiSelect\", void 0);\n __decorate([\n Collection([], Indexes)\n ], AccumulationChart.prototype, \"selectedDataIndexes\", void 0);\n __decorate([\n Complex({}, Margin)\n ], AccumulationChart.prototype, \"margin\", void 0);\n __decorate([\n Property(true)\n ], AccumulationChart.prototype, \"enableSmartLabels\", void 0);\n __decorate([\n Complex({ color: '#DDDDDD', width: 0 }, Border)\n ], AccumulationChart.prototype, \"border\", void 0);\n __decorate([\n Property(null)\n ], AccumulationChart.prototype, \"background\", void 0);\n __decorate([\n Collection([{}], AccumulationSeries)\n ], AccumulationChart.prototype, \"series\", void 0);\n __decorate([\n Collection([{}], AccumulationAnnotationSettings)\n ], AccumulationChart.prototype, \"annotations\", void 0);\n __decorate([\n Property('Material')\n ], AccumulationChart.prototype, \"theme\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"seriesRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"legendRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"textRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"tooltipRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"pointRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"annotationRender\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"beforePrint\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseMove\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseClick\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"pointClick\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"pointMove\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseDown\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseLeave\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"chartMouseUp\", void 0);\n __decorate([\n Event()\n ], AccumulationChart.prototype, \"resized\", void 0);\n __decorate([\n Property('USD')\n ], AccumulationChart.prototype, \"currencyCode\", void 0);\n AccumulationChart = __decorate([\n NotifyPropertyChanges\n ], AccumulationChart);\n return AccumulationChart;\n}(Component));\nexport { AccumulationChart };\n","/**\n * Defines the common behavior of funnel and pyramid series\n */\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Size, stringToNumber, Rect } from '../../common/utils/helper';\nimport { AccumulationBase } from './accumulation-base';\n/**\n * TriangularBase is used to calculate base functions for funnel/pyramid series.\n */\nvar TriangularBase = /** @class */ (function (_super) {\n __extends(TriangularBase, _super);\n function TriangularBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Initializes the properties of funnel/pyramid series\n * @private\n */\n TriangularBase.prototype.initProperties = function (chart, series) {\n var actualChartArea = chart.initialClipRect;\n series.triangleSize = new Size(stringToNumber(series.width, actualChartArea.width), stringToNumber(series.height, actualChartArea.height));\n series.neckSize = new Size(stringToNumber(series.neckWidth, actualChartArea.width), stringToNumber(series.neckHeight, actualChartArea.height));\n this.defaultLabelBound(series, series.dataLabel.visible, series.dataLabel.position, chart);\n if (series.explodeOffset === '30%') {\n series.explodeOffset = '25px';\n }\n chart.explodeDistance = stringToNumber(series.explodeOffset, actualChartArea.width);\n var points = series.points;\n this.initializeSizeRatio(points, series);\n };\n /**\n * Initializes the size of the pyramid/funnel segments\n * @private\n */\n TriangularBase.prototype.initializeSizeRatio = function (points, series, reverse) {\n if (reverse === void 0) { reverse = false; }\n var sumOfPoints = series.sumOfPoints;\n //Limiting the ratio within the range of 0 to 1\n var gapRatio = Math.min(Math.max(series.gapRatio, 0), 1);\n //% equivalence of a value 1\n var coEff = 1 / (sumOfPoints * (1 + gapRatio / (1 - gapRatio)));\n var spacing = gapRatio / (points.length - 1);\n var y = 0;\n //starting from bottom\n for (var i = points.length - 1; i >= 0; i--) {\n var index = reverse ? points.length - 1 - i : i;\n if (points[index].visible) {\n var height = coEff * points[index].y;\n points[index].yRatio = y;\n points[index].heightRatio = height;\n y += height + spacing;\n }\n }\n };\n /**\n * Marks the label location from the set of points that forms a pyramid/funnel segment\n * @private\n */\n TriangularBase.prototype.setLabelLocation = function (series, point, points) {\n var last = points.length - 1;\n var bottom = series.type === 'Funnel' ? points.length - 2 : points.length - 1;\n var x = (points[0].x + points[bottom].x) / 2;\n var right = (points[1].x + points[bottom - 1].x) / 2;\n point.region = new Rect(x, points[0].y, right - x, points[bottom].y - points[0].y);\n point.symbolLocation = {\n x: point.region.x + point.region.width / 2,\n y: point.region.y + point.region.height / 2\n };\n point.labelOffset = {\n x: point.symbolLocation.x - (points[0].x + points[last].x) / 2,\n y: point.symbolLocation.y - (points[0].y + points[last].y) / 2\n };\n };\n /**\n * Finds the path to connect the list of points\n * @private\n */\n TriangularBase.prototype.findPath = function (locations) {\n var path = 'M';\n for (var i = 0; i < locations.length; i++) {\n path += locations[i].x + ' ' + locations[i].y;\n if (i !== locations.length - 1) {\n path += ' L';\n }\n }\n return path;\n };\n /**\n * To calculate data-label bounds\n * @private\n */\n TriangularBase.prototype.defaultLabelBound = function (series, visible, position, chart) {\n var x = (chart.initialClipRect.width - series.triangleSize.width) / 2;\n var y = (chart.initialClipRect.height - series.triangleSize.height) / 2;\n var accumulationBound = new Rect(x, y, series.triangleSize.width, series.triangleSize.height);\n series.labelBound = new Rect(accumulationBound.x, accumulationBound.y, accumulationBound.width + accumulationBound.x, accumulationBound.height + accumulationBound.y);\n series.accumulationBound = accumulationBound;\n if (visible && position === 'Outside') {\n series.labelBound = new Rect(Infinity, Infinity, -Infinity, -Infinity);\n }\n };\n return TriangularBase;\n}(AccumulationBase));\nexport { TriangularBase };\n","/**\n * Defines the behavior of a funnel series\n */\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { TriangularBase } from './triangular-base';\n/**\n * FunnelSeries module used to render `Funnel` Series.\n */\nvar FunnelSeries = /** @class */ (function (_super) {\n __extends(FunnelSeries, _super);\n function FunnelSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the path of a funnel segment\n */\n FunnelSeries.prototype.getSegmentData = function (point, series, chart) {\n var lineWidth;\n var topRadius;\n var bottomRadius;\n var endTop;\n var endBottom;\n var minRadius;\n var endMin;\n var bottomY;\n var area = series.triangleSize;\n var offset = 0;\n var extraSpace = (chart.initialClipRect.width - series.triangleSize.width) / 2;\n var emptySpaceAtLeft = extraSpace + chart.initialClipRect.x;\n var seriesTop = chart.initialClipRect.y + (chart.initialClipRect.height - area.height) / 2;\n //defines the top and bottom of a segment\n var top = point.yRatio * area.height;\n var bottom = top + point.heightRatio * area.height;\n var neckSize = series.neckSize;\n lineWidth = neckSize.width + (area.width - neckSize.width) * ((area.height - neckSize.height - top) /\n (area.height - neckSize.height));\n topRadius = (area.width / 2) - lineWidth / 2;\n //Calculating the middle slope change and bottom\n endTop = topRadius + lineWidth;\n if (bottom > area.height - neckSize.height || area.height === neckSize.height) {\n lineWidth = neckSize.width;\n }\n else {\n lineWidth = neckSize.width + (area.width - neckSize.width) *\n ((area.height - neckSize.height - bottom) / (area.height - neckSize.height));\n }\n bottomRadius = (area.width / 2) - (lineWidth / 2);\n endBottom = bottomRadius + lineWidth;\n if (top >= area.height - neckSize.height) {\n topRadius = bottomRadius = minRadius = (area.width / 2) - neckSize.width / 2;\n endTop = endBottom = endMin = (area.width / 2) + neckSize.width / 2;\n }\n else if (bottom > (area.height - neckSize.height)) {\n minRadius = bottomRadius = (area.width / 2) - lineWidth / 2;\n endMin = endBottom = minRadius + lineWidth;\n bottomY = area.height - neckSize.height;\n }\n var points = [];\n top += seriesTop;\n bottom += seriesTop;\n bottomY += seriesTop;\n var line1 = { x: emptySpaceAtLeft + offset + topRadius, y: top };\n var line2 = { x: emptySpaceAtLeft + offset + endTop, y: top };\n var line4 = { x: emptySpaceAtLeft + offset + endBottom, y: bottom };\n var line5 = { x: emptySpaceAtLeft + offset + bottomRadius, y: bottom };\n var line3 = { x: emptySpaceAtLeft + offset + endBottom, y: bottom };\n var line6 = { x: emptySpaceAtLeft + offset + bottomRadius, y: bottom };\n if (bottomY) {\n line3 = { x: emptySpaceAtLeft + offset + endMin, y: bottomY };\n line6 = { x: emptySpaceAtLeft + offset + minRadius, y: bottomY };\n }\n var polygon = [line1, line2, line3, line4, line5, line6];\n this.setLabelLocation(series, point, polygon);\n var direction = this.findPath(polygon);\n return direction;\n };\n /**\n * Renders a funnel segment\n * @private\n */\n FunnelSeries.prototype.renderPoint = function (point, series, chart, options) {\n var direction = this.getSegmentData(point, series, chart);\n point.midAngle = 0;\n options.d = direction;\n };\n /**\n * To get the module name of the funnel series.\n */\n FunnelSeries.prototype.getModuleName = function () {\n return 'FunnelSeries';\n };\n /**\n * To destroy the funnel series.\n * @return {void}\n * @private\n */\n FunnelSeries.prototype.destroy = function (accumulation) {\n /**\n * Destroys the funnel series\n */\n };\n return FunnelSeries;\n}(TriangularBase));\nexport { FunnelSeries };\n","/**\n * Defines the behavior of a pyramid series\n */\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { TriangularBase } from './triangular-base';\n/**\n * PyramidSeries module used to render `Pyramid` Series.\n */\nvar PyramidSeries = /** @class */ (function (_super) {\n __extends(PyramidSeries, _super);\n function PyramidSeries() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Defines the path of a pyramid segment\n */\n PyramidSeries.prototype.getSegmentData = function (point, series, chart) {\n var area = series.triangleSize;\n //top of th series\n var seriesTop = chart.initialClipRect.y + (chart.initialClipRect.height - area.height) / 2;\n var points = [];\n //consider, if the point is exploded\n var offset = 0;\n var extraSpace = (chart.initialClipRect.width - series.triangleSize.width) / 2;\n var emptySpaceAtLeft = extraSpace + chart.initialClipRect.x;\n //top and bottom\n var top = point.yRatio;\n var bottom = point.yRatio + point.heightRatio;\n //width of the top and bottom edge\n var topRadius = 0.5 * (1 - point.yRatio);\n var bottomRadius = 0.5 * (1 - bottom);\n top += seriesTop / area.height;\n bottom += seriesTop / area.height;\n var line1 = {\n x: emptySpaceAtLeft + offset + topRadius * area.width,\n y: top * area.height\n };\n var line2 = {\n x: emptySpaceAtLeft + offset + (1 - topRadius) * area.width,\n y: top * area.height\n };\n var line3 = {\n x: emptySpaceAtLeft + offset + (1 - bottomRadius) * area.width,\n y: bottom * area.height\n };\n var line4 = {\n x: emptySpaceAtLeft + offset + bottomRadius * area.width,\n y: bottom * area.height\n };\n var polygon = [line1, line2, line3, line4];\n this.setLabelLocation(series, point, polygon);\n var direction = this.findPath(polygon);\n return direction;\n };\n /**\n * Initializes the size of the pyramid segments\n * @private\n */\n PyramidSeries.prototype.initializeSizeRatio = function (points, series) {\n if (series.pyramidMode === 'Linear') {\n _super.prototype.initializeSizeRatio.call(this, points, series, true);\n }\n else {\n this.calculateSurfaceSegments(series);\n }\n };\n /**\n * Defines the size of the pyramid segments, the surface of that will reflect the values\n */\n PyramidSeries.prototype.calculateSurfaceSegments = function (series) {\n var count = series.points.length;\n var sumOfValues = series.sumOfPoints;\n var yRatio = 0;\n var y = [];\n var height = [];\n var gapRatio = Math.min(0, Math.max(series.gapRatio, 1));\n var gapHeight = gapRatio / (count - 1);\n var preSum = this.getSurfaceHeight(0, sumOfValues);\n var currY = 0;\n for (var i = 0; i < count; i++) {\n if (series.points[i].visible) {\n y[i] = currY;\n height[i] = this.getSurfaceHeight(currY, Math.abs(series.points[i].y));\n currY += height[i] + gapHeight * preSum;\n }\n }\n var coef = 1 / (currY - gapHeight * preSum);\n for (var i = 0; i < count; i++) {\n if (series.points[i].visible) {\n series.points[i].yRatio = coef * y[i];\n series.points[i].heightRatio = coef * height[i];\n }\n }\n };\n /**\n * Finds the height of pyramid segment\n */\n PyramidSeries.prototype.getSurfaceHeight = function (y, surface) {\n var result = this.solveQuadraticEquation(1, 2 * y, -surface);\n return result;\n };\n /**\n * Solves quadratic equation\n */\n PyramidSeries.prototype.solveQuadraticEquation = function (a, b, c) {\n var root1;\n var root2;\n var d = b * b - 4 * a * c;\n if (d >= 0) {\n var sd = Math.sqrt(d);\n root1 = (-b - sd) / (2 * a);\n root2 = (-b + sd) / (2 * a);\n return Math.max(root1, root2);\n }\n return 0;\n };\n /**\n * Renders a pyramid segment\n */\n PyramidSeries.prototype.renderPoint = function (point, series, chart, options) {\n var direction = this.getSegmentData(point, series, chart);\n point.midAngle = 0;\n options.d = direction;\n };\n /**\n * To get the module name of the Pyramid series.\n */\n PyramidSeries.prototype.getModuleName = function () {\n return 'PyramidSeries';\n };\n /**\n * To destroy the pyramid series\n * @return {void}\n * @private\n */\n PyramidSeries.prototype.destroy = function (accumulation) {\n /**\n * Destroys the pyramid series\n */\n };\n return PyramidSeries;\n}(TriangularBase));\nexport { PyramidSeries };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * AccumulationChart legend\n */\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { pointByIndex } from '../model/acc-base';\nimport { BaseLegend, LegendOptions } from '../../common/legend/legend';\nimport { Rect, measureText, textTrim } from '../../common/utils/helper';\n/**\n * AccumulationLegend module used to render `Legend` for Accumulation chart.\n */\nvar AccumulationLegend = /** @class */ (function (_super) {\n __extends(AccumulationLegend, _super);\n /**\n * Constructor for Accumulation Legend.\n * @param chart\n */\n function AccumulationLegend(chart) {\n var _this = _super.call(this, chart) || this;\n _this.library = _this;\n _this.titleRect = new Rect(0, chart.margin.top, 0, 0);\n return _this;\n }\n /**\n * Get the legend options.\n * @return {void}\n * @private\n */\n AccumulationLegend.prototype.getLegendOptions = function (chart, series) {\n this.legendCollections = [];\n for (var i = 0; i < 1; i++) {\n var seriesType = series[i].type;\n if (seriesType === 'Pie' || seriesType === 'Doughnut') {\n seriesType = (series[i].innerRadius !== '0' && series[i].innerRadius !== '0%') ?\n 'Doughnut' : 'Pie';\n }\n for (var _i = 0, _a = series[i].points; _i < _a.length; _i++) {\n var point = _a[_i];\n if (!isNullOrUndefined(point.x) && !isNullOrUndefined(point.y)) {\n this.legendCollections.push(new LegendOptions(point.x.toString(), point.color, series[i].legendShape, point.visible, seriesType, null, null, point.index, series[i].index));\n }\n }\n }\n };\n /**\n * To find legend bounds for accumulation chart.\n * @private\n */\n AccumulationLegend.prototype.getLegendBounds = function (availableSize, legendBounds, legend) {\n var extraWidth = 0;\n var extraHeight = 0;\n var padding = legend.padding;\n if (!this.isVertical) {\n extraHeight = !legend.height ? ((availableSize.height / 100) * 5) : 0;\n }\n else {\n extraWidth = !legend.width ? ((availableSize.width / 100) * 5) : 0;\n }\n legendBounds.width += extraWidth;\n legendBounds.height += extraHeight;\n var shapePadding = legend.shapePadding;\n var maximumWidth = 0;\n var shapeWidth = legend.shapeWidth;\n var rowWidth = 0;\n var rowCount = 0;\n var columnWidth = [];\n var columnHeight = 0;\n var legendWidth = 0;\n this.maxItemHeight = Math.max(measureText('MeasureText', legend.textStyle).height, legend.shapeHeight);\n var legendEventArgs;\n var render = false;\n for (var _i = 0, _a = this.legendCollections; _i < _a.length; _i++) {\n var legendOption = _a[_i];\n legendEventArgs = { fill: legendOption.fill, text: legendOption.text, shape: legendOption.shape,\n name: 'legendRender', cancel: false };\n this.chart.trigger('legendRender', legendEventArgs);\n legendOption.render = !legendEventArgs.cancel;\n legendOption.text = legendEventArgs.text;\n legendOption.fill = legendEventArgs.fill;\n legendOption.shape = legendEventArgs.shape;\n legendOption.textSize = measureText(legendOption.text, legend.textStyle);\n if (legendOption.render && legendOption.text !== '') {\n render = true;\n legendWidth = shapeWidth + shapePadding + legendOption.textSize.width + padding;\n if (this.isVertical) {\n ++rowCount;\n columnHeight = (rowCount * (this.maxItemHeight + padding)) + padding;\n if ((rowCount * (this.maxItemHeight + padding)) + padding > legendBounds.height) {\n columnHeight = Math.max(columnHeight, (rowCount * (this.maxItemHeight + padding)) + padding);\n rowWidth = rowWidth + maximumWidth;\n columnWidth.push(maximumWidth);\n this.totalPages = Math.max(rowCount, this.totalPages || 1);\n maximumWidth = 0;\n rowCount = 1;\n }\n maximumWidth = Math.max(legendWidth, maximumWidth);\n }\n else {\n rowWidth = rowWidth + legendWidth;\n if (legendBounds.width < (padding + rowWidth)) {\n maximumWidth = Math.max(maximumWidth, (rowWidth + padding - legendWidth));\n if (rowCount === 0 && (legendWidth !== rowWidth)) {\n rowCount = 1;\n }\n rowWidth = legendWidth;\n rowCount++;\n columnHeight = (rowCount * (this.maxItemHeight + padding)) + padding;\n }\n }\n }\n }\n if (this.isVertical) {\n rowWidth = rowWidth + maximumWidth;\n this.isPaging = legendBounds.width < (rowWidth + padding);\n columnHeight = Math.max(columnHeight, ((this.totalPages || 1) * (this.maxItemHeight + padding)) + padding);\n this.isPaging = this.isPaging && (this.totalPages > 1);\n if (columnWidth[columnWidth.length - 1] !== maximumWidth) {\n columnWidth.push(maximumWidth);\n }\n }\n else {\n this.isPaging = legendBounds.height < columnHeight;\n this.totalPages = this.totalRowCount = rowCount;\n columnHeight = Math.max(columnHeight, (this.maxItemHeight + padding) + padding);\n }\n this.maxColumns = 0; // initialization for max columns\n var width = this.isVertical ? this.getMaxColumn(columnWidth, legendBounds.width, padding, rowWidth + padding) :\n Math.max(rowWidth + padding, maximumWidth);\n if (render) {\n this.setBounds(width, columnHeight, legend, legendBounds);\n }\n else {\n this.setBounds(0, 0, legend, legendBounds);\n }\n };\n /**\n * To find maximum column size for legend\n */\n AccumulationLegend.prototype.getMaxColumn = function (columns, width, padding, rowWidth) {\n var maxPageColumn = padding;\n this.maxColumnWidth = Math.max.apply(null, columns);\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n maxPageColumn += this.maxColumnWidth;\n this.maxColumns++;\n if (maxPageColumn + padding > width) {\n maxPageColumn -= this.maxColumnWidth;\n this.maxColumns--;\n break;\n }\n }\n this.isPaging = (maxPageColumn < rowWidth) && (this.totalPages > 1);\n if (maxPageColumn === padding) {\n maxPageColumn = width;\n }\n this.maxColumns = Math.max(1, this.maxColumns);\n this.maxWidth = maxPageColumn;\n return maxPageColumn;\n };\n /**\n * To find available width from legend x position.\n */\n AccumulationLegend.prototype.getAvailWidth = function (tx, width, legendX) {\n if (this.isVertical) {\n width = this.maxWidth;\n }\n return width - ((this.legend.padding * 2) + this.legend.shapeWidth + this.legend.shapePadding);\n };\n /**\n * To find legend rendering locations from legend options.\n * @private\n */\n AccumulationLegend.prototype.getRenderPoint = function (legendOption, start, textPadding, prevLegend, rect, count, firstLegend) {\n var padding = this.legend.padding;\n if (this.isVertical) {\n if (count === firstLegend || (prevLegend.location.y + (this.maxItemHeight * 1.5) + (padding * 2) > rect.y + rect.height)) {\n legendOption.location.x = prevLegend.location.x + ((count === firstLegend) ? 0 : this.maxColumnWidth);\n legendOption.location.y = start.y;\n this.pageXCollections.push(legendOption.location.x - (this.legend.shapeWidth / 2) - padding);\n this.totalPages++;\n }\n else {\n legendOption.location.x = prevLegend.location.x;\n legendOption.location.y = prevLegend.location.y + this.maxItemHeight + padding;\n }\n }\n else {\n var previousBound = (prevLegend.location.x + textPadding + prevLegend.textSize.width);\n if ((previousBound + (legendOption.textSize.width + textPadding)) > (rect.x + rect.width + this.legend.shapeWidth / 2)) {\n legendOption.location.y = (count === firstLegend) ? prevLegend.location.y :\n prevLegend.location.y + this.maxItemHeight + padding;\n legendOption.location.x = start.x;\n }\n else {\n legendOption.location.y = prevLegend.location.y;\n legendOption.location.x = (count === firstLegend) ? prevLegend.location.x : previousBound;\n }\n this.totalPages = this.totalRowCount;\n }\n var availablewidth = this.getAvailWidth(legendOption.location.x, this.legendBounds.width, this.legendBounds.x);\n legendOption.text = textTrim(+availablewidth.toFixed(4), legendOption.text, this.legend.textStyle);\n };\n /**\n * finding the smart legend place according to positions.\n * @return {void}\n * @private\n */\n AccumulationLegend.prototype.getSmartLegendLocation = function (labelBound, legendBound, margin) {\n var space;\n switch (this.position) {\n case 'Left':\n space = ((labelBound.x - legendBound.width) - margin.left) / 2;\n legendBound.x = (labelBound.x - legendBound.width) < margin.left ? legendBound.x :\n (labelBound.x - legendBound.width) - space;\n break;\n case 'Right':\n space = ((this.chart.availableSize.width - margin.right) - (labelBound.x + labelBound.width + legendBound.width)) / 2;\n legendBound.x = (labelBound.x + labelBound.width + legendBound.width) > (this.chart.availableSize.width - margin.right) ?\n legendBound.x : (labelBound.x + labelBound.width + space);\n break;\n case 'Top':\n this.getTitleRect(this.chart);\n space = ((labelBound.y - legendBound.height) - (this.titleRect.y + this.titleRect.height)) / 2;\n legendBound.y = (labelBound.y - legendBound.height) < margin.top ? legendBound.y :\n (labelBound.y - legendBound.height) - space;\n break;\n case 'Bottom':\n space = ((this.chart.availableSize.height - margin.bottom) - (labelBound.y + labelBound.height + legendBound.height)) / 2;\n legendBound.y = labelBound.y + labelBound.height + legendBound.height > (this.chart.availableSize.height - margin.bottom) ?\n legendBound.y : (labelBound.y + labelBound.height) + space;\n break;\n }\n };\n /**\n * To get title rect.\n */\n AccumulationLegend.prototype.getTitleRect = function (accumulation) {\n if (!accumulation.title) {\n return null;\n }\n var titleSize = measureText(accumulation.title, accumulation.titleStyle);\n this.titleRect = new Rect(accumulation.availableSize.width / 2 - titleSize.width / 2, accumulation.margin.top, titleSize.width, titleSize.height);\n };\n /**\n * To get legend by index\n */\n AccumulationLegend.prototype.legendByIndex = function (index, legendCollections) {\n for (var _i = 0, legendCollections_1 = legendCollections; _i < legendCollections_1.length; _i++) {\n var legend = legendCollections_1[_i];\n if (legend.pointIndex === index) {\n return legend;\n }\n }\n return null;\n };\n /**\n * To show or hide the legend on clicking the legend.\n * @return {void}\n */\n AccumulationLegend.prototype.click = function (event) {\n var targetId = event.target.id;\n var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_',\n this.legendID + '_shape_marker_'];\n var selectedDataIndexes = [];\n if (this.chart.accumulationSelectionModule) {\n selectedDataIndexes = extend([], this.chart.accumulationSelectionModule.selectedDataIndexes, null, true);\n }\n for (var _i = 0, legendItemsId_1 = legendItemsId; _i < legendItemsId_1.length; _i++) {\n var id = legendItemsId_1[_i];\n if (targetId.indexOf(id) > -1) {\n var pointIndex = parseInt(targetId.split(id)[1], 10);\n var currentSeries = this.chart.visibleSeries[0];\n var point = pointByIndex(pointIndex, currentSeries.points);\n var legendOption = this.legendByIndex(pointIndex, this.legendCollections);\n if (this.chart.legendSettings.toggleVisibility) {\n point.visible = !point.visible;\n legendOption.visible = point.visible;\n this.chart.removeSvg();\n if (point.visible) {\n currentSeries.sumOfPoints += point.y;\n }\n else {\n currentSeries.sumOfPoints -= point.y;\n }\n this.chart.refreshPoints(currentSeries.points);\n this.chart.renderElements();\n }\n else if (this.chart.accumulationSelectionModule) {\n this.chart.accumulationSelectionModule.legendSelection(this.chart, 0, pointIndex);\n }\n }\n }\n if (targetId.indexOf(this.legendID + '_pageup') > -1) {\n this.changePage(event, true);\n }\n else if (targetId.indexOf(this.legendID + '_pagedown') > -1) {\n this.changePage(event, false);\n }\n };\n /**\n * Get module name\n */\n AccumulationLegend.prototype.getModuleName = function () {\n return 'AccumulationLegend';\n };\n /**\n * To destroy the Legend.\n * @return {void}\n * @private\n */\n AccumulationLegend.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n return AccumulationLegend;\n}(BaseLegend));\nexport { AccumulationLegend };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * AccumulationChart DataLabel module file\n */\nimport { extend, createElement } from '@syncfusion/ej2-base';\nimport { ChartLocation, degreeToLocation, Rect, isOverlap, stringToNumber, getAngle, TextOption } from '../../common/utils/helper';\nimport { textTrim, subtractThickness, Thickness, getElement } from '../../common/utils/helper';\nimport { removeElement, measureText, RectOption, textElement, showTooltip } from '../../common/utils/helper';\nimport { PathOption, colorNameToHex, convertHexToColor, containsRect } from '../../common/utils/helper';\nimport { getSeriesFromIndex } from '../model/acc-base';\nimport { textRender } from '../../common/model/constants';\nimport { getFontStyle, createTemplate, measureElementRect, templateAnimate } from '../../common/utils/helper';\nimport { AccumulationBase } from './accumulation-base';\n/**\n * AccumulationDataLabel module used to render `dataLabel`.\n */\nvar AccumulationDataLabel = /** @class */ (function (_super) {\n __extends(AccumulationDataLabel, _super);\n function AccumulationDataLabel(accumulation) {\n var _this = _super.call(this, accumulation) || this;\n _this.id = accumulation.element.id + '_datalabel_Series_';\n if (accumulation.title) {\n var titleSize = measureText(accumulation.title, accumulation.titleStyle);\n _this.titleRect = new Rect(accumulation.availableSize.width / 2 - titleSize.width / 2, accumulation.margin.top, titleSize.width, titleSize.height);\n }\n return _this;\n }\n /**\n * Method to get datalabel text location.\n * @private\n */\n AccumulationDataLabel.prototype.getDataLabelPosition = function (point, dataLabel, textSize, points, parent, id) {\n var radius = this.isCircular() ? this.labelRadius : this.getLabelDistance(point, dataLabel);\n this.getLabelRegion(point, dataLabel.position, textSize, radius, this.marginValue);\n point.labelAngle = point.midAngle;\n point.labelPosition = dataLabel.position;\n if (this.accumulation.enableSmartLabels) {\n this.getSmartLabel(point, dataLabel, textSize, points, parent, id);\n }\n };\n /**\n * Method to get datalabel bound.\n */\n AccumulationDataLabel.prototype.getLabelRegion = function (point, position, textSize, labelRadius, margin, endAngle) {\n if (endAngle === void 0) { endAngle = 0; }\n var labelAngle = endAngle || point.midAngle;\n var space = 10;\n var location = degreeToLocation(labelAngle, labelRadius, this.isCircular() ? this.center :\n this.getLabelLocation(point, position));\n location.y = (position === 'Inside') ? (location.y - textSize.height / 2) : location.y;\n location.x = (position === 'Inside') ? (location.x - textSize.width / 2) : location.x;\n point.labelRegion = new Rect(location.x, location.y, textSize.width + (margin * 2), textSize.height + (margin * 2));\n if (position === 'Outside') {\n point.labelRegion.y -= point.labelRegion.height / 2;\n if (labelAngle >= 90 && labelAngle <= 270) {\n point.labelRegion.x -= (point.labelRegion.width + space);\n }\n else {\n point.labelRegion.x += space;\n }\n }\n };\n /**\n * Method to get datalabel smart position.\n */\n AccumulationDataLabel.prototype.getSmartLabel = function (point, dataLabel, textSize, points, parent, id) {\n var circular = this.isCircular();\n var labelRadius = circular ? this.radius : this.getLabelDistance(point, dataLabel);\n var connectorLength = circular ? (dataLabel.connectorStyle.length || '4%') :\n '0px';\n labelRadius += stringToNumber(connectorLength, labelRadius);\n var previousPoint = this.findPreviousPoint(points, point.index, point.labelPosition);\n if (dataLabel.position === 'Inside') {\n if (previousPoint && previousPoint.labelRegion && (isOverlap(point.labelRegion, previousPoint.labelRegion)\n || this.isOverlapping(point, points)) || !circular && !containsRect(point.region, point.labelRegion)) {\n point.labelPosition = 'Outside';\n if (!circular) {\n labelRadius = this.getLabelDistance(point, dataLabel);\n }\n this.getLabelRegion(point, point.labelPosition, textSize, labelRadius, this.marginValue);\n previousPoint = this.findPreviousPoint(points, point.index, point.labelPosition);\n if (previousPoint && (isOverlap(point.labelRegion, previousPoint.labelRegion) ||\n this.isConnectorLineOverlapping(point, previousPoint))) {\n this.setOuterSmartLabel(previousPoint, point, dataLabel.border.width, labelRadius, textSize, this.marginValue);\n }\n }\n }\n else {\n if (previousPoint && previousPoint.labelRegion && (isOverlap(point.labelRegion, previousPoint.labelRegion)\n || this.isOverlapping(point, points) || this.isConnectorLineOverlapping(point, previousPoint))) {\n this.setOuterSmartLabel(previousPoint, point, dataLabel.border.width, labelRadius, textSize, this.marginValue);\n }\n }\n if (this.isOverlapping(point, points) || (this.titleRect && point.labelRegion && isOverlap(point.labelRegion, this.titleRect))) {\n this.setPointVisibileFalse(point);\n }\n if (this.accumulation.accumulationLegendModule && point.labelVisible && point.labelRegion) {\n var rect = this.accumulation.accumulationLegendModule.legendBounds;\n var padding = this.accumulation.legendSettings.border.width / 2;\n this.textTrimming(point, new Rect(rect.x - padding, rect.y - padding, rect.width + (2 * padding), rect.height + (2 * padding)), dataLabel.font, this.accumulation.accumulationLegendModule.position);\n }\n if (point.labelVisible && point.labelRegion) {\n var position = this.isCircular() ? (point.labelRegion.x >= this.center.x) ? 'InsideRight' : 'InsideLeft' :\n 'InsideRight';\n this.textTrimming(point, this.areaRect, dataLabel.font, position);\n }\n if (point.labelVisible && point.labelRegion && ((point.labelRegion.y + point.labelRegion.height >\n this.areaRect.y + this.areaRect.height || point.labelRegion.y < this.areaRect.y) || (point.labelRegion.x < this.areaRect.x ||\n point.labelRegion.x + point.labelRegion.width > this.areaRect.x + this.areaRect.width))) {\n this.setPointVisibileFalse(point);\n }\n };\n /**\n * To find trimmed datalabel tooltip needed.\n * @return {void}\n * @private\n */\n AccumulationDataLabel.prototype.move = function (e, x, y, isTouch) {\n var _this = this;\n if (e.target.textContent.indexOf('...') > -1) {\n var targetId = e.target.id.split(this.id);\n if (targetId.length === 2) {\n var seriesIndex = parseInt(targetId[1].split('_text_')[0], 10);\n var pointIndex = parseInt(targetId[1].split('_text_')[1], 10);\n if (!isNaN(seriesIndex) && !isNaN(pointIndex)) {\n if (isTouch) {\n removeElement(this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');\n }\n var point = getSeriesFromIndex(seriesIndex, (this.accumulation).visibleSeries).points[pointIndex];\n showTooltip(point.text || point.y.toString(), x, y, this.areaRect.width, this.accumulation.element.id + '_EJ2_Datalabel_Tooltip', getElement(this.accumulation.element.id + '_Secondary_Element'));\n }\n }\n }\n else {\n removeElement(this.accumulation.element.id + '_EJ2_Datalabel_Tooltip');\n }\n if (isTouch) {\n clearTimeout(this.clearTooltip);\n this.clearTooltip = setTimeout(function () { removeElement(_this.accumulation.element.id + '_EJ2_Datalabel_Tooltip'); }, 1000);\n }\n };\n /**\n * To find previous valid label point\n */\n AccumulationDataLabel.prototype.findPreviousPoint = function (points, index, position) {\n var point = points[0];\n for (var i = index - 1; i >= 0; i--) {\n point = points[i];\n if (point.visible && point.labelVisible && point.labelRegion && point.labelPosition === position) {\n return point;\n }\n }\n return null;\n };\n /**\n * To find current point datalabel is overlapping with other points\n */\n AccumulationDataLabel.prototype.isOverlapping = function (currentPoint, points) {\n for (var i = currentPoint.index - 1; i >= 0; i--) {\n if (points[i].visible && points[i].labelVisible && points[i].labelRegion && currentPoint.labelRegion &&\n currentPoint.labelVisible && isOverlap(currentPoint.labelRegion, points[i].labelRegion)) {\n return true;\n }\n }\n return false;\n };\n /**\n * To get text trimmed while exceeds the accumulation chart area.\n */\n AccumulationDataLabel.prototype.textTrimming = function (point, rect, font, position) {\n if (isOverlap(point.labelRegion, rect)) {\n var size = point.labelRegion.width;\n if (position === 'Right') {\n size = rect.x - point.labelRegion.x;\n }\n else if (position === 'Left') {\n size = point.labelRegion.x - (rect.x + rect.width);\n if (size < 0) {\n size += point.labelRegion.width;\n point.labelRegion.x = rect.x + rect.width;\n }\n }\n else if (position === 'InsideRight') {\n size = (rect.x + rect.width) - point.labelRegion.x;\n }\n else if (position === 'InsideLeft') {\n size = (point.labelRegion.x + point.labelRegion.width) - rect.x;\n if (size < point.labelRegion.width) {\n point.labelRegion.x = rect.x;\n }\n }\n else {\n this.setPointVisibileFalse(point);\n }\n if (point.labelVisible && point.labelRegion) {\n if (size < point.labelRegion.width) {\n point.label = textTrim(size - (this.marginValue * 2), point.label, font);\n point.labelRegion.width = size;\n }\n if (point.label.length === 3 && point.label.indexOf('...') > -1) {\n this.setPointVisibileFalse(point);\n }\n }\n }\n };\n /**\n * To set point label visible and region to disable.\n */\n AccumulationDataLabel.prototype.setPointVisibileFalse = function (point) {\n point.labelVisible = false;\n point.labelRegion = null;\n };\n /**\n * To set datalabel angle position for outside labels\n */\n AccumulationDataLabel.prototype.setOuterSmartLabel = function (previousPoint, point, border, labelRadius, textsize, margin) {\n if (!this.isCircular()) {\n this.setSmartLabelForSegments(point, previousPoint, labelRadius, textsize, margin);\n }\n else {\n var labelAngle = this.getOverlappedAngle(previousPoint.labelRegion, point.labelRegion, point.midAngle, border * 2);\n this.getLabelRegion(point, 'Outside', textsize, labelRadius, margin, labelAngle);\n if (labelAngle > point.endAngle) {\n this.setPointVisibileFalse(point);\n }\n point.labelAngle = labelAngle;\n while (point.labelVisible && (isOverlap(previousPoint.labelRegion, point.labelRegion) || labelAngle <= previousPoint.labelAngle\n || this.isConnectorLineOverlapping(point, previousPoint))) {\n if (labelAngle > point.endAngle) {\n this.setPointVisibileFalse(point);\n break;\n }\n point.labelAngle = labelAngle;\n this.getLabelRegion(point, 'Outside', textsize, labelRadius, margin, labelAngle);\n labelAngle += 0.1;\n }\n }\n };\n /**\n * Sets smart label positions for funnel and pyramid series\n */\n AccumulationDataLabel.prototype.setSmartLabelForSegments = function (point, prevPoint, distance, textSize, margin) {\n var textRegion = point.labelRegion;\n //let overlapWidth: number = prevPoint.labelRegion.x + prevPoint.labelRegion.width - textRegion.x;\n var overlapHeight = this.accumulation.type === 'Funnel' ?\n prevPoint.labelRegion.y - (textRegion.y + textRegion.height) :\n point.labelRegion.y - (prevPoint.labelRegion.y + prevPoint.labelRegion.height);\n if (overlapHeight < 0) {\n point.labelRegion.y += this.accumulation.type === 'Funnel' ? overlapHeight : -overlapHeight;\n }\n };\n /**\n * To find connector line overlapping.\n */\n AccumulationDataLabel.prototype.isConnectorLineOverlapping = function (point, previous) {\n var start = this.getLabelLocation(point);\n var end = new ChartLocation(0, 0);\n this.getEdgeOfLabel(point.labelRegion, point.labelAngle, end);\n var previousstart = this.getLabelLocation(previous);\n var previousend = new ChartLocation(0, 0);\n this.getEdgeOfLabel(previous.labelRegion, previous.labelAngle, previousend);\n return this.isLineRectangleIntersect(start, end, point.labelRegion) ||\n this.isLineRectangleIntersect(start, end, previous.labelRegion) ||\n this.isLineRectangleIntersect(previousstart, previousend, point.labelRegion);\n };\n /**\n * To find two rectangle intersect\n */\n AccumulationDataLabel.prototype.isLineRectangleIntersect = function (line1, line2, rect) {\n var rectPoints = [\n new ChartLocation(Math.round(rect.x), Math.round(rect.y)),\n new ChartLocation(Math.round((rect.x + rect.width)), Math.round(rect.y)),\n new ChartLocation(Math.round((rect.x + rect.width)), Math.round((rect.y + rect.height))),\n new ChartLocation(Math.round(rect.x), Math.round((rect.y + rect.height)))\n ];\n line1.x = Math.round(line1.x);\n line1.y = Math.round(line1.y);\n line2.x = Math.round(line2.x);\n line2.y = Math.round(line2.y);\n for (var i = 0; i < rectPoints.length; i++) {\n if (this.isLinesIntersect(line1, line2, rectPoints[i], rectPoints[(i + 1) % rectPoints.length])) {\n return true;\n }\n }\n return false;\n };\n /**\n * To find two line intersect\n */\n AccumulationDataLabel.prototype.isLinesIntersect = function (point1, point2, point11, point12) {\n var a1 = point2.y - point1.y;\n var b1 = point1.x - point2.x;\n var c1 = a1 * point1.x + b1 * point1.y;\n var a2 = point12.y - point11.y;\n var b2 = point11.x - point12.x;\n var c2 = a2 * point11.x + b2 * point11.y;\n var delta = a1 * b2 - a2 * b1;\n if (delta !== 0) {\n var x = (b2 * c1 - b1 * c2) / delta;\n var y = (a1 * c2 - a2 * c1) / delta;\n var lies = Math.min(point1.x, point2.x) <= x && x <= Math.max(point1.x, point2.x);\n lies = lies && Math.min(point1.y, point2.y) <= y && y <= Math.max(point1.y, point2.y);\n lies = lies && Math.min(point11.x, point12.x) <= x && x <= Math.max(point11.x, point12.x);\n lies = lies && Math.min(point11.y, point12.y) <= y && y <= Math.max(point11.y, point12.y);\n return lies;\n }\n return false;\n };\n /**\n * To get two rectangle overlapping angles.\n */\n AccumulationDataLabel.prototype.getOverlappedAngle = function (first, second, angle, padding) {\n var x = first.x;\n if (angle >= 90 && angle <= 270) {\n second.y = first.y - (padding + second.height / 2);\n x = first.x + first.width;\n }\n else {\n second.y = first.y + first.height + padding;\n }\n return getAngle(this.center, new ChartLocation(x, second.y));\n };\n /**\n * To get connector line path\n */\n AccumulationDataLabel.prototype.getConnectorPath = function (label, point, dataLabel, end) {\n if (end === void 0) { end = 0; }\n var connector = dataLabel.connectorStyle;\n var labelRadius = this.isCircular() ? this.labelRadius : this.getLabelDistance(point, dataLabel);\n var start = this.getConnectorStartPoint(point, connector);\n var labelAngle = end || point.midAngle;\n var middle = new ChartLocation(0, 0);\n var endPoint = this.getEdgeOfLabel(label, labelAngle, middle, connector.width);\n if (connector.type === 'Curve') {\n if (this.isCircular()) {\n var r = labelRadius - this.radius;\n middle = degreeToLocation(labelAngle, labelRadius - (r / 2), this.center);\n return 'M ' + start.x + ' ' + start.y + ' Q' + middle.x + ',' + middle.y + ' ' + endPoint.x + ',' + endPoint.y;\n }\n else {\n return this.getPolyLinePath(start, endPoint);\n }\n }\n else {\n return 'M ' + start.x + ' ' + start.y + ' L ' + middle.x + ' ' + middle.y + ' L ' + endPoint.x + ' ' + endPoint.y;\n }\n };\n /**\n * Finds the curved path for funnel/pyramid data label connectors\n */\n AccumulationDataLabel.prototype.getPolyLinePath = function (start, end) {\n var controlPoints = [start, end];\n if (start.y === end.y) {\n return 'M ' + start.x + ' ' + start.y + ' L ' + end.x + ' ' + end.y;\n }\n var path = 'M';\n for (var i = 0; i <= 16; i++) {\n var t = i / 16;\n var points = this.getBezierPoint(t, controlPoints, 0, 2);\n path += points.x + ',' + points.y;\n if (i !== 16) {\n path += ' L';\n }\n }\n return path;\n };\n /**\n * Finds the bezier point for funnel/pyramid data label connectors\n */\n AccumulationDataLabel.prototype.getBezierPoint = function (t, controlPoints, index, count) {\n if (count === 1) {\n return controlPoints[index];\n }\n var p0 = this.getBezierPoint(t, controlPoints, index, count - 1);\n var p1 = this.getBezierPoint(t, controlPoints, index + 1, count - 1);\n var x = (p0.x) ? p0.x : p0.x;\n var y = (p0.y) ? p0.y : p0.y;\n var x1 = (p1.x) ? p1.x : p1.x;\n var y1 = (p1.y) ? p1.y : p1.y;\n var x2 = (1 - t) * x + t * x1;\n var y2 = (1 - t) * y + t * y1;\n if (p0.x) {\n return { x: x2, y: y2 };\n }\n else {\n return { x: x2, y: y2 };\n }\n };\n /**\n * To get label edges based on the center and label rect position.\n */\n AccumulationDataLabel.prototype.getEdgeOfLabel = function (labelshape, angle, middle, border) {\n if (border === void 0) { border = 1; }\n var edge = new ChartLocation(labelshape.x, labelshape.y);\n if (angle >= 90 && angle <= 270) {\n edge.x += labelshape.width + border / 2;\n edge.y += labelshape.height / 2;\n middle.x = edge.x + 10;\n middle.y = edge.y;\n }\n else {\n edge.x -= border / 2;\n edge.y += labelshape.height / 2;\n middle.x = edge.x - 10;\n middle.y = edge.y;\n }\n return edge;\n };\n /**\n * Finds the distance between the label position and the edge/center of the funnel/pyramid\n */\n AccumulationDataLabel.prototype.getLabelDistance = function (point, dataLabel) {\n if (point.labelPosition && dataLabel.position !== point.labelPosition || dataLabel.connectorStyle.length) {\n var length_1 = stringToNumber(dataLabel.connectorStyle.length || '70px', this.accumulation.initialClipRect.width);\n if (length_1 < this.accumulation.initialClipRect.width) {\n return length_1;\n }\n }\n var position = point.labelPosition || dataLabel.position;\n var series = this.accumulation.visibleSeries[0];\n var extraSpace = (this.accumulation.initialClipRect.width - series.triangleSize.width) / 2;\n var labelLocation;\n switch (position) {\n case 'Inside':\n return 0;\n case 'Outside':\n labelLocation = point.symbolLocation.x + point.labelOffset.x;\n return this.accumulation.initialClipRect.width - labelLocation - extraSpace;\n }\n };\n /**\n * Finds the label position / beginning of the connector(ouside funnel labels)\n */\n AccumulationDataLabel.prototype.getLabelLocation = function (point, position) {\n if (position === void 0) { position = 'Outside'; }\n if (this.accumulation.type !== 'Pie') {\n position = point.labelPosition || position;\n var location_1 = {\n x: point.symbolLocation.x,\n y: point.symbolLocation.y - point.labelOffset.y\n };\n switch (position) {\n case 'Inside':\n location_1.y = point.region.y + point.region.height / 2;\n break;\n case 'Outside':\n location_1.x += point.labelOffset.x;\n }\n return location_1;\n }\n else {\n return degreeToLocation(point.midAngle, this.radius, this.center);\n }\n };\n /**\n * Finds the beginning of connector line\n */\n AccumulationDataLabel.prototype.getConnectorStartPoint = function (point, connector) {\n return this.isCircular() ? degreeToLocation(point.midAngle, this.radius - connector.width, this.center) :\n this.getLabelLocation(point);\n };\n /**\n * To find area rect based on margin, available size.\n * @private\n */\n AccumulationDataLabel.prototype.findAreaRect = function () {\n this.areaRect = new Rect(0, 0, this.accumulation.availableSize.width, this.accumulation.availableSize.height);\n var margin = this.accumulation.margin;\n subtractThickness(this.areaRect, new Thickness(margin.left, margin.right, margin.top, margin.bottom));\n };\n /**\n * To render the data labels from series points.\n */\n AccumulationDataLabel.prototype.renderDataLabel = function (point, dataLabel, parent, points, series, templateElement) {\n var id = this.accumulation.element.id + '_datalabel_Series_' + series + '_';\n var datalabelGroup = this.accumulation.renderer.createGroup({ id: id + 'g_' + point.index });\n point.label = point.originalText || point.y.toString();\n var border = { width: dataLabel.border.width, color: dataLabel.border.color };\n var argsData = {\n cancel: false, name: textRender, series: this.accumulation.visibleSeries[0], point: point,\n text: point.label, border: border, color: dataLabel.fill, template: dataLabel.template\n };\n this.accumulation.trigger(textRender, argsData);\n var isTemplate = argsData.template !== null;\n point.labelVisible = !argsData.cancel;\n point.text = point.label = argsData.text;\n this.marginValue = argsData.border.width ? (5 + argsData.border.width) : 1;\n // Template element\n var childElement = createElement('div', {\n id: this.accumulation.element.id + '_Series_' + 0 + '_DataLabel_' + point.index,\n styles: 'position: absolute;background-color:' + argsData.color + ';' +\n getFontStyle(dataLabel.font) + ';border:' + argsData.border.width + 'px solid ' + argsData.border.color + ';'\n });\n var textSize = isTemplate ? this.getTemplateSize(childElement, point, argsData) :\n measureText(point.label, dataLabel.font);\n textSize.height += 4; // 4 for calculation with padding for smart label shape\n textSize.width += 4;\n this.getDataLabelPosition(point, dataLabel, textSize, points, datalabelGroup, id);\n if (point.labelVisible) {\n this.correctLabelRegion(point.labelRegion, textSize);\n if (isTemplate) {\n this.setTemplateStyle(childElement, point, templateElement, dataLabel.font.color, argsData.color);\n }\n else {\n datalabelGroup.appendChild(this.accumulation.renderer.drawRectangle(new RectOption(id + 'shape_' + point.index, argsData.color, argsData.border, 1, point.labelRegion, dataLabel.rx, dataLabel.ry)));\n textElement(new TextOption(id + 'text_' + point.index, point.labelRegion.x + this.marginValue, point.labelRegion.y + (textSize.height * 3 / 4) + this.marginValue, 'start', point.label, '', 'auto'), dataLabel.font, dataLabel.font.color || this.getSaturatedColor(point, argsData.color), datalabelGroup);\n }\n if (this.accumulation.accumulationLegendModule && (dataLabel.position === 'Outside' || this.accumulation.enableSmartLabels)) {\n this.accumulation.visibleSeries[0].findMaxBounds(this.accumulation.visibleSeries[0].labelBound, point.labelRegion);\n }\n if (point.labelPosition === 'Outside') {\n var path = this.getConnectorPath(extend({}, point.labelRegion, null, true), point, dataLabel, point.labelAngle);\n var pathElement = this.accumulation.renderer.drawPath(new PathOption(id + 'connector_' + point.index, 'transparent', dataLabel.connectorStyle.width, dataLabel.connectorStyle.color || point.color, 1, '', path));\n datalabelGroup.appendChild(pathElement);\n }\n parent.appendChild(datalabelGroup);\n }\n };\n /**\n * To find the template element size\n * @param element\n * @param point\n * @param argsData\n */\n AccumulationDataLabel.prototype.getTemplateSize = function (element, point, argsData) {\n var clientRect;\n element = createTemplate(element, point.index, argsData.template, this.accumulation, point, this.accumulation.visibleSeries[0]);\n clientRect = measureElementRect(element);\n return { width: clientRect.width, height: clientRect.height };\n };\n /**\n * To set the template element style\n * @param childElement\n * @param point\n * @param parent\n * @param labelColor\n * @param fill\n */\n AccumulationDataLabel.prototype.setTemplateStyle = function (childElement, point, parent, labelColor, fill) {\n childElement.style.left = (point.labelRegion.x) + 'px';\n childElement.style.top = (point.labelRegion.y) + 'px';\n childElement.style.color = labelColor ||\n this.getSaturatedColor(point, fill);\n if (childElement.childElementCount) {\n parent.appendChild(childElement);\n this.doTemplateAnimation(this.accumulation, childElement);\n }\n };\n /**\n * To find saturated color for datalabel\n */\n AccumulationDataLabel.prototype.getSaturatedColor = function (point, color) {\n var saturatedColor;\n if (this.marginValue >= 1) {\n saturatedColor = color === 'transparent' ? this.getLabelBackground(point) : color;\n }\n else {\n saturatedColor = this.getLabelBackground(point);\n }\n saturatedColor = (saturatedColor === 'transparent') ? window.getComputedStyle(document.body, null).backgroundColor : saturatedColor;\n var rgbValue = convertHexToColor(colorNameToHex(saturatedColor));\n var contrast = Math.round((rgbValue.r * 299 + rgbValue.g * 587 + rgbValue.b * 114) / 1000);\n return contrast >= 128 ? 'black' : 'white';\n };\n /**\n * Animates the data label template.\n * @return {void}.\n * @private\n */\n AccumulationDataLabel.prototype.doTemplateAnimation = function (accumulation, element) {\n var series = accumulation.visibleSeries[0];\n var delay = series.animation.delay + series.animation.duration;\n if (series.animation.enable && accumulation.animateSeries) {\n element.style.visibility = 'hidden';\n templateAnimate(element, delay, 200, 'ZoomIn');\n }\n };\n /**\n * To find background color for the datalabel\n */\n AccumulationDataLabel.prototype.getLabelBackground = function (point) {\n return point.labelPosition === 'Outside' ?\n this.accumulation.background || this.accumulation.themeStyle.background : point.color;\n };\n /**\n * To correct the padding between datalabel regions.\n */\n AccumulationDataLabel.prototype.correctLabelRegion = function (labelRegion, textSize, padding) {\n if (padding === void 0) { padding = 4; }\n labelRegion.height -= padding;\n labelRegion.width -= padding;\n labelRegion.x += padding / 2;\n labelRegion.y += padding / 2;\n textSize.height -= padding;\n textSize.width -= padding;\n };\n /**\n * To get the dataLabel module name\n */\n AccumulationDataLabel.prototype.getModuleName = function () {\n return 'AccumulationDataLabel';\n };\n /**\n * To destroy the data label.\n * @return {void}\n * @private\n */\n AccumulationDataLabel.prototype.destroy = function (accumulation) {\n /**\n * Destroy method performed here\n */\n };\n return AccumulationDataLabel;\n}(AccumulationBase));\nexport { AccumulationDataLabel };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * AccumulationChart Tooltip file\n */\nimport { Browser, Animation } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { AccPointData, withInBounds, ChartLocation, PathOption, drawSymbol, Size, indexFinder } from '../../common/utils/helper';\nimport { BaseTooltip } from '../../common/user-interaction/tooltip';\n/**\n * `AccumulationTooltip` module is used to render tooltip for accumulation chart.\n */\nvar AccumulationTooltip = /** @class */ (function (_super) {\n __extends(AccumulationTooltip, _super);\n function AccumulationTooltip(accumulation) {\n var _this = _super.call(this, accumulation) || this;\n _this.accumulation = accumulation;\n _this.addEventListener();\n return _this;\n }\n /**\n * @hidden\n */\n AccumulationTooltip.prototype.addEventListener = function () {\n if (this.accumulation.isDestroyed) {\n return;\n }\n this.accumulation.on(Browser.isPointer ? 'pointerleave' : 'mouseleave', this.mouseLeaveHandler, this);\n this.accumulation.on(Browser.touchMoveEvent, this.mouseMoveHandler, this);\n this.accumulation.on(Browser.touchEndEvent, this.mouseUpHandler, this);\n };\n AccumulationTooltip.prototype.mouseLeaveHandler = function (e) {\n this.removeTooltip(1000);\n };\n AccumulationTooltip.prototype.mouseUpHandler = function (e) {\n var control = this.accumulation;\n if (control.tooltip.enable && control.isTouch && withInBounds(control.mouseX, control.mouseY, control.initialClipRect)) {\n this.tooltip(e);\n this.removeTooltip(2000);\n }\n };\n AccumulationTooltip.prototype.mouseMoveHandler = function (e) {\n var control = this.accumulation;\n // Tooltip for chart series. \n if (control.tooltip.enable && withInBounds(control.mouseX, control.mouseY, control.initialClipRect)) {\n this.tooltip(e);\n }\n };\n /**\n * Renders the tooltip.\n * @param {PointerEvent} event - Mouse move event.\n * @return {void}\n */\n AccumulationTooltip.prototype.tooltip = function (event) {\n var isTooltip = this.getElement(this.element.id + '_tooltip');\n var tooltipDiv = this.getTooltipElement(isTooltip);\n this.renderSeriesTooltip(event, this.accumulation, !isTooltip, tooltipDiv);\n };\n AccumulationTooltip.prototype.renderSeriesTooltip = function (e, chart, isFirst, tooltipDiv) {\n var data = this.getPieData(e, chart, chart.mouseX, chart.mouseY);\n var rect = chart.initialClipRect;\n this.currentPoints = [];\n var markerSide;\n if (data.point && (!this.previousPoints[0] || (this.previousPoints[0].point !== data.point))) {\n if (this.pushData(data, isFirst, tooltipDiv, false)) {\n var text = this.getTooltipText(data, chart.tooltip);\n if (!chart.tooltip.template) {\n if (this.header !== '') {\n this.findHeader(data);\n }\n markerSide = this.renderTooltip(data, rect, data.point.symbolLocation, text, isFirst, false);\n if (markerSide) {\n this.drawMarker(markerSide.isBottom, 10);\n }\n }\n else {\n this.renderTemplate(data, rect, data.point.symbolLocation, this.getTemplateText(data), isFirst);\n }\n this.isRemove = true;\n }\n this.previousPoints = extend([], this.currentPoints, null, true);\n }\n else {\n if (!data.point && this.isRemove) {\n this.removeTooltip(1000);\n this.isRemove = false;\n }\n }\n };\n AccumulationTooltip.prototype.drawMarker = function (isBottom, size) {\n var count = 0;\n var shapeOption;\n var groupElement = this.getElement(this.element.id + '_tooltip_group');\n var markerGroup = this.chart.renderer.createGroup({ id: this.element.id + '_tooltip_trackball_group' });\n var x = (this.padding * 2) + (size / 2);\n var y;\n var series;\n for (var _i = 0, _a = this.currentPoints; _i < _a.length; _i++) {\n var data = _a[_i];\n series = data.series;\n y = this.markerPoint[count] - this.padding + (isBottom ? this.arrowPadding : 0);\n shapeOption = new PathOption(this.element.id + '_Tooltip_Trackball_' + series.index, data.point.color, 1, '#cccccc', series.opacity, null);\n markerGroup.appendChild(drawSymbol(new ChartLocation(x, y), 'Circle', new Size(size, size), null, shapeOption, null));\n count++;\n }\n groupElement.appendChild(markerGroup);\n };\n AccumulationTooltip.prototype.getPieData = function (e, chart, x, y) {\n var target = e.target;\n var id = indexFinder(target.id, true);\n if (!isNaN(id.series)) {\n var seriesIndex = id.series;\n var pointIndex = id.point;\n if (!isNullOrUndefined(seriesIndex) && !isNaN(seriesIndex) && !isNullOrUndefined(pointIndex) && !isNaN(pointIndex)) {\n var series = this.getSeriesFromIndex(seriesIndex, chart.visibleSeries);\n if (series.enableTooltip) {\n return new AccPointData(series.points[pointIndex], series);\n }\n }\n }\n return new AccPointData(null, null);\n };\n /**\n * To get series from index\n */\n AccumulationTooltip.prototype.getSeriesFromIndex = function (index, visibleSeries) {\n return visibleSeries[0];\n };\n AccumulationTooltip.prototype.getTemplateText = function (data) {\n var point = extend({}, data.point);\n return point;\n };\n AccumulationTooltip.prototype.getTooltipText = function (data, tooltip) {\n var series = data.series;\n var format = tooltip.format ? tooltip.format : '${point.x} :
${point.y} ';\n return this.parseTemplate(data.point, series, format);\n };\n AccumulationTooltip.prototype.findHeader = function (data) {\n this.header = this.parseTemplate(data.point, data.series, this.header);\n if (this.header.replace(/
/g, '').replace(/<\\/b>/g, '').trim() !== '') {\n this.formattedText = this.formattedText.concat(this.header);\n }\n };\n AccumulationTooltip.prototype.parseTemplate = function (point, series, format) {\n var value;\n var textValue;\n for (var _i = 0, _a = Object.keys(point); _i < _a.length; _i++) {\n var dataValue = _a[_i];\n value = new RegExp('${point' + '.' + dataValue + '}', 'gm');\n format = format.replace(value.source, point[dataValue]);\n }\n for (var _b = 0, _c = Object.keys(Object.getPrototypeOf(series)); _b < _c.length; _b++) {\n var dataValue = _c[_b];\n value = new RegExp('${series' + '.' + dataValue + '}', 'gm');\n textValue = series[dataValue];\n format = format.replace(value.source, textValue);\n }\n return format;\n };\n /**\n * Removes the tooltip on mouse leave.\n * @return {void}\n * @private\n */\n AccumulationTooltip.prototype.removeTooltip = function (duration) {\n var _this = this;\n var chart = this.control;\n var tooltipElement = this.getElement(this.element.id + '_tooltip');\n this.stopAnimation();\n if (tooltipElement && this.previousPoints.length > 0) {\n var data_1 = this.previousPoints;\n this.toolTipInterval = setTimeout(function () {\n var series = data_1[0].series;\n var tooltipGroup = tooltipElement.firstChild;\n var opacity = parseFloat(tooltipGroup.getAttribute('opacity')) || 1;\n var element = _this.getElement(chart.element.id + '_Series_' + data_1[0].series.index\n + '_Point_' + data_1[0].point.index);\n var rectOpacity;\n if (element) {\n rectOpacity = parseFloat(element.getAttribute('opacity'));\n }\n new Animation({}).animate(tooltipGroup, {\n duration: 200,\n progress: function (args) {\n _this.progressAnimation(element, tooltipGroup, series, opacity, rectOpacity, (args.timeStamp / args.duration), series.isRectSeries, false);\n },\n end: function (model) {\n _this.previousPoints = [];\n _this.endAnimation(element, tooltipGroup, series, false);\n }\n });\n }, duration);\n }\n };\n /**\n * Get module name\n */\n AccumulationTooltip.prototype.getModuleName = function () {\n return 'AccumulationTooltip';\n };\n /**\n * To destroy the Tooltip.\n * @return {void}\n * @private\n */\n AccumulationTooltip.prototype.destroy = function (chart) {\n /**\n * Destroy method calling here\n */\n };\n return AccumulationTooltip;\n}(BaseTooltip));\nexport { AccumulationTooltip };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { extend } from '@syncfusion/ej2-base';\nimport { indexFinder } from '../../common/utils/helper';\nimport { pointByIndex } from '../model/acc-base';\nimport { Index } from '../../common/model/base';\nimport { BaseSelection } from '../../common/user-interaction/selection';\n/**\n * `AccumulationSelection` module handles the selection for accumulation chart.\n * @private\n */\nvar AccumulationSelection = /** @class */ (function (_super) {\n __extends(AccumulationSelection, _super);\n function AccumulationSelection(accumulation) {\n var _this = _super.call(this, accumulation) || this;\n _this.renderer = accumulation.renderer;\n return _this;\n }\n /**\n * To initialize the private variables\n */\n AccumulationSelection.prototype.initPrivateVariables = function (accumulation) {\n this.styleId = accumulation.element.id + '_ej2_chart_selection';\n this.unselected = accumulation.element.id + '_ej2_deselected';\n this.selectedDataIndexes = [];\n this.rectPoints = null;\n };\n /**\n * Invoke selection for rendered chart.\n * @param {AccumulationChart} chart - Define the chart to invoke the selection.\n * @return {void}\n */\n AccumulationSelection.prototype.invokeSelection = function (accumulation) {\n this.initPrivateVariables(accumulation);\n this.series = extend({}, accumulation.visibleSeries, null, true);\n this.seriesStyles();\n this.selectDataIndex(this.concatIndexes(accumulation.selectedDataIndexes, this.selectedDataIndexes), accumulation);\n };\n /**\n * To get series selection style by series.\n */\n AccumulationSelection.prototype.generateStyle = function (series) {\n return (series.selectionStyle || this.styleId + '_series_' + series.index);\n };\n /**\n * To get elements by index, series\n */\n AccumulationSelection.prototype.findElements = function (accumulation, series, index) {\n return [this.getElementByIndex(index)];\n };\n /**\n * To get series point element by index\n */\n AccumulationSelection.prototype.getElementByIndex = function (index) {\n var elementId = this.control.element.id + '_Series_' + index.series + '_Point_' + index.point;\n return document.getElementById(elementId);\n };\n /**\n * To calculate selected elements on mouse click or touch\n * @private\n */\n AccumulationSelection.prototype.calculateSelectedElements = function (accumulation, event) {\n if (event.target.id.indexOf(accumulation.element.id + '_') === -1) {\n return;\n }\n if (event.target.id.indexOf('_Series_') > -1 || event.target.id.indexOf('_datalabel_') > -1) {\n this.performSelection(indexFinder(event.target.id), accumulation, event.target);\n }\n };\n /**\n * To perform the selection process based on index and element.\n */\n AccumulationSelection.prototype.performSelection = function (index, accumulation, element) {\n element = element.id.indexOf('datalabel') > -1 ?\n accumulation.getSeriesElement().childNodes[index.series].childNodes[index.point]\n : element;\n switch (accumulation.selectionMode) {\n case 'Point':\n if (!isNaN(index.point)) {\n this.selection(accumulation, index, [element]);\n this.blurEffect(accumulation.element.id, accumulation.visibleSeries);\n }\n break;\n }\n };\n /**\n * To select the element by index. Adding or removing selection style class name.\n */\n AccumulationSelection.prototype.selection = function (accumulation, index, selectedElements) {\n if (!accumulation.isMultiSelect) {\n this.removeMultiSelectEelments(accumulation, this.selectedDataIndexes, index, accumulation.series);\n }\n var className = selectedElements[0] && (selectedElements[0].getAttribute('class') || '');\n if (selectedElements[0] && className.indexOf(this.getSelectionClass(selectedElements[0].id)) > -1) {\n this.removeStyles(selectedElements, index);\n this.addOrRemoveIndex(this.selectedDataIndexes, index);\n }\n else {\n this.applyStyles(selectedElements, index);\n this.addOrRemoveIndex(this.selectedDataIndexes, index, true);\n }\n };\n /**\n * To redraw the selection process on accumulation chart refresh.\n * @private\n */\n AccumulationSelection.prototype.redrawSelection = function (accumulation, oldMode) {\n var selectedDataIndexes = extend([], this.selectedDataIndexes, null, true);\n this.removeSelectedElements(accumulation, this.selectedDataIndexes);\n this.blurEffect(accumulation.element.id, accumulation.visibleSeries);\n this.selectDataIndex(selectedDataIndexes, accumulation);\n };\n /**\n * To remove the selected elements style classes by indexes.\n */\n AccumulationSelection.prototype.removeSelectedElements = function (accumulation, indexes) {\n var seriesgroup = accumulation.getSeriesElement();\n for (var _i = 0, indexes_1 = indexes; _i < indexes_1.length; _i++) {\n var index = indexes_1[_i];\n this.removeStyles([this.getElementByIndex(index)], index);\n }\n };\n /**\n * To perform the selection for legend elements.\n * @private\n */\n AccumulationSelection.prototype.legendSelection = function (accumulation, series, pointIndex) {\n var element = accumulation.getSeriesElement().childNodes[series].childNodes[pointIndex];\n var seriesStyle = this.generateStyle(accumulation.visibleSeries[series]);\n var seriesElements = accumulation.getSeriesElement().childNodes[series].childNodes[pointIndex];\n this.selection(accumulation, new Index(series, pointIndex), [seriesElements]);\n this.blurEffect(accumulation.element.id, accumulation.visibleSeries);\n };\n /**\n * To select the element by selected data indexes.\n */\n AccumulationSelection.prototype.selectDataIndex = function (indexes, accumulation) {\n var element;\n for (var _i = 0, indexes_2 = indexes; _i < indexes_2.length; _i++) {\n var index = indexes_2[_i];\n element = this.getElementByIndex(index);\n if (element) {\n this.performSelection(index, accumulation, element);\n }\n }\n };\n /**\n * To remove the selection styles for multi selection process.\n */\n AccumulationSelection.prototype.removeMultiSelectEelments = function (accumulation, index, currentIndex, seriesCollection) {\n var series;\n for (var i = 0; i < index.length; i++) {\n series = seriesCollection[index[i].series];\n if (!this.checkEquals(index[i], currentIndex)) {\n this.removeStyles(this.findElements(accumulation, series, index[i]), index[i]);\n index.splice(i, 1);\n i--;\n }\n }\n };\n /**\n * To apply the opacity effect for accumulation chart series elements.\n */\n AccumulationSelection.prototype.blurEffect = function (pieId, visibleSeries) {\n var visibility = this.checkPointVisibility(this.selectedDataIndexes); // legend click scenario\n for (var _i = 0, visibleSeries_1 = visibleSeries; _i < visibleSeries_1.length; _i++) {\n var series = visibleSeries_1[_i];\n if (series.visible) {\n this.checkSelectionElements(document.getElementById(pieId + '_SeriesCollection'), this.generateStyle(series), visibility);\n }\n }\n };\n /**\n * To check selection elements by style class name.\n */\n AccumulationSelection.prototype.checkSelectionElements = function (element, className, visibility) {\n var children = (element.childNodes[0].childNodes);\n var legendShape;\n var elementClass;\n var parentClass;\n for (var i = 0; i < children.length; i++) {\n elementClass = children[i].getAttribute('class') || '';\n parentClass = children[i].parentNode.getAttribute('class') || '';\n if (elementClass.indexOf(className) === -1 && parentClass.indexOf(className) === -1 && visibility) {\n this.addSvgClass(children[i], this.unselected);\n }\n else {\n this.removeSvgClass(children[i], this.unselected);\n }\n if (this.control.accumulationLegendModule && this.control.legendSettings.visible) {\n legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + i);\n if (legendShape) {\n if (elementClass.indexOf(className) === -1 && parentClass.indexOf(className) === -1 && visibility) {\n this.addSvgClass(legendShape, this.unselected);\n }\n else {\n this.removeSvgClass(legendShape, this.unselected);\n }\n }\n }\n }\n };\n /**\n * To apply selection style for elements.\n */\n AccumulationSelection.prototype.applyStyles = function (elements, index) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n var legendShape = void 0;\n if (element) {\n if (this.control.accumulationLegendModule && this.control.legendSettings.visible) {\n legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + index.point);\n this.removeSvgClass(legendShape, this.unselected);\n this.addSvgClass(legendShape, this.getSelectionClass(legendShape.id));\n }\n this.removeSvgClass(element.parentNode, this.unselected);\n this.removeSvgClass(element, this.unselected);\n this.addSvgClass(element, this.getSelectionClass(element.id));\n }\n }\n };\n /**\n * To get selection style class name by id\n */\n AccumulationSelection.prototype.getSelectionClass = function (id) {\n return this.generateStyle(this.control.series[indexFinder(id).series]);\n };\n /**\n * To remove selection style for elements.\n */\n AccumulationSelection.prototype.removeStyles = function (elements, index) {\n var legendShape;\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n if (element) {\n if (this.control.accumulationLegendModule && this.control.legendSettings.visible) {\n legendShape = document.getElementById(this.control.element.id + '_chart_legend_shape_' + index.point);\n this.removeSvgClass(legendShape, this.getSelectionClass(legendShape.id));\n }\n this.removeSvgClass(element, this.getSelectionClass(element.id));\n }\n }\n };\n /**\n * To apply or remove selected elements index.\n */\n AccumulationSelection.prototype.addOrRemoveIndex = function (indexes, index, add) {\n for (var i = 0; i < indexes.length; i++) {\n if (this.checkEquals(indexes[i], index)) {\n indexes.splice(i, 1);\n i--;\n }\n }\n if (add) {\n indexes.push(index);\n }\n };\n /**\n * To check two index, point and series are equal\n */\n AccumulationSelection.prototype.checkEquals = function (first, second) {\n return ((first.point === second.point) && (first.series === second.series));\n };\n /**\n * To check selected points are visibility\n */\n AccumulationSelection.prototype.checkPointVisibility = function (selectedDataIndexes) {\n var visible = false;\n for (var _i = 0, selectedDataIndexes_1 = selectedDataIndexes; _i < selectedDataIndexes_1.length; _i++) {\n var data = selectedDataIndexes_1[_i];\n if (pointByIndex(data.point, this.control.visibleSeries[0].points).visible) {\n visible = true;\n break;\n }\n }\n return visible;\n };\n /**\n * Get module name.\n */\n AccumulationSelection.prototype.getModuleName = function () {\n return 'AccumulationSelection';\n };\n /**\n * To destroy the selection.\n * @return {void}\n * @private\n */\n AccumulationSelection.prototype.destroy = function (accumulation) {\n // Destroy method performed here\n };\n return AccumulationSelection;\n}(BaseSelection));\nexport { AccumulationSelection };\n","/**\n * AccumulationChart annotation properties\n */\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { AnnotationBase } from '../../common/annotation/annotation';\nimport { appendElement } from '../../common/utils/helper';\nimport { createElement } from '@syncfusion/ej2-base';\n/**\n * `AccumulationAnnotation` module handles the annotation for accumulation chart.\n */\nvar AccumulationAnnotation = /** @class */ (function (_super) {\n __extends(AccumulationAnnotation, _super);\n /**\n * Constructor for accumulation chart annotation.\n * @private.\n */\n function AccumulationAnnotation(control) {\n var _this = _super.call(this, control) || this;\n _this.pie = control;\n return _this;\n }\n /**\n * Method to render the annotation for accumulation chart\n * @param element\n */\n AccumulationAnnotation.prototype.renderAnnotations = function (element) {\n var _this = this;\n this.annotations = this.pie.annotations;\n this.parentElement = createElement('div', {\n id: this.pie.element.id + '_Annotation_Collections'\n });\n this.annotations.map(function (annotation, index) {\n _this.processAnnotation(annotation, index, _this.parentElement);\n });\n appendElement(this.parentElement, element);\n };\n /**\n * Get module name.\n */\n AccumulationAnnotation.prototype.getModuleName = function () {\n // Returns te module name\n return 'Annotation';\n };\n /**\n * To destroy the annotation.\n * @return {void}\n * @private\n */\n AccumulationAnnotation.prototype.destroy = function (control) {\n // Destroy method performed here\n };\n return AccumulationAnnotation;\n}(AnnotationBase));\nexport { AccumulationAnnotation };\n","import * as index from '@syncfusion/ej2-charts';\nindex.Chart.Inject( index.LineSeries,index.ScatterSeries,index.ColumnSeries,index.SplineSeries,index.SplineAreaSeries,index.StripLine,index.AreaSeries,index.StepLineSeries,index.StepAreaSeries,index.StackingColumnSeries,index.StackingAreaSeries,index.BarSeries,index.StackingBarSeries,index.RangeColumnSeries,index.BubbleSeries,index.Tooltip,index.Crosshair,index.Category,index.DateTime,index.Logarithmic,index.Legend,index.Zoom,index.DataLabel,index.Selection,index.ChartAnnotation,index.HiloSeries,index.HiloOpenCloseSeries,index.WaterfallSeries,index.RangeAreaSeries,index.CandleSeries,index.PolarSeries,index.RadarSeries,index.SmaIndicator,index.TmaIndicator,index.EmaIndicator,index.AccumulationDistributionIndicator,index.MacdIndicator,index.AtrIndicator,index.RsiIndicator,index.MomentumIndicator,index.StochasticIndicator,index.BollingerBands,index.BoxAndWhiskerSeries,index.ErrorBar,index.Trendlines,index.DateTimeCategory,index.MultiColoredLineSeries,index.MultiColoredAreaSeries,index.MultiLevelLabel);\nindex.AccumulationChart.Inject( index.PieSeries,index.FunnelSeries,index.PyramidSeries,index.AccumulationTooltip,index.AccumulationLegend,index.AccumulationSelection,index.AccumulationDataLabel,index.AccumulationAnnotation);\nexport * from '@syncfusion/ej2-charts';\n","/**\n * Specifies gauge Themes\n */\nexport var Theme;\n(function (Theme) {\n /** @private */\n Theme.axisLabelFont = {\n size: '12px',\n fontWeight: 'Normal',\n color: null,\n fontStyle: 'Normal',\n fontFamily: 'Segoe UI'\n };\n /** @private */\n Theme.axisLineColor = null;\n /** @private */\n Theme.tickLineColor = null;\n /** @private */\n Theme.pointerColor = null;\n})(Theme || (Theme = {}));\n/** @private */\nexport function getRangePalette(theme) {\n var palette = ['#50c917', '#27d5ff', '#fcde0b', '#ffb133', '#ff5985'];\n // switch (theme) {\n // case 'Material':\n // palette = ['#50c917', '#27d5ff', '#fcde0b', '#ffb133', '#ff5985'];\n // break;\n // case 'Fabric':\n // palette = ['#50c917', '#27d5ff', '#fcde0b', '#ffb133', '#ff5985'];\n // break;\n // }\n return palette;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\n/**\n * Configures the borders in circular gauge.\n */\nvar Border = /** @class */ (function (_super) {\n __extends(Border, _super);\n function Border() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Border.prototype, \"color\", void 0);\n __decorate([\n Property(1)\n ], Border.prototype, \"width\", void 0);\n return Border;\n}(ChildProperty));\nexport { Border };\n/**\n * Configures the fonts in circular gauge.\n */\nvar Font = /** @class */ (function (_super) {\n __extends(Font, _super);\n function Font() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('16px')\n ], Font.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], Font.prototype, \"color\", void 0);\n __decorate([\n Property('Segoe UI')\n ], Font.prototype, \"fontFamily\", void 0);\n __decorate([\n Property('Normal')\n ], Font.prototype, \"fontWeight\", void 0);\n __decorate([\n Property('Normal')\n ], Font.prototype, \"fontStyle\", void 0);\n __decorate([\n Property(1)\n ], Font.prototype, \"opacity\", void 0);\n return Font;\n}(ChildProperty));\nexport { Font };\n/**\n * Configures the margin of circular gauge.\n */\nvar Margin = /** @class */ (function (_super) {\n __extends(Margin, _super);\n function Margin() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(10)\n ], Margin.prototype, \"left\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"right\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"top\", void 0);\n __decorate([\n Property(10)\n ], Margin.prototype, \"bottom\", void 0);\n return Margin;\n}(ChildProperty));\nexport { Margin };\n/**\n * Configures the tooltip in circular gauge.\n */\nvar TooltipSettings = /** @class */ (function (_super) {\n __extends(TooltipSettings, _super);\n function TooltipSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], TooltipSettings.prototype, \"enable\", void 0);\n __decorate([\n Property('#FFFFFF')\n ], TooltipSettings.prototype, \"fill\", void 0);\n __decorate([\n Complex({ color: '#686868', size: '13px' }, Font)\n ], TooltipSettings.prototype, \"textStyle\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], TooltipSettings.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], TooltipSettings.prototype, \"enableAnimation\", void 0);\n __decorate([\n Complex({ color: 'black', width: 2 }, Border)\n ], TooltipSettings.prototype, \"border\", void 0);\n return TooltipSettings;\n}(ChildProperty));\nexport { TooltipSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, Complex, ChildProperty, Collection } from '@syncfusion/ej2-base';\nimport { Font, Border } from '../model/base';\nimport { Theme } from '../model/theme';\n/**\n * Configures the axis line.\n */\nvar Line = /** @class */ (function (_super) {\n __extends(Line, _super);\n function Line() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(2)\n ], Line.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Line.prototype, \"dashArray\", void 0);\n __decorate([\n Property(Theme.axisLineColor)\n ], Line.prototype, \"color\", void 0);\n return Line;\n}(ChildProperty));\nexport { Line };\n/**\n * Configures the axis label.\n */\nvar Label = /** @class */ (function (_super) {\n __extends(Label, _super);\n function Label() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex(Theme.axisLabelFont, Font)\n ], Label.prototype, \"font\", void 0);\n __decorate([\n Property('')\n ], Label.prototype, \"format\", void 0);\n __decorate([\n Property('Inside')\n ], Label.prototype, \"position\", void 0);\n __decorate([\n Property('None')\n ], Label.prototype, \"hiddenLabel\", void 0);\n __decorate([\n Property(false)\n ], Label.prototype, \"autoAngle\", void 0);\n __decorate([\n Property(false)\n ], Label.prototype, \"useRangeColor\", void 0);\n __decorate([\n Property(0)\n ], Label.prototype, \"offset\", void 0);\n return Label;\n}(ChildProperty));\nexport { Label };\n/**\n * Configures the ranges of an axis.\n */\nvar Range = /** @class */ (function (_super) {\n __extends(Range, _super);\n function Range() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Range.prototype, \"start\", void 0);\n __decorate([\n Property(null)\n ], Range.prototype, \"end\", void 0);\n __decorate([\n Property(null)\n ], Range.prototype, \"radius\", void 0);\n __decorate([\n Property(10)\n ], Range.prototype, \"startWidth\", void 0);\n __decorate([\n Property(10)\n ], Range.prototype, \"endWidth\", void 0);\n __decorate([\n Property(null)\n ], Range.prototype, \"color\", void 0);\n return Range;\n}(ChildProperty));\nexport { Range };\n/**\n * Configures the major and minor tick lines of an axis.\n */\nvar Tick = /** @class */ (function (_super) {\n __extends(Tick, _super);\n function Tick() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Tick.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Tick.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], Tick.prototype, \"interval\", void 0);\n __decorate([\n Property(0)\n ], Tick.prototype, \"offset\", void 0);\n __decorate([\n Property(Theme.tickLineColor)\n ], Tick.prototype, \"color\", void 0);\n __decorate([\n Property('Inside')\n ], Tick.prototype, \"position\", void 0);\n __decorate([\n Property(false)\n ], Tick.prototype, \"useRangeColor\", void 0);\n return Tick;\n}(ChildProperty));\nexport { Tick };\n/**\n * Configures the needle cap in pointer.\n */\nvar Cap = /** @class */ (function (_super) {\n __extends(Cap, _super);\n function Cap() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('#FFFFFF')\n ], Cap.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: Theme.pointerColor, width: 8 }, Border)\n ], Cap.prototype, \"border\", void 0);\n __decorate([\n Property(8)\n ], Cap.prototype, \"radius\", void 0);\n return Cap;\n}(ChildProperty));\nexport { Cap };\n/**\n * Configures the back needle in pointers.\n */\nvar NeedleTail = /** @class */ (function (_super) {\n __extends(NeedleTail, _super);\n function NeedleTail() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(Theme.pointerColor)\n ], NeedleTail.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: Theme.pointerColor, width: 0 }, Border)\n ], NeedleTail.prototype, \"border\", void 0);\n __decorate([\n Property('0%')\n ], NeedleTail.prototype, \"length\", void 0);\n return NeedleTail;\n}(ChildProperty));\nexport { NeedleTail };\n/**\n * Configures the animation of pointers.\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], Animation.prototype, \"enable\", void 0);\n __decorate([\n Property(1000)\n ], Animation.prototype, \"duration\", void 0);\n return Animation;\n}(ChildProperty));\nexport { Animation };\n/**\n * ‘Annotation’ module is used to handle annotation action for an axis.\n */\nvar Annotation = /** @class */ (function (_super) {\n __extends(Annotation, _super);\n function Annotation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Annotation.prototype, \"content\", void 0);\n __decorate([\n Property(90)\n ], Annotation.prototype, \"angle\", void 0);\n __decorate([\n Property('50%')\n ], Annotation.prototype, \"radius\", void 0);\n __decorate([\n Property('-1')\n ], Annotation.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Annotation.prototype, \"autoAngle\", void 0);\n __decorate([\n Complex({ size: '12px', color: '#686868' }, Font)\n ], Annotation.prototype, \"textStyle\", void 0);\n __decorate([\n Property(null)\n ], Annotation.prototype, \"description\", void 0);\n return Annotation;\n}(ChildProperty));\nexport { Annotation };\n/**\n * Configures the pointers of an axis.\n */\nvar Pointer = /** @class */ (function (_super) {\n __extends(Pointer, _super);\n function Pointer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Pointer.prototype, \"value\", void 0);\n __decorate([\n Property('Needle')\n ], Pointer.prototype, \"type\", void 0);\n __decorate([\n Property(null)\n ], Pointer.prototype, \"imageUrl\", void 0);\n __decorate([\n Property(null)\n ], Pointer.prototype, \"radius\", void 0);\n __decorate([\n Property(20)\n ], Pointer.prototype, \"pointerWidth\", void 0);\n __decorate([\n Complex({}, Cap)\n ], Pointer.prototype, \"cap\", void 0);\n __decorate([\n Complex({}, NeedleTail)\n ], Pointer.prototype, \"needleTail\", void 0);\n __decorate([\n Property(Theme.pointerColor)\n ], Pointer.prototype, \"color\", void 0);\n __decorate([\n Complex({ color: '#DDDDDD', width: 0 }, Border)\n ], Pointer.prototype, \"border\", void 0);\n __decorate([\n Complex(null, Animation)\n ], Pointer.prototype, \"animation\", void 0);\n __decorate([\n Property('Circle')\n ], Pointer.prototype, \"markerShape\", void 0);\n __decorate([\n Property(5)\n ], Pointer.prototype, \"markerHeight\", void 0);\n __decorate([\n Property(null)\n ], Pointer.prototype, \"description\", void 0);\n __decorate([\n Property(5)\n ], Pointer.prototype, \"markerWidth\", void 0);\n return Pointer;\n}(ChildProperty));\nexport { Pointer };\n/**\n * Configures an axis in a gauge.\n */\nvar Axis = /** @class */ (function (_super) {\n __extends(Axis, _super);\n function Axis() {\n /**\n * Specifies the minimum value of an axis.\n * @default null\n */\n var _this = _super !== null && _super.apply(this, arguments) || this;\n /** @private */\n _this.visibleLabels = [];\n return _this;\n }\n __decorate([\n Property(null)\n ], Axis.prototype, \"minimum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"maximum\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"radius\", void 0);\n __decorate([\n Complex({}, Line)\n ], Axis.prototype, \"lineStyle\", void 0);\n __decorate([\n Collection([{}], Range)\n ], Axis.prototype, \"ranges\", void 0);\n __decorate([\n Collection([{}], Pointer)\n ], Axis.prototype, \"pointers\", void 0);\n __decorate([\n Collection([{}], Annotation)\n ], Axis.prototype, \"annotations\", void 0);\n __decorate([\n Complex({ width: 2, height: 10 }, Tick)\n ], Axis.prototype, \"majorTicks\", void 0);\n __decorate([\n Complex({ width: 2, height: 5 }, Tick)\n ], Axis.prototype, \"minorTicks\", void 0);\n __decorate([\n Property(200)\n ], Axis.prototype, \"startAngle\", void 0);\n __decorate([\n Property(160)\n ], Axis.prototype, \"endAngle\", void 0);\n __decorate([\n Property('ClockWise')\n ], Axis.prototype, \"direction\", void 0);\n __decorate([\n Property(null)\n ], Axis.prototype, \"background\", void 0);\n __decorate([\n Complex({}, Label)\n ], Axis.prototype, \"labelStyle\", void 0);\n return Axis;\n}(ChildProperty));\nexport { Axis };\n","import { stringToNumber, getLocationFromAngle, getFontStyle } from '../utils/helper';\nimport { getElement, getTemplateFunction, measureElementRect } from '../utils/helper';\nimport { annotationRender } from '../model/constants';\nimport { createElement } from '@syncfusion/ej2-base';\n/**\n * Annotation Module handles the annotation of the axis.\n */\nvar Annotations = /** @class */ (function () {\n /**\n * Constructor for Annotation module.\n * @private.\n */\n function Annotations(gauge) {\n this.gauge = gauge;\n this.elementId = gauge.element.id;\n }\n /**\n * Method to render the annotation for circular gauge.\n */\n Annotations.prototype.renderAnnotation = function (axis, index) {\n var _this = this;\n var element = createElement('div', {\n id: this.elementId + '_Annotations_' + index\n });\n var parentElement = getElement(this.elementId + '_Secondary_Element');\n axis.annotations.map(function (annotation, annotationIndex) {\n if (annotation.content !== null) {\n _this.createTemplate(element, annotationIndex, index);\n }\n });\n if (parentElement && element.childElementCount) {\n parentElement.appendChild(element);\n }\n };\n /**\n * Method to create annotation template for circular gauge.\n */\n Annotations.prototype.createTemplate = function (element, annotationIndex, axisIndex) {\n var axis = this.gauge.axes[axisIndex];\n var annotation = axis.annotations[annotationIndex];\n var childElement = createElement('div', {\n id: this.elementId + '_Axis_' + axisIndex + '_Annotation_' + annotationIndex,\n styles: 'position: absolute; z-index:' + annotation.zIndex + ';transform:' +\n (annotation.autoAngle ? 'rotate(' + (annotation.angle - 90) + 'deg)' : 'rotate(0deg)') + ';'\n });\n var argsData = {\n cancel: false, name: annotationRender, content: annotation.content,\n axis: axis, annotation: annotation, textStyle: annotation.textStyle\n };\n this.gauge.trigger(annotationRender, argsData);\n var templateFn;\n var templateElement;\n if (!argsData.cancel) {\n templateFn = getTemplateFunction(argsData.content);\n if (templateFn && templateFn(axis).length) {\n templateElement = templateFn(axis);\n while (templateElement.length > 0) {\n childElement.appendChild(templateElement[0]);\n }\n }\n else {\n childElement.appendChild(createElement('div', {\n innerHTML: argsData.content,\n styles: getFontStyle(argsData.textStyle)\n }));\n }\n this.updateLocation(childElement, axis, annotation);\n element.appendChild(childElement);\n }\n };\n /**\n * Method to update the annotation location for circular gauge.\n */\n Annotations.prototype.updateLocation = function (element, axis, annotation) {\n var location = getLocationFromAngle(annotation.angle - 90, stringToNumber(annotation.radius, axis.currentRadius), this.gauge.midPoint);\n var elementRect = measureElementRect(element);\n element.style.left = (location.x - (elementRect.width / 2)) + 'px';\n element.style.top = (location.y - (elementRect.height / 2)) + 'px';\n element.setAttribute('aria-label', annotation.description || 'Annotation');\n };\n /**\n * Get module name.\n */\n Annotations.prototype.getModuleName = function () {\n // Returns te module name\n return 'Annotations';\n };\n /**\n * To destroy the annotation.\n * @return {void}\n * @private\n */\n Annotations.prototype.destroy = function (gauge) {\n // Destroy method performed here\n };\n return Annotations;\n}());\nexport { Annotations };\n","/**\n * Specifies the gauge constant value\n */\n/** @private */\nexport var loaded = 'loaded';\n/** @private */\nexport var load = 'load';\n/** @private */\nexport var animationComplete = 'animationComplete';\n/** @private */\nexport var axisLabelRender = 'axisLabelRender';\n/** @private */\nexport var tooltipRender = 'tooltipRender';\n/** @private */\nexport var annotationRender = 'annotationRender';\n/** @private */\nexport var gaugeMouseMove = 'gaugeMouseMove';\n/** @private */\nexport var gaugeMouseLeave = 'gaugeMouseLeave';\n/** @private */\nexport var gaugeMouseDown = 'gaugeMouseDown';\n/** @private */\nexport var gaugeMouseUp = 'gaugeMouseUp';\n/** @private */\nexport var dragStart = 'dragStart';\n/** @private */\nexport var dragMove = 'dragMove';\n/** @private */\nexport var dragEnd = 'dragEnd';\n/** @private */\nexport var resized = 'resized';\n","import { createElement, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { getPointer, getTemplateFunction } from '../utils/helper';\nimport { getAngleFromValue, getLabelFormat, getElement, getLocationFromAngle } from '../utils/helper';\nimport { tooltipRender } from '../model/constants';\n/**\n * Tooltip Module handles the tooltip of the circular gauge\n */\nvar GaugeTooltip = /** @class */ (function () {\n /**\n * Constructor for Tooltip module.\n * @private.\n */\n function GaugeTooltip(gauge) {\n this.gauge = gauge;\n this.element = gauge.element;\n this.tooltip = gauge.tooltip;\n this.textStyle = this.tooltip.textStyle;\n this.borderStyle = this.tooltip.border;\n this.ejTooltip = new Tooltip({\n opensOn: 'custom',\n beforeRender: this.onBeforeRender.bind(this),\n beforeOpen: this.tooltipCustomization.bind(this),\n openDelay: 0, closeDelay: 1000\n });\n this.ejTooltip.appendTo(this.element);\n }\n /**\n * Method to render the tooltip for circular gauge.\n */\n GaugeTooltip.prototype.renderTooltip = function (target) {\n var currentPointer = getPointer(target.id, this.gauge);\n var element;\n var angle;\n this.currentAxis = this.gauge.axes[currentPointer.axisIndex];\n this.currentPointer = (this.currentAxis.pointers)[currentPointer.pointerIndex];\n angle = getAngleFromValue(this.currentPointer.currentValue, this.currentAxis.visibleRange.max, this.currentAxis.visibleRange.min, this.currentAxis.startAngle, this.currentAxis.endAngle, this.currentAxis.direction === 'ClockWise') % 360;\n element = this.appendTargetElement(angle);\n if (element.getAttribute('data-tooltip-id') === null) {\n this.findPosition(angle);\n this.ejTooltip.open(element);\n }\n };\n /**\n * Method to append the target element for tooltip\n */\n GaugeTooltip.prototype.appendTargetElement = function (angle) {\n var location = getLocationFromAngle(angle, this.currentAxis.currentRadius, this.gauge.midPoint);\n var element = getElement(this.element.id + '_GaugeTooltip');\n if (element) {\n element.style.left = location.x + 'px';\n element.style.top = location.y + 'px';\n }\n else {\n element = createElement('div', {\n id: this.element.id + '_GaugeTooltip',\n styles: 'position:absolute;left:' + location.x + 'px;top:' + location.y +\n 'px;width:2px;height:2px;background:transparent'\n });\n getElement(this.element.id + '_Secondary_Element').appendChild(element);\n }\n return element;\n };\n /**\n * Method to find the position of the tooltip anchor for circular gauge.\n */\n GaugeTooltip.prototype.findPosition = function (angle) {\n switch (true) {\n case (angle >= 0 && angle <= 45):\n this.ejTooltip.position = 'RightBottom';\n break;\n case (angle >= 45 && angle < 90):\n this.ejTooltip.position = 'BottomRight';\n break;\n case (angle >= 90 && angle < 135):\n this.ejTooltip.position = 'BottomLeft';\n break;\n case (angle >= 135 && angle < 180):\n this.ejTooltip.position = 'LeftBottom';\n break;\n case (angle >= 180 && angle < 225):\n this.ejTooltip.position = 'LeftTop';\n break;\n case (angle >= 225 && angle < 270):\n this.ejTooltip.position = 'TopLeft';\n break;\n case (angle >= 270 && angle < 315):\n this.ejTooltip.position = 'TopRight';\n break;\n default:\n this.ejTooltip.position = 'RightTop';\n break;\n }\n this.ejTooltip.dataBind();\n };\n /**\n * Method to perform the tooltip for circular gauge.\n */\n GaugeTooltip.prototype.onBeforeRender = function (args) {\n var tooltipFormat = this.gauge.tooltip.format || this.currentAxis.labelStyle.format;\n var customLabelFormat = tooltipFormat && tooltipFormat.match('{value}') !== null;\n var format = this.gauge.intl.getNumberFormat({\n format: getLabelFormat(tooltipFormat), useGrouping: this.gauge.useGroupingSeparator\n });\n var content = customLabelFormat ?\n tooltipFormat.replace(new RegExp('{value}', 'g'), format(this.currentPointer.currentValue)) :\n format(this.currentPointer.currentValue);\n content = this.tooltip.template ?\n getTemplateFunction(this.tooltip.template)(this.currentAxis)[0] : content;\n var argsData = {\n cancel: false, name: tooltipRender,\n content: content,\n border: this.borderStyle,\n axis: this.currentAxis, pointer: this.currentPointer,\n textStyle: this.textStyle\n };\n this.gauge.trigger(tooltipRender, argsData);\n this.borderStyle = argsData.border;\n args.cancel = argsData.cancel;\n this.ejTooltip.content = argsData.content;\n this.textStyle = argsData.textStyle;\n this.ejTooltip.dataBind();\n };\n /**\n * Method to customize the tooltip elements for circular gauge.\n */\n GaugeTooltip.prototype.tooltipCustomization = function (args) {\n var font = this.textStyle;\n var borderColor = this.borderStyle.color;\n var border = this.borderStyle.width;\n var pointerSize = 5;\n var arrowWidth = (pointerSize - border) + 'px';\n var outerWidth;\n var innerWidth;\n args.element.classList.remove('e-popup-close');\n args.element.classList.add('e-popup-open');\n var arrowEle = args.element.querySelector('.e-arrow-tip');\n setStyleAttribute(args.element, {\n 'backgroundColor': this.tooltip.fill, 'borderColor': borderColor || '#212121',\n 'borderWidth': border + 'px'\n });\n setStyleAttribute(args.element.querySelector('.e-tip-content'), {\n 'color': font.color, 'fontFamily': font.fontFamily, 'fontSize': font.size,\n 'fontWeight': font.fontWeight, 'opacity': font.opacity.toString(), 'fontStyle': font.fontStyle\n });\n setStyleAttribute(args.element.querySelector('.e-arrow-tip'), {\n 'width': 2 * (pointerSize + border) + 'px', 'height': pointerSize + border + 'px'\n });\n if (arrowEle.classList.contains('e-tip-top')) {\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetHeight;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderBottomColor': borderColor,\n 'borderLeftWidth': outerWidth, 'borderRightWidth': outerWidth, 'borderBottomWidth': outerWidth,\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderBottomColor': this.tooltip.fill,\n 'borderLeftWidth': innerWidth, 'borderRightWidth': innerWidth, 'borderBottomWidth': innerWidth,\n 'left': border + 'px', 'top': border + 'px'\n });\n }\n else if (arrowEle.classList.contains('e-tip-bottom')) {\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetHeight;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderTopColor': borderColor,\n 'borderLeftWidth': outerWidth, 'borderRightWidth': outerWidth, 'borderTopWidth': outerWidth,\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderRightColor': 'transparent', 'borderLeftColor': 'transparent', 'borderTopColor': this.tooltip.fill,\n 'borderLeftWidth': innerWidth, 'borderRightWidth': innerWidth, 'borderTopWidth': innerWidth,\n 'left': border + 'px', 'top': '0'\n });\n }\n else if (arrowEle.classList.contains('e-tip-left')) {\n setStyleAttribute(args.element.querySelector('.e-arrow-tip'), {\n 'width': pointerSize + border + 'px', 'height': 2 * (pointerSize + border) + 'px'\n });\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetWidth;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderRightColor': borderColor,\n 'borderTopWidth': outerWidth, 'borderBottomWidth': outerWidth, 'borderRightWidth': outerWidth\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderRightColor': this.tooltip.fill,\n 'borderTopWidth': innerWidth, 'borderBottomWidth': innerWidth, 'borderRightWidth': innerWidth,\n 'left': border + 'px', 'top': border + 'px'\n });\n }\n else {\n setStyleAttribute(args.element.querySelector('.e-arrow-tip'), {\n 'width': (pointerSize + border) + 'px', 'height': 2 * (pointerSize + border) + 'px'\n });\n pointerSize = args.element.querySelector('.e-arrow-tip').offsetWidth;\n outerWidth = pointerSize + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-outer'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderLeftColor': borderColor,\n 'borderTopWidth': outerWidth, 'borderBottomWidth': outerWidth, 'borderLeftWidth': outerWidth\n });\n innerWidth = (pointerSize - border) + 'px';\n setStyleAttribute(args.element.querySelector('.e-arrow-tip-inner'), {\n 'borderTopColor': 'transparent', 'borderBottomColor': 'transparent', 'borderLeftColor': this.tooltip.fill,\n 'borderTopWidth': innerWidth, 'borderBottomWidth': innerWidth, 'borderLeftWidth': innerWidth,\n 'left': (border <= 1 ? 0 : -1) + 'px', 'top': border + 'px'\n });\n }\n this.ejTooltip.refresh(args.target);\n setStyleAttribute(args.element, {\n 'display': 'block', 'transitionProperty': 'left,top',\n 'transitionDuration': this.tooltip.enableAnimation ? '1000ms' : '0ms'\n });\n };\n /**\n * Get module name.\n */\n GaugeTooltip.prototype.getModuleName = function () {\n // Returns te module name\n return 'Tooltip';\n };\n /**\n * To destroy the tooltip.\n * @return {void}\n * @private\n */\n GaugeTooltip.prototype.destroy = function (gauge) {\n // Destroy method performed here\n };\n return GaugeTooltip;\n}());\nexport { GaugeTooltip };\n","import { getLocationFromAngle, PathOption, stringToNumber, TextOption, textElement, appendPath, toPixel } from '../utils/helper';\nimport { getAngleFromValue, isCompleteAngle, getPathArc, getRangeColor } from '../utils/helper';\nimport { getRangePalette } from '../model/theme';\n/**\n * Specifies the Axis rendering for circular gauge\n */\nvar AxisRenderer = /** @class */ (function () {\n /**\n * Constructor for axis renderer.\n * @private.\n */\n function AxisRenderer(gauge) {\n this.gauge = gauge;\n }\n /**\n * Method to render the axis element of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisOuterLine = function (axis, index, element, gauge) {\n var background = axis.background;\n this.setRangeColor(axis);\n if (background !== null) {\n appendPath(new PathOption(gauge.element.id + '_AxisOuterLine_' + index, background, 0, 'transparent', null, '0', getPathArc(gauge.midPoint, 0, 360, (Math.min(axis.rect.width, axis.rect.height) / 2)), '', 'pointer-events:none;'), element, gauge);\n }\n };\n /**\n * Method to render the axis line of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisLine = function (axis, index, element, gauge) {\n var startAngle = axis.startAngle;\n var endAngle = axis.endAngle;\n if (axis.lineStyle.width > 0) {\n startAngle = !isCompleteAngle(startAngle, endAngle) ? startAngle : [0, endAngle = 360][0];\n appendPath(new PathOption(gauge.element.id + '_AxisLine_' + index, 'transparent', axis.lineStyle.width, axis.lineStyle.color, null, axis.lineStyle.dashArray, getPathArc(gauge.midPoint, startAngle - 90, endAngle - 90, axis.currentRadius), '', 'pointer-events:none;'), element, gauge);\n }\n };\n /**\n * Method to render the axis labels of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisLabels = function (axis, index, element, gauge) {\n var labelElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Labels_' + index\n });\n var min = axis.visibleRange.min;\n var max = axis.visibleRange.max;\n var labelCollection = axis.visibleLabels;\n var location;\n var style = axis.labelStyle;\n var anchor;\n var angle;\n var label;\n var radius = axis.currentRadius;\n var labelPadding = 10;\n if (style.position === 'Outside') {\n radius += (axis.nearSize - (axis.maxLabelSize.height + axis.lineStyle.width / 2)) +\n (labelPadding / 2);\n }\n else {\n radius -= (axis.farSize - (axis.maxLabelSize.height + axis.lineStyle.width / 2) +\n (style.autoAngle ? labelPadding : 0));\n }\n for (var i = 0, length_1 = labelCollection.length; i < length_1; i++) {\n if ((i === 0 && style.hiddenLabel === 'First') ||\n (i === (length_1 - 1) && style.hiddenLabel === 'Last')) {\n continue;\n }\n label = labelCollection[i];\n angle = Math.round(getAngleFromValue(label.value, max, min, axis.startAngle, axis.endAngle, axis.direction === 'ClockWise'));\n location = getLocationFromAngle(angle, radius, gauge.midPoint);\n anchor = this.findAnchor(location, style, angle, label);\n textElement(new TextOption(gauge.element.id + '_Axis_' + index + '_Label_' + i, location.x, location.y, anchor, label.text, style.autoAngle ? 'rotate(' + (angle + 90) + ',' + (location.x) + ',' + location.y + ')' : '', 'auto'), style.font, style.useRangeColor ? getRangeColor(label.value, axis.ranges, style.font.color) : style.font.color, labelElement, 'pointer-events:none;');\n }\n element.appendChild(labelElement);\n };\n /**\n * Method to find the anchor of the axis label.\n * @private\n */\n AxisRenderer.prototype.findAnchor = function (location, style, angle, label) {\n if (style.autoAngle) {\n return 'middle';\n }\n var anchor = style.position === 'Inside' ?\n ((angle > 120 && angle < 240) ? 'start' : ((300 < angle || angle < 60) ? 'end' : 'middle')) :\n ((angle > 120 && angle < 240) ? 'end' : ((300 < angle || angle < 60) ? 'start' : 'middle'));\n location.y += style.position === 'Inside' ?\n ((angle >= 240 && angle <= 300) ? (label.size.height / 2) :\n (angle >= 60 && angle <= 120) ? 0 : label.size.height / 4) :\n ((angle >= 240 && angle <= 300) ? 0 :\n (angle >= 60 && angle <= 120) ? label.size.height / 2 : label.size.height / 4);\n return anchor;\n };\n /**\n * Method to render the axis minor tick lines of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawMinorTickLines = function (axis, index, element, gauge) {\n var minorTickElements = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_MinorTickLines_' + index\n });\n var minorLineStyle = axis.minorTicks;\n var minorInterval = minorLineStyle.interval !== null ?\n minorLineStyle.interval : (axis.visibleRange.interval / 2);\n var isRangeColor = minorLineStyle.useRangeColor;\n if (minorLineStyle.width && minorLineStyle.height && minorInterval) {\n for (var i = axis.visibleRange.min, max = axis.visibleRange.max; i <= max; i += minorInterval) {\n if (this.majorValues.indexOf(+i.toFixed(3)) < 0) {\n appendPath(new PathOption(gauge.element.id + '_Axis_Minor_TickLine_' + index + '_' + i, 'transparent', minorLineStyle.width, isRangeColor ? getRangeColor(i, axis.ranges, minorLineStyle.color) : minorLineStyle.color, null, '0', this.calculateTicks(i, minorLineStyle, axis), '', 'pointer-events:none;'), minorTickElements, gauge);\n }\n }\n element.appendChild(minorTickElements);\n }\n };\n /**\n * Method to render the axis major tick lines of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawMajorTickLines = function (axis, index, element, gauge) {\n var majorTickElements = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_MajorTickLines_' + index\n });\n var majorLineStyle = axis.majorTicks;\n var isRangeColor = majorLineStyle.useRangeColor;\n this.majorValues = [];\n if (majorLineStyle.width && majorLineStyle.height && axis.visibleRange.interval) {\n for (var i = axis.visibleRange.min, max = axis.visibleRange.max, interval = axis.visibleRange.interval; i <= max; i += interval) {\n this.majorValues.push(+i.toFixed(3));\n appendPath(new PathOption(gauge.element.id + '_Axis_Major_TickLine_' + index + '_' + i, 'transparent', majorLineStyle.width, isRangeColor ? getRangeColor(i, axis.ranges, majorLineStyle.color) : majorLineStyle.color, null, '0', this.calculateTicks(i, majorLineStyle, axis), '', 'pointer-events:none;'), majorTickElements, gauge);\n }\n element.appendChild(majorTickElements);\n }\n };\n /**\n * Method to calcualte the tick elements for the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.calculateTicks = function (value, options, axis) {\n var axisLineWidth = (axis.lineStyle.width / 2) + options.offset;\n var isOutside = options.position === 'Outside';\n var angle = getAngleFromValue(value, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, axis.direction === 'ClockWise');\n var start = getLocationFromAngle(angle, axis.currentRadius +\n (isOutside ? axisLineWidth : -axisLineWidth), this.gauge.midPoint);\n var end = getLocationFromAngle(angle, axis.currentRadius +\n (isOutside ? axisLineWidth : -axisLineWidth) +\n (isOutside ? options.height : -options.height), this.gauge.midPoint);\n return 'M ' + start.x + ' ' + start.y + ' L ' + end.x + ' ' + end.y + ' ';\n };\n /**\n * Method to render the axis range of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.drawAxisRange = function (axis, index, element, gauge) {\n var _this = this;\n var rangeElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Ranges_' + index\n });\n var startAngle;\n var endAngle;\n var isClockWise = axis.direction === 'ClockWise';\n var startValue;\n var endValue;\n var min = axis.visibleRange.min;\n var max = axis.visibleRange.max;\n var startWidth;\n var endWidth;\n axis.ranges.map(function (range, rangeIndex) {\n _this.calculateRangeRadius(axis, range);\n startValue = Math.min(Math.max(range.start, min), range.end);\n endValue = Math.min(Math.max(range.start, range.end), max);\n if (startValue !== endValue) {\n startAngle = getAngleFromValue(startValue, max, min, axis.startAngle, axis.endAngle, isClockWise);\n endAngle = getAngleFromValue(endValue, max, min, axis.startAngle, axis.endAngle, isClockWise);\n if (range.startWidth.length > 0) {\n startWidth = toPixel(range.startWidth, range.currentRadius);\n }\n else {\n startWidth = range.startWidth;\n }\n if (range.endWidth.length > 0) {\n endWidth = toPixel(range.endWidth, range.currentRadius);\n }\n else {\n endWidth = range.endWidth;\n }\n endAngle = isClockWise ? endAngle : [startAngle, startAngle = endAngle][0];\n endWidth = isClockWise ? endWidth : [startWidth, startWidth = endWidth][0];\n appendPath(new PathOption(gauge.element.id + '_Axis_' + index + '_Range_' + rangeIndex, range.rangeColor, 0, range.rangeColor, 1, '0', getPathArc(gauge.midPoint, Math.round(startAngle), Math.round(endAngle), range.currentRadius, startWidth, endWidth), '', 'pointer-events:none;'), rangeElement, gauge);\n }\n });\n element.appendChild(rangeElement);\n };\n /**\n * Method to calculate the radius of the axis range.\n * @return {void}\n */\n AxisRenderer.prototype.calculateRangeRadius = function (axis, range) {\n var radius = range.radius !== null ? range.radius : '100%';\n range.currentRadius = stringToNumber(radius, axis.currentRadius);\n };\n /**\n * Method to get the range color of the circular gauge.\n * @return {void}\n * @private\n */\n AxisRenderer.prototype.setRangeColor = function (axis) {\n var rangeColors = getRangePalette(this.gauge.theme);\n axis.ranges.map(function (range, index) {\n range.rangeColor = range.color ? range.color : rangeColors[index % rangeColors.length];\n });\n };\n return AxisRenderer;\n}());\nexport { AxisRenderer };\n","import { stringToNumber, Size, calculateShapes, appendPath } from '../utils/helper';\nimport { getLocationFromAngle, PathOption } from '../utils/helper';\nimport { linear, getAngleFromValue, getCompleteArc } from '../utils/helper';\nimport { Animation } from '@syncfusion/ej2-base';\nimport { animationComplete } from '../model/constants';\n/**\n * Specifies the Axis rendering for circular gauge\n */\nvar PointerRenderer = /** @class */ (function () {\n /**\n * Constructor for pointer renderer.\n * @private.\n */\n function PointerRenderer(gauge) {\n this.gauge = gauge;\n }\n /**\n * Method to render the axis pointers of the circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.drawPointers = function (axis, axisIndex, element, gauge, animate) {\n var _this = this;\n if (animate === void 0) { animate = true; }\n var pointerElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Pointers_' + axisIndex\n });\n var childElement;\n var range;\n axis.pointers.map(function (pointer, pointerIndex) {\n range = axis.visibleRange;\n pointer.pathElement = [];\n _this.calculatePointerRadius(axis, pointer);\n childElement = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_' + axisIndex + '_Pointer_' + pointerIndex\n });\n _this['draw' + pointer.type + 'Pointer'](axis, axisIndex, pointerIndex, childElement, gauge);\n _this.setPointerValue(axis, pointer, pointer.currentValue);\n pointerElement.appendChild(childElement);\n if (animate) {\n _this.doPointerAnimation(pointer, axis);\n }\n });\n element.appendChild(pointerElement);\n };\n /**\n * Measure the pointer length of the circular gauge.\n * @return {void}\n */\n PointerRenderer.prototype.calculatePointerRadius = function (axis, pointer) {\n var padding = 5;\n pointer.currentRadius = pointer.radius === null ?\n (axis.currentRadius - (axis.farSize + padding)) :\n stringToNumber(pointer.radius, axis.currentRadius);\n };\n /**\n * Method to render the needle pointer of the ciruclar gauge.\n * @return {void}\n */\n PointerRenderer.prototype.drawNeedlePointer = function (axis, axisIndex, index, parentElement, gauge) {\n var pointer = axis.pointers[index];\n var pointerRadius;\n var location;\n var direction;\n var mid = gauge.midPoint;\n var width = pointer.pointerWidth / 2;\n var rectDirection;\n // To render the needle\n location = getLocationFromAngle(0, pointer.currentRadius, mid);\n direction = 'M ' + mid.x + ' ' + (mid.y - width) + ' L ' + (location.x) + ' ' + mid.y +\n ' L ' + (mid.x) + ' ' + (mid.y + width) + ' Z';\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_Needle_' + index, pointer.color, pointer.border.width, pointer.border.color, null, '0', direction), parentElement, gauge));\n pointerRadius = stringToNumber(pointer.needleTail.length, pointer.currentRadius);\n // To render the rect element for touch\n rectDirection = 'M ' + mid.x + ' ' + (mid.y - width) + ' L ' + (location.x) + ' ' + (mid.y - width) +\n ' L ' + location.x + ' ' + (mid.y + width) + ' L ' + mid.x + ' ' + (mid.y + width);\n // To render the needle tail\n if (pointerRadius) {\n location = getLocationFromAngle(180, pointerRadius, gauge.midPoint);\n direction = 'M ' + mid.x + ' ' + (mid.y - width) +\n ' L ' + (location.x) + ' ' + (mid.y - width) +\n ' L ' + (location.x) + ' ' + (mid.y + width) +\n ' L ' + (mid.x) + ' ' + (mid.y + width) + ' Z';\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_NeedleTail_' + index, pointer.needleTail.color, pointer.needleTail.border.width, pointer.needleTail.border.color, null, '0', direction), parentElement, gauge));\n rectDirection += ' L ' + location.x + ' ' + (mid.y + width) + ' L ' + location.x + ' ' + (mid.y - width);\n }\n // To render the cap\n if (pointer.cap.radius) {\n pointer.pathElement.push(appendPath(calculateShapes(mid, 'Circle', new Size(pointer.cap.radius * 2, pointer.cap.radius * 2), '', new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_NeedleCap_' + index, pointer.cap.color, pointer.cap.border.width, pointer.cap.border.color, null, '0', '', '')), parentElement, gauge, 'Ellipse'));\n }\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_NeedleRect_' + index, 'transparent', 0, 'transpanret', null, '0', rectDirection + ' Z'), parentElement, gauge));\n };\n /**\n * Method to set the pointer value of the circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.setPointerValue = function (axis, pointer, value) {\n var location = this.gauge.midPoint;\n var isClockWise = axis.direction === 'ClockWise';\n var startAngle = getAngleFromValue(axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var endAngle = getAngleFromValue(value, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n endAngle = isClockWise ? endAngle : [startAngle, startAngle = endAngle][0];\n pointer.pathElement.map(function (element) {\n if (pointer.type === 'RangeBar') {\n element.setAttribute('d', getCompleteArc(location, startAngle, endAngle, pointer.currentRadius, (pointer.currentRadius - pointer.pointerWidth)));\n }\n else {\n element.setAttribute('transform', 'rotate(' + getAngleFromValue(value, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise) + ',' + location.x + ',' + location.y + ')');\n }\n element.setAttribute('aria-label', pointer.description || 'Pointer:' + value.toString());\n });\n };\n /**\n * Method to render the marker pointer of the ciruclar gauge.\n * @return {void}\n */\n PointerRenderer.prototype.drawMarkerPointer = function (axis, axisIndex, index, parentElement, gauge) {\n var pointer = axis.pointers[index];\n var location = getLocationFromAngle(0, pointer.currentRadius, gauge.midPoint);\n pointer.pathElement.push(appendPath(calculateShapes(location, pointer.markerShape, new Size(pointer.markerWidth, pointer.markerHeight), pointer.imageUrl, new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_Marker_' + index, pointer.color, pointer.border.width, pointer.border.color, null, '0', '', '')), parentElement, gauge, pointer.markerShape === 'Circle' ? 'Ellipse' : (pointer.markerShape === 'Image' ? 'Image' : 'Path')));\n };\n /**\n * Method to render the range bar pointer of the ciruclar gauge.\n * @return {void}\n */\n PointerRenderer.prototype.drawRangeBarPointer = function (axis, axisIndex, index, parentElement, gauge) {\n var pointer = axis.pointers[index];\n pointer.pathElement.push(appendPath(new PathOption(gauge.element.id + '_Axis_' + axisIndex + '_Pointer_RangeBar_' + index, pointer.color, pointer.border.width, pointer.border.color, 1, '0', ''), parentElement, gauge));\n };\n /**\n * Method to perform the animation of the pointer in circular gauge.\n * @return {void}\n */\n PointerRenderer.prototype.doPointerAnimation = function (pointer, axis) {\n var _this = this;\n var startValue = axis.visibleRange.min;\n var endValue = pointer.currentValue;\n if (pointer.animation.enable && startValue !== endValue && this.gauge.animatePointer) {\n pointer.pathElement.map(function (element) {\n if (pointer.type === 'RangeBar') {\n _this.performRangeBarAnimation(element, startValue, endValue, axis, pointer, pointer.currentRadius, (pointer.currentRadius - pointer.pointerWidth));\n }\n else {\n _this.performNeedleAnimation(element, startValue, endValue, axis, pointer, pointer.currentRadius, (pointer.currentRadius - pointer.pointerWidth));\n }\n });\n }\n };\n /**\n * Perform the needle and marker pointer animation for circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.performNeedleAnimation = function (element, start, end, axis, pointer, radius, innerRadius) {\n var _this = this;\n var isClockWise = axis.direction === 'ClockWise';\n var startAngle = getAngleFromValue(start, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var pointAngle = getAngleFromValue(end, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var endAngle = startAngle > pointAngle ? (pointAngle + 360) : pointAngle;\n var sweepAngle;\n new Animation({}).animate(element, {\n duration: pointer.animation.duration,\n progress: function (args) {\n sweepAngle = (start < end || Math.round(startAngle) === Math.round(endAngle)) ?\n isClockWise ? (endAngle - startAngle) : (endAngle - startAngle - 360) :\n isClockWise ? (endAngle - startAngle - 360) : (endAngle - startAngle);\n element.style.animation = 'None';\n element.setAttribute('transform', 'rotate(' + linear(args.timeStamp, startAngle, sweepAngle, args.duration) + ',' +\n _this.gauge.midPoint.x.toString() + ',' + _this.gauge.midPoint.y.toString() + ')');\n },\n end: function (model) {\n _this.setPointerValue(axis, pointer, end);\n if (pointer.type === 'Marker' || (element.id.indexOf('_Pointer_NeedleCap') >= 0)) {\n _this.gauge.trigger(animationComplete, { axis: axis, pointer: pointer });\n }\n }\n });\n };\n /**\n * Perform the range bar pointer animation for circular gauge.\n * @return {void}\n * @private\n */\n PointerRenderer.prototype.performRangeBarAnimation = function (element, start, end, axis, pointer, radius, innerRadius) {\n var _this = this;\n var isClockWise = axis.direction === 'ClockWise';\n var startAngle = getAngleFromValue(start, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var minAngle = getAngleFromValue(axis.visibleRange.min, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var pointAngle = getAngleFromValue(end, axis.visibleRange.max, axis.visibleRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var sweepAngle;\n var endAngle = startAngle > pointAngle ? (pointAngle + 360) : pointAngle;\n new Animation({}).animate(element, {\n duration: pointer.animation.duration,\n progress: function (arg) {\n element.style.animation = 'None';\n sweepAngle = (start < end || Math.round(startAngle) === Math.round(endAngle)) ?\n isClockWise ? (endAngle - startAngle) : (endAngle - startAngle - 360) :\n isClockWise ? (endAngle - startAngle - 360) : (endAngle - startAngle);\n if (isClockWise) {\n element.setAttribute('d', getCompleteArc(_this.gauge.midPoint, minAngle, linear(arg.timeStamp, startAngle, sweepAngle, arg.duration) + 0.0001, radius, innerRadius));\n }\n else {\n element.setAttribute('d', getCompleteArc(_this.gauge.midPoint, linear(arg.timeStamp, startAngle, sweepAngle, arg.duration), minAngle + 0.0001, radius, innerRadius));\n }\n },\n end: function (model) {\n _this.setPointerValue(axis, pointer, end);\n _this.gauge.trigger(animationComplete, { axis: axis, pointer: pointer });\n }\n });\n };\n return PointerRenderer;\n}());\nexport { PointerRenderer };\n","import { createElement } from '@syncfusion/ej2-base';\nimport { calculateSum, VisibleLabels, measureText } from '../utils/helper';\nimport { Size, Rect, stringToNumber, getLabelFormat } from '../utils/helper';\nimport { axisLabelRender } from '../model/constants';\nimport { AxisRenderer } from './axis-renderer';\nimport { PointerRenderer } from './pointer-renderer';\n/**\n * Specifies the CircularGauge Axis Layout\n */\nvar labelPadding = 10;\nvar AxisLayoutPanel = /** @class */ (function () {\n function AxisLayoutPanel(gauge) {\n this.gauge = gauge;\n this.axisRenderer = new AxisRenderer(gauge);\n this.pointerRenderer = new PointerRenderer(gauge);\n }\n /**\n * Measure the calculate the axis size and radius.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.measureAxis = function (rect) {\n this.measureAxisSize(this.gauge, rect);\n this.calculateAxesRadius();\n };\n /**\n * Measure to calculate the axis radius of the circular gauge.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateAxesRadius = function () {\n var totalRadius;\n var currentRadius;\n var rangeMaximumRadius = 0;\n for (var _i = 0, _a = this.gauge.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n totalRadius = (Math.min(axis.rect.width, axis.rect.height) / 2);\n currentRadius = axis.radius != null ? stringToNumber(axis.radius, totalRadius) : totalRadius;\n rangeMaximumRadius = Math.max.apply(Math, axis.ranges.map(function (value) {\n return value.radius ?\n (value.radius.indexOf('%') < 0 ? 100 : parseInt(value.radius, 10)) : 0;\n }));\n currentRadius = (rangeMaximumRadius > 100 && axis.radius == null) ?\n (currentRadius * 100) / rangeMaximumRadius : currentRadius;\n axis.currentRadius = currentRadius - axis.nearSize;\n axis.visibleRange.interval = this.calculateNumericInterval(axis, axis.rect);\n this.calculateVisibleLabels(axis);\n }\n };\n /**\n * Measure to calculate the axis size.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.measureAxisSize = function (gauge, rect) {\n var _this = this;\n var sum;\n this.computeSize(gauge.axes, rect);\n gauge.axes.map(function (axis, index) {\n sum = calculateSum(index, _this.farSizes.length - 1, _this.farSizes);\n axis.rect = new Rect(rect.x + sum, rect.y + sum, rect.width - (sum * 2), rect.height - (sum * 2));\n });\n };\n /**\n * Calculate the axis values of the circular gauge.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateAxisValues = function (rect) {\n for (var _i = 0, _a = this.gauge.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n this.calculateVisibleRange(axis, rect);\n this.calculateVisibleLabels(axis);\n }\n };\n /**\n * Calculate the visible range of an axis.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateVisibleRange = function (axis, rect) {\n var interval = axis.majorTicks.interval;\n var minimumValue = Math.min(axis.minimum === null ? 0 : axis.minimum, axis.maximum);\n var maximumValue = Math.max(axis.minimum, axis.maximum === null ? 100 : axis.maximum);\n axis.pointers.map(function (pointer) {\n pointer.currentValue = pointer.value !== null ?\n pointer.value < minimumValue ? minimumValue : pointer.value > maximumValue ? maximumValue : pointer.value\n : minimumValue;\n minimumValue = axis.minimum === null ? Math.min(pointer.currentValue, minimumValue) : minimumValue;\n maximumValue = axis.maximum === null ? Math.max(pointer.currentValue, maximumValue) : maximumValue;\n });\n minimumValue = (minimumValue === maximumValue) ?\n (interval !== null ? minimumValue - interval : minimumValue - 1) : minimumValue;\n axis.visibleRange = { min: minimumValue, max: maximumValue, interval: interval };\n axis.visibleRange.interval = this.calculateNumericInterval(axis, rect);\n };\n /**\n * Calculate the numeric intervals of an axis range.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateNumericInterval = function (axis, rect) {\n if (axis.majorTicks.interval !== null) {\n return axis.majorTicks.interval;\n }\n var totalAngle = axis.endAngle - axis.startAngle;\n totalAngle = totalAngle <= 0 ? (totalAngle + 360) : totalAngle;\n return this.calculateNiceInterval(axis.visibleRange.max, axis.visibleRange.min, axis.currentRadius ? axis.currentRadius : (rect.width / 2), totalAngle);\n };\n /**\n * Calculate the nice interval of an axis range.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateNiceInterval = function (maxValue, minValue, radius, degree) {\n var delta = maxValue - minValue;\n var circumference = 2 * Math.PI * radius * (degree / 360);\n var desiredIntervalsCount = Math.max((circumference * ((0.533 * 3) / 100)), 1);\n var niceInterval = delta / desiredIntervalsCount;\n var minInterval = Math.pow(10, Math.floor(Math.log(niceInterval) / Math.log(10)));\n for (var _i = 0, _a = [10, 5, 2, 1]; _i < _a.length; _i++) {\n var interval = _a[_i];\n var currentInterval = minInterval * interval;\n if (desiredIntervalsCount < (delta / currentInterval)) {\n break;\n }\n niceInterval = currentInterval;\n }\n return niceInterval;\n };\n /**\n * Calculate the visible labels of an axis.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.calculateVisibleLabels = function (axis) {\n var style = axis.labelStyle;\n var customLabelFormat = style.format && style.format.match('{value}') !== null;\n var format = this.gauge.intl.getNumberFormat({\n format: getLabelFormat(style.format), useGrouping: this.gauge.useGroupingSeparator\n });\n var argsData;\n axis.visibleLabels = [];\n for (var i = axis.visibleRange.min, interval = axis.visibleRange.interval, max = axis.visibleRange.max; (i <= max && interval); i += interval) {\n argsData = {\n cancel: false, name: axisLabelRender, axis: axis,\n text: customLabelFormat ? style.format.replace(new RegExp('{value}', 'g'), format(i)) :\n format(i),\n value: i\n };\n this.gauge.trigger(axisLabelRender, argsData);\n if (!argsData.cancel) {\n axis.visibleLabels.push(new VisibleLabels(argsData.text, i));\n }\n }\n this.getMaxLabelWidth(this.gauge, axis);\n };\n /**\n * Measure the axes available size.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.computeSize = function (axes, rect) {\n var lineSize;\n var outerHeight;\n var innerHeight;\n var isMajorTickOutside;\n var isMinorTickOutside;\n var isLabelOutside;\n var axisPadding = 5;\n var majorTickOffset = 0;\n var minorTickOffset = 0;\n var labelOffset = 0;\n this.farSizes = [];\n this.calculateAxisValues(rect);\n for (var _i = 0, axes_1 = axes; _i < axes_1.length; _i++) {\n var axis = axes_1[_i];\n lineSize = (axis.lineStyle.width / 2);\n outerHeight = 0;\n innerHeight = 0;\n isMajorTickOutside = axis.majorTicks.position === 'Outside';\n majorTickOffset = axis.majorTicks.offset;\n isMinorTickOutside = axis.minorTicks.position === 'Outside';\n minorTickOffset = axis.minorTicks.offset;\n isLabelOutside = axis.labelStyle.position === 'Outside';\n labelOffset = axis.labelStyle.offset;\n // Calculating the outer space of the axis\n outerHeight += !(isMajorTickOutside && isMinorTickOutside && isLabelOutside) ? axisPadding : 0;\n outerHeight += (isMajorTickOutside ? (axis.majorTicks.height + lineSize) : 0) +\n (isLabelOutside ? (axis.maxLabelSize.height + labelPadding + labelOffset) : 0) +\n ((isMinorTickOutside && !isMajorTickOutside) ? (axis.minorTicks.height + lineSize) : 0) + lineSize;\n outerHeight += (isMajorTickOutside && isMinorTickOutside) ? Math.max(majorTickOffset, minorTickOffset) :\n (isMajorTickOutside ? majorTickOffset : isMinorTickOutside ? minorTickOffset : 0);\n // Calculating the inner space of the axis\n innerHeight += (!isMajorTickOutside ? (axis.majorTicks.height + lineSize) : 0) +\n (!isLabelOutside ? (axis.maxLabelSize.height + labelPadding + labelOffset) : 0) +\n ((!isMinorTickOutside && isMajorTickOutside) ? (axis.minorTicks.height + lineSize) : 0) + lineSize;\n innerHeight += (!isMajorTickOutside && !isMinorTickOutside) ? Math.max(majorTickOffset, minorTickOffset) :\n (!isMajorTickOutside ? majorTickOffset : !isMinorTickOutside ? minorTickOffset : 0);\n if (this.farSizes[this.farSizes.length - 1]) {\n this.farSizes[this.farSizes.length - 1] += (innerHeight + outerHeight);\n }\n axis.nearSize = outerHeight - axisPadding;\n axis.farSize = innerHeight;\n outerHeight = (this.gauge.axes.length === (this.farSizes.length + 1)) ? 0 : outerHeight;\n this.farSizes.push(outerHeight);\n }\n };\n /**\n * To render the axis element of the circular gauge.\n * @return {void}\n * @private\n */\n AxisLayoutPanel.prototype.renderAxes = function (animate) {\n var _this = this;\n if (animate === void 0) { animate = true; }\n var gauge = this.gauge;\n var renderer = this.axisRenderer;\n var element;\n var axesElements = gauge.renderer.createGroup({\n 'id': gauge.element.id + '_AxesCollection',\n 'clip-path': 'url(#' + gauge.element.id + '_GaugeAreaClipRect_' + ')'\n });\n // To append the secondary element for annotation and tooltip\n gauge.element.appendChild(createElement('div', {\n id: gauge.element.id + '_Secondary_Element',\n styles: 'position: relative'\n }));\n gauge.axes.map(function (axis, index) {\n element = gauge.renderer.createGroup({\n id: gauge.element.id + '_Axis_Group_' + index\n });\n renderer.drawAxisOuterLine(axis, index, element, gauge);\n renderer.drawAxisRange(axis, index, element, gauge);\n renderer.drawAxisLine(axis, index, element, gauge);\n renderer.drawMajorTickLines(axis, index, element, gauge);\n renderer.drawMinorTickLines(axis, index, element, gauge);\n renderer.drawAxisLabels(axis, index, element, gauge);\n _this.pointerRenderer.drawPointers(axis, index, element, gauge, animate);\n if (gauge.annotationsModule) {\n gauge.annotationsModule.renderAnnotation(axis, index);\n }\n axesElements.appendChild(element);\n });\n // For append clip rect for axes\n gauge.svgObject.appendChild(gauge.renderer.drawClipPath({\n 'id': gauge.element.id + '_GaugeAreaClipRect_',\n 'x': 0, 'y': 0,\n 'width': gauge.availableSize.width,\n 'height': gauge.availableSize.height,\n 'fill': 'transparent', 'stroke': 'transparent'\n }));\n gauge.svgObject.appendChild(axesElements);\n };\n /**\n * Calculate maximum label width for the axis.\n * @return {void}\n */\n AxisLayoutPanel.prototype.getMaxLabelWidth = function (gauge, axis) {\n axis.maxLabelSize = new Size(0, 0);\n for (var _i = 0, _a = axis.visibleLabels; _i < _a.length; _i++) {\n var label = _a[_i];\n label.size = measureText(label.text, axis.labelStyle.font);\n axis.maxLabelSize.width = label.size.width > axis.maxLabelSize.width ?\n label.size.width : axis.maxLabelSize.width;\n axis.maxLabelSize.height = label.size.height > axis.maxLabelSize.height ?\n label.size.height : axis.maxLabelSize.height;\n }\n };\n return AxisLayoutPanel;\n}());\nexport { AxisLayoutPanel };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/**\n * Circular Gauge\n */\nimport { Property, NotifyPropertyChanges, Component, Complex, Browser } from '@syncfusion/ej2-base';\nimport { Event, SvgRenderer, EventHandler, Collection, Internationalization } from '@syncfusion/ej2-base';\nimport { remove, createElement } from '@syncfusion/ej2-base';\nimport { TextOption, textElement, RectOption, getAngleFromLocation, getValueFromAngle, removeElement } from './utils/helper';\nimport { Size, stringToNumber, measureText, Rect, GaugeLocation, getElement, getPointer, setStyles, toPixel } from './utils/helper';\nimport { getAngleFromValue, getPathArc } from './utils/helper';\nimport { Border, Margin, Font, TooltipSettings } from './model/base';\nimport { Axis } from './axes/axis';\nimport { Annotations } from './annotations/annotations';\nimport { GaugeTooltip } from './user-interaction/tooltip';\nimport { load, loaded, gaugeMouseMove, gaugeMouseLeave, gaugeMouseDown } from './model/constants';\nimport { gaugeMouseUp, dragEnd, dragMove, dragStart, resized } from './model/constants';\nimport { AxisLayoutPanel } from './axes/axis-panel';\n/**\n * Represents the Circular gauge control.\n * ```html\n * \n * \n * ```\n */\nvar CircularGauge = /** @class */ (function (_super) {\n __extends(CircularGauge, _super);\n /**\n * Constructor for creating the widget\n * @hidden\n */\n function CircularGauge(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.pointerneedRefresh = true;\n return _this;\n }\n /**\n * To create svg object, renderer and binding events for the container.\n */\n CircularGauge.prototype.preRender = function () {\n this.unWireEvents();\n this.trigger(load, { gauge: this });\n this.themeEffect();\n this.initPrivateVariable();\n this.setCulture();\n this.createSvg();\n this.wireEvents();\n };\n CircularGauge.prototype.themeEffect = function () {\n if (this.theme === 'Highcontrast') {\n this.titleStyle.color = this.titleStyle.color || '#FFFFFF';\n this.setThemeColors('#FFFFFF', '#FFFFFF');\n }\n else {\n this.titleStyle.color = this.titleStyle.color || '#424242';\n this.setThemeColors('#212121', '#757575');\n }\n };\n CircularGauge.prototype.setThemeColors = function (labelcolor, others) {\n for (var _i = 0, _a = this.axes; _i < _a.length; _i++) {\n var axis = _a[_i];\n axis.lineStyle.color = axis.lineStyle.color || others;\n axis.labelStyle.font.color = axis.labelStyle.font.color || labelcolor;\n axis.majorTicks.color = axis.majorTicks.color || others;\n axis.minorTicks.color = axis.minorTicks.color || others;\n for (var _b = 0, _c = axis.pointers; _b < _c.length; _b++) {\n var pointer = _c[_b];\n pointer.color = pointer.color || others;\n pointer.needleTail.color = pointer.needleTail.color || others;\n pointer.needleTail.border.color = pointer.needleTail.border.color || others;\n pointer.cap.color = pointer.cap.color || others;\n pointer.cap.border.color = pointer.cap.border.color || others;\n }\n }\n };\n /**\n * To render the circular gauge elements\n */\n CircularGauge.prototype.render = function () {\n this.calculateBounds();\n this.renderElements();\n };\n /**\n * Method to unbind events for circular gauge\n */\n CircularGauge.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.gaugeOnMouseDown);\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMove);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEnd);\n EventHandler.remove(this.element, 'contextmenu', this.gaugeRightClick);\n EventHandler.remove(this.element, (Browser.isPointer ? 'pointerleave' : 'mouseleave'), this.mouseLeave);\n window.removeEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.gaugeResize);\n };\n /**\n * Method to bind events for circular gauge\n */\n CircularGauge.prototype.wireEvents = function () {\n /*! Bind the Event handler */\n EventHandler.add(this.element, Browser.touchStartEvent, this.gaugeOnMouseDown, this);\n EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMove, this);\n EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEnd, this);\n EventHandler.add(this.element, 'contextmenu', this.gaugeRightClick, this);\n EventHandler.add(this.element, (Browser.isPointer ? 'pointerleave' : 'mouseleave'), this.mouseLeave, this);\n window.addEventListener((Browser.isTouch && ('orientation' in window && 'onorientationchange' in window)) ? 'orientationchange' : 'resize', this.gaugeResize.bind(this));\n /*! Apply the style for circular gauge */\n this.setGaugeStyle(this.element);\n };\n /**\n * Handles the mouse move.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.mouseMove = function (e) {\n var args = this.getMouseArgs(e, 'touchmove', gaugeMouseMove);\n this.trigger(gaugeMouseMove, args);\n var dragArgs;\n var tooltip = this.tooltipModule;\n if (!args.cancel) {\n if (this.tooltip.enable && tooltip) {\n if (args.target.id.indexOf('_Pointer_') >= 0 && !this.activePointer) {\n tooltip.renderTooltip(args.target);\n }\n else {\n tooltip.ejTooltip.close();\n }\n }\n if (this.enablePointerDrag && this.activePointer) {\n dragArgs = {\n axis: this.activeAxis,\n pointer: this.activePointer,\n previousValue: this.activePointer.currentValue,\n name: dragMove,\n currentValue: null\n };\n this.pointerDrag(new GaugeLocation(args.x, args.y));\n dragArgs.currentValue = this.activePointer.currentValue;\n this.trigger(dragMove, dragArgs);\n }\n }\n return false;\n };\n /**\n * Handles the mouse leave.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.mouseLeave = function (e) {\n this.activeAxis = null;\n this.activePointer = null;\n this.svgObject.setAttribute('cursor', 'auto');\n var args = this.getMouseArgs(e, 'touchmove', gaugeMouseLeave);\n this.trigger(gaugeMouseLeave, args);\n if (this.tooltip.enable && this.tooltipModule) {\n this.tooltipModule.ejTooltip.close();\n }\n return false;\n };\n /**\n * Handles the mouse right click.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.gaugeRightClick = function (event) {\n if (event.buttons === 2 || event.pointerType === 'touch') {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n return true;\n };\n /**\n * Handles the pointer draf while mouse move on gauge.\n * @private\n */\n CircularGauge.prototype.pointerDrag = function (location) {\n var axis = this.activeAxis;\n var range = axis.visibleRange;\n var value = getValueFromAngle(getAngleFromLocation(this.midPoint, location), range.max, range.min, axis.startAngle, axis.endAngle, axis.direction === 'ClockWise');\n if (value >= range.min && value <= range.max) {\n this.activePointer.currentValue = value;\n this.activePointer.value = value;\n this.gaugeAxisLayoutPanel.pointerRenderer.setPointerValue(axis, this.activePointer, value);\n }\n };\n /**\n * Handles the mouse down on gauge.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.gaugeOnMouseDown = function (e) {\n var currentPointer;\n var args = this.getMouseArgs(e, 'touchstart', gaugeMouseDown);\n this.trigger(gaugeMouseDown, args);\n if (!args.cancel && args.target.id.indexOf('_Pointer_') >= 0 &&\n args.target.id.indexOf(this.element.id + '_Axis_') >= 0) {\n currentPointer = getPointer(args.target.id, this);\n this.activeAxis = this.axes[currentPointer.axisIndex];\n this.activePointer = this.activeAxis.pointers[currentPointer.pointerIndex];\n this.trigger(dragStart, {\n axis: this.activeAxis,\n name: dragStart,\n pointer: this.activePointer,\n currentValue: this.activePointer.currentValue\n });\n this.svgObject.setAttribute('cursor', 'pointer');\n }\n return false;\n };\n /**\n * Handles the mouse end.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.mouseEnd = function (e) {\n var args = this.getMouseArgs(e, 'touchend', gaugeMouseUp);\n var isTouch = e.pointerType === 'touch' || e.pointerType === '2' || e.type === 'touchend';\n var tooltipInterval;\n var tooltip = this.tooltipModule;\n this.trigger(gaugeMouseUp, args);\n if (this.activeAxis && this.activePointer) {\n this.trigger(dragEnd, {\n name: dragEnd,\n axis: this.activeAxis,\n pointer: this.activePointer,\n currentValue: this.activePointer.currentValue\n });\n if (!args.cancel && isTouch && this.tooltip.enable && tooltip) {\n if (args.target.id.indexOf('_Pointer_') >= 0) {\n tooltip.renderTooltip(args.target);\n tooltipInterval = window.setTimeout(function () {\n tooltip.ejTooltip.close();\n }, 2000);\n }\n }\n this.activeAxis = null;\n this.activePointer = null;\n }\n this.svgObject.setAttribute('cursor', 'auto');\n return false;\n };\n /**\n * Handles the mouse event arguments.\n * @return {IMouseEventArgs}\n * @private\n */\n CircularGauge.prototype.getMouseArgs = function (e, type, name) {\n var rect = this.element.getBoundingClientRect();\n var location = new GaugeLocation(-rect.left, -rect.top);\n var isTouch = (e.type === type);\n location.x += isTouch ? e.changedTouches[0].clientX : e.clientX;\n location.y += isTouch ? e.changedTouches[0].clientY : e.clientY;\n return {\n cancel: false, name: name,\n x: location.x, y: location.y,\n target: isTouch ? e.target : e.target\n };\n };\n /**\n * Handles the gauge resize.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.gaugeResize = function (e) {\n var _this = this;\n var args = {\n gauge: this,\n previousSize: new Size(this.availableSize.width, this.availableSize.height),\n name: resized,\n currentSize: new Size(0, 0)\n };\n this.animatePointer = false;\n if (this.resizeTo) {\n clearTimeout(this.resizeTo);\n }\n if (this.element.classList.contains('e-circulargauge')) {\n this.resizeTo = window.setTimeout(function () {\n _this.createSvg();\n _this.calculateBounds();\n _this.renderElements();\n args.currentSize = _this.availableSize;\n _this.trigger(resized, args);\n }, 500);\n }\n return false;\n };\n /**\n * Applying styles for circular gauge elements\n */\n CircularGauge.prototype.setGaugeStyle = function (element) {\n element.style.touchAction = this.enablePointerDrag ? 'none' : 'element';\n element.style.msTouchAction = this.enablePointerDrag ? 'none' : 'element';\n element.style.msContentZooming = 'none';\n element.style.msUserSelect = 'none';\n element.style.webkitUserSelect = 'none';\n element.style.position = 'relative';\n };\n /**\n * Method to set culture for gauge\n */\n CircularGauge.prototype.setCulture = function () {\n this.intl = new Internationalization();\n };\n /**\n * Methods to create svg element for circular gauge.\n */\n CircularGauge.prototype.createSvg = function () {\n this.removeSvg();\n this.calculateSvgSize();\n this.svgObject = this.renderer.createSvg({\n id: this.element.id + '_svg',\n width: this.availableSize.width,\n height: this.availableSize.height\n });\n };\n /**\n * To Remove the SVG from circular gauge.\n * @return {boolean}\n * @private\n */\n CircularGauge.prototype.removeSvg = function () {\n removeElement(this.element.id + '_Secondary_Element');\n if (this.svgObject) {\n while (this.svgObject.childNodes.length > 0) {\n this.svgObject.removeChild(this.svgObject.firstChild);\n }\n if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {\n remove(this.svgObject);\n }\n }\n };\n /**\n * To initialize the circular gauge private variable.\n * @private\n */\n CircularGauge.prototype.initPrivateVariable = function () {\n this.renderer = new SvgRenderer(this.element.id);\n this.gaugeAxisLayoutPanel = new AxisLayoutPanel(this);\n this.animatePointer = true;\n };\n /**\n * To calculate the size of the circular gauge element.\n */\n CircularGauge.prototype.calculateSvgSize = function () {\n var containerWidth = this.element.offsetWidth;\n var containerHeight = this.element.offsetHeight;\n var width = stringToNumber(this.width, containerWidth) || containerWidth || 600;\n var height = stringToNumber(this.height, containerHeight) || containerHeight || 450;\n this.availableSize = new Size(width, height);\n };\n /**\n * Method to calculate the availble size for circular gauge.\n */\n CircularGauge.prototype.calculateBounds = function () {\n var padding = 5;\n var margin = this.margin;\n // Title Height;\n var titleHeight = 0;\n if (this.title) {\n titleHeight = measureText(this.title, this.titleStyle).height + padding;\n }\n var top = margin.top + titleHeight + this.border.width;\n var left = margin.left + this.border.width;\n var width = this.availableSize.width - left - margin.right - this.border.width;\n var height = this.availableSize.height - top - this.border.width - margin.bottom;\n var radius = Math.min(width, height) / 2;\n var rect = new Rect((left + (width / 2) - radius), (top + (height / 2) - radius), radius * 2, radius * 2);\n var centerX = this.centerX !== null ?\n stringToNumber(this.centerX, this.availableSize.width) : rect.x + (rect.width / 2);\n var centerY = this.centerY !== null ?\n stringToNumber(this.centerY, this.availableSize.height) : rect.y + (rect.height / 2);\n this.midPoint = new GaugeLocation(centerX, centerY);\n this.gaugeAxisLayoutPanel.measureAxis(rect);\n };\n /**\n * To render elements for circular gauge\n */\n CircularGauge.prototype.renderElements = function (animate) {\n if (animate === void 0) { animate = true; }\n this.renderBorder();\n this.renderTitle();\n this.gaugeAxisLayoutPanel.renderAxes(animate);\n this.element.appendChild(this.svgObject);\n this.trigger(loaded, { gauge: this });\n };\n /**\n * Method to render the title for circular gauge.\n */\n CircularGauge.prototype.renderTitle = function () {\n if (this.title) {\n var size = measureText(this.title, this.titleStyle);\n var options = new TextOption(this.element.id + '_CircularGaugeTitle', this.availableSize.width / 2, this.margin.top + 3 * (size.height / 4), 'middle', this.title);\n var element = textElement(options, this.titleStyle, this.titleStyle.color, this.svgObject, '');\n element.setAttribute('aria-label', this.description || this.title);\n element.setAttribute('tabindex', this.tabIndex.toString());\n }\n };\n /**\n * Method to render the border for circular gauge.\n */\n CircularGauge.prototype.renderBorder = function () {\n var borderWidth = this.border.width;\n if (borderWidth > 0 || (this.background !== null && this.background !== 'transparent')) {\n this.svgObject.appendChild(this.renderer.drawRectangle(new RectOption(this.element.id + '_CircularGaugeBorder', this.background, this.border, null, new Rect(borderWidth / 2, borderWidth / 2, this.availableSize.width - borderWidth, this.availableSize.height - borderWidth))));\n }\n };\n /**\n * Method to set the pointer value dynamically for circulargauge.\n */\n CircularGauge.prototype.setPointerValue = function (axisIndex, pointerIndex, value) {\n var _this = this;\n var axis = this.axes[axisIndex];\n var pointer = axis.pointers[pointerIndex];\n var pointerRadius = pointer.currentRadius;\n var enableAnimation = pointer.animation.enable;\n this.pointerneedRefresh = false;\n value = value < axis.visibleRange.min ? axis.visibleRange.min : value;\n value = value > axis.visibleRange.max ? axis.visibleRange.max : value;\n pointer.pathElement.map(function (element) {\n if (pointer.type === 'RangeBar') {\n setStyles(element, pointer.color, pointer.border);\n if (enableAnimation) {\n _this.gaugeAxisLayoutPanel.pointerRenderer.performRangeBarAnimation(element, pointer.currentValue, value, axis, pointer, pointerRadius, (pointerRadius - pointer.pointerWidth));\n }\n else {\n _this.gaugeAxisLayoutPanel.pointerRenderer.setPointerValue(axis, pointer, value);\n }\n }\n else {\n if (element.id.indexOf('_Pointer_NeedleCap_') >= 0) {\n setStyles(element, pointer.cap.color, pointer.cap.border);\n }\n else if (element.id.indexOf('_Pointer_NeedleTail_') >= 0) {\n setStyles(element, pointer.needleTail.color, pointer.needleTail.border);\n }\n else if (element.id.indexOf('_Pointer_NeedleRect_') >= 0) {\n setStyles(element, 'transparent', { color: 'transparent', width: 0 });\n }\n else {\n setStyles(element, pointer.color, pointer.border);\n }\n if (enableAnimation) {\n _this.gaugeAxisLayoutPanel.pointerRenderer.performNeedleAnimation(element, pointer.currentValue, value, axis, pointer, pointerRadius, (pointerRadius - pointer.pointerWidth));\n }\n else {\n _this.gaugeAxisLayoutPanel.pointerRenderer.setPointerValue(axis, pointer, value);\n }\n }\n });\n pointer.currentValue = value;\n pointer.value = value;\n };\n /**\n * Method to set the annotation content dynamically for circular gauge.\n */\n CircularGauge.prototype.setAnnotationValue = function (axisIndex, annotationIndex, content) {\n var isElementExist = getElement(this.element.id + '_Annotations_' + axisIndex) !== null;\n var element = getElement(this.element.id + '_Annotations_' + axisIndex) ||\n createElement('div', {\n id: this.element.id + '_Annotations_' + axisIndex\n });\n var annotation = this.axes[axisIndex].annotations[annotationIndex];\n if (content !== null) {\n removeElement(this.element.id + '_Axis_' + axisIndex + '_Annotation_' + annotationIndex);\n annotation.content = content;\n this.annotationsModule.createTemplate(element, annotationIndex, axisIndex);\n if (!isElementExist) {\n getElement(this.element.id + '_Secondary_Element').appendChild(element);\n }\n }\n };\n /**\n * Method to set the range values dynamically for circular gauge.\n */\n CircularGauge.prototype.setRangeValue = function (axisIndex, rangeIndex, start, end) {\n var element = getElement(this.element.id + '_Axis_' + axisIndex + '_Range_' + rangeIndex);\n var axis = this.axes[axisIndex];\n var range = axis.ranges[rangeIndex];\n var axisRange = axis.visibleRange;\n var isClockWise = axis.direction === 'ClockWise';\n var startValue = Math.min(Math.max(start, axisRange.min), end);\n var endValue = Math.min(Math.max(start, end), axisRange.max);\n var startAngle = getAngleFromValue(startValue, axisRange.max, axisRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var endAngle = getAngleFromValue(endValue, axisRange.max, axisRange.min, axis.startAngle, axis.endAngle, isClockWise);\n var startWidth;\n if (range.startWidth.length > 0) {\n startWidth = toPixel(range.startWidth, range.currentRadius);\n }\n else {\n startWidth = range.startWidth;\n }\n var endWidth;\n if (range.endWidth.length > 0) {\n endWidth = toPixel(range.endWidth, range.currentRadius);\n }\n else {\n endWidth = range.endWidth;\n }\n endAngle = isClockWise ? endAngle : [startAngle, startAngle = endAngle][0];\n endWidth = isClockWise ? endWidth : [startWidth, startWidth = endWidth][0];\n element.setAttribute('d', getPathArc(this.midPoint, Math.round(startAngle), Math.round(endAngle), range.currentRadius, startWidth, endWidth));\n setStyles(element, (range.color ? range.color : range.rangeColor), {\n color: (range.color ? range.color : range.rangeColor),\n width: 0\n });\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}\n * @member of Circular-Gauge\n */\n CircularGauge.prototype.destroy = function () {\n this.unWireEvents();\n this.removeSvg();\n _super.prototype.destroy.call(this);\n };\n /**\n * To provide the array of modules needed for control rendering\n * @return {ModuleDeclaration[]}\n * @private\n */\n CircularGauge.prototype.requiredModules = function () {\n var modules = [];\n var annotationEnable = false;\n var axes = this.axes;\n axes.map(function (axis) {\n axis.annotations.map(function (annotation) {\n annotationEnable = annotationEnable || annotation.content !== null;\n });\n });\n if (annotationEnable) {\n modules.push({\n member: 'Annotations',\n args: [this, Annotations]\n });\n }\n if (this.tooltip.enable) {\n modules.push({\n member: 'Tooltip',\n args: [this, GaugeTooltip]\n });\n }\n return modules;\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n CircularGauge.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n CircularGauge.prototype.onPropertyChanged = function (newProp, oldProp) {\n // property method calculated\n var renderer = false;\n var refreshBounds = false;\n var refreshWithoutAnimation = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'height':\n case 'width':\n case 'centerX':\n case 'centerY':\n case 'margin':\n this.createSvg();\n refreshBounds = true;\n break;\n case 'title':\n refreshBounds = (newProp.title === '' || oldProp.title === '');\n renderer = !(newProp.title === '' || oldProp.title === '');\n break;\n case 'titleStyle':\n if (newProp.titleStyle && newProp.titleStyle.size) {\n refreshBounds = true;\n }\n else {\n renderer = true;\n }\n break;\n case 'border':\n renderer = true;\n break;\n case 'background':\n renderer = true;\n break;\n case 'axes':\n refreshWithoutAnimation = true;\n break;\n }\n }\n if (!refreshBounds && renderer) {\n this.removeSvg();\n this.renderElements();\n }\n if (refreshBounds) {\n this.removeSvg();\n this.calculateBounds();\n this.renderElements();\n }\n if (refreshWithoutAnimation && !renderer && !refreshBounds && this.pointerneedRefresh) {\n this.removeSvg();\n this.calculateBounds();\n this.renderElements(false);\n }\n this.pointerneedRefresh = false;\n };\n /**\n * Get component name for circular gauge\n * @private\n */\n CircularGauge.prototype.getModuleName = function () {\n return 'circulargauge';\n };\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"height\", void 0);\n __decorate([\n Complex({ color: 'transparent', width: 0 }, Border)\n ], CircularGauge.prototype, \"border\", void 0);\n __decorate([\n Property('transparent')\n ], CircularGauge.prototype, \"background\", void 0);\n __decorate([\n Property('')\n ], CircularGauge.prototype, \"title\", void 0);\n __decorate([\n Complex({ size: '15px', color: null }, Font)\n ], CircularGauge.prototype, \"titleStyle\", void 0);\n __decorate([\n Complex({}, Margin)\n ], CircularGauge.prototype, \"margin\", void 0);\n __decorate([\n Collection([{}], Axis)\n ], CircularGauge.prototype, \"axes\", void 0);\n __decorate([\n Complex({}, TooltipSettings)\n ], CircularGauge.prototype, \"tooltip\", void 0);\n __decorate([\n Property(false)\n ], CircularGauge.prototype, \"enablePointerDrag\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"centerX\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"centerY\", void 0);\n __decorate([\n Property('Material')\n ], CircularGauge.prototype, \"theme\", void 0);\n __decorate([\n Property(false)\n ], CircularGauge.prototype, \"useGroupingSeparator\", void 0);\n __decorate([\n Property(null)\n ], CircularGauge.prototype, \"description\", void 0);\n __decorate([\n Property(1)\n ], CircularGauge.prototype, \"tabIndex\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"loaded\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"animationComplete\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"axisLabelRender\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"annotationRender\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"tooltipRender\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"dragMove\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"dragEnd\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseMove\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseLeave\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseDown\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"gaugeMouseUp\", void 0);\n __decorate([\n Event()\n ], CircularGauge.prototype, \"resized\", void 0);\n CircularGauge = __decorate([\n NotifyPropertyChanges\n ], CircularGauge);\n return CircularGauge;\n}(Component));\nexport { CircularGauge };\n","import * as index from '@syncfusion/ej2-circulargauge';\nindex.CircularGauge.Inject( index.GaugeTooltip,index.Annotations);\nexport * from '@syncfusion/ej2-circulargauge';\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend, removeClass, createElement, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\nexport var dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: ListBaseClasses.li,\n group: ListBaseClasses.group,\n disabled: ListBaseClasses.disabled,\n grouping: 'e-dd-group'\n};\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n */\n function DropDownBase(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var propName = new Function('prop', 'return prop');\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n ;\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n if (_this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.stringTrim(itemValue) === value.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n this.list.innerHTML = '';\n compiledString = compile(template);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.list.appendChild(item);\n }\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };\n this.l10n = new L10n('dropdowns', l10nLocale, this.locale);\n this.list.innerHTML = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n }\n };\n DropDownBase.prototype.getTextByValue = function (value) {\n var text;\n text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.stringTrim = function (item) {\n if (!isNullOrUndefined(item)) {\n var itemValue = item.toString();\n return itemValue.trim();\n }\n return item.toString();\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseInt(value, 10);\n }\n var val = (this.fields.value ? this.fields.value : 'value');\n if (typeof getValue(val, item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return (value === 'true');\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n this.enableRtl ? addClass(this.enableRtlElements, dropDownBaseClasses.rtl) :\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n };\n ;\n /**\n * Initialize the Component.\n */\n DropDownBase.prototype.initialize = function () {\n this.bindEvent = true;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n ;\n /**\n * Get the properties to be maintained in persisted state.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.setEnabled = function () {\n if (this.enabled) {\n this.element.setAttribute('aria-disabled', 'false');\n }\n else {\n this.element.setAttribute('aria-disabled', 'true');\n }\n };\n ;\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n var items = element.querySelectorAll('select>option');\n }\n this.fields.text = fields.text;\n this.fields.value = fields.value;\n this.resetList(jsonElement, fields);\n };\n DropDownBase.prototype.getJSONfromOption = function (items, options, fields) {\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var option = options_1[_i];\n var json = {};\n json[fields.text] = option.innerText;\n json[fields.value] = option.getAttribute(fields.value) ? option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n * @private\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n };\n /**\n * Creates the list items of DropDownBase component.\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n if (dataSource instanceof DataManager) {\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.trigger('actionBegin', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.showSpinner();\n this.isRequested = true;\n eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then(function (e) {\n _this.trigger('actionComplete', e);\n if (e.cancel) {\n return;\n }\n var listItems = e.result;\n ulElement = _this.renderItems(listItems, fields);\n _this.onActionComplete(ulElement, listItems, e);\n _this.isRequested = false;\n _this.hideSpinner();\n _this.trigger('dataBound', { items: listItems, e: e });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n this.showSpinner();\n var dataManager = new DataManager(dataSource);\n var listItems = (this.getQuery(query)).executeLocal(dataManager);\n ulElement = this.renderItems(listItems, fields);\n this.onActionComplete(ulElement, listItems);\n this.hideSpinner();\n this.trigger('dataBound', { items: listItems });\n }\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n this.listData = list;\n this.list.innerHTML = '';\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n };\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n addClass([focusItem], dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n if (this.groupTemplate) {\n this.renderGroupTemplate(listElement);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems);\n }\n };\n /**\n * To create the ul li list items\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n return ListBase.createList(dataSource, options, true);\n };\n ;\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fields.properties,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n ;\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = e.target;\n var liHeight = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.ulElement.querySelectorAll('li');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n }\n }\n };\n /**\n * To render the list items\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n ulElement = this.templateListItem(dataSource, fields);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n ;\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n var option = this.listOption(dataSource, fields);\n return ListBase.renderContentTemplate(this.itemTemplate, dataSource, fields.properties, option);\n };\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; i < items.length; i++) {\n if (!isNullOrUndefined(items[i])) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var liWidth = this.liCollections[0].offsetWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n ;\n /**\n * To dispatch the event manually\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n */\n DropDownBase.prototype.setFields = function () {\n var fields = this.fields;\n if (this.fields.value && !this.fields.text) {\n this.fields.text = this.fields.value;\n }\n else if (!fields.value && fields.text) {\n this.fields.value = this.fields.text;\n }\n else if (!this.fields.value && !this.fields.text) {\n this.fields.value = this.fields.text = 'text';\n }\n };\n /**\n * reset the items list.\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query) {\n if (this.list) {\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n DropDownBase.prototype.updateDataSource = function (prop) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n if (!isNullOrUndefined(newProp.fields)) {\n this.setFields();\n }\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]]) {\n this.updateDataSource(props[j]);\n }\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n * @private\n */\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'sortOrder', 'dataSource', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n ;\n /**\n * Build and render the component\n * @private\n */\n DropDownBase.prototype.render = function (isEmptyData) {\n this.list = createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if (this.fields.groupBy || !isNullOrUndefined(group)) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = document.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n ;\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @return {void}.\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || this.list.textContent === this.noRecordsTemplate) {\n this.renderList();\n }\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = items instanceof Array ? items : [items];\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var li = createElement('li', { className: dropDownBaseClasses.li, id: 'option-add-' + i });\n li.setAttribute('data-value', getValue(fields.value, item));\n li.setAttribute('role', 'option');\n li.appendChild(document.createTextNode(getValue(fields.text, item)));\n liCollections.push(li);\n this.listData.push(item);\n this.updateActionCompleteData(li, item);\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.appendChild(this.ulElement);\n append(liCollections, this.ulElement);\n }\n else {\n for (var i = 0; i < items.length; i++) {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n DropDownBase.prototype.updateActionCompleteData = function (li, item) {\n // this is for ComboBox custom value\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n return null;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No Records Found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('The Request Failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\nexport { DropDownBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Property, Event, compile, KeyboardEvents, createElement, append } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Animation, Browser, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, setStyleAttribute, closest, prepend, detach, classList } from '@syncfusion/ej2-base';\nimport { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { incrementalSearch } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\n/* tslint:disable */\nimport { DataManager, Query } from '@syncfusion/ej2-data';\n// don't use space in classnames \nexport var dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n *
\n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @class */ (function (_super) {\n __extends(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n */\n function DropDownList(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n /**\n * Initialize the event handler.\n * @private\n */\n DropDownList.prototype.preRender = function () {\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n this.activeIndex = this.index;\n this.queryString = '';\n };\n DropDownList.prototype.initializeData = function () {\n this.isPopupOpen = false;\n this.isDocumentClick = false;\n this.isInteracted = false;\n this.isFilterFocus = false;\n this.beforePopupOpen = false;\n this.initial = true;\n this.initRemoteRender = false;\n this.isNotSearchList = false;\n this.isTyped = false;\n this.isSelected = false;\n this.preventFocus = false;\n this.preventAutoFill = false;\n this.isValidKey = false;\n this.typedString = '';\n this.isEscapeKey = false;\n this.isPreventBlur = false;\n this.isTabKey = false;\n this.actionCompleteData = { isUpdated: false };\n this.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.renderList = function (isEmptyData) {\n _super.prototype.render.call(this, isEmptyData);\n this.wireListEvents();\n };\n DropDownList.prototype.floatLabelChange = function () {\n if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {\n var floatElement = this.inputWrapper.container.querySelector('.e-float-text');\n if (this.inputElement.value !== '' || this.isInteracted) {\n classList(floatElement, ['e-label-top'], ['e-label-bottom']);\n }\n else {\n classList(floatElement, ['e-label-bottom'], ['e-label-top']);\n }\n }\n };\n DropDownList.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clear(e);\n };\n DropDownList.prototype.resetFocusElement = function () {\n this.removeHover();\n this.removeSelection();\n this.removeFocus();\n this.list.scrollTop = 0;\n if (this.getModuleName() !== 'autocomplete') {\n var li = this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clear = function (e, property) {\n this.resetSelection();\n var dataItem = this.getItemData();\n if (this.previousValue === dataItem.value) {\n return;\n }\n this.onChangeEvent(e);\n };\n DropDownList.prototype.resetSelection = function () {\n if (this.list) {\n if (this.allowFiltering && this.getModuleName() !== 'autocomplete') {\n this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);\n }\n this.resetFocusElement();\n }\n this.hiddenElement.innerHTML = '';\n this.inputElement.value = '';\n this.value = null;\n this.text = null;\n this.index = null;\n this.activeIndex = null;\n this.item = null;\n this.itemData = null;\n this.queryString = '';\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n this.setSelection(null, null);\n this.isSelectCustom = false;\n this.updateIconState();\n };\n DropDownList.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n this.inputWrapper.container.classList.add(this.htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && this.htmlAttributes[htmlAttr] === 'readonly') {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder'];\n var validateAttr = ['name', 'required'];\n if (validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n htmlAttr === 'placeholder' ? Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement) :\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n }\n }\n };\n DropDownList.prototype.getAriaAttributes = function () {\n return {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false',\n 'aria-activedescendant': 'null',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ;\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return this.inputWrapper.container;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n ;\n DropDownList.prototype.initValue = function () {\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n DropDownList.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n this.setSelection(this.getElementByValue(this.value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlur = function (e) {\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction();\n this.isTabKey = false;\n }\n if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {\n this.isActive = false;\n this.beforePopupOpen = false;\n }\n };\n DropDownList.prototype.focusOutAction = function () {\n this.isInteracted = false;\n this.focusOut();\n this.onFocusOut();\n };\n DropDownList.prototype.onFocusOut = function () {\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(null);\n }\n this.floatLabelChange();\n this.dispatchEvent(this.hiddenElement, 'change');\n if (this.inputWrapper.clearButton) {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n this.trigger('blur');\n };\n DropDownList.prototype.onFocus = function () {\n if (!this.isInteracted) {\n this.isInteracted = true;\n this.trigger('focus');\n }\n this.updateIconState();\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlur, this);\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n this.bindClearEvent();\n };\n DropDownList.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DropDownList.prototype.unBindCommonEvent = function () {\n EventHandler.remove(this.targetElement(), 'blur', this.onBlur);\n if (!Browser.isDevice) {\n this.keyboardModule.destroy();\n }\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);\n }\n };\n DropDownList.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement.value !== '') {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n */\n DropDownList.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n ;\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n this.renderList();\n }\n this.searchKeyEvent = e;\n if (!this.isRequested && !isNullOrUndefined(this.list.querySelector('li'))) {\n this.incrementalSearch(e);\n }\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n var classList = target.classList;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n ;\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n ;\n DropDownList.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n ;\n DropDownList.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n ;\n DropDownList.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n ;\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n };\n ;\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n var preventAction = e.action === 'pageUp' || e.action === 'pageDown';\n var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');\n this.isEscapeKey = e.action === 'escape';\n this.isTabKey = !this.isPopupOpen && e.action === 'tab';\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n isNavigation && this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (isTabAction && this.isPopupOpen || e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;\n switch (e.action) {\n case 'down':\n case 'up':\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else {\n var nextItem = void 0;\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];\n this.setSelection(nextItem, e);\n }\n e.preventDefault();\n break;\n case 'pageUp':\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'pageDown':\n this.pageDownSelection(this.activeIndex + this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'home':\n if (this.getModuleName() === 'dropdownlist') {\n e.preventDefault();\n if (this.activeIndex === 0) {\n return;\n }\n this.setSelection(this.liCollections[0], e);\n }\n break;\n case 'end':\n if (this.getModuleName() === 'dropdownlist') {\n e.preventDefault();\n var lastLi = this.getItems().length - 1;\n if (this.activeIndex === lastLi) {\n return;\n }\n this.setSelection(this.liCollections[lastLi], e);\n }\n break;\n case 'space':\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.beforePopupOpen) {\n this.showPopup();\n }\n }\n break;\n case 'open':\n this.showPopup();\n break;\n case 'hide':\n this.preventAltUp = this.isPopupOpen;\n this.hidePopup();\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'escape':\n case 'tab':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup();\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup();\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.getPageCount = function () {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n };\n DropDownList.prototype.pageUpSelection = function (steps, event) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.pageDownSelection = function (steps, event) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n */\n DropDownList.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n ;\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + this.popupObj.element.id)) &&\n !this.inputWrapper.container.contains(e.target)) {\n if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {\n this.isDocumentClick = true;\n var isActive = this.isRequested;\n this.isInteracted = false;\n this.hidePopup();\n if (!isActive) {\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn();\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup();\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn();\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup();\n }\n var proxy_1 = this;\n if (!this.isSecondClick) {\n setTimeout(function () { proxy_1.cloneElements(); }, 100);\n }\n }\n };\n DropDownList.prototype.cloneElements = function () {\n if (this.list) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.actionCompleteData.ulElement = ulElement;\n this.isSecondClick = true;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.item = li;\n this.itemData = this.getDataByValue(value);\n if (!this.initial && !preventSelect) {\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: this.item,\n itemData: this.itemData,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n li.setAttribute('aria-selected', 'true');\n this.activeIndex = this.getIndexByValue(value);\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n if (dataItem.value === null) {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.updateSelectedItem(li, e, false);\n }\n if (this.list) {\n this.removeHover();\n }\n this.selectedLI = li;\n if (this.setValue(e)) {\n return;\n }\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n else if (this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n if (this.isPopupOpen) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n if (this.isFilterLayout()) {\n attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\n if (!this.valueTempElement) {\n this.valueTempElement = createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n this.valueTempElement.innerHTML = '';\n compiledString = compile(this.valueTemplate);\n for (var _i = 0, _a = compiledString(this.itemData); _i < _a.length; _i++) {\n var item = _a[_i];\n this.valueTempElement.appendChild(item);\n }\n };\n DropDownList.prototype.removeSelection = function () {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n };\n ;\n DropDownList.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = {};\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n /**\n * To trigger the change event for list.\n */\n DropDownList.prototype.onChangeEvent = function (eve) {\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n this.setProperties({ 'value': dataItem.value, 'index': index, 'text': dataItem.text }, true);\n this.detachChangeEvent(eve);\n };\n ;\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: this.itemData,\n isInteracted: eve ? true : false,\n value: this.value\n };\n this.trigger('change', eventArgs);\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n this.hiddenElement.innerHTML = '
' + this.text + ' ';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n */\n DropDownList.prototype.onFilterUp = function (e) {\n this.isValidKey = e.keyCode === 40 || e.keyCode === 38 || this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n switch (e.keyCode) {\n case 38: //up arrow \n case 40://down arrow \n if (this.getModuleName() === 'autocomplete' && !this.isPopupOpen && !this.preventAltUp && !this.isRequested) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else {\n this.preventAutoFill = false;\n }\n this.preventAltUp = false;\n e.preventDefault();\n break;\n case 46: //delete\n case 8://backspace\n this.typedString = this.filterInput.value;\n if (!this.isPopupOpen && this.typedString !== '' || this.isPopupOpen && this.queryString.length > 0) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '') {\n this.resetFocusElement();\n this.activeIndex = null;\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n e.preventDefault();\n break;\n default:\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n break;\n }\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13://enter\n break;\n case 40: //down arrow \n case 38://up arrow \n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9://tab \n if (this.isPopupOpen) {\n e.preventDefault();\n }\n break;\n default:\n this.prevSelectPoints = this.getSelectionPoints();\n this.queryString = this.filterInput.value;\n break;\n }\n };\n DropDownList.prototype.removeFillSelection = function () {\n if (this.isInteracted) {\n var selection = this.getSelectionPoints();\n this.inputElement.setSelectionRange(selection.end, selection.end);\n }\n };\n DropDownList.prototype.getSelectionPoints = function () {\n var input = this.inputElement;\n return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };\n };\n DropDownList.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.activeIndex = null;\n if (this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n if (this.isFiltering()) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isCustomFilter = true;\n _this.filteringAction(dataSource, query, fields);\n },\n baseEventArgs: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1);\n if (eventArgs_1.cancel) {\n return;\n }\n if (!this.isCustomFilter && !eventArgs_1.preventDefaultAction) {\n var filterQuery = this.query ? this.query.clone() : new Query();\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', 'startswith', this.filterInput.value, true, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', 'startswith', this.filterInput.value, true, this.ignoreAccent);\n }\n this.filteringAction(this.dataSource, filterQuery, this.fields);\n }\n }\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = true;\n if (this.filterInput.value.trim() === '') {\n this.actionCompleteData.isUpdated = false;\n this.isTyped = false;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);\n this.isTyped = true;\n if (!isNullOrUndefined(this.itemData) && this.getModuleName() === 'dropdownlist') {\n this.focusIndexItem();\n this.setScrollPosition();\n }\n this.isNotSearchList = true;\n }\n else {\n this.isNotSearchList = false;\n this.resetList(dataSource, fields, query);\n }\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = createElement('span', {\n className: dropDownListClasses.filterParent\n });\n this.filterInput = createElement('input', {\n attrs: { type: 'text' },\n className: dropDownListClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ?\n [dropDownListClasses.backIcon, dropDownListClasses.filterBarClearIcon] : [dropDownListClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n });\n append([this.filterInputObj.container], parentElement);\n prepend([parentElement], popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlur, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n ;\n DropDownList.prototype.onInput = function () {\n this.isValidKey = true;\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (this.isNotSearchList) {\n this.isNotSearchList = false;\n return;\n }\n if (this.isActive) {\n var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {\n this.isRequested = false;\n this.keyActionHandler(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent)) {\n this.incrementalSearch(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n this.list.scrollTop = 0;\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n }\n if (this.initRemoteRender) {\n this.initial = true;\n this.activeIndex = this.index;\n this.updateValues();\n this.initRemoteRender = false;\n this.initial = false;\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n }\n this.addNewItem(list, selectedItem);\n if (!isNullOrUndefined(this.itemData)) {\n this.focusIndexItem();\n }\n }\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_1 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||\n (getValue(_this.fields.value, data) === value_1));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item) {\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n this.actionCompleteData.list.push(item);\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.list.querySelector('[data-value=\"' + value + '\"]');\n this.selectedLI = element;\n this.activeItem(element);\n this.removeFocus();\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n ;\n DropDownList.prototype.renderPopup = function () {\n if (this.popupObj && document.body.contains(this.popupObj.element)) {\n this.refreshPopup();\n return;\n }\n var popupEle = createElement('div', { id: this.element.id + '_popup', className: 'e-ddl e-popup' });\n var searchBox = this.setSearchBox(popupEle);\n this.listHeight = formatUnit(this.popupHeight);\n if (this.headerTemplate) {\n var compiledString = void 0;\n this.header = document.createElement('div');\n addClass([this.header], dropDownListClasses.header);\n compiledString = compile(this.headerTemplate);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.header.appendChild(item);\n }\n append([this.header], popupEle);\n }\n append([this.list], popupEle);\n if (this.footerTemplate) {\n this.setFooterTemplate(popupEle);\n }\n document.body.appendChild(popupEle);\n popupEle.style.visibility = 'hidden';\n if (this.popupHeight !== 'auto') {\n this.searchBoxHeight = 0;\n if (!isNullOrUndefined(searchBox.container)) {\n this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;\n this.listHeight = (parseInt(this.listHeight, 10) - (this.searchBoxHeight)).toString() + 'px';\n }\n if (this.headerTemplate) {\n var height = Math.round(this.header.getBoundingClientRect().height);\n this.listHeight = (parseInt(this.listHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';\n }\n if (this.footerTemplate) {\n var height = Math.round(this.footer.getBoundingClientRect().height);\n this.listHeight = (parseInt(this.listHeight, 10) - (height + this.searchBoxHeight)).toString() + 'px';\n }\n this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n var offsetValue = 0;\n var left;\n if (!isNullOrUndefined(this.selectedLI) && (!isNullOrUndefined(this.activeIndex) && this.activeIndex >= 0)) {\n this.setScrollPosition();\n }\n else {\n this.list.scrollTop = 0;\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n offsetValue = this.getOffsetValue(popupEle);\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));\n }\n this.getFocusElement();\n this.createPopup(popupEle, offsetValue, left);\n this.checkCollision(popupEle);\n if (Browser.isDevice) {\n this.popupObj.element.classList.add(dropDownListClasses.device);\n if (this.getModuleName() === 'dropdownlist' || (this.getModuleName() === 'combobox'\n && !this.allowFiltering && this.isDropDownClick)) {\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n if (this.isFilterLayout()) {\n this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);\n this.popupObj.position = { X: 0, Y: 0 };\n this.popupObj.dataBind();\n attributes(this.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n this.setSearchBoxPosition();\n this.backIconElement = searchBox.container.querySelector('.e-back-icon');\n this.clearIconElement = searchBox.container.querySelector('.' + dropDownListClasses.clearIcon);\n EventHandler.add(this.backIconElement, 'click', this.clickOnBackIcon, this);\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n }\n }\n popupEle.style.visibility = 'visible';\n addClass([popupEle], 'e-popup-close');\n var scrollParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _b = 0, scrollParentElements_1 = scrollParentElements; _b < scrollParentElements_1.length; _b++) {\n var element = scrollParentElements_1[_b];\n EventHandler.add(element, 'scroll', this.scrollHandler, this);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n EventHandler.add(this.list, 'scroll', this.listScroll, this);\n }\n attributes(this.targetElement(), { 'aria-expanded': 'true' });\n var inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n this.beforePopupOpen = true;\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('open', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n this.popupObj.show(new Animation(animModel));\n };\n DropDownList.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTop, 10);\n var borderBottom = parseInt(popupStyles.borderBottom, 10);\n return this.setPopupPosition(borderTop + borderBottom);\n };\n DropDownList.prototype.createPopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' },\n zIndex: this.zIndex,\n close: function () {\n if (!_this.isDocumentClick) {\n _this.focusDropDown();\n }\n _this.isDocumentClick = false;\n _this.destroyPopup();\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n if (_this.isFilterLayout()) {\n removeClass([_this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n _this.isFilterFocus = true;\n _this.filterInput.focus();\n if (_this.inputWrapper.clearButton) {\n addClass([_this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n _this.activeStateChange();\n }\n });\n };\n DropDownList.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0;\n };\n DropDownList.prototype.getFocusElement = function () {\n // combo-box used this method\n };\n DropDownList.prototype.isFilterLayout = function () {\n return this.getModuleName() === 'dropdownlist' && this.allowFiltering;\n };\n DropDownList.prototype.scrollHandler = function () {\n if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&\n !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {\n this.hidePopup();\n }\n if (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement.style.zIndex = '0';\n this.fixedHeaderElement.style.display = 'none';\n }\n };\n DropDownList.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n DropDownList.prototype.setPopupPosition = function (border) {\n var offsetValue;\n var popupOffset = border;\n var selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];\n var liHeight = firstItem.getBoundingClientRect().height;\n var listHeight = this.list.offsetHeight / 2;\n var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;\n var lastItemOffsetValue = lastItem.offsetTop;\n if (lastItemOffsetValue - listHeight < height && !isNullOrUndefined(this.liCollections) &&\n this.liCollections.length > 0 && !isNullOrUndefined(selectedLI)) {\n var count = this.list.offsetHeight / liHeight;\n var paddingBottom = parseInt(getComputedStyle(this.list).paddingBottom, 10);\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;\n this.list.scrollTop = selectedLI.offsetTop;\n }\n else if (height > listHeight) {\n offsetValue = listHeight - liHeight / 2;\n this.list.scrollTop = height - listHeight + liHeight / 2;\n }\n else {\n offsetValue = height;\n }\n var inputHeight = this.inputWrapper.container.offsetHeight;\n offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);\n return -offsetValue;\n };\n DropDownList.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n DropDownList.prototype.scrollBottom = function (isInitial) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;\n var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n };\n DropDownList.prototype.scrollTop = function () {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n };\n DropDownList.prototype.isEditTextBox = function () {\n return false;\n };\n DropDownList.prototype.isFiltering = function () {\n return this.allowFiltering;\n };\n DropDownList.prototype.isPopupButton = function () {\n return true;\n };\n DropDownList.prototype.setScrollPosition = function (e) {\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.scrollBottom();\n break;\n default:\n this.scrollTop();\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n };\n DropDownList.prototype.clearText = function () {\n this.filterInput.value = '';\n this.searchLists(null);\n };\n DropDownList.prototype.listScroll = function () {\n this.filterInput.blur();\n };\n DropDownList.prototype.closePopup = function (delay) {\n this.isTyped = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n EventHandler.remove(this.list, 'scroll', this.listScroll);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlur);\n this.filterInput = null;\n }\n attributes(this.targetElement(), { 'aria-expanded': 'false', 'aria-activedescendant': null });\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n this.beforePopupOpen = false;\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('close', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n if (this.getModuleName() === 'autocomplete') {\n this.rippleFun();\n }\n if (this.isPopupOpen) {\n this.popupObj.hide(new Animation(animModel));\n }\n else {\n this.destroyPopup();\n }\n };\n DropDownList.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n this.isFilterFocus = false;\n this.popupObj.destroy();\n detach(this.popupObj.element);\n };\n DropDownList.prototype.clickOnBackIcon = function () {\n this.hidePopup();\n this.focusIn();\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n DropDownList.prototype.render = function () {\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n }\n else {\n this.inputElement = createElement('input');\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n });\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n var name = this.element.getAttribute('name') ? this.element.getAttribute('name') : this.element.getAttribute('id');\n this.hiddenElement = createElement('select', {\n attrs: { 'name': name, 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.element.removeAttribute('name');\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n this.setHTMLAttributes();\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n };\n ;\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n this.footer.innerHTML = '';\n }\n else {\n this.footer = document.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n compiledString = compile(this.footerTemplate);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.footer.appendChild(item);\n }\n append([this.footer], popupEle);\n };\n DropDownList.prototype.setOldText = function (text) {\n this.text = text;\n };\n DropDownList.prototype.setOldValue = function (value) {\n this.value = value;\n };\n DropDownList.prototype.refreshPopup = function () {\n if (!isNullOrUndefined(this.popupObj) && document.body.contains(this.popupObj.element) &&\n ((this.allowFiltering && !(Browser.isDevice && this.isFilterLayout())) || this.getModuleName() === 'autocomplete')) {\n this.popupObj.refreshPosition(this.inputWrapper.container);\n }\n };\n DropDownList.prototype.updateDataSource = function (prop) {\n this.clear(null, prop);\n this.resetList(this.dataSource);\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource':\n break;\n case 'htmlAttributes':\n this.setHTMLAttributes();\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': formatUnit(newProp.width) });\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'filterBarPlaceholder':\n Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.inputElement);\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.element.classList.add(newProp.cssClass);\n }\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'text':\n if (newProp.text === null) {\n this.clear();\n return;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var li = this.getElementByText(newProp.text);\n if (this.isValidLI(li)) {\n this.setSelection(li, null);\n }\n else {\n this.setOldText(oldProp.text);\n }\n }\n break;\n case 'value':\n if (newProp.value === null) {\n this.clear();\n return;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var item = this.getElementByValue(newProp.value);\n if (this.isValidLI(item)) {\n this.setSelection(item, null);\n }\n else {\n this.setOldValue(oldProp.value);\n }\n }\n break;\n case 'index':\n if (newProp.index === null) {\n this.clear();\n return;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var element = this.liCollections[newProp.index];\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n }\n else {\n this.index = oldProp.index;\n }\n }\n break;\n case 'footerTemplate':\n if (this.popupObj) {\n this.setFooterTemplate(this.popupObj.element);\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder);\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n default:\n var ddlProps = void 0;\n ddlProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);\n break;\n }\n }\n };\n /**\n * Return the module name.\n * @private\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /**\n * Opens the popup that displays the list of items.\n * @returns void.\n */\n DropDownList.prototype.showPopup = function () {\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n if (this.isFiltering() && !this.isActive && this.actionCompleteData.list && this.actionCompleteData.list[0]) {\n this.isActive = true;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderList();\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderPopup();\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n };\n /**\n * Hides the popup if it is in an open state.\n * @returns void.\n */\n DropDownList.prototype.hidePopup = function () {\n if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n if (!isNullOrUndefined(this.index)) {\n this.selectedLI = this.liCollections[this.index];\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.closePopup();\n var dataItem = this.getItemData();\n if (this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n !isNullOrUndefined(this.selectedLI) && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clear();\n }\n };\n /**\n * Sets the focus on the component for interaction.\n * @returns void.\n */\n DropDownList.prototype.focusIn = function () {\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus();\n };\n /**\n * Moves the focus from the component if the component is already focused.\n * @returns void.\n */\n DropDownList.prototype.focusOut = function () {\n this.isTyped = true;\n this.hidePopup();\n this.targetElement().blur();\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownList.prototype.destroy = function () {\n var _this = this;\n this.isActive = false;\n this.hidePopup();\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n }\n ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'].forEach(function (value) {\n _this.inputElement.removeAttribute(value);\n });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], DropDownList.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], DropDownList.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], DropDownList.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"focus\", void 0);\n DropDownList = __decorate([\n NotifyPropertyChanges\n ], DropDownList);\n return DropDownList;\n}(DropDownBase));\nexport { DropDownList };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Property, Event, addClass, Browser, removeClass } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';\nimport { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { Search } from '../common/incremental-search';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\n/* tslint:disable */\nimport { Input } from '@syncfusion/ej2-inputs';\n/* tslint:enable */\ndropDownListClasses.root = 'e-combobox';\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.\n * ```html\n *
\n * Badminton \n * Basketball \n * Cricket \n * Football \n * Tennis \n * \n * ```\n * ```typescript\n * let games:ComboBox = new ComboBox();\n * games.appendTo(\"#list\");\n * ```\n */\nvar ComboBox = /** @class */ (function (_super) {\n __extends(ComboBox, _super);\n /**\n * *Constructor for creating the component\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n /**\n * Initialize the event handler\n * @private\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.wireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);\n EventHandler.add(this.inputWrapper.container, 'blur', this.onBlur, this);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);\n }\n EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);\n if (!this.readonly) {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n this.bindCommonEvent();\n };\n ComboBox.prototype.preventBlur = function (e) {\n if ((!this.allowFiltering && document.activeElement !== this.inputElement &&\n !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {\n e.preventDefault();\n }\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n ComboBox.prototype.setOldText = function (text) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n this.removeSelection();\n };\n ComboBox.prototype.setOldValue = function (value) {\n if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n this.removeSelection();\n this.setHiddenValue();\n };\n ComboBox.prototype.valueMuteChange = function (value) {\n var inputValue = isNullOrUndefined(value) ? null : value.toString();\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value, text: value, index: null }, true);\n this.activeIndex = this.index;\n var fields = this.fields;\n var dataItem = {};\n dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();\n dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();\n this.itemData = dataItem;\n this.item = null;\n if (this.previousValue !== this.value) {\n this.detachChangeEvent(null);\n }\n };\n ComboBox.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n var li = this.getElementByValue(this.value);\n if (li) {\n this.setSelection(li, null);\n }\n else if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-owns': this.element.id + '_options',\n 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-hasPopup': 'true',\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly.toString(),\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n };\n return ariaAttributes;\n };\n ComboBox.prototype.searchLists = function (e) {\n this.isTyped = true;\n if (this.isFiltering()) {\n _super.prototype.searchLists.call(this, e);\n if (this.filterInput.value.trim() === '') {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n }\n else {\n if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n this.incrementalSearch(e);\n }\n };\n ComboBox.prototype.getNgDirective = function () {\n return 'EJS-COMBOBOX';\n };\n ComboBox.prototype.setSearchBox = function () {\n this.filterInput = this.inputElement;\n return (this.isFiltering() ? this.inputWrapper : inputObject);\n };\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {\n this.inlineSearch();\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = this.list.querySelector('.' + dropDownListClasses.selected);\n var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var activeItem = Search(inputValue, this.liCollections, 'StartsWith', true);\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n this.list.scrollTop = count * height + fixedHead;\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n this.list.scrollTop = 0;\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if (e && e.type === 'keydown' && e.action === 'enter') {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = this.inputWrapper.buttons[0] || this.inputWrapper.clearButton;\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n ComboBox.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n this.spinnerElement.innerHTML = '';\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement = null;\n }\n };\n ComboBox.prototype.setAutoFill = function (activeElement, isHover) {\n if (!isHover) {\n this.setHoverList(activeElement);\n }\n if (this.autofill && !this.preventAutoFill) {\n var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();\n var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n if (this.getModuleName() === 'combobox') {\n if (!this.isSelected && this.previousValue !== currentFillValue) {\n this.updateSelectedItem(activeElement, null);\n this.isSelected = true;\n this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n }\n else {\n this.updateSelectedItem(activeElement, null, true);\n }\n }\n if (!this.isAndroidAutoFill(currentValue)) {\n this.setAutoFillSelection(currentValue);\n }\n }\n };\n ComboBox.prototype.isAndroidAutoFill = function (value) {\n if (Browser.isAndroid) {\n var currentPoints = this.getSelectionPoints();\n var prevEnd = this.prevSelectPoints.end;\n var curEnd = currentPoints.end;\n var prevStart = this.prevSelectPoints.start;\n var curStart = currentPoints.start;\n if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||\n (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {\n return true;\n }\n else {\n return false;\n }\n }\n else {\n return false;\n }\n };\n ComboBox.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n ComboBox.prototype.inlineSearch = function (e) {\n var isKeyNavigate = (e && (e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));\n var activeElement = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();\n if (!isNullOrUndefined(activeElement)) {\n if (!isKeyNavigate) {\n var value = this.getFormattedValue(activeElement.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;\n }\n this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;\n this.setAutoFill(activeElement, isKeyNavigate);\n }\n else if (this.inputElement.value === '') {\n this.activeIndex = null;\n this.list.scrollTop = 0;\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n this.removeFocus();\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup();\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ;\n ComboBox.prototype.setAutoFillSelection = function (currentValue) {\n var selection = this.getSelectionPoints();\n var value = this.inputElement.value.substr(0, selection.start);\n if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {\n var inputValue = value + currentValue.substr(value.length, currentValue.length);\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);\n }\n else {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\n }\n };\n ;\n ComboBox.prototype.getValueByText = function (text) {\n return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);\n };\n ComboBox.prototype.unWireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);\n EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlur);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);\n }\n EventHandler.remove(this.inputElement, 'focus', this.targetFocus);\n if (!this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n this.unBindCommonEvent();\n };\n ComboBox.prototype.setSelection = function (li, e) {\n _super.prototype.setSelection.call(this, li, e);\n if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {\n this.removeFocus();\n }\n };\n ComboBox.prototype.selectCurrentItem = function (e) {\n var li;\n if (this.isPopupOpen) {\n li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n }\n if (e.action === 'enter' && this.inputElement.value.trim() === '') {\n this.clear(e);\n }\n else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {\n this.customValue();\n }\n this.hidePopup();\n };\n ComboBox.prototype.setHoverList = function (li) {\n this.removeSelection();\n if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {\n this.removeFocus();\n li.classList.add(dropDownListClasses.focus);\n }\n };\n ;\n ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus();\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = true;\n }\n _super.prototype.dropDownClick.call(this, e);\n };\n ComboBox.prototype.customValue = function () {\n var value = this.getValueByText(this.inputElement.value);\n if (!this.allowCustom && this.inputElement.value !== '') {\n this.setProperties({ value: value });\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n else if (this.inputElement.value.trim() !== '') {\n var previousValue = this.value;\n if (isNullOrUndefined(value)) {\n var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;\n var fields = this.fields;\n var eventArgs = void 0;\n eventArgs = { text: value_1, item: {} };\n if (!this.initial) {\n this.trigger('customValueSpecifier', eventArgs);\n }\n var item = eventArgs.item;\n var dataItem = {};\n if (item && getValue(fields.text, item) && getValue(fields.value, item)) {\n dataItem = item;\n }\n else {\n setValue(fields.text, value_1, dataItem);\n setValue(fields.value, value_1, dataItem);\n }\n this.itemData = dataItem;\n var changeData = {\n text: getValue(fields.text, this.itemData),\n value: getValue(fields.value, this.itemData),\n index: null\n };\n this.setProperties(changeData, true);\n this.setSelection(null, null);\n this.isSelectCustom = true;\n }\n else {\n this.isSelectCustom = false;\n this.setProperties({ value: value });\n }\n if (previousValue !== this.value) {\n this.onChangeEvent(null);\n }\n }\n else if (this.allowCustom) {\n this.isSelectCustom = true;\n }\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n if (this.readonly) {\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n else {\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n break;\n case 'allowFiltering':\n this.setSearchBox();\n break;\n case 'allowCustom':\n break;\n default:\n var comboProps = void 0;\n comboProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, comboProps.newProperty, comboProps.oldProperty);\n break;\n }\n }\n };\n /**\n * To initialize the control rendering.\n * @private\n */\n ComboBox.prototype.render = function () {\n _super.prototype.render.call(this);\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n ComboBox.prototype.getModuleName = function () {\n return 'combobox';\n };\n /**\n * Hides the popup if it is in open state.\n * @returns void.\n */\n ComboBox.prototype.hidePopup = function () {\n var inputValue = this.inputElement.value === '' ? null : this.inputElement.value;\n if (!isNullOrUndefined(this.listData)) {\n var isEscape = this.isEscapeKey;\n if (this.isEscapeKey) {\n Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n }\n if (this.autofill) {\n this.removeFillSelection();\n }\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = this.list.querySelector('.' + dropDownListClasses.selected);\n if (dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(null);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue();\n }\n }\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this);\n };\n /**\n * Sets the focus to the component for interaction.\n * @returns void.\n */\n ComboBox.prototype.focusIn = function () {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = true;\n }\n _super.prototype.focusIn.call(this);\n };\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"autofill\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"allowCustom\", void 0);\n __decorate([\n Property({})\n ], ComboBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"index\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"customValueSpecifier\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property('Never')\n ], ComboBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"filterBarPlaceholder\", void 0);\n ComboBox = __decorate([\n NotifyPropertyChanges\n ], ComboBox);\n return ComboBox;\n}(DropDownList));\nexport { ComboBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { Property, addClass, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';\nimport { Event, Complex } from '@syncfusion/ej2-base';\nimport { removeClass, attributes, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { ComboBox } from '../combo-box/combo-box';\nimport { highlightSearch } from '../common/highlight-search';\nimport { Search } from '../common/incremental-search';\nimport { FieldSettings } from '../drop-down-base/drop-down-base';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\n/* tslint:disable */\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\n/* tslint:enable */\nvar SPINNER_CLASS = 'e-atc-spinner-icon';\ndropDownListClasses.root = 'e-autocomplete';\ndropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';\n/**\n * The AutoComplete component provides the matched suggestion list when type into the input,\n * from which the user can select one.\n * ```html\n *
\n * ```\n * ```typescript\n * let atcObj:AutoComplete = new AutoComplete();\n * atcObj.appendTo(\"#list\");\n * ```\n */\nvar AutoComplete = /** @class */ (function (_super) {\n __extends(AutoComplete, _super);\n /**\n * * Constructor for creating the widget\n */\n function AutoComplete(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFiltered = false;\n return _this;\n }\n ;\n /**\n * Initialize the event handler\n * @private\n */\n AutoComplete.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n AutoComplete.prototype.getNgDirective = function () {\n return 'EJS-AUTOCOMPLETE';\n };\n AutoComplete.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;\n var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;\n if (this.isFiltered) {\n return filterQuery;\n }\n if (this.queryString !== null) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount)) {\n filterQuery.take(this.suggestionCount);\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.isSelectCustom = false;\n if (isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this, true);\n }\n var isDownUpKey = e.keyCode === 40 || e.keyCode === 38;\n this.queryString = this.filterInput.value;\n if (isDownUpKey) {\n this.queryString = this.queryString === '' ? null : this.queryString;\n this.beforePopupOpen = true;\n this.resetList(this.dataSource, this.fields);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n var eventArgs = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n if (!this.isFiltered && !eventArgs.preventDefaultAction) {\n this.filterAction(this.dataSource, null, this.fields);\n }\n };\n AutoComplete.prototype.filterAction = function (dataSource, query, fields) {\n this.beforePopupOpen = true;\n if (this.queryString !== '' && (this.queryString.length >= this.minLength || this.isFiltered)) {\n this.resetList(dataSource, fields, query);\n }\n else {\n this.hidePopup();\n }\n };\n AutoComplete.prototype.clear = function (e, property) {\n if (isNullOrUndefined(property) || property !== 'dataSource') {\n _super.prototype.clear.call(this, e);\n }\n if (this.beforePopupOpen) {\n this.hidePopup();\n }\n };\n AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n this.fixedHeaderElement = null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n var item = this.list.querySelector('.' + dropDownListClasses.li);\n if (!isNullOrUndefined(item)) {\n removeClass([item], dropDownListClasses.focus);\n }\n this.postBackAction();\n };\n AutoComplete.prototype.postBackAction = function () {\n if (this.queryString !== null && this.queryString !== '' && this.highlight) {\n highlightSearch(this.list, this.queryString, this.ignoreCase, this.filterType);\n }\n if (this.autofill && !isNullOrUndefined(this.liCollections[0])) {\n var items = [this.liCollections[0]];\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);\n if (!isNullOrUndefined(searchItem.item)) {\n _super.prototype.setAutoFill.call(this, this.liCollections[0], true);\n }\n }\n };\n AutoComplete.prototype.setSelection = function (li, e) {\n if (!this.isValidLI(li)) {\n return;\n }\n if (!isNullOrUndefined(e) && e.type === 'keydown' && e.action !== 'enter' && this.isValidLI(li)) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.setHoverList(li);\n this.selectedLI = li;\n this.setScrollPosition(e);\n if (this.autofill) {\n this.preventAutoFill = false;\n _super.prototype.setAutoFill.call(this, li);\n }\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n else {\n _super.prototype.setSelection.call(this, li, e);\n }\n };\n AutoComplete.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = this.inputWrapper.buttons[0] || this.inputWrapper.clearButton ||\n Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container);\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n AutoComplete.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n AutoComplete.prototype.isFiltering = function () {\n return true;\n };\n AutoComplete.prototype.renderPopup = function () {\n this.list.scrollTop = 0;\n _super.prototype.renderPopup.call(this);\n if (this.highlight) {\n highlightSearch(this.list, this.queryString, this.ignoreCase, this.filterType);\n }\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return true && this.inputElement.value.trim() !== '';\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n AutoComplete.prototype.isSelectFocusItem = function (element) {\n return false;\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n * @returns void.\n */\n AutoComplete.prototype.showPopup = function () {\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n this.preventAutoFill = true;\n if (isNullOrUndefined(this.list)) {\n this.renderList();\n }\n else {\n this.resetList(this.dataSource, this.fields);\n }\n };\n /**\n * Hides the popup if it is in open state.\n * @returns void.\n */\n AutoComplete.prototype.hidePopup = function () {\n _super.prototype.hidePopup.call(this);\n this.activeIndex = -1;\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'showPopupButton':\n if (this.showPopupButton) {\n var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container);\n this.inputWrapper.buttons[0] = button;\n EventHandler.add(this.inputWrapper.buttons[0], 'click', this.dropDownClick, this);\n }\n else {\n detach(this.inputWrapper.buttons[0]);\n this.inputWrapper.buttons[0] = null;\n }\n break;\n default:\n var atcProps = void 0;\n atcProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, atcProps.newProperty, atcProps.oldProperty);\n break;\n }\n }\n };\n /**\n * Return the module name of this component.\n * @private\n */\n AutoComplete.prototype.getModuleName = function () {\n return 'autocomplete';\n };\n /**\n * To initialize the control rendering\n * @private\n */\n AutoComplete.prototype.render = function () {\n _super.prototype.render.call(this);\n };\n ;\n __decorate([\n Complex({ value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], AutoComplete.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], AutoComplete.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"showPopupButton\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"highlight\", void 0);\n __decorate([\n Property(20)\n ], AutoComplete.prototype, \"suggestionCount\", void 0);\n __decorate([\n Property({})\n ], AutoComplete.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"query\", void 0);\n __decorate([\n Property(1)\n ], AutoComplete.prototype, \"minLength\", void 0);\n __decorate([\n Property('Contains')\n ], AutoComplete.prototype, \"filterType\", void 0);\n __decorate([\n Event()\n ], AutoComplete.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], AutoComplete.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(false)\n ], AutoComplete.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], AutoComplete.prototype, \"text\", void 0);\n AutoComplete = __decorate([\n NotifyPropertyChanges\n ], AutoComplete);\n return AutoComplete;\n}(ComboBox));\nexport { AutoComplete };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nimport { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { attributes, setValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';\nimport { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';\nimport { Animation, Browser, prepend } from '@syncfusion/ej2-base';\nimport { Search } from '../common/incremental-search';\nimport { createElement, append, addClass, removeClass, setStyleAttribute, closest, detach, remove } from '@syncfusion/ej2-base';\nimport { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';\n/* tslint:disable */\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur } from './float-label';\n/* tslint:enable */\nvar FOCUS = 'e-input-focus';\nvar DISABLED = 'e-disabled';\nvar OVER_ALL_WRAPPER = 'e-multiselect e-input-group';\nvar ELEMENT_WRAPPER = 'e-multi-select-wrapper';\nvar ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';\nvar HIDE_LIST = 'e-hide-listitem';\nvar DELIMITER_VIEW = 'e-delim-view';\nvar CHIP_WRAPPER = 'e-chips-collection';\nvar CHIP = 'e-chips';\nvar CHIP_CONTENT = 'e-chipcontent';\nvar CHIP_CLOSE = 'e-chips-close';\nvar CHIP_SELECTED = 'e-chip-selected';\nvar SEARCHBOX_WRAPPER = 'e-searcher';\nvar DELIMITER_VIEW_WRAPPER = 'e-delimiter';\nvar ZERO_SIZE = 'e-zero-size';\nvar REMAIN_WRAPPER = 'e-remain';\nvar CLOSEICON_CLASS = 'e-chips-close e-close-hooker';\nvar DELIMITER_WRAPPER = 'e-delim-values';\nvar POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';\nvar INPUT_ELEMENT = 'e-dropdownbase';\nvar RTL_CLASS = 'e-rtl';\nvar CLOSE_ICON_HIDE = 'e-close-icon-hide';\nvar MOBILE_CHIP = 'e-mob-chip';\nvar FOOTER = 'e-ddl-footer';\nvar HEADER = 'e-ddl-header';\nvar DISABLE_ICON = 'e-ddl-disable-icon';\nvar SPINNER_CLASS = 'e-ms-spinner-icon';\nvar HIDDEN_ELEMENT = 'e-multi-hidden';\nvar destroy = 'destroy';\nvar dropdownIcon = 'e-input-group-icon e-ddl-icon';\nvar iconAnimation = 'e-icon-anim';\n/**\n * The Multiselect allows the user to pick a more than one value from list of predefined values.\n * ```html\n *
\n * Badminton \n * Basketball \n * Cricket \n * Football \n * Tennis \n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar MultiSelect = /** @class */ (function (_super) {\n __extends(MultiSelect, _super);\n /**\n * Constructor for creating the DropDownList widget.\n */\n function MultiSelect(option, element) {\n var _this = _super.call(this, option, element) || this;\n _this.mobFilter = true;\n _this.isFiltered = false;\n _this.focused = true;\n _this.isValidKey = false;\n _this.scrollFocusStatus = false;\n _this.keyDownStatus = false;\n return _this;\n }\n ;\n MultiSelect.prototype.enableRTL = function (state) {\n if (state) {\n this.overAllWrapper.classList.add(RTL_CLASS);\n }\n else {\n this.overAllWrapper.classList.remove(RTL_CLASS);\n }\n if (this.popupObj) {\n this.popupObj.enableRtl = state;\n this.popupObj.dataBind();\n }\n };\n MultiSelect.prototype.requiredModules = function () {\n var modules = [];\n if (this.mode === 'CheckBox') {\n this.allowCustomValue = false;\n this.hideSelectedItem = false;\n this.closePopupOnSelect = false;\n this.allowFiltering = true;\n modules.push({\n member: 'CheckBoxSelection',\n args: [this]\n });\n }\n return modules;\n };\n MultiSelect.prototype.updateHTMLAttribute = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n switch (htmlAttr) {\n case 'class':\n this.overAllWrapper.classList.add(this.htmlAttributes[htmlAttr]);\n this.popupWrapper.classList.add(this.htmlAttributes[htmlAttr]);\n break;\n case 'disabled':\n this.enable(false);\n break;\n case 'placeholder':\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n break;\n default:\n var defaultAttr = ['title', 'id'];\n var validateAttr = ['name', 'required'];\n if (validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n break;\n }\n }\n }\n };\n MultiSelect.prototype.updateReadonly = function (state) {\n if (state || this.mode === 'CheckBox') {\n this.inputElement.setAttribute('readonly', 'true');\n }\n else {\n this.inputElement.removeAttribute('readonly');\n }\n };\n MultiSelect.prototype.updateClearButton = function (state) {\n if (state) {\n if (this.overAllClear.parentNode) {\n this.overAllClear.style.display = '';\n }\n else {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);\n }\n else {\n this.overAllClear.style.display = 'none';\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n };\n MultiSelect.prototype.updateCssClass = function () {\n if (this.cssClass) {\n this.popupWrapper.classList.add(this.cssClass);\n this.overAllWrapper.classList.add(this.cssClass);\n }\n };\n MultiSelect.prototype.onPopupShown = function () {\n if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {\n var proxy_1 = this;\n window.onpopstate = function () {\n proxy_1.hidePopup();\n };\n history.pushState({}, '');\n }\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('open', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var animModel = { name: 'FadeIn', duration: 100 };\n this.focusAtFirstListItem();\n document.body.appendChild(this.popupObj.element);\n this.refreshPopup();\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], [iconAnimation]);\n }\n this.popupObj.show(animModel);\n attributes(this.inputElement, { 'aria-expanded': 'true' });\n if (!this.isFirstClick) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n }\n this.isFirstClick = true;\n }\n this.refreshListItems(null);\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n };\n MultiSelect.prototype.focusAtFirstListItem = function () {\n if (this.ulElement && this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li)) {\n var element = void 0;\n if (this.mode === 'CheckBox') {\n element = this.list.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n else {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n if (element !== null) {\n this.removeFocus();\n this.addListFocus(element);\n }\n }\n };\n MultiSelect.prototype.focusAtLastListItem = function (data) {\n var activeElement;\n if (data) {\n activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n if (this.value && this.value.length) {\n Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n activeElement = null;\n }\n }\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.scrollBottom(activeElement.item, activeElement.index);\n }\n };\n MultiSelect.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-disabled': 'false',\n 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-multiselectable': 'true',\n 'aria-activedescendant': 'null',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false'\n };\n return ariaAttributes;\n };\n MultiSelect.prototype.updateListARIA = function () {\n attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n attributes(this.inputElement, this.getAriaAttributes());\n var li;\n li = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var temp = li.length;\n if (li && li.length) {\n while (temp > 0) {\n if (li[temp - 1].getAttribute('aria-selected') !== 'true') {\n li[temp - 1].setAttribute('aria-selected', 'false');\n }\n temp--;\n }\n }\n };\n MultiSelect.prototype.removelastSelection = function (e) {\n var elements;\n elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var value = elements[elements.length - 1].getAttribute('data-value');\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n this.removeValue(value, e);\n this.removeChipSelection();\n this.updateDelimeter(this.delimiterChar);\n this.makeTextBoxEmpty();\n if (this.allowFiltering && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n this.refreshSelection();\n }\n this.focusAtLastListItem(value);\n };\n MultiSelect.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n this.renderPopup();\n this.onPopupShown();\n };\n MultiSelect.prototype.targetElement = function () {\n this.targetInputElement = this.inputElement;\n if (this.mode === 'CheckBox') {\n this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n return this.targetInputElement.value;\n };\n MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n if (!this.mainList && !this.mainData) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.mainData = list;\n this.mainListCollection = this.liCollections;\n }\n else if (!isNullOrUndefined(this.mainData) && this.mainData.length === 0) {\n this.mainData = list;\n }\n if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering) {\n this.checkForCustomValue(this.tempQuery, this.fields);\n return;\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n this.updateListARIA();\n this.unwireListEvents();\n this.wireListEvents();\n if (!isNullOrUndefined(this.setInitialValue)) {\n this.setInitialValue();\n }\n if (!isNullOrUndefined(this.selectAllAction)) {\n this.selectAllAction();\n }\n if (this.setDynValue) {\n this.initialValueUpdate();\n this.initialUpdate();\n this.refreshPlaceHolder();\n this.updateValueState(null, this.value, null);\n }\n this.renderPopup();\n this.refreshPopup();\n if (this.beforePopupOpen) {\n this.beforePopupOpen = false;\n this.onPopupShown();\n }\n };\n MultiSelect.prototype.refreshSelection = function () {\n var value;\n var element;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; this.value[index]; index++) {\n value = this.value[index];\n element = this.ulElement.querySelector('li[data-value=\"' + value + '\"]');\n if (element) {\n addClass([element], className);\n if (this.hideSelectedItem && element.previousSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group)\n && (!element.nextElementSibling ||\n element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n addClass([element.previousElementSibling], className);\n }\n if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {\n removeClass([element], dropDownBaseClasses.focus);\n var listEle = element.parentElement.querySelectorAll('.' +\n dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n if (listEle.length > 0) {\n addClass([listEle[0]], dropDownBaseClasses.focus);\n }\n else {\n this.l10nUpdate();\n addClass([this.list], dropDownBaseClasses.noData);\n }\n }\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {\n var ariaValue = element.firstElementChild.getAttribute('aria-checked');\n if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n li: element,\n e: null\n };\n this.notify('updatelist', args);\n }\n }\n }\n }\n }\n this.checkSelectAll();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.checkSelectAll = function () {\n var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;\n var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;\n if ((searchCount === searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });\n }\n if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n };\n MultiSelect.prototype.openClick = function (e) {\n if (!this.openOnClick) {\n if (this.targetElement() !== '') {\n this.showPopup();\n }\n else {\n this.hidePopup();\n }\n }\n };\n MultiSelect.prototype.KeyUp = function (e) {\n var _this = this;\n this.isValidKey = e.keyCode === 8 || this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n this.expandTextbox();\n switch (e.keyCode) {\n default:\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup();\n }\n this.openClick(e);\n if (this.checkTextLength() && !this.allowFiltering && (e.keyCode !== 8)) {\n this.focusAtFirstListItem();\n }\n else {\n var text = this.targetElement();\n this.keyCode = e.keyCode;\n if (this.allowFiltering) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.targetElement(),\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.dataUpdater(dataSource, query, fields);\n },\n event: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1);\n if (eventArgs_1.cancel) {\n return;\n }\n if (!this.isFiltered && !eventArgs_1.preventDefaultAction) {\n this.filterAction = true;\n this.dataUpdater(this.dataSource, null, this.fields);\n }\n }\n else if (this.allowCustomValue) {\n var query = new Query();\n query = (text !== '') ? query.where(this.fields.text, 'startswith', text, true, this.ignoreAccent) : query;\n this.dataUpdater(this.mainData, query, this.fields);\n break;\n }\n else {\n var liCollections = void 0;\n liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');\n var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.list.scrollTop =\n activeElement.item.getBoundingClientRect().height * activeElement.index;\n }\n else if (this.targetElement() !== '') {\n this.removeFocus();\n }\n else {\n this.focusAtFirstListItem();\n }\n }\n }\n }\n }\n };\n MultiSelect.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n if (this.filterAction) {\n if (this.targetElement() !== null) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', 'startswith', this.targetElement(), true, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', 'startswith', this.targetElement(), true, this.ignoreAccent);\n }\n }\n return filterQuery;\n }\n else {\n return query ? query : this.query ? this.query : new Query();\n }\n };\n MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {\n if (this.targetElement().trim() === '') {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.remoteCustomValue = false;\n this.onActionComplete(list, this.mainData);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n if (this.keyCode !== 8) {\n this.focusAtFirstListItem();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n }\n else {\n this.resetList(dataSource, fields, query);\n if (this.allowCustomValue) {\n if (!(dataSource instanceof DataManager)) {\n this.checkForCustomValue(query, fields);\n }\n else {\n this.remoteCustomValue = true;\n this.tempQuery = query;\n }\n }\n }\n this.refreshPopup();\n };\n MultiSelect.prototype.checkForCustomValue = function (query, fields) {\n var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);\n if (this.allowCustomValue && dataChecks) {\n var text = this.fields.text;\n var value = this.fields.value;\n var data = {};\n var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?\n this.mainData[0] : this.mainData;\n if (typeof (customData) !== 'string') {\n var dataSource = Object.keys(customData);\n for (var i = 0; i < dataSource.length; i++) {\n data[dataSource[i]] = '';\n }\n data[value] = data[text] = this.inputElement.value;\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, data);\n this.resetList(tempData, fields ? fields : this.fields, query);\n }\n else {\n var tempData = [this.inputElement.value];\n this.resetList(tempData, fields ? fields : this.fields);\n }\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.getNgDirective = function () {\n return 'EJS-MULTISELECT';\n };\n MultiSelect.prototype.wrapperClick = function (e) {\n this.setDynValue = false;\n if (this.readonly || !this.enabled) {\n return;\n }\n if (e.target === this.overAllClear) {\n e.preventDefault();\n return;\n }\n if (!this.inputFocus && this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n if (this.mode === 'CheckBox') {\n this.focusIn();\n }\n if (e.target && e.target.classList.toString().indexOf(CHIP_CLOSE) !== -1) {\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return;\n }\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup();\n }\n else {\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n }\n e.preventDefault();\n };\n MultiSelect.prototype.enable = function (state) {\n if (state) {\n this.overAllWrapper.classList.remove(DISABLED);\n this.inputElement.removeAttribute('disabled');\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n }\n else {\n this.overAllWrapper.classList.add(DISABLED);\n this.inputElement.setAttribute('disabled', 'true');\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n if (this.enabled !== state) {\n this.enabled = state;\n }\n this.hidePopup();\n };\n MultiSelect.prototype.onBlur = function (eve) {\n var target = !isNullOrUndefined(eve) && eve.relatedTarget;\n if (document.body.contains(this.popupObj.element) && this.popupObj.element.contains(target)) {\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n }\n if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve)) {\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n return;\n }\n if (this.scrollFocusStatus) {\n eve.preventDefault();\n this.inputElement.focus();\n this.scrollFocusStatus = false;\n return;\n }\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n if (this.mode !== 'Box' && this.mode !== 'CheckBox') {\n this.refreshListItems(null);\n this.updateDelimView();\n }\n this.updateValueState(eve, this.value, this.tempValues);\n this.dispatchEvent(this.hiddenElement, 'change');\n this.overAllClear.style.display = 'none';\n if (this.isPopupOpen()) {\n this.hidePopup();\n }\n this.makeTextBoxEmpty();\n this.trigger('blur');\n this.focused = true;\n if (Browser.isDevice && this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.removeChipFocus();\n }\n this.removeChipSelection();\n this.refreshInputHight();\n floatLabelBlur(this.overAllWrapper, this.componentWrapper, this.value, this.floatLabelType, this.placeholder);\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshInputHight = function () {\n if (!this.value || !this.value.length) {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n else {\n this.searchWrapper.classList.add(ZERO_SIZE);\n }\n };\n MultiSelect.prototype.validateValues = function (newValue, oldValue) {\n return JSON.stringify(newValue.slice().sort()) !== JSON.stringify(oldValue.slice().sort());\n };\n MultiSelect.prototype.updateValueState = function (event, newVal, oldVal) {\n var newValue = newVal ? newVal : [];\n var oldValue = oldVal ? oldVal : [];\n if (this.validateValues(newValue, oldValue)) {\n var eventArgs = {\n e: event,\n oldValue: oldVal,\n value: newVal,\n isInteracted: event ? true : false\n };\n this.trigger('change', eventArgs);\n }\n };\n MultiSelect.prototype.getPagingCount = function () {\n var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(height, 10));\n };\n MultiSelect.prototype.pageUpSelection = function (steps) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-reorder-hide)');\n var previousItem;\n if (this.mode === 'CheckBox') {\n previousItem = steps >= 0 ? collection[steps + 1] : collection[0];\n }\n else {\n previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n }\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n ;\n MultiSelect.prototype.pageDownSelection = function (steps) {\n var list = this.getItems();\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-reorder-hide)');\n var previousItem;\n if (this.mode === 'CheckBox') {\n previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];\n }\n else {\n previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n }\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n MultiSelect.prototype.focusIn = function () {\n if (this.enabled && !this.readonly) {\n this.inputFocus = true;\n if (!this.value) {\n this.tempValues = this.value;\n }\n else {\n this.tempValues = this.value.slice();\n }\n if (this.value && this.value.length) {\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n if (this.mode !== 'CheckBox') {\n this.viewWrapper.style.display = 'none';\n }\n }\n if (this.mode !== 'CheckBox') {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.focused) {\n this.trigger('focus');\n this.focused = false;\n }\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n floatLabelFocus(this.overAllWrapper, this.componentWrapper);\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return true;\n }\n else {\n return false;\n }\n };\n MultiSelect.prototype.showDelimWrapper = function () {\n if (this.mode === 'CheckBox') {\n this.viewWrapper.style.display = '';\n }\n else {\n this.delimiterWrapper.style.display = '';\n }\n this.componentWrapper.classList.add(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.hideDelimWrapper = function () {\n this.delimiterWrapper.style.display = 'none';\n this.componentWrapper.classList.remove(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.expandTextbox = function () {\n var size = 5;\n if (this.placeholder) {\n size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length;\n }\n if (this.inputElement.value.length > size) {\n this.inputElement.size = this.inputElement.value.length;\n }\n else {\n this.inputElement.size = size;\n }\n };\n MultiSelect.prototype.isPopupOpen = function () {\n return ((this.popupWrapper !== null) && (this.popupWrapper.parentElement !== null));\n };\n MultiSelect.prototype.refreshPopup = function () {\n if (this.popupObj && this.mobFilter) {\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n this.popupObj.refreshPosition(this.overAllWrapper);\n if (!Browser.isIE) {\n this.popupObj.show();\n }\n }\n };\n MultiSelect.prototype.checkTextLength = function () {\n return this.targetElement().length < 1;\n };\n MultiSelect.prototype.popupKeyActions = function (keyCode) {\n switch (keyCode) {\n case 38:\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n break;\n case 40:\n if (!this.isPopupOpen()) {\n this.showPopup();\n }\n break;\n }\n };\n MultiSelect.prototype.updateAriaAttribute = function () {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(focusedItem)) {\n this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);\n }\n };\n MultiSelect.prototype.onKeyDown = function (e) {\n this.keyDownStatus = true;\n if (e.keyCode > 111 && e.keyCode < 124) {\n return;\n }\n if (e.altKey) {\n this.popupKeyActions(e.keyCode);\n e.preventDefault();\n return;\n }\n else if (this.isPopupOpen()) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n var activeIndex = void 0;\n switch (e.keyCode) {\n case 36:\n case 35: break;\n case 33:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageUpSelection(activeIndex - this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 34:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageDownSelection(activeIndex + this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 38:\n e.preventDefault();\n this.moveByList(-1);\n this.updateAriaAttribute();\n break;\n case 40:\n e.preventDefault();\n this.moveByList(1);\n this.updateAriaAttribute();\n break;\n case 27:\n e.preventDefault();\n this.hidePopup();\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n case 13:\n e.preventDefault();\n if (this.mode !== 'CheckBox') {\n this.selectByKey(e);\n }\n return;\n case 32:\n if (this.mode === 'CheckBox') {\n e.preventDefault();\n this.selectByKey(e);\n }\n return;\n }\n }\n else {\n switch (e.keyCode) {\n case 13:\n case 9:\n case 16:\n case 17:\n case 20:\n return;\n case 40:\n if (this.openOnClick) {\n this.showPopup();\n }\n break;\n case 27:\n e.preventDefault();\n this.escapeAction();\n return;\n }\n }\n if (this.checkTextLength()) {\n if ((this.mode !== 'Delimiter' && this.mode !== 'CheckBox') && this.value && this.value.length) {\n switch (e.keyCode) {\n case 37://left arrow \n e.preventDefault();\n this.moveBy(-1);\n break;\n case 39://right arrow \n e.preventDefault();\n this.moveBy(1);\n break;\n case 8:\n this.removelastSelection(e);\n break;\n case 46://del\n this.removeSelectedChip(e);\n break;\n }\n }\n else if (e.keyCode === 8 && this.mode === 'Delimiter') {\n if (this.value && this.value.length) {\n e.preventDefault();\n var temp = this.value[this.value.length - 1];\n this.removeValue(temp, e);\n this.updateDelimeter(this.delimiterChar);\n this.focusAtLastListItem(temp);\n }\n }\n }\n this.expandTextbox();\n this.refreshPopup();\n };\n MultiSelect.prototype.selectByKey = function (e) {\n this.removeChipSelection();\n this.selectListByKey(e);\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n };\n MultiSelect.prototype.escapeAction = function () {\n var temp = this.tempValues ? this.tempValues.slice() : [];\n if (this.value && this.validateValues(this.value, temp)) {\n this.value = temp;\n this.initialValueUpdate();\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n this.refreshPlaceHolder();\n if (this.value.length) {\n this.showOverAllClear();\n }\n else {\n this.hideOverAllClear();\n }\n }\n this.makeTextBoxEmpty();\n };\n MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex) {\n var currentOffset = this.list.getBoundingClientRect().height;\n var nextBottom = selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop);\n boxRange = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.getBoundingClientRect().height : boxRange;\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset) {\n this.list.scrollTop = nextOffset;\n }\n else if (!(boxRange > 0 && this.list.getBoundingClientRect().height > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n };\n MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex) {\n var nextOffset = selectedLI.offsetTop - this.list.scrollTop;\n var nextBottom = selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.getBoundingClientRect().height : nextOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.getBoundingClientRect().height - this.list.scrollTop);\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.getBoundingClientRect().height > boxRange)) {\n this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.getBoundingClientRect().height : 0);\n }\n };\n MultiSelect.prototype.selectListByKey = function (e) {\n var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li !== null) {\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (this.isValidLI(li) && limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n this.makeTextBoxEmpty();\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(li.textContent);\n }\n this.refreshPopup();\n if (this.value && this.value.length) {\n this.removeListSelection();\n this.refreshSelection();\n }\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshListItems = function (data) {\n if ((this.allowFiltering || this.allowCustomValue) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n this.focusAtLastListItem(data);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n }\n };\n MultiSelect.prototype.removeSelectedChip = function (e) {\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n var temp;\n if (selectedElem !== null) {\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n temp = selectedElem.nextElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp);\n }\n this.removeValue(selectedElem.getAttribute('data-value'), e);\n this.makeTextBoxEmpty();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n };\n MultiSelect.prototype.moveByTop = function (state) {\n var elements = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var index;\n if (elements.length > 1) {\n this.removeFocus();\n index = state ? 0 : (elements.length - 1);\n this.addListFocus(elements[index]);\n this.scrollBottom(elements[index], index);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.moveByList = function (position) {\n if (this.list) {\n var elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var temp = -1;\n if (elements.length) {\n for (var index = 0; index < elements.length; index++) {\n if (elements[index] === selectedElem) {\n temp = index;\n break;\n }\n }\n if (position > 0) {\n if (temp < (elements.length - 1)) {\n this.removeFocus();\n this.addListFocus(elements[++temp]);\n this.scrollBottom(elements[temp], temp);\n }\n }\n else {\n if (temp > 0) {\n this.removeFocus();\n this.addListFocus(elements[--temp]);\n this.scrollTop(elements[temp], temp);\n }\n }\n }\n }\n };\n MultiSelect.prototype.moveBy = function (position) {\n var elements;\n var selectedElem;\n var temp;\n elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n if (selectedElem === null) {\n if (position < 0) {\n this.addChipSelection(elements[elements.length - 1]);\n }\n }\n else {\n if (position < 0) {\n temp = selectedElem.previousElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp);\n }\n }\n else {\n temp = selectedElem.nextElementSibling;\n this.removeChipSelection();\n if (temp !== null) {\n this.addChipSelection(temp);\n }\n }\n }\n };\n MultiSelect.prototype.chipClick = function (e) {\n if (this.enabled) {\n var elem = closest(e.target, '.' + CHIP);\n this.removeChipSelection();\n this.addChipSelection(elem);\n this.trigger('chipSelection', e);\n }\n };\n MultiSelect.prototype.removeChipSelection = function () {\n if (this.chipCollectionWrapper) {\n this.removeChipFocus();\n }\n };\n MultiSelect.prototype.addChipSelection = function (element) {\n addClass([element], CHIP_SELECTED);\n };\n MultiSelect.prototype.onChipRemove = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.enabled && !this.readonly) {\n var element = e.target.parentElement;\n var value = this.getFormattedValue(element.getAttribute('data-value'));\n if (this.isPopupOpen() && this.mode !== 'CheckBox') {\n this.hidePopup();\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n this.removeValue(value, e);\n this.updateDelimeter(this.delimiterChar);\n this.makeTextBoxEmpty();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.makeTextBoxEmpty = function () {\n this.inputElement.value = '';\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshPlaceHolder = function () {\n if (this.placeholder && this.floatLabelType === 'Never') {\n if (this.value && this.value.length) {\n this.inputElement.placeholder = '';\n }\n else {\n this.inputElement.placeholder = this.placeholder;\n }\n }\n else {\n this.setFloatLabelType();\n }\n this.expandTextbox();\n };\n MultiSelect.prototype.removeValue = function (value, eve) {\n var index = this.value.indexOf(this.getFormattedValue(value));\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (index !== -1) {\n var element = this.list.querySelector('li[data-value=\"' + value + '\"]');\n var eventArgs = {\n e: eve,\n item: element,\n itemData: this.getDataByValue(value),\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('removing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.value.splice(index, 1);\n this.setProperties({ value: [].concat([], this.value) }, true);\n if (element !== null) {\n element.setAttribute('aria-selected', 'false');\n removeClass([element], className);\n this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox', li: element,\n e: this, index: index\n });\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n if ((this.value.length !== this.mainData.length) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n }\n this.updateMainList(true, value);\n this.removeChip(value);\n this.updateChipStatus();\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit < this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n this.trigger('removed', eventArgs);\n }\n };\n MultiSelect.prototype.updateMainList = function (state, value) {\n if (this.allowFiltering) {\n var element2 = this.mainList.querySelector('li[data-value=\"' + value + '\"]');\n if (element2) {\n if (state) {\n element2.setAttribute('aria-selected', 'false');\n removeClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n else {\n element2.setAttribute('aria-selected', 'true');\n addClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'true');\n addClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n }\n }\n };\n MultiSelect.prototype.removeChip = function (value) {\n if (this.chipCollectionWrapper) {\n var element = this.chipCollectionWrapper.querySelector('span[data-value=\"' + value + '\"]');\n if (element) {\n remove(element);\n }\n }\n };\n MultiSelect.prototype.updateChipStatus = function () {\n if (this.value.length) {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n (this.chipCollectionWrapper.style.display = '');\n }\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n this.showOverAllClear();\n }\n else {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n if (!isNullOrUndefined(this.delimiterWrapper)) {\n (this.delimiterWrapper.style.display = 'none');\n }\n this.hideOverAllClear();\n }\n };\n MultiSelect.prototype.addValue = function (value, text, eve) {\n if (!this.value) {\n this.value = [];\n }\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n var element = this.list.querySelector('li[data-value=\"' + value + '\"]');\n this.removeFocus();\n if (element) {\n this.addListFocus(element);\n this.addListSelection(element);\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.addChip(text, value, eve);\n }\n this.updateChipStatus();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.checkMaxSelection = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit === this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.dispatchSelect = function (value, eve, element, isNotTrigger) {\n if (this.initStatus && !isNotTrigger) {\n var eventArgs = {\n e: eve,\n item: element,\n itemData: this.getDataByValue(value),\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs);\n if (eventArgs.cancel) {\n return true;\n }\n }\n return false;\n };\n MultiSelect.prototype.addChip = function (text, value, e) {\n if (this.chipCollectionWrapper) {\n var item = this.getChip(text, value, e);\n if (item.cancel) {\n return;\n }\n this.chipCollectionWrapper.appendChild(item.element);\n }\n };\n MultiSelect.prototype.removeChipFocus = function () {\n var elements;\n var closeElements;\n elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);\n removeClass(elements, CHIP_SELECTED);\n if (Browser.isDevice) {\n for (var index = 0; index < closeElements.length; index++) {\n closeElements[index].style.display = 'none';\n }\n }\n };\n MultiSelect.prototype.onMobileChipInteraction = function (e) {\n var chipElem = closest(e.target, '.' + CHIP);\n var chipClose = chipElem.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);\n if (this.enabled && !this.readonly) {\n if (!chipElem.classList.contains(CHIP_SELECTED)) {\n this.removeChipFocus();\n chipClose.style.display = '';\n chipElem.classList.add(CHIP_SELECTED);\n }\n this.refreshPopup();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.getChip = function (data, value, e) {\n var itemData = { text: value, value: value };\n var chip = createElement('span', {\n className: CHIP,\n attrs: { 'data-value': value, 'title': data }\n });\n var chipContent = createElement('span', { className: CHIP_CONTENT });\n var chipClose = createElement('span', { className: CHIP_CLOSE });\n if (this.mainData) {\n itemData = this.getDataByValue(value);\n }\n if (this.valueTemplate && itemData) {\n var compiledString = compile(this.valueTemplate);\n for (var _i = 0, _a = compiledString(itemData); _i < _a.length; _i++) {\n var item = _a[_i];\n chipContent.appendChild(item);\n }\n }\n else {\n chipContent.innerHTML = data;\n }\n chip.appendChild(chipContent);\n var eventArgs = {\n isInteracted: e ? true : false,\n itemData: itemData,\n e: e,\n setClass: function (classes) {\n addClass([chip], classes);\n },\n cancel: false\n };\n this.trigger('tagging', eventArgs);\n if (eventArgs.cancel) {\n return { cancel: true, element: chip };\n }\n if (Browser.isDevice) {\n chip.classList.add(MOBILE_CHIP);\n append([chipClose], chip);\n chipClose.style.display = 'none';\n EventHandler.add(chip, 'click', this.onMobileChipInteraction, this);\n }\n else {\n EventHandler.add(chip, 'mousedown', this.chipClick, this);\n if (this.showClearButton) {\n chip.appendChild(chipClose);\n }\n }\n EventHandler.add(chipClose, 'mousedown', this.onChipRemove, this);\n return { cancel: false, element: chip };\n };\n MultiSelect.prototype.calcPopupWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = (this.componentWrapper.getBoundingClientRect().width) * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n MultiSelect.prototype.mouseIn = function () {\n if (this.enabled && !this.readonly) {\n this.showOverAllClear();\n }\n };\n MultiSelect.prototype.mouseOut = function () {\n if (!this.inputFocus) {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldProperty = fields.properties;\n this.listCurrentOptions = (fields.text !== null || fields.value !== null) ? {\n fields: fieldProperty, showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n extend(this.listCurrentOptions, this.listCurrentOptions, fields, true);\n if (this.mode === 'CheckBox') {\n this.notify('listoption', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', dataSource: dataSource, fieldProperty: fieldProperty });\n }\n return this.listCurrentOptions;\n };\n MultiSelect.prototype.renderPopup = function () {\n var _this = this;\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n if (!this.popupObj) {\n document.body.appendChild(this.popupWrapper);\n var overAllHeight = parseInt(this.popupHeight, 10);\n this.popupWrapper.style.visibility = 'hidden';\n if (this.headerTemplate) {\n var compiledString = void 0;\n this.header = document.createElement('div');\n addClass([this.header], HEADER);\n compiledString = compile(this.headerTemplate);\n var elements = compiledString({});\n for (var temp = 0; temp < elements.length; temp++) {\n this.header.appendChild(elements[temp]);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n prepend([this.header], this.popupWrapper);\n }\n else {\n append([this.header], this.popupWrapper);\n }\n EventHandler.add(this.header, 'mousedown', this.onListMouseDown, this);\n overAllHeight -= this.header.getBoundingClientRect().height;\n }\n append([this.list], this.popupWrapper);\n if (this.footerTemplate) {\n var compiledString = void 0;\n this.footer = document.createElement('div');\n addClass([this.footer], FOOTER);\n compiledString = compile(this.footerTemplate);\n var elements = compiledString({});\n for (var temp = 0; temp < elements.length; temp++) {\n this.footer.appendChild(elements[temp]);\n }\n append([this.footer], this.popupWrapper);\n EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);\n overAllHeight -= this.footer.getBoundingClientRect().height;\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight -= this.selectAllHeight;\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n }\n if (this.mode === 'CheckBox') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n popupElement: this.popupWrapper\n };\n this.notify('searchBox', args);\n overAllHeight -= this.searchBoxHeight;\n addClass([this.popupWrapper], 'e-checkbox');\n }\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },\n relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n close: function () {\n if (_this.popupObj.element.parentElement) {\n detach(_this.popupObj.element);\n }\n },\n open: function () {\n _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus' });\n }\n });\n this.popupObj.close();\n this.popupWrapper.style.visibility = '';\n if (this.mode === 'CheckBox' && Browser.isDevice) {\n this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n }\n };\n MultiSelect.prototype.ClearAll = function (e) {\n if (this.enabled && !this.readonly) {\n var temp = void 0;\n var tempValues = this.value ? this.value.slice() : [];\n for (temp = this.value[0]; this.value.length !== 0; temp = this.value[0]) {\n this.removeValue(temp, e);\n }\n this.updateDelimeter(this.delimiterChar);\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.makeTextBoxEmpty();\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n this.removeFocus();\n if (!this.inputFocus) {\n this.updateValueState(e, this.value, tempValues);\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n }\n if (this.mode === 'CheckBox') {\n this.refreshPlaceHolder();\n this.refreshInputHight();\n }\n e.preventDefault();\n }\n };\n MultiSelect.prototype.windowResize = function () {\n this.refreshPopup();\n if (!this.inputFocus && this.viewWrapper && this.viewWrapper.parentElement) {\n this.updateDelimView();\n }\n };\n MultiSelect.prototype.wireEvent = function () {\n EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(this.inputElement, 'focus', this.focusIn, this);\n EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);\n EventHandler.add(this.inputElement, 'keyup', this.KeyUp, this);\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'blur', this.onBlur, this);\n EventHandler.add(this.componentWrapper, 'mousemove', this.mouseIn, this);\n EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);\n EventHandler.add(this.overAllClear, 'mouseup', this.ClearAll, this);\n };\n MultiSelect.prototype.onInput = function () {\n if (this.keyDownStatus) {\n this.isValidKey = true;\n }\n else {\n this.isValidKey = false;\n }\n this.keyDownStatus = false;\n };\n MultiSelect.prototype.preRender = function () {\n this.initializeData();\n _super.prototype.preRender.call(this);\n };\n MultiSelect.prototype.initializeData = function () {\n this.mainListCollection = [];\n this.beforePopupOpen = false;\n this.filterAction = false;\n this.isFirstClick = false;\n };\n MultiSelect.prototype.updateData = function (delimiterChar) {\n var data = '';\n var delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';\n var text = [];\n var temp;\n var tempData = this.listData;\n this.listData = this.mainData;\n this.hiddenElement.innerHTML = '';\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; this.value[index]; index++) {\n if (this.listData) {\n temp = this.getTextByValue(this.value[index]);\n }\n else {\n temp = this.value[index];\n }\n data += temp + delimiterChar + ' ';\n text.push(temp);\n this.hiddenElement.innerHTML += '
' + index + ' ';\n }\n }\n this.text = text.toString();\n if (delim) {\n this.delimiterWrapper.innerHTML = data;\n }\n this.listData = tempData;\n };\n MultiSelect.prototype.initialValueUpdate = function () {\n if (this.list) {\n var text = void 0;\n var textField = void 0;\n var valueField = void 0;\n var element = void 0;\n var value = void 0;\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.innerHTML = '';\n }\n this.removeListSelection();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; this.value[index]; index++) {\n value = this.value[index];\n element = this.hideSelectedItem ? this.ulElement.querySelector('li[data-value=\"' + value + '\"]')\n : this.list.querySelector('li[data-value=\"' + value + '\"]');\n text = this.getTextByValue(value);\n if ((element && (element.getAttribute('aria-selected') !== 'true')) ||\n (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&\n (this.mode === 'Box' || this.mode === 'Default'))) {\n text = this.getTextByValue(value);\n this.addChip(text, value);\n this.addListSelection(element);\n }\n else if (value && this.allowCustomValue) {\n var indexItem = this.listData.length;\n var newValue = {};\n setValue(this.fields.text, value, newValue);\n setValue(this.fields.value, value, newValue);\n this.addItem(newValue, indexItem);\n text = this.getTextByValue(value);\n this.addChip(text, value);\n this.addListSelection(element);\n }\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.updateValueState(null, this.value, this.tempValues);\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll && isNullOrUndefined(this.value)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (!this.inputFocus) {\n if (this.mode === 'Box') {\n this.chipCollectionWrapper.style.display = '';\n }\n else if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n }\n }\n };\n MultiSelect.prototype.isValidLI = function (li) {\n return (li && !li.classList.contains(dropDownBaseClasses.disabled) && !li.classList.contains(dropDownBaseClasses.group) &&\n li.classList.contains(dropDownBaseClasses.li));\n };\n ;\n MultiSelect.prototype.updateListSelection = function (li, e) {\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n var text = this.getTextByValue(value);\n this.removeHover();\n if (!this.value || this.value.indexOf(value) === -1) {\n var argsCancel = this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'));\n if (argsCancel) {\n return;\n }\n if ((this.allowCustomValue || this.allowFiltering) && !this.mainList.querySelector('li[data-value=\"' + value + '\"]')) {\n var temp = li.cloneNode(true);\n var data = this.getDataByValue(value);\n append([temp], this.mainList);\n this.mainData.push(this.getDataByValue(value));\n var eventArgs = {\n newData: data,\n cancel: false\n };\n this.trigger('customValueSelection', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n this.remoteCustomValue = false;\n this.addValue(value, text, e);\n }\n else {\n this.removeValue(value, e);\n }\n };\n MultiSelect.prototype.removeListSelection = function () {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n var selectedItems = this.list.querySelectorAll('.' + className);\n var temp = selectedItems.length;\n if (selectedItems && selectedItems.length) {\n removeClass(selectedItems, className);\n while (temp > 0) {\n selectedItems[temp - 1].setAttribute('aria-selected', 'false');\n temp--;\n }\n }\n if (!isNullOrUndefined(this.mainList)) {\n var selectItems = this.mainList.querySelectorAll('.' + className);\n var temp1 = selectItems.length;\n if (selectItems && selectItems.length) {\n removeClass(selectItems, className);\n while (temp1 > 0) {\n selectItems[temp1 - 1].setAttribute('aria-selected', 'false');\n if (this.mode === 'CheckBox') {\n selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n temp1--;\n }\n }\n }\n };\n ;\n MultiSelect.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n ;\n MultiSelect.prototype.removeFocus = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.focus);\n var mainlist = this.mainList.querySelectorAll('.' + dropDownBaseClasses.focus);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.focus);\n removeClass(mainlist, dropDownBaseClasses.focus);\n }\n };\n ;\n MultiSelect.prototype.addListHover = function (li) {\n if (this.enabled && this.isValidLI(li)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n ;\n MultiSelect.prototype.addListFocus = function (element) {\n if (this.enabled && this.isValidLI(element)) {\n this.removeFocus();\n addClass([element], dropDownBaseClasses.focus);\n }\n };\n MultiSelect.prototype.addListSelection = function (element) {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (this.isValidLI(element) && !element.classList.contains(dropDownBaseClasses.hover)) {\n addClass([element], className);\n this.updateMainList(false, element.getAttribute('data-value'));\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox') {\n var ariaCheck = element.firstElementChild.getAttribute('aria-checked');\n if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n }\n }\n this.notify('activeList', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n if (this.chipCollectionWrapper !== null) {\n this.removeChipSelection();\n }\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n }\n };\n MultiSelect.prototype.updateDelimeter = function (delimChar) {\n this.updateData(delimChar);\n };\n MultiSelect.prototype.onMouseClick = function (e) {\n this.scrollFocusStatus = false;\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (this.isValidLI(li)) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {\n if (this.mode !== 'CheckBox') {\n this.focusAtLastListItem(li.getAttribute('data-value'));\n }\n this.refreshSelection();\n }\n else {\n this.makeTextBoxEmpty();\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n this.checkSelectAll();\n this.refreshPopup();\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup();\n }\n else {\n e.preventDefault();\n }\n this.makeTextBoxEmpty();\n }\n else {\n e.preventDefault();\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.addListHover(currentLi);\n };\n MultiSelect.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n MultiSelect.prototype.onListMouseDown = function (e) {\n e.preventDefault();\n this.scrollFocusStatus = true;\n };\n MultiSelect.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);\n EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n ;\n MultiSelect.prototype.unwireListEvents = function () {\n if (this.list) {\n EventHandler.remove(this.list, 'mousedown', this.onListMouseDown);\n EventHandler.remove(this.list, 'mouseup', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n }\n };\n ;\n MultiSelect.prototype.hideOverAllClear = function () {\n if (!this.value || !this.value.length) {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.showOverAllClear = function () {\n if (this.value && this.value.length) {\n this.overAllClear.style.display = '';\n }\n };\n MultiSelect.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n if (this.overAllClear.style.display !== 'none') {\n this.spinnerElement = this.overAllClear;\n }\n else {\n this.spinnerElement = createElement('span', { className: CLOSEICON_CLASS + ' ' + SPINNER_CLASS });\n this.componentWrapper.appendChild(this.spinnerElement);\n }\n addClass([this.spinnerElement], DISABLE_ICON);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n });\n showSpinner(this.spinnerElement);\n }\n };\n MultiSelect.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], DISABLE_ICON);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n MultiSelect.prototype.updateDelimView = function () {\n if (this.delimiterWrapper) {\n this.hideDelimWrapper();\n }\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n this.viewWrapper.style.display = '';\n if (this.value && this.value.length) {\n var data = '';\n var temp = void 0;\n var tempData = void 0;\n var tempIndex = 1;\n var wrapperleng = void 0;\n var remaining = void 0;\n this.viewWrapper.innerHTML = '';\n var l10nLocale = {\n noRecordsTemplate: 'No Records Found',\n actionFailureTemplate: 'The Request Failed',\n overflowCountTemplate: '+${count} more..'\n };\n var l10n = new L10n('dropdowns', l10nLocale, this.locale);\n var remainContent = l10n.getConstant('overflowCountTemplate');\n var raminElement = createElement('span', {\n className: REMAIN_WRAPPER\n });\n var compiledString = compile(remainContent);\n raminElement.appendChild(compiledString({ 'count': this.value.length })[0]);\n this.viewWrapper.appendChild(raminElement);\n var remainSize = raminElement.getBoundingClientRect().width;\n remove(raminElement);\n this.viewWrapper.innerHTML = '';\n var inputleng = this.searchWrapper.getBoundingClientRect().width;\n var overAllContainer = parseInt(window.getComputedStyle(this.componentWrapper).width, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n var remainValue = void 0;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; this.value[index]; index++) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n if (this.mainData && this.mainData.length) {\n if (this.mode === 'CheckBox') {\n remainValue = 110;\n var newTemp = this.listData;\n this.listData = this.mainData;\n temp = this.getTextByValue(this.value[index]);\n this.listData = newTemp;\n }\n else {\n remainValue = 0;\n temp = this.getTextByValue(this.value[index]);\n }\n }\n else {\n temp = this.value[index];\n }\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.viewWrapper.innerHTML = data;\n wrapperleng = this.viewWrapper.getBoundingClientRect().width;\n if ((wrapperleng) > overAllContainer - remainValue) {\n if (tempData !== undefined) {\n temp = tempData;\n index = tempIndex + 1;\n }\n this.viewWrapper.innerHTML = temp;\n remaining = this.value.length - index;\n break;\n }\n else if ((wrapperleng + remainSize) <= overAllContainer) {\n tempData = data;\n tempIndex = index;\n }\n else if (index === 0) {\n tempData = '';\n tempIndex = -1;\n }\n }\n }\n if (remaining > 0) {\n raminElement.innerHTML = '';\n raminElement.appendChild(compiledString({ 'count': remaining })[0]);\n this.viewWrapper.appendChild(raminElement);\n }\n }\n else {\n this.viewWrapper.innerHTML = '';\n this.viewWrapper.style.display = 'none';\n }\n };\n MultiSelect.prototype.unWireEvent = function () {\n EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);\n EventHandler.remove(window, 'resize', this.windowResize);\n EventHandler.remove(this.inputElement, 'focus', this.focusIn);\n EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.KeyUp);\n EventHandler.remove(this.inputElement, 'blur', this.onBlur);\n EventHandler.remove(this.componentWrapper, 'mousemove', this.mouseIn);\n EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);\n EventHandler.remove(this.overAllClear, 'mousedown', this.ClearAll);\n };\n MultiSelect.prototype.selectAllItem = function (state) {\n var li;\n li = this.list.querySelectorAll(state ?\n 'li[aria-selected=\"false\"]:not(.e-reorder-hide)' :\n 'li[aria-selected=\"true\"]:not(.e-reorder-hide)');\n var length = li.length;\n if (li && li.length) {\n while (length > 0) {\n this.updateListSelection(li[length - 1], null);\n length--;\n }\n }\n if (this.mode !== 'Box' && !this.isPopupOpen()) {\n this.updateDelimView();\n }\n else {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.refreshInputHight();\n this.updateDelimeter(this.delimiterChar);\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n MultiSelect.prototype.updateDataSource = function (prop) {\n this.resetList(this.dataSource);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.onLoadSelect = function () {\n this.setDynValue = true;\n this.renderPopup();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n MultiSelect.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ;\n /**\n * Dynamically change the value of properties.\n * @private\n */\n MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {\n this.mainList = null;\n this.mainData = null;\n }\n this.setUpdateInitial(['query', 'dataSource'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'dataSource':\n break;\n case 'htmlAttributes':\n this.updateHTMLAttribute();\n break;\n case 'showClearButton':\n this.updateClearButton(newProp.showClearButton);\n break;\n case 'value':\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.onLoadSelect();\n }\n }\n else if (!this.inputFocus) {\n this.initialValueUpdate();\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.refreshInputHight();\n this.refreshPlaceHolder();\n this.updateValueState(null, this.value, oldProp.value);\n }\n break;\n case 'width':\n setStyleAttribute(this.overAllWrapper, { 'width': formatUnit(newProp.width) });\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n break;\n case 'placeholder':\n this.refreshPlaceHolder();\n break;\n case 'delimiterChar':\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateData(newProp.delimiterChar);\n break;\n case 'cssClass':\n this.popupWrapper.classList.remove(oldProp.cssClass);\n this.overAllWrapper.classList.remove(oldProp.cssClass);\n this.updateCssClass();\n break;\n case 'enableRtl':\n this.enableRTL(newProp.enableRtl);\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n case 'readonly':\n this.updateReadonly(newProp.readonly);\n this.hidePopup();\n break;\n case 'enabled':\n this.hidePopup();\n this.enable(newProp.enabled);\n break;\n case 'showSelectAll':\n this.popupObj.destroy();\n this.popupObj = null;\n this.renderPopup();\n break;\n case 'showDropDownIcon':\n this.dropDownIcon();\n break;\n case 'floatLabelType':\n this.setFloatLabelType();\n break;\n case 'enableSelectionOrder':\n break;\n default:\n var msProps = void 0;\n msProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, msProps.newProperty, msProps.oldProperty);\n break;\n }\n }\n };\n /**\n * Hides the popup, if the popup in a open state.\n * @returns void\n */\n MultiSelect.prototype.hidePopup = function () {\n var delay = 100;\n if (this.isPopupOpen()) {\n var eventArgs = { popup: this.popupObj, cancel: false };\n this.trigger('close', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n this.beforePopupOpen = false;\n this.overAllWrapper.classList.remove(iconAnimation);\n this.popupObj.hide(new Animation(animModel));\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'clear' });\n this.popupObj.hide();\n removeClass([document.body, this.popupObj.element], 'e-popup-full-page');\n }\n };\n /**\n * Shows the popup, if the popup in a closed state.\n * @returns void\n */\n MultiSelect.prototype.showPopup = function () {\n if (!this.ulElement) {\n this.beforePopupOpen = true;\n _super.prototype.render.call(this);\n return;\n }\n var mainLiLength = this.ulElement.querySelectorAll('li.' + 'e-list-item').length;\n var liLength = this.ulElement.querySelectorAll('li.' + HIDE_LIST).length;\n if (mainLiLength > 0 && (mainLiLength === liLength)) {\n this.beforePopupOpen = false;\n return;\n }\n this.onPopupShown();\n };\n /**\n * Based on the state parameter, entire list item will be selected/deselected.\n * parameter\n * `true` - Selects entire list items.\n * `false` - Un Selects entire list items.\n * @returns void\n */\n MultiSelect.prototype.selectAll = function (state) {\n var _this = this;\n if (isNullOrUndefined(this.list)) {\n this.selectAllAction = function () {\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n _this.notify('checkSelectAll', args);\n }\n _this.selectAllItem(state);\n _this.selectAllAction = null;\n };\n _super.prototype.render.call(this);\n }\n else {\n this.selectAllAction = null;\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n this.notify('checkSelectAll', args);\n }\n this.selectAllItem(state);\n }\n };\n MultiSelect.prototype.getModuleName = function () {\n return 'multiselect';\n };\n ;\n /**\n * To Initialize the control rendering\n * @private\n */\n MultiSelect.prototype.render = function () {\n var _this = this;\n this.initStatus = false;\n this.setDynValue = false;\n this.searchWrapper = createElement('span', { className: SEARCHBOX_WRAPPER });\n this.viewWrapper = createElement('span', { className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;' });\n var iconClass;\n this.overAllClear = createElement('span', {\n className: CLOSEICON_CLASS, styles: 'display:none;'\n });\n this.componentWrapper = createElement('div', { className: ELEMENT_WRAPPER });\n this.overAllWrapper = createElement('div', { className: OVER_ALL_WRAPPER });\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], 'e-checkbox');\n }\n if (Browser.isDevice) {\n this.componentWrapper.classList.add(ELEMENT_MOBILE_WRAPPER);\n }\n this.overAllWrapper.style.width = formatUnit(this.width);\n this.overAllWrapper.appendChild(this.componentWrapper);\n this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.delimiterWrapper = createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });\n this.componentWrapper.appendChild(this.delimiterWrapper);\n }\n else {\n this.chipCollectionWrapper = createElement('span', {\n className: CHIP_WRAPPER,\n styles: 'display:none'\n });\n this.componentWrapper.appendChild(this.chipCollectionWrapper);\n }\n if (this.mode !== 'Box') {\n this.componentWrapper.appendChild(this.viewWrapper);\n }\n this.componentWrapper.appendChild(this.searchWrapper);\n if (this.showClearButton && !Browser.isDevice) {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n else {\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n this.dropDownIcon();\n this.inputElement = createElement('input', {\n className: INPUT_ELEMENT,\n attrs: {\n spellcheck: 'false',\n type: 'text',\n autocomplete: 'off',\n tabindex: '0'\n }\n });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.overAllWrapper);\n this.searchWrapper.appendChild(this.inputElement);\n }\n else {\n this.element.parentElement.insertBefore(this.overAllWrapper, this.element);\n this.searchWrapper.appendChild(this.inputElement);\n this.searchWrapper.appendChild(this.element);\n this.element.removeAttribute('tabindex');\n }\n var name = this.element.getAttribute('name') ? this.element.getAttribute('name') : this.element.getAttribute('id');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n else if (this.floatLabelType === 'Never') {\n this.refreshPlaceHolder();\n }\n this.element.style.opacity = '';\n this.hiddenElement = createElement('select', {\n attrs: { 'name': name, 'aria-hidden': 'true', 'class': HIDDEN_ELEMENT, 'tabindex': '-1', 'multiple': 'true' }\n });\n this.element.removeAttribute('name');\n this.componentWrapper.appendChild(this.hiddenElement);\n if (this.mode !== 'CheckBox') {\n this.hideOverAllClear();\n }\n this.wireEvent();\n this.enable(this.enabled);\n this.enableRTL(this.enableRtl);\n if (!(this.dataSource instanceof DataManager)) {\n this.renderPopup();\n }\n if (this.value && this.value.length) {\n if (!(this.dataSource instanceof DataManager)) {\n this.initialValueUpdate();\n this.initialUpdate();\n }\n else {\n this.setInitialValue = function () {\n _this.initialValueUpdate();\n _this.initialUpdate();\n _this.setInitialValue = null;\n };\n _super.prototype.render.call(this);\n }\n }\n else {\n this.initialUpdate();\n }\n this.initStatus = true;\n };\n ;\n MultiSelect.prototype.setFloatLabelType = function () {\n removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n };\n MultiSelect.prototype.dropDownIcon = function () {\n if (this.mode === 'CheckBox' && this.showDropDownIcon) {\n this.dropIcon = createElement('span', { className: dropdownIcon });\n this.componentWrapper.appendChild(this.dropIcon);\n addClass([this.componentWrapper], ['e-down-icon']);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.dropIcon.parentElement.removeChild(this.dropIcon);\n removeClass([this.componentWrapper], ['e-down-icon']);\n }\n }\n };\n MultiSelect.prototype.initialUpdate = function () {\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateCssClass();\n this.updateHTMLAttribute();\n this.updateReadonly(this.readonly);\n this.refreshInputHight();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}\n */\n MultiSelect.prototype.destroy = function () {\n if (this.popupObj) {\n this.popupObj.hide();\n }\n this.notify(destroy, {});\n this.unwireListEvents();\n this.unWireEvent();\n this.list = null;\n this.popupObj = null;\n this.mainList = null;\n this.mainData = null;\n _super.prototype.destroy.call(this);\n var temp = ['readonly', 'aria-disabled', 'aria-placeholder', 'placeholder'];\n var length = temp.length;\n while (length > 0) {\n this.inputElement.removeAttribute(temp[length - 1]);\n length--;\n }\n this.element.style.display = 'block';\n if (this.overAllWrapper.parentElement) {\n if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {\n remove(this.overAllWrapper);\n }\n else {\n this.overAllWrapper.parentElement.insertBefore(this.element, this.overAllWrapper);\n remove(this.overAllWrapper);\n }\n }\n };\n ;\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], MultiSelect.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], MultiSelect.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"allowCustomValue\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(1000)\n ], MultiSelect.prototype, \"maximumSelectionLength\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"value\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"hideSelectedItem\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"closePopupOnSelect\", void 0);\n __decorate([\n Property('Default')\n ], MultiSelect.prototype, \"mode\", void 0);\n __decorate([\n Property(',')\n ], MultiSelect.prototype, \"delimiterChar\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showDropDownIcon\", void 0);\n __decorate([\n Property('Never')\n ], MultiSelect.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showSelectAll\", void 0);\n __decorate([\n Property('Select All')\n ], MultiSelect.prototype, \"selectAllText\", void 0);\n __decorate([\n Property('Unselect All')\n ], MultiSelect.prototype, \"unSelectAllText\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"enableSelectionOrder\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"openOnClick\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"chipSelection\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"tagging\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"customValueSelection\", void 0);\n MultiSelect = __decorate([\n NotifyPropertyChanges\n ], MultiSelect);\n return MultiSelect;\n}(DropDownBase));\nexport { MultiSelect };\n","import { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { EventHandler, select, removeClass, addClass, detach, compile, L10n } from '@syncfusion/ej2-base';\nimport { Browser, attributes, isNullOrUndefined, append, closest, createElement, prepend } from '@syncfusion/ej2-base';\nimport { dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nvar ICON = 'e-icons';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECK = 'e-check';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar INDETERMINATE = 'e-stop';\nvar checkAllParent = 'e-selectall-parent';\nvar searchBackIcon = 'e-input-group-icon e-back-icon e-icons';\nvar filterBarClearIcon = 'e-input-group-icon e-clear-icon e-icons';\nvar filterInput = 'e-input-filter';\nvar filterParent = 'e-filter-parent';\nvar mobileFilter = 'e-ddl-device-filter';\nvar clearIcon = 'e-clear-icon';\nvar popupFullScreen = 'e-popup-full-page';\nvar device = 'e-ddl-device';\nvar FOCUS = 'e-input-focus';\n/**\n * The Multiselect enable CheckBoxSelection call this inject module.\n */\nvar CheckBoxSelection = /** @class */ (function () {\n function CheckBoxSelection(parent) {\n this.activeLi = [];\n this.activeEle = [];\n this.parent = parent;\n this.addEventListener();\n }\n CheckBoxSelection.prototype.getModuleName = function () {\n return 'CheckBoxSelection';\n };\n CheckBoxSelection.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('updatelist', this.listSelection, this);\n this.parent.on('listoption', this.listOption, this);\n this.parent.on('selectAll', this.setSelectAll, this);\n this.parent.on('checkSelectAll', this.checkSelectAll, this);\n this.parent.on('searchBox', this.setSearchBox, this);\n this.parent.on('blur', this.onBlur, this);\n this.parent.on('targetElement', this.targetElement, this);\n this.parent.on('deviceSearchBox', this.setDeviceSearchBox, this);\n this.parent.on('inputFocus', this.getFocus, this);\n this.parent.on('reOrder', this.setReorder, this);\n this.parent.on('activeList', this.getActiveList, this);\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n };\n CheckBoxSelection.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('updatelist', this.listSelection);\n this.parent.off('listoption', this.listOption);\n this.parent.off('selectAll', this.setSelectAll);\n this.parent.off('checkSelectAll', this.checkSelectAll);\n this.parent.off('searchBox', this.setSearchBox);\n this.parent.off('blur', this.onBlur);\n this.parent.off('targetElement', this.targetElement);\n this.parent.off('deviceSearchBox', this.setDeviceSearchBox);\n this.parent.off('inputFocus', this.getFocus);\n this.parent.off('reOrder', this.setReorder);\n this.parent.off('activeList', this.getActiveList);\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n };\n CheckBoxSelection.prototype.listOption = function (args) {\n var _this = this;\n if (isNullOrUndefined(this.parent.listCurrentOptions.itemCreated)) {\n this.parent.listCurrentOptions.itemCreated = function (e) {\n _this.checboxCreate(e);\n };\n }\n else {\n var itemCreated_1 = this.parent.listCurrentOptions.itemCreated;\n this.parent.listCurrentOptions.itemCreated = function (e) {\n _this.checboxCreate(e);\n itemCreated_1.apply(_this, [e]);\n };\n }\n };\n ;\n CheckBoxSelection.prototype.checboxCreate = function (e) {\n var item;\n if (!isNullOrUndefined(e.item)) {\n item = e.item;\n }\n else {\n item = e;\n }\n if (item.className !== 'e-list-group-item ' && item.className !== 'e-list-group-item') {\n var checkboxEle = createCheckBox(true);\n var icon = select('div.' + ICON, item);\n var id = item.getAttribute('data-uid');\n item.insertBefore(checkboxEle, item.childNodes[isNullOrUndefined(icon) ? 0 : 1]);\n select('.' + CHECKBOXFRAME, checkboxEle);\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n return item;\n }\n else {\n return item;\n }\n };\n CheckBoxSelection.prototype.setSelectAll = function () {\n if (this.parent.showSelectAll) {\n if (isNullOrUndefined(this.checkAllParent)) {\n this.checkAllParent = createElement('div', {\n className: checkAllParent\n });\n this.selectAllSpan = createElement('span', {\n className: 'e-all-text'\n });\n this.selectAllSpan.textContent = '';\n this.checkAllParent.appendChild(this.selectAllSpan);\n this.setLocale();\n this.checboxCreate(this.checkAllParent);\n if (this.parent.headerTemplate) {\n if (!isNullOrUndefined(this.filterParent)) {\n append([this.checkAllParent], this.filterParent);\n }\n else {\n append([this.checkAllParent], this.parent.popupWrapper);\n }\n }\n if (!this.parent.headerTemplate) {\n if (!isNullOrUndefined(this.filterParent)) {\n append([this.checkAllParent], this.filterParent);\n }\n else {\n prepend([this.checkAllParent], this.parent.popupWrapper);\n }\n }\n EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);\n }\n if (this.parent.list.classList.contains('e-nodata')) {\n this.checkAllParent.style.display = 'none';\n }\n else {\n this.checkAllParent.style.display = 'block';\n }\n this.parent.selectAllHeight = this.checkAllParent.getBoundingClientRect().height;\n }\n else if (!isNullOrUndefined(this.checkAllParent)) {\n this.checkAllParent.parentElement.removeChild(this.checkAllParent);\n this.checkAllParent = null;\n }\n };\n CheckBoxSelection.prototype.destroy = function () {\n this.removeEventListener();\n };\n CheckBoxSelection.prototype.listSelection = function (args) {\n var target;\n if (!isNullOrUndefined(args.e)) {\n target = !isNullOrUndefined(args.e.target) ?\n args.e.target.classList.contains('e-frame') ?\n args.e.target : args.li.querySelector('.e-checkbox-wrapper').childNodes[1]\n : args.li.querySelector('.e-checkbox-wrapper').childNodes[1];\n }\n else {\n target = args.li.lastElementChild.childNodes[1];\n }\n if (this.parent.itemTemplate) {\n target = args.li.firstElementChild.childNodes[1];\n }\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNullOrUndefined(this.checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);\n var selectAll = false;\n this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK), args.li, args.e, selectAll);\n }\n };\n CheckBoxSelection.prototype.validateCheckNode = function (checkWrap, isCheck, li, e, selectAll) {\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true, selectAll);\n };\n CheckBoxSelection.prototype.clickHandler = function (e) {\n var target;\n if (e.currentTarget.classList.contains(this.checkAllParent.className)) {\n target = e.currentTarget.firstElementChild.lastElementChild;\n }\n else {\n target = e.currentTarget;\n }\n this.checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n var selectAll = true;\n if (!isNullOrUndefined(this.checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, this.checkWrapper);\n this.validateCheckNode(this.checkWrapper, checkElement.classList.contains(CHECK), null, e, selectAll);\n }\n e.preventDefault();\n };\n CheckBoxSelection.prototype.changeState = function (wrapper, state, e, isPrevent, selectAll) {\n var ariaState;\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n ariaState = 'true';\n if (selectAll) {\n this.parent.selectAll(true);\n this.setLocale(true);\n }\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n ariaState = 'false';\n if (selectAll) {\n this.parent.selectAll(false);\n this.setLocale();\n }\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNullOrUndefined(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n };\n CheckBoxSelection.prototype.setSearchBox = function (args) {\n if (isNullOrUndefined(this.filterParent)) {\n this.filterParent = createElement('span', {\n className: filterParent\n });\n this.filterInput = createElement('input', {\n attrs: { type: 'text' },\n className: filterInput\n });\n this.parent.element.parentNode.insertBefore(this.filterInput, this.parent.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n this.parent.mobFilter = false;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ? [searchBackIcon, filterBarClearIcon] : [filterBarClearIcon],\n properties: { placeholder: this.parent.filterBarPlaceholder }\n });\n append([this.filterInputObj.container], this.filterParent);\n prepend([this.filterParent], args.popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'aria-owns': this.parent.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'mousedown', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n EventHandler.add(this.filterInput, 'input', this.parent.onInput, this.parent);\n EventHandler.add(this.filterInput, 'keyup', this.parent.KeyUp, this.parent);\n EventHandler.add(this.filterInput, 'keydown', this.parent.onKeyDown, this.parent);\n EventHandler.add(this.filterInput, 'blur', this.onBlur, this);\n this.parent.searchBoxHeight = (this.filterInputObj.container.parentElement).getBoundingClientRect().height;\n return this.filterInputObj;\n }\n };\n ;\n CheckBoxSelection.prototype.clickOnBackIcon = function (e) {\n this.parent.hidePopup();\n removeClass([document.body, this.parent.popupObj.element], popupFullScreen);\n };\n CheckBoxSelection.prototype.clearText = function (e) {\n this.parent.targetInputElement.value = '';\n this.parent.refreshPopup();\n this.parent.refreshListItems(null);\n this.clearIconElement.style.visibility = 'hidden';\n this.filterInput.focus();\n this.setReorder(e);\n e.preventDefault();\n };\n CheckBoxSelection.prototype.setDeviceSearchBox = function () {\n this.parent.popupObj.element.classList.add(device);\n this.parent.popupObj.element.classList.add(mobileFilter);\n this.parent.popupObj.position = { X: 0, Y: 0 };\n this.parent.popupObj.dataBind();\n attributes(this.parent.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, this.parent.popupObj.element], popupFullScreen);\n this.setSearchBoxPosition();\n this.backIconElement = this.filterInputObj.container.querySelector('.e-back-icon');\n this.clearIconElement = this.filterInputObj.container.querySelector('.' + clearIcon);\n this.clearIconElement.style.visibility = 'hidden';\n EventHandler.add(this.backIconElement, 'click', this.clickOnBackIcon, this);\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n };\n CheckBoxSelection.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.parent.popupObj.element.style.maxHeight = '100%';\n this.parent.popupObj.element.style.width = '100%';\n this.parent.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.parent.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n CheckBoxSelection.prototype.targetElement = function () {\n this.parent.targetInputElement = this.filterInput;\n this.clearIconElement.style.visibility = this.parent.targetInputElement.value === '' ? 'hidden' : 'visible';\n return this.parent.targetInputElement.value;\n };\n CheckBoxSelection.prototype.onBlur = function (e) {\n var target;\n if (Browser.isIE) {\n target = !isNullOrUndefined(e) && e.target;\n }\n if (!Browser.isIE) {\n target = !isNullOrUndefined(e) && e.relatedTarget;\n }\n if (document.body.contains(this.parent.popupObj.element) && this.parent.popupObj.element.contains(target) && !Browser.isIE) {\n this.filterInput.focus();\n return;\n }\n if (this.parent.scrollFocusStatus) {\n e.preventDefault();\n this.filterInput.focus();\n this.parent.scrollFocusStatus = false;\n return;\n }\n if (document.body.contains(this.parent.popupObj.element) && !this.parent.popupObj.element.classList.contains('e-popup-close')) {\n this.parent.inputFocus = false;\n this.parent.updateValueState(e, this.parent.value, this.parent.tempValues);\n this.parent.dispatchEvent(this.parent.hiddenElement, 'change');\n }\n if (document.body.contains(this.parent.popupObj.element) &&\n !this.parent.popupObj.element.classList.contains('e-popup-close')) {\n this.parent.inputFocus = false;\n this.parent.overAllWrapper.classList.remove(FOCUS);\n this.parent.trigger('blur');\n this.parent.focused = true;\n }\n if (document.body.contains(this.parent.popupObj.element) &&\n !this.parent.popupObj.element.classList.contains('e-popup-close') && !Browser.isDevice) {\n this.parent.hidePopup();\n }\n };\n CheckBoxSelection.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.parent.popupObj) && closest(target, '#' + this.parent.popupObj.element.id)) &&\n !this.parent.overAllWrapper.contains(e.target)) {\n if (this.parent.overAllWrapper.classList.contains(dropDownBaseClasses.focus) || this.parent.isPopupOpen()) {\n this.parent.inputFocus = false;\n this.parent.hidePopup();\n this.parent.onBlur();\n this.parent.focused = true;\n }\n }\n };\n CheckBoxSelection.prototype.getFocus = function (e) {\n this.parent.overAllWrapper.classList.remove(FOCUS);\n if (e.value === 'focus') {\n this.filterInput.focus();\n }\n if (e.value === 'clear') {\n this.filterInput.value = '';\n this.clearIconElement.style.visibility = 'hidden';\n }\n };\n CheckBoxSelection.prototype.checkSelectAll = function (e) {\n if (e.value === 'check' && this.checkAllParent.getAttribute('aria-checked') !== 'true') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale(true);\n }\n if (e.value === 'uncheck') {\n this.changeState(this.checkAllParent, e.value, null, null, false);\n this.setLocale();\n }\n };\n CheckBoxSelection.prototype.setLocale = function (unSelect) {\n if (this.parent.selectAllText !== 'Select All' || this.parent.unSelectAllText !== 'Unselect All') {\n var template = unSelect ? this.parent.unSelectAllText : this.parent.selectAllText;\n var compiledString = void 0;\n this.selectAllSpan.textContent = '';\n compiledString = compile(template);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.selectAllSpan.textContent = item.textContent;\n }\n }\n else {\n var l10nLocale = { selectAllText: 'Select All', unSelectAllText: 'Unselect All' };\n var l10n = new L10n('dropdowns', l10nLocale, this.parent.locale);\n this.selectAllSpan.textContent = unSelect ? l10n.getConstant('unSelectAllText') : l10n.getConstant('selectAllText');\n }\n };\n CheckBoxSelection.prototype.getActiveList = function (args) {\n if (args.li.classList.contains('e-active')) {\n this.activeLi.push(args.li.cloneNode(true));\n }\n else {\n this.activeLi.splice(args.index, 1);\n }\n };\n CheckBoxSelection.prototype.setReorder = function (args) {\n if (this.parent.enableSelectionOrder && !isNullOrUndefined(this.parent.value)) {\n var activeLiCount = this.parent.ulElement.querySelectorAll('li.e-active').length;\n var remLi = void 0;\n var ulEle = createElement('ul', {\n className: 'e-list-parent e-ul e-reorder'\n });\n var removeEle = createElement('div');\n if (activeLiCount > 0) {\n append(this.parent.ulElement.querySelectorAll('li.e-active'), ulEle);\n remLi = this.parent.ulElement.querySelectorAll('li.e-active');\n addClass(remLi, 'e-reorder-hide');\n prepend([ulEle], this.parent.list);\n }\n this.parent.focusAtFirstListItem();\n }\n };\n return CheckBoxSelection;\n}());\nexport { CheckBoxSelection };\n","import * as index from '@syncfusion/ej2-dropdowns';\nindex.MultiSelect.Inject( index.CheckBoxSelection);\nexport * from '@syncfusion/ej2-dropdowns';\n","/**\n * Defines types of Cell\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n","/**\n * CellStyle class\n */\nvar CellStyle = /** @class */ (function () {\n function CellStyle() {\n this.numFmtId = 0;\n this.backColor = 'none';\n this.fontName = 'Calibri';\n this.fontSize = 14;\n this.fontColor = '#000000';\n this.italic = false;\n this.bold = false;\n this.underline = false;\n this.wrapText = false;\n this.hAlign = 'general';\n this.vAlign = 'bottom';\n this.numberFormat = 'GENERAL';\n this.type = 'datetime';\n this.borders = new Borders();\n this.isGlobalStyle = false;\n }\n return CellStyle;\n}());\nexport { CellStyle };\nvar Font = /** @class */ (function () {\n function Font() {\n this.sz = 14;\n this.name = 'Calibri';\n this.u = false;\n this.b = false;\n this.i = false;\n this.color = 'FF000000';\n }\n return Font;\n}());\nexport { Font };\nvar CellXfs = /** @class */ (function () {\n function CellXfs() {\n }\n return CellXfs;\n}());\nexport { CellXfs };\nvar Alignment = /** @class */ (function () {\n function Alignment() {\n }\n return Alignment;\n}());\nexport { Alignment };\nvar CellStyleXfs = /** @class */ (function () {\n function CellStyleXfs() {\n }\n return CellStyleXfs;\n}());\nexport { CellStyleXfs };\nvar CellStyles = /** @class */ (function () {\n function CellStyles() {\n this.name = 'Normal';\n this.xfId = 0;\n }\n return CellStyles;\n}());\nexport { CellStyles };\nvar NumFmt = /** @class */ (function () {\n function NumFmt(id, code) {\n this.numFmtId = id;\n this.formatCode = code;\n }\n return NumFmt;\n}());\nexport { NumFmt };\n/**\n * Border class\n */\nvar Border = /** @class */ (function () {\n function Border(mLine, mColor) {\n this.lineStyle = mLine;\n this.color = mColor;\n }\n return Border;\n}());\nexport { Border };\n/**\n * Border class\n */\nvar Borders = /** @class */ (function () {\n function Borders() {\n this.left = new Border('none', '#FFFFFF');\n this.right = new Border('none', '#FFFFFF');\n this.top = new Border('none', '#FFFFFF');\n this.bottom = new Border('none', '#FFFFFF');\n this.all = new Border('none', '#FFFFFF');\n }\n return Borders;\n}());\nexport { Borders };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheet class\n */\nvar Cell = /** @class */ (function () {\n function Cell() {\n }\n return Cell;\n}());\nexport { Cell };\n/**\n * Rows class\n */\nvar Cells = /** @class */ (function (_super) {\n __extends(Cells, _super);\n function Cells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (cell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var c = _a[_i];\n if (c.index === cell.index) {\n _this[count] = cell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(cell);\n }\n };\n return _this;\n }\n return Cells;\n}(Array));\nexport { Cells };\n","/**\n * Column class\n */\nvar Column = /** @class */ (function () {\n function Column() {\n }\n return Column;\n}());\nexport { Column };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheet class\n */\nvar Row = /** @class */ (function () {\n function Row() {\n }\n return Row;\n}());\nexport { Row };\n/**\n * Rows class\n */\nvar Rows = /** @class */ (function (_super) {\n __extends(Rows, _super);\n function Rows() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (row) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var r = _a[_i];\n if (r.index === row.index) {\n _this[count] = row;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(row);\n }\n };\n return _this;\n }\n return Rows;\n}(Array));\nexport { Rows };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheets class\n */\nvar Worksheets = /** @class */ (function (_super) {\n __extends(Worksheets, _super);\n function Worksheets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return Worksheets;\n}(Array));\nexport { Worksheets };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Worksheet class\n */\nvar Worksheet = /** @class */ (function () {\n function Worksheet() {\n this.isSummaryRowBelow = true;\n }\n return Worksheet;\n}());\nexport { Worksheet };\nvar HyperLink = /** @class */ (function () {\n function HyperLink() {\n }\n return HyperLink;\n}());\nexport { HyperLink };\nvar Grouping = /** @class */ (function () {\n function Grouping() {\n }\n return Grouping;\n}());\nexport { Grouping };\nvar FreezePane = /** @class */ (function () {\n function FreezePane() {\n }\n return FreezePane;\n}());\nexport { FreezePane };\nvar MergeCell = /** @class */ (function () {\n function MergeCell() {\n }\n return MergeCell;\n}());\nexport { MergeCell };\n/**\n * MergeCells class\n */\nvar MergeCells = /** @class */ (function (_super) {\n __extends(MergeCells, _super);\n function MergeCells() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.add = function (mergeCell) {\n var inserted = false;\n var count = 0;\n for (var _i = 0, _a = _this; _i < _a.length; _i++) {\n var mCell = _a[_i];\n if (MergeCells.isIntersecting(mCell, mergeCell)) {\n var intersectingCell = new MergeCell();\n intersectingCell.x = Math.min(mCell.x, mergeCell.x);\n intersectingCell.y = Math.min(mCell.Y, mergeCell.y);\n intersectingCell.width = Math.max(mCell.Width + mCell.X, mergeCell.width + mergeCell.x);\n intersectingCell.height = Math.max(mCell.Height + mCell.Y, mergeCell.height + mergeCell.y);\n intersectingCell.ref = (_this[count].ref.split(':')[0]) + ':' + (mergeCell.ref.split(':')[1]);\n _this[count] = intersectingCell;\n inserted = true;\n }\n count++;\n }\n if (!inserted) {\n _this.push(mergeCell);\n }\n };\n return _this;\n }\n MergeCells.isIntersecting = function (base, compare) {\n return (base.x <= compare.x + compare.width)\n && (compare.x <= base.x + base.width)\n && (base.y <= compare.y + compare.height)\n && (compare.y <= base.y + base.height);\n };\n return MergeCells;\n}(Array));\nexport { MergeCells };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization } from '@syncfusion/ej2-base';\n// import { IValueFormatter } from '../base/interface';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n // if (!isNullOrUndefined(cultureName)) {\n // this.intl.culture = cultureName;\n // }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n // public getParserFunction(format: NumberFormatOptions | DateFormatOptions): Function {\n // if ((
format).type) {\n // return this.intl.getDateParser(format);\n // } else {\n // return this.intl.getNumberParser(format);\n // }\n // }\n // public fromView(value: string, format: Function, type?: string): string | number | Date {\n // if (type === 'date' || type === 'datetime' || type === 'number') {\n // return format(value);\n // } else {\n // return value;\n // }\n // }\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n // public setCulture(cultureName: string): void {\n // if (!isNullOrUndefined(cultureName)) {\n // setCulture(cultureName);\n // }\n // }\n /* tslint:disable:no-any */\n ValueFormatter.prototype.displayText = function (value, format) {\n return this.toView(value, this.getFormatFunction(format));\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { ValueFormatter } from './value-formatter';\n/**\n * CsvHelper class\n */\nvar CsvHelper = /** @class */ (function () {\n /* tslint:disable:no-any */\n function CsvHelper(json) {\n this.csvStr = '';\n this.formatter = new ValueFormatter();\n this.isMicrosoftBrowser = !(!navigator.msSaveBlob);\n if (json.styles !== null && json.styles !== undefined) {\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined && json.styles[i].numberFormat !== undefined) {\n this.globalStyles.set(json.styles[i].name, json.styles[i].numberFormat);\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parseWorksheet(json.worksheets[0]);\n }\n //this.csvStr = 'a1,a2,a3\\nb1,b2,b3';\n }\n CsvHelper.prototype.parseWorksheet = function (json) {\n //Rows\n if (json.rows !== null && json.rows !== undefined) {\n this.parseRows(json.rows);\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRows = function (rows) {\n var count = 1;\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n //Row index\n if (row.index !== null && row.index !== undefined) {\n while (count < row.index) {\n this.csvStr += '\\n';\n count++;\n }\n this.parseRow(row);\n }\n else {\n throw Error('Row index is missing.');\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseRow = function (row) {\n if (row.cells !== null && row.cells !== undefined) {\n var count = 1;\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n //cell index\n if (cell.index !== null && cell.index !== undefined) {\n while (count < cell.index) {\n this.csvStr += ',';\n count++;\n }\n this.parseCell(cell);\n }\n else {\n throw Error('Cell index is missing.');\n }\n }\n }\n };\n /* tslint:disable:no-any */\n CsvHelper.prototype.parseCell = function (cell) {\n var csv = this.csvStr;\n if (cell.value !== undefined) {\n if (cell.value instanceof Date) {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: cell.style.numberFormat }));\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { type: 'dateTime', skeleton: this.globalStyles.get(cell.style.name) }));\n }\n else {\n csv += cell.value;\n }\n }\n else if (typeof (cell.value) === 'boolean') {\n csv += cell.value ? 'TRUE' : 'FALSE';\n }\n else if (typeof (cell.value) === 'number') {\n if (cell.style !== undefined && cell.style.numberFormat !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: cell.style.numberFormat }));\n }\n else if (cell.style !== undefined && cell.style.name !== undefined && this.globalStyles.has(cell.style.name)) {\n /* tslint:disable-next-line:max-line-length */\n csv += this.parseCellValue(this.formatter.displayText(cell.value, { format: this.globalStyles.get(cell.style.name) }));\n }\n else {\n csv += cell.value;\n }\n }\n else {\n csv += this.parseCellValue(cell.value);\n }\n }\n this.csvStr = csv;\n };\n CsvHelper.prototype.parseCellValue = function (value) {\n if (value.indexOf(',') !== -1) {\n return value = '\\\"' + value + '\\\"';\n }\n else {\n return value;\n }\n };\n /**\n * Saves the file with specified name and sends the file to client browser\n * @param {string} fileName- file name to save.\n * @param {Blob} buffer- the content to write in file\n */\n CsvHelper.prototype.save = function (fileName) {\n this.buffer = new Blob([this.csvStr], { type: 'text/plain' });\n if (this.isMicrosoftBrowser) {\n navigator.msSaveBlob(this.buffer, fileName);\n }\n else {\n var dataUrl_1 = window.URL.createObjectURL(this.buffer);\n var dwlLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');\n dwlLink.download = fileName;\n dwlLink.href = dataUrl_1;\n var event_1 = document.createEvent('MouseEvent');\n event_1.initEvent('click', true, true);\n dwlLink.dispatchEvent(event_1);\n setTimeout(function () {\n window.URL.revokeObjectURL(dataUrl_1);\n });\n }\n };\n CsvHelper.prototype.saveAsBlob = function () {\n return new Blob([this.csvStr], { type: 'text/csv' });\n };\n return CsvHelper;\n}());\nexport { CsvHelper };\n","/**\n * BlobHelper class\n */\nvar BlobHelper = /** @class */ (function () {\n function BlobHelper() {\n /* tslint:disable:no-any */\n this.parts = [];\n }\n /* tslint:disable:no-any */\n BlobHelper.prototype.append = function (part) {\n this.parts.push(part);\n this.blob = undefined; // Invalidate the blob\n };\n BlobHelper.prototype.getBlob = function () {\n return new Blob(this.parts, { type: 'text/plain' });\n };\n return BlobHelper;\n}());\nexport { BlobHelper };\n","import { Worksheets } from './worksheets';\nimport { Worksheet, FreezePane, MergeCell, MergeCells, HyperLink, Grouping } from './worksheet';\nimport { CellStyle, Font, Borders, CellXfs, Alignment, NumFmt, CellStyleXfs, CellStyles } from './cell-style';\nimport { Column } from './column';\nimport { Row, Rows } from './row';\nimport { Cell, Cells } from './cell';\nimport { ZipArchive, ZipArchiveItem } from '@syncfusion/ej2-compression';\nimport { CsvHelper } from './csv-helper';\nimport { Internationalization } from '@syncfusion/ej2-base';\nimport { BlobHelper } from './blob-helper';\n/**\n * Workbook class\n */\nvar Workbook = /** @class */ (function () {\n /* tslint:disable:no-any */\n function Workbook(json, saveType, culture) {\n this.sharedStringCount = 0;\n this.unitsProportions = [\n 96 / 75.0,\n 96 / 300.0,\n 96,\n 96 / 25.4,\n 96 / 2.54,\n 1,\n 96 / 72.0,\n 96 / 72.0 / 12700,\n ];\n /* tslint:disable:no-any */\n this.hyperlinkStyle = { fontColor: '#0000FF', underline: true };\n if (culture !== undefined) {\n this.culture = culture;\n }\n else {\n this.culture = 'en-US';\n }\n this.intl = new Internationalization(this.culture);\n this.mSaveType = saveType;\n if (saveType === 'xlsx') {\n this.mArchive = new ZipArchive();\n this.sharedString = [];\n this.mFonts = [];\n this.mBorders = [];\n this.mStyles = [];\n this.printTitles = new Map();\n this.cellStyles = new Map();\n this.mNumFmt = new Map();\n this.mFills = new Map();\n this.mStyles.push(new CellStyle());\n this.mFonts.push(new Font());\n /* tslint:disable */\n this.cellStyles.set('Normal', new CellStyles());\n /* tslint:enable */\n this.mCellXfs = [];\n this.mCellStyleXfs = [];\n if (json.styles !== null && json.styles !== undefined) {\n /* tslint:disable-next-line:no-any */\n this.globalStyles = new Map();\n for (var i = 0; i < json.styles.length; i++) {\n if (json.styles[i].name !== undefined) {\n if (!this.cellStyles.has(json.styles[i].name)) {\n var cellStyle = new CellStyle();\n cellStyle.isGlobalStyle = true;\n this.parserCellStyle(json.styles[i], cellStyle, 'none');\n var cellStyles = new CellStyles();\n cellStyles.name = cellStyle.name;\n cellStyles.xfId = cellStyle.index;\n this.cellStyles.set(cellStyles.name, cellStyles);\n /* tslint:disable-next-line:no-any */\n var tFormat = {};\n if (json.styles[i].numberFormat !== undefined) {\n tFormat.format = json.styles[i].numberFormat;\n }\n if (json.styles[i].type !== undefined) {\n tFormat.type = json.styles[i].type;\n }\n else {\n tFormat.type = 'datetime';\n }\n if (tFormat.format !== undefined) {\n this.globalStyles.set(json.styles[i].name, tFormat);\n }\n }\n else {\n throw Error('Style name ' + json.styles[i].name + ' is already existed');\n }\n }\n }\n }\n // Parses Worksheets data to DOM. \n if (json.worksheets !== null && json.worksheets !== undefined) {\n this.parserWorksheets(json.worksheets);\n }\n else {\n throw Error('Worksheet is expected.');\n }\n // Parses the BuiltInProperties data to DOM. \n if (json.builtInProperties !== null && json.builtInProperties !== undefined) {\n this.builtInProperties = new BuiltInProperties();\n this.parserBuiltInProperties(json.builtInProperties, this.builtInProperties);\n }\n }\n else {\n this.csvHelper = new CsvHelper(json);\n }\n }\n /* tslint:disable:no-any */\n Workbook.prototype.parserBuiltInProperties = function (jsonBuiltInProperties, builtInProperties) {\n //Author\n if (jsonBuiltInProperties.author !== null && jsonBuiltInProperties.author !== undefined) {\n builtInProperties.author = jsonBuiltInProperties.author;\n }\n //Comments\n if (jsonBuiltInProperties.comments !== null && jsonBuiltInProperties.comments !== undefined) {\n builtInProperties.comments = jsonBuiltInProperties.comments;\n }\n //Category\n if (jsonBuiltInProperties.category !== null && jsonBuiltInProperties.category !== undefined) {\n builtInProperties.category = jsonBuiltInProperties.category;\n }\n //Company\n if (jsonBuiltInProperties.company !== null && jsonBuiltInProperties.company !== undefined) {\n builtInProperties.company = jsonBuiltInProperties.company;\n }\n //Manager\n if (jsonBuiltInProperties.manager !== null && jsonBuiltInProperties.manager !== undefined) {\n builtInProperties.manager = jsonBuiltInProperties.manager;\n }\n //Subject\n if (jsonBuiltInProperties.subject !== null && jsonBuiltInProperties.subject !== undefined) {\n builtInProperties.subject = jsonBuiltInProperties.subject;\n }\n //Title\n if (jsonBuiltInProperties.title !== null && jsonBuiltInProperties.title !== undefined) {\n builtInProperties.title = jsonBuiltInProperties.title;\n }\n //Creation date\n if (jsonBuiltInProperties.createdDate !== null && jsonBuiltInProperties.createdDate !== undefined) {\n builtInProperties.createdDate = jsonBuiltInProperties.createdDate;\n }\n //Modified date\n if (jsonBuiltInProperties.modifiedDate !== null && jsonBuiltInProperties.modifiedDate !== undefined) {\n builtInProperties.modifiedDate = jsonBuiltInProperties.modifiedDate;\n }\n //Tags\n if (jsonBuiltInProperties.tags !== null && jsonBuiltInProperties.tags !== undefined) {\n builtInProperties.tags = jsonBuiltInProperties.tags;\n }\n //Status\n if (jsonBuiltInProperties.status !== null && jsonBuiltInProperties.status !== undefined) {\n builtInProperties.status = jsonBuiltInProperties.status;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserWorksheets = function (json) {\n this.worksheets = new Worksheets();\n var length = json.length;\n for (var i = 0; i < length; i++) {\n var jsonSheet = json[i];\n var sheet = new Worksheet();\n this.mergeCells = new MergeCells();\n this.mHyperLinks = [];\n //Name\n if (jsonSheet.name !== null && jsonSheet.name !== undefined) {\n sheet.name = jsonSheet.name;\n }\n else {\n sheet.name = 'Sheet' + (i + 1).toString();\n }\n sheet.index = (i + 1);\n //Columns\n if (jsonSheet.columns !== null && jsonSheet.columns !== undefined) {\n this.parserColumns(jsonSheet.columns, sheet);\n }\n //Rows\n if (jsonSheet.rows !== null && jsonSheet.rows !== undefined) {\n this.parserRows(jsonSheet.rows, sheet);\n }\n //FreezePanes\n if (jsonSheet.freeze !== null && jsonSheet.freeze !== undefined) {\n this.parserFreezePanes(jsonSheet.freeze, sheet);\n }\n //Print Title\n if (jsonSheet.printTitle !== null && jsonSheet.printTitle !== undefined) {\n this.parserPrintTitle(jsonSheet.printTitle, sheet);\n }\n if (jsonSheet.pageSetup !== undefined) {\n if (jsonSheet.pageSetup.isSummaryRowBelow !== undefined) {\n sheet.isSummaryRowBelow = jsonSheet.pageSetup.isSummaryRowBelow;\n }\n }\n sheet.index = (i + 1);\n sheet.mergeCells = this.mergeCells;\n sheet.hyperLinks = this.mHyperLinks;\n this.worksheets.push(sheet);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.mergeOptions = function (fromJson, toJson) {\n /* tslint:disable:no-any */\n var result = {};\n this.applyProperties(fromJson, result);\n this.applyProperties(toJson, result);\n return result;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.applyProperties = function (sourceJson, destJson) {\n var keys = Object.keys(sourceJson);\n for (var index = 0; index < keys.length; index++) {\n if (keys[index] !== 'name') {\n destJson[keys[index]] = sourceJson[keys[index]];\n }\n }\n };\n Workbook.prototype.getCellName = function (row, column) {\n return this.getColumnName(column) + row.toString();\n };\n Workbook.prototype.getColumnName = function (col) {\n col--;\n var strColumnName = '';\n do {\n var iCurrentDigit = col % 26;\n col = col / 26 - 1;\n strColumnName = String.fromCharCode(65 + iCurrentDigit) + strColumnName;\n } while (col >= 0);\n return strColumnName;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserPrintTitle = function (json, sheet) {\n var printTitleName = '';\n var titleRowName;\n if (json.fromRow !== null && json.fromRow !== undefined) {\n var fromRow = json.fromRow;\n var toRow = void 0;\n if (json.toRow !== null && json.toRow !== undefined) {\n toRow = json.toRow;\n }\n else {\n toRow = json.fromRow;\n }\n titleRowName = '$' + fromRow + ':$' + toRow;\n }\n var titleColName;\n if (json.fromColumn !== null && json.fromColumn !== undefined) {\n var fromColumn = json.fromColumn;\n var toColumn = void 0;\n if (json.toColumn !== null && json.toColumn !== undefined) {\n toColumn = json.toColumn;\n }\n else {\n toColumn = json.fromColumn;\n }\n titleColName = '$' + this.getColumnName(fromColumn) + ':$' + this.getColumnName(toColumn);\n }\n if (titleRowName !== undefined) {\n printTitleName += (sheet.name + '!' + titleRowName);\n }\n if (titleColName !== undefined && titleRowName !== undefined) {\n printTitleName += ',' + (sheet.name + '!' + titleColName);\n }\n else if (titleColName !== undefined) {\n printTitleName += (sheet.name + '!' + titleColName);\n }\n if (printTitleName !== '') {\n this.printTitles.set(sheet.index - 1, printTitleName);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserFreezePanes = function (json, sheet) {\n sheet.freezePanes = new FreezePane();\n if (json.row !== null && json.row !== undefined) {\n sheet.freezePanes.row = json.row;\n }\n else {\n sheet.freezePanes.row = 0;\n }\n if (json.column !== null && json.column !== undefined) {\n sheet.freezePanes.column = json.column;\n }\n else {\n sheet.freezePanes.column = 0;\n }\n sheet.freezePanes.leftCell = this.getCellName(sheet.freezePanes.row + 1, sheet.freezePanes.column + 1);\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserColumns = function (json, sheet) {\n var columnsLength = json.length;\n sheet.columns = [];\n for (var column = 0; column < columnsLength; column++) {\n var col = new Column();\n if (json[column].index !== null && json[column].index !== undefined) {\n col.index = json[column].index;\n }\n else {\n throw Error('Column index is missing.');\n }\n if (json[column].width !== null && json[column].width !== undefined) {\n col.width = json[column].width;\n }\n sheet.columns.push(col);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRows = function (json, sheet) {\n var rowsLength = json.length;\n sheet.rows = new Rows();\n var rowId = 0;\n for (var r = 0; r < rowsLength; r++) {\n var row = this.parserRow(json[r], rowId);\n rowId = row.index;\n sheet.rows.add(row);\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserRow = function (json, rowIndex) {\n var row = new Row();\n //Row Height\n if (json.height !== null && json.height !== undefined) {\n row.height = json.height;\n }\n //Row index\n if (json.index !== null && json.index !== undefined) {\n row.index = json.index;\n }\n else {\n throw Error('Row index is missing.');\n }\n if (json.grouping !== null && json.grouping !== undefined) {\n this.parseGrouping(json.grouping, row);\n }\n this.parseCells(json.cells, row);\n return row;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseGrouping = function (json, row) {\n row.grouping = new Grouping();\n if (json.outlineLevel !== undefined) {\n row.grouping.outlineLevel = json.outlineLevel;\n }\n if (json.isCollapsed !== undefined) {\n row.grouping.isCollapsed = json.isCollapsed;\n }\n if (json.isHidden !== undefined) {\n row.grouping.isHidden = json.isHidden;\n }\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parseCells = function (json, row) {\n row.cells = new Cells();\n var cellsLength = json !== undefined ? json.length : 0;\n var spanMin = 1;\n var spanMax = 1;\n var curCellIndex = 0;\n for (var cellId = 0; cellId < cellsLength; cellId++) {\n /* tslint:disable:no-any */\n var jsonCell = json[cellId];\n var cell = new Cell();\n //cell index\n if (jsonCell.index !== null && jsonCell.index !== undefined) {\n cell.index = jsonCell.index;\n }\n else {\n throw Error('Cell index is missing.');\n }\n if (cell.index < spanMin) {\n spanMin = cell.index;\n }\n else if (cell.index > spanMax) {\n spanMax = cell.index;\n }\n //Update the Cell name\n cell.refName = this.getCellName(row.index, cell.index);\n //Row span\n if (jsonCell.rowSpan !== null && jsonCell.rowSpan !== undefined) {\n cell.rowSpan = jsonCell.rowSpan - 1;\n }\n else {\n cell.rowSpan = 0;\n }\n //Column span\n if (jsonCell.colSpan !== null && jsonCell.colSpan !== undefined) {\n cell.colSpan = jsonCell.colSpan - 1;\n }\n else {\n cell.colSpan = 0;\n }\n this.mergeCells = this.processMergeCells(cell, row.index, this.mergeCells);\n //Hyperlink\n if (jsonCell.hyperlink !== null && jsonCell.hyperlink !== undefined) {\n var hyperLink = new HyperLink();\n if (jsonCell.hyperlink.target !== undefined) {\n hyperLink.target = jsonCell.hyperlink.target;\n if (jsonCell.hyperlink.displayText !== undefined) {\n cell.value = jsonCell.hyperlink.displayText;\n }\n else {\n cell.value = jsonCell.hyperlink.target;\n }\n cell.type = this.getCellValueType(cell.value);\n hyperLink.ref = cell.refName;\n hyperLink.rId = (this.mHyperLinks.length + 1);\n this.mHyperLinks.push(hyperLink);\n cell.cellStyle = new CellStyle();\n /* tslint:disable-next-line:max-line-length */\n this.parserCellStyle((jsonCell.style !== undefined ? this.mergeOptions(jsonCell.style, this.hyperlinkStyle) : this.hyperlinkStyle), cell.cellStyle, 'string');\n cell.styleIndex = cell.cellStyle.index;\n }\n }\n //Cell value\n if (jsonCell.value !== null && jsonCell.value !== undefined) {\n cell.value = jsonCell.value;\n cell.type = this.getCellValueType(cell.value);\n }\n if (jsonCell.style !== null && jsonCell.style !== undefined && cell.styleIndex === undefined) {\n cell.cellStyle = new CellStyle();\n if (cell.value instanceof Date) {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type, 14);\n }\n else {\n this.parserCellStyle(jsonCell.style, cell.cellStyle, cell.type);\n }\n cell.styleIndex = cell.cellStyle.index;\n }\n else if (cell.value instanceof Date) {\n cell.cellStyle = new CellStyle();\n this.parserCellStyle({}, cell.cellStyle, cell.type, 14);\n cell.styleIndex = cell.cellStyle.index;\n }\n this.parseCellType(cell);\n row.cells.add(cell);\n curCellIndex = (cell.index + 1);\n }\n row.spans = (spanMin) + ':' + (spanMax);\n };\n Workbook.prototype.applyGlobalStyle = function (json, cellStyle) {\n var index = 0;\n if (this.cellStyles.has(json.name)) {\n index = this.cellStyles.get(json.name).xfId;\n var cellStyleXfs = this.mCellStyleXfs[index - 1];\n cellStyle.name = json.name;\n var compareResult = this.compareStyleXfs(cellStyleXfs);\n if (!compareResult.result) {\n var cellXfs = new CellXfs();\n cellXfs.alignment = cellStyleXfs.alignment;\n cellXfs.applyAlignment = cellStyleXfs.applyAlignment;\n cellXfs.borderId = cellStyleXfs.borderId;\n cellXfs.fillId = cellStyleXfs.fillId;\n cellXfs.fontId = cellStyleXfs.fontId;\n cellXfs.numFmtId = cellStyleXfs.numFmtId;\n cellXfs.xfId = index;\n this.mCellXfs.push(cellXfs);\n this.mStyles.push(cellStyle);\n cellStyle.index = this.mCellXfs.length;\n }\n else {\n cellStyle.index = compareResult.index;\n }\n }\n };\n Workbook.prototype.compareStyleXfs = function (toCompareStyle) {\n var result = false;\n var index = 1;\n for (var _i = 0, _a = this.mCellXfs; _i < _a.length; _i++) {\n var baseStyle = _a[_i];\n result = baseStyle.alignment === toCompareStyle.alignment &&\n baseStyle.borderId === toCompareStyle.borderId &&\n baseStyle.numFmtId === toCompareStyle.numFmtId &&\n baseStyle.fillId === toCompareStyle.fillId &&\n baseStyle.fontId === toCompareStyle.fontId;\n if (result) {\n break;\n }\n else {\n index++;\n }\n }\n return { index: index, result: result };\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserCellStyle = function (json, cellStyle, cellType, defStyleIndex) {\n //name\n if (json.name !== null && json.name !== undefined) {\n if (cellStyle.isGlobalStyle) {\n cellStyle.name = json.name;\n }\n else {\n this.applyGlobalStyle(json, cellStyle);\n return;\n }\n }\n //background color\n if (json.backColor !== null && json.backColor !== undefined) {\n cellStyle.backColor = json.backColor;\n }\n //borders\n //leftBorder\n cellStyle.borders = new Borders();\n //AllBorder\n if (json.borders !== null && json.borders !== undefined) {\n this.parserBorder(json.borders, cellStyle.borders.all);\n }\n //leftborder\n if (json.leftBorder !== null && json.leftBorder !== undefined) {\n this.parserBorder(json.leftBorder, cellStyle.borders.left);\n }\n //rightBorder\n if (json.rightBorder !== null && json.rightBorder !== undefined) {\n this.parserBorder(json.rightBorder, cellStyle.borders.right);\n }\n //topBorder\n if (json.topBorder !== null && json.topBorder !== undefined) {\n this.parserBorder(json.topBorder, cellStyle.borders.top);\n }\n //bottomBorder\n if (json.bottomBorder !== null && json.bottomBorder !== undefined) {\n this.parserBorder(json.bottomBorder, cellStyle.borders.bottom);\n }\n //fontName\n if (json.fontName !== null && json.fontName !== undefined) {\n cellStyle.fontName = json.fontName;\n }\n //fontSize\n if (json.fontSize !== null && json.fontSize !== undefined) {\n cellStyle.fontSize = json.fontSize;\n }\n //fontColor\n if (json.fontColor !== null && json.fontColor !== undefined) {\n cellStyle.fontColor = json.fontColor;\n }\n //italic\n if (json.italic !== null && json.italic !== undefined) {\n cellStyle.italic = json.italic;\n }\n //bold\n if (json.bold !== null && json.bold !== undefined) {\n cellStyle.bold = json.bold;\n }\n //hAlign\n if (json.hAlign !== null && json.hAlign !== undefined) {\n cellStyle.hAlign = json.hAlign;\n }\n //vAlign\n if (json.vAlign !== null && json.vAlign !== undefined) {\n cellStyle.vAlign = json.vAlign;\n }\n //underline\n if (json.underline !== null && json.underline !== undefined) {\n cellStyle.underline = json.underline;\n }\n //wrapText\n if (json.wrapText !== null && json.wrapText !== undefined) {\n cellStyle.wrapText = json.wrapText;\n }\n //numberFormat\n if (json.numberFormat !== null && json.numberFormat !== undefined) {\n if (json.type !== null && json.type !== undefined) {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, json.type);\n }\n else {\n cellStyle.numberFormat = this.getNumberFormat(json.numberFormat, cellType);\n }\n }\n else if (defStyleIndex !== undefined) {\n cellStyle.numFmtId = 14;\n cellStyle.numberFormat = 'GENERAL';\n }\n else {\n cellStyle.numberFormat = 'GENERAL';\n }\n cellStyle.index = this.processCellStyle(cellStyle);\n };\n Workbook.prototype.switchNumberFormat = function (numberFormat, type) {\n var format = this.getNumberFormat(numberFormat, type);\n if (format !== numberFormat) {\n var numFmt = this.mNumFmt.get(numberFormat);\n if (numFmt !== undefined) {\n numFmt.formatCode = format;\n if (this.mNumFmt.has(format)) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXfs = _a[_i];\n if (cellStyleXfs.numFmtId === numFmt.numFmtId) {\n cellStyleXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n for (var _b = 0, _c = this.mCellXfs; _b < _c.length; _b++) {\n var cellXfs = _c[_b];\n if (cellXfs.numFmtId === numFmt.numFmtId) {\n cellXfs.numFmtId = this.mNumFmt.get(format).numFmtId;\n }\n }\n }\n }\n }\n };\n Workbook.prototype.getNumberFormat = function (numberFormat, type) {\n var returnFormat;\n switch (type) {\n case 'number':\n try {\n returnFormat = this.intl.getNumberPattern({ format: numberFormat });\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'datetime':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'dateTime' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'date':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'date' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n case 'time':\n try {\n returnFormat = this.intl.getDatePattern({ skeleton: numberFormat, type: 'time' }, true);\n }\n catch (error) {\n returnFormat = numberFormat;\n }\n break;\n default:\n returnFormat = numberFormat;\n break;\n }\n return returnFormat;\n };\n /* tslint:disable:no-any */\n Workbook.prototype.parserBorder = function (json, border) {\n if (json.color !== null && json.color !== undefined) {\n border.color = json.color;\n }\n else {\n border.color = '#000000';\n }\n if (json.lineStyle !== null && json.lineStyle !== undefined) {\n border.lineStyle = json.lineStyle;\n }\n else {\n border.lineStyle = 'thin';\n }\n };\n Workbook.prototype.processCellStyle = function (style) {\n var compareResult = this.compareStyle(style);\n if (!compareResult.result) {\n this.mStyles.push(style);\n var cellXfs = undefined;\n if (style.isGlobalStyle) {\n cellXfs = new CellStyleXfs();\n }\n else {\n cellXfs = new CellXfs();\n }\n //Add font\n var compareFontResult = this.isNewFont(style);\n if (!compareFontResult.result) {\n var font = new Font();\n font.b = style.bold;\n font.i = style.italic;\n font.name = style.fontName;\n font.sz = style.fontSize;\n font.u = style.underline;\n font.color = ('FF' + style.fontColor.replace('#', ''));\n this.mFonts.push(font);\n cellXfs.fontId = this.mFonts.length - 1;\n }\n else {\n cellXfs.fontId = compareFontResult.index;\n }\n //Add fill\n if (style.backColor !== 'none') {\n var backColor = 'FF' + style.backColor.replace('#', '');\n if (this.mFills.has(backColor)) {\n var fillId = this.mFills.get(backColor);\n cellXfs.fillId = fillId;\n }\n else {\n var fillId = this.mFills.size + 2;\n this.mFills.set(backColor, fillId);\n cellXfs.fillId = (fillId);\n }\n }\n else {\n cellXfs.fillId = 0;\n }\n //Add border \n if (!this.isNewBorder(style)) {\n this.mBorders.push(style.borders);\n cellXfs.borderId = this.mBorders.length;\n }\n else {\n cellXfs.borderId = 0;\n }\n cellXfs.xfId = 0;\n //Add Number Format \n if (style.numberFormat !== 'GENERAL') {\n if (this.mNumFmt.has(style.numberFormat)) {\n var numFmt = this.mNumFmt.get(style.numberFormat);\n cellXfs.numFmtId = numFmt.numFmtId;\n }\n else {\n var id = this.mNumFmt.size + 164;\n this.mNumFmt.set(style.numberFormat, new NumFmt(id, style.numberFormat));\n cellXfs.numFmtId = id;\n }\n }\n else {\n if (style.numberFormat === 'GENERAL' && style.numFmtId === 14) {\n cellXfs.numFmtId = 14;\n }\n else {\n cellXfs.numFmtId = 0;\n }\n }\n //Add alignment\n if (style.hAlign !== 'left' || style.vAlign !== 'bottom' || style.wrapText) {\n cellXfs.applyAlignment = 1;\n cellXfs.alignment = new Alignment();\n cellXfs.alignment.horizontal = style.hAlign;\n cellXfs.alignment.vertical = style.vAlign;\n cellXfs.alignment.wrapText = style.wrapText ? 1 : 0;\n }\n if (style.isGlobalStyle) {\n this.mCellStyleXfs.push(cellXfs);\n return (this.mCellStyleXfs.length);\n }\n else {\n //Add cellxfs\n this.mCellXfs.push(cellXfs);\n return (this.mCellXfs.length);\n }\n }\n else {\n //Return the index of the already existing style.\n return compareResult.index;\n }\n };\n Workbook.prototype.isNewFont = function (toCompareStyle) {\n var result = false;\n var index = 0;\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n index++;\n var fontColor = undefined;\n if (toCompareStyle.fontColor !== undefined) {\n fontColor = ('FF' + toCompareStyle.fontColor.replace('#', ''));\n }\n result = font.color === fontColor &&\n font.b === toCompareStyle.bold &&\n font.i === toCompareStyle.italic &&\n font.u === toCompareStyle.underline &&\n font.name === toCompareStyle.fontName &&\n font.sz === toCompareStyle.fontSize;\n if (result) {\n break;\n }\n }\n index = index - 1;\n return { index: index, result: result };\n };\n Workbook.prototype.isNewBorder = function (toCompareStyle) {\n var bStyle = new CellStyle;\n if (this.isAllBorder(toCompareStyle.borders)) {\n return (bStyle.borders.all.color === toCompareStyle.borders.all.color &&\n bStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle);\n }\n else {\n return (bStyle.borders.left.color === toCompareStyle.borders.left.color &&\n bStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n bStyle.borders.right.color === toCompareStyle.borders.right.color &&\n bStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n bStyle.borders.top.color === toCompareStyle.borders.top.color &&\n bStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n bStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n bStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle);\n }\n };\n Workbook.prototype.isAllBorder = function (toCompareBorder) {\n var allBorderStyle = new CellStyle;\n return allBorderStyle.borders.all.color !== toCompareBorder.all.color &&\n allBorderStyle.borders.all.lineStyle !== toCompareBorder.all.lineStyle;\n };\n Workbook.prototype.compareStyle = function (toCompareStyle) {\n var result = true;\n var index = 0;\n var globalStyleIndex = 0;\n for (var _i = 0, _a = this.mStyles; _i < _a.length; _i++) {\n var baseStyle = _a[_i];\n result = baseStyle.backColor === toCompareStyle.backColor &&\n baseStyle.bold === toCompareStyle.bold &&\n baseStyle.numFmtId === toCompareStyle.numFmtId &&\n baseStyle.numberFormat === toCompareStyle.numberFormat &&\n baseStyle.type === toCompareStyle.type &&\n baseStyle.fontColor === toCompareStyle.fontColor &&\n baseStyle.fontName === toCompareStyle.fontName &&\n baseStyle.fontSize === toCompareStyle.fontSize &&\n baseStyle.hAlign === toCompareStyle.hAlign &&\n baseStyle.italic === toCompareStyle.italic &&\n baseStyle.underline === toCompareStyle.underline &&\n baseStyle.vAlign === toCompareStyle.vAlign &&\n baseStyle.wrapText === toCompareStyle.wrapText &&\n (baseStyle.borders.all.color === toCompareStyle.borders.all.color &&\n baseStyle.borders.all.lineStyle === toCompareStyle.borders.all.lineStyle) &&\n (baseStyle.borders.left.color === toCompareStyle.borders.left.color &&\n baseStyle.borders.left.lineStyle === toCompareStyle.borders.left.lineStyle &&\n baseStyle.borders.right.color === toCompareStyle.borders.right.color &&\n baseStyle.borders.right.lineStyle === toCompareStyle.borders.right.lineStyle &&\n baseStyle.borders.top.color === toCompareStyle.borders.top.color &&\n baseStyle.borders.top.lineStyle === toCompareStyle.borders.top.lineStyle &&\n baseStyle.borders.bottom.color === toCompareStyle.borders.bottom.color &&\n baseStyle.borders.bottom.lineStyle === toCompareStyle.borders.bottom.lineStyle);\n if (result) {\n break;\n }\n else if (!baseStyle.isGlobalStyle) {\n index++;\n }\n else {\n globalStyleIndex++;\n }\n }\n if (toCompareStyle.isGlobalStyle) {\n index = globalStyleIndex + 1;\n }\n return { index: index, result: result };\n };\n Workbook.prototype.contains = function (array, item) {\n var index = array.indexOf(item);\n return index > -1 && index < array.length;\n };\n Workbook.prototype.getCellValueType = function (value) {\n if (value instanceof Date) {\n return 'datetime';\n }\n else if (typeof (value) === 'boolean') {\n return 'boolean';\n }\n else if (typeof (value) === 'number') {\n return 'number';\n }\n else {\n return 'string';\n }\n };\n Workbook.prototype.parseCellType = function (cell) {\n var type = cell.type;\n var saveType;\n var value = cell.value;\n switch (type) {\n case 'datetime':\n value = this.toOADate(value);\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n var value_1 = this.globalStyles.get(cell.cellStyle.name);\n this.switchNumberFormat(value_1.format, value_1.type);\n }\n }\n saveType = 'n';\n break;\n //TODO: Update the number format index and style\n case 'boolean':\n value = value ? 1 : 0;\n saveType = 'b';\n break;\n case 'number':\n saveType = 'n';\n if (cell.cellStyle !== undefined && cell.cellStyle.name !== undefined) {\n if (this.globalStyles.has(cell.cellStyle.name)) {\n this.switchNumberFormat(this.globalStyles.get(cell.cellStyle.name).format, 'number');\n }\n }\n break;\n case 'string':\n this.sharedStringCount++;\n saveType = 's';\n if (!this.contains(this.sharedString, value)) {\n this.sharedString.push(value);\n }\n value = this.sharedString.indexOf(value);\n break;\n default:\n break;\n }\n cell.saveType = saveType;\n cell.value = value;\n };\n Workbook.prototype.saveAsBlob = function (blobSaveType) {\n var _this = this;\n switch (blobSaveType) {\n case 'text/csv':\n return new Promise(function (resolve, reject) {\n var obj = {};\n obj.blobData = _this.csvHelper.saveAsBlob();\n resolve(obj);\n });\n default:\n return new Promise(function (resolve, reject) {\n _this.saveInternal();\n _this.mArchive.saveAsBlob().then(function (blob) {\n var obj = {};\n obj.blobData = new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\n resolve(obj);\n });\n });\n }\n };\n Workbook.prototype.save = function (fileName, proxyUrl) {\n var _this = this;\n if (fileName === null || fileName === undefined || fileName === '') {\n throw new Error('Argument Null Exception: fileName cannot be null or empty');\n }\n var xlsxMatch = fileName.match('.xlsx$');\n var csvMatch = fileName.match('.csv$');\n if (xlsxMatch !== null && xlsxMatch[0] === ('.' + this.mSaveType)) {\n this.saveInternal();\n this.mArchive.save(fileName).then(function () {\n _this.mArchive.destroy();\n });\n }\n else if (csvMatch !== null && csvMatch[0] === ('.' + this.mSaveType)) {\n this.csvHelper.save(fileName);\n }\n else {\n throw Error('Save type and file extension is different.');\n }\n };\n Workbook.prototype.saveInternal = function () {\n this.saveWorkbook();\n this.saveWorksheets();\n this.saveSharedString();\n this.saveStyles();\n this.saveApp(this.builtInProperties);\n this.saveCore(this.builtInProperties);\n this.saveContentType();\n this.saveTopLevelRelation();\n this.saveWorkbookRelation();\n };\n Workbook.prototype.saveWorkbook = function () {\n /* tslint:disable-next-line:max-line-length */\n var workbookTemp = ' ';\n var sheets = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n sheets += ' ';\n }\n sheets += ' ';\n workbookTemp += sheets;\n if (this.printTitles.size > 0) {\n var printTitle_1 = '';\n this.printTitles.forEach(function (value, key) {\n printTitle_1 += '' + value + ' ';\n });\n printTitle_1 += ' ';\n workbookTemp += printTitle_1;\n }\n this.addToArchive(workbookTemp + ' ', 'xl/workbook.xml');\n };\n Workbook.prototype.saveWorksheets = function () {\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n this.saveWorksheet(this.worksheets[i], i);\n }\n };\n Workbook.prototype.saveWorksheet = function (sheet, index) {\n var sheetBlob = new BlobHelper();\n /* tslint:disable-next-line:max-line-length */\n var sheetString = '';\n if (!sheet.isSummaryRowBelow) {\n sheetString += ('' + '' + ' ' + ' ');\n }\n else {\n sheetString += (' ');\n }\n if (sheet.freezePanes !== undefined) {\n sheetString += (this.saveFreezePanes(sheet));\n }\n if (sheet.columns !== undefined) {\n var colString = '';\n for (var _i = 0, _a = sheet.columns; _i < _a.length; _i++) {\n var column = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n if (column.width !== undefined) {\n colString += ' ';\n }\n else {\n colString += ' ';\n }\n }\n sheetString += (colString + ' ');\n }\n sheetString += ('');\n sheetBlob.append(sheetString);\n sheetString = '';\n if (sheet.rows !== undefined) {\n for (var _b = 0, _c = sheet.rows; _b < _c.length; _b++) {\n var row = _c[_b];\n var rowString = ('');\n for (var _d = 0, _e = row.cells; _d < _e.length; _d++) {\n var cell = _e[_d];\n if (cell !== undefined && (cell.value !== undefined || cell.cellStyle !== undefined)) {\n rowString += ('');\n if (cell.value !== undefined) {\n rowString += ('' + cell.value + ' ');\n }\n else {\n rowString += ('');\n }\n }\n }\n rowString += ('
');\n sheetBlob.append(rowString);\n }\n }\n sheetString += (' ');\n if (sheet.mergeCells.length > 0) {\n sheetString += ('');\n for (var _f = 0, _g = sheet.mergeCells; _f < _g.length; _f++) {\n var mCell = _g[_f];\n sheetString += (' ');\n }\n sheetString += (' ');\n }\n if (sheet.hyperLinks.length > 0) {\n sheetString += ('');\n for (var _h = 0, _j = sheet.hyperLinks; _h < _j.length; _h++) {\n var hLink = _j[_h];\n sheetString += (' ');\n }\n sheetString += (' ');\n this.addToArchive(this.saveSheetRelations(sheet), ('xl/worksheets/_rels/sheet' + sheet.index + '.xml.rels'));\n }\n /* tslint:disable-next-line:max-line-length */\n sheetString += (' ');\n sheetBlob.append(sheetString);\n this.addToArchive(sheetBlob.getBlob(), 'xl/worksheets' + '/sheet' + (index + 1) + '.xml');\n };\n Workbook.prototype.pixelsToColumnWidth = function (pixels) {\n var dDigitWidth = 7;\n var val = (pixels > dDigitWidth + 5) ?\n this.trunc((pixels - 5) / dDigitWidth * 100 + 0.5) / 100 :\n pixels / (dDigitWidth + 5);\n return (val > 1) ?\n ((val * dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0 :\n (val * (dDigitWidth + 5) / dDigitWidth * 256.0) / 256.0;\n };\n Workbook.prototype.trunc = function (x) {\n var n = x - x % 1;\n return n === 0 && (x < 0 || (x === 0 && (1 / x !== 1 / 0))) ? -0 : n;\n };\n Workbook.prototype.pixelsToRowHeight = function (pixels) {\n return (pixels * this.unitsProportions[5] / this.unitsProportions[6]);\n };\n Workbook.prototype.saveSheetRelations = function (sheet) {\n /* tslint:disable-next-line:max-line-length */\n var relStr = '';\n for (var _i = 0, _a = sheet.hyperLinks; _i < _a.length; _i++) {\n var hLink = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n relStr += ' ';\n }\n relStr += ' ';\n return relStr;\n };\n Workbook.prototype.saveFreezePanes = function (sheet) {\n var paneString = ' ';\n return paneString;\n };\n Workbook.prototype.saveSharedString = function () {\n var length = this.sharedString.length;\n if (length > 0) {\n /* tslint:disable-next-line:max-line-length */\n var sstStart = '';\n var si = '';\n for (var i = 0; i < length; i++) {\n si += '';\n si += this.processString(this.sharedString[i]);\n si += ' ';\n }\n si += ' ';\n this.addToArchive(sstStart + si, 'xl/sharedStrings.xml');\n }\n };\n Workbook.prototype.processString = function (value) {\n if (value.indexOf('&') !== -1) {\n value = value.replace(/&/g, '&');\n }\n if (value.indexOf('<') !== -1) {\n value = value.replace(/') !== -1) {\n value = value.replace(/>/g, '>');\n }\n return value;\n };\n Workbook.prototype.saveStyles = function () {\n /* tslint:disable-next-line:max-line-length */\n var styleTemp = '';\n styleTemp += this.saveNumberFormats();\n styleTemp += this.saveFonts();\n styleTemp += this.saveFills();\n styleTemp += this.saveBorders();\n styleTemp += this.saveCellStyleXfs();\n styleTemp += this.saveCellXfs();\n styleTemp += this.saveCellStyles();\n this.addToArchive(styleTemp + ' ', 'xl/styles.xml');\n };\n Workbook.prototype.saveNumberFormats = function () {\n if (this.mNumFmt.size >= 1) {\n var numFmtStyle_1 = '';\n this.mNumFmt.forEach(function (value, key) {\n numFmtStyle_1 += ' ';\n });\n return (numFmtStyle_1 += ' ');\n }\n else {\n return '';\n }\n };\n Workbook.prototype.saveFonts = function () {\n /* tslint:disable-next-line:max-line-length */\n var fontStyle = '';\n if (this.mFonts.length >= 1) {\n for (var _i = 0, _a = this.mFonts; _i < _a.length; _i++) {\n var font = _a[_i];\n fontStyle += '';\n if (font.b) {\n fontStyle += ' ';\n }\n if (font.i) {\n fontStyle += ' ';\n }\n if (font.u) {\n fontStyle += ' ';\n }\n fontStyle += ' ';\n fontStyle += ' ';\n fontStyle += ' ';\n }\n }\n return fontStyle + ' ';\n };\n Workbook.prototype.saveFills = function () {\n /* tslint:disable-next-line:max-line-length */\n var fillsStyle = ' ';\n if (this.mFills.size >= 1) {\n this.mFills.forEach(function (value, key) {\n /* tslint:disable-next-line:max-line-length */\n fillsStyle += ' ';\n });\n }\n return fillsStyle + ' ';\n };\n Workbook.prototype.saveBorders = function () {\n /* tslint:disable-next-line:max-line-length */\n var bordersStyle = ' ';\n if (this.mBorders.length >= 1) {\n for (var _i = 0, _a = this.mBorders; _i < _a.length; _i++) {\n var borders = _a[_i];\n if (this.isAllBorder(borders)) {\n var color = borders.all.color.replace('#', '');\n var lineStyle = borders.all.lineStyle;\n /* tslint:disable-next-line:max-line-length */\n bordersStyle += ' ';\n }\n else {\n /* tslint:disable-next-line:max-line-length */\n bordersStyle += ' ';\n }\n }\n }\n return bordersStyle + ' ';\n };\n Workbook.prototype.saveCellStyles = function () {\n var _this = this;\n var cellStyleString = '';\n this.cellStyles.forEach(function (value, key) {\n cellStyleString += ' ';\n });\n return cellStyleString += ' ';\n };\n Workbook.prototype.saveCellStyleXfs = function () {\n /* tslint:disable-next-line:max-line-length */\n var cellXfsStyle = ' ';\n if (this.mCellStyleXfs.length >= 1) {\n for (var _i = 0, _a = this.mCellStyleXfs; _i < _a.length; _i++) {\n var cellStyleXf = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n cellXfsStyle += ' ';\n }\n else {\n cellXfsStyle += ' />';\n }\n // \n // \n // \n }\n }\n return cellXfsStyle + ' ';\n };\n Workbook.prototype.saveCellXfs = function () {\n /* tslint:disable-next-line:max-line-length */\n var cellXfsStyle = ' ';\n if (this.mCellXfs.length >= 1) {\n for (var _i = 0, _a = this.mCellXfs; _i < _a.length; _i++) {\n var cellXf = _a[_i];\n /* tslint:disable-next-line:max-line-length */\n cellXfsStyle += ' ';\n }\n else {\n cellXfsStyle += ' />';\n }\n // \n // \n // \n }\n }\n return cellXfsStyle + ' ';\n };\n Workbook.prototype.saveApp = function (builtInProperties) {\n /* tslint:disable-next-line:max-line-length */\n var appString = 'Essential XlsIO ';\n if (builtInProperties !== undefined) {\n if (builtInProperties.manager !== undefined) {\n appString += '' + builtInProperties.manager + ' ';\n }\n if (builtInProperties.company !== undefined) {\n appString += '' + builtInProperties.company + ' ';\n }\n }\n this.addToArchive((appString + ' '), 'docProps/app.xml');\n };\n Workbook.prototype.saveCore = function (builtInProperties) {\n var createdDate = new Date();\n /* tslint:disable-next-line:max-line-length */\n var coreString = '';\n if (this.builtInProperties !== undefined) {\n if (builtInProperties.author !== undefined) {\n coreString += '' + builtInProperties.author + ' ';\n }\n if (builtInProperties.subject !== undefined) {\n coreString += '' + builtInProperties.subject + ' ';\n }\n if (builtInProperties.category !== undefined) {\n coreString += '' + builtInProperties.category + ' ';\n }\n if (builtInProperties.comments !== undefined) {\n coreString += '' + builtInProperties.comments + ' ';\n }\n if (builtInProperties.title !== undefined) {\n coreString += '' + builtInProperties.title + ' ';\n }\n if (builtInProperties.tags !== undefined) {\n coreString += '' + builtInProperties.tags + ' ';\n }\n if (builtInProperties.status !== undefined) {\n coreString += '' + builtInProperties.status + ' ';\n }\n if (builtInProperties.createdDate !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n coreString += '' + builtInProperties.createdDate.toISOString() + ' ';\n }\n else {\n coreString += '' + createdDate.toISOString() + ' ';\n }\n if (builtInProperties.modifiedDate !== undefined) {\n /* tslint:disable-next-line:max-line-length */\n coreString += '' + builtInProperties.modifiedDate.toISOString() + ' ';\n }\n else {\n coreString += '' + createdDate.toISOString() + ' ';\n }\n }\n else {\n coreString += '' + createdDate.toISOString() + ' ';\n coreString += '' + createdDate.toISOString() + ' ';\n }\n /* tslint:disable-next-line:max-line-length */\n coreString += ' ';\n this.addToArchive(coreString, 'docProps/core.xml');\n };\n Workbook.prototype.saveTopLevelRelation = function () {\n /* tslint:disable-next-line:max-line-length */\n var topRelation = ' ';\n this.addToArchive(topRelation, '_rels/.rels');\n };\n Workbook.prototype.saveWorkbookRelation = function () {\n /* tslint:disable-next-line:max-line-length */\n var wbRelation = '';\n var length = this.worksheets.length;\n var count = 0;\n for (var i = 0; i < length; i++, count++) {\n /* tslint:disable-next-line:max-line-length */\n wbRelation += ' ';\n }\n /* tslint:disable-next-line:max-line-length */\n wbRelation += ' ';\n if (this.sharedStringCount > 0) {\n /* tslint:disable-next-line:max-line-length */\n wbRelation += ' ';\n }\n this.addToArchive((wbRelation + ' '), 'xl/_rels/workbook.xml.rels');\n };\n Workbook.prototype.saveContentType = function () {\n /* tslint:disable-next-line:max-line-length */\n var contentTypeString = ' ';\n var sheetsOverride = '';\n var length = this.worksheets.length;\n for (var i = 0; i < length; i++) {\n /* tslint:disable-next-line:max-line-length */\n sheetsOverride += ' ';\n }\n if (this.sharedStringCount > 0) {\n /* tslint:disable-next-line:max-line-length */\n contentTypeString += ' ';\n }\n this.addToArchive((contentTypeString + sheetsOverride + ' '), '[Content_Types].xml');\n };\n Workbook.prototype.addToArchive = function (xmlString, itemName) {\n if (typeof (xmlString) === 'string') {\n var blob = new Blob([xmlString], { type: 'text/plain' });\n var archiveItem = new ZipArchiveItem(blob, itemName);\n this.mArchive.addItem(archiveItem);\n }\n else {\n var archiveItem = new ZipArchiveItem(xmlString, itemName);\n this.mArchive.addItem(archiveItem);\n }\n };\n Workbook.prototype.processMergeCells = function (cell, rowIndex, mergeCells) {\n if (cell.rowSpan !== 0 || cell.colSpan !== 0) {\n var mCell = new MergeCell();\n mCell.x = cell.index;\n mCell.width = cell.colSpan;\n mCell.y = rowIndex;\n mCell.height = cell.rowSpan;\n var startCell = this.getCellName(mCell.y, mCell.x);\n var endCell = this.getCellName(rowIndex + mCell.height, cell.index + mCell.width);\n mCell.ref = startCell + ':' + endCell;\n mergeCells.add(mCell);\n }\n return mergeCells;\n };\n /**\n * Returns the tick count corresponding to the given year, month, and day.\n * @param year number value of year\n * @param month number value of month\n * @param day number value of day\n */\n Workbook.prototype.dateToTicks = function (year, month, day) {\n var ticksPerDay = 10000 * 1000 * 60 * 60 * 24;\n var daysToMonth365 = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365];\n var daysToMonth366 = [0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366];\n if (year >= 1 && year <= 9999 && month >= 1 && month <= 12) {\n var days = this.isLeapYear(year) ? daysToMonth366 : daysToMonth365;\n var y = year - 1;\n var n = y * 365 + ((y / 4) | 0) - ((y / 100) | 0) + ((y / 400) | 0) + days[month - 1] + day - 1;\n return n * ticksPerDay;\n }\n throw new Error('Not a valid date');\n };\n /**\n * Return the tick count corresponding to the given hour, minute, second.\n * @param hour number value of hour\n * @param minute number value if minute\n * @param second number value of second\n */\n Workbook.prototype.timeToTicks = function (hour, minute, second) {\n if (hour >= 0 && hour < 24 && minute >= 0 && minute < 60 && second >= 0 && second < 60) {\n var totalSeconds = hour * 3600 + minute * 60 + second;\n return totalSeconds * 10000 * 1000;\n }\n throw new Error('Not valid time');\n };\n /**\n * Checks if given year is a leap year.\n * @param year Year value.\n */\n Workbook.prototype.isLeapYear = function (year) {\n return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);\n };\n /**\n * Converts `DateTime` to the equivalent OLE Automation date.\n */\n Workbook.prototype.toOADate = function (date) {\n var ticks = 0;\n /* tslint:disable-next-line:max-line-length */\n ticks = this.dateToTicks(date.getFullYear(), (date.getMonth() + 1), date.getDate()) + this.timeToTicks(date.getHours(), date.getMinutes(), date.getSeconds());\n if (ticks === 0) {\n return 0.0;\n }\n var ticksPerDay = 10000 * 1000 * 60 * 60 * 24;\n var daysTo1899 = (((365 * 4 + 1) * 25 - 1) * 4 + 1) * 4 + ((365 * 4 + 1) * 25 - 1) * 3 - 367;\n var doubleDateOffset = daysTo1899 * ticksPerDay;\n var oaDateMinAsTicks = (((365 * 4 + 1) * 25 - 1) - 365) * ticksPerDay;\n if (ticks < oaDateMinAsTicks) {\n throw new Error('Arg_OleAutDateInvalid');\n }\n var millisPerDay = 1000 * 60 * 60 * 24;\n return ((ticks - doubleDateOffset) / 10000) / millisPerDay;\n };\n return Workbook;\n}());\nexport { Workbook };\nvar BuiltInProperties = /** @class */ (function () {\n function BuiltInProperties() {\n }\n return BuiltInProperties;\n}());\nexport { BuiltInProperties };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-hscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_HSCROLLCON = 'e-hscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVRIGHTARROW = 'e-nav-right-arrow';\nvar CLS_NAVLEFTARROW = 'e-nav-left-arrow';\nvar CLS_HSCROLLNAV = 'e-scroll-nav';\nvar CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';\nvar CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';\nvar CLS_DEVICE = 'e-scroll-device';\n/**\n * HScroll module is introduces horizontal scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs horizontal scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n * \n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n * @param options - Specifies HScroll model properties as options.\n * @param element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this) });\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = buildTag('div', { className: CLS_HSCROLLCON });\n var scrollDiv = buildTag('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n detach(nav[1]);\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var nav = buildTag('div', { id: id.concat('_right'), className: clsRight });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var navEle = buildTag('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = buildTag('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n ele.forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt) {\n var element = this.scrollEle;\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n var scrlLeft = element.scrollLeft;\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n element.scrollLeft = scrlLeft + scrollDis;\n }\n else {\n element.scrollLeft = scrlLeft - scrollDis;\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n element.scrollLeft = scrlLeft + scrollDis;\n }\n else {\n element.scrollLeft = scrlLeft - scrollDis;\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target);\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance;\n distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n clearInterval(this.timeout);\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (scrollLeft === 0) {\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n * @param {HScrollModel} newProp\n * @param {HScrollModel} oldProp\n * @returns void\n * @private\n */\n HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(40)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { createElement as buildTag, selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Browser } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { HScroll } from '../common/h-scroll';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_TBARSCROLL = 'e-hscroll-content';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n * @param options - Specifies Toolbar model properties as options.\n * @param element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n var ele = this.element;\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n if (this.trgtEle) {\n ele.appendChild(this.ctrlTem);\n }\n this.clearProperty();\n this.popObj = null;\n this.tbarAlign = null;\n this.remove(this.element, 'e-toolpop');\n ele.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {\n _this.element.removeAttribute(attrb);\n });\n };\n /**\n * Initialize the event handler\n * @private\n */\n Toolbar.prototype.preRender = function () {\n this.trigger('beforeCreate');\n this.scrollModule = null;\n this.popObj = null;\n this.tbarItemsCol = this.items;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resize.bind(this));\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.element.setAttribute('tabIndex', '0');\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && isVisible(this.popObj.element)) {\n this.popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyHScroll();\n this.keyModule.destroy();\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle) {\n this.popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n };\n Toolbar.prototype.destroyHScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {\n detach(el);\n });\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n if (this.tbarAlign) {\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyHScroll();\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n clst = this.element.querySelector('.' + CLS_ITEM);\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'SlideUp', duration: 100 };\n switch (e.action) {\n case 'moveRight':\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n var ele = void 0;\n var nodes = void 0;\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = popupCheck.children;\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {\n return;\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n this.element.removeAttribute('tabindex');\n }\n }\n break;\n case 'popupClose':\n if (popObj) {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'SlideDown', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT') {\n return;\n }\n e.preventDefault();\n var clst;\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n var contains = function (el) {\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE);\n };\n if (sib) {\n var skipEle = contains(sib);\n if (skipEle) {\n if (Object(sib)[pos + 'ElementSibling']) {\n sib = Object(sib)[pos + 'ElementSibling'];\n skipEle = contains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n }\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (contains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (contains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var trgt = e.target;\n var clsList = trgt.classList;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n itemObj = this.items[this.tbarEle.indexOf(clst)];\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n this.trigger('clicked', eventArgs);\n if (isPopupElement && !eventArgs.cancel) {\n this.popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n };\n ;\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'SlideUp', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.element.offsetHeight + 'px';\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'SlideDown', duration: 100 });\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Toolbar.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false', 'aria-orientation': 'horizontal',\n };\n attributes(this.element, ariaAttr);\n };\n Toolbar.prototype.renderControl = function () {\n this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n };\n Toolbar.prototype.initHScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n this.scrollModule = new HScroll({ scrollStep: 50, enableRtl: this.enableRtl }, innerItems[0]);\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyle(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var width = 0;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n width += (el.offsetWidth + parseFloat(window.getComputedStyle(el).marginRight));\n }\n });\n return width;\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = element.offsetWidth;\n var itemWidth;\n if (this.tbarAlign || this.scrollModule) {\n itemWidth = this.itemWidthCal(this.scrollModule ? innerItem.querySelector('.e-hscroll-content') : innerItem);\n }\n else {\n itemWidth = innerItem.offsetWidth;\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : (scrollNav ? scrollNav.offsetWidth * 2 : 0))) {\n return true;\n }\n else {\n return false;\n }\n };\n /** @hidden */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n switch (this.overflowMode) {\n case 'Scrollable':\n this.destroyHScroll();\n this.initHScroll(ele, ele.getElementsByClassName(CLS_ITEMS));\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');\n }\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n break;\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var eleWidth = (ele.offsetWidth - (innerNav.offsetWidth));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight) {\n var element = tbarObj.element;\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[index]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n setStyle(el, { display: '', height: eleHeight + 'px' });\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[i];\n if (tbarElement.classList.contains(CLS_SEPARATOR)) {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var eleHeight;\n var eleItem;\n eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_POPUP + ' )');\n eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : eleItem.offsetHeight;\n var ele;\n var popupPri = [];\n if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {\n ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);\n }\n else {\n ele = buildTag('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n setStyle(this.element, { overflow: '' });\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (element.offsetHeight),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose,\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n popup.appendTo(ele);\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n popup.hide();\n this.popObj = popup;\n this.element.setAttribute('aria-haspopup', 'true');\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if ((window.innerHeight + scrollVal) < popupElePos) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[i];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n };\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element.parentElement;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);\n mrgn += parseFloat((window.getComputedStyle(inEle[i])).marginLeft);\n var fstEleCheck = inEle[i] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n var eleWid_1 = fstEleCheck ? (inEle[i].offsetWidth + mrgn) : inEle[i].offsetWidth;\n if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {\n inEle[i].classList.add(CLS_POPUP);\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n itemPopCount++;\n }\n if ((inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth) {\n if (inEle[i].classList.contains(CLS_SEPARATOR)) {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n else {\n itemCount++;\n }\n if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= (inEle[i].offsetWidth + (mrgn));\n }\n else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n itemPopCount++;\n }\n else {\n eleWidth -= (inEle[i].offsetWidth + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n var nav = buildTag('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = buildTag('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var ele = this.element;\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n if (isNOU(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var width = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n this.popupEleRefresh(width, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n ele.setAttribute('aria-haspopup', 'false');\n ele.classList.remove('e-toolpop');\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(el.style.minWidth);\n btn.style.minWidth = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var checkOverflow;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n el.style.minWidth = '';\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[index].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n innerItem = [].slice.call(item.querySelector('.' + CLS_TBARSCROLL).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n var margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n var tbarWid = this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= popupNav.offsetWidth;\n var popWid = popupNav.offsetWidth + 'px';\n innerItem[2].removeAttribute('style');\n this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - innerItem[1].offsetWidth) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = (innerItem[0].offsetWidth + value) + 'px';\n this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(buildTag('div', { className: CLS_TBARLEFT }));\n alignDiv.push(buildTag('div', { className: CLS_TBARCENTER }));\n alignDiv.push(buildTag('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var itemEleDom;\n var innerItem;\n var innerPos;\n var items = this.items;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n if (!itemEleDom) {\n itemEleDom = buildTag('div', { className: CLS_ITEMS });\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[i]);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[i], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());\n if (innerPos) {\n if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {\n this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[i];\n keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n * @param {HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns void.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (len && len > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n enable(isEnable, ele);\n }\n isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);\n }\n else {\n var ele = void 0;\n ele = (len && len === 1) ? elements[0] : items;\n enable(isEnable, ele);\n }\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n * @param {ItemsModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns void.\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n var innerEle;\n var itemAgn = 'Left';\n if (isNOU(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNOU(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNOU(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item);\n if (this.tbarEle.length >= index && innerItems.length > 0) {\n this.destroyMode();\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.insertBefore(innerEle, ele.children[index]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);\n }\n this.items.splice(index, 0, item);\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns void.\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[index] && innerItems[index]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[index]);\n if (this.tbarAlign) {\n var indexAgn = void 0;\n indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);\n this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);\n }\n detach(innerItems[index]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n var e = void 0;\n try {\n if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n templateFn = templateCompiler(tempStr);\n detach(ele);\n item.template = tempStr;\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n tempArray = templateFn({}, this, 'template');\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = buildTag('input');\n item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = buildTag('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');\n var btnTxt = buildTag('div', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n new Button({ iconCss: iconCss, iconPosition: iconPos }, dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item) {\n var innerEle;\n var dom;\n innerEle = buildTag('div', { className: CLS_ITEM });\n innerEle.setAttribute('aria-disabled', 'false');\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', item.tooltipText);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', '-1');\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n return innerEle;\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', '-1');\n }\n this.activeEle = curEle;\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n curEle.removeAttribute('tabindex');\n }\n else {\n this.activeEle.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj) {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyHScroll();\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {ToolbarModel} newProp\n * @param {ToolbarModel} oldProp\n * @returns void\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldProperty = Object(oldProp.items[index])[property];\n var newProperty = Object(newProp.items[index])[property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && property === 'overflow' && this.popupPriCount !== 0) {\n --this.popupPriCount;\n }\n this.destroyMode();\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n detach(itemCol[index]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[index]], index);\n this.items.splice(index, 1);\n if (this.items[index].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n var wid = tEle.offsetWidth;\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);\n if (!isNOU(this.scrollModule)) {\n newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);\n }\n if (!isNOU(this.popObj)) {\n newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n * @param {number} index - Index value of target item.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns void.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n if (this.tbarEle[index]) {\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (value === true) {\n innerItems[index].classList.add(CLS_HIDDEN);\n }\n else {\n innerItems[index].classList.remove(CLS_HIDDEN);\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property(false)\n ], Toolbar.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';\nimport { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { addClass, isVisible, closest, attributes, classList, detach, select } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';\nimport { createElement as buildTag, setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, formatUnit, selectAll } from '@syncfusion/ej2-base';\nvar CLS_ACRDN_ROOT = 'e-acrdn-root';\nvar CLS_ROOT = 'e-accordion';\nvar CLS_ITEM = 'e-acrdn-item';\nvar CLS_ITEMFOCUS = 'e-item-focus';\nvar CLS_ITEMHIDE = 'e-hide';\nvar CLS_HEADER = 'e-acrdn-header';\nvar CLS_HEADERICN = 'e-acrdn-header-icon';\nvar CLS_HEADERCTN = 'e-acrdn-header-content';\nvar CLS_CONTENT = 'e-acrdn-panel';\nvar CLS_CTENT = 'e-acrdn-content';\nvar CLS_TOOGLEICN = 'e-toggle-icon';\nvar CLS_COLLAPSEICN = 'e-tgl-collapse-icon e-icons';\nvar CLS_EXPANDICN = 'e-expand-icon';\nvar CLS_RTL = 'e-rtl';\nvar CLS_CTNHIDE = 'e-content-hide';\nvar CLS_SLCT = 'e-select';\nvar CLS_SLCTED = 'e-selected';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_ANIMATE = 'e-animate';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_TOGANIMATE = 'e-toggle-animation';\nvar CLS_NEST = 'e-nested';\nvar CLS_EXPANDSTATE = 'e-expand-state';\nvar AccordionActionSettings = /** @class */ (function (_super) {\n __extends(AccordionActionSettings, _super);\n function AccordionActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], AccordionActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AccordionActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], AccordionActionSettings.prototype, \"easing\", void 0);\n return AccordionActionSettings;\n}(ChildProperty));\nexport { AccordionActionSettings };\nvar AccordionAnimationSettings = /** @class */ (function (_super) {\n __extends(AccordionAnimationSettings, _super);\n function AccordionAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"expand\", void 0);\n return AccordionAnimationSettings;\n}(ChildProperty));\nexport { AccordionAnimationSettings };\n/**\n * An item object that is used to configure Accordion items.\n */\nvar AccordionItem = /** @class */ (function (_super) {\n __extends(AccordionItem, _super);\n function AccordionItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"content\", void 0);\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"header\", void 0);\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"cssClass\", void 0);\n __decorate([\n Property(undefined)\n ], AccordionItem.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], AccordionItem.prototype, \"expanded\", void 0);\n return AccordionItem;\n}(ChildProperty));\nexport { AccordionItem };\n/**\n * The Accordion is a vertically collapsible content panel that displays one or more panels at a time within the available space.\n * ```html\n *
\n * \n * ```\n */\nvar Accordion = /** @class */ (function (_super) {\n __extends(Accordion, _super);\n /**\n * Initializes a new instance of the Accordion class.\n * @param options - Specifies Accordion model properties as options.\n * @param element - Specifies the element that is rendered as an Accordion.\n */\n function Accordion(options, element) {\n var _this = _super.call(this, options, element) || this;\n /**\n * Contains the keyboard configuration of the Accordion.\n */\n _this.keyConfigs = {\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n enter: 'enter',\n space: 'space',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n Accordion.prototype.destroy = function () {\n var _this = this;\n var ele = this.element;\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.isDestroy = true;\n this.templateEle.forEach(function (eleStr) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n });\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n if (this.trgtEle) {\n while (this.ctrlTem.firstChild) {\n ele.appendChild(this.ctrlTem.firstChild);\n }\n }\n ele.removeAttribute('style');\n ['aria-disabled', 'aria-multiselectable', 'role'].forEach(function (attrb) {\n _this.element.removeAttribute(attrb);\n });\n };\n Accordion.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.isNested = false;\n this.templateEle = [];\n if (!this.isDestroy) {\n this.isDestroy = false;\n }\n if (!isNOU(nested)) {\n nested.classList.add(CLS_NEST);\n this.isNested = true;\n }\n else {\n this.element.classList.add(CLS_ACRDN_ROOT);\n }\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n if (!this.enablePersistence || isNOU(this.expandedItems)) {\n this.expandedItems = [];\n }\n };\n Accordion.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Accordion.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n /**\n * To initialize the control rendering\n * @private\n */\n Accordion.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n };\n Accordion.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n setStyle(this.element, { 'width': width, 'height': height });\n var ariaAttr = {\n 'aria-disabled': 'false', 'role': 'presentation', 'aria-multiselectable': 'true'\n };\n if (this.expandedItems.length > 0) {\n this.initExpand = this.expandedItems;\n }\n attributes(this.element, ariaAttr);\n if (this.expandMode === 'Single') {\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n };\n Accordion.prototype.renderControl = function () {\n this.trgtEle = (this.element.children.length > 0) ? select('div', this.element) : null;\n this.renderItems();\n this.initItemExpand();\n };\n Accordion.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n if (!isNOU(this.keyModule)) {\n this.keyModule.destroy();\n }\n };\n Accordion.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n if (!this.isNested && !this.isDestroy) {\n rippleEffect(this.element, { selector: '.' + CLS_HEADER });\n }\n if (!this.isNested) {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n }\n };\n Accordion.prototype.focusIn = function (e) {\n e.target.parentElement.classList.add(CLS_ITEMFOCUS);\n };\n Accordion.prototype.focusOut = function (e) {\n e.target.parentElement.classList.remove(CLS_ITEMFOCUS);\n };\n Accordion.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.element.cloneNode(true);\n var innerEles = this.element.children;\n var content;\n addClass(innerEles, [CLS_ITEM]);\n [].slice.call(innerEles).forEach(function (el) {\n el.id = getUniqueID('acrdn_item');\n if (el.children.length > 0) {\n _this.add(el.children[0], CLS_HEADER);\n var header = el.children[0];\n attributes(header, { 'tabindex': '0', 'role': 'heading', 'aria-level': innerEles.length.toString() });\n header.id = getUniqueID('acrdn_header');\n EventHandler.add(header, 'focus', _this.focusIn, _this);\n EventHandler.add(header, 'blur', _this.focusOut, _this);\n var headerEle = header.firstElementChild;\n if (headerEle) {\n headerEle.classList.add(CLS_HEADERCTN);\n }\n content = el.children[1];\n if (content) {\n content.id = getUniqueID('acrdn_panel');\n header.setAttribute('aria-controls', content.id);\n content.style.display = '';\n el.classList.add(CLS_SLCT);\n el.children[0].appendChild(_this.toggleIconGenerate());\n classList(content, [CLS_CONTENT, CLS_CTNHIDE], []);\n attributes(content, { 'aria-labelledby': header.id, 'aria-hidden': 'true' });\n content = content.firstElementChild;\n if (content) {\n content.classList.add(CLS_CTENT);\n content.style.display = '';\n }\n }\n }\n });\n };\n Accordion.prototype.toggleIconGenerate = function () {\n var tglIcon = buildTag('div', { className: CLS_TOOGLEICN });\n var hdrColIcon = buildTag('span', { className: CLS_COLLAPSEICN });\n tglIcon.appendChild(hdrColIcon);\n return tglIcon;\n };\n Accordion.prototype.initItemExpand = function () {\n var len = this.initExpand.length;\n if (len === 0) {\n return;\n }\n if (this.expandMode === 'Single') {\n this.expandItem(true, this.initExpand[len - 1]);\n }\n else {\n for (var i = 0; i < len; i++) {\n this.expandItem(true, this.initExpand[i]);\n }\n }\n };\n Accordion.prototype.renderItems = function () {\n var _this = this;\n var ele = this.element;\n var innerItem;\n if (isNOU(this.initExpand)) {\n this.initExpand = [];\n }\n var items = this.items;\n if (!isNOU(this.trgtEle)) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n items.forEach(function (item, index) {\n innerItem = _this.renderInnerItem(item, index);\n ele.appendChild(innerItem);\n if (innerItem.childElementCount > 0) {\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n }\n });\n }\n };\n Accordion.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var eventArgs = {};\n var index;\n var tglIcon;\n var acrdEle = closest(trgt, '.' + CLS_ROOT);\n if (acrdEle !== this.element) {\n return;\n }\n trgt.classList.add('e-target');\n var acrdnItem = closest(trgt, '.' + CLS_ITEM);\n var acrdnHdr = closest(trgt, '.' + CLS_HEADER);\n var acrdnCtn = closest(trgt, '.' + CLS_CONTENT);\n if (acrdnItem && (isNOU(acrdnHdr) || isNOU(acrdnCtn))) {\n acrdnHdr = acrdnItem.children[0];\n acrdnCtn = acrdnItem.children[1];\n }\n if (acrdnHdr) {\n tglIcon = select('.' + CLS_TOOGLEICN, acrdnHdr);\n }\n var acrdnCtnItem;\n if (acrdnCtn) {\n acrdnCtnItem = closest(acrdnCtn, '.' + CLS_ITEM);\n }\n var acrdActive = [];\n index = this.getIndexByItem(acrdnItem);\n if (acrdnCtnItem) {\n eventArgs.item = this.items[this.getIndexByItem(acrdnCtnItem)];\n }\n eventArgs.originalEvent = e;\n var ctnCheck = !isNOU(tglIcon) && isNOU(this.trgtEle) && acrdnItem.childElementCount <= 1;\n if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {\n acrdnItem.appendChild(this.contentRendering(index));\n this.ariaAttrUpdate(acrdnItem);\n }\n this.trigger('clicked', eventArgs);\n var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));\n cntclkCheck = cntclkCheck && (isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === this.element));\n trgt.classList.remove('e-target');\n if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {\n return;\n }\n [].slice.call(this.element.children).forEach(function (el) {\n if (el.classList.contains(CLS_ACTIVE)) {\n acrdActive.push(el);\n }\n });\n var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));\n if (acrdAniEle.length > 0) {\n for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {\n var el = acrdAniEle_1[_i];\n acrdActive.push(el.parentElement);\n }\n }\n var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';\n var sameHeader = false;\n if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {\n var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);\n var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n if (isNOU(acrdnCtn_1)) {\n return;\n }\n sameHeader = (expandState === acrdnItem);\n if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {\n this.collapse(acrdnCtn_1);\n }\n else {\n if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {\n acrdActive.forEach(function (el) {\n _this.collapse(select('.' + CLS_CONTENT, el));\n el.classList.remove(CLS_EXPANDSTATE);\n });\n }\n this.expand(acrdnCtn_1);\n }\n if (!isNOU(expandState) && !sameHeader) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n }\n };\n Accordion.prototype.eleMoveFocus = function (action, root, trgt) {\n var clst;\n var clstItem = closest(trgt, '.' + CLS_ITEM);\n if (trgt === root) {\n clst = ((action === 'moveUp' ? trgt.lastElementChild : trgt).querySelector('.' + CLS_HEADER));\n }\n else if (trgt.classList.contains(CLS_HEADER)) {\n clstItem = (action === 'moveUp' ? clstItem.previousElementSibling : clstItem.nextElementSibling);\n if (clstItem) {\n clst = select('.' + CLS_HEADER, clstItem);\n }\n }\n if (clst) {\n clst.focus();\n }\n };\n Accordion.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT') {\n return;\n }\n e.preventDefault();\n var clst;\n var root = this.element;\n var content;\n switch (e.action) {\n case 'moveUp':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'moveDown':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'space':\n case 'enter':\n content = trgt.nextElementSibling;\n if (!isNOU(content) && content.classList.contains(CLS_CONTENT)) {\n if (content.getAttribute('e-animate') !== 'true') {\n trgt.click();\n }\n }\n else {\n trgt.click();\n }\n break;\n case 'home':\n case 'end':\n clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];\n clst.focus();\n break;\n }\n };\n Accordion.prototype.headerEleGenerate = function () {\n var header = buildTag('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });\n var ariaAttr = {\n 'tabindex': '0', 'role': 'heading', 'aria-expanded': 'false', 'aria-selected': 'false',\n 'aria-disabled': 'false', 'aria-level': this.items.length.toString()\n };\n attributes(header, ariaAttr);\n return header;\n };\n Accordion.prototype.renderInnerItem = function (item, index) {\n var innerEle;\n innerEle = buildTag('div', { className: CLS_ITEM });\n innerEle.id = getUniqueID('acrdn_item');\n if (item.header) {\n var ctnEle = this.headerEleGenerate();\n var hdrEle = buildTag('div', { className: CLS_HEADERCTN });\n ctnEle.appendChild(hdrEle);\n ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));\n innerEle.appendChild(ctnEle);\n }\n var hdr = select('.' + CLS_HEADER, innerEle);\n if (item.expanded && !isNOU(index) && (!this.enablePersistence)) {\n if (this.initExpand.indexOf(index) === -1) {\n this.initExpand.push(index);\n }\n }\n if (item.cssClass) {\n innerEle.classList.add(item.cssClass);\n }\n if (item.iconCss) {\n var hdrIcnEle = buildTag('div', { className: CLS_HEADERICN });\n var icon = buildTag('span', { className: item.iconCss + ' e-icons' });\n hdrIcnEle.appendChild(icon);\n if (isNOU(hdr)) {\n hdr = this.headerEleGenerate();\n hdr.appendChild(hdrIcnEle);\n innerEle.appendChild(hdr);\n }\n else {\n hdr.insertBefore(hdrIcnEle, hdr.childNodes[0]);\n }\n }\n if (item.content) {\n var hdrIcon = this.toggleIconGenerate();\n if (isNOU(hdr)) {\n hdr = this.headerEleGenerate();\n innerEle.appendChild(hdr);\n }\n hdr.appendChild(hdrIcon);\n this.add(innerEle, CLS_SLCT);\n }\n return innerEle;\n };\n Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {\n var templateFn;\n var temString;\n try {\n if (document.querySelectorAll(value).length) {\n var eleVal = document.querySelector(value);\n temString = eleVal.outerHTML.trim();\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n catch (e) {\n templateFn = templateCompiler(value);\n }\n if (!isNOU(templateFn) && templateFn().length > 0 && !(isNOU(templateFn()[0].tagName) && templateFn().length === 1)) {\n [].slice.call(templateFn()).forEach(function (el) {\n if (!isNOU(el.tagName)) {\n el.style.display = '';\n }\n ele.appendChild(el);\n });\n }\n else if (ele.childElementCount === 0) {\n ele.innerHTML = value;\n }\n if (!isNOU(temString)) {\n this.templateEle.push(value);\n }\n return ele;\n };\n Accordion.prototype.ariaAttrUpdate = function (itemEle) {\n var header = select('.' + CLS_HEADER, itemEle);\n var content = select('.' + CLS_CONTENT, itemEle);\n header.setAttribute('aria-controls', content.id);\n content.setAttribute('aria-labelledby', header.id);\n };\n Accordion.prototype.contentRendering = function (index) {\n var content = this.items[index].content;\n var itemcnt = buildTag('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });\n attributes(itemcnt, { 'aria-hidden': 'true' });\n var ctn = buildTag('div', { className: CLS_CTENT });\n itemcnt.appendChild(this.fetchElement(ctn, content, index, false));\n return itemcnt;\n };\n Accordion.prototype.expand = function (trgt) {\n var eventArgs;\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM);\n if (isNOU(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE)) {\n return;\n }\n var acrdnRoot = closest(trgtItemEle, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n var animation = {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n eventArgs = { element: trgtItemEle,\n item: this.items[this.getIndexByItem(trgtItemEle)],\n isExpanded: true };\n var eff = animation.name;\n this.trigger('expanding', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n icon.classList.add(CLS_TOGANIMATE);\n this.expandedItemsPush(trgtItemEle);\n if (!isNOU(expandState)) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n if ((animation.name === 'None')) {\n this.expandProgress('begin', icon, trgt, trgtItemEle, eventArgs);\n this.expandProgress('end', icon, trgt, trgtItemEle, eventArgs);\n return;\n }\n this.expandAnimation(eff, icon, trgt, trgtItemEle, animation, eventArgs);\n };\n Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {\n var _this = this;\n var height;\n var trgtHgt;\n if (ef === 'SlideDown') {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n trgt.style.position = 'absolute';\n height = trgtItemEle.offsetHeight;\n trgtHgt = trgt.offsetHeight;\n trgt.style.maxHeight = (trgt.offsetHeight) + 'px';\n trgtItemEle.style.maxHeight = '';\n };\n animate.progress = function () {\n trgtItemEle.style.minHeight = (height + trgt.offsetHeight) + 'px';\n };\n animate.end = function () {\n setStyle(trgt, { 'position': '', 'maxHeight': '' });\n trgtItemEle.style.minHeight = '';\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n else {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n };\n animate.end = function () {\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.expandProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(trgt, CLS_CTNHIDE);\n this.add(trgtItemEle, CLS_SLCTED);\n this.add(icon, CLS_EXPANDICN);\n if (progress === 'end') {\n this.add(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'false');\n attributes(trgt.previousElementSibling, { 'aria-selected': 'true', 'aria-expanded': 'true' });\n icon.classList.remove(CLS_TOGANIMATE);\n this.trigger('expanded', eventArgs);\n }\n };\n Accordion.prototype.expandedItemsPush = function (item) {\n var index = this.getIndexByItem(item);\n if (this.expandedItems.indexOf(index) === -1) {\n this.expandedItems.push(index);\n }\n };\n Accordion.prototype.getIndexByItem = function (item) {\n return [].slice.call(this.element.children).indexOf(item);\n };\n Accordion.prototype.expandedItemsPop = function (item) {\n var index = this.getIndexByItem(item);\n this.expandedItems.splice(this.expandedItems.indexOf(index), 1);\n };\n Accordion.prototype.collapse = function (trgt) {\n var eventArgs;\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM);\n if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {\n return;\n }\n var animation = {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n eventArgs = { element: trgtItemEle,\n item: this.items[this.getIndexByItem(trgtItemEle)],\n isExpanded: false };\n var eff = animation.name;\n this.trigger('expanding', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.expandedItemsPop(trgtItemEle);\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n icon.classList.add(CLS_TOGANIMATE);\n if ((animation.name === 'None')) {\n this.collapseProgress('begin', icon, trgt, trgtItemEle, eventArgs);\n this.collapseProgress('end', icon, trgt, trgtItemEle, eventArgs);\n return;\n }\n this.collapseAnimation(eff, trgt, trgtItemEle, icon, animation, eventArgs);\n };\n Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {\n var _this = this;\n var height;\n var trgtHeight;\n var itemHeight;\n var remain;\n if (ef === 'SlideUp') {\n animate.begin = function () {\n itemHeight = trgtItEl.offsetHeight;\n trgtItEl.style.minHeight = itemHeight + 'px';\n trgt.style.position = 'absolute';\n height = trgtItEl.offsetHeight;\n trgtHeight = trgt.offsetHeight;\n trgt.style.maxHeight = trgtHeight + 'px';\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.progress = function () {\n remain = ((height - (trgtHeight - trgt.offsetHeight)));\n if (remain < itemHeight) {\n trgtItEl.style.minHeight = remain + 'px';\n }\n };\n animate.end = function () {\n trgt.style.display = 'none';\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n trgtItEl.style.minHeight = '';\n setStyle(trgt, { 'position': '', 'maxHeight': '', 'display': '' });\n };\n }\n else {\n animate.begin = function () {\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.end = function () {\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.collapseProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(icon, CLS_EXPANDICN);\n this.remove(trgtItemEle, CLS_SLCTED);\n if (progress === 'end') {\n this.add(trgt, CLS_CTNHIDE);\n icon.classList.remove(CLS_TOGANIMATE);\n this.remove(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'true');\n attributes(trgt.previousElementSibling, { 'aria-selected': 'false', 'aria-expanded': 'false' });\n this.trigger('expanded', eventArgs);\n }\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Accordion.prototype.getModuleName = function () {\n return 'accordion';\n };\n Accordion.prototype.itemAttribUpdate = function () {\n var itemEle = [].slice.call(this.element.children);\n var itemLen = this.items.length;\n itemEle.forEach(function (ele) {\n select('.' + CLS_HEADER, ele).setAttribute('aria-level', '' + itemLen);\n });\n };\n /**\n * Adds new item to the Accordion with the specified index of the Accordion.\n * @param {AccordionItemModel} item - Item array that is to be added to the Accordion.\n * @param {number} index - Number value that determines where the item should be added.\n * By default, item is added at the last index if the index is not specified.\n * @returns void\n */\n Accordion.prototype.addItem = function (item, index) {\n var ele = this.element;\n if (isNOU(index)) {\n index = this.items.length;\n }\n if (ele.childElementCount >= index) {\n this.items.splice(index, 0, item);\n var innerItemEle = this.renderInnerItem(item, index);\n if (ele.childElementCount === index) {\n ele.appendChild(innerItemEle);\n }\n else {\n ele.insertBefore(innerItemEle, ele.children[index]);\n }\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', this.focusIn, this);\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', this.focusOut, this);\n this.itemAttribUpdate();\n }\n this.expandedItems = [];\n this.expandedItemRefresh(ele);\n if (item.expanded) {\n this.expandItem(true, index);\n }\n };\n Accordion.prototype.expandedItemRefresh = function (ele) {\n var _this = this;\n [].slice.call(ele.children).forEach(function (el) {\n if (el.classList.contains(CLS_SLCTED)) {\n _this.expandedItemsPush(el);\n }\n });\n };\n /**\n * Dynamically removes item from Accordion.\n * @param {number} index - Number value that determines which item should be removed.\n * @returns void.\n */\n Accordion.prototype.removeItem = function (index) {\n var ele = this.element.children[index];\n if (isNOU(ele)) {\n return;\n }\n detach(ele);\n this.items.splice(index, 1);\n this.itemAttribUpdate();\n this.expandedItems = [];\n this.expandedItemRefresh(this.element);\n };\n /**\n * Sets focus to the specified index item header in Accordion.\n * @param {number} index - Number value that determines which item should be focused.\n * @returns void.\n */\n Accordion.prototype.select = function (index) {\n var ele = this.element.children[index];\n if (isNOU(ele) || isNOU(select('.' + CLS_HEADER, ele))) {\n return;\n }\n ele.children[0].focus();\n };\n /**\n * Shows or hides the specified item from Accordion.\n * @param {number} index - Number value that determines which item should be hidden/shown.\n * @param {Boolean} isHidden - Boolean value that determines the action either hide (true) or show (false). Default value is false.\n * If the `isHidden` value is false, the item is shown or else item it is hidden.\n * @returns void.\n */\n Accordion.prototype.hideItem = function (index, isHidden) {\n var ele = this.element.children[index];\n if (isNOU(ele)) {\n return;\n }\n if (isNOU(isHidden)) {\n isHidden = true;\n }\n isHidden ? this.add(ele, CLS_ITEMHIDE) : this.remove(ele, CLS_ITEMHIDE);\n };\n /**\n * Enables/Disables the specified Accordion item.\n * @param {number} index - Number value that determines which item should be enabled/disabled.\n * @param {boolean} isEnable - Boolean value that determines the action as enable (true) or disable (false).\n * If the `isEnable` value is true, the item is enabled or else it is disabled.\n * @returns void.\n */\n Accordion.prototype.enableItem = function (index, isEnable) {\n var ele = this.element.children[index];\n if (isNOU(ele)) {\n return;\n }\n var eleHeader = ele.firstElementChild;\n if (isEnable) {\n this.remove(ele, CLS_DISABLE);\n attributes(eleHeader, { 'tabindex': '0', 'aria-disabled': 'false' });\n eleHeader.focus();\n }\n else {\n if (ele.classList.contains(CLS_ACTIVE)) {\n this.expandItem(false, index);\n this.eleMoveFocus('movedown', this.element, eleHeader);\n }\n this.add(ele, CLS_DISABLE);\n eleHeader.setAttribute('aria-disabled', 'true');\n eleHeader.removeAttribute('tabindex');\n }\n };\n /**\n * Expands/Collapses the specified Accordion item.\n * @param {boolean} isExpand - Boolean value that determines the action as expand or collapse.\n * @param {number} index - Number value that determines which item should be expanded/collapsed.`index` is optional parameter.\n * Without Specifying index, based on the `isExpand` value all Accordion item can be expanded or collapsed.\n * @returns void.\n */\n Accordion.prototype.expandItem = function (isExpand, index) {\n var _this = this;\n var root = this.element;\n if (isNOU(index)) {\n if (this.expandMode === 'Single' && isExpand) {\n var ele = root.children[root.childElementCount - 1];\n this.itemExpand(isExpand, ele, this.getIndexByItem(ele));\n }\n else {\n [].slice.call(this.element.children).forEach(function (el) {\n _this.itemExpand(isExpand, el, _this.getIndexByItem(el));\n });\n }\n }\n else {\n var ele = this.element.children[index];\n if (isNOU(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {\n return;\n }\n else {\n if (this.expandMode === 'Single') {\n this.expandItem(false);\n }\n this.itemExpand(isExpand, ele, index);\n }\n }\n };\n Accordion.prototype.itemExpand = function (isExpand, ele, index) {\n var ctn = ele.children[1];\n if (ele.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (isNOU(ctn) && isExpand) {\n ctn = this.contentRendering(index);\n ele.appendChild(ctn);\n this.ariaAttrUpdate(ele);\n }\n else if (isNOU(ctn)) {\n return;\n }\n isExpand ? this.expand(ctn) : this.collapse(ctn);\n };\n Accordion.prototype.destroyItems = function () {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n };\n Accordion.prototype.updateItem = function (item, index) {\n if (!isNOU(item)) {\n var itemObj = this.items[index];\n this.items.splice(index, 1);\n detach(item);\n this.addItem(itemObj, index);\n }\n };\n Accordion.prototype.getPersistData = function () {\n var keyEntity = ['expandedItems'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {AccordionModel} newProp\n * @param {AccordionModel} oldProp\n * @returns void\n * @private\n */\n Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {\n var acrdn = this.element;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var item = selectAll('.' + CLS_ITEM, this.element)[index];\n if (property === 'header' || property === 'iconCss' || property === 'expanded') {\n this.updateItem(item, index);\n }\n if (property === 'cssClass' && !isNOU(item)) {\n item.classList.remove(oldVal);\n item.classList.add(newVal);\n }\n if (property === 'content' && !isNOU(item) && item.children.length === 2) {\n if (item.classList.contains(CLS_SLCTED)) {\n this.expandItem(false, index);\n }\n detach(item.querySelector('.' + CLS_CONTENT));\n }\n }\n }\n else {\n this.destroyItems();\n this.renderItems();\n this.initItemExpand();\n }\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(acrdn, CLS_RTL) : this.remove(acrdn, CLS_RTL);\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyle(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'expandMode':\n if (newProp.expandMode === 'Single') {\n this.element.setAttribute('aria-multiselectable', 'false');\n if (this.expandedItems.length > 1) {\n this.expandItem(false);\n }\n }\n else {\n this.element.setAttribute('aria-multiselectable', 'true');\n }\n break;\n }\n }\n };\n __decorate([\n Collection([], AccordionItem)\n ], Accordion.prototype, \"items\", void 0);\n __decorate([\n Property('100%')\n ], Accordion.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Accordion.prototype, \"height\", void 0);\n __decorate([\n Property('Multiple')\n ], Accordion.prototype, \"expandMode\", void 0);\n __decorate([\n Complex({}, AccordionAnimationSettings)\n ], Accordion.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"expanding\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"expanded\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"destroyed\", void 0);\n Accordion = __decorate([\n NotifyPropertyChanges\n ], Accordion);\n return Accordion;\n}(Component));\nexport { Accordion };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, ChildProperty, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';\nimport { attributes, Animation } from '@syncfusion/ej2-base';\nimport { Browser, Collection, setValue, getValue, getUniqueID, getInstance } from '@syncfusion/ej2-base';\nimport { select, selectAll, closest, createElement, detach, append, rippleEffect, isVisible } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { calculatePosition, isCollide, fit, getScrollableParent, getZindexPartial } from '@syncfusion/ej2-popups';\nvar DOWNARROW = 'downarrow';\nvar ENTER = 'enter';\nvar ESCAPE = 'escape';\nvar FOCUSED = 'e-focused';\nvar HEADER = 'e-menu-header';\nvar LEFTARROW = 'leftarrow';\nvar RIGHTARROW = 'rightarrow';\nvar RTL = 'e-rtl';\nvar SELECTED = 'e-selected';\nvar SEPARATOR = 'e-separator';\nvar UPARROW = 'uparrow';\nvar WRAPPER = 'e-contextmenu-wrapper';\nvar CARET = 'e-caret';\nvar ITEM = 'e-menu-item';\nvar DISABLED = 'e-disabled';\nvar HIDE = 'e-menu-hide';\nvar ICONS = 'e-icons';\n/**\n * Specifies context menu items.\n */\nvar MenuItem = /** @class */ (function (_super) {\n __extends(MenuItem, _super);\n function MenuItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], MenuItem.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], MenuItem.prototype, \"separator\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], MenuItem.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"url\", void 0);\n return MenuItem;\n}(ChildProperty));\nexport { MenuItem };\n/**\n * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.\n * ```html\n *
\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ContextMenu = /** @class */ (function (_super) {\n __extends(ContextMenu, _super);\n /**\n * Constructor for creating the widget.\n * @private\n */\n function ContextMenu(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.animation = new Animation({});\n _this.navIdx = [];\n _this.isTapHold = false;\n return _this;\n }\n /**\n * Initialized animation with parent menu animation settings.\n * @private\n */\n ContextMenu.prototype.preRender = function () {\n if (this.element.tagName === 'EJS-CONTEXTMENU') {\n this.element.style.display = 'none';\n this.element.classList.remove('e-' + this.getModuleName());\n this.element.classList.remove('e-control');\n var ejInst = getValue('ej2_instances', this.element);\n var ul = createElement('ul');\n this.ngElement = this.element;\n this.element = ul;\n this.element.classList.add('e-control');\n this.element.classList.add('e-' + this.getModuleName());\n setValue('ej2_instances', ejInst, this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID(this.getModuleName());\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n ContextMenu.prototype.render = function () {\n this.initWrapper();\n this.renderItems();\n this.wireEvents();\n };\n ContextMenu.prototype.initWrapper = function () {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n wrapper = createElement('div', { className: WRAPPER });\n document.body.appendChild(wrapper);\n }\n if (this.cssClass) {\n wrapper.classList.add(this.cssClass);\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n attributes(this.element, { 'role': 'menu', 'tabindex': '0' });\n wrapper.appendChild(this.element);\n this.element.style.zIndex = getZindexPartial(this.element).toString();\n };\n ContextMenu.prototype.renderItems = function () {\n if (!this.items.length) {\n this.items = ListBase.createJsonFromElement(this.element);\n this.element.innerHTML = '';\n }\n var ul = this.createItems(this.items);\n append(Array.prototype.slice.call(ul.children), this.element);\n this.element.classList.add('e-menu-parent');\n };\n ContextMenu.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (Browser.isIos) {\n new Touch(target, { tapHold: this.touchHandler.bind(this) });\n }\n else {\n EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);\n }\n }\n this.targetElement = target;\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(wrapper, 'mouseover', this.moverHandler, this);\n EventHandler.add(document, 'mousedown', this.mouseDownHandler, this);\n }\n this.delegateClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.delegateClickHandler, this);\n new KeyboardEvents(wrapper, {\n keyAction: this.keyBoardHandler.bind(this),\n keyConfigs: {\n downarrow: DOWNARROW,\n uparrow: UPARROW,\n enter: ENTER,\n leftarrow: LEFTARROW,\n rightarrow: RIGHTARROW,\n escape: ESCAPE\n }\n });\n rippleEffect(wrapper, { selector: '.' + ITEM });\n };\n ContextMenu.prototype.mouseDownHandler = function (e) {\n if (closest(e.target, '.' + WRAPPER) !== this.getWrapper()) {\n this.closeMenu(this.navIdx.length, e);\n }\n };\n ContextMenu.prototype.keyBoardHandler = function (e) {\n e.preventDefault();\n switch (e.action) {\n case DOWNARROW:\n case UPARROW:\n this.upDownKeyHandler(e);\n break;\n case RIGHTARROW:\n this.rightEnterKeyHandler(e);\n break;\n case LEFTARROW:\n this.leftEscKeyHandler(e);\n break;\n case ENTER:\n this.rightEnterKeyHandler(e);\n break;\n case ESCAPE:\n this.leftEscKeyHandler(e);\n break;\n }\n };\n ContextMenu.prototype.upDownKeyHandler = function (e) {\n var wrapper = this.getWrapper();\n var cul = wrapper.children[this.navIdx.length];\n var defaultIdx = e.action === DOWNARROW ? 0 : cul.childElementCount - 1;\n var fliIdx = defaultIdx;\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n fliIdx = this.getIdx(cul, fli);\n fli.classList.remove(FOCUSED);\n e.action === DOWNARROW ? fliIdx++ : fliIdx--;\n if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {\n fliIdx = defaultIdx;\n }\n }\n var cli = cul.children[fliIdx];\n fliIdx = this.isValidLI(cli, fliIdx, e.action);\n cul.children[fliIdx].classList.add(FOCUSED);\n cul.children[fliIdx].focus();\n };\n ContextMenu.prototype.isValidLI = function (cli, index, action) {\n var wrapper = this.getWrapper();\n var cul = wrapper.children[this.navIdx.length];\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n ((action === DOWNARROW) || (action === RIGHTARROW)) ? index++ : index--;\n }\n cli = cul.children[index];\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n index = this.isValidLI(cli, index, action);\n }\n return index;\n };\n ContextMenu.prototype.rightEnterKeyHandler = function (e) {\n var eventArgs;\n var wrapper = this.getWrapper();\n var cul = wrapper.children[this.navIdx.length];\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n var fliIdx = this.getIdx(cul, fli);\n var navIdx = this.navIdx.concat(fliIdx);\n var index = void 0;\n var item = this.getItem(navIdx);\n if (item.items.length) {\n this.navIdx.push(fliIdx);\n this.openMenu(fli, item, null, null, e);\n fli.classList.remove(FOCUSED);\n fli.classList.add(SELECTED);\n if (e.action === ENTER) {\n eventArgs = { element: fli, item: item };\n this.trigger('select', eventArgs);\n }\n fli.focus();\n cul = wrapper.children[this.navIdx.length];\n index = this.isValidLI(cul.children[0], 0, e.action);\n cul.children[index].classList.add(FOCUSED);\n cul.children[index].focus();\n }\n else {\n if (e.action === ENTER) {\n fli.classList.remove(FOCUSED);\n fli.classList.add(SELECTED);\n eventArgs = { element: fli, item: item };\n this.trigger('select', eventArgs);\n this.closeMenu(null, e);\n }\n }\n }\n };\n ContextMenu.prototype.leftEscKeyHandler = function (e) {\n if (this.navIdx.length) {\n var wrapper = this.getWrapper();\n this.closeMenu(this.navIdx.length, e);\n var cul = wrapper.children[this.navIdx.length];\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.setAttribute('aria-expanded', 'false');\n sli.classList.remove(SELECTED);\n sli.classList.add(FOCUSED);\n sli.focus();\n }\n }\n else {\n if (e.action === ESCAPE) {\n this.closeMenu(null, e);\n }\n }\n };\n ContextMenu.prototype.scrollHandler = function (e) {\n this.closeMenu(null, e);\n };\n ContextMenu.prototype.touchHandler = function (e) {\n this.isTapHold = true;\n this.cmenuHandler(e.originalEvent);\n };\n ContextMenu.prototype.cmenuHandler = function (e) {\n e.preventDefault();\n this.closeMenu(null, e);\n if (this.canOpen(e.target)) {\n if (e.changedTouches) {\n this.openMenu(null, null, e.changedTouches[0].pageY + 1, e.changedTouches[0].pageX + 1, e);\n }\n else {\n this.openMenu(null, null, e.pageY + 1, e.pageX + 1, e);\n }\n }\n };\n /**\n * Closes the ContextMenu if it is opened.\n */\n ContextMenu.prototype.close = function () {\n this.closeMenu();\n };\n ContextMenu.prototype.closeMenu = function (ulIndex, e) {\n if (ulIndex === void 0) { ulIndex = 0; }\n if (e === void 0) { e = null; }\n if (this.isMenuVisible()) {\n var ul = void 0;\n var item = void 0;\n var items = void 0;\n var closeArgs = void 0;\n var beforeCloseArgs = void 0;\n var wrapper = this.getWrapper();\n for (var cnt = wrapper.childElementCount; cnt > ulIndex; cnt--) {\n item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n items = item ? item.items : this.items;\n ul = wrapper.children[cnt - 1];\n beforeCloseArgs = { element: ul, parentItem: item, items: items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n if (!beforeCloseArgs.cancel) {\n this.toggleAnimation(ul, false);\n this.navIdx.length = ulIndex ? ulIndex - 1 : ulIndex;\n closeArgs = { element: ul, parentItem: item, items: items };\n this.trigger('onClose', closeArgs);\n }\n }\n }\n };\n ContextMenu.prototype.isMenuVisible = function () {\n return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));\n };\n ContextMenu.prototype.canOpen = function (target) {\n var canOpen = true;\n if (this.filter) {\n canOpen = false;\n var filter = this.filter.split(' ');\n for (var i = 0, len = target.classList.length; i < len; i++) {\n if (filter.indexOf(target.classList[i]) > -1) {\n canOpen = true;\n break;\n }\n }\n }\n return canOpen;\n };\n /**\n * This method is used to open the ContextMenu in specified position.\n * @param top To specify ContextMenu vertical positioning.\n * @param left To specify ContextMenu horizontal positioning.\n * @returns void\n */\n ContextMenu.prototype.open = function (top, left) {\n this.openMenu(null, null, top, left);\n };\n ContextMenu.prototype.openMenu = function (li, item, top, left, e) {\n if (top === void 0) { top = 0; }\n if (left === void 0) { left = 0; }\n if (e === void 0) { e = null; }\n var ul;\n var navIdx;\n var wrapper = this.getWrapper();\n if (li) {\n ul = this.createItems(item.items);\n if (Browser.isDevice) {\n wrapper.lastChild.style.display = 'none';\n var data = { text: item.text, iconCss: ICONS + ' e-previous' };\n var hdata = new MenuItem(this.items[0], null, data, true);\n var hli = this.createItems([hdata]).children[0];\n hli.classList.add(HEADER);\n ul.insertBefore(hli, ul.children[0]);\n }\n ul.style.zIndex = this.element.style.zIndex;\n wrapper.appendChild(ul);\n }\n else {\n ul = this.element;\n }\n navIdx = this.getIndex(li ? li.textContent : null);\n var items = li ? item.items : this.items;\n var eventArgs = { element: ul, items: items, parentItem: item, event: e, cancel: false };\n this.trigger('beforeOpen', eventArgs);\n if (eventArgs.cancel) {\n this.navIdx.pop();\n }\n else {\n this.setPosition(li, ul, top, left);\n this.toggleAnimation(ul);\n }\n };\n ContextMenu.prototype.setPosition = function (li, ul, top, left) {\n var px = 'px';\n this.toggleVisiblity(ul);\n if (ul === this.element) {\n var collide = isCollide(ul, null, left, top);\n if (collide.indexOf('right') > -1) {\n left = left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n var offset = fit(ul, null, { X: false, Y: true }, { top: top, left: left });\n top = offset.top - 20;\n }\n collide = isCollide(ul, null, left, top);\n if (collide.indexOf('left') > -1) {\n var offset = fit(ul, null, { X: true, Y: false }, { top: top, left: left });\n left = offset.left;\n }\n }\n else {\n if (Browser.isDevice) {\n top = Number(this.element.style.top.replace(px, ''));\n left = Number(this.element.style.left.replace(px, ''));\n }\n else {\n var x = this.enableRtl ? 'left' : 'right';\n var offset = calculatePosition(li, x, 'top');\n top = offset.top;\n left = offset.left;\n var collide = isCollide(ul, null, this.enableRtl ? left - ul.offsetWidth : left, top);\n var xCollision = collide.indexOf('left') > -1 || collide.indexOf('right') > -1;\n if (xCollision) {\n offset = calculatePosition(li, this.enableRtl ? 'right' : 'left', 'top');\n left = offset.left;\n }\n if (this.enableRtl || xCollision) {\n left = (this.enableRtl && xCollision) ? left : left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n offset = fit(ul, null, { X: false, Y: true }, { top: top, left: left });\n top = offset.top;\n }\n }\n }\n this.toggleVisiblity(ul, false);\n ul.style.top = top + px;\n ul.style.left = left + px;\n };\n ContextMenu.prototype.toggleVisiblity = function (ul, isVisible) {\n if (isVisible === void 0) { isVisible = true; }\n ul.style.visibility = isVisible ? 'hidden' : '';\n ul.style.display = isVisible ? 'block' : 'none';\n };\n ContextMenu.prototype.createItems = function (items) {\n var _this = this;\n var showIcon = this.hasField(items, 'iconCss');\n var listBaseOptions = {\n showIcon: showIcon,\n moduleName: 'menu',\n itemCreating: function (args) {\n args.curData.htmlAttributes = {\n role: 'menuitem',\n tabindex: '-1'\n };\n },\n itemCreated: function (args) {\n if (args.curData.separator) {\n args.item.classList.add(SEPARATOR);\n args.item.removeAttribute('role');\n }\n if (showIcon && !args.curData.iconCss && !args.curData.separator) {\n args.item.classList.add('e-blankicon');\n }\n if (args.curData.items && args.curData.items.length) {\n var span = createElement('span', { className: ICONS + ' ' + CARET });\n args.item.appendChild(span);\n args.item.setAttribute('aria-haspopup', 'true');\n args.item.setAttribute('aria-expanded', 'false');\n args.item.removeAttribute('role');\n args.item.classList.add('e-menu-caret-icon');\n }\n var eventArgs = { item: args.curData, element: args.item };\n _this.trigger('beforeItemRender', eventArgs);\n }\n };\n var ul = ListBase.createList(this.toRawObject(items.slice()), listBaseOptions, true);\n ul.setAttribute('tabindex', '0');\n return ul;\n };\n ContextMenu.prototype.toRawObject = function (items) {\n var item;\n var menuItems = [];\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i].properties;\n menuItems.push(item);\n }\n return menuItems;\n };\n ContextMenu.prototype.moverHandler = function (e) {\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.getLI(trgt);\n if (cli && closest(cli, '.' + WRAPPER)) {\n var fli = select('.' + FOCUSED, wrapper);\n if (fli) {\n fli.classList.remove(FOCUSED);\n }\n cli.classList.add(FOCUSED);\n if (!this.showItemOnClick) {\n this.clickHandler(e);\n }\n }\n };\n ContextMenu.prototype.hasField = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][field]) {\n return true;\n }\n }\n return false;\n };\n ContextMenu.prototype.getWrapper = function () {\n return closest(this.element, '.' + WRAPPER);\n };\n ContextMenu.prototype.clickHandler = function (e) {\n if (this.isTapHold) {\n this.isTapHold = false;\n }\n else {\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.getLI(trgt);\n var cliWrapper = cli ? closest(cli, '.' + WRAPPER) : null;\n var isInstLI = cli && cliWrapper && wrapper.firstElementChild.id === cliWrapper.firstElementChild.id;\n if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {\n this.setLISelected(cli);\n var navIdx = this.getIndex(cli.textContent);\n var item = this.getItem(navIdx);\n var eventArgs = { element: cli, item: item };\n this.trigger('select', eventArgs);\n }\n if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {\n var ul = void 0;\n if (cli.classList.contains(HEADER)) {\n ul = wrapper.children[this.navIdx.length - 1];\n this.toggleAnimation(ul);\n var sli = this.getLIByClass(ul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n detach(cli.parentNode);\n this.navIdx.pop();\n }\n else {\n if (!cli.classList.contains(SEPARATOR)) {\n var showSubMenu = true;\n var cul = cli.parentNode;\n var cliIdx = this.getIdx(cul, cli);\n if (!Browser.isDevice) {\n var culIdx = this.getIdx(wrapper, cul);\n if (this.navIdx[culIdx] === cliIdx) {\n showSubMenu = false;\n }\n if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || showSubMenu)) {\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n this.closeMenu(culIdx + 1, e);\n }\n }\n if (showSubMenu) {\n var idx = this.navIdx.concat(cliIdx);\n var item = this.getItem(idx);\n if (item.items.length) {\n if (e.type === 'mouseover') {\n this.setLISelected(cli);\n }\n cli.setAttribute('aria-expanded', 'true');\n this.navIdx.push(cliIdx);\n this.openMenu(cli, item, null, null, e);\n }\n else {\n if (e.type !== 'mouseover') {\n this.closeMenu(null, e);\n }\n }\n }\n }\n }\n }\n else {\n if (trgt.tagName !== 'UL' || trgt.parentElement !== wrapper) {\n if (!cli || !cli.querySelector('.' + CARET)) {\n this.closeMenu(null, e);\n }\n }\n }\n }\n };\n ContextMenu.prototype.setLISelected = function (li) {\n var sli = this.getLIByClass(li.parentElement, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n li.classList.remove(FOCUSED);\n li.classList.add(SELECTED);\n };\n ContextMenu.prototype.getLIByClass = function (ul, classname) {\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains(classname)) {\n return ul.children[i];\n }\n }\n return null;\n };\n ContextMenu.prototype.getItem = function (navIdx) {\n navIdx = navIdx.slice();\n var idx = navIdx.pop();\n var items = this.getItems(navIdx);\n return items[idx];\n };\n ContextMenu.prototype.getItems = function (navIdx) {\n var items = this.items;\n for (var i = 0; i < navIdx.length; i++) {\n items = items[navIdx[i]].items;\n }\n return items;\n };\n ContextMenu.prototype.getIdx = function (ul, li, skipHdr) {\n if (skipHdr === void 0) { skipHdr = true; }\n var idx = Array.prototype.indexOf.call(ul.children, li);\n if (skipHdr && ul.children[0].classList.contains(HEADER)) {\n idx--;\n }\n return idx;\n };\n ContextMenu.prototype.getLI = function (elem) {\n if (elem.tagName === 'LI') {\n return elem;\n }\n return closest(elem, 'li');\n };\n /**\n * Called internally if any of the property value changed\n * @private\n * @param {ContextMenuModel} newProp\n * @param {ContextMenuModel} oldProp\n * @returns void\n */\n ContextMenu.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n wrapper.classList.remove(oldProp.cssClass);\n }\n if (newProp.cssClass) {\n wrapper.classList.add(newProp.cssClass);\n }\n break;\n case 'enableRtl':\n wrapper.classList.toggle(RTL);\n break;\n case 'filter':\n this.closeMenu();\n this.filter = newProp.filter;\n break;\n case 'showItemOnClick':\n this.unWireEvents();\n this.showItemOnClick = newProp.showItemOnClick;\n this.wireEvents();\n break;\n case 'target':\n this.unWireEvents();\n this.target = newProp.target;\n this.wireEvents();\n break;\n case 'items':\n var idx = void 0;\n var navIdx = void 0;\n var item = void 0;\n var keys = Object.keys(newProp.items);\n for (var i = 0; i < keys.length; i++) {\n navIdx = this.getChangedItemIndex(newProp, [], Number(keys[i]));\n if (navIdx.length <= this.getWrapper().children.length) {\n idx = navIdx.pop();\n item = this.getItems(navIdx);\n this.insertAfter([item[idx]], item[idx].text);\n this.removeItem(item, navIdx, idx);\n }\n navIdx.length = 0;\n }\n break;\n }\n }\n };\n ContextMenu.prototype.getChangedItemIndex = function (newProp, index, idx) {\n index.push(idx);\n var key = Object.keys(newProp.items[idx]).pop();\n if (key === 'items') {\n var item = newProp.items[idx];\n this.getChangedItemIndex(item, index, Number(Object.keys(item.items).pop()));\n }\n else {\n if (key === 'isParentArray' && index.length > 1) {\n index.pop();\n }\n }\n return index;\n };\n ContextMenu.prototype.removeItem = function (item, navIdx, idx) {\n item.splice(idx, 1);\n var uls = this.getWrapper().children;\n if (navIdx.length < uls.length) {\n detach(uls[navIdx.length].children[idx]);\n }\n };\n /**\n * Used to unwire the bind events.\n * @private\n */\n ContextMenu.prototype.unWireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var touchModule = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (Browser.isIos) {\n touchModule = getInstance(target, Touch);\n if (touchModule) {\n touchModule.destroy();\n }\n }\n else {\n EventHandler.remove(target, 'contextmenu', this.cmenuHandler);\n }\n }\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollHandler);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.remove(wrapper, 'mouseover', this.moverHandler);\n EventHandler.remove(document, 'mousedown', this.mouseDownHandler);\n }\n EventHandler.remove(document, 'click', this.delegateClickHandler);\n var keyboardModule = getInstance(wrapper, KeyboardEvents);\n if (keyboardModule) {\n keyboardModule.destroy();\n }\n };\n ContextMenu.prototype.toggleAnimation = function (ul, isMenuOpen) {\n var _this = this;\n if (isMenuOpen === void 0) { isMenuOpen = true; }\n if (this.animationSettings.effect === 'None' || !isMenuOpen) {\n this.end(ul, isMenuOpen);\n }\n else {\n this.animation.animate(ul, {\n name: this.animationSettings.effect,\n duration: this.animationSettings.duration,\n timingFunction: this.animationSettings.easing,\n begin: function (options) {\n options.element.style.display = 'block';\n options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';\n },\n end: function (options) {\n _this.end(options.element, isMenuOpen);\n }\n });\n }\n };\n ContextMenu.prototype.end = function (ul, isMenuOpen) {\n if (isMenuOpen) {\n ul.style.display = 'block';\n ul.style.maxHeight = '';\n var item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n var eventArgs = { element: ul, parentItem: item, items: item ? item.items : this.items };\n this.trigger('onOpen', eventArgs);\n if (ul.querySelector('.' + FOCUSED)) {\n ul.querySelector('.' + FOCUSED).focus();\n }\n else {\n var ele = void 0;\n ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\n }\n }\n else {\n if (ul === this.element) {\n var fli = this.getLIByClass(this.element, FOCUSED);\n if (fli) {\n fli.classList.remove(FOCUSED);\n }\n var sli = this.getLIByClass(this.element, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n ul.style.display = 'none';\n }\n else {\n detach(ul);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n ContextMenu.prototype.getPersistData = function () {\n return '';\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n ContextMenu.prototype.getModuleName = function () {\n return 'contextmenu';\n };\n ContextMenu.prototype.getIndex = function (data, items, navIdx, isCallBack) {\n if (items === void 0) { items = this.items; }\n if (navIdx === void 0) { navIdx = []; }\n if (isCallBack === void 0) { isCallBack = false; }\n var item;\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i];\n if (item.text === data) {\n navIdx.push(i);\n break;\n }\n else if (item.items.length) {\n navIdx = this.getIndex(data, item.items, navIdx, true);\n if (navIdx[navIdx.length - 1] === -1) {\n if (i !== len - 1) {\n navIdx.pop();\n }\n }\n else {\n navIdx.unshift(i);\n break;\n }\n }\n else {\n if (i === len - 1) {\n navIdx.push(-1);\n }\n }\n }\n return (!isCallBack && navIdx[0] === -1) ? [] : navIdx;\n };\n /**\n * This method is used to enable or disable the menu items in the ContextMenu based on the items and enable argument.\n * @param items Text items that needs to be enabled/disabled.\n * @param enable Set `true`/`false` to enable/disable the list items.\n * @returns void\n */\n ContextMenu.prototype.enableItems = function (items, enable) {\n if (enable === void 0) { enable = true; }\n var ul;\n var idx;\n var navIdx;\n var disabled = DISABLED;\n var wrapper = this.getWrapper();\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i]);\n idx = navIdx.pop();\n ul = wrapper.children[navIdx.length];\n if (ul) {\n if (enable) {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.remove(disabled);\n }\n else {\n ul.children[idx].classList.remove(disabled);\n }\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.add(disabled);\n }\n else {\n ul.children[idx].classList.add(disabled);\n }\n }\n }\n }\n };\n /**\n * This method is used to show the menu items in the ContextMenu based on the items text.\n * @param items Text items that needs to be shown.\n * @returns void\n */\n ContextMenu.prototype.showItems = function (items) {\n this.showHideItems(items, false);\n };\n /**\n * This method is used to hide the menu items in the ContextMenu based on the items text.\n * @param items Text items that needs to be hidden.\n * @returns void\n */\n ContextMenu.prototype.hideItems = function (items) {\n this.showHideItems(items, true);\n };\n ContextMenu.prototype.showHideItems = function (items, ishide) {\n var ul;\n var idx;\n var navIdx;\n var wrapper = this.getWrapper();\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i]);\n idx = navIdx.pop();\n ul = wrapper.children[navIdx.length];\n if (ul) {\n if (ishide) {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.add(HIDE);\n }\n else {\n ul.children[idx].classList.add(HIDE);\n }\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.remove(HIDE);\n }\n else {\n ul.children[idx].classList.remove(HIDE);\n }\n }\n }\n }\n };\n /**\n * It is used to remove the menu items from the ContextMenu based on the items text.\n * @param items Text items that needs to be removed.\n * @returns void\n */\n ContextMenu.prototype.removeItems = function (items) {\n var idx;\n var navIdx;\n var iitems;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i]);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n this.removeItem(iitems, navIdx, idx);\n }\n };\n /**\n * It is used to insert the menu items after the specified menu item text.\n * @param items Items that needs to be inserted.\n * @param text Text item after that the element to be inserted.\n * @returns void\n */\n ContextMenu.prototype.insertAfter = function (items, text) {\n this.insertItems(items, text);\n };\n /**\n * It is used to insert the menu items before the specified menu item text.\n * @param items Items that needs to be inserted.\n * @param text Text item before that the element to be inserted.\n * @returns void\n */\n ContextMenu.prototype.insertBefore = function (items, text) {\n this.insertItems(items, text, false);\n };\n ContextMenu.prototype.insertItems = function (items, text, isAfter) {\n if (isAfter === void 0) { isAfter = true; }\n var li;\n var idx;\n var navIdx;\n var iitems;\n var menuitem;\n var showIcon;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(text);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n menuitem = new MenuItem(iitems[0], null, items[i], true);\n iitems.splice(isAfter ? idx + 1 : idx, 0, menuitem);\n var uls = this.getWrapper().children;\n if (navIdx.length < uls.length) {\n idx = isAfter ? idx + 1 : idx;\n showIcon = this.hasField(iitems, 'iconCss');\n li = this.createItems(iitems).children[idx];\n uls[navIdx.length].insertBefore(li, uls[navIdx.length].children[idx]);\n }\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n ContextMenu.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n if (wrapper) {\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n if (this.ngElement) {\n this.ngElement.style.display = 'block';\n }\n else {\n this.closeMenu();\n this.element.innerHTML = '';\n ['top', 'left', 'display', 'z-index'].forEach(function (key) {\n _this.element.style.removeProperty(key);\n });\n ['role', 'tabindex', 'class', 'style'].forEach(function (key) {\n if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {\n _this.element.removeAttribute(key);\n }\n });\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n }\n };\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"filter\", void 0);\n __decorate([\n Property(false)\n ], ContextMenu.prototype, \"showItemOnClick\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], ContextMenu.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"target\", void 0);\n __decorate([\n Property({ duration: 400, easing: 'ease', effect: 'SlideDown' })\n ], ContextMenu.prototype, \"animationSettings\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"onOpen\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"onClose\", void 0);\n __decorate([\n Event()\n ], ContextMenu.prototype, \"select\", void 0);\n ContextMenu = __decorate([\n NotifyPropertyChanges\n ], ContextMenu);\n return ContextMenu;\n}(Component));\nexport { ContextMenu };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, closest, Collection, Complex, attributes, detach } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';\nimport { createElement as buildTag, setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll } from '@syncfusion/ej2-base';\nimport { EventHandler, rippleEffect, Touch, compile, Animation } from '@syncfusion/ej2-base';\nimport { Toolbar } from '../toolbar/toolbar';\nvar CLS_TAB = 'e-tab';\nvar CLS_HEADER = 'e-tab-header';\nvar CLS_CONTENT = 'e-content';\nvar CLS_NEST = 'e-nested';\nvar CLS_ITEMS = 'e-items';\nvar CLS_ITEM = 'e-item';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_RTL = 'e-rtl';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_DISABLE = 'e-disable';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_FOCUS = 'e-focused';\nvar CLS_ICONS = 'e-icons';\nvar CLS_ICON = 'e-icon';\nvar CLS_ICON_CLOSE = 'e-close-icon';\nvar CLS_CLOSE_SHOW = 'e-close-show';\nvar CLS_TEXT = 'e-tab-text';\nvar CLS_INDICATOR = 'e-indicator';\nvar CLS_WRAP = 'e-tab-wrap';\nvar CLS_TEXT_WRAP = 'e-text-wrap';\nvar CLS_TAB_ICON = 'e-tab-icon';\nvar CLS_TB_ITEMS = 'e-toolbar-items';\nvar CLS_TB_ITEM = 'e-toolbar-item';\nvar CLS_TB_POP = 'e-toolbar-pop';\nvar CLS_TB_POPUP = 'e-toolbar-popup';\nvar CLS_POPUP_OPEN = 'e-popup-open';\nvar CLS_POPUP_CLOSE = 'e-popup-close';\nvar CLS_PROGRESS = 'e-progress';\nvar CLS_IGNORE = 'e-ignore';\nvar CLS_OVERLAY = 'e-overlay';\nvar TabActionSettings = /** @class */ (function (_super) {\n __extends(TabActionSettings, _super);\n function TabActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideLeftIn')\n ], TabActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(600)\n ], TabActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], TabActionSettings.prototype, \"easing\", void 0);\n return TabActionSettings;\n}(ChildProperty));\nexport { TabActionSettings };\nvar TabAnimationSettings = /** @class */ (function (_super) {\n __extends(TabAnimationSettings, _super);\n function TabAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideLeftIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"previous\", void 0);\n __decorate([\n Complex({ effect: 'SlideRightIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"next\", void 0);\n return TabAnimationSettings;\n}(ChildProperty));\nexport { TabAnimationSettings };\n/**\n * Objects used for configuring the Tab item header properties.\n */\nvar Header = /** @class */ (function (_super) {\n __extends(Header, _super);\n function Header() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Header.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Header.prototype, \"iconCss\", void 0);\n __decorate([\n Property('left')\n ], Header.prototype, \"iconPosition\", void 0);\n return Header;\n}(ChildProperty));\nexport { Header };\n/**\n * An array of object that is used to configure the Tab.\n */\nvar TabItem = /** @class */ (function (_super) {\n __extends(TabItem, _super);\n function TabItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({}, Header)\n ], TabItem.prototype, \"header\", void 0);\n __decorate([\n Property('')\n ], TabItem.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], TabItem.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TabItem.prototype, \"disabled\", void 0);\n return TabItem;\n}(ChildProperty));\nexport { TabItem };\n/**\n * Tab is a content panel to show multiple contents in a single space, one at a time.\n * Each Tab item has an associated content, that will be displayed based on the active Tab header item.\n * ```html\n *
\n * \n * ```\n */\nvar Tab = /** @class */ (function (_super) {\n __extends(Tab, _super);\n /**\n * Initializes a new instance of the Tab class.\n * @param options - Specifies Tab model properties as options.\n * @param element - Specifies the element that is rendered as a Tab.\n */\n function Tab(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.prevIndex = 0;\n _this.show = { name: 'SlideDown', duration: 100 };\n _this.hide = { name: 'SlideUp', duration: 100 };\n _this.animateOptions = {};\n _this.animObj = new Animation(_this.animateOptions);\n _this.maxHeight = 0;\n _this.title = 'Close';\n /**\n * Contains the keyboard configuration of the Tab.\n */\n _this.keyConfigs = {\n tab: 'tab',\n home: 'home',\n end: 'end',\n enter: 'enter',\n space: 'space',\n delete: 'delete',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow'\n };\n return _this;\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.\n * @returns void\n */\n Tab.prototype.destroy = function () {\n var _this = this;\n if (!isNOU(this.tbObj)) {\n this.tbObj.destroy();\n }\n this.unWireEvents();\n ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach(function (val) {\n _this.element.removeAttribute(val);\n });\n this.expTemplateContent();\n if (!this.isTemplate) {\n this.element.innerHTML = '';\n }\n else {\n var cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n this.element.classList.remove(CLS_TEMPLATE);\n if (!isNOU(cntEle)) {\n cntEle.innerHTML = this.cnt;\n }\n }\n _super.prototype.destroy.call(this);\n this.trigger('destroyed');\n };\n /**\n * Initialize component\n * @private\n */\n Tab.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.isNested = false;\n this.isPopup = false;\n this.initRender = true;\n this.isSwipeed = false;\n this.templateEle = [];\n if (!isNOU(nested)) {\n nested.parentElement.classList.add(CLS_NEST);\n this.isNested = true;\n }\n var name = Browser.info.name;\n var css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';\n setStyle(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });\n this.setCssClass(this.element, this.cssClass, true);\n attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '' });\n this.setCssClass(this.element, css, true);\n };\n /**\n * Initialize the component rendering\n * @private\n */\n Tab.prototype.render = function () {\n this.renderContainer();\n this.wireEvents();\n this.initRender = false;\n };\n Tab.prototype.renderContainer = function () {\n var ele = this.element;\n if (this.items.length > 0 && ele.children.length === 0) {\n ele.appendChild(buildTag('div', { className: CLS_CONTENT }));\n this.setOrientation(this.headerPlacement, buildTag('div', { className: CLS_HEADER }));\n this.isTemplate = false;\n }\n else if (this.element.children.length > 0) {\n this.isTemplate = true;\n ele.classList.add(CLS_TEMPLATE);\n var header = ele.querySelector('.' + CLS_HEADER);\n if (header && this.headerPlacement === 'Bottom') {\n this.setOrientation(this.headerPlacement, header);\n }\n }\n if (!isNOU(select('.' + CLS_HEADER, this.element)) && !isNOU(select('.' + CLS_CONTENT, this.element))) {\n this.renderHeader();\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n if (!isNOU(this.tbItems)) {\n rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });\n }\n this.renderContent();\n if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.bdrLine = buildTag('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN + ' ' + CLS_IGNORE });\n var scrCnt = select('.e-hscroll-content', this.tbItems);\n if (!isNOU(scrCnt)) {\n scrCnt.insertBefore(this.bdrLine, scrCnt.firstChild);\n }\n else {\n this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstChild);\n }\n this.setContentHeight(true);\n this.select(this.selectedItem);\n }\n this.setRTL(this.enableRtl);\n }\n };\n Tab.prototype.renderHeader = function () {\n var _this = this;\n var tabItems = [];\n this.hdrEle = select('.' + CLS_HEADER, this.element);\n this.btnCls = buildTag('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } }).outerHTML;\n if (!this.isTemplate) {\n tabItems = this.parseObject(this.items, 0);\n }\n else {\n var count = this.hdrEle.children.length;\n var hdrItems = [];\n for (var i = 0; i < count; i++) {\n hdrItems.push(this.hdrEle.children.item(i).innerHTML);\n }\n if (count > 0) {\n this.hdrEle.innerHTML = '';\n this.hdrEle.appendChild(buildTag('div', { className: CLS_ITEMS }));\n hdrItems.forEach(function (item, index) {\n var attr = {\n className: CLS_ITEM, id: CLS_ITEM + '_' + index,\n attrs: { role: 'tab', 'aria-controls': CLS_CONTENT + '_' + index, 'aria-selected': 'false' }\n };\n var txt = buildTag('span', { className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' } }).outerHTML;\n var cont = buildTag('div', { className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls }).outerHTML;\n var wrap = buildTag('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });\n select('.' + CLS_ITEMS, _this.element).appendChild(buildTag('div', attr));\n selectAll('.' + CLS_ITEM, _this.element)[index].appendChild(wrap);\n });\n }\n }\n this.tbObj = new Toolbar({\n width: '100%',\n overflowMode: this.overflowMode,\n items: (tabItems.length !== 0) ? tabItems : [],\n clicked: this.clickHandler.bind(this)\n });\n this.tbObj.appendTo(this.hdrEle);\n attributes(this.element, { 'aria-orientation': 'horizontal' });\n this.setCloseButton(this.showCloseButton);\n this.setProperties({ headerPlacement: (this.element.children.item(0).classList.contains(CLS_HEADER)) ? 'Top' : 'Bottom' }, true);\n };\n Tab.prototype.renderContent = function () {\n this.cntEle = select('.' + CLS_CONTENT, this.element);\n var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);\n if (this.isTemplate) {\n this.cnt = (this.cntEle.children.length > 0) ? this.cntEle.innerHTML : '';\n var contents = this.cntEle.children;\n for (var i = 0; i < hdrItem.length; i++) {\n if (contents.length - 1 >= i) {\n contents.item(i).className += CLS_ITEM;\n attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + i });\n contents.item(i).id = CLS_CONTENT + '_' + i;\n }\n }\n }\n };\n Tab.prototype.parseObject = function (items, index) {\n var _this = this;\n var inHTML = '';\n var tbCount = selectAll('.' + CLS_TB_ITEM, this.element).length;\n var tItems = [];\n items.forEach(function (item, i) {\n var pos = (isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNOU(item.header.iconCss)) ? '' : item.header.iconCss;\n var txt = item.header.text;\n var id = ((tbCount === 0) ? i : (_this.isReplace === true) ? (i + index) : tbCount + i);\n var disabled = (item.disabled) ? ' ' + CLS_DISABLE + ' ' + CLS_OVERLAY : '';\n var tHtml = ((txt instanceof Object) ? txt.outerHTML : txt);\n var txtEmpty = (!isNOU(tHtml) && tHtml !== '');\n var tEle = (txtEmpty) ? buildTag('div', {\n className: CLS_TEXT, innerHTML: tHtml, attrs: { 'role': 'presentation' }\n }).outerHTML : '';\n var icon = buildTag('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n }).outerHTML;\n if ((txt === '' || txt === undefined) && css === '') {\n return;\n }\n else {\n if ((txt !== '' && txt !== undefined) && css !== '') {\n inHTML = (pos === 'left' || pos === 'top') ? icon + '' + tEle : tEle + '' + icon;\n }\n else {\n inHTML = (css === '') ? tEle : icon;\n }\n }\n var wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };\n var tCont = buildTag('div', { className: CLS_TEXT_WRAP, innerHTML: inHTML + '' + _this.btnCls }).outerHTML;\n var wrap = buildTag('div', { className: CLS_WRAP, innerHTML: tCont, attrs: wrapAttrs });\n var attrObj = {\n id: CLS_ITEM + '_' + id, role: 'tab', 'aria-selected': 'false'\n };\n var tItem = { htmlAttributes: attrObj, template: wrap.outerHTML };\n tItem.cssClass = item.cssClass + ' ' + disabled + ' ' + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');\n if (pos === 'top' || pos === 'bottom') {\n _this.element.classList.add('e-vertical-icon');\n }\n tItems.push(tItem);\n });\n return tItems;\n };\n Tab.prototype.removeActiveClass = function (id) {\n var hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element)[0];\n if (this.headerPlacement === 'Bottom') {\n hdrActEle = selectAll(':root .' + CLS_HEADER + ' .' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element.children[1])[0];\n }\n if (!isNOU(hdrActEle)) {\n hdrActEle.classList.remove(CLS_ACTIVE);\n var no = this.extIndex(hdrActEle.id);\n var trg = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);\n }\n };\n Tab.prototype.checkPopupOverflow = function (ele) {\n this.tbPop = select('.' + CLS_TB_POP, this.element);\n var popIcon = select('.e-hor-nav', this.element);\n var tbrItems = select('.' + CLS_TB_ITEMS, this.element);\n if ((this.enableRtl && ((popIcon.offsetLeft + popIcon.offsetWidth) > tbrItems.offsetLeft))\n || (!this.enableRtl && popIcon.offsetLeft < tbrItems.offsetWidth)) {\n ele.classList.add(CLS_TB_POPUP);\n this.tbPop.insertBefore(ele.cloneNode(true), selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);\n ele.outerHTML = '';\n }\n return true;\n };\n Tab.prototype.popupHandler = function (target) {\n var ripEle = target.querySelector('.e-ripple-element');\n if (!isNOU(ripEle)) {\n ripEle.outerHTML = '';\n target.querySelector('.' + CLS_WRAP).classList.remove('e-ripple');\n }\n this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);\n var lastChild = this.tbItem[this.tbItem.length - 1];\n if (this.tbItem.length !== 0) {\n target.classList.remove(CLS_TB_POPUP);\n this.tbItems.appendChild(target.cloneNode(true));\n this.actEleId = target.id;\n target.outerHTML = '';\n if (this.checkPopupOverflow(lastChild)) {\n var prevEle = this.tbItems.lastChild.previousElementSibling;\n this.checkPopupOverflow(prevEle);\n }\n this.isPopup = true;\n }\n return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;\n };\n Tab.prototype.setCloseButton = function (val) {\n var trg = select('.' + CLS_HEADER, this.element);\n (val === true) ? trg.classList.add(CLS_CLOSE_SHOW) : trg.classList.remove(CLS_CLOSE_SHOW);\n this.tbObj.refreshOverflow();\n this.refreshActElePosition();\n };\n Tab.prototype.prevCtnAnimation = function (prev, current) {\n var animation;\n var checkRTL = this.enableRtl || this.element.classList.contains(CLS_RTL);\n if (this.isPopup || prev <= current) {\n if (this.animation.previous.effect === 'SlideLeftIn') {\n animation = { name: 'SlideLeftOut',\n duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing };\n }\n else {\n animation = null;\n }\n }\n else {\n if (this.animation.next.effect === 'SlideRightIn') {\n animation = { name: 'SlideRightOut',\n duration: this.animation.next.duration, timingFunction: this.animation.next.easing };\n }\n else {\n animation = null;\n }\n }\n return animation;\n };\n Tab.prototype.triggerPrevAnimation = function (oldCnt, prevIndex) {\n var animateObj = this.prevCtnAnimation(prevIndex, this.selectedItem);\n if (!isNOU(animateObj)) {\n animateObj.begin = function () {\n setStyle(oldCnt, { 'position': 'absolute' });\n oldCnt.classList.add(CLS_PROGRESS);\n oldCnt.classList.add('e-view');\n };\n animateObj.end = function () {\n oldCnt.style.display = 'none';\n oldCnt.classList.remove(CLS_ACTIVE);\n oldCnt.classList.remove(CLS_PROGRESS);\n oldCnt.classList.remove('e-view');\n setStyle(oldCnt, { 'display': '', 'position': '' });\n };\n new Animation(animateObj).animate(oldCnt);\n }\n else {\n oldCnt.classList.remove(CLS_ACTIVE);\n }\n };\n Tab.prototype.triggerAnimation = function (id, value) {\n var _this = this;\n var prevIndex = this.prevIndex;\n var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT).children);\n var oldCnt;\n itemCollection.forEach(function (item) {\n if (item.id === _this.prevActiveEle) {\n oldCnt = item;\n }\n });\n var prevEle = this.tbItem[prevIndex];\n var no = this.extIndex(this.tbItem[this.selectedItem].id);\n var newCnt = this.getTrgContent(this.cntEle, no);\n if (isNOU(oldCnt) && !isNOU(prevEle)) {\n var idNo = this.extIndex(prevEle.id);\n oldCnt = this.getTrgContent(this.cntEle, idNo);\n }\n if (this.initRender || value === false || this.animation === {} || isNOU(this.animation)) {\n if (oldCnt && oldCnt !== newCnt) {\n oldCnt.classList.remove(CLS_ACTIVE);\n }\n return;\n }\n var cnt = select('.' + CLS_CONTENT, this.element);\n var animateObj;\n if (this.prevIndex > this.selectedItem && !this.isPopup) {\n var openEff = this.animation.previous.effect;\n animateObj = {\n name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),\n duration: this.animation.previous.duration,\n timingFunction: this.animation.previous.easing\n };\n }\n else if (this.isPopup || this.prevIndex < this.selectedItem || this.prevIndex === this.selectedItem) {\n var clsEff = this.animation.next.effect;\n animateObj = {\n name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),\n duration: this.animation.next.duration,\n timingFunction: this.animation.next.easing\n };\n }\n animateObj.progress = function () {\n cnt.classList.add(CLS_PROGRESS);\n _this.setActiveBorder();\n };\n animateObj.end = function () {\n cnt.classList.remove(CLS_PROGRESS);\n newCnt.classList.add(CLS_ACTIVE);\n };\n if (!this.initRender) {\n this.triggerPrevAnimation(oldCnt, prevIndex);\n }\n this.prevActiveEle = newCnt.id;\n this.isPopup = false;\n if (animateObj.name === '') {\n newCnt.classList.add(CLS_ACTIVE);\n }\n else {\n new Animation(animateObj).animate(newCnt);\n }\n };\n Tab.prototype.keyPressed = function (trg) {\n var trgParent = closest(trg, '.' + CLS_HEADER + ' .' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (!isNOU(this.popEle) && trg.classList.contains('e-hor-nav')) {\n (this.popEle.classList.contains(CLS_POPUP_OPEN)) ? this.popObj.hide(this.hide) : this.popObj.show(this.show);\n }\n else if (trg.classList.contains('e-scroll-nav')) {\n trg.click();\n }\n else {\n if (!isNOU(trgParent) && trgParent.classList.contains(CLS_ACTIVE) === false) {\n this.select(trgIndex);\n if (!isNOU(this.popEle)) {\n this.popObj.hide(this.hide);\n }\n }\n }\n };\n Tab.prototype.getEleIndex = function (item) {\n return Array.prototype.indexOf.call(selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element), item);\n };\n Tab.prototype.extIndex = function (id) {\n return id.replace(CLS_ITEM + '_', '');\n };\n Tab.prototype.expTemplateContent = function () {\n var _this = this;\n this.templateEle.forEach(function (eleStr) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n });\n };\n Tab.prototype.templateCompile = function (ele, cnt) {\n var tempEle = buildTag('div');\n var templateFn = compile(cnt);\n if (!isNOU(templateFn) && templateFn().length > 0) {\n [].slice.call(templateFn()).forEach(function (el) {\n tempEle.appendChild(el);\n });\n ele.appendChild(tempEle);\n }\n };\n Tab.prototype.getContent = function (ele, index) {\n var eleStr;\n var cnt = this.items[Number(index)].content;\n if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n ele.appendChild(eleVal.cloneNode(true));\n ele.querySelector(cnt).style.display = 'block';\n }\n else {\n this.templateCompile(ele, cnt);\n }\n }\n else {\n this.templateCompile(ele, cnt);\n }\n }\n else {\n ele.appendChild(cnt);\n }\n if (!isNOU(eleStr)) {\n this.templateEle.push(cnt.toString());\n }\n };\n Tab.prototype.getTrgContent = function (cntEle, no) {\n var ele;\n if (this.element.classList.contains(CLS_NEST)) {\n ele = select('.' + CLS_NEST + '> .' + CLS_CONTENT + ' > #' + CLS_CONTENT + '_' + no, this.element);\n }\n else {\n ele = this.findEle(cntEle.children, CLS_CONTENT + '_' + no);\n }\n return ele;\n };\n Tab.prototype.findEle = function (items, key) {\n var ele;\n for (var i = 0; i < items.length; i++) {\n if (items[i].id === key) {\n ele = items[i];\n break;\n }\n }\n return ele;\n };\n Tab.prototype.setOrientation = function (place, ele) {\n (place === 'Bottom') ? this.element.appendChild(ele) : this.element.insertBefore(ele, select('.' + CLS_CONTENT, this.element));\n };\n Tab.prototype.setCssClass = function (ele, cls, val) {\n if (cls === '') {\n return;\n }\n var list = cls.split(' ');\n for (var i = 0; i < list.length; i++) {\n if (val) {\n ele.classList.add(list[i]);\n }\n else {\n ele.classList.remove(list[i]);\n }\n }\n };\n Tab.prototype.setContentHeight = function (val) {\n if (isNOU(this.cntEle)) {\n return;\n }\n var height;\n var hdrEle = select('.' + CLS_HEADER, this.element);\n if (this.heightAdjustMode === 'None') {\n if (this.height === 'auto') {\n return;\n }\n else {\n setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });\n }\n }\n else if (this.heightAdjustMode === 'Fill') {\n setStyle(this.element, { 'height': '100%' });\n setStyle(this.cntEle, { 'height': 'auto' });\n }\n else if (this.heightAdjustMode === 'Auto') {\n var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);\n if (this.isTemplate === true) {\n for (var i = 0; i < cnt.length; i++) {\n cnt[i].setAttribute('style', 'display:block; visibility: visible');\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));\n cnt[i].style.removeProperty('display');\n cnt[i].style.removeProperty('visibility');\n }\n }\n else {\n this.cntEle = select('.' + CLS_CONTENT, this.element);\n if (val === true) {\n this.cntEle.appendChild(buildTag('div', {\n id: (CLS_CONTENT + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + 0 }\n }));\n }\n var ele = this.cntEle.children.item(0);\n for (var i = 0; i < this.items.length; i++) {\n this.getContent(ele, i);\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));\n ele.innerHTML = '';\n }\n this.templateEle = [];\n this.getContent(ele, 0);\n ele.classList.remove(CLS_ACTIVE);\n }\n setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });\n }\n else {\n setStyle(this.cntEle, { 'height': 'auto' });\n }\n };\n Tab.prototype.getHeight = function (ele) {\n var cs = window.getComputedStyle(ele);\n return ele.offsetHeight + parseFloat(cs.getPropertyValue('padding-top')) + parseFloat(cs.getPropertyValue('padding-bottom')) +\n parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));\n };\n Tab.prototype.setActiveBorder = function () {\n var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element);\n if (this.headerPlacement === 'Bottom') {\n trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, this.element.children[1]);\n }\n if (trg === null) {\n return;\n }\n var root = closest(trg, '.' + CLS_TAB);\n if (this.element !== root) {\n return;\n }\n var hsCnt = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS + ' .e-hscroll-content', this.element.children[0]);\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n var bar = select('.' + CLS_HEADER + ' .' + CLS_INDICATOR, this.element);\n if (this.headerPlacement === 'Bottom') {\n hsCnt = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS + ' .e-hscroll-content', this.element.children[1]);\n }\n var tbWidth = (isNOU(hsCnt)) ? this.tbItems.offsetWidth : hsCnt.offsetWidth;\n if (tbWidth !== 0) {\n setStyle(bar, { 'left': trg.offsetLeft + 'px', 'right': tbWidth - (trg.offsetLeft + trg.offsetWidth) + 'px' });\n }\n else {\n setStyle(bar, { 'left': 'auto', 'right': 'auto' });\n }\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.remove(CLS_HIDDEN);\n }\n };\n Tab.prototype.setActive = function (value) {\n this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);\n var trg = this.tbItem[value];\n if (value >= 0) {\n this.setProperties({ selectedItem: value }, true);\n }\n if (value < 0 || isNaN(value) || this.tbItem.length === 0) {\n return;\n }\n if (trg.classList.contains(CLS_ACTIVE)) {\n this.setActiveBorder();\n return;\n }\n if (!this.isTemplate) {\n var prev = this.tbItem[this.prevIndex];\n if (!isNOU(prev)) {\n prev.removeAttribute('aria-controls');\n }\n attributes(trg, { 'aria-controls': CLS_CONTENT + '_' + value });\n }\n var id = trg.id;\n this.removeActiveClass(id);\n trg.classList.add(CLS_ACTIVE);\n trg.setAttribute('aria-selected', 'true');\n var no = Number(this.extIndex(id));\n attributes(this.element, { 'aria-activedescendant': id });\n if (this.isTemplate) {\n if (select('.' + CLS_CONTENT, this.element).children.length > 0) {\n var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);\n if (!isNOU(trg_1)) {\n trg_1.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n }\n else {\n this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n var item = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNOU(item)) {\n this.cntEle.appendChild(buildTag('div', {\n id: CLS_CONTENT + '_' + this.extIndex(id), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + this.extIndex(id) }\n }));\n var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));\n this.getContent(eleTrg, Number(this.extIndex(id)));\n }\n else {\n item.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n this.setActiveBorder();\n var curActItem = select('.' + CLS_HEADER + ' #' + id, this.element);\n this.refreshItemVisibility(curActItem);\n curActItem.firstChild.focus();\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: trg,\n selectedIndex: value,\n isSwiped: this.isSwipeed\n };\n this.trigger('selected', eventArg);\n };\n Tab.prototype.setItems = function (items) {\n this.isReplace = true;\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.tbObj.items = this.parseObject(items, 0);\n this.tbObj.dataBind();\n this.isReplace = false;\n };\n Tab.prototype.setRTL = function (value) {\n this.tbObj.enableRtl = value;\n this.tbObj.dataBind();\n this.setCssClass(this.element, CLS_RTL, value);\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshActiveBorder = function () {\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN);\n }\n this.setActiveBorder();\n };\n Tab.prototype.wireEvents = function () {\n window.addEventListener('resize', this.refreshActElePosition.bind(this));\n EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });\n this.tabKeyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyHandler.bind(this),\n keyConfigs: { openPopup: 'shift+f10', tab: 'tab', shiftTab: 'shift+tab' },\n eventName: 'keydown'\n });\n };\n Tab.prototype.unWireEvents = function () {\n this.keyModule.destroy();\n this.tabKeyModule.destroy();\n if (!isNOU(this.cntEle)) {\n this.touchModule.destroy();\n }\n window.removeEventListener('resize', this.refreshActElePosition.bind(this));\n this.element.removeEventListener('mouseover', this.hoverHandler.bind(this));\n };\n Tab.prototype.clickHandler = function (args) {\n this.element.classList.remove(CLS_FOCUS);\n var trg = args.originalEvent.target;\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (trg.classList.contains(CLS_ICON_CLOSE)) {\n this.removeTab(trgIndex);\n }\n else {\n this.isPopup = false;\n if (!isNOU(trgParent) && trgIndex !== this.selectedItem) {\n this.select(trgIndex);\n }\n }\n };\n Tab.prototype.swipeHandler = function (e) {\n if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {\n return;\n }\n this.isSwipeed = true;\n if (e.swipeDirection === 'Right') {\n this.select(this.selectedItem - 1);\n }\n else {\n if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {\n this.select(this.selectedItem + 1);\n }\n }\n this.isSwipeed = false;\n };\n Tab.prototype.spaceKeyDown = function (e) {\n if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {\n var clstHead = closest(e.target, '.' + CLS_HEADER);\n if (!isNOU(clstHead)) {\n e.preventDefault();\n }\n }\n };\n Tab.prototype.keyHandler = function (e) {\n if (this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n this.element.classList.add(CLS_FOCUS);\n var trg = e.target;\n var actEle = select('.' + CLS_HEADER + ' .' + CLS_ACTIVE, this.element);\n var tabItem = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element);\n this.popEle = select('.' + CLS_TB_POP, this.element);\n if (!isNOU(this.popEle)) {\n this.popObj = this.popEle.ej2_instances[0];\n }\n switch (e.action) {\n case 'space':\n case 'enter':\n if (trg.parentElement.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (e.action === 'enter' && trg.classList.contains('e-hor-nav')) {\n break;\n }\n this.keyPressed(trg);\n break;\n case 'tab':\n case 'shiftTab':\n if (trg.classList.contains(CLS_WRAP)\n && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE) === false) {\n trg.setAttribute('tabindex', '-1');\n }\n if (this.popObj && isVisible(this.popObj.element)) {\n this.popObj.hide(this.hide);\n }\n actEle.children.item(0).setAttribute('tabindex', '0');\n break;\n case 'moveLeft':\n case 'moveRight':\n var item = closest(document.activeElement, '.' + CLS_TB_ITEM);\n if (!isNOU(item)) {\n this.refreshItemVisibility(item);\n }\n break;\n case 'openPopup':\n e.preventDefault();\n if (!isNOU(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {\n this.popObj.show(this.show);\n }\n break;\n case 'delete':\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n if (this.showCloseButton === true && !isNOU(trgParent)) {\n var nxtSib = trgParent.nextSibling;\n if (!isNOU(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {\n nxtSib.firstChild.focus();\n }\n this.removeTab(this.getEleIndex(trgParent));\n }\n this.setActiveBorder();\n break;\n }\n };\n Tab.prototype.refreshActElePosition = function () {\n var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);\n if (!isNOU(activeEle)) {\n this.select(this.getEleIndex(activeEle));\n }\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshItemVisibility = function (target) {\n var scrCnt = select('.e-hscroll-content', this.tbItems);\n if (!isNOU(scrCnt)) {\n var scrBar = select('.e-hscroll-bar', this.tbItems);\n var scrStart = scrBar.scrollLeft;\n var scrEnd = scrStart + scrBar.offsetWidth;\n var eleStart = target.offsetLeft;\n var eleWidth = target.offsetWidth;\n var eleEnd = target.offsetLeft + target.offsetWidth;\n if ((scrStart < eleStart) && (scrEnd < eleEnd)) {\n var eleViewRange = scrEnd - eleStart;\n scrBar.scrollLeft = scrStart + (eleWidth - eleViewRange);\n }\n else {\n if ((scrStart > eleStart) && (scrEnd > eleEnd)) {\n var eleViewRange = eleEnd - scrStart;\n scrBar.scrollLeft = scrStart - (eleWidth - eleViewRange);\n }\n }\n }\n else {\n return;\n }\n };\n Tab.prototype.hoverHandler = function (e) {\n var trg = e.target;\n if (!isNOU(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {\n trg.setAttribute('title', new L10n('tab', { closeButtonTitle: this.title }, this.locale).getConstant('closeButtonTitle'));\n }\n };\n /**\n * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.\n * @param {number} index - Index value of target Tab item.\n * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.\n * By default, isEnable is true.\n * @returns void.\n */\n Tab.prototype.enableTab = function (index, value) {\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(tbItems)) {\n return;\n }\n if (value === true) {\n tbItems.classList.remove(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstChild.setAttribute('tabindex', '-1');\n }\n else {\n tbItems.classList.add(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstChild.removeAttribute('tabindex');\n if (tbItems.classList.contains(CLS_ACTIVE)) {\n this.select(index + 1);\n }\n }\n tbItems.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');\n };\n /**\n * Adds new items to the Tab that accepts an array as Tab items.\n * @param {TabItemsModel[]} items - An array of item that is added to the Tab.\n * @param {number} index - Number value that determines where the items to be added. By default, index is 0.\n * @returns void.\n */\n Tab.prototype.addTab = function (items, index) {\n var _this = this;\n this.trigger('adding', { addedItems: items });\n if (isNOU(index)) {\n index = selectAll('.' + CLS_TB_ITEM).length - 1;\n }\n if (this.isTemplate === true || selectAll('.' + CLS_TB_ITEM).length - 1 < index || index < 0 || isNaN(index)) {\n return;\n }\n this.bdrLine.classList.add(CLS_HIDDEN);\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n var tabItems = this.parseObject(items, index);\n items.forEach(function (item, place) {\n if (_this.isReplace === true) {\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + '_' + index, _this.element);\n detach(hdrItem);\n _this.items.splice((index + place), 0, item);\n }\n else {\n _this.items.push(item);\n }\n });\n this.tbObj.addItems(tabItems, index);\n this.trigger('added', { addedItems: items });\n if (this.selectedItem === index) {\n this.select(index);\n }\n else {\n this.setActiveBorder();\n }\n };\n /**\n * Removes the items in the Tab from the specified index.\n * @param {number} index - Index of target item that is going to be removed.\n * @returns void.\n */\n Tab.prototype.removeTab = function (index) {\n var trg = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n var removingArgs = { removedItem: trg, removedIndex: index };\n this.trigger('removing', removingArgs);\n if (isNOU(trg)) {\n return;\n }\n this.tbObj.removeItems(index);\n this.refreshActiveBorder();\n var no = this.extIndex(trg.id);\n var cntTrg = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + '_' + no);\n if (!isNOU(cntTrg)) {\n cntTrg.outerHTML = '';\n }\n var removedArgs = { removedItem: trg, removedIndex: index };\n this.trigger('removed', removedArgs);\n if (trg.classList.contains(CLS_ACTIVE)) {\n index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', this.element).length - 1) ? index - 1 : index;\n this.enableAnimation = false;\n this.select(index);\n }\n if (selectAll('.' + CLS_TB_ITEM, this.element).length === 0) {\n this.hdrEle.style.display = 'none';\n }\n this.enableAnimation = true;\n };\n /**\n * Shows or hides the Tab that is in the specified index.\n * @param {number} index - Index value of target item.\n * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.\n * @returns void.\n */\n Tab.prototype.hideTab = function (index, value) {\n var item = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(item)) {\n return;\n }\n if (isNOU(value)) {\n value = true;\n }\n this.bdrLine.classList.add(CLS_HIDDEN);\n if (value === true) {\n item.classList.add(CLS_HIDDEN);\n if (item.classList.contains(CLS_ACTIVE)) {\n this.select((index !== 0) ? index - 1 : index + 1);\n }\n }\n else {\n item.classList.remove(CLS_HIDDEN);\n }\n this.setActiveBorder();\n item.setAttribute('aria-hidden', '' + value);\n };\n /**\n * Specifies the index or HTMLElement to select an item from the Tab.\n * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.\n * @returns void.\n */\n Tab.prototype.select = function (args) {\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.tbItem = selectAll('.' + CLS_HEADER + ' .' + CLS_TB_ITEM, this.element);\n this.prevItem = this.tbItem[this.prevIndex];\n if (!isNOU(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE)) {\n this.prevItem.children.item(0).setAttribute('tabindex', '-1');\n }\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: this.tbItem[this.selectedItem],\n selectedIndex: this.selectedItem,\n isSwiped: this.isSwipeed\n };\n this.trigger('selecting', eventArg);\n if (eventArg.cancel) {\n return;\n }\n if (typeof args === 'number') {\n if (!isNOU(this.tbItem[args]) && this.tbItem[args].classList.contains(CLS_DISABLE)) {\n for (var i = args + 1; i < this.items.length; i++) {\n if (this.items[i].disabled === false) {\n args = i;\n break;\n }\n else {\n args = 0;\n }\n }\n }\n if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {\n this.prevIndex = this.selectedItem;\n if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {\n this.setActive(this.popupHandler(this.tbItem[args]));\n }\n else {\n this.setActive(args);\n }\n }\n else {\n this.setActive(0);\n }\n }\n else if (args instanceof (HTMLElement)) {\n this.setActive(this.getEleIndex(args));\n }\n };\n /**\n * Specifies the value to disable/enable the Tab component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).\n * @returns void.\n */\n Tab.prototype.disable = function (value) {\n this.setCssClass(this.element, CLS_DISABLE, value);\n this.element.setAttribute('aria-disabled', '' + value);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n Tab.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedItem', 'actEleId']);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Tab.prototype.getModuleName = function () {\n return 'tab';\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {TabModel} newProp\n * @param {TabModel} oldProp\n * @returns void\n * @private\n */\n Tab.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyle(this.element, { width: formatUnit(newProp.width) });\n break;\n case 'height':\n setStyle(this.element, { height: formatUnit(newProp.height) });\n this.setContentHeight(false);\n break;\n case 'cssClass':\n this.setCssClass(this.element, newProp.cssClass, true);\n break;\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + '_' + index, this.element);\n var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + '_' + index, this.element);\n if (property === 'header') {\n var arr = [];\n arr.push(this.items[index]);\n this.items.splice(index, 1);\n this.tbObj.items.splice(index, 1);\n this.isReplace = true;\n this.addTab(arr, index);\n this.isReplace = false;\n }\n if (property === 'content' && !isNOU(cntItem)) {\n var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);\n if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {\n var eleVal = document.querySelector(newVal);\n var eleStr = eleVal.outerHTML.trim();\n cntItem.appendChild(eleVal.cloneNode(true));\n cntItem.querySelector(newVal).style.display = 'block';\n }\n else {\n cntItem.innerHTML = newVal;\n }\n }\n if (property === 'cssClass') {\n if (!isNOU(hdrItem)) {\n hdrItem.classList.remove(oldVal);\n hdrItem.classList.add(newVal);\n }\n if (!isNOU(cntItem)) {\n cntItem.classList.remove(oldVal);\n cntItem.classList.add(newVal);\n }\n }\n if (property === 'disabled') {\n this.enableTab(index, ((newVal === true) ? false : true));\n }\n }\n }\n else {\n if (isNOU(this.tbObj)) {\n this.renderContainer();\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n }\n else {\n this.setItems(newProp.items);\n select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element).innerHTML = '';\n this.select(this.selectedItem);\n }\n }\n break;\n case 'showCloseButton':\n this.setCloseButton(newProp.showCloseButton);\n break;\n case 'selectedItem':\n this.selectedItem = oldProp.selectedItem;\n this.select(newProp.selectedItem);\n break;\n case 'headerPlacement':\n var tempHdrEle = select('.' + CLS_HEADER, this.element);\n this.setOrientation(newProp.headerPlacement, tempHdrEle);\n this.select(this.selectedItem);\n break;\n case 'enableRtl':\n this.setRTL(newProp.enableRtl);\n break;\n case 'overflowMode':\n this.tbObj.overflowMode = newProp.overflowMode;\n this.tbObj.dataBind();\n this.refreshActElePosition();\n break;\n case 'heightAdjustMode':\n this.setContentHeight(false);\n this.select(this.selectedItem);\n break;\n }\n }\n };\n __decorate([\n Collection([], TabItem)\n ], Tab.prototype, \"items\", void 0);\n __decorate([\n Property('100%')\n ], Tab.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tab.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Tab.prototype, \"cssClass\", void 0);\n __decorate([\n Property(0)\n ], Tab.prototype, \"selectedItem\", void 0);\n __decorate([\n Property('Top')\n ], Tab.prototype, \"headerPlacement\", void 0);\n __decorate([\n Property('Content')\n ], Tab.prototype, \"heightAdjustMode\", void 0);\n __decorate([\n Property('Scrollable')\n ], Tab.prototype, \"overflowMode\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"showCloseButton\", void 0);\n __decorate([\n Complex({}, TabAnimationSettings)\n ], Tab.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"adding\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"added\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selecting\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selected\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"destroyed\", void 0);\n Tab = __decorate([\n NotifyPropertyChanges\n ], Tab);\n return Tab;\n}(Component));\nexport { Tab };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, isUndefined, Browser, compile } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { rippleEffect, Animation } from '@syncfusion/ej2-base';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, createElement, append } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { isNullOrUndefined as isNOU, Touch, getValue, setValue } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nvar ROOT = 'e-treeview';\nvar COLLAPSIBLE = 'e-icon-collapsible';\nvar EXPANDABLE = 'e-icon-expandable';\nvar LISTITEM = 'e-list-item';\nvar LISTTEXT = 'e-list-text';\nvar PARENTITEM = 'e-list-parent';\nvar HOVER = 'e-hover';\nvar ACTIVE = 'e-active';\nvar LOAD = 'e-icons-spinner';\nvar PROCESS = 'e-process';\nvar ICON = 'e-icons';\nvar TEXTWRAP = 'e-text-content';\nvar INPUT = 'e-input';\nvar INPUTGROUP = 'e-input-group';\nvar TREEINPUT = 'e-tree-input';\nvar EDITING = 'e-editing';\nvar RTL = 'e-rtl';\nvar DRAGITEM = 'e-drag-item';\nvar DROPPABLE = 'e-droppable';\nvar DRAGGING = 'e-dragging';\nvar SIBLING = 'e-sibling';\nvar DROPIN = 'e-drop-in';\nvar DROPNEXT = 'e-drop-next';\nvar DROPOUT = 'e-drop-out';\nvar NODROP = 'e-no-drop';\nvar FULLROWWRAP = 'e-fullrow-wrap';\nvar FULLROW = 'e-fullrow';\nvar SELECTED = 'e-selected';\nvar EXPANDED = 'e-expanded';\nvar NODECOLLAPSED = 'e-node-collapsed';\nvar DISABLE = 'e-disable';\nvar CONTENT = 'e-content';\nvar DOWNTAIL = 'e-downtail';\nvar DROPCOUNT = 'e-drop-count';\nvar CHECK = 'e-check';\nvar INDETERMINATE = 'e-stop';\nvar CHECKBOXWRAP = 'e-checkbox-wrapper';\nvar CHECKBOXFRAME = 'e-frame';\nvar CHECKBOXRIPPLE = 'e-ripple-container';\nvar FOCUS = 'e-node-focus';\nvar IMAGE = 'e-list-img';\nvar BIGGER = 'e-bigger';\nvar SMALL = 'e-small';\nvar treeAriaAttr = {\n treeRole: 'tree',\n itemRole: 'treeitem',\n listRole: 'group',\n itemText: '',\n wrapperRole: '',\n};\n/**\n * Configures the fields to bind to the properties of node in the TreeView component.\n */\nvar FieldsSettings = /** @class */ (function (_super) {\n __extends(FieldsSettings, _super);\n function FieldsSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('child')\n ], FieldsSettings.prototype, \"child\", void 0);\n __decorate([\n Property([])\n ], FieldsSettings.prototype, \"dataSource\", void 0);\n __decorate([\n Property('expanded')\n ], FieldsSettings.prototype, \"expanded\", void 0);\n __decorate([\n Property('hasChildren')\n ], FieldsSettings.prototype, \"hasChildren\", void 0);\n __decorate([\n Property('htmlAttributes')\n ], FieldsSettings.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldsSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('id')\n ], FieldsSettings.prototype, \"id\", void 0);\n __decorate([\n Property('imageUrl')\n ], FieldsSettings.prototype, \"imageUrl\", void 0);\n __decorate([\n Property('isChecked')\n ], FieldsSettings.prototype, \"isChecked\", void 0);\n __decorate([\n Property('parentID')\n ], FieldsSettings.prototype, \"parentID\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"query\", void 0);\n __decorate([\n Property('selected')\n ], FieldsSettings.prototype, \"selected\", void 0);\n __decorate([\n Property(null)\n ], FieldsSettings.prototype, \"tableName\", void 0);\n __decorate([\n Property('text')\n ], FieldsSettings.prototype, \"text\", void 0);\n __decorate([\n Property('tooltip')\n ], FieldsSettings.prototype, \"tooltip\", void 0);\n __decorate([\n Property('navigateUrl')\n ], FieldsSettings.prototype, \"navigateUrl\", void 0);\n return FieldsSettings;\n}(ChildProperty));\nexport { FieldsSettings };\n/**\n * Configures animation settings for the TreeView component.\n */\nvar ActionSettings = /** @class */ (function (_super) {\n __extends(ActionSettings, _super);\n function ActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], ActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], ActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], ActionSettings.prototype, \"easing\", void 0);\n return ActionSettings;\n}(ChildProperty));\nexport { ActionSettings };\n/**\n * Configures the animation settings for expanding and collapsing nodes in TreeView.\n */\nvar NodeAnimationSettings = /** @class */ (function (_super) {\n __extends(NodeAnimationSettings, _super);\n function NodeAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, ActionSettings)\n ], NodeAnimationSettings.prototype, \"expand\", void 0);\n return NodeAnimationSettings;\n}(ChildProperty));\nexport { NodeAnimationSettings };\n/**\n * The TreeView component is used to represent hierarchical data in a tree like structure with advanced\n * functions to perform edit, drag and drop, selection with check-box, and more.\n * ```html\n *
\n * ```\n * ```typescript\n * let treeObj: TreeView = new TreeView();\n * treeObj.appendTo('#tree');\n * ```\n */\nvar TreeView = /** @class */ (function (_super) {\n __extends(TreeView, _super);\n function TreeView(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseDownStatus = false;\n return _this;\n }\n /**\n * Get component name.\n * @returns string\n * @private\n */\n TreeView.prototype.getModuleName = function () {\n return 'treeview';\n };\n /**\n * Initialize the event handler\n */\n TreeView.prototype.preRender = function () {\n var _this = this;\n this.checkActionNodes = [];\n this.dragStartAction = false;\n this.isAnimate = false;\n this.keyConfigs = {\n escape: 'escape',\n end: 'end',\n enter: 'enter',\n f2: 'f2',\n home: 'home',\n moveDown: 'downarrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n ctrlDown: 'ctrl+downarrow',\n ctrlUp: 'ctrl+uparrow',\n ctrlEnter: 'ctrl+enter',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n ctrlA: 'ctrl+A',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftEnter: 'shift+enter',\n shiftHome: 'shift+home',\n shiftEnd: 'shift+end',\n csDown: 'ctrl+shift+downarrow',\n csUp: 'ctrl+shift+uparrow',\n csEnter: 'ctrl+shift+enter',\n csHome: 'ctrl+shift+home',\n csEnd: 'ctrl+shift+end',\n space: 'space',\n };\n this.listBaseOption = {\n expandCollapse: true,\n fields: this.fields.properties,\n showIcon: true,\n expandIconClass: EXPANDABLE,\n ariaAttributes: treeAriaAttr,\n expandIconPosition: 'Left',\n itemCreated: function (e) {\n _this.beforeNodeCreate(e);\n },\n };\n this.listBaseOption.fields.url = this.fields.navigateUrl;\n this.aniObj = new Animation({});\n this.treeList = [];\n this.isLoaded = false;\n this.setTouchClass();\n if (isNOU(this.selectedNodes)) {\n this.setProperties({ selectedNodes: [] }, true);\n }\n if (isNOU(this.checkedNodes)) {\n this.setProperties({ checkedNodes: [] }, true);\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n * @hidden\n */\n TreeView.prototype.getPersistData = function () {\n var keyEntity = ['selectedNodes', 'checkedNodes'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n TreeView.prototype.render = function () {\n this.isAnimate = true;\n this.initialize();\n this.setDataBinding();\n this.setExpandOnType();\n this.setRipple();\n this.wireEditingEvents(this.allowEditing);\n this.setDragAndDrop(this.allowDragAndDrop);\n this.wireEvents();\n };\n TreeView.prototype.initialize = function () {\n this.element.setAttribute('role', 'tree');\n this.element.setAttribute('tabindex', '0');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n this.setCssClass(null, this.cssClass);\n this.setEnableRtl();\n this.setFullRow(this.fullRowSelect);\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n };\n TreeView.prototype.setEnableRtl = function () {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n };\n TreeView.prototype.setRipple = function () {\n var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;\n var rippleModel = {\n selector: tempStr,\n ignore: '.' + TEXTWRAP + ' > .' + ICON + ',.' + INPUTGROUP + ',.' + INPUT + ', .' + CHECKBOXWRAP\n };\n this.rippleFn = rippleEffect(this.element, rippleModel);\n var iconModel = {\n selector: '.' + TEXTWRAP + ' > .' + ICON,\n isCenterRipple: true,\n };\n this.rippleIconFn = rippleEffect(this.element, iconModel);\n };\n TreeView.prototype.setFullRow = function (isEnabled) {\n isEnabled ? addClass([this.element], FULLROWWRAP) : removeClass([this.element], FULLROWWRAP);\n };\n TreeView.prototype.setMultiSelect = function (isEnabled) {\n var firstUl = select('.' + PARENTITEM, this.element);\n if (isEnabled) {\n firstUl.setAttribute('aria-multiselectable', 'true');\n }\n else {\n firstUl.removeAttribute('aria-multiselectable');\n }\n };\n TreeView.prototype.templateComplier = function (template) {\n if (template) {\n var e = void 0;\n try {\n if (document.querySelectorAll(template).length) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return undefined;\n };\n TreeView.prototype.setDataBinding = function () {\n var _this = this;\n this.treeList.push('false');\n if (this.fields.dataSource instanceof DataManager) {\n this.fields.dataSource.executeQuery(this.getQuery(this.fields)).then(function (e) {\n _this.treeList.pop();\n _this.treeData = e.result;\n _this.isNumberTypeId = _this.getType();\n _this.setRootData();\n _this.renderItems(true);\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n });\n }\n else {\n this.treeList.pop();\n if (isNOU(this.fields.dataSource)) {\n this.rootData = this.treeData = [];\n }\n else {\n this.treeData = this.fields.dataSource;\n this.setRootData();\n }\n this.renderItems(false);\n }\n if (this.treeList.length === 0 && !this.isLoaded) {\n this.finalize();\n }\n };\n TreeView.prototype.getQuery = function (mapper, value) {\n if (value === void 0) { value = null; }\n var columns = [];\n var query;\n if (!mapper.query) {\n query = new Query();\n var prop = this.getActualProperties(mapper);\n for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper[col]\n && columns.indexOf(mapper[col]) === -1) {\n columns.push(mapper[col]);\n }\n }\n query.select(columns);\n if (prop.hasOwnProperty('tableName')) {\n query.from(mapper.tableName);\n }\n }\n else {\n query = mapper.query.clone();\n }\n ListBase.addSorting(this.sortOrder, mapper.text, query);\n if (!isNOU(value) && !isNOU(mapper.parentID)) {\n query.where(mapper.parentID, 'equal', (this.isNumberTypeId ? parseFloat(value) : value));\n }\n return query;\n };\n TreeView.prototype.getType = function () {\n return this.treeData[0] ? ((typeof getValue(this.fields.id, this.treeData[0]) === 'number') ? true : false) : false;\n };\n TreeView.prototype.setRootData = function () {\n this.dataType = this.getDataType(this.treeData, this.fields);\n if (this.dataType === 1) {\n this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);\n var rootItems = this.getChildNodes(this.treeData, undefined, true);\n if (isNOU(rootItems)) {\n this.rootData = [];\n }\n else {\n this.rootData = rootItems;\n }\n }\n else {\n this.rootData = this.treeData;\n }\n };\n TreeView.prototype.renderItems = function (isSorted) {\n this.listBaseOption.ariaAttributes.level = 1;\n this.ulElement = ListBase.createList(isSorted ? this.rootData : this.getSortedData(this.rootData), this.listBaseOption);\n this.element.appendChild(this.ulElement);\n this.finalizeNode(this.element);\n };\n TreeView.prototype.beforeNodeCreate = function (e) {\n if (this.showCheckBox) {\n var checkboxEle = createCheckBox(true, { cssClass: this.touchClass });\n var icon = select('div.' + ICON, e.item);\n var id = e.item.getAttribute('data-uid');\n e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);\n var checkValue = getValue(e.fields.isChecked, e.curData);\n if (this.checkedNodes.indexOf(id) > -1) {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else if (!isNOU(checkValue) && checkValue.toString() === 'true') {\n select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);\n checkboxEle.setAttribute('aria-checked', 'true');\n this.addCheck(e.item);\n }\n else {\n checkboxEle.setAttribute('aria-checked', 'false');\n }\n var frame = select('.' + CHECKBOXFRAME, checkboxEle);\n EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);\n EventHandler.add(frame, 'mouseup', this.frameMouseHandler, this);\n }\n if (this.fullRowSelect) {\n this.createFullRow(e.item);\n }\n if (this.allowMultiSelection && !e.item.classList.contains(SELECTED)) {\n e.item.setAttribute('aria-selected', 'false');\n }\n var fields = e.fields;\n this.addActionClass(e, fields.selected, SELECTED);\n this.addActionClass(e, fields.expanded, EXPANDED);\n if (!isNOU(this.nodeTemplateFn)) {\n var textEle = e.item.querySelector('.' + LISTTEXT);\n textEle.innerHTML = '';\n append(this.nodeTemplateFn(e.curData), textEle);\n }\n var eventArgs = {\n node: e.item,\n nodeData: e.curData,\n text: e.text,\n };\n this.trigger('drawNode', eventArgs);\n };\n TreeView.prototype.frameMouseHandler = function (e) {\n var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);\n rippleMouseHandler(e, rippleSpan);\n };\n TreeView.prototype.addActionClass = function (e, action, cssClass) {\n var data = e.curData;\n var actionValue = getValue(action, data);\n if (!isNOU(actionValue) && actionValue.toString() !== 'false') {\n e.item.classList.add(cssClass);\n }\n };\n TreeView.prototype.getDataType = function (ds, mapper) {\n if (this.fields.dataSource instanceof DataManager) {\n for (var i = 0; i < ds.length; i++) {\n if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i]))) {\n return 1;\n }\n }\n return 2;\n }\n for (var i = 0, len = ds.length; i < len; i++) {\n if ((typeof mapper.child === 'string') && !isNOU(getValue(mapper.child, ds[i]))) {\n return 2;\n }\n if (!isNOU(getValue(mapper.parentID, ds[i])) || !isNOU(getValue(mapper.hasChildren, ds[i]))) {\n return 1;\n }\n }\n return 1;\n };\n TreeView.prototype.getGroupedData = function (dataSource, groupBy) {\n var cusQuery = new Query().group(groupBy);\n var ds = ListBase.getDataSource(dataSource, cusQuery);\n var grpItem = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n grpItem.push(itemObj);\n }\n return grpItem;\n };\n TreeView.prototype.getSortedData = function (list) {\n if (list && this.sortOrder !== 'None') {\n list = ListBase.getDataSource(list, ListBase.addSorting(this.sortOrder, this.fields.text));\n }\n return list;\n };\n TreeView.prototype.finalizeNode = function (element) {\n var iNodes = selectAll('.' + IMAGE, element);\n for (var k = 0; k < iNodes.length; k++) {\n iNodes[k].setAttribute('alt', IMAGE);\n }\n if (this.isLoaded) {\n var sNodes = selectAll('.' + SELECTED, element);\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[i], null);\n break;\n }\n removeClass(sNodes, SELECTED);\n }\n var cNodes = selectAll('.' + LISTITEM + ':not(.' + EXPANDED + ')', element);\n for (var j = 0; j < cNodes.length; j++) {\n var icon = select('div.' + ICON, cNodes[j]);\n if (icon && icon.classList.contains(EXPANDABLE)) {\n cNodes[j].setAttribute('aria-expanded', 'false');\n addClass([cNodes[j]], NODECOLLAPSED);\n }\n }\n var eNodes = selectAll('.' + EXPANDED, element);\n for (var i = 0; i < eNodes.length; i++) {\n this.renderChildNodes(eNodes[i]);\n }\n removeClass(eNodes, EXPANDED);\n this.updateList();\n if (this.isLoaded) {\n this.updateCheckedProp();\n }\n };\n TreeView.prototype.updateCheckedProp = function () {\n var _this = this;\n if (this.showCheckBox) {\n var nodes_1 = [].concat([], this.checkedNodes);\n this.checkedNodes.forEach(function (value, index) {\n var checkBox = _this.element.querySelector('[data-uid=\"' + value + '\"]');\n if (isNOU(checkBox)) {\n nodes_1 = nodes_1.filter(function (e) { return e !== value; });\n }\n });\n this.setProperties({ checkedNodes: nodes_1 }, true);\n }\n };\n TreeView.prototype.ensureParentCheckState = function (element) {\n if (!isNOU(element)) {\n if (element.classList.contains(ROOT)) {\n return;\n }\n var ulElement = element;\n if (element.classList.contains(LISTITEM)) {\n ulElement = select('.' + PARENTITEM, element);\n }\n var checkedNodes = selectAll('.' + CHECK, ulElement);\n var nodes = selectAll('.' + LISTITEM, ulElement);\n var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];\n if (nodes.length === checkedNodes.length) {\n this.changeState(checkBoxEle, 'check', null, true, true);\n }\n else if (checkedNodes.length > 0) {\n this.changeState(checkBoxEle, 'indeterminate', null, true, true);\n }\n else if (checkedNodes.length === 0) {\n this.changeState(checkBoxEle, 'uncheck', null, true, true);\n }\n var parentUL = closest(element, '.' + PARENTITEM);\n if (!isNOU(parentUL)) {\n var currentParent = closest(parentUL, '.' + LISTITEM);\n this.ensureParentCheckState(currentParent);\n }\n }\n };\n TreeView.prototype.ensureChildCheckState = function (element, e) {\n if (!isNOU(element)) {\n var childElement = select('.' + PARENTITEM, element);\n var checkBoxes = void 0;\n if (!isNOU(childElement)) {\n checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);\n var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n var checkedState = void 0;\n for (var index = 0; index < checkBoxes.length; index++) {\n if (!isNOU(this.currentLoadData) && !isNOU(getValue(this.fields.isChecked, this.currentLoadData[index]))) {\n checkedState = getValue(this.fields.isChecked, this.currentLoadData[index]) ? 'check' : 'uncheck';\n }\n else {\n var isNodeChecked = checkBoxes[index].getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);\n checkedState = (!this.isLoaded && isNodeChecked) ? 'check' : (isChecked ? 'check' : 'uncheck');\n }\n this.changeState(checkBoxes[index], checkedState, e, true, true);\n }\n }\n }\n };\n TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {\n if (!isNOU(nodes)) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);\n this.validateCheckNode(checkBox, !doCheck, liEle, null);\n }\n }\n else {\n var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);\n for (var index = 0; index < checkBoxes.length; index++) {\n this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');\n }\n }\n };\n TreeView.prototype.changeState = function (wrapper, state, e, isPrevent, isAdd) {\n var ariaState;\n var eventArgs;\n var currLi = closest(wrapper, '.' + LISTITEM);\n if (!isPrevent) {\n this.checkActionNodes = [];\n eventArgs = this.getCheckEvent(currLi, state, e);\n this.trigger('nodeChecking', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n var frameSpan = wrapper.getElementsByClassName(CHECKBOXFRAME)[0];\n if (state === 'check' && !frameSpan.classList.contains(CHECK)) {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n this.addCheck(currLi);\n ariaState = 'true';\n }\n else if (state === 'uncheck' && (frameSpan.classList.contains(CHECK) || frameSpan.classList.contains(INDETERMINATE))) {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n this.removeCheck(currLi);\n ariaState = 'false';\n }\n else if (state === 'indeterminate' && !frameSpan.classList.contains(INDETERMINATE)) {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n this.removeCheck(currLi);\n ariaState = 'mixed';\n }\n ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n if (isAdd) {\n var data = [].concat([], this.checkActionNodes);\n eventArgs = this.getCheckEvent(currLi, state, e);\n if (isUndefined(isPrevent)) {\n eventArgs.data = data;\n }\n }\n if (!isPrevent) {\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n eventArgs.data[0].checked = ariaState;\n this.trigger('nodeChecked', eventArgs);\n this.checkActionNodes = [];\n }\n }\n };\n TreeView.prototype.addCheck = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.checkedNodes.indexOf(id) === -1) {\n this.checkedNodes.push(id);\n }\n };\n TreeView.prototype.removeCheck = function (liEle) {\n var index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.checkedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.getCheckEvent = function (currLi, action, e) {\n this.checkActionNodes.push(this.getNodeData(currLi));\n var nodeData = this.checkActionNodes;\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, data: nodeData };\n };\n TreeView.prototype.finalize = function () {\n var firstUl = select('.' + PARENTITEM, this.element);\n firstUl.setAttribute('role', treeAriaAttr.treeRole);\n this.setMultiSelect(this.allowMultiSelection);\n var firstNode = select('.' + LISTITEM, this.element);\n if (firstNode) {\n addClass([firstNode], FOCUS);\n this.updateIdAttr(null, firstNode);\n }\n this.doSelectionAction();\n this.updateCheckedProp();\n this.isLoaded = true;\n this.isAnimate = false;\n var eventArgs = { data: this.treeData };\n this.trigger('dataBound', eventArgs);\n };\n TreeView.prototype.doSelectionAction = function () {\n var sNodes = selectAll('.' + SELECTED, this.element);\n var sUids = this.selectedNodes;\n if (sUids.length > 0) {\n this.setProperties({ selectedNodes: [] }, true);\n for (var i = 0; i < sUids.length; i++) {\n var sNode = select('[data-uid=\"' + sUids[i] + '\"]', this.element);\n this.selectNode(sNode, null, true);\n if (!this.allowMultiSelection) {\n break;\n }\n }\n }\n else {\n this.selectGivenNodes(sNodes);\n }\n removeClass(sNodes, SELECTED);\n };\n TreeView.prototype.selectGivenNodes = function (sNodes) {\n for (var i = 0; i < sNodes.length; i++) {\n this.selectNode(sNodes[i], null, true);\n if (!this.allowMultiSelection) {\n break;\n }\n }\n };\n TreeView.prototype.clickHandler = function (event) {\n var target = event.originalEvent.target;\n EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);\n if (!target || this.dragStartAction) {\n return;\n }\n else {\n var classList = target.classList;\n var li = closest(target, '.' + LISTITEM);\n if (!li) {\n return;\n }\n else {\n this.removeHover();\n this.setFocusElement(li);\n if (this.showCheckBox && !li.classList.contains('e-disable')) {\n var checkWrapper = closest(target, '.' + CHECKBOXWRAP);\n if (!isNOU(checkWrapper)) {\n var checkElement = select('.' + CHECKBOXFRAME, checkWrapper);\n this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);\n this.triggerClickEvent(event.originalEvent, li);\n return;\n }\n }\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(li, target, event);\n }\n else if (classList.contains(COLLAPSIBLE)) {\n this.collapseNode(li, target, event);\n }\n else {\n if (!classList.contains(PARENTITEM) && !classList.contains(LISTITEM)) {\n this.toggleSelect(li, event.originalEvent, false);\n }\n }\n this.triggerClickEvent(event.originalEvent, li);\n }\n }\n };\n TreeView.prototype.nodeCheckingEvent = function (wrapper, isCheck, e) {\n var currLi = closest(wrapper, '.' + LISTITEM);\n this.checkActionNodes = [];\n var ariaState = !isCheck ? 'true' : 'false';\n if (!isNOU(ariaState)) {\n wrapper.setAttribute('aria-checked', ariaState);\n }\n var eventArgs = this.getCheckEvent(currLi, !isCheck ? 'uncheck' : 'check', e);\n this.trigger('nodeChecking', eventArgs);\n return eventArgs;\n };\n TreeView.prototype.nodeCheckedEvent = function (wrapper, isCheck, e) {\n var currLi = closest(wrapper, '.' + LISTITEM);\n var eventArgs = this.getCheckEvent(wrapper, isCheck ? 'uncheck' : 'check', e);\n eventArgs.data = eventArgs.data.splice(0, eventArgs.data.length - 1);\n this.trigger('nodeChecked', eventArgs);\n };\n TreeView.prototype.triggerClickEvent = function (e, li) {\n var eventArgs = {\n event: e,\n node: li,\n };\n this.trigger('nodeClicked', eventArgs);\n };\n TreeView.prototype.expandNode = function (currLi, icon) {\n var _this = this;\n if (icon.classList.contains(LOAD)) {\n this.hideSpinner(icon);\n }\n removeClass([icon], EXPANDABLE);\n addClass([icon], COLLAPSIBLE);\n var start = 0;\n var end = 0;\n var proxy = this;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n this.setHeight(liEle, ul);\n if (!this.isAnimate) {\n this.aniObj.animate(ul, {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing,\n begin: function (args) {\n liEle.style.overflow = 'hidden';\n start = liEle.offsetHeight;\n end = select('.' + TEXTWRAP, currLi).offsetHeight;\n },\n progress: function (args) {\n args.element.style.display = 'block';\n proxy.animateHeight(args, start, end);\n },\n end: function (args) {\n args.element.style.display = 'block';\n _this.expandedNode(liEle, ul, icon);\n }\n });\n }\n else {\n this.expandedNode(liEle, ul, icon);\n }\n };\n TreeView.prototype.expandedNode = function (currLi, ul, icon) {\n ul.style.display = 'block';\n currLi.style.display = 'block';\n currLi.style.overflow = '';\n currLi.style.height = '';\n removeClass([icon], PROCESS);\n currLi.setAttribute('aria-expanded', 'true');\n removeClass([currLi], NODECOLLAPSED);\n if (this.isLoaded && this.expandArgs) {\n this.expandArgs = this.getExpandEvent(currLi, null);\n this.trigger('nodeExpanded', this.expandArgs);\n }\n };\n TreeView.prototype.collapseNode = function (currLi, icon, e) {\n var _this = this;\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n var colArgs;\n if (this.isLoaded) {\n colArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeCollapsing', colArgs);\n if (colArgs.cancel) {\n removeClass([icon], PROCESS);\n return;\n }\n }\n removeClass([icon], COLLAPSIBLE);\n addClass([icon], EXPANDABLE);\n var start = 0;\n var end = 0;\n var proxy = this;\n var ul = select('.' + PARENTITEM, currLi);\n var liEle = currLi;\n addClass([currLi], NODECOLLAPSED);\n this.aniObj.animate(ul, {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n begin: function (args) {\n liEle.style.overflow = 'hidden';\n start = select('.' + TEXTWRAP, currLi).offsetHeight;\n end = liEle.offsetHeight;\n },\n progress: function (args) {\n proxy.animateHeight(args, start, end);\n },\n end: function (args) {\n liEle.style.overflow = '';\n args.element.style.display = 'none';\n liEle.style.height = '';\n removeClass([icon], PROCESS);\n currLi.setAttribute('aria-expanded', 'false');\n if (_this.isLoaded) {\n _this.trigger('nodeCollapsed', colArgs);\n }\n }\n });\n };\n TreeView.prototype.setHeight = function (currLi, ul) {\n ul.style.display = 'block';\n ul.style.visibility = 'hidden';\n currLi.style.height = currLi.offsetHeight + 'px';\n ul.style.display = 'none';\n ul.style.visibility = '';\n };\n TreeView.prototype.animateHeight = function (args, start, end) {\n var remaining = (args.duration - args.timeStamp) / args.duration;\n var currentHeight = (end - start) * remaining + start;\n args.element.parentElement.style.height = currentHeight + 'px';\n };\n TreeView.prototype.renderChildNodes = function (parentLi, expandChild) {\n var _this = this;\n var eicon = select('div.' + ICON, parentLi);\n if (isNOU(eicon)) {\n return;\n }\n this.showSpinner(eicon);\n var childItems;\n if (this.fields.dataSource instanceof DataManager) {\n var level = this.parents(parentLi, '.' + PARENTITEM).length;\n var mapper_1 = this.getChildFields(this.fields, level, 1);\n if (isNOU(mapper_1) || isNOU(mapper_1.dataSource)) {\n detach(eicon);\n parentLi.removeAttribute('aria-expanded');\n return;\n }\n this.treeList.push('false');\n mapper_1.dataSource.executeQuery(this.getQuery(mapper_1, parentLi.getAttribute('data-uid'))).then(function (e) {\n _this.treeList.pop();\n childItems = e.result;\n _this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n parentLi.removeAttribute('aria-expanded');\n }\n else {\n var prop = _this.getActualProperties(mapper_1);\n _this.listBaseOption.fields = prop;\n _this.listBaseOption.fields.url = prop.navigateUrl;\n var id = parentLi.getAttribute('data-uid');\n var nodeData = _this.getNodeObject(id);\n setValue('child', childItems, nodeData);\n _this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(childItems, _this.listBaseOption));\n _this.expandNode(parentLi, eicon);\n _this.ensureCheckNode(parentLi);\n _this.finalizeNode(parentLi);\n _this.renderSubChild(parentLi, expandChild);\n }\n if (_this.treeList.length === 0 && !_this.isLoaded) {\n _this.finalize();\n }\n });\n }\n else {\n childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));\n this.currentLoadData = childItems;\n if (isNOU(childItems) || childItems.length === 0) {\n detach(eicon);\n parentLi.removeAttribute('aria-expanded');\n return;\n }\n else {\n this.listBaseOption.ariaAttributes.level = parseFloat(parentLi.getAttribute('aria-level')) + 1;\n parentLi.appendChild(ListBase.createList(this.getSortedData(childItems), this.listBaseOption));\n this.expandNode(parentLi, eicon);\n this.ensureCheckNode(parentLi);\n this.finalizeNode(parentLi);\n this.renderSubChild(parentLi, expandChild);\n }\n }\n };\n TreeView.prototype.ensureCheckNode = function (element) {\n if (this.showCheckBox) {\n this.ensureChildCheckState(element);\n this.ensureParentCheckState(element);\n }\n this.currentLoadData = null;\n };\n TreeView.prototype.getFields = function (mapper, nodeLevel, dataLevel) {\n if (nodeLevel === dataLevel) {\n return mapper;\n }\n else {\n return this.getFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildFields = function (mapper, nodeLevel, dataLevel) {\n var childData;\n if (nodeLevel === dataLevel) {\n return this.getChildMapper(mapper);\n }\n else {\n return this.getChildFields(this.getChildMapper(mapper), nodeLevel, dataLevel + 1);\n }\n };\n TreeView.prototype.getChildMapper = function (mapper) {\n return (typeof mapper.child === 'string' || isNOU(mapper.child)) ? mapper : mapper.child;\n };\n TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {\n if (isRoot === void 0) { isRoot = false; }\n var childNodes;\n if (isNOU(obj)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n return this.getChildGroup(this.groupedData, parentId, isRoot);\n }\n else {\n if (typeof this.fields.child === 'string') {\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, obj[i]);\n if (dataId && dataId.toString() === parentId) {\n return getValue(this.fields.child, obj[i]);\n }\n else if (!isNOU(getValue(this.fields.child, obj[i]))) {\n childNodes = this.getChildNodes(getValue(this.fields.child, obj[i]), parentId);\n if (childNodes !== undefined) {\n break;\n }\n }\n }\n }\n }\n return childNodes;\n };\n TreeView.prototype.getChildGroup = function (data, parentId, isRoot) {\n var childNodes;\n if (isNOU(data)) {\n return childNodes;\n }\n for (var i = 0, objlen = data.length; i < objlen; i++) {\n if (!isNOU(data[i][0]) && !isNOU(getValue(this.fields.parentID, data[i][0]))) {\n if (getValue(this.fields.parentID, data[i][0]).toString() === parentId) {\n return data[i];\n }\n }\n else if (isRoot) {\n return data[i];\n }\n else {\n return [];\n }\n }\n return childNodes;\n };\n TreeView.prototype.renderSubChild = function (element, expandChild) {\n if (expandChild) {\n var cIcons = selectAll('.' + EXPANDABLE, element);\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n var curLi = closest(icon, '.' + LISTITEM);\n this.expandArgs = this.getExpandEvent(curLi, null);\n this.trigger('nodeExpanding', this.expandArgs);\n this.renderChildNodes(curLi, expandChild);\n }\n }\n };\n TreeView.prototype.toggleSelect = function (li, e, multiSelect) {\n if (!li.classList.contains('e-disable')) {\n if (this.allowMultiSelection && ((e && e.ctrlKey) || multiSelect) && this.isActive(li)) {\n this.unselectNode(li, e);\n }\n else {\n this.selectNode(li, e, multiSelect);\n }\n }\n };\n TreeView.prototype.isActive = function (li) {\n return li.classList.contains(ACTIVE) ? true : false;\n };\n TreeView.prototype.selectNode = function (li, e, multiSelect) {\n if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {\n this.setFocusElement(li);\n return;\n }\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'select', e);\n this.trigger('nodeSelecting', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n if (!this.allowMultiSelection || (!multiSelect && (!e || (e && !e.ctrlKey)))) {\n this.removeSelectAll();\n }\n if (this.allowMultiSelection && e && e.shiftKey) {\n if (!this.startNode) {\n this.startNode = li;\n }\n var startIndex = this.liList.indexOf(this.startNode);\n var endIndex = this.liList.indexOf(li);\n if (startIndex > endIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex; i <= endIndex; i++) {\n var currNode = this.liList[i];\n if (isVisible(currNode)) {\n this.addSelect(currNode);\n }\n }\n }\n else {\n this.startNode = li;\n this.addSelect(li);\n }\n this.setFocusElement(li);\n if (this.isLoaded) {\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.unselectNode = function (li, e) {\n var eventArgs;\n if (this.isLoaded) {\n eventArgs = this.getSelectEvent(li, 'un-select', e);\n this.trigger('nodeSelecting', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n }\n this.removeSelect(li);\n this.setFocusElement(li);\n if (this.isLoaded) {\n this.trigger('nodeSelected', eventArgs);\n }\n };\n TreeView.prototype.setFocusElement = function (li) {\n if (!isNOU(li)) {\n var focusedNode = this.getFocusedNode();\n if (focusedNode) {\n removeClass([focusedNode], FOCUS);\n }\n addClass([li], FOCUS);\n this.updateIdAttr(focusedNode, li);\n }\n };\n TreeView.prototype.addSelect = function (liEle) {\n liEle.setAttribute('aria-selected', 'true');\n addClass([liEle], ACTIVE);\n var id = liEle.getAttribute('data-uid');\n if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {\n this.selectedNodes.push(id);\n }\n };\n TreeView.prototype.removeSelect = function (liEle) {\n if (this.allowMultiSelection) {\n liEle.setAttribute('aria-selected', 'false');\n }\n else {\n liEle.removeAttribute('aria-selected');\n }\n removeClass([liEle], ACTIVE);\n var index = this.selectedNodes.indexOf(liEle.getAttribute('data-uid'));\n if (index > -1) {\n this.selectedNodes.splice(index, 1);\n }\n };\n TreeView.prototype.removeSelectAll = function () {\n var selectedLI = this.element.querySelectorAll('.' + ACTIVE);\n for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {\n var ele = selectedLI_1[_i];\n if (this.allowMultiSelection) {\n ele.setAttribute('aria-selected', 'false');\n }\n else {\n ele.removeAttribute('aria-selected');\n }\n }\n removeClass(selectedLI, ACTIVE);\n this.setProperties({ selectedNodes: [] }, true);\n };\n TreeView.prototype.getSelectEvent = function (currLi, action, e) {\n var nodeData = this.getNodeData(currLi);\n return { action: action, cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData };\n };\n TreeView.prototype.setExpandOnType = function () {\n this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;\n };\n TreeView.prototype.expandHandler = function (e) {\n var target = e.originalEvent.target;\n if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||\n target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||\n target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {\n return;\n }\n else {\n this.expandCollapseAction(closest(target, '.' + LISTITEM), e);\n }\n };\n TreeView.prototype.expandCollapseAction = function (currLi, e) {\n var icon = select('div.' + ICON, currLi);\n if (!icon || icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n var classList = icon.classList;\n if (classList.contains(EXPANDABLE)) {\n this.expandAction(currLi, icon, e);\n }\n else {\n this.collapseNode(currLi, icon, e);\n }\n }\n };\n TreeView.prototype.expandAction = function (currLi, icon, e, expandChild) {\n if (icon.classList.contains(PROCESS)) {\n return;\n }\n else {\n addClass([icon], PROCESS);\n }\n if (this.isLoaded) {\n this.expandArgs = this.getExpandEvent(currLi, e);\n this.trigger('nodeExpanding', this.expandArgs);\n if (this.expandArgs.cancel) {\n removeClass([icon], PROCESS);\n return;\n }\n }\n var ul = select('.' + PARENTITEM, currLi);\n if (ul && ul.nodeName === 'UL') {\n this.expandNode(currLi, icon);\n }\n else {\n this.renderChildNodes(currLi, expandChild);\n }\n };\n TreeView.prototype.keyActionHandler = function (e) {\n var target = e.target;\n var focusedNode = this.getFocusedNode();\n if (target && target.classList.contains(INPUT)) {\n var inpEle = target;\n if (e.action === 'enter') {\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n else if (e.action === 'escape') {\n inpEle.value = this.oldText;\n inpEle.blur();\n this.element.focus();\n addClass([focusedNode], HOVER);\n }\n return;\n }\n e.preventDefault();\n var eventArgs = {\n cancel: false,\n event: e,\n node: focusedNode,\n };\n this.trigger('keyPress', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n switch (e.action) {\n case 'space':\n if (this.showCheckBox) {\n this.checkNode(e);\n }\n break;\n case 'moveRight':\n this.openNode(this.enableRtl ? false : true, e);\n break;\n case 'moveLeft':\n this.openNode(this.enableRtl ? true : false, e);\n break;\n case 'shiftDown':\n this.shiftKeySelect(true, e);\n break;\n case 'moveDown':\n case 'ctrlDown':\n case 'csDown':\n this.navigateNode(true);\n break;\n case 'shiftUp':\n this.shiftKeySelect(false, e);\n break;\n case 'moveUp':\n case 'ctrlUp':\n case 'csUp':\n this.navigateNode(false);\n break;\n case 'home':\n case 'shiftHome':\n case 'ctrlHome':\n case 'csHome':\n this.navigateRootNode(true);\n break;\n case 'end':\n case 'shiftEnd':\n case 'ctrlEnd':\n case 'csEnd':\n this.navigateRootNode(false);\n break;\n case 'enter':\n case 'ctrlEnter':\n case 'shiftEnter':\n case 'csEnter':\n this.toggleSelect(focusedNode, e);\n break;\n case 'f2':\n if (this.allowEditing) {\n this.createTextbox(focusedNode, e);\n }\n break;\n case 'ctrlA':\n if (this.allowMultiSelection) {\n var sNodes = selectAll('.' + LISTITEM + ':not(.' + ACTIVE + ')', this.element);\n this.selectGivenNodes(sNodes);\n }\n break;\n }\n };\n TreeView.prototype.navigateToFocus = function (isUp) {\n var focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);\n var pos = focusNode.getBoundingClientRect();\n var parent = this.getScrollParent(this.element);\n if (!isNOU(parent)) {\n var parentPos = parent.getBoundingClientRect();\n if (pos.bottom > parentPos.bottom) {\n parent.scrollTop += pos.bottom - parentPos.bottom;\n }\n else if (pos.top < parentPos.top) {\n parent.scrollTop -= parentPos.top - pos.top;\n }\n }\n var isVisible = this.isVisibleInViewport(focusNode);\n if (!isVisible) {\n focusNode.scrollIntoView(isUp);\n }\n };\n TreeView.prototype.isVisibleInViewport = function (txtWrap) {\n var pos = txtWrap.getBoundingClientRect();\n return (pos.top >= 0 && pos.left >= 0 && pos.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n pos.right <= (window.innerWidth || document.documentElement.clientWidth));\n };\n TreeView.prototype.getScrollParent = function (node) {\n if (isNOU(node)) {\n return null;\n }\n return (node.scrollHeight > node.clientHeight) ? node : this.getScrollParent(node.parentElement);\n };\n TreeView.prototype.shiftKeySelect = function (isTowards, e) {\n if (this.allowMultiSelection) {\n var focusedNode = this.getFocusedNode();\n var nextNode = isTowards ? this.getNextNode(focusedNode) : this.getPrevNode(focusedNode);\n this.removeHover();\n this.setFocusElement(nextNode);\n this.toggleSelect(nextNode, e, false);\n this.navigateToFocus(!isTowards);\n }\n else {\n this.navigateNode(isTowards);\n }\n };\n TreeView.prototype.checkNode = function (e) {\n var focusedNode = this.getFocusedNode();\n var checkWrap = select('.' + CHECKBOXWRAP, focusedNode);\n var isChecked = select(' .' + CHECKBOXFRAME, checkWrap).classList.contains(CHECK);\n this.validateCheckNode(checkWrap, isChecked, focusedNode, e);\n };\n TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {\n var eventArgs = this.nodeCheckingEvent(checkWrap, isCheck, e);\n if (eventArgs.cancel) {\n return;\n }\n this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);\n this.ensureChildCheckState(li);\n this.ensureParentCheckState(closest(closest(li, '.' + PARENTITEM), '.' + LISTITEM));\n this.nodeCheckedEvent(checkWrap, isCheck, e);\n };\n TreeView.prototype.openNode = function (toBeOpened, e) {\n var focusedNode = this.getFocusedNode();\n var icon = select('div.' + ICON, focusedNode);\n if (toBeOpened) {\n if (!icon) {\n return;\n }\n else if (icon.classList.contains(EXPANDABLE)) {\n this.expandAction(focusedNode, icon, e);\n }\n else {\n this.focusNextNode(focusedNode, true);\n }\n }\n else {\n if (icon && icon.classList.contains(COLLAPSIBLE)) {\n this.collapseNode(focusedNode, icon, e);\n }\n else {\n var parentLi = closest(closest(focusedNode, '.' + PARENTITEM), '.' + LISTITEM);\n if (!parentLi) {\n return;\n }\n else {\n this.setFocus(focusedNode, parentLi);\n this.navigateToFocus(true);\n }\n }\n }\n };\n TreeView.prototype.navigateNode = function (isTowards) {\n var focusedNode = this.getFocusedNode();\n this.focusNextNode(focusedNode, isTowards);\n };\n TreeView.prototype.navigateRootNode = function (isBackwards) {\n var focusedNode = this.getFocusedNode();\n var rootNode = isBackwards ? this.getRootNode() : this.getEndNode();\n this.setFocus(focusedNode, rootNode);\n this.navigateToFocus(isBackwards);\n };\n TreeView.prototype.getFocusedNode = function () {\n var fNode = select('.' + LISTITEM + '.' + FOCUS, this.element);\n return isNOU(fNode) ? select('.' + LISTITEM, this.element) : fNode;\n };\n TreeView.prototype.focusNextNode = function (li, isTowards) {\n var nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);\n this.setFocus(li, nextNode);\n this.navigateToFocus(!isTowards);\n if (nextNode.classList.contains('e-disable')) {\n this.focusNextNode(nextNode, isTowards);\n }\n };\n TreeView.prototype.getNextNode = function (li) {\n var index = this.liList.indexOf(li);\n var nextNode;\n var i;\n do {\n index++;\n if (index === this.liList.length && li.classList.contains('e-disable')) {\n for (i = index - 1; i > 0; i--) {\n if (!this.liList[i].classList.contains('e-disable')) {\n index = i;\n break;\n }\n }\n }\n nextNode = this.liList[index];\n if (isNOU(nextNode)) {\n return li;\n }\n } while (!isVisible(nextNode));\n return nextNode;\n };\n TreeView.prototype.getPrevNode = function (li) {\n var index = this.liList.indexOf(li);\n var prevNode;\n var i;\n do {\n index--;\n if (index < 0 && li.classList.contains('e-disable')) {\n for (i = 1; i < this.liList.length; i++) {\n if (!this.liList[i].classList.contains('e-disable')) {\n index = i;\n break;\n }\n }\n }\n prevNode = this.liList[index];\n if (isNOU(prevNode)) {\n return li;\n }\n } while (!isVisible(prevNode));\n return prevNode;\n };\n TreeView.prototype.getRootNode = function () {\n var index = 0;\n var rootNode;\n do {\n rootNode = this.liList[index];\n index++;\n } while (!isVisible(rootNode));\n return rootNode;\n };\n TreeView.prototype.getEndNode = function () {\n var index = this.liList.length - 1;\n var endNode;\n do {\n endNode = this.liList[index];\n index--;\n } while (!isVisible(endNode));\n return endNode;\n };\n TreeView.prototype.setFocus = function (preNode, nextNode) {\n removeClass([preNode], [HOVER, FOCUS]);\n addClass([nextNode], [HOVER, FOCUS]);\n this.updateIdAttr(preNode, nextNode);\n };\n TreeView.prototype.updateIdAttr = function (preNode, nextNode) {\n this.element.removeAttribute('aria-activedescendant');\n if (preNode) {\n preNode.removeAttribute('id');\n }\n nextNode.setAttribute('id', this.element.id + '_active');\n this.element.setAttribute('aria-activedescendant', this.element.id + '_active');\n };\n TreeView.prototype.focusIn = function () {\n if (!this.mouseDownStatus) {\n addClass([this.getFocusedNode()], HOVER);\n }\n this.mouseDownStatus = false;\n };\n TreeView.prototype.focusOut = function () {\n removeClass([this.getFocusedNode()], HOVER);\n };\n TreeView.prototype.onMouseOver = function (e) {\n var target = e.target;\n var classList = target.classList;\n var currentLi = closest(target, '.' + LISTITEM);\n if (!currentLi || classList.contains(PARENTITEM) || classList.contains(LISTITEM)) {\n this.removeHover();\n return;\n }\n else {\n if (currentLi && !currentLi.classList.contains('e-disable')) {\n this.setHover(currentLi);\n }\n }\n };\n TreeView.prototype.setHover = function (li) {\n if (!li.classList.contains(HOVER)) {\n this.removeHover();\n addClass([li], HOVER);\n }\n };\n ;\n TreeView.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n TreeView.prototype.removeHover = function () {\n var hoveredNode = selectAll('.' + HOVER, this.element);\n if (hoveredNode && hoveredNode.length) {\n removeClass(hoveredNode, HOVER);\n }\n };\n ;\n TreeView.prototype.getNodeData = function (currLi, fromDS) {\n if (!isNOU(currLi) && currLi.classList.contains(LISTITEM)) {\n var id = currLi.getAttribute('data-uid');\n var text = this.getText(currLi, fromDS);\n var pNode = closest(currLi.parentNode, '.' + LISTITEM);\n var pid = pNode ? pNode.getAttribute('data-uid') : null;\n var selected = currLi.classList.contains(ACTIVE);\n var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;\n var checked = null;\n if (this.showCheckBox) {\n checked = select('.' + CHECKBOXWRAP, currLi).getAttribute('aria-checked');\n }\n return { id: id, text: text, parentID: pid, selected: selected, expanded: expanded, isChecked: checked };\n }\n return { id: '', text: '', parentID: '', selected: '', expanded: '', isChecked: '' };\n };\n TreeView.prototype.getText = function (currLi, fromDS) {\n if (fromDS) {\n var nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));\n var level = parseFloat(currLi.getAttribute('aria-level'));\n var nodeFields = this.getFields(this.fields, level, 1);\n return getValue(nodeFields.text, nodeData);\n }\n return select('.' + LISTTEXT, currLi).textContent;\n };\n TreeView.prototype.getExpandEvent = function (currLi, e) {\n var nodeData = this.getNodeData(currLi);\n return { cancel: false, isInteracted: isNOU(e) ? false : true, node: currLi, nodeData: nodeData, event: e };\n };\n TreeView.prototype.reRenderNodes = function () {\n this.element.innerHTML = '';\n this.setTouchClass();\n this.setProperties({ selectedNodes: [], checkedNodes: [] }, true);\n this.isLoaded = false;\n this.setDataBinding();\n };\n TreeView.prototype.setCssClass = function (oldClass, newClass) {\n if (!isNOU(oldClass) && oldClass !== '') {\n removeClass([this.element], oldClass.split(' '));\n }\n if (!isNOU(newClass) && newClass !== '') {\n addClass([this.element], newClass.split(' '));\n }\n };\n TreeView.prototype.editingHandler = function (e) {\n var target = e.target;\n if (!target || target.classList.contains(ROOT) || target.classList.contains(PARENTITEM) ||\n target.classList.contains(LISTITEM) || target.classList.contains(ICON) ||\n target.classList.contains(INPUT) || target.classList.contains(INPUTGROUP)) {\n return;\n }\n else {\n var liEle = closest(target, '.' + LISTITEM);\n this.createTextbox(liEle, e);\n }\n };\n TreeView.prototype.createTextbox = function (liEle, e) {\n var oldInpEle = select('.' + TREEINPUT, this.element);\n if (oldInpEle) {\n oldInpEle.blur();\n }\n var textEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var innerEle = createElement('input', { className: TREEINPUT, attrs: { value: this.oldText } });\n var eventArgs = this.getEditEvent(liEle, null, innerEle.outerHTML);\n this.trigger('nodeEditing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n var inpWidth = textEle.offsetWidth + 5;\n var style = 'width:' + inpWidth + 'px';\n addClass([liEle], EDITING);\n textEle.innerHTML = eventArgs.innerHtml;\n var inpEle = select('.' + TREEINPUT, textEle);\n this.inputObj = Input.createInput({\n element: inpEle,\n properties: {\n enableRtl: this.enableRtl,\n }\n });\n this.inputObj.container.setAttribute('style', style);\n inpEle.focus();\n var inputEle = inpEle;\n inputEle.setSelectionRange(0, inputEle.value.length);\n this.wireInputEvents(inpEle);\n };\n TreeView.prototype.updateOldText = function (liEle) {\n var id = liEle.getAttribute('data-uid');\n this.editData = this.getNodeObject(id);\n var level = parseFloat(liEle.getAttribute('aria-level'));\n this.editFields = this.getFields(this.fields, level, 1);\n this.oldText = getValue(this.editFields.text, this.editData);\n };\n TreeView.prototype.inputFocusOut = function (e) {\n if (!select('.' + TREEINPUT, this.element)) {\n return;\n }\n var target = e.target;\n var newText = target.value;\n var txtEle = closest(target, '.' + LISTTEXT);\n var liEle = closest(target, '.' + LISTITEM);\n detach(this.inputObj.container);\n this.appendNewText(liEle, txtEle, newText, true);\n };\n TreeView.prototype.appendNewText = function (liEle, txtEle, newText, isInput) {\n var newData = setValue(this.editFields.text, newText, this.editData);\n if (!isNOU(this.nodeTemplateFn)) {\n txtEle.innerHTML = '';\n append(this.nodeTemplateFn(newData), txtEle);\n }\n else {\n txtEle.innerHTML = newText;\n }\n if (isInput) {\n removeClass([liEle], EDITING);\n txtEle.focus();\n }\n this.trigger('nodeEdited', this.getEditEvent(liEle, newText, null));\n };\n TreeView.prototype.getElement = function (ele) {\n if (isNOU(ele)) {\n return null;\n }\n else if (typeof ele === 'string') {\n return this.element.querySelector('[data-uid=\"' + ele + '\"]');\n }\n else if (typeof ele === 'object') {\n return ele;\n }\n else {\n return null;\n }\n };\n TreeView.prototype.getEditEvent = function (liEle, newText, inpEle) {\n var data = this.getNodeData(liEle);\n return { cancel: false, newText: newText, node: liEle, nodeData: data, oldText: this.oldText, innerHtml: inpEle };\n };\n TreeView.prototype.getNodeObject = function (id) {\n var childNodes;\n if (isNOU(id)) {\n return childNodes;\n }\n else if (this.dataType === 1) {\n for (var i = 0, objlen = this.treeData.length; i < objlen; i++) {\n var dataId = getValue(this.fields.id, this.treeData[i]);\n if (!isNOU(this.treeData[i]) && !isNOU(dataId) && dataId.toString() === id) {\n return this.treeData[i];\n }\n }\n }\n else {\n return this.getChildNodeObject(this.treeData, this.fields, id);\n }\n return childNodes;\n };\n TreeView.prototype.getChildNodeObject = function (obj, mapper, id) {\n var newList;\n if (isNOU(obj)) {\n return newList;\n }\n for (var i = 0, objlen = obj.length; i < objlen; i++) {\n var dataId = getValue(mapper.id, obj[i]);\n if (obj[i] && dataId && dataId.toString() === id) {\n return obj[i];\n }\n else if (typeof mapper.child === 'string' && !isNOU(getValue(mapper.child, obj[i]))) {\n var childData = getValue(mapper.child, obj[i]);\n newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n else if (this.fields.dataSource instanceof DataManager && !isNOU(getValue('child', obj[i]))) {\n var child = 'child';\n newList = this.getChildNodeObject(getValue(child, obj[i]), this.getChildMapper(mapper), id);\n if (newList !== undefined) {\n break;\n }\n }\n }\n return newList;\n };\n TreeView.prototype.setDragAndDrop = function (toBind) {\n if (toBind) {\n this.initializeDrag();\n }\n else {\n this.destroyDrag();\n }\n };\n TreeView.prototype.initializeDrag = function () {\n var _this = this;\n var virtualEle;\n this.dragObj = new Draggable(this.element, {\n enableTailMode: true,\n dragTarget: '.' + TEXTWRAP,\n helper: function (e) {\n _this.dragTarget = e.sender.target;\n var dragRoot = closest(_this.dragTarget, '.' + ROOT);\n var dragWrap = closest(_this.dragTarget, '.' + TEXTWRAP);\n _this.dragLi = closest(_this.dragTarget, '.' + LISTITEM);\n if (_this.fullRowSelect && !dragWrap && _this.dragTarget.classList.contains(FULLROW)) {\n dragWrap = _this.dragTarget.nextElementSibling;\n }\n if (!_this.dragTarget || !e.element.isSameNode(dragRoot) || !dragWrap ||\n _this.dragTarget.classList.contains(ROOT) || _this.dragTarget.classList.contains(PARENTITEM) ||\n _this.dragTarget.classList.contains(LISTITEM)) {\n return false;\n }\n var cloneEle = (dragWrap.cloneNode(true));\n if (isNOU(select('div.' + ICON, cloneEle))) {\n var icon = createElement('div', { className: ICON + ' ' + EXPANDABLE });\n cloneEle.insertBefore(icon, cloneEle.children[0]);\n }\n var cssClass = DRAGITEM + ' ' + ROOT + ' ' + _this.cssClass + ' ' + (_this.enableRtl ? RTL : '');\n virtualEle = createElement('div', { className: cssClass });\n virtualEle.appendChild(cloneEle);\n var nLen = _this.selectedNodes.length;\n if (nLen > 1 && _this.allowMultiSelection && _this.dragLi.classList.contains(ACTIVE)) {\n var cNode = createElement('span', { className: DROPCOUNT, innerHTML: '' + nLen });\n virtualEle.appendChild(cNode);\n }\n document.body.appendChild(virtualEle);\n document.body.style.cursor = '';\n _this.dragData = _this.getNodeData(_this.dragLi);\n return virtualEle;\n },\n dragStart: function (e) {\n addClass([_this.element], DRAGGING);\n var eventArgs = _this.getDragEvent(e.event, _this, null, e.target);\n _this.trigger('nodeDragStart', eventArgs);\n if (eventArgs.cancel) {\n detach(virtualEle);\n removeClass([_this.element], DRAGGING);\n }\n _this.dragStartAction = true;\n },\n drag: function (e) {\n _this.dragObj.setProperties({ cursorAt: { top: (!isNOU(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });\n _this.dragAction(e, virtualEle);\n },\n dragStop: function (e) {\n removeClass([_this.element], DRAGGING);\n _this.removeVirtualEle();\n var dropTarget = e.target;\n var dropRoot = (closest(dropTarget, '.' + DROPPABLE));\n if (!dropTarget || !dropRoot || dropTarget.classList.contains(ROOT)) {\n detach(e.helper);\n document.body.style.cursor = '';\n }\n var eventArgs = _this.getDragEvent(e.event, _this, dropTarget, dropTarget);\n _this.trigger('nodeDragStop', eventArgs);\n if (eventArgs.cancel) {\n if (e.helper.parentNode) {\n detach(e.helper);\n }\n document.body.style.cursor = '';\n }\n _this.dragStartAction = false;\n }\n });\n this.dropObj = new Droppable(this.element, {\n out: function (e) {\n if (!isNOU(e) && !e.target.classList.contains(SIBLING)) {\n document.body.style.cursor = 'not-allowed';\n }\n },\n over: function (e) {\n document.body.style.cursor = '';\n },\n drop: function (e) {\n _this.dropAction(e);\n }\n });\n };\n TreeView.prototype.dragAction = function (e, virtualEle) {\n var dropRoot = closest(e.target, '.' + DROPPABLE);\n var dropWrap = closest(e.target, '.' + TEXTWRAP);\n var icon = select('div.' + ICON, virtualEle);\n removeClass([icon], [DROPIN, DROPNEXT, DROPOUT, NODROP]);\n this.removeVirtualEle();\n document.body.style.cursor = '';\n var classList = e.target.classList;\n if (this.fullRowSelect && !dropWrap && !isNOU(classList) && classList.contains(FULLROW)) {\n dropWrap = e.target.nextElementSibling;\n }\n if (dropRoot) {\n var dropLi = closest(e.target, '.' + LISTITEM);\n if (!dropRoot.classList.contains(ROOT) || (dropWrap &&\n (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi)))) {\n if (dropLi && e && (e.event.offsetY < 7)) {\n addClass([icon], DROPNEXT);\n var virEle = createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (1) : (0);\n dropLi.insertBefore(virEle, dropLi.children[index]);\n }\n else if (dropLi && e && (e.target.offsetHeight > 0 && e.event.offsetY > (e.target.offsetHeight - 10))) {\n addClass([icon], DROPNEXT);\n var virEle = createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (2) : (1);\n dropLi.insertBefore(virEle, dropLi.children[index]);\n }\n else {\n addClass([icon], DROPIN);\n }\n }\n else if (e.target.nodeName === 'LI' && (!dropLi.isSameNode(this.dragLi) && !this.isDescendant(this.dragLi, dropLi))) {\n addClass([icon], DROPNEXT);\n this.renderVirtualEle(e);\n }\n else if (e.target.classList.contains(SIBLING)) {\n addClass([icon], DROPNEXT);\n }\n else {\n addClass([icon], DROPOUT);\n }\n }\n else {\n addClass([icon], NODROP);\n document.body.style.cursor = 'not-allowed';\n }\n this.trigger('nodeDragging', this.getDragEvent(e.event, this, e.target, e.target));\n };\n TreeView.prototype.dropAction = function (e) {\n var offsetY = e.event.offsetY;\n var dropTarget = e.target;\n var dragObj = e.dragData.draggable.ej2_instances[0];\n var dragTarget = dragObj.dragTarget;\n var dragLi = (closest(dragTarget, '.' + LISTITEM));\n var dropLi = (closest(dropTarget, '.' + LISTITEM));\n detach(e.droppedElement);\n document.body.style.cursor = '';\n if (!dropLi || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n return;\n }\n if (dragObj.allowMultiSelection && (dragLi.classList.contains(ACTIVE) || (offsetY < 7 ||\n (e.target.offsetHeight > 0 && offsetY > (e.target.offsetHeight - 10))))) {\n var sNodes = selectAll('.' + ACTIVE, dragObj.element);\n for (var i = 0; i < sNodes.length; i++) {\n if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {\n continue;\n }\n this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);\n }\n }\n else {\n this.appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY);\n }\n this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target));\n };\n TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {\n if (dropTarget.nodeName === 'LI') {\n this.dropAsSiblingNode(dragLi, dropLi, e, dragObj);\n }\n else {\n this.dropAsChildNode(dragLi, dropLi, dragObj, null, e, offsetY);\n }\n };\n TreeView.prototype.dropAsSiblingNode = function (dragLi, dropLi, e, dragObj) {\n var dropUl = closest(dropLi, '.' + PARENTITEM);\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var pre;\n if (e.target.offsetHeight > 0 && e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n dropUl.insertBefore(dragLi, pre ? e.target : e.target.nextElementSibling);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.dropAsChildNode = function (dragLi, dropLi, dragObj, index, e, pos) {\n var dragParentUl = closest(dragLi, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n var dropParentUl = closest(dropLi, '.' + PARENTITEM);\n if (e && (pos < 7)) {\n dropParentUl.insertBefore(dragLi, dropLi);\n }\n else if (e && (e.target.offsetHeight > 0 && pos > (e.target.offsetHeight - 10))) {\n dropParentUl.insertBefore(dragLi, dropLi.nextElementSibling);\n }\n else {\n var dropUl = this.expandParent(dropLi);\n dropUl.insertBefore(dragLi, dropUl.childNodes[index]);\n }\n this.updateElement(dragParentUl, dragParentLi);\n this.updateAriaLevel(dragLi);\n if (dragObj.element.id === this.element.id) {\n this.updateList();\n }\n else {\n dragObj.updateInstance();\n this.updateInstance();\n }\n };\n TreeView.prototype.expandParent = function (dropLi) {\n var dropIcon = select('div.' + ICON, dropLi);\n if (dropIcon && dropIcon.classList.contains(EXPANDABLE)) {\n this.expandAction(dropLi, dropIcon, null);\n }\n var dropUl = select('.' + PARENTITEM, dropLi);\n if (isNOU(dropUl)) {\n ListBase.generateIcon(dropLi, COLLAPSIBLE, this.listBaseOption);\n var icon = select('div.' + ICON, dropLi);\n removeClass([icon], EXPANDABLE);\n dropUl = ListBase.generateUL([], null, this.listBaseOption);\n dropLi.appendChild(dropUl);\n dropLi.setAttribute('aria-expanded', 'true');\n removeClass([dropLi], NODECOLLAPSED);\n }\n return dropUl;\n };\n TreeView.prototype.updateElement = function (dragParentUl, dragParentLi) {\n if (dragParentLi && dragParentUl.childElementCount === 0) {\n var dragIcon = select('div.' + ICON, dragParentLi);\n detach(dragParentUl);\n detach(dragIcon);\n dragParentLi.removeAttribute('aria-expanded');\n }\n };\n TreeView.prototype.updateAriaLevel = function (dragLi) {\n var level = this.parents(dragLi, '.' + PARENTITEM).length;\n dragLi.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, dragLi), level + 1);\n };\n TreeView.prototype.updateChildAriaLevel = function (element, level) {\n if (!isNOU(element)) {\n var cNodes = element.childNodes;\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n liEle.setAttribute('aria-level', '' + level);\n this.updateChildAriaLevel(select('.' + PARENTITEM, liEle), level + 1);\n }\n }\n };\n TreeView.prototype.renderVirtualEle = function (e) {\n var pre;\n if (e.event.offsetY > e.target.offsetHeight - 2) {\n pre = false;\n }\n else if (e.event.offsetY < 2) {\n pre = true;\n }\n var virEle = createElement('div', { className: SIBLING });\n var index = this.fullRowSelect ? (pre ? 1 : 2) : (pre ? 0 : 1);\n e.target.insertBefore(virEle, e.target.children[index]);\n };\n TreeView.prototype.removeVirtualEle = function () {\n var sibEle = select('.' + SIBLING);\n if (sibEle) {\n detach(sibEle);\n }\n };\n TreeView.prototype.destroyDrag = function () {\n if (this.dragObj && this.dropObj) {\n this.dragObj.destroy();\n this.dropObj.destroy();\n }\n };\n TreeView.prototype.getDragEvent = function (event, obj, dropTarget, target) {\n var dropLi = dropTarget ? closest(dropTarget, '.' + LISTITEM) : null;\n var dropData = dropLi ? this.getNodeData(dropLi) : null;\n return {\n cancel: false,\n event: event,\n draggedNode: obj.dragLi,\n draggedNodeData: obj.dragData,\n droppedNode: dropLi,\n droppedNodeData: dropData,\n target: target\n };\n };\n TreeView.prototype.addFullRow = function (toAdd) {\n var len = this.liList.length;\n if (toAdd) {\n for (var i = 0; i < len; i++) {\n this.createFullRow(this.liList[i]);\n }\n }\n else {\n for (var i = 0; i < len; i++) {\n var rowDiv = select('.' + FULLROW, this.liList[i]);\n detach(rowDiv);\n }\n }\n };\n TreeView.prototype.createFullRow = function (item) {\n var rowDiv = createElement('div', { className: FULLROW });\n item.insertBefore(rowDiv, item.childNodes[0]);\n };\n TreeView.prototype.addMultiSelect = function (toAdd) {\n if (toAdd) {\n var liEles = selectAll('.' + LISTITEM + ':not([aria-selected=\"true\"])', this.element);\n for (var _i = 0, liEles_1 = liEles; _i < liEles_1.length; _i++) {\n var ele = liEles_1[_i];\n ele.setAttribute('aria-selected', 'false');\n }\n }\n else {\n var liEles = selectAll('.' + LISTITEM + '[aria-selected=\"false\"]', this.element);\n for (var _a = 0, liEles_2 = liEles; _a < liEles_2.length; _a++) {\n var ele = liEles_2[_a];\n ele.removeAttribute('aria-selected');\n }\n }\n };\n TreeView.prototype.collapseByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var cNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = cNodes.length; i < len; i++) {\n var liEle = cNodes[i];\n var icon = select('.' + COLLAPSIBLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.collapseNode(liEle, icon, null);\n }\n this.collapseByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.collapseAllNodes = function (excludeHiddenNodes) {\n var cIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + COLLAPSIBLE, this.element));\n for (var i = 0, len = cIcons.length; i < len; i++) {\n var icon = cIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.collapseNode(liEle, icon, null);\n }\n };\n TreeView.prototype.expandByLevel = function (element, level, excludeHiddenNodes) {\n if (level > 0 && !isNOU(element)) {\n var eNodes = this.getVisibleNodes(excludeHiddenNodes, element.childNodes);\n for (var i = 0, len = eNodes.length; i < len; i++) {\n var liEle = eNodes[i];\n var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n this.expandAction(liEle, icon, null);\n }\n this.expandByLevel(select('.' + PARENTITEM, liEle), level - 1, excludeHiddenNodes);\n }\n }\n };\n TreeView.prototype.expandAllNodes = function (excludeHiddenNodes) {\n var eIcons = this.getVisibleNodes(excludeHiddenNodes, selectAll('.' + EXPANDABLE, this.element));\n for (var i = 0, len = eIcons.length; i < len; i++) {\n var icon = eIcons[i];\n var liEle = closest(icon, '.' + LISTITEM);\n this.expandAction(liEle, icon, null, true);\n }\n };\n TreeView.prototype.getVisibleNodes = function (excludeHiddenNodes, nodes) {\n var vNodes = Array.prototype.slice.call(nodes);\n if (excludeHiddenNodes) {\n for (var i = 0; i < vNodes.length; i++) {\n if (!isVisible(vNodes[i])) {\n vNodes.splice(i, 1);\n i--;\n }\n }\n }\n return vNodes;\n };\n TreeView.prototype.removeNode = function (node) {\n var dragParentUl = closest(node, '.' + PARENTITEM);\n var dragParentLi = closest(dragParentUl, '.' + LISTITEM);\n detach(node);\n this.updateElement(dragParentUl, dragParentLi);\n this.updateInstance();\n };\n TreeView.prototype.updateInstance = function () {\n this.updateList();\n this.updateSelectedNodes();\n };\n TreeView.prototype.updateList = function () {\n this.liList = Array.prototype.slice.call(selectAll('.' + LISTITEM, this.element));\n };\n TreeView.prototype.updateSelectedNodes = function () {\n this.setProperties({ selectedNodes: [] }, true);\n var sNodes = selectAll('.' + ACTIVE, this.element);\n this.selectGivenNodes(sNodes);\n };\n TreeView.prototype.doGivenAction = function (nodes, selector, toExpand) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n var icon = select('.' + selector, select('.' + TEXTWRAP, liEle));\n if (!isNOU(icon)) {\n toExpand ? this.expandAction(liEle, icon, null) : this.collapseNode(liEle, icon, null);\n }\n }\n };\n TreeView.prototype.addGivenNodes = function (nodes, dropLi, index, isRemote) {\n var level = dropLi ? parseFloat(dropLi.getAttribute('aria-level')) + 1 : 1;\n if (isRemote) {\n this.updateMapper(level);\n }\n var li = ListBase.createListItemFromJson(nodes, this.listBaseOption, level);\n var dropUl = dropLi ? this.expandParent(dropLi) : select('.' + PARENTITEM, this.element);\n var refNode = dropUl.childNodes[index];\n for (var i = 0; i < li.length; i++) {\n dropUl.insertBefore(li[i], refNode);\n }\n this.finalizeNode(dropUl);\n };\n TreeView.prototype.updateMapper = function (level) {\n var mapper = (level === 1) ? this.fields : this.getChildFields(this.fields, level - 1, 1);\n var prop = this.getActualProperties(mapper);\n this.listBaseOption.fields = prop;\n this.listBaseOption.fields.url = prop.navigateUrl;\n };\n TreeView.prototype.doDisableAction = function (nodes) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n liEle.setAttribute('aria-disabled', 'true');\n addClass([liEle], DISABLE);\n }\n };\n TreeView.prototype.doEnableAction = function (nodes) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n liEle.removeAttribute('aria-disabled');\n removeClass([liEle], DISABLE);\n }\n };\n TreeView.prototype.setTouchClass = function () {\n var ele = closest(this.element, '.' + BIGGER);\n this.touchClass = isNOU(ele) ? '' : SMALL;\n };\n TreeView.prototype.wireInputEvents = function (inpEle) {\n EventHandler.add(inpEle, 'blur', this.inputFocusOut, this);\n };\n TreeView.prototype.wireEditingEvents = function (toBind) {\n if (toBind) {\n var proxy_1 = this;\n this.touchEditObj = new Touch(this.element, {\n tap: function (e) {\n if (e.tapCount === 2) {\n e.originalEvent.preventDefault();\n proxy_1.editingHandler(e.originalEvent);\n }\n }\n });\n }\n else {\n if (this.touchEditObj) {\n this.touchEditObj.destroy();\n }\n }\n };\n TreeView.prototype.wireClickEvent = function (toBind) {\n if (toBind) {\n var proxy_2 = this;\n this.touchClickObj = new Touch(this.element, {\n tap: function (e) {\n proxy_2.clickHandler(e);\n }\n });\n }\n else {\n if (this.touchClickObj) {\n this.touchClickObj.destroy();\n }\n }\n };\n TreeView.prototype.wireExpandOnEvent = function (toBind) {\n var _this = this;\n if (toBind) {\n var proxy_3 = this;\n this.touchExpandObj = new Touch(this.element, {\n tap: function (e) {\n if (_this.expandOnType === 'Click' || (_this.expandOnType === 'DblClick' && e.tapCount === 2)) {\n proxy_3.expandHandler(e);\n }\n }\n });\n }\n else {\n if (this.touchExpandObj) {\n this.touchExpandObj.destroy();\n }\n }\n };\n TreeView.prototype.mouseDownHandler = function (e) {\n this.mouseDownStatus = true;\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (e.ctrlKey && this.allowMultiSelection) {\n EventHandler.add(this.element, 'contextmenu', this.preventContextMenu, this);\n }\n };\n ;\n TreeView.prototype.preventContextMenu = function (e) {\n e.preventDefault();\n };\n TreeView.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);\n this.wireClickEvent(true);\n this.wireExpandOnEvent(true);\n EventHandler.add(this.element, 'focus', this.focusIn, this);\n EventHandler.add(this.element, 'blur', this.focusOut, this);\n EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.element, 'mouseout', this.onMouseLeave, this);\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown',\n });\n };\n TreeView.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);\n this.wireClickEvent(false);\n this.wireExpandOnEvent(false);\n EventHandler.remove(this.element, 'focus', this.focusIn);\n EventHandler.remove(this.element, 'blur', this.focusOut);\n EventHandler.remove(this.element, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);\n this.keyboardModule.destroy();\n };\n TreeView.prototype.parents = function (element, selector) {\n var matched = [];\n var el = element.parentNode;\n while (!isNOU(el)) {\n if (matches(el, selector)) {\n matched.push(el);\n }\n el = el.parentNode;\n }\n return matched;\n };\n TreeView.prototype.isDescendant = function (parent, child) {\n var node = child.parentNode;\n while (!isNOU(node)) {\n if (node === parent) {\n return true;\n }\n node = node.parentNode;\n }\n return false;\n };\n TreeView.prototype.showSpinner = function (element) {\n addClass([element], LOAD);\n createSpinner({\n target: element,\n width: Browser.isDevice ? 16 : 14\n });\n showSpinner(element);\n };\n TreeView.prototype.hideSpinner = function (element) {\n hideSpinner(element);\n element.innerHTML = '';\n removeClass([element], LOAD);\n };\n TreeView.prototype.setCheckedNodes = function (nodes) {\n nodes = JSON.parse(JSON.stringify(nodes));\n this.uncheckAll();\n if (nodes.length > 0) {\n this.checkAll(nodes);\n }\n };\n /**\n * Called internally if any of the property value changed.\n * @param {TreeView} newProp\n * @param {TreeView} oldProp\n * @returns void\n * @private\n */\n TreeView.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'allowDragAndDrop':\n this.setDragAndDrop(this.allowDragAndDrop);\n break;\n case 'allowEditing':\n this.wireEditingEvents(this.allowEditing);\n break;\n case 'allowMultiSelection':\n if (this.selectedNodes.length > 1) {\n var sNode = this.getElement(this.selectedNodes[0]);\n this.isLoaded = false;\n this.removeSelectAll();\n this.selectNode(sNode, null);\n this.isLoaded = true;\n }\n this.setMultiSelect(this.allowMultiSelection);\n this.addMultiSelect(this.allowMultiSelection);\n break;\n case 'checkedNodes':\n if (this.showCheckBox) {\n this.checkedNodes = oldProp.checkedNodes;\n this.setCheckedNodes(newProp.checkedNodes);\n }\n break;\n case 'cssClass':\n this.setCssClass(oldProp.cssClass, newProp.cssClass);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'expandOn':\n this.wireExpandOnEvent(false);\n this.setExpandOnType();\n this.wireExpandOnEvent(true);\n break;\n case 'fields':\n this.listBaseOption.fields = this.fields.properties;\n this.listBaseOption.fields.url = this.fields.navigateUrl;\n this.reRenderNodes();\n break;\n case 'fullRowSelect':\n this.setFullRow(this.fullRowSelect);\n this.addFullRow(this.fullRowSelect);\n break;\n case 'nodeTemplate':\n this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);\n this.reRenderNodes();\n break;\n case 'selectedNodes':\n this.removeSelectAll();\n this.setProperties({ selectedNodes: newProp.selectedNodes }, true);\n this.doSelectionAction();\n break;\n case 'showCheckBox':\n this.reRenderNodes();\n break;\n case 'sortOrder':\n this.reRenderNodes();\n break;\n }\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n */\n TreeView.prototype.destroy = function () {\n this.element.removeAttribute('aria-activedescendant');\n this.element.removeAttribute('tabindex');\n this.unWireEvents();\n this.wireEditingEvents(false);\n this.rippleFn();\n this.rippleIconFn();\n this.setCssClass(this.cssClass, null);\n this.setDragAndDrop(false);\n this.setFullRow(false);\n this.element.innerHTML = '';\n _super.prototype.destroy.call(this);\n };\n /**\n * Adds the collection of TreeView nodes based on target and index position. If target node is not specified,\n * then the nodes are added as children of the given parentID or in the root level of TreeView.\n * @param { Object[] } nodes - Specifies the array of JSON data that has to be added.\n * @param { string | Element } target - Specifies ID of TreeView node/TreeView node as target element.\n * @param { number } index - Specifies the index to place the newly added nodes in the target element.\n */\n TreeView.prototype.addNodes = function (nodes, target, index) {\n if (isNOU(nodes)) {\n return;\n }\n var dropLi = this.getElement(target);\n nodes = this.getSortedData(nodes);\n if (this.fields.dataSource instanceof DataManager) {\n this.addGivenNodes(nodes, dropLi, index, true);\n }\n else if (this.dataType === 2) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n if (dropLi) {\n this.addGivenNodes(nodes, dropLi, index);\n }\n else {\n for (var i = 0; i < nodes.length; i++) {\n var pid = getValue(this.fields.parentID, nodes[i]);\n dropLi = pid ? this.getElement(pid.toString()) : pid;\n this.addGivenNodes([nodes[i]], dropLi, index);\n }\n }\n }\n };\n /**\n * Instead of clicking on the TreeView node for editing, we can enable it by using\n * `beginEdit` property. On passing the node ID or element through this property, the edit textBox\n * will be created for the particular node thus allowing us to edit it.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.beginEdit = function (node) {\n var ele = this.getElement(node);\n if (!isNOU(ele)) {\n this.createTextbox(ele, null);\n }\n };\n /**\n * Checks all the unchecked nodes. You can also check specific nodes by passing array of unchecked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.checkAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, true);\n }\n };\n /**\n * Collapses all the expanded TreeView nodes. You can collapse specific nodes by passing array of nodes as argument to this method.\n * You can also collapse all the nodes excluding the hidden nodes by setting **excludeHiddenNodes** to true. If you want to collapse\n * a specific level of nodes, set **level** as argument to collapseAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/ array of TreeView node.\n * @param {number} level - TreeView nodes will collapse up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes of TreeView when collapsing all nodes.\n */\n TreeView.prototype.collapseAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, COLLAPSIBLE, false);\n }\n else {\n if (level > 0) {\n this.collapseByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.collapseAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Disables the collection of nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.disableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doDisableAction(nodes);\n }\n };\n /**\n * Enables the collection of disabled nodes by passing the ID of nodes or node elements in the array.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n */\n TreeView.prototype.enableNodes = function (nodes) {\n if (!isNOU(nodes)) {\n this.doEnableAction(nodes);\n }\n };\n /**\n * Ensures visibility of the TreeView node by using node ID or node element.\n * When many TreeView nodes are present and we need to find a particular node, `ensureVisible` property\n * helps bring the node to visibility by expanding the TreeView and scrolling to the specific node.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView nodes.\n */\n TreeView.prototype.ensureVisible = function (node) {\n var liEle = this.getElement(node);\n if (isNOU(liEle)) {\n return;\n }\n var parents = this.parents(liEle, '.' + LISTITEM);\n this.expandAll(parents);\n setTimeout(function () { liEle.scrollIntoView(true); }, 450);\n };\n /**\n * Expands all the collapsed TreeView nodes. You can expand the specific nodes by passing the array of collapsed nodes\n * as argument to this method. You can also expand all the collapsed nodes by excluding the hidden nodes by setting\n * **excludeHiddenNodes** to true to this method. To expand a specific level of nodes, set **level** as argument to expandAll method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView nodes.\n * @param {number} level - TreeView nodes will expand up to the given level.\n * @param {boolean} excludeHiddenNodes - Whether or not to exclude hidden nodes when expanding all nodes.\n */\n TreeView.prototype.expandAll = function (nodes, level, excludeHiddenNodes) {\n if (!isNOU(nodes)) {\n this.doGivenAction(nodes, EXPANDABLE, true);\n }\n else {\n if (level > 0) {\n this.expandByLevel(select('.' + PARENTITEM, this.element), level, excludeHiddenNodes);\n }\n else {\n this.expandAllNodes(excludeHiddenNodes);\n }\n }\n };\n /**\n * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.\n * @param {string | Element} node - Specifies ID of TreeView node/TreeView node.\n */\n TreeView.prototype.getNode = function (node) {\n var ele = this.getElement(node);\n return this.getNodeData(ele, true);\n };\n /**\n * Moves the collection of nodes within the same TreeView based on target or its index position.\n * @param {string[] | Element[]} sourceNodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {number} index - Specifies the index to place the moved nodes in the target element.\n */\n TreeView.prototype.moveNodes = function (sourceNodes, target, index) {\n var dropLi = this.getElement(target);\n if (isNOU(dropLi)) {\n return;\n }\n for (var i = 0; i < sourceNodes.length; i++) {\n var dragLi = this.getElement(sourceNodes[i]);\n if (isNOU(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {\n continue;\n }\n this.dropAsChildNode(dragLi, dropLi, this, index);\n }\n };\n /**\n * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.removeNodes = function (nodes) {\n if (!isNOU(nodes)) {\n for (var i = 0, len = nodes.length; i < len; i++) {\n var liEle = this.getElement(nodes[i]);\n if (isNOU(liEle)) {\n continue;\n }\n this.removeNode(liEle);\n }\n }\n };\n /**\n * Replaces the text of the TreeView node with the given text.\n * @param {string | Element} target - Specifies ID of TreeView node/TreeView node as target element.\n * @param {string} newText - Specifies the new text of TreeView node.\n */\n TreeView.prototype.updateNode = function (target, newText) {\n if (isNOU(target) || isNOU(newText) || !this.allowEditing) {\n return;\n }\n var liEle = this.getElement(target);\n if (isNOU(liEle)) {\n return;\n }\n var txtEle = select('.' + LISTTEXT, liEle);\n this.updateOldText(liEle);\n var eventArgs = this.getEditEvent(liEle, null, null);\n this.trigger('nodeEditing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.appendNewText(liEle, txtEle, newText, false);\n };\n /**\n * Unchecks all the checked nodes. You can also uncheck the specific nodes by passing array of checked nodes\n * as argument to this method.\n * @param {string[] | Element[]} nodes - Specifies the array of TreeView nodes ID/array of TreeView node.\n */\n TreeView.prototype.uncheckAll = function (nodes) {\n if (this.showCheckBox) {\n this.doCheckBoxAction(nodes, false);\n }\n };\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"allowMultiSelection\", void 0);\n __decorate([\n Complex({}, NodeAnimationSettings)\n ], TreeView.prototype, \"animation\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"checkedNodes\", void 0);\n __decorate([\n Property('')\n ], TreeView.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('Auto')\n ], TreeView.prototype, \"expandOn\", void 0);\n __decorate([\n Complex({}, FieldsSettings)\n ], TreeView.prototype, \"fields\", void 0);\n __decorate([\n Property(true)\n ], TreeView.prototype, \"fullRowSelect\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"nodeTemplate\", void 0);\n __decorate([\n Property()\n ], TreeView.prototype, \"selectedNodes\", void 0);\n __decorate([\n Property('None')\n ], TreeView.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(false)\n ], TreeView.prototype, \"showCheckBox\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"drawNode\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"keyPress\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeChecking\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeClicked\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsed\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeCollapsing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragging\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStart\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDragStop\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeDropped\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEdited\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeEditing\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanded\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeExpanding\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelected\", void 0);\n __decorate([\n Event()\n ], TreeView.prototype, \"nodeSelecting\", void 0);\n TreeView = __decorate([\n NotifyPropertyChanges\n ], TreeView);\n return TreeView;\n}(Component));\nexport { TreeView };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, formatUnit, EventHandler, Event, isNullOrUndefined, closest } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { setStyleAttribute as setStyle, addClass, removeClass, createElement, Touch } from '@syncfusion/ej2-base';\nvar CONTROL = 'e-control';\nvar ROOT = 'e-sidebar';\nvar DOCKER = 'e-dock';\nvar CLOSE = 'e-close';\nvar OPEN = 'e-open';\nvar TRASITION = 'e-transition';\nvar DEFAULTBACKDROP = 'e-sidebar-overlay';\nvar CONTEXTBACKDROP = 'e-backdrop';\nvar RTL = 'e-rtl';\nvar RIGHT = 'e-right';\nvar LEFT = 'e-left';\nvar OVER = 'e-over';\nvar PUSH = 'e-push';\nvar SLIDE = 'e-slide';\nvar VISIBILITY = 'e-visibility';\nvar MAINCONTENTANIMATION = 'e-content-animation';\nvar DISABLEANIMATION = 'e-disable-animation';\nvar CONTEXT = 'e-sidebar-context';\nvar SIDEBARABSOLUTE = 'e-sidebar-absolute';\n/**\n * Sidebar is an expandable and collapsible\n * component that typically act as a side container to place the primary or secondary content alongside of the main content.\n * ```html\n * \n * ````\n * ````typescript\n * \n * ```\n */\nvar Sidebar = /** @class */ (function (_super) {\n __extends(Sidebar, _super);\n function Sidebar(options, element) {\n return _super.call(this, options, element) || this;\n }\n Sidebar.prototype.preRender = function () {\n this.setWidth();\n };\n Sidebar.prototype.render = function () {\n this.initialize();\n this.wireEvents();\n };\n Sidebar.prototype.initialize = function () {\n this.setContext();\n this.addClass();\n this.setZindex();\n if (this.enableDock) {\n this.setDock();\n }\n this.setMediaQuery();\n this.setType(this.type);\n this.setCloseOnDocumentClick();\n };\n Sidebar.prototype.setContext = function () {\n if (typeof (this.target) === 'string') {\n this.setProperties({ target: document.querySelector('.' + this.target) }, true);\n }\n if (this.target) {\n this.target.insertAdjacentElement('afterbegin', this.element);\n addClass([this.element], SIDEBARABSOLUTE);\n addClass([this.target], CONTEXT);\n }\n };\n Sidebar.prototype.setCloseOnDocumentClick = function () {\n if (this.closeOnDocumentClick) {\n EventHandler.add(document, 'mousedown touchstart', this.documentclickHandler, this);\n }\n else {\n EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);\n }\n };\n Sidebar.prototype.setWidth = function () {\n if (this.enableDock && this.position === 'Left') {\n setStyle(this.element, { 'width': formatUnit(this.dockSize) });\n }\n else if (this.enableDock && this.position === 'Right') {\n setStyle(this.element, { 'width': formatUnit(this.dockSize) });\n }\n else if (!this.enableDock) {\n setStyle(this.element, { 'width': formatUnit(this.width) });\n }\n };\n Sidebar.prototype.setZindex = function () {\n setStyle(this.element, { 'z-index': '' + this.zIndex });\n };\n Sidebar.prototype.addClass = function () {\n var classELement = document.querySelector('.e-main-content');\n if (!isNullOrUndefined((classELement ||\n this.element.nextElementSibling))) {\n addClass([classELement || this.element.nextElementSibling], [MAINCONTENTANIMATION]);\n }\n if (!this.enableDock && this.type !== 'Auto') {\n addClass([this.element], [VISIBILITY]);\n }\n removeClass([this.element], [OPEN, CLOSE, RIGHT, LEFT, SLIDE, PUSH, OVER]);\n this.element.classList.add(ROOT);\n addClass([this.element], (this.position === 'Right') ? RIGHT : LEFT);\n if (this.type === 'Auto' && !Browser.isDevice && !this.enableDock) {\n addClass([this.element], OPEN);\n }\n else {\n addClass([this.element], CLOSE);\n }\n };\n Sidebar.prototype.destroyBackDrop = function () {\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n if (this.target && this.showBackdrop && sibling) {\n removeClass([sibling], CONTEXTBACKDROP);\n }\n else if (this.showBackdrop && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n };\n /**\n * Hide the Sidebar component.\n * @returns void\n */\n Sidebar.prototype.hide = function () {\n if (this.element.classList.contains(CLOSE)) {\n return;\n }\n if (this.element.classList.contains(OPEN)) {\n this.eventArguments = { name: 'change', element: this.element };\n this.trigger('change', this.eventArguments);\n }\n addClass([this.element], CLOSE);\n removeClass([this.element], OPEN);\n this.enableDock ? setStyle(this.element, { 'width': formatUnit(this.dockSize) }) :\n setStyle(this.element, { 'width': formatUnit(this.width) });\n this.setDock();\n this.setType(this.type);\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n if (!this.enableDock && sibling) {\n sibling.style.transform = 'translateX(' + 0 + 'px)';\n this.position === 'Left' ? sibling.style.marginLeft = '0px' : sibling.style.marginRight = '0px';\n }\n this.eventArguments = { name: 'change', element: this.element };\n this.trigger('close', this.eventArguments);\n this.destroyBackDrop();\n this.setCloseOnDocumentClick();\n this.setAnimation();\n if (this.type === 'Slide') {\n document.body.classList.remove('e-sidebar-overflow');\n }\n };\n /**\n * Shows the Sidebar component.\n * @returns void\n */\n Sidebar.prototype.show = function () {\n removeClass([this.element], VISIBILITY);\n if (this.element.classList.contains(OPEN)) {\n return;\n }\n if (this.element.classList.contains(CLOSE)) {\n this.eventArguments = { name: 'open', element: this.element };\n this.trigger('change', this.eventArguments);\n }\n addClass([this.element], [OPEN, TRASITION]);\n setStyle(this.element, { 'transform': '' });\n removeClass([this.element], CLOSE);\n setStyle(this.element, { 'width': formatUnit(this.width) });\n var elementWidth = this.element.getBoundingClientRect().width;\n this.setType(this.type);\n this.createBackDrop();\n this.eventArguments.name = 'open';\n this.eventArguments.element = this.element;\n this.trigger('open', this.eventArguments);\n this.setCloseOnDocumentClick();\n this.setAnimation();\n if (this.type === 'Slide') {\n document.body.classList.add('e-sidebar-overflow');\n }\n };\n Sidebar.prototype.setAnimation = function () {\n if (this.animate) {\n removeClass([this.element], DISABLEANIMATION);\n }\n else {\n addClass([this.element], DISABLEANIMATION);\n }\n };\n Sidebar.prototype.setDock = function () {\n if (this.enableDock && this.position === 'Left' && !this.isOpen()) {\n setStyle(this.element, { 'transform': 'translateX(' + -100 + '%) translateX(' + formatUnit(this.dockSize) + ')' });\n }\n else if (this.enableDock && this.position === 'Right' && !this.isOpen()) {\n setStyle(this.element, { 'transform': 'translateX(' + 100 + '%) translateX(' + '-' + formatUnit(this.dockSize) + ')' });\n }\n if (this.element.classList.contains(CLOSE) && this.enableDock) {\n setStyle(this.element, { 'width': formatUnit(this.dockSize) });\n }\n };\n Sidebar.prototype.createBackDrop = function () {\n if (this.target && this.showBackdrop) {\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n addClass([sibling], CONTEXTBACKDROP);\n }\n else if (this.showBackdrop && !this.modal && this.isOpen()) {\n this.modal = createElement('div');\n this.modal.className = DEFAULTBACKDROP;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n };\n Sidebar.prototype.getPersistData = function () {\n return this.addOnPersist(['type', 'position']);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Sidebar.prototype.getModuleName = function () {\n return 'sidebar';\n };\n /**\n * Shows or hides the Sidebar based on the current state.\n * @returns void\n */\n Sidebar.prototype.toggle = function (e) {\n this.element.classList.contains(OPEN) ? this.hide() : this.show();\n };\n /**\n * Specifies the current state of the Sidebar component.\n * @returns boolean\n */\n Sidebar.prototype.isOpen = function () {\n return this.element.classList.contains(OPEN) ? true : false;\n };\n Sidebar.prototype.setMediaQuery = function () {\n if (this.mediaQuery && this.mediaQuery.matches) {\n this.show();\n }\n else if (this.mediaQuery && this.isOpen()) {\n this.hide();\n }\n };\n Sidebar.prototype.resize = function (e) {\n if (this.type === 'Auto') {\n if (Browser.isDevice) {\n addClass([this.element], OVER);\n }\n else {\n addClass([this.element], PUSH);\n }\n }\n this.setMediaQuery();\n };\n Sidebar.prototype.documentclickHandler = function (e) {\n if (closest(e.target, '.' + CONTROL + '' + '.' + ROOT)) {\n return;\n }\n this.hide();\n };\n Sidebar.prototype.enableGestureHandler = function (args) {\n if (this.position === 'Left' && args.swipeDirection === 'Right' &&\n (args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {\n this.show();\n }\n else if (this.position === 'Left' && args.swipeDirection === 'Left') {\n this.hide();\n }\n else if (this.position === 'Right' && args.swipeDirection === 'Right') {\n this.hide();\n }\n else if (this.position === 'Right' && args.swipeDirection === 'Left'\n && (window.innerWidth - args.startX <= 20 && args.distanceX >= 50 && args.velocity >= 0.5)) {\n this.show();\n }\n };\n Sidebar.prototype.setEnableGestures = function () {\n if (this.enableGestures) {\n this.mainContentEle = new Touch(document.body, { swipe: this.enableGestureHandler.bind(this) });\n this.sidebarEle = new Touch(this.element, { swipe: this.enableGestureHandler.bind(this) });\n }\n else {\n if (this.mainContentEle && this.sidebarEle) {\n this.mainContentEle.destroy();\n this.sidebarEle.destroy();\n }\n }\n };\n Sidebar.prototype.wireEvents = function () {\n this.setEnableGestures();\n window.addEventListener('resize', this.resize.bind(this));\n };\n Sidebar.prototype.unWireEvents = function () {\n window.removeEventListener('resize', this.resize.bind(this));\n EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);\n if (this.mainContentEle) {\n this.mainContentEle.destroy();\n }\n if (this.sidebarEle) {\n this.sidebarEle.destroy();\n }\n };\n Sidebar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.setWidth();\n if (!this.isOpen()) {\n this.setDock();\n }\n break;\n case 'animate':\n this.setAnimation();\n break;\n case 'type':\n removeClass([this.element], [VISIBILITY]);\n this.addClass();\n this.setType(this.type);\n break;\n case 'position':\n this.element.style.transform = '';\n this.setDock();\n if (sibling) {\n this.position === 'Left' ? sibling.style.marginRight = '0px' : sibling.style.marginLeft = '0px';\n }\n if (this.position === 'Right') {\n removeClass([this.element], LEFT);\n addClass([this.element], RIGHT);\n }\n else {\n removeClass([this.element], RIGHT);\n addClass([this.element], LEFT);\n }\n this.setType(this.type);\n break;\n case 'showBackdrop':\n if (this.showBackdrop) {\n this.createBackDrop();\n }\n else {\n if (this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n }\n break;\n case 'target':\n if (typeof (this.target) === 'string') {\n this.setProperties({ target: document.querySelector('.' + this.target) }, true);\n }\n if (isNullOrUndefined(this.target)) {\n removeClass([this.element], SIDEBARABSOLUTE);\n removeClass([oldProp.target], CONTEXT);\n setStyle(sibling, { 'margin-left': 0, 'margin-right': 0 });\n document.body.insertAdjacentElement('afterbegin', this.element);\n }\n else {\n _super.prototype.refresh.call(this);\n }\n break;\n case 'closeOnDocumentClick':\n this.setCloseOnDocumentClick();\n break;\n case 'enableDock':\n if (!this.isOpen()) {\n this.setDock();\n }\n break;\n case 'zIndex':\n this.setZindex();\n break;\n case 'mediaQuery':\n this.setMediaQuery();\n break;\n case 'enableGestures':\n this.setEnableGestures();\n break;\n }\n }\n };\n Sidebar.prototype.setType = function (type) {\n var elementWidth = this.element.getBoundingClientRect().width;\n this.setZindex();\n if (this.enableDock) {\n addClass([this.element], DOCKER);\n }\n var sibling = document.querySelector('.e-main-content') ||\n this.element.nextElementSibling;\n if (sibling) {\n sibling.style.transform = 'translateX(' + 0 + 'px)';\n if (!Browser.isDevice && this.type !== 'Auto') {\n this.position === 'Left' ? sibling.style.marginLeft = '0px' : sibling.style.marginRight = '0px';\n }\n }\n var margin = this.position === 'Left' ? elementWidth + 'px' : elementWidth + 'px';\n var eleWidth = this.position === 'Left' ? elementWidth : -(elementWidth);\n removeClass([this.element], [PUSH, OVER, SLIDE]);\n switch (type) {\n case 'Push':\n addClass([this.element], [PUSH]);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n }\n break;\n case 'Slide':\n addClass([this.element], [SLIDE]);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n sibling.style.transform = 'translateX(' + eleWidth + 'px)';\n }\n break;\n case 'Over':\n addClass([this.element], [OVER]);\n if (this.enableDock && this.element.classList.contains(CLOSE)) {\n if (sibling) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n }\n }\n break;\n case 'Auto':\n addClass([this.element], [TRASITION]);\n if (Browser.isDevice) {\n if (sibling && (this.enableDock) && !this.isOpen()) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n addClass([this.element], PUSH);\n }\n else {\n addClass([this.element], OVER);\n }\n }\n else {\n addClass([this.element], PUSH);\n if (sibling && (this.enableDock || this.element.classList.contains(OPEN))) {\n this.position === 'Left' ? sibling.style.marginLeft = margin : sibling.style.marginRight = margin;\n }\n }\n this.createBackDrop();\n }\n };\n /**\n * Removes the control from the DOM and removes all its related events\n * @returns void\n */\n Sidebar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n removeClass([this.element], [OPEN, CLOSE, PUSH, SLIDE, OVER, LEFT, RIGHT, TRASITION]);\n if (this.target) {\n removeClass([this.element], SIDEBARABSOLUTE);\n removeClass([this.target], CONTEXT);\n }\n this.destroyBackDrop();\n this.element.style.width = '';\n this.element.style.zIndex = '';\n this.element.style.transform = '';\n var sibling = document.querySelector('.e-main-content')\n || this.element.nextElementSibling;\n if (!isNullOrUndefined(sibling)) {\n sibling.style.margin = '';\n sibling.style.transform = '';\n }\n this.unWireEvents();\n };\n __decorate([\n Property('auto')\n ], Sidebar.prototype, \"dockSize\", void 0);\n __decorate([\n Property(null)\n ], Sidebar.prototype, \"mediaQuery\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"enableDock\", void 0);\n __decorate([\n Property(true)\n ], Sidebar.prototype, \"enableGestures\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(true)\n ], Sidebar.prototype, \"animate\", void 0);\n __decorate([\n Property('auto')\n ], Sidebar.prototype, \"height\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"closeOnDocumentClick\", void 0);\n __decorate([\n Property('Left')\n ], Sidebar.prototype, \"position\", void 0);\n __decorate([\n Property(null)\n ], Sidebar.prototype, \"target\", void 0);\n __decorate([\n Property(false)\n ], Sidebar.prototype, \"showBackdrop\", void 0);\n __decorate([\n Property('Auto')\n ], Sidebar.prototype, \"type\", void 0);\n __decorate([\n Property('auto')\n ], Sidebar.prototype, \"width\", void 0);\n __decorate([\n Property(1000)\n ], Sidebar.prototype, \"zIndex\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Sidebar.prototype, \"destroyed\", void 0);\n Sidebar = __decorate([\n NotifyPropertyChanges\n ], Sidebar);\n return Sidebar;\n}(Component));\nexport { Sidebar };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if (type === 'date' || type === 'datetime' || type === 'number') {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options) {\n var _this = this;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](./filtering.html#custom-component-in-filter-menu) for its customization.\n * @default null\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n * @default {}\n */\n this.edit = {};\n this.sortDirection = 'Descending';\n merge(this, options);\n this.uid = getUid('grid-column');\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || options.format.format)) {\n this.setFormatter(valueFormatter.getFormatFunction(options.format));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.isForeignColumn() && (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit')) {\n this.editType = 'dropdownedit';\n this.edit.params = {\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n };\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function comparer(x, y) {\n if (typeof a_1 === 'string') {\n a_1 = getValue(a_1, window);\n }\n if (this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n }\n return a_1(x, y);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getValue(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getValue(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /** @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /** @hidden */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /** @hidden */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[i]] = column[keys[i]];\n }\n };\n /**\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /** @hidden */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /** @hidden */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /** @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /** @hidden */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /** @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /** @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /** @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /** @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n","/** @hidden */\nexport var created = 'create';\n/** @hidden */\nexport var destroyed = 'destroy';\n/** @hidden */\nexport var load = 'load';\n/** @hidden */\nexport var rowDataBound = 'rowDataBound';\n/** @hidden */\nexport var queryCellInfo = 'queryCellInfo';\n/** @hidden */\nexport var actionBegin = 'actionBegin';\n/** @hidden */\nexport var actionComplete = 'actionComplete';\n/** @hidden */\nexport var actionFailure = 'actionFailure';\n/** @hidden */\nexport var dataBound = 'dataBound';\n/** @hidden */\nexport var rowSelecting = 'rowSelecting';\n/** @hidden */\nexport var rowSelected = 'rowSelected';\n/** @hidden */\nexport var rowDeselecting = 'rowDeselecting';\n/** @hidden */\nexport var rowDeselected = 'rowDeselected';\n/** @hidden */\nexport var cellSelecting = 'cellSelecting';\n/** @hidden */\nexport var cellSelected = 'cellSelected';\n/** @hidden */\nexport var cellDeselecting = 'cellDeselecting';\n/** @hidden */\nexport var cellDeselected = 'cellDeselected';\n/** @hidden */\nexport var columnDragStart = 'columnDragStart';\n/** @hidden */\nexport var columnDrag = 'columnDrag';\n/** @hidden */\nexport var columnDrop = 'columnDrop';\n/** @hidden */\nexport var rowDragStart = 'rowDragStart';\n/** @hidden */\nexport var rowDrag = 'rowDrag';\n/** @hidden */\nexport var rowDrop = 'rowDrop';\n/** @hidden */\nexport var beforePrint = 'beforePrint';\n/** @hidden */\nexport var printComplete = 'printComplete';\n/** @hidden */\nexport var detailDataBound = 'detailDataBound';\n/** @hidden */\nexport var toolbarClick = 'toolbarClick';\n/** @hidden */\nexport var batchAdd = 'batchAdd';\n/** @hidden */\nexport var batchCancel = 'batchCancel';\n/** @hidden */\nexport var batchDelete = 'batchDelete';\n/** @hidden */\nexport var beforeBatchAdd = 'beforeBatchAdd';\n/** @hidden */\nexport var beforeBatchDelete = 'beforeBatchDelete';\n/** @hidden */\nexport var beforeBatchSave = 'beforeBatchSave';\n/** @hidden */\nexport var beginEdit = 'beginEdit';\n/** @hidden */\nexport var cellEdit = 'cellEdit';\n/** @hidden */\nexport var cellSave = 'cellSave';\n/** @hidden */\nexport var endAdd = 'endAdd';\n/** @hidden */\nexport var endDelete = 'endDelete';\n/** @hidden */\nexport var endEdit = 'endEdit';\n/** @hidden */\nexport var recordDoubleClick = 'recordDoubleClick';\n/** @hidden */\nexport var recordClick = 'recordClick';\n/** @hidden */\nexport var beforeDataBound = 'beforeDataBound';\n/** @hidden */\nexport var beforeOpenColumnChooser = 'beforeOpenColumnChooser';\n/** @hidden */\nexport var resizeStart = 'resizeStart';\n/** @hidden */\nexport var onResize = 'resizing';\n/** @hidden */\nexport var resizeStop = 'resizeStop';\n/** @hidden */\nexport var checkBoxChange = 'checkBoxChange';\n/** @hidden */\nexport var beforeCopy = 'beforeCopy';\n/** @hidden */\nexport var filterChoiceRequest = 'filterchoicerequest';\n/** @hidden */\nexport var filterAfterOpen = 'filterafteropen';\n/** @hidden */\nexport var filterBeforeOpen = 'filterbeforeopen';\nexport var filterSearchBegin = 'filtersearchbegin';\n/**\n * Specifies grid internal events\n */\n/** @hidden */\nexport var initialLoad = 'initial-load';\n/** @hidden */\nexport var initialEnd = 'initial-end';\n/** @hidden */\nexport var dataReady = 'data-ready';\n/** @hidden */\nexport var contentReady = 'content-ready';\n/** @hidden */\nexport var uiUpdate = 'ui-update';\n/** @hidden */\nexport var onEmpty = 'on-empty';\n/** @hidden */\nexport var inBoundModelChanged = 'inbound-model-changed';\n/** @hidden */\nexport var modelChanged = 'model-changed';\n/** @hidden */\nexport var colGroupRefresh = 'colgroup-refresh';\n/** @hidden */\nexport var headerRefreshed = 'header-refreshed';\n/** @hidden */\nexport var pageBegin = 'paging-begin';\n/** @hidden */\nexport var pageComplete = 'paging-complete';\n/** @hidden */\nexport var sortBegin = 'sorting-begin';\n/** @hidden */\nexport var sortComplete = 'sorting-complete';\n/** @hidden */\nexport var filterBegin = 'filtering-begin';\n/** @hidden */\nexport var filterComplete = 'filtering-complete';\n/** @hidden */\nexport var searchBegin = 'searching-begin';\n/** @hidden */\nexport var searchComplete = 'searching-complete';\n/** @hidden */\nexport var reorderBegin = 'reorder-begin';\n/** @hidden */\nexport var reorderComplete = 'reorder-complete';\n/** @hidden */\nexport var rowDragAndDropBegin = 'rowdraganddrop-begin';\n/** @hidden */\nexport var rowDragAndDropComplete = 'rowdraganddrop-complete';\n/** @hidden */\nexport var groupBegin = 'grouping-begin';\n/** @hidden */\nexport var groupComplete = 'grouping-complete';\n/** @hidden */\nexport var ungroupBegin = 'ungrouping-begin';\n/** @hidden */\nexport var ungroupComplete = 'ungrouping-complete';\n/** @hidden */\nexport var rowSelectionBegin = 'rowselecting';\n/** @hidden */\nexport var rowSelectionComplete = 'rowselected';\n/** @hidden */\nexport var columnSelectionBegin = 'columnselecting';\n/** @hidden */\nexport var columnSelectionComplete = 'columnselected';\n/** @hidden */\nexport var cellSelectionBegin = 'cellselecting';\n/** @hidden */\nexport var cellSelectionComplete = 'cellselected';\n/** @hidden */\nexport var beforeCellFocused = 'beforecellfocused';\n/** @hidden */\nexport var cellFocused = 'cellfocused';\n/** @hidden */\nexport var keyPressed = 'key-pressed';\n/** @hidden */\nexport var click = 'click';\n/** @hidden */\nexport var destroy = 'destroy';\n/** @hidden */\nexport var columnVisibilityChanged = 'column-visible-changed';\n/** @hidden */\nexport var scroll = 'scroll';\n/** @hidden */\nexport var columnWidthChanged = 'column-width-changed';\n/** @hidden */\nexport var columnPositionChanged = 'column-position-changed';\n/** @hidden */\nexport var rowDragAndDrop = 'row-drag-and-drop';\n/** @hidden */\nexport var rowsAdded = 'rows-added';\n/** @hidden */\nexport var rowsRemoved = 'rows-removed';\n/** @hidden */\nexport var columnDragStop = 'column-drag-stop';\n/** @hidden */\nexport var headerDrop = 'header-drop';\n/** @hidden */\nexport var dataSourceModified = 'datasource-modified';\n/** @hidden */\nexport var refreshComplete = 'refresh-complete';\n/** @hidden */\nexport var refreshVirtualBlock = 'refresh-virtual-block';\n/** @hidden */\nexport var dblclick = 'dblclick';\n/** @hidden */\nexport var toolbarRefresh = 'toolbar-refresh';\n/** @hidden */\nexport var bulkSave = 'bulk-save';\n/** @hidden */\nexport var autoCol = 'auto-col';\n/** @hidden */\nexport var tooltipDestroy = 'tooltip-destroy';\n/** @hidden */\nexport var updateData = 'update-data';\n/** @hidden */\nexport var editBegin = 'edit-begin';\n/** @hidden */\nexport var editComplete = 'edit-complete';\n/** @hidden */\nexport var addBegin = 'add-begin';\n/** @hidden */\nexport var addComplete = 'add-complete';\n/** @hidden */\nexport var saveComplete = 'save-complete';\n/** @hidden */\nexport var deleteBegin = 'delete-begin';\n/** @hidden */\nexport var deleteComplete = 'delete-complete';\n/** @hidden */\nexport var preventBatch = 'prevent-batch';\n/** @hidden */\nexport var dialogDestroy = 'dialog-destroy';\n/** @hidden */\nexport var crudAction = 'crud-Action';\n/** @hidden */\nexport var addDeleteAction = 'add-delete-Action';\n/** @hidden */\nexport var destroyForm = 'destroy-form';\n/** @hidden */\nexport var doubleTap = 'double-tap';\n/** @hidden */\nexport var beforeExcelExport = 'beforeExcelExport';\n/** @hidden */\nexport var excelExportComplete = 'excelExportComplete';\n/** @hidden */\nexport var excelQueryCellInfo = 'excelQueryCellInfo';\n/** @hidden */\nexport var beforePdfExport = 'beforePdfExport';\n/** @hidden */\nexport var pdfExportComplete = 'pdfExportComplete';\n/** @hidden */\nexport var pdfQueryCellInfo = 'pdfQueryCellInfo';\n/** @hidden */\nexport var accessPredicate = 'access-predicate';\n/** @hidden */\nexport var contextMenuClick = 'contextMenuClick';\n/** @hidden */\nexport var freezeRender = 'freezerender';\n/** @hidden */\nexport var freezeRefresh = 'freezerefresh';\n/** @hidden */\nexport var contextMenuOpen = 'contextMenuOpen';\n/** @hidden */\nexport var columnMenuClick = 'columnMenuClick';\n/** @hidden */\nexport var columnMenuOpen = 'columnMenuOpen';\n/** @hidden */\nexport var filterOpen = 'filterOpen';\n/** @hidden */\nexport var filterDialogCreated = 'filterDialogCreated';\n/** @hidden */\nexport var filterMenuClose = 'filter-menu-close';\n/** @hidden */\nexport var initForeignKeyColumn = 'initForeignKeyColumn';\n/** @hidden */\nexport var getForeignKeyData = 'getForeignKeyData';\n/** @hidden */\nexport var generateQuery = 'generateQuery';\n/** @hidden */\nexport var showEmptyGrid = 'showEmptyGrid';\n/** @hidden */\nexport var foreignKeyData = 'foreignKeyData';\n/** @hidden */\nexport var dataStateChange = 'dataStateChange';\n/** @hidden */\nexport var dataSourceChanged = 'dataSourceChanged';\n/** @hidden */\nexport var rtlUpdated = 'rtl-updated';\n","/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, appendChildren, getDatePredicate } from '../base/util';\nimport { remove, createElement, debounce } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n * @hidden\n */\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.existingPredicate = {};\n this.filterState = true;\n this.values = {};\n this.cBoxTrue = createCheckBox(false, { checked: true, label: ' ' });\n this.cBoxFalse = createCheckBox(false, { checked: false, label: ' ' });\n this.parent = parent;\n this.id = this.parent.element.id;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue.insertBefore(createElement('input', {\n className: 'e-chk-hidden', attrs: { type: 'checkbox' }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(createElement('input', {\n className: 'e-chk-hidden', attrs: { 'type': 'checkbox' }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n }\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.closeDialog();\n };\n CheckBoxFilter.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n EventHandler.add(this.dlg.querySelector('.e-searchinput'), 'keyup', this.searchHandler, this);\n };\n CheckBoxFilter.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n var elem = this.dlg.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n }\n };\n CheckBoxFilter.prototype.searchBoxClick = function (e) {\n var target = e.target;\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = '';\n this.refreshCheckboxes();\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n CheckBoxFilter.prototype.searchBoxKeyUp = function (e) {\n this.refreshCheckboxes();\n this.updateSearchIcon();\n };\n CheckBoxFilter.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n }\n else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n }\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n CheckBoxFilter.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n CheckBoxFilter.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n if (typeof dataSource !== 'object') {\n var obj = {};\n obj[this.options.field] = dataSource[i];\n dataSource[i] = obj;\n }\n }\n }\n };\n CheckBoxFilter.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.updateDataSource();\n this.options.type = options.type || 'string';\n this.options.format = options.format || '';\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.sortedColumns = options.sortedColumns || this.parent.sortSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n };\n CheckBoxFilter.prototype.getAndSetChkElem = function (options) {\n this.dlg = createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = createElement('div', { className: 'e-searchcontainer' });\n if (!options.hideSearchbox) {\n this.sInput = createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {\n type: 'text', title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = createElement('span', { className: 'e-searchbox e-fields' });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n Input.createInput({\n element: this.sInput, floatLabelType: 'Never', properties: {\n placeholder: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n this.spinner = createElement('div', { className: 'e-spinner' }); //for spinner\n this.cBox = createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n CheckBoxFilter.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen, filterModel: this,\n columnName: this.options.field, columnType: this.options.type, cancel: false\n };\n this.parent.trigger(events.actionBegin, args);\n if (args.cancel) {\n return;\n }\n this.dialogObj = new Dialog({\n visible: false, content: this.sBox,\n close: this.closeDialog.bind(this),\n width: (!isNullOrUndefined(parentsUntil(options.target, 'e-bigger')))\n || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element, animationSettings: { effect: 'None' },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: { content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: 'e-primary', isPrimary: true }\n },\n {\n click: this.btnClick.bind(this),\n buttonModel: { cssClass: 'e-flat', content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton') }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this)\n });\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = '800px';\n this.dialogObj.show();\n this.wireEvents();\n createSpinner({ target: this.spinner });\n showSpinner(this.spinner);\n this.getAllData();\n };\n CheckBoxFilter.prototype.dialogCreated = function (e) {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj, this.parent);\n }\n else {\n this.dialogObj.position = { X: 'center', Y: 'center' };\n }\n this.parent.notify(events.filterDialogCreated, e);\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n this.parent.notify(events.filterMenuClose, { field: this.options.field });\n this.dialogObj.destroy();\n this.unWireEvents();\n remove(this.dlg);\n this.dlg = null;\n }\n };\n CheckBoxFilter.prototype.clearFilter = function () {\n this.options.handler({ action: 'clear-filter', field: this.options.field });\n };\n CheckBoxFilter.prototype.btnClick = function (e) {\n if (this.filterState) {\n if (e.target.tagName.toLowerCase() === 'input') {\n var args = {\n action: 'filtering', filterCollection: {\n field: this.options.field,\n operator: this.options.column.type === 'date' || this.options.column.type === 'datetime' ? 'equal' : 'contains',\n value: e.target.value, matchCase: false, type: this.options.column.type\n },\n field: this.options.field\n };\n e.target.value ? this.options.handler(args) : this.closeDialog();\n }\n else {\n var text = e.target.firstChild.textContent.toLowerCase();\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n this.fltrBtnHandler();\n }\n else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n this.closeDialog();\n }\n else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n };\n CheckBoxFilter.prototype.fltrBtnHandler = function () {\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall)'));\n var optr = 'equal';\n var caseSen = this.options.type === 'string' ?\n this.options.allowCaseSensitive : true;\n var defaults = {\n field: this.options.field, predicate: 'or',\n operator: optr, matchCase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n if (isNotEqual) {\n optr = 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = 'and';\n defaults.operator = 'notequal';\n }\n var value;\n var fObj;\n var coll = [];\n var searchInput = this.searchBox.querySelector('.e-searchinput');\n if (checked.length !== this.itemsCnt || (searchInput.value && searchInput.value !== '')) {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, { value: value }, defaults);\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n coll.push(fObj);\n }\n this.initiateFilter(coll);\n }\n else {\n this.clearFilter();\n }\n };\n CheckBoxFilter.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate :\n new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[j].ejpredicate !== undefined ?\n predicate[fColl[j].predicate](fColl[j].ejpredicate) :\n predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n CheckBoxFilter.prototype.refreshCheckboxes = function () {\n var val = this.sInput.value;\n var query = this.options.query.clone();\n var parsed = (this.options.type !== 'string' && parseFloat(val)) ? parseFloat(val) : val;\n var operator = this.options.type ? 'startswith' : 'contains';\n var matchCase = true;\n var ignoreAccent = this.parent.filterSettings.ignoreAccent;\n parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;\n var predicte;\n if (this.options.type === 'boolean') {\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'false';\n }\n }\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this, columnName: this.options.field, column: this.options.column,\n operator: operator, matchCase: matchCase, ignoreAccent: ignoreAccent, filterChoiceCount: null,\n query: query\n };\n this.parent.trigger(events.actionBegin, args);\n predicte = new Predicate(this.options.field, args.operator, parsed, args.matchCase, args.ignoreAccent);\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n parsed = this.valueFormatter.fromView(val, this.options.parserFn, this.options.type);\n operator = 'equal';\n if (isNullOrUndefined(parsed) && val.length) {\n return;\n }\n predicte = getDatePredicate({\n field: this.options.field, operator: operator, value: parsed, matchCase: matchCase,\n ignoreAccent: ignoreAccent\n });\n }\n if (val.length) {\n query.where(predicte);\n }\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n this.processSearch(query);\n };\n CheckBoxFilter.prototype.getPredicateFromCols = function (columns) {\n var predicate;\n var predicates = CheckBoxFilter.getPredicate(columns);\n var predicateList = [];\n var fPredicate = {};\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n }\n else {\n predicateList.push(predicates[prop]);\n }\n }\n return predicateList.length && Predicate.and(predicateList);\n };\n CheckBoxFilter.prototype.getAllData = function () {\n var query = new Query();\n query = this.parent.query.clone();\n query.requiresCount(); //consider take query\n var args = {\n requestType: events.filterChoiceRequest, filterModel: this, query: query, filterChoiceCount: null\n };\n this.parent.trigger(events.actionBegin, args);\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n this.processDataOperation(query);\n };\n CheckBoxFilter.prototype.processDataOperation = function (query) {\n var _this = this;\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n if (this.options.column.isForeignColumn()) {\n allPromise.push(this.options.column.dataSource.executeQuery(new Query()));\n runArray.push(function (data) { return _this.foreignKeyData = data; });\n }\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n e.forEach(function (data) {\n runArray[i++](data.result);\n });\n });\n };\n CheckBoxFilter.prototype.dataSuccess = function (e) {\n this.fullData = e;\n var query = new Query();\n if ((this.options.filteredColumns.length)) {\n var cols = [];\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n if (!(this.options.filteredColumns[i].field === this.options.field ||\n this.options.filteredColumns[i].field === this.options.foreignKeyValue)) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n var predicate = this.getPredicateFromCols(cols);\n if (predicate) {\n query.where(predicate);\n }\n }\n // query.select(this.options.field);\n var result = new DataManager(this.fullData).executeLocal(query);\n var col = this.options.column;\n var res = CheckBoxFilter.getDistinct(result, this.options.field, col, this.foreignKeyData);\n this.filteredData = res.records || [];\n this.processDataSource(null, true, this.filteredData);\n this.dialogObj.element.querySelector('.e-searchinput').focus();\n var args = {\n requestType: events.filterAfterOpen,\n filterModel: this, columnName: this.options.field, columnType: this.options.type\n };\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.processDataSource = function (query, isInitial, dataSource) {\n showSpinner(this.spinner);\n this.updateResult();\n this.createFilterItems(dataSource, isInitial);\n };\n CheckBoxFilter.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n CheckBoxFilter.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.getPredicateFromCols(this.options.filteredColumns);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n var result = new DataManager(this.fullData).executeLocal(query);\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getValue(this.options.field, res)] = true;\n }\n };\n CheckBoxFilter.prototype.clickHandler = function (e) {\n var target = e.target;\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n if (elem) {\n var selectAll = elem.querySelector('.e-selectall');\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n }\n else {\n toogleCheckbox(elem.parentElement);\n }\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n };\n CheckBoxFilter.prototype.updateAllCBoxes = function (checked) {\n var cBoxes = [].slice.call(this.cBox.querySelectorAll('.e-frame'));\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n }\n };\n CheckBoxFilter.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n };\n CheckBoxFilter.prototype.createCheckbox = function (value, checked) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) :\n this.cBoxFalse.cloneNode(true);\n var label = elem.querySelector('.e-label');\n label.innerHTML = !isNullOrUndefined(value) && value.toString().length ? value :\n this.getLocalizedLabel('Blanks');\n if (this.options.template) {\n label.innerHTML = '';\n var args = {};\n args[this.options.field] = value;\n appendChildren(label, this.options.template(args));\n }\n return elem;\n };\n CheckBoxFilter.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.cBox.children.length - 1;\n var className = [];\n var elem = this.cBox.querySelector('.e-selectall');\n var selected = this.cBox.querySelectorAll('.e-check:not(.e-selectall)').length;\n var btn = this.dlg.querySelector('.e-footer-content').querySelector('.e-btn').ej2_instances[0];\n btn.disabled = false;\n if (cnt === selected) {\n className = ['e-check'];\n }\n else if (selected) {\n className = ['e-stop'];\n }\n else {\n className = ['e-uncheck'];\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n };\n CheckBoxFilter.prototype.createFilterItems = function (data, isInitial) {\n var cBoxes = createElement('div');\n var btn = this.dlg.querySelector('.e-footer-content').querySelector('.e-btn').ej2_instances[0];\n this.itemsCnt = data.length;\n if (data.length) {\n var selectAll = createCboxWithWrap(getUid('cbox'), this.createCheckbox(this.getLocalizedLabel('SelectAll'), false), 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n cBoxes.appendChild(selectAll);\n var predicate = new Predicate('field', 'equal', this.options.field);\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[uid] = getValue('ejValue', data[i]);\n var value = this.valueFormatter.toView(getValue(this.options.field, data[i]), this.options.formatFn);\n cBoxes.appendChild(createCboxWithWrap(uid, this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[uid])), 'e-ftrchk'));\n }\n this.cBox.innerHTML = cBoxes.innerHTML;\n this.updateIndeterminatenBtn();\n btn.disabled = false;\n }\n else {\n cBoxes.appendChild(createElement('span', { innerHTML: this.getLocalizedLabel('NoResult') }));\n this.cBox.innerHTML = cBoxes.innerHTML;\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n var args = { requestType: events.filterChoiceRequest, filterModel: this, dataSource: data };\n this.parent.trigger(events.actionComplete, args);\n hideSpinner(this.spinner);\n };\n CheckBoxFilter.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n }\n else {\n return this.result[value];\n }\n };\n CheckBoxFilter.getDistinct = function (json, field, column, foreignKeyData) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn();\n while (len--) {\n value = json[len];\n value = getValue(field, value); //local remote diff, check with mdu \n if (!isNullOrUndefined(value)) {\n if (!(value in lookup)) {\n var obj = {};\n obj[ejValue] = value;\n lookup[value] = true;\n value = isForeignKey ? getValue(column.foreignKeyValue, getForeignData(column, {}, value, foreignKeyData)[0]) : value;\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n result.push(obj);\n }\n }\n }\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n CheckBoxFilter.getPredicate = function (columns) {\n var cols = CheckBoxFilter.getDistinct(columns, 'field').records || [];\n var collection = [];\n var pred = {};\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[i].field));\n if (collection.length !== 0) {\n pred[cols[i].field] = CheckBoxFilter.generatePredicate(collection);\n }\n }\n return pred;\n };\n CheckBoxFilter.generatePredicate = function (cols) {\n var len = cols ? cols.length : 0;\n var predicate;\n var first;\n first = CheckBoxFilter.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n if (first.type === 'date' || first.type === 'datetime') {\n predicate = getDatePredicate(first);\n }\n else {\n predicate = first.ejpredicate ? first.ejpredicate :\n new Predicate(first.field, first.operator, first.value, !CheckBoxFilter.getCaseValue(first), first.ignoreAccent);\n }\n for (var p = 1; p < len; p++) {\n cols[p] = CheckBoxFilter.updateDateFilter(cols[p]);\n if (len > 2 && p > 1 && cols[p].predicate === 'or') {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate.predicates.push(getDatePredicate(cols[p]));\n }\n else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));\n }\n }\n else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate = predicate[(cols[p].predicate)](getDatePredicate(cols[p]), cols[p].ignoreAccent);\n }\n else {\n predicate = cols[p].ejpredicate ?\n predicate[cols[p].predicate](cols[p].ejpredicate) :\n predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent);\n }\n }\n }\n return predicate || null;\n };\n CheckBoxFilter.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n return true;\n }\n else {\n return filter.matchCase;\n }\n };\n CheckBoxFilter.updateDateFilter = function (filter) {\n if ((filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date)) {\n filter.type = filter.type || 'date';\n }\n return filter;\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, getDatePredicate, getColumnByForeignKeyValue } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\n/**\n * Grid data module is used to generate query and data source.\n * @hidden\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module.\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = { isPending: false, resolver: null, group: [] };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n }\n /**\n * The function used to initialize dataManager and external query\n * @return {void}\n */\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource :\n (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource));\n gObj.query = gObj.query instanceof Query ? gObj.query : new Query();\n };\n /**\n * The function is used to generate updated Query from Grid model.\n * @return {Query}\n * @hidden\n */\n Data.prototype.generateQuery = function (skipPage) {\n var gObj = this.parent;\n var query = gObj.query.clone();\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n this.pageQuery(query, skipPage);\n this.groupQuery(query);\n return query;\n };\n Data.prototype.aggregateQuery = function (query, isForeign) {\n this.parent.aggregates.forEach(function (row) {\n row.columns.forEach(function (column) {\n var types = column.type instanceof Array ? column.type : [column.type];\n types.forEach(function (type) { return query.aggregate(type.toLowerCase(), column.field); });\n });\n });\n return query;\n };\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n if ((gObj.allowPaging || gObj.enableVirtualization) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);\n }\n return query;\n };\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n var columns = gObj.groupSettings.columns;\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[i]);\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n if (isGrpFmt) {\n query.group(columns[i], this.formatGroupColumn.bind(this), format);\n }\n else {\n query.group(columns[i], null);\n }\n }\n }\n return query;\n };\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[i].field);\n if (col) {\n col.setSortDirection(columns[i].direction);\n }\n var fn = col.sortComparer && !this.isRemote() ? col.sortComparer.bind(col) :\n columns[i].direction;\n if (gObj.groupSettings.columns.indexOf(columns[i].field) === -1) {\n query.sortBy(col.field, fn);\n }\n else {\n sortGrp.push({ direction: fn, field: col.field });\n }\n }\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n query.sortBy(sortGrp[i].field, sortGrp[i].direction);\n }\n }\n return query;\n };\n Data.prototype.searchQuery = function (query) {\n var _this = this;\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.parent.getColumns().map(function (f) { return f.field; });\n var predicateList = [];\n if (this.parent.searchSettings.key.length) {\n var predicate = void 0;\n if (this.parent.getForeignKeyColumns().length) {\n fields.forEach(function (columnName) {\n var column = _this.getColumnByField(columnName);\n var sQuery = new Query();\n if (column.isForeignColumn()) {\n predicateList = _this.fGeneratePredicate(column, predicateList);\n }\n else {\n predicateList.push(new Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, _this.parent.filterSettings.ignoreAccent));\n }\n });\n query.where(Predicate.or(predicateList));\n }\n else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, this.parent.filterSettings.ignoreAccent);\n }\n }\n return query;\n };\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var fPredicate = {};\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n for (var _i = 0, _a = gObj.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n var checkBoxCols = [];\n var defaultFltrCols = [];\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n if (colType[col.field] === 'CheckBox' || colType[col.field] === 'Excel') {\n checkBoxCols.push(col);\n }\n else {\n defaultFltrCols.push(col);\n }\n }\n if (checkBoxCols.length) {\n var excelPredicate = CheckBoxFilter.getPredicate(checkBoxCols);\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col && !skipFoerign) {\n predicateList = this.fGeneratePredicate(col, predicateList);\n actualFilter.push(col);\n }\n else {\n predicateList.push(excelPredicate[prop]);\n }\n }\n }\n if (defaultFltrCols.length) {\n for (var _e = 0, defaultFltrCols_1 = defaultFltrCols; _e < defaultFltrCols_1.length; _e++) {\n var col = defaultFltrCols_1[_e];\n var column_1 = this.getColumnByField(col.field) ||\n getColumnByForeignKeyValue(col.field, this.parent.getForeignKeyColumns());\n var sType = column_1.type;\n if (getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n }\n else {\n if (sType !== 'date' && sType !== 'datetime') {\n predicateList.push(new Predicate(col.field, col.operator, col.value, !col.matchCase, this.parent.filterSettings.ignoreAccent));\n }\n else {\n predicateList.push(getDatePredicate(col));\n }\n }\n }\n }\n if (predicateList.length) {\n query.where(Predicate.and(predicateList));\n }\n else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n return query;\n };\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @return {Promise
}\n * @hidden\n */\n Data.prototype.getData = function (args, query) {\n var _this = this;\n if (args === void 0) { args = { requestType: '' }; }\n var key = this.getKey(args.foreignKeyData &&\n Object.keys(args.foreignKeyData).length ?\n args.foreignKeyData : this.parent.getPrimaryKeyFieldNames());\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n var def = this.eventPromise(args, query, key);\n return def.promise;\n }\n else {\n var crud = void 0;\n switch (args.requestType) {\n case 'delete':\n query = query ? query : this.generateQuery();\n crud = this.dataManager.remove(key, args.data[0], null, query);\n break;\n case 'save':\n query = query ? query : this.generateQuery();\n args.index = isNullOrUndefined(args.index) ? 0 : args.index;\n crud = this.dataManager.insert(args.data, null, query, args.index);\n break;\n }\n if (crud && !Array.isArray(crud)) {\n return crud.then(function (result) {\n return _this.executeQuery(query);\n });\n }\n else {\n return this.executeQuery(query);\n }\n }\n };\n Data.prototype.executeQuery = function (query) {\n var _this = this;\n if (this.dataManager.ready) {\n var deferred_1 = new Deferred();\n var ready = this.dataManager.ready;\n ready.then(function (e) {\n _this.dataManager.executeQuery(query).then(function (result) {\n deferred_1.resolve(result);\n });\n }).catch(function (e) {\n deferred_1.reject(e);\n });\n return deferred_1.promise;\n }\n else {\n return this.dataManager.executeQuery(query);\n }\n };\n Data.prototype.formatGroupColumn = function (value, field) {\n var gObj = this.parent;\n var serviceLocator = this.serviceLocator;\n var column = this.getColumnByField(field);\n var date = value;\n if (!column.type) {\n column.type = date.getDay ? (date.getHours() > 0 || date.getMinutes() > 0 ||\n date.getSeconds() > 0 || date.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n if (isNullOrUndefined(column.getFormatter())) {\n setFormatter(serviceLocator, column);\n }\n var formatVal = ValueFormatter.prototype.toView(value, column.getFormatter());\n return formatVal;\n };\n Data.prototype.crudActions = function (args) {\n var query = this.generateQuery();\n var promise = null;\n var pr = 'promise';\n var key = this.getKey(args.foreignKeyData &&\n Object.keys(args.foreignKeyData).length ? args.foreignKeyData :\n this.parent.getPrimaryKeyFieldNames());\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.eventPromise(args, query, key);\n }\n switch (args.requestType) {\n case 'save':\n promise = this.dataManager.update(key, args.data, null, this.generateQuery());\n break;\n }\n args[pr] = promise;\n this.parent.notify(events.crudAction, args);\n };\n /** @hidden */\n Data.prototype.saveChanges = function (changes, key) {\n var query = this.generateQuery().requiresCount();\n if ('result' in this.parent.dataSource) {\n var state = void 0;\n state = this.getStateEventArgument(query);\n var deff = new Deferred();\n var args = {\n requestType: 'batchsave', changes: changes, key: key, query: query,\n endEdit: deff.resolve\n };\n this.setState({ isPending: true, resolver: deff.resolve });\n this.parent.trigger(events.dataSourceChanged, args);\n return deff.promise;\n }\n else {\n var promise = this.dataManager.saveChanges(changes, key, null, this.generateQuery().requiresCount());\n return promise;\n }\n };\n Data.prototype.getKey = function (keys) {\n if (keys && keys.length) {\n return keys[0];\n }\n return undefined;\n };\n /** @hidden */\n Data.prototype.isRemote = function () {\n return this.dataManager.dataSource.offline !== true && this.dataManager.dataSource.url !== undefined;\n };\n Data.prototype.addRows = function (e) {\n for (var i = e.records.length; i > 0; i--) {\n this.dataManager.dataSource.json.splice(e.toIndex, 0, e.records[i - 1]);\n }\n };\n Data.prototype.removeRows = function (e) {\n var json = this.dataManager.dataSource.json;\n this.dataManager.dataSource.json = json.filter(function (value, index) { return e.records.indexOf(value) === -1; });\n };\n Data.prototype.getColumnByField = function (field) {\n var col;\n return (this.parent.columnModel).some(function (column) {\n col = column;\n return column.field === field;\n }) && col;\n };\n Data.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.rowsAdded, this.addRows);\n this.parent.off(events.rowsRemoved, this.removeRows);\n this.parent.off(events.dataSourceModified, this.initDataManager);\n this.parent.off(events.dataSourceModified, this.destroy);\n this.parent.off(events.updateData, this.crudActions);\n this.parent.off(events.addDeleteAction, this.getData);\n };\n Data.prototype.getState = function () {\n return this.dataState;\n };\n Data.prototype.setState = function (state) {\n return this.dataState = state;\n };\n Data.prototype.getStateEventArgument = function (query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({ url: '', adaptor: new UrlAdaptor });\n var state = adaptr.processQuery(dm, query);\n return JSON.parse(state.data);\n };\n Data.prototype.eventPromise = function (args, query, key) {\n var _this = this;\n var state;\n var dataArgs = args;\n state = this.getStateEventArgument(query);\n var def = new Deferred();\n var deff = new Deferred();\n if (args.requestType !== undefined && args.requestType !== 'refresh') {\n state.action = args;\n if (args.requestType === 'save' || args.requestType === 'delete') {\n var editArgs = args;\n editArgs.key = key;\n editArgs.state = state;\n this.setState({ isPending: true, resolver: deff.resolve });\n dataArgs.endEdit = deff.resolve;\n this.parent.trigger(events.dataSourceChanged, editArgs);\n deff.promise.then(function (e) {\n _this.setState({ isPending: true, resolver: def.resolve, group: state.group });\n _this.parent.trigger(events.dataStateChange, state);\n });\n }\n else {\n this.setState({ isPending: true, resolver: def.resolve, group: state.group });\n this.parent.trigger(events.dataStateChange, state);\n }\n }\n else {\n this.setState({});\n def.resolve(this.parent.dataSource);\n }\n return def;\n };\n return Data;\n}());\nexport { Data };\n","import { merge } from '@syncfusion/ej2-base';\n/**\n * Row\n * @hidden\n */\nvar Row = /** @class */ (function () {\n function Row(options) {\n merge(this, options);\n }\n Row.prototype.clone = function () {\n var row = new Row({});\n merge(row, this);\n row.cells = this.cells.map(function (cell) { return cell.clone(); });\n return row;\n };\n return Row;\n}());\nexport { Row };\n","import { merge } from '@syncfusion/ej2-base';\n/**\n * Cell\n * @hidden\n */\nvar Cell = /** @class */ (function () {\n function Cell(options) {\n this.isSpanned = false;\n merge(this, options);\n }\n Cell.prototype.clone = function () {\n var cell = new Cell({});\n merge(cell, this);\n return cell;\n };\n return Cell;\n}());\nexport { Cell };\n","import { isNullOrUndefined, attributes } from '@syncfusion/ej2-base';\nimport { iterateArrayOrObject } from '../base/util';\nimport { CellType } from '../base/enum';\n/**\n * `CellMergeRender` module.\n * @hidden\n */\nvar CellMergeRender = /** @class */ (function () {\n function CellMergeRender(serviceLocator, parent) {\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n }\n CellMergeRender.prototype.render = function (cellArgs, row, i, td) {\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[i].cellType || CellType.Data);\n var span = row.cells[i].cellSpan ? row.cells[i].cellSpan :\n (cellArgs.colSpan + i) <= row.cells.length ? cellArgs.colSpan : row.cells.length - i;\n var visible = 0;\n for (var j = i + 1; j < i + span && j < row.cells.length; j++) {\n if (row.cells[j].visible === false) {\n visible++;\n }\n else {\n row.cells[j].isSpanned = true;\n }\n }\n if (visible > 0) {\n for (var j = i + span; j < i + span + visible && j < row.cells.length; j++) {\n row.cells[j].isSpanned = true;\n }\n if (i + span + visible >= row.cells.length) {\n span -= (i + span + visible) - row.cells.length;\n }\n }\n if (row.cells[i].cellSpan) {\n row.data[cellArgs.column.field] = row.cells[i].spanText;\n td = cellRenderer.render(row.cells[i], row.data, { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' });\n }\n if (span > 1) {\n attributes(td, { 'colSpan': span.toString(), 'aria-colSpan': span.toString() });\n }\n if (this.parent.enableColumnVirtualization && !row.cells[i].cellSpan &&\n !this.containsKey(cellArgs.column.field, cellArgs.data[cellArgs.column.field])) {\n this.backupMergeCells(cellArgs.column.field, cellArgs.data[cellArgs.column.field], cellArgs.colSpan);\n }\n return td;\n };\n CellMergeRender.prototype.backupMergeCells = function (fName, data, span) {\n this.setMergeCells(this.generteKey(fName, data), span);\n };\n CellMergeRender.prototype.generteKey = function (fname, data) {\n return fname + '__' + data.toString();\n };\n CellMergeRender.prototype.splitKey = function (key) {\n return key.split('__');\n };\n CellMergeRender.prototype.containsKey = function (fname, data) {\n return this.getMergeCells().hasOwnProperty(this.generteKey(fname, data));\n };\n CellMergeRender.prototype.getMergeCells = function () {\n return this.parent.mergeCells;\n };\n CellMergeRender.prototype.setMergeCells = function (key, span) {\n this.parent.mergeCells[key] = span;\n };\n CellMergeRender.prototype.updateVirtualCells = function (rows) {\n var mCells = this.getMergeCells();\n for (var _i = 0, _a = Object.keys(mCells); _i < _a.length; _i++) {\n var key = _a[_i];\n var value = mCells[key];\n var merge = this.splitKey(key);\n var columnIndex = this.getIndexFromAllColumns(merge[0]);\n var vColumnIndices = this.parent.getColumnIndexesInView();\n var span = value - (vColumnIndices[0] - columnIndex);\n if (columnIndex < vColumnIndices[0] && span > 1) {\n for (var _b = 0, rows_1 = rows; _b < rows_1.length; _b++) {\n var row = rows_1[_b];\n if (row.data[merge[0]].toString() === merge[1].toString()) {\n row.cells[0].cellSpan = span;\n row.cells[0].spanText = merge[1];\n break;\n }\n }\n }\n }\n return rows;\n };\n CellMergeRender.prototype.getIndexFromAllColumns = function (field) {\n var index = iterateArrayOrObject(this.parent.getVisibleColumns(), function (item, index) {\n if (item.field === field) {\n return index;\n }\n return undefined;\n })[0];\n return index;\n };\n return CellMergeRender;\n}());\nexport { CellMergeRender };\n","import { isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';\nimport { createElement, attributes as addAttributes } from '@syncfusion/ej2-base';\nimport { rowDataBound, queryCellInfo } from '../base/constant';\nimport { setStyleAndAttributes } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { CellMergeRender } from './cell-merge-renderer';\n/**\n * RowRenderer class which responsible for building row content.\n * @hidden\n */\nvar RowRenderer = /** @class */ (function () {\n function RowRenderer(serviceLocator, cellType, parent) {\n this.element = createElement('tr', { attrs: { role: 'row' } });\n this.cellType = cellType;\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n }\n /**\n * Function to render the row content based on Column[] and data.\n * @param {Column[]} columns\n * @param {Object} data?\n * @param {{[x:string]:Object}} attributes?\n * @param {string} rowTemplate?\n */\n RowRenderer.prototype.render = function (row, columns, attributes, rowTemplate, cloneNode) {\n return this.refreshRow(row, columns, attributes, rowTemplate, cloneNode);\n };\n /**\n * Function to refresh the row content based on Column[] and data.\n * @param {Column[]} columns\n * @param {Object} data?\n * @param {{[x:string]:Object}} attributes?\n * @param {string} rowTemplate?\n */\n RowRenderer.prototype.refresh = function (row, columns, isChanged, attributes, rowTemplate) {\n if (isChanged) {\n row.data = extend({}, row.changes);\n this.refreshMergeCells(row);\n }\n var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');\n var tr = this.refreshRow(row, columns, attributes, rowTemplate);\n var cells = [].slice.call(tr.cells);\n node.innerHTML = '';\n for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {\n var cell = cells_1[_i];\n node.appendChild(cell);\n }\n };\n RowRenderer.prototype.refreshRow = function (row, columns, attributes, rowTemplate, cloneNode) {\n var tr = !isNullOrUndefined(cloneNode) ? cloneNode : this.element.cloneNode();\n var rowArgs = { data: row.data };\n var cellArgs = { data: row.data };\n var attrCopy = extend({}, attributes, {});\n var chekBoxEnable = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox' && col.field; })[0];\n var value = false;\n if (chekBoxEnable) {\n value = getValue(chekBoxEnable.field, rowArgs.data);\n }\n if (row.isDataRow) {\n row.isSelected = this.parent.getSelectedRowIndexes().indexOf(row.index) > -1 || value;\n }\n if (row.isDataRow && this.parent.isCheckBoxSelection\n && this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {\n row.isSelected = true;\n if (this.parent.getSelectedRowIndexes().indexOf(row.index) === -1) {\n this.parent.getSelectedRowIndexes().push(row.index);\n }\n }\n this.buildAttributeFromRow(tr, row);\n addAttributes(tr, attrCopy);\n setStyleAndAttributes(tr, row.attributes);\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n for (var i = 0, len = row.cells.length; i < len; i++) {\n var cell = row.cells[i];\n cell.isSelected = row.isSelected;\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[i].cellType || CellType.Data);\n var attrs = { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' };\n if (row.isExpand && row.cells[i].cellType === CellType.DetailExpand) {\n attrs['class'] = 'e-detailrowexpand';\n }\n var td = cellRenderer.render(row.cells[i], row.data, attrs);\n if (row.cells[i].cellType !== CellType.Filter) {\n if (row.cells[i].cellType === CellType.Data || row.cells[i].cellType === CellType.CommandColumn) {\n this.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n foreignKeyData: row.cells[i].foreignKeyData\n }));\n if (cellArgs.colSpan > 1 || row.cells[i].cellSpan > 1) {\n var cellMerge = new CellMergeRender(this.serviceLocator, this.parent);\n td = cellMerge.render(cellArgs, row, i, td);\n }\n }\n if (!row.cells[i].isSpanned) {\n tr.appendChild(td);\n }\n }\n }\n var args = { row: tr, rowHeight: this.parent.rowHeight };\n if (row.isDataRow) {\n this.parent.trigger(rowDataBound, extend(rowArgs, args));\n }\n if (this.parent.enableVirtualization) {\n rowArgs.rowHeight = this.parent.rowHeight;\n }\n if (rowArgs.rowHeight) {\n tr.style.height = rowArgs.rowHeight + 'px';\n }\n else if (this.parent.rowHeight) {\n tr.style.height = this.parent.rowHeight + 'px';\n }\n if (row.cssClass) {\n tr.classList.add(row.cssClass);\n }\n return tr;\n };\n RowRenderer.prototype.refreshMergeCells = function (row) {\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n cell.isSpanned = false;\n }\n return row;\n };\n /**\n * Function to check and add alternative row css class.\n * @param {Element} tr\n * @param {{[x:string]:Object}} attr\n */\n RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {\n var attr = {};\n var prop = { 'rowindex': 'aria-rowindex', 'dataUID': 'data-uid', 'ariaSelected': 'aria-selected' };\n var classes = [];\n if (row.isDataRow) {\n classes.push('e-row');\n }\n if (row.isAltRow) {\n classes.push('e-altrow');\n }\n if (!isNullOrUndefined(row.index)) {\n attr[prop.rowindex] = row.index;\n }\n if (row.rowSpan) {\n attr.rowSpan = row.rowSpan;\n }\n if (row.uid) {\n attr[prop.dataUID] = row.uid;\n }\n if (row.isSelected) {\n attr[prop.ariaSelected] = true;\n }\n if (row.visible === false) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(tr, attr);\n };\n return RowRenderer;\n}());\nexport { RowRenderer };\n","import { isNullOrUndefined, getValue, setValue } from '@syncfusion/ej2-base';\nimport { Row } from '../models/row';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\nimport { getUid } from '../base/util';\nimport { getForeignData } from '../../grid/base/util';\n/**\n * RowModelGenerator is used to generate grid data rows.\n * @hidden\n */\nvar RowModelGenerator = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n */\n function RowModelGenerator(parent) {\n this.parent = parent;\n }\n RowModelGenerator.prototype.generateRows = function (data, args) {\n var rows = [];\n var startIndex = this.parent.enableVirtualization ? args.startIndex : 0;\n for (var i = 0, len = Object.keys(data).length; i < len; i++, startIndex++) {\n rows[i] = this.generateRow(data[i], startIndex);\n }\n return rows;\n };\n RowModelGenerator.prototype.ensureColumns = function () {\n //TODO: generate dummy column for group, detail here;\n var cols = [];\n if (this.parent.detailTemplate || this.parent.childGrid) {\n cols.push(this.generateCell({}, null, CellType.DetailExpand));\n }\n return cols;\n };\n RowModelGenerator.prototype.generateRow = function (data, index, cssClass, indent) {\n var options = {};\n options.foreignKeyData = {};\n options.uid = getUid('grid-row');\n options.data = data;\n options.index = index;\n options.indent = indent;\n options.isDataRow = true;\n options.isExpand = false;\n options.cssClass = cssClass;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isSelected = this.parent.getSelectedRowIndexes().indexOf(index) > -1;\n this.refreshForeignKeyRow(options);\n var cells = this.ensureColumns();\n var row = new Row(options);\n row.cells = cells.concat(this.generateCells(options));\n return row;\n };\n RowModelGenerator.prototype.refreshForeignKeyRow = function (options) {\n this.parent.getForeignKeyColumns().forEach(function (col) {\n setValue(col.field, getForeignData(col, options.data), options.foreignKeyData);\n });\n };\n RowModelGenerator.prototype.generateCells = function (options) {\n var _this = this;\n var dummies = this.parent.getColumns();\n var tmp = [];\n dummies.forEach(function (dummy, index) {\n return tmp.push(_this.generateCell(dummy, options.uid, isNullOrUndefined(dummy.commands) ? undefined : CellType.CommandColumn, null, index, options.foreignKeyData));\n });\n return tmp;\n };\n RowModelGenerator.prototype.generateCell = function (column, rowId, cellType, colSpan, oIndex, foreignKeyData) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(column.field || column.template),\n 'isTemplate': !isNullOrUndefined(column.template),\n 'rowID': rowId,\n 'column': column,\n 'cellType': !isNullOrUndefined(cellType) ? cellType : CellType.Data,\n 'colSpan': colSpan,\n 'commands': column.commands,\n 'isForeignKey': column.isForeignColumn && column.isForeignColumn(),\n 'foreignKeyData': column.isForeignColumn && column.isForeignColumn() && getValue(column.field, foreignKeyData)\n };\n if (opt.isDataCell || opt.column.type === 'checkbox') {\n opt.index = this.parent.getColumnIndexByField(column.field);\n }\n return new Cell(opt);\n };\n RowModelGenerator.prototype.refreshRows = function (input) {\n var _this = this;\n input.forEach(function (row) {\n _this.refreshForeignKeyRow(row);\n row.cells = _this.generateCells(row);\n });\n return input;\n };\n return RowModelGenerator;\n}());\nexport { RowModelGenerator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Row } from '../models/row';\nimport { Column } from '../models/column';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { calculateAggregate } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\n/**\n * Summary row model generator\n * @hidden\n */\nvar SummaryModelGenerator = /** @class */ (function () {\n /**\n * Constructor for Summary row model generator\n */\n function SummaryModelGenerator(parent) {\n this.parent = parent;\n }\n SummaryModelGenerator.prototype.getData = function () {\n var _this = this;\n var rows = [];\n this.parent.aggregates.slice().forEach(function (row) {\n var columns = row.columns.filter(function (column) {\n return !(column.footerTemplate || column.groupFooterTemplate || column.groupCaptionTemplate)\n || _this.columnSelector(column);\n });\n if (columns.length) {\n rows.push({ columns: columns });\n }\n });\n return rows;\n };\n SummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.footerTemplate !== undefined;\n };\n SummaryModelGenerator.prototype.getColumns = function (start, end) {\n var columns = [];\n if (this.parent.allowGrouping) {\n this.parent.groupSettings.columns.forEach(function (value) { return columns.push(new Column({})); });\n }\n if (this.parent.detailTemplate) {\n columns.push(new Column({}));\n }\n columns.push.apply(columns, this.parent.getColumns());\n return isNullOrUndefined(start) ? columns : columns.slice(start, end);\n };\n SummaryModelGenerator.prototype.generateRows = function (input, args, start, end) {\n var _this = this;\n if (this.parent.currentViewData.length === 0) {\n return [];\n }\n var data = this.buildSummaryData(input, args);\n var rows = [];\n this.getData().forEach(function (row, index) {\n rows.push(_this.getGeneratedRow(row, data[index], args ? args.level : undefined, start, end));\n });\n return rows;\n };\n SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw, start, end) {\n var _this = this;\n var tmp = [];\n var indents = this.getIndentByLevel(raw);\n var indentLength = this.parent.groupSettings.columns.length + (this.parent.detailTemplate ? 1 : 0);\n this.getColumns(start, end).forEach(function (value, index) { return tmp.push(_this.getGeneratedCell(value, summaryRow, index >= indentLength ? _this.getCellType() : CellType.Indent, indents[index])); });\n var row = new Row({ data: data, attributes: { class: 'e-summaryrow' } });\n row.cells = tmp;\n row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });\n return row;\n };\n SummaryModelGenerator.prototype.getGeneratedCell = function (column, summaryRow, cellType, indent) {\n //Get the summary column by display\n var sColumn = summaryRow.columns.filter(function (scolumn) { return scolumn.columnName === column.field; })[0];\n var attrs = { 'style': { 'textAlign': column.textAlign } };\n if (indent) {\n attrs.class = indent;\n }\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(sColumn),\n 'isTemplate': sColumn && !isNullOrUndefined(sColumn.footerTemplate\n || sColumn.groupFooterTemplate || sColumn.groupCaptionTemplate),\n 'column': sColumn || {},\n 'attributes': attrs,\n 'cellType': cellType\n };\n return new Cell(opt);\n };\n SummaryModelGenerator.prototype.buildSummaryData = function (data, args) {\n var _this = this;\n var dummy = [];\n var summaryRows = this.getData();\n var single = {};\n var key = '';\n summaryRows.forEach(function (row) {\n single = {};\n row.columns.forEach(function (column) {\n single = _this.setTemplate(column, (args && args.aggregates) ? args : data, single);\n });\n dummy.push(single);\n });\n return dummy;\n };\n SummaryModelGenerator.prototype.getIndentByLevel = function (data) {\n return this.parent.groupSettings.columns.map(function () { return 'e-indentcelltop'; });\n };\n SummaryModelGenerator.prototype.setTemplate = function (column, data, single) {\n var _this = this;\n var types = column.type;\n var helper = {};\n var formatFn = column.getFormatter() || (function () { return function (a) { return a; }; })();\n var group = data;\n if (!(types instanceof Array)) {\n types = [column.type];\n }\n types.forEach(function (type) {\n var key = column.field + ' - ' + type.toLowerCase();\n var disp = column.columnName;\n var val = type !== 'Custom' && group.aggregates && key in group.aggregates ? group.aggregates[key] :\n calculateAggregate(type, group.aggregates ? group : data, column, _this.parent);\n single[disp] = single[disp] || {};\n single[disp][key] = val;\n single[disp][type] = !isNullOrUndefined(val) ? formatFn(val) : ' ';\n if (group.field) {\n single[disp].field = group.field;\n single[disp].key = group.key;\n }\n });\n helper.format = column.getFormatter();\n column.setTemplate(helper);\n return single;\n };\n SummaryModelGenerator.prototype.getCellType = function () {\n return CellType.Summary;\n };\n return SummaryModelGenerator;\n}());\nexport { SummaryModelGenerator };\nvar GroupSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(GroupSummaryModelGenerator, _super);\n function GroupSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n GroupSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupFooterTemplate !== undefined;\n };\n GroupSummaryModelGenerator.prototype.getIndentByLevel = function (level) {\n if (level === void 0) { level = this.parent.groupSettings.columns.length; }\n return this.parent.groupSettings.columns.map(function (v, indx) { return indx <= level - 1 ? '' : 'e-indentcelltop'; });\n };\n GroupSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.GroupSummary;\n };\n return GroupSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { GroupSummaryModelGenerator };\nvar CaptionSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(CaptionSummaryModelGenerator, _super);\n function CaptionSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CaptionSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupCaptionTemplate !== undefined;\n };\n CaptionSummaryModelGenerator.prototype.getData = function () {\n var initVal = { columns: [] };\n return [_super.prototype.getData.call(this).reduce(function (prev, cur) {\n prev.columns = prev.columns.concat(cur.columns);\n return prev;\n }, initVal)];\n };\n CaptionSummaryModelGenerator.prototype.isEmpty = function () {\n return (this.getData()[0].columns || []).length === 0;\n };\n CaptionSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.CaptionSummary;\n };\n return CaptionSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { CaptionSummaryModelGenerator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Row } from '../models/row';\nimport { isNullOrUndefined, extend, setValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';\nimport { getForeignData } from '../../grid/base/util';\n/**\n * GroupModelGenerator is used to generate group caption rows and data rows.\n * @hidden\n */\nvar GroupModelGenerator = /** @class */ (function (_super) {\n __extends(GroupModelGenerator, _super);\n function GroupModelGenerator(parent) {\n var _this = _super.call(this, parent) || this;\n _this.rows = [];\n _this.index = 0;\n _this.parent = parent;\n _this.summaryModelGen = new GroupSummaryModelGenerator(parent);\n _this.captionModelGen = new CaptionSummaryModelGenerator(parent);\n return _this;\n }\n GroupModelGenerator.prototype.generateRows = function (data, args) {\n if (this.parent.groupSettings.columns.length === 0) {\n return _super.prototype.generateRows.call(this, data, args);\n }\n this.rows = [];\n this.index = this.parent.enableVirtualization ? (this.parent.pageSettings.currentPage - 1) * data.records.length : 0;\n for (var i = 0, len = data.length; i < len; i++) {\n this.getGroupedRecords(0, data[i], data.level);\n }\n this.index = 0;\n return this.rows;\n };\n GroupModelGenerator.prototype.getGroupedRecords = function (index, data, raw) {\n var level = raw;\n if (isNullOrUndefined(data.items)) {\n if (isNullOrUndefined(data.GroupGuid)) {\n this.rows = this.rows.concat(this.generateDataRows(data, index));\n }\n else {\n for (var j = 0, len = data.length; j < len; j++) {\n this.getGroupedRecords(index, data[j], data.level);\n }\n }\n }\n else {\n this.rows = this.rows.concat(this.generateCaptionRow(data, index));\n if (data.items && data.items.length) {\n this.getGroupedRecords(index + 1, data.items, data.items.level);\n }\n if (this.parent.aggregates.length) {\n (_a = this.rows).push.apply(_a, this.summaryModelGen.generateRows(data, { level: level }));\n }\n }\n var _a;\n };\n GroupModelGenerator.prototype.getCaptionRowCells = function (field, indent, data) {\n var _this = this;\n var cells = [];\n var visibles = [];\n var column = this.parent.getColumnByField(field);\n var indexes = this.parent.getColumnIndexesInView();\n if (this.parent.enableColumnVirtualization) {\n column = this.parent.columns.filter(function (c) { return c.field === field; })[0];\n }\n var groupedLen = this.parent.groupSettings.columns.length;\n var gObj = this.parent;\n if (!this.parent.enableColumnVirtualization || indexes.indexOf(indent) !== -1) {\n for (var i = 0; i < indent; i++) {\n cells.push(this.generateIndentCell());\n }\n cells.push(this.generateCell({}, null, CellType.Expand));\n }\n indent = this.parent.enableColumnVirtualization ? 1 :\n (this.parent.getVisibleColumns().length + groupedLen + (gObj.detailTemplate || gObj.childGrid ? 1 : 0) -\n indent + (this.parent.getVisibleColumns().length ? -1 : 0));\n //Captionsummary cells will be added here. \n if (this.parent.aggregates.length && !this.captionModelGen.isEmpty()) {\n var captionCells = this.captionModelGen.generateRows(data)[0];\n extend(data, captionCells.data);\n var cIndex_1 = 0;\n captionCells.cells.some(function (cell, index) { cIndex_1 = index; return cell.visible && cell.isDataCell; });\n visibles = captionCells.cells.slice(cIndex_1).filter(function (cell) { return cell.visible; });\n if (captionCells.visible && visibles[0].column.field === this.parent.getVisibleColumns()[0].field) {\n visibles = visibles.slice(1);\n }\n if (this.parent.getVisibleColumns().length === 1) {\n visibles = [];\n }\n indent = indent - visibles.length;\n }\n var cols = (!this.parent.enableColumnVirtualization ? [column] : this.parent.getColumns());\n var wFlag = true;\n cols.forEach(function (col, index) {\n var tmpFlag = wFlag && indexes.indexOf(indent) !== -1;\n if (tmpFlag) {\n wFlag = false;\n }\n var cellType = !_this.parent.enableColumnVirtualization || tmpFlag ?\n CellType.GroupCaption : CellType.GroupCaptionEmpty;\n indent = _this.parent.enableColumnVirtualization && cellType === CellType.GroupCaption ? indent + groupedLen : indent;\n cells.push(_this.generateCell(column, null, cellType, indent));\n });\n cells.push.apply(cells, visibles);\n return cells;\n };\n GroupModelGenerator.prototype.generateCaptionRow = function (data, indent) {\n var options = {};\n var tmp = [];\n var col = this.parent.getColumnByField(data.field);\n options.data = extend({}, data);\n if (col) {\n options.data.field = data.field;\n }\n options.isDataRow = false;\n var row = new Row(options);\n row.indent = indent;\n this.getForeignKeyData(row);\n row.cells = this.getCaptionRowCells(data.field, indent, row.data);\n return row;\n };\n GroupModelGenerator.prototype.getForeignKeyData = function (row) {\n var data = row.data;\n var col = this.parent.getColumnByField(data.field);\n if (col && col.isForeignColumn && col.isForeignColumn()) {\n setValue('foreignKey', col.valueAccessor(col.foreignKeyValue, getForeignData(col, {}, data.key)[0], col), row.data);\n }\n };\n GroupModelGenerator.prototype.generateDataRows = function (data, indent) {\n var rows = [];\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = data.length; i < len; i++) {\n rows[i] = this.generateRow(data[i], this.index, i ? undefined : 'e-firstchildrow', indent);\n for (var j = 0; j < indent; j++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(indent) === -1) {\n continue;\n }\n rows[i].cells.unshift(this.generateIndentCell());\n }\n this.index++;\n }\n return rows;\n };\n GroupModelGenerator.prototype.generateIndentCell = function () {\n return this.generateCell({}, null, CellType.Indent);\n };\n GroupModelGenerator.prototype.refreshRows = function (input) {\n var _this = this;\n var indexes = this.parent.getColumnIndexesInView();\n input.forEach(function (row) {\n if (row.isDataRow) {\n row.cells = _this.generateCells(row);\n for (var j = 0; j < row.indent; j++) {\n if (_this.parent.enableColumnVirtualization && indexes.indexOf(row.indent) === -1) {\n continue;\n }\n row.cells.unshift(_this.generateIndentCell());\n }\n }\n else {\n var cRow = _this.generateCaptionRow(row.data, row.indent);\n row.cells = cRow.cells;\n }\n });\n return input;\n };\n return GroupModelGenerator;\n}(RowModelGenerator));\nexport { GroupModelGenerator };\n","import { Droppable } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { createElement, setStyleAttribute, remove } from '@syncfusion/ej2-base';\nimport { getUpdateUsingRaf } from '../base/util';\nimport * as events from '../base/constant';\nimport { RowRenderer } from './row-renderer';\nimport { CellMergeRender } from './cell-merge-renderer';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { GroupModelGenerator } from '../services/group-model-generator';\nimport { getScrollBarWidth } from '../base/util';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar ContentRender = /** @class */ (function () {\n /**\n * Constructor for content renderer module\n */\n function ContentRender(parent, serviceLocator) {\n var _this = this;\n this.rows = [];\n this.freezeRows = [];\n this.movableRows = [];\n this.isLoaded = true;\n this.drop = function (e) {\n _this.parent.notify(events.columnDrop, { target: e.target, droppedElement: e.droppedElement });\n remove(e.droppedElement);\n };\n this.rafCallback = function (args) {\n var arg = args;\n return function () {\n _this.ariaService.setBusy(_this.getPanel().firstChild, false);\n if (_this.parent.isDestroyed) {\n return;\n }\n var rows = _this.rows.slice(0);\n if (_this.parent.getFrozenColumns() !== 0) {\n rows = args.isFrozen ? _this.freezeRows : _this.movableRows;\n }\n _this.parent.notify(events.contentReady, { rows: rows, args: arg });\n if (_this.isLoaded) {\n _this.parent.trigger(events.dataBound, {});\n if (_this.parent.allowTextWrap) {\n _this.parent.notify(events.freezeRender, { case: 'textwrap' });\n }\n }\n if (arg) {\n var action = (arg.requestType || '').toLowerCase() + '-complete';\n _this.parent.notify(action, arg);\n }\n _this.parent.hideSpinner();\n };\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.generator = this.getModelGenerator();\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n this.parent.on(events.colGroupRefresh, this.colGroupRefresh, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n }\n /**\n * The function is used to render grid content div\n */\n ContentRender.prototype.renderPanel = function () {\n var gObj = this.parent;\n var div = createElement('div', { className: 'e-gridcontent' });\n var innerDiv = createElement('div', {\n className: 'e-content'\n });\n this.ariaService.setOptions(innerDiv, { busy: false });\n div.appendChild(innerDiv);\n this.setPanel(div);\n gObj.element.appendChild(div);\n };\n /**\n * The function is used to render grid content table\n */\n ContentRender.prototype.renderTable = function () {\n var contentDiv = this.getPanel();\n contentDiv.appendChild(this.createContentTable('_content_table'));\n this.setTable(contentDiv.querySelector('.e-table'));\n this.ariaService.setOptions(this.getTable(), {\n multiselectable: this.parent.selectionSettings.type === 'Multiple'\n });\n if (this.parent.allowRowDragAndDrop) {\n this.initializeContentDrop();\n }\n if (this.parent.frozenRows) {\n this.parent.getHeaderContent().classList.add('e-frozenhdrcont');\n }\n };\n /**\n * The function is used to create content table elements\n * @return {Element}\n * @hidden\n */\n ContentRender.prototype.createContentTable = function (id) {\n var innerDiv = this.getPanel().firstChild;\n var table = createElement('table', {\n className: 'e-table', attrs: {\n cellspacing: '0.25px', role: 'grid',\n id: this.parent.element.id + id\n }\n });\n this.setColGroup(this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true));\n table.appendChild(this.getColGroup());\n table.appendChild(createElement('tbody'));\n innerDiv.appendChild(table);\n return innerDiv;\n };\n ContentRender.prototype.splitRows = function (idx) {\n if (this.parent.getFrozenColumns()) {\n if (idx === 0) {\n this.freezeRows = this.rows;\n this.freezeRowElements = this.rowElements;\n }\n else {\n this.movableRows = this.rows;\n }\n }\n };\n /**\n * Refresh the content of the Grid.\n * @return {void}\n */\n ContentRender.prototype.refreshContentRows = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n var gObj = this.parent;\n if (gObj.currentViewData.length === 0) {\n return;\n }\n var dataSource = gObj.currentViewData;\n var frag = document.createDocumentFragment();\n var hdrfrag = document.createDocumentFragment();\n var columns = gObj.getColumns();\n var tr;\n var hdrTbody;\n var frzCols = gObj.getFrozenColumns();\n var row = new RowRenderer(this.serviceLocator, null, this.parent);\n this.rowElements = [];\n this.rows = [];\n var modelData = this.generator.generateRows(dataSource, args);\n var idx = modelData[0].cells[0].index;\n var fCont = this.getPanel().querySelector('.e-frozencontent');\n var mCont = this.getPanel().querySelector('.e-movablecontent');\n var cont = this.getPanel().querySelector('.e-content');\n if (this.parent.enableColumnVirtualization) {\n var cellMerge = new CellMergeRender(this.serviceLocator, this.parent);\n cellMerge.updateVirtualCells(modelData);\n }\n if (frzCols && idx >= frzCols) {\n this.tbody = mCont.querySelector('tbody');\n }\n else {\n this.tbody = this.getTable().querySelector('tbody');\n }\n for (var i = 0, len = modelData.length; i < len; i++) {\n if (!gObj.rowTemplate) {\n tr = row.render(modelData[i], columns);\n }\n else {\n var elements = gObj.getRowTemplate()(extend({ index: i }, dataSource[i]), gObj, 'rowTemplate');\n for (var j = 0; j < elements.length; j++) {\n var isTR = elements[j].nodeName.toLowerCase() === 'tr';\n if (isTR || (elements[j].querySelectorAll && elements[j].querySelectorAll('tr').length)) {\n tr = isTR ? elements[j] : elements[j].querySelector('tr');\n }\n }\n }\n if (gObj.frozenRows && i < gObj.frozenRows) {\n hdrfrag.appendChild(tr);\n }\n else {\n frag.appendChild(tr);\n }\n this.rows.push(modelData[i]);\n if (modelData[i].isDataRow) {\n //detailrowvisible \n var td = tr.querySelectorAll('.e-rowcell:not(.e-hide)')[0];\n if (td) {\n td.classList.add('e-detailrowvisible');\n }\n this.rowElements.push(tr);\n }\n this.ariaService.setOptions(this.getTable(), { colcount: gObj.getColumns().length.toString() });\n }\n this.splitRows(idx);\n if (gObj.frozenRows) {\n hdrTbody = frzCols ? gObj.getHeaderContent().querySelector(idx === 0 ? '.e-frozenheader'\n : '.e-movableheader').querySelector('tbody') : gObj.getHeaderTable().querySelector('tbody');\n hdrTbody.innerHTML = '';\n hdrTbody.appendChild(hdrfrag);\n }\n if (gObj.frozenRows && idx === 0 && cont.offsetHeight === Number(gObj.height)) {\n cont.style.height = (cont.offsetHeight - hdrTbody.offsetHeight) + 'px';\n }\n if (frzCols && idx === 0) {\n this.getPanel().firstChild.style.overflowY = 'hidden';\n }\n args.rows = this.rows.slice(0);\n args.isFrozen = this.parent.getFrozenColumns() !== 0 && !args.isFrozen;\n getUpdateUsingRaf(function () {\n remove(_this.tbody);\n _this.tbody = createElement('tbody');\n if (frzCols) {\n _this.tbody.appendChild(frag);\n if (idx === 0) {\n _this.isLoaded = false;\n fCont.querySelector('table').appendChild(_this.tbody);\n }\n else {\n if (_this.tbody.childElementCount < 1) {\n _this.tbody.appendChild(createElement('tr').appendChild(createElement('td')));\n }\n _this.isLoaded = true;\n mCont.querySelector('table').appendChild(_this.tbody);\n fCont.style.height = ((mCont.offsetHeight) - getScrollBarWidth()) + 'px';\n mCont.style.overflowY = _this.parent.height !== 'auto' ? 'scroll' : 'auto';\n fCont.style.borderRightWidth = '1px';\n }\n }\n else {\n _this.appendContent(_this.tbody, frag, args);\n }\n if (frzCols && idx === 0) {\n _this.refreshContentRows(extend({}, args));\n }\n }, this.rafCallback(extend({}, args)));\n };\n ContentRender.prototype.appendContent = function (tbody, frag, args) {\n tbody.appendChild(frag);\n this.getTable().appendChild(tbody);\n };\n /**\n * Get the content div element of grid\n * @return {Element}\n */\n ContentRender.prototype.getPanel = function () {\n return this.contentPanel;\n };\n /**\n * Set the content div element of grid\n * @param {Element} panel\n */\n ContentRender.prototype.setPanel = function (panel) {\n this.contentPanel = panel;\n };\n /**\n * Get the content table element of grid\n * @return {Element}\n */\n ContentRender.prototype.getTable = function () {\n return this.contentTable;\n };\n /**\n * Set the content table element of grid\n * @param {Element} table\n */\n ContentRender.prototype.setTable = function (table) {\n this.contentTable = table;\n };\n /**\n * Get the Row collection in the Grid.\n * @returns {Row[] | HTMLCollectionOf}\n */\n ContentRender.prototype.getRows = function () {\n return this.parent.getFrozenColumns() ? this.freezeRows : this.rows;\n };\n /**\n * Get the Movable Row collection in the Freeze pane Grid.\n * @returns {Row[] | HTMLCollectionOf}\n */\n ContentRender.prototype.getMovableRows = function () {\n return this.movableRows;\n };\n /**\n * Get the content table data row elements\n * @return {Element}\n */\n ContentRender.prototype.getRowElements = function () {\n return this.parent.getFrozenColumns() ? this.freezeRowElements : this.rowElements;\n };\n /**\n * Get the Freeze pane movable content table data row elements\n * @return {Element}\n */\n ContentRender.prototype.getMovableRowElements = function () {\n return this.rowElements;\n };\n /**\n * Get the content table data row elements\n * @return {Element}\n */\n ContentRender.prototype.setRowElements = function (elements) {\n this.rowElements = elements;\n };\n /**\n * Get the header colgroup element\n * @returns {Element}\n */\n ContentRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n * @param {Element} colgroup\n * @returns {Element}\n */\n ContentRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Function to hide content table column based on visible property\n * @param {Column[]} columns?\n */\n ContentRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var frzCols = gObj.getFrozenColumns();\n var rows = [];\n if (frzCols) {\n var fRows = this.freezeRows;\n var mRows = this.movableRows;\n var rowLen = fRows.length;\n var cellLen = void 0;\n for (var i = 0, row = void 0; i < rowLen; i++) {\n cellLen = mRows[i].cells.length;\n row = fRows[i].clone();\n for (var j = 0; j < cellLen; j++) {\n row.cells.push(mRows[i].cells[j]);\n }\n rows.push(row);\n }\n }\n else {\n rows = this.getRows();\n }\n var element;\n var testRow;\n rows.some(function (r) { if (r.isDataRow) {\n testRow = r;\n } return r.isDataRow; });\n var tasks = [];\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[c];\n var idx = this.parent.getNormalizedColumnIndex(column.uid);\n //used canSkip method to skip unwanted visible toggle operation. \n if (this.canSkip(column, testRow, idx)) {\n continue;\n }\n var displayVal = column.visible === true ? '' : 'none';\n if (frzCols) {\n if (idx < frzCols) {\n setStyleAttribute(this.getColGroup().childNodes[idx], { 'display': displayVal });\n }\n else {\n var mTable = gObj.getContent().querySelector('.e-movablecontent').querySelector('colgroup');\n setStyleAttribute(mTable.childNodes[idx - frzCols], { 'display': displayVal });\n }\n }\n else {\n setStyleAttribute(this.getColGroup().childNodes[idx], { 'display': displayVal });\n }\n }\n this.refreshContentRows({ requestType: 'refresh' });\n };\n ContentRender.prototype.colGroupRefresh = function () {\n if (this.getColGroup()) {\n var colGroup = this.parent.element.querySelector('.e-gridheader').querySelector('colgroup').cloneNode(true);\n this.getTable().replaceChild(colGroup, this.getColGroup());\n this.setColGroup(colGroup);\n }\n };\n ContentRender.prototype.initializeContentDrop = function () {\n var gObj = this.parent;\n var drop = new Droppable(gObj.getContent(), {\n accept: '.e-dragclone',\n drop: this.drop\n });\n };\n ContentRender.prototype.canSkip = function (column, row, index) {\n /**\n * Skip the toggle visiblity operation when one of the following success\n * 1. Grid has empty records\n * 2. column visible property is unchanged\n * 3. cell`s isVisible property is same as column`s visible property.\n */\n return isNullOrUndefined(row) || //(1)\n isNullOrUndefined(column.visible) || //(2) \n row.cells[index].visible === column.visible; //(3)\n };\n ContentRender.prototype.getModelGenerator = function () {\n return this.generator = this.parent.allowGrouping ? new GroupModelGenerator(this.parent) : new RowModelGenerator(this.parent);\n };\n ContentRender.prototype.renderEmpty = function (tbody) {\n this.getTable().appendChild(tbody);\n if (this.parent.frozenRows) {\n this.parent.getHeaderContent().querySelector('tbody').innerHTML = '';\n }\n };\n ContentRender.prototype.setSelection = function (uid, set, clearAll) {\n if (this.parent.getFrozenColumns()) {\n this.getMovableRows().filter(function (row) { return clearAll || uid === row.uid; }).forEach(function (row) { return row.isSelected = set; });\n }\n this.getRows().filter(function (row) { return clearAll || uid === row.uid; })\n .forEach(function (row) {\n row.isSelected = set;\n row.cells.forEach(function (cell) { return cell.isSelected = set; });\n });\n };\n ContentRender.prototype.getRowByIndex = function (index) {\n return this.parent.getDataRows()[index];\n };\n ContentRender.prototype.getVirtualRowIndex = function (index) {\n return index;\n };\n ContentRender.prototype.getMovableRowByIndex = function (index) {\n return this.parent.getMovableDataRows()[index];\n };\n ContentRender.prototype.enableAfterRender = function (e) {\n if (e.module === 'group' && e.enable) {\n this.generator = this.getModelGenerator();\n }\n };\n return ContentRender;\n}());\nexport { ContentRender };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { createElement, setStyleAttribute, closest as getClosest, remove } from '@syncfusion/ej2-base';\nimport { classList } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowRenderer } from './row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport * as events from '../base/constant';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { parentsUntil, wrap } from '../base/util';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar HeaderRender = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n */\n function HeaderRender(parent, serviceLocator) {\n var _this = this;\n this.frzIdx = 0;\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = e.sender.target;\n var parentEle = parentsUntil(target, 'e-headercell');\n if (!(gObj.allowReordering || gObj.allowGrouping) || (!isNullOrUndefined(parentEle)\n && parentEle.querySelectorAll('.e-checkselectall').length > 0)) {\n return false;\n }\n var visualElement = createElement('div', { className: 'e-cloneproperties e-dragclone e-headerclone' });\n var element = target.classList.contains('e-headercell') ? target : parentEle;\n if (!element || (!gObj.allowReordering && element.classList.contains('e-stackedheadercell'))) {\n return false;\n }\n var height = element.offsetHeight;\n var headercelldiv = element.querySelector('.e-headercelldiv');\n var col;\n if (headercelldiv) {\n col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));\n _this.column = col;\n visualElement.setAttribute('e-mappinguid', _this.column.uid);\n }\n if (col && !isNullOrUndefined(col.headerTemplate)) {\n if (col.headerTemplate.indexOf('#') !== -1) {\n visualElement.innerHTML = document.querySelector(col.headerTemplate).innerHTML.trim();\n }\n else {\n visualElement.innerHTML = col.headerTemplate;\n }\n }\n else {\n visualElement.textContent = headercelldiv ?\n col.headerText : element.firstElementChild.innerHTML;\n }\n visualElement.style.width = element.offsetWidth + 'px';\n visualElement.style.height = element.offsetHeight + 'px';\n visualElement.style.lineHeight = (height - 6).toString() + 'px';\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n gObj.notify(events.columnDragStart, { target: e.target, column: _this.column, event: e.event });\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n var target = e.target;\n if (target) {\n var closest = getClosest(target, '.e-grid');\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (!closest || closest.getAttribute('id') !== gObj.element.getAttribute('id')) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n if (gObj.allowReordering) {\n gObj.element.querySelector('.e-reorderuparrow').style.display = 'none';\n gObj.element.querySelector('.e-reorderdownarrow').style.display = 'none';\n }\n return;\n }\n gObj.notify(events.columnDrag, { target: e.target, column: _this.column, event: e.event });\n }\n };\n this.dragStop = function (e) {\n var gObj = _this.parent;\n var cancel;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n if ((!parentsUntil(e.target, 'e-headercell') && !parentsUntil(e.target, 'e-groupdroparea')) ||\n (!gObj.allowReordering && parentsUntil(e.target, 'e-headercell')) ||\n (!e.helper.getAttribute('e-mappinguid') && parentsUntil(e.target, 'e-groupdroparea'))) {\n remove(e.helper);\n cancel = true;\n }\n gObj.notify(events.columnDragStop, { target: e.target, event: e.event, column: _this.column, cancel: cancel });\n };\n this.drop = function (e) {\n var gObj = _this.parent;\n var uid = e.droppedElement.getAttribute('e-mappinguid');\n var closest = getClosest(e.target, '.e-grid');\n remove(e.droppedElement);\n if (closest && closest.getAttribute('id') !== gObj.element.getAttribute('id') ||\n !(gObj.allowReordering || gObj.allowGrouping)) {\n return;\n }\n gObj.notify(events.headerDrop, { target: e.target, uid: uid });\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.widthService = this.serviceLocator.getService('widthService');\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n this.parent.on(events.columnPositionChanged, this.colPosRefresh, this);\n }\n /**\n * The function is used to render grid header div\n */\n HeaderRender.prototype.renderPanel = function () {\n var div = createElement('div', { className: 'e-gridheader' });\n var innerDiv = createElement('div', { className: 'e-headercontent' });\n div.appendChild(innerDiv);\n this.setPanel(div);\n this.parent.element.appendChild(div);\n };\n /**\n * The function is used to render grid header table\n */\n HeaderRender.prototype.renderTable = function () {\n var headerDiv = this.getPanel();\n headerDiv.appendChild(this.createHeaderTable());\n this.setTable(headerDiv.querySelector('.e-table'));\n if (!this.parent.getFrozenColumns()) {\n this.initializeHeaderDrag();\n this.initializeHeaderDrop();\n }\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: this.parent.getFrozenColumns() !== 0 } });\n };\n /**\n * Get the header content div element of grid\n * @return {Element}\n */\n HeaderRender.prototype.getPanel = function () {\n return this.headerPanel;\n };\n /**\n * Set the header content div element of grid\n * @param {Element} panel\n */\n HeaderRender.prototype.setPanel = function (panel) {\n this.headerPanel = panel;\n };\n /**\n * Get the header table element of grid\n * @return {Element}\n */\n HeaderRender.prototype.getTable = function () {\n return this.headerTable;\n };\n /**\n * Set the header table element of grid\n * @param {Element} table\n */\n HeaderRender.prototype.setTable = function (table) {\n this.headerTable = table;\n };\n /**\n * Get the header colgroup element\n * @returns {Element}\n */\n HeaderRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n * @param {Element} colgroup\n * @returns {Element}\n */\n HeaderRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Get the header row element collection.\n * @return {Element[]}\n */\n HeaderRender.prototype.getRows = function () {\n var table = this.getTable();\n return table.tHead.rows;\n };\n /**\n * The function is used to create header table elements\n * @return {Element}\n * @hidden\n */\n HeaderRender.prototype.createHeaderTable = function () {\n var table = this.createTable();\n var innerDiv = this.getPanel().firstChild;\n innerDiv.appendChild(table);\n return innerDiv;\n };\n /**\n * @hidden\n */\n HeaderRender.prototype.createTable = function () {\n var gObj = this.parent;\n var columns = gObj.getColumns();\n var table = createElement('table', { className: 'e-table', attrs: { cellspacing: '0.25px', role: 'grid' } });\n var innerDiv = this.getPanel().firstChild;\n var findHeaderRow = this.createHeaderContent();\n var thead = findHeaderRow.thead;\n var tbody = createElement('tbody', { className: this.parent.frozenRows ? '' : 'e-hide' });\n this.caption = createElement('caption', { innerHTML: this.parent.element.id + '_header_table', className: 'e-hide' });\n var colGroup = createElement('colgroup');\n var rowBody = createElement('tr');\n var bodyCell;\n var rows = this.rows = findHeaderRow.rows;\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header);\n for (var i = 0, len = rows.length; i < len; i++) {\n for (var j = 0, len_1 = rows[i].cells.length; j < len_1; j++) {\n var cell = rows[i].cells[j];\n bodyCell = createElement('td');\n rowBody.appendChild(bodyCell);\n }\n }\n if (gObj.allowFiltering || gObj.allowSorting || gObj.allowGrouping) {\n table.classList.add('e-sortfilter');\n }\n this.updateColGroup(colGroup);\n tbody.appendChild(rowBody);\n table.appendChild(this.setColGroup(colGroup));\n table.appendChild(thead);\n table.appendChild(tbody);\n table.appendChild(this.caption);\n this.ariaService.setOptions(table, { colcount: gObj.getColumns().length.toString() });\n return table;\n };\n HeaderRender.prototype.createHeaderContent = function () {\n var gObj = this.parent;\n var columns = gObj.getColumns();\n var thead = createElement('thead');\n var colHeader = createElement('tr', { className: 'e-columnheader' });\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, gObj);\n rowRenderer.element = colHeader;\n var rows = [];\n var headerRow;\n this.colDepth = this.getObjDepth();\n for (var i = 0, len = this.colDepth; i < len; i++) {\n rows[i] = this.generateRow(i);\n rows[i].cells = [];\n }\n rows = this.ensureColumns(rows);\n rows = this.getHeaderCells(rows);\n for (var i = 0, len = this.colDepth; i < len; i++) {\n headerRow = rowRenderer.render(rows[i], columns);\n if (this.parent.rowHeight) {\n headerRow.style.height = this.parent.rowHeight + 'px';\n }\n thead.appendChild(headerRow);\n }\n var findHeaderRow = {\n thead: thead,\n rows: rows\n };\n return findHeaderRow;\n };\n HeaderRender.prototype.updateColGroup = function (colGroup) {\n var cols = this.parent.getColumns();\n var col;\n var indexes = this.parent.getColumnIndexesInView();\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n continue;\n }\n col = createElement('col');\n colGroup.appendChild(col);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n col = createElement('col');\n colGroup.appendChild(col);\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n col = createElement('col');\n if (cols[i].visible === false) {\n setStyleAttribute(col, { 'display': 'none' });\n }\n colGroup.appendChild(col);\n }\n return colGroup;\n };\n HeaderRender.prototype.ensureColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gObj = this.parent;\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gObj.allowGrouping) {\n for (var c = 0, len_2 = gObj.groupSettings.columns.length; c < len_2; c++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(c) === -1) {\n continue;\n }\n rows[i].cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (gObj.detailTemplate || gObj.childGrid) {\n rows[i].cells.push(this.generateCell({}, CellType.DetailHeader));\n }\n }\n return rows;\n };\n HeaderRender.prototype.getHeaderCells = function (rows) {\n var column;\n var thead = this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead');\n var cols = this.parent.enableColumnVirtualization ? this.parent.getColumns() : this.parent.columns;\n this.frzIdx = 0;\n for (var i = 0, len = cols.length; i < len; i++) {\n rows = this.appendCells(cols[i], rows, 0, i === 0, false, i === (len - 1), thead);\n }\n return rows;\n };\n HeaderRender.prototype.appendCells = function (cols, rows, index, isFirstObj, isFirstCol, isLastCol, isMovable) {\n var lastCol = isLastCol ? 'e-lastcell' : '';\n var frzCols = this.parent.getFrozenColumns();\n if (!cols.columns) {\n if (!frzCols || (frzCols\n && ((!isMovable && (this.frzIdx < this.parent.frozenColumns || cols.isFrozen))\n || (isMovable && this.frzIdx >= this.parent.frozenColumns && !cols.isFrozen)))) {\n rows[index].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n this.frzIdx++;\n }\n else {\n var colSpan = this.getCellCnt(cols, 0);\n if (colSpan) {\n var frzObj = this.refreshFrozenHdr(cols.columns, { isPartial: false, isComp: true, cnt: 0 });\n if (!frzCols || (frzCols\n && ((!isMovable && (this.parent.frozenColumns - this.frzIdx > 0 || (frzObj.isPartial)))\n || (isMovable && (colSpan + this.frzIdx > this.parent.frozenColumns && !frzObj.isComp))))) {\n rows[index].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols,\n colSpan: this.getColSpan(colSpan, isMovable, frzObj.cnt)\n }));\n }\n }\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n rows = this.appendCells(cols.columns[i], rows, index + 1, isFirstObj, i === 0, i === (len - 1) && isLastCol, isMovable);\n }\n }\n return rows;\n };\n HeaderRender.prototype.refreshFrozenHdr = function (cols, frzObj) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].columns) {\n frzObj = this.refreshFrozenHdr(cols[i].columns, frzObj);\n }\n else {\n if (cols[i].isFrozen) {\n frzObj.isPartial = true;\n frzObj.cnt++;\n }\n frzObj.isComp = frzObj.isComp && (cols[i].isFrozen ||\n this.parent.getColumnIndexByField(cols[i].field) < this.parent.frozenColumns);\n }\n }\n return frzObj;\n };\n HeaderRender.prototype.getColSpan = function (colSpan, isMovable, frozenCnt) {\n var frzCol = this.parent.frozenColumns;\n if (this.parent.getFrozenColumns() && this.frzIdx + colSpan > frzCol) {\n if (isMovable) {\n colSpan = colSpan - (frzCol > this.frzIdx ? frzCol - this.frzIdx : 0) - frozenCnt;\n }\n else {\n colSpan = colSpan - (colSpan - (frzCol > this.frzIdx ? frzCol + frozenCnt - this.frzIdx : frozenCnt));\n }\n }\n return colSpan;\n };\n HeaderRender.prototype.generateRow = function (index) {\n return new Row({});\n };\n HeaderRender.prototype.generateCell = function (column, cellType, rowSpan, className, rowIndex, colIndex) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'isTemplate': !isNullOrUndefined(column.headerTemplate),\n 'rowID': '',\n 'column': column,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'className': className,\n 'index': rowIndex,\n 'colIndex': colIndex\n };\n if (!opt.rowSpan || opt.rowSpan < 2) {\n delete opt.rowSpan;\n }\n return new Cell(opt);\n };\n /**\n * Function to hide header table column based on visible property\n * @param {Column[]} columns?\n */\n HeaderRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var rows = [].slice.call(this.getRows()); //NodeList -> Array \n var displayVal = '';\n var idx;\n var className;\n var element;\n var frzCols = gObj.getFrozenColumns();\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[c];\n idx = gObj.getNormalizedColumnIndex(column.uid);\n if (column.visible === false) {\n displayVal = 'none';\n }\n if (frzCols) {\n if (idx < frzCols) {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n else {\n var mTblColGrp = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('colgroup');\n setStyleAttribute(mTblColGrp.children[idx - frzCols], { 'display': displayVal });\n }\n }\n else {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n this.refreshUI();\n }\n };\n HeaderRender.prototype.colPosRefresh = function () {\n this.refreshUI();\n };\n /**\n * Refresh the header of the Grid.\n * @returns {void}\n */\n HeaderRender.prototype.refreshUI = function () {\n var headerDiv = this.getPanel();\n var table = this.getTable();\n var frzCols = this.parent.getFrozenColumns();\n remove(this.getTable());\n table.removeChild(table.firstChild);\n table.removeChild(table.childNodes[0]);\n var colGroup = createElement('colgroup');\n var findHeaderRow = this.createHeaderContent();\n this.rows = findHeaderRow.rows;\n table.insertBefore(findHeaderRow.thead, table.firstChild);\n this.updateColGroup(colGroup);\n table.insertBefore(this.setColGroup(colGroup), table.firstChild);\n this.setTable(table);\n this.appendContent(table);\n this.parent.notify(events.colGroupRefresh, {});\n this.widthService.setWidthToColumns();\n this.parent.updateDefaultCursor();\n if (!frzCols) {\n this.initializeHeaderDrag();\n }\n var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n var gCells = [].slice.call(row.querySelectorAll('.e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n }\n if (!frzCols) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: this.parent.getFrozenColumns() !== 0 } });\n }\n if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {\n wrap(rows, true);\n }\n };\n HeaderRender.prototype.appendContent = function (table) {\n this.getPanel().firstChild.appendChild(table);\n };\n HeaderRender.prototype.getObjDepth = function () {\n var max = 0;\n var cols = this.parent.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n var depth = this.checkDepth(cols[i], 0);\n if (max < depth) {\n max = depth;\n }\n }\n return max + 1;\n };\n HeaderRender.prototype.checkDepth = function (col, index) {\n if (col.columns) {\n index++;\n for (var i = 0, len = col.columns.length; i < len; i++) {\n index = this.checkDepth(col.columns[i], index);\n }\n }\n return index;\n };\n HeaderRender.prototype.getCellCnt = function (col, cnt) {\n if (col.columns) {\n for (var i = 0, len = col.columns.length; i < len; i++) {\n cnt = this.getCellCnt(col.columns[i], cnt);\n }\n }\n else {\n if (col.visible) {\n cnt++;\n }\n }\n return cnt;\n };\n HeaderRender.prototype.initializeHeaderDrag = function () {\n var gObj = this.parent;\n if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {\n return;\n }\n var headerRows = [].slice.call(gObj.getHeaderContent().querySelectorAll('.e-columnheader'));\n for (var i = 0, len = headerRows.length; i < len; i++) {\n var drag = new Draggable(headerRows[i], {\n dragTarget: '.e-headercell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n abort: '.e-rhandler'\n });\n }\n };\n HeaderRender.prototype.initializeHeaderDrop = function () {\n var gObj = this.parent;\n var drop = new Droppable(gObj.getHeaderContent(), {\n accept: '.e-dragclone',\n drop: this.drop\n });\n };\n return HeaderRender;\n}());\nexport { HeaderRender };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { createElement } from '@syncfusion/ej2-base';\nimport { doesImplementInterface, setStyleAndAttributes, appendChildren } from '../base/util';\nimport { CheckBox, createCheckBox } from '@syncfusion/ej2-buttons';\nimport { foreignKeyData } from '../base/constant';\n/**\n * CellRenderer class which responsible for building cell content.\n * @hidden\n */\nvar CellRenderer = /** @class */ (function () {\n function CellRenderer(parent, locator) {\n this.localizer = locator.getService('localization');\n this.formatter = locator.getService('valueFormatter');\n this.parent = parent;\n }\n /**\n * Function to return the wrapper for the TD content\n * @returns string\n */\n CellRenderer.prototype.getGui = function () {\n return '';\n };\n /**\n * Function to format the cell value.\n * @param {Column} column\n * @param {Object} value\n * @param {Object} data\n */\n CellRenderer.prototype.format = function (column, value, data) {\n if (!isNullOrUndefined(column.format)) {\n value = this.formatter.toView(value, column.getFormatter());\n }\n return isNullOrUndefined(value) ? '' : value.toString();\n };\n CellRenderer.prototype.evaluate = function (node, cell, data, attributes, fData) {\n var result;\n if (cell.column.template) {\n var literals = ['index'];\n var dummyData = extend({}, data, (_a = {}, _a[foreignKeyData] = fData, _a));\n result = cell.column.getColumnTemplate()(extend({ 'index': attributes[literals[0]] }, dummyData), this.parent, 'template');\n appendChildren(node, result);\n node.setAttribute('aria-label', node.innerText + ' is template cell' + ' column header ' +\n cell.column.headerText);\n return false;\n }\n return true;\n var _a;\n };\n /**\n * Function to invoke the custom formatter available in the column object.\n * @param {Column} column\n * @param {Object} value\n * @param {Object} data\n */\n CellRenderer.prototype.invokeFormatter = function (column, value, data) {\n if (!isNullOrUndefined(column.formatter)) {\n if (doesImplementInterface(column.formatter, 'getValue')) {\n var formatter = column.formatter;\n value = new formatter().getValue(column, data);\n }\n else if (typeof column.formatter === 'function') {\n value = column.formatter(column, data);\n }\n else {\n value = column.formatter.getValue(column, data);\n }\n }\n return value;\n };\n /**\n * Function to render the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {{[x:string]:Object}} attributes?\n * @param {Element}\n */\n CellRenderer.prototype.render = function (cell, data, attributes) {\n return this.refreshCell(cell, data, attributes);\n };\n /**\n * Function to refresh the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {{[x:string]:Object}} attributes?\n * @param {Element}\n */\n CellRenderer.prototype.refreshTD = function (td, cell, data, attributes) {\n var node = this.refreshCell(cell, data, attributes);\n td.innerHTML = '';\n var elements = [].slice.call(node.childNodes);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var elem = elements_1[_i];\n td.appendChild(elem);\n }\n };\n CellRenderer.prototype.refreshCell = function (cell, data, attributes) {\n var node = createElement('TD', { className: 'e-rowcell', attrs: { role: 'gridcell', tabindex: '-1' } });\n var column = cell.column;\n var fData;\n if (cell.isForeignKey) {\n fData = cell.foreignKeyData[0] || (_a = {}, _a[column.foreignKeyValue] = column.format ? null : '', _a);\n }\n //Prepare innerHtml\n var innerHtml = this.getGui();\n var value = cell.isForeignKey ? this.getValue(column.foreignKeyValue, fData, column) :\n this.getValue(column.field, data, column);\n if (column.type === 'date' && !isNullOrUndefined(value)) {\n value = new Date(value);\n }\n value = this.format(column, value, data);\n innerHtml = value.toString();\n if (column.type === 'boolean') {\n if (column.displayAsCheckBox) {\n node.classList.add('e-checkbox');\n innerHtml = ' ';\n }\n else {\n var localeStr = (value !== 'true' && value !== 'false') ? null : value === 'true' ? 'True' : 'False';\n innerHtml = localeStr ? this.localizer.getConstant(localeStr) : innerHtml;\n }\n }\n var fromFormatter = this.invokeFormatter(column, value, data);\n innerHtml = !isNullOrUndefined(column.formatter) ? isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;\n node.setAttribute('aria-label', (innerHtml === '' ? 'empty' : innerHtml) + ' column header ' + cell.column.headerText);\n if (!isNullOrUndefined(cell.column.headerText)) {\n node.setAttribute('aria-label', innerHtml + ' column header ' + cell.column.headerText);\n }\n if (this.evaluate(node, cell, data, attributes, fData) && column.type !== 'checkbox') {\n this.appendHtml(node, innerHtml, column.getDomSetter ? column.getDomSetter() : 'innerHTML');\n }\n else if (column.type === 'checkbox') {\n node.classList.add('e-gridchkbox');\n node.setAttribute('aria-label', 'checkbox');\n if (this.parent.selectionSettings.persistSelection) {\n value = value === 'true';\n }\n else {\n value = false;\n }\n var checkWrap = createCheckBox(false, { checked: value, label: ' ' });\n checkWrap.insertBefore(createElement('input', { className: 'e-checkselect', attrs: { 'type': 'checkbox' } }), checkWrap.firstChild);\n node.appendChild(checkWrap);\n }\n if (this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {\n cell.isSelected = true;\n }\n this.setAttributes(node, cell, attributes);\n if (column.type === 'boolean') {\n var obj = new CheckBox({\n disabled: true,\n checked: isNaN(parseInt(value, 10)) ? value === 'true' : parseInt(value, 10) > 0\n });\n obj.appendTo(node.firstElementChild);\n node.setAttribute('aria-label', obj.checked + ' column header ' + cell.column.headerText);\n }\n return node;\n var _a;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n * @param {Element} node\n * @param {string|Element} innerHtml\n * @returns Element\n */\n CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {\n if (property === void 0) { property = 'innerHTML'; }\n node[property] = innerHtml;\n return node;\n };\n /**\n * @hidden\n */\n CellRenderer.prototype.setAttributes = function (node, cell, attributes) {\n var column = cell.column;\n this.buildAttributeFromCell(node, cell, column.type === 'checkbox');\n setStyleAndAttributes(node, attributes);\n setStyleAndAttributes(node, cell.attributes);\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (column.textAlign) {\n node.style.textAlign = column.textAlign;\n }\n if (column.clipMode === 'Clip') {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip') {\n node.classList.add('e-ellipsistooltip');\n }\n };\n CellRenderer.prototype.buildAttributeFromCell = function (node, cell, isCheckBoxType) {\n var attr = {};\n var prop = { 'colindex': 'aria-colindex' };\n var classes = [];\n if (cell.colSpan) {\n attr.colSpan = cell.colSpan;\n }\n if (cell.rowSpan) {\n attr.rowSpan = cell.rowSpan;\n }\n if (cell.isTemplate) {\n classes.push('e-templatecell');\n }\n if (cell.isSelected) {\n classes.push.apply(classes, ['e-selectionbackground', 'e-active']);\n if (isCheckBoxType) {\n node.querySelector('.e-frame').classList.add('e-check');\n }\n }\n if (!isNullOrUndefined(cell.index)) {\n attr[prop.colindex] = cell.index;\n }\n if (!cell.visible) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(node, attr);\n };\n CellRenderer.prototype.getValue = function (field, data, column) {\n return column.valueAccessor(field, data, column);\n };\n return CellRenderer;\n}());\nexport { CellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { createElement, attributes } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes, appendChildren } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\nimport { AriaService } from '../services/aria-service';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\n/**\n * HeaderCellRenderer class which responsible for building header cell content.\n * @hidden\n */\nvar HeaderCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderCellRenderer, _super);\n function HeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TH', { className: 'e-headercell', attrs: { role: 'columnheader', tabindex: '-1' } });\n _this.ariaService = new AriaService();\n _this.hTxtEle = createElement('span', { className: 'e-headertext' });\n _this.sortEle = createElement('div', { className: 'e-sortfilterdiv e-icons' });\n _this.gui = createElement('div');\n _this.chkAllBox = createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox' } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n * @returns string\n */\n HeaderCellRenderer.prototype.getGui = function () {\n return this.gui.cloneNode();\n };\n /**\n * Function to render the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {Element}\n */\n HeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var fltrMenuEle = createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n /**\n * Function to refresh the cell content based on Column object.\n * @param {Cell} cell\n * @param {Element} node\n */\n HeaderCellRenderer.prototype.refresh = function (cell, node) {\n this.clean(node);\n var fltrMenuEle = createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n HeaderCellRenderer.prototype.clean = function (node) {\n node.innerHTML = '';\n };\n HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {\n var column = cell.column;\n var ariaAttr = {};\n //Prepare innerHtml\n var innerDIV = this.getGui();\n attributes(innerDIV, {\n 'e-mappinguid': column.uid,\n 'class': 'e-headercelldiv'\n });\n if (column.type !== 'checkbox') {\n var value = column.headerText;\n var headerText = this.hTxtEle.cloneNode();\n headerText[column.getDomSetter()] = value;\n innerDIV.appendChild(headerText);\n }\n else {\n column.editType = 'booleanedit';\n var checkAllWrap = createCheckBox(false, { checked: false, label: ' ' });\n checkAllWrap.insertBefore(this.chkAllBox.cloneNode(), checkAllWrap.firstChild);\n innerDIV.appendChild(checkAllWrap);\n innerDIV.classList.add('e-headerchkcelldiv');\n }\n this.buildAttributeFromCell(node, cell);\n this.appendHtml(node, innerDIV);\n node.appendChild(this.sortEle.cloneNode());\n if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&\n (column.allowFiltering && !isNullOrUndefined(column.field)) &&\n !(this.parent.showColumnMenu && column.showColumnMenu)) {\n attributes(fltrMenuEle, {\n 'e-mappinguid': 'e-flmenu-' + column.uid,\n });\n node.classList.add('e-fltr-icon');\n var matchFlColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {\n for (var index = 0; index < this.parent.columns.length; index++) {\n for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {\n if (this.parent.filterSettings.columns[count].field === column.field) {\n fltrMenuEle.classList.add('e-filtered');\n matchFlColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.appendChild(fltrMenuEle.cloneNode());\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (column.allowSorting) {\n ariaAttr.sort = 'none';\n }\n if (column.allowGrouping) {\n ariaAttr.grabbed = false;\n }\n node = this.extendPrepareHeader(column, node);\n var result;\n var gridObj = this.parent;\n var colIndex = gridObj.getColumnIndexByField(column.field);\n if (!isNullOrUndefined(column.headerTemplate)) {\n result = column.getHeaderTemplate()(extend({ 'index': colIndex }, column), gridObj, 'headerTemplate');\n node.firstElementChild.innerHTML = '';\n appendChildren(node.firstElementChild, result);\n }\n this.ariaService.setOptions(node, ariaAttr);\n if (!isNullOrUndefined(column.headerTextAlign) || !isNullOrUndefined(column.textAlign)) {\n var alignment = column.headerTextAlign || column.textAlign;\n innerDIV.style.textAlign = alignment;\n if (alignment === 'Right' || alignment === 'Left') {\n node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');\n }\n else if (alignment === 'Center') {\n node.classList.add('e-centeralign');\n }\n }\n if (column.clipMode === 'Clip') {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip') {\n node.classList.add('e-ellipsistooltip');\n }\n node.setAttribute('aria-rowspan', (!isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());\n node.setAttribute('aria-colspan', '1');\n return node;\n };\n HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {\n if (this.parent.showColumnMenu && column.showColumnMenu && !isNullOrUndefined(column.field)) {\n var element = (createElement('div', { className: 'e-icons e-columnmenu' }));\n var matchFilteredColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {\n for (var i = 0; i < this.parent.columns.length; i++) {\n for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {\n if (this.parent.filterSettings.columns[j].field === column.field) {\n element.classList.add('e-filtered');\n matchFilteredColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.classList.add('e-fltr-icon');\n node.appendChild(element);\n }\n if (this.parent.allowResizing) {\n var handler = createElement('div');\n handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n * @param {Element} node\n * @param {string|Element} innerHtml\n * @returns Element\n */\n HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n return HeaderCellRenderer;\n}(CellRenderer));\nexport { HeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * StackedHeaderCellRenderer class which responsible for building stacked header cell content.\n * @hidden\n */\nvar StackedHeaderCellRenderer = /** @class */ (function (_super) {\n __extends(StackedHeaderCellRenderer, _super);\n function StackedHeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TH', {\n className: 'e-headercell e-stackedheadercell', attrs: {\n role: 'columnheader',\n tabindex: '-1'\n }\n });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {Element}\n */\n StackedHeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var div = createElement('div', { className: 'e-stackedheadercelldiv' });\n node.appendChild(div);\n div.innerHTML = cell.column.headerText;\n if (cell.column.toolTip) {\n node.setAttribute('title', cell.column.toolTip);\n }\n if (!isNullOrUndefined(cell.column.textAlign)) {\n div.style.textAlign = cell.column.textAlign;\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-colspan', cell.colSpan.toString());\n node.setAttribute('aria-rowspan', '1');\n return node;\n };\n return StackedHeaderCellRenderer;\n}(CellRenderer));\nexport { StackedHeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\n/**\n * IndentCellRenderer class which responsible for building group indent cell.\n * @hidden\n */\nvar IndentCellRenderer = /** @class */ (function (_super) {\n __extends(IndentCellRenderer, _super);\n function IndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TD', { className: 'e-indentcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n IndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n setStyleAndAttributes(node, cell.attributes);\n return node;\n };\n return IndentCellRenderer;\n}(CellRenderer));\nexport { IndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren, templateCompiler } from '../base/util';\n/**\n * GroupCaptionCellRenderer class which responsible for building group caption cell.\n * @hidden\n */\nvar GroupCaptionCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionCellRenderer, _super);\n function GroupCaptionCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TD', { className: 'e-groupcaption', attrs: { role: 'gridcell', tabindex: '-1' } });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Cell} cell\n * @param {Object} data\n */\n GroupCaptionCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n var gObj = this.parent;\n var result;\n var helper = {};\n var fKeyValue;\n if (cell.isForeignKey) {\n fKeyValue = this.format(cell.column, cell.column.valueAccessor('foreignKey', data, cell.column));\n }\n var value = cell.isForeignKey ? fKeyValue : cell.column.enableGroupByFormat ? data.key :\n this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n if (gObj.groupSettings.captionTemplate.indexOf('#') !== -1) {\n result = templateCompiler(document.querySelector(gObj.groupSettings.captionTemplate).innerHTML.trim())(data);\n }\n else {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data);\n }\n appendChildren(node, result);\n }\n else {\n node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +\n (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');\n node.setAttribute('title', node.innerHTML);\n return node;\n };\n return GroupCaptionCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionCellRenderer };\n/**\n * GroupCaptionEmptyCellRenderer class which responsible for building group caption empty cell.\n * @hidden\n */\nvar GroupCaptionEmptyCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionEmptyCellRenderer, _super);\n function GroupCaptionEmptyCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TD', { className: 'e-groupcaption' });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Cell} cell\n * @param {Object} data\n */\n GroupCaptionEmptyCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.innerHTML = ' ';\n node.setAttribute('colspan', cell.colSpan.toString());\n return node;\n };\n return GroupCaptionEmptyCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionEmptyCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { IndentCellRenderer } from './indent-cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n * @hidden\n */\nvar ExpandCellRenderer = /** @class */ (function (_super) {\n __extends(ExpandCellRenderer, _super);\n function ExpandCellRenderer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Function to render the expand cell\n * @param {Cell} cell\n * @param {Object} data\n */\n ExpandCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.className = 'e-recordplusexpand';\n node.setAttribute('ej-mappingname', data.field);\n node.setAttribute('ej-mappingvalue', data.key);\n node.setAttribute('aria-expanded', 'true');\n node.setAttribute('tabindex', '-1');\n node.appendChild(createElement('div', { className: 'e-icons e-gdiagonaldown e-icon-gdownarrow' }));\n return node;\n };\n return ExpandCellRenderer;\n}(IndentCellRenderer));\nexport { ExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * HeaderIndentCellRenderer class which responsible for building header indent cell.\n * @hidden\n */\nvar HeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderIndentCellRenderer, _super);\n function HeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TH', { className: 'e-grouptopleftcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n HeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(createElement('div', { className: 'e-headercelldiv e-emptycell', innerHTML: ' ' }));\n return node;\n };\n return HeaderIndentCellRenderer;\n}(CellRenderer));\nexport { HeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n * @hidden\n */\nvar DetailHeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(DetailHeaderIndentCellRenderer, _super);\n function DetailHeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TH', { className: 'e-detailheadercell' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n DetailHeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(createElement('div', { className: 'e-emptycell' }));\n return node;\n };\n return DetailHeaderIndentCellRenderer;\n}(CellRenderer));\nexport { DetailHeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n * @hidden\n */\nvar DetailExpandCellRenderer = /** @class */ (function (_super) {\n __extends(DetailExpandCellRenderer, _super);\n function DetailExpandCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = createElement('TD', {\n className: 'e-detailrowcollapse',\n attrs: { 'aria-expanded': 'false', role: 'gridcell', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n */\n DetailExpandCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n if (attributes && !isNullOrUndefined(attributes['class'])) {\n node.className = '';\n node.className = attributes['class'];\n node.appendChild(createElement('div', { className: 'e-icons e-dtdiagonaldown e-icon-gdownarrow' }));\n }\n else {\n node.appendChild(createElement('div', { className: 'e-icons e-dtdiagonalright e-icon-grightarrow' }));\n }\n return node;\n };\n return DetailExpandCellRenderer;\n}(CellRenderer));\nexport { DetailExpandCellRenderer };\n","import { createElement, remove } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, extend } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Deferred, Predicate } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RenderType, CellType } from '../base/enum';\nimport { Data } from '../actions/data';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport * as events from '../base/constant';\nimport { prepareColumns, calculateAggregate, setFormatter, getDatePredicate } from '../base/util';\nimport { ContentRender } from '../renderer/content-renderer';\nimport { HeaderRender } from '../renderer/header-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { HeaderCellRenderer } from '../renderer/header-cell-renderer';\nimport { StackedHeaderCellRenderer } from '../renderer/stacked-cell-renderer';\nimport { IndentCellRenderer } from '../renderer/indent-cell-renderer';\nimport { GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer } from '../renderer/caption-cell-renderer';\nimport { ExpandCellRenderer } from '../renderer/expand-cell-renderer';\nimport { HeaderIndentCellRenderer } from '../renderer/header-indent-renderer';\nimport { DetailHeaderIndentCellRenderer } from '../renderer/detail-header-indent-renderer';\nimport { DetailExpandCellRenderer } from '../renderer/detail-expand-cell-renderer';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n */\n function Render(parent, locator) {\n this.emptyGrid = false;\n this.parent = parent;\n this.locator = locator;\n this.data = new Data(parent, locator);\n this.l10n = locator.getService('localization');\n this.ariaService = this.locator.getService('ariaService');\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize grid header, content and footer rendering\n */\n Render.prototype.render = function () {\n var gObj = this.parent;\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer.renderPanel();\n this.contentRenderer.renderPanel();\n if (gObj.getColumns().length) {\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.emptyRow(false);\n }\n this.refreshDataManager();\n };\n /**\n * Refresh the entire Grid.\n * @return {void}\n */\n Render.prototype.refresh = function (e) {\n if (e === void 0) { e = { requestType: 'refresh' }; }\n this.parent.notify(e.requestType + \"-begin\", e);\n this.parent.trigger(events.actionBegin, e);\n if (e.cancel) {\n return;\n }\n this.refreshDataManager(e);\n };\n Render.prototype.refreshComplete = function (e) {\n this.parent.trigger(events.actionComplete, e);\n };\n /**\n * The function is used to refresh the dataManager\n * @return {void}\n */\n Render.prototype.refreshDataManager = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n if (args.requestType !== 'virtualscroll') {\n this.parent.showSpinner();\n }\n this.parent.isEdit = false;\n this.emptyGrid = false;\n var dataManager;\n var isFActon = this.isNeedForeignAction();\n this.ariaService.setBusy(this.parent.getContent().firstChild, true);\n if (isFActon) {\n var deffered = new Deferred();\n dataManager = this.getFData(deffered);\n }\n if (!dataManager) {\n dataManager = this.data.getData(args, this.data.generateQuery().requiresCount())\n .catch(function (e) { _this.parent.trigger(events.actionFailure, e); return e; });\n }\n else {\n dataManager = dataManager.then(function (e) {\n var query = _this.data.generateQuery().requiresCount();\n if (_this.emptyGrid) {\n var def = new Deferred();\n def.resolve({ result: [], count: 0 });\n return def.promise;\n }\n return _this.data.getData(args, query);\n }).catch(function (e) { _this.parent.trigger(events.actionFailure, e); return e; });\n }\n if (this.parent.getForeignKeyColumns().length && (!isFActon || this.parent.searchSettings.key.length)) {\n var deffered_1 = new Deferred();\n dataManager = dataManager.then(function (e) {\n _this.parent.notify(events.getForeignKeyData, { dataManager: dataManager, result: e, promise: deffered_1 });\n return deffered_1.promise;\n });\n }\n if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {\n dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });\n }\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })\n .catch(function (e) { return _this.dataManagerFailure(e); });\n };\n Render.prototype.getFData = function (deferred) {\n this.parent.notify(events.getForeignKeyData, { isComplex: true, promise: deferred });\n return deferred.promise;\n };\n Render.prototype.isNeedForeignAction = function () {\n var gObj = this.parent;\n return !!((gObj.allowFiltering && gObj.filterSettings.columns.length) ||\n (gObj.searchSettings.key.length)) && this.foreignKey(this.parent.getForeignKeyColumns());\n };\n Render.prototype.foreignKey = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n var fbool = false;\n fbool = _this.parent.filterSettings.columns.some(function (value) {\n return col.foreignKeyValue === value.field;\n });\n return !!(fbool || _this.parent.searchSettings.key.length);\n });\n };\n Render.prototype.sendBulkRequest = function (args) {\n var _this = this;\n var promise = this.data.saveChanges(args.changes, this.parent.getPrimaryKeyFieldNames()[0]);\n var query = this.data.generateQuery().requiresCount();\n if (this.data.dataManager.dataSource.offline) {\n this.refreshDataManager({ requestType: 'batchsave' });\n return;\n }\n else {\n promise.then(function (e) {\n _this.data.getData(args, query)\n .then(function (e) { return _this.dmSuccess(e, args); })\n .catch(function (e) { return _this.dmFailure(e); });\n })\n .catch(function (e) { return _this.dmFailure(e); });\n }\n };\n Render.prototype.dmSuccess = function (e, args) {\n this.dataManagerSuccess(e, args);\n };\n Render.prototype.dmFailure = function (e) {\n this.dataManagerFailure(e);\n };\n /**\n * Render empty row to Grid which is used at the time to represent to no records.\n * @return {void}\n * @hidden\n */\n Render.prototype.renderEmptyRow = function () {\n this.emptyRow(true);\n };\n Render.prototype.emptyRow = function (isTrigger) {\n var gObj = this.parent;\n var tbody = this.contentRenderer.getTable().querySelector('tbody');\n var tr;\n remove(tbody);\n tbody = createElement('tbody');\n tr = createElement('tr', { className: 'e-emptyrow' });\n tr.appendChild(createElement('td', {\n innerHTML: this.l10n.getConstant('EmptyRecord'),\n attrs: { colspan: gObj.getColumns().length.toString() }\n }));\n tbody.appendChild(tr);\n this.contentRenderer.renderEmpty(tbody);\n if (isTrigger) {\n this.parent.trigger(events.dataBound, {});\n this.parent.notify(events.onEmpty, { rows: [new Row({ isDataRow: true, cells: [new Cell({ isDataCell: true, visible: true })] })] });\n }\n };\n Render.prototype.dynamicColumnChange = function () {\n if (this.parent.getCurrentViewRecords().length) {\n this.updateColumnType(this.parent.getCurrentViewRecords()[0]);\n }\n };\n Render.prototype.updateColumnType = function (record) {\n var columns = this.parent.getColumns();\n var value;\n var data = record && record.items ? record.items[0] : record;\n var fmtr = this.locator.getService('valueFormatter');\n for (var i = 0, len = columns.length; i < len; i++) {\n value = getValue(columns[i].field || '', data);\n if (columns[i].isForeignColumn() && columns[i].columnData) {\n value = getValue(columns[i].foreignKeyValue || '', columns[i].columnData[0]);\n }\n if (!isNullOrUndefined(value)) {\n this.isColTypeDef = true;\n if (!columns[i].type) {\n columns[i].type = value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 ||\n value.getSeconds() > 0 || value.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n }\n else {\n columns[i].type = columns[i].type || null;\n }\n var valueFormatter = new ValueFormatter();\n if (columns[i].format && (columns[i].format.skeleton || columns[i].format.format)) {\n columns[i].setFormatter(valueFormatter.getFormatFunction(columns[i].format));\n columns[i].setParser(valueFormatter.getParserFunction(columns[i].format));\n }\n if (typeof (columns[i].format) === 'string') {\n setFormatter(this.locator, columns[i]);\n }\n else if (!columns[i].format && columns[i].type === 'number') {\n columns[i].setParser(fmtr.getParserFunction({ format: 'n2' }));\n }\n }\n };\n Render.prototype.dataManagerSuccess = function (e, args) {\n var gObj = this.parent;\n gObj.trigger(events.beforeDataBound, e);\n var len = Object.keys(e.result).length;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.notify(events.tooltipDestroy, {});\n gObj.currentViewData = e.result;\n if (!len && e.count && gObj.allowPaging) {\n gObj.pageSettings.totalRecordsCount = e.count;\n gObj.pageSettings.currentPage = Math.ceil(e.count / gObj.pageSettings.pageSize);\n gObj.dataBind();\n return;\n }\n if (!gObj.getColumns().length && len) {\n this.updatesOnInitialRender(e);\n }\n if (!this.isColTypeDef && gObj.getCurrentViewRecords()) {\n this.updateColumnType(gObj.getCurrentViewRecords()[0]);\n }\n this.parent.notify(events.dataReady, extend({ count: e.count, result: e.result, aggregates: e.aggregates }, args));\n if (gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping')) {\n this.headerRenderer.refreshUI();\n }\n if (len) {\n this.contentRenderer.refreshContentRows(args);\n }\n else {\n if (!gObj.getColumns().length) {\n gObj.element.innerHTML = '';\n alert(this.l10n.getConstant('EmptyDataSourceError')); //ToDO: change this alert as dialog\n return;\n }\n this.contentRenderer.setRowElements([]);\n this.renderEmptyRow();\n if (args) {\n var action = (args.requestType || '').toLowerCase() + '-complete';\n this.parent.notify(action, args);\n }\n this.parent.hideSpinner();\n }\n this.parent.notify(events.toolbarRefresh, {});\n };\n Render.prototype.dataManagerFailure = function (e) {\n this.ariaService.setOptions(this.parent.getContent().firstChild, { busy: false, invalid: true });\n this.parent.trigger(events.actionFailure, { error: e });\n this.parent.currentViewData = [];\n this.renderEmptyRow();\n this.parent.hideSpinner();\n };\n Render.prototype.updatesOnInitialRender = function (e) {\n this.buildColumns(e.result[0]);\n prepareColumns(this.parent.columns);\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.parent.notify(events.autoCol, {});\n };\n Render.prototype.buildColumns = function (record) {\n var columns = Object.keys(record);\n var cols = [];\n for (var i = 0, len = columns.length; i < len; i++) {\n cols[i] = { 'field': columns[i] };\n if (this.parent.enableColumnVirtualization) {\n cols[i].width = !isNullOrUndefined(cols[i].width) ? cols[i].width : 200;\n }\n }\n this.parent.columns = cols;\n };\n Render.prototype.instantiateRenderer = function () {\n this.renderer.addRenderer(RenderType.Header, new HeaderRender(this.parent, this.locator));\n this.renderer.addRenderer(RenderType.Content, new ContentRender(this.parent, this.locator));\n var cellrender = this.locator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Header, new HeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Data, new CellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Indent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaption, new GroupCaptionCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaptionEmpty, new GroupCaptionEmptyCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Expand, new ExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.HeaderIndent, new HeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailHeader, new DetailHeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailExpand, new DetailExpandCellRenderer(this.parent, this.locator));\n };\n Render.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.refreshComplete, this.refreshComplete, this);\n this.parent.on(events.bulkSave, this.sendBulkRequest, this);\n this.parent.on(events.showEmptyGrid, function () { _this.emptyGrid = true; }, this);\n this.parent.on(events.autoCol, this.dynamicColumnChange, this);\n };\n /** @hidden */\n Render.prototype.validateGroupRecords = function (e) {\n var _this = this;\n var index = e.result.length - 1;\n if (index < 0) {\n return Promise.resolve(e);\n }\n var group0 = e.result[0];\n var groupN = e.result[index];\n var predicate = [];\n var addWhere = function (input) {\n [group0, groupN].forEach(function (group) {\n return predicate.push(new Predicate('field', '==', group.field).and(_this.getPredicate('key', 'equal', group.key)));\n });\n input.where(Predicate.or(predicate));\n };\n var query = new Query();\n addWhere(query);\n var curDm = new DataManager(e.result);\n var curFilter = curDm.executeLocal(query);\n var newQuery = this.data.generateQuery(true);\n var rPredicate = [];\n if (this.data.isRemote()) {\n [group0, groupN].forEach(function (group) {\n return rPredicate.push(_this.getPredicate(group.field, 'equal', group.key));\n });\n newQuery.where(Predicate.or(rPredicate));\n }\n else {\n addWhere(newQuery);\n }\n var deferred = new Deferred();\n this.data.getData({}, newQuery).then(function (r) {\n _this.updateGroupInfo(curFilter, r.result);\n deferred.resolve(e);\n }).catch(function (e) { return deferred.reject(e); });\n return deferred.promise;\n };\n Render.prototype.getPredicate = function (key, operator, value) {\n if (value instanceof Date) {\n return getDatePredicate({ field: key, operator: operator, value: value });\n }\n return new Predicate(key, operator, value);\n };\n Render.prototype.updateGroupInfo = function (current, untouched) {\n var _this = this;\n var dm = new DataManager(untouched);\n current.forEach(function (element, index, array) {\n var uGroup = dm.executeLocal(new Query()\n .where(new Predicate('field', '==', element.field).and(_this.getPredicate('key', 'equal', element.key))))[0];\n element.count = uGroup.count;\n var itemGroup = element.items;\n var uGroupItem = uGroup.items;\n if (itemGroup.GroupGuid) {\n element.items = _this.updateGroupInfo(element.items, uGroup.items);\n }\n _this.parent.aggregates.forEach(function (row) {\n return row.columns.forEach(function (column) {\n var types = column.type instanceof Array ? column.type : [column.type];\n types.forEach(function (type) {\n var key = column.field + ' - ' + type;\n element.aggregates[key] = calculateAggregate(type, itemGroup.level ? uGroupItem.records : uGroup.items, column);\n });\n });\n });\n });\n return current;\n };\n return Render;\n}());\nexport { Render };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\n/**\n * CellRendererFactory\n * @hidden\n */\nvar CellRendererFactory = /** @class */ (function () {\n function CellRendererFactory() {\n this.cellRenderMap = {};\n }\n CellRendererFactory.prototype.addCellRenderer = function (name, type) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[name])) {\n this.cellRenderMap[name] = type;\n }\n };\n CellRendererFactory.prototype.getCellRenderer = function (name) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[name])) {\n throw \"The cellRenderer \" + name + \" is not found\";\n }\n else {\n return this.cellRenderMap[name];\n }\n };\n return CellRendererFactory;\n}());\nexport { CellRendererFactory };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * ServiceLocator\n * @hidden\n */\nvar ServiceLocator = /** @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n ServiceLocator.prototype.register = function (name, type) {\n if (isNullOrUndefined(this.services[name])) {\n this.services[name] = type;\n }\n };\n ServiceLocator.prototype.getService = function (name) {\n if (isNullOrUndefined(this.services[name])) {\n throw \"The service \" + name + \" is not registered\";\n }\n return this.services[name];\n };\n return ServiceLocator;\n}());\nexport { ServiceLocator };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\n/**\n * RendererFactory\n * @hidden\n */\nvar RendererFactory = /** @class */ (function () {\n function RendererFactory() {\n this.rendererMap = {};\n }\n RendererFactory.prototype.addRenderer = function (name, type) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n this.rendererMap[rName] = type;\n }\n };\n RendererFactory.prototype.getRenderer = function (name) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n throw \"The renderer \" + rName + \" is not found\";\n }\n else {\n return this.rendererMap[rName];\n }\n };\n return RendererFactory;\n}());\nexport { RendererFactory };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { formatUnit } from '@syncfusion/ej2-base';\nimport { columnWidthChanged } from '../base/constant';\nimport { Column } from '../models/column';\n/**\n * ColumnWidthService\n * @hidden\n */\nvar ColumnWidthService = /** @class */ (function () {\n function ColumnWidthService(parent) {\n this.parent = parent;\n }\n ColumnWidthService.prototype.setWidthToColumns = function () {\n var _this = this;\n var i = 0;\n var indexes = this.parent.getColumnIndexesInView();\n var wFlag = true;\n if (this.parent.allowGrouping) {\n for (var len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n wFlag = false;\n continue;\n }\n this.setColumnWidth(new Column({ width: '30px' }), i);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n this.setColumnWidth(new Column({ width: '30px' }), i);\n }\n this.parent.getColumns().forEach(function (column, index) {\n _this.setColumnWidth(column, wFlag ? undefined : index);\n });\n };\n ColumnWidthService.prototype.setColumnWidth = function (column, index, module) {\n var columnIndex = isNullOrUndefined(index) ? this.parent.getNormalizedColumnIndex(column.uid) : index;\n var cWidth = this.getWidth(column);\n if (cWidth !== null) {\n this.setWidth(cWidth, columnIndex);\n if ((this.parent.allowResizing && module === 'resize') || (this.parent.getFrozenColumns() && this.parent.allowResizing)) {\n this.setWidthToTable();\n }\n this.parent.notify(columnWidthChanged, { index: columnIndex, width: cWidth, column: column, module: module });\n }\n };\n ColumnWidthService.prototype.setWidth = function (width, index) {\n var header = this.parent.getHeaderTable();\n var content = this.parent.getContentTable();\n var fWidth = formatUnit(width);\n var headerCol;\n var frzCols = this.parent.getFrozenColumns();\n var mHdr = this.parent.getHeaderContent().querySelector('.e-movableheader');\n if (frzCols && index >= frzCols && mHdr && mHdr.querySelector('colgroup')) {\n headerCol = mHdr.querySelector('colgroup').children[index - frzCols];\n }\n else {\n headerCol = header.querySelector('colgroup').children[index];\n }\n if (headerCol) {\n headerCol.style.width = fWidth;\n }\n var contentCol;\n if (frzCols && index >= frzCols) {\n contentCol = this.parent.getContent().querySelector('.e-movablecontent')\n .querySelector('colgroup').children[index - frzCols];\n }\n else {\n contentCol = content.querySelector('colgroup').children[index];\n }\n if (contentCol) {\n contentCol.style.width = fWidth;\n }\n var edit = content.querySelector('.e-table.e-inline-edit');\n if (edit) {\n edit.querySelector('colgroup').children[index].style.width = fWidth;\n }\n };\n ColumnWidthService.prototype.getSiblingsHeight = function (element) {\n var previous = this.getHeightFromDirection(element, 'previous');\n var next = this.getHeightFromDirection(element, 'next');\n return previous + next;\n };\n ColumnWidthService.prototype.getHeightFromDirection = function (element, direction) {\n var sibling = element[direction + 'ElementSibling'];\n var result = 0;\n var classList = ['e-gridheader', 'e-gridfooter', 'e-groupdroparea', 'e-gridpager', 'e-toolbar'];\n while (sibling) {\n if (classList.some(function (value) { return sibling.classList.contains(value); })) {\n result += sibling.offsetHeight;\n }\n sibling = sibling[direction + 'ElementSibling'];\n }\n return result;\n };\n ColumnWidthService.prototype.getWidth = function (column) {\n if (isNullOrUndefined(column.width) && this.parent.allowResizing) {\n column.width = 200;\n }\n if (!column.width) {\n return null;\n }\n var width = parseInt(column.width.toString(), 10);\n if (column.minWidth && width < parseInt(column.minWidth.toString(), 10)) {\n return column.minWidth;\n }\n else if ((column.maxWidth && width > parseInt(column.maxWidth.toString(), 10))) {\n return column.maxWidth;\n }\n else {\n return column.width;\n }\n };\n ColumnWidthService.prototype.getTableWidth = function (columns) {\n var tWidth = 0;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n var cWidth = this.getWidth(column);\n if (column.visible !== false && cWidth !== null) {\n tWidth += parseInt(cWidth.toString(), 10);\n }\n }\n return tWidth;\n };\n ColumnWidthService.prototype.setWidthToFrozenTable = function () {\n var columns = this.parent.getColumns();\n columns.splice(this.parent.getFrozenColumns(), columns.length);\n var freezeWidth = formatUnit(this.getTableWidth(columns));\n this.parent.getHeaderTable().style.width = freezeWidth;\n this.parent.getContentTable().style.width = freezeWidth;\n };\n ColumnWidthService.prototype.setWidthToMovableTable = function () {\n var columns = this.parent.getColumns();\n columns.splice(0, this.parent.getFrozenColumns());\n var movableWidth = formatUnit(this.getTableWidth(columns));\n if (this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild) {\n this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild.style.width\n = movableWidth;\n }\n this.parent.getContent().querySelector('.e-movablecontent').firstElementChild.style.width =\n movableWidth;\n };\n ColumnWidthService.prototype.setWidthToTable = function () {\n var tWidth = formatUnit(this.getTableWidth(this.parent.getColumns()));\n if (this.parent.getFrozenColumns()) {\n this.setWidthToFrozenTable();\n this.setWidthToMovableTable();\n }\n else {\n this.parent.getHeaderTable().style.width = tWidth;\n this.parent.getContentTable().style.width = tWidth;\n }\n var edit = this.parent.element.querySelector('.e-table.e-inline-edit');\n if (edit) {\n edit.style.width = tWidth;\n }\n };\n return ColumnWidthService;\n}());\nexport { ColumnWidthService };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { EventHandler, getValue, closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, extend, Browser } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport * as event from '../base/constant';\n/**\n * FocusStrategy class\n * @hidden\n */\nvar FocusStrategy = /** @class */ (function () {\n function FocusStrategy(parent) {\n this.currentInfo = {};\n this.oneTime = true;\n this.swap = {};\n this.forget = true;\n this.skipFocus = true;\n this.focusByClick = false;\n this.prevIndexes = {};\n this.parent = parent;\n this.addEventListener();\n }\n FocusStrategy.prototype.focusCheck = function (e) {\n var target = e.target;\n this.focusByClick = true;\n this.skipFocus = target.classList.contains('e-grid');\n };\n FocusStrategy.prototype.onFocus = function () {\n if (this.parent.isDestroyed || Browser.isDevice || this.parent.enableVirtualization) {\n return;\n }\n this.setActive(this.parent.frozenRows === 0, this.parent.frozenColumns !== 0);\n var current = this.getContent().matrix.get(0, -1, [0, 1], null, this.getContent().validator());\n this.getContent().matrix.select(current[0], current[1]);\n if (this.skipFocus) {\n this.focus();\n this.skipFocus = false;\n }\n };\n FocusStrategy.prototype.passiveFocus = function (e) {\n if (this.parent.isDestroyed) {\n return;\n }\n if (e.target && e.target.classList.contains('e-detailcell')) {\n this.currentInfo.skipAction = false;\n addClass([this.currentInfo.element], ['e-focused', 'e-focus']);\n }\n };\n FocusStrategy.prototype.onBlur = function (e) {\n if ((this.parent.isEdit || e && (!e.relatedTarget || closest(e.relatedTarget, '.e-grid')))) {\n return;\n }\n this.removeFocus();\n this.skipFocus = false;\n this.currentInfo.skipAction = false;\n if (this.getContent().getFocusInfo().elementToFocus) {\n this.getContent().getFocusInfo().elementToFocus.tabIndex = 0;\n }\n };\n FocusStrategy.prototype.onClick = function (e, force) {\n var isContent = !isNullOrUndefined(closest(e.target, '.e-gridcontent'));\n var isHeader = !isNullOrUndefined(closest(e.target, '.e-gridheader'));\n isContent = isContent && isHeader ? !isContent : isContent;\n var isFrozen = !isNullOrUndefined(closest(e.target, '.e-frozencontent')) ||\n !isNullOrUndefined(closest(e.target, '.e-frozenheader'));\n if (!isContent && isNullOrUndefined(closest(e.target, '.e-gridheader')) ||\n e.target.classList.contains('e-content')) {\n return;\n }\n this.setActive(isContent, isFrozen);\n if (!isContent && isNullOrUndefined(closest(e.target, '.e-gridheader')) ||\n e.target.classList.contains('e-filtermenudiv')) {\n this.clearOutline();\n return;\n }\n var beforeArgs = { cancel: false, byKey: false, byClick: !isNullOrUndefined(e.target), clickArgs: e };\n this.parent.notify(event.beforeCellFocused, beforeArgs);\n if (beforeArgs.cancel || closest(e.target, '.e-inline-edit')) {\n return;\n }\n this.setActive(isContent, isFrozen);\n if (this.getContent()) {\n var returnVal = this.getContent().onClick(e, force);\n if (returnVal === false) {\n return;\n }\n this.focus();\n }\n };\n FocusStrategy.prototype.onKeyPress = function (e) {\n if (this.skipOn(e)) {\n return;\n }\n var beforeArgs = { cancel: false, byKey: true, byClick: false, keyArgs: e };\n this.parent.notify(event.beforeCellFocused, beforeArgs);\n if (beforeArgs.cancel) {\n return;\n }\n var bValue = this.getContent().matrix.current;\n this.currentInfo.outline = true;\n var swapInfo = this.getContent().jump(e.action, bValue);\n this.swap = swapInfo;\n if (swapInfo.swap) {\n this.setActive(!swapInfo.toHeader, swapInfo.toFrozen);\n this.getContent().matrix.current = this.getContent().getNextCurrent(bValue, swapInfo, this.active, e.action);\n this.prevIndexes = {};\n }\n this.setActiveByKey(e.action, this.getContent());\n var returnVal = this.getContent().onKeyPress(e);\n if (returnVal === false) {\n this.clearIndicator();\n return;\n }\n e.preventDefault();\n this.focus(e);\n };\n FocusStrategy.prototype.skipOn = function (e) {\n var target = e.target;\n if (!target) {\n return false;\n }\n if (this.currentInfo.skipAction) {\n this.clearIndicator();\n return true;\n }\n if (['pageUp', 'pageDown'].indexOf(e.action) > -1) {\n this.clearIndicator();\n return true;\n }\n return (e.action === 'delete'\n || (this.parent.editSettings.mode !== 'Batch' && (this.parent.isEdit || ['insert', 'f2'].indexOf(e.action) > -1))\n || (closest(document.activeElement, '.e-filterbarcell') !== null ||\n closest(document.activeElement, '#' + this.parent.element.id + '_searchbar') !== null\n && ['enter', 'leftArrow', 'rightArrow',\n 'shiftLeft', 'shiftRight', 'ctrlPlusA'].indexOf(e.action) > -1)\n || (closest(target, '.e-gridcontent') === null && closest(target, '.e-gridheader') === null)\n || (e.action === 'space' && (!target.classList.contains('e-gridchkbox') && closest(target, '.e-gridchkbox') === null\n && closest(target, '.e-headerchkcelldiv') === null)));\n };\n FocusStrategy.prototype.getFocusedElement = function () {\n return this.currentInfo.elementToFocus;\n };\n FocusStrategy.prototype.getContent = function () {\n return this.active || this.content;\n };\n FocusStrategy.prototype.setActive = function (content, isFrozen) {\n this.active = content ? isFrozen ? this.fContent : this.content :\n isFrozen ? this.fHeader : this.header;\n };\n FocusStrategy.prototype.setFocusedElement = function (element) {\n var _this = this;\n this.currentInfo.elementToFocus = element;\n setTimeout(function () { return _this.currentInfo.elementToFocus.focus(); }, 0);\n };\n FocusStrategy.prototype.focus = function (e) {\n this.removeFocus();\n this.addFocus(this.getContent().getFocusInfo(), e);\n };\n FocusStrategy.prototype.removeFocus = function (e) {\n if (!this.currentInfo.element) {\n return;\n }\n removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focused', 'e-focus']);\n this.currentInfo.element.tabIndex = -1;\n };\n FocusStrategy.prototype.addFocus = function (info, e) {\n this.currentInfo = info;\n this.currentInfo.outline = info.outline && !isNullOrUndefined(e);\n if (!info.element) {\n return;\n }\n var isFocused = info.elementToFocus.classList.contains('e-focus');\n if (isFocused) {\n return;\n }\n if (this.currentInfo.outline) {\n addClass([info.element], ['e-focused']);\n }\n addClass([info.elementToFocus], ['e-focus']);\n info.element.tabIndex = 0;\n if (!isFocused) {\n this.setFocusedElement(info.elementToFocus);\n }\n this.parent.notify(event.cellFocused, {\n element: info.elementToFocus,\n parent: info.element,\n indexes: this.getContent().matrix.current,\n byKey: !isNullOrUndefined(e),\n byClick: isNullOrUndefined(e),\n keyArgs: e,\n isJump: this.swap.swap,\n container: this.getContent().getInfo(e),\n outline: !isNullOrUndefined(e),\n swapInfo: this.swap\n });\n var _a = this.getContent().matrix.current, rowIndex = _a[0], cellIndex = _a[1];\n this.prevIndexes = { rowIndex: rowIndex, cellIndex: cellIndex };\n this.focusByClick = false;\n };\n FocusStrategy.prototype.refreshMatrix = function (content) {\n var _this = this;\n return function (e) {\n if (content && (e.args && e.args.isFrozen) && !_this.fContent) {\n _this.fContent = new FixedContentFocus(_this.parent);\n }\n else if (content && !_this.content) {\n _this.content = new ContentFocus(_this.parent);\n }\n if (!content && (e.args && e.args.isFrozen) && !_this.fHeader) {\n _this.fHeader = new FixedHeaderFocus(_this.parent);\n }\n else if (!content && !_this.header) {\n _this.header = new HeaderFocus(_this.parent);\n }\n var cFocus = content ? (e.args && e.args.isFrozen) ? _this.fContent : _this.content :\n (e.args && e.args.isFrozen) ? _this.fHeader : _this.header;\n var rows = content ? e.rows.slice(_this.parent.frozenRows) : e.rows;\n var updateRow = content ? e.rows.slice(0, _this.parent.frozenRows) : e.rows;\n var matrix = cFocus.matrix.generate(updateRow, cFocus.selector);\n cFocus.matrix.generate(rows, cFocus.selector);\n cFocus.generateRows(updateRow, { matrix: matrix, handlerInstance: (e.args && e.args.isFrozen) ? _this.fHeader : _this.header });\n if (!Browser.isDevice && !_this.focusByClick && e && e.args && e.args.requestType === 'paging') {\n _this.skipFocus = false;\n _this.parent.element.focus();\n }\n };\n };\n FocusStrategy.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n EventHandler.add(this.parent.element, 'mousedown', this.focusCheck, this);\n EventHandler.add(this.parent.element, 'focus', this.onFocus, this);\n this.parent.element.addEventListener('focus', this.passiveHandler = function (e) { return _this.passiveFocus(e); }, true);\n EventHandler.add(this.parent.element, 'focusout', this.onBlur, this);\n this.parent.on(event.keyPressed, this.onKeyPress, this);\n this.parent.on(event.click, this.onClick, this);\n this.parent.on(event.contentReady, this.refreshMatrix(true), this);\n this.parent.on(event.headerRefreshed, this.refreshMatrix(), this);\n this.parent.on('close-edit', this.restoreFocus, this);\n ['start-edit', 'start-add'].forEach(function (evt) { return _this.parent.on(evt, _this.clearIndicator, _this); });\n ['sorting'].forEach(function (action) { return _this.parent.on(action + \"-complete\", _this.restoreFocus, _this); });\n this.parent.on(event.batchAdd, this.refreshMatrix(true), this);\n this.parent.on(event.batchCancel, this.refreshMatrix(true), this);\n this.parent.on(event.batchDelete, this.refreshMatrix(true), this);\n this.parent.on(event.detailDataBound, this.refreshMatrix(true), this);\n this.parent.on(event.onEmpty, this.refreshMatrix(true), this);\n this.parent.on(event.cellFocused, this.internalCellFocus, this);\n };\n FocusStrategy.prototype.removeEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n EventHandler.remove(this.parent.element, 'mousedown', this.focusCheck);\n EventHandler.remove(this.parent.element, 'focus', this.onFocus);\n EventHandler.remove(this.parent.element, 'focusout', this.onBlur);\n this.parent.element.removeEventListener('focus', this.passiveHandler, true);\n this.parent.off(event.keyPressed, this.onKeyPress);\n this.parent.off(event.click, this.onClick);\n this.parent.off(event.contentReady, this.refreshMatrix(true));\n this.parent.off(event.headerRefreshed, this.refreshMatrix());\n this.parent.off('close-edit', this.restoreFocus);\n ['start-edit', 'start-add'].forEach(function (evt) { return _this.parent.off(evt, _this.clearOutline); });\n ['sorting'].forEach(function (action) { return _this.parent.off(action + \"-complete\", _this.restoreFocus); });\n this.parent.off(event.batchAdd, this.refreshMatrix(true));\n this.parent.off(event.batchDelete, this.refreshMatrix(true));\n this.parent.off(event.batchCancel, this.refreshMatrix(true));\n this.parent.off(event.detailDataBound, this.refreshMatrix(true));\n this.parent.off(event.onEmpty, this.refreshMatrix(true));\n this.parent.off(event.cellFocused, this.internalCellFocus);\n };\n FocusStrategy.prototype.destroy = function () {\n this.removeEventListener();\n };\n FocusStrategy.prototype.restoreFocus = function () {\n this.addFocus(this.getContent().getFocusInfo());\n };\n FocusStrategy.prototype.clearOutline = function () {\n this.getContent().matrix.current = this.getContent().matrix.get(0, -1, [0, 1], 'downArrow', this.getContent().validator());\n this.clearIndicator();\n };\n FocusStrategy.prototype.clearIndicator = function () {\n if (!this.currentInfo.element || !this.currentInfo.elementToFocus) {\n return;\n }\n removeClass([this.currentInfo.element, this.currentInfo.elementToFocus], ['e-focus', 'e-focused']);\n };\n FocusStrategy.prototype.getPrevIndexes = function () {\n var forget = this.forget;\n this.forget = false;\n return forget ? { rowIndex: null, cellIndex: null } : this.prevIndexes;\n };\n FocusStrategy.prototype.forgetPrevious = function () {\n this.forget = true;\n };\n FocusStrategy.prototype.setActiveByKey = function (action, active) {\n var _this = this;\n if (this.parent.frozenColumns === 0 && this.parent.frozenRows === 0) {\n return;\n }\n var info;\n var actions = {\n 'home': function () { return ({ toHeader: !info.isContent, toFrozen: true }); },\n 'end': function () { return ({ toHeader: !info.isContent, toFrozen: false }); },\n 'ctrlHome': function () { return ({ toHeader: true, toFrozen: _this.parent.frozenColumns !== 0 }); },\n 'ctrlEnd': function () { return ({ toHeader: false, toFrozen: false }); }\n };\n if (!(action in actions)) {\n return;\n }\n info = active.getInfo();\n var swap = actions[action]();\n this.setActive(!swap.toHeader, swap.toFrozen);\n this.getContent().matrix.current = active.matrix.current;\n };\n FocusStrategy.prototype.internalCellFocus = function (e) {\n if (!(e.byKey && e.container.isContent && e.keyArgs.action === 'enter'\n && (e.parent.classList.contains('e-detailcell') ||\n e.parent.classList.contains('e-unboundcell') || e.parent.classList.contains('e-templatecell')))) {\n return;\n }\n this.clearIndicator();\n var focusEle = this.getContent().getFocusable(this.getFocusedElement());\n this.setFocusedElement(focusEle);\n this.currentInfo.skipAction = true;\n };\n return FocusStrategy;\n}());\nexport { FocusStrategy };\n/**\n * Create matrix from row collection which act as mental model for cell navigation\n * @hidden\n */\nvar Matrix = /** @class */ (function () {\n function Matrix() {\n this.matrix = [];\n this.current = [];\n }\n Matrix.prototype.set = function (rowIndex, columnIndex, allow) {\n rowIndex = Math.max(0, Math.min(rowIndex, this.rows));\n columnIndex = Math.max(0, Math.min(columnIndex, this.columns));\n this.matrix[rowIndex] = this.matrix[rowIndex] || [];\n this.matrix[rowIndex][columnIndex] = allow ? 1 : 0;\n };\n Matrix.prototype.get = function (rowIndex, columnIndex, navigator, action, validator) {\n var tmp = columnIndex;\n if (rowIndex + navigator[0] < 0) {\n return [rowIndex, columnIndex];\n }\n rowIndex = Math.max(0, Math.min(rowIndex + navigator[0], this.rows));\n columnIndex = Math.max(0, Math.min(columnIndex + navigator[1], this.matrix[rowIndex].length - 1));\n if (tmp + navigator[1] > this.matrix[rowIndex].length - 1 && validator(rowIndex, columnIndex, action)) {\n return [rowIndex, tmp];\n }\n var first = this.first(this.matrix[rowIndex], columnIndex, navigator, true, action);\n columnIndex = first === null ? tmp : first;\n var val = getValue(rowIndex + \".\" + columnIndex, this.matrix);\n return this.inValid(val) || !validator(rowIndex, columnIndex, action) ?\n this.get(rowIndex, tmp, navigator, action, validator) : [rowIndex, columnIndex];\n };\n Matrix.prototype.first = function (vector, index, navigator, moveTo, action) {\n if (((index < 0 || index === vector.length) && this.inValid(vector[index])\n && (action !== 'upArrow' && action !== 'downArrow')) || !vector.some(function (v) { return v === 1; })) {\n return null;\n }\n return !this.inValid(vector[index]) ? index :\n this.first(vector, (['upArrow', 'downArrow', 'shiftUp', 'shiftDown'].indexOf(action) !== -1) ? moveTo ? 0 : ++index : index + navigator[1], navigator, false, action);\n };\n Matrix.prototype.select = function (rowIndex, columnIndex) {\n rowIndex = Math.max(0, Math.min(rowIndex, this.rows));\n columnIndex = Math.max(0, Math.min(columnIndex, this.matrix[rowIndex].length - 1));\n this.current = [rowIndex, columnIndex];\n };\n Matrix.prototype.generate = function (rows, selector) {\n var _this = this;\n this.rows = rows.length - 1;\n this.matrix = [];\n rows.forEach(function (row, rIndex) {\n var cells = row.cells.filter(function (c) { return c.isSpanned !== true; });\n _this.columns = Math.max(cells.length - 1, _this.columns | 0);\n cells.forEach(function (cell, cIndex) {\n _this.set(rIndex, cIndex, selector(row, cell));\n });\n });\n return this.matrix;\n };\n Matrix.prototype.inValid = function (value) {\n return value === 0 || value === undefined;\n };\n return Matrix;\n}());\nexport { Matrix };\n/**\n * @hidden\n */\nvar ContentFocus = /** @class */ (function () {\n function ContentFocus(parent) {\n var _this = this;\n this.matrix = new Matrix();\n this.parent = parent;\n this.keyActions = {\n 'rightArrow': [0, 1],\n 'tab': [0, 1],\n 'leftArrow': [0, -1],\n 'shiftTab': [0, -1],\n 'upArrow': [-1, 0],\n 'downArrow': [1, 0],\n 'shiftUp': [-1, 0],\n 'shiftDown': [1, 0],\n 'shiftRight': [0, 1],\n 'shiftLeft': [0, -1],\n 'enter': [1, 0],\n 'shiftEnter': [-1, 0]\n };\n this.indexesByKey = function (action) {\n var opt = {\n 'home': [_this.matrix.current[0], -1, 0, 1],\n 'end': [_this.matrix.current[0], _this.matrix.columns + 1, 0, -1],\n 'ctrlHome': [0, -1, 0, 1],\n 'ctrlEnd': [_this.matrix.rows, _this.matrix.columns + 1, 0, -1]\n };\n return opt[action] || null;\n };\n }\n ContentFocus.prototype.getTable = function () {\n return (this.parent.frozenColumns ?\n this.parent.getContent().querySelector('.e-movablecontent .e-table') :\n this.parent.getContentTable());\n };\n ContentFocus.prototype.onKeyPress = function (e) {\n var navigator = this.keyActions[e.action];\n var current = this.getCurrentFromAction(e.action, navigator, e.action in this.keyActions, e);\n if (!current) {\n return;\n }\n if ((['tab', 'shiftTab'].indexOf(e.action) > -1 && this.matrix.current || []).toString() === current.toString()) {\n if (current.toString() === [this.matrix.rows, this.matrix.columns].toString() ||\n current.toString() === [0, 0].toString()) {\n return false;\n }\n }\n this.matrix.select(current[0], current[1]);\n };\n ContentFocus.prototype.getCurrentFromAction = function (action, navigator, isPresent, e) {\n if (navigator === void 0) { navigator = [0, 0]; }\n if (!isPresent && !this.indexesByKey(action)) {\n return null;\n }\n if (!this.shouldFocusChange(e)) {\n return this.matrix.current;\n }\n var _a = this.indexesByKey(action) || this.matrix.current.concat(navigator), rowIndex = _a[0], cellIndex = _a[1], rN = _a[2], cN = _a[3];\n var current = this.matrix.get(rowIndex, cellIndex, [rN, cN], action, this.validator());\n return current;\n };\n ContentFocus.prototype.onClick = function (e, force) {\n var target = e.target;\n target = (target.classList.contains('e-rowcell') ? target : closest(target, 'td'));\n target = target ? target : closest(e.target, 'td.e-detailrowcollapse')\n || closest(e.target, 'td.e-detailrowexpand');\n target = closest(e.target, 'td.e-detailcell') ?\n isNullOrUndefined(closest(closest(e.target, '.e-grid'), 'td.e-detailcell')) ? null : target : target;\n target = target && closest(target, 'table').classList.contains('e-table') ? target : null;\n if (!target) {\n return false;\n }\n var _a = [target.parentElement.rowIndex, target.cellIndex], rowIndex = _a[0], cellIndex = _a[1];\n var _b = this.matrix.current, oRowIndex = _b[0], oCellIndex = _b[1];\n var val = getValue(rowIndex + \".\" + cellIndex, this.matrix.matrix);\n if (this.matrix.inValid(val) || (!force && oRowIndex === rowIndex && oCellIndex === cellIndex)) {\n return false;\n }\n this.matrix.select(rowIndex, cellIndex);\n };\n ContentFocus.prototype.getFocusInfo = function () {\n var info = {};\n var _a = this.matrix.current, _b = _a[0], rowIndex = _b === void 0 ? 0 : _b, _c = _a[1], cellIndex = _c === void 0 ? 0 : _c;\n this.matrix.current = [rowIndex, cellIndex];\n info.element = this.getTable().rows[rowIndex].cells[cellIndex];\n if (!info.element) {\n return info;\n }\n info.elementToFocus = !info.element.classList.contains('e-unboundcell') && !info.element.classList.contains('e-detailcell')\n && !info.element.classList.contains('e-templatecell') ? this.getFocusable(info.element) : info.element;\n info.outline = true;\n return info;\n };\n ContentFocus.prototype.getFocusable = function (element) {\n var query = 'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n if (this.parent.isEdit) {\n query = 'input:not([type=\"hidden\"]), select:not([aria-hidden=\"true\"]), textarea';\n }\n var child = [].slice.call(element.querySelectorAll(query));\n /* Select the first focusable child element\n * if no child found then select the cell itself.\n * if Grid is in editable state, check for editable control inside child.\n */\n return child.length ? child[0] : element;\n };\n ContentFocus.prototype.selector = function (row, cell) {\n var types = [CellType.Expand, CellType.GroupCaption, CellType.CaptionSummary, CellType.GroupSummary];\n return ((row.isDataRow && cell.visible && (cell.isDataCell || cell.isTemplate))\n || (row.isDataRow && cell.cellType === CellType.DetailExpand)\n || (!row.isDataRow && types.indexOf(cell.cellType) > -1)\n || (cell.column && cell.column.type === 'checkbox')\n || (cell.cellType === CellType.CommandColumn))\n && !(row.edit === 'delete' && row.isDirty);\n };\n ContentFocus.prototype.jump = function (action, current) {\n var frozenSwap = this.parent.frozenColumns > 0 &&\n ((action === 'leftArrow' || action === 'shiftTab') && current[1] === 0);\n var enterFrozen = this.parent.frozenRows !== 0 && action === 'shiftEnter';\n var info = {\n swap: ((action === 'upArrow' || enterFrozen) && current[0] === 0) || frozenSwap,\n toHeader: (action === 'upArrow' || enterFrozen) && current[0] === 0,\n toFrozen: frozenSwap\n };\n return info;\n };\n ContentFocus.prototype.getNextCurrent = function (previous, swap, active, action) {\n if (previous === void 0) { previous = []; }\n var current = [];\n if (action === 'rightArrow' || action === 'tab') {\n current[0] = previous[0];\n current[1] = -1;\n }\n else if (action === 'downArrow' || action === 'enter') {\n current[0] = -1;\n current[1] = previous[1];\n }\n return current;\n };\n ContentFocus.prototype.generateRows = function (rows, optionals) {\n var matrix = optionals.matrix, handlerInstance = optionals.handlerInstance;\n var len = handlerInstance.matrix.matrix.length;\n var defaultLen = this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar' ? len + 1 : len;\n handlerInstance.matrix.matrix = handlerInstance.matrix.matrix.slice(0, defaultLen); //Header matrix update.\n handlerInstance.matrix.rows = defaultLen;\n (_a = handlerInstance.matrix.matrix).push.apply(_a, matrix);\n handlerInstance.matrix.rows += matrix.length;\n var _a;\n };\n ContentFocus.prototype.getInfo = function (e) {\n var info = this.getFocusInfo();\n var _a = this.matrix.current, rIndex = _a[0], cIndex = _a[1];\n var isData = info.element.classList.contains('e-rowcell');\n var isSelectable = isData || (e && e.action !== 'enter' && (info.element.classList.contains('e-detailrowcollapse')\n || info.element.classList.contains('e-detailrowexpand')));\n var _b = [Math.min(parseInt(info.element.parentElement.getAttribute('aria-rowindex'), 10), rIndex),\n Math.min(parseInt(info.element.getAttribute('aria-colindex'), 10), cIndex)], rowIndex = _b[0], cellIndex = _b[1];\n return { isContent: true, isDataCell: isData, indexes: [rowIndex, cellIndex], isSelectable: isSelectable };\n };\n ContentFocus.prototype.validator = function () {\n var table = this.getTable();\n return function (rowIndex, cellIndex, action) {\n var cell = table.rows[rowIndex].cells[cellIndex];\n if (action === 'enter' || action === 'shiftEnter') {\n return cell.classList.contains('e-rowcell');\n }\n if ((action === 'shiftUp' || action === 'shiftDown') && cell.classList.contains('e-rowcell')) {\n return true;\n }\n else if (action !== 'shiftUp' && action !== 'shiftDown') {\n return cell.getBoundingClientRect().width !== 0;\n }\n return false;\n };\n };\n ContentFocus.prototype.shouldFocusChange = function (e) {\n var _a = this.matrix.current, _b = _a[0], rIndex = _b === void 0 ? -1 : _b, _c = _a[1], cIndex = _c === void 0 ? -1 : _c;\n if (rIndex < 0 || cIndex < 0) {\n return true;\n }\n var cell = getValue(rIndex + \".cells.\" + cIndex, this.getTable().rows);\n if (!cell) {\n return true;\n }\n return e.action === 'enter' || e.action === 'shiftEnter' ?\n cell.classList.contains('e-rowcell') && !cell.classList.contains('e-unboundcell')\n && !cell.classList.contains('e-templatecell') && !cell.classList.contains('e-detailcell') : true;\n };\n return ContentFocus;\n}());\nexport { ContentFocus };\n/**\n * @hidden\n */\nvar HeaderFocus = /** @class */ (function (_super) {\n __extends(HeaderFocus, _super);\n function HeaderFocus(parent) {\n return _super.call(this, parent) || this;\n }\n HeaderFocus.prototype.getTable = function () {\n return (this.parent.frozenColumns ? this.parent.getHeaderContent().querySelector('.e-movableheader .e-table') :\n this.parent.getHeaderTable());\n };\n HeaderFocus.prototype.onClick = function (e) {\n var target = e.target;\n target = (target.classList.contains('e-headercell') ? target : closest(target, 'th'));\n if (!target && this.parent.frozenRows !== 0) {\n target = (e.target.classList.contains('e-rowcell') ? e.target :\n closest(e.target, 'td'));\n }\n if (!target) {\n return;\n }\n var _a = [target.parentElement.rowIndex, target.cellIndex], rowIndex = _a[0], cellIndex = _a[1];\n var val = getValue(rowIndex + \".\" + cellIndex, this.matrix.matrix);\n if (this.matrix.inValid(val)) {\n return false;\n }\n this.matrix.select(target.parentElement.rowIndex, target.cellIndex);\n };\n HeaderFocus.prototype.getFocusInfo = function () {\n var info = {};\n var _a = this.matrix.current, _b = _a[0], rowIndex = _b === void 0 ? 0 : _b, _c = _a[1], cellIndex = _c === void 0 ? 0 : _c;\n info.element = this.getTable().rows[rowIndex].cells[cellIndex];\n info.elementToFocus = this.getFocusable(info.element);\n info.outline = !info.element.classList.contains('e-filterbarcell');\n return info;\n };\n HeaderFocus.prototype.selector = function (row, cell) {\n return (cell.visible && (cell.column.field !== undefined || cell.isTemplate)) || cell.column.type === 'checkbox' ||\n cell.cellType === CellType.StackedHeader;\n };\n HeaderFocus.prototype.jump = function (action, current) {\n var frozenSwap = this.parent.frozenColumns > 0 &&\n (action === 'leftArrow' || action === 'shiftTab') && current[1] === 0;\n var enterFrozen = this.parent.frozenRows !== 0 && action === 'enter';\n return {\n swap: ((action === 'downArrow' || enterFrozen) && current[0] === this.matrix.matrix.length - 1) ||\n frozenSwap,\n toHeader: frozenSwap,\n toFrozen: frozenSwap\n };\n };\n HeaderFocus.prototype.getNextCurrent = function (previous, swap, active, action) {\n if (previous === void 0) { previous = []; }\n var current = [];\n if (action === 'upArrow' || action === 'shiftEnter') {\n current[0] = this.matrix.matrix.length;\n current[1] = previous[1];\n }\n else if (action === 'rightArrow' || action === 'tab') {\n current[0] = previous[0];\n current[1] = -1;\n }\n return current;\n };\n HeaderFocus.prototype.generateRows = function (rows) {\n var _this = this;\n var length = this.matrix.matrix.length;\n if (this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar') {\n this.matrix.rows = ++this.matrix.rows;\n rows[0].cells.forEach(function (cell, cIndex) {\n return _this.matrix.set(length, cIndex, cell.visible && cell.column.allowFiltering !== false);\n });\n }\n };\n HeaderFocus.prototype.getInfo = function (e) {\n return extend(_super.prototype.getInfo.call(this, e), { isContent: false, isHeader: true });\n };\n HeaderFocus.prototype.validator = function () {\n return function () { return true; };\n };\n HeaderFocus.prototype.shouldFocusChange = function (e) {\n var _a = this.matrix.current, rIndex = _a[0], cIndex = _a[1];\n if (rIndex < 0 || cIndex < 0) {\n return true;\n }\n var cell = getValue(rIndex + \".cells.\" + cIndex, this.getTable().rows);\n if (!cell) {\n return true;\n }\n return e.action === 'enter' || e.action === 'altDownArrow' ? !cell.classList.contains('e-headercell') : true;\n };\n return HeaderFocus;\n}(ContentFocus));\nexport { HeaderFocus };\nvar FixedContentFocus = /** @class */ (function (_super) {\n __extends(FixedContentFocus, _super);\n function FixedContentFocus() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n FixedContentFocus.prototype.getTable = function () {\n return this.parent.getContent().querySelector('.e-frozencontent .e-table');\n };\n FixedContentFocus.prototype.jump = function (action, current) {\n var enterFrozen = this.parent.frozenRows !== 0 && action === 'shiftEnter';\n return {\n swap: (action === 'upArrow' || enterFrozen) && current[0] === 0\n || ((action === 'tab' || action === 'rightArrow') && current[1] === this.matrix.columns),\n toHeader: (action === 'upArrow' || enterFrozen) && current[0] === 0,\n toFrozen: (action === 'upArrow' || enterFrozen) && current[0] === 0\n };\n };\n FixedContentFocus.prototype.getNextCurrent = function (previous, swap, active, action) {\n if (previous === void 0) { previous = []; }\n var current = [];\n if (action === 'leftArrow' || action === 'shiftTab') {\n current[0] = previous[0];\n current[1] = active.matrix.columns + 1;\n }\n else if (action === 'downArrow' || action === 'enter') {\n current[0] = -1;\n current[1] = previous[1];\n }\n return current;\n };\n return FixedContentFocus;\n}(ContentFocus));\nexport { FixedContentFocus };\nvar FixedHeaderFocus = /** @class */ (function (_super) {\n __extends(FixedHeaderFocus, _super);\n function FixedHeaderFocus() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n FixedHeaderFocus.prototype.jump = function (action, current) {\n var enterFrozen = this.parent.frozenRows !== 0 && action === 'enter';\n return {\n swap: (action === 'downArrow' || enterFrozen) && current[0] === this.matrix.matrix.length - 1\n || ((action === 'rightArrow' || action === 'tab') && current[1] === this.matrix.columns),\n toHeader: (action === 'rightArrow' || action === 'tab') && current[1] === this.matrix.columns,\n toFrozen: (action === 'downArrow' || enterFrozen) && current[0] === this.matrix.matrix.length - 1\n };\n };\n FixedHeaderFocus.prototype.getTable = function () {\n return (this.parent.getHeaderContent().querySelector('.e-frozenheader .e-table'));\n };\n FixedHeaderFocus.prototype.getNextCurrent = function (previous, swap, active, action) {\n if (previous === void 0) { previous = []; }\n var current = [];\n if (action === 'leftArrow' || action === 'shiftTab') {\n current[0] = previous[0];\n current[1] = active.matrix.columns + 1;\n }\n else if (action === 'upArrow' || action === 'shiftEnter') {\n current[0] = this.matrix.matrix.length;\n current[1] = previous[1];\n }\n return current;\n };\n return FixedHeaderFocus;\n}(HeaderFocus));\nexport { FixedHeaderFocus };\n/** @hidden */\nvar SearchBox = /** @class */ (function () {\n function SearchBox(searchBox) {\n this.searchBox = searchBox;\n }\n SearchBox.prototype.searchFocus = function (args) {\n args.target.parentElement.classList.add('e-input-focus');\n };\n SearchBox.prototype.searchBlur = function (args) {\n args.target.parentElement.classList.remove('e-input-focus');\n };\n SearchBox.prototype.wireEvent = function () {\n if (this.searchBox) {\n EventHandler.add(this.searchBox, 'focus', this.searchFocus, this);\n EventHandler.add(this.searchBox, 'blur', this.searchBlur, this);\n }\n };\n SearchBox.prototype.unWireEvent = function () {\n if (this.searchBox) {\n EventHandler.remove(this.searchBox, 'focus', this.searchFocus);\n EventHandler.remove(this.searchBox, 'blur', this.searchBlur);\n }\n };\n return SearchBox;\n}());\nexport { SearchBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the paging behavior of the Grid.\n */\nvar PageSettings = /** @class */ (function (_super) {\n __extends(PageSettings, _super);\n function PageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(12)\n ], PageSettings.prototype, \"pageSize\", void 0);\n __decorate([\n Property(8)\n ], PageSettings.prototype, \"pageCount\", void 0);\n __decorate([\n Property(1)\n ], PageSettings.prototype, \"currentPage\", void 0);\n __decorate([\n Property()\n ], PageSettings.prototype, \"totalRecordsCount\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"enableQueryString\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"pageSizes\", void 0);\n __decorate([\n Property(null)\n ], PageSettings.prototype, \"template\", void 0);\n return PageSettings;\n}(ChildProperty));\nexport { PageSettings };\n","var __assign = (this && this.__assign) || Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n};\nimport { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, isUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { remove, createElement, closest } from '@syncfusion/ej2-base';\nimport { Query } from '@syncfusion/ej2-data';\nimport { setCssInGridPopUp, getPosition, parentsUntil, addRemoveActiveClasses, removeAddCboxClasses } from '../base/util';\nimport * as events from '../base/constant';\nimport { RenderType } from '../base/enum';\n/**\n * The `Selection` module is used to handle cell and row selection.\n */\nvar Selection = /** @class */ (function () {\n /**\n * Constructor for the Grid selection module\n * @hidden\n */\n function Selection(parent, selectionSettings, locator) {\n //Internal variables \n /**\n * @hidden\n */\n this.selectedRowIndexes = [];\n /**\n * @hidden\n */\n this.selectedRowCellIndexes = [];\n /**\n * @hidden\n */\n this.selectedRecords = [];\n this.preventFocus = false;\n this.isMultiShiftRequest = false;\n this.isMultiCtrlRequest = false;\n this.enableSelectMultiTouch = false;\n this.selectedRowState = {};\n this.totalRecordsCount = 0;\n this.chkAllCollec = [];\n this.isCheckedOnAdd = false;\n this.persistSelectedData = [];\n this.isCancelDeSelect = false;\n this.isPreventCellSelect = false;\n this.parent = parent;\n this.selectionSettings = selectionSettings;\n this.factory = locator.getService('rendererFactory');\n this.focus = locator.getService('focus');\n this.addEventListener();\n }\n Selection.prototype.initializeSelection = function () {\n EventHandler.add(this.parent.getContent(), 'mousedown', this.mouseDownHandler, this);\n };\n /**\n * The function used to trigger onActionBegin\n * @return {void}\n * @hidden\n */\n Selection.prototype.onActionBegin = function (args, type) {\n this.parent.trigger(type, this.fDataUpdate(args));\n };\n Selection.prototype.fDataUpdate = function (args) {\n if (args.cellIndex || args.rowIndex) {\n var rowObj = this.getRowObj(isNullOrUndefined(args.rowIndex) ? isNullOrUndefined(args.cellIndex) ?\n this.currentIndex : args.cellIndex.rowIndex : args.rowIndex);\n args.foreignKeyData = rowObj.foreignKeyData;\n }\n return args;\n };\n /**\n * The function used to trigger onActionComplete\n * @return {void}\n * @hidden\n */\n Selection.prototype.onActionComplete = function (args, type) {\n this.parent.trigger(type, this.fDataUpdate(args));\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Selection.prototype.getModuleName = function () {\n return 'selection';\n };\n /**\n * To destroy the selection\n * @return {void}\n * @hidden\n */\n Selection.prototype.destroy = function () {\n this.hidePopUp();\n this.clearSelection();\n this.removeEventListener();\n EventHandler.remove(this.parent.getContent(), 'mousedown', this.mouseDownHandler);\n };\n Selection.prototype.isEditing = function () {\n return (this.parent.editSettings.mode === 'Normal' || (this.parent.editSettings.mode === 'Batch' &&\n this.parent.editModule.formObj && !this.parent.editModule.formObj.validate())) &&\n this.parent.isEdit && !this.parent.isPersistSelection;\n };\n Selection.prototype.getSelectedMovableRow = function (index) {\n var gObj = this.parent;\n if (gObj.getFrozenColumns()) {\n return gObj.getMovableRowByIndex(index);\n }\n return null;\n };\n /**\n * Selects a row by the given index.\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Selection.prototype.selectRow = function (index, isToggle) {\n var gObj = this.parent;\n var selectedRow = gObj.getRowByIndex(index);\n var selectedMovableRow = this.getSelectedMovableRow(index);\n var selectData = gObj.getCurrentViewRecords()[index];\n if (!this.isRowType() || !selectedRow || this.isEditing()) {\n // if (this.isEditing()) {\n // gObj.selectedRowIndex = index;\n // }\n return;\n }\n var isRowSelected = selectedRow.hasAttribute('aria-selected');\n isToggle = !isToggle ? isToggle : index === this.prevRowIndex && isRowSelected;\n var args;\n var can = 'cancel';\n if (!isToggle) {\n args = {\n data: selectData, rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest, row: selectedRow,\n previousRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex, target: this.target,\n cancel: false\n };\n args = this.addMovableArgs(args, selectedMovableRow);\n this.onActionBegin(args, events.rowSelecting);\n }\n if (!isNullOrUndefined(args) && args[can] === true) {\n return;\n }\n this.clearRow();\n if (!isToggle) {\n this.updateRowSelection(selectedRow, index);\n if (gObj.getFrozenColumns()) {\n this.updateRowSelection(selectedMovableRow, index);\n }\n gObj.selectedRowIndex = index;\n }\n this.updateRowProps(index);\n if (!isToggle) {\n args = {\n data: selectData, rowIndex: index,\n row: selectedRow, previousRow: gObj.getRows()[this.prevRowIndex],\n previousRowIndex: this.prevRowIndex, target: this.target\n };\n args = this.addMovableArgs(args, selectedMovableRow);\n this.onActionComplete(args, events.rowSelected);\n }\n };\n Selection.prototype.addMovableArgs = function (targetObj, mRow) {\n if (this.parent.getFrozenColumns()) {\n var mObj = { mRow: mRow, previousMovRow: this.parent.getMovableRows()[this.prevRowIndex] };\n targetObj = __assign({}, targetObj, mObj);\n }\n return targetObj;\n };\n /**\n * Selects a range of rows from start and end row indexes.\n * @param {number} startIndex - Specifies the start row index.\n * @param {number} endIndex - Specifies the end row index.\n * @return {void}\n */\n Selection.prototype.selectRowsByRange = function (startIndex, endIndex) {\n this.selectRows(this.getCollectionFromIndexes(startIndex, endIndex));\n this.parent.selectedRowIndex = endIndex;\n };\n /**\n * Selects a collection of rows by index.\n * @param {number[]} rowIndexes - Specifies an array of row indexes.\n * @return {void}\n */\n Selection.prototype.selectRows = function (rowIndexes) {\n var gObj = this.parent;\n var rowIndex = !this.isSingleSel() ? rowIndexes[0] : rowIndexes[rowIndexes.length - 1];\n var selectedRow = gObj.getRowByIndex(rowIndex);\n var selectedMovableRow = this.getSelectedMovableRow(rowIndex);\n var frzCols = gObj.getFrozenColumns();\n var selectedData = gObj.getCurrentViewRecords()[rowIndexes[0]];\n var can = 'cancel';\n if (!this.isRowType() || this.isEditing()) {\n return;\n }\n var args = {\n rowIndexes: rowIndexes, row: selectedRow, rowIndex: rowIndex, target: this.target,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n data: selectedData, cancel: false\n };\n args = this.addMovableArgs(args, selectedMovableRow);\n this.onActionBegin(args, events.rowSelecting);\n if (!isNullOrUndefined(args) && args[can] === true) {\n return;\n }\n this.clearRow();\n if (!this.isSingleSel()) {\n for (var _i = 0, rowIndexes_1 = rowIndexes; _i < rowIndexes_1.length; _i++) {\n var rowIdx = rowIndexes_1[_i];\n this.updateRowSelection(gObj.getRowByIndex(rowIdx), rowIdx);\n if (frzCols) {\n this.updateRowSelection(gObj.getMovableRowByIndex(rowIdx), rowIdx);\n }\n this.updateRowProps(rowIndex);\n }\n }\n else {\n this.updateRowSelection(gObj.getRowByIndex(rowIndex), rowIndex);\n if (frzCols) {\n this.updateRowSelection(gObj.getMovableRowByIndex(rowIndex), rowIndex);\n }\n this.updateRowProps(rowIndex);\n }\n args = {\n rowIndexes: rowIndexes, row: selectedRow, rowIndex: rowIndex, target: this.target,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n data: selectedData\n };\n args = this.addMovableArgs(args, selectedMovableRow);\n this.onActionComplete(args, events.rowSelected);\n };\n /**\n * Select rows with existing row selection by passing row indexes.\n * @param {number} startIndex - Specifies the row indexes.\n * @return {void}\n * @hidden\n */\n Selection.prototype.addRowsToSelection = function (rowIndexes) {\n var gObj = this.parent;\n var can = 'cancel';\n var selectedRow = !this.isSingleSel() ? gObj.getRowByIndex(rowIndexes[0]) :\n gObj.getRowByIndex(rowIndexes[rowIndexes.length - 1]);\n var selectedMovableRow = !this.isSingleSel() ? this.getSelectedMovableRow(rowIndexes[0]) :\n this.getSelectedMovableRow(rowIndexes[rowIndexes.length - 1]);\n var frzCols = gObj.getFrozenColumns();\n if (!this.isRowType() || this.isEditing()) {\n return;\n }\n var args;\n for (var _i = 0, rowIndexes_2 = rowIndexes; _i < rowIndexes_2.length; _i++) {\n var rowIndex = rowIndexes_2[_i];\n var rowObj = this.getRowObj(rowIndex);\n var isUnSelected = this.selectedRowIndexes.indexOf(rowIndex) > -1;\n gObj.selectedRowIndex = rowIndex;\n if (isUnSelected) {\n this.rowDeselect(events.rowDeselecting, [rowIndex], [rowObj.data], [selectedRow], [rowObj.foreignKeyData]);\n this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(rowIndex), 1);\n this.selectedRecords.splice(this.selectedRecords.indexOf(selectedRow), 1);\n selectedRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedRow, false, null, 'e-selectionbackground', 'e-active');\n if (selectedMovableRow) {\n this.selectedRecords.splice(this.selectedRecords.indexOf(selectedMovableRow), 1);\n selectedMovableRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedMovableRow, false, null, 'e-selectionbackground', 'e-active');\n }\n this.rowDeselect(events.rowDeselected, [rowIndex], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], [selectedMovableRow]);\n }\n else {\n args = {\n data: rowObj.data, rowIndex: rowIndex, row: selectedRow, target: this.target,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n foreignKeyData: rowObj.foreignKeyData, cancel: false\n };\n args = this.addMovableArgs(args, selectedMovableRow);\n this.onActionBegin(args, events.rowSelecting);\n if (!isNullOrUndefined(args) && args[can] === true) {\n return;\n }\n if (this.isSingleSel()) {\n this.clearRow();\n }\n this.updateRowSelection(selectedRow, rowIndex);\n if (frzCols) {\n this.updateRowSelection(selectedMovableRow, rowIndex);\n }\n }\n this.updateRowProps(rowIndex);\n if (!isUnSelected) {\n args = {\n data: rowObj.data, rowIndex: rowIndex, row: selectedRow, target: this.target,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n foreignKeyData: rowObj.foreignKeyData\n };\n args = this.addMovableArgs(args, selectedMovableRow);\n this.onActionComplete(args, events.rowSelected);\n }\n if (this.isSingleSel()) {\n break;\n }\n }\n };\n Selection.prototype.getCollectionFromIndexes = function (startIndex, endIndex) {\n var indexes = [];\n var _a = (startIndex < endIndex) ?\n { i: startIndex, max: endIndex } : { i: endIndex, max: startIndex }, i = _a.i, max = _a.max;\n for (; i <= max; i++) {\n indexes.push(i);\n }\n if (startIndex > endIndex) {\n indexes.reverse();\n }\n return indexes;\n };\n Selection.prototype.clearRow = function () {\n this.clearRowSelection();\n this.selectedRowIndexes = [];\n this.selectedRecords = [];\n this.parent.selectedRowIndex = -1;\n if (this.isSingleSel() && this.parent.isPersistSelection) {\n this.selectedRowState = {};\n }\n };\n Selection.prototype.updateRowProps = function (startIndex) {\n this.prevRowIndex = startIndex;\n this.isRowSelected = this.selectedRowIndexes.length && true;\n };\n Selection.prototype.updatePersistCollection = function (selectedRow, chkState) {\n if (this.parent.isPersistSelection && !isNullOrUndefined(selectedRow)) {\n var rowObj = this.getRowObj(selectedRow);\n var pKey = rowObj.data ? rowObj.data[this.primaryKey] : null;\n if (pKey === null) {\n return;\n }\n rowObj.isSelected = chkState;\n if (chkState) {\n this.selectedRowState[pKey] = chkState;\n if (this.persistSelectedData.indexOf(rowObj.data) < 0) {\n this.persistSelectedData.push(rowObj.data);\n }\n }\n else {\n delete (this.selectedRowState[pKey]);\n if (this.persistSelectedData.indexOf(rowObj.data) >= 0) {\n this.persistSelectedData.splice(this.persistSelectedData.indexOf(rowObj.data), 1);\n }\n }\n }\n };\n Selection.prototype.updateCheckBoxes = function (row, chkState) {\n if (!isNullOrUndefined(row)) {\n var chkBox = row.querySelector('.e-checkselect');\n if (!isNullOrUndefined(chkBox)) {\n removeAddCboxClasses(chkBox.nextElementSibling, chkState);\n if (isNullOrUndefined(this.checkedTarget) || (!isNullOrUndefined(this.checkedTarget)\n && !this.checkedTarget.classList.contains('e-checkselectall'))) {\n this.setCheckAllState();\n }\n }\n }\n };\n Selection.prototype.updateRowSelection = function (selectedRow, startIndex) {\n if (!selectedRow) {\n return;\n }\n this.selectedRowIndexes.push(startIndex);\n var len = this.selectedRowIndexes.length;\n if (this.parent.getFrozenColumns() && len > 1) {\n if ((this.selectedRowIndexes[len - 2] === this.selectedRowIndexes[len - 1])) {\n this.selectedRowIndexes.pop();\n }\n }\n this.selectedRecords.push(selectedRow);\n selectedRow.setAttribute('aria-selected', 'true');\n this.updatePersistCollection(selectedRow, true);\n this.updateCheckBoxes(selectedRow, true);\n this.addRemoveClassesForRow(selectedRow, true, null, 'e-selectionbackground', 'e-active');\n if (!this.preventFocus) {\n var target = this.focus.getPrevIndexes().cellIndex ?\n selectedRow.cells[this.focus.getPrevIndexes().cellIndex] :\n selectedRow.querySelector('.e-selectionbackground:not(.e-hide)');\n if (!target) {\n return;\n }\n this.focus.onClick({ target: target }, true);\n }\n };\n /**\n * Deselects the currently selected rows and cells.\n * @return {void}\n */\n Selection.prototype.clearSelection = function () {\n if (!this.parent.isPersistSelection || (this.parent.isPersistSelection && !this.parent.isEdit) ||\n (!isNullOrUndefined(this.checkedTarget) && this.checkedTarget.classList.contains('e-checkselectall'))) {\n var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');\n if (span.classList.contains('e-rowselect')) {\n span.classList.remove('e-spanclicked');\n }\n this.clearRowSelection();\n this.clearCellSelection();\n this.enableSelectMultiTouch = false;\n }\n };\n /**\n * Deselects the currently selected rows.\n * @return {void}\n */\n Selection.prototype.clearRowSelection = function () {\n var _this = this;\n if (this.isRowSelected) {\n var gObj = this.parent;\n var rows = this.parent.getDataRows();\n var data = [];\n var row = [];\n var mRow = [];\n var rowIndex = [];\n var frzCols = gObj.getFrozenColumns();\n var foreignKeyData = [];\n var currentViewData = this.parent.getCurrentViewRecords();\n for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {\n var currentRow = this.parent.getDataRows()[this.selectedRowIndexes[i]];\n var rowObj = this.getRowObj(currentRow);\n if (rowObj) {\n data.push(rowObj.data);\n row.push(currentRow);\n rowIndex.push(this.selectedRowIndexes[i]);\n foreignKeyData.push(rowObj.foreignKeyData);\n }\n if (frzCols) {\n mRow.push(gObj.getMovableRows()[this.selectedRowIndexes[i]]);\n }\n }\n this.rowDeselect(events.rowDeselecting, rowIndex, data, row, foreignKeyData, mRow);\n if (this.isCancelDeSelect === true) {\n return;\n }\n rows.filter(function (record) { return record.hasAttribute('aria-selected'); }).forEach(function (ele) {\n ele.removeAttribute('aria-selected');\n _this.addRemoveClassesForRow(ele, false, true, 'e-selectionbackground', 'e-active');\n _this.updatePersistCollection(ele, false);\n _this.updateCheckBoxes(ele);\n });\n for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {\n var movableRow = this.getSelectedMovableRow(this.selectedRowIndexes[i]);\n if (movableRow) {\n movableRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(movableRow, false, true, 'e-selectionbackground', 'e-active');\n this.updatePersistCollection(movableRow, false);\n }\n }\n this.selectedRowIndexes = [];\n this.selectedRecords = [];\n this.isRowSelected = false;\n this.parent.selectedRowIndex = -1;\n this.rowDeselect(events.rowDeselected, rowIndex, data, row, foreignKeyData, mRow);\n }\n };\n Selection.prototype.rowDeselect = function (type, rowIndex, data, row, foreignKeyData, mRow) {\n var cancl = 'cancel';\n this.updatePersistCollection(row[0], false);\n var rowDeselectObj = { rowIndex: rowIndex, data: data, row: row, foreignKeyData: foreignKeyData, cancel: false };\n this.parent.trigger(type, this.parent.getFrozenColumns() ? __assign({}, rowDeselectObj, { mRow: mRow }) : rowDeselectObj);\n this.isCancelDeSelect = rowDeselectObj[cancl];\n this.updateCheckBoxes(row[0]);\n };\n Selection.prototype.getRowObj = function (row) {\n if (row === void 0) { row = this.currentIndex; }\n if (isNullOrUndefined(row)) {\n return {};\n }\n if (typeof row === 'number') {\n row = this.parent.getRowByIndex(row);\n }\n if (row) {\n return this.parent.getRowObjectFromUID(row.getAttribute('data-uid')) || {};\n }\n return {};\n };\n Selection.prototype.getSelectedMovableCell = function (cellIndex) {\n var gObj = this.parent;\n var frzCols = gObj.getFrozenColumns();\n if (frzCols) {\n if (cellIndex.cellIndex >= frzCols) {\n return gObj.getMovableCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n }\n return null;\n }\n return null;\n };\n /**\n * Selects a cell by the given index.\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Selection.prototype.selectCell = function (cellIndex, isToggle) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.getSelectedMovableCell(cellIndex);\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n }\n var selectedTable;\n var cIdx;\n this.currentIndex = cellIndex.rowIndex;\n var args;\n var cncl = 'cancel';\n var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];\n if (!this.isCellType() || !selectedCell || this.isEditing()) {\n return;\n }\n var isCellSelected = selectedCell.classList.contains('e-cellselectionbackground');\n isToggle = !isToggle ? isToggle : (!isUndefined(this.prevCIdxs) &&\n cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&\n isCellSelected);\n if (!isToggle) {\n args = {\n data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,\n previousRowCell: this.prevECIdxs ?\n this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined,\n cancel: false\n };\n this.onActionBegin(args, events.cellSelecting);\n }\n if (!isNullOrUndefined(args) && args[cncl] === true) {\n return;\n }\n this.clearCell();\n if (!isToggle) {\n this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);\n }\n this.updateCellProps(cellIndex, cellIndex);\n if (!isToggle) {\n this.onActionComplete({\n data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,\n previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,\n previousRowCell: this.prevECIdxs ?\n this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n }, events.cellSelected);\n }\n };\n Selection.prototype.getCellIndex = function (rIdx, cIdx) {\n return (this.parent.getFrozenColumns() ? (cIdx >= this.parent.getFrozenColumns() ? this.parent.getMovableCellFromIndex(rIdx, cIdx)\n : this.parent.getCellFromIndex(rIdx, cIdx)) : this.parent.getCellFromIndex(rIdx, cIdx));\n };\n /**\n * Selects a range of cells from start and end indexes.\n * @param {IIndex} startIndex - Specifies the row and column's start index.\n * @param {IIndex} endIndex - Specifies the row and column's end index.\n * @return {void}\n */\n Selection.prototype.selectCellsByRange = function (startIndex, endIndex) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.getSelectedMovableCell(startIndex);\n var frzCols = gObj.getFrozenColumns();\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(startIndex.rowIndex, startIndex.cellIndex);\n }\n var min;\n var max;\n var stIndex = startIndex;\n var edIndex = endIndex = endIndex ? endIndex : startIndex;\n var cellIndexes;\n var cancl = 'cancel';\n this.currentIndex = startIndex.rowIndex;\n var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n var args = {\n data: selectedData, cellIndex: startIndex, currentCell: selectedCell,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n this.onActionBegin(args, events.cellSelecting);\n if (!isNullOrUndefined(args) && args[cancl] === true) {\n return;\n }\n this.clearCell();\n if (startIndex.rowIndex > endIndex.rowIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex.rowIndex; i <= endIndex.rowIndex; i++) {\n if (this.selectionSettings.cellSelectionMode !== 'Box') {\n min = i === startIndex.rowIndex ? (startIndex.cellIndex) : 0;\n max = i === endIndex.rowIndex ? (endIndex.cellIndex) : this.getLastColIndex(i);\n }\n else {\n min = startIndex.cellIndex;\n max = endIndex.cellIndex;\n }\n cellIndexes = [];\n for (var j = min < max ? min : max, len = min > max ? min : max; j <= len; j++) {\n if (frzCols) {\n if (j < frzCols) {\n selectedCell = gObj.getCellFromIndex(i, j);\n }\n else {\n selectedCell = gObj.getMovableCellFromIndex(i, j);\n }\n }\n else {\n selectedCell = gObj.getCellFromIndex(i, j);\n }\n if (!selectedCell) {\n continue;\n }\n cellIndexes.push(j);\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n }\n this.selectedRowCellIndexes.push({ rowIndex: i, cellIndexes: cellIndexes });\n }\n this.updateCellProps(stIndex, edIndex);\n this.onActionComplete({\n data: selectedData, cellIndex: startIndex, currentCell: selectedCell,\n previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n }, events.cellSelected);\n };\n /**\n * Selects a collection of cells by row and column indexes.\n * @param {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.\n * @return {void}\n */\n Selection.prototype.selectCells = function (rowCellIndexes) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.getSelectedMovableCell(rowCellIndexes[0]);\n var frzCols = gObj.getFrozenColumns();\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[0].rowIndex, rowCellIndexes[0].cellIndexes[0]);\n }\n this.currentIndex = rowCellIndexes[0].rowIndex;\n var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n this.onActionBegin({\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n }, events.cellSelecting);\n for (var i = 0, len = rowCellIndexes.length; i < len; i++) {\n for (var j = 0, cellLen = rowCellIndexes[i].cellIndexes.length; j < cellLen; j++) {\n if (frzCols) {\n if (rowCellIndexes[i].cellIndexes[j] < frzCols) {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[i].rowIndex, rowCellIndexes[i].cellIndexes[j]);\n }\n else {\n selectedCell = gObj.getMovableCellFromIndex(rowCellIndexes[i].rowIndex, rowCellIndexes[i].cellIndexes[j]);\n }\n }\n else {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[i].rowIndex, rowCellIndexes[i].cellIndexes[j]);\n }\n if (!selectedCell) {\n continue;\n }\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n this.addRowCellIndex({ rowIndex: rowCellIndexes[i].rowIndex, cellIndex: rowCellIndexes[i].cellIndexes[j] });\n }\n }\n this.updateCellProps({ rowIndex: rowCellIndexes[0].rowIndex, cellIndex: rowCellIndexes[0].cellIndexes[0] }, { rowIndex: rowCellIndexes[0].rowIndex, cellIndex: rowCellIndexes[0].cellIndexes[0] });\n this.onActionComplete({\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n currentCell: selectedCell,\n previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n }, events.cellSelected);\n };\n /**\n * Select cells with existing cell selection by passing row and column index.\n * @param {IIndex} startIndex - Defines the collection of row and column index.\n * @return {void}\n * @hidden\n */\n Selection.prototype.addCellsToSelection = function (cellIndexes) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedTable;\n var cIdx;\n var selectedCell;\n var frzCols = gObj.getFrozenColumns();\n var index;\n this.currentIndex = cellIndexes[0].rowIndex;\n var selectedData = gObj.getCurrentViewRecords()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n var rowObj;\n if (frzCols && cellIndexes[0].cellIndex >= frzCols) {\n rowObj = gObj.getMovableRowsObject()[cellIndexes[0].rowIndex];\n }\n else {\n rowObj = this.getRowObj(cellIndexes[0].rowIndex);\n }\n var foreignKeyData = [];\n for (var _i = 0, cellIndexes_1 = cellIndexes; _i < cellIndexes_1.length; _i++) {\n var cellIndex = cellIndexes_1[_i];\n for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {\n if (this.selectedRowCellIndexes[i].rowIndex === cellIndex.rowIndex) {\n index = i;\n break;\n }\n }\n selectedCell = this.getSelectedMovableCell(cellIndex);\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n }\n foreignKeyData.push(rowObj.cells[frzCols && cellIndexes[0].cellIndex >= frzCols\n ? cellIndex.cellIndex - frzCols : cellIndex.cellIndex].foreignKeyData);\n var args = {\n data: selectedData, cellIndex: cellIndexes[0],\n isShiftPressed: this.isMultiShiftRequest, previousRowCellIndex: this.prevECIdxs,\n currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,\n previousRowCell: this.prevECIdxs ?\n gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined,\n };\n var isUnSelected = index > -1;\n if (isUnSelected) {\n var selectedCellIdx = this.selectedRowCellIndexes[index].cellIndexes;\n if (selectedCellIdx.indexOf(cellIndex.cellIndex) > -1) {\n this.cellDeselect(events.cellDeselecting, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell], foreignKeyData);\n selectedCellIdx.splice(selectedCellIdx.indexOf(cellIndex.cellIndex), 1);\n selectedCell.classList.remove('e-cellselectionbackground');\n selectedCell.removeAttribute('aria-selected');\n this.cellDeselect(events.cellDeselected, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell], foreignKeyData);\n }\n else {\n isUnSelected = false;\n this.onActionBegin(args, events.cellSelecting);\n this.addRowCellIndex({ rowIndex: cellIndex.rowIndex, cellIndex: cellIndex.cellIndex });\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n }\n }\n else {\n this.onActionBegin(args, events.cellSelecting);\n this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);\n }\n this.updateCellProps(cellIndex, cellIndex);\n if (!isUnSelected) {\n this.onActionComplete({\n data: selectedData, cellIndex: cellIndexes[0], currentCell: selectedCell,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :\n undefined, previousRowCellIndex: this.prevECIdxs, selectedRowCellIndex: this.selectedRowCellIndexes\n }, events.cellSelected);\n }\n }\n };\n Selection.prototype.getColIndex = function (rowIndex, index) {\n var cells;\n var frzCols = this.parent.getFrozenColumns();\n if (frzCols) {\n if (index >= frzCols) {\n cells = this.parent.getMovableDataRows()[rowIndex].querySelectorAll('td.e-rowcell');\n }\n }\n if (!cells) {\n cells = this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');\n }\n for (var m = 0; m < cells.length; m++) {\n var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);\n if (colIndex === index) {\n if (frzCols) {\n if (index >= frzCols) {\n m += frzCols;\n }\n }\n return m;\n }\n }\n return -1;\n };\n Selection.prototype.getLastColIndex = function (rowIndex) {\n var cells = this.parent.getFrozenColumns() ? this.parent.getMovableDataRows()[rowIndex].querySelectorAll('td.e-rowcell')\n : this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');\n return parseInt(cells[cells.length - 1].getAttribute('aria-colindex'), 10);\n };\n Selection.prototype.clearCell = function () {\n this.clearCellSelection();\n };\n Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells, foreignKeyData) {\n var cancl = 'cancel';\n if (cells[0] && cells[0].classList.contains('e-gridchkbox')) {\n this.updateCheckBoxes(closest(cells[0], 'tr'));\n }\n var args = {\n cells: cells, data: data, cellIndexes: cellIndexes, foreignKeyData: foreignKeyData, cancel: false\n };\n this.parent.trigger(type, args);\n this.isPreventCellSelect = args[cancl];\n };\n Selection.prototype.updateCellSelection = function (selectedCell, rowIndex, cellIndex) {\n if (!isNullOrUndefined(rowIndex)) {\n this.addRowCellIndex({ rowIndex: rowIndex, cellIndex: cellIndex });\n }\n selectedCell.classList.add('e-cellselectionbackground');\n if (selectedCell.classList.contains('e-gridchkbox')) {\n this.updateCheckBoxes(closest(selectedCell, 'tr'), true);\n }\n this.addAttribute(selectedCell);\n };\n Selection.prototype.addAttribute = function (cell) {\n this.target = cell;\n if (!isNullOrUndefined(cell)) {\n cell.setAttribute('aria-selected', 'true');\n if (!this.preventFocus) {\n this.focus.onClick({ target: cell }, true);\n }\n }\n };\n Selection.prototype.updateCellProps = function (startIndex, endIndex) {\n this.prevCIdxs = startIndex;\n this.prevECIdxs = endIndex;\n this.isCellSelected = this.selectedRowCellIndexes.length && true;\n };\n Selection.prototype.addRowCellIndex = function (rowCellIndex) {\n var isRowAvail;\n var index;\n for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {\n if (this.selectedRowCellIndexes[i].rowIndex === rowCellIndex.rowIndex) {\n isRowAvail = true;\n index = i;\n break;\n }\n }\n if (isRowAvail) {\n if (this.selectedRowCellIndexes[index].cellIndexes.indexOf(rowCellIndex.cellIndex) < 0) {\n this.selectedRowCellIndexes[index].cellIndexes.push(rowCellIndex.cellIndex);\n }\n }\n else {\n this.selectedRowCellIndexes.push({ rowIndex: rowCellIndex.rowIndex, cellIndexes: [rowCellIndex.cellIndex] });\n }\n };\n /**\n * Deselects the currently selected cells.\n * @return {void}\n */\n Selection.prototype.clearCellSelection = function () {\n if (this.isCellSelected) {\n var gObj = this.parent;\n var selectedCells = this.getSelectedCellsElement();\n var rowCell = this.selectedRowCellIndexes;\n var data = [];\n var cells = [];\n var foreignKeyData = [];\n var currentViewData = gObj.getCurrentViewRecords();\n var selectedTable = void 0;\n var frzCols = gObj.getFrozenColumns();\n for (var i = 0, len = rowCell.length; i < len; i++) {\n data.push(currentViewData[rowCell[i].rowIndex]);\n var rowObj = this.getRowObj(rowCell[i].rowIndex);\n for (var j = 0, cLen = rowCell[i].cellIndexes.length; j < cLen; j++) {\n if (frzCols) {\n if (rowCell[i].cellIndexes[j] < frzCols) {\n cells.push(gObj.getCellFromIndex(rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));\n }\n else {\n cells.push(gObj.getMovableCellFromIndex(rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));\n }\n }\n else {\n foreignKeyData.push(rowObj.cells[rowCell[i].cellIndexes[j]].foreignKeyData);\n cells.push(gObj.getCellFromIndex(rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));\n }\n }\n }\n this.cellDeselect(events.cellDeselecting, rowCell, data, cells, foreignKeyData);\n if (this.isPreventCellSelect === true) {\n return;\n }\n for (var i = 0, len = selectedCells.length; i < len; i++) {\n selectedCells[i].classList.remove('e-cellselectionbackground');\n selectedCells[i].removeAttribute('aria-selected');\n }\n this.selectedRowCellIndexes = [];\n this.isCellSelected = false;\n this.cellDeselect(events.cellDeselected, rowCell, data, cells, foreignKeyData);\n }\n };\n Selection.prototype.getSelectedCellsElement = function () {\n var gObj = this.parent;\n var rows = gObj.getDataRows();\n var mRows;\n if (gObj.getFrozenColumns()) {\n mRows = gObj.getMovableDataRows();\n rows = gObj.addMovableRows(rows, mRows);\n }\n var cells = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n cells = cells.concat([].slice.call(rows[i].querySelectorAll('.e-cellselectionbackground')));\n }\n return cells;\n };\n Selection.prototype.mouseMoveHandler = function (e) {\n e.preventDefault();\n var gBRect = this.parent.element.getBoundingClientRect();\n var x1 = this.x;\n var y1 = this.y;\n var position = getPosition(e);\n var x2 = position.x - gBRect.left;\n var y2 = position.y - gBRect.top;\n var tmp;\n var target = closest(e.target, 'tr');\n this.isDragged = true;\n if (!this.isCellDrag) {\n if (!target) {\n target = closest(document.elementFromPoint(this.parent.element.offsetLeft + 2, e.clientY), 'tr');\n }\n if (x1 > x2) {\n tmp = x2;\n x2 = x1;\n x1 = tmp;\n }\n if (y1 > y2) {\n tmp = y2;\n y2 = y1;\n y1 = tmp;\n }\n this.element.style.left = x1 + 'px';\n this.element.style.top = y1 + 'px';\n this.element.style.width = x2 - x1 + 'px';\n this.element.style.height = y2 - y1 + 'px';\n }\n if (target && !e.ctrlKey && !e.shiftKey) {\n var rowIndex = parseInt(target.getAttribute('aria-rowindex'), 10);\n if (!this.isCellDrag) {\n this.selectRowsByRange(this.startIndex, rowIndex);\n }\n else {\n var td = parentsUntil(e.target, 'e-rowcell');\n if (td) {\n this.selectLikeExcel(rowIndex, parseInt(td.getAttribute('aria-colindex'), 10));\n }\n }\n }\n };\n Selection.prototype.selectLikeExcel = function (rowIndex, cellIndex) {\n this.clearCellSelection();\n this.selectCellsByRange({ rowIndex: this.startIndex, cellIndex: this.startCellIndex }, { rowIndex: rowIndex, cellIndex: cellIndex });\n };\n Selection.prototype.mouseUpHandler = function (e) {\n document.body.classList.remove('e-disableuserselect');\n if (this.element) {\n remove(this.element);\n }\n EventHandler.remove(this.parent.getContent(), 'mousemove', this.mouseMoveHandler);\n EventHandler.remove(document.body, 'mouseup', this.mouseUpHandler);\n this.isDragged = false;\n };\n Selection.prototype.mouseDownHandler = function (e) {\n var target = e.target;\n var gObj = this.parent;\n var isDrag;\n var gridElement = parentsUntil(target, 'e-grid');\n if (gridElement && gridElement.id !== gObj.element.id) {\n return;\n }\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (target.classList.contains('e-rowcell') && !e.shiftKey && !e.ctrlKey) {\n if (gObj.selectionSettings.cellSelectionMode === 'Box' && !this.isRowType() && !this.isSingleSel()) {\n this.isCellDrag = true;\n isDrag = true;\n }\n else if (gObj.allowRowDragAndDrop) {\n if (!this.isRowType() || this.isSingleSel() || closest(target, 'td').classList.contains('e-selectionbackground')) {\n this.isDragged = false;\n return;\n }\n isDrag = true;\n this.element = createElement('div', { className: 'e-griddragarea' });\n gObj.getContent().appendChild(this.element);\n }\n if (isDrag) {\n var tr = closest(e.target, 'tr');\n this.startIndex = parseInt(tr.getAttribute('aria-rowindex'), 10);\n this.startCellIndex = parseInt(parentsUntil(target, 'e-rowcell').getAttribute('aria-colindex'), 10);\n document.body.classList.add('e-disableuserselect');\n var gBRect = gObj.element.getBoundingClientRect();\n var postion = getPosition(e);\n this.x = postion.x - gBRect.left;\n this.y = postion.y - gBRect.top;\n EventHandler.add(gObj.getContent(), 'mousemove', this.mouseMoveHandler, this);\n EventHandler.add(document.body, 'mouseup', this.mouseUpHandler, this);\n }\n }\n };\n Selection.prototype.clearSelAfterRefresh = function (e) {\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n /**\n * @hidden\n */\n Selection.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialEnd, this.initializeSelection, this);\n this.parent.on(events.rowSelectionComplete, this.onActionComplete, this);\n this.parent.on(events.cellSelectionComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.cellFocused, this.onCellFocused, this);\n this.parent.on(events.dataReady, this.clearSelAfterRefresh, this);\n this.parent.on(events.columnPositionChanged, this.columnPositionChanged, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.actionBeginFunction = this.actionBegin.bind(this);\n this.actionCompleteFunction = this.actionComplete.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunction);\n this.parent.on(events.rowsRemoved, this.rowsRemoved, this);\n this.parent.on(events.headerRefreshed, this.refreshHeader, this);\n this.addEventListener_checkbox();\n };\n /**\n * @hidden\n */\n Selection.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.initializeSelection);\n this.parent.off(events.rowSelectionComplete, this.onActionComplete);\n this.parent.off(events.cellSelectionComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.cellFocused, this.onCellFocused);\n this.parent.off(events.dataReady, this.clearSelAfterRefresh);\n this.parent.off(events.columnPositionChanged, this.columnPositionChanged);\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunction);\n this.parent.off(events.rowsRemoved, this.rowsRemoved);\n this.parent.off(events.headerRefreshed, this.refreshHeader);\n this.removeEventListener_checkbox();\n };\n Selection.prototype.columnPositionChanged = function () {\n if (!this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n Selection.prototype.refreshHeader = function () {\n this.setCheckAllState();\n };\n Selection.prototype.rowsRemoved = function (e) {\n for (var i = 0; i < e.records.length; i++) {\n delete (this.selectedRowState[e.records[i][this.primaryKey]]);\n --this.totalRecordsCount;\n }\n this.setCheckAllState();\n };\n ;\n Selection.prototype.dataReady = function (e) {\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n ;\n Selection.prototype.getCheckAllBox = function () {\n return this.parent.getHeaderContent().querySelector('.e-checkselectall');\n };\n Selection.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n var gObj = this.parent;\n if (!isNullOrUndefined(e.properties.type) && this.selectionSettings.type === 'Single') {\n if (this.selectedRowCellIndexes.length > 1) {\n this.clearCellSelection();\n }\n if (this.selectedRowIndexes.length > 1) {\n this.clearRowSelection();\n }\n this.enableSelectMultiTouch = false;\n this.hidePopUp();\n }\n if (!isNullOrUndefined(e.properties.mode) ||\n !isNullOrUndefined(e.properties.cellSelectionMode)) {\n this.clearSelection();\n }\n this.checkBoxSelectionChanged();\n this.initPerisistSelection();\n };\n Selection.prototype.hidePopUp = function () {\n if (this.parent.element.querySelector('.e-gridpopup').querySelectorAll('.e-rowselect').length) {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Selection.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n this.selectRow(this.parent.selectedRowIndex);\n };\n Selection.prototype.checkBoxSelectionChanged = function () {\n this.parent.off(events.contentReady, this.checkBoxSelectionChanged);\n var gobj = this.parent;\n var checkboxColumn = gobj.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length > 0) {\n gobj.isCheckBoxSelection = true;\n this.chkField = checkboxColumn[0].field;\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n if (isNullOrUndefined(this.totalRecordsCount)) {\n this.totalRecordsCount = this.parent.getCurrentViewRecords().length;\n }\n if (this.isSingleSel()) {\n gobj.selectionSettings.type = 'Multiple';\n gobj.dataBind();\n }\n else {\n this.initPerisistSelection();\n }\n }\n if (!gobj.isCheckBoxSelection) {\n this.chkField = null;\n this.initPerisistSelection();\n }\n };\n Selection.prototype.initPerisistSelection = function () {\n var gobj = this.parent;\n if (this.parent.selectionSettings.persistSelection && this.parent.getPrimaryKeyFieldNames().length > 0) {\n gobj.isPersistSelection = true;\n this.ensureCheckboxFieldSelection();\n }\n else if (this.parent.getPrimaryKeyFieldNames().length > 0) {\n gobj.isPersistSelection = false;\n this.ensureCheckboxFieldSelection();\n }\n else {\n gobj.isPersistSelection = false;\n this.selectedRowState = {};\n }\n };\n Selection.prototype.ensureCheckboxFieldSelection = function () {\n var gobj = this.parent;\n this.primaryKey = this.parent.getPrimaryKeyFieldNames()[0];\n if (!gobj.enableVirtualization && this.chkField\n && ((gobj.isPersistSelection && Object.keys(this.selectedRowState).length === 0) ||\n !gobj.isPersistSelection)) {\n var data = this.parent.getDataModule();\n var query = new Query().where(this.chkField, 'equal', true);\n var dataManager = data.getData({}, query);\n var proxy_1 = this;\n this.parent.showSpinner();\n dataManager.then(function (e) {\n proxy_1.dataSuccess(e.result);\n proxy_1.refreshPersistSelection();\n proxy_1.parent.hideSpinner();\n });\n }\n };\n Selection.prototype.dataSuccess = function (res) {\n for (var i = 0; i < res.length; i++) {\n if (isNullOrUndefined(this.selectedRowState[res[i][this.primaryKey]]) && res[i][this.chkField]) {\n this.selectedRowState[res[i][this.primaryKey]] = res[i][this.chkField];\n }\n }\n this.persistSelectedData = res;\n };\n Selection.prototype.setRowSelection = function (state) {\n if (!this.parent.getDataModule().isRemote()) {\n if (state) {\n for (var _i = 0, _a = this.getData(); _i < _a.length; _i++) {\n var data = _a[_i];\n this.selectedRowState[data[this.primaryKey]] = true;\n }\n }\n else {\n this.selectedRowState = {};\n }\n // (this.getData()).forEach(function (data) {\n // this.selectedRowState[data[this.primaryKey]] = true;\n // })\n }\n };\n Selection.prototype.getData = function () {\n return this.parent.getDataModule().dataManager.dataSource.json;\n };\n Selection.prototype.refreshPersistSelection = function () {\n var rows = this.parent.getRows();\n if (rows.length > 0 && (this.parent.isPersistSelection || this.chkField)) {\n var indexes = [];\n for (var j = 0; j < rows.length; j++) {\n var rowObj = this.getRowObj(rows[j]);\n var pKey = rowObj ? rowObj.data[this.primaryKey] : null;\n if (pKey === null) {\n return;\n }\n var checkState = void 0;\n var chkBox = rows[j].querySelector('.e-checkselect');\n if (this.selectedRowState[pKey] || (this.parent.checkAllRows === 'Check' && this.chkAllCollec.indexOf(pKey) < 0)\n || (this.parent.checkAllRows === 'Uncheck' && this.chkAllCollec.indexOf(pKey) > 0)\n || (this.parent.checkAllRows === 'Intermediate' && !isNullOrUndefined(this.chkField) && rowObj.data[this.chkField])) {\n indexes.push(parseInt(rows[j].getAttribute('aria-rowindex'), 10));\n checkState = true;\n }\n else {\n checkState = false;\n if (this.checkedTarget !== chkBox && this.parent.isCheckBoxSelection) {\n removeAddCboxClasses(chkBox.nextElementSibling, checkState);\n }\n }\n this.updatePersistCollection(rows[j], checkState);\n }\n this.isSingleSel() && indexes.length > 0 ? this.selectRow(indexes[0], true) : this.selectRows(indexes);\n }\n if (this.parent.isCheckBoxSelection && this.parent.getCurrentViewRecords().length > 0) {\n this.setCheckAllState();\n }\n };\n Selection.prototype.actionBegin = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n var editChkBox = this.parent.element.querySelector('.e-edit-checkselect');\n if (!isNullOrUndefined(editChkBox)) {\n var row = closest(editChkBox, '.e-editedrow');\n if (row) {\n if (this.parent.editSettings.mode === 'Dialog') {\n row = this.parent.element.querySelector('.e-dlgeditrow');\n }\n var rowObj = this.getRowObj(row);\n if (!rowObj) {\n return;\n }\n this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = editChkBox.checked;\n }\n else {\n this.isCheckedOnAdd = editChkBox.checked;\n }\n }\n }\n };\n Selection.prototype.actionComplete = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n if (e.action === 'add' && this.isCheckedOnAdd) {\n var rowObj = this.parent.getRowObjectFromUID(this.parent.getRows()[e.selectedRow].getAttribute('data-uid'));\n this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = this.isCheckedOnAdd;\n }\n this.refreshPersistSelection();\n }\n };\n Selection.prototype.onDataBound = function () {\n if (!this.parent.enableVirtualization && this.parent.isPersistSelection) {\n this.refreshPersistSelection();\n }\n };\n Selection.prototype.checkSelectAllAction = function (checkState) {\n var cRenderer = this.getRenderer();\n var editForm = this.parent.element.querySelector('.e-gridform');\n this.checkedTarget = this.getCheckAllBox();\n if (checkState && this.parent.getCurrentViewRecords().length) {\n this.selectRowsByRange(cRenderer.getVirtualRowIndex(0), cRenderer.getVirtualRowIndex(this.parent.getCurrentViewRecords().length));\n this.parent.checkAllRows = 'Check';\n }\n else {\n this.clearSelection();\n this.parent.checkAllRows = 'Uncheck';\n }\n this.chkAllCollec = [];\n if (this.parent.isPersistSelection) {\n var rows = this.parent.getRows();\n for (var i = 0; i < rows.length; i++) {\n this.updatePersistCollection(rows[i], checkState);\n }\n if (this.parent.checkAllRows === 'Uncheck') {\n this.setRowSelection(false);\n this.persistSelectedData = [];\n }\n else if (this.parent.checkAllRows === 'Check') {\n this.setRowSelection(true);\n this.persistSelectedData = this.getData().slice();\n }\n }\n if (!isNullOrUndefined(editForm)) {\n var editChkBox = editForm.querySelector('.e-edit-checkselect');\n removeAddCboxClasses(editChkBox.nextElementSibling, checkState);\n }\n };\n Selection.prototype.checkSelectAll = function (checkBox) {\n var state = this.getCheckAllStatus(checkBox) === 'Check';\n this.checkSelectAllAction(!state);\n this.target = null;\n if (this.parent.getCurrentViewRecords().length > 0) {\n this.setCheckAllState();\n }\n this.triggerChkChangeEvent(checkBox, !state);\n };\n Selection.prototype.getCheckAllStatus = function (ele) {\n var classes = ele ? ele.nextElementSibling.classList :\n this.getCheckAllBox().nextElementSibling.classList;\n var status;\n if (classes.contains('e-check')) {\n status = 'Check';\n }\n else if (classes.contains('e-uncheck')) {\n status = 'Uncheck';\n }\n else if (classes.contains('e-stop')) {\n status = 'Intermediate';\n }\n else {\n status = 'None';\n }\n return status;\n };\n Selection.prototype.checkSelect = function (checkBox) {\n var target = closest(this.checkedTarget, '.e-rowcell');\n var checkObj = checkBox;\n this.isMultiCtrlRequest = true;\n var rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);\n if (this.parent.isPersistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {\n ++rIndex;\n }\n this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));\n this.moveIntoUncheckCollection(closest(target, '.e-row'));\n this.setCheckAllState();\n this.isMultiCtrlRequest = false;\n this.triggerChkChangeEvent(checkBox, checkBox.nextElementSibling.classList.contains('e-check'));\n };\n Selection.prototype.moveIntoUncheckCollection = function (row) {\n if (this.parent.checkAllRows === 'Check' || this.parent.checkAllRows === 'Uncheck') {\n var rowObj = this.getRowObj(row);\n var pKey = rowObj && rowObj.data ? rowObj.data[this.primaryKey] : null;\n if (!pKey) {\n return;\n }\n if (this.chkAllCollec.indexOf(pKey) < 0) {\n this.chkAllCollec.push(pKey);\n }\n else {\n this.chkAllCollec.splice(this.chkAllCollec.indexOf(pKey), 1);\n }\n }\n };\n Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState) {\n this.parent.trigger(events.checkBoxChange, {\n checked: checkState, selectedRowIndexes: this.parent.getSelectedRowIndexes(),\n target: checkBox\n });\n if (!this.parent.isEdit) {\n this.checkedTarget = null;\n }\n };\n Selection.prototype.setCheckAllState = function (isInteraction) {\n if (this.parent.isCheckBoxSelection) {\n var checkedLen = Object.keys(this.selectedRowState).length;\n if (!this.parent.isPersistSelection) {\n checkedLen = this.selectedRecords.length;\n this.totalRecordsCount = this.parent.getCurrentViewRecords().length;\n }\n if (this.getCheckAllBox()) {\n var spanEle = this.getCheckAllBox().nextElementSibling;\n removeClass([spanEle], ['e-check', 'e-stop', 'e-uncheck']);\n if (checkedLen === this.totalRecordsCount) {\n addClass([spanEle], ['e-check']);\n if (isInteraction) {\n this.getRenderer().setSelection(null, true, true);\n }\n this.parent.checkAllRows = 'Check';\n }\n else if (checkedLen === 0 || this.parent.getCurrentViewRecords().length === 0) {\n addClass([spanEle], ['e-uncheck']);\n if (isInteraction) {\n this.getRenderer().setSelection(null, false, true);\n }\n this.parent.checkAllRows = 'Uncheck';\n }\n else {\n addClass([spanEle], ['e-stop']);\n this.parent.checkAllRows = 'Intermediate';\n }\n }\n }\n };\n Selection.prototype.clickHandler = function (e) {\n var target = e.target;\n this.isMultiCtrlRequest = e.ctrlKey || this.enableSelectMultiTouch;\n this.isMultiShiftRequest = e.shiftKey;\n this.popUpClickHandler(e);\n var chkSelect = false;\n this.preventFocus = true;\n var checkBox;\n var checkWrap = parentsUntil(target, 'e-checkbox-wrapper');\n if (checkWrap && checkWrap.querySelectorAll('.e-checkselect,.e-checkselectall').length > 0) {\n checkBox = checkWrap.querySelector('input[type=\"checkbox\"]');\n chkSelect = true;\n }\n target = parentsUntil(target, 'e-rowcell');\n if ((target && target.parentElement.classList.contains('e-row') && !this.parent.selectionSettings.checkboxOnly) || chkSelect) {\n if (this.parent.isCheckBoxSelection) {\n this.isMultiCtrlRequest = true;\n }\n this.target = target;\n if (!isNullOrUndefined(checkBox)) {\n this.checkedTarget = checkBox;\n if (checkBox.classList.contains('e-checkselectall')) {\n this.checkSelectAll(checkBox);\n }\n else {\n this.checkSelect(checkBox);\n this.target = closest(target, '.e-rowcell');\n }\n }\n else {\n var rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);\n if (this.parent.isPersistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {\n ++rIndex;\n }\n this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));\n if (this.parent.isCheckBoxSelection) {\n this.moveIntoUncheckCollection(closest(target, '.e-row'));\n this.setCheckAllState();\n }\n }\n if (!this.parent.isCheckBoxSelection && Browser.isDevice && !this.isSingleSel()) {\n this.showPopup(e);\n }\n }\n this.isMultiCtrlRequest = false;\n this.isMultiShiftRequest = false;\n this.preventFocus = false;\n };\n Selection.prototype.popUpClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.e-headercell') || e.target.classList.contains('e-rowcell') ||\n closest(target, '.e-gridpopup')) {\n if (target.classList.contains('e-rowselect')) {\n if (!target.classList.contains('e-spanclicked')) {\n target.classList.add('e-spanclicked');\n this.enableSelectMultiTouch = true;\n }\n else {\n target.classList.remove('e-spanclicked');\n this.enableSelectMultiTouch = false;\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n }\n }\n else {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Selection.prototype.showPopup = function (e) {\n setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-rowselect e-icons e-icon-rowselect' +\n (!this.isSingleSel() && (this.selectedRecords.length > (this.parent.getFrozenColumns() ? 2 : 1)\n || this.selectedRowCellIndexes.length > 1) ? ' e-spanclicked' : ''));\n };\n Selection.prototype.rowCellSelectionHandler = function (rowIndex, cellIndex) {\n if ((!this.isMultiCtrlRequest && !this.isMultiShiftRequest) || this.isSingleSel()) {\n if (!this.isDragged) {\n this.selectRow(rowIndex, true);\n }\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n else if (this.isMultiShiftRequest) {\n this.selectRowsByRange(isUndefined(this.prevRowIndex) ? rowIndex : this.prevRowIndex, rowIndex);\n this.selectCellsByRange(isUndefined(this.prevCIdxs) ? { rowIndex: rowIndex, cellIndex: cellIndex } : this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n else {\n this.addRowsToSelection([rowIndex]);\n this.addCellsToSelection([{ rowIndex: rowIndex, cellIndex: cellIndex }]);\n }\n this.isDragged = false;\n };\n Selection.prototype.onCellFocused = function (e) {\n if (this.parent.frozenRows && e.container.isHeader && e.byKey) {\n if (e.keyArgs.action === 'upArrow') {\n if (this.parent.allowFiltering) {\n e.isJump = e.element.tagName === 'INPUT' ? true : false;\n }\n else {\n e.isJump = e.element.tagName === 'TH' ? true : false;\n }\n }\n else {\n if (e.keyArgs.action === 'downArrow') {\n var rIdx = Number(e.element.parentElement.getAttribute('aria-rowindex'));\n e.isJump = rIdx === 0 ? true : false;\n }\n else {\n if (e.keyArgs.action === 'ctrlHome') {\n e.isJump = true;\n }\n }\n }\n }\n var clear = this.parent.getFrozenColumns() ? (((e.container.isHeader && e.element.tagName !== 'TD' && e.isJump) ||\n ((e.container.isContent || e.element.tagName === 'TD') && !(e.container.isSelectable || e.element.tagName === 'TD')))\n && !(e.byKey && e.keyArgs.action === 'space')) : ((e.container.isHeader && e.isJump) ||\n (e.container.isContent && !e.container.isSelectable)) && !(e.byKey && e.keyArgs.action === 'space');\n var headerAction = (e.container.isHeader && e.element.tagName !== 'TD' && !closest(e.element, '.e-rowcell'))\n && !(e.byKey && e.keyArgs.action === 'space');\n if (!e.byKey || clear) {\n if (clear) {\n this.clearSelection();\n }\n return;\n }\n var _a = e.container.isContent ? e.container.indexes : e.indexes, rowIndex = _a[0], cellIndex = _a[1];\n var prev = this.focus.getPrevIndexes();\n if (this.parent.frozenRows) {\n if (e.container.isHeader && (e.element.tagName === 'TD' || closest(e.element, '.e-rowcell'))) {\n var thLen = this.parent.getHeaderTable().querySelector('thead').childElementCount;\n rowIndex -= thLen;\n prev.rowIndex = prev.rowIndex ? prev.rowIndex - thLen : null;\n }\n else {\n rowIndex += this.parent.frozenRows;\n prev.rowIndex = prev.rowIndex === 0 || !isNullOrUndefined(prev.rowIndex) ? prev.rowIndex + this.parent.frozenRows : null;\n }\n if (this.parent.getFrozenColumns()) {\n var cIdx = Number(e.element.getAttribute('aria-colindex'));\n prev.cellIndex = prev.cellIndex ? (prev.cellIndex === cellIndex ? cIdx : cIdx - 1) : null;\n cellIndex = cIdx;\n }\n }\n if (headerAction || (['ctrlPlusA', 'escape'].indexOf(e.keyArgs.action) === -1 && e.keyArgs.action !== 'space' &&\n rowIndex === prev.rowIndex && cellIndex === prev.cellIndex)) {\n return;\n }\n this.preventFocus = true;\n switch (e.keyArgs.action) {\n case 'downArrow':\n case 'upArrow':\n case 'enter':\n case 'shiftEnter':\n this.applyDownUpKey(rowIndex, cellIndex);\n break;\n case 'rightArrow':\n case 'leftArrow':\n this.applyRightLeftKey(rowIndex, cellIndex);\n break;\n case 'shiftDown':\n case 'shiftUp':\n this.shiftDownKey(rowIndex, cellIndex);\n break;\n case 'shiftLeft':\n case 'shiftRight':\n this.applyShiftLeftRightKey(rowIndex, cellIndex);\n break;\n case 'home':\n case 'end':\n cellIndex = e.keyArgs.action === 'end' ? this.getLastColIndex(rowIndex) : 0;\n this.applyHomeEndKey(rowIndex, cellIndex);\n break;\n case 'ctrlHome':\n case 'ctrlEnd':\n this.applyCtrlHomeEndKey(rowIndex, cellIndex);\n break;\n case 'escape':\n this.clearSelection();\n break;\n case 'ctrlPlusA':\n this.ctrlPlusA();\n break;\n case 'space':\n this.applySpaceSelection(e.element);\n break;\n }\n this.preventFocus = false;\n };\n /**\n * Apply ctrl + A key selection\n * @return {void}\n * @hidden\n */\n Selection.prototype.ctrlPlusA = function () {\n if (this.isRowType() && !this.isSingleSel()) {\n this.selectRowsByRange(0, this.parent.getRows().length - 1);\n }\n if (this.isCellType() && !this.isSingleSel()) {\n this.selectCellsByRange({ rowIndex: 0, cellIndex: 0 }, { rowIndex: this.parent.getRows().length - 1, cellIndex: this.parent.getColumns().length - 1 });\n }\n };\n Selection.prototype.applySpaceSelection = function (target) {\n if (target.classList.contains('e-checkselectall')) {\n this.checkedTarget = target;\n this.checkSelectAll(this.checkedTarget);\n }\n else {\n if (target.classList.contains('e-checkselect')) {\n this.checkedTarget = target;\n this.checkSelect(this.checkedTarget);\n }\n }\n };\n Selection.prototype.applyDownUpKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n if (this.parent.isCheckBoxSelection && this.parent.checkAllRows === 'Check') {\n this.checkSelectAllAction(false);\n this.checkedTarget = null;\n }\n if (this.isRowType()) {\n if (this.parent.frozenRows) {\n this.selectRow(rowIndex, true);\n this.applyUpDown(gObj.selectedRowIndex);\n }\n else {\n this.selectRow(rowIndex, true);\n this.applyUpDown(gObj.selectedRowIndex);\n }\n }\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n };\n Selection.prototype.applyUpDown = function (rowIndex) {\n if (rowIndex < 0) {\n return;\n }\n if (!this.target) {\n this.target = this.parent.getRows()[0].children[this.parent.groupSettings.columns.length || 0];\n }\n var cIndex = parseInt(this.target.getAttribute('aria-colindex'), 10);\n var frzCols = this.parent.getFrozenColumns();\n if (frzCols) {\n if (cIndex >= frzCols) {\n this.target =\n this.contentRenderer.getMovableRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex - frzCols];\n }\n else {\n this.target = this.contentRenderer.getRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex];\n }\n }\n else {\n this.target = this.contentRenderer.getRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex];\n }\n this.addAttribute(this.target);\n };\n Selection.prototype.applyRightLeftKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n this.addAttribute(this.target);\n }\n };\n Selection.prototype.applyHomeEndKey = function (rowIndex, cellIndex) {\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n else {\n this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));\n }\n };\n /**\n * Apply shift+down key selection\n * @return {void}\n * @hidden\n */\n Selection.prototype.shiftDownKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n this.isMultiShiftRequest = true;\n if (this.isRowType() && !this.isSingleSel()) {\n if (!isUndefined(this.prevRowIndex)) {\n this.selectRowsByRange(this.prevRowIndex, rowIndex);\n this.applyUpDown(rowIndex);\n }\n else {\n this.selectRow(0, true);\n }\n }\n if (this.isCellType() && !this.isSingleSel()) {\n this.selectCellsByRange(this.prevCIdxs || { rowIndex: 0, cellIndex: 0 }, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isMultiShiftRequest = false;\n };\n Selection.prototype.applyShiftLeftRightKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n this.isMultiShiftRequest = true;\n this.selectCellsByRange(this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });\n this.isMultiShiftRequest = false;\n };\n Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, cellIndex) {\n if (this.isRowType()) {\n this.selectRow(rowIndex, true);\n this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));\n }\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n };\n Selection.prototype.addRemoveClassesForRow = function (row, isAdd, clearAll) {\n var args = [];\n for (var _i = 3; _i < arguments.length; _i++) {\n args[_i - 3] = arguments[_i];\n }\n if (row) {\n var cells = [].slice.call(row.querySelectorAll('.e-rowcell'));\n var cell = row.querySelector('.e-detailrowcollapse') || row.querySelector('.e-detailrowexpand');\n if (cell) {\n cells.push(cell);\n }\n addRemoveActiveClasses.apply(void 0, [cells, isAdd].concat(args));\n }\n this.getRenderer().setSelection(row ? row.getAttribute('data-uid') : null, isAdd, clearAll);\n };\n Selection.prototype.isRowType = function () {\n return this.selectionSettings.mode === 'Row' || this.selectionSettings.mode === 'Both';\n };\n Selection.prototype.isCellType = function () {\n return this.selectionSettings.mode === 'Cell' || this.selectionSettings.mode === 'Both';\n };\n Selection.prototype.isSingleSel = function () {\n return this.selectionSettings.type === 'Single';\n };\n Selection.prototype.getRenderer = function () {\n if (isNullOrUndefined(this.contentRenderer)) {\n this.contentRenderer = this.factory.getRenderer(RenderType.Content);\n }\n return this.contentRenderer;\n };\n /**\n * Gets the collection of selected records.\n * @return {Object[]}\n */\n Selection.prototype.getSelectedRecords = function () {\n var selectedData = [];\n if (!this.selectionSettings.persistSelection) {\n selectedData = this.parent.getRowsObject().filter(function (row) { return row.isSelected; })\n .map(function (m) { return m.data; });\n }\n else {\n selectedData = this.persistSelectedData;\n }\n return selectedData;\n };\n Selection.prototype.addEventListener_checkbox = function () {\n this.parent.on(events.dataReady, this.dataReady, this);\n this.onDataBoundFunction = this.onDataBound.bind(this);\n this.parent.addEventListener(events.dataBound, this.onDataBoundFunction);\n this.parent.on(events.contentReady, this.checkBoxSelectionChanged, this);\n this.actionCompleteFunc = this.actionCompleteHandler.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.on(events.click, this.clickHandler, this);\n };\n Selection.prototype.removeEventListener_checkbox = function () {\n this.parent.off(events.dataReady, this.dataReady);\n this.parent.removeEventListener(events.dataBound, this.onDataBoundFunction);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.off(events.click, this.clickHandler);\n };\n Selection.prototype.actionCompleteHandler = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n this.refreshPersistSelection();\n }\n };\n return Selection;\n}());\nexport { Selection };\n","import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\n/**\n * The `Search` module is used to handle search action.\n */\nvar Search = /** @class */ (function () {\n /**\n * Constructor for Grid search module.\n * @hidden\n */\n function Search(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * Searches Grid records by given key.\n *\n * > You can customize the default search action by using [`searchSettings`](./api-grid.html#searchsettings-searchsettingsmodel).\n * @param {string} searchString - Defines the key.\n * @return {void}\n */\n Search.prototype.search = function (searchString) {\n var gObj = this.parent;\n searchString = isNullOrUndefined(searchString) ? '' : searchString;\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.search, arg1: searchString });\n return;\n }\n if (searchString !== gObj.searchSettings.key) {\n gObj.searchSettings.key = searchString.toString();\n gObj.dataBind();\n }\n else if (this.refreshSearch) {\n gObj.refresh();\n }\n };\n /**\n * @hidden\n */\n Search.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.searchComplete, this.onSearchComplete, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.actionCompleteFunc = this.onActionComplete.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n };\n /**\n * @hidden\n */\n Search.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.searchComplete, this.onSearchComplete);\n this.parent.off(events.destroy, this.destroy);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n };\n /**\n * To destroy the print\n * @return {void}\n * @hidden\n */\n Search.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * @hidden\n */\n Search.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (!isNullOrUndefined(e.properties.key)) {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin, searchString: this.parent.searchSettings.key\n });\n }\n else {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin\n });\n }\n };\n /**\n * The function used to trigger onActionComplete\n * @return {void}\n * @hidden\n */\n Search.prototype.onSearchComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, {\n searchString: this.parent.searchSettings.key, requestType: 'searching', type: events.actionComplete\n }));\n };\n Search.prototype.onActionComplete = function (e) {\n this.refreshSearch = e.requestType !== 'searching';\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Search.prototype.getModuleName = function () {\n return 'search';\n };\n return Search;\n}());\nexport { Search };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { iterateArrayOrObject, isActionPrevent } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * The `ShowHide` module is used to control column visibility.\n */\nvar ShowHide = /** @class */ (function () {\n /**\n * Constructor for the show hide module.\n * @hidden\n */\n function ShowHide(parent) {\n this.parent = parent;\n }\n /**\n * Shows a column by column name.\n * @param {string|string[]} columnName - Defines a single or collection of column names to show.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n ShowHide.prototype.show = function (columnName, showBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, showBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n columns.forEach(function (value) {\n value.visible = true;\n });\n this.setVisible(columns);\n };\n /**\n * Hides a column by column name.\n * @param {string|string[]} columnName - Defines a single or collection of column names to hide.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n ShowHide.prototype.hide = function (columnName, hideBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, hideBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n columns.forEach(function (value) {\n value.visible = false;\n });\n this.setVisible(columns);\n };\n ShowHide.prototype.getToggleFields = function (key) {\n var finalized = [];\n if (typeof key === 'string') {\n finalized = [key];\n }\n else {\n finalized = key;\n }\n return finalized;\n };\n ShowHide.prototype.getColumns = function (keys, getKeyBy) {\n var _this = this;\n var columns = iterateArrayOrObject(keys, function (key, index) {\n return iterateArrayOrObject(_this.parent.getColumns(), function (item, index) {\n if (item[getKeyBy] === key) {\n return item;\n }\n return undefined;\n })[0];\n });\n return columns;\n };\n /**\n * Shows or hides columns by given column collection.\n * @private\n * @param {Column[]} columns - Specifies the columns.\n * @return {void}\n */\n ShowHide.prototype.setVisible = function (columns) {\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, {\n instance: this, handler: this.setVisible,\n arg1: columns\n });\n return;\n }\n columns = isNullOrUndefined(columns) ? this.parent.getColumns() : columns;\n if (this.parent.allowSelection && this.parent.getSelectedRecords().length) {\n this.parent.clearSelection();\n }\n this.parent.notify(events.columnVisibilityChanged, columns);\n };\n return ShowHide;\n}());\nexport { ShowHide };\n","import { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getScrollBarWidth } from '../base/util';\nimport { scroll, contentReady, uiUpdate, onEmpty } from '../base/constant';\nimport { ColumnWidthService } from '../services/width-controller';\n/**\n * The `Scroll` module is used to handle scrolling behaviour.\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the Grid scrolling.\n * @hidden\n */\n function Scroll(parent) {\n this.lastScrollTop = 0;\n //To maintain scroll state on grid actions.\n this.previousValues = { top: 0, left: 0 };\n this.oneTimeReady = true;\n this.parent = parent;\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * @hidden\n */\n Scroll.prototype.setWidth = function () {\n this.parent.element.style.width = formatUnit(this.parent.width);\n if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&\n this.parent.toolbarModule.toolbar.element) {\n this.parent.toolbarModule.toolbar.refreshOverflow();\n }\n };\n /**\n * @hidden\n */\n Scroll.prototype.setHeight = function () {\n var mHdrHeight = 0;\n var content = this.parent.getContent().firstChild;\n if (this.parent.frozenRows && this.parent.height !== 'auto') {\n mHdrHeight =\n this.parent.getHeaderContent().querySelector('tbody').offsetHeight;\n content.style.height = formatUnit(this.parent.height - mHdrHeight);\n }\n else {\n content.style.height = formatUnit(this.parent.height);\n }\n this.ensureOverflow(content);\n };\n /**\n * @hidden\n */\n Scroll.prototype.setPadding = function () {\n var content = this.parent.getHeaderContent();\n var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();\n var cssProps = this.getCssProperties();\n content.firstChild.style[cssProps.border] = scrollWidth > 0 ? '1px' : '0px';\n content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';\n };\n /**\n * @hidden\n */\n Scroll.prototype.removePadding = function (rtl) {\n var cssProps = this.getCssProperties(rtl);\n this.parent.getHeaderContent().firstChild.style[cssProps.border] = '';\n this.parent.getHeaderContent().firstChild.parentElement.style[cssProps.padding] = '';\n };\n /**\n * Refresh makes the Grid adoptable with the height of parent container.\n *\n * > The [`height`](./api-grid.html#height) must be set to 100%.\n * @return\n */\n Scroll.prototype.refresh = function () {\n if (this.parent.height !== '100%') {\n return;\n }\n var content = this.parent.getContent();\n this.parent.element.style.height = '100%';\n var height = this.widthService.getSiblingsHeight(content);\n content.style.height = 'calc(100% - ' + height + 'px)'; //Set the height to the '.e-gridcontent';\n };\n Scroll.prototype.getThreshold = function () {\n /* Some browsers places the scroller outside the content,\n * hence the padding should be adjusted.*/\n var appName = Browser.info.name;\n if (appName === 'mozilla') {\n return 0.5;\n }\n return 1;\n };\n /**\n * @hidden\n */\n Scroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(onEmpty, this.wireEvents, this);\n this.parent.on(contentReady, this.wireEvents, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n };\n /**\n * @hidden\n */\n Scroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(onEmpty, this.wireEvents);\n this.parent.off(contentReady, this.wireEvents);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n };\n Scroll.prototype.onContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n var isHeader = element.classList.contains('e-headercontent');\n return function (e) {\n if (_this.content.querySelector('tbody') === null) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n var sLimit = target.scrollWidth;\n var isFooter = target.classList.contains('e-summarycontent');\n if (_this.previousValues.left === left) {\n _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;\n return;\n }\n element.scrollLeft = left;\n if (isFooter) {\n _this.header.scrollLeft = left;\n }\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n };\n };\n Scroll.prototype.onFreezeContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (_this.content.querySelector('tbody') === null) {\n return;\n }\n var target = e.target;\n var top = target.scrollTop;\n if (_this.previousValues.top === top) {\n return;\n }\n element.scrollTop = top;\n _this.previousValues.top = top;\n if (_this.parent.isDestroyed) {\n return;\n }\n };\n };\n Scroll.prototype.onWheelScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (_this.content.querySelector('tbody') === null) {\n return;\n }\n var top = element.scrollTop + e.deltaMode === 1 ? e.deltaY * 30 : e.deltaY;\n if (_this.previousValues.top === top) {\n return;\n }\n e.preventDefault();\n _this.parent.getContent().querySelector('.e-frozencontent').scrollTop = top;\n element.scrollTop = top;\n _this.previousValues.top = top;\n };\n };\n Scroll.prototype.onTouchScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n var cont;\n var mHdr;\n var pageXY = _this.getPointXY(e);\n var top = element.scrollTop + (_this.pageXY.y - pageXY.y);\n var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);\n if (_this.parent.getHeaderContent().contains(e.target)) {\n mHdr = _this.parent.getFrozenColumns() ?\n _this.parent.getHeaderContent().querySelector('.e-movableheader') : _this.parent.getHeaderContent().firstChild;\n if (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {\n return;\n }\n e.preventDefault();\n mHdr.scrollLeft = left;\n element.scrollLeft = left;\n _this.pageXY.x = pageXY.x;\n _this.previousValues.left = left;\n }\n else {\n cont = _this.parent.getContent().querySelector('.e-frozencontent');\n if (_this.previousValues.top === top || (top < 0 || (cont.scrollHeight - cont.clientHeight) < top)) {\n return;\n }\n e.preventDefault();\n cont.scrollTop = top;\n element.scrollTop = top;\n _this.pageXY.y = pageXY.y;\n _this.previousValues.top = top;\n }\n };\n };\n Scroll.prototype.setPageXY = function () {\n var _this = this;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n _this.pageXY = _this.getPointXY(e);\n };\n };\n Scroll.prototype.getPointXY = function (e) {\n var pageXY = { x: 0, y: 0 };\n if (e.touches && e.touches.length) {\n pageXY.x = e.touches[0].pageX;\n pageXY.y = e.touches[0].pageY;\n }\n else {\n pageXY.x = e.pageX;\n pageXY.y = e.pageY;\n }\n return pageXY;\n };\n Scroll.prototype.wireEvents = function () {\n if (this.oneTimeReady) {\n var frzCols = this.parent.getFrozenColumns();\n this.content = this.parent.getContent().firstChild;\n this.header = this.parent.getHeaderContent().firstChild;\n var mCont = this.content.querySelector('.e-movablecontent');\n var fCont = this.content.querySelector('.e-frozencontent');\n var mHdr = this.header.querySelector('.e-movableheader');\n if (this.parent.frozenRows) {\n EventHandler.add(frzCols ? mHdr : this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(frzCols ? mHdr : this.header, 'touchmove pointermove', this.onTouchScroll(frzCols ? mCont : this.content), this);\n }\n if (frzCols) {\n EventHandler.add(mCont, 'scroll', this.onContentScroll(mHdr), this);\n EventHandler.add(mCont, 'scroll', this.onFreezeContentScroll(fCont), this);\n EventHandler.add(fCont, 'scroll', this.onFreezeContentScroll(mCont), this);\n EventHandler.add(mHdr, 'scroll', this.onContentScroll(mCont), this);\n EventHandler.add(fCont, 'wheel', this.onWheelScroll(mCont), this);\n EventHandler.add(fCont, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(fCont, 'touchmove pointermove', this.onTouchScroll(mCont), this);\n }\n else {\n EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);\n EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);\n }\n if (this.parent.aggregates.length) {\n EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);\n }\n this.refresh();\n this.oneTimeReady = false;\n }\n var table = this.parent.getContentTable();\n if (table.scrollHeight < this.parent.getContent().clientHeight) {\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n if (this.parent.getFrozenColumns()) {\n addClass(this.parent.getContent().querySelector('.e-movablecontent').querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n }\n }\n if (!this.parent.enableVirtualization) {\n this.content.scrollLeft = this.header.scrollLeft;\n this.content.scrollTop = this.previousValues.top;\n }\n if (!this.parent.enableColumnVirtualization) {\n this.content.scrollLeft = this.header.scrollLeft;\n }\n };\n /**\n * @hidden\n */\n Scroll.prototype.getCssProperties = function (rtl) {\n var css = {};\n var enableRtl = isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;\n css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';\n css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';\n return css;\n };\n Scroll.prototype.ensureOverflow = function (content) {\n if (this.parent.getFrozenColumns()) {\n content.querySelector('.e-movablecontent').style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n }\n else {\n content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n }\n };\n Scroll.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.setPadding();\n this.oneTimeReady = true;\n if (this.parent.height === 'auto') {\n this.removePadding();\n }\n this.wireEvents();\n this.setHeight();\n this.setWidth();\n };\n /**\n * @hidden\n */\n Scroll.prototype.destroy = function () {\n this.removeEventListener();\n //Remove padding\n this.removePadding();\n removeClass([this.parent.getHeaderContent().firstChild], 'e-headercontent');\n removeClass([this.parent.getContent().firstChild], 'e-content');\n //Remove height\n this.parent.getContent().firstChild.style.height = '';\n //Remove width\n this.parent.element.style.width = '';\n //Remove Dom event\n EventHandler.remove(this.parent.getContent().firstChild, 'scroll', this.onContentScroll);\n };\n /**\n * Function to get the scrollbar width of the browser.\n * @return {number}\n * @hidden\n */\n Scroll.getScrollBarWidth = function () {\n return getScrollBarWidth();\n };\n return Scroll;\n}());\nexport { Scroll };\n","import { print as printWindow, createElement, detach } from '@syncfusion/ej2-base';\nimport { removeElement, getActualProperties, getActualPropFromColl } from '../base/util';\nimport { Grid } from '../base/grid';\nimport * as events from '../base/constant';\n/**\n *\n * The `Print` module is used to handle print action.\n */\nvar Print = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n * @hidden\n */\n function Print(parent, scrollModule) {\n this.isAsyncPrint = false;\n this.printing = 'isPrinting';\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.contentReady.bind(this));\n this.parent.addEventListener(events.actionBegin, this.actionBegin.bind(this));\n this.parent.on(events.onEmpty, this.onEmpty.bind(this));\n this.scrollModule = scrollModule;\n }\n /**\n * By default, prints all the Grid pages and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./api-grid.html#printmode-string).\n * @return {void}\n */\n Print.prototype.print = function () {\n this.renderPrintGrid();\n this.printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');\n this.printWind.moveTo(0, 0);\n this.printWind.resizeTo(screen.availWidth, screen.availHeight);\n };\n Print.prototype.onEmpty = function () {\n if (this.isPrintGrid()) {\n this.contentReady();\n }\n };\n Print.prototype.actionBegin = function () {\n if (this.isPrintGrid()) {\n this.isAsyncPrint = true;\n }\n };\n Print.prototype.renderPrintGrid = function () {\n var gObj = this.parent;\n var elem = 'element';\n var printGridModel = {};\n var element = createElement('div', {\n id: this.parent.element.id + '_print', className: gObj.element.className + ' e-print-grid'\n });\n document.body.appendChild(element);\n for (var _i = 0, _a = Print.printGridProp; _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'columns') {\n printGridModel[key] = getActualPropFromColl(gObj[key]);\n }\n else if (key === 'allowPaging') {\n printGridModel[key] = this.parent.printMode === 'CurrentPage';\n }\n else {\n printGridModel[key] = getActualProperties(gObj[key]);\n }\n }\n var printGrid = new Grid(printGridModel);\n printGrid.appendTo(element);\n printGrid[this.printing] = true;\n printGrid.trigger = gObj.trigger;\n };\n Print.prototype.contentReady = function () {\n if (this.isPrintGrid()) {\n var gObj = this.parent;\n if (this.isAsyncPrint) {\n this.printGrid();\n return;\n }\n var args = {\n requestType: 'print',\n element: gObj.element,\n selectedRows: gObj.getContentTable().querySelectorAll('tr[aria-selected=\"true\"]'),\n cancel: false\n };\n if (!this.isAsyncPrint) {\n gObj.trigger(events.beforePrint, args);\n }\n if (args.cancel) {\n detach(gObj.element);\n return;\n }\n else if (!this.isAsyncPrint) {\n this.printGrid();\n }\n }\n };\n Print.prototype.printGrid = function () {\n var gObj = this.parent;\n // Pager eleement process based on primt mode\n if (gObj.allowPaging && gObj.printMode === 'CurrentPage') {\n gObj.element.querySelector('.e-gridpager').style.display = 'none';\n }\n // Height adjustment on print grid\n if (gObj.height !== 'auto') {\n var cssProps = this.scrollModule.getCssProperties();\n var contentDiv = gObj.element.querySelector('.e-content');\n var headerDiv = gObj.element.querySelector('.e-gridheader');\n contentDiv.style.height = 'auto';\n contentDiv.style.overflowY = 'auto';\n headerDiv.style[cssProps.padding] = '';\n headerDiv.firstElementChild.style[cssProps.border] = '';\n }\n // Grid alignment adjustment on grouping\n if (gObj.allowGrouping) {\n if (!gObj.groupSettings.columns.length) {\n gObj.element.querySelector('.e-groupdroparea').style.display = 'none';\n }\n else {\n this.removeColGroup(gObj.groupSettings.columns.length, gObj.element);\n removeElement(gObj.element, '.e-grouptopleftcell');\n removeElement(gObj.element, '.e-recordpluscollapse');\n removeElement(gObj.element, '.e-indentcell');\n removeElement(gObj.element, '.e-recordplusexpand');\n }\n }\n // hide horizontal scroll\n gObj.element.querySelector('.e-content').style.overflowX = 'hidden';\n //hide filter bar in print grid\n if (gObj.allowFiltering && gObj.filterSettings.type === 'FilterBar') {\n gObj.element.querySelector('.e-filterbar').style.display = 'none';\n }\n // Hide the waiting popup\n var waitingPop = gObj.element.querySelectorAll('.e-spin-show');\n if (waitingPop.length > 0) {\n waitingPop[0].classList.add('e-spin-hide');\n waitingPop[0].classList.remove('e-spin-show');\n }\n if (gObj[this.printing]) {\n detach(gObj.element);\n }\n gObj.element.classList.remove('e-print-grid');\n this.printWind = printWindow(gObj.element, this.printWind);\n gObj[this.printing] = false;\n var args = {\n element: gObj.element\n };\n gObj.trigger(events.printComplete, args);\n };\n Print.prototype.removeColGroup = function (depth, element) {\n var groupCaption = element.querySelectorAll('.e-groupcaption');\n var colSpan = groupCaption[depth - 1].getAttribute('colspan');\n for (var i = 0; i < groupCaption.length; i++) {\n groupCaption[i].setAttribute('colspan', colSpan);\n }\n var colGroups = element.querySelectorAll('colgroup');\n for (var i = 0; i < colGroups.length; i++) {\n for (var j = 0; j < depth; j++) {\n colGroups[i].childNodes[j].style.display = 'none';\n }\n }\n };\n Print.prototype.isPrintGrid = function () {\n return this.parent.element.id.indexOf('_print') > 0 && this.parent[this.printing];\n };\n /**\n * To destroy the print\n * @return {void}\n * @hidden\n */\n Print.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.contentReady, this.contentReady.bind(this));\n this.parent.removeEventListener(events.actionBegin, this.actionBegin.bind(this));\n this.parent.off(events.onEmpty, this.onEmpty.bind(this));\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Print.prototype.getModuleName = function () {\n return 'print';\n };\n Print.printGridProp = [\n 'aggregates', 'allowGrouping', 'allowFiltering', 'allowMultiSorting', 'allowReordering', 'allowSorting',\n 'allowTextWrap', 'childGrid', 'columns', 'currentViewData', 'dataSource', 'detailTemplate', 'enableAltRow',\n 'enableColumnVirtualization', 'filterSettings', 'gridLines',\n 'groupSettings', 'height', 'locale', 'pageSettings', 'printMode', 'query', 'queryString',\n 'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'allowPaging',\n events.beforePrint, events.printComplete\n ];\n return Print;\n}());\nexport { Print };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { compile } from '@syncfusion/ej2-base';\nimport { getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { Property, Collection, ChildProperty } from '@syncfusion/ej2-base';\nimport { ValueFormatter } from '../services/value-formatter';\n/**\n * Configures the Grid's aggregate column.\n */\nvar AggregateColumn = /** @class */ (function (_super) {\n __extends(AggregateColumn, _super);\n function AggregateColumn() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.templateFn = {};\n return _this;\n }\n /**\n * @hidden\n */\n AggregateColumn.prototype.setFormatter = function () {\n var valueFormatter = new ValueFormatter();\n if (this.format && (this.format.skeleton || this.format.format)) {\n this.formatFn = valueFormatter.getFormatFunction(this.format);\n }\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.setTemplate = function (helper) {\n if (helper === void 0) { helper = {}; }\n if (this.footerTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.Summary)] = { fn: compile(this.footerTemplate, helper),\n property: 'footerTemplate' };\n }\n if (this.groupFooterTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.GroupSummary)] = { fn: compile(this.groupFooterTemplate, helper),\n property: 'groupFooterTemplate' };\n }\n if (this.groupCaptionTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.CaptionSummary)] = { fn: compile(this.groupCaptionTemplate, helper),\n property: 'groupCaptionTemplate' };\n }\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.getTemplate = function (type) {\n return this.templateFn[getEnumValue(CellType, type)];\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.setPropertiesSilent = function (prop) {\n this.setProperties(prop, true);\n };\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"columnName\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"format\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupFooterTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupCaptionTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"customAggregate\", void 0);\n return AggregateColumn;\n}(ChildProperty));\nexport { AggregateColumn };\n/**\n * Configures the aggregate rows.\n */\nvar AggregateRow = /** @class */ (function (_super) {\n __extends(AggregateRow, _super);\n function AggregateRow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], AggregateColumn)\n ], AggregateRow.prototype, \"columns\", void 0);\n return AggregateRow;\n}(ChildProperty));\nexport { AggregateRow };\n","import { Browser, createElement, remove } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * The `Clipboard` module is used to handle clipboard copy action.\n */\nvar Clipboard = /** @class */ (function () {\n /**\n * Constructor for the Grid clipboard module\n * @hidden\n */\n function Clipboard(parent) {\n this.copyContent = '';\n this.isSelect = false;\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * @hidden\n */\n Clipboard.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.keyPressed, this.keyDownHandler, this);\n };\n /**\n * @hidden\n */\n Clipboard.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.keyPressed, this.keyDownHandler);\n };\n Clipboard.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n this.clipBoardTextArea = createElement('textarea', {\n className: 'e-clipboard',\n styles: 'opacity: 0',\n attrs: { readonly: 'true', tabindex: '-1', 'aria-label': 'clipboard' }\n });\n this.parent.element.appendChild(this.clipBoardTextArea);\n };\n Clipboard.prototype.keyDownHandler = function (e) {\n if (e.action === 'ctrlPlusC') {\n this.copy();\n }\n else if (e.action === 'ctrlShiftPlusH') {\n this.copy(true);\n }\n };\n Clipboard.prototype.setCopyData = function (withHeader) {\n if (window.getSelection().toString() === '') {\n var isFrozen = this.parent.getFrozenColumns();\n this.clipBoardTextArea.value = this.copyContent = '';\n var mRows = void 0;\n var rows = this.parent.getRows();\n if (isFrozen) {\n mRows = this.parent.getMovableDataRows();\n }\n if (this.parent.selectionSettings.mode !== 'Cell') {\n var selectedIndexes = this.parent.getSelectedRowIndexes().sort(function (a, b) { return a - b; });\n if (withHeader) {\n var headerTextArray = [];\n for (var i = 0; i < this.parent.getVisibleColumns().length; i++) {\n headerTextArray[i] = this.parent.getVisibleColumns()[i].headerText;\n }\n this.getCopyData(headerTextArray, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < selectedIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[selectedIndexes[i]].querySelectorAll('.e-rowcell'));\n if (isFrozen) {\n cells.push.apply(cells, [].slice.call(mRows[selectedIndexes[i]].querySelectorAll('.e-rowcell')));\n }\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n var obj = this.checkBoxSelection();\n if (obj.status) {\n if (withHeader) {\n var headers = [];\n for (var i = 0; i < obj.colIndexes.length; i++) {\n headers.push(this.parent.getColumnHeaderByIndex(obj.colIndexes[i]));\n }\n this.getCopyData(headers, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < obj.rowIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[obj.rowIndexes[i]].\n querySelectorAll('.e-cellselectionbackground'));\n if (isFrozen) {\n cells.push.apply(cells, [].slice.call(mRows[obj.rowIndexes[i]].querySelectorAll('.e-cellselectionbackground')));\n }\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n this.getCopyData([].slice.call(this.parent.element.querySelectorAll('.e-cellselectionbackground')), true, '\\n', withHeader);\n }\n }\n var args = {\n data: this.copyContent,\n cancel: false,\n };\n this.parent.trigger(events.beforeCopy, args);\n if (args.cancel) {\n return;\n }\n this.clipBoardTextArea.value = this.copyContent = args.data;\n if (!Browser.userAgent.match(/ipad|ipod|iphone/i)) {\n this.clipBoardTextArea.select();\n }\n else {\n this.clipBoardTextArea.setSelectionRange(0, this.clipBoardTextArea.value.length);\n }\n this.isSelect = true;\n }\n };\n Clipboard.prototype.getCopyData = function (cells, isCell, splitKey, withHeader) {\n var isElement = typeof cells[0] !== 'string';\n for (var j = 0; j < cells.length; j++) {\n if (withHeader && isCell) {\n this.copyContent += this.parent.getColumns()[parseInt(cells[j].getAttribute('aria-colindex'), 10)].headerText + '\\n';\n }\n if (isElement) {\n if (!cells[j].classList.contains('e-hide')) {\n this.copyContent += cells[j].textContent;\n }\n }\n else {\n this.copyContent += cells[j];\n }\n if (j < cells.length - 1) {\n this.copyContent += splitKey;\n }\n }\n };\n /**\n * Copy selected rows or cells data into clipboard.\n * @param {boolean} withHeader - Specifies whether the column header data need to be copied or not.\n */\n Clipboard.prototype.copy = function (withHeader) {\n if (document.queryCommandSupported('copy')) {\n this.setCopyData(withHeader);\n document.execCommand('copy');\n this.clipBoardTextArea.blur();\n }\n if (this.isSelect) {\n window.getSelection().removeAllRanges();\n this.isSelect = false;\n }\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Clipboard.prototype.getModuleName = function () {\n return 'clipboard';\n };\n /**\n * To destroy the clipboard\n * @return {void}\n * @hidden\n */\n Clipboard.prototype.destroy = function () {\n this.removeEventListener();\n remove(this.clipBoardTextArea);\n };\n Clipboard.prototype.checkBoxSelection = function () {\n var gridObj = this.parent;\n var obj = { status: false };\n if (gridObj.selectionSettings.mode === 'Cell') {\n var rowCellIndxes = gridObj.getSelectedRowCellIndexes();\n var str = void 0;\n var isBox = void 0;\n var rowIndexes = [];\n var i = void 0;\n for (i = 0; i < rowCellIndxes.length; i++) {\n if (rowCellIndxes[i].cellIndexes.length) {\n rowIndexes.push(rowCellIndxes[i].rowIndex);\n }\n if (rowCellIndxes[i].cellIndexes.length) {\n if (!str) {\n str = JSON.stringify(rowCellIndxes[i].cellIndexes.sort());\n }\n if (str !== JSON.stringify(rowCellIndxes[i].cellIndexes.sort())) {\n break;\n }\n }\n }\n rowIndexes.sort();\n if (i === rowCellIndxes.length && rowIndexes[rowIndexes.length - 1] - rowIndexes[0] === rowIndexes.length - 1) {\n obj = { status: true, rowIndexes: rowIndexes, colIndexes: rowCellIndxes[0].cellIndexes };\n }\n }\n return obj;\n };\n return Clipboard;\n}());\nexport { Clipboard };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';\nimport { createElement, addClass, removeClass, append, classList } from '@syncfusion/ej2-base';\nimport { Property, Collection, Complex, Event, NotifyPropertyChanges, L10n } from '@syncfusion/ej2-base';\nimport { EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { DataUtil } from '@syncfusion/ej2-data';\nimport { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';\nimport { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, refreshForeignData } from './util';\nimport * as events from '../base/constant';\nimport { Render } from '../renderer/render';\nimport { RenderType } from './enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { CellRendererFactory } from '../services/cell-render-factory';\nimport { ServiceLocator } from '../services/service-locator';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RendererFactory } from '../services/renderer-factory';\nimport { ColumnWidthService } from '../services/width-controller';\nimport { AriaService } from '../services/aria-service';\nimport { FocusStrategy } from '../services/focus-strategy';\nimport { PageSettings } from '../models/page-settings';\nimport { Selection } from '../actions/selection';\nimport { Search } from '../actions/search';\nimport { ShowHide } from '../actions/show-hide';\nimport { Scroll } from '../actions/scroll';\nimport { Print } from '../actions/print';\nimport { AggregateRow } from '../models/aggregate';\nimport { Clipboard } from '../actions/clipboard';\n/**\n * Represents the field name and direction of sort column.\n */\nvar SortDescriptor = /** @class */ (function (_super) {\n __extends(SortDescriptor, _super);\n function SortDescriptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"direction\", void 0);\n return SortDescriptor;\n}(ChildProperty));\nexport { SortDescriptor };\n/**\n * Configures the sorting behavior of Grid.\n */\nvar SortSettings = /** @class */ (function (_super) {\n __extends(SortSettings, _super);\n function SortSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], SortDescriptor)\n ], SortSettings.prototype, \"columns\", void 0);\n __decorate([\n Property(true)\n ], SortSettings.prototype, \"allowUnsort\", void 0);\n return SortSettings;\n}(ChildProperty));\nexport { SortSettings };\n/**\n * Represents the predicate for the filter column.\n */\nvar Predicate = /** @class */ (function (_super) {\n __extends(Predicate, _super);\n function Predicate() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Predicate.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"operator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"matchCase\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"predicate\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualFilterValue\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualOperator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"ejpredicate\", void 0);\n return Predicate;\n}(ChildProperty));\nexport { Predicate };\n/**\n * Configures the filtering behavior of the Grid.\n */\nvar FilterSettings = /** @class */ (function (_super) {\n __extends(FilterSettings, _super);\n function FilterSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], Predicate)\n ], FilterSettings.prototype, \"columns\", void 0);\n __decorate([\n Property('FilterBar')\n ], FilterSettings.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], FilterSettings.prototype, \"showFilterBarStatus\", void 0);\n __decorate([\n Property(1500)\n ], FilterSettings.prototype, \"immediateModeDelay\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"operators\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"ignoreAccent\", void 0);\n return FilterSettings;\n}(ChildProperty));\nexport { FilterSettings };\n/**\n * Configures the selection behavior of the Grid.\n */\nvar SelectionSettings = /** @class */ (function (_super) {\n __extends(SelectionSettings, _super);\n function SelectionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Row')\n ], SelectionSettings.prototype, \"mode\", void 0);\n __decorate([\n Property('Flow')\n ], SelectionSettings.prototype, \"cellSelectionMode\", void 0);\n __decorate([\n Property('Single')\n ], SelectionSettings.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"checkboxOnly\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"persistSelection\", void 0);\n return SelectionSettings;\n}(ChildProperty));\nexport { SelectionSettings };\n/**\n * Configures the search behavior of the Grid.\n */\nvar SearchSettings = /** @class */ (function (_super) {\n __extends(SearchSettings, _super);\n function SearchSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property([])\n ], SearchSettings.prototype, \"fields\", void 0);\n __decorate([\n Property('')\n ], SearchSettings.prototype, \"key\", void 0);\n __decorate([\n Property('contains')\n ], SearchSettings.prototype, \"operator\", void 0);\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"ignoreCase\", void 0);\n return SearchSettings;\n}(ChildProperty));\nexport { SearchSettings };\n/**\n * Configures the row drop settings of the Grid.\n */\nvar RowDropSettings = /** @class */ (function (_super) {\n __extends(RowDropSettings, _super);\n function RowDropSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], RowDropSettings.prototype, \"targetID\", void 0);\n return RowDropSettings;\n}(ChildProperty));\nexport { RowDropSettings };\n/**\n * Configures the text wrap settings of the Grid.\n */\nvar TextWrapSettings = /** @class */ (function (_super) {\n __extends(TextWrapSettings, _super);\n function TextWrapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Both')\n ], TextWrapSettings.prototype, \"wrapMode\", void 0);\n return TextWrapSettings;\n}(ChildProperty));\nexport { TextWrapSettings };\n/**\n * Configures the group behavior of the Grid.\n */\nvar GroupSettings = /** @class */ (function (_super) {\n __extends(GroupSettings, _super);\n function GroupSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showDropArea\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showToggleButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showGroupedColumn\", void 0);\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showUngroupButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"disablePageWiseAggregates\", void 0);\n __decorate([\n Property([])\n ], GroupSettings.prototype, \"columns\", void 0);\n __decorate([\n Property()\n ], GroupSettings.prototype, \"captionTemplate\", void 0);\n return GroupSettings;\n}(ChildProperty));\nexport { GroupSettings };\n/**\n * Configures the edit behavior of the Grid.\n */\nvar EditSettings = /** @class */ (function (_super) {\n __extends(EditSettings, _super);\n function EditSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowAdding\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowDeleting\", void 0);\n __decorate([\n Property('Normal')\n ], EditSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"allowEditOnDblClick\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"showConfirmDialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"showDeleteConfirmDialog\", void 0);\n return EditSettings;\n}(ChildProperty));\nexport { EditSettings };\n/**\n * Represents the Grid component.\n * ```html\n *
\n * \n * ```\n */\nvar Grid = /** @class */ (function (_super) {\n __extends(Grid, _super);\n /**\n * Constructor for creating the component\n * @hidden\n */\n function Grid(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.inViewIndexes = [];\n _this.freezeRefresh = Component.prototype.refresh;\n _this.needsID = true;\n setValue('mergePersistData', _this.mergePersistGridData, _this);\n return _this;\n }\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n * @hidden\n */\n Grid.prototype.getPersistData = function () {\n var _this = this;\n var keyEntity = ['pageSettings', 'sortSettings',\n 'filterSettings', 'groupSettings', 'columns', 'searchSettings', 'selectedRowIndex'];\n var ignoreOnPersist = {\n pageSettings: ['template', 'pageSizes', 'enableQueryString', 'totalRecordsCount', 'pageCount'],\n filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent'],\n groupSettings: ['showDropArea', 'showToggleButton', 'showGroupedColumn', 'showUngroupButton',\n 'disablePageWiseAggregates', 'hideCaptionCount'],\n searchSettings: ['fields', 'operator', 'ignoreCase'],\n sortSettings: [], columns: [], selectedRowIndex: []\n };\n var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',\n 'commandTemplate', 'commands', 'dataSource'];\n keyEntity.forEach(function (value) {\n var currentObject = _this[value];\n for (var _i = 0, _a = ignoreOnPersist[value]; _i < _a.length; _i++) {\n var val = _a[_i];\n delete currentObject[val];\n }\n });\n this.ignoreInArrays(ignoreOnColumn, this.columns);\n return this.addOnPersist(keyEntity);\n };\n Grid.prototype.ignoreInArrays = function (ignoreOnColumn, columns) {\n var _this = this;\n columns.forEach(function (column) {\n if (column.columns) {\n _this.ignoreInColumn(ignoreOnColumn, column);\n _this.ignoreInArrays(ignoreOnColumn, column.columns);\n }\n else {\n _this.ignoreInColumn(ignoreOnColumn, column);\n }\n });\n };\n Grid.prototype.ignoreInColumn = function (ignoreOnColumn, column) {\n ignoreOnColumn.forEach(function (val) {\n delete column[val];\n });\n };\n /**\n * To provide the array of modules needed for component rendering\n * @return {ModuleDeclaration[]}\n * @hidden\n */\n Grid.prototype.requiredModules = function () {\n var modules = [];\n if (this.allowFiltering) {\n modules.push({\n member: 'filter',\n args: [this, this.filterSettings, this.serviceLocator]\n });\n }\n if (this.allowExcelExport) {\n modules.push({\n member: 'ExcelExport',\n args: [this]\n });\n }\n if (this.allowPdfExport) {\n modules.push({\n member: 'PdfExport',\n args: [this]\n });\n }\n if (this.allowSorting) {\n modules.push({\n member: 'sort',\n args: [this, this.sortSettings, this.sortedColumns, this.serviceLocator]\n });\n }\n if (this.allowPaging) {\n modules.push({\n member: 'pager',\n args: [this, this.pageSettings]\n });\n }\n if (this.allowSelection) {\n modules.push({\n member: 'selection',\n args: [this, this.selectionSettings, this.serviceLocator]\n });\n }\n modules.push({\n member: 'resize',\n args: [this]\n });\n if (this.allowReordering) {\n modules.push({\n member: 'reorder',\n args: [this]\n });\n }\n if (this.allowRowDragAndDrop) {\n modules.push({\n member: 'rowDragAndDrop',\n args: [this]\n });\n }\n if (this.allowGrouping) {\n modules.push({\n member: 'group',\n args: [this, this.groupSettings, this.sortedColumns, this.serviceLocator]\n });\n }\n if (this.aggregates.length) {\n modules.push({ member: 'aggregate', args: [this, this.serviceLocator] });\n }\n if (this.isDetail()) {\n modules.push({\n member: 'detailRow',\n args: [this, this.serviceLocator]\n });\n }\n if (this.toolbar || this.toolbarTemplate) {\n modules.push({\n member: 'toolbar',\n args: [this, this.serviceLocator]\n });\n }\n if (this.enableVirtualization || this.enableColumnVirtualization) {\n modules.push({\n member: 'virtualscroll',\n args: [this, this.serviceLocator]\n });\n }\n if (this.getFrozenColumns() || this.frozenRows) {\n modules.push({ member: 'freeze', args: [this, this.serviceLocator] });\n }\n if (this.isCommandColumn(this.columns)) {\n modules.push({\n member: 'commandColumn',\n args: [this, this.serviceLocator]\n });\n }\n if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {\n modules.push({\n member: 'edit',\n args: [this, this.serviceLocator]\n });\n }\n this.extendRequiredModules(modules);\n return modules;\n };\n Grid.prototype.extendRequiredModules = function (modules) {\n if (this.contextMenuItems) {\n modules.push({\n member: 'contextMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.showColumnMenu) {\n modules.push({\n member: 'columnMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.showColumnChooser) {\n modules.push({\n member: 'columnChooser',\n args: [this, this.serviceLocator]\n });\n }\n if (this.isForeignKeyEnabled(this.columns)) {\n modules.push({ member: 'foreignKey', args: [this, this.serviceLocator] });\n }\n };\n /**\n * For internal use only - Initialize the event handler;\n * @private\n */\n Grid.prototype.preRender = function () {\n this.serviceLocator = new ServiceLocator;\n this.initProperties();\n this.initializeServices();\n };\n Grid.prototype.initProperties = function () {\n /* tslint:disable */\n this.isInitial = true;\n this.sortedColumns = [];\n this.inViewIndexes = [];\n this.mediaCol = [];\n this.isInitialLoad = false;\n this.mergeCells = {};\n this.isEdit = false;\n this.checkAllRows = 'None';\n this.isCheckBoxSelection = false;\n this.isPersistSelection = false;\n this.freezeRefresh = Component.prototype.refresh;\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith'\n };\n this.defaultLocale = {\n EmptyRecord: 'No records to display',\n True: 'true',\n False: 'false',\n InvalidFilterMessage: 'Invalid Filter Data',\n GroupDropArea: 'Drag a column header here to group its column',\n UnGroup: 'Click here to ungroup',\n GroupDisable: 'Grouping is disabled for this column',\n FilterbarTitle: '\\'s filter bar cell',\n EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',\n // Toolbar Items\n Add: 'Add',\n Edit: 'Edit',\n Cancel: 'Cancel',\n Update: 'Update',\n Delete: 'Delete',\n Print: 'Print',\n Pdfexport: 'PDF Export',\n Excelexport: 'Excel Export',\n Wordexport: 'Word Export',\n Csvexport: 'CSV Export',\n Search: 'Search',\n Columnchooser: 'Columns',\n Save: 'Save',\n Item: 'item',\n Items: 'items',\n EditOperationAlert: 'No records selected for edit operation',\n DeleteOperationAlert: 'No records selected for delete operation',\n SaveButton: 'Save',\n OKButton: 'OK',\n CancelButton: 'Cancel',\n EditFormTitle: 'Details of ',\n AddFormTitle: 'Add New Record',\n BatchSaveConfirm: 'Are you sure you want to save changes?',\n BatchSaveLostChanges: 'Unsaved changes will be lost. Are you sure you want to continue?',\n ConfirmDelete: 'Are you sure you want to Delete Record?',\n CancelEdit: 'Are you sure you want to Cancel the changes?',\n ChooseColumns: 'Choose Column',\n SearchColumns: 'search columns',\n Matchs: 'No Matches Found',\n FilterButton: 'Filter',\n ClearButton: 'Clear',\n StartsWith: 'Starts With',\n EndsWith: 'Ends With',\n Contains: 'Contains',\n Equal: 'Equal',\n NotEqual: 'Not Equal',\n LessThan: 'Less Than',\n LessThanOrEqual: 'Less Than Or Equal',\n GreaterThan: 'Greater Than',\n GreaterThanOrEqual: 'Greater Than Or Equal',\n ChooseDate: 'Choose a Date',\n EnterValue: 'Enter the value',\n Copy: 'Copy',\n Group: 'Group by this column',\n Ungroup: 'Ungroup by this column',\n autoFitAll: 'Auto Fit all columns',\n autoFit: 'Auto Fit this column',\n Export: 'Export',\n FirstPage: 'First Page',\n LastPage: 'Last Page',\n PreviousPage: 'Previous Page',\n NextPage: 'Next Page',\n SortAscending: 'Sort Ascending',\n SortDescending: 'Sort Descending',\n EditRecord: 'Edit Record',\n DeleteRecord: 'Delete Record',\n FilterMenu: 'Filter',\n SelectAll: 'Select All',\n Blanks: 'Blanks',\n FilterTrue: 'True',\n FilterFalse: 'False',\n NoResult: 'No Matches Found',\n ClearFilter: 'Clear Filter',\n NumberFilter: 'Number Filters',\n TextFilter: 'Text Filters',\n DateFilter: 'Date Filters',\n MatchCase: 'Match Case',\n Between: 'Between',\n CustomFilter: 'Custom Filter',\n CustomFilterPlaceHolder: 'Enter the value',\n CustomFilterDatePlaceHolder: 'Choose a date',\n AND: 'AND',\n OR: 'OR',\n ShowRowsWhere: 'Show rows where:'\n };\n this.keyConfigs = {\n downArrow: 'downarrow',\n upArrow: 'uparrow',\n rightArrow: 'rightarrow',\n leftArrow: 'leftarrow',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftRight: 'shift+rightarrow',\n shiftLeft: 'shift+leftarrow',\n home: 'home',\n end: 'end',\n escape: 'escape',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n ctrlAltPageUp: 'ctrl+alt+pageup',\n ctrlAltPageDown: 'ctrl+alt+pagedown',\n altPageUp: 'alt+pageup',\n altPageDown: 'alt+pagedown',\n altDownArrow: 'alt+downarrow',\n altUpArrow: 'alt+uparrow',\n ctrlDownArrow: 'ctrl+downarrow',\n ctrlUpArrow: 'ctrl+uparrow',\n ctrlPlusA: 'ctrl+A',\n ctrlPlusP: 'ctrl+P',\n insert: 'insert',\n delete: 'delete',\n f2: 'f2',\n enter: 'enter',\n ctrlEnter: 'ctrl+enter',\n shiftEnter: 'shift+enter',\n tab: 'tab',\n shiftTab: 'shift+tab',\n space: 'space',\n ctrlPlusC: 'ctrl+C',\n ctrlShiftPlusH: 'ctrl+shift+H'\n };\n /* tslint:enable */\n };\n /**\n * For internal use only - To Initialize the component rendering.\n * @private\n */\n Grid.prototype.render = function () {\n this.ariaService.setOptions(this.element, { role: 'grid' });\n createSpinner({ target: this.element });\n this.renderModule = new Render(this, this.serviceLocator);\n this.getMediaColumns();\n this.searchModule = new Search(this);\n this.scrollModule = new Scroll(this);\n this.notify(events.initialLoad, {});\n this.trigger(events.load);\n prepareColumns(this.columns, this.enableColumnVirtualization);\n this.getColumns();\n this.processModel();\n this.gridRender();\n this.wireEvents();\n this.addListener();\n this.updateDefaultCursor();\n this.updateStackedFilter();\n this.showSpinner();\n this.notify(events.initialEnd, {});\n };\n /**\n * By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.\n */\n Grid.prototype.showSpinner = function () {\n showSpinner(this.element);\n };\n /**\n * Manually showed spinner needs to hide by `hideSpinnner`.\n */\n Grid.prototype.hideSpinner = function () {\n hideSpinner(this.element);\n };\n Grid.prototype.updateStackedFilter = function () {\n if (this.allowFiltering && this.filterSettings.type === 'FilterBar' &&\n this.getHeaderContent().querySelectorAll('.e-stackedheadercell').length) {\n this.getHeaderContent().classList.add('e-stackedfilter');\n }\n else {\n this.getHeaderContent().classList.remove('e-stackedfilter');\n }\n };\n Grid.prototype.getMediaColumns = function () {\n if (!this.enableColumnVirtualization) {\n var gcol = this.getColumns();\n this.getShowHideService = this.serviceLocator.getService('showHideService');\n if (!isNullOrUndefined(gcol)) {\n for (var index = 0; index < gcol.length; index++) {\n if (!isNullOrUndefined(gcol[index].hideAtMedia)) {\n this.mediaCol.push(gcol[index]);\n var media = window.matchMedia(gcol[index].hideAtMedia);\n this.mediaQueryUpdate(index, media);\n media.addListener(this.mediaQueryUpdate.bind(this, index));\n }\n }\n }\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.mediaQueryUpdate = function (columnIndex, e) {\n var col = this.getColumns()[columnIndex];\n col.visible = e.matches;\n if (this.isInitialLoad) {\n if (col.visible) {\n this.showHider.show(col.headerText, 'headerText');\n }\n else {\n this.showHider.hide(col.headerText, 'headerText');\n }\n }\n };\n Grid.prototype.refreshMediaCol = function () {\n this.isInitialLoad = true;\n };\n /**\n * For internal use only - Initialize the event handler\n * @private\n */\n Grid.prototype.eventInitializer = function () {\n //eventInitializer\n };\n /**\n * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).\n * @method destroy\n * @return {void}\n */\n Grid.prototype.destroy = function () {\n this.unwireEvents();\n this.removeListener();\n this.notify(events.destroy, {});\n this.destroyDependentModules();\n _super.prototype.destroy.call(this);\n this.element.innerHTML = '';\n classList(this.element, [], ['e-rtl', 'e-gridhover', 'e-responsive', 'e-default', 'e-device', 'e-grid-min-height']);\n };\n Grid.prototype.destroyDependentModules = function () {\n this.scrollModule.destroy();\n this.keyboardModule.destroy();\n this.focusModule.destroy();\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Grid.prototype.getModuleName = function () {\n return 'grid';\n };\n /**\n * Called internally if any of the property value changed.\n * @hidden\n */\n Grid.prototype.onPropertyChanged = function (newProp, oldProp) {\n var requireRefresh = false;\n var requireGridRefresh = false;\n var checkCursor;\n var args = { requestType: 'refresh' };\n if (this.isDestroyed) {\n return;\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'allowPaging':\n this.notify(events.uiUpdate, { module: 'pager', enable: this.allowPaging });\n requireRefresh = true;\n break;\n case 'pageSettings':\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n if (isNullOrUndefined(newProp.pageSettings.currentPage) && isNullOrUndefined(newProp.pageSettings.totalRecordsCount)\n || ((newProp.pageSettings.currentPage !== oldProp.pageSettings.currentPage)\n && !this.enableColumnVirtualization && !this.enableVirtualization\n && this.pageSettings.totalRecordsCount <= this.pageSettings.pageSize)) {\n requireRefresh = true;\n }\n break;\n case 'currencyCode':\n case 'locale':\n _super.prototype.refresh.call(this);\n break;\n case 'allowSorting':\n this.notify(events.uiUpdate, { module: 'sort', enable: this.allowSorting });\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'allowFiltering':\n this.updateStackedFilter();\n this.notify(events.uiUpdate, { module: 'filter', enable: this.allowFiltering });\n requireRefresh = true;\n if (this.filterSettings.type !== 'FilterBar') {\n this.refreshHeader();\n }\n break;\n case 'height':\n case 'width':\n this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });\n break;\n case 'allowReordering':\n this.headerModule.refreshUI();\n checkCursor = true;\n break;\n case 'allowRowDragAndDrop':\n this.notify(events.uiUpdate, { module: 'rowDragAndDrop', enable: this.allowRowDragAndDrop });\n break;\n case 'rowTemplate':\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n requireRefresh = true;\n break;\n case 'detailTemplate':\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n requireRefresh = true;\n break;\n case 'allowGrouping':\n this.notify(events.uiUpdate, { module: 'group', enable: this.allowGrouping });\n this.headerModule.refreshUI();\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'childGrid':\n requireRefresh = true;\n break;\n case 'toolbar':\n this.notify(events.uiUpdate, { module: 'toolbar' });\n break;\n case 'groupSettings':\n if (!(isNullOrUndefined(newProp.groupSettings.showDropArea))) {\n this.headerModule.refreshUI();\n requireRefresh = true;\n checkCursor = true;\n }\n this.notify(events.inBoundModelChanged, {\n module: 'group', properties: newProp.groupSettings,\n oldProperties: oldProp.groupSettings\n });\n break;\n case 'aggregates':\n this.notify(events.uiUpdate, { module: 'aggregate', properties: newProp });\n break;\n case 'columns':\n this.updateColumnObject();\n requireGridRefresh = true;\n break;\n default:\n this.extendedPropertyChange(prop, newProp);\n }\n }\n if (checkCursor) {\n this.updateDefaultCursor();\n }\n if (requireGridRefresh) {\n this.refresh();\n }\n else if (requireRefresh) {\n this.notify(events.modelChanged, args);\n requireRefresh = false;\n }\n };\n Grid.prototype.extendedPropertyChange = function (prop, newProp) {\n switch (prop) {\n case 'enableRtl':\n this.updateRTL();\n if (this.allowPaging) {\n this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;\n this.element.querySelector('.e-gridpager').ej2_instances[0].dataBind();\n }\n if (this.height !== 'auto') {\n this.scrollModule.removePadding(!newProp.enableRtl);\n this.scrollModule.setPadding();\n }\n if (this.toolbar) {\n this.toolbarModule.getToolbar().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.toolbarModule.getToolbar().ej2_instances[0].dataBind();\n }\n if (this.contextMenuItems) {\n this.contextMenuModule.getContextMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.contextMenuModule.getContextMenu().ej2_instances[0].dataBind();\n }\n if (this.showColumnMenu) {\n this.columnMenuModule.getColumnMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.columnMenuModule.getColumnMenu().ej2_instances[0].dataBind();\n }\n this.notify(events.rtlUpdated, {});\n break;\n case 'enableAltRow':\n this.renderModule.refresh();\n break;\n case 'frozenColumns':\n case 'frozenRows':\n this.freezeRefresh();\n break;\n case 'allowResizing':\n this.headerModule.refreshUI();\n this.updateResizeLines();\n break;\n case 'rowHeight':\n if (this.rowHeight) {\n addClass([this.element], 'e-grid-min-height');\n }\n else {\n removeClass([this.element], 'e-grid-min-height');\n }\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'gridLines':\n this.updateGridLines();\n break;\n case 'showColumnMenu':\n this.headerModule.refreshUI();\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: true });\n break;\n case 'columnMenuItems':\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: this.columnMenuItems });\n break;\n case 'contextMenuItems':\n this.notify(events.uiUpdate, { module: 'contextMenu', enable: this.contextMenuItems });\n break;\n case 'showColumnChooser':\n this.notify(events.uiUpdate, { module: 'columnChooser', enable: this.showColumnChooser });\n break;\n case 'filterSettings':\n this.updateStackedFilter();\n this.notify(events.inBoundModelChanged, { module: 'filter', properties: newProp.filterSettings });\n break;\n case 'searchSettings':\n this.notify(events.inBoundModelChanged, { module: 'search', properties: newProp.searchSettings });\n break;\n case 'sortSettings':\n this.notify(events.inBoundModelChanged, { module: 'sort' });\n break;\n case 'selectionSettings':\n this.notify(events.inBoundModelChanged, { module: 'selection', properties: newProp.selectionSettings });\n break;\n case 'editSettings':\n this.notify(events.inBoundModelChanged, { module: 'edit', properties: newProp.editSettings });\n break;\n case 'allowTextWrap':\n case 'textWrapSettings':\n if (this.allowTextWrap) {\n this.applyTextWrap();\n }\n else {\n this.removeTextWrap();\n }\n this.notify(events.freezeRender, { case: 'textwrap', isModeChg: (prop === 'textWrapSettings') });\n break;\n case 'dataSource':\n var pending_1 = this.getDataModule().getState();\n if (pending_1.isPending) {\n var gResult_1 = !isNullOrUndefined(this.dataSource) ? this.dataSource.result : [];\n (pending_1.group || []).forEach(function (name) { gResult_1 = DataUtil.group(gResult_1, name); });\n this.dataSource = { result: gResult_1, count: this.dataSource.count };\n pending_1.resolver(this.dataSource);\n }\n else {\n this.notify(events.dataSourceModified, {});\n this.renderModule.refresh();\n }\n break;\n case 'enableHover':\n var action = newProp.enableHover ? addClass : removeClass;\n action([this.element], 'e-gridhover');\n break;\n }\n };\n /**\n * @private\n */\n Grid.prototype.setProperties = function (prop, muteOnChange) {\n _super.prototype.setProperties.call(this, prop, muteOnChange);\n if (this.filterModule && muteOnChange) {\n this.filterModule.refreshFilter();\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.updateDefaultCursor = function () {\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n for (var _i = 0, headerRows_1 = headerRows; _i < headerRows_1.length; _i++) {\n var row = headerRows_1[_i];\n if (this.allowSorting || this.allowGrouping || this.allowReordering) {\n row.classList.remove('e-defaultcursor');\n }\n else {\n row.classList.add('e-defaultcursor');\n }\n }\n };\n Grid.prototype.updateColumnModel = function (columns) {\n for (var i = 0, len = columns.length; i < len; i++) {\n if (columns[i].columns) {\n this.updateColumnModel(columns[i].columns);\n }\n else {\n this.columnModel.push(columns[i]);\n }\n }\n this.updateFrozenColumns();\n };\n Grid.prototype.updateFrozenColumns = function () {\n var cols = this.columnModel;\n var count = 0;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].isFrozen) {\n cols.splice(this.frozenColumns + count, 0, cols.splice(i, 1)[0]);\n count++;\n }\n }\n };\n /**\n * Gets the columns from the Grid.\n * @return {Column[]}\n */\n Grid.prototype.getColumns = function (isRefresh) {\n var _this = this;\n var inview = this.inViewIndexes.map(function (v) { return v - _this.groupSettings.columns.length; }).filter(function (v) { return v > -1; });\n var vLen = inview.length;\n if (!this.enableColumnVirtualization || isNullOrUndefined(this.columnModel) || this.columnModel.length === 0 || isRefresh) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n var columns = vLen === 0 ? this.columnModel :\n this.columnModel.slice(inview[0], inview[vLen - 1] + 1);\n return columns;\n };\n /**\n * @private\n */\n Grid.prototype.getColumnIndexesInView = function () {\n return this.inViewIndexes;\n };\n /**\n * @private\n */\n Grid.prototype.getLocaleConstants = function () {\n return this.defaultLocale;\n };\n /**\n * @private\n */\n Grid.prototype.setColumnIndexesInView = function (indexes) {\n this.inViewIndexes = indexes;\n };\n /**\n * Gets the visible columns from the Grid.\n * @return {Column[]}\n */\n Grid.prototype.getVisibleColumns = function () {\n var cols = [];\n for (var _i = 0, _a = this.columnModel; _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.visible) {\n cols.push(col);\n }\n }\n return cols;\n };\n /**\n * Gets the header div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getHeaderContent = function () {\n return this.headerModule.getPanel();\n };\n /**\n * Sets the header div of the Grid to replace the old header.\n * @param {Element} element - Specifies the Grid header.\n * @return {void}\n */\n Grid.prototype.setGridHeaderContent = function (element) {\n this.headerModule.setPanel(element);\n };\n /**\n * Gets the content table of the Grid.\n * @return {Element}\n */\n Grid.prototype.getContentTable = function () {\n return this.contentModule.getTable();\n };\n /**\n * Sets the content table of the Grid to replace the old content table.\n * @param {Element} element - Specifies the Grid content table.\n * @return {void}\n */\n Grid.prototype.setGridContentTable = function (element) {\n this.contentModule.setTable(element);\n };\n /**\n * Gets the content div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * Sets the content div of the Grid to replace the old Grid content.\n * @param {Element} element - Specifies the Grid content.\n * @return {void}\n */\n Grid.prototype.setGridContent = function (element) {\n this.contentModule.setPanel(element);\n };\n /**\n * Gets the header table element of the Grid.\n * @return {Element}\n */\n Grid.prototype.getHeaderTable = function () {\n return this.headerModule.getTable();\n };\n /**\n * Sets the header table of the Grid to replace the old one.\n * @param {Element} element - Specifies the Grid header table.\n * @return {void}\n */\n Grid.prototype.setGridHeaderTable = function (element) {\n this.headerModule.setTable(element);\n };\n /**\n * Gets the footer div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getFooterContent = function () {\n if (isNullOrUndefined(this.footerElement)) {\n this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];\n }\n return this.footerElement;\n };\n /**\n * Gets the footer table element of the Grid.\n * @return {Element}\n */\n Grid.prototype.getFooterContentTable = function () {\n if (isNullOrUndefined(this.footerElement)) {\n this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];\n }\n return this.footerElement.firstChild.firstChild;\n };\n /**\n * Gets the pager of the Grid.\n * @return {Element}\n */\n Grid.prototype.getPager = function () {\n return this.gridPager; //get element from pager\n };\n /**\n * Sets the pager of the Grid to replace the old pager.\n * @param {Element} element - Specifies the Grid pager.\n * @return {void}\n */\n Grid.prototype.setGridPager = function (element) {\n this.gridPager = element;\n };\n /**\n * Gets a row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getRowByIndex = function (index) {\n return this.contentModule.getRowByIndex(index);\n };\n /**\n * Gets a movable tables row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getMovableRowByIndex = function (index) {\n return this.contentModule.getMovableRowByIndex(index);\n };\n /**\n * Gets all the data rows of the Grid.\n * @return {Element[]}\n */\n Grid.prototype.getRows = function () {\n return this.contentModule.getRowElements();\n };\n /**\n * Get a row information based on cell\n * @param {Element}\n * @return RowInfo\n */\n Grid.prototype.getRowInfo = function (target) {\n var ele = target;\n var args = { target: target };\n if (!isNullOrUndefined(target) && isNullOrUndefined(parentsUntil(ele, 'e-detailrowcollapse')\n && isNullOrUndefined(parentsUntil(ele, 'e-recordplusexpand'))) && !this.isEdit) {\n var cell = closest(ele, '.e-rowcell');\n if (!cell) {\n return args;\n }\n var cellIndex = parseInt(cell.getAttribute('aria-colindex'), 10);\n if (!isNullOrUndefined(cell) && !isNaN(cellIndex)) {\n var row_1 = closest(cell, '.e-row');\n var rowIndex = parseInt(row_1.getAttribute('aria-rowindex'), 10);\n var frzCols = this.getFrozenColumns();\n var isMovable = frzCols ? cellIndex >= frzCols : false;\n var rows = (isMovable ?\n this.contentModule.getMovableRows() : this.contentModule.getRows());\n var rowsObject = rows.filter(function (r) { return r.uid === row_1.getAttribute('data-uid'); });\n var rowData = rowsObject[0].data;\n var column = rowsObject[0].cells[isMovable ? cellIndex - frzCols : cellIndex].column;\n args = { cell: cell, cellIndex: cellIndex, row: row_1, rowIndex: rowIndex, rowData: rowData, column: column, target: target };\n }\n }\n return args;\n };\n /**\n * Gets the Grid's movable content rows from frozen grid.\n * @return {Element[]}\n */\n Grid.prototype.getMovableRows = function () {\n return this.contentModule.getMovableRowElements();\n };\n /**\n * Gets all the Grid's data rows.\n * @return {Element[]}\n */\n Grid.prototype.getDataRows = function () {\n var rows = [].slice.call(this.getContentTable().querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderTable().querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows);\n return dataRows;\n };\n /**\n * @hidden\n */\n Grid.prototype.addMovableRows = function (fRows, mrows) {\n for (var i = 0, len = mrows.length; i < len; i++) {\n fRows.push(mrows[i]);\n }\n return fRows;\n };\n Grid.prototype.generateDataRows = function (rows) {\n var dRows = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n if (rows[i].classList.contains('e-row') && !rows[i].classList.contains('e-hiddenrow')) {\n dRows.push(rows[i]);\n }\n }\n return dRows;\n };\n /**\n * Gets all the Grid's movable table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getMovableDataRows = function () {\n var rows = [].slice.call(this.getContent().querySelector('.e-movablecontent').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-movableheader').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows);\n return dataRows;\n };\n /**\n * Updates particular cell value based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {string } field - Specifies the field name which you want to update.\n * @param {string | number | boolean | Date} value - To update new value for the particular cell.\n */\n Grid.prototype.setCellValue = function (key, field, value) {\n var cells = 'cells';\n var rowData = 'data';\n var rowIdx = 'index';\n var rowuID = 'uid';\n var fieldIdx;\n var col;\n var tr;\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var cell = new CellRenderer(this, this.serviceLocator);\n var selectedRow = {};\n var rowObjects = this.contentModule.getRows();\n fieldIdx = this.getColumnIndexByField(field);\n col = this.getColumnByField(field);\n selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n tr = !isNullOrUndefined(selectedRow) ? this.element.querySelector('[data-uid=' + selectedRow[rowuID] + ']') : null;\n if (!isNullOrUndefined(tr)) {\n setValue(field, value, selectedRow[rowData]);\n var td = tr.childNodes[fieldIdx];\n if (!isNullOrUndefined(td)) {\n cell.refreshTD(td, selectedRow[cells][fieldIdx], selectedRow[rowData]);\n this.trigger(events.queryCellInfo, {\n cell: td, column: col, data: selectedRow[rowData]\n });\n }\n }\n else {\n return;\n }\n };\n /**\n * Updates and refresh the particular row values based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {Object} rowData - To update new data for the particular row.\n */\n Grid.prototype.setRowData = function (key, rowData) {\n var rwdata = 'data';\n var rowuID = 'uid';\n var rowObjects = this.contentModule.getRows();\n var selectedRow;\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var rowRenderer = new RowRenderer(this.serviceLocator, null, this);\n selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n if (!isNullOrUndefined(selectedRow) && this.element.querySelectorAll('[data-uid=' + selectedRow[rowuID] + ']').length) {\n selectedRow.changes = rowData;\n refreshForeignData(selectedRow, this.getForeignKeyColumns(), selectedRow.changes);\n rowRenderer.refresh(selectedRow, this.getColumns(), true);\n }\n else {\n return;\n }\n };\n /**\n * Gets a cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getCellFromIndex = function (rowIndex, columnIndex) {\n return this.getDataRows()[rowIndex].querySelectorAll('.e-rowcell')[columnIndex];\n };\n /**\n * Gets a movable table cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getMovableCellFromIndex = function (rowIndex, columnIndex) {\n return this.getMovableDataRows()[rowIndex].querySelectorAll('.e-rowcell')[columnIndex - this.getFrozenColumns()];\n };\n /**\n * Gets a column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByIndex = function (index) {\n return this.getHeaderTable().querySelectorAll('.e-headercell')[index];\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowObjectFromUID = function (uid) {\n var rows = this.contentModule.getRows();\n var row = this.rowObject(rows, uid);\n if (this.getFrozenColumns()) {\n if (!row) {\n row = this.rowObject(this.contentModule.getMovableRows(), uid);\n return row;\n }\n }\n return row;\n };\n Grid.prototype.rowObject = function (rows, uid) {\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.uid === uid) {\n return row;\n }\n }\n return null;\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowsObject = function () {\n return this.contentModule.getRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableRowsObject = function () {\n return this.contentModule.getMovableRows();\n };\n /**\n * Gets a column header by column name.\n * @param {string} field - Specifies the column name.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByField = function (field) {\n return this.getColumnHeaderByUid(this.getColumnByField(field).uid);\n };\n /**\n * Gets a column header by UID.\n * @param {string} field - Specifies the column uid.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByUid = function (uid) {\n return this.getHeaderContent().querySelector('[e-mappinguid=' + uid + ']').parentElement;\n };\n /**\n * Gets a Column by column name.\n * @param {string} field - Specifies the column name.\n * @return {Column}\n */\n Grid.prototype.getColumnByField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.field === field) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets a column index by column name.\n * @param {string} field - Specifies the column name.\n * @return {number}\n */\n Grid.prototype.getColumnIndexByField = function (field) {\n var cols = this.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].field === field) {\n return i;\n }\n }\n return -1;\n };\n /**\n * Gets a column by UID.\n * @param {string} uid - Specifies the column UID.\n * @return {Column}\n */\n Grid.prototype.getColumnByUid = function (uid) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.uid === uid) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets a column index by UID.\n * @param {string} uid - Specifies the column UID.\n * @return {number}\n */\n Grid.prototype.getColumnIndexByUid = function (uid) {\n var index = iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.uid === uid) {\n return index;\n }\n return undefined;\n })[0];\n return !isNullOrUndefined(index) ? index : -1;\n };\n /**\n * Gets UID by column name.\n * @param {string} field - Specifies the column name.\n * @return {string}\n */\n Grid.prototype.getUidByColumnField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.field === field) {\n return item.uid;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets TH index by column uid value.\n * @private\n * @param {string} uid - Specifies the column uid.\n * @return {number}\n */\n Grid.prototype.getNormalizedColumnIndex = function (uid) {\n var index = this.getColumnIndexByUid(uid);\n if (this.allowGrouping) {\n index += this.groupSettings.columns.length;\n }\n if (this.isDetail()) {\n index++;\n }\n /**\n * TODO: index normalization based on the stacked header, grouping and detailTemplate\n * and frozen should be handled here\n */\n return index;\n };\n /**\n * Gets the collection of column fields.\n * @return {string[]}\n */\n Grid.prototype.getColumnFieldNames = function () {\n var columnNames = [];\n var column;\n for (var i = 0, len = this.getColumns().length; i < len; i++) {\n column = this.getColumns()[i];\n if (column.visible) {\n columnNames.push(column.field);\n }\n }\n return columnNames;\n };\n /**\n * Gets a compiled row template.\n * @return {Function}\n * @private\n */\n Grid.prototype.getRowTemplate = function () {\n return this.rowTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getDetailTemplate = function () {\n return this.detailTemplateFn;\n };\n /**\n * Get the names of the primary key columns of the Grid.\n * @return {string[]}\n */\n Grid.prototype.getPrimaryKeyFieldNames = function () {\n var keys = [];\n for (var key = 0, col = this.columns, cLen = col.length; key < cLen; key++) {\n if (col[key].isPrimaryKey) {\n keys.push(col[key].field);\n }\n }\n return keys;\n };\n /**\n * Refreshes the Grid header and content.\n */\n Grid.prototype.refresh = function () {\n this.headerModule.refreshUI();\n this.updateStackedFilter();\n this.renderModule.refresh();\n };\n /**\n * Refreshes the Grid header.\n */\n Grid.prototype.refreshHeader = function () {\n this.headerModule.refreshUI();\n };\n /**\n * Gets the collection of selected rows.\n * @return {Element[]}\n */\n Grid.prototype.getSelectedRows = function () {\n return this.selectionModule ? this.selectionModule.selectedRecords : [];\n };\n /**\n * Gets the collection of selected row indexes.\n * @return {number[]}\n */\n Grid.prototype.getSelectedRowIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowIndexes : [];\n };\n /**\n * Gets the collection of selected row and cell indexes.\n * @return {number[]}\n */\n Grid.prototype.getSelectedRowCellIndexes = function () {\n return this.selectionModule.selectedRowCellIndexes;\n };\n /**\n * Gets the collection of selected records.\n * @return {Object[]}\n */\n Grid.prototype.getSelectedRecords = function () {\n return this.selectionModule.getSelectedRecords();\n };\n /**\n * Gets the data module.\n * @return {Data}\n */\n Grid.prototype.getDataModule = function () {\n return this.renderModule.data;\n };\n /**\n * Shows a column by its column name.\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n Grid.prototype.showColumns = function (keys, showBy) {\n showBy = showBy ? showBy : 'headerText';\n this.showHider.show(keys, showBy);\n };\n /**\n * Hides a column by column name.\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n Grid.prototype.hideColumns = function (keys, hideBy) {\n hideBy = hideBy ? hideBy : 'headerText';\n this.showHider.hide(keys, hideBy);\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenColumns = function () {\n return this.frozenColumns + this.getFrozenCount(this.columns, 0);\n };\n Grid.prototype.getFrozenCount = function (cols, cnt) {\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].columns) {\n cnt = this.getFrozenCount(cols[i].columns, cnt);\n }\n else {\n if (cols[i].isFrozen) {\n cnt++;\n }\n }\n }\n return cnt;\n };\n /**\n * Navigates to the specified target page.\n * @param {number} pageNo - Defines the page number to navigate.\n * @return {void}\n */\n Grid.prototype.goToPage = function (pageNo) {\n this.pagerModule.goToPage(pageNo);\n };\n /**\n * Defines the text of external message.\n * @param {string} message - Defines the message to update.\n * @return {void}\n */\n Grid.prototype.updateExternalMessage = function (message) {\n this.pagerModule.updateExternalMessage(message);\n };\n /**\n * Sorts a column with the given options.\n * @param {string} columnName - Defines the column name to be sorted.\n * @param {SortDirection} direction - Defines the direction of sorting field.\n * @param {boolean} isMultiSort - Specifies whether the previous sorted columns are to be maintained.\n * @return {void}\n */\n Grid.prototype.sortColumn = function (columnName, direction, isMultiSort) {\n this.sortModule.sortColumn(columnName, direction, isMultiSort);\n };\n /**\n * Clears all the sorted columns of the Grid.\n * @return {void}\n */\n Grid.prototype.clearSorting = function () {\n this.sortModule.clearSorting();\n };\n /**\n * Remove sorted column by field name.\n * @param {string} field - Defines the column field name to remove sort.\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeSortColumn = function (field) {\n this.sortModule.removeSortColumn(field);\n };\n /**\n * Filters grid row by column name with the given options.\n * @param {string} fieldName - Defines the field name of the column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query and another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, the grid filters the records with exact match. if false, it filters case\n * insensitive records (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true,\n * then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @return {void}\n */\n Grid.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {\n this.filterModule.filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator);\n };\n /**\n * Clears all the filtered rows of the Grid.\n * @return {void}\n */\n Grid.prototype.clearFiltering = function () {\n this.filterModule.clearFiltering();\n };\n /**\n * Removes filtered column by field name.\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n this.filterModule.removeFilteredColsByField(field, isClearFilterBar);\n };\n /**\n * Selects a row by given index.\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Grid.prototype.selectRow = function (index, isToggle) {\n this.selectionModule.selectRow(index, isToggle);\n };\n /**\n * Selects a collection of rows by indexes.\n * @param {number[]} rowIndexes - Specifies the row indexes.\n * @return {void}\n */\n Grid.prototype.selectRows = function (rowIndexes) {\n this.selectionModule.selectRows(rowIndexes);\n };\n /**\n * Deselects the current selected rows and cells.\n * @return {void}\n */\n Grid.prototype.clearSelection = function () {\n this.selectionModule.clearSelection();\n };\n /**\n * Selects a cell by the given index.\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Grid.prototype.selectCell = function (cellIndex, isToggle) {\n this.selectionModule.selectCell(cellIndex, isToggle);\n };\n /**\n * Searches Grid records using the given key.\n * You can customize the default search option by using the\n * [`searchSettings`](./api-searchSettings.html).\n * @param {string} searchString - Defines the key.\n * @return {void}\n */\n Grid.prototype.search = function (searchString) {\n this.searchModule.search(searchString);\n };\n /**\n * By default, prints all the pages of the Grid and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./api-grid.html#printmode-string).\n * @return {void}\n */\n Grid.prototype.print = function () {\n this.printModule.print();\n };\n /**\n * Delete a record with Given options. If fieldname and data is not given then grid will delete the selected record.\n * > `editSettings.allowDeleting` should be true.\n * @param {string} fieldname - Defines the primary key field, 'Name of the column'.\n * @param {Object} data - Defines the JSON data of the record to be deleted.\n */\n Grid.prototype.deleteRecord = function (fieldname, data) {\n this.editModule.deleteRecord(fieldname, data);\n };\n /**\n * To edit any particular row by TR element.\n * @param {HTMLTableRowElement} tr - Defines the table row to be edited.\n */\n Grid.prototype.startEdit = function () {\n this.editModule.startEdit();\n };\n /**\n * If Grid is in editable state, you can save a record by invoking endEdit.\n */\n Grid.prototype.endEdit = function () {\n this.editModule.endEdit();\n };\n /**\n * Cancels edited state.\n */\n Grid.prototype.closeEdit = function () {\n this.editModule.closeEdit();\n };\n /**\n * Adds a new record to the Grid. Without passing parameters, it adds empty rows.\n * > `editSettings.allowEditing` should be true.\n * @param {Object} data - Defines the new add record data.\n * @param {number} index - Defines the row index to be added\n */\n Grid.prototype.addRecord = function (data, index) {\n this.editModule.addRecord(data, index);\n };\n /**\n * Delete any visible row by TR element.\n * @param {HTMLTableRowElement} tr - Defines the table row element.\n */\n Grid.prototype.deleteRow = function (tr) {\n this.editModule.deleteRow(tr);\n };\n /**\n * Copy the selected rows or cells data into clipboard.\n * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.\n */\n Grid.prototype.copy = function (withHeader) {\n this.clipboardModule.copy(withHeader);\n };\n /**\n * @hidden\n */\n Grid.prototype.recalcIndentWidth = function () {\n if (!this.getHeaderTable().querySelector('.e-emptycell')) {\n return;\n }\n if ((!this.groupSettings.columns.length && !this.isDetail()) ||\n this.getHeaderTable().querySelector('.e-emptycell').getAttribute('indentRefreshed') ||\n !this.getContentTable()) {\n return;\n }\n var indentWidth = this.getHeaderTable().querySelector('.e-emptycell').parentElement.offsetWidth;\n var headerCol = [].slice.call(this.getHeaderTable().querySelector('colgroup').childNodes);\n var contentCol = [].slice.call(this.getContentTable().querySelector('colgroup').childNodes);\n var perPixel = indentWidth / 30;\n var i = 0;\n if (perPixel >= 1) {\n indentWidth = (30 / perPixel);\n }\n if (this.enableColumnVirtualization) {\n indentWidth = 30;\n }\n while (i < this.groupSettings.columns.length) {\n headerCol[i].style.width = indentWidth + 'px';\n contentCol[i].style.width = indentWidth + 'px';\n this.notify(events.columnWidthChanged, { index: i, width: indentWidth });\n i++;\n }\n if (this.isDetail()) {\n headerCol[i].style.width = indentWidth + 'px';\n contentCol[i].style.width = indentWidth + 'px';\n this.notify(events.columnWidthChanged, { index: i, width: indentWidth });\n }\n this.getHeaderTable().querySelector('.e-emptycell').setAttribute('indentRefreshed', 'true');\n };\n /**\n * Changes the Grid column positions by field names.\n * @param {string} fromFName - Defines the origin field name.\n * @param {string} toFName - Defines the destination field name.\n * @return {void}\n */\n Grid.prototype.reorderColumns = function (fromFName, toFName) {\n this.reorderModule.reorderColumns(fromFName, toFName);\n };\n /**\n * Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.\n * > * This method ignores the hidden columns.\n * > * Uses the `autoFitColumns` method in the `dataBound` event to resize at initial rendering.\n * @param {string |string[]} fieldNames - Defines the column names.\n * @return {void}\n *\n *\n * ```typescript\n *
\n * \n * ```\n *\n */\n Grid.prototype.autoFitColumns = function (fieldNames) {\n this.resizeModule.autoFitColumns(fieldNames);\n };\n /**\n * @hidden\n */\n Grid.prototype.createColumnchooser = function (x, y, target) {\n this.columnChooserModule.renderColumnChooser(x, y, target);\n };\n Grid.prototype.initializeServices = function () {\n this.serviceLocator.register('widthService', this.widthService = new ColumnWidthService(this));\n this.serviceLocator.register('cellRendererFactory', new CellRendererFactory);\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n this.serviceLocator.register('localization', this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale));\n this.serviceLocator.register('valueFormatter', this.valueFormatterService = new ValueFormatter(this.locale));\n this.serviceLocator.register('showHideService', this.showHider = new ShowHide(this));\n this.serviceLocator.register('ariaService', this.ariaService = new AriaService());\n this.serviceLocator.register('focus', this.focusModule = new FocusStrategy(this));\n };\n Grid.prototype.processModel = function () {\n var _this = this;\n var gCols = this.groupSettings.columns;\n var sCols = this.sortSettings.columns;\n var flag;\n var j;\n if (this.allowGrouping) {\n var _loop_1 = function (i, len) {\n j = 0;\n for (var sLen = sCols.length; j < sLen; j++) {\n if (sCols[j].field === gCols[i]) {\n flag = true;\n break;\n }\n }\n if (!flag) {\n sCols.push({ field: gCols[i], direction: 'Ascending' });\n }\n else {\n if (this_1.allowSorting) {\n this_1.sortedColumns.push(sCols[j].field);\n }\n else {\n sCols[j].direction = 'Ascending';\n }\n }\n if (!this_1.groupSettings.showGroupedColumn) {\n var column = this_1.enableColumnVirtualization ?\n this_1.columns.filter(function (c) { return c.field === gCols[i]; })[0] : this_1.getColumnByField(gCols[i]);\n column.visible = false;\n }\n };\n var this_1 = this;\n for (var i = 0, len = gCols.length; i < len; i++) {\n _loop_1(i, len);\n }\n }\n if (!gCols.length) {\n sCols.forEach(function (col) {\n _this.sortedColumns.push(col.field);\n });\n }\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n if (!isNullOrUndefined(this.parentDetails)) {\n var value = isNullOrUndefined(this.parentDetails.parentKeyFieldValue) ? 'undefined' :\n this.parentDetails.parentKeyFieldValue;\n this.query.where(this.queryString, 'equal', value, true);\n }\n this.initForeignColumn();\n };\n Grid.prototype.initForeignColumn = function () {\n if (this.isForeignKeyEnabled(this.getColumns())) {\n this.notify(events.initForeignKeyColumn, this.getForeignKeyColumns());\n }\n };\n Grid.prototype.gridRender = function () {\n this.updateRTL();\n if (this.enableHover) {\n this.element.classList.add('e-gridhover');\n }\n if (Browser.isDevice) {\n this.element.classList.add('e-device');\n }\n if (this.rowHeight) {\n this.element.classList.add('e-grid-min-height');\n }\n classList(this.element, ['e-responsive', 'e-default'], []);\n var rendererFactory = this.serviceLocator.getService('rendererFactory');\n this.headerModule = rendererFactory.getRenderer(RenderType.Header);\n this.contentModule = rendererFactory.getRenderer(RenderType.Content);\n this.printModule = new Print(this, this.scrollModule);\n this.clipboardModule = new Clipboard(this);\n this.renderModule.render();\n this.eventInitializer();\n this.createGridPopUpElement();\n this.widthService.setWidthToColumns();\n this.updateGridLines();\n this.applyTextWrap();\n this.createTooltip(); //for clip mode ellipsis\n };\n Grid.prototype.dataReady = function () {\n this.scrollModule.setWidth();\n this.scrollModule.setHeight();\n if (this.height !== 'auto') {\n this.scrollModule.setPadding();\n }\n };\n Grid.prototype.updateRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n Grid.prototype.createGridPopUpElement = function () {\n var popup = createElement('div', { className: 'e-gridpopup', styles: 'display:none;' });\n var content = createElement('div', { className: 'e-content', attrs: { tabIndex: '-1' } });\n append([content, createElement('div', { className: 'e-uptail e-tail' })], popup);\n content.appendChild(createElement('span'));\n append([content, createElement('div', { className: 'e-downtail e-tail' })], popup);\n this.element.appendChild(popup);\n };\n Grid.prototype.updateGridLines = function () {\n classList(this.element, [], ['e-verticallines', 'e-horizontallines', 'e-hidelines', 'e-bothlines']);\n switch (this.gridLines) {\n case 'Horizontal':\n this.element.classList.add('e-horizontallines');\n break;\n case 'Vertical':\n this.element.classList.add('e-verticallines');\n break;\n case 'None':\n this.element.classList.add('e-hidelines');\n break;\n case 'Both':\n this.element.classList.add('e-bothlines');\n break;\n }\n this.updateResizeLines();\n };\n Grid.prototype.updateResizeLines = function () {\n if (this.allowResizing &&\n !(this.gridLines === 'Vertical' || this.gridLines === 'Both')) {\n this.element.classList.add('e-resize-lines');\n }\n else {\n this.element.classList.remove('e-resize-lines');\n }\n };\n /**\n * The function is used to apply text wrap\n * @return {void}\n * @hidden\n */\n Grid.prototype.applyTextWrap = function () {\n if (this.allowTextWrap) {\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n switch (this.textWrapSettings.wrapMode) {\n case 'Header':\n wrap(this.element, false);\n wrap(this.getContent(), false);\n wrap(headerRows, true);\n break;\n case 'Content':\n wrap(this.getContent(), true);\n wrap(this.element, false);\n wrap(headerRows, false);\n break;\n default:\n wrap(this.element, true);\n wrap(this.getContent(), false);\n wrap(headerRows, false);\n }\n }\n };\n /**\n * The function is used to remove text wrap\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeTextWrap = function () {\n wrap(this.element, false);\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n wrap(headerRows, false);\n wrap(this.getContent(), false);\n };\n /**\n * The function is used to add Tooltip to the grid cell that has ellipsiswithtooltip clip mode.\n * @return {void}\n * @hidden\n */\n Grid.prototype.createTooltip = function () {\n this.toolTipObj = new Tooltip({ opensOn: 'custom', content: '' }, this.element);\n };\n Grid.prototype.getTooltipStatus = function (element) {\n var width;\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n var headerDivTag = 'e-gridheader';\n var contentDivTag = 'e-gridcontent';\n var htable = this.createTable(headerTable, headerDivTag, 'header');\n var ctable = this.createTable(headerTable, headerDivTag, 'content');\n var td = element;\n var table = headerTable.contains(element) ? htable : ctable;\n var ele = headerTable.contains(element) ? 'th' : 'tr';\n table.querySelector(ele).className = element.className;\n table.querySelector(ele).innerHTML = element.innerHTML;\n width = table.querySelector(ele).getBoundingClientRect().width;\n document.body.removeChild(htable);\n document.body.removeChild(ctable);\n if (width > element.getBoundingClientRect().width) {\n return true;\n }\n return false;\n };\n Grid.prototype.mouseMoveHandler = function (e) {\n if (this.isEllipsisTooltip()) {\n var element = parentsUntil(e.target, 'e-ellipsistooltip');\n if (element) {\n if (element.getAttribute('aria-describedby')) {\n return;\n }\n if (this.getTooltipStatus(element)) {\n if (element.getElementsByClassName('e-headertext').length) {\n this.toolTipObj.content = element.getElementsByClassName('e-headertext')[0].innerHTML;\n }\n else {\n this.toolTipObj.content = element.innerHTML;\n }\n this.toolTipObj.open(element);\n }\n else {\n this.toolTipObj.close();\n }\n }\n else {\n this.toolTipObj.close();\n }\n }\n };\n Grid.prototype.isEllipsisTooltip = function () {\n var cols = this.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n }\n return false;\n };\n Grid.prototype.scrollHandler = function () {\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n };\n /**\n * To create table for ellipsiswithtooltip\n * @hidden\n */\n Grid.prototype.createTable = function (table, tag, type) {\n var myTableDiv = createElement('div');\n myTableDiv.className = this.element.className;\n myTableDiv.style.cssText = 'display: inline-block;visibility:hidden;position:absolute';\n var mySubDiv = createElement('div');\n mySubDiv.className = tag;\n var myTable = createElement('table');\n myTable.className = table.className;\n myTable.style.cssText = 'table-layout: auto;width: auto';\n var ele = (type === 'header') ? 'th' : 'td';\n var myTr = createElement('tr');\n var mytd = createElement(ele);\n myTr.appendChild(mytd);\n myTable.appendChild(myTr);\n mySubDiv.appendChild(myTable);\n myTableDiv.appendChild(mySubDiv);\n document.body.appendChild(myTableDiv);\n return myTableDiv;\n };\n /**\n * Binding events to the element while component creation.\n * @hidden\n */\n Grid.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'touchend', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.getContent(), 'dblclick', this.dblClickHandler, this);\n if (this.allowKeyboard) {\n this.element.tabIndex = this.element.tabIndex === -1 ? 0 : this.element.tabIndex;\n }\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n EventHandler.add(this.getContent().firstElementChild, 'scroll', this.scrollHandler, this);\n EventHandler.add(this.element, 'mousemove', this.mouseMoveHandler, this);\n };\n /**\n * Unbinding events from the element while component destroy.\n * @hidden\n */\n Grid.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.mouseClickHandler);\n EventHandler.remove(this.element, 'touchend', this.mouseClickHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.getContent().firstElementChild, 'scroll', this.scrollHandler);\n EventHandler.remove(this.element, 'mousemove', this.mouseMoveHandler);\n };\n /**\n * @hidden\n */\n Grid.prototype.addListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.on(events.dataReady, this.dataReady, this);\n this.on(events.contentReady, this.recalcIndentWidth, this);\n this.on(events.headerRefreshed, this.recalcIndentWidth, this);\n this.dataBoundFunction = this.refreshMediaCol.bind(this);\n this.addEventListener(events.dataBound, this.dataBoundFunction);\n };\n /**\n * @hidden\n */\n Grid.prototype.removeListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.off(events.dataReady, this.dataReady);\n this.off(events.contentReady, this.recalcIndentWidth);\n this.off(events.headerRefreshed, this.recalcIndentWidth);\n this.removeEventListener(events.dataBound, this.dataBoundFunction);\n };\n /**\n * Get current visible data of grid.\n * @return {Object[]}\n * @hidden\n */\n Grid.prototype.getCurrentViewRecords = function () {\n return (this.allowGrouping && this.groupSettings.columns.length) ?\n this.currentViewData.records : this.currentViewData;\n };\n Grid.prototype.mouseClickHandler = function (e) {\n if (this.isChildGrid(e) || (parentsUntil(e.target, 'e-gridpopup') && e.touches) ||\n this.element.querySelectorAll('.e-cloneproperties').length || this.checkEdit(e)) {\n return;\n }\n if (((!this.allowRowDragAndDrop && (parentsUntil(e.target, 'e-gridcontent') ||\n e.target.tagName === 'TD')) || (!(this.allowGrouping || this.allowReordering) &&\n parentsUntil(e.target, 'e-gridheader'))) && e.touches) {\n return;\n }\n if (parentsUntil(e.target, 'e-gridheader') && this.allowRowDragAndDrop) {\n e.preventDefault();\n }\n this.notify(events.click, e);\n };\n Grid.prototype.checkEdit = function (e) {\n var tr = parentsUntil(e.target, 'e-row');\n var isEdit = this.editSettings.mode !== 'Batch' &&\n this.isEdit && tr && (tr.classList.contains('e-editedrow') || tr.classList.contains('e-addedrow'));\n return !parentsUntil(e.target, 'e-unboundcelldiv') && (isEdit || (parentsUntil(e.target, 'e-rowcell') &&\n parentsUntil(e.target, 'e-rowcell').classList.contains('e-editedbatchcell')));\n };\n Grid.prototype.dblClickHandler = function (e) {\n var grid = parentsUntil(e.target, 'e-grid');\n if (isNullOrUndefined(grid) || grid.id !== this.element.id || closest(e.target, '.e-unboundcelldiv')) {\n return;\n }\n var args = this.getRowInfo(e.target);\n args.target = e.target;\n this.trigger(events.recordDoubleClick, args);\n this.notify(events.dblclick, e);\n };\n Grid.prototype.focusOutHandler = function (e) {\n if (this.isChildGrid(e)) {\n return;\n }\n if (!parentsUntil(e.target, 'e-grid')) {\n this.element.querySelector('.e-gridpopup').style.display = 'None';\n }\n var filterClear = this.element.querySelector('.e-cancel:not(.e-hide)');\n if (filterClear) {\n filterClear.classList.add('e-hide');\n }\n if ((!e.relatedTarget || !parentsUntil(e.relatedTarget, 'e-grid'))\n && !this.keyPress && this.editSettings.mode === 'Batch' && this.isEdit) {\n this.editModule.saveCell();\n }\n this.keyPress = false;\n };\n Grid.prototype.isChildGrid = function (e) {\n var gridElement = parentsUntil(e.target, 'e-grid');\n if (gridElement && gridElement.id !== this.element.id) {\n return true;\n }\n return false;\n };\n Grid.prototype.mergePersistGridData = function () {\n var data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n if (!(isNullOrUndefined(data) || (data === ''))) {\n var dataObj = JSON.parse(data);\n var keys = Object.keys(dataObj);\n this.isProtectedOnChange = true;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if ((typeof this[key] === 'object') && !isNullOrUndefined(this[key])) {\n if (Array.isArray(this[key]) && key === 'columns') {\n this.mergeColumns(dataObj[key], this[key]);\n this[key] = dataObj[key];\n }\n else {\n extend(this[key], dataObj[key]);\n }\n }\n else {\n this[key] = dataObj[key];\n }\n }\n this.isProtectedOnChange = false;\n }\n };\n Grid.prototype.mergeColumns = function (storedColumn, columns) {\n var _this = this;\n storedColumn.forEach(function (col, index, arr) {\n var ind;\n var localCol = _this.getColumnByField(col.field) ||\n columns.some(function (element, i) {\n ind = i;\n return element.headerText === col.headerText;\n }) && columns[ind];\n if (!isNullOrUndefined(localCol)) {\n if (localCol.columns && localCol.columns.length) {\n _this.mergeColumns(col.columns, localCol.columns);\n }\n else {\n arr[index] = extend({}, localCol, col, true);\n }\n }\n });\n };\n Grid.prototype.isDetail = function () {\n return !isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.childGrid);\n };\n Grid.prototype.isCommandColumn = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this.isCommandColumn(col.columns);\n }\n return !!(col.commands || col.commandsTemplate);\n });\n };\n Grid.prototype.isForeignKeyEnabled = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this.isForeignKeyEnabled(col.columns);\n }\n return !!(col.dataSource && col.foreignKeyValue);\n });\n };\n Grid.prototype.keyActionHandler = function (e) {\n this.keyPress = true;\n if (this.isChildGrid(e) ||\n (this.isEdit && e.action !== 'escape' && e.action !== 'enter' && e.action !== 'shiftEnter'\n && e.action !== 'tab' && e.action !== 'shiftTab')) {\n return;\n }\n if (this.allowKeyboard) {\n if (e.action === 'ctrlPlusP') {\n e.preventDefault();\n this.print();\n }\n this.notify(events.keyPressed, e);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.setInjectedModules = function (modules) {\n this.injectedModules = modules;\n };\n Grid.prototype.updateColumnObject = function () {\n prepareColumns(this.columns, this.enableColumnVirtualization);\n this.initForeignColumn();\n this.notify(events.autoCol, {});\n };\n /**\n * Gets the foreign columns from Grid.\n * @return {Column[]}\n */\n Grid.prototype.getForeignKeyColumns = function () {\n return this.getColumns().filter(function (col) {\n return col.isForeignColumn();\n });\n };\n /**\n * Refreshes the Grid column changes.\n */\n Grid.prototype.refreshColumns = function () {\n this.updateColumnObject();\n this.refresh();\n };\n /**\n * Export Grid data to Excel file(.xlsx).\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n */\n Grid.prototype.excelExport = function (excelExportProperties, isMultipleExport, \n /* tslint:disable-next-line:no-any */\n workbook, isBlob) {\n return this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, false, isBlob);\n };\n /**\n * Export Grid data to CSV file.\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n *\n */\n Grid.prototype.csvExport = function (excelExportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, workbook, isBlob) {\n return this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, true, isBlob);\n };\n /**\n * Export Grid data to PDF document.\n * @param {pdfExportProperties} PdfExportProperties - Defines the export properties of the Grid.\n * @param {isMultipleExport} isMultipleExport - Define to enable multiple export.\n * @param {pdfDoc} pdfDoc - Defined the Pdf Document if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n *\n */\n Grid.prototype.pdfExport = function (pdfExportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, pdfDoc, isBlob) {\n return this.pdfExportModule.Map(this, pdfExportProperties, isMultipleExport, pdfDoc, isBlob);\n };\n /**\n * Groups a column by column name.\n * @param {string} columnName - Defines the column name to group.\n * @return {void}\n */\n Grid.prototype.groupColumn = function (columnName) {\n this.groupModule.groupColumn(columnName);\n };\n /**\n * Ungroups a column by column name.\n * @param {string} columnName - Defines the column name to ungroup.\n * @return {void}\n */\n Grid.prototype.ungroupColumn = function (columnName) {\n this.groupModule.ungroupColumn(columnName);\n };\n /**\n * @hidden\n */\n Grid.prototype.isContextMenuOpen = function () {\n return this.contextMenuModule && this.contextMenuModule.isOpen;\n };\n /**\n * @hidden\n */\n Grid.prototype.ensureModuleInjected = function (module) {\n return this.getInjectedModules().indexOf(module) >= 0;\n };\n /**\n * Destroys the given template reference.\n * @param {string[]} propertyNames - Defines the collection of template name.\n */\n Grid.prototype.destroyTemplate = function (propertyNames) {\n this.clearTemplate(propertyNames);\n };\n __decorate([\n Property([])\n ], Grid.prototype, \"columns\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"enableAltRow\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"enableHover\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowTextWrap\", void 0);\n __decorate([\n Complex({}, TextWrapSettings)\n ], Grid.prototype, \"textWrapSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowPaging\", void 0);\n __decorate([\n Complex({}, PageSettings)\n ], Grid.prototype, \"pageSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableVirtualization\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"enableColumnVirtualization\", void 0);\n __decorate([\n Complex({}, SearchSettings)\n ], Grid.prototype, \"searchSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowSorting\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"allowMultiSorting\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowExcelExport\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowPdfExport\", void 0);\n __decorate([\n Complex({}, SortSettings)\n ], Grid.prototype, \"sortSettings\", void 0);\n __decorate([\n Property(true)\n ], Grid.prototype, \"allowSelection\", void 0);\n __decorate([\n Property(-1)\n ], Grid.prototype, \"selectedRowIndex\", void 0);\n __decorate([\n Complex({}, SelectionSettings)\n ], Grid.prototype, \"selectionSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowReordering\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowResizing\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowRowDragAndDrop\", void 0);\n __decorate([\n Complex({}, RowDropSettings)\n ], Grid.prototype, \"rowDropSettings\", void 0);\n __decorate([\n Complex({}, FilterSettings)\n ], Grid.prototype, \"filterSettings\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"allowGrouping\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"showColumnMenu\", void 0);\n __decorate([\n Complex({}, GroupSettings)\n ], Grid.prototype, \"groupSettings\", void 0);\n __decorate([\n Complex({}, EditSettings)\n ], Grid.prototype, \"editSettings\", void 0);\n __decorate([\n Collection([], AggregateRow)\n ], Grid.prototype, \"aggregates\", void 0);\n __decorate([\n Property(false)\n ], Grid.prototype, \"showColumnChooser\", void 0);\n __decorate([\n Property('auto')\n ], Grid.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Grid.prototype, \"width\", void 0);\n __decorate([\n Property('Default')\n ], Grid.prototype, \"gridLines\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"rowTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"detailTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"childGrid\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"queryString\", void 0);\n __decorate([\n Property('AllPages')\n ], Grid.prototype, \"printMode\", void 0);\n __decorate([\n Property([])\n ], Grid.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], Grid.prototype, \"rowHeight\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"query\", void 0);\n __decorate([\n Property('USD')\n ], Grid.prototype, \"currencyCode\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"toolbar\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"contextMenuItems\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"columnMenuItems\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"toolbarTemplate\", void 0);\n __decorate([\n Property()\n ], Grid.prototype, \"pagerTemplate\", void 0);\n __decorate([\n Property(0)\n ], Grid.prototype, \"frozenRows\", void 0);\n __decorate([\n Property(0)\n ], Grid.prototype, \"frozenColumns\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"queryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"recordDoubleClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowSelecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowSelected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDeselecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDeselected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSelecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSelected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellDeselecting\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellDeselected\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDragStart\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDrag\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnDrop\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"printComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforePrint\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"pdfQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"excelQueryCellInfo\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeExcelExport\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"excelExportComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforePdfExport\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"pdfExportComplete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"detailDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDragStart\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDrag\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"rowDrop\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"toolbarClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeOpenColumnChooser\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"batchAdd\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"batchDelete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeBatchAdd\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeBatchDelete\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeBatchSave\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beginEdit\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellEdit\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"cellSave\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeDataBound\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"contextMenuOpen\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"contextMenuClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnMenuOpen\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"columnMenuClick\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"checkBoxChange\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"beforeCopy\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"dataStateChange\", void 0);\n __decorate([\n Event()\n ], Grid.prototype, \"dataSourceChanged\", void 0);\n Grid = __decorate([\n NotifyPropertyChanges\n ], Grid);\n return Grid;\n}(Component));\nexport { Grid };\nGrid.Inject(Selection);\n","import { Browser } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { createElement, closest, classList } from '@syncfusion/ej2-base';\nimport { setCssInGridPopUp, getActualPropFromColl, isActionPrevent } from '../base/util';\nimport * as events from '../base/constant';\nimport { AriaService } from '../services/aria-service';\n/**\n *\n * The `Sort` module is used to handle sorting action.\n */\nvar Sort = /** @class */ (function () {\n /**\n * Constructor for Grid sorting module\n * @hidden\n */\n function Sort(parent, sortSettings, sortedColumns, locator) {\n this.contentRefresh = true;\n this.isModelChanged = true;\n this.aria = new AriaService();\n this.parent = parent;\n this.sortSettings = sortSettings;\n this.sortedColumns = sortedColumns;\n this.focus = locator.getService('focus');\n this.addEventListener();\n }\n /**\n * The function used to update sortSettings\n * @return {void}\n * @hidden\n */\n Sort.prototype.updateModel = function () {\n var sortedColumn = { field: this.columnName, direction: this.direction };\n var index;\n var gCols = this.parent.groupSettings.columns;\n var flag = false;\n if (!this.isMultiSort) {\n if (!gCols.length) {\n this.sortSettings.columns = [sortedColumn];\n }\n else {\n var sortedCols = [];\n for (var i = 0, len = gCols.length; i < len; i++) {\n index = this.getSortedColsIndexByField(gCols[i], sortedCols);\n if (this.columnName === gCols[i]) {\n flag = true;\n sortedCols.push(sortedColumn);\n }\n else {\n var sCol = this.getSortColumnFromField(gCols[i]);\n sortedCols.push({ field: sCol.field, direction: sCol.direction });\n }\n }\n if (!flag) {\n sortedCols.push(sortedColumn);\n }\n this.sortSettings.columns = sortedCols;\n }\n }\n else {\n index = this.getSortedColsIndexByField(this.columnName);\n if (index > -1) {\n this.sortSettings.columns.splice(index, 1);\n }\n this.sortSettings.columns.push(sortedColumn);\n this.sortSettings.columns = this.sortSettings.columns;\n }\n this.parent.dataBind();\n this.lastSortedCol = this.columnName;\n };\n /**\n * The function used to trigger onActionComplete\n * @return {void}\n * @hidden\n */\n Sort.prototype.onActionComplete = function (e) {\n var args = !this.isRemove ? {\n columnName: this.columnName, direction: this.direction, requestType: 'sorting', type: events.actionComplete\n } : { requestType: 'sorting', type: events.actionComplete };\n this.isRemove = false;\n this.parent.trigger(events.actionComplete, extend(e, args));\n };\n /**\n * Sorts a column with the given options.\n * @param {string} columnName - Defines the column name to sort.\n * @param {SortDirection} direction - Defines the direction of sorting field.\n * @param {boolean} isMultiSort - Specifies whether the previously sorted columns are to be maintained.\n * @return {void}\n */\n Sort.prototype.sortColumn = function (columnName, direction, isMultiSort) {\n var gObj = this.parent;\n if (this.parent.getColumnByField(columnName).allowSorting === false || this.parent.isContextMenuOpen()) {\n return;\n }\n if (!gObj.allowMultiSorting) {\n isMultiSort = gObj.allowMultiSorting;\n }\n if (this.isActionPrevent()) {\n gObj.notify(events.preventBatch, {\n instance: this, handler: this.sortColumn,\n arg1: columnName, arg2: direction, arg3: isMultiSort\n });\n return;\n }\n this.columnName = columnName;\n this.direction = direction;\n this.isMultiSort = isMultiSort;\n this.removeSortIcons();\n var column = gObj.getColumnHeaderByField(columnName);\n this.updateSortedCols(columnName, isMultiSort);\n if (this.contentRefresh) {\n this.updateModel();\n }\n };\n Sort.prototype.updateSortedCols = function (columnName, isMultiSort) {\n if (!isMultiSort) {\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.sortedColumns.length; i < len; i++) {\n if (this.parent.groupSettings.columns.indexOf(this.sortedColumns[i]) < 0) {\n this.sortedColumns.splice(i, 1);\n len--;\n i--;\n }\n }\n }\n else {\n this.sortedColumns.splice(0, this.sortedColumns.length);\n }\n }\n if (this.sortedColumns.indexOf(columnName) < 0) {\n this.sortedColumns.push(columnName);\n }\n };\n /**\n * @hidden\n */\n Sort.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (this.contentRefresh) {\n var args = this.sortSettings.columns.length ? {\n columnName: this.columnName, direction: this.direction, requestType: 'sorting', type: events.actionBegin\n } : { requestType: 'sorting', type: events.actionBegin };\n this.parent.notify(events.modelChanged, args);\n }\n this.removeSortIcons();\n this.addSortIcons();\n };\n /**\n * Clears all the sorted columns of the Grid.\n * @return {void}\n */\n Sort.prototype.clearSorting = function () {\n var cols = getActualPropFromColl(this.sortSettings.columns);\n if (this.isActionPrevent()) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearSorting });\n return;\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n this.removeSortColumn(cols[i].field);\n }\n };\n Sort.prototype.isActionPrevent = function () {\n return isActionPrevent(this.parent);\n };\n /**\n * Remove sorted column by field name.\n * @param {string} field - Defines the column field name to remove sort.\n * @return {void}\n * @hidden\n */\n Sort.prototype.removeSortColumn = function (field) {\n var gObj = this.parent;\n var cols = this.sortSettings.columns;\n if (this.sortedColumns.indexOf(field) < 0) {\n return;\n }\n if (this.isActionPrevent()) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.removeSortColumn, arg1: field });\n return;\n }\n this.removeSortIcons();\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].field === field) {\n if (gObj.allowGrouping && gObj.groupSettings.columns.indexOf(cols[i].field) > -1) {\n continue;\n }\n this.sortedColumns.splice(this.sortedColumns.indexOf(cols[i].field), 1);\n cols.splice(i, 1);\n this.isRemove = true;\n if (this.isModelChanged) {\n this.parent.notify(events.modelChanged, {\n requestType: 'sorting', type: events.actionBegin\n });\n }\n break;\n }\n }\n this.addSortIcons();\n };\n Sort.prototype.getSortedColsIndexByField = function (field, sortedColumns) {\n var cols = sortedColumns ? sortedColumns : this.sortSettings.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].field === field) {\n return i;\n }\n }\n return -1;\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Sort.prototype.getModuleName = function () {\n return 'sort';\n };\n Sort.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n if (this.parent.getColumns().length && this.sortSettings.columns.length) {\n var gObj = this.parent;\n this.contentRefresh = false;\n this.isMultiSort = this.sortSettings.columns.length > 1;\n for (var _i = 0, _a = gObj.sortSettings.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n if (this.sortedColumns.indexOf(col.field) > -1) {\n this.sortColumn(col.field, col.direction, true);\n }\n }\n this.isMultiSort = false;\n this.contentRefresh = true;\n this.addSortIcons();\n }\n };\n /**\n * @hidden\n */\n Sort.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.sortComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.click, this.clickHandler, this);\n this.parent.on(events.headerRefreshed, this.refreshSortIcons, this);\n this.parent.on(events.keyPressed, this.keyPressed, this);\n };\n /**\n * @hidden\n */\n Sort.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.sortComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.headerRefreshed, this.refreshSortIcons);\n this.parent.off(events.keyPressed, this.keyPressed);\n };\n /**\n * To destroy the sorting\n * @return {void}\n * @hidden\n */\n Sort.prototype.destroy = function () {\n this.isModelChanged = false;\n if (this.parent.element.querySelector('.e-gridpopup').querySelectorAll('.e-sortdirect').length) {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n this.clearSorting();\n this.isModelChanged = true;\n this.removeEventListener();\n };\n Sort.prototype.clickHandler = function (e) {\n this.popUpClickHandler(e);\n var target = closest(e.target, '.e-headercell');\n if (target && !e.target.classList.contains('e-grptogglebtn') &&\n !e.target.classList.contains('e-stackedheadercell') &&\n !e.target.classList.contains('e-stackedheadercelldiv') &&\n !(target.classList.contains('e-resized')) &&\n !e.target.classList.contains('e-rhandler') &&\n !e.target.classList.contains('e-columnmenu') &&\n !e.target.classList.contains('e-filtermenudiv')) {\n var gObj = this.parent;\n var colObj = gObj.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));\n var direction = !target.querySelectorAll('.e-ascending').length ? 'Ascending' :\n 'Descending';\n if (colObj.type !== 'checkbox') {\n this.initiateSort(target, e, colObj);\n if (Browser.isDevice) {\n this.showPopUp(e);\n }\n }\n }\n if (target) {\n target.classList.remove('e-resized');\n }\n };\n Sort.prototype.keyPressed = function (e) {\n var ele = e.target;\n if (!this.parent.isEdit && (e.action === 'enter' || e.action === 'ctrlEnter' || e.action === 'shiftEnter')\n && closest(ele, '.e-headercell')) {\n var target = this.focus.getFocusedElement();\n if (isNullOrUndefined(target) || !target.classList.contains('e-headercell')\n || !target.querySelector('.e-headercelldiv')) {\n return;\n }\n var col = this.parent.getColumnByUid(target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));\n this.initiateSort(target, e, col);\n }\n };\n Sort.prototype.initiateSort = function (target, e, column) {\n var gObj = this.parent;\n var field = column.field;\n var direction = !target.querySelectorAll('.e-ascending').length ? 'Ascending' :\n 'Descending';\n if (e.shiftKey || (this.sortSettings.allowUnsort && target.querySelectorAll('.e-descending').length)\n && !(gObj.groupSettings.columns.indexOf(field) > -1)) {\n this.removeSortColumn(field);\n }\n else {\n this.sortColumn(field, direction, e.ctrlKey || this.enableSortMultiTouch);\n }\n };\n Sort.prototype.showPopUp = function (e) {\n var target = closest(e.target, '.e-headercell');\n if (!isNullOrUndefined(target) || this.parent.isContextMenuOpen()) {\n setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-sortdirect e-icons e-icon-sortdirect' + (this.sortedColumns.length > 1 ? ' e-spanclicked' : ''));\n }\n };\n Sort.prototype.popUpClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.e-headercell') || e.target.classList.contains('e-rowcell') ||\n closest(target, '.e-gridpopup')) {\n if (target.classList.contains('e-sortdirect')) {\n if (!target.classList.contains('e-spanclicked')) {\n target.classList.add('e-spanclicked');\n this.enableSortMultiTouch = true;\n }\n else {\n target.classList.remove('e-spanclicked');\n this.enableSortMultiTouch = false;\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n }\n }\n else {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Sort.prototype.addSortIcons = function () {\n var gObj = this.parent;\n var header;\n var filterElement;\n var cols = this.sortSettings.columns;\n if (cols.length > 1) {\n this.isMultiSort = true;\n }\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n for (var i = 0, len = cols.length; i < len; i++) {\n if (fieldNames.indexOf(cols[i].field) === -1) {\n continue;\n }\n header = gObj.getColumnHeaderByField(cols[i].field);\n this.aria.setSort(header, cols[i].direction);\n if (this.isMultiSort && cols.length > 1) {\n header.querySelector('.e-headercelldiv').insertBefore(createElement('span', { className: 'e-sortnumber', innerHTML: (i + 1).toString() }), header.querySelector('.e-headertext'));\n }\n filterElement = header.querySelector('.e-sortfilterdiv');\n if (cols[i].direction === 'Ascending') {\n classList(filterElement, ['e-ascending', 'e-icon-ascending'], []);\n }\n else {\n classList(filterElement, ['e-descending', 'e-icon-descending'], []);\n }\n }\n this.isMultiSort = false;\n };\n Sort.prototype.removeSortIcons = function (position) {\n var gObj = this.parent;\n var header;\n var cols = this.sortSettings.columns;\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n for (var i = position ? position : 0, len = !isNullOrUndefined(position) ? position + 1 : cols.length; i < len; i++) {\n header = gObj.getColumnHeaderByField(cols[i].field);\n if (gObj.allowGrouping && gObj.groupSettings.columns.indexOf(cols[i].field) > -1 &&\n (isNullOrUndefined(header) || !header.querySelector('.e-sortfilterdiv'))) {\n continue;\n }\n if (fieldNames.indexOf(cols[i].field) === -1) {\n continue;\n }\n this.aria.setSort(header, 'none');\n classList(header.querySelector('.e-sortfilterdiv'), [], ['e-descending', 'e-icon-descending', 'e-ascending', 'e-icon-ascending']);\n if (header.querySelector('.e-sortnumber')) {\n header.querySelector('.e-headercelldiv').removeChild(header.querySelector('.e-sortnumber'));\n }\n }\n };\n Sort.prototype.getSortColumnFromField = function (field) {\n for (var i = 0, len = this.sortSettings.columns.length; i < len; i++) {\n if (this.sortSettings.columns[i].field === field) {\n return this.sortSettings.columns[i];\n }\n }\n return false;\n };\n Sort.prototype.updateAriaAttr = function () {\n var fieldNames = this.parent.getColumns().map(function (c) { return c.field; });\n for (var _i = 0, _a = this.sortedColumns; _i < _a.length; _i++) {\n var col = _a[_i];\n if (fieldNames.indexOf(col) === -1) {\n continue;\n }\n var header = this.parent.getColumnHeaderByField(col);\n this.aria.setSort(header, this.getSortColumnFromField(col).direction);\n }\n };\n Sort.prototype.refreshSortIcons = function () {\n this.removeSortIcons();\n this.isMultiSort = true;\n this.removeSortIcons();\n this.addSortIcons();\n this.isMultiSort = false;\n this.updateAriaAttr();\n };\n return Sort;\n}());\nexport { Sort };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { createElement, classList, append } from '@syncfusion/ej2-base';\n/**\n * `NumericContainer` module handles rendering and refreshing numeric container.\n */\nvar NumericContainer = /** @class */ (function () {\n /**\n * Constructor for numericContainer module\n * @hidden\n */\n function NumericContainer(pagerModule) {\n this.pagerModule = pagerModule;\n }\n /**\n * The function is used to render numericContainer\n * @hidden\n */\n NumericContainer.prototype.render = function () {\n this.pagerElement = this.pagerModule.element;\n this.renderNumericContainer();\n this.refreshNumericLinks();\n this.wireEvents();\n };\n /**\n * Refreshes the numeric container of Pager.\n */\n NumericContainer.prototype.refresh = function () {\n this.pagerModule.updateTotalPages();\n if (this.links.length) {\n this.updateLinksHtml();\n }\n this.updateStyles();\n };\n /**\n * The function is used to refresh refreshNumericLinks\n * @hidden\n */\n NumericContainer.prototype.refreshNumericLinks = function () {\n var link;\n var pagerObj = this.pagerModule;\n var div = pagerObj.element.querySelector('.e-numericcontainer');\n var frag = document.createDocumentFragment();\n div.innerHTML = '';\n for (var i = 1; i <= pagerObj.pageCount; i++) {\n link = createElement('a', {\n className: 'e-link e-numericitem e-spacing e-pager-default',\n attrs: { role: 'link', tabindex: '-1', 'aria-label': 'Goto Page ' + i,\n href: 'javascript:void(0);', name: 'Goto page' + i }\n });\n if (pagerObj.currentPage === i) {\n classList(link, ['e-currentitem', 'e-active'], ['e-pager-default']);\n }\n frag.appendChild(link);\n }\n div.appendChild(frag);\n this.links = [].slice.call(div.childNodes);\n };\n /**\n * Binding events to the element while component creation\n * @hidden\n */\n NumericContainer.prototype.wireEvents = function () {\n EventHandler.add(this.pagerElement, 'click', this.clickHandler, this);\n };\n /**\n * Unbinding events from the element while component destroy\n * @hidden\n */\n NumericContainer.prototype.unwireEvents = function () {\n EventHandler.remove(this.pagerElement, 'click', this.clickHandler);\n };\n /**\n * To destroy the PagerMessage\n * @method destroy\n * @return {void}\n * @hidden\n */\n NumericContainer.prototype.destroy = function () {\n this.unwireEvents();\n };\n NumericContainer.prototype.renderNumericContainer = function () {\n this.element = createElement('div', {\n className: 'e-pagercontainer', attrs: { 'role': 'navigation' }\n });\n this.renderFirstNPrev(this.element);\n this.renderPrevPagerSet(this.element);\n this.element.appendChild(createElement('div', { className: 'e-numericcontainer' }));\n this.renderNextPagerSet(this.element);\n this.renderNextNLast(this.element);\n this.pagerModule.element.appendChild(this.element);\n };\n NumericContainer.prototype.renderFirstNPrev = function (pagerContainer) {\n this.first = createElement('div', {\n className: 'e-first e-icons e-icon-first',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('firstPageTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('firstPageTooltip'),\n tabindex: '-1'\n }\n });\n this.prev = createElement('div', {\n className: 'e-prev e-icons e-icon-prev',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('previousPageTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('previousPageTooltip'),\n tabindex: '-1'\n }\n });\n append([this.first, this.prev], pagerContainer);\n };\n NumericContainer.prototype.renderPrevPagerSet = function (pagerContainer) {\n var prevPager = createElement('div');\n this.PP = createElement('a', {\n className: 'e-link e-pp e-spacing', innerHTML: '...',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('previousPagerTooltip'), role: 'link',\n 'aria-label': this.pagerModule.getLocalizedLabel('previousPagerTooltip'),\n tabindex: '-1',\n name: this.pagerModule.getLocalizedLabel('previousPagerTooltip'),\n href: 'javascript:void(0);'\n }\n });\n prevPager.appendChild(this.PP);\n pagerContainer.appendChild(prevPager);\n };\n NumericContainer.prototype.renderNextPagerSet = function (pagerContainer) {\n var nextPager = createElement('div');\n this.NP = createElement('a', {\n className: 'e-link e-np e-spacing',\n innerHTML: '...', attrs: {\n title: this.pagerModule.getLocalizedLabel('nextPagerTooltip'), role: 'link',\n 'aria-label': this.pagerModule.getLocalizedLabel('nextPagerTooltip'),\n tabindex: '-1',\n name: this.pagerModule.getLocalizedLabel('nextPagerTooltip'),\n href: 'javascript:void(0);'\n }\n });\n nextPager.appendChild(this.NP);\n pagerContainer.appendChild(nextPager);\n };\n NumericContainer.prototype.renderNextNLast = function (pagerContainer) {\n this.next = createElement('div', {\n className: 'e-next e-icons e-icon-next',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('nextPageTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('nextPageTooltip'),\n tabindex: '-1'\n }\n });\n this.last = createElement('div', {\n className: 'e-last e-icons e-icon-last',\n attrs: {\n title: this.pagerModule.getLocalizedLabel('lastPageTooltip'),\n 'aria-label': this.pagerModule.getLocalizedLabel('lastPageTooltip'),\n tabindex: '-1'\n }\n });\n append([this.next, this.last], pagerContainer);\n };\n NumericContainer.prototype.clickHandler = function (e) {\n var pagerObj = this.pagerModule;\n var target = e.target;\n pagerObj.previousPageNo = pagerObj.currentPage;\n if (!target.classList.contains('e-disable') && !isNullOrUndefined(target.getAttribute('index'))) {\n pagerObj.currentPage = parseInt(target.getAttribute('index'), 10);\n pagerObj.dataBind();\n }\n return false;\n };\n NumericContainer.prototype.updateLinksHtml = function () {\n var pagerObj = this.pagerModule;\n var currentPageSet;\n var pageNo;\n pagerObj.currentPage = pagerObj.totalPages === 1 ? 1 : pagerObj.currentPage;\n if (pagerObj.currentPage > pagerObj.totalPages && pagerObj.totalPages) {\n pagerObj.currentPage = pagerObj.totalPages;\n }\n currentPageSet = parseInt((pagerObj.currentPage / pagerObj.pageCount).toString(), 10);\n if (pagerObj.currentPage % pagerObj.pageCount === 0 && currentPageSet > 0) {\n currentPageSet = currentPageSet - 1;\n }\n for (var i = 0; i < pagerObj.pageCount; i++) {\n pageNo = (currentPageSet * pagerObj.pageCount) + 1 + i;\n if (pageNo <= pagerObj.totalPages) {\n this.links[i].style.display = '';\n this.links[i].setAttribute('index', pageNo.toString());\n this.links[i].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;\n if (pagerObj.currentPage !== pageNo) {\n this.links[i].classList.add('e-pager-default');\n }\n else {\n this.links[i].classList.remove('e-pager-default');\n }\n }\n else {\n this.links[i].innerHTML = !pagerObj.customText ? pageNo.toString() : pagerObj.customText + pageNo;\n this.links[i].style.display = 'none';\n }\n classList(this.links[i], [], ['e-currentitem', 'e-active']);\n }\n this.first.setAttribute('index', '1');\n this.last.setAttribute('index', pagerObj.totalPages.toString());\n this.prev.setAttribute('index', (pagerObj.currentPage - 1).toString());\n this.next.setAttribute('index', (pagerObj.currentPage + 1).toString());\n this.pagerElement.querySelector('.e-mfirst').setAttribute('index', '1');\n this.pagerElement.querySelector('.e-mlast').setAttribute('index', pagerObj.totalPages.toString());\n this.pagerElement.querySelector('.e-mprev').setAttribute('index', (pagerObj.currentPage - 1).toString());\n this.pagerElement.querySelector('.e-mnext').setAttribute('index', (pagerObj.currentPage + 1).toString());\n this.PP.setAttribute('index', (parseInt(this.links[0].getAttribute('index'), 10) - pagerObj.pageCount).toString());\n this.NP.setAttribute('index', (parseInt(this.links[this.links.length - 1].getAttribute('index'), 10) + 1).toString());\n };\n NumericContainer.prototype.updateStyles = function () {\n this.updateFirstNPrevStyles();\n this.updatePrevPagerSetStyles();\n this.updateNextPagerSetStyles();\n this.updateNextNLastStyles();\n if (this.links.length) {\n classList(this.links[(this.pagerModule.currentPage - 1) % this.pagerModule.pageCount], ['e-currentitem', 'e-active'], []);\n }\n };\n NumericContainer.prototype.updateFirstNPrevStyles = function () {\n var firstPage = ['e-firstpage', 'e-pager-default'];\n var firstPageDisabled = ['e-firstpagedisabled', 'e-disable'];\n var prevPage = ['e-prevpage', 'e-pager-default'];\n var prevPageDisabled = ['e-prevpagedisabled', 'e-disable'];\n if (this.pagerModule.totalPages > 0 && this.pagerModule.currentPage > 1) {\n classList(this.prev, prevPage, prevPageDisabled);\n classList(this.first, firstPage, firstPageDisabled);\n classList(this.pagerElement.querySelector('.e-mfirst'), firstPage, firstPageDisabled);\n classList(this.pagerElement.querySelector('.e-mprev'), prevPage, prevPageDisabled);\n }\n else {\n classList(this.prev, prevPageDisabled, prevPage);\n classList(this.first, firstPageDisabled, firstPage);\n classList(this.pagerElement.querySelector('.e-mprev'), prevPageDisabled, prevPage);\n classList(this.pagerElement.querySelector('.e-mfirst'), firstPageDisabled, firstPage);\n }\n };\n NumericContainer.prototype.updatePrevPagerSetStyles = function () {\n if (this.pagerModule.currentPage > this.pagerModule.pageCount) {\n classList(this.PP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);\n }\n else {\n classList(this.PP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);\n }\n };\n NumericContainer.prototype.updateNextPagerSetStyles = function () {\n var pagerObj = this.pagerModule;\n var firstPage = this.links[0].innerHTML.replace(pagerObj.customText, '');\n if (!firstPage.length || !this.links.length || (parseInt(firstPage, 10) + pagerObj.pageCount > pagerObj.totalPages)) {\n classList(this.NP, ['e-nextprevitemdisabled', 'e-disable'], ['e-numericitem', 'e-pager-default']);\n }\n else {\n classList(this.NP, ['e-numericitem', 'e-pager-default'], ['e-nextprevitemdisabled', 'e-disable']);\n }\n };\n NumericContainer.prototype.updateNextNLastStyles = function () {\n var lastPage = ['e-lastpage', 'e-pager-default'];\n var lastPageDisabled = ['e-lastpagedisabled', 'e-disable'];\n var nextPage = ['e-nextpage', 'e-pager-default'];\n var nextPageDisabled = ['e-nextpagedisabled', 'e-disable'];\n var pagerObj = this.pagerModule;\n if (pagerObj.currentPage === pagerObj.totalPages || pagerObj.totalRecordsCount === 0) {\n classList(this.last, lastPageDisabled, lastPage);\n classList(this.next, nextPageDisabled, nextPage);\n classList(this.pagerElement.querySelector('.e-mlast'), lastPageDisabled, lastPage);\n classList(this.pagerElement.querySelector('.e-mnext'), nextPageDisabled, nextPage);\n }\n else {\n classList(this.last, lastPage, lastPageDisabled);\n classList(this.next, nextPage, nextPageDisabled);\n classList(this.pagerElement.querySelector('.e-mlast'), lastPage, lastPageDisabled);\n classList(this.pagerElement.querySelector('.e-mnext'), nextPage, nextPageDisabled);\n }\n };\n return NumericContainer;\n}());\nexport { NumericContainer };\n","import { createElement, append } from '@syncfusion/ej2-base';\n/**\n * `PagerMessage` module is used to display pager information.\n */\nvar PagerMessage = /** @class */ (function () {\n /**\n * Constructor for externalMessage module\n * @hidden\n */\n function PagerMessage(pagerModule) {\n this.pagerModule = pagerModule;\n }\n /**\n * The function is used to render pager message\n * @hidden\n */\n PagerMessage.prototype.render = function () {\n var div = createElement('div', { className: 'e-parentmsgbar', attrs: { 'aria-label': 'Pager Information' } });\n this.pageNoMsgElem = createElement('span', { className: 'e-pagenomsg', styles: 'textalign:right' });\n this.pageCountMsgElem = createElement('span', { className: 'e-pagecountmsg', styles: 'textalign:right' });\n append([this.pageNoMsgElem, this.pageCountMsgElem], div);\n this.pagerModule.element.appendChild(div);\n this.refresh();\n };\n /**\n * Refreshes the pager information.\n */\n PagerMessage.prototype.refresh = function () {\n var pagerObj = this.pagerModule;\n this.pageNoMsgElem.textContent = this.format(pagerObj.getLocalizedLabel('currentPageInfo'), [pagerObj.totalRecordsCount === 0 ? 0 :\n pagerObj.currentPage, pagerObj.totalPages || 0]) + ' ';\n this.pageCountMsgElem.textContent = this.format(pagerObj.getLocalizedLabel('totalItemsInfo'), [pagerObj.totalRecordsCount || 0]);\n this.pageNoMsgElem.parentElement.setAttribute('aria-label', this.pageNoMsgElem.textContent + this.pageCountMsgElem.textContent);\n };\n /**\n * Hides the Pager information.\n */\n PagerMessage.prototype.hideMessage = function () {\n if (this.pageNoMsgElem) {\n this.pageNoMsgElem.style.display = 'none';\n }\n if (this.pageCountMsgElem) {\n this.pageCountMsgElem.style.display = 'none';\n }\n };\n /**\n * Shows the Pager information.\n */\n PagerMessage.prototype.showMessage = function () {\n if (!this.pageNoMsgElem) {\n this.render();\n }\n this.pageNoMsgElem.style.display = '';\n this.pageCountMsgElem.style.display = '';\n };\n /**\n * To destroy the PagerMessage\n * @method destroy\n * @return {void}\n * @hidden\n */\n PagerMessage.prototype.destroy = function () {\n //destroy\n };\n PagerMessage.prototype.format = function (str, args) {\n var regx;\n for (var i = 0; i < args.length; i++) {\n regx = new RegExp('\\\\{' + (i) + '\\\\}', 'gm');\n str = str.replace(regx, args[i].toString());\n }\n return str;\n };\n return PagerMessage;\n}());\nexport { PagerMessage };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, L10n, Browser } from '@syncfusion/ej2-base';\nimport { createElement, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Property, Event, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { NumericContainer } from './numeric-container';\nimport { PagerMessage } from './pager-message';\nimport { appendChildren } from '../grid/base/util';\n/**\n * Represents the `Pager` component.\n * ```html\n *