@seniorsistemas/angular-components 19.9.13-develop-450c54db → 19.9.14-develop-f9c6cf7e
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/card/lib/card/card.component.d.ts +2 -0
- package/esm2022/card/lib/card/card.component.mjs +17 -3
- package/esm2022/dynamic-form/dynamic-form/components/lookup/lookup.component.mjs +3 -3
- package/fesm2022/seniorsistemas-angular-components-card.mjs +16 -2
- package/fesm2022/seniorsistemas-angular-components-card.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs +2 -2
- package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -42,6 +42,20 @@ class CardComponent {
|
|
|
42
42
|
const hasHeaderAttributes = this.title || this.subtitle || this.icon;
|
|
43
43
|
return headerTemplate || hasHeaderAttributes;
|
|
44
44
|
}
|
|
45
|
+
onClick(event) {
|
|
46
|
+
if (this.clickable) {
|
|
47
|
+
this.clicked.emit(event);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
onKeydown(event) {
|
|
51
|
+
if (!this.clickable || event.target !== event.currentTarget) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
if (event.key === ' ') {
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
}
|
|
57
|
+
this.clicked.emit(event);
|
|
58
|
+
}
|
|
45
59
|
async ngAfterContentInit() {
|
|
46
60
|
await this._setShowBanner();
|
|
47
61
|
this._setTemplates();
|
|
@@ -83,11 +97,11 @@ class CardComponent {
|
|
|
83
97
|
});
|
|
84
98
|
}
|
|
85
99
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "s-card", inputs: { bannerImage: "bannerImage", fullWidth: "fullWidth", clickable: "clickable", title: "title", subtitle: "subtitle", icon: "icon" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"
|
|
100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "s-card", inputs: { bannerImage: "bannerImage", fullWidth: "fullWidth", clickable: "clickable", title: "title", subtitle: "subtitle", icon: "icon" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"onClick($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n (keydown.space)=\"onKeydown($event)\"\r\n>\r\n @if (showBanner) {\r\n <div\r\n class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n ></div>\r\n }\r\n\r\n <!-- @if (hasCustomTemplates) {\r\n @if (headerTemplate) {\r\n <div class=\"header\">\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (bodyTemplate) {\r\n <div class=\"body\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (footerTemplate) {\r\n <div class=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n} @else {\r\n <div class=\"body\">\r\n <ng-content></ng-content>\r\n </div>\r\n } -->\r\n\r\n @if (hasHeader) {\r\n <div class=\"py-4 px-3\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n @if (!headerTemplate) {\r\n <div class=\"flex gap-3\">\r\n @if (icon) {\r\n <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n <i [class]=\"icon\"></i>\r\n </div>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"text-grayscale-90 text-sm font-bold\">\r\n {{ title }}\r\n </div>\r\n }\r\n @if (subtitle) {\r\n <div class=\"text-grayscale-60 text-sm font-normal\">\r\n {{ subtitle }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n @if (bodyTemplate) {\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n } @else {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n\r\n @if (footerTemplate) {\r\n <div class=\"p-4 border-t border-t-grayscale-30\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
87
101
|
}
|
|
88
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
|
|
89
103
|
type: Component,
|
|
90
|
-
args: [{ selector: 's-card', standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet], template: "<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"
|
|
104
|
+
args: [{ selector: 's-card', standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet], template: "<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"onClick($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n (keydown.space)=\"onKeydown($event)\"\r\n>\r\n @if (showBanner) {\r\n <div\r\n class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n ></div>\r\n }\r\n\r\n <!-- @if (hasCustomTemplates) {\r\n @if (headerTemplate) {\r\n <div class=\"header\">\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (bodyTemplate) {\r\n <div class=\"body\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (footerTemplate) {\r\n <div class=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n} @else {\r\n <div class=\"body\">\r\n <ng-content></ng-content>\r\n </div>\r\n } -->\r\n\r\n @if (hasHeader) {\r\n <div class=\"py-4 px-3\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n @if (!headerTemplate) {\r\n <div class=\"flex gap-3\">\r\n @if (icon) {\r\n <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n <i [class]=\"icon\"></i>\r\n </div>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"text-grayscale-90 text-sm font-bold\">\r\n {{ title }}\r\n </div>\r\n }\r\n @if (subtitle) {\r\n <div class=\"text-grayscale-60 text-sm font-normal\">\r\n {{ subtitle }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n @if (bodyTemplate) {\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n } @else {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n\r\n @if (footerTemplate) {\r\n <div class=\"p-4 border-t border-t-grayscale-30\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
91
105
|
}], propDecorators: { bannerImage: [{
|
|
92
106
|
type: Input
|
|
93
107
|
}], fullWidth: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seniorsistemas-angular-components-card.mjs","sources":["../../projects/angular-components/card/src/lib/card/card.component.ts","../../projects/angular-components/card/src/lib/card/card.component.html","../../projects/angular-components/card/src/lib/card/card.module.ts","../../projects/angular-components/card/src/seniorsistemas-angular-components-card.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core';\r\n\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\r\n\r\n/**\r\n * @description Componente de cartão com suporte a banner, cabeçalho (título, subtítulo e ícone)\r\n * e templates customizáveis para cabeçalho, corpo e rodapé via `TemplateDirective`.\r\n *\r\n * @example\r\n * ```html\r\n * <s-card title=\"Título\" subtitle=\"Subtítulo\">\r\n * <ng-template sTemplate type=\"body\">Conteúdo</ng-template>\r\n * </s-card>\r\n * ```\r\n *\r\n * @category Structure\r\n */\r\n@Component({\r\n selector: 's-card',\r\n templateUrl: './card.component.html',\r\n standalone: true,\r\n imports: [NgClass, NgStyle, NgTemplateOutlet],\r\n})\r\nexport class CardComponent implements AfterContentInit {\r\n /** @description URL da imagem exibida como banner no topo do card. */\r\n @Input()\r\n public bannerImage?: string;\r\n\r\n /** @description Faz o card ocupar 100% da largura disponível. @default false */\r\n @Input()\r\n public fullWidth = false;\r\n\r\n /** @description Torna o card interativo, habilitando foco por teclado e clique no elemento raiz. @default false */\r\n @Input()\r\n public clickable = false;\r\n\r\n /** @description Emitido quando o usuário clica ou pressiona Enter/Espaço no card (requer `clickable = true`). */\r\n @Output()\r\n public clicked = new EventEmitter<MouseEvent>();\r\n\r\n /** @description Título exibido no cabeçalho do card. @default '' */\r\n @Input() title = '';\r\n\r\n /** @description Subtítulo exibido abaixo do título. @default '' */\r\n @Input() subtitle = '';\r\n\r\n /** @description Classe do ícone exibido no cabeçalho. @default '' */\r\n @Input() icon = '';\r\n\r\n public showBanner = false;\r\n\r\n @ContentChildren(TemplateDirective)\r\n public templates?: QueryList<TemplateDirective>;\r\n\r\n public hasCustomTemplates = false;\r\n public headerTemplate?: TemplateRef<unknown>;\r\n public bodyTemplate?: TemplateRef<unknown>;\r\n public footerTemplate?: TemplateRef<unknown>;\r\n\r\n public get hasHeader() {\r\n const headerTemplate = !!this.headerTemplate;\r\n const hasHeaderAttributes = this.title || this.subtitle || this.icon;\r\n return headerTemplate || hasHeaderAttributes;\r\n }\r\n\r\n public async ngAfterContentInit(): Promise<void> {\r\n await this._setShowBanner();\r\n this._setTemplates();\r\n }\r\n\r\n private _getHeaderTemplate(): TemplateRef<unknown> | undefined {\r\n return this._getCustomTemplate('header');\r\n }\r\n\r\n private _getBodyTemplate(): TemplateRef<unknown> | undefined {\r\n return this._getCustomTemplate('body');\r\n }\r\n\r\n private _getFooterTemplate(): TemplateRef<unknown> | undefined {\r\n return this._getCustomTemplate('footer');\r\n }\r\n\r\n private _getCustomTemplate(type: string): TemplateRef<unknown> | undefined {\r\n return this.templates?.find((template: TemplateDirective) => template.type === type)?.template;\r\n }\r\n\r\n private _setTemplates(): void {\r\n this.headerTemplate = this._getHeaderTemplate();\r\n this.bodyTemplate = this._getBodyTemplate();\r\n this.footerTemplate = this._getFooterTemplate();\r\n\r\n this.hasCustomTemplates = !!(this.headerTemplate || this.bodyTemplate || this.footerTemplate);\r\n }\r\n\r\n private _setShowBanner() {\r\n return new Promise<void>((resolve) => {\r\n if (!this.bannerImage) {\r\n resolve();\r\n return;\r\n }\r\n\r\n const img = new Image();\r\n img.src = this.bannerImage;\r\n img.onload = () => {\r\n this.showBanner = true;\r\n resolve();\r\n };\r\n\r\n img.onerror = () => {\r\n this.showBanner = false;\r\n resolve();\r\n };\r\n });\r\n }\r\n}\r\n","<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"clickable && clicked.emit($event)\"\r\n (keydown.enter)=\"clickable && clicked.emit($any($event))\"\r\n (keydown.space)=\"clickable && clicked.emit($any($event)); $event.preventDefault()\"\r\n>\r\n @if (showBanner) {\r\n <div\r\n class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n ></div>\r\n }\r\n\r\n <!-- @if (hasCustomTemplates) {\r\n @if (headerTemplate) {\r\n <div class=\"header\">\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (bodyTemplate) {\r\n <div class=\"body\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (footerTemplate) {\r\n <div class=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n} @else {\r\n <div class=\"body\">\r\n <ng-content></ng-content>\r\n </div>\r\n } -->\r\n\r\n @if (hasHeader) {\r\n <div class=\"py-4 px-3\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n @if (!headerTemplate) {\r\n <div class=\"flex gap-3\">\r\n @if (icon) {\r\n <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n <i [class]=\"icon\"></i>\r\n </div>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"text-grayscale-90 text-sm font-bold\">\r\n {{ title }}\r\n </div>\r\n }\r\n @if (subtitle) {\r\n <div class=\"text-grayscale-60 text-sm font-normal\">\r\n {{ subtitle }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n @if (bodyTemplate) {\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n } @else {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n\r\n @if (footerTemplate) {\r\n <div class=\"p-4 border-t border-t-grayscale-30\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CardComponent } from './card.component';\r\n\r\n@NgModule({\r\n imports: [CardComponent],\r\n exports: [CardComponent],\r\n})\r\nexport class CardModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-card.mjs","sources":["../../projects/angular-components/card/src/lib/card/card.component.ts","../../projects/angular-components/card/src/lib/card/card.component.html","../../projects/angular-components/card/src/lib/card/card.module.ts","../../projects/angular-components/card/src/seniorsistemas-angular-components-card.ts"],"sourcesContent":["import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core';\r\n\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\r\n\r\n/**\r\n * @description Componente de cartão com suporte a banner, cabeçalho (título, subtítulo e ícone)\r\n * e templates customizáveis para cabeçalho, corpo e rodapé via `TemplateDirective`.\r\n *\r\n * @example\r\n * ```html\r\n * <s-card title=\"Título\" subtitle=\"Subtítulo\">\r\n * <ng-template sTemplate type=\"body\">Conteúdo</ng-template>\r\n * </s-card>\r\n * ```\r\n *\r\n * @category Structure\r\n */\r\n@Component({\r\n selector: 's-card',\r\n templateUrl: './card.component.html',\r\n standalone: true,\r\n imports: [NgClass, NgStyle, NgTemplateOutlet],\r\n})\r\nexport class CardComponent implements AfterContentInit {\r\n /** @description URL da imagem exibida como banner no topo do card. */\r\n @Input()\r\n public bannerImage?: string;\r\n\r\n /** @description Faz o card ocupar 100% da largura disponível. @default false */\r\n @Input()\r\n public fullWidth = false;\r\n\r\n /** @description Torna o card interativo, habilitando foco por teclado e clique no elemento raiz. @default false */\r\n @Input()\r\n public clickable = false;\r\n\r\n /** @description Emitido quando o usuário clica ou pressiona Enter/Espaço no card (requer `clickable = true`). */\r\n @Output()\r\n public clicked = new EventEmitter<MouseEvent>();\r\n\r\n /** @description Título exibido no cabeçalho do card. @default '' */\r\n @Input() title = '';\r\n\r\n /** @description Subtítulo exibido abaixo do título. @default '' */\r\n @Input() subtitle = '';\r\n\r\n /** @description Classe do ícone exibido no cabeçalho. @default '' */\r\n @Input() icon = '';\r\n\r\n public showBanner = false;\r\n\r\n @ContentChildren(TemplateDirective)\r\n public templates?: QueryList<TemplateDirective>;\r\n\r\n public hasCustomTemplates = false;\r\n public headerTemplate?: TemplateRef<unknown>;\r\n public bodyTemplate?: TemplateRef<unknown>;\r\n public footerTemplate?: TemplateRef<unknown>;\r\n\r\n public get hasHeader() {\r\n const headerTemplate = !!this.headerTemplate;\r\n const hasHeaderAttributes = this.title || this.subtitle || this.icon;\r\n return headerTemplate || hasHeaderAttributes;\r\n }\r\n\r\n public onClick(event: MouseEvent): void {\r\n if (this.clickable) {\r\n this.clicked.emit(event);\r\n }\r\n }\r\n\r\n public onKeydown(event: Event): void {\r\n if (!this.clickable || event.target !== event.currentTarget) {\r\n return;\r\n }\r\n\r\n if ((event as KeyboardEvent).key === ' ') {\r\n event.preventDefault();\r\n }\r\n this.clicked.emit(event as unknown as MouseEvent);\r\n }\r\n\r\n public async ngAfterContentInit(): Promise<void> {\r\n await this._setShowBanner();\r\n this._setTemplates();\r\n }\r\n\r\n private _getHeaderTemplate(): TemplateRef<unknown> | undefined {\r\n return this._getCustomTemplate('header');\r\n }\r\n\r\n private _getBodyTemplate(): TemplateRef<unknown> | undefined {\r\n return this._getCustomTemplate('body');\r\n }\r\n\r\n private _getFooterTemplate(): TemplateRef<unknown> | undefined {\r\n return this._getCustomTemplate('footer');\r\n }\r\n\r\n private _getCustomTemplate(type: string): TemplateRef<unknown> | undefined {\r\n return this.templates?.find((template: TemplateDirective) => template.type === type)?.template;\r\n }\r\n\r\n private _setTemplates(): void {\r\n this.headerTemplate = this._getHeaderTemplate();\r\n this.bodyTemplate = this._getBodyTemplate();\r\n this.footerTemplate = this._getFooterTemplate();\r\n\r\n this.hasCustomTemplates = !!(this.headerTemplate || this.bodyTemplate || this.footerTemplate);\r\n }\r\n\r\n private _setShowBanner() {\r\n return new Promise<void>((resolve) => {\r\n if (!this.bannerImage) {\r\n resolve();\r\n return;\r\n }\r\n\r\n const img = new Image();\r\n img.src = this.bannerImage;\r\n img.onload = () => {\r\n this.showBanner = true;\r\n resolve();\r\n };\r\n\r\n img.onerror = () => {\r\n this.showBanner = false;\r\n resolve();\r\n };\r\n });\r\n }\r\n}\r\n","<div\r\n class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n [class.w-full]=\"fullWidth\"\r\n [attr.tabindex]=\"clickable ? 0 : null\"\r\n [attr.role]=\"clickable ? 'button' : null\"\r\n [ngClass]=\"{\r\n 'cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]': clickable\r\n }\"\r\n (click)=\"onClick($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n (keydown.space)=\"onKeydown($event)\"\r\n>\r\n @if (showBanner) {\r\n <div\r\n class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n ></div>\r\n }\r\n\r\n <!-- @if (hasCustomTemplates) {\r\n @if (headerTemplate) {\r\n <div class=\"header\">\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (bodyTemplate) {\r\n <div class=\"body\">\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n </div>\r\n }\r\n @if (footerTemplate) {\r\n <div class=\"footer\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n} @else {\r\n <div class=\"body\">\r\n <ng-content></ng-content>\r\n </div>\r\n } -->\r\n\r\n @if (hasHeader) {\r\n <div class=\"py-4 px-3\">\r\n @if (headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n @if (!headerTemplate) {\r\n <div class=\"flex gap-3\">\r\n @if (icon) {\r\n <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n <i [class]=\"icon\"></i>\r\n </div>\r\n }\r\n <div>\r\n @if (title) {\r\n <div class=\"text-grayscale-90 text-sm font-bold\">\r\n {{ title }}\r\n </div>\r\n }\r\n @if (subtitle) {\r\n <div class=\"text-grayscale-60 text-sm font-normal\">\r\n {{ subtitle }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n @if (bodyTemplate) {\r\n <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n } @else {\r\n <ng-content></ng-content>\r\n }\r\n </div>\r\n\r\n @if (footerTemplate) {\r\n <div class=\"p-4 border-t border-t-grayscale-30\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CardComponent } from './card.component';\r\n\r\n@NgModule({\r\n imports: [CardComponent],\r\n exports: [CardComponent],\r\n})\r\nexport class CardModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|