@nebular/theme - npm Package Compare versions

Comparing version 2.0.0-rc.8 to 2.0.0-rc.9

components/actions/actions.component.d.ts

@@ -37,5 +37,26 @@ /**
 /**
- * Shows a horizontal list of actions, available in multiple sizes
+ * Shows a horizontal list of actions, available in multiple sizes.
  * Aligns items vertically.
  *
+ * @stacked-example(Showcase, action/action-showcase.component)
+ *
+ * Basic actions setup:
+ * ```html
+ * <nb-actions size="small">
+ *   <nb-action icon="nb-search"></nb-action>
+ *   <nb-action icon="nb-power-circled"></nb-action>
+ *   <nb-action icon="nb-person"></nb-action>
+ * </nb-actions>
+ * ```
+ *
+ * Multiple sizes example:
+ * @stacked-example(Multiple Sizes, action/action-sizes.component)
+ *
+ * It is also possible to specify a `badge` value:
+ *
+ * @stacked-example(Action Badge, action/action-badge.component)
+ *
+ * and we can set it to full a width of a parent component
+ * @stacked-example(Full Width, action/action-width.component)
+ *
  * @styles
@@ -42,0 +63,0 @@ *

components/actions/actions.component.js

@@ -45,5 +45,26 @@ /**
 /**
- * Shows a horizontal list of actions, available in multiple sizes
+ * Shows a horizontal list of actions, available in multiple sizes.
  * Aligns items vertically.
  *
+ * @stacked-example(Showcase, action/action-showcase.component)
+ *
+ * Basic actions setup:
+ * ```html
+ * <nb-actions size="small">
+ *   <nb-action icon="nb-search"></nb-action>
+ *   <nb-action icon="nb-power-circled"></nb-action>
+ *   <nb-action icon="nb-person"></nb-action>
+ * </nb-actions>
+ * ```
+ *
+ * Multiple sizes example:
+ * @stacked-example(Multiple Sizes, action/action-sizes.component)
+ *
+ * It is also possible to specify a `badge` value:
+ *
+ * @stacked-example(Action Badge, action/action-badge.component)
+ *
+ * and we can set it to full a width of a parent component
+ * @stacked-example(Full Width, action/action-width.component)
+ *
  * @styles
@@ -50,0 +71,0 @@ *

components/actions/actions.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbActionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"nb-action","template":"\n    <a class=\"icon-container\" href=\"#\" *ngIf=\"icon; else showContent\" (click)=\"$event.preventDefault()\">\n      <i class=\"control-icon {{ icon }}\"></i>\n    </a>\n    <ng-template #showContent>\n      <ng-content></ng-content>\n    </ng-template>\n    <nb-badge *ngIf=\"badgeText\" [text]=\"badgeText\" [status]=\"badgeStatus\" [position]=\"badgePosition\"></nb-badge>\n  "}]}],"members":{"disabledValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":31,"character":3},"arguments":["class.disabled"]}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"badgeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"badgeStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"badgePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}]}},"NbActionsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":89,"character":1},"arguments":[{"selector":"nb-actions","styleUrls":["./actions.component.css"],"template":"\n    <ng-content select=\"nb-action\"></ng-content>\n  "}]}],"members":{"inverseValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":104,"character":3},"arguments":["class.inverse"]}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":106,"character":3},"arguments":["class.small"]}]}],"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":111,"character":3},"arguments":["class.medium"]}]}],"large":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":116,"character":3},"arguments":["class.large"]}]}],"fullWidthValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":121,"character":3},"arguments":["class.full-width"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"inverse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":3}}]}]},"statics":{"SIZE_SMALL":"small","SIZE_MEDIUM":"medium","SIZE_LARGE":"large"}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbActionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"nb-action","template":"\n    <a class=\"icon-container\" href=\"#\" *ngIf=\"icon; else showContent\" (click)=\"$event.preventDefault()\">\n      <i class=\"control-icon {{ icon }}\"></i>\n    </a>\n    <ng-template #showContent>\n      <ng-content></ng-content>\n    </ng-template>\n    <nb-badge *ngIf=\"badgeText\" [text]=\"badgeText\" [status]=\"badgeStatus\" [position]=\"badgePosition\"></nb-badge>\n  "}]}],"members":{"disabledValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":31,"character":3},"arguments":["class.disabled"]}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"badgeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"badgeStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"badgePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}]}},"NbActionsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":110,"character":1},"arguments":[{"selector":"nb-actions","styleUrls":["./actions.component.css"],"template":"\n    <ng-content select=\"nb-action\"></ng-content>\n  "}]}],"members":{"inverseValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":125,"character":3},"arguments":["class.inverse"]}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":127,"character":3},"arguments":["class.small"]}]}],"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":132,"character":3},"arguments":["class.medium"]}]}],"large":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":137,"character":3},"arguments":["class.large"]}]}],"fullWidthValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":142,"character":3},"arguments":["class.full-width"]}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":3}}]}],"inverse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":3}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":3}}]}]},"statics":{"SIZE_SMALL":"small","SIZE_MEDIUM":"medium","SIZE_LARGE":"large"}}}}]

components/badge/badge.component.d.ts

@@ -12,11 +12,14 @@ import { NbLayoutDirectionService } from '../../services/direction.service';
  *
- * @example Badge with default position and status(color):
+ * Badge with default position and status(color):
  *
- * ```
+ * ```html
  * <nb-badge text="badgeText"></nb-badge>
  * ```
  *
- * @example Badge located on the bottom right with warning status:
+ * For example, badge can be placed into nb-card header:
+ * @stacked-example(Showcase, badge/badge-showcase.component)
  *
- * ```
+ * Badge located on the bottom right with warning status:
+ *
+ * ```html
  * <nb-badge text="badgeText" status="warning" position="bottom right">
@@ -23,0 +26,0 @@ * </nb-badge>

components/badge/badge.component.js

@@ -18,11 +18,14 @@ /**
  *
- * @example Badge with default position and status(color):
+ * Badge with default position and status(color):
  *
- * ```
+ * ```html
  * <nb-badge text="badgeText"></nb-badge>
  * ```
  *
- * @example Badge located on the bottom right with warning status:
+ * For example, badge can be placed into nb-card header:
+ * @stacked-example(Showcase, badge/badge-showcase.component)
  *
- * ```
+ * Badge located on the bottom right with warning status:
+ *
+ * ```html
  * <nb-badge text="badgeText" status="warning" position="bottom right">
@@ -29,0 +32,0 @@ * </nb-badge>

components/badge/badge.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbBadgeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":41,"character":1},"arguments":[{"selector":"nb-badge","styleUrls":["./badge.component.css"],"template":"\n    <span class=\"nb-badge {{positionClass}} nb-badge-{{colorClass}}\">{{text}}</span>\n  "}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services/direction.service","name":"NbLayoutDirectionService","line":108,"character":46}]}]},"statics":{"TOP_LEFT":"top left","TOP_RIGHT":"top right","BOTTOM_LEFT":"bottom left","BOTTOM_RIGHT":"bottom right","TOP_START":"top start","TOP_END":"top end","BOTTOM_START":"bottom start","BOTTOM_END":"bottom end","STATUS_PRIMARY":"primary","STATUS_INFO":"info","STATUS_SUCCESS":"success","STATUS_WARNING":"warning","STATUS_DANGER":"danger"}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbBadgeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":44,"character":1},"arguments":[{"selector":"nb-badge","styleUrls":["./badge.component.css"],"template":"\n    <span class=\"nb-badge {{positionClass}} nb-badge-{{colorClass}}\">{{text}}</span>\n  "}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services/direction.service","name":"NbLayoutDirectionService","line":111,"character":46}]}]},"statics":{"TOP_LEFT":"top left","TOP_RIGHT":"top right","BOTTOM_LEFT":"bottom left","BOTTOM_RIGHT":"bottom right","TOP_START":"top start","TOP_END":"top end","BOTTOM_START":"bottom start","BOTTOM_END":"bottom end","STATUS_PRIMARY":"primary","STATUS_INFO":"info","STATUS_SUCCESS":"success","STATUS_WARNING":"warning","STATUS_DANGER":"danger"}}}}]

components/card/card.component.d.ts

@@ -38,11 +38,26 @@ /**
  *
- * @example While this component can be used alone, it also provides a number
- * of child components for common card sections:
+ * Basic card example:
+ * @stacked-example(Showcase, card/card-showcase.component)
  *
+ * Basic card configuration:
+ *
+ * ```html
+ * <nb-card>
+ *   <nb-card-body>
+ *     Card
+ *   </nb-card-body>
+ * </nb-card>
  * ```
- * <nb-card-header></nb-card-header>
- * <nb-card-body></nb-card-body>
- * <nb-card-footer></nb-card-footer>
- * ```
+ * Card with header and footer:
+ * @stacked-example(With Header & Footer, card/card-full.component)
  *
+ * Colored cards could be simply configured by providing a `status` property:
+ * @stacked-example(Colored Card, card/card-colors.component)
+ *
+ * It is also possible to assign an `accent` property for a slight card highlight
+ * as well as combine it with `status`:
+ * @stacked-example(Accent Card, card/card-accents.component)
+ *
+ * @additional-example(Multiple Sizes, card/card-sizes.component)
+ *
  * @styles
@@ -49,0 +64,0 @@ *

components/card/card.component.js

@@ -74,11 +74,26 @@ /**
  *
- * @example While this component can be used alone, it also provides a number
- * of child components for common card sections:
+ * Basic card example:
+ * @stacked-example(Showcase, card/card-showcase.component)
  *
+ * Basic card configuration:
+ *
+ * ```html
+ * <nb-card>
+ *   <nb-card-body>
+ *     Card
+ *   </nb-card-body>
+ * </nb-card>
  * ```
- * <nb-card-header></nb-card-header>
- * <nb-card-body></nb-card-body>
- * <nb-card-footer></nb-card-footer>
- * ```
+ * Card with header and footer:
+ * @stacked-example(With Header & Footer, card/card-full.component)
  *
+ * Colored cards could be simply configured by providing a `status` property:
+ * @stacked-example(Colored Card, card/card-colors.component)
+ *
+ * It is also possible to assign an `accent` property for a slight card highlight
+ * as well as combine it with `status`:
+ * @stacked-example(Accent Card, card/card-accents.component)
+ *
+ * @additional-example(Multiple Sizes, card/card-sizes.component)
+ *
  * @styles
@@ -85,0 +100,0 @@ *

components/card/card.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbCardHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"nb-card-header","template":"<ng-content></ng-content>"}]}]},"NbCardBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"nb-card-body","template":"<ng-content></ng-content>"}]}]},"NbCardFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"nb-card-footer","template":"<ng-content></ng-content>"}]}]},"NbCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":89,"character":1},"arguments":[{"selector":"nb-card","styleUrls":["./card.component.css"],"template":"\n    <ng-content></ng-content>\n    <ng-content select=\"nb-card-header\"></ng-content>\n    <ng-content select=\"nb-card-body\"></ng-content>\n    <ng-content select=\"nb-card-footer\"></ng-content>\n  "}]}],"members":{"xxsmall":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":129,"character":3},"arguments":["class.xxsmall-card"]}]}],"xsmall":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":134,"character":3},"arguments":["class.xsmall-card"]}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":139,"character":3},"arguments":["class.small-card"]}]}],"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":144,"character":3},"arguments":["class.medium-card"]}]}],"large":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":149,"character":3},"arguments":["class.large-card"]}]}],"xlarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":154,"character":3},"arguments":["class.xlarge-card"]}]}],"xxlarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":159,"character":3},"arguments":["class.xxlarge-card"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":164,"character":3},"arguments":["class.active-card"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":169,"character":3},"arguments":["class.disabled-card"]}]}],"primary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":174,"character":3},"arguments":["class.primary-card"]}]}],"info":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":179,"character":3},"arguments":["class.info-card"]}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":184,"character":3},"arguments":["class.success-card"]}]}],"warning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":189,"character":3},"arguments":["class.warning-card"]}]}],"danger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":194,"character":3},"arguments":["class.danger-card"]}]}],"hasAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":199,"character":3},"arguments":["class.accent"]}]}],"primaryAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":204,"character":3},"arguments":["class.accent-primary"]}]}],"infoAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":209,"character":3},"arguments":["class.accent-info"]}]}],"successAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":214,"character":3},"arguments":["class.accent-success"]}]}],"warningAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":219,"character":3},"arguments":["class.accent-warning"]}]}],"dangerAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":224,"character":3},"arguments":["class.accent-danger"]}]}],"activeAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":229,"character":3},"arguments":["class.accent-active"]}]}],"disabledAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":234,"character":3},"arguments":["class.accent-disabled"]}]}],"setSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":244,"character":3},"arguments":["size"]}]}],"setStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":254,"character":3},"arguments":["status"]}]}],"setAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":264,"character":3},"arguments":["accent"]}]}]},"statics":{"SIZE_XXSMALL":"xxsmall","SIZE_XSMALL":"xsmall","SIZE_SMALL":"small","SIZE_MEDIUM":"medium","SIZE_LARGE":"large","SIZE_XLARGE":"xlarge","SIZE_XXLARGE":"xxlarge","STATUS_ACTIVE":"active","STATUS_DISABLED":"disabled","STATUS_PRIMARY":"primary","STATUS_INFO":"info","STATUS_SUCCESS":"success","STATUS_WARNING":"warning","STATUS_DANGER":"danger","ACCENT_ACTIVE":"active","ACCENT_DISABLED":"disabled","ACCENT_PRIMARY":"primary","ACCENT_INFO":"info","ACCENT_SUCCESS":"success","ACCENT_WARNING":"warning","ACCENT_DANGER":"danger"}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbCardHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"nb-card-header","template":"<ng-content></ng-content>"}]}]},"NbCardBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"nb-card-body","template":"<ng-content></ng-content>"}]}]},"NbCardFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":50,"character":1},"arguments":[{"selector":"nb-card-footer","template":"<ng-content></ng-content>"}]}]},"NbCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":104,"character":1},"arguments":[{"selector":"nb-card","styleUrls":["./card.component.css"],"template":"\n    <ng-content></ng-content>\n    <ng-content select=\"nb-card-header\"></ng-content>\n    <ng-content select=\"nb-card-body\"></ng-content>\n    <ng-content select=\"nb-card-footer\"></ng-content>\n  "}]}],"members":{"xxsmall":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":144,"character":3},"arguments":["class.xxsmall-card"]}]}],"xsmall":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":149,"character":3},"arguments":["class.xsmall-card"]}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":154,"character":3},"arguments":["class.small-card"]}]}],"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":159,"character":3},"arguments":["class.medium-card"]}]}],"large":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":164,"character":3},"arguments":["class.large-card"]}]}],"xlarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":169,"character":3},"arguments":["class.xlarge-card"]}]}],"xxlarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":174,"character":3},"arguments":["class.xxlarge-card"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":179,"character":3},"arguments":["class.active-card"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":184,"character":3},"arguments":["class.disabled-card"]}]}],"primary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":189,"character":3},"arguments":["class.primary-card"]}]}],"info":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":194,"character":3},"arguments":["class.info-card"]}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":199,"character":3},"arguments":["class.success-card"]}]}],"warning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":204,"character":3},"arguments":["class.warning-card"]}]}],"danger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":209,"character":3},"arguments":["class.danger-card"]}]}],"hasAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":214,"character":3},"arguments":["class.accent"]}]}],"primaryAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":219,"character":3},"arguments":["class.accent-primary"]}]}],"infoAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":224,"character":3},"arguments":["class.accent-info"]}]}],"successAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":229,"character":3},"arguments":["class.accent-success"]}]}],"warningAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":234,"character":3},"arguments":["class.accent-warning"]}]}],"dangerAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":239,"character":3},"arguments":["class.accent-danger"]}]}],"activeAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":244,"character":3},"arguments":["class.accent-active"]}]}],"disabledAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":249,"character":3},"arguments":["class.accent-disabled"]}]}],"setSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":259,"character":3},"arguments":["size"]}]}],"setStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":269,"character":3},"arguments":["status"]}]}],"setAccent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":279,"character":3},"arguments":["accent"]}]}]},"statics":{"SIZE_XXSMALL":"xxsmall","SIZE_XSMALL":"xsmall","SIZE_SMALL":"small","SIZE_MEDIUM":"medium","SIZE_LARGE":"large","SIZE_XLARGE":"xlarge","SIZE_XXLARGE":"xxlarge","STATUS_ACTIVE":"active","STATUS_DISABLED":"disabled","STATUS_PRIMARY":"primary","STATUS_INFO":"info","STATUS_SUCCESS":"success","STATUS_WARNING":"warning","STATUS_DANGER":"danger","ACCENT_ACTIVE":"active","ACCENT_DISABLED":"disabled","ACCENT_PRIMARY":"primary","ACCENT_INFO":"info","ACCENT_SUCCESS":"success","ACCENT_WARNING":"warning","ACCENT_DANGER":"danger"}}}}]

components/card/flip-card/flip-card.component.d.ts

 /**
- * Flip card component.
  *
- * ![image](assets/images/components/flip-card.gif)
+ * Flip card example:
+ * @stacked-example(Showcase, flip-card/flip-card-showcase.component)
  *
- * @example
+ * As a content Flip card accepts two instances of `nb-card` - for front and back sides.
  *
- * ```
+ * Basic flip card configuration:
+ *
+ * ```html
  * <nb-flip-card>
  *   <nb-card-front>
- *     <nb-card><nb-card-body>Front Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Front
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-front>
  *   <nb-card-back>
- *     <nb-card><nb-card-body>Back Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Back
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-back>
  * </nb-flip-card>
  * ```
+ *
+ * Flip Card with header and footer:
+ * @stacked-example(With Header & Footer, flip-card/flip-card-full.component.ts)
+ *
+ * Colored flip-cards could be simply configured by providing a `status` property:
+ * @stacked-example(Colored Card, flip-card/flip-card-colors.component)
+ *
+ * It is also possible to assign an `accent` property for a slight card highlight
+ * as well as combine it with `status`:
+ * @stacked-example(Accent Card, flip-card/flip-card-accents.component)
+ *
+ * @additional-example(Multiple Sizes, flip-card/flip-card-sizes.component)
+ *
  */
