@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
|
@@ -16935,6 +16935,7 @@
|
|
|
16935
16935
|
var MIN_ITEM_SIZE = 200;
|
|
16936
16936
|
var TimelineComponent = /** @class */ (function () {
|
|
16937
16937
|
function TimelineComponent() {
|
|
16938
|
+
this.highlightActiveItem = true;
|
|
16938
16939
|
this.direction = HORIZONTAL;
|
|
16939
16940
|
this.collapsable = true;
|
|
16940
16941
|
this.counterLabel = "items";
|
|
@@ -16973,6 +16974,9 @@
|
|
|
16973
16974
|
__decorate([
|
|
16974
16975
|
core.Input()
|
|
16975
16976
|
], TimelineComponent.prototype, "activeIndex", void 0);
|
|
16977
|
+
__decorate([
|
|
16978
|
+
core.Input()
|
|
16979
|
+
], TimelineComponent.prototype, "highlightActiveItem", void 0);
|
|
16976
16980
|
__decorate([
|
|
16977
16981
|
core.Input()
|
|
16978
16982
|
], TimelineComponent.prototype, "direction", void 0);
|
|
@@ -16988,7 +16992,7 @@
|
|
|
16988
16992
|
TimelineComponent = __decorate([
|
|
16989
16993
|
core.Component({
|
|
16990
16994
|
selector: "s-timeline",
|
|
16991
|
-
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>"
|
|
16995
|
+
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>"
|
|
16992
16996
|
})
|
|
16993
16997
|
], TimelineComponent);
|
|
16994
16998
|
return TimelineComponent;
|
|
@@ -17003,14 +17007,17 @@
|
|
|
17003
17007
|
__decorate([
|
|
17004
17008
|
core.Input()
|
|
17005
17009
|
], TimelineIconItemComponent.prototype, "isActive", void 0);
|
|
17010
|
+
__decorate([
|
|
17011
|
+
core.Input()
|
|
17012
|
+
], TimelineIconItemComponent.prototype, "highlightActive", void 0);
|
|
17006
17013
|
__decorate([
|
|
17007
17014
|
core.Input()
|
|
17008
17015
|
], TimelineIconItemComponent.prototype, "isComplete", void 0);
|
|
17009
17016
|
TimelineIconItemComponent = __decorate([
|
|
17010
17017
|
core.Component({
|
|
17011
17018
|
selector: "s-timeline-icon-item",
|
|
17012
|
-
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",
|
|
17013
|
-
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}"]
|
|
17019
|
+
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",
|
|
17020
|
+
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}"]
|
|
17014
17021
|
})
|
|
17015
17022
|
], TimelineIconItemComponent);
|
|
17016
17023
|
return TimelineIconItemComponent;
|
|
@@ -17042,11 +17049,14 @@
|
|
|
17042
17049
|
__decorate([
|
|
17043
17050
|
core.Input()
|
|
17044
17051
|
], HorizontalTimelineComponent.prototype, "activeIndex", void 0);
|
|
17052
|
+
__decorate([
|
|
17053
|
+
core.Input()
|
|
17054
|
+
], HorizontalTimelineComponent.prototype, "highlightActiveItem", void 0);
|
|
17045
17055
|
HorizontalTimelineComponent = __decorate([
|
|
17046
17056
|
core.Component({
|
|
17047
17057
|
selector: "s-horizontal-timeline",
|
|
17048
|
-
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>",
|
|
17049
|
-
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}"]
|
|
17058
|
+
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>",
|
|
17059
|
+
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}"]
|
|
17050
17060
|
})
|
|
17051
17061
|
], HorizontalTimelineComponent);
|
|
17052
17062
|
return HorizontalTimelineComponent;
|
|
@@ -17102,6 +17112,9 @@
|
|
|
17102
17112
|
__decorate([
|
|
17103
17113
|
core.Input()
|
|
17104
17114
|
], VerticalTimelineComponent.prototype, "activeIndex", null);
|
|
17115
|
+
__decorate([
|
|
17116
|
+
core.Input()
|
|
17117
|
+
], VerticalTimelineComponent.prototype, "highlightActiveItem", void 0);
|
|
17105
17118
|
__decorate([
|
|
17106
17119
|
core.Input()
|
|
17107
17120
|
], VerticalTimelineComponent.prototype, "items", void 0);
|
|
@@ -17114,7 +17127,7 @@
|
|
|
17114
17127
|
VerticalTimelineComponent = __decorate([
|
|
17115
17128
|
core.Component({
|
|
17116
17129
|
selector: "s-vertical-timeline",
|
|
17117
|
-
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>",
|
|
17130
|
+
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>",
|
|
17118
17131
|
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%}"]
|
|
17119
17132
|
})
|
|
17120
17133
|
], VerticalTimelineComponent);
|
|
@@ -17203,13 +17216,16 @@
|
|
|
17203
17216
|
__decorate([
|
|
17204
17217
|
core.Input()
|
|
17205
17218
|
], VerticalItemsComponent.prototype, "isActive", void 0);
|
|
17219
|
+
__decorate([
|
|
17220
|
+
core.Input()
|
|
17221
|
+
], VerticalItemsComponent.prototype, "highlightActive", void 0);
|
|
17206
17222
|
__decorate([
|
|
17207
17223
|
core.Input()
|
|
17208
17224
|
], VerticalItemsComponent.prototype, "isCompleted", void 0);
|
|
17209
17225
|
VerticalItemsComponent = __decorate([
|
|
17210
17226
|
core.Component({
|
|
17211
17227
|
selector: "s-vertical-items",
|
|
17212
|
-
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>",
|
|
17228
|
+
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>",
|
|
17213
17229
|
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}"]
|
|
17214
17230
|
})
|
|
17215
17231
|
], VerticalItemsComponent);
|