angular-dumb-lib 0.0.6 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/angular-dumb-lib.mjs +5 -0
- package/esm2022/lib/angular-dumb-lib.component.mjs +20 -0
- package/esm2022/lib/angular-dumb-lib.module.mjs +22 -0
- package/esm2022/lib/angular-dumb-lib.service.mjs +15 -0
- package/esm2022/lib/components/atoms/button/button.component.mjs +34 -0
- package/esm2022/lib/components/atoms/datetime-picker/datetime-picker.component.mjs +58 -0
- package/esm2022/lib/components/atoms/file-selection/file-selection.component.mjs +85 -0
- package/esm2022/lib/components/atoms/input/input.component.mjs +57 -0
- package/esm2022/lib/components/atoms/loading/loading.component.mjs +25 -0
- package/esm2022/lib/components/atoms/selection/selection.component.mjs +92 -0
- package/esm2022/lib/components/atoms/slider/slider.component.mjs +42 -0
- package/esm2022/lib/components/atoms/tags/tags.component.mjs +62 -0
- package/esm2022/lib/components/molecules/cards/cards.component.mjs +22 -0
- package/esm2022/lib/components/molecules/content-design/content-design.component.mjs +32 -0
- package/esm2022/lib/components/molecules/form/form.component.mjs +71 -0
- package/esm2022/lib/components/molecules/modal/modal.component.mjs +45 -0
- package/esm2022/lib/components/molecules/paginator/paginator.component.mjs +118 -0
- package/esm2022/lib/components/molecules/table/table.component.mjs +51 -0
- package/esm2022/lib/components/pages/footer/footer.component.mjs +15 -0
- package/esm2022/lib/components/pages/login/login.component.mjs +31 -0
- package/esm2022/lib/components/pages/menu/menu.component.mjs +31 -0
- package/esm2022/lib/components/pages/version/version.component.mjs +26 -0
- package/esm2022/lib/shared/constants/constant.mjs +6 -0
- package/esm2022/lib/shared/enums/enum.mjs +69 -0
- package/esm2022/lib/shared/interfaces/interface.mjs +2 -0
- package/esm2022/public-api.mjs +25 -0
- package/fesm2022/angular-dumb-lib.mjs +915 -0
- package/fesm2022/angular-dumb-lib.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/angular-dumb-lib.component.d.ts +5 -0
- package/lib/angular-dumb-lib.module.d.ts +7 -0
- package/lib/angular-dumb-lib.service.d.ts +6 -0
- package/lib/components/atoms/button/button.component.d.ts +12 -0
- package/lib/components/atoms/datetime-picker/datetime-picker.component.d.ts +17 -0
- package/lib/components/atoms/file-selection/file-selection.component.d.ts +25 -0
- package/lib/components/atoms/input/input.component.d.ts +19 -0
- package/lib/components/atoms/loading/loading.component.d.ts +11 -0
- package/lib/components/atoms/selection/selection.component.d.ts +28 -0
- package/lib/components/atoms/slider/slider.component.d.ts +14 -0
- package/lib/components/atoms/tags/tags.component.d.ts +19 -0
- package/lib/components/molecules/cards/cards.component.d.ts +10 -0
- package/lib/components/molecules/content-design/content-design.component.d.ts +12 -0
- package/lib/components/molecules/form/form.component.d.ts +23 -0
- package/lib/components/molecules/modal/modal.component.d.ts +17 -0
- package/lib/components/molecules/paginator/paginator.component.d.ts +29 -0
- package/lib/components/molecules/table/table.component.d.ts +20 -0
- package/lib/components/pages/footer/footer.component.d.ts +8 -0
- package/lib/components/pages/login/login.component.d.ts +11 -0
- package/lib/components/pages/menu/menu.component.d.ts +14 -0
- package/lib/components/pages/version/version.component.d.ts +10 -0
- package/lib/shared/constants/constant.d.ts +3 -0
- package/lib/shared/enums/enum.d.ts +59 -0
- package/lib/shared/interfaces/interface.d.ts +58 -0
- package/package.json +16 -3
- package/public-api.d.ts +21 -0
- package/ng-package.json +0 -7
- package/src/lib/angular-dumb-lib.component.spec.ts +0 -21
- package/src/lib/angular-dumb-lib.component.ts +0 -15
- package/src/lib/angular-dumb-lib.module.ts +0 -19
- package/src/lib/angular-dumb-lib.service.spec.ts +0 -16
- package/src/lib/angular-dumb-lib.service.ts +0 -9
- package/src/lib/components/atoms/button/button.component.html +0 -15
- package/src/lib/components/atoms/button/button.component.scss +0 -76
- package/src/lib/components/atoms/button/button.component.ts +0 -33
- package/src/lib/components/atoms/datetime-picker/datetime-picker.component.html +0 -7
- package/src/lib/components/atoms/datetime-picker/datetime-picker.component.scss +0 -24
- package/src/lib/components/atoms/datetime-picker/datetime-picker.component.ts +0 -59
- package/src/lib/components/atoms/file-selection/file-selection.component.html +0 -24
- package/src/lib/components/atoms/file-selection/file-selection.component.scss +0 -35
- package/src/lib/components/atoms/file-selection/file-selection.component.ts +0 -86
- package/src/lib/components/atoms/input/input.component.html +0 -28
- package/src/lib/components/atoms/input/input.component.scss +0 -64
- package/src/lib/components/atoms/input/input.component.ts +0 -57
- package/src/lib/components/atoms/loading/loading.component.html +0 -3
- package/src/lib/components/atoms/loading/loading.component.scss +0 -36
- package/src/lib/components/atoms/loading/loading.component.ts +0 -21
- package/src/lib/components/atoms/selection/selection.component.html +0 -38
- package/src/lib/components/atoms/selection/selection.component.scss +0 -65
- package/src/lib/components/atoms/selection/selection.component.ts +0 -84
- package/src/lib/components/atoms/slider/slider.component.html +0 -14
- package/src/lib/components/atoms/slider/slider.component.scss +0 -50
- package/src/lib/components/atoms/slider/slider.component.ts +0 -37
- package/src/lib/components/atoms/tags/tags.component.html +0 -25
- package/src/lib/components/atoms/tags/tags.component.scss +0 -58
- package/src/lib/components/atoms/tags/tags.component.ts +0 -62
- package/src/lib/components/molecules/cards/cards.component.html +0 -12
- package/src/lib/components/molecules/cards/cards.component.scss +0 -14
- package/src/lib/components/molecules/cards/cards.component.ts +0 -19
- package/src/lib/components/molecules/content-design/content-design.component.html +0 -14
- package/src/lib/components/molecules/content-design/content-design.component.scss +0 -68
- package/src/lib/components/molecules/content-design/content-design.component.ts +0 -32
- package/src/lib/components/molecules/form/form.component.html +0 -22
- package/src/lib/components/molecules/form/form.component.scss +0 -17
- package/src/lib/components/molecules/form/form.component.ts +0 -64
- package/src/lib/components/molecules/modal/modal.component.html +0 -16
- package/src/lib/components/molecules/modal/modal.component.scss +0 -83
- package/src/lib/components/molecules/modal/modal.component.ts +0 -48
- package/src/lib/components/molecules/paginator/paginator.component.html +0 -25
- package/src/lib/components/molecules/paginator/paginator.component.scss +0 -27
- package/src/lib/components/molecules/paginator/paginator.component.ts +0 -126
- package/src/lib/components/molecules/table/table.component.html +0 -45
- package/src/lib/components/molecules/table/table.component.scss +0 -169
- package/src/lib/components/molecules/table/table.component.ts +0 -40
- package/src/lib/components/pages/footer/footer.component.html +0 -32
- package/src/lib/components/pages/footer/footer.component.scss +0 -69
- package/src/lib/components/pages/footer/footer.component.ts +0 -16
- package/src/lib/components/pages/login/login.component.html +0 -10
- package/src/lib/components/pages/login/login.component.scss +0 -32
- package/src/lib/components/pages/login/login.component.ts +0 -32
- package/src/lib/components/pages/menu/menu.component.html +0 -18
- package/src/lib/components/pages/menu/menu.component.scss +0 -87
- package/src/lib/components/pages/menu/menu.component.ts +0 -26
- package/src/lib/components/pages/version/version.component.html +0 -3
- package/src/lib/components/pages/version/version.component.scss +0 -0
- package/src/lib/components/pages/version/version.component.ts +0 -28
- package/src/lib/shared/constants/constant.ts +0 -7
- package/src/lib/shared/enums/enum.ts +0 -68
- package/src/lib/shared/interfaces/interface.ts +0 -64
- package/src/public-api.ts +0 -10
- package/tsconfig.lib.json +0 -14
- package/tsconfig.lib.prod.json +0 -10
- package/tsconfig.spec.json +0 -14
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { Component, Input, forwardRef } from '@angular/core';
|
|
3
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
import * as i2 from "@angular/forms";
|
|
7
|
+
class TagsComponent {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.availableTags = ['abc', 'dce'];
|
|
10
|
+
this.filteredTags = [];
|
|
11
|
+
this.selectedTags = [];
|
|
12
|
+
this.searchText = '';
|
|
13
|
+
this.onChange = () => { };
|
|
14
|
+
this.onTouched = () => { };
|
|
15
|
+
}
|
|
16
|
+
ngOnInit() {
|
|
17
|
+
this.filteredTags = this.availableTags; // Initialize the filtered tags list
|
|
18
|
+
}
|
|
19
|
+
writeValue(value) {
|
|
20
|
+
if (value) {
|
|
21
|
+
this.selectedTags = value;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
registerOnChange(fn) {
|
|
25
|
+
this.onChange = fn;
|
|
26
|
+
}
|
|
27
|
+
registerOnTouched(fn) {
|
|
28
|
+
this.onTouched = fn;
|
|
29
|
+
}
|
|
30
|
+
onTagSelectionChange(tag) {
|
|
31
|
+
if (!this.selectedTags.includes(tag)) {
|
|
32
|
+
this.selectedTags = [...this.selectedTags, tag]; // Add the tag
|
|
33
|
+
this.onChange(this.selectedTags);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
removeTag(tag) {
|
|
37
|
+
this.selectedTags = this.selectedTags.filter(t => t !== tag); // Remove the tag
|
|
38
|
+
this.onChange(this.selectedTags);
|
|
39
|
+
}
|
|
40
|
+
filterTags() {
|
|
41
|
+
this.filteredTags = this.availableTags.filter(tag => tag.toLowerCase().includes(this.searchText.toLowerCase()) &&
|
|
42
|
+
!this.selectedTags.includes(tag));
|
|
43
|
+
}
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagsComponent, isStandalone: true, selector: "app-tags", inputs: { availableTags: "availableTags" }, providers: [{
|
|
46
|
+
provide: NG_VALUE_ACCESSOR,
|
|
47
|
+
useExisting: forwardRef(() => TagsComponent),
|
|
48
|
+
multi: true
|
|
49
|
+
}], ngImport: i0, template: "<div class=\"tags-select-container\">\n <label for=\"searchTags\">Search and Select Tags:</label>\n <input\n id=\"searchTags\"\n type=\"text\"\n [(ngModel)]=\"searchText\"\n (input)=\"filterTags()\"\n placeholder=\"Search tags...\"\n />\n\n <div *ngIf=\"filteredTags.length > 0\">\n <ul class=\"tag-list\">\n <li *ngFor=\"let tag of filteredTags\" (click)=\"onTagSelectionChange(tag)\">\n {{ tag }}\n </li>\n </ul>\n </div>\n\n <div class=\"selected-tags\">\n <button *ngFor=\"let tag of selectedTags\" class=\"tag-button\">\n {{ tag }}\n <span class=\"remove-tag\" (click)=\"removeTag(tag)\">x</span>\n </button>\n </div>\n</div>\n", styles: [".tags-select-container{display:flex;flex-direction:column}input[type=text]{padding:5px;border:1px solid #ccc;border-radius:4px;width:200px;margin-bottom:10px}.tag-list{list-style-type:none;padding-left:0;margin:0;border:1px solid #ccc;max-height:100px;overflow-y:auto}.tag-list li{padding:5px;cursor:pointer;border-bottom:1px solid #ddd}.tag-list li:hover{background-color:#f1f1f1}.selected-tags{display:flex;flex-wrap:wrap;gap:5px}.tag-button{background-color:#007bff;color:#fff;border:none;border-radius:20px;padding:5px 10px;display:flex;align-items:center;cursor:pointer}.tag-button .remove-tag{margin-left:8px;background:none;border:none;font-size:1rem;font-weight:700;color:#fff;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
50
|
+
}
|
|
51
|
+
export { TagsComponent };
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsComponent, decorators: [{
|
|
53
|
+
type: Component,
|
|
54
|
+
args: [{ selector: 'app-tags', standalone: true, providers: [{
|
|
55
|
+
provide: NG_VALUE_ACCESSOR,
|
|
56
|
+
useExisting: forwardRef(() => TagsComponent),
|
|
57
|
+
multi: true
|
|
58
|
+
}], imports: [CommonModule, FormsModule], template: "<div class=\"tags-select-container\">\n <label for=\"searchTags\">Search and Select Tags:</label>\n <input\n id=\"searchTags\"\n type=\"text\"\n [(ngModel)]=\"searchText\"\n (input)=\"filterTags()\"\n placeholder=\"Search tags...\"\n />\n\n <div *ngIf=\"filteredTags.length > 0\">\n <ul class=\"tag-list\">\n <li *ngFor=\"let tag of filteredTags\" (click)=\"onTagSelectionChange(tag)\">\n {{ tag }}\n </li>\n </ul>\n </div>\n\n <div class=\"selected-tags\">\n <button *ngFor=\"let tag of selectedTags\" class=\"tag-button\">\n {{ tag }}\n <span class=\"remove-tag\" (click)=\"removeTag(tag)\">x</span>\n </button>\n </div>\n</div>\n", styles: [".tags-select-container{display:flex;flex-direction:column}input[type=text]{padding:5px;border:1px solid #ccc;border-radius:4px;width:200px;margin-bottom:10px}.tag-list{list-style-type:none;padding-left:0;margin:0;border:1px solid #ccc;max-height:100px;overflow-y:auto}.tag-list li{padding:5px;cursor:pointer;border-bottom:1px solid #ddd}.tag-list li:hover{background-color:#f1f1f1}.selected-tags{display:flex;flex-wrap:wrap;gap:5px}.tag-button{background-color:#007bff;color:#fff;border:none;border-radius:20px;padding:5px 10px;display:flex;align-items:center;cursor:pointer}.tag-button .remove-tag{margin-left:8px;background:none;border:none;font-size:1rem;font-weight:700;color:#fff;cursor:pointer}\n"] }]
|
|
59
|
+
}], propDecorators: { availableTags: [{
|
|
60
|
+
type: Input
|
|
61
|
+
}] } });
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFncy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWR1bWItbGliL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy90YWdzL3RhZ3MuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvdGFncy90YWdzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0QsT0FBTyxFQUF3QixXQUFXLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7OztBQUV0RixNQVlhLGFBQWE7SUFaMUI7UUFhVyxrQkFBYSxHQUFhLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ2xELGlCQUFZLEdBQWEsRUFBRSxDQUFDO1FBQzVCLGlCQUFZLEdBQWEsRUFBRSxDQUFDO1FBQzVCLGVBQVUsR0FBVyxFQUFFLENBQUM7UUFFaEIsYUFBUSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUN6QixjQUFTLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0tBc0NuQztJQXBDQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsb0NBQW9DO0lBQzlFLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBZTtRQUN4QixJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1NBQzNCO0lBQ0gsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELG9CQUFvQixDQUFDLEdBQVc7UUFDOUIsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ3BDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQyxjQUFjO1lBQy9ELElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQ2xDO0lBQ0gsQ0FBQztJQUVELFNBQVMsQ0FBQyxHQUFXO1FBQ25CLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxpQkFBaUI7UUFDL0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQ2xELEdBQUcsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUN6RCxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUNqQyxDQUFDO0lBQ0osQ0FBQzsrR0E1Q1UsYUFBYTttR0FBYixhQUFhLG1HQVBiLENBQUM7Z0JBQ1YsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUM7Z0JBQzVDLEtBQUssRUFBRSxJQUFJO2FBQ1osQ0FBQywwQkNiSix1ckJBeUJBLHV2QkRYWSxZQUFZLCtQQUFFLFdBQVc7O1NBRXhCLGFBQWE7NEZBQWIsYUFBYTtrQkFaekIsU0FBUzsrQkFDRSxVQUFVLGNBQ1IsSUFBSSxhQUdMLENBQUM7NEJBQ1YsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsY0FBYyxDQUFDOzRCQUM1QyxLQUFLLEVBQUUsSUFBSTt5QkFDWixDQUFDLFdBQ08sQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDOzhCQUczQixhQUFhO3NCQUFyQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBGb3Jtc01vZHVsZSwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC10YWdzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhZ3MuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWdzLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW3tcbiAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBUYWdzQ29tcG9uZW50KSxcbiAgICBtdWx0aTogdHJ1ZVxuICB9XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFRhZ3NDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIGF2YWlsYWJsZVRhZ3M6IHN0cmluZ1tdID0gWydhYmMnLCAnZGNlJ107XG4gIGZpbHRlcmVkVGFnczogc3RyaW5nW10gPSBbXTtcbiAgc2VsZWN0ZWRUYWdzOiBzdHJpbmdbXSA9IFtdO1xuICBzZWFyY2hUZXh0OiBzdHJpbmcgPSAnJztcblxuICBwcml2YXRlIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcbiAgcHJpdmF0ZSBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuZmlsdGVyZWRUYWdzID0gdGhpcy5hdmFpbGFibGVUYWdzOyAvLyBJbml0aWFsaXplIHRoZSBmaWx0ZXJlZCB0YWdzIGxpc3RcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IHN0cmluZ1tdKTogdm9pZCB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICB0aGlzLnNlbGVjdGVkVGFncyA9IHZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgb25UYWdTZWxlY3Rpb25DaGFuZ2UodGFnOiBzdHJpbmcpIHtcbiAgICBpZiAoIXRoaXMuc2VsZWN0ZWRUYWdzLmluY2x1ZGVzKHRhZykpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRUYWdzID0gWy4uLnRoaXMuc2VsZWN0ZWRUYWdzLCB0YWddOyAvLyBBZGQgdGhlIHRhZ1xuICAgICAgdGhpcy5vbkNoYW5nZSh0aGlzLnNlbGVjdGVkVGFncyk7XG4gICAgfVxuICB9XG5cbiAgcmVtb3ZlVGFnKHRhZzogc3RyaW5nKSB7XG4gICAgdGhpcy5zZWxlY3RlZFRhZ3MgPSB0aGlzLnNlbGVjdGVkVGFncy5maWx0ZXIodCA9PiB0ICE9PSB0YWcpOyAvLyBSZW1vdmUgdGhlIHRhZ1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy5zZWxlY3RlZFRhZ3MpO1xuICB9XG5cbiAgZmlsdGVyVGFncygpIHtcbiAgICB0aGlzLmZpbHRlcmVkVGFncyA9IHRoaXMuYXZhaWxhYmxlVGFncy5maWx0ZXIodGFnID0+XG4gICAgICB0YWcudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyh0aGlzLnNlYXJjaFRleHQudG9Mb3dlckNhc2UoKSkgJiZcbiAgICAgICF0aGlzLnNlbGVjdGVkVGFncy5pbmNsdWRlcyh0YWcpXG4gICAgKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRhZ3Mtc2VsZWN0LWNvbnRhaW5lclwiPlxuICA8bGFiZWwgZm9yPVwic2VhcmNoVGFnc1wiPlNlYXJjaCBhbmQgU2VsZWN0IFRhZ3M6PC9sYWJlbD5cbiAgPGlucHV0XG4gICAgaWQ9XCJzZWFyY2hUYWdzXCJcbiAgICB0eXBlPVwidGV4dFwiXG4gICAgWyhuZ01vZGVsKV09XCJzZWFyY2hUZXh0XCJcbiAgICAoaW5wdXQpPVwiZmlsdGVyVGFncygpXCJcbiAgICBwbGFjZWhvbGRlcj1cIlNlYXJjaCB0YWdzLi4uXCJcbiAgLz5cblxuICA8ZGl2ICpuZ0lmPVwiZmlsdGVyZWRUYWdzLmxlbmd0aCA+IDBcIj5cbiAgICA8dWwgY2xhc3M9XCJ0YWctbGlzdFwiPlxuICAgICAgPGxpICpuZ0Zvcj1cImxldCB0YWcgb2YgZmlsdGVyZWRUYWdzXCIgKGNsaWNrKT1cIm9uVGFnU2VsZWN0aW9uQ2hhbmdlKHRhZylcIj5cbiAgICAgICAge3sgdGFnIH19XG4gICAgICA8L2xpPlxuICAgIDwvdWw+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJzZWxlY3RlZC10YWdzXCI+XG4gICAgPGJ1dHRvbiAqbmdGb3I9XCJsZXQgdGFnIG9mIHNlbGVjdGVkVGFnc1wiIGNsYXNzPVwidGFnLWJ1dHRvblwiPlxuICAgICAge3sgdGFnIH19XG4gICAgICA8c3BhbiBjbGFzcz1cInJlbW92ZS10YWdcIiAoY2xpY2spPVwicmVtb3ZlVGFnKHRhZylcIj54PC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { ContentDesignComponent } from '../content-design/content-design.component';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
class CardsComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.cardContents = [];
|
|
9
|
+
}
|
|
10
|
+
ngOnInit() {
|
|
11
|
+
}
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardsComponent, isStandalone: true, selector: "app-cards", inputs: { cardContents: "cardContents" }, ngImport: i0, template: "<div class=\"cards-content\">\n <ng-container *ngFor=\"let content of cardContents\">\n <div class=\"card {{content.name}}\">\n <app-content-design\n [content] = \"content\">\n </app-content-design>\n </div>\n </ng-container>\n</div>\n\n\n\n", styles: [".cards-content{display:flex;flex-direction:row}.content{width:33%}.card ::ng-deep .content{padding:0 20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ContentDesignComponent, selector: "app-content-design", inputs: ["content"], outputs: ["clickEvent"] }] }); }
|
|
14
|
+
}
|
|
15
|
+
export { CardsComponent };
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardsComponent, decorators: [{
|
|
17
|
+
type: Component,
|
|
18
|
+
args: [{ selector: 'app-cards', standalone: true, imports: [CommonModule, ContentDesignComponent], template: "<div class=\"cards-content\">\n <ng-container *ngFor=\"let content of cardContents\">\n <div class=\"card {{content.name}}\">\n <app-content-design\n [content] = \"content\">\n </app-content-design>\n </div>\n </ng-container>\n</div>\n\n\n\n", styles: [".cards-content{display:flex;flex-direction:row}.content{width:33%}.card ::ng-deep .content{padding:0 20px}\n"] }]
|
|
19
|
+
}], ctorParameters: function () { return []; }, propDecorators: { cardContents: [{
|
|
20
|
+
type: Input
|
|
21
|
+
}] } });
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL2NhcmRzL2NhcmRzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9jYXJkcy9jYXJkcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUV6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNENBQTRDLENBQUM7OztBQUVwRixNQU9hLGNBQWM7SUFFekI7UUFEUyxpQkFBWSxHQUFxQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQzsrR0FMVSxjQUFjO21HQUFkLGNBQWMsK0dDWjNCLDBRQVlBLHFLREZZLFlBQVksNEpBQUUsc0JBQXNCOztTQUVuQyxjQUFjOzRGQUFkLGNBQWM7a0JBUDFCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FHUCxDQUFDLFlBQVksRUFBRSxzQkFBc0IsQ0FBQzswRUFHdEMsWUFBWTtzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUNvbnRlbnREZXNpZ24gfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvaW50ZXJmYWNlcy9pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbnRlbnREZXNpZ25Db21wb25lbnQgfSBmcm9tICcuLi9jb250ZW50LWRlc2lnbi9jb250ZW50LWRlc2lnbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtY2FyZHMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jYXJkcy5jb21wb25lbnQuc2NzcyddLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDb250ZW50RGVzaWduQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBDYXJkc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGNhcmRDb250ZW50czogSUNvbnRlbnREZXNpZ25bXSA9IFtdO1xuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2FyZHMtY29udGVudFwiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBjb250ZW50IG9mIGNhcmRDb250ZW50c1wiPlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkIHt7Y29udGVudC5uYW1lfX1cIj5cbiAgICAgIDxhcHAtY29udGVudC1kZXNpZ25cbiAgICAgIFtjb250ZW50XSA9IFwiY29udGVudFwiPlxuICAgICAgPC9hcHAtY29udGVudC1kZXNpZ24+XG4gICAgPC9kaXY+XG4gIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG5cblxuXG4iXX0=
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { ContentDirection } from '../../../shared/enums/enum';
|
|
3
|
+
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@angular/common";
|
|
7
|
+
class ContentDesignComponent {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.clickEvent = new EventEmitter();
|
|
10
|
+
}
|
|
11
|
+
ngOnInit() {
|
|
12
|
+
this.content = {
|
|
13
|
+
contentDirection: ContentDirection.left,
|
|
14
|
+
...this.content,
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
onButtonClick() {
|
|
18
|
+
this.clickEvent.emit();
|
|
19
|
+
}
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentDesignComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentDesignComponent, isStandalone: true, selector: "app-content-design", inputs: { content: "content" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\n <div *ngIf=\"content.coverImage\" class=\"image\">\n <img [src]=\"content.coverImage\" alt=\"Cover Image\">\n </div>\n\n <div class=\"content\">\n <h2>{{ content.title }}</h2>\n <p>{{ content.content }}</p>\n <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\n <app-button *ngIf=\"content.button\" [config] = \"content.button\"\n (clickEvent)=\"onButtonClick()\">\n </app-button>\n </div>\n</div>\n", styles: [".content-designer{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:center}.content-designer img{max-width:100%;height:auto}.content-designer .content p{text-align:justify}.content-designer.left,.content-designer.right{flex-direction:row}.content-designer.left .image,.content-designer.left .content,.content-designer.right .image,.content-designer.right .content{flex:1;width:50%;padding:0 20px}.content-designer.left .content,.content-designer.right .content{text-align:justify}.content-designer.left .image,.content-designer.right .image{display:flex}.content-designer.left{flex-direction:row-reverse}.content-designer.left .image{justify-content:end}.content-designer.right .image{justify-content:start}.content-designer.up,.content-designer.down{flex-direction:column}.content-designer.up .image,.content-designer.down .image{width:100%;justify-content:center}.content-designer.up{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
|
|
22
|
+
}
|
|
23
|
+
export { ContentDesignComponent };
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentDesignComponent, decorators: [{
|
|
25
|
+
type: Component,
|
|
26
|
+
args: [{ selector: 'app-content-design', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"content-designer\" [ngClass]=\"content.contentDirection\">\n <div *ngIf=\"content.coverImage\" class=\"image\">\n <img [src]=\"content.coverImage\" alt=\"Cover Image\">\n </div>\n\n <div class=\"content\">\n <h2>{{ content.title }}</h2>\n <p>{{ content.content }}</p>\n <ng-container [ngTemplateOutlet]=\"content.template\"></ng-container>\n <app-button *ngIf=\"content.button\" [config] = \"content.button\"\n (clickEvent)=\"onButtonClick()\">\n </app-button>\n </div>\n</div>\n", styles: [".content-designer{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:center}.content-designer img{max-width:100%;height:auto}.content-designer .content p{text-align:justify}.content-designer.left,.content-designer.right{flex-direction:row}.content-designer.left .image,.content-designer.left .content,.content-designer.right .image,.content-designer.right .content{flex:1;width:50%;padding:0 20px}.content-designer.left .content,.content-designer.right .content{text-align:justify}.content-designer.left .image,.content-designer.right .image{display:flex}.content-designer.left{flex-direction:row-reverse}.content-designer.left .image{justify-content:end}.content-designer.right .image{justify-content:start}.content-designer.up,.content-designer.down{flex-direction:column}.content-designer.up .image,.content-designer.down .image{width:100%;justify-content:center}.content-designer.up{flex-direction:column-reverse}\n"] }]
|
|
27
|
+
}], ctorParameters: function () { return []; }, propDecorators: { content: [{
|
|
28
|
+
type: Input
|
|
29
|
+
}], clickEvent: [{
|
|
30
|
+
type: Output
|
|
31
|
+
}] } });
|
|
32
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1kZXNpZ24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL2NvbnRlbnQtZGVzaWduL2NvbnRlbnQtZGVzaWduLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9jb250ZW50LWRlc2lnbi9jb250ZW50LWRlc2lnbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRS9FLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzlELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQUUvQyxNQU9hLHNCQUFzQjtJQUtqQztRQUZVLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBRzVDLENBQUM7SUFFTCxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sR0FBRztZQUNiLGdCQUFnQixFQUFFLGdCQUFnQixDQUFDLElBQUk7WUFDdkMsR0FBRyxJQUFJLENBQUMsT0FBTztTQUNoQixDQUFBO0lBQ0gsQ0FBQztJQUVELGFBQWE7UUFDWCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3pCLENBQUM7K0dBakJVLHNCQUFzQjttR0FBdEIsc0JBQXNCLHFKQ2JuQyx1Z0JBY0EsOC9CREhZLFlBQVksd1lBQUUsZUFBZTs7U0FFNUIsc0JBQXNCOzRGQUF0QixzQkFBc0I7a0JBUGxDLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FHUCxDQUFDLFlBQVksRUFBRSxlQUFlLENBQUM7MEVBRy9CLE9BQU87c0JBQWYsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUNvbnRlbnREZXNpZ24gfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvaW50ZXJmYWNlcy9pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQ29udGVudERpcmVjdGlvbiB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9lbnVtcy9lbnVtJztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1jb250ZW50LWRlc2lnbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiAnLi9jb250ZW50LWRlc2lnbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NvbnRlbnQtZGVzaWduLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEJ1dHRvbkNvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgQ29udGVudERlc2lnbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGNvbnRlbnQhOiBJQ29udGVudERlc2lnbjtcblxuICBAT3V0cHV0KCkgY2xpY2tFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbnRlbnQgPSB7XG4gICAgICBjb250ZW50RGlyZWN0aW9uOiBDb250ZW50RGlyZWN0aW9uLmxlZnQsXG4gICAgICAuLi50aGlzLmNvbnRlbnQsXG4gICAgfVxuICB9XG5cbiAgb25CdXR0b25DbGljaygpIHtcbiAgICB0aGlzLmNsaWNrRXZlbnQuZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udGVudC1kZXNpZ25lclwiIFtuZ0NsYXNzXT1cImNvbnRlbnQuY29udGVudERpcmVjdGlvblwiPlxuICA8ZGl2ICpuZ0lmPVwiY29udGVudC5jb3ZlckltYWdlXCIgY2xhc3M9XCJpbWFnZVwiPlxuICAgIDxpbWcgW3NyY109XCJjb250ZW50LmNvdmVySW1hZ2VcIiBhbHQ9XCJDb3ZlciBJbWFnZVwiPlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwiY29udGVudFwiPlxuICAgIDxoMj57eyBjb250ZW50LnRpdGxlIH19PC9oMj5cbiAgICA8cD57eyBjb250ZW50LmNvbnRlbnQgfX08L3A+XG4gICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJjb250ZW50LnRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgPGFwcC1idXR0b24gKm5nSWY9XCJjb250ZW50LmJ1dHRvblwiIFtjb25maWddID0gXCJjb250ZW50LmJ1dHRvblwiXG4gICAgKGNsaWNrRXZlbnQpPVwib25CdXR0b25DbGljaygpXCI+XG4gICAgPC9hcHAtYnV0dG9uPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
3
|
+
import { InputGroupType, InputType } from '../../../shared/enums/enum';
|
|
4
|
+
import { selectionInputTypes, textualInputTypes } from '../../../shared/constants/constant';
|
|
5
|
+
import { CommonModule } from '@angular/common';
|
|
6
|
+
import { SelectionComponent } from '../../atoms/selection/selection.component';
|
|
7
|
+
import { FileSelectionComponent } from '../../atoms/file-selection/file-selection.component';
|
|
8
|
+
import { InputComponent } from '../../atoms/input/input.component';
|
|
9
|
+
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
10
|
+
import * as i0 from "@angular/core";
|
|
11
|
+
import * as i1 from "@angular/common";
|
|
12
|
+
import * as i2 from "@angular/forms";
|
|
13
|
+
class FormComponent {
|
|
14
|
+
constructor() {
|
|
15
|
+
this.buttonConfig = {
|
|
16
|
+
label: "Submit"
|
|
17
|
+
};
|
|
18
|
+
this.formSubmit = new EventEmitter();
|
|
19
|
+
this.formChange = new EventEmitter();
|
|
20
|
+
}
|
|
21
|
+
// Define the editor configuration
|
|
22
|
+
onSubmit() {
|
|
23
|
+
if (this.formGroup.valid) {
|
|
24
|
+
this.formSubmit.emit(this.formGroup.value);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
console.log('Form not valid');
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
onValueChange(controlName, value) {
|
|
31
|
+
this.formChange.emit({ controlName, value });
|
|
32
|
+
}
|
|
33
|
+
checkFormConfigType(inputType) {
|
|
34
|
+
if (inputType) {
|
|
35
|
+
if (textualInputTypes.includes(inputType)) {
|
|
36
|
+
return InputGroupType.textual;
|
|
37
|
+
}
|
|
38
|
+
if (selectionInputTypes.includes(inputType)) {
|
|
39
|
+
return InputGroupType.selection;
|
|
40
|
+
}
|
|
41
|
+
if (inputType === InputType.file) {
|
|
42
|
+
return InputGroupType.file;
|
|
43
|
+
}
|
|
44
|
+
if (inputType === InputType.datetime) {
|
|
45
|
+
return InputGroupType.datetime;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return InputGroupType.textual;
|
|
49
|
+
}
|
|
50
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormComponent, isStandalone: true, selector: "app-form", inputs: { formGroup: "formGroup", inputConfigs: "inputConfigs", buttonConfig: "buttonConfig", validationMessages: "validationMessages" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, ngImport: i0, template: "<form (ngSubmit)=\"onSubmit()\" #form=\"ngForm\" [formGroup]=\"formGroup\">\n <ng-container *ngFor=\"let inputConfig of inputConfigs\">\n <app-input *ngIf=\"checkFormConfigType(inputConfig.type) === 'textual'\"\n [formControlName]=\"inputConfig.name\"\n [config]=\"inputConfig\"\n [required]=\"inputConfig.required\"></app-input>\n\n <app-selection *ngIf=\"checkFormConfigType(inputConfig.type) === 'selection'\"\n [formControlName]=\"inputConfig.name\"\n [label]=\"inputConfig.label?? ''\"\n [options]= \"inputConfig.options\">\n </app-selection>\n\n <app-file-selection\n [formControlName]=\"inputConfig.name\"\n *ngIf=\"checkFormConfigType(inputConfig.type) === 'file'\"\n [label]=\"inputConfig.name \">\n </app-file-selection>\n </ng-container>\n\n <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: FileSelectionComponent, selector: "app-file-selection", inputs: ["label", "chooseFileLabel", "imageUrl", "fileName"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
52
|
+
}
|
|
53
|
+
export { FormComponent };
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormComponent, decorators: [{
|
|
55
|
+
type: Component,
|
|
56
|
+
args: [{ selector: 'app-form', standalone: true, imports: [CommonModule, InputComponent, SelectionComponent,
|
|
57
|
+
FileSelectionComponent, ButtonComponent, FormsModule, ReactiveFormsModule], template: "<form (ngSubmit)=\"onSubmit()\" #form=\"ngForm\" [formGroup]=\"formGroup\">\n <ng-container *ngFor=\"let inputConfig of inputConfigs\">\n <app-input *ngIf=\"checkFormConfigType(inputConfig.type) === 'textual'\"\n [formControlName]=\"inputConfig.name\"\n [config]=\"inputConfig\"\n [required]=\"inputConfig.required\"></app-input>\n\n <app-selection *ngIf=\"checkFormConfigType(inputConfig.type) === 'selection'\"\n [formControlName]=\"inputConfig.name\"\n [label]=\"inputConfig.label?? ''\"\n [options]= \"inputConfig.options\">\n </app-selection>\n\n <app-file-selection\n [formControlName]=\"inputConfig.name\"\n *ngIf=\"checkFormConfigType(inputConfig.type) === 'file'\"\n [label]=\"inputConfig.name \">\n </app-file-selection>\n </ng-container>\n\n <app-button [config]=\"buttonConfig\"></app-button>\n</form>\n", styles: ["form{display:flex;flex-direction:column;gap:15px}label{display:block;margin-bottom:.5rem}input,textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:.25rem}\n"] }]
|
|
58
|
+
}], propDecorators: { formGroup: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}], inputConfigs: [{
|
|
61
|
+
type: Input
|
|
62
|
+
}], buttonConfig: [{
|
|
63
|
+
type: Input
|
|
64
|
+
}], validationMessages: [{
|
|
65
|
+
type: Input
|
|
66
|
+
}], formSubmit: [{
|
|
67
|
+
type: Output
|
|
68
|
+
}], formChange: [{
|
|
69
|
+
type: Output
|
|
70
|
+
}] } });
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWR1bWItbGliL3NyYy9saWIvY29tcG9uZW50cy9tb2xlY3VsZXMvZm9ybS9mb3JtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9mb3JtL2Zvcm0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQWEsV0FBVyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0UsT0FBTyxFQUFFLGNBQWMsRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUM1RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDL0UsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0scURBQXFELENBQUM7QUFFN0YsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ25FLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQzs7OztBQUd0RSxNQVFhLGFBQWE7SUFSMUI7UUFXVyxpQkFBWSxHQUFrQjtZQUNyQyxLQUFLLEVBQUUsUUFBUTtTQUNoQixDQUFBO1FBR1MsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDckMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUF1QyxDQUFDO0tBa0NoRjtJQWhDQyxrQ0FBa0M7SUFFbEMsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUU7WUFDeEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUM1QzthQUNJO1lBQ0gsT0FBTyxDQUFDLEdBQUcsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1NBQy9CO0lBQ0gsQ0FBQztJQUVELGFBQWEsQ0FBQyxXQUFtQixFQUFFLEtBQVU7UUFDM0MsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRUQsbUJBQW1CLENBQUMsU0FBZ0M7UUFDbEQsSUFBRyxTQUFTLEVBQUU7WUFDWixJQUFHLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsRUFBRTtnQkFDeEMsT0FBTyxjQUFjLENBQUMsT0FBTyxDQUFDO2FBQy9CO1lBQ0QsSUFBRyxtQkFBbUIsQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLEVBQUU7Z0JBQzFDLE9BQU8sY0FBYyxDQUFDLFNBQVMsQ0FBQzthQUNqQztZQUNELElBQUcsU0FBUyxLQUFLLFNBQVMsQ0FBQyxJQUFJLEVBQUU7Z0JBQy9CLE9BQU8sY0FBYyxDQUFDLElBQUksQ0FBQzthQUM1QjtZQUNELElBQUcsU0FBUyxLQUFLLFNBQVMsQ0FBQyxRQUFRLEVBQUU7Z0JBQ25DLE9BQU8sY0FBYyxDQUFDLFFBQVEsQ0FBQzthQUNoQztTQUNGO1FBQ0QsT0FBTyxjQUFjLENBQUMsT0FBTyxDQUFDO0lBQ2hDLENBQUM7K0dBMUNVLGFBQWE7bUdBQWIsYUFBYSwrUUNwQjFCLDgxQkFzQkEsdU9ETFksWUFBWSxnUUFBRSxjQUFjLDBFQUFFLGtCQUFrQix3TEFDeEQsc0JBQXNCLDZIQUFFLGVBQWUsbUdBQUUsV0FBVyx3bUJBQUUsbUJBQW1COztTQUVoRSxhQUFhOzRGQUFiLGFBQWE7a0JBUnpCLFNBQVM7K0JBQ0UsVUFBVSxjQUNSLElBQUksV0FHUCxDQUFDLFlBQVksRUFBRSxjQUFjLEVBQUUsa0JBQWtCO3dCQUN4RCxzQkFBc0IsRUFBRSxlQUFlLEVBQUUsV0FBVyxFQUFFLG1CQUFtQixDQUFDOzhCQUduRSxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFHRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCwgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBJbnB1dEdyb3VwVHlwZSwgSW5wdXRUeXBlIH0gZnJvbSAnLi4vLi4vLi4vc2hhcmVkL2VudW1zL2VudW0nO1xuaW1wb3J0IHsgc2VsZWN0aW9uSW5wdXRUeXBlcywgdGV4dHVhbElucHV0VHlwZXMgfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvY29uc3RhbnRzL2NvbnN0YW50JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBTZWxlY3Rpb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9zZWxlY3Rpb24vc2VsZWN0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGaWxlU2VsZWN0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvZmlsZS1zZWxlY3Rpb24vZmlsZS1zZWxlY3Rpb24uY29tcG9uZW50JztcbmltcG9ydCB7IElCdXR0b25Db25maWcsIElJbnB1dENvbmZpZyB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9pbnRlcmZhY2VzL2ludGVyZmFjZSc7XG5pbXBvcnQgeyBJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2lucHV0L2lucHV0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWZvcm0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0uY29tcG9uZW50LnNjc3MnXSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSW5wdXRDb21wb25lbnQsIFNlbGVjdGlvbkNvbXBvbmVudCxcbiAgICBGaWxlU2VsZWN0aW9uQ29tcG9uZW50LCBCdXR0b25Db21wb25lbnQsIEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlXVxufSlcbmV4cG9ydCBjbGFzcyBGb3JtQ29tcG9uZW50IHtcbiAgQElucHV0KCkgZm9ybUdyb3VwITogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBpbnB1dENvbmZpZ3MhOiBBcnJheTxJSW5wdXRDb25maWc+O1xuICBASW5wdXQoKSBidXR0b25Db25maWc6IElCdXR0b25Db25maWcgPSB7XG4gICAgbGFiZWw6IFwiU3VibWl0XCJcbiAgfVxuICBASW5wdXQoKSB2YWxpZGF0aW9uTWVzc2FnZXMhOiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9O1xuXG4gIEBPdXRwdXQoKSBmb3JtU3VibWl0ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBmb3JtQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7IGNvbnRyb2xOYW1lOiBzdHJpbmc7IHZhbHVlOiBhbnkgfT4oKTtcblxuICAvLyBEZWZpbmUgdGhlIGVkaXRvciBjb25maWd1cmF0aW9uXG5cbiAgb25TdWJtaXQoKSB7XG4gICAgaWYgKHRoaXMuZm9ybUdyb3VwLnZhbGlkKSB7XG4gICAgICB0aGlzLmZvcm1TdWJtaXQuZW1pdCh0aGlzLmZvcm1Hcm91cC52YWx1ZSk7XG4gICAgfVxuICAgIGVsc2Uge1xuICAgICAgY29uc29sZS5sb2coJ0Zvcm0gbm90IHZhbGlkJyk7XG4gICAgfVxuICB9XG5cbiAgb25WYWx1ZUNoYW5nZShjb250cm9sTmFtZTogc3RyaW5nLCB2YWx1ZTogYW55KSB7XG4gICAgdGhpcy5mb3JtQ2hhbmdlLmVtaXQoeyBjb250cm9sTmFtZSwgdmFsdWUgfSk7XG4gIH1cblxuICBjaGVja0Zvcm1Db25maWdUeXBlKGlucHV0VHlwZTogSW5wdXRUeXBlIHwgdW5kZWZpbmVkKTogSW5wdXRHcm91cFR5cGUge1xuICAgIGlmKGlucHV0VHlwZSkge1xuICAgICAgaWYodGV4dHVhbElucHV0VHlwZXMuaW5jbHVkZXMoaW5wdXRUeXBlKSkge1xuICAgICAgICByZXR1cm4gSW5wdXRHcm91cFR5cGUudGV4dHVhbDtcbiAgICAgIH1cbiAgICAgIGlmKHNlbGVjdGlvbklucHV0VHlwZXMuaW5jbHVkZXMoaW5wdXRUeXBlKSkge1xuICAgICAgICByZXR1cm4gSW5wdXRHcm91cFR5cGUuc2VsZWN0aW9uO1xuICAgICAgfVxuICAgICAgaWYoaW5wdXRUeXBlID09PSBJbnB1dFR5cGUuZmlsZSkge1xuICAgICAgICByZXR1cm4gSW5wdXRHcm91cFR5cGUuZmlsZTtcbiAgICAgIH1cbiAgICAgIGlmKGlucHV0VHlwZSA9PT0gSW5wdXRUeXBlLmRhdGV0aW1lKSB7XG4gICAgICAgIHJldHVybiBJbnB1dEdyb3VwVHlwZS5kYXRldGltZTtcbiAgICAgIH1cbiAgICB9XG4gICAgcmV0dXJuIElucHV0R3JvdXBUeXBlLnRleHR1YWw7XG4gIH1cbn1cbiIsIjxmb3JtIChuZ1N1Ym1pdCk9XCJvblN1Ym1pdCgpXCIgI2Zvcm09XCJuZ0Zvcm1cIiBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpbnB1dENvbmZpZyBvZiBpbnB1dENvbmZpZ3NcIj5cbiAgICA8YXBwLWlucHV0ICpuZ0lmPVwiY2hlY2tGb3JtQ29uZmlnVHlwZShpbnB1dENvbmZpZy50eXBlKSA9PT0gJ3RleHR1YWwnXCJcbiAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImlucHV0Q29uZmlnLm5hbWVcIlxuICAgIFtjb25maWddPVwiaW5wdXRDb25maWdcIlxuICAgIFtyZXF1aXJlZF09XCJpbnB1dENvbmZpZy5yZXF1aXJlZFwiPjwvYXBwLWlucHV0PlxuXG4gICAgPGFwcC1zZWxlY3Rpb24gKm5nSWY9XCJjaGVja0Zvcm1Db25maWdUeXBlKGlucHV0Q29uZmlnLnR5cGUpID09PSAnc2VsZWN0aW9uJ1wiXG4gICAgW2Zvcm1Db250cm9sTmFtZV09XCJpbnB1dENvbmZpZy5uYW1lXCJcbiAgICBbbGFiZWxdPVwiaW5wdXRDb25maWcubGFiZWw/PyAnJ1wiXG4gICAgW29wdGlvbnNdPSBcImlucHV0Q29uZmlnLm9wdGlvbnNcIj5cbiAgICA8L2FwcC1zZWxlY3Rpb24+XG5cbiAgICA8YXBwLWZpbGUtc2VsZWN0aW9uXG4gICAgW2Zvcm1Db250cm9sTmFtZV09XCJpbnB1dENvbmZpZy5uYW1lXCJcbiAgICAqbmdJZj1cImNoZWNrRm9ybUNvbmZpZ1R5cGUoaW5wdXRDb25maWcudHlwZSkgPT09ICdmaWxlJ1wiXG4gICAgW2xhYmVsXT1cImlucHV0Q29uZmlnLm5hbWUgXCI+XG4gICAgPC9hcHAtZmlsZS1zZWxlY3Rpb24+XG4gIDwvbmctY29udGFpbmVyPlxuXG4gIDxhcHAtYnV0dG9uIFtjb25maWddPVwiYnV0dG9uQ29uZmlnXCI+PC9hcHAtYnV0dG9uPlxuPC9mb3JtPlxuIl19
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
class ModalComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.okConfig = {
|
|
9
|
+
label: "Ok"
|
|
10
|
+
};
|
|
11
|
+
this.cancelConfig = {
|
|
12
|
+
label: "Cancel"
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
ngOnInit() {
|
|
16
|
+
}
|
|
17
|
+
closeModal() {
|
|
18
|
+
this.modalEvent.isModalVisible = false;
|
|
19
|
+
}
|
|
20
|
+
handleOverlayClick(event) {
|
|
21
|
+
this.closeModal();
|
|
22
|
+
}
|
|
23
|
+
handleContentClick(event) {
|
|
24
|
+
event.stopPropagation();
|
|
25
|
+
}
|
|
26
|
+
ok() {
|
|
27
|
+
if (this.modalEvent && this.modalEvent.onOk) {
|
|
28
|
+
this.modalEvent.onOk();
|
|
29
|
+
this.closeModal();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
cancel() {
|
|
33
|
+
this.closeModal();
|
|
34
|
+
}
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "app-modal", inputs: { modalEvent: "modalEvent" }, ngImport: i0, template: "<div class=\"modal-overlay\" (click)=\"handleOverlayClick($event)\" *ngIf=\"modalEvent?.isModalVisible\">\n <div class=\"modal-content\" (click)=\"handleContentClick($event)\">\n <div class=\"modal-header\">\n <h2>{{modalEvent.title }}</h2>\n <button class=\"close-btn\" (click)=\"closeModal()\">\n <i class=\"material-icons\">close</i>\n </button>\n </div>\n <div *ngIf=\"modalEvent.params && modalEvent.params['content']\">{{modalEvent.params['content'] }}</div>\n <ng-container *ngTemplateOutlet=\"modalEvent.template; context: modalEvent.params\"></ng-container>\n <div *ngIf=\"!modalEvent?.isDialog\" class=\"buttons\">\n <app-button [config]=\"okConfig\" (clickEvent)=\"ok()\"></app-button>\n <app-button [config]=\"cancelConfig\" (clickEvent)=\"cancel()\"></app-button>\n </div>\n </div>\n</div>\n", styles: [".modal-overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:50}.modal-content{display:flex;flex-direction:column;gap:20px;background-color:#fff;color:#000;border-radius:.5rem;padding:2rem;max-width:600px;width:100%;max-height:calc(100vh - 7rem);overflow-y:auto}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;flex-direction:row;justify-content:space-between}h2{font-size:2rem;font-weight:700;margin:unset}p{color:#4b5563;margin-bottom:1.5rem}p.dark-mode{color:#d1d5db}.modal-actions{display:flex;justify-content:flex-end}.close-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:0;display:flex;align-items:center}.close-btn i.material-icons{font-size:24px;color:#888}.close-btn:hover i.material-icons{color:#444}.buttons{display:flex;flex-direction:row;justify-content:end;gap:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
|
|
37
|
+
}
|
|
38
|
+
export { ModalComponent };
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
|
|
40
|
+
type: Component,
|
|
41
|
+
args: [{ selector: 'app-modal', standalone: true, imports: [CommonModule, ButtonComponent], template: "<div class=\"modal-overlay\" (click)=\"handleOverlayClick($event)\" *ngIf=\"modalEvent?.isModalVisible\">\n <div class=\"modal-content\" (click)=\"handleContentClick($event)\">\n <div class=\"modal-header\">\n <h2>{{modalEvent.title }}</h2>\n <button class=\"close-btn\" (click)=\"closeModal()\">\n <i class=\"material-icons\">close</i>\n </button>\n </div>\n <div *ngIf=\"modalEvent.params && modalEvent.params['content']\">{{modalEvent.params['content'] }}</div>\n <ng-container *ngTemplateOutlet=\"modalEvent.template; context: modalEvent.params\"></ng-container>\n <div *ngIf=\"!modalEvent?.isDialog\" class=\"buttons\">\n <app-button [config]=\"okConfig\" (clickEvent)=\"ok()\"></app-button>\n <app-button [config]=\"cancelConfig\" (clickEvent)=\"cancel()\"></app-button>\n </div>\n </div>\n</div>\n", styles: [".modal-overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:50}.modal-content{display:flex;flex-direction:column;gap:20px;background-color:#fff;color:#000;border-radius:.5rem;padding:2rem;max-width:600px;width:100%;max-height:calc(100vh - 7rem);overflow-y:auto}.modal-content.dark-mode{background-color:#27272a;color:#d1d5db}.modal-content .modal-header{display:flex;flex-direction:row;justify-content:space-between}h2{font-size:2rem;font-weight:700;margin:unset}p{color:#4b5563;margin-bottom:1.5rem}p.dark-mode{color:#d1d5db}.modal-actions{display:flex;justify-content:flex-end}.close-btn{background-color:transparent;border:none;font-size:1.5rem;cursor:pointer;padding:0;display:flex;align-items:center}.close-btn i.material-icons{font-size:24px;color:#888}.close-btn:hover i.material-icons{color:#444}.buttons{display:flex;flex-direction:row;justify-content:end;gap:15px}\n"] }]
|
|
42
|
+
}], ctorParameters: function () { return []; }, propDecorators: { modalEvent: [{
|
|
43
|
+
type: Input
|
|
44
|
+
}] } });
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL21vZGFsL21vZGFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9tb2RhbC9tb2RhbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUV6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7QUFFdEUsTUFPYSxjQUFjO0lBUXpCO1FBTkEsYUFBUSxHQUFrQjtZQUN4QixLQUFLLEVBQUUsSUFBSTtTQUNaLENBQUE7UUFDRCxpQkFBWSxHQUFrQjtZQUM1QixLQUFLLEVBQUUsUUFBUTtTQUNoQixDQUFBO0lBQ2UsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsVUFBVSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUM7SUFDekMsQ0FBQztJQUVELGtCQUFrQixDQUFDLEtBQWlCO1FBQ2xDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsa0JBQWtCLENBQUMsS0FBaUI7UUFDbEMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxFQUFFO1FBQ0EsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFO1lBQzNDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQzsrR0FsQ1UsY0FBYzttR0FBZCxjQUFjLDJHQ1ozQiwwMUJBZ0JBLHFnQ0ROWSxZQUFZLDBTQUFFLGVBQWU7O1NBRTVCLGNBQWM7NEZBQWQsY0FBYztrQkFQMUIsU0FBUzsrQkFDRSxXQUFXLGNBQ1QsSUFBSSxXQUdQLENBQUMsWUFBWSxFQUFFLGVBQWUsQ0FBQzswRUFHL0IsVUFBVTtzQkFBbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUJ1dHRvbkNvbmZpZywgSU1vZGFsRXZlbnQgfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvaW50ZXJmYWNlcy9pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLW1vZGFsJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL21vZGFsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQnV0dG9uQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIG1vZGFsRXZlbnQhOiBJTW9kYWxFdmVudDtcbiAgb2tDb25maWc6IElCdXR0b25Db25maWcgPSB7XG4gICAgbGFiZWw6IFwiT2tcIlxuICB9XG4gIGNhbmNlbENvbmZpZzogSUJ1dHRvbkNvbmZpZyA9IHtcbiAgICBsYWJlbDogXCJDYW5jZWxcIlxuICB9XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gIH1cblxuICBjbG9zZU1vZGFsKCkge1xuICAgIHRoaXMubW9kYWxFdmVudC5pc01vZGFsVmlzaWJsZSA9IGZhbHNlO1xuICB9XG5cbiAgaGFuZGxlT3ZlcmxheUNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgdGhpcy5jbG9zZU1vZGFsKCk7XG4gIH1cblxuICBoYW5kbGVDb250ZW50Q2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgfVxuXG4gIG9rKCkge1xuICAgIGlmICh0aGlzLm1vZGFsRXZlbnQgJiYgdGhpcy5tb2RhbEV2ZW50Lm9uT2spIHtcbiAgICAgIHRoaXMubW9kYWxFdmVudC5vbk9rKCk7XG4gICAgICB0aGlzLmNsb3NlTW9kYWwoKTtcbiAgICB9XG4gIH1cblxuICBjYW5jZWwoKSB7XG4gICAgdGhpcy5jbG9zZU1vZGFsKCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJtb2RhbC1vdmVybGF5XCIgKGNsaWNrKT1cImhhbmRsZU92ZXJsYXlDbGljaygkZXZlbnQpXCIgKm5nSWY9XCJtb2RhbEV2ZW50Py5pc01vZGFsVmlzaWJsZVwiPlxuICA8ZGl2IGNsYXNzPVwibW9kYWwtY29udGVudFwiIChjbGljayk9XCJoYW5kbGVDb250ZW50Q2xpY2soJGV2ZW50KVwiPlxuICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1oZWFkZXJcIj5cbiAgICAgIDxoMj57e21vZGFsRXZlbnQudGl0bGUgfX08L2gyPlxuICAgICAgPGJ1dHRvbiBjbGFzcz1cImNsb3NlLWJ0blwiIChjbGljayk9XCJjbG9zZU1vZGFsKClcIj5cbiAgICAgICAgPGkgY2xhc3M9XCJtYXRlcmlhbC1pY29uc1wiPmNsb3NlPC9pPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cIm1vZGFsRXZlbnQucGFyYW1zICYmIG1vZGFsRXZlbnQucGFyYW1zWydjb250ZW50J11cIj57e21vZGFsRXZlbnQucGFyYW1zWydjb250ZW50J10gfX08L2Rpdj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibW9kYWxFdmVudC50ZW1wbGF0ZTsgY29udGV4dDogbW9kYWxFdmVudC5wYXJhbXNcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8ZGl2ICpuZ0lmPVwiIW1vZGFsRXZlbnQ/LmlzRGlhbG9nXCIgY2xhc3M9XCJidXR0b25zXCI+XG4gICAgICA8YXBwLWJ1dHRvbiBbY29uZmlnXT1cIm9rQ29uZmlnXCIgKGNsaWNrRXZlbnQpPVwib2soKVwiPjwvYXBwLWJ1dHRvbj5cbiAgICAgIDxhcHAtYnV0dG9uIFtjb25maWddPVwiY2FuY2VsQ29uZmlnXCIgKGNsaWNrRXZlbnQpPVwiY2FuY2VsKClcIj48L2FwcC1idXR0b24+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
3
|
+
import { ButtonType, InputDirection } from '../../../shared/enums/enum';
|
|
4
|
+
import { SelectionComponent } from '../../atoms/selection/selection.component';
|
|
5
|
+
import { ButtonComponent } from '../../atoms/button/button.component';
|
|
6
|
+
import { InputComponent } from '../../atoms/input/input.component';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@angular/common";
|
|
9
|
+
class PaginatorComponent {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.itemsPerPageList = [];
|
|
12
|
+
this.inputConfig = {
|
|
13
|
+
label: 'Go to page',
|
|
14
|
+
direction: InputDirection.horizontal,
|
|
15
|
+
name: 'inputConfig',
|
|
16
|
+
required: false
|
|
17
|
+
};
|
|
18
|
+
this.previousButtonConfig = {
|
|
19
|
+
iconValue: 'chevron_left',
|
|
20
|
+
type: ButtonType.button,
|
|
21
|
+
isDisabled: true
|
|
22
|
+
};
|
|
23
|
+
this.nextButtonConfig = {
|
|
24
|
+
iconValue: 'chevron_right',
|
|
25
|
+
type: ButtonType.button,
|
|
26
|
+
isDisabled: false
|
|
27
|
+
};
|
|
28
|
+
this.numberOfPage = 0;
|
|
29
|
+
this.itemsPerPage = 0;
|
|
30
|
+
this.selectedPage = 0;
|
|
31
|
+
this.totalRecords = 0;
|
|
32
|
+
this.paginator = new EventEmitter();
|
|
33
|
+
}
|
|
34
|
+
get pageNumbers() {
|
|
35
|
+
return Array.from({ length: this.numberOfPage }, (_, i) => i + 1);
|
|
36
|
+
}
|
|
37
|
+
ngOnInit() {
|
|
38
|
+
this.itemsPerPageList = [
|
|
39
|
+
{
|
|
40
|
+
label: "3",
|
|
41
|
+
value: 1
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "5",
|
|
45
|
+
value: 2
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "20",
|
|
49
|
+
value: 3
|
|
50
|
+
}
|
|
51
|
+
];
|
|
52
|
+
this.selectedPage = 1;
|
|
53
|
+
this.buttonType = ButtonType.button;
|
|
54
|
+
this.inputDirection = InputDirection.horizontal;
|
|
55
|
+
this.itemsPerPage = parseInt(this.itemsPerPageList[0].label);
|
|
56
|
+
this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
|
|
57
|
+
this.updateButtonConfigs();
|
|
58
|
+
this.emitPaging();
|
|
59
|
+
}
|
|
60
|
+
ngOnChanges() {
|
|
61
|
+
this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
|
|
62
|
+
}
|
|
63
|
+
selectPage(i) {
|
|
64
|
+
this.selectedPage = i;
|
|
65
|
+
this.updateButtonConfigs();
|
|
66
|
+
this.emitPaging();
|
|
67
|
+
}
|
|
68
|
+
onChangeNumberOfPage(itemsPerPageId) {
|
|
69
|
+
this.selectedPage = 1;
|
|
70
|
+
this.itemsPerPage = parseInt(this.itemsPerPageList.find(i => i.value === parseInt(itemsPerPageId))?.label ??
|
|
71
|
+
this.itemsPerPage.toString());
|
|
72
|
+
this.calculateNumberOfPage(this.totalRecords, this.itemsPerPage);
|
|
73
|
+
this.updateButtonConfigs();
|
|
74
|
+
this.emitPaging();
|
|
75
|
+
}
|
|
76
|
+
emitPaging() {
|
|
77
|
+
let paging = {
|
|
78
|
+
itemsPerPage: this.itemsPerPage,
|
|
79
|
+
selectedPage: this.selectedPage
|
|
80
|
+
};
|
|
81
|
+
this.paginator.emit(paging);
|
|
82
|
+
}
|
|
83
|
+
calculateNumberOfPage(totalRecords, itemsPerPage) {
|
|
84
|
+
return this.numberOfPage = Math.ceil(totalRecords / itemsPerPage);
|
|
85
|
+
}
|
|
86
|
+
updateButtonConfigs() {
|
|
87
|
+
// Re-assign the button configuration to trigger change detection
|
|
88
|
+
this.previousButtonConfig = {
|
|
89
|
+
...this.previousButtonConfig,
|
|
90
|
+
isDisabled: this.selectedPage <= 1
|
|
91
|
+
};
|
|
92
|
+
this.nextButtonConfig = {
|
|
93
|
+
...this.nextButtonConfig,
|
|
94
|
+
isDisabled: this.selectedPage >= this.numberOfPage
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
// Method to return config for page number buttons
|
|
98
|
+
getPageButtonConfig(page) {
|
|
99
|
+
return {
|
|
100
|
+
label: page.toString(),
|
|
101
|
+
type: ButtonType.button,
|
|
102
|
+
isActive: page === this.selectedPage,
|
|
103
|
+
isDisabled: false // Page buttons are never disabled
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { totalRecords: "totalRecords" }, outputs: { paginator: "paginator" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-footer\">\n <div class=\"number-of-page\">\n <app-selection [options] = \"itemsPerPageList\"\n [selectedValue]=\"this.itemsPerPage\"\n (selectedChange) = \"onChangeNumberOfPage($event)\">\n </app-selection>\n <app-input [config]=\"inputConfig\"></app-input>\n </div>\n <div class=\"paginator\">\n <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n [config]=\"previousButtonConfig\"/>\n\n <!-- Page Numbers -->\n <ng-container *ngFor=\"let page of pageNumbers\">\n <app-button\n (clickEvent)=\"selectPage(page)\"\n [config]=\"getPageButtonConfig(page)\">\n </app-button>\n </ng-container>\n\n <!-- Next Button -->\n <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n [config]=\"nextButtonConfig\"/>\n </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }, { kind: "component", type: SelectionComponent, selector: "app-selection", inputs: ["label", "options", "selectedValue", "selectedValues", "isMultiSelect", "displayType"], outputs: ["selectedChange"] }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["config"] }] }); }
|
|
108
|
+
}
|
|
109
|
+
export { PaginatorComponent };
|
|
110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
111
|
+
type: Component,
|
|
112
|
+
args: [{ selector: 'app-paginator', standalone: true, imports: [CommonModule, ButtonComponent, SelectionComponent, InputComponent], template: "<div class=\"table-footer\">\n <div class=\"number-of-page\">\n <app-selection [options] = \"itemsPerPageList\"\n [selectedValue]=\"this.itemsPerPage\"\n (selectedChange) = \"onChangeNumberOfPage($event)\">\n </app-selection>\n <app-input [config]=\"inputConfig\"></app-input>\n </div>\n <div class=\"paginator\">\n <app-button (clickEvent)=\"selectPage(selectedPage - 1)\"\n [config]=\"previousButtonConfig\"/>\n\n <!-- Page Numbers -->\n <ng-container *ngFor=\"let page of pageNumbers\">\n <app-button\n (clickEvent)=\"selectPage(page)\"\n [config]=\"getPageButtonConfig(page)\">\n </app-button>\n </ng-container>\n\n <!-- Next Button -->\n <app-button (clickEvent)=\"selectPage(selectedPage + 1)\"\n [config]=\"nextButtonConfig\"/>\n </div>\n</div>\n", styles: ["body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-footer{display:flex}.table-footer .number-of-page{width:70%;display:flex;align-items:center;gap:20px}.table-footer .paginator{display:flex;justify-content:flex-end;width:100%}.table-footer .paginator app-button{margin:0 2px}\n"] }]
|
|
113
|
+
}], ctorParameters: function () { return []; }, propDecorators: { totalRecords: [{
|
|
114
|
+
type: Input
|
|
115
|
+
}], paginator: [{
|
|
116
|
+
type: Output
|
|
117
|
+
}] } });
|
|
118
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9wYWdpbmF0b3IvcGFnaW5hdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy9wYWdpbmF0b3IvcGFnaW5hdG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRS9FLE9BQU8sRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDeEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQzs7O0FBRW5FLE1BT2Esa0JBQWtCO0lBNEI3QjtRQTNCQSxxQkFBZ0IsR0FBc0IsRUFBRSxDQUFDO1FBQ3pDLGdCQUFXLEdBQWlCO1lBQzFCLEtBQUssRUFBRSxZQUFZO1lBQ25CLFNBQVMsRUFBRSxjQUFjLENBQUMsVUFBVTtZQUNwQyxJQUFJLEVBQUUsYUFBYTtZQUNuQixRQUFRLEVBQUUsS0FBSztTQUNoQixDQUFBO1FBQ0QseUJBQW9CLEdBQWtCO1lBQ3BDLFNBQVMsRUFBRSxjQUFjO1lBQ3pCLElBQUksRUFBRSxVQUFVLENBQUMsTUFBTTtZQUN2QixVQUFVLEVBQUUsSUFBSTtTQUNqQixDQUFBO1FBQ0QscUJBQWdCLEdBQWtCO1lBQ2hDLFNBQVMsRUFBRSxlQUFlO1lBQzFCLElBQUksRUFBRSxVQUFVLENBQUMsTUFBTTtZQUN2QixVQUFVLEVBQUUsS0FBSztTQUNsQixDQUFBO1FBQ0QsaUJBQVksR0FBVyxDQUFDLENBQUM7UUFDekIsaUJBQVksR0FBVyxDQUFDLENBQUM7UUFDekIsaUJBQVksR0FBVyxDQUFDLENBQUM7UUFJaEIsaUJBQVksR0FBVyxDQUFDLENBQUM7UUFFeEIsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7SUFFdEMsQ0FBQztJQUVoQixJQUFJLFdBQVc7UUFDYixPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3BFLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixHQUFHO1lBQ3RCO2dCQUNFLEtBQUssRUFBRSxHQUFHO2dCQUNWLEtBQUssRUFBRSxDQUFDO2FBQ1Q7WUFDRDtnQkFDRSxLQUFLLEVBQUUsR0FBRztnQkFDVixLQUFLLEVBQUUsQ0FBQzthQUNUO1lBQ0Q7Z0JBQ0UsS0FBSyxFQUFFLElBQUk7Z0JBQ1gsS0FBSyxFQUFFLENBQUM7YUFDVDtTQUNGLENBQUM7UUFDRixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDcEMsSUFBSSxDQUFDLGNBQWMsR0FBRyxjQUFjLENBQUMsVUFBVSxDQUFDO1FBQ2hELElBQUksQ0FBQyxZQUFZLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3RCxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHFCQUFxQixDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFFRCxVQUFVLENBQUMsQ0FBUztRQUNsQixJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztRQUN0QixJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztRQUMzQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELG9CQUFvQixDQUFDLGNBQXNCO1FBQ3pDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxZQUFZLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFBLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxLQUFLLFFBQVEsQ0FBQyxjQUFjLENBQUMsQ0FBQyxFQUFFLEtBQUs7WUFDNUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBRTFELElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNqRSxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztRQUMzQixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFVBQVU7UUFDaEIsSUFBSSxNQUFNLEdBQWU7WUFDdkIsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1lBQy9CLFlBQVksRUFBRSxJQUFJLENBQUMsWUFBWTtTQUNoQyxDQUFBO1FBQ0QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVPLHFCQUFxQixDQUFFLFlBQW9CLEVBQUUsWUFBb0I7UUFDdkUsT0FBTyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFTyxtQkFBbUI7UUFDekIsaUVBQWlFO1FBQ2pFLElBQUksQ0FBQyxvQkFBb0IsR0FBRztZQUMxQixHQUFHLElBQUksQ0FBQyxvQkFBb0I7WUFDNUIsVUFBVSxFQUFFLElBQUksQ0FBQyxZQUFZLElBQUksQ0FBQztTQUNuQyxDQUFDO1FBQ0YsSUFBSSxDQUFDLGdCQUFnQixHQUFHO1lBQ3RCLEdBQUcsSUFBSSxDQUFDLGdCQUFnQjtZQUN4QixVQUFVLEVBQUUsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsWUFBWTtTQUNuRCxDQUFDO0lBQ0osQ0FBQztJQUVELGtEQUFrRDtJQUNsRCxtQkFBbUIsQ0FBQyxJQUFZO1FBQzlCLE9BQU87WUFDTCxLQUFLLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUN0QixJQUFJLEVBQUUsVUFBVSxDQUFDLE1BQU07WUFDdkIsUUFBUSxFQUFFLElBQUksS0FBSyxJQUFJLENBQUMsWUFBWTtZQUNwQyxVQUFVLEVBQUUsS0FBSyxDQUFDLGtDQUFrQztTQUNyRCxDQUFDO0lBQ0osQ0FBQzsrR0E5R1Usa0JBQWtCO21HQUFsQixrQkFBa0IsNktDZi9CLDAyQkF5QkEsMlhEWlksWUFBWSw0SkFBRSxlQUFlLG9HQUFFLGtCQUFrQix3TEFBRSxjQUFjOztTQUVoRSxrQkFBa0I7NEZBQWxCLGtCQUFrQjtrQkFQOUIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxXQUdQLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxrQkFBa0IsRUFBRSxjQUFjLENBQUM7MEVBMEJuRSxZQUFZO3NCQUFwQixLQUFLO2dCQUVJLFNBQVM7c0JBQWxCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSUJ1dHRvbkNvbmZpZywgSURyb3Bkb3duT3B0aW9uLCBJSW5wdXRDb25maWcsIElQYWdpbmF0b3IgfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvaW50ZXJmYWNlcy9pbnRlcmZhY2UnO1xuaW1wb3J0IHsgQnV0dG9uVHlwZSwgSW5wdXREaXJlY3Rpb24gfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvZW51bXMvZW51bSc7XG5pbXBvcnQgeyBTZWxlY3Rpb25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9zZWxlY3Rpb24vc2VsZWN0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9hdG9tcy9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2lucHV0L2lucHV0LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1wYWdpbmF0b3InLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnaW5hdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnaW5hdG9yLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEJ1dHRvbkNvbXBvbmVudCwgU2VsZWN0aW9uQ29tcG9uZW50LCBJbnB1dENvbXBvbmVudF1cbn0pXG5leHBvcnQgY2xhc3MgUGFnaW5hdG9yQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgaXRlbXNQZXJQYWdlTGlzdDogSURyb3Bkb3duT3B0aW9uW10gPSBbXTtcbiAgaW5wdXRDb25maWc6IElJbnB1dENvbmZpZyA9IHtcbiAgICBsYWJlbDogJ0dvIHRvIHBhZ2UnLFxuICAgIGRpcmVjdGlvbjogSW5wdXREaXJlY3Rpb24uaG9yaXpvbnRhbCxcbiAgICBuYW1lOiAnaW5wdXRDb25maWcnLFxuICAgIHJlcXVpcmVkOiBmYWxzZVxuICB9XG4gIHByZXZpb3VzQnV0dG9uQ29uZmlnOiBJQnV0dG9uQ29uZmlnID0ge1xuICAgIGljb25WYWx1ZTogJ2NoZXZyb25fbGVmdCcsXG4gICAgdHlwZTogQnV0dG9uVHlwZS5idXR0b24sXG4gICAgaXNEaXNhYmxlZDogdHJ1ZVxuICB9XG4gIG5leHRCdXR0b25Db25maWc6IElCdXR0b25Db25maWcgPSB7XG4gICAgaWNvblZhbHVlOiAnY2hldnJvbl9yaWdodCcsXG4gICAgdHlwZTogQnV0dG9uVHlwZS5idXR0b24sXG4gICAgaXNEaXNhYmxlZDogZmFsc2VcbiAgfVxuICBudW1iZXJPZlBhZ2U6IG51bWJlciA9IDA7XG4gIGl0ZW1zUGVyUGFnZTogbnVtYmVyID0gMDtcbiAgc2VsZWN0ZWRQYWdlOiBudW1iZXIgPSAwO1xuICBidXR0b25UeXBlITogQnV0dG9uVHlwZTtcbiAgaW5wdXREaXJlY3Rpb24hOiBJbnB1dERpcmVjdGlvbjtcblxuICBASW5wdXQoKSB0b3RhbFJlY29yZHM6IG51bWJlciA9IDA7XG5cbiAgQE91dHB1dCgpIHBhZ2luYXRvciA9IG5ldyBFdmVudEVtaXR0ZXI8SVBhZ2luYXRvcj4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgZ2V0IHBhZ2VOdW1iZXJzKCk6IG51bWJlcltdIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh7IGxlbmd0aDogdGhpcy5udW1iZXJPZlBhZ2UgfSwgKF8sIGkpID0+IGkgKyAxKTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuaXRlbXNQZXJQYWdlTGlzdCA9IFtcbiAgICAgIHtcbiAgICAgICAgbGFiZWw6IFwiM1wiLFxuICAgICAgICB2YWx1ZTogMVxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgbGFiZWw6IFwiNVwiLFxuICAgICAgICB2YWx1ZTogMlxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgbGFiZWw6IFwiMjBcIixcbiAgICAgICAgdmFsdWU6IDNcbiAgICAgIH1cbiAgICBdO1xuICAgIHRoaXMuc2VsZWN0ZWRQYWdlID0gMTtcbiAgICB0aGlzLmJ1dHRvblR5cGUgPSBCdXR0b25UeXBlLmJ1dHRvbjtcbiAgICB0aGlzLmlucHV0RGlyZWN0aW9uID0gSW5wdXREaXJlY3Rpb24uaG9yaXpvbnRhbDtcbiAgICB0aGlzLml0ZW1zUGVyUGFnZSA9IHBhcnNlSW50KHRoaXMuaXRlbXNQZXJQYWdlTGlzdFswXS5sYWJlbCk7XG4gICAgdGhpcy5jYWxjdWxhdGVOdW1iZXJPZlBhZ2UodGhpcy50b3RhbFJlY29yZHMsIHRoaXMuaXRlbXNQZXJQYWdlKTtcbiAgICB0aGlzLnVwZGF0ZUJ1dHRvbkNvbmZpZ3MoKTtcbiAgICB0aGlzLmVtaXRQYWdpbmcoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuY2FsY3VsYXRlTnVtYmVyT2ZQYWdlKHRoaXMudG90YWxSZWNvcmRzLCB0aGlzLml0ZW1zUGVyUGFnZSk7XG4gIH1cblxuICBzZWxlY3RQYWdlKGk6IG51bWJlcikge1xuICAgIHRoaXMuc2VsZWN0ZWRQYWdlID0gaTtcbiAgICB0aGlzLnVwZGF0ZUJ1dHRvbkNvbmZpZ3MoKTtcbiAgICB0aGlzLmVtaXRQYWdpbmcoKTtcbiAgfVxuXG4gIG9uQ2hhbmdlTnVtYmVyT2ZQYWdlKGl0ZW1zUGVyUGFnZUlkOiBzdHJpbmcpIHtcbiAgICB0aGlzLnNlbGVjdGVkUGFnZSA9IDE7XG4gICAgdGhpcy5pdGVtc1BlclBhZ2UgPSBwYXJzZUludCh0aGlzLml0ZW1zUGVyUGFnZUxpc3QuZmluZChpPT4gaS52YWx1ZSA9PT0gcGFyc2VJbnQoaXRlbXNQZXJQYWdlSWQpKT8ubGFiZWw/P1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aGlzLml0ZW1zUGVyUGFnZS50b1N0cmluZygpKTtcblxuICAgIHRoaXMuY2FsY3VsYXRlTnVtYmVyT2ZQYWdlKHRoaXMudG90YWxSZWNvcmRzLCB0aGlzLml0ZW1zUGVyUGFnZSk7XG4gICAgdGhpcy51cGRhdGVCdXR0b25Db25maWdzKCk7XG4gICAgdGhpcy5lbWl0UGFnaW5nKCk7XG4gIH1cblxuICBwcml2YXRlIGVtaXRQYWdpbmcoKSB7XG4gICAgbGV0IHBhZ2luZzogSVBhZ2luYXRvciA9IHtcbiAgICAgIGl0ZW1zUGVyUGFnZTogdGhpcy5pdGVtc1BlclBhZ2UsXG4gICAgICBzZWxlY3RlZFBhZ2U6IHRoaXMuc2VsZWN0ZWRQYWdlXG4gICAgfVxuICAgIHRoaXMucGFnaW5hdG9yLmVtaXQocGFnaW5nKTtcbiAgfVxuXG4gIHByaXZhdGUgY2FsY3VsYXRlTnVtYmVyT2ZQYWdlICh0b3RhbFJlY29yZHM6IG51bWJlciwgaXRlbXNQZXJQYWdlOiBudW1iZXIpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLm51bWJlck9mUGFnZSA9IE1hdGguY2VpbCh0b3RhbFJlY29yZHMvaXRlbXNQZXJQYWdlKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQnV0dG9uQ29uZmlncygpIHtcbiAgICAvLyBSZS1hc3NpZ24gdGhlIGJ1dHRvbiBjb25maWd1cmF0aW9uIHRvIHRyaWdnZXIgY2hhbmdlIGRldGVjdGlvblxuICAgIHRoaXMucHJldmlvdXNCdXR0b25Db25maWcgPSB7XG4gICAgICAuLi50aGlzLnByZXZpb3VzQnV0dG9uQ29uZmlnLFxuICAgICAgaXNEaXNhYmxlZDogdGhpcy5zZWxlY3RlZFBhZ2UgPD0gMVxuICAgIH07XG4gICAgdGhpcy5uZXh0QnV0dG9uQ29uZmlnID0ge1xuICAgICAgLi4udGhpcy5uZXh0QnV0dG9uQ29uZmlnLFxuICAgICAgaXNEaXNhYmxlZDogdGhpcy5zZWxlY3RlZFBhZ2UgPj0gdGhpcy5udW1iZXJPZlBhZ2VcbiAgICB9O1xuICB9XG5cbiAgLy8gTWV0aG9kIHRvIHJldHVybiBjb25maWcgZm9yIHBhZ2UgbnVtYmVyIGJ1dHRvbnNcbiAgZ2V0UGFnZUJ1dHRvbkNvbmZpZyhwYWdlOiBudW1iZXIpOiBJQnV0dG9uQ29uZmlnIHtcbiAgICByZXR1cm4ge1xuICAgICAgbGFiZWw6IHBhZ2UudG9TdHJpbmcoKSxcbiAgICAgIHR5cGU6IEJ1dHRvblR5cGUuYnV0dG9uLFxuICAgICAgaXNBY3RpdmU6IHBhZ2UgPT09IHRoaXMuc2VsZWN0ZWRQYWdlLCAvLyBTZXQgYWN0aXZlIHN0YXRlIGJhc2VkIG9uIHNlbGVjdGVkUGFnZVxuICAgICAgaXNEaXNhYmxlZDogZmFsc2UgLy8gUGFnZSBidXR0b25zIGFyZSBuZXZlciBkaXNhYmxlZFxuICAgIH07XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0YWJsZS1mb290ZXJcIj5cbiAgPGRpdiBjbGFzcz1cIm51bWJlci1vZi1wYWdlXCI+XG4gICAgPGFwcC1zZWxlY3Rpb24gW29wdGlvbnNdID0gXCJpdGVtc1BlclBhZ2VMaXN0XCJcbiAgICAgICAgICAgICAgICAgIFtzZWxlY3RlZFZhbHVlXT1cInRoaXMuaXRlbXNQZXJQYWdlXCJcbiAgICAgICAgICAgICAgICAgIChzZWxlY3RlZENoYW5nZSkgPSBcIm9uQ2hhbmdlTnVtYmVyT2ZQYWdlKCRldmVudClcIj5cbiAgICA8L2FwcC1zZWxlY3Rpb24+XG4gICAgPGFwcC1pbnB1dCBbY29uZmlnXT1cImlucHV0Q29uZmlnXCI+PC9hcHAtaW5wdXQ+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwicGFnaW5hdG9yXCI+XG4gICAgPGFwcC1idXR0b24gKGNsaWNrRXZlbnQpPVwic2VsZWN0UGFnZShzZWxlY3RlZFBhZ2UgLSAxKVwiXG4gICAgICAgICAgICAgICAgW2NvbmZpZ109XCJwcmV2aW91c0J1dHRvbkNvbmZpZ1wiLz5cblxuICAgIDwhLS0gUGFnZSBOdW1iZXJzIC0tPlxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHBhZ2Ugb2YgcGFnZU51bWJlcnNcIj5cbiAgICAgIDxhcHAtYnV0dG9uXG4gICAgICAgIChjbGlja0V2ZW50KT1cInNlbGVjdFBhZ2UocGFnZSlcIlxuICAgICAgICBbY29uZmlnXT1cImdldFBhZ2VCdXR0b25Db25maWcocGFnZSlcIj5cbiAgICAgIDwvYXBwLWJ1dHRvbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDwhLS0gTmV4dCBCdXR0b24gLS0+XG4gICAgPGFwcC1idXR0b24gKGNsaWNrRXZlbnQpPVwic2VsZWN0UGFnZShzZWxlY3RlZFBhZ2UgKyAxKVwiXG4gICAgICAgICAgICAgICAgW2NvbmZpZ109XCJuZXh0QnV0dG9uQ29uZmlnXCIvPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { TableModule } from 'primeng/table';
|
|
4
|
+
import { LoadingComponent } from '../../atoms/loading/loading.component';
|
|
5
|
+
import { PaginatorComponent } from '../paginator/paginator.component';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
import * as i2 from "primeng/table";
|
|
9
|
+
import * as i3 from "primeng/api";
|
|
10
|
+
class TableComponent {
|
|
11
|
+
constructor(cdRef) {
|
|
12
|
+
this.cdRef = cdRef;
|
|
13
|
+
this.items = [];
|
|
14
|
+
this.columns = [];
|
|
15
|
+
this.totalRecords = 0;
|
|
16
|
+
this.tableName = '';
|
|
17
|
+
this.paginator = new EventEmitter();
|
|
18
|
+
this.allSelected = false;
|
|
19
|
+
}
|
|
20
|
+
ngOnInit() {
|
|
21
|
+
this.loadingState.subscribe(() => {
|
|
22
|
+
this.cdRef.detectChanges(); // Explicitly mark for change detection
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
changePaginator(paging) {
|
|
26
|
+
this.paginator.emit(paging);
|
|
27
|
+
}
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { items: "items", columns: "columns", totalRecords: "totalRecords", tableName: "tableName", loadingState: "loadingState" }, outputs: { paginator: "paginator" }, queries: [{ propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"container-xl table-wrapper\">\n <div class=\"table-title\">\n <h2><b>{{tableName }}</b></h2>\n </div>\n <div class=\"loading-wrapper\">\n <ng-container *ngIf=\"!(loadingState | async); else loading; then table\">\n </ng-container>\n </div>\n <app-paginator [totalRecords] = \"totalRecords\" (paginator)=\"changePaginator($event)\"></app-paginator>\n</div>\n\n<ng-template #loading>\n <div class=\"loading-wrapper\">\n <app-loading></app-loading>\n </div>\n</ng-template>\n\n<ng-template #table>\n <ng-container *ngIf=\"totalRecords == 0; then emptyContent; else tableContent\">\n </ng-container>\n</ng-template>\n\n<ng-template #tableContent>\n <p-table [value]=\"items\" class=\"table table-striped table-hover\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th>\n <ng-content select=\"[selectAllCheckbox]\"></ng-content>\n </th>\n <ng-container *ngFor=\" let col of columns\">\n <th>{{col.name }}</th>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-item>\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n </ng-template>\n </p-table>\n</ng-template>\n\n<ng-template #emptyContent>\n <div class=\"no-record-message\">\n <div>No records</div>\n </div>\n</ng-template>\n", styles: [":host{width:100%}body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-responsive{margin:30px 0}.table-wrapper{background:#fff;border-radius:3px;min-width:1000px;box-shadow:0 1px 1px #0000000d}.table-title{background:#435d7d;color:#fff;border-radius:3px 3px 0 0;padding:0 12px;display:flex}.table-title .table-name{width:70%}.table-title .table-add{width:30%;display:flex;align-items:center;justify-content:flex-end}.table-title .table-add a{cursor:pointer}.table-title h2{font-size:24px}.table-title .btn-group{float:right}.table-title .btn{color:#fff;float:right;font-size:13px;min-width:50px;border-radius:2px;border:none;outline:none!important;margin-left:10px}.table-title .btn i{float:left;font-size:21px;margin-right:5px}.table-title .btn span{float:left;margin-top:2px}::ng-deep .table tr th,::ng-deep .table tr td{border-color:#e9e9e9;padding:12px 15px;vertical-align:middle}::ng-deep .table tr th:first-child{width:60px;display:flex}::ng-deep .table tr th:last-child{width:150px}table.table-striped tbody tr:nth-of-type(odd){background-color:#fcfcfc}table.table-striped.table-hover tbody tr:hover{background:#f5f5f5}::ng-deep .table th{text-align:left}::ng-deep .table th i{font-size:13px;margin:0 5px;cursor:pointer}::ng-deep .table td:last-child i{opacity:.9;font-size:22px;margin:0 5px}::ng-deep .table td a{font-weight:700;color:#566787;display:inline-block;text-decoration:none;outline:none!important}.hint-text{float:left;margin-top:10px;font-size:13px}.no-record-message{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.excel{display:flex}.excel a{display:inline-flex;align-items:center}.loading-wrapper{height:calc(100vh - 220px);display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.loading-wrapper::-webkit-scrollbar{width:12px}.loading-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;box-shadow:inset 0 0 5px #0000001a}.loading-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f1f1f1;-webkit-transition:background .3s;transition:background .3s}.loading-wrapper::-webkit-scrollbar-thumb:hover{background:#555}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: LoadingComponent, selector: "app-loading", inputs: ["size", "imageSrc"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["totalRecords"], outputs: ["paginator"] }] }); }
|
|
30
|
+
}
|
|
31
|
+
export { TableComponent };
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
|
|
33
|
+
type: Component,
|
|
34
|
+
args: [{ selector: 'app-table', standalone: true, imports: [CommonModule, TableModule, LoadingComponent, PaginatorComponent], template: "<div class=\"container-xl table-wrapper\">\n <div class=\"table-title\">\n <h2><b>{{tableName }}</b></h2>\n </div>\n <div class=\"loading-wrapper\">\n <ng-container *ngIf=\"!(loadingState | async); else loading; then table\">\n </ng-container>\n </div>\n <app-paginator [totalRecords] = \"totalRecords\" (paginator)=\"changePaginator($event)\"></app-paginator>\n</div>\n\n<ng-template #loading>\n <div class=\"loading-wrapper\">\n <app-loading></app-loading>\n </div>\n</ng-template>\n\n<ng-template #table>\n <ng-container *ngIf=\"totalRecords == 0; then emptyContent; else tableContent\">\n </ng-container>\n</ng-template>\n\n<ng-template #tableContent>\n <p-table [value]=\"items\" class=\"table table-striped table-hover\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th>\n <ng-content select=\"[selectAllCheckbox]\"></ng-content>\n </th>\n <ng-container *ngFor=\" let col of columns\">\n <th>{{col.name }}</th>\n </ng-container>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-item>\n <ng-container [ngTemplateOutlet]=\"bodyTemplate\" [ngTemplateOutletContext]=\"{item:item}\"></ng-container>\n </ng-template>\n </p-table>\n</ng-template>\n\n<ng-template #emptyContent>\n <div class=\"no-record-message\">\n <div>No records</div>\n </div>\n</ng-template>\n", styles: [":host{width:100%}body{color:#566787;background:#f5f5f5;font-family:Varela Round,sans-serif;font-size:13px}.table-responsive{margin:30px 0}.table-wrapper{background:#fff;border-radius:3px;min-width:1000px;box-shadow:0 1px 1px #0000000d}.table-title{background:#435d7d;color:#fff;border-radius:3px 3px 0 0;padding:0 12px;display:flex}.table-title .table-name{width:70%}.table-title .table-add{width:30%;display:flex;align-items:center;justify-content:flex-end}.table-title .table-add a{cursor:pointer}.table-title h2{font-size:24px}.table-title .btn-group{float:right}.table-title .btn{color:#fff;float:right;font-size:13px;min-width:50px;border-radius:2px;border:none;outline:none!important;margin-left:10px}.table-title .btn i{float:left;font-size:21px;margin-right:5px}.table-title .btn span{float:left;margin-top:2px}::ng-deep .table tr th,::ng-deep .table tr td{border-color:#e9e9e9;padding:12px 15px;vertical-align:middle}::ng-deep .table tr th:first-child{width:60px;display:flex}::ng-deep .table tr th:last-child{width:150px}table.table-striped tbody tr:nth-of-type(odd){background-color:#fcfcfc}table.table-striped.table-hover tbody tr:hover{background:#f5f5f5}::ng-deep .table th{text-align:left}::ng-deep .table th i{font-size:13px;margin:0 5px;cursor:pointer}::ng-deep .table td:last-child i{opacity:.9;font-size:22px;margin:0 5px}::ng-deep .table td a{font-weight:700;color:#566787;display:inline-block;text-decoration:none;outline:none!important}.hint-text{float:left;margin-top:10px;font-size:13px}.no-record-message{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.excel{display:flex}.excel a{display:inline-flex;align-items:center}.loading-wrapper{height:calc(100vh - 220px);display:flex;flex-direction:column;width:100%;overflow-y:auto;overflow-x:hidden}.loading-wrapper::-webkit-scrollbar{width:12px}.loading-wrapper::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;box-shadow:inset 0 0 5px #0000001a}.loading-wrapper::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f1f1f1;-webkit-transition:background .3s;transition:background .3s}.loading-wrapper::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
|
|
35
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
|
|
36
|
+
type: Input
|
|
37
|
+
}], columns: [{
|
|
38
|
+
type: Input
|
|
39
|
+
}], totalRecords: [{
|
|
40
|
+
type: Input
|
|
41
|
+
}], tableName: [{
|
|
42
|
+
type: Input
|
|
43
|
+
}], loadingState: [{
|
|
44
|
+
type: Input
|
|
45
|
+
}], paginator: [{
|
|
46
|
+
type: Output
|
|
47
|
+
}], bodyTemplate: [{
|
|
48
|
+
type: ContentChild,
|
|
49
|
+
args: ['bodyTemplate']
|
|
50
|
+
}] } });
|
|
51
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvbW9sZWN1bGVzL3RhYmxlL3RhYmxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy90YWJsZS90YWJsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQWUsTUFBTSxlQUFlLENBQUM7QUFHN0gsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDekUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7O0FBRXRFLE1BT2EsY0FBYztJQWF6QixZQUFvQixLQUF3QjtRQUF4QixVQUFLLEdBQUwsS0FBSyxDQUFtQjtRQVpuQyxVQUFLLEdBQVEsRUFBRSxDQUFDO1FBQ2hCLFlBQU8sR0FBd0IsRUFBRSxDQUFDO1FBQ2xDLGlCQUFZLEdBQVcsQ0FBQyxDQUFDO1FBQ3pCLGNBQVMsR0FBVyxFQUFFLENBQUM7UUFHdEIsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUE7UUFJcEQsZ0JBQVcsR0FBRyxLQUFLLENBQUM7SUFFNEIsQ0FBQztJQUVqRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQy9CLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBRSx1Q0FBdUM7UUFDdEUsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZUFBZSxDQUFDLE1BQWtCO1FBQ2hDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzlCLENBQUM7K0dBdkJVLGNBQWM7bUdBQWQsY0FBYyx3VkNmM0IsdzJDQTZDQSw2dEVEaENZLFlBQVksMmRBQUUsV0FBVywyaUVBQUUsZ0JBQWdCLHNGQUFFLGtCQUFrQjs7U0FFOUQsY0FBYzs0RkFBZCxjQUFjO2tCQVAxQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBR1AsQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLGdCQUFnQixFQUFFLGtCQUFrQixDQUFDO3dHQUdqRSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVJLFNBQVM7c0JBQWxCLE1BQU07Z0JBRXVCLFlBQVk7c0JBQXpDLFlBQVk7dUJBQUMsY0FBYyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBJRGF0YUNvbHVtbkNvbmZpZywgSVBhZ2luYXRvciB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9pbnRlcmZhY2VzL2ludGVyZmFjZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVGFibGVNb2R1bGV9IGZyb20gJ3ByaW1lbmcvdGFibGUnO1xuaW1wb3J0IHsgTG9hZGluZ0NvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL2xvYWRpbmcvbG9hZGluZy5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGFnaW5hdG9yQ29tcG9uZW50IH0gZnJvbSAnLi4vcGFnaW5hdG9yL3BhZ2luYXRvci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtdGFibGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFibGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWJsZS5jb21wb25lbnQuc2NzcyddLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBUYWJsZU1vZHVsZSwgTG9hZGluZ0NvbXBvbmVudCwgUGFnaW5hdG9yQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZUNvbXBvbmVudDxUPiBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGl0ZW1zOiBUW10gPSBbXTtcbiAgQElucHV0KCkgY29sdW1uczogSURhdGFDb2x1bW5Db25maWdbXSA9IFtdO1xuICBASW5wdXQoKSB0b3RhbFJlY29yZHM6IG51bWJlciA9IDA7XG4gIEBJbnB1dCgpIHRhYmxlTmFtZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGxvYWRpbmdTdGF0ZSE6IE9ic2VydmFibGU8Ym9vbGVhbj47XG5cbiAgQE91dHB1dCgpIHBhZ2luYXRvciA9IG5ldyBFdmVudEVtaXR0ZXI8SVBhZ2luYXRvcj4oKVxuXG4gIEBDb250ZW50Q2hpbGQoJ2JvZHlUZW1wbGF0ZScpIGJvZHlUZW1wbGF0ZSE6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgYWxsU2VsZWN0ZWQgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5sb2FkaW5nU3RhdGUuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgIHRoaXMuY2RSZWYuZGV0ZWN0Q2hhbmdlcygpOyAgLy8gRXhwbGljaXRseSBtYXJrIGZvciBjaGFuZ2UgZGV0ZWN0aW9uXG4gICAgfSk7XG4gIH1cblxuICBjaGFuZ2VQYWdpbmF0b3IocGFnaW5nOiBJUGFnaW5hdG9yKSB7XG4gICAgdGhpcy5wYWdpbmF0b3IuZW1pdChwYWdpbmcpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyLXhsIHRhYmxlLXdyYXBwZXJcIj5cbiAgPGRpdiBjbGFzcz1cInRhYmxlLXRpdGxlXCI+XG4gICAgICA8aDI+PGI+e3t0YWJsZU5hbWUgfX08L2I+PC9oMj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJsb2FkaW5nLXdyYXBwZXJcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIShsb2FkaW5nU3RhdGUgfCBhc3luYyk7IGVsc2UgbG9hZGluZzsgdGhlbiB0YWJsZVwiPlxuICAgIDwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbiAgPGFwcC1wYWdpbmF0b3IgW3RvdGFsUmVjb3Jkc10gPSBcInRvdGFsUmVjb3Jkc1wiIChwYWdpbmF0b3IpPVwiY2hhbmdlUGFnaW5hdG9yKCRldmVudClcIj48L2FwcC1wYWdpbmF0b3I+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNsb2FkaW5nPlxuICA8ZGl2IGNsYXNzPVwibG9hZGluZy13cmFwcGVyXCI+XG4gICAgPGFwcC1sb2FkaW5nPjwvYXBwLWxvYWRpbmc+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICN0YWJsZT5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRvdGFsUmVjb3JkcyA9PSAwOyB0aGVuIGVtcHR5Q29udGVudDsgZWxzZSB0YWJsZUNvbnRlbnRcIj5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI3RhYmxlQ29udGVudD5cbiAgPHAtdGFibGUgW3ZhbHVlXT1cIml0ZW1zXCIgY2xhc3M9XCJ0YWJsZSB0YWJsZS1zdHJpcGVkIHRhYmxlLWhvdmVyXCI+XG4gICAgPG5nLXRlbXBsYXRlIHBUZW1wbGF0ZT1cImhlYWRlclwiPlxuICAgICAgPHRyPlxuICAgICAgICA8dGg+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NlbGVjdEFsbENoZWNrYm94XVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC90aD5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCIgbGV0IGNvbCBvZiBjb2x1bW5zXCI+XG4gICAgICAgICAgPHRoPnt7Y29sLm5hbWUgfX08L3RoPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvdHI+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8bmctdGVtcGxhdGUgcFRlbXBsYXRlPVwiYm9keVwiIGxldC1pdGVtPlxuICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJib2R5VGVtcGxhdGVcIiBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwie2l0ZW06aXRlbX1cIj48L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L3AtdGFibGU+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2VtcHR5Q29udGVudD5cbiAgPGRpdiBjbGFzcz1cIm5vLXJlY29yZC1tZXNzYWdlXCI+XG4gICAgPGRpdj5ObyByZWNvcmRzPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
class FooterComponent {
|
|
4
|
+
constructor() { }
|
|
5
|
+
ngOnInit() {
|
|
6
|
+
}
|
|
7
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: "<footer class=\"footer\">\n <div class=\"footer-container\">\n <div class=\"footer-section\">\n <h3>About Us</h3>\n <p>We are a company dedicated to providing excellent services and products to our customers.</p>\n </div>\n\n <div class=\"footer-section\">\n <h3>Quick Links</h3>\n <ul>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">Services</a></li>\n <li><a href=\"#\">Contact</a></li>\n <li><a href=\"#\">Privacy Policy</a></li>\n </ul>\n </div>\n\n <div class=\"footer-section\">\n <h3>Follow Us</h3>\n <div class=\"social-icons\">\n <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\n <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\n <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\n <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"></i></a>\n </div>\n </div>\n </div>\n\n <div class=\"footer-bottom\">\n <p>© 2024 Your Company. All Rights Reserved.</p>\n </div>\n</footer>\n", styles: [".footer{background-color:#333;color:#fff;padding:20px 0;text-align:center;font-family:Roboto,sans-serif}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-section{flex:1;margin:15px;min-width:200px}.footer-section h3{margin-bottom:15px;font-size:18px}.footer-section p,.footer-section ul,.footer-section a{font-size:14px;color:#ccc;text-decoration:none}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section ul li a:hover{color:#fff}.social-icons{margin-top:10px}.social-icons a{display:inline-block;color:#ccc;margin:0 10px;font-size:20px}.social-icons a:hover{color:#fff}.footer-bottom{margin-top:20px;border-top:1px solid #444;padding-top:10px;font-size:12px}\n"] }); }
|
|
9
|
+
}
|
|
10
|
+
export { FooterComponent };
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, decorators: [{
|
|
12
|
+
type: Component,
|
|
13
|
+
args: [{ selector: 'app-footer', standalone: true, template: "<footer class=\"footer\">\n <div class=\"footer-container\">\n <div class=\"footer-section\">\n <h3>About Us</h3>\n <p>We are a company dedicated to providing excellent services and products to our customers.</p>\n </div>\n\n <div class=\"footer-section\">\n <h3>Quick Links</h3>\n <ul>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">Services</a></li>\n <li><a href=\"#\">Contact</a></li>\n <li><a href=\"#\">Privacy Policy</a></li>\n </ul>\n </div>\n\n <div class=\"footer-section\">\n <h3>Follow Us</h3>\n <div class=\"social-icons\">\n <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"></i></a>\n <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"></i></a>\n <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"></i></a>\n <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"></i></a>\n </div>\n </div>\n </div>\n\n <div class=\"footer-bottom\">\n <p>© 2024 Your Company. All Rights Reserved.</p>\n </div>\n</footer>\n", styles: [".footer{background-color:#333;color:#fff;padding:20px 0;text-align:center;font-family:Roboto,sans-serif}.footer-container{display:flex;justify-content:space-around;flex-wrap:wrap;max-width:1200px;margin:0 auto}.footer-section{flex:1;margin:15px;min-width:200px}.footer-section h3{margin-bottom:15px;font-size:18px}.footer-section p,.footer-section ul,.footer-section a{font-size:14px;color:#ccc;text-decoration:none}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin:5px 0}.footer-section ul li a:hover{color:#fff}.social-icons{margin-top:10px}.social-icons a{display:inline-block;color:#ccc;margin:0 10px;font-size:20px}.social-icons a:hover{color:#fff}.footer-bottom{margin-top:20px;border-top:1px solid #444;padding-top:10px;font-size:12px}\n"] }]
|
|
14
|
+
}], ctorParameters: function () { return []; } });
|
|
15
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9vdGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL3BhZ2VzL2Zvb3Rlci9mb290ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvcGFnZXMvZm9vdGVyL2Zvb3Rlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDOztBQUVsRCxNQU1hLGVBQWU7SUFFMUIsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7K0dBTFUsZUFBZTttR0FBZixlQUFlLHNFQ1I1QixrbUNBZ0NBOztTRHhCYSxlQUFlOzRGQUFmLGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtZm9vdGVyJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Zvb3Rlci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvb3Rlci5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEZvb3RlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG59XG4iLCI8Zm9vdGVyIGNsYXNzPVwiZm9vdGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJmb290ZXItY29udGFpbmVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImZvb3Rlci1zZWN0aW9uXCI+XG4gICAgICA8aDM+QWJvdXQgVXM8L2gzPlxuICAgICAgPHA+V2UgYXJlIGEgY29tcGFueSBkZWRpY2F0ZWQgdG8gcHJvdmlkaW5nIGV4Y2VsbGVudCBzZXJ2aWNlcyBhbmQgcHJvZHVjdHMgdG8gb3VyIGN1c3RvbWVycy48L3A+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZm9vdGVyLXNlY3Rpb25cIj5cbiAgICAgIDxoMz5RdWljayBMaW5rczwvaDM+XG4gICAgICA8dWw+XG4gICAgICAgIDxsaT48YSBocmVmPVwiI1wiPkhvbWU8L2E+PC9saT5cbiAgICAgICAgPGxpPjxhIGhyZWY9XCIjXCI+U2VydmljZXM8L2E+PC9saT5cbiAgICAgICAgPGxpPjxhIGhyZWY9XCIjXCI+Q29udGFjdDwvYT48L2xpPlxuICAgICAgICA8bGk+PGEgaHJlZj1cIiNcIj5Qcml2YWN5IFBvbGljeTwvYT48L2xpPlxuICAgICAgPC91bD5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJmb290ZXItc2VjdGlvblwiPlxuICAgICAgPGgzPkZvbGxvdyBVczwvaDM+XG4gICAgICA8ZGl2IGNsYXNzPVwic29jaWFsLWljb25zXCI+XG4gICAgICAgIDxhIGhyZWY9XCIjXCIgYXJpYS1sYWJlbD1cIkZhY2Vib29rXCI+PGkgY2xhc3M9XCJmYWIgZmEtZmFjZWJvb2stZlwiPjwvaT48L2E+XG4gICAgICAgIDxhIGhyZWY9XCIjXCIgYXJpYS1sYWJlbD1cIlR3aXR0ZXJcIj48aSBjbGFzcz1cImZhYiBmYS10d2l0dGVyXCI+PC9pPjwvYT5cbiAgICAgICAgPGEgaHJlZj1cIiNcIiBhcmlhLWxhYmVsPVwiSW5zdGFncmFtXCI+PGkgY2xhc3M9XCJmYWIgZmEtaW5zdGFncmFtXCI+PC9pPjwvYT5cbiAgICAgICAgPGEgaHJlZj1cIiNcIiBhcmlhLWxhYmVsPVwiTGlua2VkSW5cIj48aSBjbGFzcz1cImZhYiBmYS1saW5rZWRpbi1pblwiPjwvaT48L2E+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiBjbGFzcz1cImZvb3Rlci1ib3R0b21cIj5cbiAgICA8cD4mY29weTsgMjAyNCBZb3VyIENvbXBhbnkuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPlxuICA8L2Rpdj5cbjwvZm9vdGVyPlxuIl19
|