Merge branch 'master' into master
This commit is contained in:
anbumani_rajendracholan
GitHub
Коммит
c13a2b56da
|
|
@ -2,6 +2,14 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### Common
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I488912` - Resolved the `ngModel` data binding not working properly in Form Base.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### Common
|
||||
|
|
@ -9,7 +17,7 @@
|
|||
#### Bug Fixes
|
||||
|
||||
- `#I486549` - Provided `clearTemplates` support for `Accordion` Component.
|
||||
- `#F45098` - Resolved the `Complex Directives` property changes not being applied properly.
|
||||
- `#F45098`, `#I497414` - Resolved the `Complex Directives` property changes not being applied properly.
|
||||
- `#I496453` - Resolved the `Template` binding not working properly in Form Base.
|
||||
- `#I473932` - Resolved the `Angular Form` states not working properly for the `OnPush` strategy.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-base",
|
||||
"version": "23.1.36",
|
||||
"version": "23.1.38",
|
||||
"description": "A common package of Essential JS 2 base Angular libraries, methods and class definitions",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -96,7 +96,13 @@ export class FormBase<T> implements ControlValueAccessor {
|
|||
// Removed setTimeout, Because we have called markForCheck() method in Angular Template Compiler
|
||||
/* istanbul ignore else */
|
||||
if (typeof window !== 'undefined') {
|
||||
tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
|
||||
if ((tempFormAfterViewThis.getModuleName()).includes('dropdown')) {
|
||||
setTimeout(() => {
|
||||
tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
|
||||
});
|
||||
} else {
|
||||
tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
|
||||
}
|
||||
let ele: HTMLElement = tempFormAfterViewThis.inputElement || tempFormAfterViewThis.element;
|
||||
ele.addEventListener('focus', tempFormAfterViewThis.ngOnFocus.bind(tempFormAfterViewThis));
|
||||
ele.addEventListener('blur', tempFormAfterViewThis.ngOnBlur.bind(tempFormAfterViewThis));
|
||||
|
|
|
|||
|
|
@ -21,7 +21,11 @@ export function compile(templateEle: AngularElementType, helper?: Object):
|
|||
/* istanbul ignore next */
|
||||
let conRef: ViewContainerRef = contRef ? contRef : component.viewContainerRef;
|
||||
let viewRef: EmbeddedViewRef<Object> = conRef.createEmbeddedView(templateEle as TemplateRef<Object>, context);
|
||||
viewRef.markForCheck();
|
||||
if (getValue('currentInstance.element.nodeName', conRef) === 'EJS-MENTION') {
|
||||
viewRef.detectChanges();
|
||||
} else {
|
||||
viewRef.markForCheck();
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
let viewCollection: { [key: string]: EmbeddedViewRef<Object>[] } = (component && component.registeredTemplate) ?
|
||||
component.registeredTemplate : getValue('currentInstance.registeredTemplate', conRef);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### Checkbox
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,28 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### Chart
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I498152` - Fixed the issue of pane collapse when zooming in the chart.
|
||||
- `#I498070` - Now, the tooltip is displaying properly for all series when the shared tooltip is enabled.
|
||||
- `#I478252` - Updated legend aria-label based on the visibility of the series.
|
||||
- `#I499382` - Changed the color of the tab bar line based on the theme.
|
||||
- `#I499384` - Chart points are now focusing properly when navigating using arrow keys.
|
||||
- `#I498673` - Now the primary axes are displaying properly when rendering series using secondary axes.
|
||||
- `#I500178` - Fixed a issue where a console error was being thrown when trying to zoom in the Pareto chart during selection.
|
||||
- `#I482650` - Fixed issue where the height of the chart would increase when the axis was hidden.
|
||||
|
||||
### AccumulationChart
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#F184357` - Funnel chart is now rendering properly when all the data points value is zero.
|
||||
- `#I498982` - Data labels are now displaying properly after legend click.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### Chart
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-charts",
|
||||
"version": "20.13.0",
|
||||
"version": "23.1.36",
|
||||
"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### CircularGauge
|
||||
|
||||
#### New Features
|
||||
|
||||
- When the `allowRangePreRender` property is set to **false**, the axis line will be rendered first.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### Circular Gauge
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-circulargauge",
|
||||
"version": "16.42.0",
|
||||
"version": "23.1.36",
|
||||
"description": "Essential JS 2 CircularGauge Components for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { CircularGauge } from '@syncfusion/ej2-circulargauge';
|
|||
import { Template } from '@syncfusion/ej2-angular-base';
|
||||
import { AxesDirective } from './axes.directive';
|
||||
|
||||
export const inputs: string[] = ['allowImageExport','allowMargin','allowPdfExport','allowPrint','axes','background','border','centerX','centerY','description','enablePersistence','enablePointerDrag','enableRangeDrag','enableRtl','height','legendSettings','locale','margin','moveToCenter','tabIndex','theme','title','titleStyle','tooltip','useGroupingSeparator','width'];
|
||||
export const inputs: string[] = ['allowImageExport','allowMargin','allowPdfExport','allowPrint','allowRangePreRender','axes','background','border','centerX','centerY','description','enablePersistence','enablePointerDrag','enableRangeDrag','enableRtl','height','legendSettings','locale','margin','moveToCenter','tabIndex','theme','title','titleStyle','tooltip','useGroupingSeparator','width'];
|
||||
export const outputs: string[] = ['animationComplete','annotationRender','axisLabelRender','beforePrint','dragEnd','dragMove','dragStart','gaugeMouseDown','gaugeMouseLeave','gaugeMouseMove','gaugeMouseUp','legendRender','load','loaded','radiusCalculate','resized','tooltipRender'];
|
||||
export const twoWays: string[] = [''];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### Diagram
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I184493` - The null exception will no longer thrown while hovering over the ports.
|
||||
- `#F45135` - Now, onUserHandleMouseUp event triggers for single time.
|
||||
- `#I487517` - Now, while enabling virtualization constraints nodes does not disappears.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### Diagram
|
||||
|
|
|
|||
|
|
@ -2,6 +2,20 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### Document Editor
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I473464` - Resolve the destroy issue in document Editor.
|
||||
- `#I490198` - Resolve the Page not responding while press TAB key continuously.
|
||||
- `#I494676` - Content is missing after downloading the file as docx.
|
||||
- `#I495070` - Issue with cursor position and indentation when in RTL mode.
|
||||
- `#I495596` - Issue with pasting from Word to the editor in RTL mode.
|
||||
- `#I497629` - Issue in Exported svg image.
|
||||
- `#I504069` - Document editor insert image from URL facing issue in reopening the exported document.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### Document Editor
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### ListBox
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I493841` - Issue with "Scrollbar in ListBox while using inside a splitter" has been resolved.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### ListBox
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-dropdowns",
|
||||
"version": "18.66.2",
|
||||
"version": "23.1.36",
|
||||
"description": "Essential JS 2 DropDown Components for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -92,10 +92,10 @@ export class DropDownTreeComponent extends DropDownTree implements IComponentBas
|
|||
@Template()
|
||||
public itemTemplate: any;
|
||||
@ContentChild('noRecordsTemplate')
|
||||
@Template('No records found')
|
||||
@Template('No Records Found')
|
||||
public noRecordsTemplate: any;
|
||||
@ContentChild('actionFailureTemplate')
|
||||
@Template('Request failed')
|
||||
@Template('The Request failed')
|
||||
public actionFailureTemplate: any;
|
||||
|
||||
private skipFromEvent:boolean = true;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### FileManager
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I492922` - The issue with the drag and drop support for the File Manager component in mobile mode has been resolved.
|
||||
|
||||
- `#I495435` - Duplicate folders issue in the navigation pane of the File Manager while switching root folders frequently has been resolved.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### FileManager
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-filemanager",
|
||||
"version": "18.26.0",
|
||||
"version": "23.1.36",
|
||||
"description": "Essential JS 2 FileManager Component for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,25 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### GanttChart
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I479961` - Milestone baseline moves along with the milestone issue has been fixed.
|
||||
- `#I501391` - Misalignment in tooltip when connecting predecessor.
|
||||
- `#I495216` - Predecessor is not displayed when we give `GUID` issue has been fixed.
|
||||
- `#I499587` - Update of custom column in general tab issue has been fixed.
|
||||
- `#I184189` - Changing values in the action Begin event does not reflect while rendering issue has been fixed.
|
||||
- `#F184629` - Milestone not rendered properly after editing issue has been fixed.
|
||||
- `#I492520` - Critical path styling not getting cleared correctly issue has been fixed.
|
||||
- `#I502650` - Taskbar dragging and progress resizing while moving the mouse outside chart issue has been fixed.
|
||||
- `#I493515` - When we collapse with Virtualization, the styles doesn't apply properly issue has been fixed.
|
||||
- `#I486977` - White space issue occur when we close the side pane issue has been fixed.
|
||||
|
||||
- `F159354` - Issue in locale text of predecessor tooltip has been fixed.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### GanttChart
|
||||
|
|
@ -13,13 +32,16 @@
|
|||
- Provided support to export the Gantt component where each rows are auto-fit to the PDF document page width. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/gantt/exporting.html).
|
||||
- Provided touch interaction support for taskbar resizing, dragging, predecessor connectivity in Gantt chart.
|
||||
|
||||
- `#I275966` - Provided lazy loading support in Gantt chart. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/load-on-demand.html).
|
||||
- `#I396039` - Provided baseline support for PDF export in Gantt Chart.
|
||||
- Provided support to export the Gantt component where each rows are auto-fit to the PDF document page width. Please find the demo link [here](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/exporting.html).
|
||||
- Provided touch interaction support for taskbar resizing, dragging, predecessor connectivity in Gantt chart.
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I492654` - When empty data source pdf export exception thrown issue has been fixed.
|
||||
- `#I479578` - Milestone parent is not appearing issue has been fixed.
|
||||
|
||||
- `F159354` - Issue in locale text of predecessor tooltip has been fixed.
|
||||
|
||||
## 22.2.12 (2023-09-05)
|
||||
|
||||
### GanttChart
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-gantt",
|
||||
"version": "22.1.67",
|
||||
"version": "23.1.36",
|
||||
"description": "Essential JS 2 Gantt Component for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,21 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### Grid
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- `#I490971` - Fixed a time zone conversion issue while applying a date filtering in a grid using the `UrlAdaptor`.
|
||||
- `#I489490` - Resolved an issue where `changeDataSource` was not functioning correctly when column virtual scrolling was enabled.
|
||||
- `#I499794` - Fixed an issue where the disabled cursor was not showing when dragging rows outside the grid with the `RowDragandDrop` feature.
|
||||
- `#I501376` - During batch editing, a script issue was fixed after the checkbox column was dynamically disabled.
|
||||
- `#I494495` - Fixed a script issue that occurred when sorting was performed while a validation message was displayed in Batch edit mode for the same column.
|
||||
- `#I500511` - Resolved a script error related to the persistence of selection actions when utilizing the `WebAPIAdaptor`.
|
||||
- `#I497445` - Searching value with trailing zero shows no records to display in grid has been fixed.
|
||||
- `#I500931` - Fixed the alignment issue of the child grid header when sub-child grids are added dynamically within the child grid.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### Grid
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-grids",
|
||||
"version": "1.175.0",
|
||||
"version": "23.1.36",
|
||||
"description": "Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import 'ej2-base/styles/material3-dark-definition.scss';
|
||||
@import 'ej2-base/styles/definition/material3-dark.scss';
|
||||
@import 'ej2-grids/styles/excel-filter/material3-dark.scss';
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import 'ej2-base/styles/material3-definition.scss';
|
||||
@import 'ej2-base/styles/definition/material3.scss';
|
||||
@import 'ej2-grids/styles/excel-filter/material3.scss';
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import 'ej2-base/styles/material3-dark-definition.scss';
|
||||
@import 'ej2-base/styles/definition/material3-dark.scss';
|
||||
@import 'ej2-grids/styles/grid/material3-dark.scss';
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import 'ej2-base/styles/material3-definition.scss';
|
||||
@import 'ej2-base/styles/definition/material3.scss';
|
||||
@import 'ej2-grids/styles/grid/material3.scss';
|
||||
|
|
|
|||
|
|
@ -2,6 +2,15 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 23.1.38 (2023-09-26)
|
||||
|
||||
### ImageEditor
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#I499689` - Provided the "ShapeChanging" event trigger support for pen action annotation.
|
||||
- `#I495011` - Provided the "ShapeChanged" event trigger support for after shapes are changed and applied to canvas.
|
||||
|
||||
## 23.1.36 (2023-09-15)
|
||||
|
||||
### ImageEditor
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-inplace-editor",
|
||||
"version": "21.3.2",
|
||||
"version": "23.1.36",
|
||||
"description": "A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server. for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,216 @@
|
|||
# Angular Inputs Components
|
||||
|
||||
A package of Angular Inputs components. It comes with a collection of form components which is useful to get different input values from the users such as text, numbers, patterns, color and file inputs.
|
||||
|
||||
## What's Included in the Angular Inputs Package
|
||||
|
||||
The Angular Inputs package includes the following list of components.
|
||||
|
||||
### Angular ColorPicker
|
||||
|
||||
The [Angular ColorPicker](https://www.syncfusion.com/angular-components/angular-color-picker?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component is a user interface that is used to select and adjust color values.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/color-picker/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/color-picker/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-color-picker?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular ColorPicker Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-colorpicker.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Color specification](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/default) - Supports `Red Green Blue`, `Hue Saturation Value` and `Hex` codes.
|
||||
* [Mode](https://ej2.syncfusion.com/angular/documentation/color-picker/mode-and-value#mode-and-value) - Supports `Picker` and `Palette` mode.
|
||||
* [Inline](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/inline) - Supports inline type rendering of color picker.
|
||||
* [Custom palettes](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=color-picker#/material/color-picker/custom) - Allows to customize palettes and supports multiple palette groups rendering.
|
||||
* [Opacity](https://ej2.syncfusion.com/angular/documentation/color-picker/mode-and-value#color-value) - Allows to set and change the `opacity` of the selected color.
|
||||
* [Accessibility](https://ej2.syncfusion.com/angular/documentation/color-picker/accessibility#accessibility) - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices.
|
||||
|
||||
### Angular TextBox
|
||||
|
||||
The [Angular TextBox](https://www.syncfusion.com/angular-components/angular-textbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component is an extended version of the HTML input control which is used to edit or display text input on a form.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/textbox/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/textboxes/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-textbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular TextBox Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-textbox.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Floating label](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Floats the placeholder text while focus.
|
||||
* [Input group](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Group the icons, buttons along with textbox.
|
||||
* [Validation states](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Provides styles for success, error, and warning states.
|
||||
* [Multiline](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=textbox#/material/textboxes/default) - Handles multiline input with placeholder text.
|
||||
|
||||
### Angular MaskedTextBox
|
||||
|
||||
The [Angular MaskedTextBox](https://www.syncfusion.com/angular-components/angular-input-mask?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component allows the user to enter the valid input only based on the provided mask.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/maskedtextbox/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/maskedtextbox/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-input-mask?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular MaskedTextBox Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-maskedtextbox.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Custom characters](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=maskedtextbox#/material/maskedtextbox/custommask) - Allows you to use your own characters as the mask elements.
|
||||
* [Regular expression](https://ej2.syncfusion.com/angular/documentation/maskedtextbox/mask-configuration#regular-expression?utm_source=npm&utm_campaign=maskedtextbox#regular-expression) - Can be used as a mask element for each character of the MaskedTextBox.
|
||||
* [Accessibility](https://ej2.syncfusion.com/angular/documentation/maskedtextbox/accessibility?utm_source=npm&utm_campaign=maskedtextbox) - Provides built-in accessibility support which helps to access all the MaskedTextBox component features through keyboard, on-screen readers, or other assistive technology devices.
|
||||
|
||||
### Angular NumericTextBox
|
||||
|
||||
The [Angular NumericTextBox](https://www.syncfusion.com/angular-components/angular-numeric-textbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component is used to get the number inputs from the user. The input values can be incremented or decremented by a predefined step value.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/numerictextbox/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/numerictextbox/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-numeric-textbox?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular NumericTextBox Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-numerictextbox.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Range validation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/range) - Allows to set the minimum and maximum range of values in the NumericTextBox.
|
||||
* [Number formats](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/format) - Supports the number display formatting with MSDN standard and custom number formats.
|
||||
* [Precision Of numbers](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/restrict) - Allows to restrict the number precision when enters the value.
|
||||
* [Keyboard interaction](https://ej2.syncfusion.com/angular/documentation/numerictextbox/accessibility#keyboard-interaction?utm_source=npm&utm_campaign=numerictextbox#keyboard-interaction) - Allows users to interact with the NumericTextBox using the keyboard.
|
||||
* [Accessibility](https://ej2.syncfusion.com/angular/documentation/numerictextbox/accessibility?utm_source=npm&utm_campaign=numerictextbox) - Provides built-in accessibility support which helps to access all the NumericTextBox component features through keyboard, on-screen readers or other assistive technology devices.
|
||||
* [Internationalization](https://ej2.syncfusion.com/angular/documentation/numerictextbox/internationalization.html?utm_source=npm&utm_campaign=numerictextbox) - Library provides support for formatting and parsing number using the official Unicode CLDR JSON data.
|
||||
* [Localization](https://ej2.syncfusion.com/angular/documentation/numerictextbox/globalization#internationalization?utm_source=npm&utm_campaign=numerictextbox#localization) - Supports to localize spin up and down buttons title for the tooltip to different cultures.
|
||||
|
||||
### Angular Signature
|
||||
|
||||
The [Angular Signature](https://www.syncfusion.com/angular-components/angular-signature?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation. It allows to save signature as image.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/signature/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/signature/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-signature?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular Signature Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-signature.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Customization](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html) - Support various customization options like background color, background image, stroke color, stroke width, save with background, undo, redo, clear, readonly, and disabled.
|
||||
* [Save](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html) - Support to save the signature as image like PNG, JPEG, and SVG.
|
||||
* [Load](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html) - Support to load the signature as base64 url of the image.
|
||||
* [Draw](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/signature/default.html) - Support to draw the text with the different font family and font size.
|
||||
|
||||
### Angular Slider
|
||||
|
||||
The [Angular Slider](https://www.syncfusion.com/angular-components/angular-slider?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm) component allows you to select a value or range of values between the min and max range.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/range-slider/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/range-slider/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-slider?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular Slider Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-slider.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Types](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default) - Provided three types of Slider.
|
||||
* [Orientation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation) - Displays the Slider in horizontal or vertical direction.
|
||||
* [Buttons](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip) - Provided built-in support to render the buttons in both edges of the Slider.
|
||||
* [Tooltip](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip) - Displays a tooltip to show the currently selected value.
|
||||
* [Ticks](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/ticks) - Displays a scale with small and big ticks.
|
||||
* [Format](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/format) - Customize the slider values into various format.
|
||||
* [Limits](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/limits) - Slider thumb movement restriction enabled with interval dragging in range-slider.
|
||||
* [Accessibility](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default) - Built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications.
|
||||
* [Keyboard Interaction](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/api) - The Slider can be intractable through the keyboard.
|
||||
|
||||
### Angular File Upload
|
||||
|
||||
The Angular [File Upload](https://www.syncfusion.com/angular-ui-components/angular-file-upload/?utm_source=npm&utm_medium=listing&utm_campaign=anuglar-file-upload-npm) component is an extended version of the HTML5 upload control which is used to upload images, documents, and other files to a server.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://ej2.syncfusion.com/angular/documentation/uploader/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Getting Started</a> .
|
||||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm#/material/uploader/default">Online demos</a> .
|
||||
<a href="https://www.syncfusion.com/angular-components/angular-file-upload?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm">Learn more</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img alt="Angular FileUpload Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-file-upload.png">
|
||||
</p>
|
||||
|
||||
#### Key features
|
||||
|
||||
* [Chunk upload](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/chunk-upload) - Used to upload large files as chunks
|
||||
* [Drag and drop](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/custom-drop-area) - Drag the files and drop into component to upload them.
|
||||
* [Template](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/custom-file-list) - The file list and buttons can be customize using template.
|
||||
* [Validation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/file-validation) - Validate extension and size of upload file
|
||||
* [Auto upload](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/default) - Process the file to upload without interaction.
|
||||
* [Preload files](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-file-upload-npm#/material/uploader/preload-files) - View and manipulate previously uploaded files.
|
||||
|
||||
<p align="center">
|
||||
Trusted by the world's leading companies
|
||||
<a href="https://www.syncfusion.com/">
|
||||
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Setup
|
||||
|
||||
To install `inputs` and its dependent packages, use the following command.
|
||||
|
||||
```sh
|
||||
npm install @syncfusion/ej2-angular-inputs
|
||||
```
|
||||
|
||||
## Supported frameworks
|
||||
|
||||
Inputs components are also offered in following list of frameworks.
|
||||
|
||||
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/> [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/> [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) |
|
||||
| :-----: | :-----: | :-----: | :-----: | :-----: |
|
||||
|
||||
## Showcase samples
|
||||
|
||||
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-angular-loancalculator), [Live Demo]( https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_campaign=slider)
|
||||
* Cloud Pricing - [Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=slider#/material/slider/azure-pricing)
|
||||
|
||||
## Support
|
||||
|
||||
Product support is available through following mediums.
|
||||
|
||||
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
||||
* [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm)
|
||||
* [GitHub issues](https://github.com/syncfusion/ej2-angular-ui-components/issues/new)
|
||||
* [Request feature or report bug](https://www.syncfusion.com/feedback/angular?utm_source=npm&utm_medium=listing&utm_campaign=angular-inputs-npm)
|
||||
* Live chat
|
||||
|
||||
## Changelog
|
||||
|
||||
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/inputs/CHANGELOG.md/?utm_source=npm&utm_campaign=input). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
|
||||
|
||||
## License and copyright
|
||||
|
||||
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [Angular UI components](https://www.syncfusion.com/angular-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
|
||||
|
||||
> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
|
||||
|
||||
See [LICENSE FILE](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license/?utm_source=npm&utm_campaign=input) for more info.
|
||||
|
||||
& Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
/**
|
||||
* Build ts and scss files
|
||||
*/
|
||||
gulp.task('build', ['scripts', 'styles']);
|
||||
|
||||
/**
|
||||
* Compile ts files
|
||||
*/
|
||||
gulp.task('scripts', function(done) {
|
||||
var ts = require('gulp-typescript');
|
||||
var tsProject = ts.createProject('tsconfig.json', { typescript: require('typescript') });
|
||||
|
||||
var tsResult = gulp.src(['./**/*.ts','./**/*.tsx', '!./node_modules/**/*.ts','!./node_modules/**/*.tsx'], { base: '.' })
|
||||
.pipe(tsProject());
|
||||
tsResult.js.pipe(gulp.dest('./'))
|
||||
.on('end', function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Compile styles
|
||||
*/
|
||||
gulp.task('styles', function() {
|
||||
var sass = require('gulp-sass');
|
||||
return gulp.src(['./**/*.scss', '!./node_modules/**/*.scss'], { base: './' })
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded',
|
||||
includePaths: './node_modules/@syncfusion/'
|
||||
}))
|
||||
.pipe(gulp.dest('.'));
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
|
||||
|
||||
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
|
||||
|
||||
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
|
||||
|
||||
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
|
||||
|
||||
The Syncfusion license that contains the terms and conditions can be found at
|
||||
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-angular-inputs",
|
||||
"version": "23.1.36",
|
||||
"description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users. for Angular",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"schematics": "./schematics/collection.json",
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2-base": "*",
|
||||
"@syncfusion/ej2-angular-base": "*",
|
||||
"@syncfusion/ej2-inputs": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"rxjs": "5.0.0 - 5.5.10",
|
||||
"zone.js": "0.7.2 - 0.8.26",
|
||||
"core-js": "2.4.1 - 2.6.6",
|
||||
"reflect-metadata": "0.1.9 - 0.1.15 ",
|
||||
"@angular/common": "2.2.1 - 4.10.0",
|
||||
"@angular/compiler": "2.2.1 - 4.10.0",
|
||||
"@angular/core": "2.2.1 - 4.10.0",
|
||||
"@angular/forms": "2.2.1 - 4.10.0",
|
||||
"@angular/http": "2.2.1 - 4.10.0",
|
||||
"@angular/platform-browser": "2.2.1 - 4.10.0",
|
||||
"@angular/platform-browser-dynamic": "2.2.1 - 4.10.0",
|
||||
"@angular/router": "2.2.1 - 4.10.0",
|
||||
"@angular/compiler-cli": "2.2.1 - 4.10.0",
|
||||
"@angular/platform-server": "2.2.1 - 4.10.0",
|
||||
"@angular-devkit/schematics": "0.7.2",
|
||||
"@schematics/angular": "0.7.2",
|
||||
"es6-module-loader": "^0.17.11",
|
||||
"rollup": "^0.41.6",
|
||||
"rollup-plugin-uglify": "^1.0.1",
|
||||
"systemjs": "^0.19.40",
|
||||
"systemjs-plugin-babel": "0.0.17",
|
||||
"ng-packagr": "1.5.0",
|
||||
"tsickle": "0.34.0",
|
||||
"@types/lodash": "4.14.159",
|
||||
"@types/node": "11.15.20",
|
||||
"es6-promise": "^3.2.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-typescript": "^3.1.6",
|
||||
"requirejs": "^2.3.3",
|
||||
"typescript": "2.3.4"
|
||||
},
|
||||
"keywords": [
|
||||
"angular",
|
||||
"ng",
|
||||
"ej2-ng-inputs",
|
||||
"ng-inputs",
|
||||
"ng-colorpicker",
|
||||
"ng-colorpalette",
|
||||
"ng-mask",
|
||||
"angular mask",
|
||||
"angular masked textbox",
|
||||
"ng-numeric",
|
||||
"angular numeric",
|
||||
"angular numeric textbox",
|
||||
"angular number input",
|
||||
"angular slider",
|
||||
"slider widget",
|
||||
"material slider",
|
||||
"material ui slider",
|
||||
"ng-upload",
|
||||
"ng-upload-box",
|
||||
"ng-input-file",
|
||||
"ng-chunk-upload",
|
||||
"angular-upload",
|
||||
"angular-upload-box",
|
||||
"angular-input-file",
|
||||
"angular-chunk-upload",
|
||||
"ng-rating",
|
||||
"angular rating"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/syncfusion/ej2-angular-ui-components.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp build"
|
||||
},
|
||||
"sideEffects": true
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ColorPickerComponent } from './colorpicker.component';
|
||||
import { ColorPickerModule } from './colorpicker.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the ColorPicker component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, ColorPickerModule],
|
||||
exports: [
|
||||
ColorPickerModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class ColorPickerAllModule { }
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { ColorPicker } from '@syncfusion/ej2-inputs';
|
||||
|
||||
|
||||
|
||||
export const inputs: string[] = ['columns','createPopupOnClick','cssClass','disabled','enableOpacity','enablePersistence','enableRtl','inline','locale','mode','modeSwitcher','noColor','presetColors','showButtons','value'];
|
||||
export const outputs: string[] = ['focus', 'blur', 'beforeClose','beforeModeSwitch','beforeOpen','beforeTileRender','change','created','onModeSwitch','open','select','valueChange'];
|
||||
export const twoWays: string[] = ['value'];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular ColorPicker Component.
|
||||
* ```html
|
||||
* <input ejs-colorpicker type='color'/>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: '[ejs-colorpicker]',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => ColorPickerComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class ColorPickerComponent extends ColorPicker implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
beforeClose: any;
|
||||
beforeModeSwitch: any;
|
||||
beforeOpen: any;
|
||||
beforeTileRender: any;
|
||||
change: any;
|
||||
created: any;
|
||||
onModeSwitch: any;
|
||||
open: any;
|
||||
select: any;
|
||||
public valueChange: any;
|
||||
|
||||
|
||||
|
||||
public focus: any;
|
||||
public blur: any;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ColorPickerComponent } from './colorpicker.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the ColorPicker component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
ColorPickerComponent
|
||||
],
|
||||
exports: [
|
||||
ColorPickerComponent
|
||||
]
|
||||
})
|
||||
export class ColorPickerModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { ColorPickerComponent} from './colorpicker.component';
|
||||
export { ColorPickerModule } from './colorpicker.module';
|
||||
export { ColorPickerAllModule } from './colorpicker-all.module';
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
import { AbstractControl, ValidatorFn } from '@angular/forms';
|
||||
import { FormValidator } from '@syncfusion/ej2-inputs';
|
||||
|
||||
export class FormValidators {
|
||||
|
||||
//max validation
|
||||
|
||||
public static max(number: number|Date): ValidatorFn {
|
||||
let max: number|Date = number;
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.max({ value: control.value, param: max });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'max': true };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// min validation
|
||||
|
||||
public static min(number: number|Date): ValidatorFn {
|
||||
let min: number|Date = number;
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.min({ value: control.value, param: min });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'min': true };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Credit card validation
|
||||
|
||||
public static creditcard(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.creditcard({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'cardno': true };
|
||||
}
|
||||
}
|
||||
|
||||
// date validation
|
||||
|
||||
public static date(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.date({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'date': true };
|
||||
}
|
||||
}
|
||||
|
||||
// Date-ISO validation
|
||||
|
||||
public static dateIso(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.dateIso({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'dateiso': true };
|
||||
}
|
||||
}
|
||||
|
||||
// Digit validation
|
||||
|
||||
public static digits(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.digits({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'digit': true };
|
||||
}
|
||||
}
|
||||
|
||||
// Email validation
|
||||
|
||||
public static email(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.email({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'email': true };
|
||||
}
|
||||
}
|
||||
|
||||
//maxlength validation
|
||||
|
||||
public static maxLength(number: number): ValidatorFn {
|
||||
let maxlength: number = number;
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.maxLength({ value: control.value, param: maxlength });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'maxlength': true };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//minlength validation
|
||||
|
||||
public static minLength(number: number): ValidatorFn {
|
||||
let minlength: number = number;
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.minLength({ value: control.value, param: minlength });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'minlength': true };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//number validation
|
||||
|
||||
public static number(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.number({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'number': true };
|
||||
}
|
||||
}
|
||||
|
||||
// required validation
|
||||
|
||||
public static required(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (control.value === null) ? false : (FormValidator as any).checkValidator.required({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
}
|
||||
else {
|
||||
return { 'required': true };
|
||||
}
|
||||
}
|
||||
|
||||
// Telephone number validation
|
||||
|
||||
public static tel(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.tel({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'telno': true };
|
||||
}
|
||||
}
|
||||
|
||||
// Url validation
|
||||
|
||||
public static url(control: AbstractControl): { [key: string]: boolean } | null {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.url({ value: control.value });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'url': true };
|
||||
}
|
||||
}
|
||||
|
||||
// RangeLength validation
|
||||
|
||||
public static rangeLength(number1: number, number2: number): ValidatorFn {
|
||||
let minRL: number = number1;
|
||||
let maxRL: number = number2;
|
||||
//tslint:disable-next-line
|
||||
let param: any = [minRL, maxRL];
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.rangeLength({ value: control.value, param: param });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'rangelength': true };
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Range validation
|
||||
|
||||
public static range(number1: number, number2: number): ValidatorFn {
|
||||
let minR: number = number1;
|
||||
let maxR: number = number2;
|
||||
//tslint:disable-next-line
|
||||
let param1: any = [minR, maxR];
|
||||
return (control: AbstractControl): { [key: string]: boolean } | null => {
|
||||
//tslint:disable-next-line
|
||||
let result: boolean = (FormValidator as any).checkValidator.range({ value: control.value, param: param1 });
|
||||
if (result === true) {
|
||||
return null;
|
||||
} else {
|
||||
return { 'range': true };
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { FormValidators } from './form-validator';
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
export { TextBoxComponent} from './textbox/textbox.component';
|
||||
export { TextBoxModule } from './textbox/textbox.module';
|
||||
export { TextBoxAllModule } from './textbox/textbox-all.module';
|
||||
export { NumericTextBoxComponent} from './numerictextbox/numerictextbox.component';
|
||||
export { NumericTextBoxModule } from './numerictextbox/numerictextbox.module';
|
||||
export { NumericTextBoxAllModule } from './numerictextbox/numerictextbox-all.module';
|
||||
export { MaskedTextBoxComponent} from './maskedtextbox/maskedtextbox.component';
|
||||
export { MaskedTextBoxModule } from './maskedtextbox/maskedtextbox.module';
|
||||
export { MaskedTextBoxAllModule } from './maskedtextbox/maskedtextbox-all.module';
|
||||
export { SliderComponent} from './slider/slider.component';
|
||||
export { SliderModule } from './slider/slider.module';
|
||||
export { SliderAllModule } from './slider/slider-all.module';
|
||||
export {UploadedFilesDirective,FilesDirective} from './uploader/files.directive';
|
||||
export { UploaderComponent} from './uploader/uploader.component';
|
||||
export { UploaderModule } from './uploader/uploader.module';
|
||||
export { UploaderAllModule } from './uploader/uploader-all.module';
|
||||
export { ColorPickerComponent} from './color-picker/colorpicker.component';
|
||||
export { ColorPickerModule } from './color-picker/colorpicker.module';
|
||||
export { ColorPickerAllModule } from './color-picker/colorpicker-all.module';
|
||||
export { SignatureComponent} from './signature/signature.component';
|
||||
export { SignatureModule } from './signature/signature.module';
|
||||
export { SignatureAllModule } from './signature/signature-all.module';
|
||||
export { RatingComponent} from './rating/rating.component';
|
||||
export { RatingModule } from './rating/rating.module';
|
||||
export { RatingAllModule } from './rating/rating-all.module';
|
||||
export * from './form-validator/form-validator';
|
||||
export * from '@syncfusion/ej2-inputs';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { MaskedTextBoxComponent} from './maskedtextbox.component';
|
||||
export { MaskedTextBoxModule } from './maskedtextbox.module';
|
||||
export { MaskedTextBoxAllModule } from './maskedtextbox-all.module';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MaskedTextBoxComponent } from './maskedtextbox.component';
|
||||
import { MaskedTextBoxModule } from './maskedtextbox.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the MaskedTextBox component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, MaskedTextBoxModule],
|
||||
exports: [
|
||||
MaskedTextBoxModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class MaskedTextBoxAllModule { }
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { MaskedTextBox } from '@syncfusion/ej2-inputs';
|
||||
|
||||
|
||||
|
||||
export const inputs: string[] = ['cssClass','customCharacters','enablePersistence','enableRtl','enabled','floatLabelType','htmlAttributes','locale','mask','placeholder','promptChar','readonly','showClearButton','value','width'];
|
||||
export const outputs: string[] = ['blur','change','created','destroyed','focus','valueChange'];
|
||||
export const twoWays: string[] = ['value'];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular MaskedTextbox Component.
|
||||
* ```html
|
||||
* <ej-maskedtextbox [value]='value'></ej-maskedtextbox>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ejs-maskedtextbox',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => MaskedTextBoxComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class MaskedTextBoxComponent extends MaskedTextBox implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
blur: any;
|
||||
change: any;
|
||||
created: any;
|
||||
destroyed: any;
|
||||
focus: any;
|
||||
public valueChange: any;
|
||||
|
||||
|
||||
|
||||
private skipFromEvent:boolean = true;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MaskedTextBoxComponent } from './maskedtextbox.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the MaskedTextBox component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
MaskedTextBoxComponent
|
||||
],
|
||||
exports: [
|
||||
MaskedTextBoxComponent
|
||||
]
|
||||
})
|
||||
export class MaskedTextBoxModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { NumericTextBoxComponent} from './numerictextbox.component';
|
||||
export { NumericTextBoxModule } from './numerictextbox.module';
|
||||
export { NumericTextBoxAllModule } from './numerictextbox-all.module';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NumericTextBoxComponent } from './numerictextbox.component';
|
||||
import { NumericTextBoxModule } from './numerictextbox.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the NumericTextBox component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, NumericTextBoxModule],
|
||||
exports: [
|
||||
NumericTextBoxModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class NumericTextBoxAllModule { }
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { NumericTextBox } from '@syncfusion/ej2-inputs';
|
||||
|
||||
|
||||
|
||||
export const inputs: string[] = ['cssClass','currency','currencyCode','decimals','enablePersistence','enableRtl','enabled','floatLabelType','format','htmlAttributes','locale','max','min','placeholder','readonly','showClearButton','showSpinButton','step','strictMode','validateDecimalOnType','value','width'];
|
||||
export const outputs: string[] = ['blur','change','created','destroyed','focus','valueChange'];
|
||||
export const twoWays: string[] = ['value'];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular NumericTextBox Component.
|
||||
* ```html
|
||||
* <ej-numerictextbox [value]='value'></ej-numerictextbox>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ejs-numerictextbox',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => NumericTextBoxComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class NumericTextBoxComponent extends NumericTextBox implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
blur: any;
|
||||
change: any;
|
||||
created: any;
|
||||
destroyed: any;
|
||||
focus: any;
|
||||
public valueChange: any;
|
||||
|
||||
|
||||
|
||||
private skipFromEvent:boolean = true;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NumericTextBoxComponent } from './numerictextbox.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the NumericTextBox component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
NumericTextBoxComponent
|
||||
],
|
||||
exports: [
|
||||
NumericTextBoxComponent
|
||||
]
|
||||
})
|
||||
export class NumericTextBoxModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { RatingComponent} from './rating.component';
|
||||
export { RatingModule } from './rating.module';
|
||||
export { RatingAllModule } from './rating-all.module';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RatingComponent } from './rating.component';
|
||||
import { RatingModule } from './rating.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the Rating component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, RatingModule],
|
||||
exports: [
|
||||
RatingModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class RatingAllModule { }
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ContentChild } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { Rating } from '@syncfusion/ej2-inputs';
|
||||
import { Template } from '@syncfusion/ej2-angular-base';
|
||||
|
||||
|
||||
export const inputs: string[] = ['allowReset','cssClass','disabled','emptyTemplate','enableAnimation','enablePersistence','enableRtl','enableSingleSelection','fullTemplate','itemsCount','labelPosition','labelTemplate','locale','min','precision','readOnly','showLabel','showTooltip','tooltipTemplate','value','visible'];
|
||||
export const outputs: string[] = ['focus', 'blur', 'beforeItemRender','created','onItemHover','valueChanged','valueChange'];
|
||||
export const twoWays: string[] = ['value'];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular Rating Component.
|
||||
* ```html
|
||||
* <input ejs-rating [value]='value' />
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: '[ejs-rating]',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => RatingComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class RatingComponent extends Rating implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
beforeItemRender: any;
|
||||
created: any;
|
||||
onItemHover: any;
|
||||
valueChanged: any;
|
||||
public valueChange: any;
|
||||
|
||||
|
||||
/**
|
||||
* Defines the template that defines the appearance of each rated item in a rating component.
|
||||
*
|
||||
* {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
|
||||
*
|
||||
* @default ''
|
||||
* @angulartype string | object
|
||||
* @reacttype string | function | JSX.Element
|
||||
* @vuetype string | function
|
||||
* @asptype string
|
||||
*/
|
||||
@ContentChild('fullTemplate')
|
||||
@Template()
|
||||
public fullTemplate: any;
|
||||
/**
|
||||
* Defines the template that defines the appearance of each un-rated item in a rating component.
|
||||
* @default ''
|
||||
* @angulartype string | object
|
||||
* @reacttype string | function | JSX.Element
|
||||
* @vuetype string | function
|
||||
* @asptype string
|
||||
*/
|
||||
@ContentChild('emptyTemplate')
|
||||
@Template()
|
||||
public emptyTemplate: any;
|
||||
/**
|
||||
* Defines the template that used as tooltip content over default tooltip content of the rating.
|
||||
* The current value of rating passed as context to build the content.
|
||||
*
|
||||
* {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
|
||||
*
|
||||
* @default ''
|
||||
* @angulartype string | object
|
||||
* @reacttype string | function | JSX.Element
|
||||
* @vuetype string | function
|
||||
* @asptype string
|
||||
*/
|
||||
@ContentChild('tooltipTemplate')
|
||||
@Template()
|
||||
public tooltipTemplate: any;
|
||||
/**
|
||||
* Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.
|
||||
*
|
||||
* {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
|
||||
*
|
||||
* @default ''
|
||||
* @angulartype string | object
|
||||
* @reacttype string | function | JSX.Element
|
||||
* @vuetype string | function
|
||||
* @asptype string
|
||||
*/
|
||||
@ContentChild('labelTemplate')
|
||||
@Template()
|
||||
public labelTemplate: any;
|
||||
|
||||
public focus: any;
|
||||
public blur: any;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RatingComponent } from './rating.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the Rating component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
RatingComponent
|
||||
],
|
||||
exports: [
|
||||
RatingComponent
|
||||
]
|
||||
})
|
||||
export class RatingModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { SignatureComponent} from './signature.component';
|
||||
export { SignatureModule } from './signature.module';
|
||||
export { SignatureAllModule } from './signature-all.module';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SignatureComponent } from './signature.component';
|
||||
import { SignatureModule } from './signature.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the Signature component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, SignatureModule],
|
||||
exports: [
|
||||
SignatureModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class SignatureAllModule { }
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { Signature } from '@syncfusion/ej2-inputs';
|
||||
|
||||
|
||||
|
||||
export const inputs: string[] = ['backgroundColor','backgroundImage','disabled','enablePersistence','enableRtl','isReadOnly','locale','maxStrokeWidth','minStrokeWidth','saveWithBackground','strokeColor','velocity'];
|
||||
export const outputs: string[] = ['focus', 'blur', 'beforeSave','change','created'];
|
||||
export const twoWays: string[] = [];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular Signature Component.
|
||||
* ```html
|
||||
* <canvas ejs-signature />
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: '[ejs-signature]',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => SignatureComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class SignatureComponent extends Signature implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
beforeSave: any;
|
||||
change: any;
|
||||
public created: any;
|
||||
|
||||
|
||||
|
||||
public focus: any;
|
||||
public blur: any;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SignatureComponent } from './signature.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the Signature component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
SignatureComponent
|
||||
],
|
||||
exports: [
|
||||
SignatureComponent
|
||||
]
|
||||
})
|
||||
export class SignatureModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { SliderComponent} from './slider.component';
|
||||
export { SliderModule } from './slider.module';
|
||||
export { SliderAllModule } from './slider-all.module';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SliderComponent } from './slider.component';
|
||||
import { SliderModule } from './slider.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the Slider component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, SliderModule],
|
||||
exports: [
|
||||
SliderModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class SliderAllModule { }
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { Slider } from '@syncfusion/ej2-inputs';
|
||||
|
||||
|
||||
|
||||
export const inputs: string[] = ['colorRange','cssClass','customValues','enableAnimation','enableHtmlSanitizer','enablePersistence','enableRtl','enabled','limits','locale','max','min','orientation','readonly','showButtons','step','ticks','tooltip','type','value','width'];
|
||||
export const outputs: string[] = ['focus', 'blur', 'change','changed','created','renderedTicks','renderingTicks','tooltipChange','valueChange'];
|
||||
export const twoWays: string[] = ['value'];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular Slider Component.
|
||||
* ```html
|
||||
* <ejs-slider [value]='value'></ejs-slider>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ejs-slider',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => SliderComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class SliderComponent extends Slider implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
change: any;
|
||||
changed: any;
|
||||
created: any;
|
||||
renderedTicks: any;
|
||||
renderingTicks: any;
|
||||
tooltipChange: any;
|
||||
public valueChange: any;
|
||||
|
||||
|
||||
|
||||
public focus: any;
|
||||
public blur: any;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { SliderComponent } from './slider.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the Slider component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
SliderComponent
|
||||
],
|
||||
exports: [
|
||||
SliderComponent
|
||||
]
|
||||
})
|
||||
export class SliderModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { TextBoxComponent} from './textbox.component';
|
||||
export { TextBoxModule } from './textbox.module';
|
||||
export { TextBoxAllModule } from './textbox-all.module';
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TextBoxComponent } from './textbox.component';
|
||||
import { TextBoxModule } from './textbox.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the TextBox component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, TextBoxModule],
|
||||
exports: [
|
||||
TextBoxModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class TextBoxAllModule { }
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { TextBox } from '@syncfusion/ej2-inputs';
|
||||
|
||||
|
||||
|
||||
export const inputs: string[] = ['autocomplete','cssClass','enablePersistence','enableRtl','enabled','floatLabelType','htmlAttributes','locale','multiline','placeholder','readonly','showClearButton','type','value','width'];
|
||||
export const outputs: string[] = ['blur','change','created','destroyed','focus','input','valueChange'];
|
||||
export const twoWays: string[] = ['value'];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular TextBox Component.
|
||||
* ```html
|
||||
* <ejs-textbox [value]='value'></ejs-textbox>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ejs-textbox',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => TextBoxComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class TextBoxComponent extends TextBox implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
blur: any;
|
||||
change: any;
|
||||
created: any;
|
||||
destroyed: any;
|
||||
focus: any;
|
||||
input: any;
|
||||
public valueChange: any;
|
||||
|
||||
|
||||
|
||||
private skipFromEvent:boolean = true;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TextBoxComponent } from './textbox.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the TextBox component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
TextBoxComponent
|
||||
],
|
||||
exports: [
|
||||
TextBoxComponent
|
||||
]
|
||||
})
|
||||
export class TextBoxModule { }
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import { Directive, ViewContainerRef, ContentChildren } from '@angular/core';
|
||||
import { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
|
||||
|
||||
|
||||
let input: string[] = ['name', 'size', 'type'];
|
||||
let outputs: string[] = [];
|
||||
/**
|
||||
* 'e-files' directive represent a file of angular uploader
|
||||
* It must be contained in a Uploader component(`ejs-uploader`).
|
||||
* ```html
|
||||
* <ejs-uploader id='fileupload' multiple=true>
|
||||
* <e-files>
|
||||
* <e-file name='Java' size=23000 type='pdf'></e-file>
|
||||
* <e-file name='C++' size=30000 type='.docx'></e-file>
|
||||
* </e-files>
|
||||
* </ejs-uploader>
|
||||
* ```
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'e-files>e-uploadedfiles',
|
||||
inputs: input,
|
||||
outputs: outputs,
|
||||
queries: {
|
||||
|
||||
}
|
||||
})
|
||||
export class UploadedFilesDirective extends ComplexBase<UploadedFilesDirective> {
|
||||
public directivePropList: any;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Specifies the type of the file
|
||||
* @default ''
|
||||
*/
|
||||
public type: any;
|
||||
/**
|
||||
* Specifies the name of the file
|
||||
* @default ''
|
||||
*/
|
||||
public name: any;
|
||||
/**
|
||||
* Specifies the size of the file
|
||||
* @default null
|
||||
*/
|
||||
public size: any;
|
||||
|
||||
constructor(private viewContainerRef:ViewContainerRef) {
|
||||
super();
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.registerEvents(outputs);
|
||||
this.directivePropList = input;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* UploadedFiles Array Directive
|
||||
* @private
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'ejs-uploader>e-files',
|
||||
queries: {
|
||||
children: new ContentChildren(UploadedFilesDirective)
|
||||
},
|
||||
})
|
||||
export class FilesDirective extends ArrayBase<FilesDirective> {
|
||||
constructor() {
|
||||
super('files');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export {UploadedFilesDirective,FilesDirective} from './files.directive';
|
||||
export { UploaderComponent} from './uploader.component';
|
||||
export { UploaderModule } from './uploader.module';
|
||||
export { UploaderAllModule } from './uploader-all.module';
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { NgModule, ValueProvider } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { UploadedFilesDirective, FilesDirective } from './files.directive';
|
||||
import { UploaderComponent } from './uploader.component';
|
||||
import { UploaderModule } from './uploader.module';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* NgModule definition for the Uploader component with providers.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule, UploaderModule],
|
||||
exports: [
|
||||
UploaderModule
|
||||
],
|
||||
providers:[
|
||||
|
||||
]
|
||||
})
|
||||
export class UploaderAllModule { }
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import { Component, ElementRef, ViewContainerRef, ValueProvider, Renderer2, Injector, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ContentChild } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, FormBase, setValue } from '@syncfusion/ej2-angular-base';
|
||||
import { Uploader } from '@syncfusion/ej2-inputs';
|
||||
import { Template } from '@syncfusion/ej2-angular-base';
|
||||
import { FilesDirective } from './files.directive';
|
||||
|
||||
export const inputs: string[] = ['allowedExtensions','asyncSettings','autoUpload','buttons','cssClass','directoryUpload','dropArea','dropEffect','enableHtmlSanitizer','enablePersistence','enableRtl','enabled','files','htmlAttributes','locale','maxFileSize','minFileSize','multiple','sequentialUpload','showFileList','template'];
|
||||
export const outputs: string[] = ['focus', 'blur', 'actionComplete','beforeRemove','beforeUpload','canceling','change','chunkFailure','chunkSuccess','chunkUploading','clearing','created','failure','fileListRendering','pausing','progress','removing','rendering','resuming','selected','success','uploading'];
|
||||
export const twoWays: string[] = [];
|
||||
|
||||
/**
|
||||
* Represents the EJ2 Angular Uploader Component.
|
||||
* ```html
|
||||
* <ejs-uploader></ejs-uploader>
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ejs-uploader',
|
||||
inputs: inputs,
|
||||
outputs: outputs,
|
||||
template: '',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => UploaderComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
queries: {
|
||||
childFiles: new ContentChild(FilesDirective)
|
||||
}
|
||||
})
|
||||
@ComponentMixins([ComponentBase, FormBase])
|
||||
export class UploaderComponent extends Uploader implements IComponentBase {
|
||||
public formCompContext : any;
|
||||
public formContext : any;
|
||||
public tagObjects: any;
|
||||
actionComplete: any;
|
||||
beforeRemove: any;
|
||||
beforeUpload: any;
|
||||
canceling: any;
|
||||
change: any;
|
||||
chunkFailure: any;
|
||||
chunkSuccess: any;
|
||||
chunkUploading: any;
|
||||
clearing: any;
|
||||
created: any;
|
||||
failure: any;
|
||||
fileListRendering: any;
|
||||
pausing: any;
|
||||
progress: any;
|
||||
removing: any;
|
||||
rendering: any;
|
||||
resuming: any;
|
||||
selected: any;
|
||||
success: any;
|
||||
public uploading: any;
|
||||
public childFiles: any;
|
||||
public tags: string[] = ['files'];
|
||||
/**
|
||||
* Specifies the HTML string that used to customize the content of each file in the list.
|
||||
*
|
||||
* > For more information, refer to the [template](../../uploader/template/) section from the documentation.
|
||||
*
|
||||
* @default null
|
||||
* @asptype string
|
||||
*/
|
||||
@ContentChild('template')
|
||||
@Template()
|
||||
public template: any;
|
||||
|
||||
public focus: any;
|
||||
public blur: any;
|
||||
constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector, private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
this.element = this.ngEle.nativeElement;
|
||||
this.injectedModules = this.injectedModules || [];
|
||||
|
||||
this.registerEvents(outputs);
|
||||
this.addTwoWay.call(this, twoWays);
|
||||
setValue('currentInstance', this, this.viewContainerRef);
|
||||
this.formContext = new FormBase();
|
||||
this.formCompContext = new ComponentBase();
|
||||
}
|
||||
|
||||
public registerOnChange(registerFunction: (_: any) => void): void {
|
||||
}
|
||||
|
||||
public registerOnTouched(registerFunction: () => void): void {
|
||||
}
|
||||
|
||||
public writeValue(value: any): void {
|
||||
}
|
||||
|
||||
public setDisabledState(disabled: boolean): void {
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.formCompContext.ngOnInit(this);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.formContext.ngAfterViewInit(this);
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.formCompContext.ngOnDestroy(this);
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
this.tagObjects[0].instance = this.childFiles;
|
||||
this.formCompContext.ngAfterContentChecked(this);
|
||||
}
|
||||
|
||||
public registerEvents: (eventList: string[]) => void;
|
||||
public addTwoWay: (propList: string[]) => void;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { UploadedFilesDirective, FilesDirective } from './files.directive';
|
||||
import { UploaderComponent } from './uploader.component';
|
||||
|
||||
/**
|
||||
* NgModule definition for the Uploader component.
|
||||
*/
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [
|
||||
UploaderComponent,
|
||||
UploadedFilesDirective,
|
||||
FilesDirective
|
||||
],
|
||||
exports: [
|
||||
UploaderComponent,
|
||||
UploadedFilesDirective,
|
||||
FilesDirective
|
||||
]
|
||||
})
|
||||
export class UploaderModule { }
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/bootstrap-dark.scss';
|
||||
@import 'input/bootstrap-dark.scss';
|
||||
@import 'numerictextbox/bootstrap-dark.scss';
|
||||
@import 'maskedtextbox/bootstrap-dark.scss';
|
||||
@import 'slider/bootstrap-dark.scss';
|
||||
@import 'textbox/bootstrap-dark.scss';
|
||||
@import 'uploader/bootstrap-dark.scss';
|
||||
@import 'color-picker/bootstrap-dark.scss';
|
||||
@import 'rating/bootstrap-dark.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/bootstrap.scss';
|
||||
@import 'input/bootstrap.scss';
|
||||
@import 'numerictextbox/bootstrap.scss';
|
||||
@import 'maskedtextbox/bootstrap.scss';
|
||||
@import 'slider/bootstrap.scss';
|
||||
@import 'textbox/bootstrap.scss';
|
||||
@import 'uploader/bootstrap.scss';
|
||||
@import 'color-picker/bootstrap.scss';
|
||||
@import 'rating/bootstrap.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/bootstrap4.scss';
|
||||
@import 'input/bootstrap4.scss';
|
||||
@import 'numerictextbox/bootstrap4.scss';
|
||||
@import 'maskedtextbox/bootstrap4.scss';
|
||||
@import 'slider/bootstrap4.scss';
|
||||
@import 'textbox/bootstrap4.scss';
|
||||
@import 'uploader/bootstrap4.scss';
|
||||
@import 'color-picker/bootstrap4.scss';
|
||||
@import 'rating/bootstrap4.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/bootstrap5-dark.scss';
|
||||
@import 'input/bootstrap5-dark.scss';
|
||||
@import 'numerictextbox/bootstrap5-dark.scss';
|
||||
@import 'maskedtextbox/bootstrap5-dark.scss';
|
||||
@import 'slider/bootstrap5-dark.scss';
|
||||
@import 'textbox/bootstrap5-dark.scss';
|
||||
@import 'uploader/bootstrap5-dark.scss';
|
||||
@import 'color-picker/bootstrap5-dark.scss';
|
||||
@import 'rating/bootstrap5-dark.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/bootstrap5.scss';
|
||||
@import 'input/bootstrap5.scss';
|
||||
@import 'numerictextbox/bootstrap5.scss';
|
||||
@import 'maskedtextbox/bootstrap5.scss';
|
||||
@import 'slider/bootstrap5.scss';
|
||||
@import 'textbox/bootstrap5.scss';
|
||||
@import 'uploader/bootstrap5.scss';
|
||||
@import 'color-picker/bootstrap5.scss';
|
||||
@import 'rating/bootstrap5.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/bootstrap-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/bootstrap.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/bootstrap4.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/bootstrap5-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/bootstrap5.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/fabric-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/fabric.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/fluent-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/fluent.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/highcontrast-light.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/highcontrast.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/material-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/material.scss';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import 'ej2-base/styles/definition/material3-dark.scss';
|
||||
@import 'ej2-inputs/styles/color-picker/material3-dark.scss';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import 'ej2-base/styles/definition/material3.scss';
|
||||
@import 'ej2-inputs/styles/color-picker/material3.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/color-picker/tailwind.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/fabric-dark.scss';
|
||||
@import 'input/fabric-dark.scss';
|
||||
@import 'numerictextbox/fabric-dark.scss';
|
||||
@import 'maskedtextbox/fabric-dark.scss';
|
||||
@import 'slider/fabric-dark.scss';
|
||||
@import 'textbox/fabric-dark.scss';
|
||||
@import 'uploader/fabric-dark.scss';
|
||||
@import 'color-picker/fabric-dark.scss';
|
||||
@import 'rating/fabric-dark.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/fabric.scss';
|
||||
@import 'input/fabric.scss';
|
||||
@import 'numerictextbox/fabric.scss';
|
||||
@import 'maskedtextbox/fabric.scss';
|
||||
@import 'slider/fabric.scss';
|
||||
@import 'textbox/fabric.scss';
|
||||
@import 'uploader/fabric.scss';
|
||||
@import 'color-picker/fabric.scss';
|
||||
@import 'rating/fabric.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/fluent-dark.scss';
|
||||
@import 'input/fluent-dark.scss';
|
||||
@import 'numerictextbox/fluent-dark.scss';
|
||||
@import 'maskedtextbox/fluent-dark.scss';
|
||||
@import 'slider/fluent-dark.scss';
|
||||
@import 'textbox/fluent-dark.scss';
|
||||
@import 'uploader/fluent-dark.scss';
|
||||
@import 'color-picker/fluent-dark.scss';
|
||||
@import 'rating/fluent-dark.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/fluent.scss';
|
||||
@import 'input/fluent.scss';
|
||||
@import 'numerictextbox/fluent.scss';
|
||||
@import 'maskedtextbox/fluent.scss';
|
||||
@import 'slider/fluent.scss';
|
||||
@import 'textbox/fluent.scss';
|
||||
@import 'uploader/fluent.scss';
|
||||
@import 'color-picker/fluent.scss';
|
||||
@import 'rating/fluent.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/highcontrast-light.scss';
|
||||
@import 'input/highcontrast-light.scss';
|
||||
@import 'numerictextbox/highcontrast-light.scss';
|
||||
@import 'maskedtextbox/highcontrast-light.scss';
|
||||
@import 'slider/highcontrast-light.scss';
|
||||
@import 'textbox/highcontrast-light.scss';
|
||||
@import 'uploader/highcontrast-light.scss';
|
||||
@import 'color-picker/highcontrast-light.scss';
|
||||
@import 'rating/highcontrast-light.scss';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import 'signature/highcontrast.scss';
|
||||
@import 'input/highcontrast.scss';
|
||||
@import 'numerictextbox/highcontrast.scss';
|
||||
@import 'maskedtextbox/highcontrast.scss';
|
||||
@import 'slider/highcontrast.scss';
|
||||
@import 'textbox/highcontrast.scss';
|
||||
@import 'uploader/highcontrast.scss';
|
||||
@import 'color-picker/highcontrast.scss';
|
||||
@import 'rating/highcontrast.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/input/bootstrap-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/input/bootstrap.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/input/bootstrap4.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-inputs/styles/input/bootstrap5-dark.scss';
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче