@sarasanalytics-com/design-system 0.0.97 → 0.0.98
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.
|
@@ -12,6 +12,23 @@ export class HeaderComponent {
|
|
|
12
12
|
this.info = [];
|
|
13
13
|
this.buttonClick = new EventEmitter();
|
|
14
14
|
}
|
|
15
|
+
ngOnChanges(changes) {
|
|
16
|
+
if (changes['header']) {
|
|
17
|
+
this.header = changes['header'].currentValue;
|
|
18
|
+
}
|
|
19
|
+
else if (changes['chipConfig']) {
|
|
20
|
+
this.chipConfig = changes['chipConfig'].currentValue;
|
|
21
|
+
}
|
|
22
|
+
else if (changes['info']) {
|
|
23
|
+
this.info = changes['info'].currentValue;
|
|
24
|
+
}
|
|
25
|
+
else if (changes['buttonHelper']) {
|
|
26
|
+
this.buttonHelper = changes['buttonHelper'].currentValue;
|
|
27
|
+
}
|
|
28
|
+
else if (changes['buttonMain']) {
|
|
29
|
+
this.buttonMain = changes['buttonMain'].currentValue;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
15
32
|
onButtonClick(type, event) {
|
|
16
33
|
const button = type === 'secondary' ? this.buttonHelper : this.buttonMain;
|
|
17
34
|
if (button) {
|
|
@@ -19,7 +36,7 @@ export class HeaderComponent {
|
|
|
19
36
|
}
|
|
20
37
|
}
|
|
21
38
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
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", "tooltip"], 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 }] }); }
|
|
39
|
+
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], usesOnChanges: true, 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", "tooltip"], 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 }] }); }
|
|
23
40
|
}
|
|
24
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
25
42
|
type: Component,
|
|
@@ -37,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
37
54
|
}], buttonClick: [{
|
|
38
55
|
type: Output
|
|
39
56
|
}] } });
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvaGVhZGVyL2hlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2hlYWRlci9oZWFkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFakcsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzdELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFdkQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHNCQUFzQixDQUFDOztBQVluRCxNQUFNLE9BQU8sZUFBZTtJQVMxQjtRQVJTLFdBQU0sR0FBaUIsRUFBRSxDQUFDO1FBQzFCLGVBQVUsR0FBdUIsRUFBRSxDQUFDO1FBQ3BDLFNBQUksR0FBcUIsRUFBRSxDQUFDO1FBSTNCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7SUFFN0MsQ0FBQztJQUVqQixXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsTUFBTSxHQUFHLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxZQUFZLENBQUM7UUFDL0MsQ0FBQzthQUFNLElBQUksT0FBTyxDQUFDLFlBQVksQ0FBQyxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLFVBQVUsR0FBRyxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUMsWUFBWSxDQUFDO1FBQ3ZELENBQUM7YUFBTSxJQUFJLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxJQUFJLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLFlBQVksQ0FBQztRQUMzQyxDQUFDO2FBQU0sSUFBSSxPQUFPLENBQUMsY0FBYyxDQUFDLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsWUFBWSxHQUFHLE9BQU8sQ0FBQyxjQUFjLENBQUMsQ0FBQyxZQUFZLENBQUM7UUFDM0QsQ0FBQzthQUFNLElBQUksT0FBTyxDQUFDLFlBQVksQ0FBQyxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLFVBQVUsR0FBRyxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUMsWUFBWSxDQUFDO1FBQ3ZELENBQUM7SUFDSCxDQUFDO0lBRUQsYUFBYSxDQUFDLElBQTZCLEVBQUUsS0FBWTtRQUN2RCxNQUFNLE1BQU0sR0FBRyxJQUFJLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO1FBQzFFLElBQUksTUFBTSxFQUFFLENBQUM7WUFDWCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDaEUsQ0FBQztJQUNILENBQUM7OEdBOUJVLGVBQWU7a0dBQWYsZUFBZSwrTkFGZixDQUFDLFdBQVcsQ0FBQywrQ0NqQjFCLG80RUF1RUEscTBDRHZEWSxhQUFhLG9JQUFFLGNBQWMsOE1BQUUsZUFBZSx1UkFBRSxnQkFBZ0I7OzJGQUcvRCxlQUFlO2tCQVIzQixTQUFTOytCQUNFLFdBQVcsY0FHVCxJQUFJLFdBQ1AsQ0FBQyxhQUFhLEVBQUUsY0FBYyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsQ0FBQyxhQUNoRSxDQUFDLFdBQVcsQ0FBQzt3REFHZixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCdXR0b25DbGlja0V2ZW50LCBCdXR0b25JbnRlcmZhY2UsIEJ1dHRvblNpemUsIEJ1dHRvblR5cGUgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2J1dHRvbi1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ2hpcHNDb21wb25lbnQgfSBmcm9tICcuLi9jaGlwcy9jaGlwcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgSWNvbkNvbXBvbmVudCB9IGZyb20gJy4uL2ljb24vaWNvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyLCBTYWZlSHRtbCB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgSHR0cENsaWVudE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcbmltcG9ydCB7IEljb25TZXJ2aWNlIH0gZnJvbSAnLi4vaWNvbi9pY29uLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ2hpcEludGVyZmFjZSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvY2hpcC1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgSGVhZGVyQ2hpcENvbmZpZywgSGVhZGVyQ29uZmlnLCBIZWFkZXJJbmZvSXRlbSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvaGVhZGVyLWludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLWhlYWRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9oZWFkZXIuY29tcG9uZW50LmNzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbSWNvbkNvbXBvbmVudCwgQ2hpcHNDb21wb25lbnQsIEJ1dHRvbkNvbXBvbmVudCwgSHR0cENsaWVudE1vZHVsZV0sXG4gIHByb3ZpZGVyczogW0ljb25TZXJ2aWNlXVxufSlcbmV4cG9ydCBjbGFzcyBIZWFkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBoZWFkZXI6IEhlYWRlckNvbmZpZyA9IHt9O1xuICBASW5wdXQoKSBjaGlwQ29uZmlnOiBIZWFkZXJDaGlwQ29uZmlnW10gPSBbXTtcbiAgQElucHV0KCkgaW5mbzogSGVhZGVySW5mb0l0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBidXR0b25IZWxwZXI/OiBCdXR0b25JbnRlcmZhY2U7XG4gIEBJbnB1dCgpIGJ1dHRvbk1haW4/OiBCdXR0b25JbnRlcmZhY2U7XG5cbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxCdXR0b25DbGlja0V2ZW50PigpO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzWydoZWFkZXInXSkge1xuICAgICAgdGhpcy5oZWFkZXIgPSBjaGFuZ2VzWydoZWFkZXInXS5jdXJyZW50VmFsdWU7XG4gICAgfSBlbHNlIGlmIChjaGFuZ2VzWydjaGlwQ29uZmlnJ10pIHtcbiAgICAgIHRoaXMuY2hpcENvbmZpZyA9IGNoYW5nZXNbJ2NoaXBDb25maWcnXS5jdXJyZW50VmFsdWU7XG4gICAgfSBlbHNlIGlmIChjaGFuZ2VzWydpbmZvJ10pIHtcbiAgICAgIHRoaXMuaW5mbyA9IGNoYW5nZXNbJ2luZm8nXS5jdXJyZW50VmFsdWU7XG4gICAgfSBlbHNlIGlmIChjaGFuZ2VzWydidXR0b25IZWxwZXInXSkge1xuICAgICAgdGhpcy5idXR0b25IZWxwZXIgPSBjaGFuZ2VzWydidXR0b25IZWxwZXInXS5jdXJyZW50VmFsdWU7XG4gICAgfSBlbHNlIGlmIChjaGFuZ2VzWydidXR0b25NYWluJ10pIHtcbiAgICAgIHRoaXMuYnV0dG9uTWFpbiA9IGNoYW5nZXNbJ2J1dHRvbk1haW4nXS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICB9XG5cbiAgb25CdXR0b25DbGljayh0eXBlOiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JywgZXZlbnQ6IEV2ZW50KSB7XG4gICAgY29uc3QgYnV0dG9uID0gdHlwZSA9PT0gJ3NlY29uZGFyeScgPyB0aGlzLmJ1dHRvbkhlbHBlciA6IHRoaXMuYnV0dG9uTWFpbjtcbiAgICBpZiAoYnV0dG9uKSB7XG4gICAgICB0aGlzLmJ1dHRvbkNsaWNrLmVtaXQoeyB0eXBlLCBidXR0b24sIG9yaWdpbmFsRXZlbnQ6IGV2ZW50IH0pO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImhlYWRlclwiPlxuICA8ZGl2IGNsYXNzPVwiaGVhZGVyLWNvbnRlbnRcIj5cbiAgICBAaWYgKGhlYWRlcj8udGV4dCB8fCBoZWFkZXI/Lmh0bWwgfHwgaGVhZGVyLmljb24/Lmljb25VcmwpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJoZWFkaW5nXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJoZWFkZXItbmFtZS1jb250YWluZXJcIj5cbiAgICAgICAgICBAaWYgKGhlYWRlci5pY29uPy5pY29uVXJsKSB7XG4gICAgICAgICAgICA8c2EtaWNvbiBbaWNvblVybF09XCJoZWFkZXI/Lmljb24/Lmljb25VcmxcIiBbc2l6ZV09XCJoZWFkZXI/Lmljb24/LnNpemUgfHwgJzI0cHgnXCIgLz5cbiAgICAgICAgICB9XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci1uYW1lXCIgW2lubmVySFRNTF09XCJoZWFkZXI/Lmh0bWwgfHwgaGVhZGVyPy50ZXh0XCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICBAZm9yKGNoaXAgb2YgY2hpcENvbmZpZzsgdHJhY2sgY2hpcC50ZXh0KSB7XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxzYS1jaGlwIFxuICAgICAgICAgICAgICBbaWRdPVwiY2hpcC5pZFwiXG4gICAgICAgICAgICAgIFt0eXBlXT1cImNoaXAudHlwZVwiXG4gICAgICAgICAgICAgIFtzdGF0ZV09XCJjaGlwLnN0YXRlXCJcbiAgICAgICAgICAgICAgW2ZpbGxpbmddPVwiY2hpcC5maWxsaW5nXCJcbiAgICAgICAgICAgICAgW3RleHRdPVwiY2hpcC50ZXh0XCJcbiAgICAgICAgICAgICAgW2ljb25Qb3NpdGlvbl09XCJjaGlwLmljb25Qb3NpdGlvblwiXG4gICAgICAgICAgICAgIFtpY29uUGF0aF09XCJjaGlwLmljb25QYXRoXCJcbiAgICAgICAgICAgICAgW2xhcmdlU3RhdGVJY29uXT1cImNoaXAubGFyZ2VTdGF0ZUljb25cIlxuICAgICAgICAgICAgICBbbGFyZ2VTdGF0ZVRleHRdPVwiY2hpcC5sYXJnZVN0YXRlVGV4dFwiXG4gICAgICAgICAgICA+PC9zYS1jaGlwPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gICAgPGRpdiBjbGFzcz1cImhlYWRlci1pbmZvXCI+XG4gICAgICBAZm9yKGl0ZW0gb2YgaW5mbzsgdHJhY2sgaXRlbS50ZXh0KSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbmZvLWl0ZW1cIj5cbiAgICAgICAgICBAaWYoaXRlbS5pY29uKSB7XG4gICAgICAgICAgICA8aW1nIFtzcmNdPVwiaXRlbS5pY29uXCIgYWx0PVwiXCI+XG4gICAgICAgICAgfVxuICAgICAgICAgIHt7aXRlbS50ZXh0fX1cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgIEBpZihidXR0b25IZWxwZXIpIHtcbiAgICAgIDxzYS1idXR0b24gXG4gICAgICAgIChvbkNsaWNrRXZlbnQpPVwib25CdXR0b25DbGljaygnc2Vjb25kYXJ5JywgJGV2ZW50KVwiXG4gICAgICAgIFtpZF09XCJidXR0b25IZWxwZXIuaWRcIlxuICAgICAgICBbdGV4dF09XCJidXR0b25IZWxwZXIudGV4dFwiXG4gICAgICAgIFt0eXBlXT1cImJ1dHRvbkhlbHBlci50eXBlXCJcbiAgICAgICAgW3NpemVdPVwiYnV0dG9uSGVscGVyLnNpemVcIlxuICAgICAgICBbc3RhdGVdPVwiYnV0dG9uSGVscGVyLnN0YXRlXCJcbiAgICAgICAgW0ltYWdlUGF0aF09XCJidXR0b25IZWxwZXIuaW1hZ2VQYXRoXCJcbiAgICAgICAgW2ljb25Qb3NpdGlvbl09XCJidXR0b25IZWxwZXIuaWNvblBvc2l0aW9uXCJcbiAgICAgICAgW2hyZWZdPVwiYnV0dG9uSGVscGVyLmhyZWZcIlxuICAgICAgICBbaHJlZlRhcmdldF09XCJidXR0b25IZWxwZXIuaHJlZlRhcmdldFwiXG4gICAgICAgIFtpc1N1Ym1pdF09XCJidXR0b25IZWxwZXIuaXNTdWJtaXRcIj5cbiAgICAgIDwvc2EtYnV0dG9uPlxuICAgIH1cbiAgICBAaWYoYnV0dG9uTWFpbikge1xuICAgICAgPHNhLWJ1dHRvblxuICAgICAgICAob25DbGlja0V2ZW50KT1cIm9uQnV0dG9uQ2xpY2soJ3ByaW1hcnknLCAkZXZlbnQpXCJcbiAgICAgICAgW2lkXT1cImJ1dHRvbk1haW4uaWRcIlxuICAgICAgICBbdGV4dF09XCJidXR0b25NYWluLnRleHRcIlxuICAgICAgICBbdHlwZV09XCJidXR0b25NYWluLnR5cGVcIlxuICAgICAgICBbc2l6ZV09XCJidXR0b25NYWluLnNpemVcIlxuICAgICAgICBbc3RhdGVdPVwiYnV0dG9uTWFpbi5zdGF0ZVwiXG4gICAgICAgIFtJbWFnZVBhdGhdPVwiYnV0dG9uTWFpbi5pbWFnZVBhdGhcIlxuICAgICAgICBbaWNvblBvc2l0aW9uXT1cImJ1dHRvbk1haW4uaWNvblBvc2l0aW9uXCJcbiAgICAgICAgW2hyZWZdPVwiYnV0dG9uTWFpbi5ocmVmXCJcbiAgICAgICAgW2hyZWZUYXJnZXRdPVwiYnV0dG9uTWFpbi5ocmVmVGFyZ2V0XCJcbiAgICAgICAgW2lzU3VibWl0XT1cImJ1dHRvbk1haW4uaXNTdWJtaXRcIj5cbiAgICAgIDwvc2EtYnV0dG9uPlxuICAgIH1cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1907,6 +1907,23 @@ class HeaderComponent {
|
|
|
1907
1907
|
this.info = [];
|
|
1908
1908
|
this.buttonClick = new EventEmitter();
|
|
1909
1909
|
}
|
|
1910
|
+
ngOnChanges(changes) {
|
|
1911
|
+
if (changes['header']) {
|
|
1912
|
+
this.header = changes['header'].currentValue;
|
|
1913
|
+
}
|
|
1914
|
+
else if (changes['chipConfig']) {
|
|
1915
|
+
this.chipConfig = changes['chipConfig'].currentValue;
|
|
1916
|
+
}
|
|
1917
|
+
else if (changes['info']) {
|
|
1918
|
+
this.info = changes['info'].currentValue;
|
|
1919
|
+
}
|
|
1920
|
+
else if (changes['buttonHelper']) {
|
|
1921
|
+
this.buttonHelper = changes['buttonHelper'].currentValue;
|
|
1922
|
+
}
|
|
1923
|
+
else if (changes['buttonMain']) {
|
|
1924
|
+
this.buttonMain = changes['buttonMain'].currentValue;
|
|
1925
|
+
}
|
|
1926
|
+
}
|
|
1910
1927
|
onButtonClick(type, event) {
|
|
1911
1928
|
const button = type === 'secondary' ? this.buttonHelper : this.buttonMain;
|
|
1912
1929
|
if (button) {
|
|
@@ -1914,7 +1931,7 @@ class HeaderComponent {
|
|
|
1914
1931
|
}
|
|
1915
1932
|
}
|
|
1916
1933
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1917
|
-
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", "tooltip"], 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 }] }); }
|
|
1934
|
+
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], usesOnChanges: true, 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", "tooltip"], 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 }] }); }
|
|
1918
1935
|
}
|
|
1919
1936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1920
1937
|
type: Component,
|