angular-dumb-lib 0.0.8 → 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/lib/angular-dumb-lib.module.mjs +4 -14
- package/esm2022/lib/components/atoms/button/button.component.mjs +3 -3
- 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 +3 -3
- 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/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 +1 -1
- package/esm2022/lib/shared/interfaces/interface.mjs +1 -1
- package/esm2022/public-api.mjs +16 -1
- package/fesm2022/angular-dumb-lib.mjs +690 -18
- package/fesm2022/angular-dumb-lib.mjs.map +1 -1
- package/lib/angular-dumb-lib.module.d.ts +1 -3
- 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/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/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/package.json +1 -1
- package/public-api.d.ts +15 -0
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { NgModule } from '@angular/core';
|
|
2
2
|
import { AngularDumbLibComponent } from './angular-dumb-lib.component';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
3
|
import * as i0 from "@angular/core";
|
|
6
4
|
class AngularDumbLibModule {
|
|
7
5
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, declarations: [AngularDumbLibComponent],
|
|
9
|
-
|
|
10
|
-
ReactiveFormsModule], exports: [AngularDumbLibComponent] }); }
|
|
11
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, imports: [CommonModule,
|
|
12
|
-
FormsModule,
|
|
13
|
-
ReactiveFormsModule] }); }
|
|
6
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, declarations: [AngularDumbLibComponent], exports: [AngularDumbLibComponent] }); }
|
|
7
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule }); }
|
|
14
8
|
}
|
|
15
9
|
export { AngularDumbLibModule };
|
|
16
10
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AngularDumbLibModule, decorators: [{
|
|
@@ -19,14 +13,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
19
13
|
declarations: [
|
|
20
14
|
AngularDumbLibComponent,
|
|
21
15
|
],
|
|
22
|
-
imports: [
|
|
23
|
-
CommonModule,
|
|
24
|
-
FormsModule,
|
|
25
|
-
ReactiveFormsModule,
|
|
26
|
-
],
|
|
16
|
+
imports: [],
|
|
27
17
|
exports: [
|
|
28
18
|
AngularDumbLibComponent,
|
|
29
19
|
]
|
|
30
20
|
}]
|
|
31
21
|
}] });
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1kdW1iLWxpYi5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWR1bWItbGliL3NyYy9saWIvYW5ndWxhci1kdW1iLWxpYi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7QUFFdkUsTUFVYSxvQkFBb0I7K0dBQXBCLG9CQUFvQjtnSEFBcEIsb0JBQW9CLGlCQVI3Qix1QkFBdUIsYUFLdkIsdUJBQXVCO2dIQUdkLG9CQUFvQjs7U0FBcEIsb0JBQW9COzRGQUFwQixvQkFBb0I7a0JBVmhDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLHVCQUF1QjtxQkFDeEI7b0JBQ0QsT0FBTyxFQUFFLEVBQ1I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHVCQUF1QjtxQkFDeEI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQW5ndWxhckR1bWJMaWJDb21wb25lbnQgfSBmcm9tICcuL2FuZ3VsYXItZHVtYi1saWIuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQW5ndWxhckR1bWJMaWJDb21wb25lbnQsXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIEFuZ3VsYXJEdW1iTGliQ29tcG9uZW50LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEFuZ3VsYXJEdW1iTGliTW9kdWxlIHsgfVxuIl19
|
|
@@ -20,15 +20,15 @@ class ButtonComponent {
|
|
|
20
20
|
this.clickEvent.emit();
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\n type=\"{{config.type}}\"\n class=\"btn btn-primary\"\n [disabled]=\"config.isDisabled\"\n [ngClass]=\"{'active': config.isActive,\n 'normal': config.designType === 'normal',\n 'contrast': config.designType === 'contrast'}\"\n (click)=\"onButtonClick()\">\n <div class=\"button-content\">\n <ng-container *ngIf=\"config.iconValue\">\n <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\n </ng-container>\n <span>{{ config.label }}</span>\n </div>\n</button>\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:.25rem;cursor:pointer;height:3rem}button.btn.btn-primary .button-content{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%}button.btn.btn-primary:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important;border-color:#666!important}button.btn.btn-primary.normal{background-color:#007bff;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#0056d2}button.btn.btn-primary.contrast{color:#007bff;border:1px solid #4A90E2}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#e6f0fa;color:#1a1a1a}button.btn.btn-primary.active{background-color:#003d99;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#0056d2;color:#fff}\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"] }] }); }
|
|
24
24
|
}
|
|
25
25
|
export { ButtonComponent };
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
|
-
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\
|
|
28
|
+
args: [{ selector: 'app-button', standalone: true, imports: [CommonModule], template: "<button\n type=\"{{config.type}}\"\n class=\"btn btn-primary\"\n [disabled]=\"config.isDisabled\"\n [ngClass]=\"{'active': config.isActive,\n 'normal': config.designType === 'normal',\n 'contrast': config.designType === 'contrast'}\"\n (click)=\"onButtonClick()\">\n <div class=\"button-content\">\n <ng-container *ngIf=\"config.iconValue\">\n <i class=\"material-icons\" data-toggle=\"tooltip\" title=\"Delete\">{{config.iconValue}}</i>\n </ng-container>\n <span>{{ config.label }}</span>\n </div>\n</button>\n", styles: ["button.btn.btn-primary{padding:.5rem 1rem;border:none;border-radius:.25rem;cursor:pointer;height:3rem}button.btn.btn-primary .button-content{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%}button.btn.btn-primary:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important;border-color:#666!important}button.btn.btn-primary.normal{background-color:#007bff;color:#fff}button.btn.btn-primary.normal:hover:not(:disabled){background-color:#0056d2}button.btn.btn-primary.contrast{color:#007bff;border:1px solid #4A90E2}button.btn.btn-primary.contrast:hover:not(:disabled){background-color:#e6f0fa;color:#1a1a1a}button.btn.btn-primary.active{background-color:#003d99;color:#fff}button.btn.btn-primary.active:hover:not(:disabled){background-color:#0056d2;color:#fff}\n"] }]
|
|
29
29
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
30
30
|
type: Input
|
|
31
31
|
}], clickEvent: [{
|
|
32
32
|
type: Output
|
|
33
33
|
}] } });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFFcEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFFL0MsTUFPYSxlQUFlO0lBSzFCO1FBRlUsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFFaEMsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sR0FBRztZQUNaLFVBQVUsRUFBRSxLQUFLO1lBQ2pCLFFBQVEsRUFBRSxLQUFLO1lBQ2YsVUFBVSxFQUFFLFVBQVUsQ0FBQyxNQUFNO1lBQzdCLElBQUksRUFBRSxVQUFVLENBQUMsTUFBTTtZQUN2QixHQUFHLElBQUksQ0FBQyxNQUFNO1NBQ2YsQ0FBQTtJQUNILENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN6QixDQUFDOytHQW5CVSxlQUFlO21HQUFmLGVBQWUsMklDWjVCLGtqQkFlQSxzM0JETFksWUFBWTs7U0FFWCxlQUFlOzRGQUFmLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FHUCxDQUFDLFlBQVksQ0FBQzswRUFHZCxNQUFNO3NCQUFkLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJ1dHRvblR5cGUsIERlc2lnblR5cGUgfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvZW51bXMvZW51bSc7XG5pbXBvcnQgeyBJQnV0dG9uQ29uZmlnIH0gZnJvbSAnLi4vLi4vLi4vc2hhcmVkL2ludGVyZmFjZXMvaW50ZXJmYWNlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1idXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGNvbmZpZyE6IElCdXR0b25Db25maWc7XG5cbiAgQE91dHB1dCgpIGNsaWNrRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbmZpZyA9IHtcbiAgICAgIGlzRGlzYWJsZWQ6IGZhbHNlLFxuICAgICAgaXNBY3RpdmU6IGZhbHNlLFxuICAgICAgZGVzaWduVHlwZTogRGVzaWduVHlwZS5ub3JtYWwsXG4gICAgICB0eXBlOiBCdXR0b25UeXBlLnN1Ym1pdCxcbiAgICAgIC4uLnRoaXMuY29uZmlnLFxuICAgIH1cbiAgfVxuXG4gIG9uQnV0dG9uQ2xpY2soKSB7XG4gICAgdGhpcy5jbGlja0V2ZW50LmVtaXQoKTtcbiAgfVxufVxuIiwiPGJ1dHRvblxuICB0eXBlPVwie3tjb25maWcudHlwZX19XCJcbiAgY2xhc3M9XCJidG4gYnRuLXByaW1hcnlcIlxuICBbZGlzYWJsZWRdPVwiY29uZmlnLmlzRGlzYWJsZWRcIlxuICBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IGNvbmZpZy5pc0FjdGl2ZSxcbiAgICAgICAgICAgICdub3JtYWwnOiBjb25maWcuZGVzaWduVHlwZSA9PT0gJ25vcm1hbCcsXG4gICAgICAgICAgICAnY29udHJhc3QnOiBjb25maWcuZGVzaWduVHlwZSA9PT0gJ2NvbnRyYXN0J31cIlxuICAoY2xpY2spPVwib25CdXR0b25DbGljaygpXCI+XG4gICAgPGRpdiBjbGFzcz1cImJ1dHRvbi1jb250ZW50XCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29uZmlnLmljb25WYWx1ZVwiPlxuICAgICAgPGkgY2xhc3M9XCJtYXRlcmlhbC1pY29uc1wiIGRhdGEtdG9nZ2xlPVwidG9vbHRpcFwiIHRpdGxlPVwiRGVsZXRlXCI+e3tjb25maWcuaWNvblZhbHVlfX08L2k+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPHNwYW4+e3sgY29uZmlnLmxhYmVsIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuPC9idXR0b24+XG4iXX0=
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Component, forwardRef } from '@angular/core';
|
|
2
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/forms";
|
|
5
|
+
class DatetimePickerComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.selectedDate = null;
|
|
8
|
+
this.selectedTime = null;
|
|
9
|
+
this.onChange = () => { };
|
|
10
|
+
this.onTouched = () => { };
|
|
11
|
+
}
|
|
12
|
+
writeValue(value) {
|
|
13
|
+
if (value) {
|
|
14
|
+
const date = new Date(value);
|
|
15
|
+
this.selectedDate = date.toISOString().split('T')[0]; // Extract the date part (YYYY-MM-DD)
|
|
16
|
+
this.selectedTime = date.toTimeString().split(' ')[0]; // Extract the time part (HH:mm:ss)
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
registerOnChange(fn) {
|
|
20
|
+
this.onChange = fn;
|
|
21
|
+
}
|
|
22
|
+
registerOnTouched(fn) {
|
|
23
|
+
this.onTouched = fn;
|
|
24
|
+
}
|
|
25
|
+
setDisabledState(isDisabled) {
|
|
26
|
+
// Handle disabled state
|
|
27
|
+
}
|
|
28
|
+
onDateChange(event) {
|
|
29
|
+
this.selectedDate = event.target.value;
|
|
30
|
+
this.emitChange();
|
|
31
|
+
}
|
|
32
|
+
onTimeChange(event) {
|
|
33
|
+
this.selectedTime = event.target.value;
|
|
34
|
+
this.emitChange();
|
|
35
|
+
}
|
|
36
|
+
emitChange() {
|
|
37
|
+
if (this.selectedDate && this.selectedTime) {
|
|
38
|
+
const dateTime = `${this.selectedDate}T${this.selectedTime}`;
|
|
39
|
+
this.onChange(new Date(dateTime));
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatetimePickerComponent, isStandalone: true, selector: "app-datetime-picker", providers: [{
|
|
44
|
+
provide: NG_VALUE_ACCESSOR,
|
|
45
|
+
useExisting: forwardRef(() => DatetimePickerComponent),
|
|
46
|
+
multi: true
|
|
47
|
+
}], ngImport: i0, template: "<div class=\"datetime-picker-container\">\n <label for=\"date\">Datetime:</label>\n <div class=\"inputs-container\">\n <input id=\"date\" type=\"date\" [(ngModel)]=\"selectedDate\" (ngModelChange)=\"onDateChange($event)\" (blur)=\"onTouched()\">\n <input id=\"time\" type=\"time\" [(ngModel)]=\"selectedTime\" (ngModelChange)=\"onTimeChange($event)\" (blur)=\"onTouched()\">\n </div>\n</div>\n", styles: [".datetime-picker-container{display:flex;flex-direction:column;margin-bottom:1rem}.datetime-picker-container label{margin-bottom:.5rem;font-weight:700}.inputs-container{display:flex;gap:1rem}.inputs-container input[type=date],.inputs-container input[type=time]{padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;width:150px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
48
|
+
}
|
|
49
|
+
export { DatetimePickerComponent };
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatetimePickerComponent, decorators: [{
|
|
51
|
+
type: Component,
|
|
52
|
+
args: [{ selector: 'app-datetime-picker', standalone: true, providers: [{
|
|
53
|
+
provide: NG_VALUE_ACCESSOR,
|
|
54
|
+
useExisting: forwardRef(() => DatetimePickerComponent),
|
|
55
|
+
multi: true
|
|
56
|
+
}], imports: [FormsModule], template: "<div class=\"datetime-picker-container\">\n <label for=\"date\">Datetime:</label>\n <div class=\"inputs-container\">\n <input id=\"date\" type=\"date\" [(ngModel)]=\"selectedDate\" (ngModelChange)=\"onDateChange($event)\" (blur)=\"onTouched()\">\n <input id=\"time\" type=\"time\" [(ngModel)]=\"selectedTime\" (ngModelChange)=\"onTimeChange($event)\" (blur)=\"onTouched()\">\n </div>\n</div>\n", styles: [".datetime-picker-container{display:flex;flex-direction:column;margin-bottom:1rem}.datetime-picker-container label{margin-bottom:.5rem;font-weight:700}.inputs-container{display:flex;gap:1rem}.inputs-container input[type=date],.inputs-container input[type=time]{padding:.5rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;width:150px}\n"] }]
|
|
57
|
+
}] });
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZXRpbWUtcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2RhdGV0aW1lLXBpY2tlci9kYXRldGltZS1waWNrZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvZGF0ZXRpbWUtcGlja2VyL2RhdGV0aW1lLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0RCxPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFFdEYsTUFZYSx1QkFBdUI7SUFacEM7UUFhRSxpQkFBWSxHQUFrQixJQUFJLENBQUM7UUFDbkMsaUJBQVksR0FBa0IsSUFBSSxDQUFDO1FBRTVCLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsY0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztLQXNDbEM7SUFwQ0MsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxLQUFLLEVBQUU7WUFDVCxNQUFNLElBQUksR0FBRyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM3QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxxQ0FBcUM7WUFDM0YsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsbUNBQW1DO1NBQzNGO0lBQ0gsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CO1FBQ25DLHdCQUF3QjtJQUMxQixDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUN2QyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFVO1FBQ3JCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDdkMsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFTyxVQUFVO1FBQ2hCLElBQUksSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQzFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDN0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1NBQ25DO0lBQ0gsQ0FBQzsrR0ExQ1UsdUJBQXVCO21HQUF2Qix1QkFBdUIsa0VBUHZCLENBQUM7Z0JBQ1YsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyx1QkFBdUIsQ0FBQztnQkFDdEQsS0FBSyxFQUFFLElBQUk7YUFDWixDQUFDLDBCQ1pKLG9aQU9BLGdaRE1ZLFdBQVc7O1NBRVYsdUJBQXVCOzRGQUF2Qix1QkFBdUI7a0JBWm5DLFNBQVM7K0JBQ0UscUJBQXFCLGNBQ25CLElBQUksYUFHTCxDQUFDOzRCQUNWLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHdCQUF3QixDQUFDOzRCQUN0RCxLQUFLLEVBQUUsSUFBSTt5QkFDWixDQUFDLFdBQ08sQ0FBQyxXQUFXLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBGb3Jtc01vZHVsZSwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1kYXRldGltZS1waWNrZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vZGF0ZXRpbWUtcGlja2VyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGF0ZXRpbWUtcGlja2VyLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW3tcbiAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBEYXRldGltZVBpY2tlckNvbXBvbmVudCksXG4gICAgbXVsdGk6IHRydWVcbiAgfV0sXG4gIGltcG9ydHM6IFtGb3Jtc01vZHVsZV1cbn0pXG5leHBvcnQgY2xhc3MgRGF0ZXRpbWVQaWNrZXJDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIHNlbGVjdGVkRGF0ZTogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIHNlbGVjdGVkVGltZTogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG5cbiAgcHVibGljIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcbiAgcHVibGljIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgaWYgKHZhbHVlKSB7XG4gICAgICBjb25zdCBkYXRlID0gbmV3IERhdGUodmFsdWUpO1xuICAgICAgdGhpcy5zZWxlY3RlZERhdGUgPSBkYXRlLnRvSVNPU3RyaW5nKCkuc3BsaXQoJ1QnKVswXTsgLy8gRXh0cmFjdCB0aGUgZGF0ZSBwYXJ0IChZWVlZLU1NLUREKVxuICAgICAgdGhpcy5zZWxlY3RlZFRpbWUgPSBkYXRlLnRvVGltZVN0cmluZygpLnNwbGl0KCcgJylbMF07IC8vIEV4dHJhY3QgdGhlIHRpbWUgcGFydCAoSEg6bW06c3MpXG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgLy8gSGFuZGxlIGRpc2FibGVkIHN0YXRlXG4gIH1cblxuICBvbkRhdGVDaGFuZ2UoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMuc2VsZWN0ZWREYXRlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgIHRoaXMuZW1pdENoYW5nZSgpO1xuICB9XG5cbiAgb25UaW1lQ2hhbmdlKGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLnNlbGVjdGVkVGltZSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcbiAgICB0aGlzLmVtaXRDaGFuZ2UoKTtcbiAgfVxuXG4gIHByaXZhdGUgZW1pdENoYW5nZSgpIHtcbiAgICBpZiAodGhpcy5zZWxlY3RlZERhdGUgJiYgdGhpcy5zZWxlY3RlZFRpbWUpIHtcbiAgICAgIGNvbnN0IGRhdGVUaW1lID0gYCR7dGhpcy5zZWxlY3RlZERhdGV9VCR7dGhpcy5zZWxlY3RlZFRpbWV9YDtcbiAgICAgIHRoaXMub25DaGFuZ2UobmV3IERhdGUoZGF0ZVRpbWUpKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJkYXRldGltZS1waWNrZXItY29udGFpbmVyXCI+XG4gIDxsYWJlbCBmb3I9XCJkYXRlXCI+RGF0ZXRpbWU6PC9sYWJlbD5cbiAgPGRpdiBjbGFzcz1cImlucHV0cy1jb250YWluZXJcIj5cbiAgICA8aW5wdXQgaWQ9XCJkYXRlXCIgdHlwZT1cImRhdGVcIiBbKG5nTW9kZWwpXT1cInNlbGVjdGVkRGF0ZVwiIChuZ01vZGVsQ2hhbmdlKT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCIgKGJsdXIpPVwib25Ub3VjaGVkKClcIj5cbiAgICA8aW5wdXQgaWQ9XCJ0aW1lXCIgdHlwZT1cInRpbWVcIiBbKG5nTW9kZWwpXT1cInNlbGVjdGVkVGltZVwiIChuZ01vZGVsQ2hhbmdlKT1cIm9uVGltZUNoYW5nZSgkZXZlbnQpXCIgKGJsdXIpPVwib25Ub3VjaGVkKClcIj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { Component, Input, forwardRef } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { ButtonType } from '../../../shared/enums/enum';
|
|
5
|
+
import { ButtonComponent } from '../button/button.component';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
class FileSelectionComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.imageUrl = null; // Allow imageUrl to be passed externally
|
|
11
|
+
this.fileName = null; // Allow fileName to be passed externally
|
|
12
|
+
this.onChange = () => { };
|
|
13
|
+
this.onTouched = () => { };
|
|
14
|
+
this._value = undefined;
|
|
15
|
+
}
|
|
16
|
+
get value() {
|
|
17
|
+
return this._value;
|
|
18
|
+
}
|
|
19
|
+
set value(value) {
|
|
20
|
+
this._value = value;
|
|
21
|
+
this.onChange(this._value);
|
|
22
|
+
this.onTouched();
|
|
23
|
+
}
|
|
24
|
+
ngOnInit() {
|
|
25
|
+
this.config = {
|
|
26
|
+
type: ButtonType.button,
|
|
27
|
+
label: this.chooseFileLabel
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
onFileSelected(event) {
|
|
31
|
+
const input = event.target;
|
|
32
|
+
if (input.files && input.files.length > 0) {
|
|
33
|
+
const file = input.files[0];
|
|
34
|
+
// Store the file name to display it in the UI
|
|
35
|
+
this.fileName = file.name;
|
|
36
|
+
this.value = file;
|
|
37
|
+
// Generate image preview URL if it's an image
|
|
38
|
+
const reader = new FileReader();
|
|
39
|
+
reader.onload = (e) => {
|
|
40
|
+
this.imageUrl = e.target.result; // Set image URL for preview
|
|
41
|
+
};
|
|
42
|
+
reader.readAsDataURL(file);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
triggerFileInput() {
|
|
46
|
+
const fileInput = document.getElementById('fileInput');
|
|
47
|
+
fileInput.click(); // Programmatically click the hidden file input
|
|
48
|
+
}
|
|
49
|
+
writeValue(value) {
|
|
50
|
+
this._value = value;
|
|
51
|
+
}
|
|
52
|
+
registerOnChange(fn) {
|
|
53
|
+
this.onChange = fn;
|
|
54
|
+
}
|
|
55
|
+
registerOnTouched(fn) {
|
|
56
|
+
this.onTouched = fn;
|
|
57
|
+
}
|
|
58
|
+
setDisabledState(isDisabled) {
|
|
59
|
+
// Implement if you need to handle disabled state
|
|
60
|
+
}
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileSelectionComponent, isStandalone: true, selector: "app-file-selection", inputs: { label: "label", chooseFileLabel: "chooseFileLabel", imageUrl: "imageUrl", fileName: "fileName" }, providers: [{
|
|
63
|
+
provide: NG_VALUE_ACCESSOR,
|
|
64
|
+
useExisting: forwardRef(() => FileSelectionComponent),
|
|
65
|
+
multi: true
|
|
66
|
+
}], ngImport: i0, template: "<div class=\"file-selector\">\n <label *ngIf=\"label\">{{ label }}</label>\n <input\n id=\"fileInput\"\n type=\"file\"\n (change)=\"onFileSelected($event)\"\n accept=\"image/*\"\n class=\"hidden-file-input\">\n <div class=\"file-selection\">\n <!-- Custom button to trigger file input -->\n <app-button [config]=\"config\"\n class=\"custom-file-button\"\n (clickEvent)=\"triggerFileInput()\">\n Select Image\n </app-button>\n <div *ngIf=\"fileName\" class=\"file-name\">\n {{ fileName }}\n </div>\n </div>\n\n <div *ngIf=\"imageUrl\">\n <img [src]=\"imageUrl\" alt=\"Selected Image\" class=\"preview-image\"/>\n </div>\n</div>\n", styles: [".file-selector{display:flex;flex-direction:column;align-items:flex-start}.file-selector label{font-size:14px;color:#666;margin-bottom:8px;font-weight:700}.file-selector input[type=file]{margin-bottom:16px}.file-selector .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.file-selector .hidden-file-input{opacity:0;position:absolute;z-index:-1}.file-selector .file-selection{display:flex;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["config"], outputs: ["clickEvent"] }] }); }
|
|
67
|
+
}
|
|
68
|
+
export { FileSelectionComponent };
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSelectionComponent, decorators: [{
|
|
70
|
+
type: Component,
|
|
71
|
+
args: [{ selector: 'app-file-selection', standalone: true, providers: [{
|
|
72
|
+
provide: NG_VALUE_ACCESSOR,
|
|
73
|
+
useExisting: forwardRef(() => FileSelectionComponent),
|
|
74
|
+
multi: true
|
|
75
|
+
}], imports: [CommonModule, ButtonComponent], template: "<div class=\"file-selector\">\n <label *ngIf=\"label\">{{ label }}</label>\n <input\n id=\"fileInput\"\n type=\"file\"\n (change)=\"onFileSelected($event)\"\n accept=\"image/*\"\n class=\"hidden-file-input\">\n <div class=\"file-selection\">\n <!-- Custom button to trigger file input -->\n <app-button [config]=\"config\"\n class=\"custom-file-button\"\n (clickEvent)=\"triggerFileInput()\">\n Select Image\n </app-button>\n <div *ngIf=\"fileName\" class=\"file-name\">\n {{ fileName }}\n </div>\n </div>\n\n <div *ngIf=\"imageUrl\">\n <img [src]=\"imageUrl\" alt=\"Selected Image\" class=\"preview-image\"/>\n </div>\n</div>\n", styles: [".file-selector{display:flex;flex-direction:column;align-items:flex-start}.file-selector label{font-size:14px;color:#666;margin-bottom:8px;font-weight:700}.file-selector input[type=file]{margin-bottom:16px}.file-selector .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.file-selector .hidden-file-input{opacity:0;position:absolute;z-index:-1}.file-selector .file-selection{display:flex;align-items:center;gap:10px}\n"] }]
|
|
76
|
+
}], propDecorators: { label: [{
|
|
77
|
+
type: Input
|
|
78
|
+
}], chooseFileLabel: [{
|
|
79
|
+
type: Input
|
|
80
|
+
}], imageUrl: [{
|
|
81
|
+
type: Input
|
|
82
|
+
}], fileName: [{
|
|
83
|
+
type: Input
|
|
84
|
+
}] } });
|
|
85
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1zZWxlY3Rpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvZmlsZS1zZWxlY3Rpb24vZmlsZS1zZWxlY3Rpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvZmlsZS1zZWxlY3Rpb24vZmlsZS1zZWxlY3Rpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNyRSxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7O0FBRzdELE1BWWEsc0JBQXNCO0lBWm5DO1FBZVcsYUFBUSxHQUFnQyxJQUFJLENBQUMsQ0FBRSx5Q0FBeUM7UUFDeEYsYUFBUSxHQUFrQixJQUFJLENBQUMsQ0FBRSx5Q0FBeUM7UUFJbkYsYUFBUSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUN6QixjQUFTLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ2xCLFdBQU0sR0FBUSxTQUFTLENBQUM7S0F3RGpDO0lBdERDLElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRUQsSUFBSSxLQUFLLENBQUMsS0FBVTtRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsTUFBTSxHQUFHO1lBQ1osSUFBSSxFQUFFLFVBQVUsQ0FBQyxNQUFNO1lBQ3ZCLEtBQUssRUFBRSxJQUFJLENBQUMsZUFBZTtTQUM1QixDQUFBO0lBQ0gsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFZO1FBQ3pCLE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxNQUEwQixDQUFDO1FBRS9DLElBQUksS0FBSyxDQUFDLEtBQUssSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDekMsTUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUU1Qiw4Q0FBOEM7WUFDOUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQzFCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO1lBRWxCLDhDQUE4QztZQUM5QyxNQUFNLE1BQU0sR0FBRyxJQUFJLFVBQVUsRUFBRSxDQUFDO1lBQ2hDLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFNLEVBQUUsRUFBRTtnQkFDekIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFFLDRCQUE0QjtZQUNoRSxDQUFDLENBQUM7WUFDRixNQUFNLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzVCO0lBQ0gsQ0FBQztJQUVELGdCQUFnQjtRQUNkLE1BQU0sU0FBUyxHQUFHLFFBQVEsQ0FBQyxjQUFjLENBQUMsV0FBVyxDQUFxQixDQUFDO1FBQzNFLFNBQVMsQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFFLCtDQUErQztJQUNyRSxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDdEIsQ0FBQztJQUNELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CO1FBQ25DLGlEQUFpRDtJQUNuRCxDQUFDOytHQWpFVSxzQkFBc0I7bUdBQXRCLHNCQUFzQiw2S0FQdEIsQ0FBQztnQkFDVixPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHNCQUFzQixDQUFDO2dCQUNyRCxLQUFLLEVBQUUsSUFBSTthQUNaLENBQUMsMEJDaEJKLG1xQkF3QkEsNmZEUFksWUFBWSxtSUFBRSxlQUFlOztTQUU1QixzQkFBc0I7NEZBQXRCLHNCQUFzQjtrQkFabEMsU0FBUzsrQkFDRSxvQkFBb0IsY0FDbEIsSUFBSSxhQUdMLENBQUM7NEJBQ1YsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsdUJBQXVCLENBQUM7NEJBQ3JELEtBQUssRUFBRSxJQUFJO3lCQUNaLENBQUMsV0FDTyxDQUFDLFlBQVksRUFBRSxlQUFlLENBQUM7OEJBRy9CLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tICcuLi8uLi8uLi9zaGFyZWQvZW51bXMvZW51bSc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJQnV0dG9uQ29uZmlnIH0gZnJvbSAnLi4vLi4vLi4vc2hhcmVkL2ludGVyZmFjZXMvaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWZpbGUtc2VsZWN0aW9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbGUtc2VsZWN0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZmlsZS1zZWxlY3Rpb24uY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbe1xuICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEZpbGVTZWxlY3Rpb25Db21wb25lbnQpLFxuICAgIG11bHRpOiB0cnVlXG4gIH1dLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBCdXR0b25Db21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIEZpbGVTZWxlY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgbGFiZWwhOiBzdHJpbmc7ICAvLyBMYWJlbCBmb3IgdGhlIGZpbGUgc2VsZWN0b3JcbiAgQElucHV0KCkgY2hvb3NlRmlsZUxhYmVsITogc3RyaW5nO1xuICBASW5wdXQoKSBpbWFnZVVybDogc3RyaW5nIHwgQXJyYXlCdWZmZXIgfCBudWxsID0gbnVsbDsgIC8vIEFsbG93IGltYWdlVXJsIHRvIGJlIHBhc3NlZCBleHRlcm5hbGx5XG4gIEBJbnB1dCgpIGZpbGVOYW1lOiBzdHJpbmcgfCBudWxsID0gbnVsbDsgIC8vIEFsbG93IGZpbGVOYW1lIHRvIGJlIHBhc3NlZCBleHRlcm5hbGx5XG5cbiAgY29uZmlnITogSUJ1dHRvbkNvbmZpZztcblxuICBvbkNoYW5nZTogYW55ID0gKCkgPT4ge307XG4gIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG4gIHByaXZhdGUgX3ZhbHVlOiBhbnkgPSB1bmRlZmluZWQ7XG5cbiAgZ2V0IHZhbHVlKCkge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuXG4gIHNldCB2YWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMuX3ZhbHVlKTtcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5jb25maWcgPSB7XG4gICAgICB0eXBlOiBCdXR0b25UeXBlLmJ1dHRvbixcbiAgICAgIGxhYmVsOiB0aGlzLmNob29zZUZpbGVMYWJlbFxuICAgIH1cbiAgfVxuXG4gIG9uRmlsZVNlbGVjdGVkKGV2ZW50OiBFdmVudCkge1xuICAgIGNvbnN0IGlucHV0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG5cbiAgICBpZiAoaW5wdXQuZmlsZXMgJiYgaW5wdXQuZmlsZXMubGVuZ3RoID4gMCkge1xuICAgICAgY29uc3QgZmlsZSA9IGlucHV0LmZpbGVzWzBdO1xuXG4gICAgICAvLyBTdG9yZSB0aGUgZmlsZSBuYW1lIHRvIGRpc3BsYXkgaXQgaW4gdGhlIFVJXG4gICAgICB0aGlzLmZpbGVOYW1lID0gZmlsZS5uYW1lO1xuICAgICAgdGhpcy52YWx1ZSA9IGZpbGU7XG5cbiAgICAgIC8vIEdlbmVyYXRlIGltYWdlIHByZXZpZXcgVVJMIGlmIGl0J3MgYW4gaW1hZ2VcbiAgICAgIGNvbnN0IHJlYWRlciA9IG5ldyBGaWxlUmVhZGVyKCk7XG4gICAgICByZWFkZXIub25sb2FkID0gKGU6IGFueSkgPT4ge1xuICAgICAgICB0aGlzLmltYWdlVXJsID0gZS50YXJnZXQucmVzdWx0OyAgLy8gU2V0IGltYWdlIFVSTCBmb3IgcHJldmlld1xuICAgICAgfTtcbiAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKGZpbGUpO1xuICAgIH1cbiAgfVxuXG4gIHRyaWdnZXJGaWxlSW5wdXQoKSB7XG4gICAgY29uc3QgZmlsZUlucHV0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZpbGVJbnB1dCcpIGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgZmlsZUlucHV0LmNsaWNrKCk7ICAvLyBQcm9ncmFtbWF0aWNhbGx5IGNsaWNrIHRoZSBoaWRkZW4gZmlsZSBpbnB1dFxuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgfVxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgLy8gSW1wbGVtZW50IGlmIHlvdSBuZWVkIHRvIGhhbmRsZSBkaXNhYmxlZCBzdGF0ZVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZmlsZS1zZWxlY3RvclwiPlxuICA8bGFiZWwgKm5nSWY9XCJsYWJlbFwiPnt7IGxhYmVsIH19PC9sYWJlbD5cbiAgPGlucHV0XG4gIGlkPVwiZmlsZUlucHV0XCJcbiAgdHlwZT1cImZpbGVcIlxuICAoY2hhbmdlKT1cIm9uRmlsZVNlbGVjdGVkKCRldmVudClcIlxuICBhY2NlcHQ9XCJpbWFnZS8qXCJcbiAgY2xhc3M9XCJoaWRkZW4tZmlsZS1pbnB1dFwiPlxuICA8ZGl2IGNsYXNzPVwiZmlsZS1zZWxlY3Rpb25cIj5cbiAgICA8IS0tIEN1c3RvbSBidXR0b24gdG8gdHJpZ2dlciBmaWxlIGlucHV0IC0tPlxuICAgIDxhcHAtYnV0dG9uIFtjb25maWddPVwiY29uZmlnXCJcbiAgICBjbGFzcz1cImN1c3RvbS1maWxlLWJ1dHRvblwiXG4gICAgKGNsaWNrRXZlbnQpPVwidHJpZ2dlckZpbGVJbnB1dCgpXCI+XG4gICAgICBTZWxlY3QgSW1hZ2VcbiAgICA8L2FwcC1idXR0b24+XG4gICAgPGRpdiAqbmdJZj1cImZpbGVOYW1lXCIgY2xhc3M9XCJmaWxlLW5hbWVcIj5cbiAgICAgIHt7IGZpbGVOYW1lIH19XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgKm5nSWY9XCJpbWFnZVVybFwiPlxuICAgIDxpbWcgW3NyY109XCJpbWFnZVVybFwiIGFsdD1cIlNlbGVjdGVkIEltYWdlXCIgY2xhc3M9XCJwcmV2aWV3LWltYWdlXCIvPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -41,7 +41,7 @@ class InputComponent {
|
|
|
41
41
|
provide: NG_VALUE_ACCESSOR,
|
|
42
42
|
useExisting: forwardRef(() => InputComponent),
|
|
43
43
|
multi: true
|
|
44
|
-
}], ngImport: i0, template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\
|
|
44
|
+
}], ngImport: i0, template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\n <label *ngIf=\"config.label\">\n {{ config.label }}\n <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\n </label>\n\n <div class=\"input-container\">\n <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\n [type]=\"config.type\"\n [name]=\"config.name\"\n [required]=\"config.required\"\n [(ngModel)]=\"value\"\n [placeholder] = \"config.placeholder\"\n [ngClass]=\"{'input-error': !config.isValid}\">\n <textarea *ngIf=\"config.type === 'textarea'\"\n [name]=\"config.name\"\n [required]=\"config.required\"\n [(ngModel)]=\"value\"\n [placeholder] = \"config.placeholder\"\n [ngClass]=\"{'input-error': !config.isValid}\">\n </textarea>\n <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\n </div>\n\n <div *ngIf=\"config.type === 'image'\">\n <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\n </div>\n</div>\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\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: "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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
45
45
|
}
|
|
46
46
|
export { InputComponent };
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
|
@@ -50,8 +50,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
50
50
|
provide: NG_VALUE_ACCESSOR,
|
|
51
51
|
useExisting: forwardRef(() => InputComponent),
|
|
52
52
|
multi: true
|
|
53
|
-
}], imports: [CommonModule, FormsModule], template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\
|
|
53
|
+
}], imports: [CommonModule, FormsModule], template: "<div class=\"input-item\" [ngClass]=\"config.direction\">\n <label *ngIf=\"config.label\">\n {{ config.label }}\n <span *ngIf=\"config.required\" class=\"required-indicator\">*</span>\n </label>\n\n <div class=\"input-container\">\n <input *ngIf=\"config.type !== 'textarea' && config.type !== 'richText' && config.type !== 'image'\"\n [type]=\"config.type\"\n [name]=\"config.name\"\n [required]=\"config.required\"\n [(ngModel)]=\"value\"\n [placeholder] = \"config.placeholder\"\n [ngClass]=\"{'input-error': !config.isValid}\">\n <textarea *ngIf=\"config.type === 'textarea'\"\n [name]=\"config.name\"\n [required]=\"config.required\"\n [(ngModel)]=\"value\"\n [placeholder] = \"config.placeholder\"\n [ngClass]=\"{'input-error': !config.isValid}\">\n </textarea>\n <i *ngIf=\"!config.isValid\" class=\"material-icons warning-icon\">error</i>\n </div>\n\n <div *ngIf=\"config.type === 'image'\">\n <img *ngIf=\"value\" [src]=\"value\" alt=\"Selected Image\" class=\"preview-image\"/>\n </div>\n</div>\n", styles: [".input-item{display:flex;width:100%;gap:10px}.input-item .input-container{display:flex;width:inherit}.input-item .input-container .input-error{border-color:red}.input-item label{display:flex;align-items:center}.input-item.horizontal{flex-direction:row}.input-item.horizontal label{width:30%}.input-item.vertical{flex-direction:column}.input-item .preview-image{max-width:150px;max-height:150px;border:1px solid #ccc;margin-top:8px}.input-item .required-indicator,.input-item .warning-icon{display:flex;align-items:center;color:red;margin-left:4px}.input-item .warning-icon{font-weight:700}.input-item input,.input-item textarea{padding:.5rem;border:1px solid #ccc;border-radius:.25rem;width:-webkit-fill-available}.input-item quill-editor{width:100%}\n"] }]
|
|
54
54
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
55
55
|
type: Input
|
|
56
56
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaW5wdXQvaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaW5wdXQvaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JFLE9BQU8sRUFBd0IsV0FBVyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEYsT0FBTyxFQUFFLGNBQWMsRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUV2RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7QUFFL0MsTUFZYSxjQUFjO0lBS3pCLElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBRUQsSUFBSSxLQUFLLENBQUMsS0FBVTtRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUtEO1FBZlEsV0FBTSxHQUFRLEVBQUUsQ0FBQztRQVl6QixhQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3pCLGNBQVMsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFVixDQUFDO0lBRWpCLFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFDRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFBO0lBQ3JCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE1BQU0sR0FBRztZQUNaLElBQUksRUFBRSxTQUFTLENBQUMsSUFBSTtZQUNwQixTQUFTLEVBQUUsY0FBYyxDQUFDLFFBQVE7WUFDbEMsT0FBTyxFQUFFLElBQUk7WUFDYixHQUFHLElBQUksQ0FBQyxNQUFNO1NBQ2YsQ0FBQztJQUNKLENBQUM7K0dBckNVLGNBQWM7bUdBQWQsY0FBYyxzRkFQZCxDQUFDO2dCQUNWLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDO2dCQUM3QyxLQUFLLEVBQUUsSUFBSTthQUNaLENBQUMsMEJDZkosNGtDQTRCQSx5eUJEWlksWUFBWSxnT0FBRSxXQUFXOztTQUV4QixjQUFjOzRGQUFkLGNBQWM7a0JBWjFCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksYUFHTCxDQUFDOzRCQUNWLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLGVBQWUsQ0FBQzs0QkFDN0MsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQyxXQUNPLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQzswRUFHM0IsTUFBTTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBmb3J3YXJkUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybXNNb2R1bGUsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgSW5wdXREaXJlY3Rpb24sIElucHV0VHlwZSB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9lbnVtcy9lbnVtJztcbmltcG9ydCB7IElJbnB1dENvbmZpZyB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9pbnRlcmZhY2VzL2ludGVyZmFjZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtaW5wdXQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pbnB1dC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFt7XG4gICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gSW5wdXRDb21wb25lbnQpLFxuICAgIG11bHRpOiB0cnVlXG4gIH1dLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBGb3Jtc01vZHVsZV1cbn0pXG5leHBvcnQgY2xhc3MgSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgY29uZmlnITogSUlucHV0Q29uZmlnO1xuXG4gIHByaXZhdGUgX3ZhbHVlOiBhbnkgPSAnJztcblxuICBnZXQgdmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG5cbiAgc2V0IHZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICB0aGlzLl92YWx1ZSA9IHZhbHVlO1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy5fdmFsdWUpO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gIH1cblxuICBvbkNoYW5nZTogYW55ID0gKCkgPT4ge307XG4gIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl92YWx1ZSA9IHZhbHVlO1xuICB9XG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmblxuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5jb25maWcgPSB7XG4gICAgICB0eXBlOiBJbnB1dFR5cGUudGV4dCxcbiAgICAgIGRpcmVjdGlvbjogSW5wdXREaXJlY3Rpb24udmVydGljYWwsXG4gICAgICBpc1ZhbGlkOiB0cnVlLFxuICAgICAgLi4udGhpcy5jb25maWcsXG4gICAgfTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImlucHV0LWl0ZW1cIiBbbmdDbGFzc109XCJjb25maWcuZGlyZWN0aW9uXCI+XG4gIDxsYWJlbCAqbmdJZj1cImNvbmZpZy5sYWJlbFwiPlxuICAgIHt7IGNvbmZpZy5sYWJlbCB9fVxuICAgIDxzcGFuICpuZ0lmPVwiY29uZmlnLnJlcXVpcmVkXCIgY2xhc3M9XCJyZXF1aXJlZC1pbmRpY2F0b3JcIj4qPC9zcGFuPlxuICA8L2xhYmVsPlxuXG4gIDxkaXYgY2xhc3M9XCJpbnB1dC1jb250YWluZXJcIj5cbiAgICA8aW5wdXQgKm5nSWY9XCJjb25maWcudHlwZSAhPT0gJ3RleHRhcmVhJyAmJiBjb25maWcudHlwZSAhPT0gJ3JpY2hUZXh0JyAmJiBjb25maWcudHlwZSAhPT0gJ2ltYWdlJ1wiXG4gICAgICBbdHlwZV09XCJjb25maWcudHlwZVwiXG4gICAgICBbbmFtZV09XCJjb25maWcubmFtZVwiXG4gICAgICBbcmVxdWlyZWRdPVwiY29uZmlnLnJlcXVpcmVkXCJcbiAgICAgIFsobmdNb2RlbCldPVwidmFsdWVcIlxuICAgICAgW3BsYWNlaG9sZGVyXSA9IFwiY29uZmlnLnBsYWNlaG9sZGVyXCJcbiAgICAgIFtuZ0NsYXNzXT1cInsnaW5wdXQtZXJyb3InOiAhY29uZmlnLmlzVmFsaWR9XCI+XG4gICAgPHRleHRhcmVhICpuZ0lmPVwiY29uZmlnLnR5cGUgPT09ICd0ZXh0YXJlYSdcIlxuICAgICAgICBbbmFtZV09XCJjb25maWcubmFtZVwiXG4gICAgICAgIFtyZXF1aXJlZF09XCJjb25maWcucmVxdWlyZWRcIlxuICAgICAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcbiAgICAgICAgW3BsYWNlaG9sZGVyXSA9IFwiY29uZmlnLnBsYWNlaG9sZGVyXCJcbiAgICAgICAgW25nQ2xhc3NdPVwieydpbnB1dC1lcnJvcic6ICFjb25maWcuaXNWYWxpZH1cIj5cbiAgICA8L3RleHRhcmVhPlxuICAgIDxpICpuZ0lmPVwiIWNvbmZpZy5pc1ZhbGlkXCIgY2xhc3M9XCJtYXRlcmlhbC1pY29ucyB3YXJuaW5nLWljb25cIj5lcnJvcjwvaT5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImNvbmZpZy50eXBlID09PSAnaW1hZ2UnXCI+XG4gICAgPGltZyAqbmdJZj1cInZhbHVlXCIgW3NyY109XCJ2YWx1ZVwiIGFsdD1cIlNlbGVjdGVkIEltYWdlXCIgY2xhc3M9XCJwcmV2aWV3LWltYWdlXCIvPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { LoadingSize } from '../../../shared/enums/enum';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common";
|
|
6
|
+
class LoadingComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.size = LoadingSize.Medium;
|
|
9
|
+
this.imageSrc = '';
|
|
10
|
+
}
|
|
11
|
+
ngOnInit() {
|
|
12
|
+
}
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingComponent, isStandalone: true, selector: "app-loading", inputs: { size: "size", imageSrc: "imageSrc" }, ngImport: i0, template: "<div [ngClass]=\"size\" class=\"loading-content\">\n <img [src]=\"imageSrc\" />\n</div>\n", styles: [":host{width:100%;height:100%;display:table;text-align:center}.loading-content{display:table-cell;vertical-align:middle}.xbig img{width:256px;height:256px}.big img{width:128px;height:128px}.medium img{width:64px;height:64px}.small img{width:32px;height:32px}.xsmall img{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
15
|
+
}
|
|
16
|
+
export { LoadingComponent };
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
18
|
+
type: Component,
|
|
19
|
+
args: [{ selector: 'app-loading', standalone: true, imports: [CommonModule], template: "<div [ngClass]=\"size\" class=\"loading-content\">\n <img [src]=\"imageSrc\" />\n</div>\n", styles: [":host{width:100%;height:100%;display:table;text-align:center}.loading-content{display:table-cell;vertical-align:middle}.xbig img{width:256px;height:256px}.big img{width:128px;height:128px}.medium img{width:64px;height:64px}.small img{width:32px;height:32px}.xsmall img{width:16px;height:16px}\n"] }]
|
|
20
|
+
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}], imageSrc: [{
|
|
23
|
+
type: Input
|
|
24
|
+
}] } });
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWR1bWItbGliL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9sb2FkaW5nL2xvYWRpbmcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvbG9hZGluZy9sb2FkaW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQUUvQyxNQU9hLGdCQUFnQjtJQUszQjtRQUpTLFNBQUksR0FBZ0IsV0FBVyxDQUFDLE1BQU0sQ0FBQztRQUV4QyxhQUFRLEdBQVcsRUFBRSxDQUFDO0lBRWQsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQzsrR0FSVSxnQkFBZ0I7bUdBQWhCLGdCQUFnQix1SENYN0IsNEZBR0EsK1ZETVksWUFBWTs7U0FFWCxnQkFBZ0I7NEZBQWhCLGdCQUFnQjtrQkFQNUIsU0FBUzsrQkFDRSxhQUFhLGNBQ1gsSUFBSSxXQUdQLENBQUMsWUFBWSxDQUFDOzBFQUdkLElBQUk7c0JBQVosS0FBSztnQkFFRSxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMb2FkaW5nU2l6ZSB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9lbnVtcy9lbnVtJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1sb2FkaW5nJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgdGVtcGxhdGVVcmw6ICcuL2xvYWRpbmcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9sb2FkaW5nLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIExvYWRpbmdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzaXplOiBMb2FkaW5nU2l6ZSA9IExvYWRpbmdTaXplLk1lZGl1bTtcblxuXHRASW5wdXQoKSBpbWFnZVNyYzogc3RyaW5nID0gJyc7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxufVxuIiwiPGRpdiBbbmdDbGFzc109XCJzaXplXCIgY2xhc3M9XCJsb2FkaW5nLWNvbnRlbnRcIj5cbiAgPGltZyBbc3JjXT1cImltYWdlU3JjXCIgLz5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
|
|
2
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
import { SelectionType } from '../../../shared/enums/enum';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "@angular/common";
|
|
7
|
+
import * as i2 from "@angular/forms";
|
|
8
|
+
class SelectionComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.label = ''; // Label for the dropdown
|
|
11
|
+
this.options = []; // Array of options
|
|
12
|
+
this.selectedValues = []; // Pre-selected values (multi-selection)
|
|
13
|
+
this.isMultiSelect = false; // Enable multi-selection for dropdown
|
|
14
|
+
this.displayType = SelectionType.dropdown; // Control the display type (dropdown, radio, or checkbox)
|
|
15
|
+
this.selectedChange = new EventEmitter(); // Event emitter for value changes
|
|
16
|
+
this.onChange = () => { };
|
|
17
|
+
this.onTouched = () => { };
|
|
18
|
+
}
|
|
19
|
+
get value() {
|
|
20
|
+
return this.selectedValue;
|
|
21
|
+
}
|
|
22
|
+
set value(value) {
|
|
23
|
+
this.selectedValue = (this.isMultiSelect === false && Array.isArray(value)) ? value[0] : value;
|
|
24
|
+
this.onChange(this.selectedValue);
|
|
25
|
+
this.onTouched();
|
|
26
|
+
}
|
|
27
|
+
ngOnInit() {
|
|
28
|
+
if (this.options && this.options.length > 0 && !this.isMultiSelect) {
|
|
29
|
+
this.selectedValue = this.options[0].value;
|
|
30
|
+
this.onChange(this.selectedValue);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
onSelectChange(event) {
|
|
34
|
+
this.selectedChange.emit(this.selectedValue);
|
|
35
|
+
}
|
|
36
|
+
onMultiSelectChange(event) {
|
|
37
|
+
const target = event.target;
|
|
38
|
+
const value = target.value;
|
|
39
|
+
if (target.checked) {
|
|
40
|
+
this.selectedValues.push(value);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
this.selectedValues = this.selectedValues.filter(v => v !== value);
|
|
44
|
+
}
|
|
45
|
+
this.selectedChange.emit(this.selectedValues);
|
|
46
|
+
}
|
|
47
|
+
isSelected(value) {
|
|
48
|
+
return this.isMultiSelect ? this.selectedValues.includes(value) : value === this.selectedValue;
|
|
49
|
+
}
|
|
50
|
+
writeValue(value) {
|
|
51
|
+
this.selectedValue = value;
|
|
52
|
+
}
|
|
53
|
+
registerOnChange(fn) {
|
|
54
|
+
this.onChange = fn;
|
|
55
|
+
}
|
|
56
|
+
registerOnTouched(fn) {
|
|
57
|
+
this.onTouched = fn;
|
|
58
|
+
}
|
|
59
|
+
setDisabledState(isDisabled) {
|
|
60
|
+
// Implement if you need to handle disabled state
|
|
61
|
+
}
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
63
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectionComponent, isStandalone: true, selector: "app-selection", inputs: { label: "label", options: "options", selectedValue: "selectedValue", selectedValues: "selectedValues", isMultiSelect: "isMultiSelect", displayType: "displayType" }, outputs: { selectedChange: "selectedChange" }, providers: [{
|
|
64
|
+
provide: NG_VALUE_ACCESSOR,
|
|
65
|
+
useExisting: forwardRef(() => SelectionComponent),
|
|
66
|
+
multi: true
|
|
67
|
+
}], ngImport: i0, template: "<div class=\"dropdown\" *ngIf=\"displayType === 'dropdown'\">\n <label *ngIf=\"label\">{{ label }}</label>\n <select\n (change)=\"onSelectChange($event)\"\n [multiple]=\"isMultiSelect\"\n [(ngModel)]=\"value\">\n <option *ngFor=\"let option of options\"\n [value]=\"option.value\"\n [selected]=\"isSelected(option.value)\">\n {{ option.label }}\n </option>\n </select>\n</div>\n\n<div class=\"radio-group\" *ngIf=\"displayType === 'radio'\">\n <label *ngIf=\"label\">{{ label }}</label>\n <div *ngFor=\"let option of options\">\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"option.value === selectedValue\"\n (change)=\"onSelectChange($event)\"\n name=\"radioGroup\"/>\n <label>{{ option.label }}</label>\n </div>\n</div>\n\n<div class=\"checkbox-group\" *ngIf=\"displayType === 'checkbox'\">\n <label *ngIf=\"label\">{{ label }}</label>\n <div *ngFor=\"let option of options\">\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option.value)\"\n (change)=\"onMultiSelectChange($event)\"/>\n <label>{{ option.label }}</label>\n </div>\n</div>\n", styles: [".dropdown,.radio-group,.checkbox-group{display:flex;flex-direction:column;width:100%;min-width:150px}.dropdown label,.radio-group label,.checkbox-group label{font-size:12px;color:#666;margin-bottom:4px;font-weight:700}.dropdown select{width:100%;padding:9px 8px;font-size:12px;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;appearance:none;cursor:pointer;transition:border-color .3s,box-shadow .3s}.dropdown select:hover{border-color:#888}.dropdown select:focus{border-color:#03a9f4;box-shadow:0 0 5px #03a9f480;outline:none}.radio-group div,.checkbox-group div{display:flex;align-items:center;margin-bottom:8px}.radio-group input[type=radio],.checkbox-group input[type=checkbox]{margin-right:8px;cursor:pointer}.radio-group label,.checkbox-group label{font-size:12px;color:#333;cursor:pointer}.radio-group input[type=radio]:focus,.checkbox-group input[type=checkbox]:focus{outline:2px solid #03A9F4;outline-offset:2px}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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"] }] }); }
|
|
68
|
+
}
|
|
69
|
+
export { SelectionComponent };
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionComponent, decorators: [{
|
|
71
|
+
type: Component,
|
|
72
|
+
args: [{ selector: 'app-selection', standalone: true, providers: [{
|
|
73
|
+
provide: NG_VALUE_ACCESSOR,
|
|
74
|
+
useExisting: forwardRef(() => SelectionComponent),
|
|
75
|
+
multi: true
|
|
76
|
+
}], imports: [CommonModule, FormsModule], template: "<div class=\"dropdown\" *ngIf=\"displayType === 'dropdown'\">\n <label *ngIf=\"label\">{{ label }}</label>\n <select\n (change)=\"onSelectChange($event)\"\n [multiple]=\"isMultiSelect\"\n [(ngModel)]=\"value\">\n <option *ngFor=\"let option of options\"\n [value]=\"option.value\"\n [selected]=\"isSelected(option.value)\">\n {{ option.label }}\n </option>\n </select>\n</div>\n\n<div class=\"radio-group\" *ngIf=\"displayType === 'radio'\">\n <label *ngIf=\"label\">{{ label }}</label>\n <div *ngFor=\"let option of options\">\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"option.value === selectedValue\"\n (change)=\"onSelectChange($event)\"\n name=\"radioGroup\"/>\n <label>{{ option.label }}</label>\n </div>\n</div>\n\n<div class=\"checkbox-group\" *ngIf=\"displayType === 'checkbox'\">\n <label *ngIf=\"label\">{{ label }}</label>\n <div *ngFor=\"let option of options\">\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option.value)\"\n (change)=\"onMultiSelectChange($event)\"/>\n <label>{{ option.label }}</label>\n </div>\n</div>\n", styles: [".dropdown,.radio-group,.checkbox-group{display:flex;flex-direction:column;width:100%;min-width:150px}.dropdown label,.radio-group label,.checkbox-group label{font-size:12px;color:#666;margin-bottom:4px;font-weight:700}.dropdown select{width:100%;padding:9px 8px;font-size:12px;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px;appearance:none;cursor:pointer;transition:border-color .3s,box-shadow .3s}.dropdown select:hover{border-color:#888}.dropdown select:focus{border-color:#03a9f4;box-shadow:0 0 5px #03a9f480;outline:none}.radio-group div,.checkbox-group div{display:flex;align-items:center;margin-bottom:8px}.radio-group input[type=radio],.checkbox-group input[type=checkbox]{margin-right:8px;cursor:pointer}.radio-group label,.checkbox-group label{font-size:12px;color:#333;cursor:pointer}.radio-group input[type=radio]:focus,.checkbox-group input[type=checkbox]:focus{outline:2px solid #03A9F4;outline-offset:2px}\n"] }]
|
|
77
|
+
}], propDecorators: { label: [{
|
|
78
|
+
type: Input
|
|
79
|
+
}], options: [{
|
|
80
|
+
type: Input
|
|
81
|
+
}], selectedValue: [{
|
|
82
|
+
type: Input
|
|
83
|
+
}], selectedValues: [{
|
|
84
|
+
type: Input
|
|
85
|
+
}], isMultiSelect: [{
|
|
86
|
+
type: Input
|
|
87
|
+
}], displayType: [{
|
|
88
|
+
type: Input
|
|
89
|
+
}], selectedChange: [{
|
|
90
|
+
type: Output
|
|
91
|
+
}] } });
|
|
92
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL3NlbGVjdGlvbi9zZWxlY3Rpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvc2VsZWN0aW9uL3NlbGVjdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRixPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3RGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUUzRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7QUFFL0MsTUFZYSxrQkFBa0I7SUFaL0I7UUFhVyxVQUFLLEdBQVcsRUFBRSxDQUFDLENBQUUseUJBQXlCO1FBQzlDLFlBQU8sR0FBa0MsRUFBRSxDQUFDLENBQUUsbUJBQW1CO1FBRWpFLG1CQUFjLEdBQVUsRUFBRSxDQUFDLENBQUUsd0NBQXdDO1FBQ3JFLGtCQUFhLEdBQVksS0FBSyxDQUFDLENBQUUsc0NBQXNDO1FBQ3ZFLGdCQUFXLEdBQWtCLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBRSwwREFBMEQ7UUFFL0csbUJBQWMsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQyxDQUFFLGtDQUFrQztRQUUxRyxhQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3pCLGNBQVMsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7S0FzRDNCO0lBcERDLElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM1QixDQUFDO0lBRUQsSUFBSSxLQUFLLENBQUMsS0FBVTtRQUNsQixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsS0FBSyxLQUFLLElBQUssS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFBLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUUvRixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUNsRSxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1lBQzNDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ25DO0lBQ0gsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFZO1FBQ3pCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUMvQyxDQUFDO0lBRUQsbUJBQW1CLENBQUMsS0FBWTtRQUM5QixNQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsTUFBMEIsQ0FBQztRQUNoRCxNQUFNLEtBQUssR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDO1FBRTNCLElBQUksTUFBTSxDQUFDLE9BQU8sRUFBRTtZQUNsQixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNqQzthQUFNO1lBQ0wsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQztTQUNwRTtRQUVELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxhQUFhLENBQUM7SUFDakcsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQzdCLENBQUM7SUFDRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFBO0lBQ3JCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBRSxVQUFtQjtRQUNuQyxpREFBaUQ7SUFDbkQsQ0FBQzsrR0FoRVUsa0JBQWtCO21HQUFsQixrQkFBa0IseVJBUGxCLENBQUM7Z0JBQ1YsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztnQkFDakQsS0FBSyxFQUFFLElBQUk7YUFDWixDQUFDLDBCQ2ZKLGdxQ0FzQ0EsNCtCRHRCWSxZQUFZLCtQQUFFLFdBQVc7O1NBRXhCLGtCQUFrQjs0RkFBbEIsa0JBQWtCO2tCQVo5QixTQUFTOytCQUNFLGVBQWUsY0FHYixJQUFJLGFBQ0wsQ0FBQzs0QkFDVixPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxtQkFBbUIsQ0FBQzs0QkFDakQsS0FBSyxFQUFFLElBQUk7eUJBQ1osQ0FBQyxXQUNPLENBQUMsWUFBWSxFQUFFLFdBQVcsQ0FBQzs4QkFHM0IsS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUVJLGNBQWM7c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBmb3J3YXJkUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybXNNb2R1bGUsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgU2VsZWN0aW9uVHlwZSB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9lbnVtcy9lbnVtJztcbmltcG9ydCB7IElEcm9wZG93bk9wdGlvbiB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9pbnRlcmZhY2VzL2ludGVyZmFjZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtc2VsZWN0aW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlbGVjdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NlbGVjdGlvbi5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBwcm92aWRlcnM6IFt7XG4gICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2VsZWN0aW9uQ29tcG9uZW50KSxcbiAgICBtdWx0aTogdHJ1ZVxuICB9XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nID0gJyc7ICAvLyBMYWJlbCBmb3IgdGhlIGRyb3Bkb3duXG4gIEBJbnB1dCgpIG9wdGlvbnM6IElEcm9wZG93bk9wdGlvbltdIHwgdW5kZWZpbmVkID0gW107ICAvLyBBcnJheSBvZiBvcHRpb25zXG4gIEBJbnB1dCgpIHNlbGVjdGVkVmFsdWU6IGFueTsgIC8vIFByZS1zZWxlY3RlZCB2YWx1ZSAoc2luZ2xlIHNlbGVjdGlvbilcbiAgQElucHV0KCkgc2VsZWN0ZWRWYWx1ZXM6IGFueVtdID0gW107ICAvLyBQcmUtc2VsZWN0ZWQgdmFsdWVzIChtdWx0aS1zZWxlY3Rpb24pXG4gIEBJbnB1dCgpIGlzTXVsdGlTZWxlY3Q6IGJvb2xlYW4gPSBmYWxzZTsgIC8vIEVuYWJsZSBtdWx0aS1zZWxlY3Rpb24gZm9yIGRyb3Bkb3duXG4gIEBJbnB1dCgpIGRpc3BsYXlUeXBlOiBTZWxlY3Rpb25UeXBlID0gU2VsZWN0aW9uVHlwZS5kcm9wZG93bjsgIC8vIENvbnRyb2wgdGhlIGRpc3BsYXkgdHlwZSAoZHJvcGRvd24sIHJhZGlvLCBvciBjaGVja2JveClcblxuICBAT3V0cHV0KCkgc2VsZWN0ZWRDaGFuZ2U6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7ICAvLyBFdmVudCBlbWl0dGVyIGZvciB2YWx1ZSBjaGFuZ2VzXG5cbiAgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xuICBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xuXG4gIGdldCB2YWx1ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5zZWxlY3RlZFZhbHVlO1xuICB9XG5cbiAgc2V0IHZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICB0aGlzLnNlbGVjdGVkVmFsdWUgPSAodGhpcy5pc011bHRpU2VsZWN0ID09PSBmYWxzZSAmJiAgQXJyYXkuaXNBcnJheSh2YWx1ZSkpPyB2YWx1ZVswXSA6IHZhbHVlO1xuXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnNlbGVjdGVkVmFsdWUpO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5vcHRpb25zICYmIHRoaXMub3B0aW9ucy5sZW5ndGggPiAwICYmICF0aGlzLmlzTXVsdGlTZWxlY3QpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZSA9IHRoaXMub3B0aW9uc1swXS52YWx1ZTtcbiAgICAgIHRoaXMub25DaGFuZ2UodGhpcy5zZWxlY3RlZFZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBvblNlbGVjdENoYW5nZShldmVudDogRXZlbnQpIHtcbiAgICB0aGlzLnNlbGVjdGVkQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZFZhbHVlKTtcbiAgfVxuXG4gIG9uTXVsdGlTZWxlY3RDaGFuZ2UoZXZlbnQ6IEV2ZW50KSB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgY29uc3QgdmFsdWUgPSB0YXJnZXQudmFsdWU7XG5cbiAgICBpZiAodGFyZ2V0LmNoZWNrZWQpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMucHVzaCh2YWx1ZSk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZXMgPSB0aGlzLnNlbGVjdGVkVmFsdWVzLmZpbHRlcih2ID0+IHYgIT09IHZhbHVlKTtcbiAgICB9XG5cbiAgICB0aGlzLnNlbGVjdGVkQ2hhbmdlLmVtaXQodGhpcy5zZWxlY3RlZFZhbHVlcyk7XG4gIH1cblxuICBpc1NlbGVjdGVkKHZhbHVlOiBhbnkpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5pc011bHRpU2VsZWN0ID8gdGhpcy5zZWxlY3RlZFZhbHVlcy5pbmNsdWRlcyh2YWx1ZSkgOiB2YWx1ZSA9PT0gdGhpcy5zZWxlY3RlZFZhbHVlO1xuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RlZFZhbHVlID0gdmFsdWU7XG4gIH1cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuXG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgLy8gSW1wbGVtZW50IGlmIHlvdSBuZWVkIHRvIGhhbmRsZSBkaXNhYmxlZCBzdGF0ZVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZHJvcGRvd25cIiAqbmdJZj1cImRpc3BsYXlUeXBlID09PSAnZHJvcGRvd24nXCI+XG4gIDxsYWJlbCAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX08L2xhYmVsPlxuICA8c2VsZWN0XG4gIChjaGFuZ2UpPVwib25TZWxlY3RDaGFuZ2UoJGV2ZW50KVwiXG4gIFttdWx0aXBsZV09XCJpc011bHRpU2VsZWN0XCJcbiAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiPlxuICAgIDxvcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCJcbiAgICBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCJcbiAgICBbc2VsZWN0ZWRdPVwiaXNTZWxlY3RlZChvcHRpb24udmFsdWUpXCI+XG4gICAgICB7eyBvcHRpb24ubGFiZWwgfX1cbiAgICA8L29wdGlvbj5cbiAgPC9zZWxlY3Q+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cInJhZGlvLWdyb3VwXCIgKm5nSWY9XCJkaXNwbGF5VHlwZSA9PT0gJ3JhZGlvJ1wiPlxuICA8bGFiZWwgKm5nSWY9XCJsYWJlbFwiPnt7IGxhYmVsIH19PC9sYWJlbD5cbiAgPGRpdiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIG9wdGlvbnNcIj5cbiAgICA8aW5wdXRcbiAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCJcbiAgICAgIFtjaGVja2VkXT1cIm9wdGlvbi52YWx1ZSA9PT0gc2VsZWN0ZWRWYWx1ZVwiXG4gICAgICAoY2hhbmdlKT1cIm9uU2VsZWN0Q2hhbmdlKCRldmVudClcIlxuICAgICAgbmFtZT1cInJhZGlvR3JvdXBcIi8+XG4gICAgPGxhYmVsPnt7IG9wdGlvbi5sYWJlbCB9fTwvbGFiZWw+XG4gIDwvZGl2PlxuPC9kaXY+XG5cbjxkaXYgY2xhc3M9XCJjaGVja2JveC1ncm91cFwiICpuZ0lmPVwiZGlzcGxheVR5cGUgPT09ICdjaGVja2JveCdcIj5cbiAgPGxhYmVsICpuZ0lmPVwibGFiZWxcIj57eyBsYWJlbCB9fTwvbGFiZWw+XG4gIDxkaXYgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCI+XG4gICAgPGlucHV0XG4gICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgW3ZhbHVlXT1cIm9wdGlvbi52YWx1ZVwiXG4gICAgICBbY2hlY2tlZF09XCJpc1NlbGVjdGVkKG9wdGlvbi52YWx1ZSlcIlxuICAgICAgKGNoYW5nZSk9XCJvbk11bHRpU2VsZWN0Q2hhbmdlKCRldmVudClcIi8+XG4gICAgPGxhYmVsPnt7IG9wdGlvbi5sYWJlbCB9fTwvbGFiZWw+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { CommonModule } from '@angular/common';
|
|
2
|
+
import { Component, Input } from '@angular/core';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
class SliderComponent {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.images = [];
|
|
8
|
+
this.autoSlide = false;
|
|
9
|
+
this.slideInterval = 3000; // Time interval for auto slide
|
|
10
|
+
this.currentIndex = 0;
|
|
11
|
+
}
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
if (this.autoSlide) {
|
|
14
|
+
this.startAutoSlide();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
startAutoSlide() {
|
|
18
|
+
setInterval(() => {
|
|
19
|
+
this.nextSlide();
|
|
20
|
+
}, this.slideInterval);
|
|
21
|
+
}
|
|
22
|
+
prevSlide() {
|
|
23
|
+
this.currentIndex = this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
|
|
24
|
+
}
|
|
25
|
+
nextSlide() {
|
|
26
|
+
this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;
|
|
27
|
+
}
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderComponent, isStandalone: true, selector: "app-slider", inputs: { images: "images", autoSlide: "autoSlide", slideInterval: "slideInterval" }, ngImport: i0, template: "<div class=\"slider-container\">\n <div class=\"slider-wrapper\">\n <div\n class=\"slide\"\n *ngFor=\"let image of images; let i = index\"\n [class.active]=\"i === currentIndex\"\n [ngStyle]=\"{'background-image': 'url(' + image + ')'}\">\n </div>\n </div>\n\n <!-- Navigation Buttons -->\n <button class=\"prev\" (click)=\"prevSlide()\">❮</button>\n <button class=\"next\" (click)=\"nextSlide()\">❯</button>\n</div>\n", styles: [".slider-container{position:relative;width:100%;margin:auto;overflow:hidden}.slider-wrapper{position:relative;width:100%;height:400px}.slide{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity .5s ease-in-out}.slide.active{opacity:1}.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background-color:#00000080;color:#fff;border:none;padding:10px;cursor:pointer;font-size:18px}.prev{left:10px}.next{right:10px}.prev:hover,.next:hover{background-color:#000c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
30
|
+
}
|
|
31
|
+
export { SliderComponent };
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderComponent, decorators: [{
|
|
33
|
+
type: Component,
|
|
34
|
+
args: [{ selector: 'app-slider', standalone: true, imports: [CommonModule], template: "<div class=\"slider-container\">\n <div class=\"slider-wrapper\">\n <div\n class=\"slide\"\n *ngFor=\"let image of images; let i = index\"\n [class.active]=\"i === currentIndex\"\n [ngStyle]=\"{'background-image': 'url(' + image + ')'}\">\n </div>\n </div>\n\n <!-- Navigation Buttons -->\n <button class=\"prev\" (click)=\"prevSlide()\">❮</button>\n <button class=\"next\" (click)=\"nextSlide()\">❯</button>\n</div>\n", styles: [".slider-container{position:relative;width:100%;margin:auto;overflow:hidden}.slider-wrapper{position:relative;width:100%;height:400px}.slide{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity .5s ease-in-out}.slide.active{opacity:1}.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background-color:#00000080;color:#fff;border:none;padding:10px;cursor:pointer;font-size:18px}.prev{left:10px}.next{right:10px}.prev:hover,.next:hover{background-color:#000c}\n"] }]
|
|
35
|
+
}], propDecorators: { images: [{
|
|
36
|
+
type: Input
|
|
37
|
+
}], autoSlide: [{
|
|
38
|
+
type: Input
|
|
39
|
+
}], slideInterval: [{
|
|
40
|
+
type: Input
|
|
41
|
+
}] } });
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZHVtYi1saWIvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL3NsaWRlci9zbGlkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1kdW1iLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvc2xpZGVyL3NsaWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7OztBQUV6RCxNQU9hLGVBQWU7SUFQNUI7UUFRVyxXQUFNLEdBQWEsRUFBRSxDQUFDO1FBQ3RCLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFDM0Isa0JBQWEsR0FBVyxJQUFJLENBQUMsQ0FBRSwrQkFBK0I7UUFFdkUsaUJBQVksR0FBVyxDQUFDLENBQUM7S0FxQjFCO0lBbkJDLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbEIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQztJQUVELGNBQWM7UUFDWixXQUFXLENBQUMsR0FBRyxFQUFFO1lBQ2YsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ25CLENBQUMsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELFNBQVM7UUFDUCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxZQUFZLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxDQUFDO0lBQy9GLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxLQUFLLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztJQUMvRixDQUFDOytHQXpCVSxlQUFlO21HQUFmLGVBQWUsNEpDVjVCLGlkQWNBLG9sQkROWSxZQUFZOztTQUVYLGVBQWU7NEZBQWYsZUFBZTtrQkFQM0IsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUdQLENBQUMsWUFBWSxDQUFDOzhCQUdkLE1BQU07c0JBQWQsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1zbGlkZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc2xpZGVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGltYWdlczogc3RyaW5nW10gPSBbXTtcbiAgQElucHV0KCkgYXV0b1NsaWRlOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNsaWRlSW50ZXJ2YWw6IG51bWJlciA9IDMwMDA7ICAvLyBUaW1lIGludGVydmFsIGZvciBhdXRvIHNsaWRlXG5cbiAgY3VycmVudEluZGV4OiBudW1iZXIgPSAwO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmF1dG9TbGlkZSkge1xuICAgICAgdGhpcy5zdGFydEF1dG9TbGlkZSgpO1xuICAgIH1cbiAgfVxuXG4gIHN0YXJ0QXV0b1NsaWRlKCk6IHZvaWQge1xuICAgIHNldEludGVydmFsKCgpID0+IHtcbiAgICAgIHRoaXMubmV4dFNsaWRlKCk7XG4gICAgfSwgdGhpcy5zbGlkZUludGVydmFsKTtcbiAgfVxuXG4gIHByZXZTbGlkZSgpOiB2b2lkIHtcbiAgICB0aGlzLmN1cnJlbnRJbmRleCA9IHRoaXMuY3VycmVudEluZGV4ID09PSAwID8gdGhpcy5pbWFnZXMubGVuZ3RoIC0gMSA6IHRoaXMuY3VycmVudEluZGV4IC0gMTtcbiAgfVxuXG4gIG5leHRTbGlkZSgpOiB2b2lkIHtcbiAgICB0aGlzLmN1cnJlbnRJbmRleCA9IHRoaXMuY3VycmVudEluZGV4ID09PSB0aGlzLmltYWdlcy5sZW5ndGggLSAxID8gMCA6IHRoaXMuY3VycmVudEluZGV4ICsgMTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNsaWRlci1jb250YWluZXJcIj5cbiAgPGRpdiBjbGFzcz1cInNsaWRlci13cmFwcGVyXCI+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJzbGlkZVwiXG4gICAgICAqbmdGb3I9XCJsZXQgaW1hZ2Ugb2YgaW1hZ2VzOyBsZXQgaSA9IGluZGV4XCJcbiAgICAgIFtjbGFzcy5hY3RpdmVdPVwiaSA9PT0gY3VycmVudEluZGV4XCJcbiAgICAgIFtuZ1N0eWxlXT1cInsnYmFja2dyb3VuZC1pbWFnZSc6ICd1cmwoJyArIGltYWdlICsgJyknfVwiPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8IS0tIE5hdmlnYXRpb24gQnV0dG9ucyAtLT5cbiAgPGJ1dHRvbiBjbGFzcz1cInByZXZcIiAoY2xpY2spPVwicHJldlNsaWRlKClcIj4mIzEwMDk0OzwvYnV0dG9uPlxuICA8YnV0dG9uIGNsYXNzPVwibmV4dFwiIChjbGljayk9XCJuZXh0U2xpZGUoKVwiPiYjMTAwOTU7PC9idXR0b24+XG48L2Rpdj5cbiJdfQ==
|