@sarasanalytics-com/design-system 0.0.20 → 0.0.21
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/card-carousel/card-carousel.component.mjs +3 -3
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/scrolling-cards/scrolling-cards.component.mjs +59 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +60 -6
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/scrolling-cards/scrolling-cards.component.d.ts +36 -0
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
|
@@ -11,7 +11,7 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
|
11
11
|
import { MatButton } from '@angular/material/button';
|
|
12
12
|
import * as i2 from '@angular/material/datepicker';
|
|
13
13
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
14
|
-
import { HttpClient } from '@angular/common/http';
|
|
14
|
+
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
15
15
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
16
16
|
import { MatInputModule } from '@angular/material/input';
|
|
17
17
|
import * as i1$1 from '@angular/material/form-field';
|
|
@@ -683,11 +683,11 @@ class CardCarouselComponent {
|
|
|
683
683
|
}
|
|
684
684
|
}
|
|
685
685
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
686
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 20px;width:100%;min-height:32px}.dots{display:inline-flex;gap:4px;align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:4px;gap:12px;margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:6px;height:6px;border-radius:50%;background-color:var(--grey-200);margin:0
|
|
686
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px)}.brand-logos-container{width:31.25rem;margin-top:var(--medium-32px);overflow:hidden;max-width:31.25rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "customWrapperClass", "chip", "body", "avatar", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
687
687
|
}
|
|
688
688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
689
689
|
type: Component,
|
|
690
|
-
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 20px;width:100%;min-height:32px}.dots{display:inline-flex;gap:4px;align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:4px;gap:12px;margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:6px;height:6px;border-radius:50%;background-color:var(--grey-200);margin:0
|
|
690
|
+
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent], encapsulation: ViewEncapsulation.None, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex].body\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-icon [icon]=\"cards[currentIndex].avatarIcon\" size=\"50\"></sa-icon>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex].title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex].subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex].logoIcon\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track $index) {\n <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"$index === 1\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n }\n </div>\n </div>\n }\n\n\n\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;max-width:15rem}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px)}.brand-logos-container{width:31.25rem;margin-top:var(--medium-32px);overflow:hidden;max-width:31.25rem}.brand-logos{display:flex;gap:var(--medium-24px);transition:transform .3s ease;justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:transform .3s ease,opacity .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}\n"] }]
|
|
691
691
|
}], propDecorators: { cards: [{
|
|
692
692
|
type: Input
|
|
693
693
|
}], interval: [{
|
|
@@ -1239,7 +1239,7 @@ class LeftNavComponent {
|
|
|
1239
1239
|
});
|
|
1240
1240
|
}
|
|
1241
1241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1242
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"
|
|
1242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { data: "data" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5544 13.5489C15.5034 13.5489 15.4525 13.5489 15.4021 13.5458V13.5489C15.4021 13.5489 14.8606 13.5359 13.0068 13.5253C9.95959 13.4986 8.83176 14.762 8.47545 15.3415H8.46938C8.2094 15.8311 8.13711 16.4024 8.26664 16.9437L8.26299 16.9549C8.28242 17.0836 8.5665 18.5783 11.0255 18.5267C12.9965 18.4851 14.1753 18.3619 14.6506 18.3016C15.2478 18.1597 15.869 18.1613 16.4656 18.3063C17.0621 18.4513 17.6178 18.7357 18.0892 19.1373C18.5605 19.539 18.9347 20.0469 19.1824 20.6213C19.4302 21.1957 19.5448 21.8211 19.5173 22.4485C19.4897 23.0758 19.3208 23.6882 19.0238 24.2375C18.7267 24.7869 18.3095 25.2583 17.8049 25.615C17.3003 25.9717 16.7219 26.2039 16.1151 26.2935C15.5083 26.3831 14.8894 26.3276 14.307 26.1314C14.0163 26.063 13.6253 25.9623 13.0985 25.8162C9.93167 25.0272 8.19258 29.8974 8.19258 29.8974L8.18651 29.9017C7.9393 30.6023 7.5091 31.22 6.94278 31.6874C6.37647 32.1549 5.69576 32.4541 4.97485 32.5526C4.25393 32.6511 3.52045 32.545 2.85434 32.2459C2.18822 31.9468 1.61502 31.4662 1.1972 30.8565C0.779378 30.2467 0.532961 29.5312 0.484798 28.7878C0.436635 28.0445 0.588573 27.3019 0.924059 26.6409C1.25955 25.9799 1.76571 25.426 2.38739 25.0393C3.00908 24.6527 3.72244 24.4483 4.44974 24.4483C4.56628 24.4483 4.68101 24.4539 4.79513 24.4638C5.23461 24.4601 6.14816 24.4639 7.98498 24.4956C11.1208 24.5528 11.5409 23.0537 11.5815 22.44C11.5815 22.3822 11.5779 22.3244 11.5779 22.2666C11.5779 22.2411 11.5779 22.2162 11.5779 22.1913C11.5783 22.1889 11.5783 22.1863 11.5779 22.1839C11.5524 21.7349 11.3963 21.3039 11.1298 20.9465C10.8632 20.5891 10.4984 20.3215 10.0822 20.1781C8.53918 19.4942 4.66948 19.8007 4.66948 19.8007V19.7957C4.60392 19.799 4.53796 19.8007 4.47159 19.8007C3.91809 19.8001 3.37082 19.6811 2.86485 19.4512C2.35888 19.2214 1.90539 18.8857 1.53344 18.4659C1.1615 18.046 0.879303 17.5512 0.704954 17.0131C0.530606 16.475 0.467948 15.9056 0.521 15.3413C0.574053 14.7769 0.741643 14.2302 1.01303 13.7361C1.28441 13.2419 1.6536 12.8113 2.09693 12.4719C2.54026 12.1325 3.04794 11.8917 3.58743 11.7649C4.12692 11.6382 4.68631 11.6283 5.22975 11.7359C6.48742 11.8174 7.74991 11.7689 8.99809 11.591C11.0176 11.3367 11.4783 10.1573 11.5779 9.5125V9.47955C11.5779 8.6747 11.8109 7.88792 12.2474 7.21872C12.684 6.54951 13.3045 6.02792 14.0304 5.71992C14.7564 5.41192 15.5552 5.33133 16.3259 5.48835C17.0965 5.64537 17.8044 6.03294 18.3601 6.60205C18.9157 7.17117 19.2941 7.89627 19.4474 8.68565C19.6006 9.47503 19.522 10.2933 19.2213 11.0368C18.9206 11.7804 18.4114 12.416 17.758 12.8631C17.1047 13.3103 16.3366 13.5489 15.5508 13.5489H15.5544Z\" fill=\"white\"/>%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.47607 9.04307C3.69031 9.04307 2.92219 8.80441 2.26885 8.35726C1.61551 7.91011 1.10629 7.27456 0.805595 6.53097C0.504895 5.78739 0.426219 4.96917 0.579514 4.17979C0.732809 3.3904 1.11119 2.66531 1.66681 2.09619C2.22243 1.52708 2.93033 1.13951 3.701 0.982491C4.47167 0.825473 5.27049 0.90606 5.99644 1.21406C6.72239 1.52206 7.34287 2.04365 7.77942 2.71286C8.21597 3.38206 8.44897 4.16884 8.44897 4.97369C8.44897 6.05295 8.0304 7.08802 7.28534 7.85118C6.54028 8.61434 5.52975 9.04307 4.47607 9.04307Z\" fill=\"white\"/>%0A<path d=\"M15.5314 37.0946C17.7252 37.0946 19.5037 35.2729 19.5037 33.0258C19.5037 30.7787 17.7252 28.957 15.5314 28.957C13.3375 28.957 11.5591 30.7787 11.5591 33.0258C11.5591 35.2729 13.3375 37.0946 15.5314 37.0946Z\" fill=\"white\"/>%0A</svg>%0A') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }] }); }
|
|
1243
1243
|
}
|
|
1244
1244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
1245
1245
|
type: Component,
|
|
@@ -1247,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1247
1247
|
CommonModule,
|
|
1248
1248
|
AvatarComponent,
|
|
1249
1249
|
IconComponent
|
|
1250
|
-
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"
|
|
1250
|
+
], template: "<div class=\"sa-left-nav\">\n\n <div class=\"sa-left-nav-container\">\n <div class=\"sa-left-nav-logo\">\n <!-- <span class=\"sa-logo\"></span> -->\n <sa-icon icon=\"sarasWhite\" size=\"40\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items\">\n @if(data && data.items && !!data.items.length){\n <div class=\"sa-left-nav-items-container\">\n <ng-container *ngFor=\"let item of data.items; let i = index\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onNavItemClick(item, i, $event)\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(data && data.footerItems && !!data.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <ng-container *ngFor=\"let item of data.footerItems; let i = index\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar altText=\"ET\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span class=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n </ng-container>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 32px);width:calc(100vw - 32px);padding:8px;display:flex}.sa-left-nav-logo{display:block;height:40px;width:40px;margin:auto;padding:20px 0;border-bottom:1px #fff solid;min-height:40px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5544 13.5489C15.5034 13.5489 15.4525 13.5489 15.4021 13.5458V13.5489C15.4021 13.5489 14.8606 13.5359 13.0068 13.5253C9.95959 13.4986 8.83176 14.762 8.47545 15.3415H8.46938C8.2094 15.8311 8.13711 16.4024 8.26664 16.9437L8.26299 16.9549C8.28242 17.0836 8.5665 18.5783 11.0255 18.5267C12.9965 18.4851 14.1753 18.3619 14.6506 18.3016C15.2478 18.1597 15.869 18.1613 16.4656 18.3063C17.0621 18.4513 17.6178 18.7357 18.0892 19.1373C18.5605 19.539 18.9347 20.0469 19.1824 20.6213C19.4302 21.1957 19.5448 21.8211 19.5173 22.4485C19.4897 23.0758 19.3208 23.6882 19.0238 24.2375C18.7267 24.7869 18.3095 25.2583 17.8049 25.615C17.3003 25.9717 16.7219 26.2039 16.1151 26.2935C15.5083 26.3831 14.8894 26.3276 14.307 26.1314C14.0163 26.063 13.6253 25.9623 13.0985 25.8162C9.93167 25.0272 8.19258 29.8974 8.19258 29.8974L8.18651 29.9017C7.9393 30.6023 7.5091 31.22 6.94278 31.6874C6.37647 32.1549 5.69576 32.4541 4.97485 32.5526C4.25393 32.6511 3.52045 32.545 2.85434 32.2459C2.18822 31.9468 1.61502 31.4662 1.1972 30.8565C0.779378 30.2467 0.532961 29.5312 0.484798 28.7878C0.436635 28.0445 0.588573 27.3019 0.924059 26.6409C1.25955 25.9799 1.76571 25.426 2.38739 25.0393C3.00908 24.6527 3.72244 24.4483 4.44974 24.4483C4.56628 24.4483 4.68101 24.4539 4.79513 24.4638C5.23461 24.4601 6.14816 24.4639 7.98498 24.4956C11.1208 24.5528 11.5409 23.0537 11.5815 22.44C11.5815 22.3822 11.5779 22.3244 11.5779 22.2666C11.5779 22.2411 11.5779 22.2162 11.5779 22.1913C11.5783 22.1889 11.5783 22.1863 11.5779 22.1839C11.5524 21.7349 11.3963 21.3039 11.1298 20.9465C10.8632 20.5891 10.4984 20.3215 10.0822 20.1781C8.53918 19.4942 4.66948 19.8007 4.66948 19.8007V19.7957C4.60392 19.799 4.53796 19.8007 4.47159 19.8007C3.91809 19.8001 3.37082 19.6811 2.86485 19.4512C2.35888 19.2214 1.90539 18.8857 1.53344 18.4659C1.1615 18.046 0.879303 17.5512 0.704954 17.0131C0.530606 16.475 0.467948 15.9056 0.521 15.3413C0.574053 14.7769 0.741643 14.2302 1.01303 13.7361C1.28441 13.2419 1.6536 12.8113 2.09693 12.4719C2.54026 12.1325 3.04794 11.8917 3.58743 11.7649C4.12692 11.6382 4.68631 11.6283 5.22975 11.7359C6.48742 11.8174 7.74991 11.7689 8.99809 11.591C11.0176 11.3367 11.4783 10.1573 11.5779 9.5125V9.47955C11.5779 8.6747 11.8109 7.88792 12.2474 7.21872C12.684 6.54951 13.3045 6.02792 14.0304 5.71992C14.7564 5.41192 15.5552 5.33133 16.3259 5.48835C17.0965 5.64537 17.8044 6.03294 18.3601 6.60205C18.9157 7.17117 19.2941 7.89627 19.4474 8.68565C19.6006 9.47503 19.522 10.2933 19.2213 11.0368C18.9206 11.7804 18.4114 12.416 17.758 12.8631C17.1047 13.3103 16.3366 13.5489 15.5508 13.5489H15.5544Z\" fill=\"white\"/>%0A<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.47607 9.04307C3.69031 9.04307 2.92219 8.80441 2.26885 8.35726C1.61551 7.91011 1.10629 7.27456 0.805595 6.53097C0.504895 5.78739 0.426219 4.96917 0.579514 4.17979C0.732809 3.3904 1.11119 2.66531 1.66681 2.09619C2.22243 1.52708 2.93033 1.13951 3.701 0.982491C4.47167 0.825473 5.27049 0.90606 5.99644 1.21406C6.72239 1.52206 7.34287 2.04365 7.77942 2.71286C8.21597 3.38206 8.44897 4.16884 8.44897 4.97369C8.44897 6.05295 8.0304 7.08802 7.28534 7.85118C6.54028 8.61434 5.52975 9.04307 4.47607 9.04307Z\" fill=\"white\"/>%0A<path d=\"M15.5314 37.0946C17.7252 37.0946 19.5037 35.2729 19.5037 33.0258C19.5037 30.7787 17.7252 28.957 15.5314 28.957C13.3375 28.957 11.5591 30.7787 11.5591 33.0258C11.5591 35.2729 13.3375 37.0946 15.5314 37.0946Z\" fill=\"white\"/>%0A</svg>%0A') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-900);border-radius:8px;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:40px 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-item,.sa-left-nav-footer-item{height:40px;width:40px;margin:8px auto;cursor:pointer;border-radius:4px;display:flex;justify-content:center;align-items:center}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{margin:4px auto}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item.active,.sa-left-nav-footer-item:hover{background-color:var(--primary-500)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 64px)}\n"] }]
|
|
1251
1251
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }], propDecorators: { data: [{
|
|
1252
1252
|
type: Input,
|
|
1253
1253
|
args: ['data']
|
|
@@ -1353,6 +1353,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1353
1353
|
type: Output
|
|
1354
1354
|
}] } });
|
|
1355
1355
|
|
|
1356
|
+
class ScrollingCardsComponent {
|
|
1357
|
+
constructor(cdr) {
|
|
1358
|
+
this.cdr = cdr;
|
|
1359
|
+
this.cards = [];
|
|
1360
|
+
this.duration = 30;
|
|
1361
|
+
this.direction = 'up';
|
|
1362
|
+
this.displayCards = [];
|
|
1363
|
+
this.animationPaused = false;
|
|
1364
|
+
}
|
|
1365
|
+
ngOnInit() {
|
|
1366
|
+
this.displayCards = [...this.cards, ...this.cards];
|
|
1367
|
+
}
|
|
1368
|
+
ngAfterViewInit() {
|
|
1369
|
+
this.setAnimationProperties();
|
|
1370
|
+
this.cdr.detectChanges();
|
|
1371
|
+
}
|
|
1372
|
+
setAnimationProperties() {
|
|
1373
|
+
if (!this.cardContainer)
|
|
1374
|
+
return;
|
|
1375
|
+
const container = this.cardContainer.nativeElement;
|
|
1376
|
+
this.isVertical = this.direction === 'up' || this.direction === 'down';
|
|
1377
|
+
const containerSize = this.isVertical ? container.scrollHeight : container.scrollWidth;
|
|
1378
|
+
const duration = containerSize / this.duration;
|
|
1379
|
+
container.style.setProperty('--scroll-duration', `${duration}s`);
|
|
1380
|
+
container.style.setProperty('--scroll-direction', this.direction === 'down' || this.direction === 'right' ? 'reverse' : 'normal');
|
|
1381
|
+
container.classList.toggle('vertical', this.isVertical);
|
|
1382
|
+
container.classList.toggle('horizontal', !this.isVertical);
|
|
1383
|
+
}
|
|
1384
|
+
pauseScroll() {
|
|
1385
|
+
this.animationPaused = true;
|
|
1386
|
+
this.cardContainer.nativeElement.style.animationPlayState = 'paused';
|
|
1387
|
+
}
|
|
1388
|
+
resumeScroll() {
|
|
1389
|
+
this.animationPaused = false;
|
|
1390
|
+
this.cardContainer.nativeElement.style.animationPlayState = 'running';
|
|
1391
|
+
}
|
|
1392
|
+
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 }); }
|
|
1393
|
+
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:25rem}.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(-50%)}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(-50%)}}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", "customWrapperClass", "chip", "body", "avatar", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "column"] }] }); }
|
|
1394
|
+
}
|
|
1395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
1396
|
+
type: Component,
|
|
1397
|
+
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:25rem}.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(-50%)}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(-50%)}}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"] }]
|
|
1398
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
1399
|
+
type: Input,
|
|
1400
|
+
args: [{ required: true }]
|
|
1401
|
+
}], duration: [{
|
|
1402
|
+
type: Input
|
|
1403
|
+
}], direction: [{
|
|
1404
|
+
type: Input
|
|
1405
|
+
}], cardContainer: [{
|
|
1406
|
+
type: ViewChild,
|
|
1407
|
+
args: ['cardContainer']
|
|
1408
|
+
}] } });
|
|
1409
|
+
|
|
1356
1410
|
let nextId$1 = 0; // used to give unique ids to inputs used in html
|
|
1357
1411
|
class StepperComponent extends FieldType {
|
|
1358
1412
|
constructor() {
|
|
@@ -1595,5 +1649,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1595
1649
|
* Generated bundle index. Do not edit.
|
|
1596
1650
|
*/
|
|
1597
1651
|
|
|
1598
|
-
export { AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, ProgressBarComponent, RadioButtonComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent };
|
|
1652
|
+
export { AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent };
|
|
1599
1653
|
//# sourceMappingURL=sarasanalytics-com-design-system.mjs.map
|