@@ -25,3 +48,8 @@ export declare class NbFlipCardComponent {
     flipped: boolean;
-    toggleFlip(): void;
+    /**
+     * Show/hide toggle button to be able to control toggle from your code
+     * @type {boolean}
+     */
+    showToggleButton: boolean;
+    toggle(): void;
 }

components/card/flip-card/flip-card.component.js

 import { Component, Input, HostBinding } from '@angular/core';
 /**
- * Flip card component.
  *
- * ![image](assets/images/components/flip-card.gif)
+ * Flip card example:
+ * @stacked-example(Showcase, flip-card/flip-card-showcase.component)
  *
- * @example
+ * As a content Flip card accepts two instances of `nb-card` - for front and back sides.
  *
- * ```
+ * Basic flip card configuration:
+ *
+ * ```html
  * <nb-flip-card>
  *   <nb-card-front>
- *     <nb-card><nb-card-body>Front Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Front
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-front>
  *   <nb-card-back>
- *     <nb-card><nb-card-body>Back Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Back
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-back>
  * </nb-flip-card>
  * ```
+ *
+ * Flip Card with header and footer:
+ * @stacked-example(With Header & Footer, flip-card/flip-card-full.component.ts)
+ *
+ * Colored flip-cards could be simply configured by providing a `status` property:
+ * @stacked-example(Colored Card, flip-card/flip-card-colors.component)
+ *
+ * It is also possible to assign an `accent` property for a slight card highlight
+ * as well as combine it with `status`:
+ * @stacked-example(Accent Card, flip-card/flip-card-accents.component)
+ *
+ * @additional-example(Multiple Sizes, flip-card/flip-card-sizes.component)
+ *
  */
@@ -27,4 +50,9 @@ var NbFlipCardComponent = /** @class */ (function () {
         this.flipped = false;
+        /**
+           * Show/hide toggle button to be able to control toggle from your code
+           * @type {boolean}
+           */
+        this.showToggleButton = true;
     }
-    NbFlipCardComponent.prototype.toggleFlip = function () {
+    NbFlipCardComponent.prototype.toggle = function () {
         this.flipped = !this.flipped;
@@ -36,3 +64,3 @@ };
                     styles: [":host{display:block;perspective:1200px;position:relative}:host.flipped .flipcard-body{transform:rotateY(180deg)}:host.flipped .flipcard-body .front-container .flip-button{opacity:0}:host .flipcard-body{display:flex;transition:transform 0.5s;transform-style:preserve-3d}:host .flipcard-body .front-container,:host .flipcard-body .back-container{backface-visibility:hidden;flex:1}:host .flipcard-body .front-container .flip-button,:host .flipcard-body .back-container .flip-button{cursor:pointer;position:absolute;right:0;bottom:0;opacity:1;transition:opacity 0s 0.15s}:host .flipcard-body .back-container{transform:rotateY(180deg)} "],
-                    template: "\n    <div class=\"flipcard-body\">\n      <div class=\"front-container\">\n        <ng-content select=\"nb-card-front\"></ng-content>\n        <a class=\"flip-button\" (click)=\"toggleFlip()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n      <div class=\"back-container\">\n        <ng-content select=\"nb-card-back\"></ng-content>\n        <a class=\"flip-button\" (click)=\"toggleFlip()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"flipcard-body\">\n      <div class=\"front-container\">\n        <ng-content select=\"nb-card-front\"></ng-content>\n        <a *ngIf=\"showToggleButton\" class=\"flip-button\" (click)=\"toggle()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n      <div class=\"back-container\">\n        <ng-content select=\"nb-card-back\"></ng-content>\n        <a *ngIf=\"showToggleButton\" class=\"flip-button\" (click)=\"toggle()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n    </div>\n  ",
                 },] },
@@ -43,2 +71,3 @@ ];
         "flipped": [{ type: Input }, { type: HostBinding, args: ['class.flipped',] },],
+        "showToggleButton": [{ type: Input },],
     };
@@ -45,0 +74,0 @@ return NbFlipCardComponent;

components/card/flip-card/flip-card.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbFlipCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"nb-flip-card","styleUrls":["./flip-card.component.css"],"template":"\n    <div class=\"flipcard-body\">\n      <div class=\"front-container\">\n        <ng-content select=\"nb-card-front\"></ng-content>\n        <a class=\"flip-button\" (click)=\"toggleFlip()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n      <div class=\"back-container\">\n        <ng-content select=\"nb-card-back\"></ng-content>\n        <a class=\"flip-button\" (click)=\"toggleFlip()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n    </div>\n  "}]}],"members":{"flipped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":46,"character":3},"arguments":["class.flipped"]}]}],"toggleFlip":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbFlipCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":43,"character":1},"arguments":[{"selector":"nb-flip-card","styleUrls":["./flip-card.component.css"],"template":"\n    <div class=\"flipcard-body\">\n      <div class=\"front-container\">\n        <ng-content select=\"nb-card-front\"></ng-content>\n        <a *ngIf=\"showToggleButton\" class=\"flip-button\" (click)=\"toggle()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n      <div class=\"back-container\">\n        <ng-content select=\"nb-card-back\"></ng-content>\n        <a *ngIf=\"showToggleButton\" class=\"flip-button\" (click)=\"toggle()\">\n          <i class=\"nb-arrow-dropleft\" aria-hidden=\"true\"></i>\n        </a>\n      </div>\n    </div>\n  "}]}],"members":{"flipped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":69,"character":3},"arguments":["class.flipped"]}]}],"showToggleButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"toggle":[{"__symbolic":"method"}]}}}}]

components/card/reveal-card/reveal-card.component.d.ts

 /**
- * Reveal card component.
  *
- * ![image](assets/images/components/reveal-card.gif)
+ * Reveal card example:
+ * @stacked-example(My example, reveal-card/reveal-card-showcase.component)
  *
- * @example
+ * As a content Reveal card accepts two instances of `nb-card` - for front and back sides.
  *
- * ```
+ * Basic reveal card configuration:
+ *
+ * ```html
  * <nb-reveal-card>
  *   <nb-card-front>
- *     <nb-card><nb-card-body>Front Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Front
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-front>
  *   <nb-card-back>
- *     <nb-card><nb-card-body>Back Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Back
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-back>
  * </nb-reveal-card>
  * ```
+ *
+ * Reveal Card with header and footer:
+ * @stacked-example(With Header & Footer, reveal-card/reveal-card-full.component)
+ *
+ * Colored reveal-cards could be simply configured by providing a `status` property:
+ * @stacked-example(Colored Card, reveal-card/reveal-card-colors.component)
+ *
+ * It is also possible to assign an `accent` property for a slight card highlight
+ * as well as combine it with `status`:
+ * @stacked-example(Accent Card, reveal-card/reveal-card-accents.component)
+ *
+ * @additional-example(Multiple Sizes, reveal-card/reveal-card-sizes.component)
  */
@@ -25,3 +47,8 @@ export declare class NbRevealCardComponent {
     revealed: boolean;
-    toggleReveal(): void;
+    /**
+     * Show/hide toggle button to be able to control toggle from your code
+     * @type {boolean}
+     */
+    showToggleButton: boolean;
+    toggle(): void;
 }

components/card/reveal-card/reveal-card.component.js

 import { Component, Input, HostBinding } from '@angular/core';
 /**
- * Reveal card component.
  *
- * ![image](assets/images/components/reveal-card.gif)
+ * Reveal card example:
+ * @stacked-example(My example, reveal-card/reveal-card-showcase.component)
  *
- * @example
+ * As a content Reveal card accepts two instances of `nb-card` - for front and back sides.
  *
- * ```
+ * Basic reveal card configuration:
+ *
+ * ```html
  * <nb-reveal-card>
  *   <nb-card-front>
- *     <nb-card><nb-card-body>Front Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Front
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-front>
  *   <nb-card-back>
- *     <nb-card><nb-card-body>Back Card</nb-card-body></nb-card>
+ *     <nb-card>
+ *       <nb-card-body>
+ *         Back
+ *       </nb-card-body>
+ *     </nb-card>
  *   </nb-card-back>
  * </nb-reveal-card>
  * ```
+ *
+ * Reveal Card with header and footer:
+ * @stacked-example(With Header & Footer, reveal-card/reveal-card-full.component)
+ *
+ * Colored reveal-cards could be simply configured by providing a `status` property:
+ * @stacked-example(Colored Card, reveal-card/reveal-card-colors.component)
+ *
+ * It is also possible to assign an `accent` property for a slight card highlight
+ * as well as combine it with `status`:
+ * @stacked-example(Accent Card, reveal-card/reveal-card-accents.component)
+ *
+ * @additional-example(Multiple Sizes, reveal-card/reveal-card-sizes.component)
  */
@@ -27,4 +49,9 @@ var NbRevealCardComponent = /** @class */ (function () {
         this.revealed = false;
+        /**
+           * Show/hide toggle button to be able to control toggle from your code
+           * @type {boolean}
+           */
+        this.showToggleButton = true;
     }
-    NbRevealCardComponent.prototype.toggleReveal = function () {
+    NbRevealCardComponent.prototype.toggle = function () {
         this.revealed = !this.revealed;
@@ -35,4 +62,4 @@ };
                     selector: 'nb-reveal-card',
-                    styles: [":host{display:block;position:relative}:host.revealed .second-card-container{top:0;transition:none}:host.revealed .second-card-container /deep/ nb-card-back{top:0}:host.revealed .reveal-button{transform:none}:host /deep/ nb-card-front{display:block;height:100%}:host .second-card-container{position:absolute;top:100%;right:0;left:0;overflow:hidden;transition:top 0s 0.5s}:host .second-card-container /deep/ nb-card-back{position:absolute;left:0;top:100%;width:100%;transition:top 0.5s}:host .reveal-button{cursor:pointer;position:absolute;right:0;bottom:0;transform:rotate(180deg);transition:transform 0.3s} "],
-                    template: "\n    <ng-content select=\"nb-card-front\"></ng-content>\n    <div class=\"second-card-container\">\n      <ng-content select=\"nb-card-back\"></ng-content>\n    </div>\n    <a class=\"reveal-button\" (click)=\"toggleReveal()\">\n      <i class=\"nb-arrow-dropdown\" aria-hidden=\"true\"></i>\n    </a>\n  ",
+                    styles: [":host{display:block;position:relative;overflow:hidden}:host.revealed .second-card-container{top:0;transition:none}:host.revealed .second-card-container /deep/ nb-card-back{top:0}:host.revealed .reveal-button{transform:none}:host /deep/ nb-card-front{display:block;height:100%}:host .second-card-container{position:absolute;top:100%;right:0;left:0;overflow:hidden;transition:top 0s 0.5s}:host .second-card-container /deep/ nb-card-back{position:absolute;left:0;top:100%;width:100%;transition:top 0.5s}:host .reveal-button{cursor:pointer;position:absolute;right:0;bottom:0;transform:rotate(180deg);transition:transform 0.3s} "],
+                    template: "\n    <ng-content select=\"nb-card-front\"></ng-content>\n    <div class=\"second-card-container\">\n      <ng-content select=\"nb-card-back\"></ng-content>\n    </div>\n    <a *ngIf=\"showToggleButton\" class=\"reveal-button\" (click)=\"toggle()\">\n      <i class=\"nb-arrow-dropdown\" aria-hidden=\"true\"></i>\n    </a>\n  ",
                 },] },
@@ -43,2 +70,3 @@ ];
         "revealed": [{ type: Input }, { type: HostBinding, args: ['class.revealed',] },],
+        "showToggleButton": [{ type: Input },],
     };
@@ -45,0 +73,0 @@ return NbRevealCardComponent;

components/card/reveal-card/reveal-card.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbRevealCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"nb-reveal-card","styleUrls":["./reveal-card.component.css"],"template":"\n    <ng-content select=\"nb-card-front\"></ng-content>\n    <div class=\"second-card-container\">\n      <ng-content select=\"nb-card-back\"></ng-content>\n    </div>\n    <a class=\"reveal-button\" (click)=\"toggleReveal()\">\n      <i class=\"nb-arrow-dropdown\" aria-hidden=\"true\"></i>\n    </a>\n  "}]}],"members":{"revealed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":39,"character":3},"arguments":["class.revealed"]}]}],"toggleReveal":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbRevealCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":42,"character":1},"arguments":[{"selector":"nb-reveal-card","styleUrls":["./reveal-card.component.css"],"template":"\n    <ng-content select=\"nb-card-front\"></ng-content>\n    <div class=\"second-card-container\">\n      <ng-content select=\"nb-card-back\"></ng-content>\n    </div>\n    <a *ngIf=\"showToggleButton\" class=\"reveal-button\" (click)=\"toggle()\">\n      <i class=\"nb-arrow-dropdown\" aria-hidden=\"true\"></i>\n    </a>\n  "}]}],"members":{"revealed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":61,"character":3},"arguments":["class.revealed"]}]}],"showToggleButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"toggle":[{"__symbolic":"method"}]}}}}]

components/checkbox/checkbox.component.d.ts

@@ -5,13 +5,9 @@ import { ControlValueAccessor } from '@angular/forms';
  *
- * @example Basic example
+ * @stacked-example(Showcase, checkbox/checkbox-showcase.component)
  *
- * ```
- *  <nb-checkbox [(ngModel)]="enabled">Enabled?</nb-checkbox>
- * ```
+ * Can have one of the following statuses: danger, success or warning
  *
- * @example Example with status
+ * @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)
  *
- * ```
- *  <nb-checkbox [(ngModel)]="enabled" status="danger">Enabled?</nb-checkbox>
- * ```
+ * @additional-example(Disabled Checkbox, checkbox/checkbox-disabled.component)
  *
@@ -18,0 +14,0 @@ * @styles

components/checkbox/checkbox.component.js

