kivio 1.4.9 → 1.5.0
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/components/date-picker/date-picker.component.mjs +3 -3
- package/esm2022/lib/components/kv-accordion/kv-accordion.component.mjs +3 -3
- package/esm2022/lib/components/kv-main-table/kv-main-table.component.mjs +52 -21
- package/esm2022/lib/components/kv-popup/kv-popup.component.mjs +3 -3
- package/esm2022/lib/services/pagination.service.mjs +1 -1
- package/fesm2022/kivio.mjs +57 -26
- package/fesm2022/kivio.mjs.map +1 -1
- package/lib/components/kv-main-table/kv-main-table.component.d.ts +21 -4
- package/package.json +1 -1
- package/src/styles/components/_form.scss +12 -0
- package/src/styles/components/_table.scss +236 -207
- package/src/styles/components/_utils.scss +60 -0
|
@@ -34,11 +34,11 @@ export class DatePickerComponent {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatePickerComponent, isStandalone: true, selector: "lib-kv-date-picker", inputs: { initialDate: "initialDate", showDetails: "showDetails" }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: "<div class=\"date-picker\">\r\n <input \r\n type=\"date\" \r\n [value]=\"formatDateForInput(selectedDate)\" \r\n [min]=\"minDate\" \r\n (input)=\"onDateChange($event)\" \r\n class=\"form-control\">\r\n \r\n <div *ngIf=\"showDetails\" class=\"date-details\">\r\n <p>{{ selectedDate | date:'fullDate' }}</p>\r\n </div>\r\n</div>\r\n", styles: ["input,textarea{padding:10px;width:-webkit-fill-available;border:1px solid #ccc;border-radius:5px;font-size:16px;font-family:Roboto,sans-serif!important;color:#101828;background-color:#fff}input::placeholder,textarea::placeholder{color:#475467}input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 8px #007bff80;background-color:#fff}input.error,textarea.error{border-color:#fcd9d9;box-shadow:0 0 8px #fcd9d980}.input-group{margin-bottom:15px}.input-group label{font-size:14px;margin-bottom:5px;color:#555}.input-group .error-message{color:red}.input-cost{display:flex;gap:10px}.date-picker{margin:10px 0;cursor:pointer}.date-details{font-size:.9em;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
37
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatePickerComponent, isStandalone: true, selector: "lib-kv-date-picker", inputs: { initialDate: "initialDate", showDetails: "showDetails" }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: "<div class=\"date-picker\">\r\n <input \r\n type=\"date\" \r\n [value]=\"formatDateForInput(selectedDate)\" \r\n [min]=\"minDate\" \r\n (input)=\"onDateChange($event)\" \r\n class=\"form-control\">\r\n \r\n <div *ngIf=\"showDetails\" class=\"date-details\">\r\n <p>{{ selectedDate | date:'fullDate' }}</p>\r\n </div>\r\n</div>\r\n", styles: ["input,textarea{padding:10px;width:-webkit-fill-available;border:1px solid #ccc;border-radius:5px;font-size:16px;font-family:Roboto,sans-serif!important;color:#101828;background-color:#fff}input::placeholder,textarea::placeholder{color:#475467}input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 8px #007bff80;background-color:#fff}input.error,textarea.error{border-color:#fcd9d9;box-shadow:0 0 8px #fcd9d980}.input-group{margin-bottom:15px}.input-group label{font-size:14px;margin-bottom:5px;color:#555}.input-group .error-message{color:red}@media (max-width: 768px){.input-group{margin-bottom:13px}.input-group label{font-size:13px}}@media (max-width: 480px){.input-group{margin-bottom:11px}.input-group label{font-size:12px}}.input-cost{display:flex;gap:10px}.date-picker{margin:10px 0;cursor:pointer}.date-details{font-size:.9em;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
38
38
|
}
|
|
39
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
40
40
|
type: Component,
|
|
41
|
-
args: [{ selector: 'lib-kv-date-picker', standalone: true, imports: [FormsModule, CommonModule], template: "<div class=\"date-picker\">\r\n <input \r\n type=\"date\" \r\n [value]=\"formatDateForInput(selectedDate)\" \r\n [min]=\"minDate\" \r\n (input)=\"onDateChange($event)\" \r\n class=\"form-control\">\r\n \r\n <div *ngIf=\"showDetails\" class=\"date-details\">\r\n <p>{{ selectedDate | date:'fullDate' }}</p>\r\n </div>\r\n</div>\r\n", styles: ["input,textarea{padding:10px;width:-webkit-fill-available;border:1px solid #ccc;border-radius:5px;font-size:16px;font-family:Roboto,sans-serif!important;color:#101828;background-color:#fff}input::placeholder,textarea::placeholder{color:#475467}input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 8px #007bff80;background-color:#fff}input.error,textarea.error{border-color:#fcd9d9;box-shadow:0 0 8px #fcd9d980}.input-group{margin-bottom:15px}.input-group label{font-size:14px;margin-bottom:5px;color:#555}.input-group .error-message{color:red}.input-cost{display:flex;gap:10px}.date-picker{margin:10px 0;cursor:pointer}.date-details{font-size:.9em;color:#666}\n"] }]
|
|
41
|
+
args: [{ selector: 'lib-kv-date-picker', standalone: true, imports: [FormsModule, CommonModule], template: "<div class=\"date-picker\">\r\n <input \r\n type=\"date\" \r\n [value]=\"formatDateForInput(selectedDate)\" \r\n [min]=\"minDate\" \r\n (input)=\"onDateChange($event)\" \r\n class=\"form-control\">\r\n \r\n <div *ngIf=\"showDetails\" class=\"date-details\">\r\n <p>{{ selectedDate | date:'fullDate' }}</p>\r\n </div>\r\n</div>\r\n", styles: ["input,textarea{padding:10px;width:-webkit-fill-available;border:1px solid #ccc;border-radius:5px;font-size:16px;font-family:Roboto,sans-serif!important;color:#101828;background-color:#fff}input::placeholder,textarea::placeholder{color:#475467}input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 8px #007bff80;background-color:#fff}input.error,textarea.error{border-color:#fcd9d9;box-shadow:0 0 8px #fcd9d980}.input-group{margin-bottom:15px}.input-group label{font-size:14px;margin-bottom:5px;color:#555}.input-group .error-message{color:red}@media (max-width: 768px){.input-group{margin-bottom:13px}.input-group label{font-size:13px}}@media (max-width: 480px){.input-group{margin-bottom:11px}.input-group label{font-size:12px}}.input-cost{display:flex;gap:10px}.date-picker{margin:10px 0;cursor:pointer}.date-details{font-size:.9em;color:#666}\n"] }]
|
|
42
42
|
}], propDecorators: { initialDate: [{
|
|
43
43
|
type: Input
|
|
44
44
|
}], showDetails: [{
|
|
@@ -46,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
46
46
|
}], dateSelected: [{
|
|
47
47
|
type: Output
|
|
48
48
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
49
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l2aW8vc3JjL2xpYi9jb21wb25lbnRzL2RhdGUtcGlja2VyL2RhdGUtcGlja2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdmlvL3NyYy9saWIvY29tcG9uZW50cy9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQVM3QyxNQUFNLE9BQU8sbUJBQW1CO0lBUGhDO1FBU1csZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDbkIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRWxELGlCQUFZLEdBQVMsSUFBSSxJQUFJLEVBQUUsQ0FBQztRQUNoQyxZQUFPLEdBQVcsRUFBRSxDQUFDO0tBNEJ0QjtJQTFCQyxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBRW5ELElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksRUFBRSxDQUFDO1NBQ2hHO0lBQ0gsQ0FBQztJQUVELGtCQUFrQixDQUFDLElBQVU7UUFDM0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ2hDLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUMzRCxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUNwRCxPQUFPLEdBQUcsSUFBSSxJQUFJLEtBQUssSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVk7UUFDdkIsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQTBCLENBQUM7UUFDL0MsTUFBTSxPQUFPLEdBQUcsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxXQUFXLENBQUMsQ0FBQztRQUVwRCxJQUFJLE9BQU8sSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDckMsSUFBSSxDQUFDLFlBQVksR0FBRyxPQUFPLENBQUM7WUFDNUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQzNDO2FBQU07WUFDTCxLQUFLLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7U0FDNUI7SUFDSCxDQUFDOytHQWpDVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiw2TENYaEMsc1lBWUEsaTVCRExZLFdBQVcsOEJBQUUsWUFBWTs7NEZBSXhCLG1CQUFtQjtrQkFQL0IsU0FBUzsrQkFDRSxvQkFBb0IsY0FDbEIsSUFBSSxXQUNQLENBQUMsV0FBVyxFQUFFLFlBQVksQ0FBQzs4QkFLM0IsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgT3V0cHV0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLWt2LWRhdGUtcGlja2VyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtGb3Jtc01vZHVsZSwgQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vZGF0ZS1waWNrZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9kYXRlLXBpY2tlci5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIERhdGVQaWNrZXJDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGluaXRpYWxEYXRlPzogRGF0ZTtcclxuICBASW5wdXQoKSBzaG93RGV0YWlscyA9IGZhbHNlO1xyXG4gIEBPdXRwdXQoKSBkYXRlU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPERhdGU+KCk7XHJcblxyXG4gIHNlbGVjdGVkRGF0ZTogRGF0ZSA9IG5ldyBEYXRlKCk7XHJcbiAgbWluRGF0ZTogc3RyaW5nID0gJyc7XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5taW5EYXRlID0gdGhpcy5mb3JtYXREYXRlRm9ySW5wdXQobmV3IERhdGUoKSk7XHJcblxyXG4gICAgaWYgKHRoaXMuaW5pdGlhbERhdGUpIHtcclxuICAgICAgdGhpcy5zZWxlY3RlZERhdGUgPSB0aGlzLmluaXRpYWxEYXRlID49IG5ldyBEYXRlKHRoaXMubWluRGF0ZSkgPyB0aGlzLmluaXRpYWxEYXRlIDogbmV3IERhdGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGZvcm1hdERhdGVGb3JJbnB1dChkYXRlOiBEYXRlKTogc3RyaW5nIHtcclxuICAgIGNvbnN0IHllYXIgPSBkYXRlLmdldEZ1bGxZZWFyKCk7XHJcbiAgICBjb25zdCBtb250aCA9IFN0cmluZyhkYXRlLmdldE1vbnRoKCkgKyAxKS5wYWRTdGFydCgyLCAnMCcpO1xyXG4gICAgY29uc3QgZGF5ID0gU3RyaW5nKGRhdGUuZ2V0RGF0ZSgpKS5wYWRTdGFydCgyLCAnMCcpO1xyXG4gICAgcmV0dXJuIGAke3llYXJ9LSR7bW9udGh9LSR7ZGF5fWA7XHJcbiAgfVxyXG5cclxuICBvbkRhdGVDaGFuZ2UoZXZlbnQ6IEV2ZW50KSB7XHJcbiAgICBjb25zdCBpbnB1dCA9IGV2ZW50LnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50O1xyXG4gICAgY29uc3QgbmV3RGF0ZSA9IG5ldyBEYXRlKGlucHV0LnZhbHVlICsgXCJUMDA6MDA6MDBcIik7XHJcblxyXG4gICAgaWYgKG5ld0RhdGUgPj0gbmV3IERhdGUodGhpcy5taW5EYXRlKSkge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkRGF0ZSA9IG5ld0RhdGU7XHJcbiAgICAgIHRoaXMuZGF0ZVNlbGVjdGVkLmVtaXQodGhpcy5zZWxlY3RlZERhdGUpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgaW5wdXQudmFsdWUgPSB0aGlzLm1pbkRhdGU7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJkYXRlLXBpY2tlclwiPlxyXG4gICAgPGlucHV0IFxyXG4gICAgICAgIHR5cGU9XCJkYXRlXCIgXHJcbiAgICAgICAgW3ZhbHVlXT1cImZvcm1hdERhdGVGb3JJbnB1dChzZWxlY3RlZERhdGUpXCIgXHJcbiAgICAgICAgW21pbl09XCJtaW5EYXRlXCIgXHJcbiAgICAgICAgKGlucHV0KT1cIm9uRGF0ZUNoYW5nZSgkZXZlbnQpXCIgXHJcbiAgICAgICAgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIj5cclxuICAgICAgICBcclxuICAgIDxkaXYgKm5nSWY9XCJzaG93RGV0YWlsc1wiIGNsYXNzPVwiZGF0ZS1kZXRhaWxzXCI+XHJcbiAgICAgICAgPHA+e3sgc2VsZWN0ZWREYXRlIHwgZGF0ZTonZnVsbERhdGUnIH19PC9wPlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -17,11 +17,11 @@ export class KvAccordionComponent {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KvAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KvAccordionComponent, isStandalone: true, selector: "lib-kv-accordion", inputs: { isOpen: "isOpen", title: "title", shouldShowImage: "shouldShowImage", imageUrl: "imageUrl" }, outputs: { opened: "opened" }, ngImport: i0, template: "<div class=\"accordion\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <div class=\"accordion-title\">\r\n <ng-container *ngIf=\"shouldShowImage\">\r\n <img width=\"40px\" [src]=\"imageUrl\" alt=\"User Avatar\" class=\"avatar\">\r\n </ng-container>\r\n <span>{{ title }}</span>\r\n </div>\r\n <span class=\"material-icons accordion-icon\" [class.open]=\"isOpen\">\r\n
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KvAccordionComponent, isStandalone: true, selector: "lib-kv-accordion", inputs: { isOpen: "isOpen", title: "title", shouldShowImage: "shouldShowImage", imageUrl: "imageUrl" }, outputs: { opened: "opened" }, ngImport: i0, template: "<div class=\"accordion\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <div class=\"accordion-title\">\r\n <ng-container *ngIf=\"shouldShowImage\">\r\n <img width=\"40px\" [src]=\"imageUrl\" alt=\"User Avatar\" class=\"avatar\">\r\n </ng-container>\r\n <span>{{ title }}</span>\r\n </div>\r\n <span class=\"material-icons accordion-icon\" [class.open]=\"isOpen\">\r\n keyboard_arrow_down\r\n </span>\r\n </div>\r\n <div class=\"accordion-content\" [class.open]=\"isOpen\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";.accordion{width:100%;margin:10px 0;border:1px solid #ddd;border-radius:4px;overflow:hidden;transition:all .3s ease}.accordion-header{padding:15px;background-color:#f8f9fa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease}.accordion-header .accordion-title{display:flex;gap:10px}.accordion-header .accordion-title img{border-radius:50px}.accordion-header .accordion-title span{align-self:center}.accordion-header:hover{background-color:#e9ecef}.accordion-icon{transition:transform .3s ease;color:#0052cc}.accordion-icon.open{transform:rotate(180deg);color:#000}.accordion-content{max-height:0;overflow:hidden;padding:0 15px;transition:max-height .3s ease-out,padding .3s ease-out}.accordion-content.open{max-height:500px;padding:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
21
21
|
}
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KvAccordionComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
|
-
args: [{ selector: 'lib-kv-accordion', standalone: true, imports: [CommonModule], template: "<div class=\"accordion\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <div class=\"accordion-title\">\r\n <ng-container *ngIf=\"shouldShowImage\">\r\n <img width=\"40px\" [src]=\"imageUrl\" alt=\"User Avatar\" class=\"avatar\">\r\n </ng-container>\r\n <span>{{ title }}</span>\r\n </div>\r\n <span class=\"material-icons accordion-icon\" [class.open]=\"isOpen\">\r\n
|
|
24
|
+
args: [{ selector: 'lib-kv-accordion', standalone: true, imports: [CommonModule], template: "<div class=\"accordion\">\r\n <div class=\"accordion-header\" (click)=\"toggle()\">\r\n <div class=\"accordion-title\">\r\n <ng-container *ngIf=\"shouldShowImage\">\r\n <img width=\"40px\" [src]=\"imageUrl\" alt=\"User Avatar\" class=\"avatar\">\r\n </ng-container>\r\n <span>{{ title }}</span>\r\n </div>\r\n <span class=\"material-icons accordion-icon\" [class.open]=\"isOpen\">\r\n keyboard_arrow_down\r\n </span>\r\n </div>\r\n <div class=\"accordion-content\" [class.open]=\"isOpen\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";.accordion{width:100%;margin:10px 0;border:1px solid #ddd;border-radius:4px;overflow:hidden;transition:all .3s ease}.accordion-header{padding:15px;background-color:#f8f9fa;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease}.accordion-header .accordion-title{display:flex;gap:10px}.accordion-header .accordion-title img{border-radius:50px}.accordion-header .accordion-title span{align-self:center}.accordion-header:hover{background-color:#e9ecef}.accordion-icon{transition:transform .3s ease;color:#0052cc}.accordion-icon.open{transform:rotate(180deg);color:#000}.accordion-content{max-height:0;overflow:hidden;padding:0 15px;transition:max-height .3s ease-out,padding .3s ease-out}.accordion-content.open{max-height:500px;padding:15px}\n"] }]
|
|
25
25
|
}], propDecorators: { isOpen: [{
|
|
26
26
|
type: Input
|
|
27
27
|
}], title: [{
|
|
@@ -33,4 +33,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
33
33
|
}], opened: [{
|
|
34
34
|
type: Output
|
|
35
35
|
}] } });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdmlvL3NyYy9saWIvY29tcG9uZW50cy9rdi1hY2NvcmRpb24va3YtYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdmlvL3NyYy9saWIvY29tcG9uZW50cy9rdi1hY2NvcmRpb24va3YtYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFTdkUsTUFBTSxPQUFPLG9CQUFvQjtJQVBqQztRQVFXLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFDZixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsb0JBQWUsR0FBRyxJQUFJLENBQUM7UUFDdkIsYUFBUSxHQUFHLGlDQUFpQyxDQUFDO1FBQzVDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBUTdDO0lBTkMsTUFBTTtRQUNKLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNCLElBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNkLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDcEI7SUFDSCxDQUFDOytHQVpVLG9CQUFvQjttR0FBcEIsb0JBQW9CLG1OQ1ZqQywwb0JBZU0sdTZCRFRNLFlBQVk7OzRGQUlYLG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOzhCQUtkLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1rdi1hY2NvcmRpb24nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2t2LWFjY29yZGlvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2t2LWFjY29yZGlvbi5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEt2QWNjb3JkaW9uQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBpc09wZW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSB0aXRsZSA9ICcnO1xyXG4gIEBJbnB1dCgpIHNob3VsZFNob3dJbWFnZSA9IHRydWU7XHJcbiAgQElucHV0KCkgaW1hZ2VVcmwgPSAnaHR0cHM6Ly9pLmltZ3VyLmNvbS9JblJhVnJMLmpwZyc7XHJcbiAgQE91dHB1dCgpIG9wZW5lZCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuXHJcbiAgdG9nZ2xlKCkge1xyXG4gICAgdGhpcy5pc09wZW4gPSAhdGhpcy5pc09wZW47XHJcbiAgICBpZih0aGlzLmlzT3Blbikge1xyXG4gICAgICB0aGlzLm9wZW5lZC5lbWl0KCk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJhY2NvcmRpb25cIj5cclxuICAgIDxkaXYgY2xhc3M9XCJhY2NvcmRpb24taGVhZGVyXCIgKGNsaWNrKT1cInRvZ2dsZSgpXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImFjY29yZGlvbi10aXRsZVwiPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwic2hvdWxkU2hvd0ltYWdlXCI+XHJcbiAgICAgICAgICAgICAgICA8aW1nIHdpZHRoPVwiNDBweFwiIFtzcmNdPVwiaW1hZ2VVcmxcIiBhbHQ9XCJVc2VyIEF2YXRhclwiIGNsYXNzPVwiYXZhdGFyXCI+XHJcbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICA8c3Bhbj57eyB0aXRsZSB9fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8c3BhbiBjbGFzcz1cIm1hdGVyaWFsLWljb25zIGFjY29yZGlvbi1pY29uXCIgW2NsYXNzLm9wZW5dPVwiaXNPcGVuXCI+XHJcbiAgICAgICAgICAgIGtleWJvYXJkX2Fycm93X2Rvd25cclxuICAgICAgICAgIDwvc3Bhbj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cImFjY29yZGlvbi1jb250ZW50XCIgW2NsYXNzLm9wZW5dPVwiaXNPcGVuXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|