@sedeh/into-pipes
Version:
Have you ever wanted to transform data in different parts of your application into interactive objects without writing a single line of code?
880 lines (741 loc) • 63.9 kB
Markdown
# Welcome to InTo Pipes!
Have you ever wanted to transform data in different parts of your application into interactive objects without writing a single line of code?
This library provides few Angular pipes that are all used by an **InTo** pipe or directive.
**NOTE** Current version 4.5.3
**InTo** will determine how the object value should be formatted based with meta-data formatting rules!!
Moreover, **"InTo"** can be customized by adding custom formatters **into** it!
Most of all, this library is truly extendible. It is allowing you to include any portion of it as you see fit for your application!! You can use all pipes and components that are available, or pick and choose only from those that you want to use in your application without adding un-necessary components which could contribute to your application size. (for details of how it can be done, read more.)
**Note:** If you want interactive pipes, you should use **into pipe** directive in order to have fully ADA compliant component and get the benefit of keyboard events handled by into components. If you decide to use the **InTo pipes** instead of the directive. In addition, you need to make sure you will pipe the result **into** sanitizeHtml.
**Note:** When you create tags and insert them **into** DOM at runtime through **InTo Pipes**, angular will not be able to enforce CSS rules on the tags. In that case the workaround is to use **::ng-deep** in your CSS. For example, if img tag is created through image pipe under a DIV with class "something", then you need to declare attributes in `::ng-deep .something img{ }` in order to have control over img tag.
**Note:** Starting from version 4.0.0, this library is compatible with Angular 15+.
**Note:** Starting from version 2.0.0, this library is compatible with Angular 6+.
**NOTE:** Starting with version 2.1.1 you need to import this library through @sedeh/into-pipes.
**You are definitely welcome to submit additional pipes and formatting rules to this library and I will gladly incorporate your ideas InTo this project.**
Add your comments and requests through [Comments/Requests](https://github.com/msalehisedeh/into-pipes/issues)
See it in action through [Live Demo](https://stackblitz.com/edit/into-pipe?file=src%2Fapp%2Fapp.component.ts)
pull it from [NPM](https://www.npmjs.com/package/@sedeh/into-pipes)
## Features
* Responsive
* Formats your data to interactive component
* ADA Compliant
* Extendible
## Dependencies and Components
ALL modules for specific pipes and components are exported. To pick and choos, CommonPipesModule has to be imported; and on top of that any one of the modules can be imported in your application as needed.
```javascript
MODULE:
CommonPipesModule // Required if you want to pick and choose from different modules.
IntoPipeModule // Imports all modules and pipes
EXPORTS from CommonPipesModule
InToPipe
IntoDirective
PipeComponentInterface
PipeServiceComponentInterface
ComponentPool
DEPENDENCIES:
"font-awesome": "^4.7.0"
```
## Design system
Create a css file with the following and modify its value to fit your application needs. Then include it in root of application css file.
```javascript
:root {
--sedeh-marker-color: #fabdab;
--sedeh-disabled-color: #888;
--sedeh-margin: 0 5px;
--sedeh-margin-right: 5px;
--sedeh-margin-left: 5px;
--sedeh-margin-bottom: 5px;
--sedeh-padding: 5px;
--sedeh-padding-top: 5px;
--sedeh-padding-bottom: 5px;
--sedeh-min-width: 25px;
--sedeh-min-height: 25px;
--sedeh-shift-right: 0;
--sedeh-focus-color: darkblue;
--sedeh-sected-color: green;
--sedeh-disapproved-color: red;
--sedeh-hover-opacity: 0.5;
--sedeh-box-shadow: 3px 3px 3px #999;
--sedeh-solid-border: 1px solid #fabdab;
--sedeh-caption-color: #1b1b1b;
--sedeh-caption-background-color: #c3e5e2;
--sedeh-notice-color: white;
--sedeh-notice-background-color: rgb(4, 159, 255);
}
```
## Interfaces
```javascript
export interface PipeComponentInterface {
source: any;
id: string;
name: string;
service?:PipeServiceComponentInterface;
onIntoComponentChange: EventEmitter<any>;
// implementations should implement static settingsPatterns() method that returns pattern that trigger instantiation
transform(content: any, data: any, args?: any[]);
}
export interface PipeServiceComponentInterface {
getDataFor(name, id, data);
}
```
## Directive
| input/output | Description |
|-------------------|--------------------------------------------------------------------------|
| rawContent | Raw data to be operated on. |
| intoId | Id to be used for the component in use. |
| intoName | name for the component in use. |
| intoData | data to be operated on. |
| into | Type of InTo operation to be executed. |
| onComponentChange | fired when pipe component change happen through user interaction. |
## Sample use of directive
```javascript
// in typescript file
myaddress = {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
};
// in HTML template
<span
style="width: 111px"
intoId="address22"
intoName="myAddress"
into="address"
[active]="true"
[disabled]="false"
[rawContent]="myaddress"
[onComponentChange]="onComponentChange.bind(this)">
</span>
<span>[innerHTML]="myaddress | into:'address:false' | sanitizeHtml"</span>
```
## Module, Pipes, and Components
**NOTE: For all of the pipes, if transforming object is an array, all elements in the array will be transformed and the resulting array will be returned. in case of conditional pipe, a resulting map will be returned.**
## Independent Directives
### Address Format Directive
| Name | address |
|------------|------------------------------------------------------------------|
| Exports | AddressIntoPipeModule, AddressComponent, AddressPipe |
| Depends On | CommonPipesModule |
| Description| Will format an address structure into an standard address display. |
| Options | 1) In a Link or not |
| | 2) should google map be viewed on the same page or pop a new page for it. |
| Example 1 | [rawContent]="myaddress" intoId="my-address-id" |
| | [into]="'address:true:true'" intoName="my-address-directive" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Examples 2 | `myaddress | into:'address:true:true'` |
### Audio Directive
| Name | audio |
|------------|------------------------------------------------------------------|
| Exports | AudioIntoPipeModule, AudioComponent, AudioPipe |
| Depends On | CommonPipesModule |
| Description| For a given source, will convert a link source into an interactive audio tag. |
| Options | NONE |
| Example 1 | [rawContent]="myAudioUrl" [into]="'audio'" |
| | intoName="my-audio-directive" intoId="my-audio-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myAudioUrl | into:audio` |
### Calendar Directive
| Name | calendar |
|------------|------------------------------------------------------------------|
| Exports | CalendarIntoPipeModule, CalendarComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide interactive date picker. if the source is an array of dates or date strings, the date picker will be multi-select. Otherwise it will be a single select. When selecting a date, an event will be triggered. You will be responsible to catch the change event and update date(s) in your data source. |
| Options | 1) date format. if the transformation source is an array of dates or date strings, the calendar will be multi-select calendar. Otherwise it will be a single select calendar. |
| Example 1 | [rawContent]="myPickDate" [into]="'calendar:MM/dd/yyyy'" |
| | [active]="true" |
| | [disabled]="false" |
| | [validate]="validate" |
| | intoId="my-calendar-id" intoName="my-calendar-directive" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Checkbox Directive
| Name | checkbox |
|------------|------------------------------------------------------------------|
| Exports | CheckboxIntoPipeModule, CheckComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide an interactive check-box. You will be responsible to catch the change event and update date(s) in your data source. |
| Options | 1) state to determine if checked |
| | 2) state to determine in not checked. |
| | 3) if it is standard check-box or should use fonts to display checked or not checked. |
| | 3) if to show it as switch on / off. |
| Example 1 | [rawContent]="'yes'" [into]="'checkbox:yes:true'" |
| | [active]="true" |
| | [disabled]="false" |
| | intoName="my-checkbox-directive" intoId="my-checkbox-id" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Email Directive
| Name | email |
|------------|------------------------------------------------------------------|
| Exports | EmailIntoPipeModule, EmailComponent, EmailPipe |
| Depends On | CommonPipesModule |
| Description| Will format the source into a mail link. |
| Options | 1) In a Link or not |
| Example 1 | [rawContent]="myEmailAddress" [into]="'email:true'" |
| | intoName="my-email-directive" intoId="my-email-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myEmailAddress | into:'email:false'` |
### Font Awesome Directive
| Name | font |
|------------|------------------------------------------------------------------|
| Exports | FontIntoPipeModule, FontComponent, FontPipe |
| Depends On | CommonPipesModule |
| Description| Will take a source into a font awesome representation. |
| Options | 1) class |
| | 2) position (left,right,replace |
| | 3) action (*:use content) |
| Example 1 | [rawContent]="'3423423422'" [into]="'font:fa fa-check:replace:*'"|
| | intoId="my-awesome-id" intoName="my-awesome-directive" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myValue | into:'font:fa fa-check:left:*'` |
### Image Display Directive
| Name | image |
|------------|------------------------------------------------------------------|
| Exports | ImageIntoPipeModule, ImageComponent, ImagePipe |
| Depends On | CommonPipesModule |
| Description| Will take a source URL into an image tag. If zoom is set, you can have magnified image popped out or stay within the image boundaries. |
| Options | 1) optional width |
| | 2) optional height |
| | 3) optional alternate text to be displayed |
| | 4) optional magnify by number on hover available only for intoDiretive |
| | 5) optional pop on hover (top, left, right, bottom) |
| Example 1 | [rawContent]="myImageUrl" [into]="'image:200px:auto:alt |
| | text:6:true'" intoName="my-image-directive" intoId="my-image-id" |
| | [active]="true" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myImageUrl | into:'image:width:height:alt text:magnify:pop-hover'` |
### Input Directive
| Name | input |
|------------|------------------------------------------------------------------|
| Exports | InputIntoPipeModule, InputComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide an interactive input tag that will become active when user clicks on it. Otherwise a plain text content will be displayed. You will be responsible to catch the change event and update data in your data source. Interactive input component will fire event after the input value is changed and a tab, return, or escape key is pressed. After the event is fired, input field will revert back to a plain text. |
| Options | 1) place holder text or blank |
| | 2) formatting rules for the value to be displayed when text field is not editable |
| | 3) optional lock field in editable mode |
| Example 2 | [into]="'input:enter number:mask:locked'" rawContent]="'red'" |
| | intoName="input-directive" intoId="input-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [validate]="validate" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Input Group Directive
| Name | inputgroup |
|------------|------------------------------------------------------------------|
| Exports | InputGroupIntoPipeModule, InputGroupComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide a list of radio or check-box tags through special service that knows how to provide options based on supplied data. If the source is a list, options are check-box. Otherwise, options are radio buttons. You will be responsible to catch the change event and update data in your data source. |
| Options | NONE. Requires implementation of DirectiveServiceComponentInterface registered with ComponentPool |
| Example 2 | [rawContent]="'red'" [into]="'inputgroup'" |
| | intoName="group1-directive" intoId="group1-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### JSON Format Directive
| Name | json |
|------------|------------------------------------------------------------------|
| Exports | JsonIntoPipeModule, JsonComponent |
| Depends On | CommonPipesModule |
| Description| Will format JSON into read-able source. |
| Options | NONE |
| Example 1 | [rawContent]="myJson" [into]="'json'" |
### Last Update Directive
| Name | lastupdate |
|------------|------------------------------------------------------------------|
| Exports | LastUpdateIntoPipeModule, LastUpdateComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide a natural language human readable elapsed time. |
| Options | 1) flag to indicate if time icon should be displayed on the side.|
| Example 1 | [rawContent]="myLastUpdatedDate" [into]="'lastupdate:true'" |
### Social Like Directive
| Name | like |
|------------|------------------------------------------------------------------|
| Exports | LikeIntoPipeModule, LikeComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide interactive like/dislike links. With like/dislike, an event is triggered after user clicks on it. You will be responsible to catch the event and increment or decrement the count in your data source. |
| Options | 1) optional flag to indicate if like counts should be displayed. |
| | 2) optional flag to show likes or dislikes. |
| | 3) Attribute in JSON object with unique value to be used for tracking likes or dislikes. |
| Example 1 | [rawContent]="dataSet.likes" [intoData]="dataSet" |
| | [into]="'like:true:true:id'" intoId="myLikes" intoName="like" |
| | [active]="true" |
| | [validate]="validate" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Link Directive
| Name | link |
|------------|------------------------------------------------------------------|
| Exports | LinkIntoPipeModule, LinkComponent, LinkPipe |
| Depends On | CommonPipesModule |
| Description| Will transform a source into a link tag. |
| Options | 1) on click target - blank if none |
| | 2) text to be displayed in the link - blank if none |
| | 3) optional hover pop a viewer - available only on inTo directive|
| Example 1 | [rawContent]="myLinkUrl" [into]="'link:true:my image:true'" |
| | intoName="my-link-directive" intoId="my-link-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myLinkUrl | into:'link:_top:my image'` |
### Notice Directive
| Name | notice |
|------------|------------------------------------------------------------------|
| Exports | NoticeIntoPipeModule, NoticeComponent, NoticePipe |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide a notice / notification reminder. You will be responsible to catch the change event and update data in your data source. |
| Options | 1) show hover message |
| Example 1 | [rawContent]="5" [into]="'notice:You have unread messages'" |
| | intoName="my-alerts" intoId="my-alerts-id" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myCounter | into:'notice:You have unread messages'` |
### Phone Format Directive
| Name | phone |
|------------|------------------------------------------------------------------|
| Exports | PhoneIntoPipeModule, PhoneComponent, PhonePipe |
| Depends On | CommonPipesModule |
| Description| Will format a phone number and display it in standard way. |
| Options | 1) In a Link or not |
| | 2) format or not |
| Example 1 | [rawContent]="'+1 976 888 7645 3454'" [into]="'phone:true:true'" |
| | intoName="my-phone" intoId="my-phone-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `'+1 976 888 7645 3454' | into:'phone:false:true'` |
### Social Rating Directive
| Name | rating |
|------------|------------------------------------------------------------------|
| Exports | RatingIntoPipeModule, RatingComponent, RatingPipe |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide ranking value of a source through stars. |
| Options | 1) show count with single star |
| Example 1 | [rawContent]="'3.5'" [into]="'rating'" intoName="my-rating" |
| | intoId="my-rating-id" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `'3.5' | into:'rating:true'` |
### Select Directive
| Name | select |
|------------|------------------------------------------------------------------|
| Exports | SelectIntoPipeModule, SelectComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide a select options tag through special service that knows how to provide options based on supplied data. You will be responsible to catch the change event and update data in your data source. |
| Options | 1) if it is multi-select. Requires implementation of PipeServiceComponentInterface registered with ComponentPool |
| | 2) lock the dropdown in editmode |
| Example 1 | [rawContent]="'xyz@gmail.com'" intoName="select1" |
| | [active]="true" |
| | [validate]="validate" |
| | [disabled]="false" |
| | intoId="select1-id" [into]="'select'" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Slider Directive
| Name | slider |
|------------|------------------------------------------------------------------|
| Exports | SliderIntoPipeModule, SliderComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide an interactive range slider. You will be responsible to catch the change event and update date(s) in your data source. |
| Options | 1) length of slider |
| | 2) true if vertical slider |
| | 3) true if show range |
| | 4) min value |
| | 5) max value |
| Example 1 | [rawContent]="33" [into]="'slider:150:false:true:0:100'" |
| | intoName="my-slider-directive" intoId="my-slider-id" |
| | [active]="true" |
| | [validate]="validate" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Social Share Directive
| Name | share |
|------------|------------------------------------------------------------------|
| Exports | ShareIntoPipeModule, ShareComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide social share buttons. |
| Options | 1) list of any one of supported sites (facebook, linkedin, google, twitter, pinterest, digg, xing, get-pocket, stumbleupon) |
| Example 1 | [rawContent]="'http://thiswebsite.com/thispage/thisarticle'" |
| | [into]="'share:facebook:linkedin:google:twitter'" |
| | intoName="my-share" intoId="my-shareid" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Span Directive
| Name | span |
|------------|------------------------------------------------------------------|
| Exports | SpanIntoPipeModule, SpanComponent |
| Depends On | CommonPipesModule |
| Description| Wraps a given source in a span tag. |
| Options | NONE |
| Examples | [rawContent]="my text to be wrapped" [into]="'span'" |
### Switch Directive
| Name | switch |
|------------|------------------------------------------------------------------|
| Exports | SwitchIntoPipeModule, SwitchComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, display on/off switch. |
| Options | 1) the value for which check-box should be checked |
| | 2) text to show on state |
| | 3) text to show off state. |
| Example 1 | [rawContent]="'yes'" [into]="'switch:yes:on:off'" |
| | intoName="my-switch" intoId="my-switchid" |
| | [active]="true" |
| | [validate]="validate" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Table Directive
| Name | table |
|------------|------------------------------------------------------------------|
| Exports | TableIntoPipeModule, TableComponent, TablePipe |
| Depends On | CommonPipesModule |
| Description| For a given source, will convert source into an table tag. This is a crude table display. If you want a fully fledged interactive table, you should go for @sedeh/flexible-table. |
| Options | 1) optional ID |
| | 2) optional caption |
| Example 1 | [rawContent]="myJson" [into]="'table:myJsonId:My JSON Items'" |
| Example 2 | `myJsonData | into:'table:myId:my caption'` |
### Textarea Directive
| Name | text |
|------------|------------------------------------------------------------------|
| Exports | TextIntoPipeModule, TextComponent |
| Depends On | CommonPipesModule |
| Description| For a given source, will provide an interactive text area tag that will become active when user clicks on it. Otherwise a plain text content will be displayed. You will be responsible to catch the change event and update data in your data source. |
| Options | 1) optional rows |
| | 2) optional max limits |
| | 3) optional show counter |
| | 4) lock fieldc in editable mode |
| Example 1 | [rawContent]="'this is a test for a large text input.'" |
| | [into]="'text:4:123:true'" intoName="myText" intoId="textId" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Toggler Directive
| Name | text |
|------------|------------------------------------------------------------------|
| Exports | TogglerPipeModule, TogglerComponent |
| Depends On | CommonPipesModule |
| Description| display icon and toggle it on click. |
| Options | 1) optional name of the toggler |
| | 2) optional icon to display on normal state |
| | 3) optional icon to display on toggled state |
| Example 1 | [intoData]="{}" |
| | [into]="'toggler:toggler:fa fa-thumbs-down:fa fa-thumbs-up" |
| | [active]="true" |
| | [validate]="validate" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
### Video Directive
| Name | video |
|------------|------------------------------------------------------------------|
| Exports | VideoIntoPipeModule, VideoComponent, VideoPipe |
| Depends On | CommonPipesModule |
| Description| For a given source, will convert a link source into an interactive video tag. |
| Options | 1) optional width. Use auto if need to specify options 2,3,... |
| | 2) optional height. Use auto if need to specify options 3,4,... |
| | 3) optional alternate text to be displayed. Use '-' if need to specify options 4,5 |
| | 4) optional hasControls to include video controls. Default is true. |
| | 5) optional hoverPlay to ply video on hover. Default is false.
| Example 1 | [into]="'video:200px:auto:alt text:false:true'" intoName="video 1"|
| | [rawContent]="myVideoURL" intoId="video1-id" |
| | [active]="true" |
| | [disabled]="false" |
| | [onComponentChange]="onComponentChange.bind(this)" |
| Example 2 | `myVideoUrl | into:'video:200px:auto:alt text'` |
## Common Pipes
### Append Pipe
| Name | append |
|------------|------------------------------------------------------------------|
| Exports | AppendPipe |
| Exported by| CommonPipesModule |
| Description| Will append a string to source. |
| Options | 1) appending string |
| Example 1 | `'xyz' | into:'append:*'` |
### Conditional If Else Pipe
| Name | if |
|------------|------------------------------------------------------------------|
| Exports | ConditionalPipe |
| Exported by| CommonPipesModule |
| Description| Will execute transformation based on a if else logic. |
| Options | 1) condition `=,!=,~=,<,>,~,!~,in` |
| | 2) value to be evaluated |
| | 3) action |
| | 4) optional else action |
| Conditions | "~" is for exist (check to see if transforming object exist and item 2 is ignored). |
| | "~=" is for equal ignore case. |
| | "!~" is for do not exist (check to see if transforming object is null or undefined exist and item 2 is ignored). |
| | "!=" is to evaluate if transforming object is not equal to value.|
| | "in" is to get indexof value in the transforming object. |
| Example 1 | `'masoud' | into: "if:=:masoud:\"font:fa fa-check:left:*\":\"font:fa fa-bell:left:*\""` |
### Join Pipe
| Name | join |
|------------|------------------------------------------------------------------|
| Exports | JoinPipe |
| Exported by| CommonPipesModule |
| Description| For a given source array, will join array elements into one single delineated string. |
| Options | 1) the characters used to join the list |
| Example 1 | `myDateList | into:myDateFormat | into:'join: , '` |
### Map Pipe
| Name | map |
|------------|------------------------------------------------------------------|
| Exports | MapPipe |
| Exported by| CommonPipesModule |
| Description| Will convert a source into a map. |
| Options | 1) take a source as a key and returns value of key from the given map argument |
| Example 1 | `'key1;value1/key2;value2/key3;value3' | into:map` |
### Mask Sensitive content Pipe
| Name | mask |
|------------|------------------------------------------------------------------|
| Exports | MaskPipe |
| Exported by| CommonPipesModule |
| Description| Will mask sensitive characters. |
| Options | 1) last # number of characters to mask |
| | 2) optional masking character |
| Example 1 | `mySSN | into:'mask:4:*'` |
### Prepend Pipe
| Name | prepend |
|------------|------------------------------------------------------------------|
| Exports | PrependPipe |
| Exported by| CommonPipesModule |
| Description| Prepends a string to source. |
| Options | 1) pre-pending string |
| Example 1 | `'xyz' | into:'prepend:*'` |
### Sanitize HTML Pipe
| Name | sanitizeHtml |
|------------|------------------------------------------------------------------|
| Exports | AanitizeHtmlPipe |
| Exported by| CommonPipesModule |
| Description| Will bypass security checks against CORS in a URL. |
| Options | NONE (This pipe is not used by into pipe) |
| Example 1 | `'xyz' | into:'prepend:*' | sanitizeHtml` |
### ValueOf Pipe
| Name | valueof |
|------------|------------------------------------------------------------------|
| Exports | ValueOfPipe |
| Exported by| CommonPipesModule |
| Description| Will traverse through a JSON path and display its value. |
| Options | 1) key to be used |
| Example 1 | `myJson | into:'valueof:birthday'` |
### Wrap Pipe
| Name | wrap |
|------------|------------------------------------------------------------------|
| Exports | WrapPipe |
| Exported by| CommonPipesModule |
| Description| Will wrap source with given strings. |
| Options | 1) pre-pending string |
| | 2) appending string. if appending string is not supplied, pre-pending string will be used. |
| Example 1 | `'xyz' | into:'wrap:*'` |
## Angular/Common Pipes
### Currency Format Pipe
| Name | currency |
|------------|------------------------------------------------------------------|
| Exports | CurrencyPipe |
| Exported by| CommonPipesModulesModule |
| Description| Will convert a source into a currency. |
| Options | 1) optional local |
| Example 1 | `'25' | into:'currency:en_US'` |
### Lowercase Pipe
| Name | lowercase |
|------------|------------------------------------------------------------------|
| Exports | LowerCasePipe |
| Exported by| CommonPipesModulesModule |
| Description| Will lower-case the source. |
| Options | NONE |
| Example 1 | `'TRY THIS' | into:'lowercase'` |
### Number Format Pipe
| Name | number |
|------------|------------------------------------------------------------------|
| Exports | DecimalPipe |
| Exported by| CommonPipesModulesModule |
| Description| Will format a number into a formatted number. |
| Options | 1) optional local |
| | 2) optional decimal points |
| Example 1 | `'25.34537664' | into:'number:en_US:2` |
### Date Format Pipe
| Name | date |
|------------|------------------------------------------------------------------|
| Exports | DatePipe |
| Exported by| CommonPipesModulesModule |
| Description| Will format the source date. |
| Options | 1) optional local |
| | 2) optional format |
| Example 1 | `myDate | into:'date:en_US:MMDDYY'` |
| Example 2 | `myDate | into:'date:MMDDYY'` |
### Slice and dice Pipe
| Name | slice |
|------------|------------------------------------------------------------------|
| Exports | SlicePipe |
| Exported by| CommonPipesModulesModule |
| Description| Will suck a portion of source out of it. |
| Options | 1) from index |
| | 2) optional to index |
| Example 1 | `'slice this text for me' | into:'slice:4:8'` |
### Uppercase Pipe
| Name | uppercase |
|------------|------------------------------------------------------------------|
| Exports | UppercasePipe |
| Exported by| CommonPipesModulesModule |
| Description| Will upper-case the source. |
| Options | NONE |
| Example 1 | `'try this' | into:'uppercase'` |
### Json Pipe
| Name | uppercase |
|------------|------------------------------------------------------------------|
| Exports | JsonPipe |
| Exported by| CommonPipesModulesModule |
| Description| Will format JSON into read-able source. |
| Options | NONE |
| Example 1 | `myData | into:json` |
## Usage Examples
### Sample usage of directives
```javascript
// intoName, intoId, intoData, and onComponentChange are optional
<td scope="row"
[rawContent]="item.ssn"
[into]="input:mask"
[intoName]="SSN"
[intoId]="'ssn-' + i"
[intoData]="{x:'something',y:'whatever'}"
[onComponentChange]="onTableCellEdit.bind(this)"></td>
```
### Sample on how to import parts of this library
```javascript
// lets say you only want video and audio pipes and nothing else
// then **instead of importing IntoPipeModule**, you would need to
// only import the following:
@NgModule({
imports: [
...
CommonPipesModule.forRoot(), // absolutely necessary
AudioIntoPipeModule.forRoot(), // as needed
VideoIntoPipeModule.forRoot(), // as needed
...
],
declarations: [
...
],
exports: [
...
],
entryComponents: [
...
],
providers: [
...
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyApplicationModule {
}
```
### Sample registration for a service to be used by a pipe component
```javascript
// You will have to make sure to add your custom service in NgModel of your
// application under providers.
constructor(private pool: ComponentPool, private myService: MySelectService) {
this.pool.registerServiceForComponent("select", myService);
}
```
### Sample creating a Custom pipe component
```javascript
import { Component, Output, EventEmitter } from '@angular/core';
import { PipeComponentInterface } from 'into-pipes';
@Component({
selector: 'my-custom-component',
template: `html tags for custom component here`,
styles: [
`css classes for custom component here
`
]
})
export class MyCustomInputComponent implements PipeComponentInterface {
source: string;
name: string;
id: string;
disabled = false;
active = true;
validate = (item: any, newValue: any) => true;
@Output("onIntoComponentChange")
onIntoComponentChange = new EventEmitter();
transform(source: any, data: any, args: any[]) {
this.source = source;
// do some other stuff here...
}
onSomeKindOfEvent(event) {
this.source = event.target.value;
this.onIntoComponentChange.emit({
id: this.id,
name: this.name,
value: this.source
});
}
}
// Registering my custom component. You will have to make sure
// to add your custom component in NgModel of your application
// under declarations and entryComponents.
import { ComponentPool } from 'into-pipes';
my component definition ....
constructor(private pool:ComponentPool) {
this.pool.registerComponent("input", MyCustomInputComponent);
}
```
### Sample creating a Custom pipe
```javascript
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'donifty' })
export class MyCustomPipe implements PipeTransform {
static transformationMethod() {
// lambda is not allowed on static methods.
// you need to declare function() and return it.
// classical function declarations only.
const x = function (content: any, args: string[], callback?: any, data?: any) {
// append:something
return new MyCustomPipe().transform(content, args.length > 1 ? args[1] : "");
};
return x;
}
transform(source: any, ...args: any[]): any {
const key = ((args && args.length) ? args[0] : "");
if ((typeof source === "string") || !(source instanceof Array)) {
// do something
return doSomething(source);
} else {
const result = [];
source.map((item) => {
result.push(doSomething(item));
});
return result;
}
}
private doSomething(item) {
return stringSomeString;
}
}
// You will then need to register your pipe
constructor(private pool: ComponentPool) {
pool.registerPipeTransformation('donifty', MyCustomPipe.transformationMethod());
}
```
### Custom component registration API
```javascript
// register a pipe
registerPipeTransformation (name: string, pipe: any)
registeredForPipeTransformationNamed(key: string)
registeredPipeTransformation(key: string, content: any, args: string[], callback?: any, data?: any)
removePipeTransformation (key: string)
// register a pipe component
registerComponent (name, component: any)
removeComponent (name)
registeredComponent(name): any
// register a service to be accessed by a pipe component
registerServiceForComponent (name, service: any)
removeServiceForComponent (name)
registeredServiceForComponent(name): any
```
# Revision History
| Version | |
|---------|----------------------------------------------------------------------------------------------------------|
| 4.5.1/2 | Added design style on focus for focussable pipes. |
| 4.5.0 | Added Design system to allow for easy modification of styling of into components. |
| 4.4.4 | fixed checkbox logic by adding one more parameter