@sedeh/into-pipes v4.5.3

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

See it in action through Live Demo

pull it from NPM

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.

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.

: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

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

Sample use of directive

    // 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

Audio Directive

Calendar Directive

Checkbox Directive

Email Directive

Font Awesome Directive

Image Display Directive

Input Directive

Input Group Directive

JSON Format Directive

Last Update Directive

Social Like Directive

Link Directive

Notice Directive

Phone Format Directive

Social Rating Directive

Select Directive

Slider Directive

Social Share Directive

Span Directive

Switch Directive

Table Directive

Textarea Directive

Toggler Directive

Video Directive

Common Pipes

Append Pipe

Conditional If Else Pipe

Join Pipe

Map Pipe

Mask Sensitive content Pipe

Prepend Pipe

Sanitize HTML Pipe

ValueOf Pipe

Wrap Pipe

Angular/Common Pipes

Currency Format Pipe

Lowercase Pipe

Number Format Pipe

Date Format Pipe

Slice and dice Pipe

Uppercase Pipe

Json Pipe

Usage Examples

Sample usage of directives

    // 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

    // 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

	// 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

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

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

	// 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

NOTE: Attributes passed in represented image above are defined as:

  threeFive = 3.5;
  myJson= {q:3,w:43,dw:6565};
  myPickDate = new Date();
  myDate = "2018-03-10T01:01:20Z";
  myDateList = ["2018-03-10T01:01:20Z", "2011-02-12T01:01:20Z"];
  myDateFormat="date:\"MM/dd/yyyy hh:ss\"";
  theURL = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?h=350&auto=compress&cs=tinysrgb";
  videoURL = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4";
  audioURL = "https://google.github.io/tacotron/publications/tacotron2/demos/gan_or_vae.wav";

  myConditionalLogic = "if:=:masoud:\"font:fa fa-check:left:*\":\"font:fa fa-bell:left:*\"";
  myConditionalThreeFive = "if:>:3:\"font:fa fa-check:replace\":\"font:fa fa-bell:replace\"";

  myLastUpdatedDate = new Date(Date.now() - 640000);

  dataSet = {
    id: 3453453453,
    likes: 10,
    dislikes: 5
  }
  myaddress = {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  };

How to include font-awesome in your project?

In your project root folder, find and open the file 'angular-cli.json' in any editor Locate the styles[] array and add font-awesome references directory. like:

"apps": 
	[
        {
            ....
            "styles": [
              "../node_modules/font-awesome/css/font-awesome.css"
              "styles.css"
            ],
            ...
        }
    ]