@@ -12,13 +12,9 @@ /**
  *
- * @example Basic example
+ * @stacked-example(Showcase, checkbox/checkbox-showcase.component)
  *
- * ```
- *  <nb-checkbox [(ngModel)]="enabled">Enabled?</nb-checkbox>
- * ```
+ * Can have one of the following statuses: danger, success or warning
  *
- * @example Example with status
+ * @stacked-example(Colored Checkboxes, checkbox/checkbox-status.component)
  *
- * ```
- *  <nb-checkbox [(ngModel)]="enabled" status="danger">Enabled?</nb-checkbox>
- * ```
+ * @additional-example(Disabled Checkbox, checkbox/checkbox-disabled.component)
  *
@@ -25,0 +21,0 @@ * @styles

components/checkbox/checkbox.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":43,"character":1},"arguments":[{"selector":"nb-checkbox","template":"\n    <label class=\"customised-control customised-checkbox\">\n      <input type=\"checkbox\" class=\"customised-control-input\"\n             [disabled]=\"disabled\"\n             [checked]=\"value\"\n             (change)=\"value = !value\">\n      <span class=\"customised-control-indicator\"></span>\n      <span class=\"customised-control-description\">\n        <ng-content></ng-content>\n      </span>\n    </label>\n  ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":58,"character":13},"useExisting":{"__symbolic":"reference","name":"NbCheckboxComponent"},"multi":true}]}]}],"members":{"_value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3},"arguments":["value"]}]}],"setDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["disabled"]}]}],"setStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["status"]}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":89,"character":3},"arguments":["class.success"]}]}],"warning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":94,"character":3},"arguments":["class.warning"]}]}],"danger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":99,"character":3},"arguments":["class.danger"]}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"nb-checkbox","template":"\n    <label class=\"customised-control customised-checkbox\">\n      <input type=\"checkbox\" class=\"customised-control-input\"\n             [disabled]=\"disabled\"\n             [checked]=\"value\"\n             (change)=\"value = !value\">\n      <span class=\"customised-control-indicator\"></span>\n      <span class=\"customised-control-description\">\n        <ng-content></ng-content>\n      </span>\n    </label>\n  ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":54,"character":13},"useExisting":{"__symbolic":"reference","name":"NbCheckboxComponent"},"multi":true}]}]}],"members":{"_value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["value"]}]}],"setDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["disabled"]}]}],"setStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3},"arguments":["status"]}]}],"success":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["class.success"]}]}],"warning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":90,"character":3},"arguments":["class.warning"]}]}],"danger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":95,"character":3},"arguments":["class.danger"]}]}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}]}}}}]

components/context-menu/context-menu.directive.d.ts

@@ -8,3 +8,3 @@ /**
 import { NbPopoverDirective } from '../popover/popover.directive';
-import { NbMenuItem } from '../menu/menu.service';
+import { NbMenuItem, NbMenuService } from '../menu/menu.service';
 import { NbThemeService } from '../../services/theme.service';
@@ -19,7 +19,7 @@ import { NbPopoverAdjustment, NbPopoverPlacement } from '../popover/helpers/model';
  *
- * ![image](assets/images/components/context-menu.gif)
+ * @stacked-example(Showcase, context-menu/context-menu-showcase.component)
  *
- * @example Just pass menu items array:
+ * Just pass menu items array:
  *
- * ```
+ * ```html
  * <button [nbContextMenu]="items"></button>
@@ -30,3 +30,3 @@ * ...
  *
- * @example If you want to handle context menu clicks you have to pass `nbContextMenuTag`
+ * If you want to handle context menu clicks you have to pass `nbContextMenuTag`
  * param and subscribe to events using NbMenuService.
@@ -36,26 +36,24 @@ * `NbContextMenu` renders plain `NbMenu` inside, so
  *
- * ```
- * <button [nbContextMenu]="items" nbContextMenuTag="my-context-menu"></button>
- * ...
- * nbMenuService.onItemClick()
- *   .pipe(filter(({ tag }) => tag === 'my-context-menu'))
- *   .subscribe(...handle it somehow)
- * ```
+ * @stacked-example(Menu item click, context-menu/context-menu-click.component)
  *
- * @example Context menu has different placements, such as: top, bottom, left and right
+ * Context menu has different placements, such as: top, bottom, left and right
  * which can be used as following:
  *
+ * ```html
+ * <button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>
  * ```
- * <button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>
- * ...
+ *
+ * ```ts
  * items = [{ title: 'Profile' }, { title: 'Log out' }];
  * ```
  *
- * @example By default context menu will try to adjust itself to maximally fit viewport
+ * By default context menu will try to adjust itself to maximally fit viewport
  * and provide the best user experience. It will try to change placement of the context menu.
  * If you wanna disable this behaviour just set it falsy value.
  *
+ * ```html
+ * <button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>
  * ```
- * <button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>
- * ...
+ *
+ * ```ts
  * items = [{ title: 'Profile' }, { title: 'Log out' }];
@@ -65,2 +63,3 @@ * ```
 export declare class NbContextMenuDirective implements OnInit, OnDestroy {
+    private menuService;
     /**
@@ -87,3 +86,5 @@ * Basic menu items, will be passed to the internal NbMenuComponent.
     protected context: {};
-    constructor(hostRef: ElementRef, themeService: NbThemeService, componentFactoryResolver: ComponentFactoryResolver, positioningHelper: NbPositioningHelper, adjustmentHelper: NbAdjustmentHelper, triggerHelper: NbTriggerHelper, platformId: any, placementHelper: NbPlacementHelper);
+    private menuTag;
+    private alive;
+    constructor(hostRef: ElementRef, themeService: NbThemeService, componentFactoryResolver: ComponentFactoryResolver, positioningHelper: NbPositioningHelper, adjustmentHelper: NbAdjustmentHelper, triggerHelper: NbTriggerHelper, platformId: any, placementHelper: NbPlacementHelper, menuService: NbMenuService);
     ngOnInit(): void;
@@ -105,2 +106,3 @@ ngOnDestroy(): void;
     private validateItems(items);
+    private subscribeOnItemClick();
 }

components/context-menu/context-menu.directive.js

@@ -7,3 +7,5 @@ /**
 import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Inject, Input, PLATFORM_ID, } from '@angular/core';
+import { filter, takeWhile } from 'rxjs/operators';
 import { NbPopoverDirective } from '../popover/popover.directive';
+import { NbMenuService } from '../menu/menu.service';
 import { NbThemeService } from '../../services/theme.service';
@@ -19,7 +21,7 @@ import { NbPopoverAdjustment, NbPopoverPlacement } from '../popover/helpers/model';
  *
- * ![image](assets/images/components/context-menu.gif)
+ * @stacked-example(Showcase, context-menu/context-menu-showcase.component)
  *
- * @example Just pass menu items array:
+ * Just pass menu items array:
  *
- * ```
+ * ```html
  * <button [nbContextMenu]="items"></button>
@@ -30,3 +32,3 @@ * ...
  *
- * @example If you want to handle context menu clicks you have to pass `nbContextMenuTag`
+ * If you want to handle context menu clicks you have to pass `nbContextMenuTag`
  * param and subscribe to events using NbMenuService.
@@ -36,26 +38,24 @@ * `NbContextMenu` renders plain `NbMenu` inside, so
  *
- * ```
- * <button [nbContextMenu]="items" nbContextMenuTag="my-context-menu"></button>
- * ...
- * nbMenuService.onItemClick()
- *   .pipe(filter(({ tag }) => tag === 'my-context-menu'))
- *   .subscribe(...handle it somehow)
- * ```
+ * @stacked-example(Menu item click, context-menu/context-menu-click.component)
  *
- * @example Context menu has different placements, such as: top, bottom, left and right
+ * Context menu has different placements, such as: top, bottom, left and right
  * which can be used as following:
  *
+ * ```html
+ * <button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>
  * ```
- * <button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>
- * ...
+ *
+ * ```ts
  * items = [{ title: 'Profile' }, { title: 'Log out' }];
  * ```
  *
- * @example By default context menu will try to adjust itself to maximally fit viewport
+ * By default context menu will try to adjust itself to maximally fit viewport
  * and provide the best user experience. It will try to change placement of the context menu.
  * If you wanna disable this behaviour just set it falsy value.
  *
+ * ```html
+ * <button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>
  * ```
- * <button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>
- * ...
+ *
+ * ```ts
  * items = [{ title: 'Profile' }, { title: 'Log out' }];
@@ -65,4 +65,6 @@ * ```
 var NbContextMenuDirective = /** @class */ (function () {
-    function NbContextMenuDirective(hostRef, themeService, componentFactoryResolver, positioningHelper, adjustmentHelper, triggerHelper, platformId, placementHelper) {
+    function NbContextMenuDirective(hostRef, themeService, componentFactoryResolver, positioningHelper, adjustmentHelper, triggerHelper, platformId, placementHelper, menuService) {
+        this.menuService = menuService;
         this.context = {};
+        this.alive = true;
         /**
@@ -116,2 +118,3 @@ * Initialize popover with all the important inputs.
         function (tag) {
+            this.menuTag = tag;
             this.popover.context = Object.assign(this.context, { tag: tag });
@@ -124,5 +127,7 @@ },
         this.popover.ngOnInit();
+        this.subscribeOnItemClick();
     };
     NbContextMenuDirective.prototype.ngOnDestroy = function () {
         this.popover.ngOnDestroy();
+        this.alive = false;
     };
@@ -185,2 +190,11 @@ /**
     };
+    NbContextMenuDirective.prototype.subscribeOnItemClick = function () {
+        var _this = this;
+        this.menuService.onItemClick()
+            .pipe(takeWhile(function () { return _this.alive; }), filter(function (_a) {
+            var tag = _a.tag;
+            return tag === _this.menuTag;
+        }))
+            .subscribe(function () { return _this.hide(); });
+    };
     NbContextMenuDirective.decorators = [
@@ -199,2 +213,3 @@ { type: Directive, args: [{ selector: '[nbContextMenu]' },] },
         { type: NbPlacementHelper, },
+        { type: NbMenuService, },
     ]; };
@@ -201,0 +216,0 @@ NbContextMenuDirective.propDecorators = {

components/context-menu/context-menu.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbContextMenuDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":65,"character":1},"arguments":[{"selector":"[nbContextMenu]"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["nbContextMenu"]}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3},"arguments":["nbContextMenuPlacement"]}]}],"adjustment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":3},"arguments":["nbContextMenuAdjustment"]}]}],"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3},"arguments":["nbContextMenuTag"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":113,"character":15},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":113,"character":22}]}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":107,"character":23},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":108,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":109,"character":40},{"__symbolic":"reference","module":"../popover/helpers/positioning.helper","name":"NbPositioningHelper","line":110,"character":33},{"__symbolic":"reference","module":"../popover/helpers/adjustment.helper","name":"NbAdjustmentHelper","line":111,"character":32},{"__symbolic":"reference","module":"../popover/helpers/trigger.helper","name":"NbTriggerHelper","line":112,"character":29},null,{"__symbolic":"reference","module":"../popover/helpers/placement.helper","name":"NbPlacementHelper","line":114,"character":31}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":160,"character":3},"arguments":["window:resize",["$event"]]}]}],"validateItems":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbContextMenuDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":64,"character":1},"arguments":[{"selector":"[nbContextMenu]"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3},"arguments":["nbContextMenu"]}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3},"arguments":["nbContextMenuPlacement"]}]}],"adjustment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3},"arguments":["nbContextMenuAdjustment"]}]}],"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3},"arguments":["nbContextMenuTag"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":116,"character":15},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":116,"character":22}]}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":110,"character":23},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":111,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":112,"character":40},{"__symbolic":"reference","module":"../popover/helpers/positioning.helper","name":"NbPositioningHelper","line":113,"character":33},{"__symbolic":"reference","module":"../popover/helpers/adjustment.helper","name":"NbAdjustmentHelper","line":114,"character":32},{"__symbolic":"reference","module":"../popover/helpers/trigger.helper","name":"NbTriggerHelper","line":115,"character":29},null,{"__symbolic":"reference","module":"../popover/helpers/placement.helper","name":"NbPlacementHelper","line":117,"character":31},{"__symbolic":"reference","module":"../menu/menu.service","name":"NbMenuService","line":118,"character":35}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":166,"character":3},"arguments":["window:resize",["$event"]]}]}],"validateItems":[{"__symbolic":"method"}],"subscribeOnItemClick":[{"__symbolic":"method"}]}}}}]

components/layout/layout.component.d.ts

@@ -16,12 +16,7 @@ /**
  *
- * @example By default the columns are ordered from the left to the right,
+ * By default the columns are ordered from the left to the right,
  * but it's also possible to overwrite this behavior by setting a `left` attribute to the column,
  * moving it to the very first position:
- * ```
- * <nb-layout>
- *   <nb-layout-column>Second</nb-layout-column>
- *   <nb-layout-column>Third</nb-layout-column>
- *   <nb-layout-column left>First</nb-layout-column>
- * </nb-layout>
- * ```
+ *
+ * @stacked-example(Column Left, layout/layout-column-left.component)
  */
@@ -46,4 +41,6 @@ export declare class NbLayoutColumnComponent {
  * Could be made `fixed` by setting the corresponding property. In the fixed mode the header becomes
- * sticky to the top of the nb-layout (to of the page).
+ * sticky to the top of the nb-layout (to of the page). Here's an example:
  *
+ * @stacked-example(Fixed Header, layout/layout-fixed-header.component)
+ *
  * @styles
@@ -90,19 +87,25 @@ *
 /**
- * The general Nebular component-container.
- * It is required that all children component of the framework are located inside of the nb-layout.
+ * Layout container component.
+ * When using with Nebular Theme System it is required that all child components should be placed inside.
  *
+ * Basic example of two column layout with header:
+ *
+ * @stacked-example(Showcase, layout/layout-showcase.component)
+ *
  * Can contain the following components inside:
  *
+ * ```html
+ * <nb-layout>
+ *  <nb-layout-header></nb-layout-header>
+ *  <nb-layout-footer></nb-layout-column>
+ *  <nb-layout-column></nb-layout-column>
+ *  <nb-sidebar></nb-sidebar>
+ * </nb-layout>
  * ```
- * nb-layout-header
- * nb-layout-column
- * nb-sidebar
- * nb-layout-footer
- * ```
  *
- * By default the layout fills up the full view-port.
+ * By default the layout fills up the whole view-port.
  * The window scrollbars are disabled on the body and moved inside of the nb-layout, so that the scrollbars
  * won't mess with the fixed nb-header.
  *
- * The children components are projected into the flexible layout structure allowing to adjust the layout behavior
+ * The child components are projected into a flexible layout structure allowing to adjust the layout behavior
  * based on the settings provided.
@@ -116,29 +119,19 @@ *
  * so that they are located on top of the elements hierarchy.
- * More details are below under the `ThemeService` section.
+ * More details are under the `ThemeService` section.
  *
- * The layout component is also responsible for changing of the application themes.
- * It listens to the `themeChange` event and change the theme CSS class appended to body.
+ * The layout component is also responsible for changing application themes.
+ * It listens to the `themeChange` event and change a theme CSS class appended to body.
  * Based on the class appended a specific CSS-theme is applied to the application.
  * More details of the Theme System could be found here [Enabling Theme System](#/docs/concepts/theme-system)
  *
- * @example A simple layout example:
+ * A simple layout with footer:
  *
- * ```
- * <nb-layout>
- *   <nb-layout-header>Great Company</nb-layout-header>
+ * @stacked-example(Layout With Footer, layout/layout-w-footer.component)
  *
- *   <nb-layout-column>
- *     Hello World!
- *   </nb-layout-column>
- *
- *   <nb-layout-footer>Contact us</nb-layout-footer>
- * </nb-layout>
- * ```
- *
- * @example For example, it is possible to ask the layout to center the columns (notice: we added a `center` attribute
+ * It is possible to ask the layout to center the columns (notice: we added a `center` attribute
  * to the layout:
  *
- * ```
+ * ```html
  * <nb-layout center>
- *   <nb-layout-header>Great Company</nb-layout-header>
+ *   <nb-layout-header>Awesome Company</nb-layout-header>
  *
@@ -145,0 +138,0 @@ *   <nb-layout-column>

components/layout/layout.component.js

@@ -20,12 +20,7 @@ /**
  *
- * @example By default the columns are ordered from the left to the right,
+ * By default the columns are ordered from the left to the right,
  * but it's also possible to overwrite this behavior by setting a `left` attribute to the column,
  * moving it to the very first position:
- * ```
- * <nb-layout>
- *   <nb-layout-column>Second</nb-layout-column>
- *   <nb-layout-column>Third</nb-layout-column>
- *   <nb-layout-column left>First</nb-layout-column>
- * </nb-layout>
- * ```
+ *
+ * @stacked-example(Column Left, layout/layout-column-left.component)
  */
@@ -79,4 +74,6 @@ var NbLayoutColumnComponent = /** @class */ (function () {
  * Could be made `fixed` by setting the corresponding property. In the fixed mode the header becomes
- * sticky to the top of the nb-layout (to of the page).
+ * sticky to the top of the nb-layout (to of the page). Here's an example:
  *
+ * @stacked-example(Fixed Header, layout/layout-fixed-header.component)
+ *
  * @styles
@@ -163,19 +160,25 @@ *
 /**
- * The general Nebular component-container.
- * It is required that all children component of the framework are located inside of the nb-layout.
+ * Layout container component.
+ * When using with Nebular Theme System it is required that all child components should be placed inside.
  *
+ * Basic example of two column layout with header:
+ *
+ * @stacked-example(Showcase, layout/layout-showcase.component)
+ *
  * Can contain the following components inside:
  *
+ * ```html
+ * <nb-layout>
+ *  <nb-layout-header></nb-layout-header>
+ *  <nb-layout-footer></nb-layout-column>
+ *  <nb-layout-column></nb-layout-column>
+ *  <nb-sidebar></nb-sidebar>
+ * </nb-layout>
  * ```
- * nb-layout-header
- * nb-layout-column
- * nb-sidebar
- * nb-layout-footer
- * ```
  *
- * By default the layout fills up the full view-port.
+ * By default the layout fills up the whole view-port.
  * The window scrollbars are disabled on the body and moved inside of the nb-layout, so that the scrollbars
  * won't mess with the fixed nb-header.
  *
- * The children components are projected into the flexible layout structure allowing to adjust the layout behavior
+ * The child components are projected into a flexible layout structure allowing to adjust the layout behavior
  * based on the settings provided.
@@ -189,29 +192,19 @@ *
  * so that they are located on top of the elements hierarchy.
- * More details are below under the `ThemeService` section.
+ * More details are under the `ThemeService` section.
  *
- * The layout component is also responsible for changing of the application themes.
- * It listens to the `themeChange` event and change the theme CSS class appended to body.
+ * The layout component is also responsible for changing application themes.
+ * It listens to the `themeChange` event and change a theme CSS class appended to body.
  * Based on the class appended a specific CSS-theme is applied to the application.
  * More details of the Theme System could be found here [Enabling Theme System](#/docs/concepts/theme-system)
  *
- * @example A simple layout example:
+ * A simple layout with footer:
  *
- * ```
- * <nb-layout>
- *   <nb-layout-header>Great Company</nb-layout-header>
+ * @stacked-example(Layout With Footer, layout/layout-w-footer.component)
  *
- *   <nb-layout-column>
- *     Hello World!
- *   </nb-layout-column>
- *
- *   <nb-layout-footer>Contact us</nb-layout-footer>
- * </nb-layout>
- * ```
- *
- * @example For example, it is possible to ask the layout to center the columns (notice: we added a `center` attribute
+ * It is possible to ask the layout to center the columns (notice: we added a `center` attribute
  * to the layout:
  *
- * ```
+ * ```html
  * <nb-layout center>
- *   <nb-layout-header>Great Company</nb-layout-header>
+ *   <nb-layout-header>Awesome Company</nb-layout-header>
  *
@@ -218,0 +211,0 @@ *   <nb-layout-column>

components/layout/layout.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbLayoutColumnComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"nb-layout-column","template":"\n    <ng-content></ng-content>\n  "}]}],"members":{"leftValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":44,"character":3},"arguments":["class.left"]}]}],"startValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":45,"character":3},"arguments":["class.start"]}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}]}},"NbLayoutHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":84,"character":1},"arguments":[{"selector":"nb-layout-header","template":"\n    <nav [class.fixed]=\"fixedValue\">\n      <ng-content></ng-content>\n    </nav>\n  "}]}],"members":{"fixedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":94,"character":3},"arguments":["class.fixed"]}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}]}},"NbLayoutFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":120,"character":1},"arguments":[{"selector":"nb-layout-footer","template":"\n    <nav [class.fixed]=\"fixedValue\">\n      <ng-content></ng-content>\n    </nav>\n  "}]}],"members":{"fixedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":130,"character":3},"arguments":["class.fixed"]}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3}}]}]}},"NbLayoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":223,"character":1},"arguments":[{"selector":"nb-layout","styleUrls":["./layout.component.css"],"template":"\n    <ng-template #layoutTopDynamicArea></ng-template>\n    <div class=\"scrollable-container\" #scrollableContainer>\n      <div class=\"layout\">\n        <ng-content select=\"nb-layout-header\"></ng-content>\n        <div class=\"layout-container\">\n          <ng-content select=\"nb-sidebar\"></ng-content>\n          <div class=\"content\" [class.center]=\"centerValue\">\n            <div class=\"columns\">\n              <ng-content select=\"nb-layout-column\"></ng-content>\n            </div>\n            <ng-content select=\"nb-layout-footer\"></ng-content>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"windowModeValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":248,"character":3},"arguments":["class.window-mode"]}]}],"withScrollValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":249,"character":3},"arguments":["class.with-scroll"]}]}],"center":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":255,"character":3}}]}],"windowMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":267,"character":3}}]}],"withScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":278,"character":3}}]}],"veryTopRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":292,"character":3},"arguments":["layoutTopDynamicArea",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":292,"character":45}}]}]}],"scrollableContainerRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":293,"character":3},"arguments":["scrollableContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":293,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":306,"character":5},"arguments":[{"__symbolic":"reference","module":"../../theme.options","name":"NB_WINDOW","line":306,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":307,"character":5},"arguments":[{"__symbolic":"reference","module":"../../theme.options","name":"NB_DOCUMENT","line":307,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":308,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":308,"character":12}]}],null],"parameters":[{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":300,"character":28},{"__symbolic":"reference","module":"../../services/spinner.service","name":"NbSpinnerService","line":301,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":302,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":303,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":304,"character":24},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":305,"character":22},null,null,{"__symbolic":"reference","name":"Object"},{"__symbolic":"reference","module":"../../services/direction.service","name":"NbLayoutDirectionService","line":309,"character":38}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":393,"character":3},"arguments":["window:resize",["$event"]]}]}],"initScrollTop":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbLayoutColumnComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"nb-layout-column","template":"\n    <ng-content></ng-content>\n  "}]}],"members":{"leftValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":39,"character":3},"arguments":["class.left"]}]}],"startValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":40,"character":3},"arguments":["class.start"]}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}]}},"NbLayoutHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":81,"character":1},"arguments":[{"selector":"nb-layout-header","template":"\n    <nav [class.fixed]=\"fixedValue\">\n      <ng-content></ng-content>\n    </nav>\n  "}]}],"members":{"fixedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":91,"character":3},"arguments":["class.fixed"]}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}]}},"NbLayoutFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":117,"character":1},"arguments":[{"selector":"nb-layout-footer","template":"\n    <nav [class.fixed]=\"fixedValue\">\n      <ng-content></ng-content>\n    </nav>\n  "}]}],"members":{"fixedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":127,"character":3},"arguments":["class.fixed"]}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":3}}]}]}},"NbLayoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":216,"character":1},"arguments":[{"selector":"nb-layout","styleUrls":["./layout.component.css"],"template":"\n    <ng-template #layoutTopDynamicArea></ng-template>\n    <div class=\"scrollable-container\" #scrollableContainer>\n      <div class=\"layout\">\n        <ng-content select=\"nb-layout-header\"></ng-content>\n        <div class=\"layout-container\">\n          <ng-content select=\"nb-sidebar\"></ng-content>\n          <div class=\"content\" [class.center]=\"centerValue\">\n            <div class=\"columns\">\n              <ng-content select=\"nb-layout-column\"></ng-content>\n            </div>\n            <ng-content select=\"nb-layout-footer\"></ng-content>\n          </div>\n        </div>\n      </div>\n    </div>\n  "}]}],"members":{"windowModeValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":241,"character":3},"arguments":["class.window-mode"]}]}],"withScrollValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":242,"character":3},"arguments":["class.with-scroll"]}]}],"center":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":248,"character":3}}]}],"windowMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":260,"character":3}}]}],"withScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":271,"character":3}}]}],"veryTopRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":285,"character":3},"arguments":["layoutTopDynamicArea",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":285,"character":45}}]}]}],"scrollableContainerRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":286,"character":3},"arguments":["scrollableContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":286,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":299,"character":5},"arguments":[{"__symbolic":"reference","module":"../../theme.options","name":"NB_WINDOW","line":299,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":300,"character":5},"arguments":[{"__symbolic":"reference","module":"../../theme.options","name":"NB_DOCUMENT","line":300,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":301,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":301,"character":12}]}],null],"parameters":[{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":293,"character":28},{"__symbolic":"reference","module":"../../services/spinner.service","name":"NbSpinnerService","line":294,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":295,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":296,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":297,"character":24},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":298,"character":22},null,null,{"__symbolic":"reference","name":"Object"},{"__symbolic":"reference","module":"../../services/direction.service","name":"NbLayoutDirectionService","line":302,"character":38}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":386,"character":3},"arguments":["window:resize",["$event"]]}]}],"initScrollTop":[{"__symbolic":"method"}]}}}}]

components/menu/menu.component.d.ts

@@ -36,11 +36,24 @@ /**
  *
- * @example Basic usage
+ * Basic example
+ * @stacked-example(Showcase, menu/menu-showcase.component)
  *
- * ```
+ * ```ts
  * // ...
- * menuItems: NbMenuItem[] = [{ title: home, link: '/' }, { title: dashboard, link: 'dashboard' }];
+ * items: NbMenuItem[] = [
+ *  {
+ *    title: home,
+ *    link: '/'
+ *  },
+ *  {
+ *    title: dashboard,
+ *    link: 'dashboard'
+ *  }
+ * ];
  * // ...
- * <nb-menu [items]="menuItems"></nb-menu>
+ * <nb-menu [items]="items"></nb-menu>
  * ```
  *
+ * Two-level menu example
+ * @stacked-example(Two Levels, menu/menu-children.component)
+ *
  * @styles
@@ -123,2 +136,3 @@ *
     private navigateHome();
+    private collapseAll();
     private getHomeItem(items);
@@ -125,0 +139,0 @@ private compareTag(tag);

components/menu/menu.component.js

@@ -98,11 +98,24 @@ /**
  *
- * @example Basic usage
+ * Basic example
+ * @stacked-example(Showcase, menu/menu-showcase.component)
  *
- * ```
+ * ```ts
  * // ...
- * menuItems: NbMenuItem[] = [{ title: home, link: '/' }, { title: dashboard, link: 'dashboard' }];
+ * items: NbMenuItem[] = [
+ *  {
+ *    title: home,
+ *    link: '/'
+ *  },
+ *  {
+ *    title: dashboard,
+ *    link: 'dashboard'
+ *  }
+ * ];
  * // ...
- * <nb-menu [items]="menuItems"></nb-menu>
+ * <nb-menu [items]="items"></nb-menu>
  * ```
  *
+ * Two-level menu example
+ * @stacked-example(Two Levels, menu/menu-children.component)
+ *
  * @styles
@@ -189,2 +202,8 @@ *
         });
+        this.menuInternalService
+            .onCollapseAll()
+            .pipe(takeWhile(function () { return _this.alive; }), filter(function (data) { return _this.compareTag(data.tag); }))
+            .subscribe(function (data) {
+            _this.collapseAll();
+        });
         this.router.events
@@ -246,2 +265,5 @@ .pipe(takeWhile(function () { return _this.alive; }), filter(function (event) { return event instanceof NavigationEnd; }))
     };
+    NbMenuComponent.prototype.collapseAll = function () {
+        this.menuInternalService.collapseAll(this.items, this.tag);
+    };
     NbMenuComponent.prototype.getHomeItem = function (items) {
@@ -248,0 +270,0 @@ for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {

components/menu/menu.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbMenuItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"[nbMenuItem]","templateUrl":"./menu-item.component.html"}]}],"members":{"menuItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"hoverItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"toggleSubMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"selectItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"subMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":52,"character":3},"arguments":[{"__symbolic":"reference","name":"NbMenuItemComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":45}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":57,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":57,"character":12}]}],null],"parameters":[{"__symbolic":"reference","module":"./menu.service","name":"NbMenuService","line":56,"character":25},{"__symbolic":"reference","name":"Object"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":29}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateSubmenuHeight":[{"__symbolic":"method"}],"updateMaxHeight":[{"__symbolic":"method"}],"onToggleSubMenu":[{"__symbolic":"method"}],"onHoverItem":[{"__symbolic":"method"}],"onSelectItem":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}]}},"NbMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":160,"character":1},"arguments":[{"selector":"nb-menu","styleUrls":["./menu.component.css"],"template":"\n    <ul class=\"menu-items\">\n      <ng-container *ngFor=\"let item of items\">\n        <li nbMenuItem *ngIf=\"!item.hidden\"\n            [menuItem]=\"item\"\n            [class.menu-group]=\"item.group\"\n            (hoverItem)=\"onHoverItem($event)\"\n            (toggleSubMenu)=\"onToggleSubMenu($event)\"\n            (selectItem)=\"onSelectItem($event)\"\n            (itemClick)=\"onItemClick($event)\"\n            class=\"menu-item\">\n        </li>\n      </ng-container>\n    </ul>\n  "}]}],"members":{"inverseValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":180,"character":3},"arguments":["class.inverse"]}]}],"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":188,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":3}}]}],"inverse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":3}}]}],"autoCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":218,"character":15},"arguments":[{"__symbolic":"reference","module":"../../theme.options","name":"NB_WINDOW","line":218,"character":22}]}],null,null],"parameters":[null,{"__symbolic":"reference","module":"./menu.service","name":"NbMenuInternalService","line":219,"character":43},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":220,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onAddItem":[{"__symbolic":"method"}],"onHoverItem":[{"__symbolic":"method"}],"onToggleSubMenu":[{"__symbolic":"method"}],"onSelectItem":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"navigateHome":[{"__symbolic":"method"}],"getHomeItem":[{"__symbolic":"method"}],"compareTag":[{"__symbolic":"method"}],"getSelectedItem":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbMenuItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"[nbMenuItem]","templateUrl":"./menu-item.component.html"}]}],"members":{"menuItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"hoverItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"toggleSubMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"selectItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"subMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":52,"character":3},"arguments":[{"__symbolic":"reference","name":"NbMenuItemComponent"},{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":45}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":57,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":57,"character":12}]}],null],"parameters":[{"__symbolic":"reference","module":"./menu.service","name":"NbMenuService","line":56,"character":25},{"__symbolic":"reference","name":"Object"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":29}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateSubmenuHeight":[{"__symbolic":"method"}],"updateMaxHeight":[{"__symbolic":"method"}],"onToggleSubMenu":[{"__symbolic":"method"}],"onHoverItem":[{"__symbolic":"method"}],"onSelectItem":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}]}},"NbMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":173,"character":1},"arguments":[{"selector":"nb-menu","styleUrls":["./menu.component.css"],"template":"\n    <ul class=\"menu-items\">\n      <ng-container *ngFor=\"let item of items\">\n        <li nbMenuItem *ngIf=\"!item.hidden\"\n            [menuItem]=\"item\"\n            [class.menu-group]=\"item.group\"\n            (hoverItem)=\"onHoverItem($event)\"\n            (toggleSubMenu)=\"onToggleSubMenu($event)\"\n            (selectItem)=\"onSelectItem($event)\"\n            (itemClick)=\"onItemClick($event)\"\n            class=\"menu-item\">\n        </li>\n      </ng-container>\n    </ul>\n  "}]}],"members":{"inverseValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":193,"character":3},"arguments":["class.inverse"]}]}],"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":201,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":207,"character":3}}]}],"inverse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":213,"character":3}}]}],"autoCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":223,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":231,"character":15},"arguments":[{"__symbolic":"reference","module":"../../theme.options","name":"NB_WINDOW","line":231,"character":22}]}],null,null],"parameters":[null,{"__symbolic":"reference","module":"./menu.service","name":"NbMenuInternalService","line":232,"character":43},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":233,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onAddItem":[{"__symbolic":"method"}],"onHoverItem":[{"__symbolic":"method"}],"onToggleSubMenu":[{"__symbolic":"method"}],"onSelectItem":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"navigateHome":[{"__symbolic":"method"}],"collapseAll":[{"__symbolic":"method"}],"getHomeItem":[{"__symbolic":"method"}],"compareTag":[{"__symbolic":"method"}],"getSelectedItem":[{"__symbolic":"method"}]}}}}]

components/menu/menu.service.d.ts

@@ -92,2 +92,7 @@ import { Location } from '@angular/common';
     /**
+     * Collapses all menu items
+     * @param {string} tag
+     */
+    collapseAll(tag?: string): void;
+    /**
      * Navigate to the home menu item
@@ -124,2 +129,5 @@ * @param {string} tag
     }>;
+    onCollapseAll(): Observable<{
+        tag: string;
+    }>;
     onGetSelectedItem(): Observable<{
@@ -126,0 +134,0 @@ tag: string;

components/menu/menu.service.js

@@ -26,2 +26,3 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
 var submenuToggle$ = new ReplaySubject(1);
+var collapseAll$ = new ReplaySubject(1);
 // TODO: check if we need both URL and LINK
@@ -83,2 +84,17 @@ /**
     /**
+     * Collapses all menu items
+     * @param {string} tag
+     */
+    /**
+       * Collapses all menu items
+       * @param {string} tag
+       */
+    NbMenuService.prototype.collapseAll = /**
+       * Collapses all menu items
+       * @param {string} tag
+       */
+    function (tag) {
+        collapseAll$.next({ tag: tag });
+    };
+    /**
      * Navigate to the home menu item
@@ -175,2 +191,5 @@ * @param {string} tag
     };
+    NbMenuInternalService.prototype.onCollapseAll = function () {
+        return collapseAll$.pipe(share());
+    };
     NbMenuInternalService.prototype.onGetSelectedItem = function () {
@@ -177,0 +196,0 @@ return getSelectedItem$.pipe(share());

components/menu/menu.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbMenuBag":{"__symbolic":"interface"},"NbMenuItem":{"__symbolic":"class"},"NbMenuService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":103,"character":1}}],"members":{"addItems":[{"__symbolic":"method"}],"navigateHome":[{"__symbolic":"method"}],"getSelectedItem":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onItemSelect":[{"__symbolic":"method"}],"onItemHover":[{"__symbolic":"method"}],"onSubmenuToggle":[{"__symbolic":"method"}]}},"NbMenuInternalService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":153,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"Location","line":157,"character":32}]}],"getItems":[{"__symbolic":"method"}],"prepareItems":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"resetItems":[{"__symbolic":"method"}],"collapseAll":[{"__symbolic":"method"}],"onAddItem":[{"__symbolic":"method"}],"onNavigateHome":[{"__symbolic":"method"}],"onGetSelectedItem":[{"__symbolic":"method"}],"itemHover":[{"__symbolic":"method"}],"submenuToggle":[{"__symbolic":"method"}],"itemSelect":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"resetItem":[{"__symbolic":"method"}],"isParent":[{"__symbolic":"method"}],"collapseItem":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"setParent":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"selectParent":[{"__symbolic":"method"}],"selectItemByUrl":[{"__symbolic":"method"}],"selectedInUrl":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbMenuBag":{"__symbolic":"interface"},"NbMenuItem":{"__symbolic":"class"},"NbMenuService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":104,"character":1}}],"members":{"addItems":[{"__symbolic":"method"}],"collapseAll":[{"__symbolic":"method"}],"navigateHome":[{"__symbolic":"method"}],"getSelectedItem":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onItemSelect":[{"__symbolic":"method"}],"onItemHover":[{"__symbolic":"method"}],"onSubmenuToggle":[{"__symbolic":"method"}]}},"NbMenuInternalService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":162,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"Location","line":166,"character":32}]}],"getItems":[{"__symbolic":"method"}],"prepareItems":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"resetItems":[{"__symbolic":"method"}],"collapseAll":[{"__symbolic":"method"}],"onAddItem":[{"__symbolic":"method"}],"onNavigateHome":[{"__symbolic":"method"}],"onCollapseAll":[{"__symbolic":"method"}],"onGetSelectedItem":[{"__symbolic":"method"}],"itemHover":[{"__symbolic":"method"}],"submenuToggle":[{"__symbolic":"method"}],"itemSelect":[{"__symbolic":"method"}],"itemClick":[{"__symbolic":"method"}],"resetItem":[{"__symbolic":"method"}],"isParent":[{"__symbolic":"method"}],"collapseItem":[{"__symbolic":"method"}],"applyDefaults":[{"__symbolic":"method"}],"setParent":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"selectParent":[{"__symbolic":"method"}],"selectItemByUrl":[{"__symbolic":"method"}],"selectedInUrl":[{"__symbolic":"method"}]}}}}]

components/popover/helpers/adjustment.helper.d.ts

@@ -45,4 +45,4 @@ import { NbPositioningHelper } from './positioning.helper';
      *
-     * @example order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
-     * ```
+     * order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
+     * ```ts
      * const placements = NB_ORDERED_PLACEMENTS[NbPopoverAdjustment.CLOCKWISE];
@@ -49,0 +49,0 @@ * const ordered = orderPlacement(NbPopoverPlacement.RIGHT, placements);

components/popover/helpers/adjustment.helper.js

@@ -138,4 +138,4 @@ import { Injectable, Inject } from '@angular/core';
      *
-     * @example order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
-     * ```
+     * order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
+     * ```ts
      * const placements = NB_ORDERED_PLACEMENTS[NbPopoverAdjustment.CLOCKWISE];
@@ -160,4 +160,4 @@ * const ordered = orderPlacement(NbPopoverPlacement.RIGHT, placements);
        *
-       * @example order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
-       * ```
+       * order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
+       * ```ts
        * const placements = NB_ORDERED_PLACEMENTS[NbPopoverAdjustment.CLOCKWISE];
@@ -182,4 +182,4 @@ * const ordered = orderPlacement(NbPopoverPlacement.RIGHT, placements);
        *
-       * @example order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
-       * ```
+       * order placements for {@link NbPopoverPlacement#RIGHT} and {@link NbPopoverAdjustment#CLOCKWISE}
+       * ```ts
        * const placements = NB_ORDERED_PLACEMENTS[NbPopoverAdjustment.CLOCKWISE];
@@ -186,0 +186,0 @@ * const ordered = orderPlacement(NbPopoverPlacement.RIGHT, placements);

components/popover/popover.directive.d.ts

@@ -17,8 +17,8 @@ /**
  *
- * ![image](assets/images/components/popover.gif)
+ * @stacked-example(Showcase, popover/popover-showcase.component)
  *
- * @example Popover can accept different content such as:
+ * Popover can accept different content such as:
  * TemplateRef
  *
- * ```
+ * ```html
  * <button [nbPopover]="templateRef"></button>
@@ -30,29 +30,43 @@ * <ng-template #templateRef>
  *
- * @example Custom components
+ * Custom components
  *
+ * ```html
+ * <button [nbPopover]="MyPopoverComponent"></button>
  * ```
- * <button [nbPopover]="NbCardComponent"></button>
- * ```
  *
- * @example Primitive types
+ * Both custom components and templateRef popovers can receive *context* property
+ * that will be passed to the content props.
  *
- * ```
+ * Primitive types
+ *
+ * ```html
  * <button nbPopover="Hello, Popover!"></button>
  * ```
  *
- * @example Popover has different placements, such as: top, bottom, left and right
+ * Popover has different placements, such as: top, bottom, left, right, start and end
  * which can be used as following:
  *
- * ```
- * <button nbPopover="Hello, Popover!" nbPopoverPlacement="left"></button>
- * ```
+ * @stacked-example(Placements, popover/popover-placements.component)
  *
- * @example By default popover will try to adjust itself to maximally fit viewport
+ * By default popover will try to adjust itself to maximally fit viewport
  * and provide the best user experience. It will try to change placement of the popover container.
  * If you wanna disable this behaviour just set it falsy value.
  *
- * ```
+ * ```html
  * <button nbPopover="Hello, Popover!" [nbPopoverAdjust]="false"></button>
  * ```
  *
+ * Also popover has some different modes which provides capability show and hide popover in different ways:
+ *
+ * - Click mode popover shows when a user clicking on the host element and hides when the user clicks
+ * somewhere on the document except popover.
+ * - Hint mode provides capability show popover when the user hovers on the host element
+ * and hide popover when user hovers out of the host.
+ * - Hover mode works like hint mode with one exception - when the user moves mouse from host element to
+ * the container element popover will not be hidden.
+ *
+ * @stacked-example(Available Modes, popover/popover-modes.component.html)
+ *
+ * @additional-example(Template Ref, popover/popover-template-ref.component)
+ * @additional-example(Custom Component, popover/popover-custom-component.component)
  * */
@@ -59,0 +73,0 @@ export declare class NbPopoverDirective implements OnInit, OnDestroy {

components/popover/popover.directive.js

@@ -19,8 +19,8 @@ /**
  *
- * ![image](assets/images/components/popover.gif)
+ * @stacked-example(Showcase, popover/popover-showcase.component)
  *
- * @example Popover can accept different content such as:
+ * Popover can accept different content such as:
  * TemplateRef
  *
- * ```
+ * ```html
  * <button [nbPopover]="templateRef"></button>
@@ -32,29 +32,43 @@ * <ng-template #templateRef>
  *
- * @example Custom components
+ * Custom components
  *
+ * ```html
+ * <button [nbPopover]="MyPopoverComponent"></button>
  * ```
- * <button [nbPopover]="NbCardComponent"></button>
- * ```
  *
- * @example Primitive types
+ * Both custom components and templateRef popovers can receive *context* property
+ * that will be passed to the content props.
  *
- * ```
+ * Primitive types
+ *
+ * ```html
  * <button nbPopover="Hello, Popover!"></button>
  * ```
  *
- * @example Popover has different placements, such as: top, bottom, left and right
+ * Popover has different placements, such as: top, bottom, left, right, start and end
  * which can be used as following:
  *
- * ```
- * <button nbPopover="Hello, Popover!" nbPopoverPlacement="left"></button>
- * ```
+ * @stacked-example(Placements, popover/popover-placements.component)
  *
- * @example By default popover will try to adjust itself to maximally fit viewport
+ * By default popover will try to adjust itself to maximally fit viewport
  * and provide the best user experience. It will try to change placement of the popover container.
  * If you wanna disable this behaviour just set it falsy value.
  *
- * ```
+ * ```html
  * <button nbPopover="Hello, Popover!" [nbPopoverAdjust]="false"></button>
  * ```
  *
+ * Also popover has some different modes which provides capability show and hide popover in different ways:
+ *
+ * - Click mode popover shows when a user clicking on the host element and hides when the user clicks
+ * somewhere on the document except popover.
+ * - Hint mode provides capability show popover when the user hovers on the host element
+ * and hide popover when user hovers out of the host.
+ * - Hover mode works like hint mode with one exception - when the user moves mouse from host element to
+ * the container element popover will not be hidden.
+ *
+ * @stacked-example(Available Modes, popover/popover-modes.component.html)
+ *
+ * @additional-example(Template Ref, popover/popover-template-ref.component)
+ * @additional-example(Custom Component, popover/popover-custom-component.component)
  * */
@@ -157,2 +171,3 @@ /*
         this.alive = false;
+        this.hide();
     };
@@ -159,0 +174,0 @@ /**

components/popover/popover.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbPopoverDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":77,"character":1},"arguments":[{"selector":"[nbPopover]"}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["nbPopover"]}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3},"arguments":["nbPopoverContext"]}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3},"arguments":["nbPopoverPlacement"]}]}],"adjustment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3},"arguments":["nbPopoverAdjustment"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":3},"arguments":["nbPopoverMode"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":157,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":157,"character":12}]}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":151,"character":21},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":152,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":153,"character":38},{"__symbolic":"reference","module":"./helpers/positioning.helper","name":"NbPositioningHelper","line":154,"character":31},{"__symbolic":"reference","module":"./helpers/adjustment.helper","name":"NbAdjustmentHelper","line":155,"character":30},{"__symbolic":"reference","module":"./helpers/trigger.helper","name":"NbTriggerHelper","line":156,"character":27},null,{"__symbolic":"reference","module":"./helpers/placement.helper","name":"NbPlacementHelper","line":158,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":207,"character":3},"arguments":["window:resize",["$event"]]}]}],"registerTriggers":[{"__symbolic":"method"}],"renderPopover":[{"__symbolic":"method"}],"destroyPopover":[{"__symbolic":"method"}],"place":[{"__symbolic":"method"}],"patchPopover":[{"__symbolic":"method"}],"patchPopoverPlacement":[{"__symbolic":"method"}],"patchPopoverPosition":[{"__symbolic":"method"}],"adjust":[{"__symbolic":"method"}],"performAdjustment":[{"__symbolic":"method"}],"calcAdjustment":[{"__symbolic":"method"}],"calcPosition":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbPopoverDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":91,"character":1},"arguments":[{"selector":"[nbPopover]"}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3},"arguments":["nbPopover"]}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3},"arguments":["nbPopoverContext"]}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":3},"arguments":["nbPopoverPlacement"]}]}],"adjustment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3},"arguments":["nbPopoverAdjustment"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":3},"arguments":["nbPopoverMode"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":171,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":171,"character":12}]}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":165,"character":21},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":166,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":167,"character":38},{"__symbolic":"reference","module":"./helpers/positioning.helper","name":"NbPositioningHelper","line":168,"character":31},{"__symbolic":"reference","module":"./helpers/adjustment.helper","name":"NbAdjustmentHelper","line":169,"character":30},{"__symbolic":"reference","module":"./helpers/trigger.helper","name":"NbTriggerHelper","line":170,"character":27},null,{"__symbolic":"reference","module":"./helpers/placement.helper","name":"NbPlacementHelper","line":172,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"show":[{"__symbolic":"method"}],"hide":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":222,"character":3},"arguments":["window:resize",["$event"]]}]}],"registerTriggers":[{"__symbolic":"method"}],"renderPopover":[{"__symbolic":"method"}],"destroyPopover":[{"__symbolic":"method"}],"place":[{"__symbolic":"method"}],"patchPopover":[{"__symbolic":"method"}],"patchPopoverPlacement":[{"__symbolic":"method"}],"patchPopoverPosition":[{"__symbolic":"method"}],"adjust":[{"__symbolic":"method"}],"performAdjustment":[{"__symbolic":"method"}],"calcAdjustment":[{"__symbolic":"method"}],"calcPosition":[{"__symbolic":"method"}]}}}}]

components/route-tabset/route-tabset.component.d.ts

@@ -12,5 +12,5 @@ /**
  *
- * @example basic usage example
+ * basic usage example
  *
- * ```
+ * ```ts
  *  tabs = [
@@ -17,0 +17,0 @@ *  {

components/route-tabset/route-tabset.component.js

@@ -13,5 +13,5 @@ /**
  *
- * @example basic usage example
+ * basic usage example
  *
- * ```
+ * ```ts
  *  tabs = [
@@ -18,0 +18,0 @@ *  {

components/search/search.component.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ComponentFactoryResolver, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
@@ -45,2 +45,17 @@ import { NbSearchService } from './search.service';
  *
+ * @stacked-example(Showcase, search/search-showcase.component)
+ *
+ * Basic setup:
+ *
+ * ```ts
+ *  <nb-search type="rotate-layout"></nb-search>
+ * ```
+ *
+ * Several animation types are available:
+ * modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
+ *
+ * It is also possible to handle search event using `NbSearchService`:
+ *
+ * @stacked-example(Search Event, search/search-event.component)
+ *
  * @styles
@@ -59,2 +74,3 @@ *
     private searchService;
+    private componentFactoryResolver;
     private themeService;
@@ -85,3 +101,3 @@ private router;
     private searchType;
-    constructor(searchService: NbSearchService, themeService: NbThemeService, router: Router);
+    constructor(searchService: NbSearchService, componentFactoryResolver: ComponentFactoryResolver, themeService: NbThemeService, router: Router);
     /**
@@ -88,0 +104,0 @@ * Search design type, available types are

components/search/search.component.js

@@ -6,3 +6,3 @@ /**
  */
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, ViewContainerRef, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ComponentFactoryResolver, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, ViewContainerRef, } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
@@ -134,2 +134,17 @@ import { BehaviorSubject, of as observableOf, combineLatest } from 'rxjs';
  *
+ * @stacked-example(Showcase, search/search-showcase.component)
+ *
+ * Basic setup:
+ *
+ * ```ts
+ *  <nb-search type="rotate-layout"></nb-search>
+ * ```
+ *
+ * Several animation types are available:
+ * modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
+ *
+ * It is also possible to handle search event using `NbSearchService`:
+ *
+ * @stacked-example(Search Event, search/search-event.component)
+ *
  * @styles
@@ -147,4 +162,5 @@ *
 var NbSearchComponent = /** @class */ (function () {
-    function NbSearchComponent(searchService, themeService, router) {
+    function NbSearchComponent(searchService, componentFactoryResolver, themeService, router) {
         this.searchService = searchService;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.themeService = themeService;
@@ -233,3 +249,4 @@ this.router = router;
         var _this = this;
-        this.themeService.appendToLayoutTop(NbSearchFieldComponent)
+        var factory = this.componentFactoryResolver.resolveComponentFactory(NbSearchFieldComponent);
+        this.themeService.appendToLayoutTop(factory)
             .subscribe(function (componentRef) {
@@ -277,2 +294,3 @@ _this.connectToSearchField(componentRef);
         { type: NbSearchService, },
+        { type: ComponentFactoryResolver, },
         { type: NbThemeService, },
@@ -279,0 +297,0 @@ { type: Router, },

components/search/search.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbSearchFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":33,"character":1},"arguments":[{"selector":"nb-search-field","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":19},"member":"OnPush"},"styleUrls":["styles/search.component.modal-zoomin.css","styles/search.component.layout-rotate.css","styles/search.component.modal-move.css","styles/search.component.curtain.css","styles/search.component.column-curtain.css","styles/search.component.modal-drop.css","styles/search.component.modal-half.css"],"template":"\n    <div class=\"search\" (keyup.esc)=\"closeSearch()\">\n      <button (click)=\"closeSearch()\">\n        <i class=\"nb-close-circled\"></i>\n      </button>\n      <div class=\"form-wrapper\">\n        <form class=\"form\" (keyup.enter)=\"submitSearch(searchInput.value)\">\n          <div class=\"form-content\">\n            <input class=\"search-input\"\n                   #searchInput\n                   autocomplete=\"off\"\n                   [attr.placeholder]=\"placeholder\"\n                   tabindex=\"-1\"\n                   (blur)=\"tabOut.next($event)\"/>\n          </div>\n          <span class=\"info\">{{ hint }}</span>\n        </form>\n      </div>\n    </div>\n  "}]}],"members":{"searchType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"searchClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"tabOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":3}}]}],"inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":85,"character":3},"arguments":["searchInput"]}]}],"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":87,"character":12},"arguments":["class.show"]}]}],"modalZoomin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":89,"character":3},"arguments":["class.modal-zoomin"]}]}],"rotateLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":94,"character":3},"arguments":["class.rotate-layout"]}]}],"modalMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":99,"character":3},"arguments":["class.modal-move"]}]}],"curtain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":104,"character":3},"arguments":["class.curtain"]}]}],"columnCurtain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":109,"character":3},"arguments":["class.column-curtain"]}]}],"modalDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":114,"character":3},"arguments":["class.modal-drop"]}]}],"modalHalf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":119,"character":3},"arguments":["class.modal-half"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":3}}]}],"closeSearch":[{"__symbolic":"method"}],"submitSearch":[{"__symbolic":"method"}]},"statics":{"TYPE_MODAL_ZOOMIN":"modal-zoomin","TYPE_ROTATE_LAYOUT":"rotate-layout","TYPE_MODAL_MOVE":"modal-move","TYPE_CURTAIN":"curtain","TYPE_COLUMN_CURTAIN":"column-curtain","TYPE_MODAL_DROP":"modal-drop","TYPE_MODAL_HALF":"modal-half"}},"NbSearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":154,"character":1},"arguments":[{"selector":"nb-search","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":156,"character":19},"member":"OnPush"},"styleUrls":["styles/search.component.css"],"template":"\n    <button class=\"start-search\" (click)=\"openSearch()\">\n      <i class=\"nb-search\"></i>\n    </button>\n    <ng-template #attachedSearchContainer></ng-template>\n  "}]}],"members":{"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":175,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":188,"character":3}}]}],"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":190,"character":3},"arguments":["class.show"]}]}],"attachedSearchContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":192,"character":3},"arguments":["attachedSearchContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":192,"character":47}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./search.service","name":"NbSearchService","line":197,"character":37},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":198,"character":36},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":199,"character":30}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":207,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"openSearch":[{"__symbolic":"method"}],"connectToSearchField":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbSearchFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"nb-search-field","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":36,"character":19},"member":"OnPush"},"styleUrls":["styles/search.component.modal-zoomin.css","styles/search.component.layout-rotate.css","styles/search.component.modal-move.css","styles/search.component.curtain.css","styles/search.component.column-curtain.css","styles/search.component.modal-drop.css","styles/search.component.modal-half.css"],"template":"\n    <div class=\"search\" (keyup.esc)=\"closeSearch()\">\n      <button (click)=\"closeSearch()\">\n        <i class=\"nb-close-circled\"></i>\n      </button>\n      <div class=\"form-wrapper\">\n        <form class=\"form\" (keyup.enter)=\"submitSearch(searchInput.value)\">\n          <div class=\"form-content\">\n            <input class=\"search-input\"\n                   #searchInput\n                   autocomplete=\"off\"\n                   [attr.placeholder]=\"placeholder\"\n                   tabindex=\"-1\"\n                   (blur)=\"tabOut.next($event)\"/>\n          </div>\n          <span class=\"info\">{{ hint }}</span>\n        </form>\n      </div>\n    </div>\n  "}]}],"members":{"searchType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"searchClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":3}}]}],"tabOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":3}}]}],"inputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":86,"character":3},"arguments":["searchInput"]}]}],"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":88,"character":12},"arguments":["class.show"]}]}],"modalZoomin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":90,"character":3},"arguments":["class.modal-zoomin"]}]}],"rotateLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":95,"character":3},"arguments":["class.rotate-layout"]}]}],"modalMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":100,"character":3},"arguments":["class.modal-move"]}]}],"curtain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":105,"character":3},"arguments":["class.curtain"]}]}],"columnCurtain":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":110,"character":3},"arguments":["class.column-curtain"]}]}],"modalDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":115,"character":3},"arguments":["class.modal-drop"]}]}],"modalHalf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":120,"character":3},"arguments":["class.modal-half"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":3}}]}],"closeSearch":[{"__symbolic":"method"}],"submitSearch":[{"__symbolic":"method"}]},"statics":{"TYPE_MODAL_ZOOMIN":"modal-zoomin","TYPE_ROTATE_LAYOUT":"rotate-layout","TYPE_MODAL_MOVE":"modal-move","TYPE_CURTAIN":"curtain","TYPE_COLUMN_CURTAIN":"column-curtain","TYPE_MODAL_DROP":"modal-drop","TYPE_MODAL_HALF":"modal-half"}},"NbSearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":170,"character":1},"arguments":[{"selector":"nb-search","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":172,"character":19},"member":"OnPush"},"styleUrls":["styles/search.component.css"],"template":"\n    <button class=\"start-search\" (click)=\"openSearch()\">\n      <i class=\"nb-search\"></i>\n    </button>\n    <ng-template #attachedSearchContainer></ng-template>\n  "}]}],"members":{"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":191,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":197,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":3}}]}],"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":206,"character":3},"arguments":["class.show"]}]}],"attachedSearchContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":208,"character":3},"arguments":["attachedSearchContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":208,"character":47}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./search.service","name":"NbSearchService","line":213,"character":37},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":214,"character":48},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":215,"character":36},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":216,"character":30}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"openSearch":[{"__symbolic":"method"}],"connectToSearchField":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

