keevo-components 2.0.266 → 2.0.267
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/kv-inputs/kv-chips/kv-chips.component.mjs +4 -3
- package/esm2022/lib/components/kv-inputs/kv-select-buttons/kv-select-buttons.component.mjs +2 -2
- package/fesm2022/keevo-components.mjs +5 -5
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-button/kv-button.component.d.ts +2 -2
- package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +2 -2
- package/lib/components/kv-icon/kv-icon.component.d.ts +1 -1
- package/lib/components/kv-progress-bar-new/kv-progress-bar-new.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Component, input, model, output } from '@angular/core';
|
|
2
|
+
import { ControlContainer, FormGroupDirective } from '@angular/forms';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
export class KvChipsComponent {
|
|
4
5
|
constructor() {
|
|
@@ -48,10 +49,10 @@ export class KvChipsComponent {
|
|
|
48
49
|
this.selectionChange.emit(val);
|
|
49
50
|
}
|
|
50
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvChipsComponent, isStandalone: true, selector: "kv-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }); }
|
|
52
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvChipsComponent, isStandalone: true, selector: "kv-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
|
|
52
53
|
}
|
|
53
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvChipsComponent, decorators: [{
|
|
54
55
|
type: Component,
|
|
55
|
-
args: [{ selector: 'kv-chips', standalone: true, imports: [], template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }]
|
|
56
|
+
args: [{ selector: 'kv-chips', standalone: true, imports: [], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }]
|
|
56
57
|
}] });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtY2hpcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2Vldm8tY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMva3YtaW5wdXRzL2t2LWNoaXBzL2t2LWNoaXBzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1jaGlwcy9rdi1jaGlwcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQWV0RSxNQUFNLE9BQU8sZ0JBQWdCO0lBUjdCO1FBU0UsZ0VBQWdFO1FBQ2hFLFlBQU8sR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFnQixDQUFDO1FBRXpDLGlFQUFpRTtRQUNqRSxhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRWpDLGdEQUFnRDtRQUNoRCxrRUFBa0U7UUFDbEUsY0FBUyxHQUFHLEtBQUssQ0FBTSxJQUFJLENBQUMsQ0FBQztRQUU3Qiw2QkFBNkI7UUFDN0Isb0JBQWUsR0FBRyxNQUFNLEVBQU8sQ0FBQztLQXdDakM7SUF0Q0MsTUFBTSxDQUFDLE1BQWtCO1FBQ3ZCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNoQyxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDakMsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUUzQixJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ1osdUNBQXVDO1lBQ3ZDLElBQUksUUFBUSxHQUFVLEtBQUssQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBRWpFLElBQUksUUFBUSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDO2dCQUM3QixRQUFRLEdBQUcsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVM7WUFDekQsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxXQUFXO1lBQ25DLENBQUM7WUFDRCxJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRWpDLENBQUM7YUFBTSxDQUFDO1lBQ04sNENBQTRDO1lBQzVDLDRFQUE0RTtZQUM1RSxJQUFJLE9BQU8sS0FBSyxLQUFLLEVBQUUsQ0FBQztnQkFDdEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM5QixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFRCxtREFBbUQ7SUFDbkQsUUFBUSxDQUFDLE1BQWtCO1FBQ3pCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNqQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO1lBQ3BCLE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNsRSxDQUFDO1FBQ0QsT0FBTyxPQUFPLEtBQUssTUFBTSxDQUFDLEtBQUssQ0FBQztJQUNsQyxDQUFDO0lBRU8sZUFBZSxDQUFDLEdBQVE7UUFDOUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDakMsQ0FBQzs4R0FuRFUsZ0JBQWdCO2tHQUFoQixnQkFBZ0IsaWlCQ2hCN0Isb1RBWUEsbXBCREVpQixDQUFDLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSxrQkFBa0IsRUFBRSxDQUFDOzsyRkFFcEUsZ0JBQWdCO2tCQVI1QixTQUFTOytCQUNFLFVBQVUsY0FDUixJQUFJLFdBQ1AsRUFBRSxpQkFHSSxDQUFDLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSxrQkFBa0IsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgbW9kZWwsIG91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb250cm9sQ29udGFpbmVyLCBGb3JtR3JvdXBEaXJlY3RpdmUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIENoaXBPcHRpb24ge1xyXG4gIGxhYmVsOiBzdHJpbmc7XHJcbiAgdmFsdWU6IGFueTtcclxufVxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdrdi1jaGlwcycsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbXSxcclxuICB0ZW1wbGF0ZVVybDogJy4va3YtY2hpcHMuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9rdi1jaGlwcy5jb21wb25lbnQuc2NzcycsXHJcbiAgdmlld1Byb3ZpZGVyczogW3sgcHJvdmlkZTogQ29udHJvbENvbnRhaW5lciwgdXNlRXhpc3Rpbmc6IEZvcm1Hcm91cERpcmVjdGl2ZSB9XVxyXG59KVxyXG5leHBvcnQgY2xhc3MgS3ZDaGlwc0NvbXBvbmVudCB7XHJcbiAgLy8gUmVjZWJlIGFzIG9ww6fDtWVzIChleDogW3tsYWJlbDogJ1BvciBmaWxpYWwnLCB2YWx1ZTogMX0sIC4uLl0pXHJcbiAgb3B0aW9ucyA9IGlucHV0LnJlcXVpcmVkPENoaXBPcHRpb25bXT4oKTtcclxuXHJcbiAgLy8gRGVmaW5lIHNlIGFjZWl0YSBtw7psdGlwbG9zIG91IGFwZW5hcyB1bSAocGFkcsOjbzogZmFsc2Uvc2luZ2xlKVxyXG4gIG11bHRpcGxlID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xyXG5cclxuICAvLyBPIHZhbG9yIHNlbGVjaW9uYWRvIChwb2RlIHNlciDDum5pY28gb3UgYXJyYXkpXHJcbiAgLy8gVXNhbW9zICdtb2RlbCcgcGFyYSB0d28td2F5IGJpbmRpbmcgZsOhY2lsIFsoc2VsZWN0aW9uKV09XCJ2YWxvclwiXHJcbiAgc2VsZWN0aW9uID0gbW9kZWw8YW55PihudWxsKTtcclxuXHJcbiAgLy8gRXZlbnRvIG9wY2lvbmFsIGRlIG11ZGFuw6dhXHJcbiAgc2VsZWN0aW9uQ2hhbmdlID0gb3V0cHV0PGFueT4oKTtcclxuXHJcbiAgdG9nZ2xlKG9wdGlvbjogQ2hpcE9wdGlvbikge1xyXG4gICAgY29uc3QgaXNNdWx0aSA9IHRoaXMubXVsdGlwbGUoKTtcclxuICAgIGNvbnN0IGN1cnJlbnQgPSB0aGlzLnNlbGVjdGlvbigpO1xyXG4gICAgY29uc3QgdmFsdWUgPSBvcHRpb24udmFsdWU7XHJcblxyXG4gICAgaWYgKGlzTXVsdGkpIHtcclxuICAgICAgLy8gTMOzZ2ljYSBwYXJhIE3Dumx0aXBsYSBTZWxlw6fDo28gKEFycmF5KVxyXG4gICAgICBsZXQgbmV3VmFsdWU6IGFueVtdID0gQXJyYXkuaXNBcnJheShjdXJyZW50KSA/IFsuLi5jdXJyZW50XSA6IFtdO1xyXG5cclxuICAgICAgaWYgKG5ld1ZhbHVlLmluY2x1ZGVzKHZhbHVlKSkge1xyXG4gICAgICAgIG5ld1ZhbHVlID0gbmV3VmFsdWUuZmlsdGVyKHYgPT4gdiAhPT0gdmFsdWUpOyAvLyBSZW1vdmVcclxuICAgICAgfSBlbHNlIHtcclxuICAgICAgICBuZXdWYWx1ZS5wdXNoKHZhbHVlKTsgLy8gQWRpY2lvbmFcclxuICAgICAgfVxyXG4gICAgICB0aGlzLnVwZGF0ZVNlbGVjdGlvbihuZXdWYWx1ZSk7XHJcblxyXG4gICAgfSBlbHNlIHtcclxuICAgICAgLy8gTMOzZ2ljYSBwYXJhIFNlbGXDp8OjbyDDmm5pY2EgKFZhbG9yIHNpbXBsZXMpXHJcbiAgICAgIC8vIFNlIGNsaWNhciBubyBtZXNtbywgbsOjbyBmYXogbmFkYSAob3UgcG9kZXJpYSBkZXNtYXJjYXIsIGRlcGVuZGUgZGEgcmVncmEpXHJcbiAgICAgIGlmIChjdXJyZW50ICE9PSB2YWx1ZSkge1xyXG4gICAgICAgIHRoaXMudXBkYXRlU2VsZWN0aW9uKHZhbHVlKTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgLy8gVmVyaWZpY2Egc2UgZXN0w6EgYXRpdm8gcGFyYSBhcGxpY2FyIGEgY2xhc3NlIENTU1xyXG4gIGlzQWN0aXZlKG9wdGlvbjogQ2hpcE9wdGlvbik6IGJvb2xlYW4ge1xyXG4gICAgY29uc3QgY3VycmVudCA9IHRoaXMuc2VsZWN0aW9uKCk7XHJcbiAgICBpZiAodGhpcy5tdWx0aXBsZSgpKSB7XHJcbiAgICAgIHJldHVybiBBcnJheS5pc0FycmF5KGN1cnJlbnQpICYmIGN1cnJlbnQuaW5jbHVkZXMob3B0aW9uLnZhbHVlKTtcclxuICAgIH1cclxuICAgIHJldHVybiBjdXJyZW50ID09PSBvcHRpb24udmFsdWU7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHVwZGF0ZVNlbGVjdGlvbih2YWw6IGFueSkge1xyXG4gICAgdGhpcy5zZWxlY3Rpb24uc2V0KHZhbCk7XHJcbiAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5lbWl0KHZhbCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjaGlwLWNvbnRhaW5lclwiPlxyXG4gIEBmb3IgKG9wdGlvbiBvZiBvcHRpb25zKCk7IHRyYWNrIG9wdGlvbi52YWx1ZSkge1xyXG4gICAgPGJ1dHRvblxyXG4gICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgY2xhc3M9XCJjaGlwXCJcclxuICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cImlzQWN0aXZlKG9wdGlvbilcIlxyXG4gICAgICAoY2xpY2spPVwidG9nZ2xlKG9wdGlvbilcIlxyXG4gICAgPlxyXG4gICAgICB7eyBvcHRpb24ubGFiZWwgfX1cclxuICAgIDwvYnV0dG9uPlxyXG4gIH1cclxuPC9kaXY+XHJcbiJdfQ==
|
|
@@ -53,11 +53,11 @@ export class KvSelectButtonsComponent {
|
|
|
53
53
|
return style;
|
|
54
54
|
}
|
|
55
55
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
56
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectButtonsComponent, selector: "kv-select-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectChange: "selectChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0
|
|
56
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectButtonsComponent, selector: "kv-select-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectChange: "selectChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0 .75rem;font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s;position:relative;z-index:1;gap:.5rem}.option:hover{color:#444f5f}.option[active=true]{color:#0f172a;font-weight:600}.option[active=true] .icon{color:#0ea5e9}.icon{font-size:1.1rem;margin-right:4px;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:inherit;transition:color .2s;overflow:hidden}.counter{height:1rem;min-width:1rem;padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:99px;font-size:.75rem;font-weight:700;color:#fff;background:#64748b;transition:background .2s;font-size:.625rem!important}.option[active=true] .counter{background:#0a3a78}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
57
57
|
}
|
|
58
58
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonsComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
|
-
args: [{ selector: 'kv-select-buttons', standalone: false, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0
|
|
60
|
+
args: [{ selector: 'kv-select-buttons', standalone: false, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0 .75rem;font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s;position:relative;z-index:1;gap:.5rem}.option:hover{color:#444f5f}.option[active=true]{color:#0f172a;font-weight:600}.option[active=true] .icon{color:#0ea5e9}.icon{font-size:1.1rem;margin-right:4px;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:inherit;transition:color .2s;overflow:hidden}.counter{height:1rem;min-width:1rem;padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:99px;font-size:.75rem;font-weight:700;color:#fff;background:#64748b;transition:background .2s;font-size:.625rem!important}.option[active=true] .counter{background:#0a3a78}\n"] }]
|
|
61
61
|
}], ctorParameters: () => [], propDecorators: { defaultValue: [{
|
|
62
62
|
type: Input
|
|
63
63
|
}], selectChange: [{
|
|
@@ -13,7 +13,7 @@ import { Menu, MenuModule } from 'primeng/menu';
|
|
|
13
13
|
import * as i2$1 from 'primeng/ripple';
|
|
14
14
|
import { RippleModule } from 'primeng/ripple';
|
|
15
15
|
import * as i2$2 from '@angular/forms';
|
|
16
|
-
import { FormGroup, NgControl, FormControlName, FormGroupDirective, FormControlDirective, Validators, FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
|
|
16
|
+
import { FormGroup, NgControl, FormControlName, FormGroupDirective, FormControlDirective, Validators, FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, ControlContainer } from '@angular/forms';
|
|
17
17
|
import { finalize, combineLatest, filter, Subject, debounceTime, of, BehaviorSubject, fromEvent, takeUntil, timer } from 'rxjs';
|
|
18
18
|
import * as i1$3 from 'primeng/dynamicdialog';
|
|
19
19
|
import { DynamicDialogModule, DialogService, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
|
|
@@ -7065,11 +7065,11 @@ class KvSelectButtonsComponent {
|
|
|
7065
7065
|
return style;
|
|
7066
7066
|
}
|
|
7067
7067
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7068
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectButtonsComponent, selector: "kv-select-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectChange: "selectChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0
|
|
7068
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvSelectButtonsComponent, selector: "kv-select-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectChange: "selectChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0 .75rem;font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s;position:relative;z-index:1;gap:.5rem}.option:hover{color:#444f5f}.option[active=true]{color:#0f172a;font-weight:600}.option[active=true] .icon{color:#0ea5e9}.icon{font-size:1.1rem;margin-right:4px;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:inherit;transition:color .2s;overflow:hidden}.counter{height:1rem;min-width:1rem;padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:99px;font-size:.75rem;font-weight:700;color:#fff;background:#64748b;transition:background .2s;font-size:.625rem!important}.option[active=true] .counter{background:#0a3a78}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
7069
7069
|
}
|
|
7070
7070
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvSelectButtonsComponent, decorators: [{
|
|
7071
7071
|
type: Component,
|
|
7072
|
-
args: [{ selector: 'kv-select-buttons', standalone: false, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0
|
|
7072
|
+
args: [{ selector: 'kv-select-buttons', standalone: false, template: "<div class=\"flex flex-1 flex-row justify-content-start\">\r\n <div class=\"container\">\r\n <div class=\"highlight\" [ngStyle]=\"style()\"></div>\r\n\r\n <div class=\"inner flex gap-1\">\r\n @for(option of options(); track option.value;) {\r\n <div \r\n class=\"option\" \r\n (click)=\"select(option)\"\r\n [attr.active]=\"selection() === option.value\"\r\n #optRef\r\n >\r\n <span class=\"flex flex-row align-items-center\">\r\n @if(option.icon){\r\n <span class=\"icon material-symbols-outlined\">\r\n {{ option.icon }}\r\n </span>\r\n }\r\n\r\n {{ option.label }}\r\n\r\n </span>\r\n\r\n @if(option.counter){\r\n <div class=\"counter\" [attr.active]=\"selection() === option.value\">\r\n {{ option.counter }}\r\n </div>\r\n }\r\n \r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [".container{display:inline-flex;position:relative;align-items:center;background:#f1f5f9;border-radius:.5rem;padding:4px;height:2.5rem;box-sizing:border-box}.container .inner{display:flex;position:relative;z-index:1;width:100%}.container .highlight{position:absolute;z-index:0;background:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;left:0;top:4px;bottom:4px;transition:transform .25s cubic-bezier(.2,0,0,1),width .25s cubic-bezier(.2,0,0,1)}.option{flex:1;display:flex;align-items:center;justify-content:center;padding:0 .75rem;font-size:.75rem;font-weight:500;color:#64748b;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s;position:relative;z-index:1;gap:.5rem}.option:hover{color:#444f5f}.option[active=true]{color:#0f172a;font-weight:600}.option[active=true] .icon{color:#0ea5e9}.icon{font-size:1.1rem;margin-right:4px;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex-shrink:0;color:inherit;transition:color .2s;overflow:hidden}.counter{height:1rem;min-width:1rem;padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:99px;font-size:.75rem;font-weight:700;color:#fff;background:#64748b;transition:background .2s;font-size:.625rem!important}.option[active=true] .counter{background:#0a3a78}\n"] }]
|
|
7073
7073
|
}], ctorParameters: () => [], propDecorators: { defaultValue: [{
|
|
7074
7074
|
type: Input
|
|
7075
7075
|
}], selectChange: [{
|
|
@@ -14598,11 +14598,11 @@ class KvChipsComponent {
|
|
|
14598
14598
|
this.selectionChange.emit(val);
|
|
14599
14599
|
}
|
|
14600
14600
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvChipsComponent, isStandalone: true, selector: "kv-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }); }
|
|
14601
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvChipsComponent, isStandalone: true, selector: "kv-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }); }
|
|
14602
14602
|
}
|
|
14603
14603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvChipsComponent, decorators: [{
|
|
14604
14604
|
type: Component,
|
|
14605
|
-
args: [{ selector: 'kv-chips', standalone: true, imports: [], template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }]
|
|
14605
|
+
args: [{ selector: 'kv-chips', standalone: true, imports: [], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], template: "<div class=\"chip-container\">\r\n @for (option of options(); track option.value) {\r\n <button\r\n type=\"button\"\r\n class=\"chip\"\r\n [class.selected]=\"isActive(option)\"\r\n (click)=\"toggle(option)\"\r\n >\r\n {{ option.label }}\r\n </button>\r\n }\r\n</div>\r\n", styles: [".chip-container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.chip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:.25rem 1rem;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:.5rem;color:#64748b;font-family:inherit;font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none}.chip:hover{border-color:#abbbce;color:#4f5b6d}.chip.selected{background-color:#e0f2fe;border-color:#3b82f6;color:#0b63f3}.chip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}\n"] }]
|
|
14606
14606
|
}] });
|
|
14607
14607
|
|
|
14608
14608
|
class KvSelectCardsComponent {
|