Carousel Component allows moving back and forth through a set of child elements. Carousel Component leverages the Swap Component to render the transition between items.

Demo must show all components implemented on the moment of release.

Fade Effect manages opacity style property to reach faddiness of element.

Modal Manager controls the display of the provided element while also creating a dark backdrop on the page. Any element used should have a fixed position, a z-index greater than 1040, and an initial display of none.

Dropdown Component content is inferred from all child elements that have class dropdown-menu. Bootstrap defines a CSS selector for .dropdown-menu with an initial display of none.
Dropdown Component listens for click events and toggles visibility of content if the click target has attribute data-toggle="dropdown".
Bootstrap also defines a CSS selector which sets display: block; for elements matching .open > .dropdown-menu. When Dropdown Component opens, the class open is added to the inner element wrapping all content. Causing child elements with class dropdown-menu to become visible.

02 12 2015 08:48:12.698:WARN [web-server]: 404: /angular2/src/core/dom/browser_adapter
Chrome 46.0.2490 (Windows 7 0.0.0) ERROR
Error: XHR error (404 Not Found) loading http://localhost:9876/angular2/src/core/dom/browser_adapter

Slide Effect displays en Html Element with sliding motion.

Scale Effect changes the size of an Html Element with -webkit-transform-origin.

CSS3 Transition Effect extends Visual Effect class to change transitionProperty and 'transitionDuration' of an Html Element to make an animation happens.

The Modal Component leverages the Modal Effect.
Modal Component is hidden when added to a page. It can be displayed by calling the show method.
Similar to Alert Component, elements with the attribute data-dismiss="modal" will close Modal Component when clicked.

Collapsible Component uses Visible Effect and Shrink Effect to reach collapses of an Html Element. The header element for Collapse Component is a child element with class accordion-heading. The rest of the children are rendered as content. Collapse Component listens for click events and toggles visibility of content if the click target has attribute data-toggle="collapse".

CSS 3 Effects is name based enumeration of CSS 3 effect like:

• linear
• ease
• ease-in
• ease-in-out
• ease-out

Door Effect changes -webkit-transform style property of an Html Element.

Visible Effect Manager provide following methods:

• show,
• hide,
• toggle,
• begin
  to change element's display accordingly.

Custom effects, duration, and easing values can be provided via begin method.

Visible Component has two states:

• visible
• 'invisible. Following methods help to make anyVisible Component` to be visible or hidden:
• show
• hide
• toggle

Swap Component designed to be composed by other components. It exposes the functionality of the Swap Effect as a simple container element with corresponding methods to swap between child elements via code. Tabs Component and Carousel Component both use this component.

Shrink Effect plays with max-height and max-width of an Html Element to shrink it.

TSC generate next issues:

src\components\visible-component.spec.ts(31,35): error TS2339: Property 'toRx' does not exist on type 'EventEmitter<string>'.
src\components\visible-component.spec.ts(41,35): error TS2339: Property 'toRx' does not exist on type 'EventEmitter<string>'.
src\components\visible-component.spec.ts(51,35): error TS2339: Property 'toRx' does not exist on type 'EventEmitter<string>'.

Tabs Component is togglable tabs. The tab headers are processed as all child <li> elements in content. The rest of the child elements are considered tab content. Tabs Component responds to click events from any child with data-toggle="tab" or data-toggle="pill". The target content id is either the value of data-target on the clicked element or the anchor in href.

Accordion Component wraps a set of Collapsible Components.

Visible Effect changes element's display to make it visible or hidden after specific amout of time

Spin Effect helps organize rotation effect on an Html Element with -webkit-transform

Alert Component displays information marked as:

• alert-success,
• alert-info,
• alert-warning,
• alert-danger.
  Clicking on a nested element with the attribute data-dismiss='alert' will cause Alert Component to close.