components/search/search.service.d.ts

 import { Observable } from 'rxjs';
 /**
- * Search component service, connects you code to a page-level search component.
+ * Search component service, connects your code to a page-level search component.
  */
@@ -5,0 +5,0 @@ export declare class NbSearchService {

components/search/search.service.js

@@ -10,3 +10,3 @@ /**
 /**
- * Search component service, connects you code to a page-level search component.
+ * Search component service, connects your code to a page-level search component.
  */
@@ -13,0 +13,0 @@ var NbSearchService = /** @class */ (function () {

components/sidebar/sidebar.component.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { OnInit, OnDestroy, ElementRef } from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, OnChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
@@ -30,4 +30,6 @@ import { NbThemeService } from '../../services/theme.service';
  *
+ * @stacked-example(Showcase, sidebar/sidebar-showcase.component)
+ *
  * Sidebar can be placed on the left or the right side of the layout,
- * or on start or end position of layout (depends on document direction, left to right or right to left)
+ * or on start/end position of layout (depends on document direction, left to right or right to left)
  * It can be fixed (shown above the content) or can push the layout when opened.
@@ -38,26 +40,10 @@ *
  *
+ * Compacted sidebar example:
+ * @stacked-example(Compacted Sidebar, sidebar/sidebar-compacted.component)
+ *
  * Sidebar also supports a `responsive` behavior, listening to window size change and changing its size respectably.
  *
- * @example Minimal sidebar example
+ * @additional-example(Right Sidebar, sidebar/sidebar-right.component)
+ * @additional-example(Fixed Sidebar, sidebar/sidebar-fixed.component)
  *
- * ```
- * <nb-sidebar>
- *   Sidebar content.
- * </nb-sidebar>
- * ```
- *
- * @example Example of fixed sidebar located on the left side, initially collapsed.
- *
- * ```
- * <nb-sidebar left fixed state="collapsed">
- *  <nb-sidebar-header>Header</nb-sidebar-header>
- *
- *    Sidebar content, menu or another component here.
- *
- *  <nb-sidebar-footer>
- *    Footer components here
- *  </nb-sidebar-footer>
- * </nb-sidebar>
- * ```
- *
  * @styles
@@ -78,3 +64,3 @@ *
  */
-export declare class NbSidebarComponent implements OnInit, OnDestroy {
+export declare class NbSidebarComponent implements OnChanges, OnInit, OnDestroy {
     private sidebarService;
@@ -142,2 +128,18 @@ private themeService;
     tag: string;
+    /**
+     * Controls on which screen sizes sidebar should be switched to compacted state.
+     * Works only when responsive mode is on.
+     * Default values are `['xs', 'is', 'sm', 'md', 'lg']`.
+     *
+     * @type string[]
+     */
+    compactedBreakpoints: string[];
+    /**
+     * Controls on which screen sizes sidebar should be switched to collapsed state.
+     * Works only when responsive mode is on.
+     * Default values are `['xs', 'is']`.
+     *
+     * @type string[]
+     */
+    collapsedBreakpoints: string[];
     private mediaQuerySubscription;
@@ -147,2 +149,3 @@ private responsiveState;
     toggleResponsive(enabled: boolean): void;
+    ngOnChanges(changes: any): void;
     ngOnInit(): void;
@@ -168,5 +171,5 @@ ngOnDestroy(): void;
      *
-     * @example Toggle sidebar state
+     * Toggle sidebar state
      *
-     * ```
+     * ```ts
      * this.sidebar.toggle(true);
@@ -173,0 +176,0 @@ * ```

components/sidebar/sidebar.component.js

@@ -50,4 +50,6 @@ /**
  *
+ * @stacked-example(Showcase, sidebar/sidebar-showcase.component)
+ *
  * Sidebar can be placed on the left or the right side of the layout,
- * or on start or end position of layout (depends on document direction, left to right or right to left)
+ * or on start/end position of layout (depends on document direction, left to right or right to left)
  * It can be fixed (shown above the content) or can push the layout when opened.
@@ -58,26 +60,10 @@ *
  *
+ * Compacted sidebar example:
+ * @stacked-example(Compacted Sidebar, sidebar/sidebar-compacted.component)
+ *
  * Sidebar also supports a `responsive` behavior, listening to window size change and changing its size respectably.
  *
- * @example Minimal sidebar example
+ * @additional-example(Right Sidebar, sidebar/sidebar-right.component)
+ * @additional-example(Fixed Sidebar, sidebar/sidebar-fixed.component)
  *
- * ```
- * <nb-sidebar>
- *   Sidebar content.
- * </nb-sidebar>
- * ```
- *
- * @example Example of fixed sidebar located on the left side, initially collapsed.
- *
- * ```
- * <nb-sidebar left fixed state="collapsed">
- *  <nb-sidebar-header>Header</nb-sidebar-header>
- *
- *    Sidebar content, menu or another component here.
- *
- *  <nb-sidebar-footer>
- *    Footer components here
- *  </nb-sidebar-footer>
- * </nb-sidebar>
- * ```
- *
  * @styles
@@ -110,2 +96,19 @@ *
         this.endValue = false;
+        // TODO: get width by the key and define only max width for the tablets and mobiles
+        /**
+           * Controls on which screen sizes sidebar should be switched to compacted state.
+           * Works only when responsive mode is on.
+           * Default values are `['xs', 'is', 'sm', 'md', 'lg']`.
+           *
+           * @type string[]
+           */
+        this.compactedBreakpoints = ['xs', 'is', 'sm', 'md', 'lg'];
+        /**
+           * Controls on which screen sizes sidebar should be switched to collapsed state.
+           * Works only when responsive mode is on.
+           * Default values are `['xs', 'is']`.
+           *
+           * @type string[]
+           */
+        this.collapsedBreakpoints = ['xs', 'is'];
         this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_PC;
@@ -221,3 +224,2 @@ }
             this.responsiveValue = convertToBoolProperty(val);
-            this.toggleResponsive(this.responsiveValue);
         },
@@ -235,2 +237,7 @@ enumerable: true,
     };
+    NbSidebarComponent.prototype.ngOnChanges = function (changes) {
+        if (changes.responsive) {
+            this.toggleResponsive(this.responsiveValue);
+        }
+    };
     NbSidebarComponent.prototype.ngOnInit = function () {
@@ -276,3 +283,3 @@ var _this = this;
             // if we clicked on span - get the link
-            if (linkChildren.indexOf(link.tagName.toLowerCase()) !== -1 && link.parentNode) {
+            if (linkChildren.includes(link.tagName.toLowerCase()) && link.parentNode) {
                 link = event.target.parentNode;
@@ -327,5 +334,5 @@ }
      *
-     * @example Toggle sidebar state
+     * Toggle sidebar state
      *
-     * ```
+     * ```ts
      * this.sidebar.toggle(true);
@@ -339,5 +346,5 @@ * ```
        *
-       * @example Toggle sidebar state
+       * Toggle sidebar state
        *
-       * ```
+       * ```ts
        * this.sidebar.toggle(true);
@@ -351,5 +358,5 @@ * ```
        *
-       * @example Toggle sidebar state
+       * Toggle sidebar state
        *
-       * ```
+       * ```ts
        * this.sidebar.toggle(true);
@@ -367,7 +374,7 @@ * ```
         if (compact) {
-            this.state = closedStates.indexOf(this.stateValue) >= 0 ?
+            this.state = closedStates.includes(this.stateValue) ?
                 NbSidebarComponent.STATE_EXPANDED : NbSidebarComponent.STATE_COMPACTED;
         }
         else {
-            this.state = closedStates.indexOf(this.stateValue) >= 0 ?
+            this.state = closedStates.includes(this.stateValue) ?
                 NbSidebarComponent.STATE_EXPANDED : NbSidebarComponent.STATE_COLLAPSED;
@@ -381,6 +388,5 @@ }
             var prev = _a[0], current = _a[1];
-            // TODO: get width by the key and define only max width for the tablets and mobiles
-            var tablet = ['xs', 'is', 'sm', 'md', 'lg'];
-            var mobile = ['xs', 'is'];
-            if (tablet.indexOf(current.name) !== -1) {
+            var isCollapsed = _this.collapsedBreakpoints.includes(current.name);
+            var isCompacted = _this.compactedBreakpoints.includes(current.name);
+            if (isCompacted) {
                 _this.fixed = true;
@@ -390,7 +396,8 @@ _this.compact();
             }
-            if (mobile.indexOf(current.name) !== -1) {
+            if (isCollapsed) {
+                _this.fixed = true;
                 _this.collapse();
                 _this.responsiveState = NbSidebarComponent.RESPONSIVE_STATE_MOBILE;
             }
-            if (tablet.indexOf(current.name) === -1 && prev.width < current.width) {
+            if (!isCollapsed && !isCollapsed && prev.width < current.width) {
                 _this.expand();
@@ -441,2 +448,4 @@ _this.fixed = false;
         "tag": [{ type: Input },],
+        "compactedBreakpoints": [{ type: Input },],
+        "collapsedBreakpoints": [{ type: Input },],
     };
@@ -443,0 +452,0 @@ return NbSidebarComponent;

components/sidebar/sidebar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbSidebarHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"nb-sidebar-header","template":"\n    <ng-content></ng-content>\n  "}]}]},"NbSidebarFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"nb-sidebar-footer","template":"\n    <ng-content></ng-content>\n  "}]}]},"NbSidebarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":95,"character":1},"arguments":[{"selector":"nb-sidebar","styleUrls":["./sidebar.component.css"],"template":"\n    <div class=\"main-container\">\n      <ng-content select=\"nb-sidebar-header\"></ng-content>\n      <div class=\"scrollable\" (click)=\"onClick($event)\">\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"nb-sidebar-footer\"></ng-content>\n    </div>\n  "}]}],"members":{"fixedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":123,"character":3},"arguments":["class.fixed"]}]}],"rightValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":124,"character":3},"arguments":["class.right"]}]}],"leftValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":125,"character":3},"arguments":["class.left"]}]}],"startValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":126,"character":3},"arguments":["class.start"]}]}],"endValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":127,"character":3},"arguments":["class.end"]}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":130,"character":3},"arguments":["class.expanded"]}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":134,"character":3},"arguments":["class.collapsed"]}]}],"compacted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":138,"character":3},"arguments":["class.compacted"]}]}],"right":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":147,"character":3}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":3}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":3}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":183,"character":3}}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":195,"character":3}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":3}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":213,"character":3}}]}],"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":225,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./sidebar.service","name":"NbSidebarService","line":230,"character":38},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":231,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":232,"character":31}]}],"toggleResponsive":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"compact":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onMediaQueryChanges":[{"__symbolic":"method"}],"responsiveEnabled":[{"__symbolic":"method"}]},"statics":{"STATE_EXPANDED":"expanded","STATE_COLLAPSED":"collapsed","STATE_COMPACTED":"compacted","RESPONSIVE_STATE_MOBILE":"mobile","RESPONSIVE_STATE_TABLET":"tablet","RESPONSIVE_STATE_PC":"pc"}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbSidebarHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"nb-sidebar-header","template":"\n    <ng-content></ng-content>\n  "}]}]},"NbSidebarFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"nb-sidebar-footer","template":"\n    <ng-content></ng-content>\n  "}]}]},"NbSidebarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":81,"character":1},"arguments":[{"selector":"nb-sidebar","styleUrls":["./sidebar.component.css"],"template":"\n    <div class=\"main-container\">\n      <ng-content select=\"nb-sidebar-header\"></ng-content>\n      <div class=\"scrollable\" (click)=\"onClick($event)\">\n        <ng-content></ng-content>\n      </div>\n      <ng-content select=\"nb-sidebar-footer\"></ng-content>\n    </div>\n  "}]}],"members":{"fixedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":109,"character":3},"arguments":["class.fixed"]}]}],"rightValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":110,"character":3},"arguments":["class.right"]}]}],"leftValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":111,"character":3},"arguments":["class.left"]}]}],"startValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":112,"character":3},"arguments":["class.start"]}]}],"endValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":113,"character":3},"arguments":["class.end"]}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":116,"character":3},"arguments":["class.expanded"]}]}],"collapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":120,"character":3},"arguments":["class.collapsed"]}]}],"compacted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":124,"character":3},"arguments":["class.compacted"]}]}],"right":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":3}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":3}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":3}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":3}}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":3}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":190,"character":3}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":199,"character":3}}]}],"tag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":3}}]}],"compactedBreakpoints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":220,"character":3}}]}],"collapsedBreakpoints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":229,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./sidebar.service","name":"NbSidebarService","line":234,"character":38},{"__symbolic":"reference","module":"../../services/theme.service","name":"NbThemeService","line":235,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":236,"character":21}]}],"toggleResponsive":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClick":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"compact":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"onMediaQueryChanges":[{"__symbolic":"method"}],"responsiveEnabled":[{"__symbolic":"method"}]},"statics":{"STATE_EXPANDED":"expanded","STATE_COLLAPSED":"collapsed","STATE_COMPACTED":"compacted","RESPONSIVE_STATE_MOBILE":"mobile","RESPONSIVE_STATE_TABLET":"tablet","RESPONSIVE_STATE_PC":"pc"}}}}]

