@sarasanalytics-com/design-system 0.0.53 → 0.0.54
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/esm2022/lib/scrolling-cards/scrolling-cards.component.mjs +43 -10
- package/fesm2022/sarasanalytics-com-design-system.mjs +42 -9
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/scrolling-cards/scrolling-cards.component.d.ts +7 -3
- package/lib/skeleton/skeleton-container.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, ViewChild } from '@angular/core';
|
|
1
|
+
import { Component, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
|
|
2
2
|
import { CardComponent } from '../card/card.component';
|
|
3
3
|
import { IconService } from '../icon/icon.service';
|
|
4
4
|
import { HttpClientModule } from '@angular/common/http';
|
|
@@ -11,40 +11,73 @@ export class ScrollingCardsComponent {
|
|
|
11
11
|
this.direction = 'up';
|
|
12
12
|
this.displayCards = [];
|
|
13
13
|
this.animationPaused = false;
|
|
14
|
+
this.animationFrame = null;
|
|
14
15
|
}
|
|
15
16
|
ngOnInit() {
|
|
16
|
-
|
|
17
|
+
if (this.cards?.length) {
|
|
18
|
+
this.displayCards = [...this.cards, ...this.cards];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
ngOnChanges(changes) {
|
|
22
|
+
if (changes['cards'] && !changes['cards'].firstChange && this.cards?.length) {
|
|
23
|
+
this.displayCards = [...this.cards, ...this.cards];
|
|
24
|
+
this.initializeAnimation();
|
|
25
|
+
}
|
|
17
26
|
}
|
|
18
27
|
ngAfterViewInit() {
|
|
19
|
-
this.
|
|
20
|
-
|
|
28
|
+
if (this.cards?.length) {
|
|
29
|
+
this.initializeAnimation();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
initializeAnimation() {
|
|
33
|
+
if (this.animationFrame) {
|
|
34
|
+
cancelAnimationFrame(this.animationFrame);
|
|
35
|
+
}
|
|
36
|
+
this.animationFrame = requestAnimationFrame(() => {
|
|
37
|
+
this.setAnimationProperties();
|
|
38
|
+
});
|
|
21
39
|
}
|
|
22
40
|
setAnimationProperties() {
|
|
23
|
-
if (!this.cardContainer)
|
|
41
|
+
if (!this.cardContainer?.nativeElement)
|
|
24
42
|
return;
|
|
25
43
|
const container = this.cardContainer.nativeElement;
|
|
26
44
|
this.isVertical = this.direction === 'up' || this.direction === 'down';
|
|
45
|
+
// Set vertical/horizontal classes
|
|
46
|
+
container.classList.toggle('vertical', this.isVertical);
|
|
47
|
+
container.classList.toggle('horizontal', !this.isVertical);
|
|
27
48
|
const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
|
|
28
49
|
const duration = containerSize / this.duration;
|
|
29
50
|
container.style.setProperty('--scroll-duration', `${duration}s`);
|
|
30
51
|
container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
|
|
31
|
-
|
|
32
|
-
container.
|
|
52
|
+
// Reset animation
|
|
53
|
+
container.style.animation = 'none';
|
|
54
|
+
container.offsetHeight; // Trigger reflow
|
|
55
|
+
container.style.animation = null;
|
|
56
|
+
this.cdr.markForCheck();
|
|
33
57
|
}
|
|
34
58
|
pauseScroll() {
|
|
59
|
+
if (!this.cardContainer?.nativeElement)
|
|
60
|
+
return;
|
|
35
61
|
this.animationPaused = true;
|
|
36
62
|
this.cardContainer.nativeElement.style.animationPlayState = 'paused';
|
|
37
63
|
}
|
|
38
64
|
resumeScroll() {
|
|
65
|
+
if (!this.cardContainer?.nativeElement)
|
|
66
|
+
return;
|
|
39
67
|
this.animationPaused = false;
|
|
40
68
|
this.cardContainer.nativeElement.style.animationPlayState = 'running';
|
|
41
69
|
}
|
|
70
|
+
ngOnDestroy() {
|
|
71
|
+
if (this.animationFrame) {
|
|
72
|
+
cancelAnimationFrame(this.animationFrame);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
42
75
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }] }); }
|
|
76
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
44
77
|
}
|
|
45
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
46
79
|
type: Component,
|
|
47
|
-
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
80
|
+
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
48
81
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
49
82
|
type: Input,
|
|
50
83
|
args: [{ required: true }]
|
|
@@ -56,4 +89,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
56
89
|
type: ViewChild,
|
|
57
90
|
args: ['cardContainer']
|
|
58
91
|
}] } });
|
|
59
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
92
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsaW5nLWNhcmRzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvc2Nyb2xsaW5nLWNhcmRzL3Njcm9sbGluZy1jYXJkcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3Njcm9sbGluZy1jYXJkcy9zY3JvbGxpbmctY2FyZHMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXlCLFNBQVMsRUFBMkQsdUJBQXVCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckssT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNuRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7QUFZeEQsTUFBTSxPQUFPLHVCQUF1QjtJQVdsQyxZQUFvQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQVZmLFVBQUssR0FBeUIsRUFBRSxDQUFDO1FBQ25ELGFBQVEsR0FBVyxFQUFFLENBQUM7UUFDdEIsY0FBUyxHQUFxQyxJQUFJLENBQUM7UUFHNUQsaUJBQVksR0FBeUIsRUFBRSxDQUFDO1FBQ3hDLG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBRWhCLG1CQUFjLEdBQWtCLElBQUksQ0FBQztJQUVDLENBQUM7SUFFL0MsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JELENBQUM7SUFD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Q0FBQztRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsa0JBQWtCLEdBQUcsU0FBUyxDQUFDO0lBQ3hFLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDeEIsb0JBQW9CLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQzVDLENBQUM7SUFDSCxDQUFDOzhHQWxGVSx1QkFBdUI7a0dBQXZCLHVCQUF1QiwySUFMdkIsQ0FBQyxXQUFXLENBQUMsK0pDVjFCLHVqQkFVTSxxaUVERE0sZ0JBQWdCLCtCQUFFLGFBQWE7OzJGQU05Qix1QkFBdUI7a0JBVG5DLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLGdCQUFnQixFQUFFLGFBQWEsQ0FBQyxhQUMvQixDQUFDLFdBQVcsQ0FBQyxtQkFHUCx1QkFBdUIsQ0FBQyxNQUFNO3NGQUdwQixLQUFLO3NCQUEvQixLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFDaEIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNzQixhQUFhO3NCQUF4QyxTQUFTO3VCQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIEFmdGVyVmlld0luaXQsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiwgQ2hhbmdlRGV0ZWN0b3JSZWYsIFNpbXBsZUNoYW5nZXMsIE9uRGVzdHJveSwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhcmRDb21wb25lbnQgfSBmcm9tICcuLi9jYXJkL2NhcmQuY29tcG9uZW50JztcbmltcG9ydCB7IEljb25TZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLnNlcnZpY2UnO1xuaW1wb3J0IHsgSHR0cENsaWVudE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcbmltcG9ydCB7IElTY3JvbGxpbmdDYXJkRGF0YSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvc2Nyb2xsaW5nLWNhcmQtaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2Etc2Nyb2xsaW5nLWNhcmRzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0h0dHBDbGllbnRNb2R1bGUsIENhcmRDb21wb25lbnRdLFxuICBwcm92aWRlcnM6IFtJY29uU2VydmljZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9zY3JvbGxpbmctY2FyZHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zY3JvbGxpbmctY2FyZHMuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBTY3JvbGxpbmdDYXJkc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgY2FyZHM6IElTY3JvbGxpbmdDYXJkRGF0YVtdID0gW107XG4gIEBJbnB1dCgpIGR1cmF0aW9uOiBudW1iZXIgPSAxMDtcbiAgQElucHV0KCkgZGlyZWN0aW9uOiAndXAnIHwgJ2Rvd24nIHwgJ2xlZnQnIHwgJ3JpZ2h0JyA9ICd1cCc7XG4gIEBWaWV3Q2hpbGQoJ2NhcmRDb250YWluZXInKSBjYXJkQ29udGFpbmVyITogRWxlbWVudFJlZjtcblxuICBkaXNwbGF5Q2FyZHM6IElTY3JvbGxpbmdDYXJkRGF0YVtdID0gW107XG4gIGFuaW1hdGlvblBhdXNlZCA9IGZhbHNlO1xuICBpc1ZlcnRpY2FsOiBib29sZWFuO1xuICBwcml2YXRlIGFuaW1hdGlvbkZyYW1lOiBudW1iZXIgfCBudWxsID0gbnVsbDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmNhcmRzPy5sZW5ndGgpIHtcbiAgICAgIHRoaXMuZGlzcGxheUNhcmRzID0gWy4uLnRoaXMuY2FyZHMsIC4uLnRoaXMuY2FyZHNdO1xuICAgIH1cbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1snY2FyZHMnXSAmJiAhY2hhbmdlc1snY2FyZHMnXS5maXJzdENoYW5nZSAmJiB0aGlzLmNhcmRzPy5sZW5ndGgpIHtcbiAgICAgIHRoaXMuZGlzcGxheUNhcmRzID0gWy4uLnRoaXMuY2FyZHMsIC4uLnRoaXMuY2FyZHNdO1xuICAgICAgdGhpcy5pbml0aWFsaXplQW5pbWF0aW9uKCk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGlmICh0aGlzLmNhcmRzPy5sZW5ndGgpIHtcbiAgICAgIHRoaXMuaW5pdGlhbGl6ZUFuaW1hdGlvbigpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgaW5pdGlhbGl6ZUFuaW1hdGlvbigpIHtcbiAgICBpZiAodGhpcy5hbmltYXRpb25GcmFtZSkge1xuICAgICAgY2FuY2VsQW5pbWF0aW9uRnJhbWUodGhpcy5hbmltYXRpb25GcmFtZSk7XG4gICAgfVxuXG4gICAgdGhpcy5hbmltYXRpb25GcmFtZSA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICB0aGlzLnNldEFuaW1hdGlvblByb3BlcnRpZXMoKTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0QW5pbWF0aW9uUHJvcGVydGllcygpIHtcbiAgICBpZiAoIXRoaXMuY2FyZENvbnRhaW5lcj8ubmF0aXZlRWxlbWVudCkgcmV0dXJuO1xuXG4gICAgY29uc3QgY29udGFpbmVyID0gdGhpcy5jYXJkQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQ7XG4gICAgdGhpcy5pc1ZlcnRpY2FsID0gdGhpcy5kaXJlY3Rpb24gPT09ICd1cCcgfHwgdGhpcy5kaXJlY3Rpb24gPT09ICdkb3duJztcblxuICAgIC8vIFNldCB2ZXJ0aWNhbC9ob3Jpem9udGFsIGNsYXNzZXNcbiAgICBjb250YWluZXIuY2xhc3NMaXN0LnRvZ2dsZSgndmVydGljYWwnLCB0aGlzLmlzVmVydGljYWwpO1xuICAgIGNvbnRhaW5lci5jbGFzc0xpc3QudG9nZ2xlKCdob3Jpem9udGFsJywgIXRoaXMuaXNWZXJ0aWNhbCk7XG5cbiAgICBjb25zdCBjb250YWluZXJTaXplID0gdGhpcy5pc1ZlcnRpY2FsID8gY29udGFpbmVyLnNjcm9sbEhlaWdodCA6IGNvbnRhaW5lci5zY3JvbGxXaWR0aDtcbiAgICBjb25zdCBkdXJhdGlvbiA9IGNvbnRhaW5lclNpemUgLyB0aGlzLmR1cmF0aW9uO1xuXG4gICAgY29udGFpbmVyLnN0eWxlLnNldFByb3BlcnR5KCctLXNjcm9sbC1kdXJhdGlvbicsIGAke2R1cmF0aW9ufXNgKTtcbiAgICBjb250YWluZXIuc3R5bGUuc2V0UHJvcGVydHkoJy0tc2Nyb2xsLWRpcmVjdGlvbicsIHRoaXMuZGlyZWN0aW9uID09PSAnZG93bicgfHwgdGhpcy5kaXJlY3Rpb24gPT09ICdyaWdodCcgPyAncmV2ZXJzZScgOiAnbm9ybWFsJyk7XG5cbiAgICAvLyBSZXNldCBhbmltYXRpb25cbiAgICBjb250YWluZXIuc3R5bGUuYW5pbWF0aW9uID0gJ25vbmUnO1xuICAgIGNvbnRhaW5lci5vZmZzZXRIZWlnaHQ7IC8vIFRyaWdnZXIgcmVmbG93XG4gICAgY29udGFpbmVyLnN0eWxlLmFuaW1hdGlvbiA9IG51bGw7XG5cbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIHBhdXNlU2Nyb2xsKCkge1xuICAgIGlmICghdGhpcy5jYXJkQ29udGFpbmVyPy5uYXRpdmVFbGVtZW50KSByZXR1cm47XG4gICAgdGhpcy5hbmltYXRpb25QYXVzZWQgPSB0cnVlO1xuICAgIHRoaXMuY2FyZENvbnRhaW5lci5uYXRpdmVFbGVtZW50LnN0eWxlLmFuaW1hdGlvblBsYXlTdGF0ZSA9ICdwYXVzZWQnO1xuICB9XG5cbiAgcmVzdW1lU2Nyb2xsKCkge1xuICAgIGlmICghdGhpcy5jYXJkQ29udGFpbmVyPy5uYXRpdmVFbGVtZW50KSByZXR1cm47XG4gICAgdGhpcy5hbmltYXRpb25QYXVzZWQgPSBmYWxzZTtcbiAgICB0aGlzLmNhcmRDb250YWluZXIubmF0aXZlRWxlbWVudC5zdHlsZS5hbmltYXRpb25QbGF5U3RhdGUgPSAncnVubmluZyc7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5hbmltYXRpb25GcmFtZSkge1xuICAgICAgY2FuY2VsQW5pbWF0aW9uRnJhbWUodGhpcy5hbmltYXRpb25GcmFtZSk7XG4gICAgfVxuICB9XG59IiwiPGRpdiBjbGFzcz1cInNjcm9sbGluZy1jYXJkcy1jb250YWluZXIge3t0aGlzLmlzVmVydGljYWwgPyAndmVydGljYWwnOiAnaG9yaXpvbnRhbCd9fVwiIChtb3VzZWVudGVyKT1cInBhdXNlU2Nyb2xsKClcIlxuICAgIChtb3VzZWxlYXZlKT1cInJlc3VtZVNjcm9sbCgpXCI+XG4gICAgPGRpdiAjY2FyZENvbnRhaW5lciBjbGFzcz1cImNhcmQtY29udGFpbmVyXCI+XG4gICAgICAgIEBmb3IgKGNhcmQgb2YgZGlzcGxheUNhcmRzOyB0cmFjayBjYXJkLnRpdGxlKSB7XG4gICAgICAgIDxzYS1jYXJkIFt0aXRsZV09XCJjYXJkLnRpdGxlXCIgW2JvZHldPVwiY2FyZC5ib2R5XCIgW2ljb25dPVwiY2FyZC5pY29uXCIgW2ljb25TaXplXT1cIic1NCdcIlxuICAgICAgICAgICAgW2N1c3RvbVdyYXBwZXJDbGFzc109XCInc2EtY2FyZC1zZWNvbmRhcnktd3JhcHBlcidcIiBbd2lkdGhdPVwiJzI0LjA2M3JlbSdcIiBbY29sdW1uXT1cImZhbHNlXCJcbiAgICAgICAgICAgIFtzaG93Q2FyZEJvZHldPVwidHJ1ZVwiPlxuICAgICAgICA8L3NhLWNhcmQ+XG4gICAgICAgIH1cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ViewChild, HostBinding } from '@angular/core';
|
|
2
|
+
import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ViewChild, ChangeDetectionStrategy, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgIf, NgStyle, NgFor } from '@angular/common';
|
|
5
5
|
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
@@ -1831,40 +1831,73 @@ class ScrollingCardsComponent {
|
|
|
1831
1831
|
this.direction = 'up';
|
|
1832
1832
|
this.displayCards = [];
|
|
1833
1833
|
this.animationPaused = false;
|
|
1834
|
+
this.animationFrame = null;
|
|
1834
1835
|
}
|
|
1835
1836
|
ngOnInit() {
|
|
1836
|
-
|
|
1837
|
+
if (this.cards?.length) {
|
|
1838
|
+
this.displayCards = [...this.cards, ...this.cards];
|
|
1839
|
+
}
|
|
1840
|
+
}
|
|
1841
|
+
ngOnChanges(changes) {
|
|
1842
|
+
if (changes['cards'] && !changes['cards'].firstChange && this.cards?.length) {
|
|
1843
|
+
this.displayCards = [...this.cards, ...this.cards];
|
|
1844
|
+
this.initializeAnimation();
|
|
1845
|
+
}
|
|
1837
1846
|
}
|
|
1838
1847
|
ngAfterViewInit() {
|
|
1839
|
-
this.
|
|
1840
|
-
|
|
1848
|
+
if (this.cards?.length) {
|
|
1849
|
+
this.initializeAnimation();
|
|
1850
|
+
}
|
|
1851
|
+
}
|
|
1852
|
+
initializeAnimation() {
|
|
1853
|
+
if (this.animationFrame) {
|
|
1854
|
+
cancelAnimationFrame(this.animationFrame);
|
|
1855
|
+
}
|
|
1856
|
+
this.animationFrame = requestAnimationFrame(() => {
|
|
1857
|
+
this.setAnimationProperties();
|
|
1858
|
+
});
|
|
1841
1859
|
}
|
|
1842
1860
|
setAnimationProperties() {
|
|
1843
|
-
if (!this.cardContainer)
|
|
1861
|
+
if (!this.cardContainer?.nativeElement)
|
|
1844
1862
|
return;
|
|
1845
1863
|
const container = this.cardContainer.nativeElement;
|
|
1846
1864
|
this.isVertical = this.direction === 'up' || this.direction === 'down';
|
|
1865
|
+
// Set vertical/horizontal classes
|
|
1866
|
+
container.classList.toggle('vertical', this.isVertical);
|
|
1867
|
+
container.classList.toggle('horizontal', !this.isVertical);
|
|
1847
1868
|
const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
|
|
1848
1869
|
const duration = containerSize / this.duration;
|
|
1849
1870
|
container.style.setProperty('--scroll-duration', `${duration}s`);
|
|
1850
1871
|
container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
|
|
1851
|
-
|
|
1852
|
-
container.
|
|
1872
|
+
// Reset animation
|
|
1873
|
+
container.style.animation = 'none';
|
|
1874
|
+
container.offsetHeight; // Trigger reflow
|
|
1875
|
+
container.style.animation = null;
|
|
1876
|
+
this.cdr.markForCheck();
|
|
1853
1877
|
}
|
|
1854
1878
|
pauseScroll() {
|
|
1879
|
+
if (!this.cardContainer?.nativeElement)
|
|
1880
|
+
return;
|
|
1855
1881
|
this.animationPaused = true;
|
|
1856
1882
|
this.cardContainer.nativeElement.style.animationPlayState = 'paused';
|
|
1857
1883
|
}
|
|
1858
1884
|
resumeScroll() {
|
|
1885
|
+
if (!this.cardContainer?.nativeElement)
|
|
1886
|
+
return;
|
|
1859
1887
|
this.animationPaused = false;
|
|
1860
1888
|
this.cardContainer.nativeElement.style.animationPlayState = 'running';
|
|
1861
1889
|
}
|
|
1890
|
+
ngOnDestroy() {
|
|
1891
|
+
if (this.animationFrame) {
|
|
1892
|
+
cancelAnimationFrame(this.animationFrame);
|
|
1893
|
+
}
|
|
1894
|
+
}
|
|
1862
1895
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1863
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }] }); }
|
|
1896
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1864
1897
|
}
|
|
1865
1898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
1866
1899
|
type: Component,
|
|
1867
|
-
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
1900
|
+
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
1868
1901
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
1869
1902
|
type: Input,
|
|
1870
1903
|
args: [{ required: true }]
|