@seniorsistemas/angular-components 17.7.2 → 17.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/seniorsistemas-angular-components.umd.js +23 -7
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/timeline/components/horizontal-timeline/horizontal-timeline.component.d.ts +1 -0
- package/components/timeline/components/timeline-icon-item/timeline-icon-item.component.d.ts +1 -0
- package/components/timeline/components/vertical-timeline/components/vertical-items/vertical-items.component.d.ts +1 -0
- package/components/timeline/components/vertical-timeline/vertical-timeline.component.d.ts +1 -0
- package/components/timeline/timeline.component.d.ts +1 -0
- package/esm2015/components/timeline/components/horizontal-timeline/horizontal-timeline.component.js +6 -3
- package/esm2015/components/timeline/components/timeline-icon-item/timeline-icon-item.component.js +6 -3
- package/esm2015/components/timeline/components/vertical-timeline/components/vertical-items/vertical-items.component.js +5 -2
- package/esm2015/components/timeline/components/vertical-timeline/vertical-timeline.component.js +5 -2
- package/esm2015/components/timeline/timeline.component.js +6 -2
- package/esm5/components/timeline/components/horizontal-timeline/horizontal-timeline.component.js +6 -3
- package/esm5/components/timeline/components/timeline-icon-item/timeline-icon-item.component.js +6 -3
- package/esm5/components/timeline/components/vertical-timeline/components/vertical-items/vertical-items.component.js +5 -2
- package/esm5/components/timeline/components/vertical-timeline/vertical-timeline.component.js +5 -2
- package/esm5/components/timeline/timeline.component.js +6 -2
- package/fesm2015/seniorsistemas-angular-components.js +23 -7
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +23 -7
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -15734,6 +15734,7 @@ const VERTICAL = "vertical";
|
|
|
15734
15734
|
const MIN_ITEM_SIZE = 200;
|
|
15735
15735
|
let TimelineComponent = class TimelineComponent {
|
|
15736
15736
|
constructor() {
|
|
15737
|
+
this.highlightActiveItem = true;
|
|
15737
15738
|
this.direction = HORIZONTAL;
|
|
15738
15739
|
this.collapsable = true;
|
|
15739
15740
|
this.counterLabel = "items";
|
|
@@ -15769,6 +15770,9 @@ __decorate([
|
|
|
15769
15770
|
__decorate([
|
|
15770
15771
|
Input()
|
|
15771
15772
|
], TimelineComponent.prototype, "activeIndex", void 0);
|
|
15773
|
+
__decorate([
|
|
15774
|
+
Input()
|
|
15775
|
+
], TimelineComponent.prototype, "highlightActiveItem", void 0);
|
|
15772
15776
|
__decorate([
|
|
15773
15777
|
Input()
|
|
15774
15778
|
], TimelineComponent.prototype, "direction", void 0);
|
|
@@ -15784,7 +15788,7 @@ __decorate([
|
|
|
15784
15788
|
TimelineComponent = __decorate([
|
|
15785
15789
|
Component({
|
|
15786
15790
|
selector: "s-timeline",
|
|
15787
|
-
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>"
|
|
15791
|
+
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>"
|
|
15788
15792
|
})
|
|
15789
15793
|
], TimelineComponent);
|
|
15790
15794
|
|
|
@@ -15796,14 +15800,17 @@ __decorate([
|
|
|
15796
15800
|
__decorate([
|
|
15797
15801
|
Input()
|
|
15798
15802
|
], TimelineIconItemComponent.prototype, "isActive", void 0);
|
|
15803
|
+
__decorate([
|
|
15804
|
+
Input()
|
|
15805
|
+
], TimelineIconItemComponent.prototype, "highlightActive", void 0);
|
|
15799
15806
|
__decorate([
|
|
15800
15807
|
Input()
|
|
15801
15808
|
], TimelineIconItemComponent.prototype, "isComplete", void 0);
|
|
15802
15809
|
TimelineIconItemComponent = __decorate([
|
|
15803
15810
|
Component({
|
|
15804
15811
|
selector: "s-timeline-icon-item",
|
|
15805
|
-
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",
|
|
15806
|
-
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}"]
|
|
15812
|
+
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",
|
|
15813
|
+
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}"]
|
|
15807
15814
|
})
|
|
15808
15815
|
], TimelineIconItemComponent);
|
|
15809
15816
|
|
|
@@ -15831,11 +15838,14 @@ __decorate([
|
|
|
15831
15838
|
__decorate([
|
|
15832
15839
|
Input()
|
|
15833
15840
|
], HorizontalTimelineComponent.prototype, "activeIndex", void 0);
|
|
15841
|
+
__decorate([
|
|
15842
|
+
Input()
|
|
15843
|
+
], HorizontalTimelineComponent.prototype, "highlightActiveItem", void 0);
|
|
15834
15844
|
HorizontalTimelineComponent = __decorate([
|
|
15835
15845
|
Component({
|
|
15836
15846
|
selector: "s-horizontal-timeline",
|
|
15837
|
-
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>",
|
|
15838
|
-
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}"]
|
|
15847
|
+
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>",
|
|
15848
|
+
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}"]
|
|
15839
15849
|
})
|
|
15840
15850
|
], HorizontalTimelineComponent);
|
|
15841
15851
|
|
|
@@ -15883,6 +15893,9 @@ VerticalTimelineComponent.nextId = 0;
|
|
|
15883
15893
|
__decorate([
|
|
15884
15894
|
Input()
|
|
15885
15895
|
], VerticalTimelineComponent.prototype, "activeIndex", null);
|
|
15896
|
+
__decorate([
|
|
15897
|
+
Input()
|
|
15898
|
+
], VerticalTimelineComponent.prototype, "highlightActiveItem", void 0);
|
|
15886
15899
|
__decorate([
|
|
15887
15900
|
Input()
|
|
15888
15901
|
], VerticalTimelineComponent.prototype, "items", void 0);
|
|
@@ -15895,7 +15908,7 @@ __decorate([
|
|
|
15895
15908
|
VerticalTimelineComponent = __decorate([
|
|
15896
15909
|
Component({
|
|
15897
15910
|
selector: "s-vertical-timeline",
|
|
15898
|
-
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>",
|
|
15911
|
+
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>",
|
|
15899
15912
|
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%}"]
|
|
15900
15913
|
})
|
|
15901
15914
|
], VerticalTimelineComponent);
|
|
@@ -15976,13 +15989,16 @@ __decorate([
|
|
|
15976
15989
|
__decorate([
|
|
15977
15990
|
Input()
|
|
15978
15991
|
], VerticalItemsComponent.prototype, "isActive", void 0);
|
|
15992
|
+
__decorate([
|
|
15993
|
+
Input()
|
|
15994
|
+
], VerticalItemsComponent.prototype, "highlightActive", void 0);
|
|
15979
15995
|
__decorate([
|
|
15980
15996
|
Input()
|
|
15981
15997
|
], VerticalItemsComponent.prototype, "isCompleted", void 0);
|
|
15982
15998
|
VerticalItemsComponent = __decorate([
|
|
15983
15999
|
Component({
|
|
15984
16000
|
selector: "s-vertical-items",
|
|
15985
|
-
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>",
|
|
16001
|
+
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>",
|
|
15986
16002
|
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}"]
|
|
15987
16003
|
})
|
|
15988
16004
|
], VerticalItemsComponent);
|