components/sidebar/sidebar.service.d.ts

@@ -6,2 +6,5 @@ import { Observable } from 'rxjs';
  * Root module service to control the sidebar from any part of the app.
+ *
+ * Allows you to change sidebar state dynamically from any part of the app:
+ * @stacked-example(Sidebar State, sidebar/sidebar-toggle.component)
  */
@@ -8,0 +11,0 @@ export declare class NbSidebarService {

components/sidebar/sidebar.service.js

@@ -13,2 +13,5 @@ /**
  * Root module service to control the sidebar from any part of the app.
+ *
+ * Allows you to change sidebar state dynamically from any part of the app:
+ * @stacked-example(Sidebar State, sidebar/sidebar-toggle.component)
  */
@@ -15,0 +18,0 @@ var NbSidebarService = /** @class */ (function () {

components/sidebar/sidebar.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbSidebarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":15,"character":1}}],"members":{"onToggle":[{"__symbolic":"method"}],"onExpand":[{"__symbolic":"method"}],"onCollapse":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbSidebarService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":18,"character":1}}],"members":{"onToggle":[{"__symbolic":"method"}],"onExpand":[{"__symbolic":"method"}],"onCollapse":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"expand":[{"__symbolic":"method"}],"collapse":[{"__symbolic":"method"}]}}}}]

