feat(common): add camelcase and kebabcase pipes

packages/common/src/common.ts

@@ -22,7 +22,7 @@ export {parseCookieValue as ɵparseCookieValue} from './cookie';
 export {CommonModule} from './common_module';
 export {NgClass, NgClassBase, NgForOf, NgForOfContext, NgIf, NgIfContext, NgPlural, NgPluralCase, NgStyle, NgStyleBase, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgComponentOutlet} from './directives/index';
 export {DOCUMENT} from './dom_tokens';
-export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe, KeyValuePipe, KeyValue} from './pipes/index';
+export {AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, TitleCasePipe, KeyValuePipe, KeyValue, CamelCasePipe, KebabCasePipe} from './pipes/index';
 export {PLATFORM_BROWSER_ID as ɵPLATFORM_BROWSER_ID, PLATFORM_SERVER_ID as ɵPLATFORM_SERVER_ID, PLATFORM_WORKER_APP_ID as ɵPLATFORM_WORKER_APP_ID, PLATFORM_WORKER_UI_ID as ɵPLATFORM_WORKER_UI_ID, isPlatformBrowser, isPlatformServer, isPlatformWorkerApp, isPlatformWorkerUi} from './platform_id';
 export {VERSION} from './version';
 export {ViewportScroller, NullViewportScroller as ɵNullViewportScroller} from './viewport_scroller';

packages/common/src/pipes/case_conversion_pipes.ts

@@ -12,8 +12,10 @@ import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
 /**
  * Transforms text to all lower case.
  *
- * @see `UpperCasePipe`
  * @see `TitleCasePipe`
+ * @see `CamelCasePipe`
+ * @see `UpperCasePipe`
+ * @see `KebabCasePipe`
  * @usageNotes
  *
  * The following example defines a view that allows the user to enter
@@ -57,7 +59,9 @@ const unicodeWordMatch =
  * Words are delimited by any whitespace character, such as a space, tab, or line-feed character.
  *
  * @see `LowerCasePipe`
+ * @see `CamelCasePipe`
  * @see `UpperCasePipe`
+ * @see `KebabCasePipe`
  *
  * @usageNotes
  * The following example shows the result of transforming various strings into title case.
@@ -87,7 +91,8 @@ export class TitleCasePipe implements PipeTransform {
  * Transforms text to all upper case.
  * @see `LowerCasePipe`
  * @see `TitleCasePipe`
- *
+ * @see `CamelCasePipe`
+ * @see `KebabCasePipe`
  * @ngModule CommonModule
  * @publicApi
  */
@@ -104,3 +109,80 @@ export class UpperCasePipe implements PipeTransform {
     return value.toUpperCase();
   }
 }
+
+/**
+ * Transforms text to all camel case.
+ * 
+ * @see `LowerCasePipe`
+ * @see `TitleCasePipe`
+ * @see `UpperCasePipe`
+ * @see `KebabCasePipe`
+ * 
+ * 
+ * @usageNotes
+ * The following example shows the result of transforming various strings into kebab case.
+ *
+ * <code-example path="common/pipes/ts/camelkebab_pipe.ts" region='CamelKebabPipe'></code-example>
+ * 
+ * @ngModule CommonModule
+ * @publicApi
+ */
+
+@Pipe({name: 'camelcase'})
+export class CamelCasePipe implements PipeTransform {
+  /**
+   * @param value The string to transform to camelCase
+   * @param separator The char to split the words for camelCase. If no separator provided, by
+   * defualt space will be used to split the words.
+   *
+   */
+  transform(value: string, separator?: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw invalidPipeArgumentError(CamelCasePipe, value);
+    }
+    const words = value.split(separator ? separator : ' ');
+    const camelCaseWords = words.map((word, index) => {
+      return index === 0 ? word.toLowerCase() :
+                           word[0].toUpperCase() + word.substr(1).toLowerCase();
+    });
+    return camelCaseWords.join('');
+  }
+}
+
+/**
+ * Transforms text to all kebab-case.
+ *
+ * @see `LowerCasePipe`
+ * @see `TitleCasePipe`
+ * @see `UpperCasePipe`
+ * @see `CamelCasePipe`
+ * 
+ * 
+ * @usageNotes
+ * The following example shows the result of transforming various strings into kebab case.
+ *
+ * <code-example path="common/pipes/ts/camelkebab_pipe.ts" region='CamelKebabPipe'></code-example>
+ * 
+ * @ngModule CommonModule
+ * @publicApi
+ */
+
+@Pipe({name: 'kebabCase'})
+export class KebabCasePipe implements PipeTransform {
+  /**
+   * @param value The string to transform to kebab-case
+   * @param separator The char to split the words for kebabCase. If no separator provided, by
+   * defualt space will be used to split the words.
+   *
+   */
+  transform(value: string, separator?: string): string {
+    if (!value) return value;
+    if (typeof value !== 'string') {
+      throw invalidPipeArgumentError(KebabCasePipe, value);
+    }
+    const words = value.split(separator ? separator : ' ');
+    const lowerCaseWords = words.map((word) => word.toLowerCase());
+    return lowerCaseWords.join('-');
+  }
+}

packages/common/src/pipes/index.ts

@@ -12,7 +12,7 @@
  * This module provides a set of common Pipes.
  */
 import {AsyncPipe} from './async_pipe';
-import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from './case_conversion_pipes';
+import {CamelCasePipe, KebabCasePipe, LowerCasePipe, TitleCasePipe, UpperCasePipe} from './case_conversion_pipes';
 import {DatePipe} from './date_pipe';
 import {I18nPluralPipe} from './i18n_plural_pipe';
 import {I18nSelectPipe} from './i18n_select_pipe';
