@sarasanalytics-com/design-system 0.0.69 → 0.0.70

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.
Files changed (5) hide show
  1. package/esm2022/lib/card-carousel/card-carousel.component.mjs +47 -40
  2. package/fesm2022/sarasanalytics-com-design-system.mjs +46 -39
  3. package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
  4. package/lib/card-carousel/card-carousel.component.d.ts +5 -2
  5. package/package.json +1 -1
package/esm2022/lib/card-carousel/card-carousel.component.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, Input, ViewEncapsulation } from '@angular/core';
1
+ import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
2
2
  import { CardComponent } from '../card/card.component';
3
3
  import { IconComponent } from '../icon/icon.component';
4
4
  import { CardCustomHeaderComponent } from '../card/card-custom-header/card-custom-header.component';
@@ -6,7 +6,9 @@ import { AvatarComponent } from "../avatar/avatar.component";
6
6
  import { map as _map, words as _words } from 'lodash';
7
7
  import * as i0 from "@angular/core";
8
8
  export class CardCarouselComponent {
9
- constructor() {
9
+ constructor(cdr, ngZone) {
10
+ this.cdr = cdr;
11
+ this.ngZone = ngZone;
10
12
  this.Math = Math;
11
13
  this.cards = [];
12
14
  this.interval = 5000;
@@ -19,22 +21,19 @@ export class CardCarouselComponent {
19
21
  }
20
22
  ngOnInit() {
21
23
  this.updateVisibleLogos();
22
- if (this.autoPlay) {
24
+ if (this.autoPlay && this.cards.length > 0) {
23
25
  this.startTimer();
24
26
  }
25
27
  }
26
28
  ngOnChanges(changes) {
27
- if (changes['cards'] && this.cards.length > 0) {
29
+ if (changes['cards'] && this.cards?.length > 0) {
28
30
  this.cards = _map(this.cards, (card) => {
29
- // Get words ignoring special characters and parentheses
30
31
  const nameWords = _words(card.title, /[A-Za-z]+/g);
31
- // For names with more than 2 words, take first and last
32
32
  const wordsToUse = nameWords.length > 2
33
33
  ? [nameWords[0], nameWords[nameWords.length - 1]]
34
34
  : nameWords;
35
35
  const initials = _map(wordsToUse, word => word.charAt(0).toUpperCase()).join('');
36
- card.altText = initials;
37
- return card;
36
+ return { ...card, altText: initials };
38
37
  });
39
38
  if (this.currentIndex >= this.cards.length) {
40
39
  this.currentIndex = 0;
@@ -43,6 +42,7 @@ export class CardCarouselComponent {
43
42
  if (this.autoPlay) {
44
43
  this.resetTimer();
45
44
  }
45
+ this.cdr.markForCheck();
46
46
  }
47
47
  }
48
48
  ngOnDestroy() {
@@ -50,61 +50,68 @@ export class CardCarouselComponent {
50
50
  }
51
51
  startTimer() {
52
52
  this.stopTimer();
53
- this.timer = setInterval(() => {
54
- this.next();
55
- }, this.interval);
53
+ this.ngZone.runOutsideAngular(() => {
54
+ this.timer = setInterval(() => {
55
+ this.ngZone.run(() => {
56
+ this.next();
57
+ this.cdr.markForCheck();
58
+ });
59
+ }, this.interval);
60
+ });
56
61
  }
57
62
  stopTimer() {
58
63
  if (this.timer) {
59
64
  clearInterval(this.timer);
65
+ this.timer = null;
60
66
  }
61
67
  }
62
68
  resetTimer() {
63
69
  this.stopTimer();
64
- if (this.autoPlay) {
70
+ if (this.autoPlay && this.cards.length > 0) {
65
71
  this.startTimer();
66
72
  }
67
73
  }
68
74
  selectCard(index) {
69
- this.currentIndex = index;
70
- this.updateVisibleLogos();
71
- this.resetTimer();
75
+ if (index !== this.currentIndex && index >= 0 && index < this.cards.length) {
76
+ this.currentIndex = index;
77
+ this.updateVisibleLogos();
78
+ this.resetTimer();
79
+ this.cdr.markForCheck();
80
+ }
72
81
  }
73
82
  next() {
74
- this.currentIndex = (this.currentIndex + 1) % this.cards.length;
75
- this.updateVisibleLogos();
76
- this.resetTimer();
83
+ if (this.cards.length > 0) {
84
+ this.currentIndex = (this.currentIndex + 1) % this.cards.length;
85
+ this.updateVisibleLogos();
86
+ this.resetTimer();
87
+ this.cdr.markForCheck();
88
+ }
77
89
  }
78
90
  prev() {
79
- this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
80
- this.updateVisibleLogos();
81
- this.resetTimer();
91
+ if (this.cards.length > 0) {
92
+ this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
93
+ this.updateVisibleLogos();
94
+ this.resetTimer();
95
+ this.cdr.markForCheck();
96
+ }
82
97
  }
83
98
  updateVisibleLogos() {
84
- if (this.cards.length === 0) {
85
- this.visibleLogos = [];
86
- return;
87
- }
88
- const maxVisibleCards = Math.min(5, this.cards.length);
89
- const startOffset = Math.floor(maxVisibleCards / 2) * -1;
90
- const endOffset = maxVisibleCards + startOffset;
91
- this.visibleLogos = [];
92
- for (let i = startOffset; i < endOffset; i++) {
93
- const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
94
- this.visibleLogos.push({
95
- ...this.cards[index],
96
- index: index,
99
+ if (this.cards.length > 0) {
100
+ this.visibleLogos = this.cards.map((card, index) => ({
101
+ ...card,
102
+ index,
97
103
  isActive: index === this.currentIndex
98
- });
104
+ }));
105
+ this.cdr.markForCheck();
99
106
  }
100
107
  }
101
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
102
- 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" }, usesOnChanges: true, 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ 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"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
108
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
109
+ 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" }, usesOnChanges: true, 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ 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"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
103
110
  }
104
111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
105
112
  type: Component,
106
- args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
107
- }], propDecorators: { cards: [{
113
+ args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
114
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { cards: [{
108
115
  type: Input
109
116
  }], interval: [{
110
117
  type: Input
@@ -117,4 +124,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
117
124
  }], showBrandFooter: [{
118
125
  type: Input
119
126
  }] } });
120
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBYSxpQkFBaUIsRUFBNEIsTUFBTSxlQUFlLENBQUM7QUFDakgsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSx5REFBeUQsQ0FBQztBQUVwRyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLEdBQUcsSUFBSSxJQUFJLEVBQW1CLEtBQUssSUFBSSxNQUFNLEVBQUUsTUFBTSxRQUFRLENBQUM7O0FBVXZFLE1BQU0sT0FBTyxxQkFBcUI7SUFSbEM7UUFTWSxTQUFJLEdBQUcsSUFBSSxDQUFDO1FBRWIsVUFBSyxHQUFtQixFQUFFLENBQUM7UUFDM0IsYUFBUSxHQUFXLElBQUksQ0FBQztRQUN4QixhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3pCLHlCQUFvQixHQUFZLElBQUksQ0FBQztRQUNyQyxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUMvQixvQkFBZSxHQUFZLElBQUksQ0FBQztRQUV6QyxpQkFBWSxHQUE0RCxFQUFFLENBQUM7UUFDM0UsaUJBQVksR0FBVyxDQUFDLENBQUM7S0FpRzFCO0lBOUZDLFFBQVE7UUFDTixJQUFJLENBQUMs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QUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7OEdBM0dVLHFCQUFxQjtrR0FBckIscUJBQXFCLDZSQ2hCbEMsMnBGQXNETSxtb0REM0NNLGFBQWEsNFVBQUUsYUFBYSxvSUFBRSx5QkFBeUIsaUVBQUUsZUFBZTs7MkZBS3ZFLHFCQUFxQjtrQkFSakMsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQLENBQUMsYUFBYSxFQUFFLGFBQWEsRUFBRSx5QkFBeUIsRUFBRSxlQUFlLENBQUMsaUJBR3BFLGlCQUFpQixDQUFDLElBQUk7OEJBSzVCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT25EZXN0cm95LCBWaWV3RW5jYXBzdWxhdGlvbiwgU2ltcGxlQ2hhbmdlcywgT25DaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDYXJkQ29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC9jYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC9jYXJkLWN1c3RvbS1oZWFkZXIvY2FyZC1jdXN0b20taGVhZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXJkQ2Fyb3VzZWwgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2NhcmQtY2Fyb3VzZWwtaW50ZXJmYWNlJztcbmltcG9ydCB7IEF2YXRhckNvbXBvbmVudCB9IGZyb20gXCIuLi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgbWFwIGFzIF9tYXAsIHNwbGl0IGFzIF9zcGxpdCwgd29yZHMgYXMgX3dvcmRzIH0gZnJvbSAnbG9kYXNoJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtY2FyZC1jYXJvdXNlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDYXJkQ29tcG9uZW50LCBJY29uQ29tcG9uZW50LCBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50LCBBdmF0YXJDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQtY2Fyb3VzZWwuY29tcG9uZW50LmNzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIENhcmRDYXJvdXNlbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBPbkNoYW5nZXMge1xuICBwcm90ZWN0ZWQgTWF0aCA9IE1hdGg7XG5cbiAgQElucHV0KCkgY2FyZHM6IENhcmRDYXJvdXNlbFtdID0gW107XG4gIEBJbnB1dCgpIGludGVydmFsOiBudW1iZXIgPSA1MDAwO1xuICBASW5wdXQoKSBhdXRvUGxheTogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIHNob3dOYXZpZ2F0aW9uQXJyb3dzOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgc2hvd0luZGljYXRvcnM6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBzaG93QnJhbmRGb290ZXI6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIHZpc2libGVMb2dvczogKENhcmRDYXJvdXNlbCAmIHsgaW5kZXg6IG51bWJlcjsgaXNBY3RpdmU6IGJvb2xlYW4gfSlbXSA9IFtdO1xuICBjdXJyZW50SW5kZXg6IG51bWJlciA9IDA7XG4gIHByaXZhdGUgdGltZXI6IGFueTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnVwZGF0ZVZpc2libGVMb2dvcygpO1xuICAgIGlmICh0aGlzLmF1dG9QbGF5KSB7XG4gICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXNbJ2NhcmRzJ10gJiYgdGhpcy5jYXJkcy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLmNhcmRzID0gX21hcCh0aGlzLmNhcmRzLCAoY2FyZCkgPT4ge1xuICAgICAgICAvLyBHZXQgd29yZHMgaWdub3Jpbmcgc3BlY2lhbCBjaGFyYWN0ZXJzIGFuZCBwYXJlbnRoZXNlc1xuICAgICAgICBjb25zdCBuYW1lV29yZHMgPSBfd29yZHMoY2FyZC50aXRsZSwgL1tBLVphLXpdKy9nKTtcbiAgICAgICAgXG4gICAgICAgIC8vIEZvciBuYW1lcyB3aXRoIG1vcmUgdGhhbiAyIHdvcmRzLCB0YWtlIGZpcnN0IGFuZCBsYXN0XG4gICAgICAgIGNvbnN0IHdvcmRzVG9Vc2UgPSBuYW1lV29yZHMubGVuZ3RoID4gMiBcbiAgICAgICAgICA/IFtuYW1lV29yZHNbMF0sIG5hbWVXb3Jkc1tuYW1lV29yZHMubGVuZ3RoIC0gMV1dXG4gICAgICAgICAgOiBuYW1lV29yZHM7XG5cbiAgICAgICAgY29uc3QgaW5pdGlhbHMgPSBfbWFwKHdvcmRzVG9Vc2UsIHdvcmQgPT4gd29yZC5jaGFyQXQoMCkudG9VcHBlckNhc2UoKSkuam9pbignJyk7XG4gICAgICAgIGNhcmQuYWx0VGV4dCA9IGluaXRpYWxzO1xuICAgICAgICByZXR1cm4gY2FyZDtcbiAgICAgIH0pIFxuICAgICAgaWYgKHRoaXMuY3VycmVudEluZGV4ID49IHRoaXMuY2FyZHMubGVuZ3RoKSB7XG4gICAgICAgIHRoaXMuY3VycmVudEluZGV4ID0gMDtcbiAgICAgIH1cbiAgICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgICBpZiAodGhpcy5hdXRvUGxheSkge1xuICAgICAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN0b3BUaW1lcigpO1xuICB9XG5cbiAgc3RhcnRUaW1lcigpIHtcbiAgICB0aGlzLnN0b3BUaW1lcigpO1xuICAgIHRoaXMudGltZXIgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICB0aGlzLm5leHQoKTtcbiAgICB9LCB0aGlzLmludGVydmFsKTtcbiAgfVxuXG4gIHN0b3BUaW1lcigpIHtcbiAgICBpZiAodGhpcy50aW1lcikge1xuICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLnRpbWVyKTtcbiAgICB9XG4gIH1cblxuICByZXNldFRpbWVyKCkge1xuICAgIHRoaXMuc3RvcFRpbWVyKCk7XG4gICAgaWYgKHRoaXMuYXV0b1BsYXkpIHtcbiAgICAgIHRoaXMuc3RhcnRUaW1lcigpO1xuICAgIH1cbiAgfVxuXG4gIHNlbGVjdENhcmQoaW5kZXg6IG51bWJlcikge1xuICAgIHRoaXMuY3VycmVudEluZGV4ID0gaW5kZXg7XG4gICAgdGhpcy51cGRhdGVWaXNpYmxlTG9nb3MoKTtcbiAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgfVxuXG4gIG5leHQoKSB7XG4gICAgdGhpcy5jdXJyZW50SW5kZXggPSAodGhpcy5jdXJyZW50SW5kZXggKyAxKSAlIHRoaXMuY2FyZHMubGVuZ3RoO1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgdGhpcy5yZXNldFRpbWVyKCk7XG4gIH1cblxuICBwcmV2KCkge1xuICAgIHRoaXMuY3VycmVudEluZGV4ID0gKHRoaXMuY3VycmVudEluZGV4IC0gMSArIHRoaXMuY2FyZHMubGVuZ3RoKSAlIHRoaXMuY2FyZHMubGVuZ3RoO1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgdGhpcy5yZXNldFRpbWVyKCk7XG4gIH1cblxuICB1cGRhdGVWaXNpYmxlTG9nb3MoKSB7XG4gICAgaWYgKHRoaXMuY2FyZHMubGVuZ3RoID09PSAwKSB7XG4gICAgICB0aGlzLnZpc2libGVMb2dvcyA9IFtdO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IG1heFZpc2libGVDYXJkcyA9IE1hdGgubWluKDUsIHRoaXMuY2FyZHMubGVuZ3RoKTtcbiAgICBjb25zdCBzdGFydE9mZnNldCA9IE1hdGguZmxvb3IobWF4VmlzaWJsZUNhcmRzIC8gMikgKiAtMTtcbiAgICBjb25zdCBlbmRPZmZzZXQgPSBtYXhWaXNpYmxlQ2FyZHMgKyBzdGFydE9mZnNldDtcbiAgICBcbiAgICB0aGlzLnZpc2libGVMb2dvcyA9IFtdO1xuICAgIGZvciAobGV0IGkgPSBzdGFydE9mZnNldDsgaSA8IGVuZE9mZnNldDsgaSsrKSB7XG4gICAgICBjb25zdCBpbmRleCA9ICh0aGlzLmN1cnJlbnRJbmRleCArIGkgKyB0aGlzLmNhcmRzLmxlbmd0aCkgJSB0aGlzLmNhcmRzLmxlbmd0aDtcbiAgICAgIHRoaXMudmlzaWJsZUxvZ29zLnB1c2goe1xuICAgICAgICAuLi50aGlzLmNhcmRzW2luZGV4XSxcbiAgICAgICAgaW5kZXg6IGluZGV4LFxuICAgICAgICBpc0FjdGl2ZTogaW5kZXggPT09IHRoaXMuY3VycmVudEluZGV4XG4gICAgICB9KTtcbiAgICB9XG4gIH1cbn1cbiIsIjwhLS0gY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCAtLT5cbjxkaXYgY2xhc3M9XCJjYXJvdXNlbC1jb250YWluZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2Fyb3VzZWwtdG9wLXdyYXBwZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRyb2xzXCI+XG4gICAgICAgICAgICBAaWYgKHNob3dJbmRpY2F0b3JzKSB7XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZG90c1wiPlxuICAgICAgICAgICAgICAgIEBmb3IgKGNhcmQgb2YgY2FyZHM7IHRyYWNrIGNhcmQuaWQ7IGxldCBpID0gJGluZGV4KSB7XG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJkb3RcIiBbY2xhc3MuYWN0aXZlXT1cImkgPT09IGN1cnJlbnRJbmRleFwiIChjbGljayk9XCJzZWxlY3RDYXJkKGkpXCI+PC9zcGFuPlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgQGlmIChzaG93TmF2aWdhdGlvbkFycm93cykge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImFycm93LWNvbnRyb2xzXCI+XG4gICAgICAgICAgICAgICAgPHNhLWljb24gW2ljb25dPVwiJ2xlZnRDaGV2cm9uQ2lyY2xlJ1wiIHNpemU9XCIyNFwiIChjbGljayk9XCJwcmV2KClcIj48L3NhLWljb24+XG4gICAgICAgICAgICAgICAgPHNhLWljb24gW2ljb25dPVwiJ3JpZ2h0Q2hldnJvbkNpcmNsZSdcIiBzaXplPVwiMjRcIiAoY2xpY2spPVwibmV4dCgpXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgQGlmIChjYXJkc1tjdXJyZW50SW5kZXhdKSB7XG4gICAgICAgICAgICA8c2EtY2FyZCBbY3VzdG9tV3JhcHBlckNsYXNzXT1cIidzYS1jYXJkLWN1c3RvbS13cmFwcGVyJ1wiIFt3aWR0aF09XCInMjQuMDYzcmVtJ1wiIFtjb2x1bW5dPVwiZmFsc2VcIlxuICAgICAgICAgICAgICAgIFtzaG93Q2FyZEhlYWRlcl09XCJ0cnVlXCIgW3Nob3dDYXJkQm9keV09XCJ0cnVlXCIgW2JvZHldPVwiY2FyZHNbY3VycmVudEluZGV4XT8uYm9keVwiXG4gICAgICAgICAgICAgICAgW3Nob3dIZWFkZXJCb2R5RGl2aWRlcl09XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgPHNhLWNhcmQtdGl0bGUtaGVhZGVyPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC1jdXN0b20taGVhZGVyLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNhLWF2YXRhciBbYWx0VGV4dF09XCJjYXJkc1tjdXJyZW50SW5kZXhdPy5hbHRUZXh0XCIgW2ltYWdlUGF0aF09XCJjYXJkc1tjdXJyZW50SW5kZXhdPy5hdmF0YXJJY29uXCIgW3NpemVdPVwiJ2V4dHJhLWxhcmdlJ1wiPjwvc2EtYXZhdGFyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtdGl0bGUtc3VidGl0bGUtY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtY3VzdG9tLXRpdGxlXCI+e3sgY2FyZHNbY3VycmVudEluZGV4XT8udGl0bGUgfX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC1zdWJ0aXRsZVwiPnt7IGNhcmRzW2N1cnJlbnRJbmRleF0/LnN1YnRpdGxlIH19PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXRpdGxlSWNvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cImNhcmRzW2N1cnJlbnRJbmRleF0/LmxvZ29JY29uXCIgW2ljb25VcmxdPVwiY2FyZHNbY3VycmVudEluZGV4XT8ubG9nb1VybFwiIFtzaXplXT1cImNhcmRzW2N1cnJlbnRJbmRleF0/LmxvZ29TaXplIHx8ICc1MCdcIiBjdXN0b21DbGFzcz1cImxvZ28tc3R5bGVcIj48L3NhLWljb24+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9zYS1jYXJkLXRpdGxlLWhlYWRlcj5cbiAgICAgICAgICAgIDwvc2EtY2FyZD5cbiAgICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICBAaWYgKHNob3dCcmFuZEZvb3Rlcikge1xuICAgIDxkaXYgY2xhc3M9XCJicmFuZC1sb2dvcy1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJyYW5kLWxvZ29zXCI+XG4gICAgICAgICAgICBAZm9yIChsb2dvIG9mIHZpc2libGVMb2dvczsgdHJhY2sgbG9nby5pZCkge1xuICAgICAgICAgICAgICAgIDxkaXY+ICBcbiAgICAgICAgICAgICAgICAgICAgPHNhLWljb24gW2ljb25dPVwibG9nby5sb2dvSWNvblwiIFtpY29uVXJsXT1cImxvZ28ubG9nb1VybFwiIFtzaXplXT1cImxvZ28ubG9nb1NpemUgfHwgJzUwJ1wiIFtjbGFzcy5hY3RpdmVdPVwibG9nby5pc0FjdGl2ZVwiIChjbGljayk9XCJzZWxlY3RDYXJkKGxvZ28uaW5kZXgpXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjdXN0b21DbGFzc109XCInbG9nby1zdHlsZSdcIj5cbiAgICAgICAgICAgICAgICAgICAgPC9zYS1pY29uPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICB9XG48L2Rpdj4iXX0=
127
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQtY2Fyb3VzZWwvY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBYSxpQkFBaUIsRUFBNEIsdUJBQXVCLEVBQTZCLE1BQU0sZUFBZSxDQUFDO0FBQ3JLLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0seURBQXlELENBQUM7QUFFcEcsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzdELE9BQU8sRUFBRSxHQUFHLElBQUksSUFBSSxFQUFtQixLQUFLLElBQUksTUFBTSxFQUFFLE1BQU0sUUFBUSxDQUFDOztBQVd2RSxNQUFNLE9BQU8scUJBQXFCO0lBY2hDLFlBQ1UsR0FBc0IsRUFDdEIsTUFBYztRQURkLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBQ3RCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFmZCxTQUFJLEdBQUcsSUFBSSxDQUFDO1FBRWIsVUFBSyxHQUFtQixFQUFFLENBQUM7UUFDM0IsYUFBUSxHQUFXLElBQUksQ0FBQztRQUN4QixhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3pCLHlCQUFvQixHQUFZLElBQUksQ0FBQztRQUNyQyxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUMvQixvQkFBZSxHQUFZLElBQUksQ0FBQztR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QUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUMxQixDQUFDO0lBQ0gsQ0FBQztJQUVPLGtCQUFrQjtRQUN4QixJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQzFCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO2dCQUNuRCxHQUFHLElBQUk7Z0JBQ1AsS0FBSztnQkFDTCxRQUFRLEVBQUUsS0FBSyxLQUFLLElBQUksQ0FBQyxZQUFZO2FBQ3RDLENBQUMsQ0FBQyxDQUFDO1lBQ0osSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUMxQixDQUFDO0lBQ0gsQ0FBQzs4R0FsSFUscUJBQXFCO2tHQUFyQixxQkFBcUIsNlJDakJsQywycEZBc0RNLG1vREQzQ00sYUFBYSw0VUFBRSxhQUFhLG9JQUFFLHlCQUF5QixpRUFBRSxlQUFlOzsyRkFNdkUscUJBQXFCO2tCQVRqQyxTQUFTOytCQUNFLGtCQUFrQixjQUNoQixJQUFJLFdBQ1AsQ0FBQyxhQUFhLEVBQUUsYUFBYSxFQUFFLHlCQUF5QixFQUFFLGVBQWUsQ0FBQyxpQkFHcEUsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTTsyR0FLdEMsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxvQkFBb0I7c0JBQTVCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPbkRlc3Ryb3ksIFZpZXdFbmNhcHN1bGF0aW9uLCBTaW1wbGVDaGFuZ2VzLCBPbkNoYW5nZXMsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgTmdab25lIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDYXJkQ29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC9jYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC9jYXJkLWN1c3RvbS1oZWFkZXIvY2FyZC1jdXN0b20taGVhZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXJkQ2Fyb3VzZWwgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2NhcmQtY2Fyb3VzZWwtaW50ZXJmYWNlJztcbmltcG9ydCB7IEF2YXRhckNvbXBvbmVudCB9IGZyb20gXCIuLi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgbWFwIGFzIF9tYXAsIHNwbGl0IGFzIF9zcGxpdCwgd29yZHMgYXMgX3dvcmRzIH0gZnJvbSAnbG9kYXNoJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2EtY2FyZC1jYXJvdXNlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDYXJkQ29tcG9uZW50LCBJY29uQ29tcG9uZW50LCBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50LCBBdmF0YXJDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC1jYXJvdXNlbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQtY2Fyb3VzZWwuY29tcG9uZW50LmNzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkQ2Fyb3VzZWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSwgT25DaGFuZ2VzIHtcbiAgcHJvdGVjdGVkIE1hdGggPSBNYXRoO1xuXG4gIEBJbnB1dCgpIGNhcmRzOiBDYXJkQ2Fyb3VzZWxbXSA9IFtdO1xuICBASW5wdXQoKSBpbnRlcnZhbDogbnVtYmVyID0gNTAwMDtcbiAgQElucHV0KCkgYXV0b1BsYXk6IGJvb2xlYW4gPSB0cnVlO1xuICBASW5wdXQoKSBzaG93TmF2aWdhdGlvbkFycm93czogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIHNob3dJbmRpY2F0b3JzOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgc2hvd0JyYW5kRm9vdGVyOiBib29sZWFuID0gdHJ1ZTtcblxuICB2aXNpYmxlTG9nb3M6IChDYXJkQ2Fyb3VzZWwgJiB7IGluZGV4OiBudW1iZXI7IGlzQWN0aXZlOiBib29sZWFuIH0pW10gPSBbXTtcbiAgY3VycmVudEluZGV4OiBudW1iZXIgPSAwO1xuICBwcml2YXRlIHRpbWVyOiBhbnk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHByaXZhdGUgbmdab25lOiBOZ1pvbmVcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgaWYgKHRoaXMuYXV0b1BsYXkgJiYgdGhpcy5jYXJkcy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXNbJ2NhcmRzJ10gJiYgdGhpcy5jYXJkcz8ubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy5jYXJkcyA9IF9tYXAodGhpcy5jYXJkcywgKGNhcmQpID0+IHtcbiAgICAgICAgY29uc3QgbmFtZVdvcmRzID0gX3dvcmRzKGNhcmQudGl0bGUsIC9bQS1aYS16XSsvZyk7XG4gICAgICAgIGNvbnN0IHdvcmRzVG9Vc2UgPSBuYW1lV29yZHMubGVuZ3RoID4gMiBcbiAgICAgICAgICA/IFtuYW1lV29yZHNbMF0sIG5hbWVXb3Jkc1tuYW1lV29yZHMubGVuZ3RoIC0gMV1dXG4gICAgICAgICAgOiBuYW1lV29yZHM7XG4gICAgICAgIGNvbnN0IGluaXRpYWxzID0gX21hcCh3b3Jkc1RvVXNlLCB3b3JkID0+IHdvcmQuY2hhckF0KDApLnRvVXBwZXJDYXNlKCkpLmpvaW4oJycpO1xuICAgICAgICByZXR1cm4geyAuLi5jYXJkLCBhbHRUZXh0OiBpbml0aWFscyB9O1xuICAgICAgfSk7XG4gICAgICBcbiAgICAgIGlmICh0aGlzLmN1cnJlbnRJbmRleCA+PSB0aGlzLmNhcmRzLmxlbmd0aCkge1xuICAgICAgICB0aGlzLmN1cnJlbnRJbmRleCA9IDA7XG4gICAgICB9XG4gICAgICB0aGlzLnVwZGF0ZVZpc2libGVMb2dvcygpO1xuICAgICAgaWYgKHRoaXMuYXV0b1BsYXkpIHtcbiAgICAgICAgdGhpcy5yZXNldFRpbWVyKCk7XG4gICAgICB9XG4gICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN0b3BUaW1lcigpO1xuICB9XG5cbiAgc3RhcnRUaW1lcigpIHtcbiAgICB0aGlzLnN0b3BUaW1lcigpO1xuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIHRoaXMudGltZXIgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICAgIHRoaXMubmdab25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgdGhpcy5uZXh0KCk7XG4gICAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICAgIH0pO1xuICAgICAgfSwgdGhpcy5pbnRlcnZhbCk7XG4gICAgfSk7XG4gIH1cblxuICBzdG9wVGltZXIoKSB7XG4gICAgaWYgKHRoaXMudGltZXIpIHtcbiAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy50aW1lcik7XG4gICAgICB0aGlzLnRpbWVyID0gbnVsbDtcbiAgICB9XG4gIH1cblxuICByZXNldFRpbWVyKCkge1xuICAgIHRoaXMuc3RvcFRpbWVyKCk7XG4gICAgaWYgKHRoaXMuYXV0b1BsYXkgJiYgdGhpcy5jYXJkcy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9XG4gIH1cblxuICBzZWxlY3RDYXJkKGluZGV4OiBudW1iZXIpIHtcbiAgICBpZiAoaW5kZXggIT09IHRoaXMuY3VycmVudEluZGV4ICYmIGluZGV4ID49IDAgJiYgaW5kZXggPCB0aGlzLmNhcmRzLmxlbmd0aCkge1xuICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSBpbmRleDtcbiAgICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgIH1cbiAgfVxuXG4gIG5leHQoKSB7XG4gICAgaWYgKHRoaXMuY2FyZHMubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSAodGhpcy5jdXJyZW50SW5kZXggKyAxKSAlIHRoaXMuY2FyZHMubGVuZ3RoO1xuICAgICAgdGhpcy51cGRhdGVWaXNpYmxlTG9nb3MoKTtcbiAgICAgIHRoaXMucmVzZXRUaW1lcigpO1xuICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuICB9XG5cbiAgcHJldigpIHtcbiAgICBpZiAodGhpcy5jYXJkcy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLmN1cnJlbnRJbmRleCA9ICh0aGlzLmN1cnJlbnRJbmRleCAtIDEgKyB0aGlzLmNhcmRzLmxlbmd0aCkgJSB0aGlzLmNhcmRzLmxlbmd0aDtcbiAgICAgIHRoaXMudXBkYXRlVmlzaWJsZUxvZ29zKCk7XG4gICAgICB0aGlzLnJlc2V0VGltZXIoKTtcbiAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlVmlzaWJsZUxvZ29zKCkge1xuICAgIGlmICh0aGlzLmNhcmRzLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMudmlzaWJsZUxvZ29zID0gdGhpcy5jYXJkcy5tYXAoKGNhcmQsIGluZGV4KSA9PiAoe1xuICAgICAgICAuLi5jYXJkLFxuICAgICAgICBpbmRleCxcbiAgICAgICAgaXNBY3RpdmU6IGluZGV4ID09PSB0aGlzLmN1cnJlbnRJbmRleFxuICAgICAgfSkpO1xuICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgfVxuICB9XG59XG4iLCI8IS0tIGNhcmQtY2Fyb3VzZWwuY29tcG9uZW50Lmh0bWwgLS0+XG48ZGl2IGNsYXNzPVwiY2Fyb3VzZWwtY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcm91c2VsLXRvcC13cmFwcGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250cm9sc1wiPlxuICAgICAgICAgICAgQGlmIChzaG93SW5kaWNhdG9ycykge1xuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRvdHNcIj5cbiAgICAgICAgICAgICAgICBAZm9yIChjYXJkIG9mIGNhcmRzOyB0cmFjayBjYXJkLmlkOyBsZXQgaSA9ICRpbmRleCkge1xuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZG90XCIgW2NsYXNzLmFjdGl2ZV09XCJpID09PSBjdXJyZW50SW5kZXhcIiAoY2xpY2spPVwic2VsZWN0Q2FyZChpKVwiPjwvc3Bhbj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIEBpZiAoc2hvd05hdmlnYXRpb25BcnJvd3MpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJhcnJvdy1jb250cm9sc1wiPlxuICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cIidsZWZ0Q2hldnJvbkNpcmNsZSdcIiBzaXplPVwiMjRcIiAoY2xpY2spPVwicHJldigpXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cIidyaWdodENoZXZyb25DaXJjbGUnXCIgc2l6ZT1cIjI0XCIgKGNsaWNrKT1cIm5leHQoKVwiPjwvc2EtaWNvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1jb250YWluZXJcIj5cbiAgICAgICAgICAgIEBpZiAoY2FyZHNbY3VycmVudEluZGV4XSkge1xuICAgICAgICAgICAgPHNhLWNhcmQgW2N1c3RvbVdyYXBwZXJDbGFzc109XCInc2EtY2FyZC1jdXN0b20td3JhcHBlcidcIiBbd2lkdGhdPVwiJzI0LjA2M3JlbSdcIiBbY29sdW1uXT1cImZhbHNlXCJcbiAgICAgICAgICAgICAgICBbc2hvd0NhcmRIZWFkZXJdPVwidHJ1ZVwiIFtzaG93Q2FyZEJvZHldPVwidHJ1ZVwiIFtib2R5XT1cImNhcmRzW2N1cnJlbnRJbmRleF0/LmJvZHlcIlxuICAgICAgICAgICAgICAgIFtzaG93SGVhZGVyQm9keURpdmlkZXJdPVwidHJ1ZVwiPlxuICAgICAgICAgICAgICAgIDxzYS1jYXJkLXRpdGxlLWhlYWRlcj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtY3VzdG9tLWhlYWRlci1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzYS1hdmF0YXIgW2FsdFRleHRdPVwiY2FyZHNbY3VycmVudEluZGV4XT8uYWx0VGV4dFwiIFtpbWFnZVBhdGhdPVwiY2FyZHNbY3VycmVudEluZGV4XT8uYXZhdGFySWNvblwiIFtzaXplXT1cIidleHRyYS1sYXJnZSdcIj48L3NhLWF2YXRhcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXRpdGxlLXN1YnRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLWN1c3RvbS10aXRsZVwiPnt7IGNhcmRzW2N1cnJlbnRJbmRleF0/LnRpdGxlIH19PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtc3VidGl0bGVcIj57eyBjYXJkc1tjdXJyZW50SW5kZXhdPy5zdWJ0aXRsZSB9fTwvZGl2PlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC10aXRsZUljb25cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c2EtaWNvbiBbaWNvbl09XCJjYXJkc1tjdXJyZW50SW5kZXhdPy5sb2dvSWNvblwiIFtpY29uVXJsXT1cImNhcmRzW2N1cnJlbnRJbmRleF0/LmxvZ29VcmxcIiBbc2l6ZV09XCJjYXJkc1tjdXJyZW50SW5kZXhdPy5sb2dvU2l6ZSB8fCAnNTAnXCIgY3VzdG9tQ2xhc3M9XCJsb2dvLXN0eWxlXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvc2EtY2FyZC10aXRsZS1oZWFkZXI+XG4gICAgICAgICAgICA8L3NhLWNhcmQ+XG4gICAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgQGlmIChzaG93QnJhbmRGb290ZXIpIHtcbiAgICA8ZGl2IGNsYXNzPVwiYnJhbmQtbG9nb3MtY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJicmFuZC1sb2dvc1wiPlxuICAgICAgICAgICAgQGZvciAobG9nbyBvZiB2aXNpYmxlTG9nb3M7IHRyYWNrIGxvZ28uaWQpIHtcbiAgICAgICAgICAgICAgICA8ZGl2PiAgXG4gICAgICAgICAgICAgICAgICAgIDxzYS1pY29uIFtpY29uXT1cImxvZ28ubG9nb0ljb25cIiBbaWNvblVybF09XCJsb2dvLmxvZ29VcmxcIiBbc2l6ZV09XCJsb2dvLmxvZ29TaXplIHx8ICc1MCdcIiBbY2xhc3MuYWN0aXZlXT1cImxvZ28uaXNBY3RpdmVcIiAoY2xpY2spPVwic2VsZWN0Q2FyZChsb2dvLmluZGV4KVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbY3VzdG9tQ2xhc3NdPVwiJ2xvZ28tc3R5bGUnXCI+XG4gICAgICAgICAgICAgICAgICAgIDwvc2EtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgfVxuPC9kaXY+Il19
package/fesm2022/sarasanalytics-com-design-system.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ViewChild, signal, computed, ChangeDetectionStrategy, HostBinding } from '@angular/core';
2
+ import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ChangeDetectionStrategy, ViewChild, signal, computed, 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';
@@ -927,7 +927,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
927
927
  }] } });
928
928
 
929
929
  class CardCarouselComponent {
930
- constructor() {
930
+ constructor(cdr, ngZone) {
931
+ this.cdr = cdr;
932
+ this.ngZone = ngZone;
931
933
  this.Math = Math;
932
934
  this.cards = [];
933
935
  this.interval = 5000;
@@ -940,22 +942,19 @@ class CardCarouselComponent {
940
942
  }
941
943
  ngOnInit() {
942
944
  this.updateVisibleLogos();
943
- if (this.autoPlay) {
945
+ if (this.autoPlay && this.cards.length > 0) {
944
946
  this.startTimer();
945
947
  }
946
948
  }
947
949
  ngOnChanges(changes) {
948
- if (changes['cards'] && this.cards.length > 0) {
950
+ if (changes['cards'] && this.cards?.length > 0) {
949
951
  this.cards = map(this.cards, (card) => {
950
- // Get words ignoring special characters and parentheses
951
952
  const nameWords = words(card.title, /[A-Za-z]+/g);
952
- // For names with more than 2 words, take first and last
953
953
  const wordsToUse = nameWords.length > 2
954
954
  ? [nameWords[0], nameWords[nameWords.length - 1]]
955
955
  : nameWords;
956
956
  const initials = map(wordsToUse, word => word.charAt(0).toUpperCase()).join('');
957
- card.altText = initials;
958
- return card;
957
+ return { ...card, altText: initials };
959
958
  });
960
959
  if (this.currentIndex >= this.cards.length) {
961
960
  this.currentIndex = 0;
@@ -964,6 +963,7 @@ class CardCarouselComponent {
964
963
  if (this.autoPlay) {
965
964
  this.resetTimer();
966
965
  }
966
+ this.cdr.markForCheck();
967
967
  }
968
968
  }
969
969
  ngOnDestroy() {
@@ -971,61 +971,68 @@ class CardCarouselComponent {
971
971
  }
972
972
  startTimer() {
973
973
  this.stopTimer();
974
- this.timer = setInterval(() => {
975
- this.next();
976
- }, this.interval);
974
+ this.ngZone.runOutsideAngular(() => {
975
+ this.timer = setInterval(() => {
976
+ this.ngZone.run(() => {
977
+ this.next();
978
+ this.cdr.markForCheck();
979
+ });
980
+ }, this.interval);
981
+ });
977
982
  }
978
983
  stopTimer() {
979
984
  if (this.timer) {
980
985
  clearInterval(this.timer);
986
+ this.timer = null;
981
987
  }
982
988
  }
983
989
  resetTimer() {
984
990
  this.stopTimer();
985
- if (this.autoPlay) {
991
+ if (this.autoPlay && this.cards.length > 0) {
986
992
  this.startTimer();
987
993
  }
988
994
  }
989
995
  selectCard(index) {
990
- this.currentIndex = index;
991
- this.updateVisibleLogos();
992
- this.resetTimer();
996
+ if (index !== this.currentIndex && index >= 0 && index < this.cards.length) {
997
+ this.currentIndex = index;
998
+ this.updateVisibleLogos();
999
+ this.resetTimer();
1000
+ this.cdr.markForCheck();
1001
+ }
993
1002
  }
994
1003
  next() {
995
- this.currentIndex = (this.currentIndex + 1) % this.cards.length;
996
- this.updateVisibleLogos();
997
- this.resetTimer();
1004
+ if (this.cards.length > 0) {
1005
+ this.currentIndex = (this.currentIndex + 1) % this.cards.length;
1006
+ this.updateVisibleLogos();
1007
+ this.resetTimer();
1008
+ this.cdr.markForCheck();
1009
+ }
998
1010
  }
999
1011
  prev() {
1000
- this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
1001
- this.updateVisibleLogos();
1002
- this.resetTimer();
1012
+ if (this.cards.length > 0) {
1013
+ this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
1014
+ this.updateVisibleLogos();
1015
+ this.resetTimer();
1016
+ this.cdr.markForCheck();
1017
+ }
1003
1018
  }
1004
1019
  updateVisibleLogos() {
1005
- if (this.cards.length === 0) {
1006
- this.visibleLogos = [];
1007
- return;
1008
- }
1009
- const maxVisibleCards = Math.min(5, this.cards.length);
1010
- const startOffset = Math.floor(maxVisibleCards / 2) * -1;
1011
- const endOffset = maxVisibleCards + startOffset;
1012
- this.visibleLogos = [];
1013
- for (let i = startOffset; i < endOffset; i++) {
1014
- const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
1015
- this.visibleLogos.push({
1016
- ...this.cards[index],
1017
- index: index,
1020
+ if (this.cards.length > 0) {
1021
+ this.visibleLogos = this.cards.map((card, index) => ({
1022
+ ...card,
1023
+ index,
1018
1024
  isActive: index === this.currentIndex
1019
- });
1025
+ }));
1026
+ this.cdr.markForCheck();
1020
1027
  }
1021
1028
  }
1022
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1023
- 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" }, usesOnChanges: true, 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ 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"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
1029
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
1030
+ 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" }, usesOnChanges: true, 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ 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"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1024
1031
  }
1025
1032
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
1026
1033
  type: Component,
1027
- args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
1028
- }], propDecorators: { cards: [{
1034
+ args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\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\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\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 logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.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;width:17rem;overflow:hidden}.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);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .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}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
1035
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { cards: [{
1029
1036
  type: Input
1030
1037
  }], interval: [{
1031
1038
  type: Input