components/tabset/tabset.component.d.ts

@@ -10,2 +10,10 @@ /**
  * Specific tab container.
+ *
+ * ```ts
+ * <nb-tab tabTitle="Users"
+ *   badgeText="99+"
+ *   badgeStatus="danger">
+ *   <p>List of <strong>users</strong>.</p>
+ * </nb-tab>
+ ```
  */
@@ -23,2 +31,3 @@ export declare class NbTabComponent {
      * Lazy load content before tab selection
+     * TODO: rename, as lazy is by default, and this is more `instant load`
      * @param {boolean} val
@@ -51,7 +60,7 @@ */
  * Dynamic tabset component.
- * Renders `<nb-tab></ng-tab> containers inside.
+ * @stacked-example(Showcase, tabset/tabset-showcase.component)
  *
- * @example Basic tabset example
+ * Basic tabset example
  *
- * ```
+ * ```html
  * <nb-tabset>
@@ -65,3 +74,9 @@ *  <nb-tab tabTitle="Simple Tab #1">
  * </nb-tabset>
+ * ```
+ * It is also possible to set a badge to a particular tab:
+ * @stacked-example(Tab With Badge, tabset/tabset-badge.component)
  *
+ * and we can set it to full a width of a parent component
+ * @stacked-example(Full Width, tabset/tabset-width.component)
+ *
  * @styles
@@ -68,0 +83,0 @@ *

components/tabset/tabset.component.js

@@ -11,2 +11,10 @@ /**
  * Specific tab container.
+ *
+ * ```ts
+ * <nb-tab tabTitle="Users"
+ *   badgeText="99+"
+ *   badgeStatus="danger">
+ *   <p>List of <strong>users</strong>.</p>
+ * </nb-tab>
+ ```
  */
@@ -38,2 +46,3 @@ var NbTabComponent = /** @class */ (function () {
            * Lazy load content before tab selection
+           * TODO: rename, as lazy is by default, and this is more `instant load`
            * @param {boolean} val
@@ -74,7 +83,7 @@ */
  * Dynamic tabset component.
- * Renders `<nb-tab></ng-tab> containers inside.
+ * @stacked-example(Showcase, tabset/tabset-showcase.component)
  *
- * @example Basic tabset example
+ * Basic tabset example
  *
- * ```
+ * ```html
  * <nb-tabset>
@@ -88,3 +97,9 @@ *  <nb-tab tabTitle="Simple Tab #1">
  * </nb-tabset>
+ * ```
+ * It is also possible to set a badge to a particular tab:
+ * @stacked-example(Tab With Badge, tabset/tabset-badge.component)
  *
+ * and we can set it to full a width of a parent component
+ * @stacked-example(Full Width, tabset/tabset-width.component)
+ *
  * @styles
@@ -91,0 +106,0 @@ *

components/tabset/tabset.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbTabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"nb-tab","template":"\n    <ng-container *ngIf=\"init\">\n      <ng-content></ng-content>\n    </ng-container>\n  "}]}],"members":{"tabTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"route":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"activeValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":37,"character":3},"arguments":["class.content-active"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"lazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"badgeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"badgeStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"badgePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}]}},"NbTabsetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":130,"character":1},"arguments":[{"selector":"nb-tabset","styleUrls":["./tabset.component.css"],"template":"\n    <ul>\n      <li *ngFor=\"let tab of tabs\"\n          (click)=\"selectTab(tab)\"\n          [class.active]=\"tab.active\">\n        <a href (click)=\"$event.preventDefault()\">{{ tab.tabTitle }}</a>\n        <nb-badge *ngIf=\"tab.badgeText\"\n          [text]=\"tab.badgeText\"\n          [status]=\"tab.badgeStatus\"\n          [position]=\"tab.badgePosition\">\n        </nb-badge>\n      </li>\n    </ul>\n    <ng-content select=\"nb-tab\"></ng-content>\n  "}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":151,"character":3},"arguments":[{"__symbolic":"reference","name":"NbTabComponent"}]}]}],"fullWidthValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":153,"character":3},"arguments":["class.full-width"]}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":160,"character":3}}]}],"routeParam":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":169,"character":3}}]}],"changeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":175,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":177,"character":29}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbTabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"nb-tab","template":"\n    <ng-container *ngIf=\"init\">\n      <ng-content></ng-content>\n    </ng-container>\n  "}]}],"members":{"tabTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"route":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"activeValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":45,"character":3},"arguments":["class.content-active"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"lazyLoad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"badgeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"badgeStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"badgePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}]}},"NbTabsetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":145,"character":1},"arguments":[{"selector":"nb-tabset","styleUrls":["./tabset.component.css"],"template":"\n    <ul>\n      <li *ngFor=\"let tab of tabs\"\n          (click)=\"selectTab(tab)\"\n          [class.active]=\"tab.active\">\n        <a href (click)=\"$event.preventDefault()\">{{ tab.tabTitle }}</a>\n        <nb-badge *ngIf=\"tab.badgeText\"\n          [text]=\"tab.badgeText\"\n          [status]=\"tab.badgeStatus\"\n          [position]=\"tab.badgePosition\">\n        </nb-badge>\n      </li>\n    </ul>\n    <ng-content select=\"nb-tab\"></ng-content>\n  "}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":166,"character":3},"arguments":[{"__symbolic":"reference","name":"NbTabComponent"}]}]}],"fullWidthValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":168,"character":3},"arguments":["class.full-width"]}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":175,"character":3}}]}],"routeParam":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":3}}]}],"changeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":190,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":192,"character":29}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}]}}}}]