@@ -36,6 +36,8 @@ export {
   SlicePipe,
   TitleCasePipe,
   UpperCasePipe,
+  CamelCasePipe,
+  KebabCasePipe,
 };
 
 
@@ -56,4 +58,6 @@ export const COMMON_PIPES = [
   I18nPluralPipe,
   I18nSelectPipe,
   KeyValuePipe,
+  CamelCasePipe,
+  KebabCasePipe,
 ];

packages/common/test/pipes/case_conversion_pipes_spec.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
+import {CamelCasePipe, LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
+import {KebabCasePipe} from '@angular/common/src/pipes/case_conversion_pipes';
 
 {
   describe('LowerCasePipe', () => {
@@ -85,4 +86,44 @@ import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
     it('should not support other objects',
        () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
   });
+
+  describe('CamelCasePipe', () => {
+    let pipe: CamelCasePipe;
+
+    beforeEach(() => { pipe = new CamelCasePipe(); });
+
+    it('should return camelcase', () => { expect(pipe.transform('foo bar')).toEqual('fooBar'); });
+
+    it('should camelcase when there is a new value',
+       () => { expect(pipe.transform('foo bar')).toEqual('fooBar'); });
+
+    it('should camelcase when there is a new value',
+       () => { expect(pipe.transform('foo-bar', '-')).toEqual('fooBar'); });
+
+    it('should camelcase when there is a new value',
+       () => { expect(pipe.transform('foo*bar', '*')).toEqual('fooBar'); });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
+
+  describe('KebabCasePipe', () => {
+    let pipe: KebabCasePipe;
+
+    beforeEach(() => { pipe = new KebabCasePipe(); });
+
+    it('should return kebabCase', () => { expect(pipe.transform('foo bar')).toEqual('foo-bar'); });
+
+    it('should kebabCase when there is a new value',
+       () => { expect(pipe.transform('foo bar')).toEqual('foo-bar'); });
+
+    it('should kebabCase when there is a new value',
+       () => { expect(pipe.transform('FOO-BAR', '-')).toEqual('foo-bar'); });
+
+    it('should kebabCase when there is a new value',
+       () => { expect(pipe.transform('foo*bar', '*')).toEqual('foo-bar'); });
+
+    it('should not support other objects',
+       () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
+  });
 }

packages/examples/common/pipes/ts/camelkebab_pipe.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+// #docregion CamelKebabPipe
+@Component({
+  selector: 'camelkebab-pipe',
+  template: `<div>
+    Type some texts in to the below textbox. Also input a separator in the separator char box if require.
+    <label>Texts: </label> <input #texts (keyup)="change(texts.value)" type="text" value="JIT-HIL">
+    <label>Separator: </label> <input #separator (keyup)="changeSeparator(separator.value)" type="text" value="-">
+    <p>In camelcase: <pre>'{{value | camelcase: separator}}'</pre>
+    <p>In uppercase: <pre>'{{value | kebabCase: separator}}'</pre>
+  </div>`
+})
+export class CamelKebabPipeComponent {
+  value: string = '';
+  separator: string = '';
+  change(value: string) { this.value = value; }
+  changeSeparator(value: string) { this.separator = value; }
+}
+// #enddocregion

packages/examples/common/pipes/ts/module.ts

@@ -10,6 +10,7 @@ import {Component, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe';
+import {CamelKebabPipeComponent} from './camelkebab_pipe';
 import {CurrencyPipeComponent, DeprecatedCurrencyPipeComponent} from './currency_pipe';
 import {DatePipeComponent, DeprecatedDatePipeComponent} from './date_pipe';
 import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe';
@@ -57,19 +58,36 @@ import {TitleCasePipeComponent} from './titlecase_pipe';
 
     <h2><code>keyvalue</code></h2>
     <keyvalue-pipe></keyvalue-pipe>
+    
+    <h2><code>keyvalue</code></h2>
+    <camelkebab-pipe></camelkebab-pipe>
   `
 })
 export class AppComponent {
 }
 
 @NgModule({
   declarations: [
-    AsyncPromisePipeComponent, AsyncObservablePipeComponent, AppComponent, JsonPipeComponent,
-    DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, TitleCasePipeComponent,
-    NumberPipeComponent, DeprecatedNumberPipeComponent, PercentPipeComponent,
-    DeprecatedPercentPipeComponent, CurrencyPipeComponent, DeprecatedCurrencyPipeComponent,
-    SlicePipeStringComponent, SlicePipeListComponent, I18nPluralPipeComponent,
-    I18nSelectPipeComponent, KeyValuePipeComponent
+    AsyncPromisePipeComponent,
+    AsyncObservablePipeComponent,
+    AppComponent,
+    JsonPipeComponent,
+    DatePipeComponent,
+    DeprecatedDatePipeComponent,
+    LowerUpperPipeComponent,
+    TitleCasePipeComponent,
+    NumberPipeComponent,
+    DeprecatedNumberPipeComponent,
+    PercentPipeComponent,
+    DeprecatedPercentPipeComponent,
+    CurrencyPipeComponent,
+    DeprecatedCurrencyPipeComponent,
+    SlicePipeStringComponent,
+    SlicePipeListComponent,
+    I18nPluralPipeComponent,
+    I18nSelectPipeComponent,
+    KeyValuePipeComponent,
+    CamelKebabPipeComponent
   ],
   imports: [BrowserModule],
 })