fix(upgrade): fix transclusion on upgraded components (#17971)

Previously, only simple, single-slot transclusion worked on upgraded components.
This commit fixes/adds support for the following:

- Multi-slot transclusion.
- Using fallback content when no transclusion content is provided.
- Destroy unused scope (when using fallback content).

Fixes #13271

packages/upgrade/src/common/angular1.ts

@@ -33,6 +33,7 @@ export interface ICompileService {
 }
 export interface ILinkFn {
   (scope: IScope, cloneAttachFn?: ICloneAttachFunction, options?: ILinkFnOptions): IAugmentedJQuery;
+  $$slots?: {[slotName: string]: ILinkFn};
 }
 export interface ILinkFnOptions {
   parentBoundTranscludeFn?: Function;
@@ -75,9 +76,10 @@ export interface IDirective {
   templateUrl?: string|Function;
   templateNamespace?: string;
   terminal?: boolean;
-  transclude?: boolean|'element'|{[key: string]: string};
+  transclude?: DirectiveTranscludeProperty;
 }
 export type DirectiveRequireProperty = SingleOrListOrMap<string>;
+export type DirectiveTranscludeProperty = boolean | 'element' | {[key: string]: string};
 export interface IDirectiveCompileFn {
   (templateElement: IAugmentedJQuery, templateAttributes: IAttributes,
    transclude: ITranscludeFunction): IDirectivePrePost;
@@ -97,7 +99,7 @@ export interface IComponent {
   require?: DirectiveRequireProperty;
   template?: string|Function;
   templateUrl?: string|Function;
-  transclude?: boolean;
+  transclude?: DirectiveTranscludeProperty;
 }
 export interface IAttributes { $observe(attr: string, fn: (v: string) => void): void; }
 export interface ITranscludeFunction {

packages/upgrade/src/common/util.ts

@@ -9,6 +9,9 @@
 import {Type} from '@angular/core';
 import * as angular from './angular1';
 
+const DIRECTIVE_PREFIX_REGEXP = /^(?:x|data)[:\-_]/i;
+const DIRECTIVE_SPECIAL_CHARS_REGEXP = /[:\-_]+(.)/g;
+
 export function onError(e: any) {
   // TODO: (misko): We seem to not have a stack trace here!
   if (console.error) {
@@ -24,6 +27,11 @@ export function controllerKey(name: string): string {
   return '$' + name + 'Controller';
 }
 
+export function directiveNormalize(name: string): string {
+  return name.replace(DIRECTIVE_PREFIX_REGEXP, '')
+      .replace(DIRECTIVE_SPECIAL_CHARS_REGEXP, (_, letter) => letter.toUpperCase());
+}
+
 export function getAttributesAsArray(node: Node): [string, string][] {
   const attributes = node.attributes;
   let asArray: [string, string][] = undefined !;