components/user/user.component.d.ts

 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 /**
  * Represents a component showing a user avatar (picture) with a user name on the right.
+ * @stacked-example(Showcase, user/user-showcase.component)
  *
+ * ```ts
+ *   <nb-user name="Jonh Doe" title="Engineer"></nb-user>
+ * ```
  * Can be used as a user profile link.
  *
+ * Available in multiple sizes:
+ * @stacked-example(Multiple Sizes, user/user-sizes.component)
+ *
  * @styles
@@ -8,0 +15,0 @@ *

components/user/user.component.js

@@ -11,5 +11,12 @@ /**
  * Represents a component showing a user avatar (picture) with a user name on the right.
+ * @stacked-example(Showcase, user/user-showcase.component)
  *
+ * ```ts
+ *   <nb-user name="Jonh Doe" title="Engineer"></nb-user>
+ * ```
  * Can be used as a user profile link.
  *
+ * Available in multiple sizes:
+ * @stacked-example(Multiple Sizes, user/user-sizes.component)
+ *
  * @styles
@@ -16,0 +23,0 @@ *

components/user/user.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbUserComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"nb-user","styleUrls":["./user.component.css"],"templateUrl":"./user.component.html"}]}],"members":{"inverseValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":50,"character":3},"arguments":["class.inverse"]}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":52,"character":3},"arguments":["class.small"]}]}],"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":57,"character":3},"arguments":["class.medium"]}]}],"large":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":62,"character":3},"arguments":["class.large"]}]}],"xlarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":67,"character":3},"arguments":["class.xlarge"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"picture":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3}}]}],"showName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":3}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":3}}]}],"showInitials":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":3}}]}],"onlyPicture":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"inverse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":3}}]}],"badgeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":157,"character":3}}]}],"badgeStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"badgePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":181,"character":36}]}],"getInitials":[{"__symbolic":"method"}]},"statics":{"SIZE_SMALL":"small","SIZE_MEDIUM":"medium","SIZE_LARGE":"large","SIZE_XLARGE":"xlarge"}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbUserComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":35,"character":1},"arguments":[{"selector":"nb-user","styleUrls":["./user.component.css"],"templateUrl":"./user.component.html"}]}],"members":{"inverseValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":57,"character":3},"arguments":["class.inverse"]}]}],"small":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":59,"character":3},"arguments":["class.small"]}]}],"medium":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":64,"character":3},"arguments":["class.medium"]}]}],"large":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":69,"character":3},"arguments":["class.large"]}]}],"xlarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":74,"character":3},"arguments":["class.xlarge"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"picture":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}}]}],"showName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":3}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"showInitials":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"onlyPicture":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":3}}]}],"inverse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":3}}]}],"badgeText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"badgeStatus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":3}}]}],"badgePosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":188,"character":36}]}],"getInitials":[{"__symbolic":"method"}]},"statics":{"SIZE_SMALL":"small","SIZE_MEDIUM":"medium","SIZE_LARGE":"large","SIZE_XLARGE":"xlarge"}}}}]

index.d.ts

@@ -33,1 +33,5 @@ /**
 export * from './components/context-menu/context-menu.module';
+export * from './components/progress-bar/progress-bar.component';
+export * from './components/progress-bar/progress-bar.module';
+export * from './components/alert/alert.component';
+export * from './components/alert/alert.module';

index.js

@@ -33,2 +33,6 @@ /**
 export * from './components/context-menu/context-menu.module';
+export * from './components/progress-bar/progress-bar.component';
+export * from './components/progress-bar/progress-bar.module';
+export * from './components/alert/alert.component';
+export * from './components/alert/alert.module';
 //# sourceMappingURL=index.js.map

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./theme.options"},{"from":"./theme.module"},{"from":"./services/theme.service"},{"from":"./services/spinner.service"},{"from":"./services/breakpoints.service"},{"from":"./services/color.helper"},{"from":"./services/direction.service"},{"from":"./components/card/card.module"},{"from":"./components/layout/layout.module"},{"from":"./components/menu/menu.module"},{"from":"./components/menu/menu.service","export":["NbMenuService","NbMenuItem"]},{"from":"./components/route-tabset/route-tabset.module"},{"from":"./components/sidebar/sidebar.module"},{"from":"./components/sidebar/sidebar.service"},{"from":"./components/tabset/tabset.module"},{"from":"./components/user/user.module"},{"from":"./components/actions/actions.module"},{"from":"./components/search/search.module"},{"from":"./components/search/search.service"},{"from":"./components/checkbox/checkbox.component"},{"from":"./components/checkbox/checkbox.module"},{"from":"./components/badge/badge.component"},{"from":"./components/badge/badge.module"},{"from":"./components/popover/popover.directive"},{"from":"./components/popover/popover.module"},{"from":"./components/context-menu/context-menu.directive"},{"from":"./components/context-menu/context-menu.module"}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./theme.options"},{"from":"./theme.module"},{"from":"./services/theme.service"},{"from":"./services/spinner.service"},{"from":"./services/breakpoints.service"},{"from":"./services/color.helper"},{"from":"./services/direction.service"},{"from":"./components/card/card.module"},{"from":"./components/layout/layout.module"},{"from":"./components/menu/menu.module"},{"from":"./components/menu/menu.service","export":["NbMenuService","NbMenuItem"]},{"from":"./components/route-tabset/route-tabset.module"},{"from":"./components/sidebar/sidebar.module"},{"from":"./components/sidebar/sidebar.service"},{"from":"./components/tabset/tabset.module"},{"from":"./components/user/user.module"},{"from":"./components/actions/actions.module"},{"from":"./components/search/search.module"},{"from":"./components/search/search.service"},{"from":"./components/checkbox/checkbox.component"},{"from":"./components/checkbox/checkbox.module"},{"from":"./components/badge/badge.component"},{"from":"./components/badge/badge.module"},{"from":"./components/popover/popover.directive"},{"from":"./components/popover/popover.module"},{"from":"./components/context-menu/context-menu.directive"},{"from":"./components/context-menu/context-menu.module"},{"from":"./components/progress-bar/progress-bar.component"},{"from":"./components/progress-bar/progress-bar.module"},{"from":"./components/alert/alert.component"},{"from":"./components/alert/alert.module"}]}]

package.json

 {
   "name": "@nebular/theme",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0-rc.9",
   "description": "@nebular/theme",
@@ -5,0 +5,0 @@ "main": "./bundles/theme.umd.js",

services/breakpoints.service.js

@@ -7,3 +7,3 @@ /**
 import { Inject, Injectable } from '@angular/core';
-import { nbMediaBreakpointsToken } from '../theme.options';
+import { NB_MEDIA_BREAKPOINTS } from '../theme.options';
 export var DEFAULT_MEDIA_BREAKPOINTS = [
@@ -136,3 +136,3 @@ {
     NbMediaBreakpointsService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Inject, args: [nbMediaBreakpointsToken,] },] },
+        { type: undefined, decorators: [{ type: Inject, args: [NB_MEDIA_BREAKPOINTS,] },] },
     ]; };
@@ -139,0 +139,0 @@ return NbMediaBreakpointsService;

services/breakpoints.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbMediaBreakpoint":{"__symbolic":"interface"},"DEFAULT_MEDIA_BREAKPOINTS":[{"name":"xs","width":0},{"name":"is","width":400},{"name":"sm","width":576},{"name":"md","width":768},{"name":"lg","width":992},{"name":"xl","width":1200},{"name":"xxl","width":1400},{"name":"xxxl","width":1600}],"NbMediaBreakpointsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":60,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":65,"character":15},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"nbMediaBreakpointsToken","line":65,"character":22}]}]],"parameters":[null]}],"getByWidth":[{"__symbolic":"method"}],"getByName":[{"__symbolic":"method"}],"getBreakpoints":[{"__symbolic":"method"}],"getBreakpointsMap":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbMediaBreakpoint":{"__symbolic":"interface"},"DEFAULT_MEDIA_BREAKPOINTS":[{"name":"xs","width":0},{"name":"is","width":400},{"name":"sm","width":576},{"name":"md","width":768},{"name":"lg","width":992},{"name":"xl","width":1200},{"name":"xxl","width":1400},{"name":"xxxl","width":1600}],"NbMediaBreakpointsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":60,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":65,"character":15},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"NB_MEDIA_BREAKPOINTS","line":65,"character":22}]}]],"parameters":[null]}],"getByWidth":[{"__symbolic":"method"}],"getByName":[{"__symbolic":"method"}],"getBreakpoints":[{"__symbolic":"method"}],"getBreakpointsMap":[{"__symbolic":"method"}]}}}}]

services/direction.service.d.ts

@@ -16,3 +16,3 @@ import { InjectionToken } from '@angular/core';
  * Layout Direction Service.
- * Allows to set or get layout direction and listen to it's changes
+ * Allows to set or get layout direction and listen to its changes
  */
