@seniorsistemas/angular-components 17.7.1 → 17.7.3

package/esm5/components/timeline/components/vertical-timeline/components/vertical-items/vertical-items.component.js

@@ -12,17 +12,20 @@ var VerticalItemsComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], VerticalItemsComponent.prototype, "isActive", void 0);
+    __decorate([
+        Input()
+    ], VerticalItemsComponent.prototype, "highlightActive", void 0);
     __decorate([
         Input()
     ], VerticalItemsComponent.prototype, "isCompleted", void 0);
     VerticalItemsComponent = __decorate([
         Component({
             selector: "s-vertical-items",
-            template: "<div class=\"vertical-items\">\n   <ng-container *ngFor=\"let item of items; let index = index;\">\n      <div\n         class=\"vertical-items__item\"\n         [ngClass]=\"{\n            'vertical-items__item--small': item.testSize('small'),\n            'vertical-items__item--normal': item.testSize('normal'),\n            'vertical-items__item--completed': isCompleted,\n            'vertical-items__item--active': isActive\n         }\">\n         <div class=\"vertical-items__item__icon-wrapper\">\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isComplete]=\"isCompleted\"\n               [isActive]=\"isActive\">\n            </s-timeline-icon-item>\n            <div\n               class=\"vertical-items__item__icon-wrapper__line\"\n               [ngStyle]=\"{ 'visibility': isLast ? 'hidden' : 'visible' }\">\n            </div>\n         </div>\n         <div class=\"vertical-items__item__info\">\n            <div class=\"vertical-timeline__item__info__title\">\n               {{ item.title }}\n            </div>\n            <div class=\"vertical-items__item__info__description\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
+            template: "<div class=\"vertical-items\">\n   <ng-container *ngFor=\"let item of items; let index = index;\">\n      <div\n         class=\"vertical-items__item\"\n         [ngClass]=\"{\n            'vertical-items__item--small': item.testSize('small'),\n            'vertical-items__item--normal': item.testSize('normal'),\n            'vertical-items__item--completed': isCompleted,\n            'vertical-items__item--active': isActive\n         }\">\n         <div class=\"vertical-items__item__icon-wrapper\">\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isComplete]=\"isCompleted\"\n               [isActive]=\"isActive\"\n               [highlightActive]=\"highlightActive\">\n            </s-timeline-icon-item>\n            <div\n               class=\"vertical-items__item__icon-wrapper__line\"\n               [ngStyle]=\"{ 'visibility': isLast ? 'hidden' : 'visible' }\">\n            </div>\n         </div>\n         <div class=\"vertical-items__item__info\">\n            <div class=\"vertical-timeline__item__info__title\">\n               {{ item.title }}\n            </div>\n            <div class=\"vertical-items__item__info__description\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
             styles: [".vertical-items .vertical-items__item{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;margin-right:50px}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option .vertical-items__item__collapsed-option__line{width:3px;height:50px;background-color:#ccc}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;width:56px}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;-ms-flex-positive:1;flex-grow:1;min-height:20px;width:3px}.vertical-items .vertical-items__item .vertical-items__item__info{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-bottom:12px}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description.vertical-items__item__info__description--link{color:#428bca}.vertical-items .vertical-items__item.vertical-items__item--small .vertical-items__item__icon-wrapper__line{height:calc(100% - 4px - 8px)}.vertical-items .vertical-items__item.vertical-items__item--medium .vertical-items__item__icon-wrapper__line{height:calc(100% - 4px - 12px)}.vertical-items .vertical-items__item.vertical-items__item--big .vertical-items__item__icon-wrapper__line{height:calc(50% - 4px - 20px)}.vertical-items .vertical-items__item.vertical-items__item--completed .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#0c9348}"]
         })
     ], VerticalItemsComponent);
     return VerticalItemsComponent;
 }());
 export { VerticalItemsComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtaXRlbXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdGltZWxpbmUvY29tcG9uZW50cy92ZXJ0aWNhbC10aW1lbGluZS9jb21wb25lbnRzL3ZlcnRpY2FsLWl0ZW1zL3ZlcnRpY2FsLWl0ZW1zLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFTakQ7SUFBQTtJQVlBLENBQUM7SUFWRTtRQURDLEtBQUssRUFBRTt5REFDcUI7SUFHN0I7UUFEQyxLQUFLLEVBQUU7MERBQ2U7SUFHdkI7UUFEQyxLQUFLLEVBQUU7NERBQ2lCO0lBR3pCO1FBREMsS0FBSyxFQUFFOytEQUNvQjtJQVhsQixzQkFBc0I7UUFMbEMsU0FBUyxDQUFDO1lBQ1IsUUFBUSxFQUFFLGtCQUFrQjtZQUM1QixrdkNBQThDOztTQUVoRCxDQUFDO09BQ1csc0JBQXNCLENBWWxDO0lBQUQsNkJBQUM7Q0FBQSxBQVpELElBWUM7U0FaWSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgVGltZWxpbmVJdGVtIH0gZnJvbSBcIi4uLy4uLy4uLy4uL21vZGVscy90aW1lbGluZS1pdGVtXCI7XG5cbkBDb21wb25lbnQoe1xuICAgc2VsZWN0b3I6IFwicy12ZXJ0aWNhbC1pdGVtc1wiLFxuICAgdGVtcGxhdGVVcmw6IFwiLi92ZXJ0aWNhbC1pdGVtcy5jb21wb25lbnQuaHRtbFwiLFxuICAgc3R5bGVVcmxzOiBbXCIuL3ZlcnRpY2FsLWl0ZW1zLmNvbXBvbmVudC5zY3NzXCJdLFxufSlcbmV4cG9ydCBjbGFzcyBWZXJ0aWNhbEl0ZW1zQ29tcG9uZW50IHtcbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgaXRlbXM6IFRpbWVsaW5lSXRlbVtdO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGlzTGFzdDogYm9vbGVhbjtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBpc0FjdGl2ZTogYm9vbGVhbjtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBpc0NvbXBsZXRlZDogYm9vbGVhbjtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtaXRlbXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdGltZWxpbmUvY29tcG9uZW50cy92ZXJ0aWNhbC10aW1lbGluZS9jb21wb25lbnRzL3ZlcnRpY2FsLWl0ZW1zL3ZlcnRpY2FsLWl0ZW1zLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFTakQ7SUFBQTtJQWVBLENBQUM7SUFiRTtRQURDLEtBQUssRUFBRTt5REFDcUI7SUFHN0I7UUFEQyxLQUFLLEVBQUU7MERBQ2U7SUFHdkI7UUFEQyxLQUFLLEVBQUU7NERBQ2lCO0lBR3pCO1FBREMsS0FBSyxFQUFFO21FQUN3QjtJQUdoQztRQURDLEtBQUssRUFBRTsrREFDb0I7SUFkbEIsc0JBQXNCO1FBTGxDLFNBQVMsQ0FBQztZQUNSLFFBQVEsRUFBRSxrQkFBa0I7WUFDNUIsd3lDQUE4Qzs7U0FFaEQsQ0FBQztPQUNXLHNCQUFzQixDQWVsQztJQUFELDZCQUFDO0NBQUEsQUFmRCxJQWVDO1NBZlksc0JBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IFRpbWVsaW5lSXRlbSB9IGZyb20gXCIuLi8uLi8uLi8uLi9tb2RlbHMvdGltZWxpbmUtaXRlbVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgIHNlbGVjdG9yOiBcInMtdmVydGljYWwtaXRlbXNcIixcbiAgIHRlbXBsYXRlVXJsOiBcIi4vdmVydGljYWwtaXRlbXMuY29tcG9uZW50Lmh0bWxcIixcbiAgIHN0eWxlVXJsczogW1wiLi92ZXJ0aWNhbC1pdGVtcy5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgVmVydGljYWxJdGVtc0NvbXBvbmVudCB7XG4gICBASW5wdXQoKVxuICAgcHVibGljIGl0ZW1zOiBUaW1lbGluZUl0ZW1bXTtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBpc0xhc3Q6IGJvb2xlYW47XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgaXNBY3RpdmU6IGJvb2xlYW47XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgaGlnaGxpZ2h0QWN0aXZlOiBib29sZWFuO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGlzQ29tcGxldGVkOiBib29sZWFuO1xufVxuIl19

package/esm5/components/timeline/components/vertical-timeline/vertical-timeline.component.js

@@ -33,6 +33,9 @@ var VerticalTimelineComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], VerticalTimelineComponent.prototype, "activeIndex", null);
+    __decorate([
+        Input()
+    ], VerticalTimelineComponent.prototype, "highlightActiveItem", void 0);
     __decorate([
         Input()
     ], VerticalTimelineComponent.prototype, "items", void 0);
