@sarasanalytics-com/design-system 0.0.59 → 0.0.61
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/interfaces/button-interface.mjs +1 -1
- package/esm2022/interfaces/header-interface.mjs +2 -0
- package/esm2022/interfaces/icon-interface.mjs +3 -2
- package/esm2022/interfaces/layout-section-interface.mjs +2 -0
- package/esm2022/lib/card/thumbnail-card/thumbnail-card.component.mjs +53 -0
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +29 -9
- package/esm2022/lib/header/header.component.mjs +21 -18
- package/esm2022/lib/layout-section/layout-section.component.mjs +36 -0
- package/esm2022/public-api.mjs +5 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +118 -21
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/interfaces/button-interface.d.ts +9 -0
- package/interfaces/header-interface.d.ts +16 -0
- package/interfaces/icon-interface.d.ts +6 -1
- package/interfaces/layout-section-interface.d.ts +12 -0
- package/lib/card/thumbnail-card/thumbnail-card.component.d.ts +29 -0
- package/lib/card-carousel/card-carousel.component.d.ts +5 -2
- package/lib/header/header.component.d.ts +11 -9
- package/lib/layout-section/layout-section.component.d.ts +11 -0
- package/package.json +2 -2
- package/public-api.d.ts +4 -0
- package/styles/styles.css +398 -0
|
@@ -881,8 +881,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
881
881
|
type: Output
|
|
882
882
|
}] } });
|
|
883
883
|
|
|
884
|
+
class ThumbnailCardComponent {
|
|
885
|
+
constructor() {
|
|
886
|
+
this.size = 'medium';
|
|
887
|
+
this.cardClick = new EventEmitter();
|
|
888
|
+
}
|
|
889
|
+
onCardClick() {
|
|
890
|
+
this.cardClick.emit(this.data);
|
|
891
|
+
}
|
|
892
|
+
getChipConfig(status) {
|
|
893
|
+
switch (status) {
|
|
894
|
+
case 'active':
|
|
895
|
+
return {
|
|
896
|
+
type: 'small',
|
|
897
|
+
state: 'success',
|
|
898
|
+
filling: 'filled'
|
|
899
|
+
};
|
|
900
|
+
default:
|
|
901
|
+
return {
|
|
902
|
+
type: 'small',
|
|
903
|
+
state: 'neutral',
|
|
904
|
+
filling: 'outline'
|
|
905
|
+
};
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThumbnailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
909
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ThumbnailCardComponent, isStandalone: true, selector: "sa-thumbnail-card", inputs: { data: "data", size: "size" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\n <sa-card-custom-body>\n <div class=\"thumbnail-content\">\n <div class=\"thumbnail-container\">\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\n </div>\n <div class=\"thumbnail-info\">\n <div class=\"thumbnail-header\">\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\n <div class=\"status-chips\">\n @for (status of data?.statuses; track status.text) {\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\">\n </sa-chip>\n }\n </div>\n </div>\n <div class=\"thumbnail-metadata\">\n <span class=\"thumbnail-description\">{{ data?.description }}</span>\n <span class=\"separator\"></span>\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\n </div>\n </div>\n </div>\n </sa-card-custom-body>\n </sa-card>\n</div>\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { 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: CardBodyComponent, selector: "sa-card-custom-body" }] }); }
|
|
910
|
+
}
|
|
911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThumbnailCardComponent, decorators: [{
|
|
912
|
+
type: Component,
|
|
913
|
+
args: [{ selector: 'sa-thumbnail-card', standalone: true, imports: [
|
|
914
|
+
CommonModule,
|
|
915
|
+
ChipsComponent,
|
|
916
|
+
CardComponent,
|
|
917
|
+
IconComponent,
|
|
918
|
+
CardBodyComponent,
|
|
919
|
+
CardCustomHeaderComponent
|
|
920
|
+
], template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\n <sa-card-custom-body>\n <div class=\"thumbnail-content\">\n <div class=\"thumbnail-container\">\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\n </div>\n <div class=\"thumbnail-info\">\n <div class=\"thumbnail-header\">\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\n <div class=\"status-chips\">\n @for (status of data?.statuses; track status.text) {\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\">\n </sa-chip>\n }\n </div>\n </div>\n <div class=\"thumbnail-metadata\">\n <span class=\"thumbnail-description\">{{ data?.description }}</span>\n <span class=\"separator\"></span>\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\n </div>\n </div>\n </div>\n </sa-card-custom-body>\n </sa-card>\n</div>\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}\n"] }]
|
|
921
|
+
}], propDecorators: { data: [{
|
|
922
|
+
type: Input
|
|
923
|
+
}], size: [{
|
|
924
|
+
type: Input
|
|
925
|
+
}], cardClick: [{
|
|
926
|
+
type: Output
|
|
927
|
+
}] } });
|
|
928
|
+
|
|
884
929
|
class CardCarouselComponent {
|
|
885
930
|
constructor() {
|
|
931
|
+
this.Math = Math;
|
|
886
932
|
this.cards = [];
|
|
887
933
|
this.interval = 5000;
|
|
888
934
|
this.autoPlay = true;
|
|
@@ -898,6 +944,17 @@ class CardCarouselComponent {
|
|
|
898
944
|
this.startTimer();
|
|
899
945
|
}
|
|
900
946
|
}
|
|
947
|
+
ngOnChanges(changes) {
|
|
948
|
+
if (changes['cards'] && this.cards.length > 0) {
|
|
949
|
+
if (this.currentIndex >= this.cards.length) {
|
|
950
|
+
this.currentIndex = 0;
|
|
951
|
+
}
|
|
952
|
+
this.updateVisibleLogos();
|
|
953
|
+
if (this.autoPlay) {
|
|
954
|
+
this.resetTimer();
|
|
955
|
+
}
|
|
956
|
+
}
|
|
957
|
+
}
|
|
901
958
|
ngOnDestroy() {
|
|
902
959
|
this.stopTimer();
|
|
903
960
|
}
|
|
@@ -913,42 +970,50 @@ class CardCarouselComponent {
|
|
|
913
970
|
}
|
|
914
971
|
}
|
|
915
972
|
resetTimer() {
|
|
916
|
-
|
|
973
|
+
this.stopTimer();
|
|
917
974
|
if (this.autoPlay) {
|
|
918
975
|
this.startTimer();
|
|
919
976
|
}
|
|
920
977
|
}
|
|
921
978
|
selectCard(index) {
|
|
922
979
|
this.currentIndex = index;
|
|
923
|
-
this.resetTimer();
|
|
924
980
|
this.updateVisibleLogos();
|
|
981
|
+
this.resetTimer();
|
|
925
982
|
}
|
|
926
983
|
next() {
|
|
927
984
|
this.currentIndex = (this.currentIndex + 1) % this.cards.length;
|
|
928
|
-
this.resetTimer();
|
|
929
985
|
this.updateVisibleLogos();
|
|
986
|
+
this.resetTimer();
|
|
930
987
|
}
|
|
931
988
|
prev() {
|
|
932
989
|
this.currentIndex = (this.currentIndex - 1 + this.cards.length) % this.cards.length;
|
|
933
|
-
this.resetTimer();
|
|
934
990
|
this.updateVisibleLogos();
|
|
991
|
+
this.resetTimer();
|
|
935
992
|
}
|
|
936
993
|
updateVisibleLogos() {
|
|
994
|
+
if (this.cards.length === 0) {
|
|
995
|
+
this.visibleLogos = [];
|
|
996
|
+
return;
|
|
997
|
+
}
|
|
998
|
+
const maxVisibleCards = Math.min(5, this.cards.length);
|
|
999
|
+
const startOffset = Math.floor(maxVisibleCards / 2) * -1;
|
|
1000
|
+
const endOffset = maxVisibleCards + startOffset;
|
|
937
1001
|
this.visibleLogos = [];
|
|
938
|
-
for (let i =
|
|
1002
|
+
for (let i = startOffset; i < endOffset; i++) {
|
|
939
1003
|
const index = (this.currentIndex + i + this.cards.length) % this.cards.length;
|
|
940
1004
|
this.visibleLogos.push({
|
|
941
1005
|
...this.cards[index],
|
|
942
|
-
index: index
|
|
1006
|
+
index: index,
|
|
1007
|
+
isActive: index === this.currentIndex
|
|
943
1008
|
});
|
|
944
1009
|
}
|
|
945
1010
|
}
|
|
946
1011
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
947
|
-
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]
|
|
1012
|
+
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-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 }\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 <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\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:.8}.brand-logos sa-icon.active:hover{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}.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" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
948
1013
|
}
|
|
949
1014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
950
1015
|
type: Component,
|
|
951
|
-
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]
|
|
1016
|
+
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 @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-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 }\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 <sa-icon [icon]=\"logo.logoIcon\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\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:.8}.brand-logos sa-icon.active:hover{opacity:1}.sa-icon.logo-style>svg{width:fit-content;height:fit-content}.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"] }]
|
|
952
1017
|
}], propDecorators: { cards: [{
|
|
953
1018
|
type: Input
|
|
954
1019
|
}], interval: [{
|
|
@@ -1485,31 +1550,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1485
1550
|
|
|
1486
1551
|
class HeaderComponent {
|
|
1487
1552
|
constructor() {
|
|
1488
|
-
this.
|
|
1489
|
-
this.
|
|
1553
|
+
this.header = {};
|
|
1554
|
+
this.chipConfig = [];
|
|
1555
|
+
this.info = [];
|
|
1556
|
+
this.buttonClick = new EventEmitter();
|
|
1490
1557
|
}
|
|
1491
|
-
|
|
1492
|
-
|
|
1558
|
+
onButtonClick(type, event) {
|
|
1559
|
+
const button = type === 'secondary' ? this.buttonHelper : this.buttonMain;
|
|
1560
|
+
if (button) {
|
|
1561
|
+
this.buttonClick.emit({ type, button, originalEvent: event });
|
|
1562
|
+
}
|
|
1493
1563
|
}
|
|
1494
1564
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { header: "header", chipConfig: "chipConfig", info: "info", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"header\">\n <div class=\"header-content\">\n @if (header?.text || header?.html || header.icon?.iconUrl) {\n <div class=\"heading\">\n <div class=\"header-name-container\">\n @if (header.icon?.iconUrl) {\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\n }\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\n </div>\n @for(chip of chipConfig; track chip.text) {\n <div>\n <sa-chip \n [id]=\"chip.id\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [text]=\"chip.text\"\n [iconPosition]=\"chip.iconPosition\"\n [iconPath]=\"chip.iconPath\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\"\n ></sa-chip>\n </div>\n }\n </div>\n }\n <div class=\"header-info\">\n @for(item of info; track item.text) {\n <div class=\"info-item\">\n @if(item.icon) {\n <img [src]=\"item.icon\" alt=\"\">\n }\n {{item.text}}\n </div>\n }\n </div>\n </div>\n <div class=\"actions\">\n @if(buttonHelper) {\n <sa-button \n (onClickEvent)=\"onButtonClick('secondary', $event)\"\n [id]=\"buttonHelper.id\"\n [text]=\"buttonHelper.text\"\n [type]=\"buttonHelper.type\"\n [size]=\"buttonHelper.size\"\n [state]=\"buttonHelper.state\"\n [ImagePath]=\"buttonHelper.imagePath\"\n [iconPosition]=\"buttonHelper.iconPosition\"\n [href]=\"buttonHelper.href\"\n [hrefTarget]=\"buttonHelper.hrefTarget\"\n [isSubmit]=\"buttonHelper.isSubmit\">\n </sa-button>\n }\n @if(buttonMain) {\n <sa-button\n (onClickEvent)=\"onButtonClick('primary', $event)\"\n [id]=\"buttonMain.id\"\n [text]=\"buttonMain.text\"\n [type]=\"buttonMain.type\"\n [size]=\"buttonMain.size\"\n [state]=\"buttonMain.state\"\n [ImagePath]=\"buttonMain.imagePath\"\n [iconPosition]=\"buttonMain.iconPosition\"\n [href]=\"buttonMain.href\"\n [hrefTarget]=\"buttonMain.hrefTarget\"\n [isSubmit]=\"buttonMain.isSubmit\">\n </sa-button>\n }\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
|
|
1496
1566
|
}
|
|
1497
1567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1498
1568
|
type: Component,
|
|
1499
|
-
args: [{ selector: 'sa-header', standalone: true, imports: [
|
|
1500
|
-
}], propDecorators: {
|
|
1501
|
-
type: Input
|
|
1502
|
-
}], headerName: [{
|
|
1569
|
+
args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "<div class=\"header\">\n <div class=\"header-content\">\n @if (header?.text || header?.html || header.icon?.iconUrl) {\n <div class=\"heading\">\n <div class=\"header-name-container\">\n @if (header.icon?.iconUrl) {\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [size]=\"header?.icon?.size || '24px'\" />\n }\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\n </div>\n @for(chip of chipConfig; track chip.text) {\n <div>\n <sa-chip \n [id]=\"chip.id\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [text]=\"chip.text\"\n [iconPosition]=\"chip.iconPosition\"\n [iconPath]=\"chip.iconPath\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\"\n ></sa-chip>\n </div>\n }\n </div>\n }\n <div class=\"header-info\">\n @for(item of info; track item.text) {\n <div class=\"info-item\">\n @if(item.icon) {\n <img [src]=\"item.icon\" alt=\"\">\n }\n {{item.text}}\n </div>\n }\n </div>\n </div>\n <div class=\"actions\">\n @if(buttonHelper) {\n <sa-button \n (onClickEvent)=\"onButtonClick('secondary', $event)\"\n [id]=\"buttonHelper.id\"\n [text]=\"buttonHelper.text\"\n [type]=\"buttonHelper.type\"\n [size]=\"buttonHelper.size\"\n [state]=\"buttonHelper.state\"\n [ImagePath]=\"buttonHelper.imagePath\"\n [iconPosition]=\"buttonHelper.iconPosition\"\n [href]=\"buttonHelper.href\"\n [hrefTarget]=\"buttonHelper.hrefTarget\"\n [isSubmit]=\"buttonHelper.isSubmit\">\n </sa-button>\n }\n @if(buttonMain) {\n <sa-button\n (onClickEvent)=\"onButtonClick('primary', $event)\"\n [id]=\"buttonMain.id\"\n [text]=\"buttonMain.text\"\n [type]=\"buttonMain.type\"\n [size]=\"buttonMain.size\"\n [state]=\"buttonMain.state\"\n [ImagePath]=\"buttonMain.imagePath\"\n [iconPosition]=\"buttonMain.iconPosition\"\n [href]=\"buttonMain.href\"\n [hrefTarget]=\"buttonMain.hrefTarget\"\n [isSubmit]=\"buttonMain.isSubmit\">\n </sa-button>\n }\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"] }]
|
|
1570
|
+
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
1503
1571
|
type: Input
|
|
1504
1572
|
}], chipConfig: [{
|
|
1505
1573
|
type: Input
|
|
1574
|
+
}], info: [{
|
|
1575
|
+
type: Input
|
|
1506
1576
|
}], buttonHelper: [{
|
|
1507
1577
|
type: Input
|
|
1508
1578
|
}], buttonMain: [{
|
|
1509
1579
|
type: Input
|
|
1510
|
-
}],
|
|
1580
|
+
}], buttonClick: [{
|
|
1511
1581
|
type: Output
|
|
1512
|
-
}]
|
|
1582
|
+
}] } });
|
|
1583
|
+
|
|
1584
|
+
class LayoutSectionComponent {
|
|
1585
|
+
constructor() {
|
|
1586
|
+
this.buttonClick = new EventEmitter();
|
|
1587
|
+
}
|
|
1588
|
+
onButtonClick(type, event) {
|
|
1589
|
+
const button = type === 'primary' ? this.config.primaryButton : this.config.secondaryButton;
|
|
1590
|
+
if (button) {
|
|
1591
|
+
this.buttonClick.emit({ type, button, originalEvent: event });
|
|
1592
|
+
}
|
|
1593
|
+
}
|
|
1594
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LayoutSectionComponent, isStandalone: true, selector: "sa-layout-section", inputs: { config: "config" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"layout-section\">\n <div class=\"layout-section__header\">\n <div class=\"layout-section__title\">\n <div class=\"header-name-container\">\n @if (config?.headerIcon?.icon) {\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\n [icon]=\"config?.headerIcon.icon\"\n [size]=\"config?.headerIcon.size || '24'\" />\n }\n <h2>{{ config?.headerText }}</h2>\n </div>\n @if (config?.chips?.length) {\n <div class=\"layout-section__chips\">\n @for (chip of config?.chips; track chip.id) {\n <sa-chip\n [id]=\"chip.id\"\n [text]=\"chip.text\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [iconPath]=\"chip.iconPath\"\n [iconPosition]=\"chip.iconPosition\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\">\n </sa-chip>\n }\n </div>\n }\n </div>\n <div class=\"layout-section__actions\">\n @if (config?.secondaryButton) {\n <sa-button \n [id]=\"config.secondaryButton.id\"\n [text]=\"config.secondaryButton.text\"\n [type]=\"config.secondaryButton.type\"\n [state]=\"config.secondaryButton.state\"\n [size]=\"config.secondaryButton.size\"\n [ImagePath]=\"config.secondaryButton.imagePath\"\n [icon]=\"config.secondaryButton.icon\"\n [iconPosition]=\"config.secondaryButton.iconPosition\"\n [href]=\"config.secondaryButton.href\"\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\n [width]=\"config?.secondaryButton.width\"\n [isSubmit]=\"config.secondaryButton.isSubmit\"\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\n [showSpinner]=\"config.secondaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\n </sa-button>\n }\n @if (config?.primaryButton) {\n <sa-button\n [id]=\"config.primaryButton.id\"\n [text]=\"config.primaryButton.text\"\n [type]=\"config.primaryButton.type\"\n [state]=\"config.primaryButton.state\"\n [size]=\"config.primaryButton.size\"\n [ImagePath]=\"config.primaryButton.imagePath\"\n [icon]=\"config.primaryButton.icon\"\n [iconPosition]=\"config.primaryButton.iconPosition\"\n [href]=\"config.primaryButton.href\"\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\n [width]=\"config.primaryButton.width\"\n [isSubmit]=\"config.primaryButton.isSubmit\"\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\n [showSpinner]=\"config.primaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('primary', $event)\">\n </sa-button>\n }\n </div>\n </div>\n \n <div class=\"layout-section__content\">\n <ng-content></ng-content>\n </div>\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
|
|
1596
|
+
}
|
|
1597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, decorators: [{
|
|
1598
|
+
type: Component,
|
|
1599
|
+
args: [{ selector: 'sa-layout-section', imports: [
|
|
1600
|
+
CommonModule,
|
|
1601
|
+
ButtonComponent,
|
|
1602
|
+
ChipsComponent,
|
|
1603
|
+
IconComponent,
|
|
1604
|
+
HttpClientModule
|
|
1605
|
+
], providers: [IconService], standalone: true, template: "<div class=\"layout-section\">\n <div class=\"layout-section__header\">\n <div class=\"layout-section__title\">\n <div class=\"header-name-container\">\n @if (config?.headerIcon?.icon) {\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\n [icon]=\"config?.headerIcon.icon\"\n [size]=\"config?.headerIcon.size || '24'\" />\n }\n <h2>{{ config?.headerText }}</h2>\n </div>\n @if (config?.chips?.length) {\n <div class=\"layout-section__chips\">\n @for (chip of config?.chips; track chip.id) {\n <sa-chip\n [id]=\"chip.id\"\n [text]=\"chip.text\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [iconPath]=\"chip.iconPath\"\n [iconPosition]=\"chip.iconPosition\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\">\n </sa-chip>\n }\n </div>\n }\n </div>\n <div class=\"layout-section__actions\">\n @if (config?.secondaryButton) {\n <sa-button \n [id]=\"config.secondaryButton.id\"\n [text]=\"config.secondaryButton.text\"\n [type]=\"config.secondaryButton.type\"\n [state]=\"config.secondaryButton.state\"\n [size]=\"config.secondaryButton.size\"\n [ImagePath]=\"config.secondaryButton.imagePath\"\n [icon]=\"config.secondaryButton.icon\"\n [iconPosition]=\"config.secondaryButton.iconPosition\"\n [href]=\"config.secondaryButton.href\"\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\n [width]=\"config?.secondaryButton.width\"\n [isSubmit]=\"config.secondaryButton.isSubmit\"\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\n [showSpinner]=\"config.secondaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\n </sa-button>\n }\n @if (config?.primaryButton) {\n <sa-button\n [id]=\"config.primaryButton.id\"\n [text]=\"config.primaryButton.text\"\n [type]=\"config.primaryButton.type\"\n [state]=\"config.primaryButton.state\"\n [size]=\"config.primaryButton.size\"\n [ImagePath]=\"config.primaryButton.imagePath\"\n [icon]=\"config.primaryButton.icon\"\n [iconPosition]=\"config.primaryButton.iconPosition\"\n [href]=\"config.primaryButton.href\"\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\n [width]=\"config.primaryButton.width\"\n [isSubmit]=\"config.primaryButton.isSubmit\"\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\n [showSpinner]=\"config.primaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('primary', $event)\">\n </sa-button>\n }\n </div>\n </div>\n \n <div class=\"layout-section__content\">\n <ng-content></ng-content>\n </div>\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"] }]
|
|
1606
|
+
}], propDecorators: { config: [{
|
|
1607
|
+
type: Input
|
|
1608
|
+
}], buttonClick: [{
|
|
1513
1609
|
type: Output
|
|
1514
1610
|
}] } });
|
|
1515
1611
|
|
|
@@ -2577,7 +2673,8 @@ const iconNames = [
|
|
|
2577
2673
|
'sourcesOutlined', 'targetScanOutlined', 'upwardTriangleFilled',
|
|
2578
2674
|
'headsetOutlined', 'sarasFullLogo', 'leftChevronCircle', 'rightChevronCircle', 'errorCircleOutlined',
|
|
2579
2675
|
'errorCrossOutlined', 'downChevronOutlined', 'peopleAudience', 'screenPerson', 'slideSettings', 'desktopSpeakerOutlined',
|
|
2580
|
-
'tabDesktopArrowClockwiseOutlined', 'disabledCheckboxFilled', 'timerOutlined', 'refresh'
|
|
2676
|
+
'tabDesktopArrowClockwiseOutlined', 'disabledCheckboxFilled', 'timerOutlined', 'refresh', 'chatIcon', 'add', 'calendar',
|
|
2677
|
+
'compassNorthWest'
|
|
2581
2678
|
];
|
|
2582
2679
|
|
|
2583
2680
|
/*
|
|
@@ -2590,5 +2687,5 @@ const iconNames = [
|
|
|
2590
2687
|
* Generated bundle index. Do not edit.
|
|
2591
2688
|
*/
|
|
2592
2689
|
|
|
2593
|
-
export { AccordionComponent, AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, CheckboxCardComponent, CheckboxComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LeftNavComponent, ListComponent, MenuCardComponent, MessageBannerComponent, MessageBannerV2Component, PageLayoutComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SkeletonBaseComponent, SkeletonCircleComponent, SkeletonContainerComponent, SkeletonEllipticalComponent, SkeletonLoaderComponent, SkeletonRectangleComponent, SkeletonTextComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ToastComponent, ToolTipComponent, buttonPosition, buttonSizes, buttonType, iconNames };
|
|
2690
|
+
export { AccordionComponent, AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, CheckboxCardComponent, CheckboxComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LayoutSectionComponent, LeftNavComponent, ListComponent, MenuCardComponent, MessageBannerComponent, MessageBannerV2Component, PageLayoutComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SkeletonBaseComponent, SkeletonCircleComponent, SkeletonContainerComponent, SkeletonEllipticalComponent, SkeletonLoaderComponent, SkeletonRectangleComponent, SkeletonTextComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ThumbnailCardComponent, ToastComponent, ToolTipComponent, buttonPosition, buttonSizes, buttonType, iconNames };
|
|
2594
2691
|
//# sourceMappingURL=sarasanalytics-com-design-system.mjs.map
|