@danarakca/keu-ui 1.0.0 → 1.1.1
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.
|
@@ -5495,17 +5495,17 @@ class KeuSelectComponent {
|
|
|
5495
5495
|
useExisting: forwardRef(() => KeuSelectComponent),
|
|
5496
5496
|
multi: true,
|
|
5497
5497
|
},
|
|
5498
|
-
], ngImport: i0, template: "<div class=\"keu-select-wrapper\" [class.keu-select--disabled]=\"disabled\">\n\n <label *ngIf=\"label\" class=\"keu-select__label\">{{ label }}</label>\n\n <div class=\"keu-select__field\">\n <select\n class=\"keu-select__control\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n (change)=\"onSelectChange($event)\"\n (blur)=\"onBlur()\">\n <option value=\"\" disabled selected hidden>{{ placeholder }}</option>\n <option *ngFor=\"let opt of options\" [value]=\"opt.value\">{{ opt.label }}</option>\n </select>\n\n <span class=\"keu-select__arrow\">\n <
|
|
5498
|
+
], ngImport: i0, template: "<div class=\"keu-select-wrapper\" [class.keu-select--disabled]=\"disabled\">\n\n <label *ngIf=\"label\" class=\"keu-select__label\">{{ label }}</label>\n\n <div class=\"keu-select__field\">\n <select\n class=\"keu-select__control\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n (change)=\"onSelectChange($event)\"\n (blur)=\"onBlur()\">\n <option value=\"\" disabled selected hidden>{{ placeholder }}</option>\n <option *ngFor=\"let opt of options\" [value]=\"opt.value\">{{ opt.label }}</option>\n </select>\n\n <span class=\"keu-select__arrow\">\n <keu-icon name=\"chevron-down\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </span>\n </div>\n\n <div *ngIf=\"helperText\" class=\"keu-select__message\">{{ helperText }}</div>\n</div>\n", styles: [".keu-select-wrapper{display:flex;flex-direction:column;gap:4px;font-family:var(--keu-font-family);max-width:320px}.keu-select__label{font-size:14px;font-weight:600;color:var(--keu-neutral-900, #111827);margin-bottom:2px}.keu-select__field{position:relative;display:flex;align-items:center;border:1.5px solid var(--keu-neutral-300, #D1D5DB);border-radius:var(--keu-radius-sm, 6px);background:#fff;box-shadow:inset 0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.keu-select__field:hover:not(:focus-within){border-color:var(--keu-neutral-400, #9CA3AF)}.keu-select__field:focus-within{border-color:var(--keu-primary-600, #005FAC);box-shadow:0 0 0 3px #005fac1f,inset 0 1px 2px #0000000a}.keu-select__control{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--keu-neutral-900, #111827);padding:10px 36px 10px 12px;width:100%;appearance:none;cursor:pointer}.keu-select__control:invalid,.keu-select__control option[value=\"\"]:first-child{color:var(--keu-neutral-400, #9CA3AF)}.keu-select__arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--keu-neutral-500, #6B7280);display:flex}.keu-select__message{font-size:12px;color:var(--keu-neutral-500, #6B7280);margin-top:2px}.keu-select--disabled .keu-select__field{background:var(--keu-neutral-100, #F3F4F6);border-color:var(--keu-neutral-200, #E5E7EB);cursor:not-allowed}.keu-select--disabled .keu-select__control{color:var(--keu-neutral-400, #9CA3AF);cursor:not-allowed}\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: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5499
5499
|
}
|
|
5500
5500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuSelectComponent, decorators: [{
|
|
5501
5501
|
type: Component,
|
|
5502
|
-
args: [{ selector: 'keu-select', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
5502
|
+
args: [{ selector: 'keu-select', standalone: true, imports: [CommonModule, FormsModule, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
5503
5503
|
{
|
|
5504
5504
|
provide: NG_VALUE_ACCESSOR,
|
|
5505
5505
|
useExisting: forwardRef(() => KeuSelectComponent),
|
|
5506
5506
|
multi: true,
|
|
5507
5507
|
},
|
|
5508
|
-
], template: "<div class=\"keu-select-wrapper\" [class.keu-select--disabled]=\"disabled\">\n\n <label *ngIf=\"label\" class=\"keu-select__label\">{{ label }}</label>\n\n <div class=\"keu-select__field\">\n <select\n class=\"keu-select__control\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n (change)=\"onSelectChange($event)\"\n (blur)=\"onBlur()\">\n <option value=\"\" disabled selected hidden>{{ placeholder }}</option>\n <option *ngFor=\"let opt of options\" [value]=\"opt.value\">{{ opt.label }}</option>\n </select>\n\n <span class=\"keu-select__arrow\">\n <
|
|
5508
|
+
], template: "<div class=\"keu-select-wrapper\" [class.keu-select--disabled]=\"disabled\">\n\n <label *ngIf=\"label\" class=\"keu-select__label\">{{ label }}</label>\n\n <div class=\"keu-select__field\">\n <select\n class=\"keu-select__control\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n (change)=\"onSelectChange($event)\"\n (blur)=\"onBlur()\">\n <option value=\"\" disabled selected hidden>{{ placeholder }}</option>\n <option *ngFor=\"let opt of options\" [value]=\"opt.value\">{{ opt.label }}</option>\n </select>\n\n <span class=\"keu-select__arrow\">\n <keu-icon name=\"chevron-down\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </span>\n </div>\n\n <div *ngIf=\"helperText\" class=\"keu-select__message\">{{ helperText }}</div>\n</div>\n", styles: [".keu-select-wrapper{display:flex;flex-direction:column;gap:4px;font-family:var(--keu-font-family);max-width:320px}.keu-select__label{font-size:14px;font-weight:600;color:var(--keu-neutral-900, #111827);margin-bottom:2px}.keu-select__field{position:relative;display:flex;align-items:center;border:1.5px solid var(--keu-neutral-300, #D1D5DB);border-radius:var(--keu-radius-sm, 6px);background:#fff;box-shadow:inset 0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.keu-select__field:hover:not(:focus-within){border-color:var(--keu-neutral-400, #9CA3AF)}.keu-select__field:focus-within{border-color:var(--keu-primary-600, #005FAC);box-shadow:0 0 0 3px #005fac1f,inset 0 1px 2px #0000000a}.keu-select__control{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--keu-neutral-900, #111827);padding:10px 36px 10px 12px;width:100%;appearance:none;cursor:pointer}.keu-select__control:invalid,.keu-select__control option[value=\"\"]:first-child{color:var(--keu-neutral-400, #9CA3AF)}.keu-select__arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--keu-neutral-500, #6B7280);display:flex}.keu-select__message{font-size:12px;color:var(--keu-neutral-500, #6B7280);margin-top:2px}.keu-select--disabled .keu-select__field{background:var(--keu-neutral-100, #F3F4F6);border-color:var(--keu-neutral-200, #E5E7EB);cursor:not-allowed}.keu-select--disabled .keu-select__control{color:var(--keu-neutral-400, #9CA3AF);cursor:not-allowed}\n"] }]
|
|
5509
5509
|
}], propDecorators: { label: [{
|
|
5510
5510
|
type: Input
|
|
5511
5511
|
}], placeholder: [{
|
|
@@ -5637,7 +5637,7 @@ class KeuRichtextComponent {
|
|
|
5637
5637
|
useExisting: forwardRef(() => KeuRichtextComponent),
|
|
5638
5638
|
multi: true,
|
|
5639
5639
|
},
|
|
5640
|
-
], ngImport: i0, template: "<div class=\"keu-richtext\" [class.keu-richtext--disabled]=\"disabled\">\n <label *ngIf=\"label\" class=\"keu-richtext__label\">{{ label }}</label>\n\n <ckeditor\n [editor]=\"Editor\"\n [config]=\"editorConfig\"\n [data]=\"value\"\n [disabled]=\"disabled\"\n (change)=\"onEditorChange($event)\"\n (blur)=\"onBlur()\">\n </ckeditor>\n\n <span *ngIf=\"helperText\" class=\"keu-richtext__helper\">{{ helperText }}</span>\n</div>\n", styles: [".keu-richtext{display:flex;flex-direction:column;gap:6px;width:100%}.keu-richtext__label{font-family:var(--keu-font-family);font-size:14px;font-weight:600;color:var(--keu-neutral-900, #111827)}.keu-richtext__helper{font-family:var(--keu-font-family);font-size:12px;color:var(--keu-neutral-500, #6B7280)}.keu-richtext .ck.ck-editor{border-radius:8px;overflow:hidden}.keu-richtext .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB)}.keu-richtext .ck.ck-editor__main>.ck-editor__editable{min-height:200px;font-family:var(--keu-font-family);font-size:14px;color:var(--keu-neutral-900, #111827);line-height:1.6}.keu-richtext .ck.ck-editor__main>.ck-editor__editable.ck-focused{border-color:var(--keu-primary-500, #005FAC);box-shadow:0 0 0 2px #005fac26}.keu-richtext--disabled{opacity:.6;pointer-events:none}.keu-richtext--disabled .keu-richtext__label{color:var(--keu-neutral-400, #9CA3AF)}.keu-richtext--disabled .ck.ck-editor__main>.ck-editor__editable{background:var(--keu-neutral-100, #F3F4F6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i2$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5640
|
+
], ngImport: i0, template: "<div class=\"keu-richtext\" [class.keu-richtext--disabled]=\"disabled\">\n <label *ngIf=\"label\" class=\"keu-richtext__label\">{{ label }}</label>\n\n <ckeditor\n [editor]=\"Editor\"\n [config]=\"editorConfig\"\n [data]=\"value\"\n [disabled]=\"disabled\"\n (change)=\"onEditorChange($event)\"\n (blur)=\"onBlur()\">\n </ckeditor>\n\n <span *ngIf=\"helperText\" class=\"keu-richtext__helper\">{{ helperText }}</span>\n</div>\n", styles: [".keu-richtext{display:flex;flex-direction:column;gap:6px;width:100%}.keu-richtext__label{font-family:var(--keu-font-family);font-size:14px;font-weight:600;color:var(--keu-neutral-900, #111827)}.keu-richtext__helper{font-family:var(--keu-font-family);font-size:12px;color:var(--keu-neutral-500, #6B7280)}.keu-richtext .ck.ck-editor{border-radius:8px;overflow:hidden}.keu-richtext .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB)}.keu-richtext .ck.ck-editor__main>.ck-editor__editable{min-height:200px;font-family:var(--keu-font-family)!important;font-size:14px;color:var(--keu-neutral-900, #111827);line-height:1.6}.keu-richtext .ck.ck-editor__main>.ck-editor__editable.ck-focused{border-color:var(--keu-primary-500, #005FAC);box-shadow:0 0 0 2px #005fac26}.keu-richtext .ck.ck-editor__main>.ck-editor__editable *{font-family:inherit!important}.keu-richtext .ck.ck-editor__main>.ck-editor__editable p,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h1,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h2,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h3,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h4,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h5,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h6,.keu-richtext .ck.ck-editor__main>.ck-editor__editable div,.keu-richtext .ck.ck-editor__main>.ck-editor__editable span,.keu-richtext .ck.ck-editor__main>.ck-editor__editable li,.keu-richtext .ck.ck-editor__main>.ck-editor__editable td,.keu-richtext .ck.ck-editor__main>.ck-editor__editable th{font-family:var(--keu-font-family)!important}.keu-richtext--disabled{opacity:.6;pointer-events:none}.keu-richtext--disabled .keu-richtext__label{color:var(--keu-neutral-400, #9CA3AF)}.keu-richtext--disabled .ck.ck-editor__main>.ck-editor__editable{background:var(--keu-neutral-100, #F3F4F6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i2$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5641
5641
|
}
|
|
5642
5642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuRichtextComponent, decorators: [{
|
|
5643
5643
|
type: Component,
|
|
@@ -5647,7 +5647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
5647
5647
|
useExisting: forwardRef(() => KeuRichtextComponent),
|
|
5648
5648
|
multi: true,
|
|
5649
5649
|
},
|
|
5650
|
-
], template: "<div class=\"keu-richtext\" [class.keu-richtext--disabled]=\"disabled\">\n <label *ngIf=\"label\" class=\"keu-richtext__label\">{{ label }}</label>\n\n <ckeditor\n [editor]=\"Editor\"\n [config]=\"editorConfig\"\n [data]=\"value\"\n [disabled]=\"disabled\"\n (change)=\"onEditorChange($event)\"\n (blur)=\"onBlur()\">\n </ckeditor>\n\n <span *ngIf=\"helperText\" class=\"keu-richtext__helper\">{{ helperText }}</span>\n</div>\n", styles: [".keu-richtext{display:flex;flex-direction:column;gap:6px;width:100%}.keu-richtext__label{font-family:var(--keu-font-family);font-size:14px;font-weight:600;color:var(--keu-neutral-900, #111827)}.keu-richtext__helper{font-family:var(--keu-font-family);font-size:12px;color:var(--keu-neutral-500, #6B7280)}.keu-richtext .ck.ck-editor{border-radius:8px;overflow:hidden}.keu-richtext .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB)}.keu-richtext .ck.ck-editor__main>.ck-editor__editable{min-height:200px;font-family:var(--keu-font-family);font-size:14px;color:var(--keu-neutral-900, #111827);line-height:1.6}.keu-richtext .ck.ck-editor__main>.ck-editor__editable.ck-focused{border-color:var(--keu-primary-500, #005FAC);box-shadow:0 0 0 2px #005fac26}.keu-richtext--disabled{opacity:.6;pointer-events:none}.keu-richtext--disabled .keu-richtext__label{color:var(--keu-neutral-400, #9CA3AF)}.keu-richtext--disabled .ck.ck-editor__main>.ck-editor__editable{background:var(--keu-neutral-100, #F3F4F6)}\n"] }]
|
|
5650
|
+
], template: "<div class=\"keu-richtext\" [class.keu-richtext--disabled]=\"disabled\">\n <label *ngIf=\"label\" class=\"keu-richtext__label\">{{ label }}</label>\n\n <ckeditor\n [editor]=\"Editor\"\n [config]=\"editorConfig\"\n [data]=\"value\"\n [disabled]=\"disabled\"\n (change)=\"onEditorChange($event)\"\n (blur)=\"onBlur()\">\n </ckeditor>\n\n <span *ngIf=\"helperText\" class=\"keu-richtext__helper\">{{ helperText }}</span>\n</div>\n", styles: [".keu-richtext{display:flex;flex-direction:column;gap:6px;width:100%}.keu-richtext__label{font-family:var(--keu-font-family);font-size:14px;font-weight:600;color:var(--keu-neutral-900, #111827)}.keu-richtext__helper{font-family:var(--keu-font-family);font-size:12px;color:var(--keu-neutral-500, #6B7280)}.keu-richtext .ck.ck-editor{border-radius:8px;overflow:hidden}.keu-richtext .ck.ck-editor__top .ck-sticky-panel .ck-toolbar{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB)}.keu-richtext .ck.ck-editor__main>.ck-editor__editable{min-height:200px;font-family:var(--keu-font-family)!important;font-size:14px;color:var(--keu-neutral-900, #111827);line-height:1.6}.keu-richtext .ck.ck-editor__main>.ck-editor__editable.ck-focused{border-color:var(--keu-primary-500, #005FAC);box-shadow:0 0 0 2px #005fac26}.keu-richtext .ck.ck-editor__main>.ck-editor__editable *{font-family:inherit!important}.keu-richtext .ck.ck-editor__main>.ck-editor__editable p,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h1,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h2,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h3,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h4,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h5,.keu-richtext .ck.ck-editor__main>.ck-editor__editable h6,.keu-richtext .ck.ck-editor__main>.ck-editor__editable div,.keu-richtext .ck.ck-editor__main>.ck-editor__editable span,.keu-richtext .ck.ck-editor__main>.ck-editor__editable li,.keu-richtext .ck.ck-editor__main>.ck-editor__editable td,.keu-richtext .ck.ck-editor__main>.ck-editor__editable th{font-family:var(--keu-font-family)!important}.keu-richtext--disabled{opacity:.6;pointer-events:none}.keu-richtext--disabled .keu-richtext__label{color:var(--keu-neutral-400, #9CA3AF)}.keu-richtext--disabled .ck.ck-editor__main>.ck-editor__editable{background:var(--keu-neutral-100, #F3F4F6)}\n"] }]
|
|
5651
5651
|
}], propDecorators: { label: [{
|
|
5652
5652
|
type: Input
|
|
5653
5653
|
}], placeholder: [{
|
|
@@ -5895,11 +5895,11 @@ class KeuPaginationComponent {
|
|
|
5895
5895
|
}
|
|
5896
5896
|
}
|
|
5897
5897
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5898
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuPaginationComponent, isStandalone: true, selector: "keu-pagination", inputs: { totalPages: "totalPages", currentPage: "currentPage", shape: "shape", size: "size", maxVisible: "maxVisible" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"hostClasses\" aria-label=\"Pagination\">\n <!-- Previous -->\n <button\n class=\"keu-pagination__btn keu-pagination__nav\"\n [class.keu-pagination__nav--disabled]=\"!canPrev\"\n [disabled]=\"!canPrev\"\n (click)=\"prev()\"\n type=\"button\"\n aria-label=\"Previous page\"\n >\n <
|
|
5898
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuPaginationComponent, isStandalone: true, selector: "keu-pagination", inputs: { totalPages: "totalPages", currentPage: "currentPage", shape: "shape", size: "size", maxVisible: "maxVisible" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"hostClasses\" aria-label=\"Pagination\">\n <!-- Previous -->\n <button\n class=\"keu-pagination__btn keu-pagination__nav\"\n [class.keu-pagination__nav--disabled]=\"!canPrev\"\n [disabled]=\"!canPrev\"\n (click)=\"prev()\"\n type=\"button\"\n aria-label=\"Previous page\"\n >\n <keu-icon name=\"chevron-left\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n\n <!-- Page buttons -->\n <ng-container *ngFor=\"let page of pages\">\n <span *ngIf=\"page === '...'\" class=\"keu-pagination__ellipsis\">\u2026</span>\n <button\n *ngIf=\"page !== '...'\"\n class=\"keu-pagination__btn keu-pagination__page\"\n [class.keu-pagination__page--active]=\"page === currentPage\"\n (click)=\"goToPage(page)\"\n type=\"button\"\n [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n [attr.aria-label]=\"'Page ' + page\"\n >{{ page }}</button>\n </ng-container>\n\n <!-- Next -->\n <button\n class=\"keu-pagination__btn keu-pagination__nav\"\n [class.keu-pagination__nav--disabled]=\"!canNext\"\n [disabled]=\"!canNext\"\n (click)=\"next()\"\n type=\"button\"\n aria-label=\"Next page\"\n >\n <keu-icon name=\"chevron-right\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n</nav>\n", styles: [".keu-pagination{display:inline-flex;align-items:center;gap:6px;font-family:var(--keu-font-family)}.keu-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--keu-neutral-200, #E5E7EB);background:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--keu-neutral-600, #4B5563);transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s}.keu-pagination__btn:hover:not(:disabled):not(.keu-pagination__page--active){background:var(--keu-neutral-50, #F9FAFB);border-color:var(--keu-neutral-300, #D1D5DB)}.keu-pagination__nav{color:var(--keu-neutral-500, #6B7280)}.keu-pagination__nav--disabled{opacity:.4;cursor:not-allowed}.keu-pagination__page--active{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;color:#fff;font-weight:600;box-shadow:0 2px 4px #005fac38,inset 0 1px #ffffff1f;transform:scale(1.05)}.keu-pagination__page--active:hover{background:linear-gradient(180deg,#1a73b8,#005fac)}.keu-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:14px;font-weight:500;color:var(--keu-neutral-400, #9CA3AF);-webkit-user-select:none;user-select:none}.keu-pagination--square .keu-pagination__btn{border-radius:8px}.keu-pagination--circle .keu-pagination__btn{border-radius:50%}.keu-pagination--sm{gap:4px}.keu-pagination--sm .keu-pagination__btn,.keu-pagination--sm .keu-pagination__ellipsis{width:30px;height:30px;font-size:12px}.keu-pagination--sm .keu-pagination__nav svg{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5899
5899
|
}
|
|
5900
5900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuPaginationComponent, decorators: [{
|
|
5901
5901
|
type: Component,
|
|
5902
|
-
args: [{ selector: 'keu-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav [class]=\"hostClasses\" aria-label=\"Pagination\">\n <!-- Previous -->\n <button\n class=\"keu-pagination__btn keu-pagination__nav\"\n [class.keu-pagination__nav--disabled]=\"!canPrev\"\n [disabled]=\"!canPrev\"\n (click)=\"prev()\"\n type=\"button\"\n aria-label=\"Previous page\"\n >\n <
|
|
5902
|
+
args: [{ selector: 'keu-pagination', standalone: true, imports: [CommonModule, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav [class]=\"hostClasses\" aria-label=\"Pagination\">\n <!-- Previous -->\n <button\n class=\"keu-pagination__btn keu-pagination__nav\"\n [class.keu-pagination__nav--disabled]=\"!canPrev\"\n [disabled]=\"!canPrev\"\n (click)=\"prev()\"\n type=\"button\"\n aria-label=\"Previous page\"\n >\n <keu-icon name=\"chevron-left\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n\n <!-- Page buttons -->\n <ng-container *ngFor=\"let page of pages\">\n <span *ngIf=\"page === '...'\" class=\"keu-pagination__ellipsis\">\u2026</span>\n <button\n *ngIf=\"page !== '...'\"\n class=\"keu-pagination__btn keu-pagination__page\"\n [class.keu-pagination__page--active]=\"page === currentPage\"\n (click)=\"goToPage(page)\"\n type=\"button\"\n [attr.aria-current]=\"page === currentPage ? 'page' : null\"\n [attr.aria-label]=\"'Page ' + page\"\n >{{ page }}</button>\n </ng-container>\n\n <!-- Next -->\n <button\n class=\"keu-pagination__btn keu-pagination__nav\"\n [class.keu-pagination__nav--disabled]=\"!canNext\"\n [disabled]=\"!canNext\"\n (click)=\"next()\"\n type=\"button\"\n aria-label=\"Next page\"\n >\n <keu-icon name=\"chevron-right\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n</nav>\n", styles: [".keu-pagination{display:inline-flex;align-items:center;gap:6px;font-family:var(--keu-font-family)}.keu-pagination__btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--keu-neutral-200, #E5E7EB);background:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--keu-neutral-600, #4B5563);transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s}.keu-pagination__btn:hover:not(:disabled):not(.keu-pagination__page--active){background:var(--keu-neutral-50, #F9FAFB);border-color:var(--keu-neutral-300, #D1D5DB)}.keu-pagination__nav{color:var(--keu-neutral-500, #6B7280)}.keu-pagination__nav--disabled{opacity:.4;cursor:not-allowed}.keu-pagination__page--active{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;color:#fff;font-weight:600;box-shadow:0 2px 4px #005fac38,inset 0 1px #ffffff1f;transform:scale(1.05)}.keu-pagination__page--active:hover{background:linear-gradient(180deg,#1a73b8,#005fac)}.keu-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:14px;font-weight:500;color:var(--keu-neutral-400, #9CA3AF);-webkit-user-select:none;user-select:none}.keu-pagination--square .keu-pagination__btn{border-radius:8px}.keu-pagination--circle .keu-pagination__btn{border-radius:50%}.keu-pagination--sm{gap:4px}.keu-pagination--sm .keu-pagination__btn,.keu-pagination--sm .keu-pagination__ellipsis{width:30px;height:30px;font-size:12px}.keu-pagination--sm .keu-pagination__nav svg{width:14px;height:14px}\n"] }]
|
|
5903
5903
|
}], propDecorators: { totalPages: [{
|
|
5904
5904
|
type: Input
|
|
5905
5905
|
}], currentPage: [{
|
|
@@ -5982,6 +5982,7 @@ class KeuTableComponent {
|
|
|
5982
5982
|
emptyText = 'Belum ada data yang ditambahkan';
|
|
5983
5983
|
loading = false;
|
|
5984
5984
|
stickyHeader = false;
|
|
5985
|
+
headerVariant = 'default';
|
|
5985
5986
|
// Pagination inputs
|
|
5986
5987
|
paginated = false;
|
|
5987
5988
|
pageSize = 10;
|
|
@@ -6007,6 +6008,7 @@ class KeuTableComponent {
|
|
|
6007
6008
|
this.bordered ? 'keu-table--bordered' : '',
|
|
6008
6009
|
this.compact ? 'keu-table--compact' : '',
|
|
6009
6010
|
this.stickyHeader ? 'keu-table--sticky-header' : '',
|
|
6011
|
+
this.headerVariant === 'primary' ? 'keu-table--header-primary' : '',
|
|
6010
6012
|
]
|
|
6011
6013
|
.filter(Boolean)
|
|
6012
6014
|
.join(' ');
|
|
@@ -6109,11 +6111,11 @@ class KeuTableComponent {
|
|
|
6109
6111
|
this.selectionChange.emit(selected);
|
|
6110
6112
|
}
|
|
6111
6113
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuTableComponent, isStandalone: true, selector: "keu-table", inputs: { columns: "columns", data: "data", selectable: "selectable", striped: "striped", hoverable: "hoverable", bordered: "bordered", compact: "compact", emptyText: "emptyText", loading: "loading", stickyHeader: "stickyHeader", paginated: "paginated", pageSize: "pageSize", currentPage: "currentPage", pageSizes: "pageSizes", paginationShape: "paginationShape" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", pageChange: "pageChange" }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: KeuTableEmptyDirective, descendants: true }, { propertyName: "cellTemplates", predicate: KeuCellDirective }, { propertyName: "headerCellTemplates", predicate: KeuHeaderCellDirective }], ngImport: i0, template: "<div class=\"keu-table-wrapper\">\n <!-- Loading overlay -->\n <div class=\"keu-table__loading\" *ngIf=\"loading\">\n <div class=\"keu-table__spinner\"></div>\n </div>\n\n <table [class]=\"tableClasses\">\n <!-- Header -->\n <thead class=\"keu-table__head\">\n <tr class=\"keu-table__row keu-table__row--header\">\n <!-- Checkbox column (header) -->\n <th class=\"keu-table__th keu-table__th--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"allSelected\"\n (change)=\"toggleAll()\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </th>\n\n <!-- Column headers -->\n <th\n *ngFor=\"let col of columns\"\n class=\"keu-table__th\"\n [class.keu-table__th--sortable]=\"col.sortable\"\n [class.keu-table__th--sorted]=\"sortColumn === col.key\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n (click)=\"onSort(col)\"\n >\n <div class=\"keu-table__th-content\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"getHeaderCellTemplate(col.key) as tmpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"keu-table__th-text\">{{ col.header }}</span>\n </ng-template>\n\n <!-- Sort icon -->\n <span class=\"keu-table__sort-icon\" *ngIf=\"col.sortable\">\n <svg *ngIf=\"sortColumn !== col.key || sortDirection === null\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5v14M5 12l7 7 7-7\"/>\n </svg>\n <svg *ngIf=\"sortColumn === col.key && sortDirection === 'asc'\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 19V5M5 12l7-7 7 7\"/>\n </svg>\n <svg *ngIf=\"sortColumn === col.key && sortDirection === 'desc'\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5v14M5 12l7 7 7-7\"/>\n </svg>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"keu-table__body\">\n <!-- Data rows -->\n <ng-container *ngIf=\"data.length > 0; else emptyState\">\n <tr\n *ngFor=\"let row of paginatedData; let i = index; trackBy: trackByIndex\"\n class=\"keu-table__row\"\n [class.keu-table__row--selected]=\"isRowSelected(i)\"\n (click)=\"onRowClick(row, i)\"\n >\n <!-- Checkbox column -->\n <td class=\"keu-table__td keu-table__td--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRow(i)\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </td>\n\n <!-- Data cells -->\n <td\n *ngFor=\"let col of columns\"\n class=\"keu-table__td\"\n [style.text-align]=\"col.align || 'left'\"\n >\n <ng-container *ngIf=\"getCellTemplate(col.key) as tmpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"tmpl; context: { $implicit: row[col.key], row: row, index: i }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultCell>{{ row[col.key] }}</ng-template>\n </td>\n </tr>\n </ng-container>\n\n <!-- Empty state -->\n <ng-template #emptyState>\n <tr class=\"keu-table__row keu-table__row--empty\">\n <td\n class=\"keu-table__td keu-table__td--empty\"\n [attr.colspan]=\"columns.length + (selectable ? 1 : 0)\"\n >\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate.templateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"keu-table__empty\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"keu-table__empty-icon\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n <polyline points=\"14 2 14 8 20 8\"/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\n <polyline points=\"10 9 9 9 8 9\"/>\n </svg>\n <span class=\"keu-table__empty-text\">{{ emptyText }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n\n <!-- Pagination footer -->\n <div class=\"keu-table__footer\" *ngIf=\"paginated && data.length > 0\">\n <div class=\"keu-table__footer-left\">\n <label class=\"keu-table__page-size\">\n <span class=\"keu-table__page-size-label\">Tampilkan</span>\n <select\n class=\"keu-table__page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange($event)\"\n >\n <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\n </select>\n <span class=\"keu-table__page-size-label\">data</span>\n </label>\n </div>\n\n <div class=\"keu-table__footer-center\">\n <span class=\"keu-table__page-info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} dari {{ data.length }}\n </span>\n </div>\n\n <div class=\"keu-table__footer-right\">\n <keu-pagination\n [totalPages]=\"totalPages\"\n [currentPage]=\"currentPage\"\n [shape]=\"paginationShape\"\n size=\"sm\"\n (pageChange)=\"onPageChange($event)\"\n ></keu-pagination>\n </div>\n </div>\n</div>\n", styles: [".keu-table-wrapper{position:relative;font-family:var(--keu-font-family);width:100%;overflow-x:auto}.keu-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--keu-neutral-700, #374151)}.keu-table__head{position:relative}.keu-table__th{padding:12px 16px;font-size:13px;font-weight:600;color:var(--keu-neutral-600, #4B5563);text-align:left;background:var(--keu-neutral-50, #F9FAFB);border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);white-space:nowrap;-webkit-user-select:none;user-select:none}.keu-table__th:first-child{border-radius:8px 0 0}.keu-table__th:last-child{border-radius:0 8px 0 0}.keu-table__th--sortable{cursor:pointer;transition:color .15s,background .15s}.keu-table__th--sortable:hover{color:var(--keu-neutral-900, #111827);background:var(--keu-neutral-100, #F3F4F6)}.keu-table__th--sorted{color:var(--keu-primary-600, #005FAC)}.keu-table__th--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__th-content{display:flex;align-items:center;gap:6px}.keu-table__th-text{flex:1}.keu-table__sort-icon{display:flex;align-items:center;opacity:.35;transition:opacity .15s;flex-shrink:0}.keu-table__th--sortable:hover .keu-table__sort-icon{opacity:.6}.keu-table__th--sorted .keu-table__sort-icon{opacity:1;color:var(--keu-primary-600, #005FAC)}.keu-table__body .keu-table__row{transition:background .12s}.keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-table__td{padding:12px 16px;border-bottom:1px solid var(--keu-neutral-100, #F3F4F6);vertical-align:middle}.keu-table__td--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__td--empty{padding:0}.keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--striped .keu-table__body .keu-table__row:nth-child(2n){background:var(--keu-neutral-50, #F9FAFB)}.keu-table--striped .keu-table__body .keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--hoverable .keu-table__body .keu-table__row:not(.keu-table__row--empty):hover{background:var(--keu-neutral-50, #F9FAFB)}.keu-table--hoverable .keu-table__body .keu-table__row--selected:hover{background:#005fac0f}.keu-table--bordered{border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:8px}.keu-table--bordered .keu-table__th,.keu-table--bordered .keu-table__td{border-right:1px solid var(--keu-neutral-100, #F3F4F6)}.keu-table--bordered .keu-table__th:last-child,.keu-table--bordered .keu-table__td:last-child{border-right:none}.keu-table--bordered .keu-table__th{border-bottom-color:var(--keu-neutral-200, #E5E7EB)}.keu-table--bordered .keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:none}.keu-table--compact .keu-table__th{padding:8px 12px;font-size:12px}.keu-table--compact .keu-table__td{padding:6px 12px;font-size:13px}.keu-table--sticky-header .keu-table__head{position:sticky;top:0;z-index:2}.keu-table--sticky-header .keu-table__th{box-shadow:0 1px 0 var(--keu-neutral-200, #E5E7EB)}.keu-table__checkbox{position:absolute;opacity:0;width:0;height:0}.keu-table__checkbox-label{display:inline-flex;align-items:center;cursor:pointer}.keu-table__checkbox-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--keu-neutral-300, #D1D5DB);border-radius:4px;background:#fff;transition:background .15s,border-color .15s,box-shadow .15s;flex-shrink:0}.keu-table__checkbox-mark:after{content:\"\";display:block;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .12s}.keu-table__checkbox:checked+.keu-table__checkbox-mark{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;box-shadow:0 1px 2px #005fac2e}.keu-table__checkbox:checked+.keu-table__checkbox-mark:after{opacity:1}.keu-table__checkbox:focus-visible+.keu-table__checkbox-mark{box-shadow:0 0 0 3px #005fac33}.keu-table__checkbox-mark:hover{border-color:var(--keu-neutral-400, #9CA3AF)}.keu-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.keu-table__empty-icon{color:var(--keu-neutral-300, #D1D5DB)}.keu-table__empty-text{font-size:14px;color:var(--keu-neutral-400, #9CA3AF)}.keu-table__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:10;border-radius:8px}.keu-table__spinner{width:24px;height:24px;border:3px solid var(--keu-neutral-200, #E5E7EB);border-top-color:var(--keu-primary-600, #005FAC);border-radius:50%;animation:keu-table-spin .6s linear infinite}@keyframes keu-table-spin{to{transform:rotate(360deg)}}.keu-table__footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB);border-radius:0 0 8px 8px;gap:12px;flex-wrap:wrap}.keu-table__footer-left,.keu-table__footer-center,.keu-table__footer-right{display:flex;align-items:center}.keu-table__footer-left{flex:0 0 auto}.keu-table__footer-center{flex:1 1 auto;justify-content:center}.keu-table__footer-right{flex:0 0 auto}.keu-table__page-size{display:flex;align-items:center;gap:8px;cursor:default}.keu-table__page-size-label{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}.keu-table__page-size-select{appearance:none;-webkit-appearance:none;padding:3px 24px 3px 8px;font-size:12px;font-family:inherit;color:var(--keu-neutral-700, #374151);background-color:#fff;border:1px solid var(--keu-neutral-300, #D1D5DB);border-radius:6px;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.keu-table__page-size-select:hover{border-color:var(--keu-primary-400, #3A8FD6)}.keu-table__page-size-select:focus{border-color:var(--keu-primary-500, #2563EB);box-shadow:0 0 0 3px #2563eb1f}.keu-table__page-info{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KeuPaginationComponent, selector: "keu-pagination", inputs: ["totalPages", "currentPage", "shape", "size", "maxVisible"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuTableComponent, isStandalone: true, selector: "keu-table", inputs: { columns: "columns", data: "data", selectable: "selectable", striped: "striped", hoverable: "hoverable", bordered: "bordered", compact: "compact", emptyText: "emptyText", loading: "loading", stickyHeader: "stickyHeader", headerVariant: "headerVariant", paginated: "paginated", pageSize: "pageSize", currentPage: "currentPage", pageSizes: "pageSizes", paginationShape: "paginationShape" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick", pageChange: "pageChange" }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: KeuTableEmptyDirective, descendants: true }, { propertyName: "cellTemplates", predicate: KeuCellDirective }, { propertyName: "headerCellTemplates", predicate: KeuHeaderCellDirective }], ngImport: i0, template: "<div class=\"keu-table-wrapper\">\n <!-- Loading overlay -->\n <div class=\"keu-table__loading\" *ngIf=\"loading\">\n <div class=\"keu-table__spinner\"></div>\n </div>\n\n <table [class]=\"tableClasses\">\n <!-- Header -->\n <thead class=\"keu-table__head\">\n <tr class=\"keu-table__row keu-table__row--header\">\n <!-- Checkbox column (header) -->\n <th class=\"keu-table__th keu-table__th--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"allSelected\"\n (change)=\"toggleAll()\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </th>\n\n <!-- Column headers -->\n <th\n *ngFor=\"let col of columns\"\n class=\"keu-table__th\"\n [class.keu-table__th--sortable]=\"col.sortable\"\n [class.keu-table__th--sorted]=\"sortColumn === col.key\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n (click)=\"onSort(col)\"\n >\n <div class=\"keu-table__th-content\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"getHeaderCellTemplate(col.key) as tmpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"keu-table__th-text\">{{ col.header }}</span>\n </ng-template>\n\n <!-- Sort icon -->\n <span class=\"keu-table__sort-icon\" *ngIf=\"col.sortable\">\n <keu-icon *ngIf=\"sortColumn !== col.key || sortDirection === null\"\n name=\"arrows-sort\" [size]=\"14\" color=\"currentColor\"></keu-icon>\n <keu-icon *ngIf=\"sortColumn === col.key && sortDirection === 'asc'\"\n name=\"chevron-up\" [size]=\"14\" color=\"currentColor\"></keu-icon>\n <keu-icon *ngIf=\"sortColumn === col.key && sortDirection === 'desc'\"\n name=\"chevron-down\" [size]=\"14\" color=\"currentColor\"></keu-icon>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"keu-table__body\">\n <!-- Data rows -->\n <ng-container *ngIf=\"data.length > 0; else emptyState\">\n <tr\n *ngFor=\"let row of paginatedData; let i = index; trackBy: trackByIndex\"\n class=\"keu-table__row\"\n [class.keu-table__row--selected]=\"isRowSelected(i)\"\n (click)=\"onRowClick(row, i)\"\n >\n <!-- Checkbox column -->\n <td class=\"keu-table__td keu-table__td--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRow(i)\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </td>\n\n <!-- Data cells -->\n <td\n *ngFor=\"let col of columns\"\n class=\"keu-table__td\"\n [style.text-align]=\"col.align || 'left'\"\n >\n <ng-container *ngIf=\"getCellTemplate(col.key) as tmpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"tmpl; context: { $implicit: row[col.key], row: row, index: i }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultCell>{{ row[col.key] }}</ng-template>\n </td>\n </tr>\n </ng-container>\n\n <!-- Empty state -->\n <ng-template #emptyState>\n <tr class=\"keu-table__row keu-table__row--empty\">\n <td\n class=\"keu-table__td keu-table__td--empty\"\n [attr.colspan]=\"columns.length + (selectable ? 1 : 0)\"\n >\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate.templateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"keu-table__empty\">\n <keu-icon name=\"file-text\" [size]=\"40\" color=\"currentColor\"\n class=\"keu-table__empty-icon\" [stroke]=\"1.5\"></keu-icon>\n <span class=\"keu-table__empty-text\">{{ emptyText }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n\n <!-- Pagination footer -->\n <div class=\"keu-table__footer\" *ngIf=\"paginated && data.length > 0\">\n <div class=\"keu-table__footer-left\">\n <label class=\"keu-table__page-size\">\n <span class=\"keu-table__page-size-label\">Tampilkan</span>\n <select\n class=\"keu-table__page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange($event)\"\n >\n <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\n </select>\n <span class=\"keu-table__page-size-label\">data</span>\n </label>\n </div>\n\n <div class=\"keu-table__footer-center\">\n <span class=\"keu-table__page-info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} dari {{ data.length }}\n </span>\n </div>\n\n <div class=\"keu-table__footer-right\">\n <keu-pagination\n [totalPages]=\"totalPages\"\n [currentPage]=\"currentPage\"\n [shape]=\"paginationShape\"\n size=\"sm\"\n (pageChange)=\"onPageChange($event)\"\n ></keu-pagination>\n </div>\n </div>\n</div>\n", styles: [".keu-table-wrapper{position:relative;font-family:var(--keu-font-family);width:100%;overflow-x:auto}.keu-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--keu-neutral-700, #374151)}.keu-table__head{position:relative}.keu-table__th{padding:12px 16px;font-size:13px;font-weight:600;font-family:var(--keu-font-family);color:var(--keu-neutral-600, #4B5563);text-align:left;background:var(--keu-neutral-50, #F9FAFB);border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);white-space:nowrap;-webkit-user-select:none;user-select:none}.keu-table__th:first-child{border-radius:8px 0 0}.keu-table__th:last-child{border-radius:0 8px 0 0}.keu-table__th--sortable{cursor:pointer;transition:color .15s,background .15s}.keu-table__th--sortable:hover{color:var(--keu-neutral-900, #111827);background:var(--keu-neutral-100, #F3F4F6)}.keu-table__th--sorted{color:var(--keu-primary-600, #005FAC)}.keu-table__th--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__th-content{display:flex;align-items:center;gap:6px}.keu-table__th-text{flex:1}.keu-table__sort-icon{display:flex;align-items:center;opacity:.35;transition:opacity .15s;flex-shrink:0}.keu-table__th--sortable:hover .keu-table__sort-icon{opacity:.6}.keu-table__th--sorted .keu-table__sort-icon{opacity:1;color:var(--keu-primary-600, #005FAC)}.keu-table__body .keu-table__row{background:#fff;transition:background .12s}.keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-table__td{padding:12px 16px;border-bottom:1px solid var(--keu-neutral-100, #F3F4F6);vertical-align:middle;font-family:var(--keu-font-family)}.keu-table__td--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__td--empty{padding:0}.keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--striped .keu-table__body .keu-table__row:nth-child(2n){background:var(--keu-neutral-50, #F9FAFB)}.keu-table--striped .keu-table__body .keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--hoverable .keu-table__body .keu-table__row:not(.keu-table__row--empty):hover{background:var(--keu-neutral-50, #F9FAFB)}.keu-table--hoverable .keu-table__body .keu-table__row--selected:hover{background:#005fac0f}.keu-table--bordered{border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:8px}.keu-table--bordered .keu-table__th,.keu-table--bordered .keu-table__td{border-right:1px solid var(--keu-neutral-100, #F3F4F6)}.keu-table--bordered .keu-table__th:last-child,.keu-table--bordered .keu-table__td:last-child{border-right:none}.keu-table--bordered .keu-table__th{border-bottom-color:var(--keu-neutral-200, #E5E7EB)}.keu-table--bordered .keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:none}.keu-table--compact .keu-table__th{padding:8px 12px;font-size:12px}.keu-table--compact .keu-table__td{padding:6px 12px;font-size:13px}.keu-table--sticky-header .keu-table__head{position:sticky;top:0;z-index:2}.keu-table--sticky-header .keu-table__th{box-shadow:0 1px 0 var(--keu-neutral-200, #E5E7EB)}.keu-table--header-primary .keu-table__th{background:linear-gradient(180deg,#3a8fd6,#005fac);color:#fff;border-bottom-color:#004d8a}.keu-table--header-primary .keu-table__th--sortable:hover{background:linear-gradient(180deg,#2d7ec4,#004d8a);color:#fff}.keu-table--header-primary .keu-table__th--sorted{color:#fdd896}.keu-table--header-primary .keu-table__sort-icon{color:#fff9}.keu-table--header-primary .keu-table__th--sorted .keu-table__sort-icon{color:#fdd896}.keu-table__checkbox{position:absolute;opacity:0;width:0;height:0}.keu-table__checkbox-label{display:inline-flex;align-items:center;cursor:pointer}.keu-table__checkbox-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--keu-neutral-300, #D1D5DB);border-radius:4px;background:#fff;transition:background .15s,border-color .15s,box-shadow .15s;flex-shrink:0}.keu-table__checkbox-mark:after{content:\"\";display:block;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .12s}.keu-table__checkbox:checked+.keu-table__checkbox-mark{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;box-shadow:0 1px 2px #005fac2e}.keu-table__checkbox:checked+.keu-table__checkbox-mark:after{opacity:1}.keu-table__checkbox:focus-visible+.keu-table__checkbox-mark{box-shadow:0 0 0 3px #005fac33}.keu-table__checkbox-mark:hover{border-color:var(--keu-neutral-400, #9CA3AF)}.keu-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.keu-table__empty-icon{color:var(--keu-neutral-300, #D1D5DB)}.keu-table__empty-text{font-size:14px;color:var(--keu-neutral-400, #9CA3AF)}.keu-table__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:10;border-radius:8px}.keu-table__spinner{width:24px;height:24px;border:3px solid var(--keu-neutral-200, #E5E7EB);border-top-color:var(--keu-primary-600, #005FAC);border-radius:50%;animation:keu-table-spin .6s linear infinite}@keyframes keu-table-spin{to{transform:rotate(360deg)}}.keu-table__footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB);border-radius:0 0 8px 8px;gap:12px;flex-wrap:wrap}.keu-table__footer-left,.keu-table__footer-center,.keu-table__footer-right{display:flex;align-items:center}.keu-table__footer-left{flex:0 0 auto}.keu-table__footer-center{flex:1 1 auto;justify-content:center}.keu-table__footer-right{flex:0 0 auto}.keu-table__page-size{display:flex;align-items:center;gap:8px;cursor:default}.keu-table__page-size-label{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}.keu-table__page-size-select{appearance:none;-webkit-appearance:none;padding:3px 24px 3px 8px;font-size:12px;font-family:inherit;color:var(--keu-neutral-700, #374151);background-color:#fff;border:1px solid var(--keu-neutral-300, #D1D5DB);border-radius:6px;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.keu-table__page-size-select:hover{border-color:var(--keu-primary-400, #3A8FD6)}.keu-table__page-size-select:focus{border-color:var(--keu-primary-500, #2563EB);box-shadow:0 0 0 3px #2563eb1f}.keu-table__page-info{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KeuPaginationComponent, selector: "keu-pagination", inputs: ["totalPages", "currentPage", "shape", "size", "maxVisible"], outputs: ["pageChange"] }, { kind: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6113
6115
|
}
|
|
6114
6116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuTableComponent, decorators: [{
|
|
6115
6117
|
type: Component,
|
|
6116
|
-
args: [{ selector: 'keu-table', standalone: true, imports: [CommonModule, KeuPaginationComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"keu-table-wrapper\">\n <!-- Loading overlay -->\n <div class=\"keu-table__loading\" *ngIf=\"loading\">\n <div class=\"keu-table__spinner\"></div>\n </div>\n\n <table [class]=\"tableClasses\">\n <!-- Header -->\n <thead class=\"keu-table__head\">\n <tr class=\"keu-table__row keu-table__row--header\">\n <!-- Checkbox column (header) -->\n <th class=\"keu-table__th keu-table__th--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"allSelected\"\n (change)=\"toggleAll()\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </th>\n\n <!-- Column headers -->\n <th\n *ngFor=\"let col of columns\"\n class=\"keu-table__th\"\n [class.keu-table__th--sortable]=\"col.sortable\"\n [class.keu-table__th--sorted]=\"sortColumn === col.key\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n (click)=\"onSort(col)\"\n >\n <div class=\"keu-table__th-content\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"getHeaderCellTemplate(col.key) as tmpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"keu-table__th-text\">{{ col.header }}</span>\n </ng-template>\n\n <!-- Sort icon -->\n <span class=\"keu-table__sort-icon\" *ngIf=\"col.sortable\">\n <svg *ngIf=\"sortColumn !== col.key || sortDirection === null\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5v14M5 12l7 7 7-7\"/>\n </svg>\n <svg *ngIf=\"sortColumn === col.key && sortDirection === 'asc'\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 19V5M5 12l7-7 7 7\"/>\n </svg>\n <svg *ngIf=\"sortColumn === col.key && sortDirection === 'desc'\"\n width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 5v14M5 12l7 7 7-7\"/>\n </svg>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"keu-table__body\">\n <!-- Data rows -->\n <ng-container *ngIf=\"data.length > 0; else emptyState\">\n <tr\n *ngFor=\"let row of paginatedData; let i = index; trackBy: trackByIndex\"\n class=\"keu-table__row\"\n [class.keu-table__row--selected]=\"isRowSelected(i)\"\n (click)=\"onRowClick(row, i)\"\n >\n <!-- Checkbox column -->\n <td class=\"keu-table__td keu-table__td--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRow(i)\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </td>\n\n <!-- Data cells -->\n <td\n *ngFor=\"let col of columns\"\n class=\"keu-table__td\"\n [style.text-align]=\"col.align || 'left'\"\n >\n <ng-container *ngIf=\"getCellTemplate(col.key) as tmpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"tmpl; context: { $implicit: row[col.key], row: row, index: i }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultCell>{{ row[col.key] }}</ng-template>\n </td>\n </tr>\n </ng-container>\n\n <!-- Empty state -->\n <ng-template #emptyState>\n <tr class=\"keu-table__row keu-table__row--empty\">\n <td\n class=\"keu-table__td keu-table__td--empty\"\n [attr.colspan]=\"columns.length + (selectable ? 1 : 0)\"\n >\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate.templateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"keu-table__empty\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"keu-table__empty-icon\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n <polyline points=\"14 2 14 8 20 8\"/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\n <polyline points=\"10 9 9 9 8 9\"/>\n </svg>\n <span class=\"keu-table__empty-text\">{{ emptyText }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n\n <!-- Pagination footer -->\n <div class=\"keu-table__footer\" *ngIf=\"paginated && data.length > 0\">\n <div class=\"keu-table__footer-left\">\n <label class=\"keu-table__page-size\">\n <span class=\"keu-table__page-size-label\">Tampilkan</span>\n <select\n class=\"keu-table__page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange($event)\"\n >\n <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\n </select>\n <span class=\"keu-table__page-size-label\">data</span>\n </label>\n </div>\n\n <div class=\"keu-table__footer-center\">\n <span class=\"keu-table__page-info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} dari {{ data.length }}\n </span>\n </div>\n\n <div class=\"keu-table__footer-right\">\n <keu-pagination\n [totalPages]=\"totalPages\"\n [currentPage]=\"currentPage\"\n [shape]=\"paginationShape\"\n size=\"sm\"\n (pageChange)=\"onPageChange($event)\"\n ></keu-pagination>\n </div>\n </div>\n</div>\n", styles: [".keu-table-wrapper{position:relative;font-family:var(--keu-font-family);width:100%;overflow-x:auto}.keu-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--keu-neutral-700, #374151)}.keu-table__head{position:relative}.keu-table__th{padding:12px 16px;font-size:13px;font-weight:600;color:var(--keu-neutral-600, #4B5563);text-align:left;background:var(--keu-neutral-50, #F9FAFB);border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);white-space:nowrap;-webkit-user-select:none;user-select:none}.keu-table__th:first-child{border-radius:8px 0 0}.keu-table__th:last-child{border-radius:0 8px 0 0}.keu-table__th--sortable{cursor:pointer;transition:color .15s,background .15s}.keu-table__th--sortable:hover{color:var(--keu-neutral-900, #111827);background:var(--keu-neutral-100, #F3F4F6)}.keu-table__th--sorted{color:var(--keu-primary-600, #005FAC)}.keu-table__th--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__th-content{display:flex;align-items:center;gap:6px}.keu-table__th-text{flex:1}.keu-table__sort-icon{display:flex;align-items:center;opacity:.35;transition:opacity .15s;flex-shrink:0}.keu-table__th--sortable:hover .keu-table__sort-icon{opacity:.6}.keu-table__th--sorted .keu-table__sort-icon{opacity:1;color:var(--keu-primary-600, #005FAC)}.keu-table__body .keu-table__row{transition:background .12s}.keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-table__td{padding:12px 16px;border-bottom:1px solid var(--keu-neutral-100, #F3F4F6);vertical-align:middle}.keu-table__td--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__td--empty{padding:0}.keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--striped .keu-table__body .keu-table__row:nth-child(2n){background:var(--keu-neutral-50, #F9FAFB)}.keu-table--striped .keu-table__body .keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--hoverable .keu-table__body .keu-table__row:not(.keu-table__row--empty):hover{background:var(--keu-neutral-50, #F9FAFB)}.keu-table--hoverable .keu-table__body .keu-table__row--selected:hover{background:#005fac0f}.keu-table--bordered{border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:8px}.keu-table--bordered .keu-table__th,.keu-table--bordered .keu-table__td{border-right:1px solid var(--keu-neutral-100, #F3F4F6)}.keu-table--bordered .keu-table__th:last-child,.keu-table--bordered .keu-table__td:last-child{border-right:none}.keu-table--bordered .keu-table__th{border-bottom-color:var(--keu-neutral-200, #E5E7EB)}.keu-table--bordered .keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:none}.keu-table--compact .keu-table__th{padding:8px 12px;font-size:12px}.keu-table--compact .keu-table__td{padding:6px 12px;font-size:13px}.keu-table--sticky-header .keu-table__head{position:sticky;top:0;z-index:2}.keu-table--sticky-header .keu-table__th{box-shadow:0 1px 0 var(--keu-neutral-200, #E5E7EB)}.keu-table__checkbox{position:absolute;opacity:0;width:0;height:0}.keu-table__checkbox-label{display:inline-flex;align-items:center;cursor:pointer}.keu-table__checkbox-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--keu-neutral-300, #D1D5DB);border-radius:4px;background:#fff;transition:background .15s,border-color .15s,box-shadow .15s;flex-shrink:0}.keu-table__checkbox-mark:after{content:\"\";display:block;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .12s}.keu-table__checkbox:checked+.keu-table__checkbox-mark{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;box-shadow:0 1px 2px #005fac2e}.keu-table__checkbox:checked+.keu-table__checkbox-mark:after{opacity:1}.keu-table__checkbox:focus-visible+.keu-table__checkbox-mark{box-shadow:0 0 0 3px #005fac33}.keu-table__checkbox-mark:hover{border-color:var(--keu-neutral-400, #9CA3AF)}.keu-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.keu-table__empty-icon{color:var(--keu-neutral-300, #D1D5DB)}.keu-table__empty-text{font-size:14px;color:var(--keu-neutral-400, #9CA3AF)}.keu-table__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:10;border-radius:8px}.keu-table__spinner{width:24px;height:24px;border:3px solid var(--keu-neutral-200, #E5E7EB);border-top-color:var(--keu-primary-600, #005FAC);border-radius:50%;animation:keu-table-spin .6s linear infinite}@keyframes keu-table-spin{to{transform:rotate(360deg)}}.keu-table__footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB);border-radius:0 0 8px 8px;gap:12px;flex-wrap:wrap}.keu-table__footer-left,.keu-table__footer-center,.keu-table__footer-right{display:flex;align-items:center}.keu-table__footer-left{flex:0 0 auto}.keu-table__footer-center{flex:1 1 auto;justify-content:center}.keu-table__footer-right{flex:0 0 auto}.keu-table__page-size{display:flex;align-items:center;gap:8px;cursor:default}.keu-table__page-size-label{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}.keu-table__page-size-select{appearance:none;-webkit-appearance:none;padding:3px 24px 3px 8px;font-size:12px;font-family:inherit;color:var(--keu-neutral-700, #374151);background-color:#fff;border:1px solid var(--keu-neutral-300, #D1D5DB);border-radius:6px;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.keu-table__page-size-select:hover{border-color:var(--keu-primary-400, #3A8FD6)}.keu-table__page-size-select:focus{border-color:var(--keu-primary-500, #2563EB);box-shadow:0 0 0 3px #2563eb1f}.keu-table__page-info{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}\n"] }]
|
|
6118
|
+
args: [{ selector: 'keu-table', standalone: true, imports: [CommonModule, KeuPaginationComponent, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"keu-table-wrapper\">\n <!-- Loading overlay -->\n <div class=\"keu-table__loading\" *ngIf=\"loading\">\n <div class=\"keu-table__spinner\"></div>\n </div>\n\n <table [class]=\"tableClasses\">\n <!-- Header -->\n <thead class=\"keu-table__head\">\n <tr class=\"keu-table__row keu-table__row--header\">\n <!-- Checkbox column (header) -->\n <th class=\"keu-table__th keu-table__th--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"allSelected\"\n (change)=\"toggleAll()\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </th>\n\n <!-- Column headers -->\n <th\n *ngFor=\"let col of columns\"\n class=\"keu-table__th\"\n [class.keu-table__th--sortable]=\"col.sortable\"\n [class.keu-table__th--sorted]=\"sortColumn === col.key\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n (click)=\"onSort(col)\"\n >\n <div class=\"keu-table__th-content\">\n <!-- Custom header template -->\n <ng-container *ngIf=\"getHeaderCellTemplate(col.key) as tmpl; else defaultHeader\">\n <ng-container *ngTemplateOutlet=\"tmpl; context: { $implicit: col }\"></ng-container>\n </ng-container>\n <ng-template #defaultHeader>\n <span class=\"keu-table__th-text\">{{ col.header }}</span>\n </ng-template>\n\n <!-- Sort icon -->\n <span class=\"keu-table__sort-icon\" *ngIf=\"col.sortable\">\n <keu-icon *ngIf=\"sortColumn !== col.key || sortDirection === null\"\n name=\"arrows-sort\" [size]=\"14\" color=\"currentColor\"></keu-icon>\n <keu-icon *ngIf=\"sortColumn === col.key && sortDirection === 'asc'\"\n name=\"chevron-up\" [size]=\"14\" color=\"currentColor\"></keu-icon>\n <keu-icon *ngIf=\"sortColumn === col.key && sortDirection === 'desc'\"\n name=\"chevron-down\" [size]=\"14\" color=\"currentColor\"></keu-icon>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"keu-table__body\">\n <!-- Data rows -->\n <ng-container *ngIf=\"data.length > 0; else emptyState\">\n <tr\n *ngFor=\"let row of paginatedData; let i = index; trackBy: trackByIndex\"\n class=\"keu-table__row\"\n [class.keu-table__row--selected]=\"isRowSelected(i)\"\n (click)=\"onRowClick(row, i)\"\n >\n <!-- Checkbox column -->\n <td class=\"keu-table__td keu-table__td--checkbox\" *ngIf=\"selectable\">\n <label class=\"keu-table__checkbox-label\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"keu-table__checkbox\"\n [checked]=\"isRowSelected(i)\"\n (change)=\"toggleRow(i)\"\n />\n <span class=\"keu-table__checkbox-mark\"></span>\n </label>\n </td>\n\n <!-- Data cells -->\n <td\n *ngFor=\"let col of columns\"\n class=\"keu-table__td\"\n [style.text-align]=\"col.align || 'left'\"\n >\n <ng-container *ngIf=\"getCellTemplate(col.key) as tmpl; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"tmpl; context: { $implicit: row[col.key], row: row, index: i }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultCell>{{ row[col.key] }}</ng-template>\n </td>\n </tr>\n </ng-container>\n\n <!-- Empty state -->\n <ng-template #emptyState>\n <tr class=\"keu-table__row keu-table__row--empty\">\n <td\n class=\"keu-table__td keu-table__td--empty\"\n [attr.colspan]=\"columns.length + (selectable ? 1 : 0)\"\n >\n <ng-container *ngIf=\"emptyTemplate; else defaultEmpty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate.templateRef\"></ng-container>\n </ng-container>\n <ng-template #defaultEmpty>\n <div class=\"keu-table__empty\">\n <keu-icon name=\"file-text\" [size]=\"40\" color=\"currentColor\"\n class=\"keu-table__empty-icon\" [stroke]=\"1.5\"></keu-icon>\n <span class=\"keu-table__empty-text\">{{ emptyText }}</span>\n </div>\n </ng-template>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n\n <!-- Pagination footer -->\n <div class=\"keu-table__footer\" *ngIf=\"paginated && data.length > 0\">\n <div class=\"keu-table__footer-left\">\n <label class=\"keu-table__page-size\">\n <span class=\"keu-table__page-size-label\">Tampilkan</span>\n <select\n class=\"keu-table__page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange($event)\"\n >\n <option *ngFor=\"let size of pageSizes\" [value]=\"size\">{{ size }}</option>\n </select>\n <span class=\"keu-table__page-size-label\">data</span>\n </label>\n </div>\n\n <div class=\"keu-table__footer-center\">\n <span class=\"keu-table__page-info\">\n {{ paginationStart }}\u2013{{ paginationEnd }} dari {{ data.length }}\n </span>\n </div>\n\n <div class=\"keu-table__footer-right\">\n <keu-pagination\n [totalPages]=\"totalPages\"\n [currentPage]=\"currentPage\"\n [shape]=\"paginationShape\"\n size=\"sm\"\n (pageChange)=\"onPageChange($event)\"\n ></keu-pagination>\n </div>\n </div>\n</div>\n", styles: [".keu-table-wrapper{position:relative;font-family:var(--keu-font-family);width:100%;overflow-x:auto}.keu-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--keu-neutral-700, #374151)}.keu-table__head{position:relative}.keu-table__th{padding:12px 16px;font-size:13px;font-weight:600;font-family:var(--keu-font-family);color:var(--keu-neutral-600, #4B5563);text-align:left;background:var(--keu-neutral-50, #F9FAFB);border-bottom:1px solid var(--keu-neutral-200, #E5E7EB);white-space:nowrap;-webkit-user-select:none;user-select:none}.keu-table__th:first-child{border-radius:8px 0 0}.keu-table__th:last-child{border-radius:0 8px 0 0}.keu-table__th--sortable{cursor:pointer;transition:color .15s,background .15s}.keu-table__th--sortable:hover{color:var(--keu-neutral-900, #111827);background:var(--keu-neutral-100, #F3F4F6)}.keu-table__th--sorted{color:var(--keu-primary-600, #005FAC)}.keu-table__th--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__th-content{display:flex;align-items:center;gap:6px}.keu-table__th-text{flex:1}.keu-table__sort-icon{display:flex;align-items:center;opacity:.35;transition:opacity .15s;flex-shrink:0}.keu-table__th--sortable:hover .keu-table__sort-icon{opacity:.6}.keu-table__th--sorted .keu-table__sort-icon{opacity:1;color:var(--keu-primary-600, #005FAC)}.keu-table__body .keu-table__row{background:#fff;transition:background .12s}.keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-table__td{padding:12px 16px;border-bottom:1px solid var(--keu-neutral-100, #F3F4F6);vertical-align:middle;font-family:var(--keu-font-family)}.keu-table__td--checkbox{width:48px;padding:12px 12px 12px 16px}.keu-table__td--empty{padding:0}.keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--striped .keu-table__body .keu-table__row:nth-child(2n){background:var(--keu-neutral-50, #F9FAFB)}.keu-table--striped .keu-table__body .keu-table__row--selected{background:var(--keu-primary-50, #F0F8FE)}.keu-table--hoverable .keu-table__body .keu-table__row:not(.keu-table__row--empty):hover{background:var(--keu-neutral-50, #F9FAFB)}.keu-table--hoverable .keu-table__body .keu-table__row--selected:hover{background:#005fac0f}.keu-table--bordered{border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:8px}.keu-table--bordered .keu-table__th,.keu-table--bordered .keu-table__td{border-right:1px solid var(--keu-neutral-100, #F3F4F6)}.keu-table--bordered .keu-table__th:last-child,.keu-table--bordered .keu-table__td:last-child{border-right:none}.keu-table--bordered .keu-table__th{border-bottom-color:var(--keu-neutral-200, #E5E7EB)}.keu-table--bordered .keu-table__body .keu-table__row:last-child .keu-table__td{border-bottom:none}.keu-table--compact .keu-table__th{padding:8px 12px;font-size:12px}.keu-table--compact .keu-table__td{padding:6px 12px;font-size:13px}.keu-table--sticky-header .keu-table__head{position:sticky;top:0;z-index:2}.keu-table--sticky-header .keu-table__th{box-shadow:0 1px 0 var(--keu-neutral-200, #E5E7EB)}.keu-table--header-primary .keu-table__th{background:linear-gradient(180deg,#3a8fd6,#005fac);color:#fff;border-bottom-color:#004d8a}.keu-table--header-primary .keu-table__th--sortable:hover{background:linear-gradient(180deg,#2d7ec4,#004d8a);color:#fff}.keu-table--header-primary .keu-table__th--sorted{color:#fdd896}.keu-table--header-primary .keu-table__sort-icon{color:#fff9}.keu-table--header-primary .keu-table__th--sorted .keu-table__sort-icon{color:#fdd896}.keu-table__checkbox{position:absolute;opacity:0;width:0;height:0}.keu-table__checkbox-label{display:inline-flex;align-items:center;cursor:pointer}.keu-table__checkbox-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--keu-neutral-300, #D1D5DB);border-radius:4px;background:#fff;transition:background .15s,border-color .15s,box-shadow .15s;flex-shrink:0}.keu-table__checkbox-mark:after{content:\"\";display:block;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .12s}.keu-table__checkbox:checked+.keu-table__checkbox-mark{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;box-shadow:0 1px 2px #005fac2e}.keu-table__checkbox:checked+.keu-table__checkbox-mark:after{opacity:1}.keu-table__checkbox:focus-visible+.keu-table__checkbox-mark{box-shadow:0 0 0 3px #005fac33}.keu-table__checkbox-mark:hover{border-color:var(--keu-neutral-400, #9CA3AF)}.keu-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.keu-table__empty-icon{color:var(--keu-neutral-300, #D1D5DB)}.keu-table__empty-text{font-size:14px;color:var(--keu-neutral-400, #9CA3AF)}.keu-table__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#ffffffb3;z-index:10;border-radius:8px}.keu-table__spinner{width:24px;height:24px;border:3px solid var(--keu-neutral-200, #E5E7EB);border-top-color:var(--keu-primary-600, #005FAC);border-radius:50%;animation:keu-table-spin .6s linear infinite}@keyframes keu-table-spin{to{transform:rotate(360deg)}}.keu-table__footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--keu-neutral-200, #E5E7EB);background:var(--keu-neutral-50, #F9FAFB);border-radius:0 0 8px 8px;gap:12px;flex-wrap:wrap}.keu-table__footer-left,.keu-table__footer-center,.keu-table__footer-right{display:flex;align-items:center}.keu-table__footer-left{flex:0 0 auto}.keu-table__footer-center{flex:1 1 auto;justify-content:center}.keu-table__footer-right{flex:0 0 auto}.keu-table__page-size{display:flex;align-items:center;gap:8px;cursor:default}.keu-table__page-size-label{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}.keu-table__page-size-select{appearance:none;-webkit-appearance:none;padding:3px 24px 3px 8px;font-size:12px;font-family:inherit;color:var(--keu-neutral-700, #374151);background-color:#fff;border:1px solid var(--keu-neutral-300, #D1D5DB);border-radius:6px;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center}.keu-table__page-size-select:hover{border-color:var(--keu-primary-400, #3A8FD6)}.keu-table__page-size-select:focus{border-color:var(--keu-primary-500, #2563EB);box-shadow:0 0 0 3px #2563eb1f}.keu-table__page-info{font-size:12px;color:var(--keu-neutral-500, #6B7280);white-space:nowrap}\n"] }]
|
|
6117
6119
|
}], propDecorators: { columns: [{
|
|
6118
6120
|
type: Input
|
|
6119
6121
|
}], data: [{
|
|
@@ -6134,6 +6136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
6134
6136
|
type: Input
|
|
6135
6137
|
}], stickyHeader: [{
|
|
6136
6138
|
type: Input
|
|
6139
|
+
}], headerVariant: [{
|
|
6140
|
+
type: Input
|
|
6137
6141
|
}], paginated: [{
|
|
6138
6142
|
type: Input
|
|
6139
6143
|
}], pageSize: [{
|
|
@@ -6371,11 +6375,11 @@ class KeuAlertComponent {
|
|
|
6371
6375
|
this.dismissed.emit();
|
|
6372
6376
|
}
|
|
6373
6377
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6374
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuAlertComponent, isStandalone: true, selector: "keu-alert", inputs: { variant: "variant", title: "title", content: "content", dismissible: "dismissible" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [class]=\"hostClasses\" *ngIf=\"visible\" role=\"alert\">\n <!-- Icon -->\n <span class=\"keu-alert__icon\">\n <!-- Info/check circle for default & success -->\n <svg\n *ngIf=\"variant === 'default' || variant === 'success'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n />\n <path\n d=\"M7 10l2 2 4-4\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- Warning triangle for warning & danger -->\n <svg\n *ngIf=\"variant === 'warning' || variant === 'danger'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n <path d=\"M10 8v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <circle cx=\"10\" cy=\"14\" r=\"0.75\" fill=\"currentColor\"/>\n </svg>\n </span>\n\n <!-- Body -->\n <div class=\"keu-alert__body\">\n <span class=\"keu-alert__title\" *ngIf=\"title\">{{ title }}</span>\n <span class=\"keu-alert__content\" *ngIf=\"content\">{{ content }}</span>\n <ng-content></ng-content>\n </div>\n\n <!-- Close button -->\n <button\n *ngIf=\"dismissible\"\n class=\"keu-alert__close\"\n (click)=\"dismiss()\"\n aria-label=\"Tutup\"\n type=\"button\"\n >\n <
|
|
6378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuAlertComponent, isStandalone: true, selector: "keu-alert", inputs: { variant: "variant", title: "title", content: "content", dismissible: "dismissible" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [class]=\"hostClasses\" *ngIf=\"visible\" role=\"alert\">\n <!-- Icon -->\n <span class=\"keu-alert__icon\">\n <!-- Info/check circle for default & success -->\n <svg\n *ngIf=\"variant === 'default' || variant === 'success'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n />\n <path\n d=\"M7 10l2 2 4-4\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- Warning triangle for warning & danger -->\n <svg\n *ngIf=\"variant === 'warning' || variant === 'danger'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n <path d=\"M10 8v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <circle cx=\"10\" cy=\"14\" r=\"0.75\" fill=\"currentColor\"/>\n </svg>\n </span>\n\n <!-- Body -->\n <div class=\"keu-alert__body\">\n <span class=\"keu-alert__title\" *ngIf=\"title\">{{ title }}</span>\n <span class=\"keu-alert__content\" *ngIf=\"content\">{{ content }}</span>\n <ng-content></ng-content>\n </div>\n\n <!-- Close button -->\n <button\n *ngIf=\"dismissible\"\n class=\"keu-alert__close\"\n (click)=\"dismiss()\"\n aria-label=\"Tutup\"\n type=\"button\"\n >\n <keu-icon name=\"x\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n</div>\n", styles: [".keu-alert{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:8px;font-family:var(--keu-font-family);border:1px solid transparent;transition:opacity .2s,transform .2s}.keu-alert__icon{display:inline-flex;flex-shrink:0;margin-top:1px}.keu-alert__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.keu-alert__title{font-size:14px;font-weight:600;line-height:22px}.keu-alert__content{font-size:13px;font-weight:400;line-height:20px}.keu-alert button{font-family:inherit}.keu-alert__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;margin:-4px -6px -4px 0;padding:0;border:none;border-radius:6px;background:transparent;cursor:pointer;transition:background .15s,opacity .15s;opacity:.6}.keu-alert__close:hover{opacity:1;background:#0000000f}.keu-alert--default{background:#ebf5ff;border-color:#bfdbfe}.keu-alert--default .keu-alert__icon{color:#1d71b8}.keu-alert--default .keu-alert__title{color:#1d4e89}.keu-alert--default .keu-alert__content{color:#2a6db5}.keu-alert--default .keu-alert__close{color:#1d4e89}.keu-alert--warning{background:#fff8eb;border-color:#fde68a}.keu-alert--warning .keu-alert__icon{color:#d97706}.keu-alert--warning .keu-alert__title{color:#b45309}.keu-alert--warning .keu-alert__content{color:#d97706}.keu-alert--warning .keu-alert__close{color:#b45309}.keu-alert--danger{background:#fef2f2;border-color:#fecaca}.keu-alert--danger .keu-alert__icon{color:#dc2626}.keu-alert--danger .keu-alert__title{color:#991b1b}.keu-alert--danger .keu-alert__content{color:#dc2626}.keu-alert--danger .keu-alert__close{color:#991b1b}.keu-alert--success{background:#ecfdf5;border-color:#a7f3d0}.keu-alert--success .keu-alert__icon{color:#059669}.keu-alert--success .keu-alert__title{color:#065f46}.keu-alert--success .keu-alert__content{color:#059669}.keu-alert--success .keu-alert__close{color:#065f46}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6375
6379
|
}
|
|
6376
6380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuAlertComponent, decorators: [{
|
|
6377
6381
|
type: Component,
|
|
6378
|
-
args: [{ selector: 'keu-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"hostClasses\" *ngIf=\"visible\" role=\"alert\">\n <!-- Icon -->\n <span class=\"keu-alert__icon\">\n <!-- Info/check circle for default & success -->\n <svg\n *ngIf=\"variant === 'default' || variant === 'success'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n />\n <path\n d=\"M7 10l2 2 4-4\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- Warning triangle for warning & danger -->\n <svg\n *ngIf=\"variant === 'warning' || variant === 'danger'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n <path d=\"M10 8v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <circle cx=\"10\" cy=\"14\" r=\"0.75\" fill=\"currentColor\"/>\n </svg>\n </span>\n\n <!-- Body -->\n <div class=\"keu-alert__body\">\n <span class=\"keu-alert__title\" *ngIf=\"title\">{{ title }}</span>\n <span class=\"keu-alert__content\" *ngIf=\"content\">{{ content }}</span>\n <ng-content></ng-content>\n </div>\n\n <!-- Close button -->\n <button\n *ngIf=\"dismissible\"\n class=\"keu-alert__close\"\n (click)=\"dismiss()\"\n aria-label=\"Tutup\"\n type=\"button\"\n >\n <
|
|
6382
|
+
args: [{ selector: 'keu-alert', standalone: true, imports: [CommonModule, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"hostClasses\" *ngIf=\"visible\" role=\"alert\">\n <!-- Icon -->\n <span class=\"keu-alert__icon\">\n <!-- Info/check circle for default & success -->\n <svg\n *ngIf=\"variant === 'default' || variant === 'success'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n />\n <path\n d=\"M7 10l2 2 4-4\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- Warning triangle for warning & danger -->\n <svg\n *ngIf=\"variant === 'warning' || variant === 'danger'\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n fill=\"currentColor\" opacity=\"0.15\"\n />\n <path\n d=\"M8.57 3.22 1.52 15.26A1.67 1.67 0 0 0 2.95 17.75h14.1a1.67 1.67 0 0 0 1.43-2.49L11.43 3.22a1.67 1.67 0 0 0-2.86 0Z\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"\n />\n <path d=\"M10 8v3\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <circle cx=\"10\" cy=\"14\" r=\"0.75\" fill=\"currentColor\"/>\n </svg>\n </span>\n\n <!-- Body -->\n <div class=\"keu-alert__body\">\n <span class=\"keu-alert__title\" *ngIf=\"title\">{{ title }}</span>\n <span class=\"keu-alert__content\" *ngIf=\"content\">{{ content }}</span>\n <ng-content></ng-content>\n </div>\n\n <!-- Close button -->\n <button\n *ngIf=\"dismissible\"\n class=\"keu-alert__close\"\n (click)=\"dismiss()\"\n aria-label=\"Tutup\"\n type=\"button\"\n >\n <keu-icon name=\"x\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n</div>\n", styles: [".keu-alert{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:8px;font-family:var(--keu-font-family);border:1px solid transparent;transition:opacity .2s,transform .2s}.keu-alert__icon{display:inline-flex;flex-shrink:0;margin-top:1px}.keu-alert__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.keu-alert__title{font-size:14px;font-weight:600;line-height:22px}.keu-alert__content{font-size:13px;font-weight:400;line-height:20px}.keu-alert button{font-family:inherit}.keu-alert__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;margin:-4px -6px -4px 0;padding:0;border:none;border-radius:6px;background:transparent;cursor:pointer;transition:background .15s,opacity .15s;opacity:.6}.keu-alert__close:hover{opacity:1;background:#0000000f}.keu-alert--default{background:#ebf5ff;border-color:#bfdbfe}.keu-alert--default .keu-alert__icon{color:#1d71b8}.keu-alert--default .keu-alert__title{color:#1d4e89}.keu-alert--default .keu-alert__content{color:#2a6db5}.keu-alert--default .keu-alert__close{color:#1d4e89}.keu-alert--warning{background:#fff8eb;border-color:#fde68a}.keu-alert--warning .keu-alert__icon{color:#d97706}.keu-alert--warning .keu-alert__title{color:#b45309}.keu-alert--warning .keu-alert__content{color:#d97706}.keu-alert--warning .keu-alert__close{color:#b45309}.keu-alert--danger{background:#fef2f2;border-color:#fecaca}.keu-alert--danger .keu-alert__icon{color:#dc2626}.keu-alert--danger .keu-alert__title{color:#991b1b}.keu-alert--danger .keu-alert__content{color:#dc2626}.keu-alert--danger .keu-alert__close{color:#991b1b}.keu-alert--success{background:#ecfdf5;border-color:#a7f3d0}.keu-alert--success .keu-alert__icon{color:#059669}.keu-alert--success .keu-alert__title{color:#065f46}.keu-alert--success .keu-alert__content{color:#059669}.keu-alert--success .keu-alert__close{color:#065f46}\n"] }]
|
|
6379
6383
|
}], propDecorators: { variant: [{
|
|
6380
6384
|
type: Input
|
|
6381
6385
|
}], title: [{
|
|
@@ -6488,11 +6492,11 @@ class KeuBreadcrumbComponent {
|
|
|
6488
6492
|
this.itemClick.emit(item);
|
|
6489
6493
|
}
|
|
6490
6494
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuBreadcrumbComponent, isStandalone: true, selector: "keu-breadcrumb", inputs: { items: "items", separator: "separator", size: "size", activeStyle: "activeStyle" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<nav [class]=\"hostClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"keu-breadcrumb__list\">\n <li\n *ngFor=\"let item of items; let i = index; let last = last\"\n class=\"keu-breadcrumb__item\"\n [class.keu-breadcrumb__item--active]=\"last\"\n >\n <!-- Separator (before every item except first) -->\n <span *ngIf=\"i > 0\" class=\"keu-breadcrumb__separator\" aria-hidden=\"true\">\n <!-- Chevron \u203A -->\n <
|
|
6495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuBreadcrumbComponent, isStandalone: true, selector: "keu-breadcrumb", inputs: { items: "items", separator: "separator", size: "size", activeStyle: "activeStyle" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<nav [class]=\"hostClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"keu-breadcrumb__list\">\n <li\n *ngFor=\"let item of items; let i = index; let last = last\"\n class=\"keu-breadcrumb__item\"\n [class.keu-breadcrumb__item--active]=\"last\"\n >\n <!-- Separator (before every item except first) -->\n <span *ngIf=\"i > 0\" class=\"keu-breadcrumb__separator\" aria-hidden=\"true\">\n <!-- Chevron \u203A -->\n <keu-icon\n *ngIf=\"separator === 'chevron'\"\n name=\"chevron-right\" [size]=\"16\" color=\"currentColor\"\n ></keu-icon>\n <!-- Slash / -->\n <span *ngIf=\"separator === 'slash'\" class=\"keu-breadcrumb__slash\">/</span>\n </span>\n\n <!-- Collapsed item (ellipsis) -->\n <span *ngIf=\"item.collapsed\" class=\"keu-breadcrumb__collapsed\">\u2026</span>\n\n <!-- Regular item -->\n <ng-container *ngIf=\"!item.collapsed\">\n <!-- Link (non-active items) -->\n <a\n *ngIf=\"!last\"\n class=\"keu-breadcrumb__link\"\n [href]=\"item.url || '#'\"\n (click)=\"onItemClick(item, $event)\"\n >\n <!-- Home icon -->\n <keu-icon\n *ngIf=\"item.icon === 'home'\"\n class=\"keu-breadcrumb__home-icon\"\n name=\"home\" [size]=\"18\" color=\"currentColor\" [stroke]=\"1.8\"\n ></keu-icon>\n <span *ngIf=\"item.label && item.icon !== 'home'\">{{ item.label }}</span>\n </a>\n\n <!-- Active item (last) -->\n <span *ngIf=\"last\" class=\"keu-breadcrumb__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n </ng-container>\n </li>\n </ol>\n</nav>\n", styles: [".keu-breadcrumb{font-family:var(--keu-font-family)}.keu-breadcrumb__list{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}.keu-breadcrumb__item{display:inline-flex;align-items:center}.keu-breadcrumb__separator{display:inline-flex;align-items:center;color:var(--keu-neutral-400, #9CA3AF);flex-shrink:0}.keu-breadcrumb__slash{font-weight:400;color:var(--keu-neutral-400, #9CA3AF)}.keu-breadcrumb__link{display:inline-flex;align-items:center;text-decoration:none;color:var(--keu-neutral-500, #6B7280);transition:color .15s;white-space:nowrap}.keu-breadcrumb__link:hover{color:var(--keu-primary-600, #005FAC)}.keu-breadcrumb__home-icon{flex-shrink:0}.keu-breadcrumb__collapsed{color:var(--keu-neutral-500, #6B7280);letter-spacing:.05em;cursor:default}.keu-breadcrumb__current{font-weight:700;color:var(--keu-neutral-900, #111827);white-space:nowrap}.keu-breadcrumb--sm .keu-breadcrumb__link,.keu-breadcrumb--sm .keu-breadcrumb__current,.keu-breadcrumb--sm .keu-breadcrumb__collapsed{font-size:14px;line-height:20px}.keu-breadcrumb--sm .keu-breadcrumb__separator{margin:0 6px}.keu-breadcrumb--sm .keu-breadcrumb__slash{font-size:14px}.keu-breadcrumb--sm .keu-breadcrumb__home-icon{width:16px;height:16px}.keu-breadcrumb--md .keu-breadcrumb__link,.keu-breadcrumb--md .keu-breadcrumb__current,.keu-breadcrumb--md .keu-breadcrumb__collapsed{font-size:16px;line-height:24px}.keu-breadcrumb--md .keu-breadcrumb__separator{margin:0 8px}.keu-breadcrumb--md .keu-breadcrumb__slash{font-size:16px}.keu-breadcrumb--md .keu-breadcrumb__home-icon{width:18px;height:18px}.keu-breadcrumb--active-pill .keu-breadcrumb__current{background:var(--keu-primary-50, #EBF5FF);color:var(--keu-primary-700, #005FAC);border-radius:6px}.keu-breadcrumb--active-pill.keu-breadcrumb--sm .keu-breadcrumb__current{padding:2px 10px}.keu-breadcrumb--active-pill.keu-breadcrumb--md .keu-breadcrumb__current{padding:3px 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6492
6496
|
}
|
|
6493
6497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuBreadcrumbComponent, decorators: [{
|
|
6494
6498
|
type: Component,
|
|
6495
|
-
args: [{ selector: 'keu-breadcrumb', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav [class]=\"hostClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"keu-breadcrumb__list\">\n <li\n *ngFor=\"let item of items; let i = index; let last = last\"\n class=\"keu-breadcrumb__item\"\n [class.keu-breadcrumb__item--active]=\"last\"\n >\n <!-- Separator (before every item except first) -->\n <span *ngIf=\"i > 0\" class=\"keu-breadcrumb__separator\" aria-hidden=\"true\">\n <!-- Chevron \u203A -->\n <
|
|
6499
|
+
args: [{ selector: 'keu-breadcrumb', standalone: true, imports: [CommonModule, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav [class]=\"hostClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"keu-breadcrumb__list\">\n <li\n *ngFor=\"let item of items; let i = index; let last = last\"\n class=\"keu-breadcrumb__item\"\n [class.keu-breadcrumb__item--active]=\"last\"\n >\n <!-- Separator (before every item except first) -->\n <span *ngIf=\"i > 0\" class=\"keu-breadcrumb__separator\" aria-hidden=\"true\">\n <!-- Chevron \u203A -->\n <keu-icon\n *ngIf=\"separator === 'chevron'\"\n name=\"chevron-right\" [size]=\"16\" color=\"currentColor\"\n ></keu-icon>\n <!-- Slash / -->\n <span *ngIf=\"separator === 'slash'\" class=\"keu-breadcrumb__slash\">/</span>\n </span>\n\n <!-- Collapsed item (ellipsis) -->\n <span *ngIf=\"item.collapsed\" class=\"keu-breadcrumb__collapsed\">\u2026</span>\n\n <!-- Regular item -->\n <ng-container *ngIf=\"!item.collapsed\">\n <!-- Link (non-active items) -->\n <a\n *ngIf=\"!last\"\n class=\"keu-breadcrumb__link\"\n [href]=\"item.url || '#'\"\n (click)=\"onItemClick(item, $event)\"\n >\n <!-- Home icon -->\n <keu-icon\n *ngIf=\"item.icon === 'home'\"\n class=\"keu-breadcrumb__home-icon\"\n name=\"home\" [size]=\"18\" color=\"currentColor\" [stroke]=\"1.8\"\n ></keu-icon>\n <span *ngIf=\"item.label && item.icon !== 'home'\">{{ item.label }}</span>\n </a>\n\n <!-- Active item (last) -->\n <span *ngIf=\"last\" class=\"keu-breadcrumb__current\" aria-current=\"page\">\n {{ item.label }}\n </span>\n </ng-container>\n </li>\n </ol>\n</nav>\n", styles: [".keu-breadcrumb{font-family:var(--keu-font-family)}.keu-breadcrumb__list{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}.keu-breadcrumb__item{display:inline-flex;align-items:center}.keu-breadcrumb__separator{display:inline-flex;align-items:center;color:var(--keu-neutral-400, #9CA3AF);flex-shrink:0}.keu-breadcrumb__slash{font-weight:400;color:var(--keu-neutral-400, #9CA3AF)}.keu-breadcrumb__link{display:inline-flex;align-items:center;text-decoration:none;color:var(--keu-neutral-500, #6B7280);transition:color .15s;white-space:nowrap}.keu-breadcrumb__link:hover{color:var(--keu-primary-600, #005FAC)}.keu-breadcrumb__home-icon{flex-shrink:0}.keu-breadcrumb__collapsed{color:var(--keu-neutral-500, #6B7280);letter-spacing:.05em;cursor:default}.keu-breadcrumb__current{font-weight:700;color:var(--keu-neutral-900, #111827);white-space:nowrap}.keu-breadcrumb--sm .keu-breadcrumb__link,.keu-breadcrumb--sm .keu-breadcrumb__current,.keu-breadcrumb--sm .keu-breadcrumb__collapsed{font-size:14px;line-height:20px}.keu-breadcrumb--sm .keu-breadcrumb__separator{margin:0 6px}.keu-breadcrumb--sm .keu-breadcrumb__slash{font-size:14px}.keu-breadcrumb--sm .keu-breadcrumb__home-icon{width:16px;height:16px}.keu-breadcrumb--md .keu-breadcrumb__link,.keu-breadcrumb--md .keu-breadcrumb__current,.keu-breadcrumb--md .keu-breadcrumb__collapsed{font-size:16px;line-height:24px}.keu-breadcrumb--md .keu-breadcrumb__separator{margin:0 8px}.keu-breadcrumb--md .keu-breadcrumb__slash{font-size:16px}.keu-breadcrumb--md .keu-breadcrumb__home-icon{width:18px;height:18px}.keu-breadcrumb--active-pill .keu-breadcrumb__current{background:var(--keu-primary-50, #EBF5FF);color:var(--keu-primary-700, #005FAC);border-radius:6px}.keu-breadcrumb--active-pill.keu-breadcrumb--sm .keu-breadcrumb__current{padding:2px 10px}.keu-breadcrumb--active-pill.keu-breadcrumb--md .keu-breadcrumb__current{padding:3px 12px}\n"] }]
|
|
6496
6500
|
}], propDecorators: { items: [{
|
|
6497
6501
|
type: Input
|
|
6498
6502
|
}], separator: [{
|
|
@@ -6535,11 +6539,11 @@ class KeuButtonGroupComponent {
|
|
|
6535
6539
|
this.scrollContainer?.nativeElement.scrollBy({ left: 160, behavior: 'smooth' });
|
|
6536
6540
|
}
|
|
6537
6541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6538
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuButtonGroupComponent, isStandalone: true, selector: "keu-button-group", inputs: { items: "items", value: "value", variant: "variant", scrollable: "scrollable" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div [class]=\"hostClasses\">\n <!-- Scroll left arrow (scrollable chip variant) -->\n <button\n *ngIf=\"scrollable\"\n class=\"keu-button-group__arrow keu-button-group__arrow--left\"\n (click)=\"scrollLeft()\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <
|
|
6542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuButtonGroupComponent, isStandalone: true, selector: "keu-button-group", inputs: { items: "items", value: "value", variant: "variant", scrollable: "scrollable" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div [class]=\"hostClasses\">\n <!-- Scroll left arrow (scrollable chip variant) -->\n <button\n *ngIf=\"scrollable\"\n class=\"keu-button-group__arrow keu-button-group__arrow--left\"\n (click)=\"scrollLeft()\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <keu-icon name=\"chevron-left\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n\n <!-- Items container -->\n <div\n class=\"keu-button-group__items\"\n #scrollContainer\n [class.keu-button-group__items--scrollable]=\"scrollable\"\n role=\"group\"\n >\n <button\n *ngFor=\"let item of items\"\n type=\"button\"\n class=\"keu-button-group__btn\"\n [class.keu-button-group__btn--active]=\"isActive(item)\"\n (click)=\"select(item)\"\n [attr.aria-pressed]=\"isActive(item)\"\n >\n <span class=\"keu-button-group__label\">{{ item.label }}</span>\n <span\n *ngIf=\"item.badge !== undefined && item.badge !== null\"\n class=\"keu-button-group__badge\"\n >{{ item.badge }}</span>\n </button>\n </div>\n\n <!-- Scroll right arrow (scrollable chip variant) -->\n <button\n *ngIf=\"scrollable\"\n class=\"keu-button-group__arrow keu-button-group__arrow--right\"\n (click)=\"scrollRight()\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <keu-icon name=\"chevron-right\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n</div>\n", styles: [".keu-button-group{display:inline-flex;align-items:center;font-family:var(--keu-font-family)}.keu-button-group *{font-family:inherit}.keu-button-group__items{display:inline-flex;align-items:center;gap:0}.keu-button-group__items--scrollable{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.keu-button-group__items--scrollable::-webkit-scrollbar{display:none}.keu-button-group__arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--keu-neutral-500, #6B7280);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.keu-button-group__arrow:hover{background:var(--keu-neutral-100, #F3F4F6);color:var(--keu-neutral-700, #374151)}.keu-button-group__arrow--left{margin-right:4px}.keu-button-group__arrow--right{margin-left:4px}.keu-button-group--button .keu-button-group__items{border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:8px;overflow:hidden}.keu-button-group--button .keu-button-group__btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border:none;border-right:1px solid var(--keu-neutral-200, #E5E7EB);background:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--keu-neutral-700, #374151);transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}.keu-button-group--button .keu-button-group__btn:last-child{border-right:none}.keu-button-group--button .keu-button-group__btn:hover:not(.keu-button-group__btn--active){background:var(--keu-neutral-50, #F9FAFB)}.keu-button-group--button .keu-button-group__btn--active{background:linear-gradient(180deg,#3a8fd6,#005fac);color:#fff;box-shadow:0 1px 3px #005fac33,inset 0 1px #ffffff1f;border-right-color:transparent}.keu-button-group--button .keu-button-group__btn--active+.keu-button-group__btn{border-left-color:transparent}.keu-button-group--button .keu-button-group__btn--active .keu-button-group__badge{background:#fff;color:var(--keu-primary-700, #005FAC)}.keu-button-group--button .keu-button-group__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-family:inherit;font-size:11px;font-weight:600;background:var(--keu-neutral-100, #F3F4F6);color:var(--keu-neutral-600, #4B5563);line-height:1}.keu-button-group--chip .keu-button-group__items{gap:8px}.keu-button-group--chip .keu-button-group__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:999px;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--keu-neutral-600, #4B5563);transition:background .15s,color .15s,border-color .15s,box-shadow .15s;white-space:nowrap}.keu-button-group--chip .keu-button-group__btn:hover:not(.keu-button-group__btn--active){border-color:var(--keu-primary-300, #7FBDE6);color:var(--keu-primary-600, #005FAC)}.keu-button-group--chip .keu-button-group__btn--active{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;color:#fff;box-shadow:0 1px 3px #005fac33,inset 0 1px #ffffff1f}.keu-button-group--chip .keu-button-group__badge{display:none}.keu-button-group__label{font-family:inherit;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6539
6543
|
}
|
|
6540
6544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuButtonGroupComponent, decorators: [{
|
|
6541
6545
|
type: Component,
|
|
6542
|
-
args: [{ selector: 'keu-button-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"hostClasses\">\n <!-- Scroll left arrow (scrollable chip variant) -->\n <button\n *ngIf=\"scrollable\"\n class=\"keu-button-group__arrow keu-button-group__arrow--left\"\n (click)=\"scrollLeft()\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <
|
|
6546
|
+
args: [{ selector: 'keu-button-group', standalone: true, imports: [CommonModule, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"hostClasses\">\n <!-- Scroll left arrow (scrollable chip variant) -->\n <button\n *ngIf=\"scrollable\"\n class=\"keu-button-group__arrow keu-button-group__arrow--left\"\n (click)=\"scrollLeft()\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <keu-icon name=\"chevron-left\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n\n <!-- Items container -->\n <div\n class=\"keu-button-group__items\"\n #scrollContainer\n [class.keu-button-group__items--scrollable]=\"scrollable\"\n role=\"group\"\n >\n <button\n *ngFor=\"let item of items\"\n type=\"button\"\n class=\"keu-button-group__btn\"\n [class.keu-button-group__btn--active]=\"isActive(item)\"\n (click)=\"select(item)\"\n [attr.aria-pressed]=\"isActive(item)\"\n >\n <span class=\"keu-button-group__label\">{{ item.label }}</span>\n <span\n *ngIf=\"item.badge !== undefined && item.badge !== null\"\n class=\"keu-button-group__badge\"\n >{{ item.badge }}</span>\n </button>\n </div>\n\n <!-- Scroll right arrow (scrollable chip variant) -->\n <button\n *ngIf=\"scrollable\"\n class=\"keu-button-group__arrow keu-button-group__arrow--right\"\n (click)=\"scrollRight()\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <keu-icon name=\"chevron-right\" [size]=\"16\" color=\"currentColor\"></keu-icon>\n </button>\n</div>\n", styles: [".keu-button-group{display:inline-flex;align-items:center;font-family:var(--keu-font-family)}.keu-button-group *{font-family:inherit}.keu-button-group__items{display:inline-flex;align-items:center;gap:0}.keu-button-group__items--scrollable{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.keu-button-group__items--scrollable::-webkit-scrollbar{display:none}.keu-button-group__arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--keu-neutral-500, #6B7280);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.keu-button-group__arrow:hover{background:var(--keu-neutral-100, #F3F4F6);color:var(--keu-neutral-700, #374151)}.keu-button-group__arrow--left{margin-right:4px}.keu-button-group__arrow--right{margin-left:4px}.keu-button-group--button .keu-button-group__items{border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:8px;overflow:hidden}.keu-button-group--button .keu-button-group__btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border:none;border-right:1px solid var(--keu-neutral-200, #E5E7EB);background:#fff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--keu-neutral-700, #374151);transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}.keu-button-group--button .keu-button-group__btn:last-child{border-right:none}.keu-button-group--button .keu-button-group__btn:hover:not(.keu-button-group__btn--active){background:var(--keu-neutral-50, #F9FAFB)}.keu-button-group--button .keu-button-group__btn--active{background:linear-gradient(180deg,#3a8fd6,#005fac);color:#fff;box-shadow:0 1px 3px #005fac33,inset 0 1px #ffffff1f;border-right-color:transparent}.keu-button-group--button .keu-button-group__btn--active+.keu-button-group__btn{border-left-color:transparent}.keu-button-group--button .keu-button-group__btn--active .keu-button-group__badge{background:#fff;color:var(--keu-primary-700, #005FAC)}.keu-button-group--button .keu-button-group__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-family:inherit;font-size:11px;font-weight:600;background:var(--keu-neutral-100, #F3F4F6);color:var(--keu-neutral-600, #4B5563);line-height:1}.keu-button-group--chip .keu-button-group__items{gap:8px}.keu-button-group--chip .keu-button-group__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border:1px solid var(--keu-neutral-200, #E5E7EB);border-radius:999px;background:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--keu-neutral-600, #4B5563);transition:background .15s,color .15s,border-color .15s,box-shadow .15s;white-space:nowrap}.keu-button-group--chip .keu-button-group__btn:hover:not(.keu-button-group__btn--active){border-color:var(--keu-primary-300, #7FBDE6);color:var(--keu-primary-600, #005FAC)}.keu-button-group--chip .keu-button-group__btn--active{background:linear-gradient(180deg,#3a8fd6,#005fac);border-color:#005fac;color:#fff;box-shadow:0 1px 3px #005fac33,inset 0 1px #ffffff1f}.keu-button-group--chip .keu-button-group__badge{display:none}.keu-button-group__label{font-family:inherit;line-height:1.4}\n"] }]
|
|
6543
6547
|
}], propDecorators: { items: [{
|
|
6544
6548
|
type: Input
|
|
6545
6549
|
}], value: [{
|
|
@@ -7218,11 +7222,11 @@ class KeuTooltipComponent {
|
|
|
7218
7222
|
}
|
|
7219
7223
|
}
|
|
7220
7224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7221
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuTooltipComponent, isStandalone: true, selector: "keu-tooltip", inputs: { text: "text", tooltipTitle: "tooltipTitle", description: "description", position: "position", theme: "theme", trigger: "trigger", disabled: "disabled", showDelay: "showDelay", hideDelay: "hideDelay", open: "open" }, host: { listeners: { "document:click": "onDocClick($event)" } }, ngImport: i0, template: "<div class=\"keu-tooltip\"\n (mouseenter)=\"show()\"\n (mouseleave)=\"hide()\">\n <div class=\"keu-tooltip__trigger\" (click)=\"toggle()\">\n <ng-content></ng-content>\n </div>\n <div [class]=\"tooltipClasses\" role=\"tooltip\">\n <ng-container *ngIf=\"!isRich\">{{ text }}</ng-container>\n <ng-container *ngIf=\"isRich\">\n <div class=\"keu-tooltip__title\" *ngIf=\"tooltipTitle\">{{ tooltipTitle }}</div>\n <div class=\"keu-tooltip__desc\" *ngIf=\"description\">{{ description }}</div>\n </ng-container>\n </div>\n</div>\n", styles: [".keu-tooltip{position:relative;display:inline-flex}.keu-tooltip__trigger{display:inline-flex;align-items:center;cursor:default}.keu-tooltip__bubble{position:absolute;z-index:1000;padding:6px 12px;border-radius:8px;font-family:var(--keu-font-family);font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}.keu-tooltip__bubble--visible{opacity:1;visibility:visible;transition:opacity .15s ease,visibility 0s linear 0s}.keu-tooltip__bubble--rich{padding:12px 16px;border-radius:10px;white-space:normal;max-width:280px;min-width:200px}.keu-tooltip__bubble--dark{background:#1e293b;color:#fff;box-shadow:0 4px 12px #0000002e;--_arrow: #1E293B}.keu-tooltip__bubble--light{background:#fff;color:#374151;box-shadow:0 4px 16px #00000014,0 0 0 1px #0000000a;--_arrow: #fff}.keu-tooltip__bubble:after{content:\"\";position:absolute;border-style:solid}.keu-tooltip__bubble--top,.keu-tooltip__bubble--top-start,.keu-tooltip__bubble--top-end{bottom:calc(100% + 8px)}.keu-tooltip__bubble--top:after,.keu-tooltip__bubble--top-start:after,.keu-tooltip__bubble--top-end:after{top:100%;border-width:6px;border-color:var(--_arrow) transparent transparent transparent}.keu-tooltip__bubble--top{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--top:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--top-start{left:0}.keu-tooltip__bubble--top-start:after{left:14px}.keu-tooltip__bubble--top-end{right:0}.keu-tooltip__bubble--top-end:after{right:14px}.keu-tooltip__bubble--bottom,.keu-tooltip__bubble--bottom-start,.keu-tooltip__bubble--bottom-end{top:calc(100% + 8px)}.keu-tooltip__bubble--bottom:after,.keu-tooltip__bubble--bottom-start:after,.keu-tooltip__bubble--bottom-end:after{bottom:100%;border-width:6px;border-color:transparent transparent var(--_arrow) transparent}.keu-tooltip__bubble--bottom{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--bottom:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--bottom-start{left:0}.keu-tooltip__bubble--bottom-start:after{left:14px}.keu-tooltip__bubble--bottom-end{right:0}.keu-tooltip__bubble--bottom-end:after{right:14px}.keu-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--left:after{left:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent transparent transparent var(--_arrow)}.keu-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--right:after{right:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent var(--_arrow) transparent transparent}.keu-tooltip__title{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:4px}.keu-tooltip__desc{font-size:13px;font-weight:400;line-height:1.5}.keu-tooltip__bubble--light .keu-tooltip__title{color:#1f2937}.keu-tooltip__bubble--light .keu-tooltip__desc{color:#6b7280}.keu-tooltip__bubble--dark .keu-tooltip__title{color:#fff}.keu-tooltip__bubble--dark .keu-tooltip__desc{color:#fffc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuTooltipComponent, isStandalone: true, selector: "keu-tooltip", inputs: { text: "text", tooltipTitle: "tooltipTitle", description: "description", position: "position", theme: "theme", trigger: "trigger", disabled: "disabled", showDelay: "showDelay", hideDelay: "hideDelay", open: "open" }, host: { listeners: { "document:click": "onDocClick($event)" } }, ngImport: i0, template: "<div class=\"keu-tooltip\"\n (mouseenter)=\"show()\"\n (mouseleave)=\"hide()\">\n <div class=\"keu-tooltip__trigger\" (click)=\"toggle()\">\n <ng-content></ng-content>\n </div>\n <div [class]=\"tooltipClasses\" role=\"tooltip\">\n <ng-container *ngIf=\"!isRich\">{{ text }}</ng-container>\n <ng-container *ngIf=\"isRich\">\n <div class=\"keu-tooltip__title\" *ngIf=\"tooltipTitle\">{{ tooltipTitle }}</div>\n <div class=\"keu-tooltip__desc\" *ngIf=\"description\">{{ description }}</div>\n </ng-container>\n </div>\n</div>\n", styles: [".keu-tooltip{position:relative;display:inline-flex;font-family:var(--keu-font-family)}.keu-tooltip *{font-family:inherit}.keu-tooltip__trigger{display:inline-flex;align-items:center;cursor:default}.keu-tooltip__bubble{position:absolute;z-index:1000;padding:6px 12px;border-radius:8px;font-family:var(--keu-font-family);font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}.keu-tooltip__bubble--visible{opacity:1;visibility:visible;transition:opacity .15s ease,visibility 0s linear 0s}.keu-tooltip__bubble--rich{padding:12px 16px;border-radius:10px;white-space:normal;max-width:280px;min-width:200px}.keu-tooltip__bubble--dark{background:#1e293b;color:#fff;box-shadow:0 4px 12px #0000002e;--_arrow: #1E293B}.keu-tooltip__bubble--light{background:#fff;color:#374151;box-shadow:0 4px 16px #00000014,0 0 0 1px #0000000a;--_arrow: #fff}.keu-tooltip__bubble:after{content:\"\";position:absolute;border-style:solid}.keu-tooltip__bubble--top,.keu-tooltip__bubble--top-start,.keu-tooltip__bubble--top-end{bottom:calc(100% + 8px)}.keu-tooltip__bubble--top:after,.keu-tooltip__bubble--top-start:after,.keu-tooltip__bubble--top-end:after{top:100%;border-width:6px;border-color:var(--_arrow) transparent transparent transparent}.keu-tooltip__bubble--top{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--top:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--top-start{left:0}.keu-tooltip__bubble--top-start:after{left:14px}.keu-tooltip__bubble--top-end{right:0}.keu-tooltip__bubble--top-end:after{right:14px}.keu-tooltip__bubble--bottom,.keu-tooltip__bubble--bottom-start,.keu-tooltip__bubble--bottom-end{top:calc(100% + 8px)}.keu-tooltip__bubble--bottom:after,.keu-tooltip__bubble--bottom-start:after,.keu-tooltip__bubble--bottom-end:after{bottom:100%;border-width:6px;border-color:transparent transparent var(--_arrow) transparent}.keu-tooltip__bubble--bottom{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--bottom:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--bottom-start{left:0}.keu-tooltip__bubble--bottom-start:after{left:14px}.keu-tooltip__bubble--bottom-end{right:0}.keu-tooltip__bubble--bottom-end:after{right:14px}.keu-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--left:after{left:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent transparent transparent var(--_arrow)}.keu-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--right:after{right:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent var(--_arrow) transparent transparent}.keu-tooltip__title{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:4px}.keu-tooltip__desc{font-size:13px;font-weight:400;line-height:1.5}.keu-tooltip__bubble--light .keu-tooltip__title{color:#1f2937}.keu-tooltip__bubble--light .keu-tooltip__desc{color:#6b7280}.keu-tooltip__bubble--dark .keu-tooltip__title{color:#fff}.keu-tooltip__bubble--dark .keu-tooltip__desc{color:#fffc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7222
7226
|
}
|
|
7223
7227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuTooltipComponent, decorators: [{
|
|
7224
7228
|
type: Component,
|
|
7225
|
-
args: [{ selector: 'keu-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"keu-tooltip\"\n (mouseenter)=\"show()\"\n (mouseleave)=\"hide()\">\n <div class=\"keu-tooltip__trigger\" (click)=\"toggle()\">\n <ng-content></ng-content>\n </div>\n <div [class]=\"tooltipClasses\" role=\"tooltip\">\n <ng-container *ngIf=\"!isRich\">{{ text }}</ng-container>\n <ng-container *ngIf=\"isRich\">\n <div class=\"keu-tooltip__title\" *ngIf=\"tooltipTitle\">{{ tooltipTitle }}</div>\n <div class=\"keu-tooltip__desc\" *ngIf=\"description\">{{ description }}</div>\n </ng-container>\n </div>\n</div>\n", styles: [".keu-tooltip{position:relative;display:inline-flex}.keu-tooltip__trigger{display:inline-flex;align-items:center;cursor:default}.keu-tooltip__bubble{position:absolute;z-index:1000;padding:6px 12px;border-radius:8px;font-family:var(--keu-font-family);font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}.keu-tooltip__bubble--visible{opacity:1;visibility:visible;transition:opacity .15s ease,visibility 0s linear 0s}.keu-tooltip__bubble--rich{padding:12px 16px;border-radius:10px;white-space:normal;max-width:280px;min-width:200px}.keu-tooltip__bubble--dark{background:#1e293b;color:#fff;box-shadow:0 4px 12px #0000002e;--_arrow: #1E293B}.keu-tooltip__bubble--light{background:#fff;color:#374151;box-shadow:0 4px 16px #00000014,0 0 0 1px #0000000a;--_arrow: #fff}.keu-tooltip__bubble:after{content:\"\";position:absolute;border-style:solid}.keu-tooltip__bubble--top,.keu-tooltip__bubble--top-start,.keu-tooltip__bubble--top-end{bottom:calc(100% + 8px)}.keu-tooltip__bubble--top:after,.keu-tooltip__bubble--top-start:after,.keu-tooltip__bubble--top-end:after{top:100%;border-width:6px;border-color:var(--_arrow) transparent transparent transparent}.keu-tooltip__bubble--top{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--top:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--top-start{left:0}.keu-tooltip__bubble--top-start:after{left:14px}.keu-tooltip__bubble--top-end{right:0}.keu-tooltip__bubble--top-end:after{right:14px}.keu-tooltip__bubble--bottom,.keu-tooltip__bubble--bottom-start,.keu-tooltip__bubble--bottom-end{top:calc(100% + 8px)}.keu-tooltip__bubble--bottom:after,.keu-tooltip__bubble--bottom-start:after,.keu-tooltip__bubble--bottom-end:after{bottom:100%;border-width:6px;border-color:transparent transparent var(--_arrow) transparent}.keu-tooltip__bubble--bottom{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--bottom:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--bottom-start{left:0}.keu-tooltip__bubble--bottom-start:after{left:14px}.keu-tooltip__bubble--bottom-end{right:0}.keu-tooltip__bubble--bottom-end:after{right:14px}.keu-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--left:after{left:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent transparent transparent var(--_arrow)}.keu-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--right:after{right:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent var(--_arrow) transparent transparent}.keu-tooltip__title{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:4px}.keu-tooltip__desc{font-size:13px;font-weight:400;line-height:1.5}.keu-tooltip__bubble--light .keu-tooltip__title{color:#1f2937}.keu-tooltip__bubble--light .keu-tooltip__desc{color:#6b7280}.keu-tooltip__bubble--dark .keu-tooltip__title{color:#fff}.keu-tooltip__bubble--dark .keu-tooltip__desc{color:#fffc}\n"] }]
|
|
7229
|
+
args: [{ selector: 'keu-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"keu-tooltip\"\n (mouseenter)=\"show()\"\n (mouseleave)=\"hide()\">\n <div class=\"keu-tooltip__trigger\" (click)=\"toggle()\">\n <ng-content></ng-content>\n </div>\n <div [class]=\"tooltipClasses\" role=\"tooltip\">\n <ng-container *ngIf=\"!isRich\">{{ text }}</ng-container>\n <ng-container *ngIf=\"isRich\">\n <div class=\"keu-tooltip__title\" *ngIf=\"tooltipTitle\">{{ tooltipTitle }}</div>\n <div class=\"keu-tooltip__desc\" *ngIf=\"description\">{{ description }}</div>\n </ng-container>\n </div>\n</div>\n", styles: [".keu-tooltip{position:relative;display:inline-flex;font-family:var(--keu-font-family)}.keu-tooltip *{font-family:inherit}.keu-tooltip__trigger{display:inline-flex;align-items:center;cursor:default}.keu-tooltip__bubble{position:absolute;z-index:1000;padding:6px 12px;border-radius:8px;font-family:var(--keu-font-family);font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}.keu-tooltip__bubble--visible{opacity:1;visibility:visible;transition:opacity .15s ease,visibility 0s linear 0s}.keu-tooltip__bubble--rich{padding:12px 16px;border-radius:10px;white-space:normal;max-width:280px;min-width:200px}.keu-tooltip__bubble--dark{background:#1e293b;color:#fff;box-shadow:0 4px 12px #0000002e;--_arrow: #1E293B}.keu-tooltip__bubble--light{background:#fff;color:#374151;box-shadow:0 4px 16px #00000014,0 0 0 1px #0000000a;--_arrow: #fff}.keu-tooltip__bubble:after{content:\"\";position:absolute;border-style:solid}.keu-tooltip__bubble--top,.keu-tooltip__bubble--top-start,.keu-tooltip__bubble--top-end{bottom:calc(100% + 8px)}.keu-tooltip__bubble--top:after,.keu-tooltip__bubble--top-start:after,.keu-tooltip__bubble--top-end:after{top:100%;border-width:6px;border-color:var(--_arrow) transparent transparent transparent}.keu-tooltip__bubble--top{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--top:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--top-start{left:0}.keu-tooltip__bubble--top-start:after{left:14px}.keu-tooltip__bubble--top-end{right:0}.keu-tooltip__bubble--top-end:after{right:14px}.keu-tooltip__bubble--bottom,.keu-tooltip__bubble--bottom-start,.keu-tooltip__bubble--bottom-end{top:calc(100% + 8px)}.keu-tooltip__bubble--bottom:after,.keu-tooltip__bubble--bottom-start:after,.keu-tooltip__bubble--bottom-end:after{bottom:100%;border-width:6px;border-color:transparent transparent var(--_arrow) transparent}.keu-tooltip__bubble--bottom{left:50%;transform:translate(-50%)}.keu-tooltip__bubble--bottom:after{left:50%;margin-left:-6px}.keu-tooltip__bubble--bottom-start{left:0}.keu-tooltip__bubble--bottom-start:after{left:14px}.keu-tooltip__bubble--bottom-end{right:0}.keu-tooltip__bubble--bottom-end:after{right:14px}.keu-tooltip__bubble--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--left:after{left:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent transparent transparent var(--_arrow)}.keu-tooltip__bubble--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.keu-tooltip__bubble--right:after{right:100%;top:50%;margin-top:-6px;border-width:6px;border-color:transparent var(--_arrow) transparent transparent}.keu-tooltip__title{font-size:14px;font-weight:700;line-height:1.3;margin-bottom:4px}.keu-tooltip__desc{font-size:13px;font-weight:400;line-height:1.5}.keu-tooltip__bubble--light .keu-tooltip__title{color:#1f2937}.keu-tooltip__bubble--light .keu-tooltip__desc{color:#6b7280}.keu-tooltip__bubble--dark .keu-tooltip__title{color:#fff}.keu-tooltip__bubble--dark .keu-tooltip__desc{color:#fffc}\n"] }]
|
|
7226
7230
|
}], propDecorators: { text: [{
|
|
7227
7231
|
type: Input
|
|
7228
7232
|
}], tooltipTitle: [{
|
|
@@ -7326,11 +7330,11 @@ class KeuTabsComponent {
|
|
|
7326
7330
|
return tab.value;
|
|
7327
7331
|
}
|
|
7328
7332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7329
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuTabsComponent, isStandalone: true, selector: "keu-tabs", inputs: { tabs: "tabs", activeTab: "activeTab", variant: "variant", size: "size", fullWidth: "fullWidth", disabled: "disabled", iconOnly: "iconOnly" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"hostClasses\">\n <!-- Sliding indicator -->\n <div class=\"keu-tabs__indicator\" [ngStyle]=\"indicatorStyle\"></div>\n\n <button\n #tabBtn\n *ngFor=\"let tab of tabs; trackBy: trackByTab\"\n [class]=\"getTabClasses(tab)\"\n type=\"button\"\n [disabled]=\"disabled || tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n <
|
|
7333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: KeuTabsComponent, isStandalone: true, selector: "keu-tabs", inputs: { tabs: "tabs", activeTab: "activeTab", variant: "variant", size: "size", fullWidth: "fullWidth", disabled: "disabled", iconOnly: "iconOnly" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"hostClasses\">\n <!-- Sliding indicator -->\n <div class=\"keu-tabs__indicator\" [ngStyle]=\"indicatorStyle\"></div>\n\n <button\n #tabBtn\n *ngFor=\"let tab of tabs; trackBy: trackByTab\"\n [class]=\"getTabClasses(tab)\"\n type=\"button\"\n [disabled]=\"disabled || tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n <keu-icon\n *ngIf=\"tab.icon\"\n class=\"keu-tabs__icon\"\n [name]=\"tab.icon\"\n [size]=\"size === 'sm' ? 16 : size === 'lg' ? 20 : 18\"\n color=\"currentColor\"\n ></keu-icon>\n <span class=\"keu-tabs__label\" *ngIf=\"!iconOnly\">{{ tab.label }}</span>\n <span class=\"keu-tabs__badge\" *ngIf=\"tab.badge != null && !iconOnly\">{{ tab.badge }}</span>\n </button>\n</div>\n", styles: [".keu-tabs{display:inline-flex;align-items:stretch;gap:0;font-family:var(--keu-font-family);-webkit-user-select:none;user-select:none;position:relative}.keu-tabs--full-width{display:flex;width:100%}.keu-tabs--full-width .keu-tabs__tab{flex:1;justify-content:center}.keu-tabs--disabled{opacity:.45;pointer-events:none}.keu-tabs__indicator{position:absolute;pointer-events:none;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:0}.keu-tabs--underline{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-tabs--underline .keu-tabs__indicator{bottom:-1px;height:2px!important;background:linear-gradient(90deg,#3a8fd6,#005fac);border-radius:2px 2px 0 0}.keu-tabs--underline .keu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;font-family:inherit;font-weight:500;color:var(--keu-neutral-500, #6B7280);cursor:pointer;padding:4px 4px 12px;margin-right:24px;transition:color .2s ease;z-index:1}.keu-tabs--underline .keu-tabs__tab:hover:not(:disabled):not(.keu-tabs__tab--active){color:var(--keu-neutral-700, #374151)}.keu-tabs--underline .keu-tabs__tab--active{color:#005fac;font-weight:600}.keu-tabs--underline .keu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.keu-tabs--underline .keu-tabs__tab:last-child{margin-right:0}.keu-tabs--underline.keu-tabs--sm .keu-tabs__tab{font-size:13px;padding-bottom:8px;margin-right:16px}.keu-tabs--underline.keu-tabs--md .keu-tabs__tab{font-size:14px;padding-bottom:12px;margin-right:24px}.keu-tabs--underline.keu-tabs--lg .keu-tabs__tab{font-size:15px;padding-bottom:14px;margin-right:32px}.keu-tabs--pill{gap:4px;background:var(--keu-neutral-100, #F3F4F6);border-radius:10px;padding:4px}.keu-tabs--pill .keu-tabs__indicator{top:4px;background:#fff;border-radius:8px;box-shadow:0 1px 4px #00000014,0 1px 2px #0000000a}.keu-tabs--pill .keu-tabs__tab{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;font-family:inherit;font-weight:500;color:var(--keu-neutral-500, #6B7280);cursor:pointer;border-radius:8px;transition:color .2s ease;z-index:1;position:relative}.keu-tabs--pill .keu-tabs__tab:hover:not(:disabled):not(.keu-tabs__tab--active){color:var(--keu-neutral-700, #374151)}.keu-tabs--pill .keu-tabs__tab--active{color:#005fac;font-weight:600}.keu-tabs--pill .keu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.keu-tabs--pill.keu-tabs--sm .keu-tabs__tab{font-size:12px;padding:5px 12px}.keu-tabs--pill.keu-tabs--md .keu-tabs__tab{font-size:13px;padding:7px 16px}.keu-tabs--pill.keu-tabs--lg .keu-tabs__tab{font-size:14px;padding:9px 20px}.keu-tabs--boxed{gap:4px;background:var(--keu-neutral-100, #F3F4F6);border-radius:12px;padding:4px;border:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-tabs--boxed .keu-tabs__indicator{top:4px;background:linear-gradient(180deg,#3a8fd6,#005fac);border-radius:9px;box-shadow:0 2px 8px #005fac4d,inset 0 1px #ffffff26}.keu-tabs--boxed .keu-tabs__tab{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;font-family:inherit;font-weight:500;color:var(--keu-neutral-500, #6B7280);cursor:pointer;border-radius:9px;transition:color .2s ease;z-index:1;position:relative}.keu-tabs--boxed .keu-tabs__tab:hover:not(:disabled):not(.keu-tabs__tab--active){color:var(--keu-neutral-700, #374151)}.keu-tabs--boxed .keu-tabs__tab--active{color:#fff;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.1)}.keu-tabs--boxed .keu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.keu-tabs--boxed .keu-tabs__tab--active .keu-tabs__badge{background:#ffffff40;color:#fff}.keu-tabs--boxed.keu-tabs--sm .keu-tabs__tab{font-size:12px;padding:6px 14px}.keu-tabs--boxed.keu-tabs--md .keu-tabs__tab{font-size:13px;padding:8px 18px}.keu-tabs--boxed.keu-tabs--lg .keu-tabs__tab{font-size:14px;padding:10px 22px}.keu-tabs__icon{flex-shrink:0}.keu-tabs__label{white-space:nowrap}.keu-tabs__tab--icon-only .keu-tabs__icon{margin:0}.keu-tabs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#f6c846;color:#7c5e00;font-size:11px;font-weight:700;line-height:1;flex-shrink:0;transition:background .2s ease,color .2s ease}.keu-tabs--sm .keu-tabs__badge{min-width:18px;height:18px;padding:0 5px;font-size:10px;border-radius:9px}.keu-tabs--lg .keu-tabs__badge{min-width:22px;height:22px;padding:0 7px;font-size:12px;border-radius:11px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: KeuIconComponent, selector: "keu-icon", inputs: ["name", "size", "color", "stroke", "extraIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7330
7334
|
}
|
|
7331
7335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuTabsComponent, decorators: [{
|
|
7332
7336
|
type: Component,
|
|
7333
|
-
args: [{ selector: 'keu-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"hostClasses\">\n <!-- Sliding indicator -->\n <div class=\"keu-tabs__indicator\" [ngStyle]=\"indicatorStyle\"></div>\n\n <button\n #tabBtn\n *ngFor=\"let tab of tabs; trackBy: trackByTab\"\n [class]=\"getTabClasses(tab)\"\n type=\"button\"\n [disabled]=\"disabled || tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n <
|
|
7337
|
+
args: [{ selector: 'keu-tabs', standalone: true, imports: [CommonModule, KeuIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"hostClasses\">\n <!-- Sliding indicator -->\n <div class=\"keu-tabs__indicator\" [ngStyle]=\"indicatorStyle\"></div>\n\n <button\n #tabBtn\n *ngFor=\"let tab of tabs; trackBy: trackByTab\"\n [class]=\"getTabClasses(tab)\"\n type=\"button\"\n [disabled]=\"disabled || tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n <keu-icon\n *ngIf=\"tab.icon\"\n class=\"keu-tabs__icon\"\n [name]=\"tab.icon\"\n [size]=\"size === 'sm' ? 16 : size === 'lg' ? 20 : 18\"\n color=\"currentColor\"\n ></keu-icon>\n <span class=\"keu-tabs__label\" *ngIf=\"!iconOnly\">{{ tab.label }}</span>\n <span class=\"keu-tabs__badge\" *ngIf=\"tab.badge != null && !iconOnly\">{{ tab.badge }}</span>\n </button>\n</div>\n", styles: [".keu-tabs{display:inline-flex;align-items:stretch;gap:0;font-family:var(--keu-font-family);-webkit-user-select:none;user-select:none;position:relative}.keu-tabs--full-width{display:flex;width:100%}.keu-tabs--full-width .keu-tabs__tab{flex:1;justify-content:center}.keu-tabs--disabled{opacity:.45;pointer-events:none}.keu-tabs__indicator{position:absolute;pointer-events:none;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:0}.keu-tabs--underline{border-bottom:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-tabs--underline .keu-tabs__indicator{bottom:-1px;height:2px!important;background:linear-gradient(90deg,#3a8fd6,#005fac);border-radius:2px 2px 0 0}.keu-tabs--underline .keu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;font-family:inherit;font-weight:500;color:var(--keu-neutral-500, #6B7280);cursor:pointer;padding:4px 4px 12px;margin-right:24px;transition:color .2s ease;z-index:1}.keu-tabs--underline .keu-tabs__tab:hover:not(:disabled):not(.keu-tabs__tab--active){color:var(--keu-neutral-700, #374151)}.keu-tabs--underline .keu-tabs__tab--active{color:#005fac;font-weight:600}.keu-tabs--underline .keu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.keu-tabs--underline .keu-tabs__tab:last-child{margin-right:0}.keu-tabs--underline.keu-tabs--sm .keu-tabs__tab{font-size:13px;padding-bottom:8px;margin-right:16px}.keu-tabs--underline.keu-tabs--md .keu-tabs__tab{font-size:14px;padding-bottom:12px;margin-right:24px}.keu-tabs--underline.keu-tabs--lg .keu-tabs__tab{font-size:15px;padding-bottom:14px;margin-right:32px}.keu-tabs--pill{gap:4px;background:var(--keu-neutral-100, #F3F4F6);border-radius:10px;padding:4px}.keu-tabs--pill .keu-tabs__indicator{top:4px;background:#fff;border-radius:8px;box-shadow:0 1px 4px #00000014,0 1px 2px #0000000a}.keu-tabs--pill .keu-tabs__tab{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;font-family:inherit;font-weight:500;color:var(--keu-neutral-500, #6B7280);cursor:pointer;border-radius:8px;transition:color .2s ease;z-index:1;position:relative}.keu-tabs--pill .keu-tabs__tab:hover:not(:disabled):not(.keu-tabs__tab--active){color:var(--keu-neutral-700, #374151)}.keu-tabs--pill .keu-tabs__tab--active{color:#005fac;font-weight:600}.keu-tabs--pill .keu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.keu-tabs--pill.keu-tabs--sm .keu-tabs__tab{font-size:12px;padding:5px 12px}.keu-tabs--pill.keu-tabs--md .keu-tabs__tab{font-size:13px;padding:7px 16px}.keu-tabs--pill.keu-tabs--lg .keu-tabs__tab{font-size:14px;padding:9px 20px}.keu-tabs--boxed{gap:4px;background:var(--keu-neutral-100, #F3F4F6);border-radius:12px;padding:4px;border:1px solid var(--keu-neutral-200, #E5E7EB)}.keu-tabs--boxed .keu-tabs__indicator{top:4px;background:linear-gradient(180deg,#3a8fd6,#005fac);border-radius:9px;box-shadow:0 2px 8px #005fac4d,inset 0 1px #ffffff26}.keu-tabs--boxed .keu-tabs__tab{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;font-family:inherit;font-weight:500;color:var(--keu-neutral-500, #6B7280);cursor:pointer;border-radius:9px;transition:color .2s ease;z-index:1;position:relative}.keu-tabs--boxed .keu-tabs__tab:hover:not(:disabled):not(.keu-tabs__tab--active){color:var(--keu-neutral-700, #374151)}.keu-tabs--boxed .keu-tabs__tab--active{color:#fff;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.1)}.keu-tabs--boxed .keu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.keu-tabs--boxed .keu-tabs__tab--active .keu-tabs__badge{background:#ffffff40;color:#fff}.keu-tabs--boxed.keu-tabs--sm .keu-tabs__tab{font-size:12px;padding:6px 14px}.keu-tabs--boxed.keu-tabs--md .keu-tabs__tab{font-size:13px;padding:8px 18px}.keu-tabs--boxed.keu-tabs--lg .keu-tabs__tab{font-size:14px;padding:10px 22px}.keu-tabs__icon{flex-shrink:0}.keu-tabs__label{white-space:nowrap}.keu-tabs__tab--icon-only .keu-tabs__icon{margin:0}.keu-tabs__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#f6c846;color:#7c5e00;font-size:11px;font-weight:700;line-height:1;flex-shrink:0;transition:background .2s ease,color .2s ease}.keu-tabs--sm .keu-tabs__badge{min-width:18px;height:18px;padding:0 5px;font-size:10px;border-radius:9px}.keu-tabs--lg .keu-tabs__badge{min-width:22px;height:22px;padding:0 7px;font-size:12px;border-radius:11px}\n"] }]
|
|
7334
7338
|
}], propDecorators: { tabs: [{
|
|
7335
7339
|
type: Input
|
|
7336
7340
|
}], activeTab: [{
|
|
@@ -7618,7 +7622,7 @@ class KeuRatingComponent {
|
|
|
7618
7622
|
useExisting: forwardRef(() => KeuRatingComponent),
|
|
7619
7623
|
multi: true,
|
|
7620
7624
|
},
|
|
7621
|
-
], ngImport: i0, template: "<div\n class=\"keu-rating\"\n [class.keu-rating--sm]=\"size === 'sm'\"\n [class.keu-rating--md]=\"size === 'md'\"\n [class.keu-rating--lg]=\"size === 'lg'\"\n [class.keu-rating--readonly]=\"readonly\"\n [class.keu-rating--disabled]=\"disabled\"\n [class.keu-rating--interactive]=\"isInteractive\"\n (mouseleave)=\"onStarLeave()\"\n>\n <span\n *ngFor=\"let star of stars\"\n class=\"keu-rating__star\"\n [class.keu-rating__star--full]=\"getStarFill(star) === 'full'\"\n [class.keu-rating__star--half]=\"getStarFill(star) === 'half'\"\n [class.keu-rating__star--empty]=\"getStarFill(star) === 'empty'\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n [attr.role]=\"isInteractive ? 'button' : null\"\n [attr.tabindex]=\"isInteractive ? 0 : -1\"\n [attr.aria-label]=\"'Rate ' + star + ' out of ' + max\"\n (keydown.enter)=\"onStarClick(star, $event)\"\n (keydown.space)=\"onStarClick(star, $event)\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"keu-rating__icon\">\n <defs>\n <linearGradient [attr.id]=\"'keu-star-half-' + star\">\n <stop offset=\"50%\" [attr.stop-color]=\"color\" />\n <stop offset=\"50%\" [attr.stop-color]=\"emptyColor\" />\n </linearGradient>\n </defs>\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n [attr.fill]=\"getStarFill(star) === 'full' ? color : getStarFill(star) === 'half' ? 'url(#keu-star-half-' + star + ')' : emptyColor\"\n />\n </svg>\n </span>\n</div>\n", styles: [".keu-rating{display:inline-flex;align-items:center;gap:2px;font-family:var(--keu-font-family)}.keu-rating__star{display:inline-flex;align-items:center;justify-content:center;outline:none;border:none;background:none;padding:0;line-height:1;transition:transform .15s ease}.keu-rating__star:focus-visible{outline:2px solid var(--keu-primary-500, #005FAC);outline-offset:2px;border-radius:2px}.keu-rating__icon{display:block}.keu-rating--sm{gap:1px}.keu-rating--sm .keu-rating__icon{width:16px;height:16px}.keu-rating--md{gap:2px}.keu-rating--md .keu-rating__icon{width:24px;height:24px}.keu-rating--lg{gap:4px}.keu-rating--lg .keu-rating__icon{width:32px;height:32px}.keu-rating--interactive .keu-rating__star{cursor:pointer}.keu-rating--interactive .keu-rating__star:hover{transform:scale(1.15)}.keu-rating--interactive .keu-rating__star:active{transform:scale(.95)}.keu-rating--readonly .keu-rating__star{cursor:default}.keu-rating--disabled{opacity:.5;pointer-events:none}.keu-rating--disabled .keu-rating__star{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7625
|
+
], ngImport: i0, template: "<div\n class=\"keu-rating\"\n [class.keu-rating--sm]=\"size === 'sm'\"\n [class.keu-rating--md]=\"size === 'md'\"\n [class.keu-rating--lg]=\"size === 'lg'\"\n [class.keu-rating--readonly]=\"readonly\"\n [class.keu-rating--disabled]=\"disabled\"\n [class.keu-rating--interactive]=\"isInteractive\"\n (mouseleave)=\"onStarLeave()\"\n>\n <span\n *ngFor=\"let star of stars\"\n class=\"keu-rating__star\"\n [class.keu-rating__star--full]=\"getStarFill(star) === 'full'\"\n [class.keu-rating__star--half]=\"getStarFill(star) === 'half'\"\n [class.keu-rating__star--empty]=\"getStarFill(star) === 'empty'\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n [attr.role]=\"isInteractive ? 'button' : null\"\n [attr.tabindex]=\"isInteractive ? 0 : -1\"\n [attr.aria-label]=\"'Rate ' + star + ' out of ' + max\"\n (keydown.enter)=\"onStarClick(star, $event)\"\n (keydown.space)=\"onStarClick(star, $event)\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"keu-rating__icon\">\n <defs>\n <linearGradient [attr.id]=\"'keu-star-half-' + star\">\n <stop offset=\"50%\" [attr.stop-color]=\"color\" />\n <stop offset=\"50%\" [attr.stop-color]=\"emptyColor\" />\n </linearGradient>\n </defs>\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n [attr.fill]=\"getStarFill(star) === 'full' ? color : getStarFill(star) === 'half' ? 'url(#keu-star-half-' + star + ')' : emptyColor\"\n />\n </svg>\n </span>\n</div>\n", styles: [".keu-rating{display:inline-flex;align-items:center;gap:2px;font-family:var(--keu-font-family)}.keu-rating *{font-family:inherit}.keu-rating__star{display:inline-flex;align-items:center;justify-content:center;outline:none;border:none;background:none;padding:0;line-height:1;transition:transform .15s ease}.keu-rating__star:focus-visible{outline:2px solid var(--keu-primary-500, #005FAC);outline-offset:2px;border-radius:2px}.keu-rating__icon{display:block}.keu-rating--sm{gap:1px}.keu-rating--sm .keu-rating__icon{width:16px;height:16px}.keu-rating--md{gap:2px}.keu-rating--md .keu-rating__icon{width:24px;height:24px}.keu-rating--lg{gap:4px}.keu-rating--lg .keu-rating__icon{width:32px;height:32px}.keu-rating--interactive .keu-rating__star{cursor:pointer}.keu-rating--interactive .keu-rating__star:hover{transform:scale(1.15)}.keu-rating--interactive .keu-rating__star:active{transform:scale(.95)}.keu-rating--readonly .keu-rating__star{cursor:default}.keu-rating--disabled{opacity:.5;pointer-events:none}.keu-rating--disabled .keu-rating__star{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7622
7626
|
}
|
|
7623
7627
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeuRatingComponent, decorators: [{
|
|
7624
7628
|
type: Component,
|
|
@@ -7628,7 +7632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
7628
7632
|
useExisting: forwardRef(() => KeuRatingComponent),
|
|
7629
7633
|
multi: true,
|
|
7630
7634
|
},
|
|
7631
|
-
], template: "<div\n class=\"keu-rating\"\n [class.keu-rating--sm]=\"size === 'sm'\"\n [class.keu-rating--md]=\"size === 'md'\"\n [class.keu-rating--lg]=\"size === 'lg'\"\n [class.keu-rating--readonly]=\"readonly\"\n [class.keu-rating--disabled]=\"disabled\"\n [class.keu-rating--interactive]=\"isInteractive\"\n (mouseleave)=\"onStarLeave()\"\n>\n <span\n *ngFor=\"let star of stars\"\n class=\"keu-rating__star\"\n [class.keu-rating__star--full]=\"getStarFill(star) === 'full'\"\n [class.keu-rating__star--half]=\"getStarFill(star) === 'half'\"\n [class.keu-rating__star--empty]=\"getStarFill(star) === 'empty'\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n [attr.role]=\"isInteractive ? 'button' : null\"\n [attr.tabindex]=\"isInteractive ? 0 : -1\"\n [attr.aria-label]=\"'Rate ' + star + ' out of ' + max\"\n (keydown.enter)=\"onStarClick(star, $event)\"\n (keydown.space)=\"onStarClick(star, $event)\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"keu-rating__icon\">\n <defs>\n <linearGradient [attr.id]=\"'keu-star-half-' + star\">\n <stop offset=\"50%\" [attr.stop-color]=\"color\" />\n <stop offset=\"50%\" [attr.stop-color]=\"emptyColor\" />\n </linearGradient>\n </defs>\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n [attr.fill]=\"getStarFill(star) === 'full' ? color : getStarFill(star) === 'half' ? 'url(#keu-star-half-' + star + ')' : emptyColor\"\n />\n </svg>\n </span>\n</div>\n", styles: [".keu-rating{display:inline-flex;align-items:center;gap:2px;font-family:var(--keu-font-family)}.keu-rating__star{display:inline-flex;align-items:center;justify-content:center;outline:none;border:none;background:none;padding:0;line-height:1;transition:transform .15s ease}.keu-rating__star:focus-visible{outline:2px solid var(--keu-primary-500, #005FAC);outline-offset:2px;border-radius:2px}.keu-rating__icon{display:block}.keu-rating--sm{gap:1px}.keu-rating--sm .keu-rating__icon{width:16px;height:16px}.keu-rating--md{gap:2px}.keu-rating--md .keu-rating__icon{width:24px;height:24px}.keu-rating--lg{gap:4px}.keu-rating--lg .keu-rating__icon{width:32px;height:32px}.keu-rating--interactive .keu-rating__star{cursor:pointer}.keu-rating--interactive .keu-rating__star:hover{transform:scale(1.15)}.keu-rating--interactive .keu-rating__star:active{transform:scale(.95)}.keu-rating--readonly .keu-rating__star{cursor:default}.keu-rating--disabled{opacity:.5;pointer-events:none}.keu-rating--disabled .keu-rating__star{cursor:not-allowed}\n"] }]
|
|
7635
|
+
], template: "<div\n class=\"keu-rating\"\n [class.keu-rating--sm]=\"size === 'sm'\"\n [class.keu-rating--md]=\"size === 'md'\"\n [class.keu-rating--lg]=\"size === 'lg'\"\n [class.keu-rating--readonly]=\"readonly\"\n [class.keu-rating--disabled]=\"disabled\"\n [class.keu-rating--interactive]=\"isInteractive\"\n (mouseleave)=\"onStarLeave()\"\n>\n <span\n *ngFor=\"let star of stars\"\n class=\"keu-rating__star\"\n [class.keu-rating__star--full]=\"getStarFill(star) === 'full'\"\n [class.keu-rating__star--half]=\"getStarFill(star) === 'half'\"\n [class.keu-rating__star--empty]=\"getStarFill(star) === 'empty'\"\n (click)=\"onStarClick(star, $event)\"\n (mousemove)=\"onStarHover(star, $event)\"\n [attr.role]=\"isInteractive ? 'button' : null\"\n [attr.tabindex]=\"isInteractive ? 0 : -1\"\n [attr.aria-label]=\"'Rate ' + star + ' out of ' + max\"\n (keydown.enter)=\"onStarClick(star, $event)\"\n (keydown.space)=\"onStarClick(star, $event)\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"keu-rating__icon\">\n <defs>\n <linearGradient [attr.id]=\"'keu-star-half-' + star\">\n <stop offset=\"50%\" [attr.stop-color]=\"color\" />\n <stop offset=\"50%\" [attr.stop-color]=\"emptyColor\" />\n </linearGradient>\n </defs>\n <path\n d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n [attr.fill]=\"getStarFill(star) === 'full' ? color : getStarFill(star) === 'half' ? 'url(#keu-star-half-' + star + ')' : emptyColor\"\n />\n </svg>\n </span>\n</div>\n", styles: [".keu-rating{display:inline-flex;align-items:center;gap:2px;font-family:var(--keu-font-family)}.keu-rating *{font-family:inherit}.keu-rating__star{display:inline-flex;align-items:center;justify-content:center;outline:none;border:none;background:none;padding:0;line-height:1;transition:transform .15s ease}.keu-rating__star:focus-visible{outline:2px solid var(--keu-primary-500, #005FAC);outline-offset:2px;border-radius:2px}.keu-rating__icon{display:block}.keu-rating--sm{gap:1px}.keu-rating--sm .keu-rating__icon{width:16px;height:16px}.keu-rating--md{gap:2px}.keu-rating--md .keu-rating__icon{width:24px;height:24px}.keu-rating--lg{gap:4px}.keu-rating--lg .keu-rating__icon{width:32px;height:32px}.keu-rating--interactive .keu-rating__star{cursor:pointer}.keu-rating--interactive .keu-rating__star:hover{transform:scale(1.15)}.keu-rating--interactive .keu-rating__star:active{transform:scale(.95)}.keu-rating--readonly .keu-rating__star{cursor:default}.keu-rating--disabled{opacity:.5;pointer-events:none}.keu-rating--disabled .keu-rating__star{cursor:not-allowed}\n"] }]
|
|
7632
7636
|
}], propDecorators: { value: [{
|
|
7633
7637
|
type: Input
|
|
7634
7638
|
}], max: [{
|