@sarasanalytics-com/design-system 0.0.142 → 0.0.143
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.
|
@@ -39,11 +39,11 @@ export class CardComponent {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
43
43
|
}
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height
|
|
46
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"] }]
|
|
47
47
|
}], propDecorators: { title: [{
|
|
48
48
|
type: Input,
|
|
49
49
|
args: ['title']
|
|
@@ -108,4 +108,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
108
108
|
type: Input,
|
|
109
109
|
args: ['column']
|
|
110
110
|
}] } });
|
|
111
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
111
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUUxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDOzs7QUFTN0QsTUFBTSxPQUFPLGFBQWE7SUFQMUI7UUFRa0IsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNWLG1CQUFjLEdBQVksS0FBSyxDQUFDO1FBQ2xDLGlCQUFZLEdBQVksS0FBSyxDQUFDO1FBQ3JCLDBCQUFxQixHQUFZLEtBQUssQ0FBQztRQUMxQyx1QkFBa0IsR0FBWSxLQUFLLENBQUM7UUFDcEMsdUJBQWtCLEdBQVcsRUFBRSxDQUFDO1FBQzlDLFNBQUksR0FBeUIsSUFBSSxDQUFDO1FBQ2xDLFNBQUksR0FBVyxFQUFFLENBQUM7UUFDaEIsV0FBTSxHQUFXLEVBQUUsQ0FBQztRQUNyQixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ2QsZUFBVSxHQUFXLEVBQUUsQ0FBQztRQUs5QixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBR2QsYUFBUSxHQUFXLEVBQUUsQ0FBQztRQUN0QixhQUFRLEdBQVcsRUFBRSxDQUFDO1FBSXhCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFFekMsZUFBVSxHQUFRLEVBQUUsQ0FBQztLQWN0QjtJQVpDLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxZQUFZLElBQUksT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLFlBQVksRUFBRSxDQUFDO1lBQ3RFLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLEdBQUcsT0FBTyxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsWUFBWSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFLFlBQVksR0FBRyxHQUFHLENBQUM7WUFDdEosSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsR0FBRyxPQUFPLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxZQUFZLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUUsWUFBWSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUUsWUFBWSxHQUFHLEdBQUcsQ0FBQztRQUM1SixDQUFDO0lBQ0gsQ0FBQztJQUNELFdBQVcsQ0FBQyxHQUFVO1FBQ3BCLElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxFQUFFLEVBQUUsQ0FBQztZQUNwQixJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksT0FBTztnQkFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztpQkFDbEQsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLE1BQU07Z0JBQUUsUUFBUSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ2hFLENBQUM7SUFDSCxDQUFDOzhHQXZDVSxhQUFhO2tHQUFiLGFBQWEsc2xCQ2QxQixpaUVBNENNLHE1RkRsQ00sWUFBWSxrTkFBRSxjQUFjLDJOQUFFLGFBQWEscU1BQUUsZUFBZTs7MkZBSTNELGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsU0FBUyxjQUNQLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxjQUFjLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQzs4QkFLdkQsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNXLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNBLFlBQVk7c0JBQWxDLEtBQUs7dUJBQUMsY0FBYztnQkFDVyxxQkFBcUI7c0JBQXBELEtBQUs7dUJBQUMsdUJBQXVCO2dCQUNELGtCQUFrQjtzQkFBOUMsS0FBSzt1QkFBQyxvQkFBb0I7Z0JBQ0Usa0JBQWtCO3NCQUE5QyxLQUFLO3VCQUFDLG9CQUFvQjtnQkFDWixJQUFJO3NCQUFsQixLQUFLO3VCQUFDLE1BQU07Z0JBQ0UsSUFBSTtzQkFBbEIsS0FBSzt1QkFBQyxNQUFNO2dCQUNJLE1BQU07c0JBQXRCLEtBQUs7dUJBQUMsUUFBUTtnQkFDQyxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBQ08sVUFBVTtzQkFBOUIsS0FBSzt1QkFBQyxZQUFZO2dCQUNFLFVBQVU7c0JBQTlCLEtBQUs7dUJBQUMsWUFBWTtnQkFDSixJQUFJO3NCQUFsQixLQUFLO3VCQUFDLE1BQU07Z0JBQ1EsVUFBVTtzQkFBOUIsS0FBSzt1QkFBQyxZQUFZO2dCQUVKLElBQUk7c0JBQWxCLEtBQUs7dUJBQUMsTUFBTTtnQkFDTSxRQUFRO3NCQUExQixLQUFLO3VCQUFDLFVBQVU7Z0JBRUUsUUFBUTtzQkFBMUIsS0FBSzt1QkFBQyxVQUFVO2dCQUNFLFFBQVE7c0JBQTFCLEtBQUs7dUJBQUMsVUFBVTtnQkFFRCxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBQ0csTUFBTTtzQkFBdEIsS0FBSzt1QkFBQyxRQUFRO2dCQUNFLE1BQU07c0JBQXRCLEtBQUs7dUJBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ2hpcHNDb21wb25lbnQgfSBmcm9tICcuLi9jaGlwcy9jaGlwcy5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBDaGlwSW50ZXJmYWNlIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9jaGlwLWludGVyZmFjZSc7XHJcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcclxuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSBcIi4uL2F2YXRhci9hdmF0YXIuY29tcG9uZW50XCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NhLWNhcmQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ2hpcHNDb21wb25lbnQsIEljb25Db21wb25lbnQsIEF2YXRhckNvbXBvbmVudF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NhcmQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9jYXJkLmNvbXBvbmVudC5jc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDYXJkQ29tcG9uZW50IHtcclxuICBASW5wdXQoJ3RpdGxlJykgdGl0bGU6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgnc2hvd0NhcmRIZWFkZXInKSBzaG93Q2FyZEhlYWRlcjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgnc2hvd0NhcmRCb2R5Jykgc2hvd0NhcmRCb2R5OiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCdzaG93SGVhZGVyQm9keURpdmlkZXInKSBzaG93SGVhZGVyQm9keURpdmlkZXI6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoJ3Nob3dDdXN0b21DYXJkQm9keScpIHNob3dDdXN0b21DYXJkQm9keTogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgnY3VzdG9tV3JhcHBlckNsYXNzJykgY3VzdG9tV3JhcHBlckNsYXNzOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoJ2NoaXAnKSBjaGlwOiBDaGlwSW50ZXJmYWNlIHwgbnVsbCA9IG51bGw7XHJcbiAgQElucHV0KCdib2R5JykgYm9keTogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCdhdmF0YXInKSBhdmF0YXI6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgnaW1hZ2UnKSBpbWFnZTogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCdpbWFnZVdpZHRoJykgaW1hZ2VXaWR0aDogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCdhdmF0YXJTaXplJykgYXZhdGFyU2l6ZTogc3RyaW5nO1xyXG4gIEBJbnB1dCgnaHJlZicpIGhyZWY6IHN0cmluZztcclxuICBASW5wdXQoJ2hyZWZUYXJnZXQnKSBocmVmVGFyZ2V0OiBzdHJpbmc7XHJcblxyXG4gIEBJbnB1dCgnaWNvbicpIGljb246IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgnaWNvblNpemUnKSBpY29uU2l6ZTogc3RyaW5nO1xyXG5cclxuICBASW5wdXQoJ3N1YnRpdGxlJykgc3VidGl0bGU6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgnbG9nb0ljb24nKSBsb2dvSWNvbjogc3RyaW5nID0gJyc7XHJcblxyXG4gIEBJbnB1dCgnd2lkdGgnKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyO1xyXG4gIEBJbnB1dCgnaGVpZ2h0JykgaGVpZ2h0OiBzdHJpbmcgfCBudW1iZXI7XHJcbiAgQElucHV0KCdjb2x1bW4nKSBjb2x1bW46IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgY2FyZFN0eWxlczogYW55ID0ge307XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuICAgIGlmIChjaGFuZ2VzWyd3aWR0aCddPy5jdXJyZW50VmFsdWUgfHwgY2hhbmdlc1snaGVpZ2h0J10/LmN1cnJlbnRWYWx1ZSkge1xyXG4gICAgICB0aGlzLmNhcmRTdHlsZXNbJ3dpZHRoJ10gPSB0eXBlb2YgY2hhbmdlc1snd2lkdGgnXT8uY3VycmVudFZhbHVlID09PSAnc3RyaW5nJyA/IGNoYW5nZXNbJ3dpZHRoJ10/LmN1cnJlbnRWYWx1ZSA6IGNoYW5nZXNbJ3dpZHRoJ10/LmN1cnJlbnRWYWx1ZSArICclJztcclxuICAgICAgdGhpcy5jYXJkU3R5bGVzWydoZWlnaHQnXSA9IHR5cGVvZiBjaGFuZ2VzWydoZWlnaHQnXT8uY3VycmVudFZhbHVlID09PSAnc3RyaW5nJyA/IGNoYW5nZXNbJ2hlaWdodCddPy5jdXJyZW50VmFsdWUgOiBjaGFuZ2VzWydoZWlnaHQnXT8uY3VycmVudFZhbHVlICsgJyUnO1xyXG4gICAgfVxyXG4gIH1cclxuICBjYXJkQ2xpY2tlZChldnQ6IEV2ZW50KSB7XHJcbiAgICBpZiAodGhpcy5ocmVmICE9IFwiXCIpIHtcclxuICAgICAgaWYgKHRoaXMuaHJlZlRhcmdldCA9PSBcImJsYW5rXCIpIHdpbmRvdy5vcGVuKHRoaXMuaHJlZik7XHJcbiAgICAgIGVsc2UgaWYgKHRoaXMuaHJlZlRhcmdldCA9PSBcInNlbGZcIikgbG9jYXRpb24uaHJlZiA9IHRoaXMuaHJlZjtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInNhLWNhcmRcIiBbbmdTdHlsZV09XCJjYXJkU3R5bGVzXCIgKGNsaWNrKT1cImNhcmRDbGlja2VkKCRldmVudClcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXdyYXBwZXJcIiBbbmdDbGFzc109XCJbY29sdW1uID8gJ2NvbHVtbicgOiAnJywgY3VzdG9tV3JhcHBlckNsYXNzXVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJcIiBbbmdDbGFzc109XCJhdmF0YXIgfHwgaW1hZ2UgPyAnc2EtY2FyZC1pbWcnIDogJ3NhLWNhcmQtaWNvbidcIj5cclxuICAgICAgICAgICAgQGlmKGF2YXRhcil7XHJcbiAgICAgICAgICAgIDxzYS1hdmF0YXIgW2ltYWdlUGF0aF09XCJhdmF0YXJcIiBbc2l6ZV09XCJhdmF0YXJTaXplXCI+PC9zYS1hdmF0YXI+XHJcbiAgICAgICAgICAgIDwhLS0gPGltZyBbc3JjXT1cImF2YXRhclwiIC8+IC0tPlxyXG4gICAgICAgICAgICB9QGVsc2UgaWYoaW1hZ2Upe1xyXG4gICAgICAgICAgICA8aW1nIFtzcmNdPVwiaW1hZ2VcIiBbd2lkdGhdPVwiaW1hZ2VXaWR0aFwiIC8+XHJcbiAgICAgICAgICAgIH1AZWxzZSBpZihpY29uKXtcclxuICAgICAgICAgICAgPHNhLWljb24gW2ljb25dPVwiaWNvblwiIFtzaXplXT1cImljb25TaXplXCI+PC9zYS1pY29uPlxyXG4gICAgICAgICAgICB9QGVsc2V7XHJcbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNhLWNhcmQtaWNvblwiPjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBAaWYoY29sdW1uKXtcclxuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2EtY2FyZC10aXRsZS1hY3Rpb25zXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtY29udGFpbmVyXCIgW25nQ2xhc3NdPVwic2hvd0NhcmRIZWFkZXIgPyAnc2EtY2FyZC1jdXN0b20tY29udGFpbmVyJyA6ICcnXCI+XHJcbiAgICAgICAgICAgIEBpZihzaG93Q2FyZEhlYWRlcil7XHJcbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNhLWNhcmQtdGl0bGUtaGVhZGVyXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICBAaWYgKHNob3dIZWFkZXJCb2R5RGl2aWRlciAmJiBib2R5KSB7XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjdXN0b20tZGl2aWRlclwiPjwvZGl2PlxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgQGVsc2UgaWYodGl0bGUpe1xyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC10aXRsZS1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXRpdGxlXCI+e3t0aXRsZX19PC9kaXY+XHJcbiAgICAgICAgICAgICAgICBAaWYoY2hpcCl7XHJcbiAgICAgICAgICAgICAgICA8c2EtY2hpcCBbdGV4dF09XCJjaGlwLnRleHRcIiBbdHlwZV09XCJjaGlwLnR5cGVcIiBbc3RhdGVdPVwiY2hpcC5zdGF0ZVwiIFtmaWxsaW5nXT1cImNoaXAuZmlsbGluZ1wiPjwvc2EtY2hpcD5cclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzYS1jYXJkLXRpdGxlLWFjdGlvbnNdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBAaWYgKHNob3dDdXN0b21DYXJkQm9keSkge1xyXG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzYS1jYXJkLWN1c3RvbS1ib2R5XCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIEBpZihzaG93Q2FyZEJvZHkgJiYgYm9keSl7XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLWJvZHlcIj5cclxuICAgICAgICAgICAgICAgIHt7Ym9keX19XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNhLWNhcmQtZm9vdGVyLWFjdGlvbnNcIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19
|
|
@@ -331,11 +331,11 @@ class CardComponent {
|
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
333
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height
|
|
334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
335
335
|
}
|
|
336
336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
337
337
|
type: Component,
|
|
338
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height
|
|
338
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"] }]
|
|
339
339
|
}], propDecorators: { title: [{
|
|
340
340
|
type: Input,
|
|
341
341
|
args: ['title']
|