@@ -19,0 +19,0 @@ export declare class NbLayoutDirectionService {

services/direction.service.js

@@ -25,3 +25,3 @@ import { InjectionToken, Optional, Inject, Injectable } from '@angular/core';
  * Layout Direction Service.
- * Allows to set or get layout direction and listen to it's changes
+ * Allows to set or get layout direction and listen to its changes
  */
@@ -28,0 +28,0 @@ var NbLayoutDirectionService = /** @class */ (function () {

services/js-themes-registry.service.js

@@ -9,6 +9,8 @@ /**
 import { COSMIC_THEME } from './js-themes/cosmic.theme';
-import { nbBuiltInJSThemesToken, nbJSThemesToken } from '../theme.options';
+import { CORPORATE_THEME } from './js-themes/corporate.theme';
+import { NB_BUILT_IN_JS_THEMES, NB_JS_THEMES } from '../theme.options';
 export var BUILT_IN_THEMES = [
     DEFAULT_THEME,
     COSMIC_THEME,
+    CORPORATE_THEME,
 ];
@@ -146,4 +148,4 @@ /**
     NbJSThemesRegistry.ctorParameters = function () { return [
-        { type: Array, decorators: [{ type: Inject, args: [nbBuiltInJSThemesToken,] },] },
-        { type: Array, decorators: [{ type: Inject, args: [nbJSThemesToken,] },] },
+        { type: Array, decorators: [{ type: Inject, args: [NB_BUILT_IN_JS_THEMES,] },] },
+        { type: Array, decorators: [{ type: Inject, args: [NB_JS_THEMES,] },] },
     ]; };
@@ -150,0 +152,0 @@ return NbJSThemesRegistry;

services/js-themes-registry.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BUILT_IN_THEMES":[{"__symbolic":"reference","module":"./js-themes/default.theme","name":"DEFAULT_THEME","line":15,"character":2},{"__symbolic":"reference","module":"./js-themes/cosmic.theme","name":"COSMIC_THEME","line":16,"character":2}],"NbJSThemesRegistry":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":23,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":28,"character":15},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"nbBuiltInJSThemesToken","line":28,"character":22}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":15},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"nbJSThemesToken","line":29,"character":22}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./js-themes/theme.options","name":"NbJSThemeOptions","line":28,"character":61}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./js-themes/theme.options","name":"NbJSThemeOptions","line":28,"character":61}]}]}],"register":[{"__symbolic":"method"}],"has":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"combineByNames":[{"__symbolic":"method"}],"isObject":[{"__symbolic":"method"}],"mergeDeep":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BUILT_IN_THEMES":[{"__symbolic":"reference","module":"./js-themes/default.theme","name":"DEFAULT_THEME","line":16,"character":2},{"__symbolic":"reference","module":"./js-themes/cosmic.theme","name":"COSMIC_THEME","line":17,"character":2},{"__symbolic":"reference","module":"./js-themes/corporate.theme","name":"CORPORATE_THEME","line":18,"character":2}],"NbJSThemesRegistry":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":25,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":15},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"NB_BUILT_IN_JS_THEMES","line":30,"character":22}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":31,"character":15},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"NB_JS_THEMES","line":31,"character":22}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./js-themes/theme.options","name":"NbJSThemeOptions","line":30,"character":60}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./js-themes/theme.options","name":"NbJSThemeOptions","line":30,"character":60}]}]}],"register":[{"__symbolic":"method"}],"has":[{"__symbolic":"method"}],"get":[{"__symbolic":"method"}],"combineByNames":[{"__symbolic":"method"}],"isObject":[{"__symbolic":"method"}],"mergeDeep":[{"__symbolic":"method"}]}}}}]

services/theme.service.d.ts

@@ -27,4 +27,15 @@ /**
     constructor(options: any, breakpointService: NbMediaBreakpointsService, jsThemesRegistry: NbJSThemesRegistry, componentFactoryResolver: ComponentFactoryResolver);
+    /**
+     * Change current application theme
+     * @param {string} name
+     */
     changeTheme(name: string): void;
     changeWindowWidth(width: number): void;
+    /**
+     * Append a component to top of the layout
+     * (useful for showing modal that should be placed heigher in the document tree)
+     *
+     * @param {Type<T> | ComponentFactory<T>} entity
+     * @returns {Observable<any>}
+     */
     appendToLayoutTop<T>(entity: Type<T> | ComponentFactory<T>): Observable<any>;
@@ -38,2 +49,6 @@ /**
     getJsTheme(): Observable<NbJSThemeOptions>;
+    /**
+     * Clears layout top
+     * @returns {Observable<any>}
+     */
     clearLayoutTop(): Observable<any>;
@@ -43,3 +58,3 @@ /**
      * Returns a pair where the first item is previous media breakpoint and the second item is current breakpoit.
-     * ```
+     * ```ts
      *  [{ name: 'xs', width: 0 }, { name: 'md', width: 768 }] // change from `xs` to `md`
@@ -50,9 +65,29 @@ * ```
     onMediaQueryChange(): Observable<NbMediaBreakpoint[]>;
+    /**
+     * Triggered when current theme is changed
+     * @returns {Observable<any>}
+     */
     onThemeChange(): Observable<any>;
     onAppendToTop(): Observable<any>;
     onClearLayoutTop(): Observable<any>;
+    /**
+     * Append a class to nb-layout
+     * @param {string} className
+     */
     appendLayoutClass(className: string): void;
+    /**
+     * Triggered when a new class is added to nb-layout through `appendLayoutClass` method
+     * @returns {Observable<any>}
+     */
     onAppendLayoutClass(): Observable<any>;
+    /**
+     * Removes a class from nb-layout
+     * @param {string} className
+     */
     removeLayoutClass(className: string): void;
+    /**
+     * Triggered when a class is removed from nb-layout through `removeLayoutClass` method
+     * @returns {Observable<any>}
+     */
     onRemoveLayoutClass(): Observable<any>;
 }

services/theme.service.js

@@ -9,3 +9,3 @@ /**
 import { map, filter, pairwise, distinctUntilChanged, startWith, share } from 'rxjs/operators';
-import { nbThemeOptionsToken } from '../theme.options';
+import { NB_THEME_OPTIONS } from '../theme.options';
 import { NbJSThemesRegistry } from './js-themes-registry.service';
@@ -32,3 +32,15 @@ import { NbMediaBreakpointsService } from './breakpoints.service';
     }
-    NbThemeService.prototype.changeTheme = function (name) {
+    /**
+     * Change current application theme
+     * @param {string} name
+     */
+    /**
+       * Change current application theme
+       * @param {string} name
+       */
+    NbThemeService.prototype.changeTheme = /**
+       * Change current application theme
+       * @param {string} name
+       */
+    function (name) {
         this.themeChanges$.next({ name: name, previous: this.currentTheme });
@@ -40,3 +52,24 @@ this.currentTheme = name;
     };
-    NbThemeService.prototype.appendToLayoutTop = function (entity) {
+    /**
+     * Append a component to top of the layout
+     * (useful for showing modal that should be placed heigher in the document tree)
+     *
+     * @param {Type<T> | ComponentFactory<T>} entity
+     * @returns {Observable<any>}
+     */
+    /**
+       * Append a component to top of the layout
+       * (useful for showing modal that should be placed heigher in the document tree)
+       *
+       * @param {Type<T> | ComponentFactory<T>} entity
+       * @returns {Observable<any>}
+       */
+    NbThemeService.prototype.appendToLayoutTop = /**
+       * Append a component to top of the layout
+       * (useful for showing modal that should be placed heigher in the document tree)
+       *
+       * @param {Type<T> | ComponentFactory<T>} entity
+       * @returns {Observable<any>}
+       */
+    function (entity) {
         var factory = entity;
@@ -74,3 +107,15 @@ if (entity instanceof Type) {
     };
-    NbThemeService.prototype.clearLayoutTop = function () {
+    /**
+     * Clears layout top
+     * @returns {Observable<any>}
+     */
+    /**
+       * Clears layout top
+       * @returns {Observable<any>}
+       */
+    NbThemeService.prototype.clearLayoutTop = /**
+       * Clears layout top
+       * @returns {Observable<any>}
+       */
+    function () {
         var observable = new BehaviorSubject(null);
@@ -84,3 +129,3 @@ this.createLayoutTop$.next({ listener: observable });
      * Returns a pair where the first item is previous media breakpoint and the second item is current breakpoit.
-     * ```
+     * ```ts
      *  [{ name: 'xs', width: 0 }, { name: 'md', width: 768 }] // change from `xs` to `md`
@@ -93,3 +138,3 @@ * ```
        * Returns a pair where the first item is previous media breakpoint and the second item is current breakpoit.
-       * ```
+       * ```ts
        *  [{ name: 'xs', width: 0 }, { name: 'md', width: 768 }] // change from `xs` to `md`
@@ -102,3 +147,3 @@ * ```
        * Returns a pair where the first item is previous media breakpoint and the second item is current breakpoit.
-       * ```
+       * ```ts
        *  [{ name: 'xs', width: 0 }, { name: 'md', width: 768 }] // change from `xs` to `md`
@@ -122,3 +167,15 @@ * ```
     };
-    NbThemeService.prototype.onThemeChange = function () {
+    /**
+     * Triggered when current theme is changed
+     * @returns {Observable<any>}
+     */
+    /**
+       * Triggered when current theme is changed
+       * @returns {Observable<any>}
+       */
+    NbThemeService.prototype.onThemeChange = /**
+       * Triggered when current theme is changed
+       * @returns {Observable<any>}
+       */
+    function () {
         return this.themeChanges$.pipe(share());
@@ -132,12 +189,60 @@ };
     };
-    NbThemeService.prototype.appendLayoutClass = function (className) {
+    /**
+     * Append a class to nb-layout
+     * @param {string} className
+     */
+    /**
+       * Append a class to nb-layout
+       * @param {string} className
+       */
+    NbThemeService.prototype.appendLayoutClass = /**
+       * Append a class to nb-layout
+       * @param {string} className
+       */
+    function (className) {
         this.appendLayoutClass$.next(className);
     };
-    NbThemeService.prototype.onAppendLayoutClass = function () {
+    /**
+     * Triggered when a new class is added to nb-layout through `appendLayoutClass` method
+     * @returns {Observable<any>}
+     */
+    /**
+       * Triggered when a new class is added to nb-layout through `appendLayoutClass` method
+       * @returns {Observable<any>}
+       */
+    NbThemeService.prototype.onAppendLayoutClass = /**
+       * Triggered when a new class is added to nb-layout through `appendLayoutClass` method
+       * @returns {Observable<any>}
+       */
+    function () {
         return this.appendLayoutClass$.pipe(share());
     };
-    NbThemeService.prototype.removeLayoutClass = function (className) {
+    /**
+     * Removes a class from nb-layout
+     * @param {string} className
+     */
+    /**
+       * Removes a class from nb-layout
+       * @param {string} className
+       */
+    NbThemeService.prototype.removeLayoutClass = /**
+       * Removes a class from nb-layout
+       * @param {string} className
+       */
+    function (className) {
         this.removeLayoutClass$.next(className);
     };
-    NbThemeService.prototype.onRemoveLayoutClass = function () {
+    /**
+     * Triggered when a class is removed from nb-layout through `removeLayoutClass` method
+     * @returns {Observable<any>}
+     */
+    /**
+       * Triggered when a class is removed from nb-layout through `removeLayoutClass` method
+       * @returns {Observable<any>}
+       */
+    NbThemeService.prototype.onRemoveLayoutClass = /**
+       * Triggered when a class is removed from nb-layout through `removeLayoutClass` method
+       * @returns {Observable<any>}
+       */
+    function () {
         return this.removeLayoutClass$.pipe(share());
@@ -150,3 +255,3 @@ };
     NbThemeService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Inject, args: [nbThemeOptionsToken,] },] },
+        { type: undefined, decorators: [{ type: Inject, args: [NB_THEME_OPTIONS,] },] },
         { type: NbMediaBreakpointsService, },
@@ -153,0 +258,0 @@ { type: NbJSThemesRegistry, },

services/theme.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbThemeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":19,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":5},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"nbThemeOptionsToken","line":32,"character":12}]}],null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"./breakpoints.service","name":"NbMediaBreakpointsService","line":33,"character":31},{"__symbolic":"reference","module":"./js-themes-registry.service","name":"NbJSThemesRegistry","line":34,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":35,"character":38}]}],"changeTheme":[{"__symbolic":"method"}],"changeWindowWidth":[{"__symbolic":"method"}],"appendToLayoutTop":[{"__symbolic":"method"}],"getJsTheme":[{"__symbolic":"method"}],"clearLayoutTop":[{"__symbolic":"method"}],"onMediaQueryChange":[{"__symbolic":"method"}],"onThemeChange":[{"__symbolic":"method"}],"onAppendToTop":[{"__symbolic":"method"}],"onClearLayoutTop":[{"__symbolic":"method"}],"appendLayoutClass":[{"__symbolic":"method"}],"onAppendLayoutClass":[{"__symbolic":"method"}],"removeLayoutClass":[{"__symbolic":"method"}],"onRemoveLayoutClass":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbThemeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":19,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":5},"arguments":[{"__symbolic":"reference","module":"../theme.options","name":"NB_THEME_OPTIONS","line":32,"character":12}]}],null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"./breakpoints.service","name":"NbMediaBreakpointsService","line":33,"character":31},{"__symbolic":"reference","module":"./js-themes-registry.service","name":"NbJSThemesRegistry","line":34,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":35,"character":38}]}],"changeTheme":[{"__symbolic":"method"}],"changeWindowWidth":[{"__symbolic":"method"}],"appendToLayoutTop":[{"__symbolic":"method"}],"getJsTheme":[{"__symbolic":"method"}],"clearLayoutTop":[{"__symbolic":"method"}],"onMediaQueryChange":[{"__symbolic":"method"}],"onThemeChange":[{"__symbolic":"method"}],"onAppendToTop":[{"__symbolic":"method"}],"onClearLayoutTop":[{"__symbolic":"method"}],"appendLayoutClass":[{"__symbolic":"method"}],"onAppendLayoutClass":[{"__symbolic":"method"}],"removeLayoutClass":[{"__symbolic":"method"}],"onRemoveLayoutClass":[{"__symbolic":"method"}]}}}}]

theme.module.js

@@ -8,3 +8,3 @@ /**
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { nbBuiltInJSThemesToken, nbMediaBreakpointsToken, nbThemeOptionsToken, nbJSThemesToken, NB_DOCUMENT, NB_WINDOW, } from './theme.options';
+import { NB_BUILT_IN_JS_THEMES, NB_MEDIA_BREAKPOINTS, NB_THEME_OPTIONS, NB_JS_THEMES, NB_DOCUMENT, NB_WINDOW, } from './theme.options';
 import { NbThemeService } from './services/theme.service';
@@ -56,6 +56,6 @@ import { NbSpinnerService } from './services/spinner.service';
             providers: [
-                { provide: nbThemeOptionsToken, useValue: nbThemeOptions || {} },
-                { provide: nbBuiltInJSThemesToken, useValue: BUILT_IN_THEMES },
-                { provide: nbJSThemesToken, useValue: nbJSThemes || [] },
-                { provide: nbMediaBreakpointsToken, useValue: nbMediaBreakpoints || DEFAULT_MEDIA_BREAKPOINTS },
+                { provide: NB_THEME_OPTIONS, useValue: nbThemeOptions || {} },
+                { provide: NB_BUILT_IN_JS_THEMES, useValue: BUILT_IN_THEMES },
+                { provide: NB_JS_THEMES, useValue: nbJSThemes || [] },
+                { provide: NB_MEDIA_BREAKPOINTS, useValue: nbMediaBreakpoints || DEFAULT_MEDIA_BREAKPOINTS },
                 { provide: NB_WINDOW, useFactory: nbWindowFactory },
@@ -62,0 +62,0 @@ { provide: NB_DOCUMENT, useExisting: DOCUMENT },

theme.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"nbWindowFactory":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"reference","name":"window"}},"NbThemeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":33,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":35,"character":4}],"exports":[]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["nbThemeOptions","nbJSThemes","nbMediaBreakpoints","layoutDirection"],"value":{"ngModule":{"__symbolic":"reference","name":"NbThemeModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./theme.options","name":"nbThemeOptionsToken","line":60,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"nbThemeOptions"},"right":{}}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"nbBuiltInJSThemesToken","line":61,"character":19},"useValue":{"__symbolic":"reference","module":"./services/js-themes-registry.service","name":"BUILT_IN_THEMES","line":61,"character":53}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"nbJSThemesToken","line":62,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"nbJSThemes"},"right":[]}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"nbMediaBreakpointsToken","line":63,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"nbMediaBreakpoints"},"right":{"__symbolic":"reference","module":"./services/breakpoints.service","name":"DEFAULT_MEDIA_BREAKPOINTS","line":63,"character":76}}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_WINDOW","line":64,"character":19},"useFactory":{"__symbolic":"reference","name":"nbWindowFactory"}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_DOCUMENT","line":65,"character":19},"useExisting":{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":65,"character":45}},{"__symbolic":"reference","module":"./services/js-themes-registry.service","name":"NbJSThemesRegistry","line":66,"character":8},{"__symbolic":"reference","module":"./services/theme.service","name":"NbThemeService","line":67,"character":8},{"__symbolic":"reference","module":"./services/breakpoints.service","name":"NbMediaBreakpointsService","line":68,"character":8},{"__symbolic":"reference","module":"./services/spinner.service","name":"NbSpinnerService","line":69,"character":8},{"provide":{"__symbolic":"reference","module":"./services/direction.service","name":"NB_LAYOUT_DIRECTION","line":70,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"layoutDirection"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./services/direction.service","name":"NbLayoutDirection","line":70,"character":69},"member":"LTR"}}},{"__symbolic":"reference","module":"./services/direction.service","name":"NbLayoutDirectionService","line":71,"character":8}]}}}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"nbWindowFactory":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"reference","name":"window"}},"NbThemeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":33,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":35,"character":4}],"exports":[]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["nbThemeOptions","nbJSThemes","nbMediaBreakpoints","layoutDirection"],"value":{"ngModule":{"__symbolic":"reference","name":"NbThemeModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_THEME_OPTIONS","line":60,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"nbThemeOptions"},"right":{}}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_BUILT_IN_JS_THEMES","line":61,"character":19},"useValue":{"__symbolic":"reference","module":"./services/js-themes-registry.service","name":"BUILT_IN_THEMES","line":61,"character":52}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_JS_THEMES","line":62,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"nbJSThemes"},"right":[]}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_MEDIA_BREAKPOINTS","line":63,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"nbMediaBreakpoints"},"right":{"__symbolic":"reference","module":"./services/breakpoints.service","name":"DEFAULT_MEDIA_BREAKPOINTS","line":63,"character":73}}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_WINDOW","line":64,"character":19},"useFactory":{"__symbolic":"reference","name":"nbWindowFactory"}},{"provide":{"__symbolic":"reference","module":"./theme.options","name":"NB_DOCUMENT","line":65,"character":19},"useExisting":{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":65,"character":45}},{"__symbolic":"reference","module":"./services/js-themes-registry.service","name":"NbJSThemesRegistry","line":66,"character":8},{"__symbolic":"reference","module":"./services/theme.service","name":"NbThemeService","line":67,"character":8},{"__symbolic":"reference","module":"./services/breakpoints.service","name":"NbMediaBreakpointsService","line":68,"character":8},{"__symbolic":"reference","module":"./services/spinner.service","name":"NbSpinnerService","line":69,"character":8},{"provide":{"__symbolic":"reference","module":"./services/direction.service","name":"NB_LAYOUT_DIRECTION","line":70,"character":19},"useValue":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"layoutDirection"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./services/direction.service","name":"NbLayoutDirection","line":70,"character":69},"member":"LTR"}}},{"__symbolic":"reference","module":"./services/direction.service","name":"NbLayoutDirectionService","line":71,"character":8}]}}}}}}]

theme.options.d.ts

@@ -12,6 +12,6 @@ /**
 }
-export declare const nbThemeOptionsToken: InjectionToken<NbThemeOptions>;
-export declare const nbMediaBreakpointsToken: InjectionToken<NbMediaBreakpoint[]>;
-export declare const nbBuiltInJSThemesToken: InjectionToken<NbJSThemeOptions[]>;
-export declare const nbJSThemesToken: InjectionToken<NbJSThemeOptions[]>;
+export declare const NB_THEME_OPTIONS: InjectionToken<NbThemeOptions>;
+export declare const NB_MEDIA_BREAKPOINTS: InjectionToken<NbMediaBreakpoint[]>;
+export declare const NB_BUILT_IN_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;
+export declare const NB_JS_THEMES: InjectionToken<NbJSThemeOptions[]>;
 /**
@@ -18,0 +18,0 @@ * We're providing browser apis with tokens to improve testing capabilities.

theme.options.js

@@ -7,11 +7,11 @@ /**
 import { InjectionToken } from '@angular/core';
-export var nbThemeOptionsToken = new InjectionToken('NB_THEME_OPTIONS');
-export var nbMediaBreakpointsToken = new InjectionToken('NB_MEDIA_BREAKPOINTS');
-export var nbBuiltInJSThemesToken = new InjectionToken('NB_BUILT_IN_THEMES');
-export var nbJSThemesToken = new InjectionToken('NB_THEMES');
+export var NB_THEME_OPTIONS = new InjectionToken('Nebular Theme Options');
+export var NB_MEDIA_BREAKPOINTS = new InjectionToken('Nebular Media Breakpoints');
+export var NB_BUILT_IN_JS_THEMES = new InjectionToken('Nebular Built-in JS Themes');
+export var NB_JS_THEMES = new InjectionToken('Nebular JS Themes');
 /**
  * We're providing browser apis with tokens to improve testing capabilities.
  * */
-export var NB_WINDOW = new InjectionToken('NB_WINDOW');
-export var NB_DOCUMENT = new InjectionToken('NB_DOCUMENT');
+export var NB_WINDOW = new InjectionToken('Window');
+export var NB_DOCUMENT = new InjectionToken('Document');
 //# sourceMappingURL=theme.options.js.map

theme.options.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"NbThemeOptions":{"__symbolic":"interface"},"nbThemeOptionsToken":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":14,"character":39},"arguments":["NB_THEME_OPTIONS"]},"nbMediaBreakpointsToken":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":15,"character":43},"arguments":["NB_MEDIA_BREAKPOINTS"]},"nbBuiltInJSThemesToken":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":16,"character":42},"arguments":["NB_BUILT_IN_THEMES"]},"nbJSThemesToken":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":17,"character":35},"arguments":["NB_THEMES"]},"NB_WINDOW":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":22,"character":29},"arguments":["NB_WINDOW"]},"NB_DOCUMENT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":23,"character":31},"arguments":["NB_DOCUMENT"]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"NbThemeOptions":{"__symbolic":"interface"},"NB_THEME_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":14,"character":36},"arguments":["Nebular Theme Options"]},"NB_MEDIA_BREAKPOINTS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":15,"character":40},"arguments":["Nebular Media Breakpoints"]},"NB_BUILT_IN_JS_THEMES":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":16,"character":41},"arguments":["Nebular Built-in JS Themes"]},"NB_JS_THEMES":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":17,"character":32},"arguments":["Nebular JS Themes"]},"NB_WINDOW":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":22,"character":29},"arguments":["Window"]},"NB_DOCUMENT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":23,"character":31},"arguments":["Document"]}}}]

No alert changes

Improved metrics

Total package byte prevSize

1787999

increased by20.77%

Number of package files

417

increased by9.16%

Lines of code

18003

increased by17.67%

No dependency changes