@@ -45,11 +48,11 @@ var VerticalTimelineComponent = /** @class */ (function () {
     VerticalTimelineComponent = __decorate([
         Component({
             selector: "s-vertical-timeline",
-            template: "<div class=\"vertical-timeline\">\n   <div\n      *ngIf=\"firstItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"firstItem\"\n         [isLast]=\"false\"\n         [isActive]=\"false\"\n         [isCompleted]=\"true\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g1Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g1Items.length > 1 && !isG1Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG1Collapsed\"\n               (change)=\"onChangeG1($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG1Collapsed && g1Items.length > 1 && collapsable; then g1_collapsed; else g1_items\"></div>\n\n      <ng-template #g1_collapsed>\n         <s-collapsed-items\n            [items]=\"g1Items\"\n            [(isCollapsed)]=\"isG1Collapsed\"\n            [isCompleted]=\"true\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g1_items>\n         <s-vertical-items\n            [items]=\"g1Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"true\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"activeItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"activeItem\"\n         [isLast]=\"!lastItem.length\"\n         [isActive]=\"true\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g2Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g2Items.length > 1 && !isG2Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG2Collapsed\"\n               (change)=\"onChangeG2($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG2Collapsed && g2Items.length > 1 && collapsable; then g2_collapsed; else g2_items\"></div>\n\n      <ng-template #g2_collapsed>\n         <s-collapsed-items\n            [items]=\"g2Items\"\n            [(isCollapsed)]=\"isG2Collapsed\"\n            [isCompleted]=\"false\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g2_items>\n         <s-vertical-items\n            [items]=\"g2Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"false\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"lastItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"lastItem\"\n         [isLast]=\"true\"\n         [isActive]=\"false\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n</div>",
+            template: "<div class=\"vertical-timeline\">\n   <div\n      *ngIf=\"firstItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"firstItem\"\n         [isLast]=\"false\"\n         [isActive]=\"false\"\n         [isCompleted]=\"true\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g1Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g1Items.length > 1 && !isG1Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG1Collapsed\"\n               (change)=\"onChangeG1($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG1Collapsed && g1Items.length > 1 && collapsable; then g1_collapsed; else g1_items\"></div>\n\n      <ng-template #g1_collapsed>\n         <s-collapsed-items\n            [items]=\"g1Items\"\n            [(isCollapsed)]=\"isG1Collapsed\"\n            [isCompleted]=\"true\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g1_items>\n         <s-vertical-items\n            [items]=\"g1Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"true\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"activeItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"activeItem\"\n         [isLast]=\"!lastItem.length\"\n         [isActive]=\"true\"\n         [highlightActive]=\"highlightActiveItem\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g2Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g2Items.length > 1 && !isG2Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG2Collapsed\"\n               (change)=\"onChangeG2($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG2Collapsed && g2Items.length > 1 && collapsable; then g2_collapsed; else g2_items\"></div>\n\n      <ng-template #g2_collapsed>\n         <s-collapsed-items\n            [items]=\"g2Items\"\n            [(isCollapsed)]=\"isG2Collapsed\"\n            [isCompleted]=\"false\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g2_items>\n         <s-vertical-items\n            [items]=\"g2Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"false\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"lastItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"lastItem\"\n         [isLast]=\"true\"\n         [isActive]=\"false\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n</div>",
             styles: [".vertical-timeline{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.vertical-timeline .vertical-timeline__block{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix{width:60px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix .vertical-timeline__block__prefix__line{height:100%}"]
         })
     ], VerticalTimelineComponent);
     return VerticalTimelineComponent;
 }());
 export { VerticalTimelineComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdGltZWxpbmUvY29tcG9uZW50cy92ZXJ0aWNhbC10aW1lbGluZS92ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU2pEO0lBQUE7UUFHVSxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixrQkFBYSxHQUFHLElBQUksQ0FBQztJQTBDL0IsQ0FBQztJQWpDRSxzQkFBVyxrREFBVzthQUt0QjtZQUNHLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztRQUM1QixDQUFDO2FBUEQsVUFBdUIsS0FBYTtZQUNqQyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztZQUMxQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDckIsQ0FBQzs7O09BQUE7SUFlTSw4Q0FBVSxHQUFqQixVQUFrQixLQUFjO1FBQzdCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFFTSw4Q0FBVSxHQUFqQixVQUFrQixLQUFjO1FBQzdCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQzlCLENBQUM7SUFFTSw4Q0FBVSxHQUFqQjtRQUNHLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFdBQVcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDL0QsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3JELElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO1FBQ2pELElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDN0UsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsV0FBVyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN6RyxDQUFDO0lBNUNhLGdDQUFNLEdBQUcsQ0FBQyxDQUFDO0lBWXpCO1FBREMsS0FBSyxFQUFFO2dFQUlQO0lBT0Q7UUFEQyxLQUFLLEVBQUU7NERBQ3FCO0lBRzdCO1FBREMsS0FBSyxFQUFFO21FQUNvQjtJQUc1QjtRQURDLEtBQUssRUFBRTtrRUFDb0I7SUE3QmxCLHlCQUF5QjtRQUxyQyxTQUFTLENBQUM7WUFDUixRQUFRLEVBQUUscUJBQXFCO1lBQy9CLGk2R0FBaUQ7O1NBRW5ELENBQUM7T0FDVyx5QkFBeUIsQ0E4Q3JDO0lBQUQsZ0NBQUM7Q0FBQSxBQTlDRCxJQThDQztTQTlDWSx5QkFBeUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgVGltZWxpbmVJdGVtIH0gZnJvbSBcIi4uLy4uL21vZGVscy90aW1lbGluZS1pdGVtXCI7XG5cbkBDb21wb25lbnQoe1xuICAgc2VsZWN0b3I6IFwicy12ZXJ0aWNhbC10aW1lbGluZVwiLFxuICAgdGVtcGxhdGVVcmw6IFwiLi92ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQuaHRtbFwiLFxuICAgc3R5bGVVcmxzOiBbXCIuL3ZlcnRpY2FsLXRpbWVsaW5lLmNvbXBvbmVudC5zY3NzXCJdLFxufSlcbmV4cG9ydCBjbGFzcyBWZXJ0aWNhbFRpbWVsaW5lQ29tcG9uZW50IHtcbiAgIHB1YmxpYyBzdGF0aWMgbmV4dElkID0gMDtcbiAgIHByaXZhdGUgX2FjdGl2ZUluZGV4OiBudW1iZXI7XG4gICBwdWJsaWMgaXNHMUNvbGxhcHNlZCA9IHRydWU7XG4gICBwdWJsaWMgaXNHMkNvbGxhcHNlZCA9IHRydWU7XG5cbiAgIHB1YmxpYyBmaXJzdEl0ZW06IFRpbWVsaW5lSXRlbVtdO1xuICAgcHVibGljIGcxSXRlbXM6IFRpbWVsaW5lSXRlbVtdO1xuICAgcHVibGljIGFjdGl2ZUl0ZW06IFRpbWVsaW5lSXRlbVtdO1xuICAgcHVibGljIGcySXRlbXM6IFRpbWVsaW5lSXRlbVtdO1xuICAgcHVibGljIGxhc3RJdGVtOiBUaW1lbGluZUl0ZW1bXTtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBzZXQgYWN0aXZlSW5kZXgoaW5kZXg6IG51bWJlcikge1xuICAgICAgdGhpcy5fYWN0aXZlSW5kZXggPSBpbmRleDtcbiAgICAgIHRoaXMuZ3JvdXBJdGVtcygpO1xuICAgfVxuXG4gICBwdWJsaWMgZ2V0IGFjdGl2ZUluZGV4KCkge1xuICAgICAgcmV0dXJuIHRoaXMuX2FjdGl2ZUluZGV4O1xuICAgfVxuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGl0ZW1zOiBUaW1lbGluZUl0ZW1bXTtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBjb3VudGVyTGFiZWw6IHN0cmluZztcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBjb2xsYXBzYWJsZTogYm9vbGVhbjtcblxuICAgcHVibGljIG9uQ2hhbmdlRzEoZXZlbnQ6IGJvb2xlYW4pIHtcbiAgICAgIHRoaXMuaXNHMUNvbGxhcHNlZCA9IGV2ZW50O1xuICAgfVxuXG4gICBwdWJsaWMgb25DaGFuZ2VHMihldmVudDogYm9vbGVhbikge1xuICAgICAgdGhpcy5pc0cyQ29sbGFwc2VkID0gZXZlbnQ7XG4gICB9XG5cbiAgIHB1YmxpYyBncm91cEl0ZW1zKCkge1xuICAgICAgdGhpcy5maXJzdEl0ZW0gPSB0aGlzLmFjdGl2ZUluZGV4ID09PSAwID8gW10gOiBbdGhpcy5pdGVtc1swXV07XG4gICAgICB0aGlzLmcxSXRlbXMgPSB0aGlzLml0ZW1zLnNsaWNlKDEsIHRoaXMuYWN0aXZlSW5kZXgpO1xuICAgICAgdGhpcy5hY3RpdmVJdGVtID0gW3RoaXMuaXRlbXNbdGhpcy5hY3RpdmVJbmRleF1dO1xuICAgICAgdGhpcy5nMkl0ZW1zID0gdGhpcy5pdGVtcy5zbGljZSh0aGlzLmFjdGl2ZUluZGV4ICsgMSwgdGhpcy5pdGVtcy5sZW5ndGggLSAxKTtcbiAgICAgIHRoaXMubGFzdEl0ZW0gPSB0aGlzLmFjdGl2ZUluZGV4ID09PSB0aGlzLml0ZW1zLmxlbmd0aCAtIDEgPyBbXSA6IFt0aGlzLml0ZW1zW3RoaXMuaXRlbXMubGVuZ3RoIC0gMV1dO1xuICAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdGltZWxpbmUvY29tcG9uZW50cy92ZXJ0aWNhbC10aW1lbGluZS92ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU2pEO0lBQUE7UUFHVSxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixrQkFBYSxHQUFHLElBQUksQ0FBQztJQTZDL0IsQ0FBQztJQXBDRSxzQkFBVyxrREFBVzthQUt0QjtZQUNHLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztRQUM1QixDQUFDO2FBUEQsVUFBdUIsS0FBYTtZQUNqQyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztZQUMxQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDckIsQ0FBQzs7O09BQUE7SUFrQk0sOENBQVUsR0FBakIsVUFBa0IsS0FBYztRQUM3QixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRU0sOENBQVUsR0FBakIsVUFBa0IsS0FBYztRQUM3QixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDO0lBRU0sOENBQVUsR0FBakI7UUFDRyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxXQUFXLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQy9ELElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztRQUNqRCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzdFLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFdBQVcsS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDekcsQ0FBQztJQS9DYSxnQ0FBTSxHQUFHLENBQUMsQ0FBQztJQVl6QjtRQURDLEtBQUssRUFBRTtnRUFJUDtJQU9EO1FBREMsS0FBSyxFQUFFOzBFQUM0QjtJQUdwQztRQURDLEtBQUssRUFBRTs0REFDcUI7SUFHN0I7UUFEQyxLQUFLLEVBQUU7bUVBQ29CO0lBRzVCO1FBREMsS0FBSyxFQUFFO2tFQUNvQjtJQWhDbEIseUJBQXlCO1FBTHJDLFNBQVMsQ0FBQztZQUNSLFFBQVEsRUFBRSxxQkFBcUI7WUFDL0IscTlHQUFpRDs7U0FFbkQsQ0FBQztPQUNXLHlCQUF5QixDQWlEckM7SUFBRCxnQ0FBQztDQUFBLEFBakRELElBaURDO1NBakRZLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBUaW1lbGluZUl0ZW0gfSBmcm9tIFwiLi4vLi4vbW9kZWxzL3RpbWVsaW5lLWl0ZW1cIjtcblxuQENvbXBvbmVudCh7XG4gICBzZWxlY3RvcjogXCJzLXZlcnRpY2FsLXRpbWVsaW5lXCIsXG4gICB0ZW1wbGF0ZVVybDogXCIuL3ZlcnRpY2FsLXRpbWVsaW5lLmNvbXBvbmVudC5odG1sXCIsXG4gICBzdHlsZVVybHM6IFtcIi4vdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIFZlcnRpY2FsVGltZWxpbmVDb21wb25lbnQge1xuICAgcHVibGljIHN0YXRpYyBuZXh0SWQgPSAwO1xuICAgcHJpdmF0ZSBfYWN0aXZlSW5kZXg6IG51bWJlcjtcbiAgIHB1YmxpYyBpc0cxQ29sbGFwc2VkID0gdHJ1ZTtcbiAgIHB1YmxpYyBpc0cyQ29sbGFwc2VkID0gdHJ1ZTtcblxuICAgcHVibGljIGZpcnN0SXRlbTogVGltZWxpbmVJdGVtW107XG4gICBwdWJsaWMgZzFJdGVtczogVGltZWxpbmVJdGVtW107XG4gICBwdWJsaWMgYWN0aXZlSXRlbTogVGltZWxpbmVJdGVtW107XG4gICBwdWJsaWMgZzJJdGVtczogVGltZWxpbmVJdGVtW107XG4gICBwdWJsaWMgbGFzdEl0ZW06IFRpbWVsaW5lSXRlbVtdO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIHNldCBhY3RpdmVJbmRleChpbmRleDogbnVtYmVyKSB7XG4gICAgICB0aGlzLl9hY3RpdmVJbmRleCA9IGluZGV4O1xuICAgICAgdGhpcy5ncm91cEl0ZW1zKCk7XG4gICB9XG5cbiAgIHB1YmxpYyBnZXQgYWN0aXZlSW5kZXgoKSB7XG4gICAgICByZXR1cm4gdGhpcy5fYWN0aXZlSW5kZXg7XG4gICB9XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgaGlnaGxpZ2h0QWN0aXZlSXRlbTogYm9vbGVhbjtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBpdGVtczogVGltZWxpbmVJdGVtW107XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgY291bnRlckxhYmVsOiBzdHJpbmc7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgY29sbGFwc2FibGU6IGJvb2xlYW47XG5cbiAgIHB1YmxpYyBvbkNoYW5nZUcxKGV2ZW50OiBib29sZWFuKSB7XG4gICAgICB0aGlzLmlzRzFDb2xsYXBzZWQgPSBldmVudDtcbiAgIH1cblxuICAgcHVibGljIG9uQ2hhbmdlRzIoZXZlbnQ6IGJvb2xlYW4pIHtcbiAgICAgIHRoaXMuaXNHMkNvbGxhcHNlZCA9IGV2ZW50O1xuICAgfVxuXG4gICBwdWJsaWMgZ3JvdXBJdGVtcygpIHtcbiAgICAgIHRoaXMuZmlyc3RJdGVtID0gdGhpcy5hY3RpdmVJbmRleCA9PT0gMCA/IFtdIDogW3RoaXMuaXRlbXNbMF1dO1xuICAgICAgdGhpcy5nMUl0ZW1zID0gdGhpcy5pdGVtcy5zbGljZSgxLCB0aGlzLmFjdGl2ZUluZGV4KTtcbiAgICAgIHRoaXMuYWN0aXZlSXRlbSA9IFt0aGlzLml0ZW1zW3RoaXMuYWN0aXZlSW5kZXhdXTtcbiAgICAgIHRoaXMuZzJJdGVtcyA9IHRoaXMuaXRlbXMuc2xpY2UodGhpcy5hY3RpdmVJbmRleCArIDEsIHRoaXMuaXRlbXMubGVuZ3RoIC0gMSk7XG4gICAgICB0aGlzLmxhc3RJdGVtID0gdGhpcy5hY3RpdmVJbmRleCA9PT0gdGhpcy5pdGVtcy5sZW5ndGggLSAxID8gW10gOiBbdGhpcy5pdGVtc1t0aGlzLml0ZW1zLmxlbmd0aCAtIDFdXTtcbiAgIH1cbn1cbiJdfQ==

package/esm5/components/timeline/timeline.component.js

@@ -5,6 +5,7 @@ var VERTICAL = "vertical";
 var MIN_ITEM_SIZE = 200;
 var TimelineComponent = /** @class */ (function () {
     function TimelineComponent() {
+        this.highlightActiveItem = true;
         this.direction = HORIZONTAL;
         this.collapsable = true;
         this.counterLabel = "items";
@@ -43,6 +44,9 @@ var TimelineComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TimelineComponent.prototype, "activeIndex", void 0);
+    __decorate([
+        Input()
+    ], TimelineComponent.prototype, "highlightActiveItem", void 0);
     __decorate([
         Input()
     ], TimelineComponent.prototype, "direction", void 0);
@@ -58,10 +62,10 @@ var TimelineComponent = /** @class */ (function () {
     TimelineComponent = __decorate([
         Component({
             selector: "s-timeline",
-            template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\">\n   </s-vertical-timeline>\n</ng-template>"
+            template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [highlightActiveItem]=\"highlightActiveItem\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      highlightActiveItem=\"hi\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\"\n      [highlightActiveItem]=\"highlightActiveItem\">\n   </s-vertical-timeline>\n</ng-template>"
         })
     ], TimelineComponent);
     return TimelineComponent;
 }());
 export { TimelineComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdGltZWxpbmUvdGltZWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFJdkUsSUFBTSxVQUFVLEdBQUcsWUFBWSxDQUFDO0FBQ2hDLElBQU0sUUFBUSxHQUFHLFVBQVUsQ0FBQztBQUM1QixJQUFNLGFBQWEsR0FBRyxHQUFHLENBQUM7QUFNMUI7SUFBQTtRQWtCVSxjQUFTLEdBQXdDLFVBQVUsQ0FBQztRQUc1RCxnQkFBVyxHQUFHLElBQUksQ0FBQztRQUduQixpQkFBWSxHQUFHLE9BQU8sQ0FBQztJQXdCakMsQ0FBQztJQTVDRSxzQkFBVyxvQ0FBSzthQUFoQjtZQUNHLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztRQUN0QixDQUFDO2FBR0QsVUFBaUIsS0FBcUI7WUFDbkMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7WUFDcEIsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDNUIsQ0FBQzs7O09BTkE7SUFvQk0sb0NBQVEsR0FBZjtRQUNHLElBQUksQ0FBQyxXQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQztJQUN4QyxDQUFDO0lBR00sb0NBQVEsR0FBZixVQUFnQixDQUFNO1FBQ25CLElBQUksQ0FBQyxXQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQztJQUN4QyxDQUFDO0lBRU0sNENBQWdCLEdBQXZCO1FBQ0csT0FBTyxJQUFJLENBQUMsU0FBUyxLQUFLLFFBQVEsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLGFBQWEsQ0FBQztJQUM5RixDQUFDO0lBRU0sNkNBQWlCLEdBQXhCO1FBQ0csSUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsVUFBQSxJQUFJO1lBQzVCLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQztRQUNsQixDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksS0FBSyxHQUFHLENBQUMsTUFBTSxFQUFFO1lBQ3JDLE1BQU0sSUFBSSxLQUFLLENBQUMsNENBQTRDLENBQUMsQ0FBQztTQUNoRTtJQUNKLENBQUM7SUF0Q0Q7UUFEQyxLQUFLLEVBQUU7a0RBSVA7SUFHRDtRQURDLEtBQUssRUFBRTswREFDbUI7SUFHM0I7UUFEQyxLQUFLLEVBQUU7d0RBQzJEO0lBR25FO1FBREMsS0FBSyxFQUFFOzBEQUNrQjtJQUcxQjtRQURDLEtBQUssRUFBRTsyREFDc0I7SUFPOUI7UUFEQyxZQUFZLENBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUM7cURBR3pDO0lBakNTLGlCQUFpQjtRQUo3QixTQUFTLENBQUM7WUFDUixRQUFRLEVBQUUsWUFBWTtZQUN0QixpaEJBQXdDO1NBQzFDLENBQUM7T0FDVyxpQkFBaUIsQ0FnRDdCO0lBQUQsd0JBQUM7Q0FBQSxBQWhERCxJQWdEQztTQWhEWSxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IFRpbWVsaW5lSXRlbSB9IGZyb20gXCIuL21vZGVscy90aW1lbGluZS1pdGVtXCI7XG5cbmNvbnN0IEhPUklaT05UQUwgPSBcImhvcml6b250YWxcIjtcbmNvbnN0IFZFUlRJQ0FMID0gXCJ2ZXJ0aWNhbFwiO1xuY29uc3QgTUlOX0lURU1fU0laRSA9IDIwMDtcblxuQENvbXBvbmVudCh7XG4gICBzZWxlY3RvcjogXCJzLXRpbWVsaW5lXCIsXG4gICB0ZW1wbGF0ZVVybDogXCIuL3RpbWVsaW5lLmNvbXBvbmVudC5odG1sXCIsXG59KVxuZXhwb3J0IGNsYXNzIFRpbWVsaW5lQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgIHByaXZhdGUgX2lubmVyV2lkdGg6IG51bWJlcjtcbiAgIHByaXZhdGUgX2l0ZW1zOiBUaW1lbGluZUl0ZW1bXTtcblxuICAgcHVibGljIGdldCBpdGVtcygpOiBUaW1lbGluZUl0ZW1bXSB7XG4gICAgICByZXR1cm4gdGhpcy5faXRlbXM7XG4gICB9XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgc2V0IGl0ZW1zKGl0ZW1zOiBUaW1lbGluZUl0ZW1bXSkge1xuICAgICAgdGhpcy5faXRlbXMgPSBpdGVtcztcbiAgICAgIHRoaXMuY2hlY2tEdXBsaWNhdGVJZHMoKTtcbiAgIH1cblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBhY3RpdmVJbmRleDogbnVtYmVyO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGRpcmVjdGlvbjogdHlwZW9mIEhPUklaT05UQUwgfCB0eXBlb2YgVkVSVElDQUwgPSBIT1JJWk9OVEFMO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGNvbGxhcHNhYmxlID0gdHJ1ZTtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBjb3VudGVyTGFiZWwgPSBcIml0ZW1zXCI7XG5cbiAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgIHRoaXMuX2lubmVyV2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aDtcbiAgIH1cblxuICAgQEhvc3RMaXN0ZW5lcihcIndpbmRvdzpyZXNpemVcIiwgW1wiJGV2ZW50XCJdKVxuICAgcHVibGljIG9uUmVzaXplKF86IGFueSk6IHZvaWQge1xuICAgICAgdGhpcy5faW5uZXJXaWR0aCA9IHdpbmRvdy5pbm5lcldpZHRoO1xuICAgfVxuXG4gICBwdWJsaWMgY2hhbmdlVG9WZXJ0aWNhbCgpOiBib29sZWFuIHtcbiAgICAgIHJldHVybiB0aGlzLmRpcmVjdGlvbiA9PT0gVkVSVElDQUwgfHwgdGhpcy5faW5uZXJXaWR0aCAvIHRoaXMuaXRlbXMubGVuZ3RoIDwgTUlOX0lURU1fU0laRTtcbiAgIH1cblxuICAgcHVibGljIGNoZWNrRHVwbGljYXRlSWRzKCk6IHZvaWQge1xuICAgICAgY29uc3QgaWRzID0gdGhpcy5pdGVtcy5tYXAoaXRlbSA9PiB7XG4gICAgICAgICByZXR1cm4gaXRlbS5pZDtcbiAgICAgIH0pO1xuXG4gICAgICBpZiAoKG5ldyBTZXQoaWRzKSkuc2l6ZSAhPT0gaWRzLmxlbmd0aCkge1xuICAgICAgICAgdGhyb3cgbmV3IEVycm9yKFwiQSBkdXBsaWNhdGUgaWQgd2FzIGZvdW5kIGluIHRoZSBpdGVtcyBsaXN0XCIpO1xuICAgICAgfVxuICAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNlbmlvcnNpc3RlbWFzL2FuZ3VsYXItY29tcG9uZW50cy8iLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvdGltZWxpbmUvdGltZWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFJdkUsSUFBTSxVQUFVLEdBQUcsWUFBWSxDQUFDO0FBQ2hDLElBQU0sUUFBUSxHQUFHLFVBQVUsQ0FBQztBQUM1QixJQUFNLGFBQWEsR0FBRyxHQUFHLENBQUM7QUFNMUI7SUFBQTtRQWtCVSx3QkFBbUIsR0FBRyxJQUFJLENBQUM7UUFHM0IsY0FBUyxHQUF3QyxVQUFVLENBQUM7UUFHNUQsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFHbkIsaUJBQVksR0FBRyxPQUFPLENBQUM7SUF3QmpDLENBQUM7SUEvQ0Usc0JBQVcsb0NBQUs7YUFBaEI7WUFDRyxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7UUFDdEIsQ0FBQzthQUdELFVBQWlCLEtBQXFCO1lBQ25DLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1lBQ3BCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQzVCLENBQUM7OztPQU5BO0lBdUJNLG9DQUFRLEdBQWY7UUFDRyxJQUFJLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUM7SUFDeEMsQ0FBQztJQUdNLG9DQUFRLEdBQWYsVUFBZ0IsQ0FBTTtRQUNuQixJQUFJLENBQUMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUM7SUFDeEMsQ0FBQztJQUVNLDRDQUFnQixHQUF2QjtRQUNHLE9BQU8sSUFBSSxDQUFDLFNBQVMsS0FBSyxRQUFRLElBQUksSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxhQUFhLENBQUM7SUFDOUYsQ0FBQztJQUVNLDZDQUFpQixHQUF4QjtRQUNHLElBQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLFVBQUEsSUFBSTtZQUM1QixPQUFPLElBQUksQ0FBQyxFQUFFLENBQUM7UUFDbEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLEtBQUssR0FBRyxDQUFDLE1BQU0sRUFBRTtZQUNyQyxNQUFNLElBQUksS0FBSyxDQUFDLDRDQUE0QyxDQUFDLENBQUM7U0FDaEU7SUFDSixDQUFDO0lBekNEO1FBREMsS0FBSyxFQUFFO2tEQUlQO0lBR0Q7UUFEQyxLQUFLLEVBQUU7MERBQ21CO0lBRzNCO1FBREMsS0FBSyxFQUFFO2tFQUMwQjtJQUdsQztRQURDLEtBQUssRUFBRTt3REFDMkQ7SUFHbkU7UUFEQyxLQUFLLEVBQUU7MERBQ2tCO0lBRzFCO1FBREMsS0FBSyxFQUFFOzJEQUNzQjtJQU85QjtRQURDLFlBQVksQ0FBQyxlQUFlLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQztxREFHekM7SUFwQ1MsaUJBQWlCO1FBSjdCLFNBQVMsQ0FBQztZQUNSLFFBQVEsRUFBRSxZQUFZO1lBQ3RCLDZwQkFBd0M7U0FDMUMsQ0FBQztPQUNXLGlCQUFpQixDQW1EN0I7SUFBRCx3QkFBQztDQUFBLEFBbkRELElBbURDO1NBbkRZLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgVGltZWxpbmVJdGVtIH0gZnJvbSBcIi4vbW9kZWxzL3RpbWVsaW5lLWl0ZW1cIjtcblxuY29uc3QgSE9SSVpPTlRBTCA9IFwiaG9yaXpvbnRhbFwiO1xuY29uc3QgVkVSVElDQUwgPSBcInZlcnRpY2FsXCI7XG5jb25zdCBNSU5fSVRFTV9TSVpFID0gMjAwO1xuXG5AQ29tcG9uZW50KHtcbiAgIHNlbGVjdG9yOiBcInMtdGltZWxpbmVcIixcbiAgIHRlbXBsYXRlVXJsOiBcIi4vdGltZWxpbmUuY29tcG9uZW50Lmh0bWxcIixcbn0pXG5leHBvcnQgY2xhc3MgVGltZWxpbmVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgcHJpdmF0ZSBfaW5uZXJXaWR0aDogbnVtYmVyO1xuICAgcHJpdmF0ZSBfaXRlbXM6IFRpbWVsaW5lSXRlbVtdO1xuXG4gICBwdWJsaWMgZ2V0IGl0ZW1zKCk6IFRpbWVsaW5lSXRlbVtdIHtcbiAgICAgIHJldHVybiB0aGlzLl9pdGVtcztcbiAgIH1cblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBzZXQgaXRlbXMoaXRlbXM6IFRpbWVsaW5lSXRlbVtdKSB7XG4gICAgICB0aGlzLl9pdGVtcyA9IGl0ZW1zO1xuICAgICAgdGhpcy5jaGVja0R1cGxpY2F0ZUlkcygpO1xuICAgfVxuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGFjdGl2ZUluZGV4OiBudW1iZXI7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgaGlnaGxpZ2h0QWN0aXZlSXRlbSA9IHRydWU7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgZGlyZWN0aW9uOiB0eXBlb2YgSE9SSVpPTlRBTCB8IHR5cGVvZiBWRVJUSUNBTCA9IEhPUklaT05UQUw7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgY29sbGFwc2FibGUgPSB0cnVlO1xuXG4gICBASW5wdXQoKVxuICAgcHVibGljIGNvdW50ZXJMYWJlbCA9IFwiaXRlbXNcIjtcblxuICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgdGhpcy5faW5uZXJXaWR0aCA9IHdpbmRvdy5pbm5lcldpZHRoO1xuICAgfVxuXG4gICBASG9zdExpc3RlbmVyKFwid2luZG93OnJlc2l6ZVwiLCBbXCIkZXZlbnRcIl0pXG4gICBwdWJsaWMgb25SZXNpemUoXzogYW55KTogdm9pZCB7XG4gICAgICB0aGlzLl9pbm5lcldpZHRoID0gd2luZG93LmlubmVyV2lkdGg7XG4gICB9XG5cbiAgIHB1YmxpYyBjaGFuZ2VUb1ZlcnRpY2FsKCk6IGJvb2xlYW4ge1xuICAgICAgcmV0dXJuIHRoaXMuZGlyZWN0aW9uID09PSBWRVJUSUNBTCB8fCB0aGlzLl9pbm5lcldpZHRoIC8gdGhpcy5pdGVtcy5sZW5ndGggPCBNSU5fSVRFTV9TSVpFO1xuICAgfVxuXG4gICBwdWJsaWMgY2hlY2tEdXBsaWNhdGVJZHMoKTogdm9pZCB7XG4gICAgICBjb25zdCBpZHMgPSB0aGlzLml0ZW1zLm1hcChpdGVtID0+IHtcbiAgICAgICAgIHJldHVybiBpdGVtLmlkO1xuICAgICAgfSk7XG5cbiAgICAgIGlmICgobmV3IFNldChpZHMpKS5zaXplICE9PSBpZHMubGVuZ3RoKSB7XG4gICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJBIGR1cGxpY2F0ZSBpZCB3YXMgZm91bmQgaW4gdGhlIGl0ZW1zIGxpc3RcIik7XG4gICAgICB9XG4gICB9XG59XG4iXX0=

package/esm5/components/workspace-switch/workspace-switch.component.js

@@ -1,18 +1,34 @@
 import { __decorate } from "tslib";
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnInit, Output, } from "@angular/core";
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnInit, Output, QueryList, ViewChildren, } from "@angular/core";
 var WorkspaceSwitchComponent = /** @class */ (function () {
-    function WorkspaceSwitchComponent(eRef) {
+    function WorkspaceSwitchComponent(eRef, changeDetectorRef) {
         this.eRef = eRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.footerButtonLabel = "Adicionar";
         this.showFooterButton = true;
         this.disabled = false;
         this.footerButtonClicked = new EventEmitter();
         this.selected = new EventEmitter();
-        this.open = false;
+        this.height = 0;
         this.selectedItemIndex = 0;
         this.currentItemIndex = 0;
+        this._open = false;
         this.tabindex = 0;
     }
+    Object.defineProperty(WorkspaceSwitchComponent.prototype, "open", {
+        get: function () {
+            return this._open;
+        },
+        set: function (open) {
+            this._open = open;
+            this.changeDetectorRef.detectChanges();
+            if (open) {
+                this._calculateListMaxHeight();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     WorkspaceSwitchComponent.prototype.onClickout = function (event) {
         if (!this.eRef.nativeElement.contains(event.target)) {
             this.open = false;
@@ -36,11 +52,13 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
         else if (event.key === "ArrowDown") {
             if (this.currentItemIndex < this.workspaces.length - 1) {
                 this.currentItemIndex++;
+                this._scrollToCurrentItem();
             }
         }
         else if (event.key === "ArrowUp") {
             if (this.currentItemIndex > 0) {
                 this.currentItemIndex--;
+                this._scrollToCurrentItem();
             }
         }
     };
@@ -71,8 +89,21 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
         this.open = false;
         this.footerButtonClicked.emit();
     };
+    WorkspaceSwitchComponent.prototype._calculateListMaxHeight = function () {
+        var workspaceListRef = this.eRef.nativeElement.querySelector("#workspace-list");
+        var top = workspaceListRef.getBoundingClientRect().top;
+        this.height = window.innerHeight - top - 20 - (this.showFooterButton ? 64 : 0);
+        this.changeDetectorRef.detectChanges();
+    };
+    WorkspaceSwitchComponent.prototype._scrollToCurrentItem = function () {
+        var currentItem = this.listItems.toArray()[this.currentItemIndex];
+        if (currentItem) {
+            currentItem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
     WorkspaceSwitchComponent.ctorParameters = function () { return [
-        { type: ElementRef }
+        { type: ElementRef },
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         Input()
@@ -92,6 +123,9 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], WorkspaceSwitchComponent.prototype, "selected", void 0);
+    __decorate([
+        ViewChildren('listItem')
+    ], WorkspaceSwitchComponent.prototype, "listItems", void 0);
     __decorate([
         HostBinding("attr.tabindex")
     ], WorkspaceSwitchComponent.prototype, "tabindex", void 0);
@@ -104,11 +138,11 @@ var WorkspaceSwitchComponent = /** @class */ (function () {
     WorkspaceSwitchComponent = __decorate([
         Component({
             selector: "s-workspace-switch",
-            template: "<div\n   class=\"workspace-switch\"\n   [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n   (blur)=\"buttonOnBlur()\">\n   <div class=\"button\" (click)=\"open = !open\">\n      <div class=\"item\">\n         <span class=\"title\">{{ workspaces[selectedItemIndex].title }}</span>\n         <span class=\"subtitle\">{{ workspaces[selectedItemIndex].subtitle }}</span>\n      </div>\n      <div class=\"icons\">\n         <span class=\"fas fa-chevron-up\"></span>\n         <span class=\"fas fa-chevron-down\"></span>\n      </div>\n   </div>\n   <div *ngIf=\"!disabled && open\" class=\"select\">\n      <div\n         *ngFor=\"let workspace of workspaces; let i = index\"\n         class=\"workspace\"\n         [ngClass]=\"{\n            'workspace--focused': i == currentItemIndex && !workspace.disabled,\n            'workspace--disabled': workspace.disabled\n         }\"\n         (click)=\"onSelectItem(workspace)\">\n         <div class=\"item\">\n            <span class=\"title\">{{ workspace.title }}</span>\n            <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n         </div>\n         <span *ngIf=\"i === selectedItemIndex\" class=\"active-icon fas fa-check\"></span>\n      </div>\n      <div *ngIf=\"showFooterButton\" class=\"footer\">\n         <div class=\"footer__button\" (click)=\"onFooterButtonClick()\">\n            <span class=\"footer__button__icon fas fa-plus\"></span>\n            <span class=\"footer__button__title\">{{ footerButtonLabel }}</span>\n         </div>\n      </div>\n   </div>\n</div>",
-            styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{-ms-flex-align:center;align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;margin:0 12px}.workspace-switch .select{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;margin:20px 0;padding-top:4px;position:absolute;width:324px}.workspace-switch .select .workspace{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none}.workspace-switch .select .workspace .active-icon{color:#7892a1;font-size:12px;margin:0 12px}.workspace-switch .select .workspace--focused{background-color:#f1f7f8}.workspace-switch .select .workspace--disabled .item .subtitle,.workspace-switch .select .workspace--disabled .item .title{color:#c1c1cc}.workspace-switch .select .workspace:hover:not(.workspace--disabled){background-color:#f1f7f8}.workspace-switch .select .footer{border-top:1px solid #ccc;padding:12px}.workspace-switch .select .footer .footer__button{-ms-flex-align:center;align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.workspace-switch .select .footer .footer__button .footer__button__icon{color:#333;margin-right:8px}.workspace-switch .select .footer .footer__button:active{border:1px solid #428bca}.workspace-switch .item{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding:12px}.workspace-switch .item .title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;text-transform:uppercase}.workspace-switch .item .subtitle{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.workspace-switch:focus{border:1px solid #428bca}.workspace-switch--disabled .button{cursor:default}.workspace-switch--disabled .button .icons,.workspace-switch--disabled .item .subtitle,.workspace-switch--disabled .item .title{color:#ccc}"]
+            template: "<div\n   class=\"workspace-switch\"\n   [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n   (blur)=\"buttonOnBlur()\">\n   <div class=\"button\" (click)=\"open = !open\">\n      <div class=\"item\">\n         <span class=\"title\">{{ workspaces[selectedItemIndex].title }}</span>\n         <span class=\"subtitle\">{{ workspaces[selectedItemIndex].subtitle }}</span>\n      </div>\n      <div class=\"icons\">\n         <span class=\"fas fa-chevron-up\"></span>\n         <span class=\"fas fa-chevron-down\"></span>\n      </div>\n   </div>\n   <div *ngIf=\"!disabled && open\" class=\"drop-panel\">\n      <ul\n         id=\"workspace-list\"\n         class=\"workspace-list\"\n         [ngStyle]=\"{ 'max-height': height + 'px' }\">\n         <li\n            #listItem\n            *ngFor=\"let workspace of workspaces; let i = index\"\n            class=\"workspace\"\n            [ngClass]=\"{\n               'workspace--focused': i == currentItemIndex && !workspace.disabled,\n               'workspace--disabled': workspace.disabled\n            }\"\n            (click)=\"onSelectItem(workspace)\">\n            <div class=\"item\">\n               <span class=\"title\">{{ workspace.title }}</span>\n               <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n            </div>\n            <span *ngIf=\"i === selectedItemIndex\" class=\"active-icon fas fa-check\"></span>\n         </li>\n      </ul>\n      <div *ngIf=\"showFooterButton\" class=\"footer\">\n         <div class=\"footer__button\" (click)=\"onFooterButtonClick()\">\n            <span class=\"footer__button__icon fas fa-plus\"></span>\n            <span class=\"footer__button__title\">{{ footerButtonLabel }}</span>\n         </div>\n      </div>\n   </div>\n</div>",
+            styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{-ms-flex-align:center;align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;margin:0 12px}.workspace-switch .drop-panel{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;margin:20px 0;padding-top:4px;position:absolute;width:324px}.workspace-switch .drop-panel .workspace-list{list-style:none;overflow:auto;padding:0}.workspace-switch .drop-panel .workspace-list .workspace{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none}.workspace-switch .drop-panel .workspace-list .workspace .active-icon{color:#7892a1;font-size:12px;margin:0 12px}.workspace-switch .drop-panel .workspace-list .workspace--focused{background-color:#f1f7f8}.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .subtitle,.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .title{color:#c1c1cc}.workspace-switch .drop-panel .workspace-list .workspace:hover:not(.workspace--disabled){background-color:#f1f7f8}.workspace-switch .drop-panel .footer{border-top:1px solid #ccc;padding:12px}.workspace-switch .drop-panel .footer .footer__button{-ms-flex-align:center;align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.workspace-switch .drop-panel .footer .footer__button .footer__button__icon{color:#333;margin-right:8px}.workspace-switch .drop-panel .footer .footer__button:active{border:1px solid #428bca}.workspace-switch .item{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding:12px}.workspace-switch .item .title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;text-transform:uppercase}.workspace-switch .item .subtitle{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.workspace-switch:focus{border:1px solid #428bca}.workspace-switch--disabled .button{cursor:default}.workspace-switch--disabled .button .icons,.workspace-switch--disabled .item .subtitle,.workspace-switch--disabled .item .title{color:#ccc}"]
         })
     ], WorkspaceSwitchComponent);
     return WorkspaceSwitchComponent;
 }());
 export { WorkspaceSwitchComponent };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya3NwYWNlLXN3aXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2VuaW9yc2lzdGVtYXMvYW5ndWxhci1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy93b3Jrc3BhY2Utc3dpdGNoL3dvcmtzcGFjZS1zd2l0Y2guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0osU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLE1BQU0sR0FDUixNQUFNLGVBQWUsQ0FBQztBQVN2QjtJQXdCRyxrQ0FBNkIsSUFBZ0I7UUFBaEIsU0FBSSxHQUFKLElBQUksQ0FBWTtRQW5CdEMsc0JBQWlCLEdBQUcsV0FBVyxDQUFDO1FBR2hDLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUd4QixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLHdCQUFtQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFHekMsYUFBUSxHQUE0QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRXZELFNBQUksR0FBRyxLQUFLLENBQUM7UUFFYixzQkFBaUIsR0FBRyxDQUFDLENBQUM7UUFDdEIscUJBQWdCLEdBQUcsQ0FBQyxDQUFDO1FBS3JCLGFBQVEsR0FBRyxDQUFDLENBQUM7SUFINkIsQ0FBQztJQU0zQyw2Q0FBVSxHQUFqQixVQUFrQixLQUFpQjtRQUNoQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsRUFBRTtZQUNsRCxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNwQjtJQUNKLENBQUM7SUFHTSw0Q0FBUyxHQUFoQixVQUFpQixLQUFvQjtRQUNsQyxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssT0FBTyxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssR0FBRyxF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QUM7NkRBeUJuQztJQTdEUyx3QkFBd0I7UUFMcEMsU0FBUyxDQUFDO1lBQ1IsUUFBUSxFQUFFLG9CQUFvQjtZQUM5Qiw4aERBQWdEOztTQUVsRCxDQUFDO09BQ1csd0JBQXdCLENBK0ZwQztJQUFELCtCQUFDO0NBQUEsQUEvRkQsSUErRkM7U0EvRlksd0JBQXdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgIENvbXBvbmVudCxcbiAgIEVsZW1lbnRSZWYsXG4gICBFdmVudEVtaXR0ZXIsXG4gICBIb3N0QmluZGluZyxcbiAgIEhvc3RMaXN0ZW5lcixcbiAgIElucHV0LFxuICAgT25Jbml0LFxuICAgT3V0cHV0LFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBXb3Jrc3BhY2UgfSBmcm9tIFwiLi9tb2RlbHMvd29ya3NwYWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICAgc2VsZWN0b3I6IFwicy13b3Jrc3BhY2Utc3dpdGNoXCIsXG4gICB0ZW1wbGF0ZVVybDogXCIuL3dvcmtzcGFjZS1zd2l0Y2guY29tcG9uZW50Lmh0bWxcIixcbiAgIHN0eWxlVXJsczogW1wiLi93b3Jrc3BhY2Utc3dpdGNoLmNvbXBvbmVudC5zY3NzXCJdLFxufSlcbmV4cG9ydCBjbGFzcyBXb3Jrc3BhY2VTd2l0Y2hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgQElucHV0KClcbiAgIHB1YmxpYyB3b3Jrc3BhY2VzOiBXb3Jrc3BhY2VbXTtcblxuICAgQElucHV0KClcbiAgIHB1YmxpYyBmb290ZXJCdXR0b25MYWJlbCA9IFwiQWRpY2lvbmFyXCI7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgc2hvd0Zvb3RlckJ1dHRvbiA9IHRydWU7XG5cbiAgIEBJbnB1dCgpXG4gICBwdWJsaWMgZGlzYWJsZWQgPSBmYWxzZTtcblxuICAgQE91dHB1dCgpXG4gICBwdWJsaWMgZm9vdGVyQnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgQE91dHB1dCgpXG4gICBwdWJsaWMgc2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjxXb3Jrc3BhY2U+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICBwdWJsaWMgb3BlbiA9IGZhbHNlO1xuXG4gICBwdWJsaWMgc2VsZWN0ZWRJdGVtSW5kZXggPSAwO1xuICAgcHVibGljIGN1cnJlbnRJdGVtSW5kZXggPSAwO1xuXG4gICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IGVSZWY6IEVsZW1lbnRSZWYpIHsgfVxuXG4gICBASG9zdEJpbmRpbmcoXCJhdHRyLnRhYmluZGV4XCIpXG4gICBwdWJsaWMgdGFiaW5kZXggPSAwO1xuXG4gICBASG9zdExpc3RlbmVyKFwiZG9jdW1lbnQ6Y2xpY2tcIiwgW1wiJGV2ZW50XCJdKVxuICAgcHVibGljIG9uQ2xpY2tvdXQoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcbiAgICAgIGlmICghdGhpcy5lUmVmLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KSkge1xuICAgICAgICAgdGhpcy5vcGVuID0gZmFsc2U7XG4gICAgICB9XG4gICB9XG5cbiAgIEBIb3N0TGlzdGVuZXIoXCJrZXlkb3duXCIsIFtcIiRldmVudFwiXSlcbiAgIHB1YmxpYyBvbktleWRvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09IFwiRW50ZXJcIiB8fCBldmVudC5rZXkgPT09IFwiIFwiKSB7XG4gICAgICAgICBpZiAodGhpcy5vcGVuKSB7XG4gICAgICAgICAgICBjb25zdCB3b3Jrc3BhY2UgPSB0aGlzLndvcmtzcGFjZXNbdGhpcy5zZWxlY3RlZEl0ZW1JbmRleF07XG5cbiAgICAgICAgICAgIGlmICh3b3Jrc3BhY2UuZGlzYWJsZWQpIHtcbiAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1JbmRleCA9IHRoaXMuY3VycmVudEl0ZW1JbmRleDtcbiAgICAgICAgICAgIHRoaXMuc2VsZWN0ZWQuZW1pdCh0aGlzLndvcmtzcGFjZXNbdGhpcy5zZWxlY3RlZEl0ZW1JbmRleF0pO1xuICAgICAgICAgfVxuICAgICAgICAgdGhpcy5vcGVuID0gIXRoaXMub3BlbjtcbiAgICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSBcIkVzY2FwZVwiKSB7XG4gICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSBcIkFycm93RG93blwiKSB7XG4gICAgICAgICBpZiAodGhpcy5jdXJyZW50SXRlbUluZGV4IDwgdGhpcy53b3Jrc3BhY2VzLmxlbmd0aCAtIDEpIHtcbiAgICAgICAgICAgIHRoaXMuY3VycmVudEl0ZW1JbmRleCsrO1xuICAgICAgICAgfVxuICAgICAgfSBlbHNlIGlmIChldmVudC5rZXkgPT09IFwiQXJyb3dVcFwiKSB7XG4gICAgICAgICBpZiAodGhpcy5jdXJyZW50SXRlbUluZGV4ID4gMCkge1xuICAgICAgICAgICAgdGhpcy5jdXJyZW50SXRlbUluZGV4LS07XG4gICAgICAgICB9XG4gICAgICB9XG4gICB9XG5cbiAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICAgICB0aGlzLnRhYmluZGV4ID0gLTE7XG4gICAgICB9XG4gICB9XG5cbiAgIHB1YmxpYyB2YWxpZGF0aW9ucygpIHtcbiAgICAgIGlmICghdGhpcy53b3Jrc3BhY2VzLmxlbmd0aCkge1xuICAgICAgICAgdGhyb3cgbmV3IEVycm9yKFwiV29ya3NwYWNlcyBsaXN0IGlzIGVtcHR5LlwiKTtcbiAgICAgIH1cbiAgIH1cblxuICAgcHVibGljIGJ1dHRvbk9uQmx1cigpIHtcbiAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgICAgdGhpcy5jdXJyZW50SXRlbUluZGV4ID0gdGhpcy5zZWxlY3RlZEl0ZW1JbmRleDtcbiAgIH1cblxuICAgcHVibGljIG9uU2VsZWN0SXRlbSh3b3Jrc3BhY2U6IFdvcmtzcGFjZSkge1xuICAgICAgaWYgKHdvcmtzcGFjZS5kaXNhYmxlZCkge1xuICAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtSW5kZXggPSB0aGlzLndvcmtzcGFjZXMuaW5kZXhPZih3b3Jrc3BhY2UpO1xuICAgICAgdGhpcy5jdXJyZW50SXRlbUluZGV4ID0gdGhpcy5zZWxlY3RlZEl0ZW1JbmRleDtcbiAgICAgIHRoaXMuc2VsZWN0ZWQuZW1pdCh3b3Jrc3BhY2UpO1xuICAgfVxuXG4gICBwdWJsaWMgb25Gb290ZXJCdXR0b25DbGljaygpIHtcbiAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgICAgdGhpcy5mb290ZXJCdXR0b25DbGlja2VkLmVtaXQoKTtcbiAgIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya3NwYWNlLXN3aXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2VuaW9yc2lzdGVtYXMvYW5ndWxhci1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsiY29tcG9uZW50cy93b3Jrc3BhY2Utc3dpdGNoL3dvcmtzcGFjZS1zd2l0Y2guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsWUFBWSxFQUNaLFdBQVcsRUFDWCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixNQUFNLEVBQ04sU0FBUyxFQUNULFlBQVksR0FDZixNQUFNLGVBQWUsQ0FBQztBQVN2QjtJQXlDSSxrQ0FDcUIsSUFBZ0IsRUFDaEIsaUJBQW9DO1FBRHBDLFNBQUksR0FBSixJQUFJLENBQVk7UUFDaEIsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtRQXRDbEQsc0JBQWlCLEdBQUcsV0FBVyxDQUFDO1FBR2hDLHFCQUFnQixHQUFHLElBQUksQ0FBQztRQUd4QixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLHdCQUFtQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFHekMsYUFBUSxHQUE0QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBa0J2RCxXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsc0JBQWlCLEdBQUcsQ0FBQyxDQUFDO1FBQ3RCLHFCQUFnQixHQUFHLENBQUMsQ0FBQztRQUVwQixVQUFLLEdBQUcsS0FBSyxDQUFDO1FBUWYsYUFBUSxHQUFHLENBQUMsQ0FBQztJQUhqQixDQUFDO0lBdEJKLHNCQUFXLDBDQUFJO2FBQWY7WUFDSSxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDdEIsQ0FBQzthQUVELFVBQWdCLElBQWE7WUFDekIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7WUFDbEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO1lBRXZDLElBQUksSUFBSSxFQUFFO2dCQUNOLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO2FBQ2xDO1FBQ0wsQ0FBQzs7O09BVEE7SUEwQk0sNkNBQVUsR0FBakIsVUFBa0IsS0FBaUI7UUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDakQsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7U0FDckI7SUFDTCxDQUFDO0lBR00sNENBQVMsR0FBaEIsVUFBaUIsS0FBb0I7UUFDakMsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLE9BQU8sSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLEdBQUcsRUFBRTtZQUM1QyxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUU7Z0JBQ1gsSUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQztnQkFFMUQsSUFBSSxTQUFTLENBQUMsUUFBUSxFQUFFO29CQUNwQixPQUFPO2lCQUNWO2dCQUVELElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUM7Z0JBQy9DLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQzthQUMvRDtZQUNELElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO1NBQzFCO2FBQU0sSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUMvQixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNyQjthQUFNLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxXQUFXLEVBQUU7WUFDbEMsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO2dCQUNwRCxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztnQkFDeEIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7YUFDL0I7U0FDSjthQUFNLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxTQUFTLEVBQUU7WUFDaEMsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxFQUFFO2dCQUMzQixJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztnQkFDeEIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7YUFDL0I7U0FDSjtJQUNMLENBQUM7SUFFTSwyQ0FBUSxHQUFmO1FBQ0ksSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2YsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsQ0FBQztTQUN0QjtJQUNMLENBQUM7SUFFTSw4Q0FBVyxHQUFsQjtRQUNJLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sRUFBRTtZQUN6QixNQUFNLElBQUksS0FBSyxDQUFDLDJCQUEyQixDQUFDLENBQUM7U0FDaEQ7SUFDTCxDQUFDO0lBRU0sK0NBQVksR0FBbkI7UUFDSSxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUNsQixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDO0lBQ25ELENBQUM7SUFFTSwrQ0FBWSxHQUFuQixVQUFvQixTQUFvQjtRQUNwQyxJQUFJLFNBQVMsQ0FBQyxRQUFRLEVBQUU7WUFDcEIsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7UUFDbEIsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQzVELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUM7UUFDL0MsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUVNLHNEQUFtQixHQUExQjtRQUNJLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNwQyxDQUFDO0lBRU8sMERBQXVCLEdBQS9CO1FBQ0ksSUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUMxRSxJQUFBLGtEQUFHLENBQThDO1FBRXpELElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLFdBQVcsR0FBRyxHQUFHLEdBQUcsRUFBRSxHQUFHLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQy9FLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRU8sdURBQW9CLEdBQTVCO1FBQ0ksSUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNwRSxJQUFJLFdBQVcsRUFBRTtZQUNiLFdBQVcsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQztTQUN0RjtJQUNMLENBQUM7O2dCQXpGMEIsVUFBVTtnQkFDRyxpQkFBaUI7O0lBekN6RDtRQURDLEtBQUssRUFBRTtnRUFDdUI7SUFHL0I7UUFEQyxLQUFLLEVBQUU7dUVBQytCO0lBR3ZDO1FBREMsS0FBSyxFQUFFO3NFQUN1QjtJQUcvQjtRQURDLEtBQUssRUFBRTs4REFDZ0I7SUFHeEI7UUFEQyxNQUFNLEVBQUU7eUVBQ3VDO0lBR2hEO1FBREMsTUFBTSxFQUFFOzhEQUNxRDtJQUc5RDtRQURDLFlBQVksQ0FBQyxVQUFVLENBQUM7K0RBQ2U7SUEyQnhDO1FBREMsV0FBVyxDQUFDLGVBQWUsQ0FBQzs4REFDVDtJQUdwQjtRQURDLFlBQVksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDOzhEQUsxQztJQUdEO1FBREMsWUFBWSxDQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDOzZEQTJCbkM7SUFuRlEsd0JBQXdCO1FBTHBDLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxvQkFBb0I7WUFDOUIscXZEQUFnRDs7U0FFbkQsQ0FBQztPQUNXLHdCQUF3QixDQW9JcEM7SUFBRCwrQkFBQztDQUFBLEFBcElELElBb0lDO1NBcElZLHdCQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIEhvc3RMaXN0ZW5lcixcbiAgICBJbnB1dCxcbiAgICBPbkluaXQsXG4gICAgT3V0cHV0LFxuICAgIFF1ZXJ5TGlzdCxcbiAgICBWaWV3Q2hpbGRyZW4sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmltcG9ydCB7IFdvcmtzcGFjZSB9IGZyb20gXCIuL21vZGVscy93b3Jrc3BhY2VcIjtcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwicy13b3Jrc3BhY2Utc3dpdGNoXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi93b3Jrc3BhY2Utc3dpdGNoLmNvbXBvbmVudC5odG1sXCIsXG4gICAgc3R5bGVVcmxzOiBbXCIuL3dvcmtzcGFjZS1zd2l0Y2guY29tcG9uZW50LnNjc3NcIl0sXG59KVxuZXhwb3J0IGNsYXNzIFdvcmtzcGFjZVN3aXRjaENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgd29ya3NwYWNlczogV29ya3NwYWNlW107XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBmb290ZXJCdXR0b25MYWJlbCA9IFwiQWRpY2lvbmFyXCI7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaG93Rm9vdGVyQnV0dG9uID0gdHJ1ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgZm9vdGVyQnV0dG9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIEBPdXRwdXQoKVxuICAgIHB1YmxpYyBzZWxlY3RlZDogRXZlbnRFbWl0dGVyPFdvcmtzcGFjZT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBAVmlld0NoaWxkcmVuKCdsaXN0SXRlbScpXG4gICAgcHVibGljIGxpc3RJdGVtczogUXVlcnlMaXN0PEVsZW1lbnRSZWY+O1xuXG4gICAgcHVibGljIGdldCBvcGVuKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5fb3BlbjtcbiAgICB9XG5cbiAgICBwdWJsaWMgc2V0IG9wZW4ob3BlbjogYm9vbGVhbikge1xuICAgICAgICB0aGlzLl9vcGVuID0gb3BlbjtcbiAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICAgICAgaWYgKG9wZW4pIHtcbiAgICAgICAgICAgIHRoaXMuX2NhbGN1bGF0ZUxpc3RNYXhIZWlnaHQoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHB1YmxpYyBoZWlnaHQgPSAwO1xuICAgIHB1YmxpYyBzZWxlY3RlZEl0ZW1JbmRleCA9IDA7XG4gICAgcHVibGljIGN1cnJlbnRJdGVtSW5kZXggPSAwO1xuXG4gICAgcHJpdmF0ZSBfb3BlbiA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgcmVhZG9ubHkgZVJlZjogRWxlbWVudFJlZixcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgICApIHt9XG5cbiAgICBASG9zdEJpbmRpbmcoXCJhdHRyLnRhYmluZGV4XCIpXG4gICAgcHVibGljIHRhYmluZGV4ID0gMDtcblxuICAgIEBIb3N0TGlzdGVuZXIoXCJkb2N1bWVudDpjbGlja1wiLCBbXCIkZXZlbnRcIl0pXG4gICAgcHVibGljIG9uQ2xpY2tvdXQoZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLmVSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC50YXJnZXQpKSB7XG4gICAgICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoXCJrZXlkb3duXCIsIFtcIiRldmVudFwiXSlcbiAgICBwdWJsaWMgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgICAgIGlmIChldmVudC5rZXkgPT09IFwiRW50ZXJcIiB8fCBldmVudC5rZXkgPT09IFwiIFwiKSB7XG4gICAgICAgICAgICBpZiAodGhpcy5vcGVuKSB7XG4gICAgICAgICAgICAgICAgY29uc3Qgd29ya3NwYWNlID0gdGhpcy53b3Jrc3BhY2VzW3RoaXMuc2VsZWN0ZWRJdGVtSW5kZXhdO1xuXG4gICAgICAgICAgICAgICAgaWYgKHdvcmtzcGFjZS5kaXNhYmxlZCkge1xuICAgICAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1JbmRleCA9IHRoaXMuY3VycmVudEl0ZW1JbmRleDtcbiAgICAgICAgICAgICAgICB0aGlzLnNlbGVjdGVkLmVtaXQodGhpcy53b3Jrc3BhY2VzW3RoaXMuc2VsZWN0ZWRJdGVtSW5kZXhdKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHRoaXMub3BlbiA9ICF0aGlzLm9wZW47XG4gICAgICAgIH0gZWxzZSBpZiAoZXZlbnQua2V5ID09PSBcIkVzY2FwZVwiKSB7XG4gICAgICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgICAgfSBlbHNlIGlmIChldmVudC5rZXkgPT09IFwiQXJyb3dEb3duXCIpIHtcbiAgICAgICAgICAgIGlmICh0aGlzLmN1cnJlbnRJdGVtSW5kZXggPCB0aGlzLndvcmtzcGFjZXMubGVuZ3RoIC0gMSkge1xuICAgICAgICAgICAgICAgIHRoaXMuY3VycmVudEl0ZW1JbmRleCsrO1xuICAgICAgICAgICAgICAgIHRoaXMuX3Njcm9sbFRvQ3VycmVudEl0ZW0oKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSBlbHNlIGlmIChldmVudC5rZXkgPT09IFwiQXJyb3dVcFwiKSB7XG4gICAgICAgICAgICBpZiAodGhpcy5jdXJyZW50SXRlbUluZGV4ID4gMCkge1xuICAgICAgICAgICAgICAgIHRoaXMuY3VycmVudEl0ZW1JbmRleC0tO1xuICAgICAgICAgICAgICAgIHRoaXMuX3Njcm9sbFRvQ3VycmVudEl0ZW0oKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgICAgICAgIHRoaXMudGFiaW5kZXggPSAtMTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHB1YmxpYyB2YWxpZGF0aW9ucygpOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLndvcmtzcGFjZXMubGVuZ3RoKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoXCJXb3Jrc3BhY2VzIGxpc3QgaXMgZW1wdHkuXCIpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHVibGljIGJ1dHRvbk9uQmx1cigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vcGVuID0gZmFsc2U7XG4gICAgICAgIHRoaXMuY3VycmVudEl0ZW1JbmRleCA9IHRoaXMuc2VsZWN0ZWRJdGVtSW5kZXg7XG4gICAgfVxuXG4gICAgcHVibGljIG9uU2VsZWN0SXRlbSh3b3Jrc3BhY2U6IFdvcmtzcGFjZSk6IHZvaWQge1xuICAgICAgICBpZiAod29ya3NwYWNlLmRpc2FibGVkKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1JbmRleCA9IHRoaXMud29ya3NwYWNlcy5pbmRleE9mKHdvcmtzcGFjZSk7XG4gICAgICAgIHRoaXMuY3VycmVudEl0ZW1JbmRleCA9IHRoaXMuc2VsZWN0ZWRJdGVtSW5kZXg7XG4gICAgICAgIHRoaXMuc2VsZWN0ZWQuZW1pdCh3b3Jrc3BhY2UpO1xuICAgIH1cblxuICAgIHB1YmxpYyBvbkZvb3RlckJ1dHRvbkNsaWNrKCk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgICAgdGhpcy5mb290ZXJCdXR0b25DbGlja2VkLmVtaXQoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIF9jYWxjdWxhdGVMaXN0TWF4SGVpZ2h0KCk6IHZvaWQge1xuICAgICAgICBjb25zdCB3b3Jrc3BhY2VMaXN0UmVmID0gdGhpcy5lUmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcihcIiN3b3Jrc3BhY2UtbGlzdFwiKTtcbiAgICAgICAgY29uc3QgeyB0b3AgfSA9IHdvcmtzcGFjZUxpc3RSZWYuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICAgICAgdGhpcy5oZWlnaHQgPSB3aW5kb3cuaW5uZXJIZWlnaHQgLSB0b3AgLSAyMCAtICh0aGlzLnNob3dGb290ZXJCdXR0b24gPyA2NCA6IDApO1xuICAgICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIF9zY3JvbGxUb0N1cnJlbnRJdGVtKCk6IHZvaWQge1xuICAgICAgICBjb25zdCBjdXJyZW50SXRlbSA9IHRoaXMubGlzdEl0ZW1zLnRvQXJyYXkoKVt0aGlzLmN1cnJlbnRJdGVtSW5kZXhdO1xuICAgICAgICBpZiAoY3VycmVudEl0ZW0pIHtcbiAgICAgICAgICAgIGN1cnJlbnRJdGVtLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSW50b1ZpZXcoeyBiZWhhdmlvcjogJ3Ntb290aCcsIGJsb2NrOiAnbmVhcmVzdCcgfSk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0=

package/fesm2015/seniorsistemas-angular-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __awaiter, __param, __rest } from 'tslib';
-import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, KeyValueDiffers, HostBinding, Renderer2, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, Optional, ContentChild } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, KeyValueDiffers, HostBinding, Renderer2, TemplateRef, InjectionToken, Inject, ViewEncapsulation, ViewContainerRef, ChangeDetectorRef, Pipe, ɵɵinject, Optional, ContentChild, ViewChildren } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, forkJoin } from 'rxjs';
 import { takeUntil, tap, map, switchMap, catchError, first, filter, take, delay, debounceTime, repeat, finalize } from 'rxjs/operators';
@@ -15734,6 +15734,7 @@ const VERTICAL = "vertical";
 const MIN_ITEM_SIZE = 200;
 let TimelineComponent = class TimelineComponent {
     constructor() {
+        this.highlightActiveItem = true;
         this.direction = HORIZONTAL;
         this.collapsable = true;
         this.counterLabel = "items";
@@ -15769,6 +15770,9 @@ __decorate([
 __decorate([
     Input()
 ], TimelineComponent.prototype, "activeIndex", void 0);
+__decorate([
+    Input()
+], TimelineComponent.prototype, "highlightActiveItem", void 0);
 __decorate([
     Input()
 ], TimelineComponent.prototype, "direction", void 0);
@@ -15784,7 +15788,7 @@ __decorate([
 TimelineComponent = __decorate([
     Component({
         selector: "s-timeline",
-        template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\">\n   </s-vertical-timeline>\n</ng-template>"
+        template: "<div *ngIf=\"changeToVertical(); then vertical else horizontal\"></div>\n\n<ng-template #horizontal>\n   <s-horizontal-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      [highlightActiveItem]=\"highlightActiveItem\">\n   </s-horizontal-timeline>\n</ng-template>\n\n<ng-template #vertical>\n   <s-vertical-timeline *ngIf=\"items?.length\"\n      [items]=\"items\"\n      [activeIndex]=\"activeIndex\"\n      highlightActiveItem=\"hi\"\n      [counterLabel]=\"counterLabel\"\n      [collapsable]=\"collapsable\"\n      [highlightActiveItem]=\"highlightActiveItem\">\n   </s-vertical-timeline>\n</ng-template>"
     })
 ], TimelineComponent);
 
@@ -15796,14 +15800,17 @@ __decorate([
 __decorate([
     Input()
 ], TimelineIconItemComponent.prototype, "isActive", void 0);
+__decorate([
+    Input()
+], TimelineIconItemComponent.prototype, "highlightActive", void 0);
 __decorate([
     Input()
 ], TimelineIconItemComponent.prototype, "isComplete", void 0);
 TimelineIconItemComponent = __decorate([
     Component({
         selector: "s-timeline-icon-item",
-        template: "<ng-container *ngIf=\"item\">\n   <div\n      class=\"timeline__icon-item\"\n      [ngClass]=\"{\n         'timeline__icon-item--small': item.testSize('small'),\n         'timeline__icon-item--normal': item.testSize('normal'),\n         'timeline__icon-item--warning': item.testSeverity('warning'),\n         'timeline__icon-item--error': item.testSeverity('error'),\n         'timeline__icon-item--completed': isComplete,\n         'timeline__icon-item--active': isActive\n      }\">\n      <div\n         class=\"timeline__icon-item__icon\"\n         [pTooltip]=\"item.tooltip\"\n         tooltipPosition=\"top\"\n         [ngStyle]=\"{ backgroundColor: item.color }\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span [ngClass]=\"item.icon\"></span>\n         </ng-template>\n         <ng-template #label_text_content>\n            <span class=\"timeline__icon-item__icon__label\">\n               {{ item.label }}\n            </span>\n         </ng-template>\n      </div>\n   </div>\n</ng-container>\n",
-        styles: [".timeline__icon-item .timeline__icon-item__icon{-ms-flex-align:center;align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:4px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:\"Open Sans\",sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}"]
+        template: "<ng-container *ngIf=\"item\">\n   <div\n      class=\"timeline__icon-item\"\n      [ngClass]=\"{\n         'timeline__icon-item--small': item.testSize('small'),\n         'timeline__icon-item--normal': item.testSize('normal'),\n         'timeline__icon-item--warning': item.testSeverity('warning'),\n         'timeline__icon-item--error': item.testSeverity('error'),\n         'timeline__icon-item--completed': isComplete,\n         'timeline__icon-item--active': isActive,\n         'timeline__icon-item--active--highlight': isActive && highlightActive\n      }\">\n      <div\n         class=\"timeline__icon-item__icon\"\n         [pTooltip]=\"item.tooltip\"\n         tooltipPosition=\"top\"\n         [ngStyle]=\"{ backgroundColor: item.color }\">\n         <ng-content *ngIf=\"item.icon; then icon_content; else label_text_content\"></ng-content>\n         <ng-template #icon_content>\n            <span [ngClass]=\"item.icon\"></span>\n         </ng-template>\n         <ng-template #label_text_content>\n            <span class=\"timeline__icon-item__icon__label\">\n               {{ item.label }}\n            </span>\n         </ng-template>\n      </div>\n   </div>\n</ng-container>\n",
+        styles: [".timeline__icon-item .timeline__icon-item__icon{-ms-flex-align:center;align-items:center;background-color:#697882;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:4px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.timeline__icon-item .timeline__icon-item__icon .timeline__icon-item__icon__label{font-family:\"Open Sans\",sans-serif}.timeline__icon-item.timeline__icon-item--small .timeline__icon-item__icon{font-size:0;height:16px;width:16px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon{font-size:10px;height:24px;padding:8px;width:24px}.timeline__icon-item.timeline__icon-item--normal .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:14px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon{font-size:20px;height:40px;padding:10px;width:40px}.timeline__icon-item.timeline__icon-item--active--highlight .timeline__icon-item__icon .timeline__icon-item__icon__label{font-size:22px}.timeline__icon-item.timeline__icon-item--active .timeline__icon-item__icon,.timeline__icon-item.timeline__icon-item--completed .timeline__icon-item__icon{background-color:#0c9348}.timeline__icon-item.timeline__icon-item--warning.timeline__icon-item--active .timeline__icon-item__icon{background-color:#fcbf10;color:#333}.timeline__icon-item.timeline__icon-item--danger.timeline__icon-item--active .timeline__icon-item__icon{background-color:#f8931f;color:#333}.timeline__icon-item.timeline__icon-item--error.timeline__icon-item--active .timeline__icon-item__icon{background-color:#c13018}"]
     })
 ], TimelineIconItemComponent);
 
@@ -15831,11 +15838,14 @@ __decorate([
 __decorate([
     Input()
 ], HorizontalTimelineComponent.prototype, "activeIndex", void 0);
+__decorate([
+    Input()
+], HorizontalTimelineComponent.prototype, "highlightActiveItem", void 0);
 HorizontalTimelineComponent = __decorate([
     Component({
         selector: "s-horizontal-timeline",
-        template: "<div class=\"horizontal-timeline\">\n   <ng-container\n      *ngFor=\"let item of items;\n         let i = index;\n         let isFirst = first;\n         let isLast = last\">\n      <div\n         class=\"horizontal-timeline__item\"\n         [ngClass]=\"{\n            'horizontal-timeline__item--small': item.testSize('small'),\n            'horizontal-timeline__item--normal': item.testSize('normal'),\n            'horizontal-timeline__item--warning': item.testSeverity('warning'),\n            'horizontal-timeline__item--error': item.testSeverity('error'),\n            'horizontal-timeline__item--completed': i < activeIndex,\n            'horizontal-timeline__item--active': i === activeIndex\n         }\">\n         <div class=\"horizontal-timeline__item__icon-wrapper\">\n            <div\n               class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--before\"\n               [ngStyle]=\"{ 'visibility': isFirst ? 'hidden' : 'visible' }\">\n            </div>\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isActive]=\"i === activeIndex\"\n               [isComplete]=\"i < activeIndex\">\n            </s-timeline-icon-item>\n            <div\n               class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--after\"\n               [ngStyle]=\"{ 'visibility': isLast ? 'hidden' : 'visible' }\">\n            </div>\n         </div>\n         <div class=\"horizontal-timeline__item__info\">\n            <div\n               class=\"horizontal-timeline__item__info__title\"\n               [pTooltip]=\"item.title\"\n               tooltipPosition=\"top\"\n               [showDelay]=\"1000\">\n               {{ item.title }}\n            </div>\n            <div\n               class=\"horizontal-timeline__item__info__description\"\n               [pTooltip]=\"item.description\"\n               tooltipPosition=\"top\"\n               [showDelay]=\"1000\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
-        styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.horizontal-timeline{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.horizontal-timeline .horizontal-timeline__item{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:56px;-ms-flex-pack:start;justify-content:flex-start;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{background-color:#697882;height:3px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{border-radius:0 2px 2px 0}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after{border-radius:2px 0 0 2px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info{width:20ch}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__description{color:#999;display:-webkit-box;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%;max-height:calc(12px * 1.5 * 4);overflow:hidden;text-align:center;text-overflow:ellipsis;-webkit-line-clamp:4;-webkit-box-orient:vertical}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--small .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 8px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--normal .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 12px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 20px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{background-color:#0c9348}"]
+        template: "<div class=\"horizontal-timeline\">\n   <ng-container\n      *ngFor=\"let item of items;\n         let i = index;\n         let isFirst = first;\n         let isLast = last\">\n      <div\n         class=\"horizontal-timeline__item\"\n         [ngClass]=\"{\n            'horizontal-timeline__item--small': item.testSize('small'),\n            'horizontal-timeline__item--normal': item.testSize('normal'),\n            'horizontal-timeline__item--warning': item.testSeverity('warning'),\n            'horizontal-timeline__item--error': item.testSeverity('error'),\n            'horizontal-timeline__item--completed': i < activeIndex,\n            'horizontal-timeline__item--active': i === activeIndex\n         }\">\n         <div class=\"horizontal-timeline__item__icon-wrapper\">\n            <div\n               class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--before\"\n               [ngStyle]=\"{ 'visibility': isFirst ? 'hidden' : 'visible' }\">\n            </div>\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isActive]=\"i === activeIndex\"\n               [isComplete]=\"i < activeIndex\"\n               [highlightActive]=\"highlightActiveItem\">\n            </s-timeline-icon-item>\n            <div\n               class=\"horizontal-timeline__item__icon-wrapper__line horizontal-timeline__item__icon-wrapper__line--after\"\n               [ngStyle]=\"{ 'visibility': isLast ? 'hidden' : 'visible' }\">\n            </div>\n         </div>\n         <div class=\"horizontal-timeline__item__info\">\n            <div\n               class=\"horizontal-timeline__item__info__title\"\n               [pTooltip]=\"item.title\"\n               tooltipPosition=\"top\"\n               [showDelay]=\"1000\">\n               {{ item.title }}\n            </div>\n            <div\n               class=\"horizontal-timeline__item__info__description\"\n               [pTooltip]=\"item.description\"\n               tooltipPosition=\"top\"\n               [showDelay]=\"1000\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
+        styles: ["@keyframes scale-up-center{0%{transform:scale(.5)}100%{transform:scale(1)}}.horizontal-timeline{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.horizontal-timeline .horizontal-timeline__item{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:56px;-ms-flex-pack:start;justify-content:flex-start;width:100%}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{background-color:#697882;height:3px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{border-radius:0 2px 2px 0}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after{border-radius:2px 0 0 2px}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info{width:20ch}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.horizontal-timeline .horizontal-timeline__item .horizontal-timeline__item__info .horizontal-timeline__item__info__description{color:#999;display:-webkit-box;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%;max-height:calc(12px * 1.5 * 4);overflow:hidden;text-align:center;text-overflow:ellipsis;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--small .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 8px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--normal .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 12px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active--highlight .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line{width:calc(50% - 4px - 20px)}.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--active .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--after,.horizontal-timeline .horizontal-timeline__item.horizontal-timeline__item--completed .horizontal-timeline__item__icon-wrapper .horizontal-timeline__item__icon-wrapper__line--before{background-color:#0c9348}"]
     })
 ], HorizontalTimelineComponent);
 
@@ -15883,6 +15893,9 @@ VerticalTimelineComponent.nextId = 0;
 __decorate([
     Input()
 ], VerticalTimelineComponent.prototype, "activeIndex", null);
+__decorate([
+    Input()
+], VerticalTimelineComponent.prototype, "highlightActiveItem", void 0);
 __decorate([
     Input()
 ], VerticalTimelineComponent.prototype, "items", void 0);
@@ -15895,7 +15908,7 @@ __decorate([
 VerticalTimelineComponent = __decorate([
     Component({
         selector: "s-vertical-timeline",
-        template: "<div class=\"vertical-timeline\">\n   <div\n      *ngIf=\"firstItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"firstItem\"\n         [isLast]=\"false\"\n         [isActive]=\"false\"\n         [isCompleted]=\"true\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g1Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g1Items.length > 1 && !isG1Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG1Collapsed\"\n               (change)=\"onChangeG1($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG1Collapsed && g1Items.length > 1 && collapsable; then g1_collapsed; else g1_items\"></div>\n\n      <ng-template #g1_collapsed>\n         <s-collapsed-items\n            [items]=\"g1Items\"\n            [(isCollapsed)]=\"isG1Collapsed\"\n            [isCompleted]=\"true\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g1_items>\n         <s-vertical-items\n            [items]=\"g1Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"true\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"activeItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"activeItem\"\n         [isLast]=\"!lastItem.length\"\n         [isActive]=\"true\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g2Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g2Items.length > 1 && !isG2Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG2Collapsed\"\n               (change)=\"onChangeG2($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG2Collapsed && g2Items.length > 1 && collapsable; then g2_collapsed; else g2_items\"></div>\n\n      <ng-template #g2_collapsed>\n         <s-collapsed-items\n            [items]=\"g2Items\"\n            [(isCollapsed)]=\"isG2Collapsed\"\n            [isCompleted]=\"false\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g2_items>\n         <s-vertical-items\n            [items]=\"g2Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"false\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"lastItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"lastItem\"\n         [isLast]=\"true\"\n         [isActive]=\"false\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n</div>",
+        template: "<div class=\"vertical-timeline\">\n   <div\n      *ngIf=\"firstItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"firstItem\"\n         [isLast]=\"false\"\n         [isActive]=\"false\"\n         [isCompleted]=\"true\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g1Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g1Items.length > 1 && !isG1Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG1Collapsed\"\n               (change)=\"onChangeG1($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG1Collapsed && g1Items.length > 1 && collapsable; then g1_collapsed; else g1_items\"></div>\n\n      <ng-template #g1_collapsed>\n         <s-collapsed-items\n            [items]=\"g1Items\"\n            [(isCollapsed)]=\"isG1Collapsed\"\n            [isCompleted]=\"true\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g1_items>\n         <s-vertical-items\n            [items]=\"g1Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"true\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"activeItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"activeItem\"\n         [isLast]=\"!lastItem.length\"\n         [isActive]=\"true\"\n         [highlightActive]=\"highlightActiveItem\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n\n   <div\n      *ngIf=\"g2Items.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\">\n         <ng-container *ngIf=\"g2Items.length > 1 && !isG2Collapsed\">\n            <s-collapse-option\n               *ngIf=\"collapsable\"\n               [isCollapsed]=\"isG2Collapsed\"\n               (change)=\"onChangeG2($event)\">\n            </s-collapse-option>\n            <s-range-line class=\"vertical-timeline__block__prefix__line\"></s-range-line>\n         </ng-container>\n      </div>\n\n      <div *ngIf=\"isG2Collapsed && g2Items.length > 1 && collapsable; then g2_collapsed; else g2_items\"></div>\n\n      <ng-template #g2_collapsed>\n         <s-collapsed-items\n            [items]=\"g2Items\"\n            [(isCollapsed)]=\"isG2Collapsed\"\n            [isCompleted]=\"false\"\n            [counterLabel]=\"counterLabel\">\n         </s-collapsed-items>\n      </ng-template>\n\n      <ng-template #g2_items>\n         <s-vertical-items\n            [items]=\"g2Items\"\n            [isLast]=\"false\"\n            [isActive]=\"false\"\n            [isCompleted]=\"false\">\n         </s-vertical-items>\n      </ng-template>\n   </div>\n\n   <div\n      *ngIf=\"lastItem.length\"\n      class=\"vertical-timeline__block\">\n      <div class=\"vertical-timeline__block__prefix\"></div>\n      <s-vertical-items\n         [items]=\"lastItem\"\n         [isLast]=\"true\"\n         [isActive]=\"false\"\n         [isCompleted]=\"false\">\n      </s-vertical-items>\n   </div>\n</div>",
         styles: [".vertical-timeline{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.vertical-timeline .vertical-timeline__block{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix{width:60px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0}.vertical-timeline .vertical-timeline__block .vertical-timeline__block__prefix .vertical-timeline__block__prefix__line{height:100%}"]
     })
 ], VerticalTimelineComponent);
@@ -15976,13 +15989,16 @@ __decorate([
 __decorate([
     Input()
 ], VerticalItemsComponent.prototype, "isActive", void 0);
+__decorate([
+    Input()
+], VerticalItemsComponent.prototype, "highlightActive", void 0);
 __decorate([
     Input()
 ], VerticalItemsComponent.prototype, "isCompleted", void 0);
 VerticalItemsComponent = __decorate([
     Component({
         selector: "s-vertical-items",
-        template: "<div class=\"vertical-items\">\n   <ng-container *ngFor=\"let item of items; let index = index;\">\n      <div\n         class=\"vertical-items__item\"\n         [ngClass]=\"{\n            'vertical-items__item--small': item.testSize('small'),\n            'vertical-items__item--normal': item.testSize('normal'),\n            'vertical-items__item--completed': isCompleted,\n            'vertical-items__item--active': isActive\n         }\">\n         <div class=\"vertical-items__item__icon-wrapper\">\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isComplete]=\"isCompleted\"\n               [isActive]=\"isActive\">\n            </s-timeline-icon-item>\n            <div\n               class=\"vertical-items__item__icon-wrapper__line\"\n               [ngStyle]=\"{ 'visibility': isLast ? 'hidden' : 'visible' }\">\n            </div>\n         </div>\n         <div class=\"vertical-items__item__info\">\n            <div class=\"vertical-timeline__item__info__title\">\n               {{ item.title }}\n            </div>\n            <div class=\"vertical-items__item__info__description\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
+        template: "<div class=\"vertical-items\">\n   <ng-container *ngFor=\"let item of items; let index = index;\">\n      <div\n         class=\"vertical-items__item\"\n         [ngClass]=\"{\n            'vertical-items__item--small': item.testSize('small'),\n            'vertical-items__item--normal': item.testSize('normal'),\n            'vertical-items__item--completed': isCompleted,\n            'vertical-items__item--active': isActive\n         }\">\n         <div class=\"vertical-items__item__icon-wrapper\">\n            <s-timeline-icon-item\n               [item]=\"item\"\n               [isComplete]=\"isCompleted\"\n               [isActive]=\"isActive\"\n               [highlightActive]=\"highlightActive\">\n            </s-timeline-icon-item>\n            <div\n               class=\"vertical-items__item__icon-wrapper__line\"\n               [ngStyle]=\"{ 'visibility': isLast ? 'hidden' : 'visible' }\">\n            </div>\n         </div>\n         <div class=\"vertical-items__item__info\">\n            <div class=\"vertical-timeline__item__info__title\">\n               {{ item.title }}\n            </div>\n            <div class=\"vertical-items__item__info__description\">\n               {{ item.description }}\n            </div>\n         </div>\n      </div>\n   </ng-container>\n</div>",
         styles: [".vertical-items .vertical-items__item{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;margin-right:50px}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.vertical-items .vertical-items__item .vertical-items__item__collapsed-option .vertical-items__item__collapsed-option__line{width:3px;height:50px;background-color:#ccc}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;width:56px}.vertical-items .vertical-items__item .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#697882;border-radius:2px;-ms-flex-positive:1;flex-grow:1;min-height:20px;width:3px}.vertical-items .vertical-items__item .vertical-items__item__info{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-bottom:12px}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.vertical-items .vertical-items__item .vertical-items__item__info .vertical-items__item__info__description.vertical-items__item__info__description--link{color:#428bca}.vertical-items .vertical-items__item.vertical-items__item--small .vertical-items__item__icon-wrapper__line{height:calc(100% - 4px - 8px)}.vertical-items .vertical-items__item.vertical-items__item--medium .vertical-items__item__icon-wrapper__line{height:calc(100% - 4px - 12px)}.vertical-items .vertical-items__item.vertical-items__item--big .vertical-items__item__icon-wrapper__line{height:calc(50% - 4px - 20px)}.vertical-items .vertical-items__item.vertical-items__item--completed .vertical-items__item__icon-wrapper .vertical-items__item__icon-wrapper__line{background-color:#0c9348}"]
     })
 ], VerticalItemsComponent);
@@ -16074,18 +16090,30 @@ class TimelineItem {
 }
 
 let WorkspaceSwitchComponent = class WorkspaceSwitchComponent {
-    constructor(eRef) {
+    constructor(eRef, changeDetectorRef) {
         this.eRef = eRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.footerButtonLabel = "Adicionar";
         this.showFooterButton = true;
         this.disabled = false;
         this.footerButtonClicked = new EventEmitter();
         this.selected = new EventEmitter();
-        this.open = false;
+        this.height = 0;
         this.selectedItemIndex = 0;
         this.currentItemIndex = 0;
+        this._open = false;
         this.tabindex = 0;
     }
+    get open() {
+        return this._open;
+    }
+    set open(open) {
+        this._open = open;
+        this.changeDetectorRef.detectChanges();
+        if (open) {
+            this._calculateListMaxHeight();
+        }
+    }
     onClickout(event) {
         if (!this.eRef.nativeElement.contains(event.target)) {
             this.open = false;
@@ -16109,11 +16137,13 @@ let WorkspaceSwitchComponent = class WorkspaceSwitchComponent {
         else if (event.key === "ArrowDown") {
             if (this.currentItemIndex < this.workspaces.length - 1) {
                 this.currentItemIndex++;
+                this._scrollToCurrentItem();
             }
         }
         else if (event.key === "ArrowUp") {
             if (this.currentItemIndex > 0) {
                 this.currentItemIndex--;
+                this._scrollToCurrentItem();
             }
         }
     }
@@ -16144,9 +16174,22 @@ let WorkspaceSwitchComponent = class WorkspaceSwitchComponent {
         this.open = false;
         this.footerButtonClicked.emit();
     }
+    _calculateListMaxHeight() {
+        const workspaceListRef = this.eRef.nativeElement.querySelector("#workspace-list");
+        const { top } = workspaceListRef.getBoundingClientRect();
+        this.height = window.innerHeight - top - 20 - (this.showFooterButton ? 64 : 0);
+        this.changeDetectorRef.detectChanges();
+    }
+    _scrollToCurrentItem() {
+        const currentItem = this.listItems.toArray()[this.currentItemIndex];
+        if (currentItem) {
+            currentItem.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
 };
 WorkspaceSwitchComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 __decorate([
     Input()
@@ -16166,6 +16209,9 @@ __decorate([
 __decorate([
     Output()
 ], WorkspaceSwitchComponent.prototype, "selected", void 0);
+__decorate([
+    ViewChildren('listItem')
+], WorkspaceSwitchComponent.prototype, "listItems", void 0);
 __decorate([
     HostBinding("attr.tabindex")
 ], WorkspaceSwitchComponent.prototype, "tabindex", void 0);
@@ -16178,8 +16224,8 @@ __decorate([
 WorkspaceSwitchComponent = __decorate([
     Component({
         selector: "s-workspace-switch",
-        template: "<div\n   class=\"workspace-switch\"\n   [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n   (blur)=\"buttonOnBlur()\">\n   <div class=\"button\" (click)=\"open = !open\">\n      <div class=\"item\">\n         <span class=\"title\">{{ workspaces[selectedItemIndex].title }}</span>\n         <span class=\"subtitle\">{{ workspaces[selectedItemIndex].subtitle }}</span>\n      </div>\n      <div class=\"icons\">\n         <span class=\"fas fa-chevron-up\"></span>\n         <span class=\"fas fa-chevron-down\"></span>\n      </div>\n   </div>\n   <div *ngIf=\"!disabled && open\" class=\"select\">\n      <div\n         *ngFor=\"let workspace of workspaces; let i = index\"\n         class=\"workspace\"\n         [ngClass]=\"{\n            'workspace--focused': i == currentItemIndex && !workspace.disabled,\n            'workspace--disabled': workspace.disabled\n         }\"\n         (click)=\"onSelectItem(workspace)\">\n         <div class=\"item\">\n            <span class=\"title\">{{ workspace.title }}</span>\n            <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n         </div>\n         <span *ngIf=\"i === selectedItemIndex\" class=\"active-icon fas fa-check\"></span>\n      </div>\n      <div *ngIf=\"showFooterButton\" class=\"footer\">\n         <div class=\"footer__button\" (click)=\"onFooterButtonClick()\">\n            <span class=\"footer__button__icon fas fa-plus\"></span>\n            <span class=\"footer__button__title\">{{ footerButtonLabel }}</span>\n         </div>\n      </div>\n   </div>\n</div>",
-        styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{-ms-flex-align:center;align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;margin:0 12px}.workspace-switch .select{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;margin:20px 0;padding-top:4px;position:absolute;width:324px}.workspace-switch .select .workspace{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none}.workspace-switch .select .workspace .active-icon{color:#7892a1;font-size:12px;margin:0 12px}.workspace-switch .select .workspace--focused{background-color:#f1f7f8}.workspace-switch .select .workspace--disabled .item .subtitle,.workspace-switch .select .workspace--disabled .item .title{color:#c1c1cc}.workspace-switch .select .workspace:hover:not(.workspace--disabled){background-color:#f1f7f8}.workspace-switch .select .footer{border-top:1px solid #ccc;padding:12px}.workspace-switch .select .footer .footer__button{-ms-flex-align:center;align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.workspace-switch .select .footer .footer__button .footer__button__icon{color:#333;margin-right:8px}.workspace-switch .select .footer .footer__button:active{border:1px solid #428bca}.workspace-switch .item{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding:12px}.workspace-switch .item .title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;text-transform:uppercase}.workspace-switch .item .subtitle{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.workspace-switch:focus{border:1px solid #428bca}.workspace-switch--disabled .button{cursor:default}.workspace-switch--disabled .button .icons,.workspace-switch--disabled .item .subtitle,.workspace-switch--disabled .item .title{color:#ccc}"]
+        template: "<div\n   class=\"workspace-switch\"\n   [ngClass]=\"{ 'workspace-switch--disabled': disabled }\"\n   (blur)=\"buttonOnBlur()\">\n   <div class=\"button\" (click)=\"open = !open\">\n      <div class=\"item\">\n         <span class=\"title\">{{ workspaces[selectedItemIndex].title }}</span>\n         <span class=\"subtitle\">{{ workspaces[selectedItemIndex].subtitle }}</span>\n      </div>\n      <div class=\"icons\">\n         <span class=\"fas fa-chevron-up\"></span>\n         <span class=\"fas fa-chevron-down\"></span>\n      </div>\n   </div>\n   <div *ngIf=\"!disabled && open\" class=\"drop-panel\">\n      <ul\n         id=\"workspace-list\"\n         class=\"workspace-list\"\n         [ngStyle]=\"{ 'max-height': height + 'px' }\">\n         <li\n            #listItem\n            *ngFor=\"let workspace of workspaces; let i = index\"\n            class=\"workspace\"\n            [ngClass]=\"{\n               'workspace--focused': i == currentItemIndex && !workspace.disabled,\n               'workspace--disabled': workspace.disabled\n            }\"\n            (click)=\"onSelectItem(workspace)\">\n            <div class=\"item\">\n               <span class=\"title\">{{ workspace.title }}</span>\n               <span class=\"subtitle\">{{ workspace.subtitle }}</span>\n            </div>\n            <span *ngIf=\"i === selectedItemIndex\" class=\"active-icon fas fa-check\"></span>\n         </li>\n      </ul>\n      <div *ngIf=\"showFooterButton\" class=\"footer\">\n         <div class=\"footer__button\" (click)=\"onFooterButtonClick()\">\n            <span class=\"footer__button__icon fas fa-plus\"></span>\n            <span class=\"footer__button__title\">{{ footerButtonLabel }}</span>\n         </div>\n      </div>\n   </div>\n</div>",
+        styles: [".workspace-switch{border-radius:4px;border:1px solid transparent;width:324px}.workspace-switch .button{-ms-flex-align:center;align-items:center;background-color:#fff;border:none;border-radius:3px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.workspace-switch .button .icons{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;margin:0 12px}.workspace-switch .drop-panel{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;margin:20px 0;padding-top:4px;position:absolute;width:324px}.workspace-switch .drop-panel .workspace-list{list-style:none;overflow:auto;padding:0}.workspace-switch .drop-panel .workspace-list .workspace{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-ms-user-select:none;user-select:none}.workspace-switch .drop-panel .workspace-list .workspace .active-icon{color:#7892a1;font-size:12px;margin:0 12px}.workspace-switch .drop-panel .workspace-list .workspace--focused{background-color:#f1f7f8}.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .subtitle,.workspace-switch .drop-panel .workspace-list .workspace--disabled .item .title{color:#c1c1cc}.workspace-switch .drop-panel .workspace-list .workspace:hover:not(.workspace--disabled){background-color:#f1f7f8}.workspace-switch .drop-panel .footer{border-top:1px solid #ccc;padding:12px}.workspace-switch .drop-panel .footer .footer__button{-ms-flex-align:center;align-items:center;border:1px solid #d8d8d8;border-radius:4px;padding:8px 12px;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.workspace-switch .drop-panel .footer .footer__button .footer__button__icon{color:#333;margin-right:8px}.workspace-switch .drop-panel .footer .footer__button:active{border:1px solid #428bca}.workspace-switch .item{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding:12px}.workspace-switch .item .title{color:#333;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:700;line-height:150%;text-transform:uppercase}.workspace-switch .item .subtitle{color:#999;font-family:\"Open Sans\",sans-serif;font-size:12px;font-weight:400;line-height:150%}.workspace-switch:focus{border:1px solid #428bca}.workspace-switch--disabled .button{cursor:default}.workspace-switch--disabled .button .icons,.workspace-switch--disabled .item .subtitle,.workspace-switch--disabled .item .title{color:#ccc}"]
     })
 ], WorkspaceSwitchComponent);