@konce-pt/angular 0.7.5 → 0.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +156 -0
- package/fesm2022/konce-pt-angular-charts.mjs +2 -2
- package/fesm2022/konce-pt-angular-charts.mjs.map +1 -1
- package/fesm2022/konce-pt-angular-map.mjs +51 -20
- package/fesm2022/konce-pt-angular-map.mjs.map +1 -1
- package/fesm2022/konce-pt-angular-roadmap.mjs +5 -5
- package/fesm2022/konce-pt-angular-roadmap.mjs.map +1 -1
- package/fesm2022/konce-pt-angular.mjs +1360 -632
- package/fesm2022/konce-pt-angular.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/avatar/llms.txt +5 -0
- package/src/lib/avatar-group/llms.txt +3 -0
- package/src/lib/badge/llms.txt +4 -0
- package/src/lib/bottom-sheet/llms.txt +6 -0
- package/src/lib/button/llms.txt +11 -0
- package/src/lib/context-menu/llms.txt +2 -0
- package/src/lib/data-table/llms.txt +84 -4
- package/src/lib/datepicker/llms.txt +5 -0
- package/src/lib/drawer/llms.txt +9 -0
- package/src/lib/icon/llms.txt +4 -1
- package/src/lib/input-number/llms.txt +11 -6
- package/src/lib/knob/llms.txt +5 -2
- package/src/lib/menu/llms.txt +33 -4
- package/src/lib/rich-text/llms.txt +3 -0
- package/src/lib/select/llms.txt +5 -0
- package/src/lib/sidenav/llms.txt +43 -29
- package/src/lib/slider/llms.txt +6 -1
- package/src/lib/split-button/llms.txt +2 -0
- package/types/konce-pt-angular-map.d.ts +2 -1
- package/types/konce-pt-angular-map.d.ts.map +1 -1
- package/types/konce-pt-angular.d.ts +203 -39
- package/types/konce-pt-angular.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output,
|
|
2
|
+
import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, InjectionToken, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, untracked, forwardRef, numberAttribute, viewChild, Directive, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal } from '@angular/core';
|
|
3
3
|
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
|
|
4
4
|
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
|
|
@@ -51,14 +51,14 @@ class KptButton {
|
|
|
51
51
|
i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("aria-busy", ctx.loading() ? "true" : null);
|
|
52
52
|
i0.ɵɵadvance();
|
|
53
53
|
i0.ɵɵconditional(ctx.loading() ? 1 : -1);
|
|
54
|
-
} }, styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--%NS%_bg: var(--%NS%kpt-button-filled-bg);--%NS%_fg: var(--%NS%kpt-button-filled-fg);--%NS%_bg-hover: var(--%NS%kpt-button-filled-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-filled-bg-active);--%NS%_border: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--%NS%_h, 2.5rem);padding-inline:var(--%NS%_px, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%_border);border-radius:var(--%NS%kpt-button-radius, .5rem);font-family:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--%NS%_bg);color:var(--%NS%_fg);transition:
|
|
54
|
+
} }, styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--%NS%_bg: var(--%NS%kpt-button-filled-bg);--%NS%_fg: var(--%NS%kpt-button-filled-fg);--%NS%_bg-hover: var(--%NS%kpt-button-filled-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-filled-bg-active);--%NS%_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--%NS%_h, 2.5rem);padding-inline:var(--%NS%_px, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%_border);border-radius:var(--%NS%kpt-button-radius, .5rem);font-family:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--%NS%_bg);color:var(--%NS%_fg);transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){--%NS%_state: var(--%NS%_bg-hover)}.kpt-button:hover:not(:disabled):after{opacity:1}.kpt-button:active:not(:disabled){--%NS%_state: var(--%NS%_bg-active, var(--%NS%_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--%NS%_h: 2rem;--%NS%_px: .75rem;--%NS%_fs: .8125rem}.kpt-button[data-size=md]{--%NS%_h: 2.5rem;--%NS%_px: 1rem;--%NS%_fs: .875rem}.kpt-button[data-size=lg]{--%NS%_h: 3rem;--%NS%_px: 1.5rem;--%NS%_fs: 1rem}.kpt-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-button-tonal-bg);--%NS%_fg: var(--%NS%kpt-button-tonal-fg);--%NS%_bg-hover: var(--%NS%kpt-button-tonal-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-outline-fg);--%NS%_border: var(--%NS%kpt-button-outline-border);--%NS%_bg-hover: var(--%NS%kpt-button-outline-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-text-fg);--%NS%_bg-hover: var(--%NS%kpt-button-text-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black);--%NS%_bg-active: color-mix(in oklch, var(--%NS%kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"], encapsulation: 2 }); }
|
|
55
55
|
}
|
|
56
56
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptButton, [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ selector: 'kpt-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
59
59
|
class: 'kpt-button-host',
|
|
60
60
|
'[class.kpt-button-host--full]': 'fullWidth()',
|
|
61
|
-
}, template: "<button\n class=\"kpt-button\"\n [type]=\"type()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [class.kpt-button--loading]=\"loading()\"\n [disabled]=\"isDisabled()\"\n>\n @if (loading()) {\n <span class=\"kpt-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"kpt-button__content\"><ng-content /></span>\n</button>\n", styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--_bg: var(--kpt-button-filled-bg);--_fg: var(--kpt-button-filled-fg);--_bg-hover: var(--kpt-button-filled-bg-hover);--_bg-active: var(--kpt-button-filled-bg-active);--_border: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--_h, 2.5rem);padding-inline:var(--_px, 1rem);border:var(--kpt-border-width-thin, 1px) solid var(--_border);border-radius:var(--kpt-button-radius, .5rem);font-family:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--_bg);color:var(--_fg);transition:
|
|
61
|
+
}, template: "<button\n class=\"kpt-button\"\n [type]=\"type()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [class.kpt-button--loading]=\"loading()\"\n [disabled]=\"isDisabled()\"\n>\n @if (loading()) {\n <span class=\"kpt-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"kpt-button__content\"><ng-content /></span>\n</button>\n", styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--_bg: var(--kpt-button-filled-bg);--_fg: var(--kpt-button-filled-fg);--_bg-hover: var(--kpt-button-filled-bg-hover);--_bg-active: var(--kpt-button-filled-bg-active);--_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--_h, 2.5rem);padding-inline:var(--_px, 1rem);border:var(--kpt-border-width-thin, 1px) solid var(--_border);border-radius:var(--kpt-button-radius, .5rem);font-family:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--_bg);color:var(--_fg);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){--_state: var(--_bg-hover)}.kpt-button:hover:not(:disabled):after{opacity:1}.kpt-button:active:not(:disabled){--_state: var(--_bg-active, var(--_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--_h: 2rem;--_px: .75rem;--_fs: .8125rem}.kpt-button[data-size=md]{--_h: 2.5rem;--_px: 1rem;--_fs: .875rem}.kpt-button[data-size=lg]{--_h: 3rem;--_px: 1.5rem;--_fs: 1rem}.kpt-button[data-variant=tonal]{--_bg: var(--kpt-button-tonal-bg);--_fg: var(--kpt-button-tonal-fg);--_bg-hover: var(--kpt-button-tonal-bg-hover);--_bg-active: var(--kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--_bg: transparent;--_fg: var(--kpt-button-outline-fg);--_border: var(--kpt-button-outline-border);--_bg-hover: var(--kpt-button-outline-bg-hover);--_bg-active: var(--kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--_bg: transparent;--_fg: var(--kpt-button-text-fg);--_bg-hover: var(--kpt-button-text-bg-hover);--_bg-active: var(--kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);--_bg-active: color-mix(in oklch, var(--kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"] }]
|
|
62
62
|
}], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] }); })();
|
|
63
63
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButton, { className: "KptButton", filePath: "lib/button/button.component.ts", lineNumber: 32 }); })();
|
|
64
64
|
|
|
@@ -105,7 +105,7 @@ class KptIconButton {
|
|
|
105
105
|
i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("data-shape", ctx.shape())("aria-label", ctx.ariaLabel())("aria-busy", ctx.loading() ? "true" : null);
|
|
106
106
|
i0.ɵɵadvance();
|
|
107
107
|
i0.ɵɵconditional(ctx.loading() ? 1 : 2);
|
|
108
|
-
} }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-color-on-surface);--%NS%_bg-hover: var(--%NS%kpt-color-muted);display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--%NS%kpt-border-width-thin, 1px) solid transparent;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font-size:1.25rem;
|
|
108
|
+
} }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-color-on-surface);--%NS%_bg-hover: var(--%NS%kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--%NS%kpt-border-width-thin, 1px) solid transparent;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--%NS%kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"], encapsulation: 2 }); }
|
|
109
109
|
}
|
|
110
110
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconButton, [{
|
|
111
111
|
type: Component,
|
|
@@ -126,7 +126,7 @@ class KptIconButton {
|
|
|
126
126
|
<ng-content />
|
|
127
127
|
}
|
|
128
128
|
</button>
|
|
129
|
-
`, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--kpt-border-width-thin, 1px) solid transparent;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);cursor:pointer;font-size:1.25rem;
|
|
129
|
+
`, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--kpt-border-width-thin, 1px) solid transparent;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"] }]
|
|
130
130
|
}], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] }); })();
|
|
131
131
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIconButton, { className: "KptIconButton", filePath: "lib/icon-button/icon-button.component.ts", lineNumber: 36 }); })();
|
|
132
132
|
|
|
@@ -234,7 +234,7 @@ class KptFab {
|
|
|
234
234
|
i0.ɵɵclassProp("kpt-fab--extended", ctx.extended());
|
|
235
235
|
i0.ɵɵdomProperty("type", ctx.type())("disabled", ctx.disabled());
|
|
236
236
|
i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("aria-label", ctx.extended() ? null : ctx.ariaLabel());
|
|
237
|
-
} }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%_bg);color:var(--%NS%_fg);box-shadow:var(--%NS%kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--%NS%kpt-font-weight-medium, 500);transition:
|
|
237
|
+
} }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%_bg);color:var(--%NS%_fg);box-shadow:var(--%NS%kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--%NS%kpt-font-weight-medium, 500);position:relative;isolation:isolate;transition:box-shadow var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-fab:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-fab:hover:not(:disabled){box-shadow:var(--%NS%kpt-elevation-4)}.kpt-fab:hover:not(:disabled):after{opacity:1}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media(prefers-reduced-motion:reduce){.kpt-fab{transition:none}.kpt-fab:after{transition:none}}.kpt-fab[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--%NS%kpt-space-5, 1.25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);border-radius:var(--%NS%kpt-radius-full, 9999px)}}\n"], encapsulation: 2 }); }
|
|
238
238
|
}
|
|
239
239
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFab, [{
|
|
240
240
|
type: Component,
|
|
@@ -248,10 +248,355 @@ class KptFab {
|
|
|
248
248
|
[disabled]="disabled()"
|
|
249
249
|
[attr.aria-label]="extended() ? null : ariaLabel()"
|
|
250
250
|
><ng-content /></button>
|
|
251
|
-
`, host: { class: 'kpt-fab-host' }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--kpt-radius-lg, .75rem);background:var(--_bg);color:var(--_fg);box-shadow:var(--kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--kpt-font-weight-medium, 500);transition:
|
|
251
|
+
`, host: { class: 'kpt-fab-host' }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--kpt-radius-lg, .75rem);background:var(--_bg);color:var(--_fg);box-shadow:var(--kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--kpt-font-weight-medium, 500);position:relative;isolation:isolate;transition:box-shadow var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-fab:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-fab:hover:not(:disabled){box-shadow:var(--kpt-elevation-4)}.kpt-fab:hover:not(:disabled):after{opacity:1}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media(prefers-reduced-motion:reduce){.kpt-fab{transition:none}.kpt-fab:after{transition:none}}.kpt-fab[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--kpt-space-5, 1.25rem);font-size:var(--kpt-font-size-sm, .875rem);border-radius:var(--kpt-radius-full, 9999px)}}\n"] }]
|
|
252
252
|
}], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] }); })();
|
|
253
253
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFab, { className: "KptFab", filePath: "lib/fab/fab.component.ts", lineNumber: 28 }); })();
|
|
254
254
|
|
|
255
|
+
const KPT_ICONS = {
|
|
256
|
+
'menu': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" />',
|
|
257
|
+
'x': '<path d="M18 6l-12 12" /> <path d="M6 6l12 12" />',
|
|
258
|
+
'chevron-up': '<path d="M6 15l6 -6l6 6" />',
|
|
259
|
+
'chevron-down': '<path d="M6 9l6 6l6 -6" />',
|
|
260
|
+
'chevron-left': '<path d="M15 6l-6 6l6 6" />',
|
|
261
|
+
'chevron-right': '<path d="M9 6l6 6l-6 6" />',
|
|
262
|
+
'check': '<path d="M5 12l5 5l10 -10" />',
|
|
263
|
+
'search': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" />',
|
|
264
|
+
'grip-vertical': '<path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
|
|
265
|
+
'info': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
|
|
266
|
+
'alert-triangle': '<path d="M12 9v4" /> <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0" /> <path d="M12 16h.01" />',
|
|
267
|
+
'circle-check': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 12l2 2l4 -4" />',
|
|
268
|
+
'circle-x': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M10 10l4 4m0 -4l-4 4" />',
|
|
269
|
+
'calendar': '<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" /> <path d="M16 3v4" /> <path d="M8 3v4" /> <path d="M4 11h16" /> <path d="M11 15h1" /> <path d="M12 15v3" />',
|
|
270
|
+
'copy': '<path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />',
|
|
271
|
+
'link': '<path d="M9 15l6 -6" /> <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /> <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />',
|
|
272
|
+
'code': '<path d="M7 8l-4 4l4 4" /> <path d="M17 8l4 4l-4 4" /> <path d="M14 4l-4 16" />',
|
|
273
|
+
'bold': '<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /> <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />',
|
|
274
|
+
'italic': '<path d="M11 5l6 0" /> <path d="M7 19l6 0" /> <path d="M14 5l-4 14" />',
|
|
275
|
+
'underline': '<path d="M7 5v5a5 5 0 0 0 10 0v-5" /> <path d="M5 19h14" />',
|
|
276
|
+
'strikethrough': '<path d="M5 12l14 0" /> <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />',
|
|
277
|
+
'list': '<path d="M9 6l11 0" /> <path d="M9 12l11 0" /> <path d="M9 18l11 0" /> <path d="M5 6l0 .01" /> <path d="M5 12l0 .01" /> <path d="M5 18l0 .01" />',
|
|
278
|
+
'list-numbers': '<path d="M11 6h9" /> <path d="M11 12h9" /> <path d="M12 18h8" /> <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /> <path d="M6 10v-6l-2 2" />',
|
|
279
|
+
'clear-formatting': '<path d="M17 15l4 4m0 -4l-4 4" /> <path d="M7 6v-1h11v1" /> <path d="M7 19l4 0" /> <path d="M13 5l-4 14" />',
|
|
280
|
+
'star': '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />',
|
|
281
|
+
'plus': '<path d="M12 5l0 14" /> <path d="M5 12l14 0" />',
|
|
282
|
+
'upload': '<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /> <path d="M7 9l5 -5l5 5" /> <path d="M12 4l0 12" />',
|
|
283
|
+
'dots-vertical': '<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
|
|
284
|
+
'photo': '<path d="M15 8h.01" /> <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /> <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /> <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />',
|
|
285
|
+
'trash': '<path d="M4 7l16 0" /> <path d="M10 11l0 6" /> <path d="M14 11l0 6" /> <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /> <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />',
|
|
286
|
+
'pencil': '<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M13.5 6.5l4 4" />',
|
|
287
|
+
'eye': '<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />',
|
|
288
|
+
'eye-off': '<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" />',
|
|
289
|
+
'minus': '<path d="M5 12l14 0" />',
|
|
290
|
+
'arrow-up': '<path d="M12 5l0 14" /> <path d="M18 11l-6 -6" /> <path d="M6 11l6 -6" />',
|
|
291
|
+
'arrow-down': '<path d="M12 5l0 14" /> <path d="M18 13l-6 6" /> <path d="M6 13l6 6" />',
|
|
292
|
+
'zoom-in': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M7 10l6 0" /> <path d="M10 7l0 6" /> <path d="M21 21l-6 -6" />',
|
|
293
|
+
'info-circle': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
|
|
294
|
+
'phone': '<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />',
|
|
295
|
+
'map-pin': '<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />',
|
|
296
|
+
'world': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M3.6 9h16.8" /> <path d="M3.6 15h16.8" /> <path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" />',
|
|
297
|
+
'clock': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 7v5l3 3" />',
|
|
298
|
+
'align-left': '<path d="M4 6l16 0" /> <path d="M4 12l10 0" /> <path d="M4 18l14 0" />',
|
|
299
|
+
'align-center': '<path d="M4 6l16 0" /> <path d="M8 12l8 0" /> <path d="M6 18l12 0" />',
|
|
300
|
+
'align-right': '<path d="M4 6l16 0" /> <path d="M10 12l10 0" /> <path d="M6 18l14 0" />',
|
|
301
|
+
'align-justified': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l12 0" />',
|
|
302
|
+
'palette': '<path d="M12 21a9 9 0 0 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M12.5 7.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M16.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />',
|
|
303
|
+
'highlight': '<path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M12.5 5.5l4 4" /> <path d="M4.5 13.5l4 4" /> <path d="M21 15v4h-8" />',
|
|
304
|
+
'clipboard': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />',
|
|
305
|
+
'clipboard-text': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /> <path d="M9 12h6" /> <path d="M9 16h6" />',
|
|
306
|
+
'table': '<path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /> <path d="M3 10h18" /> <path d="M10 3v18" />',
|
|
307
|
+
'mail': '<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /> <path d="M3 7l9 6l9 -6" />',
|
|
308
|
+
'share': '<path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M8.7 10.7l6.6 -3.4" /> <path d="M8.7 13.3l6.6 3.4" />',
|
|
309
|
+
'external-link': '<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" /> <path d="M11 13l9 -9" /> <path d="M15 4h5v5" />',
|
|
310
|
+
'crosshair': '<path d="M4 12h4" /> <path d="M16 12h4" /> <path d="M12 4v4" /> <path d="M12 16v4" /> <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />',
|
|
311
|
+
'adjustments-horizontal': '<path d="M12 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M4 6l8 0" /> <path d="M16 6l4 0" /> <path d="M6 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M4 12l2 0" /> <path d="M10 12l10 0" /> <path d="M15 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M4 18l11 0" /> <path d="M19 18l1 0" />',
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
// Allowlist SVG dla treści przechodzącej przez `register()` — sam rejestr trafia bez sanitizera
|
|
315
|
+
// wprost do `innerHTML` (`icon.component.ts`, markery mapy), więc runtime'owe wywołanie `register()`
|
|
316
|
+
// z niezaufaną treścią (CMS/API/upload) byłoby DOM XSS. Wbudowany `KPT_ICONS` (build-time, zaufany)
|
|
317
|
+
// nie przechodzi przez ten filtr. Zestaw tagów/atrybutów pokrywa 100% wbudowanych ikon i pełnego
|
|
318
|
+
// zestawu Tabler (5130) — oba używają wyłącznie `<path d/fill/opacity/stroke>` — więc sanitizacja
|
|
319
|
+
// jest dla nich no-opem.
|
|
320
|
+
const ALLOWED_SVG_TAGS = new Set([
|
|
321
|
+
'path', 'circle', 'rect', 'g', 'line', 'polygon', 'polyline', 'ellipse',
|
|
322
|
+
]);
|
|
323
|
+
const ALLOWED_SVG_ATTRS = new Set([
|
|
324
|
+
'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'width', 'height', 'points',
|
|
325
|
+
'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'opacity', 'transform',
|
|
326
|
+
]);
|
|
327
|
+
/**
|
|
328
|
+
* Sanityzuje fragment SVG do allowlisty tagów/atrybutów geometrii — patrz komentarz wyżej.
|
|
329
|
+
*
|
|
330
|
+
* Fragment MUSI być parsowany owinięty w `<svg>` — parser HTML przełącza się w tryb „foreign
|
|
331
|
+
* content" dopiero po napotkaniu tagu `<svg>`, dopiero wtedy składnia samozamykająca (`<path .../>`)
|
|
332
|
+
* jest respektowana. Bez wrappera `<path d="…" />` zostaje w zwykłym trybie HTML, gdzie `path` nie
|
|
333
|
+
* jest elementem pustym — kolejne rodzeństwo trafiłoby jako jego DZIECKO zamiast obok niego.
|
|
334
|
+
*/
|
|
335
|
+
function sanitizeSvgFragment(svg) {
|
|
336
|
+
const tpl = document.createElement('template');
|
|
337
|
+
tpl.innerHTML = `<svg>${svg}</svg>`;
|
|
338
|
+
const root = tpl.content.firstElementChild;
|
|
339
|
+
if (!root)
|
|
340
|
+
return '';
|
|
341
|
+
for (const el of Array.from(root.querySelectorAll('*'))) {
|
|
342
|
+
if (!ALLOWED_SVG_TAGS.has(el.tagName.toLowerCase())) {
|
|
343
|
+
el.remove();
|
|
344
|
+
continue;
|
|
345
|
+
}
|
|
346
|
+
for (const attr of Array.from(el.attributes)) {
|
|
347
|
+
if (!ALLOWED_SVG_ATTRS.has(attr.name.toLowerCase()))
|
|
348
|
+
el.removeAttribute(attr.name);
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
return root.innerHTML;
|
|
352
|
+
}
|
|
353
|
+
/**
|
|
354
|
+
* Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
|
|
355
|
+
* Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
|
|
356
|
+
* z `@konce-pt/angular/icons` lub zarejestruj własne przez `register()`.
|
|
357
|
+
*/
|
|
358
|
+
class KptIconRegistry {
|
|
359
|
+
constructor() {
|
|
360
|
+
this.icons = new Map(Object.entries(KPT_ICONS));
|
|
361
|
+
this._version = signal(0, /* @ts-ignore */
|
|
362
|
+
...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
|
|
363
|
+
/** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
|
|
364
|
+
this.version = this._version.asReadonly();
|
|
365
|
+
}
|
|
366
|
+
/**
|
|
367
|
+
* Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`.
|
|
368
|
+
*
|
|
369
|
+
* Treść jest sanityzowana do allowlisty geometrii SVG (`path`/`circle`/`rect`/`g`/`line`/
|
|
370
|
+
* `polygon`/`polyline`/`ellipse` i ich atrybutów kształtu/stylu) — mimo to `register()` wolno
|
|
371
|
+
* wołać wyłącznie z treścią kontrolowaną przez developera (build-time), nigdy bezpośrednio
|
|
372
|
+
* z danych runtime/CMS/uploadu bez własnej walidacji domenowej wyżej w stosie.
|
|
373
|
+
*/
|
|
374
|
+
register(icons) {
|
|
375
|
+
for (const [name, svg] of Object.entries(icons)) {
|
|
376
|
+
this.icons.set(name, sanitizeSvgFragment(svg));
|
|
377
|
+
}
|
|
378
|
+
this._version.update((v) => v + 1);
|
|
379
|
+
}
|
|
380
|
+
/** Zwraca wewnętrzny SVG ikony lub undefined. */
|
|
381
|
+
get(name) {
|
|
382
|
+
return this.icons.get(name);
|
|
383
|
+
}
|
|
384
|
+
has(name) {
|
|
385
|
+
return this.icons.has(name);
|
|
386
|
+
}
|
|
387
|
+
static { this.ɵfac = function KptIconRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconRegistry)(); }; }
|
|
388
|
+
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptIconRegistry, factory: KptIconRegistry.ɵfac, providedIn: 'root' }); }
|
|
389
|
+
}
|
|
390
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconRegistry, [{
|
|
391
|
+
type: Injectable,
|
|
392
|
+
args: [{ providedIn: 'root' }]
|
|
393
|
+
}], null, null); })();
|
|
394
|
+
/**
|
|
395
|
+
* Składa pełny znacznik `<svg>` z wewnętrznego SVG z rejestru.
|
|
396
|
+
*
|
|
397
|
+
* Wydzielone z `kpt-icon`, bo tego samego stringa potrzebują znaczniki mapy —
|
|
398
|
+
* ich HTML powstaje poza Angularem, w DOM zarządzanym przez silnik mapy.
|
|
399
|
+
* Pusty `inner` daje pusty string, żeby wołający nie musiał tego sprawdzać.
|
|
400
|
+
*/
|
|
401
|
+
function renderKptIconSvg(inner, cssClass = 'kpt-icon') {
|
|
402
|
+
if (!inner)
|
|
403
|
+
return '';
|
|
404
|
+
return (`<svg class="${cssClass}" viewBox="0 0 24 24" fill="none" stroke="currentColor"` +
|
|
405
|
+
' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
|
|
406
|
+
inner +
|
|
407
|
+
'</svg>');
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
/**
|
|
411
|
+
* Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
|
|
412
|
+
* (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze
|
|
413
|
+
* ([[KptIconRegistry]]) — wbudowany zestaw działa od razu, pełny zestaw dodaje
|
|
414
|
+
* `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
|
|
415
|
+
*
|
|
416
|
+
* @example
|
|
417
|
+
* <kpt-icon name="menu" />
|
|
418
|
+
* <kpt-icon name="check" size="1.25rem" />
|
|
419
|
+
*/
|
|
420
|
+
class KptIcon {
|
|
421
|
+
constructor() {
|
|
422
|
+
/** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
|
|
423
|
+
this.name = input.required(/* @ts-ignore */
|
|
424
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
425
|
+
/** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z font-size. */
|
|
426
|
+
this.size = input('', /* @ts-ignore */
|
|
427
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
428
|
+
this.host = inject(ElementRef);
|
|
429
|
+
this.registry = inject(KptIconRegistry);
|
|
430
|
+
effect(() => {
|
|
431
|
+
this.registry.version(); // reaguj na późną rejestrację ikon
|
|
432
|
+
// Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
|
|
433
|
+
this.host.nativeElement.innerHTML = renderKptIconSvg(this.registry.get(this.name()));
|
|
434
|
+
});
|
|
435
|
+
}
|
|
436
|
+
static { this.ɵfac = function KptIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIcon)(); }; }
|
|
437
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIcon, selectors: [["kpt-icon"]], hostAttrs: ["aria-hidden", "true", 1, "kpt-icon-host"], hostVars: 2, hostBindings: function KptIcon_HostBindings(rf, ctx) { if (rf & 2) {
|
|
438
|
+
i0.ɵɵstyleProp("font-size", ctx.size() || null);
|
|
439
|
+
} }, inputs: { name: [1, "name"], size: [1, "size"] }, decls: 0, vars: 0, template: function KptIcon_Template(rf, ctx) { }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"], encapsulation: 2 }); }
|
|
440
|
+
}
|
|
441
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIcon, [{
|
|
442
|
+
type: Component,
|
|
443
|
+
args: [{ selector: 'kpt-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
|
|
444
|
+
class: 'kpt-icon-host',
|
|
445
|
+
'aria-hidden': 'true',
|
|
446
|
+
'[style.font-size]': 'size() || null',
|
|
447
|
+
}, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"] }]
|
|
448
|
+
}], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
|
|
449
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIcon, { className: "KptIcon", filePath: "lib/icon/icon.component.ts", lineNumber: 26 }); })();
|
|
450
|
+
|
|
451
|
+
function KptAvatar_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
452
|
+
i0.ɵɵelement(0, "img", 1);
|
|
453
|
+
} if (rf & 2) {
|
|
454
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
455
|
+
i0.ɵɵproperty("src", ctx_r0.src(), i0.ɵɵsanitizeUrl)("alt", ctx_r0.name() || "");
|
|
456
|
+
} }
|
|
457
|
+
function KptAvatar_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
458
|
+
i0.ɵɵelementStart(0, "span", 2);
|
|
459
|
+
i0.ɵɵtext(1);
|
|
460
|
+
i0.ɵɵelementEnd();
|
|
461
|
+
} if (rf & 2) {
|
|
462
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
463
|
+
i0.ɵɵadvance();
|
|
464
|
+
i0.ɵɵtextInterpolate(ctx_r0.initials());
|
|
465
|
+
} }
|
|
466
|
+
function KptAvatar_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
467
|
+
i0.ɵɵelement(0, "kpt-icon", 3);
|
|
468
|
+
} if (rf & 2) {
|
|
469
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
470
|
+
i0.ɵɵproperty("name", ctx_r0.icon());
|
|
471
|
+
} }
|
|
472
|
+
/**
|
|
473
|
+
* Awatar — obraz, inicjały (z `name`) lub ikona.
|
|
474
|
+
*
|
|
475
|
+
* `name` trafia do natywnego `title` (podpowiedź spod kursora — inicjały same w sobie
|
|
476
|
+
* nie mówią, kto to jest). Bez `src` awatar dostaje dodatkowo `role="img"` i `aria-label`,
|
|
477
|
+
* a same inicjały są `aria-hidden`, żeby czytnik nie przeczytał „AK" litera po literze.
|
|
478
|
+
* Przy `src` etykietę niesie już `alt` obrazu — nie dublujemy jej.
|
|
479
|
+
*
|
|
480
|
+
* @example
|
|
481
|
+
* <kpt-avatar src="/u/anna.jpg" />
|
|
482
|
+
* <kpt-avatar name="Anna Kowalska" size="lg" />
|
|
483
|
+
* <kpt-avatar icon="user" shape="square" />
|
|
484
|
+
*/
|
|
485
|
+
class KptAvatar {
|
|
486
|
+
constructor() {
|
|
487
|
+
this.src = input(null, /* @ts-ignore */
|
|
488
|
+
...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
|
|
489
|
+
this.name = input('', /* @ts-ignore */
|
|
490
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
491
|
+
this.icon = input(null, /* @ts-ignore */
|
|
492
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
493
|
+
this.size = input('md', /* @ts-ignore */
|
|
494
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
495
|
+
this.shape = input('circle', /* @ts-ignore */
|
|
496
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
497
|
+
this.initials = computed(() => this.name()
|
|
498
|
+
.trim()
|
|
499
|
+
.split(/\s+/)
|
|
500
|
+
.slice(0, 2)
|
|
501
|
+
.map((w) => w[0]?.toUpperCase() ?? '')
|
|
502
|
+
.join(''), /* @ts-ignore */
|
|
503
|
+
...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
504
|
+
}
|
|
505
|
+
static { this.ɵfac = function KptAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAvatar)(); }; }
|
|
506
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAvatar, selectors: [["kpt-avatar"]], hostAttrs: [1, "kpt-avatar-host"], inputs: { src: [1, "src"], name: [1, "name"], icon: [1, "icon"], size: [1, "size"], shape: [1, "shape"] }, decls: 4, vars: 6, consts: [[1, "kpt-avatar"], [1, "kpt-avatar__img", 3, "src", "alt"], ["aria-hidden", "true", 1, "kpt-avatar__initials"], [3, "name"]], template: function KptAvatar_Template(rf, ctx) { if (rf & 1) {
|
|
507
|
+
i0.ɵɵelementStart(0, "span", 0);
|
|
508
|
+
i0.ɵɵconditionalCreate(1, KptAvatar_Conditional_1_Template, 1, 2, "img", 1)(2, KptAvatar_Conditional_2_Template, 2, 1, "span", 2)(3, KptAvatar_Conditional_3_Template, 1, 1, "kpt-icon", 3);
|
|
509
|
+
i0.ɵɵelementEnd();
|
|
510
|
+
} if (rf & 2) {
|
|
511
|
+
i0.ɵɵattribute("data-size", ctx.size())("data-shape", ctx.shape())("title", ctx.name() || null)("role", !ctx.src() && ctx.name() ? "img" : null)("aria-label", !ctx.src() && ctx.name() ? ctx.name() : null);
|
|
512
|
+
i0.ɵɵadvance();
|
|
513
|
+
i0.ɵɵconditional(ctx.src() ? 1 : ctx.name() ? 2 : ctx.icon() ? 3 : -1);
|
|
514
|
+
} }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--%NS%_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--%NS%_size);height:var(--%NS%_size);border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:calc(var(--%NS%_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--%NS%_size: 2rem}.kpt-avatar[data-size=md]{--%NS%_size: 2.5rem}.kpt-avatar[data-size=lg]{--%NS%_size: 3rem}.kpt-avatar[data-size=xl]{--%NS%_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"], encapsulation: 2 }); }
|
|
515
|
+
}
|
|
516
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAvatar, [{
|
|
517
|
+
type: Component,
|
|
518
|
+
args: [{ selector: 'kpt-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
|
|
519
|
+
<span
|
|
520
|
+
class="kpt-avatar"
|
|
521
|
+
[attr.data-size]="size()"
|
|
522
|
+
[attr.data-shape]="shape()"
|
|
523
|
+
[attr.title]="name() || null"
|
|
524
|
+
[attr.role]="!src() && name() ? 'img' : null"
|
|
525
|
+
[attr.aria-label]="!src() && name() ? name() : null"
|
|
526
|
+
>
|
|
527
|
+
@if (src()) {
|
|
528
|
+
<img class="kpt-avatar__img" [src]="src()" [alt]="name() || ''" />
|
|
529
|
+
} @else if (name()) {
|
|
530
|
+
<span class="kpt-avatar__initials" aria-hidden="true">{{ initials() }}</span>
|
|
531
|
+
} @else if (icon()) {
|
|
532
|
+
<kpt-icon [name]="icon()!" />
|
|
533
|
+
}
|
|
534
|
+
</span>
|
|
535
|
+
`, host: { class: 'kpt-avatar-host' }, styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-weight:var(--kpt-font-weight-semibold, 600);font-size:calc(var(--_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--_size: 2rem}.kpt-avatar[data-size=md]{--_size: 2.5rem}.kpt-avatar[data-size=lg]{--_size: 3rem}.kpt-avatar[data-size=xl]{--_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"] }]
|
|
536
|
+
}], null, { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] }); })();
|
|
537
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatar, { className: "KptAvatar", filePath: "lib/avatar/avatar.component.ts", lineNumber: 46 }); })();
|
|
538
|
+
|
|
539
|
+
const _c0$A = ["*"];
|
|
540
|
+
/**
|
|
541
|
+
* Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
|
|
542
|
+
*
|
|
543
|
+
* @example
|
|
544
|
+
* <kpt-badge [value]="3" variant="danger" />
|
|
545
|
+
* <kpt-badge [value]="4" size="sm" variant="success" />
|
|
546
|
+
* <kpt-badge [value]="128" overlay><kpt-icon name="menu" /></kpt-badge>
|
|
547
|
+
* <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
|
|
548
|
+
*/
|
|
549
|
+
class KptBadge {
|
|
550
|
+
constructor() {
|
|
551
|
+
this.value = input(null, /* @ts-ignore */
|
|
552
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
553
|
+
this.variant = input('primary', /* @ts-ignore */
|
|
554
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
555
|
+
/** Rozmiar — `sm` mieści się w wierszu tekstu, `md` to domyślny licznik. */
|
|
556
|
+
this.size = input('md', /* @ts-ignore */
|
|
557
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
558
|
+
this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
559
|
+
this.overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
560
|
+
this.max = input(99, /* @ts-ignore */
|
|
561
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
562
|
+
this.display = computed(() => {
|
|
563
|
+
const v = this.value();
|
|
564
|
+
if (typeof v === 'number' && v > this.max())
|
|
565
|
+
return `${this.max()}+`;
|
|
566
|
+
return v ?? '';
|
|
567
|
+
}, /* @ts-ignore */
|
|
568
|
+
...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
569
|
+
}
|
|
570
|
+
static { this.ɵfac = function KptBadge_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBadge)(); }; }
|
|
571
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBadge, selectors: [["kpt-badge"]], hostAttrs: [1, "kpt-badge-host"], inputs: { value: [1, "value"], variant: [1, "variant"], size: [1, "size"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$A, decls: 3, vars: 7, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
|
|
572
|
+
i0.ɵɵprojectionDef();
|
|
573
|
+
i0.ɵɵprojection(0);
|
|
574
|
+
i0.ɵɵdomElementStart(1, "span", 0);
|
|
575
|
+
i0.ɵɵtext(2);
|
|
576
|
+
i0.ɵɵdomElementEnd();
|
|
577
|
+
} if (rf & 2) {
|
|
578
|
+
i0.ɵɵadvance();
|
|
579
|
+
i0.ɵɵclassProp("kpt-badge--overlay", ctx.overlay())("kpt-badge--dot", ctx.dot());
|
|
580
|
+
i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size());
|
|
581
|
+
i0.ɵɵadvance();
|
|
582
|
+
i0.ɵɵtextInterpolate(ctx.dot() ? "" : ctx.display());
|
|
583
|
+
} }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_size: 1.25rem;--%NS%_padding: .35rem;display:inline-flex;align-items:center;justify-content:center;min-width:var(--%NS%_size);height:var(--%NS%_size);padding-inline:var(--%NS%_padding);box-sizing:border-box;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:calc(var(--%NS%_size) * .6);font-weight:var(--%NS%kpt-font-weight-semibold, 600);line-height:1}.kpt-badge[data-size=sm]{--%NS%_size: 1rem;--%NS%_padding: .28rem}.kpt-badge[data-size=md]{--%NS%_size: 1.25rem;--%NS%_padding: .35rem}.kpt-badge[data-size=lg]{--%NS%_size: 1.5rem;--%NS%_padding: .45rem}.kpt-badge[data-variant=neutral]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted)}.kpt-badge[data-variant=success]{--%NS%_bg: var(--%NS%kpt-color-success);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--%NS%_bg: var(--%NS%kpt-color-warning);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=info]{--%NS%_bg: var(--%NS%kpt-color-info);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge--dot{min-width:0;width:calc(var(--%NS%_size) * .52);height:calc(var(--%NS%_size) * .52);padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--%NS%kpt-color-surface)}}\n"], encapsulation: 2 }); }
|
|
584
|
+
}
|
|
585
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBadge, [{
|
|
586
|
+
type: Component,
|
|
587
|
+
args: [{ selector: 'kpt-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
|
|
588
|
+
<ng-content />
|
|
589
|
+
<span
|
|
590
|
+
class="kpt-badge"
|
|
591
|
+
[attr.data-variant]="variant()"
|
|
592
|
+
[attr.data-size]="size()"
|
|
593
|
+
[class.kpt-badge--overlay]="overlay()"
|
|
594
|
+
[class.kpt-badge--dot]="dot()"
|
|
595
|
+
>{{ dot() ? '' : display() }}</span>
|
|
596
|
+
`, host: { class: 'kpt-badge-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_size: 1.25rem;--_padding: .35rem;display:inline-flex;align-items:center;justify-content:center;min-width:var(--_size);height:var(--_size);padding-inline:var(--_padding);box-sizing:border-box;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:calc(var(--_size) * .6);font-weight:var(--kpt-font-weight-semibold, 600);line-height:1}.kpt-badge[data-size=sm]{--_size: 1rem;--_padding: .28rem}.kpt-badge[data-size=md]{--_size: 1.25rem;--_padding: .35rem}.kpt-badge[data-size=lg]{--_size: 1.5rem;--_padding: .45rem}.kpt-badge[data-variant=neutral]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted)}.kpt-badge[data-variant=success]{--_bg: var(--kpt-color-success);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--_bg: var(--kpt-color-warning);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=info]{--_bg: var(--kpt-color-info);--_fg: var(--kpt-color-surface)}.kpt-badge--dot{min-width:0;width:calc(var(--_size) * .52);height:calc(var(--_size) * .52);padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--kpt-color-surface)}}\n"] }]
|
|
597
|
+
}], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] }); })();
|
|
598
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBadge, { className: "KptBadge", filePath: "lib/badge/badge.component.ts", lineNumber: 32 }); })();
|
|
599
|
+
|
|
255
600
|
/** Token konfiguracji i18n. Konsumowany przez `KptI18n`. */
|
|
256
601
|
const KPT_I18N_CONFIG = new InjectionToken('KPT_I18N_CONFIG');
|
|
257
602
|
|
|
@@ -389,6 +734,7 @@ const KPT_MESSAGES_EN = {
|
|
|
389
734
|
dateRange: 'Date range',
|
|
390
735
|
min: 'min',
|
|
391
736
|
max: 'max',
|
|
737
|
+
editCell: 'Edit: {column}',
|
|
392
738
|
},
|
|
393
739
|
confirm: {
|
|
394
740
|
header: 'Confirmation',
|
|
@@ -650,6 +996,7 @@ const KPT_MESSAGES_PL = {
|
|
|
650
996
|
dateRange: 'Zakres dat',
|
|
651
997
|
min: 'min',
|
|
652
998
|
max: 'max',
|
|
999
|
+
editCell: 'Edytuj: {column}',
|
|
653
1000
|
},
|
|
654
1001
|
confirm: {
|
|
655
1002
|
header: 'Potwierdzenie',
|
|
@@ -842,225 +1189,145 @@ class KptI18n {
|
|
|
842
1189
|
* Rejestruje lub nadpisuje słownik języka. Częściowy słownik deep-merge'uje się
|
|
843
1190
|
* na istniejący (lub EN dla nowego języka) → brakujące klucze mają wartość EN.
|
|
844
1191
|
*/
|
|
845
|
-
registerMessages(locale, patch) {
|
|
846
|
-
const base = this.registry.get(locale) ?? KPT_MESSAGES_EN;
|
|
847
|
-
this.registry.set(locale, deepMerge(base, patch));
|
|
848
|
-
}
|
|
849
|
-
/**
|
|
850
|
-
* Tłumaczy klucz w notacji kropkowej (np. `'paginator.range'`), z opcjonalną
|
|
851
|
-
* interpolacją `{name}`. Brakujący klucz spada na EN, a w ostateczności zwraca sam klucz.
|
|
852
|
-
*/
|
|
853
|
-
t(key, params) {
|
|
854
|
-
const raw = this.lookup(this.messages(), key) ?? this.lookup(KPT_MESSAGES_EN, key) ?? key;
|
|
855
|
-
if (!params)
|
|
856
|
-
return raw;
|
|
857
|
-
return raw.replace(/\{(\w+)\}/g, (_, name) => String(params[name] ?? `{${name}}`));
|
|
858
|
-
}
|
|
859
|
-
lookup(dict, key) {
|
|
860
|
-
let node = dict;
|
|
861
|
-
for (const part of key.split('.')) {
|
|
862
|
-
if (node && typeof node === 'object' && part in node) {
|
|
863
|
-
node = node[part];
|
|
864
|
-
}
|
|
865
|
-
else {
|
|
866
|
-
return undefined;
|
|
867
|
-
}
|
|
868
|
-
}
|
|
869
|
-
return typeof node === 'string' ? node : undefined;
|
|
870
|
-
}
|
|
871
|
-
static { this.ɵfac = function KptI18n_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptI18n)(); }; }
|
|
872
|
-
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptI18n, factory: KptI18n.ɵfac, providedIn: 'root' }); }
|
|
873
|
-
}
|
|
874
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptI18n, [{
|
|
875
|
-
type: Injectable,
|
|
876
|
-
args: [{ providedIn: 'root' }]
|
|
877
|
-
}], () => [], null); })();
|
|
878
|
-
|
|
879
|
-
const KPT_ICONS = {
|
|
880
|
-
'menu': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" />',
|
|
881
|
-
'x': '<path d="M18 6l-12 12" /> <path d="M6 6l12 12" />',
|
|
882
|
-
'chevron-up': '<path d="M6 15l6 -6l6 6" />',
|
|
883
|
-
'chevron-down': '<path d="M6 9l6 6l6 -6" />',
|
|
884
|
-
'chevron-left': '<path d="M15 6l-6 6l6 6" />',
|
|
885
|
-
'chevron-right': '<path d="M9 6l6 6l-6 6" />',
|
|
886
|
-
'check': '<path d="M5 12l5 5l10 -10" />',
|
|
887
|
-
'search': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" />',
|
|
888
|
-
'grip-vertical': '<path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
|
|
889
|
-
'info': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
|
|
890
|
-
'alert-triangle': '<path d="M12 9v4" /> <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0" /> <path d="M12 16h.01" />',
|
|
891
|
-
'circle-check': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 12l2 2l4 -4" />',
|
|
892
|
-
'circle-x': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M10 10l4 4m0 -4l-4 4" />',
|
|
893
|
-
'calendar': '<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" /> <path d="M16 3v4" /> <path d="M8 3v4" /> <path d="M4 11h16" /> <path d="M11 15h1" /> <path d="M12 15v3" />',
|
|
894
|
-
'copy': '<path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />',
|
|
895
|
-
'link': '<path d="M9 15l6 -6" /> <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /> <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />',
|
|
896
|
-
'code': '<path d="M7 8l-4 4l4 4" /> <path d="M17 8l4 4l-4 4" /> <path d="M14 4l-4 16" />',
|
|
897
|
-
'bold': '<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /> <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />',
|
|
898
|
-
'italic': '<path d="M11 5l6 0" /> <path d="M7 19l6 0" /> <path d="M14 5l-4 14" />',
|
|
899
|
-
'underline': '<path d="M7 5v5a5 5 0 0 0 10 0v-5" /> <path d="M5 19h14" />',
|
|
900
|
-
'strikethrough': '<path d="M5 12l14 0" /> <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />',
|
|
901
|
-
'list': '<path d="M9 6l11 0" /> <path d="M9 12l11 0" /> <path d="M9 18l11 0" /> <path d="M5 6l0 .01" /> <path d="M5 12l0 .01" /> <path d="M5 18l0 .01" />',
|
|
902
|
-
'list-numbers': '<path d="M11 6h9" /> <path d="M11 12h9" /> <path d="M12 18h8" /> <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /> <path d="M6 10v-6l-2 2" />',
|
|
903
|
-
'clear-formatting': '<path d="M17 15l4 4m0 -4l-4 4" /> <path d="M7 6v-1h11v1" /> <path d="M7 19l4 0" /> <path d="M13 5l-4 14" />',
|
|
904
|
-
'star': '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />',
|
|
905
|
-
'plus': '<path d="M12 5l0 14" /> <path d="M5 12l14 0" />',
|
|
906
|
-
'upload': '<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /> <path d="M7 9l5 -5l5 5" /> <path d="M12 4l0 12" />',
|
|
907
|
-
'dots-vertical': '<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
|
|
908
|
-
'photo': '<path d="M15 8h.01" /> <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /> <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /> <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />',
|
|
909
|
-
'trash': '<path d="M4 7l16 0" /> <path d="M10 11l0 6" /> <path d="M14 11l0 6" /> <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /> <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />',
|
|
910
|
-
'pencil': '<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M13.5 6.5l4 4" />',
|
|
911
|
-
'eye': '<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />',
|
|
912
|
-
'eye-off': '<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" />',
|
|
913
|
-
'minus': '<path d="M5 12l14 0" />',
|
|
914
|
-
'arrow-up': '<path d="M12 5l0 14" /> <path d="M18 11l-6 -6" /> <path d="M6 11l6 -6" />',
|
|
915
|
-
'arrow-down': '<path d="M12 5l0 14" /> <path d="M18 13l-6 6" /> <path d="M6 13l6 6" />',
|
|
916
|
-
'zoom-in': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M7 10l6 0" /> <path d="M10 7l0 6" /> <path d="M21 21l-6 -6" />',
|
|
917
|
-
'info-circle': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
|
|
918
|
-
'phone': '<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />',
|
|
919
|
-
'map-pin': '<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />',
|
|
920
|
-
'world': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M3.6 9h16.8" /> <path d="M3.6 15h16.8" /> <path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" />',
|
|
921
|
-
'clock': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 7v5l3 3" />',
|
|
922
|
-
'align-left': '<path d="M4 6l16 0" /> <path d="M4 12l10 0" /> <path d="M4 18l14 0" />',
|
|
923
|
-
'align-center': '<path d="M4 6l16 0" /> <path d="M8 12l8 0" /> <path d="M6 18l12 0" />',
|
|
924
|
-
'align-right': '<path d="M4 6l16 0" /> <path d="M10 12l10 0" /> <path d="M6 18l14 0" />',
|
|
925
|
-
'align-justified': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l12 0" />',
|
|
926
|
-
'palette': '<path d="M12 21a9 9 0 0 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M12.5 7.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M16.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />',
|
|
927
|
-
'highlight': '<path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M12.5 5.5l4 4" /> <path d="M4.5 13.5l4 4" /> <path d="M21 15v4h-8" />',
|
|
928
|
-
'clipboard': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />',
|
|
929
|
-
'clipboard-text': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /> <path d="M9 12h6" /> <path d="M9 16h6" />',
|
|
930
|
-
'table': '<path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /> <path d="M3 10h18" /> <path d="M10 3v18" />',
|
|
931
|
-
'mail': '<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /> <path d="M3 7l9 6l9 -6" />',
|
|
932
|
-
'share': '<path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M8.7 10.7l6.6 -3.4" /> <path d="M8.7 13.3l6.6 3.4" />',
|
|
933
|
-
'external-link': '<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" /> <path d="M11 13l9 -9" /> <path d="M15 4h5v5" />',
|
|
934
|
-
'crosshair': '<path d="M4 12h4" /> <path d="M16 12h4" /> <path d="M12 4v4" /> <path d="M12 16v4" /> <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />',
|
|
935
|
-
};
|
|
936
|
-
|
|
937
|
-
/**
|
|
938
|
-
* Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
|
|
939
|
-
* Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
|
|
940
|
-
* z `@konce-pt/angular/icons` lub zarejestruj własne przez `register()`.
|
|
941
|
-
*/
|
|
942
|
-
class KptIconRegistry {
|
|
943
|
-
constructor() {
|
|
944
|
-
this.icons = new Map(Object.entries(KPT_ICONS));
|
|
945
|
-
this._version = signal(0, /* @ts-ignore */
|
|
946
|
-
...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
|
|
947
|
-
/** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
|
|
948
|
-
this.version = this._version.asReadonly();
|
|
949
|
-
}
|
|
950
|
-
/** Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`. */
|
|
951
|
-
register(icons) {
|
|
952
|
-
for (const [name, svg] of Object.entries(icons)) {
|
|
953
|
-
this.icons.set(name, svg);
|
|
954
|
-
}
|
|
955
|
-
this._version.update((v) => v + 1);
|
|
956
|
-
}
|
|
957
|
-
/** Zwraca wewnętrzny SVG ikony lub undefined. */
|
|
958
|
-
get(name) {
|
|
959
|
-
return this.icons.get(name);
|
|
960
|
-
}
|
|
961
|
-
has(name) {
|
|
962
|
-
return this.icons.has(name);
|
|
963
|
-
}
|
|
964
|
-
static { this.ɵfac = function KptIconRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconRegistry)(); }; }
|
|
965
|
-
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptIconRegistry, factory: KptIconRegistry.ɵfac, providedIn: 'root' }); }
|
|
966
|
-
}
|
|
967
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconRegistry, [{
|
|
968
|
-
type: Injectable,
|
|
969
|
-
args: [{ providedIn: 'root' }]
|
|
970
|
-
}], null, null); })();
|
|
971
|
-
/**
|
|
972
|
-
* Składa pełny znacznik `<svg>` z wewnętrznego SVG z rejestru.
|
|
973
|
-
*
|
|
974
|
-
* Wydzielone z `kpt-icon`, bo tego samego stringa potrzebują znaczniki mapy —
|
|
975
|
-
* ich HTML powstaje poza Angularem, w DOM zarządzanym przez silnik mapy.
|
|
976
|
-
* Pusty `inner` daje pusty string, żeby wołający nie musiał tego sprawdzać.
|
|
977
|
-
*/
|
|
978
|
-
function renderKptIconSvg(inner, cssClass = 'kpt-icon') {
|
|
979
|
-
if (!inner)
|
|
980
|
-
return '';
|
|
981
|
-
return (`<svg class="${cssClass}" viewBox="0 0 24 24" fill="none" stroke="currentColor"` +
|
|
982
|
-
' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
|
|
983
|
-
inner +
|
|
984
|
-
'</svg>');
|
|
985
|
-
}
|
|
986
|
-
|
|
987
|
-
/**
|
|
988
|
-
* Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
|
|
989
|
-
* (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze
|
|
990
|
-
* ([[KptIconRegistry]]) — wbudowany zestaw działa od razu, pełny zestaw dodaje
|
|
991
|
-
* `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
|
|
992
|
-
*
|
|
993
|
-
* @example
|
|
994
|
-
* <kpt-icon name="menu" />
|
|
995
|
-
* <kpt-icon name="check" size="1.25rem" />
|
|
996
|
-
*/
|
|
997
|
-
class KptIcon {
|
|
998
|
-
constructor() {
|
|
999
|
-
/** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
|
|
1000
|
-
this.name = input.required(/* @ts-ignore */
|
|
1001
|
-
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1002
|
-
/** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z font-size. */
|
|
1003
|
-
this.size = input('', /* @ts-ignore */
|
|
1004
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1005
|
-
this.host = inject(ElementRef);
|
|
1006
|
-
this.registry = inject(KptIconRegistry);
|
|
1007
|
-
effect(() => {
|
|
1008
|
-
this.registry.version(); // reaguj na późną rejestrację ikon
|
|
1009
|
-
// Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
|
|
1010
|
-
this.host.nativeElement.innerHTML = renderKptIconSvg(this.registry.get(this.name()));
|
|
1011
|
-
});
|
|
1192
|
+
registerMessages(locale, patch) {
|
|
1193
|
+
const base = this.registry.get(locale) ?? KPT_MESSAGES_EN;
|
|
1194
|
+
this.registry.set(locale, deepMerge(base, patch));
|
|
1012
1195
|
}
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1196
|
+
/**
|
|
1197
|
+
* Tłumaczy klucz w notacji kropkowej (np. `'paginator.range'`), z opcjonalną
|
|
1198
|
+
* interpolacją `{name}`. Brakujący klucz spada na EN, a w ostateczności zwraca sam klucz.
|
|
1199
|
+
*/
|
|
1200
|
+
t(key, params) {
|
|
1201
|
+
const raw = this.lookup(this.messages(), key) ?? this.lookup(KPT_MESSAGES_EN, key) ?? key;
|
|
1202
|
+
if (!params)
|
|
1203
|
+
return raw;
|
|
1204
|
+
return raw.replace(/\{(\w+)\}/g, (_, name) => String(params[name] ?? `{${name}}`));
|
|
1205
|
+
}
|
|
1206
|
+
lookup(dict, key) {
|
|
1207
|
+
let node = dict;
|
|
1208
|
+
for (const part of key.split('.')) {
|
|
1209
|
+
if (node && typeof node === 'object' && part in node) {
|
|
1210
|
+
node = node[part];
|
|
1211
|
+
}
|
|
1212
|
+
else {
|
|
1213
|
+
return undefined;
|
|
1214
|
+
}
|
|
1215
|
+
}
|
|
1216
|
+
return typeof node === 'string' ? node : undefined;
|
|
1217
|
+
}
|
|
1218
|
+
static { this.ɵfac = function KptI18n_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptI18n)(); }; }
|
|
1219
|
+
static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptI18n, factory: KptI18n.ɵfac, providedIn: 'root' }); }
|
|
1017
1220
|
}
|
|
1018
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(
|
|
1019
|
-
type:
|
|
1020
|
-
args: [{
|
|
1021
|
-
|
|
1022
|
-
'aria-hidden': 'true',
|
|
1023
|
-
'[style.font-size]': 'size() || null',
|
|
1024
|
-
}, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"] }]
|
|
1025
|
-
}], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
|
|
1026
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIcon, { className: "KptIcon", filePath: "lib/icon/icon.component.ts", lineNumber: 26 }); })();
|
|
1221
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptI18n, [{
|
|
1222
|
+
type: Injectable,
|
|
1223
|
+
args: [{ providedIn: 'root' }]
|
|
1224
|
+
}], () => [], null); })();
|
|
1027
1225
|
|
|
1028
|
-
const _c0$
|
|
1226
|
+
const _c0$z = ["*"];
|
|
1029
1227
|
function KptSplitButton_ng_template_6_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
1030
1228
|
i0.ɵɵelement(0, "div", 7);
|
|
1031
1229
|
} }
|
|
1032
1230
|
function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1033
|
-
i0.ɵɵelement(0, "kpt-
|
|
1231
|
+
i0.ɵɵelement(0, "kpt-avatar", 10);
|
|
1034
1232
|
} if (rf & 2) {
|
|
1035
|
-
const
|
|
1036
|
-
i0.ɵɵproperty("name",
|
|
1233
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1234
|
+
i0.ɵɵproperty("src", item_r1.avatar.src ?? null)("name", item_r1.avatar.name ?? "")("icon", item_r1.avatar.icon ?? null);
|
|
1235
|
+
} }
|
|
1236
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
1237
|
+
i0.ɵɵelement(0, "kpt-icon", 11);
|
|
1238
|
+
} if (rf & 2) {
|
|
1239
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1240
|
+
i0.ɵɵproperty("name", item_r1.icon);
|
|
1241
|
+
} }
|
|
1242
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
1243
|
+
i0.ɵɵelementStart(0, "span", 13);
|
|
1244
|
+
i0.ɵɵtext(1);
|
|
1245
|
+
i0.ɵɵelementEnd();
|
|
1246
|
+
} if (rf & 2) {
|
|
1247
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1248
|
+
i0.ɵɵadvance();
|
|
1249
|
+
i0.ɵɵtextInterpolate(item_r1.label);
|
|
1250
|
+
} }
|
|
1251
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
1252
|
+
i0.ɵɵelementStart(0, "span", 14);
|
|
1253
|
+
i0.ɵɵtext(1);
|
|
1254
|
+
i0.ɵɵelementEnd();
|
|
1255
|
+
} if (rf & 2) {
|
|
1256
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1257
|
+
i0.ɵɵadvance();
|
|
1258
|
+
i0.ɵɵtextInterpolate(item_r1.description);
|
|
1037
1259
|
} }
|
|
1038
1260
|
function KptSplitButton_ng_template_6_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1039
|
-
|
|
1040
|
-
i0.ɵɵ
|
|
1041
|
-
i0.ɵɵ
|
|
1042
|
-
i0.ɵɵconditionalCreate(
|
|
1043
|
-
i0.ɵɵ
|
|
1044
|
-
i0.ɵɵtext(3);
|
|
1261
|
+
i0.ɵɵelementStart(0, "div", 8);
|
|
1262
|
+
i0.ɵɵconditionalCreate(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_1_Template, 1, 3, "kpt-avatar", 10)(2, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_2_Template, 1, 1, "kpt-icon", 11);
|
|
1263
|
+
i0.ɵɵelementStart(3, "span", 12);
|
|
1264
|
+
i0.ɵɵconditionalCreate(4, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_4_Template, 2, 1, "span", 13);
|
|
1265
|
+
i0.ɵɵconditionalCreate(5, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_5_Template, 2, 1, "span", 14);
|
|
1045
1266
|
i0.ɵɵelementEnd()();
|
|
1046
1267
|
} if (rf & 2) {
|
|
1047
|
-
const
|
|
1048
|
-
i0.ɵɵclassProp("kpt-split-button__item--danger", item_r2.danger);
|
|
1049
|
-
i0.ɵɵproperty("disabled", item_r2.disabled);
|
|
1268
|
+
const item_r1 = i0.ɵɵnextContext().$implicit;
|
|
1050
1269
|
i0.ɵɵadvance();
|
|
1051
|
-
i0.ɵɵconditional(
|
|
1052
|
-
i0.ɵɵadvance(
|
|
1053
|
-
i0.ɵɵ
|
|
1270
|
+
i0.ɵɵconditional(item_r1.avatar ? 1 : item_r1.icon ? 2 : -1);
|
|
1271
|
+
i0.ɵɵadvance(3);
|
|
1272
|
+
i0.ɵɵconditional(item_r1.label ? 4 : -1);
|
|
1273
|
+
i0.ɵɵadvance();
|
|
1274
|
+
i0.ɵɵconditional(item_r1.description ? 5 : -1);
|
|
1275
|
+
} }
|
|
1276
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1277
|
+
i0.ɵɵelement(0, "kpt-icon", 11);
|
|
1278
|
+
} if (rf & 2) {
|
|
1279
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1280
|
+
i0.ɵɵproperty("name", item_r1.icon);
|
|
1281
|
+
} }
|
|
1282
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
1283
|
+
i0.ɵɵelementStart(0, "span", 14);
|
|
1284
|
+
i0.ɵɵtext(1);
|
|
1285
|
+
i0.ɵɵelementEnd();
|
|
1286
|
+
} if (rf & 2) {
|
|
1287
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1288
|
+
i0.ɵɵadvance();
|
|
1289
|
+
i0.ɵɵtextInterpolate(item_r1.description);
|
|
1290
|
+
} }
|
|
1291
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
1292
|
+
i0.ɵɵelement(0, "kpt-badge", 16);
|
|
1293
|
+
} if (rf & 2) {
|
|
1294
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
1295
|
+
i0.ɵɵproperty("value", item_r1.badge)("variant", item_r1.badgeVariant ?? "primary");
|
|
1296
|
+
} }
|
|
1297
|
+
function KptSplitButton_ng_template_6_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
1298
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
1299
|
+
i0.ɵɵelementStart(0, "button", 15);
|
|
1300
|
+
i0.ɵɵlistener("click", function KptSplitButton_ng_template_6_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const item_r1 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pick(item_r1)); });
|
|
1301
|
+
i0.ɵɵconditionalCreate(1, KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_1_Template, 1, 1, "kpt-icon", 11);
|
|
1302
|
+
i0.ɵɵelementStart(2, "span", 12)(3, "span", 13);
|
|
1303
|
+
i0.ɵɵtext(4);
|
|
1304
|
+
i0.ɵɵelementEnd();
|
|
1305
|
+
i0.ɵɵconditionalCreate(5, KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_5_Template, 2, 1, "span", 14);
|
|
1306
|
+
i0.ɵɵelementEnd();
|
|
1307
|
+
i0.ɵɵconditionalCreate(6, KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_6_Template, 1, 2, "kpt-badge", 16);
|
|
1308
|
+
i0.ɵɵelementEnd();
|
|
1309
|
+
} if (rf & 2) {
|
|
1310
|
+
const item_r1 = i0.ɵɵnextContext().$implicit;
|
|
1311
|
+
i0.ɵɵclassProp("kpt-split-button__item--danger", item_r1.danger);
|
|
1312
|
+
i0.ɵɵproperty("disabled", item_r1.disabled);
|
|
1313
|
+
i0.ɵɵadvance();
|
|
1314
|
+
i0.ɵɵconditional(item_r1.icon ? 1 : -1);
|
|
1315
|
+
i0.ɵɵadvance(3);
|
|
1316
|
+
i0.ɵɵtextInterpolate(item_r1.label);
|
|
1317
|
+
i0.ɵɵadvance();
|
|
1318
|
+
i0.ɵɵconditional(item_r1.description ? 5 : -1);
|
|
1319
|
+
i0.ɵɵadvance();
|
|
1320
|
+
i0.ɵɵconditional(item_r1.badge !== undefined && item_r1.badge !== null ? 6 : -1);
|
|
1054
1321
|
} }
|
|
1055
1322
|
function KptSplitButton_ng_template_6_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
1056
|
-
i0.ɵɵconditionalCreate(0, KptSplitButton_ng_template_6_For_2_Conditional_0_Template, 1, 0, "div", 7)(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Template,
|
|
1323
|
+
i0.ɵɵconditionalCreate(0, KptSplitButton_ng_template_6_For_2_Conditional_0_Template, 1, 0, "div", 7)(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Template, 6, 3, "div", 8)(2, KptSplitButton_ng_template_6_For_2_Conditional_2_Template, 7, 7, "button", 9);
|
|
1057
1324
|
} if (rf & 2) {
|
|
1058
|
-
const
|
|
1059
|
-
i0.ɵɵconditional(
|
|
1325
|
+
const item_r1 = ctx.$implicit;
|
|
1326
|
+
i0.ɵɵconditional(item_r1.separator ? 0 : item_r1.header ? 1 : 2);
|
|
1060
1327
|
} }
|
|
1061
1328
|
function KptSplitButton_ng_template_6_Template(rf, ctx) { if (rf & 1) {
|
|
1062
1329
|
i0.ɵɵelementStart(0, "div", 6);
|
|
1063
|
-
i0.ɵɵrepeaterCreate(1, KptSplitButton_ng_template_6_For_2_Template,
|
|
1330
|
+
i0.ɵɵrepeaterCreate(1, KptSplitButton_ng_template_6_For_2_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
|
|
1064
1331
|
i0.ɵɵelementEnd();
|
|
1065
1332
|
} if (rf & 2) {
|
|
1066
1333
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -1098,7 +1365,7 @@ class KptSplitButton {
|
|
|
1098
1365
|
this.open.set(false);
|
|
1099
1366
|
}
|
|
1100
1367
|
static { this.ɵfac = function KptSplitButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSplitButton)(); }; }
|
|
1101
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitButton, selectors: [["kpt-split-button"]], hostAttrs: [1, "kpt-split-button-host"], inputs: { variant: [1, "variant"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { primaryClick: "primaryClick", select: "select" }, ngContentSelectors: _c0$
|
|
1368
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitButton, selectors: [["kpt-split-button"]], hostAttrs: [1, "kpt-split-button-host"], inputs: { variant: [1, "variant"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { primaryClick: "primaryClick", select: "select" }, ngContentSelectors: _c0$z, decls: 7, vars: 8, consts: [["origin", "cdkOverlayOrigin"], [1, "kpt-split-button"], ["type", "button", 1, "kpt-split-button__main", 3, "click", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-split-button__toggle", 3, "click", "disabled"], ["name", "chevron-down"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-split-button__panel"], ["role", "separator", 1, "kpt-split-button__separator"], ["role", "presentation", 1, "kpt-split-button__header"], ["type", "button", 1, "kpt-split-button__item", 3, "kpt-split-button__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-split-button__text"], [1, "kpt-split-button__label"], [1, "kpt-split-button__description"], ["type", "button", 1, "kpt-split-button__item", 3, "click", "disabled"], [1, "kpt-split-button__badge", 3, "value", "variant"]], template: function KptSplitButton_Template(rf, ctx) { if (rf & 1) {
|
|
1102
1369
|
i0.ɵɵprojectionDef();
|
|
1103
1370
|
i0.ɵɵelementStart(0, "div", 1)(1, "button", 2);
|
|
1104
1371
|
i0.ɵɵlistener("click", function KptSplitButton_Template_button_click_1_listener() { return ctx.primaryClick.emit(); });
|
|
@@ -1120,11 +1387,11 @@ class KptSplitButton {
|
|
|
1120
1387
|
i0.ɵɵattribute("aria-label", ctx.i18n.t("splitButton.more"));
|
|
1121
1388
|
i0.ɵɵadvance(3);
|
|
1122
1389
|
i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r4)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
|
|
1123
|
-
} }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;border-radius:var(--%NS%kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);height:2.5rem;
|
|
1390
|
+
} }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;border-radius:var(--%NS%kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);height:2.5rem;position:relative;isolation:isolate}.kpt-split-button__main:after,.kpt-split-button__toggle:after{content:\"\";position:absolute;inset:0;z-index:-1;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-split-button__main:hover:not(:disabled):after,.kpt-split-button__toggle:hover:not(:disabled):after{opacity:1}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.kpt-split-button__main:after,.kpt-split-button__toggle:after{transition:none}}.kpt-split-button__main{padding-inline:var(--%NS%kpt-space-4, 1rem)}.kpt-split-button__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border-inline-start:1px solid color-mix(in oklch,var(--%NS%_fg) 25%,transparent)}.kpt-split-button__panel{min-width:11rem;padding:.25rem;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-split-button__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-split-button__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-split-button__item:disabled{opacity:.45;cursor:not-allowed}.kpt-split-button__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-split-button__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-split-button__header{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:default}.kpt-split-button__header .kpt-split-button__label{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-split-button__header kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-split-button__text{display:flex;flex-direction:column;min-width:0}.kpt-split-button__label,.kpt-split-button__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-split-button__description{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-split-button__badge{margin-inline-start:auto}.kpt-split-button__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
|
|
1124
1391
|
}
|
|
1125
1392
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSplitButton, [{
|
|
1126
1393
|
type: Component,
|
|
1127
|
-
args: [{ selector: 'kpt-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], template: `
|
|
1394
|
+
args: [{ selector: 'kpt-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], template: `
|
|
1128
1395
|
<div class="kpt-split-button" [attr.data-variant]="variant()">
|
|
1129
1396
|
<button class="kpt-split-button__main" type="button" [disabled]="disabled()" (click)="primaryClick.emit()">
|
|
1130
1397
|
<ng-content />
|
|
@@ -1153,6 +1420,25 @@ class KptSplitButton {
|
|
|
1153
1420
|
@for (item of items(); track $index) {
|
|
1154
1421
|
@if (item.separator) {
|
|
1155
1422
|
<div class="kpt-split-button__separator" role="separator"></div>
|
|
1423
|
+
} @else if (item.header) {
|
|
1424
|
+
<div class="kpt-split-button__header" role="presentation">
|
|
1425
|
+
@if (item.avatar) {
|
|
1426
|
+
<kpt-avatar
|
|
1427
|
+
[src]="item.avatar.src ?? null"
|
|
1428
|
+
[name]="item.avatar.name ?? ''"
|
|
1429
|
+
[icon]="item.avatar.icon ?? null"
|
|
1430
|
+
size="sm"
|
|
1431
|
+
/>
|
|
1432
|
+
} @else if (item.icon) {
|
|
1433
|
+
<kpt-icon [name]="item.icon" />
|
|
1434
|
+
}
|
|
1435
|
+
<span class="kpt-split-button__text">
|
|
1436
|
+
@if (item.label) { <span class="kpt-split-button__label">{{ item.label }}</span> }
|
|
1437
|
+
@if (item.description) {
|
|
1438
|
+
<span class="kpt-split-button__description">{{ item.description }}</span>
|
|
1439
|
+
}
|
|
1440
|
+
</span>
|
|
1441
|
+
</div>
|
|
1156
1442
|
} @else {
|
|
1157
1443
|
<button
|
|
1158
1444
|
type="button"
|
|
@@ -1162,15 +1448,27 @@ class KptSplitButton {
|
|
|
1162
1448
|
(click)="pick(item)"
|
|
1163
1449
|
>
|
|
1164
1450
|
@if (item.icon) { <kpt-icon [name]="item.icon" /> }
|
|
1165
|
-
<span
|
|
1451
|
+
<span class="kpt-split-button__text">
|
|
1452
|
+
<span class="kpt-split-button__label">{{ item.label }}</span>
|
|
1453
|
+
@if (item.description) {
|
|
1454
|
+
<span class="kpt-split-button__description">{{ item.description }}</span>
|
|
1455
|
+
}
|
|
1456
|
+
</span>
|
|
1457
|
+
@if (item.badge !== undefined && item.badge !== null) {
|
|
1458
|
+
<kpt-badge
|
|
1459
|
+
class="kpt-split-button__badge"
|
|
1460
|
+
[value]="item.badge"
|
|
1461
|
+
[variant]="item.badgeVariant ?? 'primary'"
|
|
1462
|
+
/>
|
|
1463
|
+
}
|
|
1166
1464
|
</button>
|
|
1167
1465
|
}
|
|
1168
1466
|
}
|
|
1169
1467
|
</div>
|
|
1170
1468
|
</ng-template>
|
|
1171
|
-
`, host: { class: 'kpt-split-button-host' }, styles: ["@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;border-radius:var(--kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--_bg);color:var(--_fg);cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);height:2.5rem;
|
|
1469
|
+
`, host: { class: 'kpt-split-button-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;border-radius:var(--kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--_bg);color:var(--_fg);cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);height:2.5rem;position:relative;isolation:isolate}.kpt-split-button__main:after,.kpt-split-button__toggle:after{content:\"\";position:absolute;inset:0;z-index:-1;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-split-button__main:hover:not(:disabled):after,.kpt-split-button__toggle:hover:not(:disabled):after{opacity:1}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.kpt-split-button__main:after,.kpt-split-button__toggle:after{transition:none}}.kpt-split-button__main{padding-inline:var(--kpt-space-4, 1rem)}.kpt-split-button__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border-inline-start:1px solid color-mix(in oklch,var(--_fg) 25%,transparent)}.kpt-split-button__panel{min-width:11rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-split-button__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-split-button__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-split-button__item:disabled{opacity:.45;cursor:not-allowed}.kpt-split-button__item--danger{color:var(--kpt-color-danger)}.kpt-split-button__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-split-button__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--kpt-font-size-sm, .875rem);cursor:default}.kpt-split-button__header .kpt-split-button__label{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-split-button__header kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-split-button__text{display:flex;flex-direction:column;min-width:0}.kpt-split-button__label,.kpt-split-button__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-split-button__description{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-split-button__badge{margin-inline-start:auto}.kpt-split-button__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
|
|
1172
1470
|
}], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], primaryClick: [{ type: i0.Output, args: ["primaryClick"] }], select: [{ type: i0.Output, args: ["select"] }] }); })();
|
|
1173
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSplitButton, { className: "KptSplitButton", filePath: "lib/split-button/split-button.component.ts", lineNumber:
|
|
1471
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSplitButton, { className: "KptSplitButton", filePath: "lib/split-button/split-button.component.ts", lineNumber: 101 }); })();
|
|
1174
1472
|
|
|
1175
1473
|
// Do not edit directly — generated by scripts/gen-tokens.mjs
|
|
1176
1474
|
// from @konce-pt/tokens (tokens/primitives/breakpoint.json).
|
|
@@ -1265,62 +1563,6 @@ function provideKptI18n(config = {}) {
|
|
|
1265
1563
|
return makeEnvironmentProviders([{ provide: KPT_I18N_CONFIG, useValue: config }]);
|
|
1266
1564
|
}
|
|
1267
1565
|
|
|
1268
|
-
const _c0$z = ["*"];
|
|
1269
|
-
/**
|
|
1270
|
-
* Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
|
|
1271
|
-
*
|
|
1272
|
-
* @example
|
|
1273
|
-
* <kpt-badge [value]="3" variant="danger" />
|
|
1274
|
-
* <kpt-badge [value]="128" overlay><kpt-icon name="menu" /></kpt-badge>
|
|
1275
|
-
* <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
|
|
1276
|
-
*/
|
|
1277
|
-
class KptBadge {
|
|
1278
|
-
constructor() {
|
|
1279
|
-
this.value = input(null, /* @ts-ignore */
|
|
1280
|
-
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1281
|
-
this.variant = input('primary', /* @ts-ignore */
|
|
1282
|
-
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1283
|
-
this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1284
|
-
this.overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1285
|
-
this.max = input(99, /* @ts-ignore */
|
|
1286
|
-
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1287
|
-
this.display = computed(() => {
|
|
1288
|
-
const v = this.value();
|
|
1289
|
-
if (typeof v === 'number' && v > this.max())
|
|
1290
|
-
return `${this.max()}+`;
|
|
1291
|
-
return v ?? '';
|
|
1292
|
-
}, /* @ts-ignore */
|
|
1293
|
-
...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
1294
|
-
}
|
|
1295
|
-
static { this.ɵfac = function KptBadge_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBadge)(); }; }
|
|
1296
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBadge, selectors: [["kpt-badge"]], hostAttrs: [1, "kpt-badge-host"], inputs: { value: [1, "value"], variant: [1, "variant"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$z, decls: 3, vars: 6, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
|
|
1297
|
-
i0.ɵɵprojectionDef();
|
|
1298
|
-
i0.ɵɵprojection(0);
|
|
1299
|
-
i0.ɵɵdomElementStart(1, "span", 0);
|
|
1300
|
-
i0.ɵɵtext(2);
|
|
1301
|
-
i0.ɵɵdomElementEnd();
|
|
1302
|
-
} if (rf & 2) {
|
|
1303
|
-
i0.ɵɵadvance();
|
|
1304
|
-
i0.ɵɵclassProp("kpt-badge--overlay", ctx.overlay())("kpt-badge--dot", ctx.dot());
|
|
1305
|
-
i0.ɵɵattribute("data-variant", ctx.variant());
|
|
1306
|
-
i0.ɵɵadvance();
|
|
1307
|
-
i0.ɵɵtextInterpolate(ctx.dot() ? "" : ctx.display());
|
|
1308
|
-
} }, styles: ["@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding-inline:.35rem;box-sizing:border-box;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);line-height:1}.kpt-badge[data-variant=neutral]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted)}.kpt-badge[data-variant=success]{--%NS%_bg: var(--%NS%kpt-color-success);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--%NS%_bg: var(--%NS%kpt-color-warning);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=info]{--%NS%_bg: var(--%NS%kpt-color-info);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge--dot{min-width:0;width:.65rem;height:.65rem;padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--%NS%kpt-color-surface)}}\n"], encapsulation: 2 }); }
|
|
1309
|
-
}
|
|
1310
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBadge, [{
|
|
1311
|
-
type: Component,
|
|
1312
|
-
args: [{ selector: 'kpt-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
|
|
1313
|
-
<ng-content />
|
|
1314
|
-
<span
|
|
1315
|
-
class="kpt-badge"
|
|
1316
|
-
[attr.data-variant]="variant()"
|
|
1317
|
-
[class.kpt-badge--overlay]="overlay()"
|
|
1318
|
-
[class.kpt-badge--dot]="dot()"
|
|
1319
|
-
>{{ dot() ? '' : display() }}</span>
|
|
1320
|
-
`, host: { class: 'kpt-badge-host' }, styles: ["@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding-inline:.35rem;box-sizing:border-box;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);line-height:1}.kpt-badge[data-variant=neutral]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted)}.kpt-badge[data-variant=success]{--_bg: var(--kpt-color-success);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--_bg: var(--kpt-color-warning);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=info]{--_bg: var(--kpt-color-info);--_fg: var(--kpt-color-surface)}.kpt-badge--dot{min-width:0;width:.65rem;height:.65rem;padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--kpt-color-surface)}}\n"] }]
|
|
1321
|
-
}], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] }); })();
|
|
1322
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBadge, { className: "KptBadge", filePath: "lib/badge/badge.component.ts", lineNumber: 29 }); })();
|
|
1323
|
-
|
|
1324
1566
|
const _c0$y = ["*"];
|
|
1325
1567
|
function KptChip_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
1326
1568
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
@@ -1382,82 +1624,6 @@ class KptChip {
|
|
|
1382
1624
|
}], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] }); })();
|
|
1383
1625
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptChip, { className: "KptChip", filePath: "lib/chip/chip.component.ts", lineNumber: 36 }); })();
|
|
1384
1626
|
|
|
1385
|
-
function KptAvatar_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
1386
|
-
i0.ɵɵelement(0, "img", 1);
|
|
1387
|
-
} if (rf & 2) {
|
|
1388
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
1389
|
-
i0.ɵɵproperty("src", ctx_r0.src(), i0.ɵɵsanitizeUrl)("alt", ctx_r0.name() || "");
|
|
1390
|
-
} }
|
|
1391
|
-
function KptAvatar_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
1392
|
-
i0.ɵɵelementStart(0, "span", 2);
|
|
1393
|
-
i0.ɵɵtext(1);
|
|
1394
|
-
i0.ɵɵelementEnd();
|
|
1395
|
-
} if (rf & 2) {
|
|
1396
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
1397
|
-
i0.ɵɵadvance();
|
|
1398
|
-
i0.ɵɵtextInterpolate(ctx_r0.initials());
|
|
1399
|
-
} }
|
|
1400
|
-
function KptAvatar_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
1401
|
-
i0.ɵɵelement(0, "kpt-icon", 3);
|
|
1402
|
-
} if (rf & 2) {
|
|
1403
|
-
const ctx_r0 = i0.ɵɵnextContext();
|
|
1404
|
-
i0.ɵɵproperty("name", ctx_r0.icon());
|
|
1405
|
-
} }
|
|
1406
|
-
/**
|
|
1407
|
-
* Awatar — obraz, inicjały (z `name`) lub ikona.
|
|
1408
|
-
*
|
|
1409
|
-
* @example
|
|
1410
|
-
* <kpt-avatar src="/u/anna.jpg" />
|
|
1411
|
-
* <kpt-avatar name="Anna Kowalska" size="lg" />
|
|
1412
|
-
* <kpt-avatar icon="user" shape="square" />
|
|
1413
|
-
*/
|
|
1414
|
-
class KptAvatar {
|
|
1415
|
-
constructor() {
|
|
1416
|
-
this.src = input(null, /* @ts-ignore */
|
|
1417
|
-
...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
|
|
1418
|
-
this.name = input('', /* @ts-ignore */
|
|
1419
|
-
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1420
|
-
this.icon = input(null, /* @ts-ignore */
|
|
1421
|
-
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1422
|
-
this.size = input('md', /* @ts-ignore */
|
|
1423
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1424
|
-
this.shape = input('circle', /* @ts-ignore */
|
|
1425
|
-
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
1426
|
-
this.initials = computed(() => this.name()
|
|
1427
|
-
.trim()
|
|
1428
|
-
.split(/\s+/)
|
|
1429
|
-
.slice(0, 2)
|
|
1430
|
-
.map((w) => w[0]?.toUpperCase() ?? '')
|
|
1431
|
-
.join(''), /* @ts-ignore */
|
|
1432
|
-
...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
1433
|
-
}
|
|
1434
|
-
static { this.ɵfac = function KptAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAvatar)(); }; }
|
|
1435
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAvatar, selectors: [["kpt-avatar"]], hostAttrs: [1, "kpt-avatar-host"], inputs: { src: [1, "src"], name: [1, "name"], icon: [1, "icon"], size: [1, "size"], shape: [1, "shape"] }, decls: 4, vars: 3, consts: [[1, "kpt-avatar"], [1, "kpt-avatar__img", 3, "src", "alt"], [1, "kpt-avatar__initials"], [3, "name"]], template: function KptAvatar_Template(rf, ctx) { if (rf & 1) {
|
|
1436
|
-
i0.ɵɵelementStart(0, "span", 0);
|
|
1437
|
-
i0.ɵɵconditionalCreate(1, KptAvatar_Conditional_1_Template, 1, 2, "img", 1)(2, KptAvatar_Conditional_2_Template, 2, 1, "span", 2)(3, KptAvatar_Conditional_3_Template, 1, 1, "kpt-icon", 3);
|
|
1438
|
-
i0.ɵɵelementEnd();
|
|
1439
|
-
} if (rf & 2) {
|
|
1440
|
-
i0.ɵɵattribute("data-size", ctx.size())("data-shape", ctx.shape());
|
|
1441
|
-
i0.ɵɵadvance();
|
|
1442
|
-
i0.ɵɵconditional(ctx.src() ? 1 : ctx.name() ? 2 : ctx.icon() ? 3 : -1);
|
|
1443
|
-
} }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--%NS%_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--%NS%_size);height:var(--%NS%_size);border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:calc(var(--%NS%_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--%NS%_size: 2rem}.kpt-avatar[data-size=md]{--%NS%_size: 2.5rem}.kpt-avatar[data-size=lg]{--%NS%_size: 3rem}.kpt-avatar[data-size=xl]{--%NS%_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"], encapsulation: 2 }); }
|
|
1444
|
-
}
|
|
1445
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAvatar, [{
|
|
1446
|
-
type: Component,
|
|
1447
|
-
args: [{ selector: 'kpt-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
|
|
1448
|
-
<span class="kpt-avatar" [attr.data-size]="size()" [attr.data-shape]="shape()">
|
|
1449
|
-
@if (src()) {
|
|
1450
|
-
<img class="kpt-avatar__img" [src]="src()" [alt]="name() || ''" />
|
|
1451
|
-
} @else if (name()) {
|
|
1452
|
-
<span class="kpt-avatar__initials">{{ initials() }}</span>
|
|
1453
|
-
} @else if (icon()) {
|
|
1454
|
-
<kpt-icon [name]="icon()!" />
|
|
1455
|
-
}
|
|
1456
|
-
</span>
|
|
1457
|
-
`, host: { class: 'kpt-avatar-host' }, styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-weight:var(--kpt-font-weight-semibold, 600);font-size:calc(var(--_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--_size: 2rem}.kpt-avatar[data-size=md]{--_size: 2.5rem}.kpt-avatar[data-size=lg]{--_size: 3rem}.kpt-avatar[data-size=xl]{--_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"] }]
|
|
1458
|
-
}], null, { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] }); })();
|
|
1459
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatar, { className: "KptAvatar", filePath: "lib/avatar/avatar.component.ts", lineNumber: 34 }); })();
|
|
1460
|
-
|
|
1461
1627
|
/**
|
|
1462
1628
|
* Wskaźnik ładowania (spinner). Kolor z `currentColor`.
|
|
1463
1629
|
*
|
|
@@ -2394,7 +2560,11 @@ class KptSelect {
|
|
|
2394
2560
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2395
2561
|
this.touch = output();
|
|
2396
2562
|
this.i18n = inject(KptI18n);
|
|
2397
|
-
|
|
2563
|
+
/**
|
|
2564
|
+
* Stan panelu (dwukierunkowy). Pozwala otworzyć listę z zewnątrz i — co ważniejsze — wiedzieć,
|
|
2565
|
+
* kiedy user skończył wybierać. `touch` się do tego nie nadaje: leci też z blur triggera.
|
|
2566
|
+
*/
|
|
2567
|
+
this.open = model(false, /* @ts-ignore */
|
|
2398
2568
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
2399
2569
|
this.filterText = signal('', /* @ts-ignore */
|
|
2400
2570
|
...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
@@ -2430,6 +2600,17 @@ class KptSelect {
|
|
|
2430
2600
|
*/
|
|
2431
2601
|
this.filled = computed(() => this.selectedOptions().length > 0, /* @ts-ignore */
|
|
2432
2602
|
...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
|
|
2603
|
+
// Panel może zostać otwarty także z zewnątrz (`[open]`), nie tylko klikiem w trigger —
|
|
2604
|
+
// filtr i aktywną pozycję resetujemy więc przy każdym otwarciu, nie w `toggleOpen()`.
|
|
2605
|
+
effect(() => {
|
|
2606
|
+
const isOpen = this.open();
|
|
2607
|
+
untracked(() => {
|
|
2608
|
+
if (!isOpen)
|
|
2609
|
+
return;
|
|
2610
|
+
this.filterText.set('');
|
|
2611
|
+
this.activeIndex.set(-1);
|
|
2612
|
+
});
|
|
2613
|
+
});
|
|
2433
2614
|
}
|
|
2434
2615
|
isSelected(opt) {
|
|
2435
2616
|
return this.selectedValues().includes(opt.value);
|
|
@@ -2438,10 +2619,6 @@ class KptSelect {
|
|
|
2438
2619
|
if (this.disabled())
|
|
2439
2620
|
return;
|
|
2440
2621
|
this.open.update((o) => !o);
|
|
2441
|
-
if (this.open()) {
|
|
2442
|
-
this.filterText.set('');
|
|
2443
|
-
this.activeIndex.set(-1);
|
|
2444
|
-
}
|
|
2445
2622
|
}
|
|
2446
2623
|
close() {
|
|
2447
2624
|
if (!this.open())
|
|
@@ -2504,7 +2681,7 @@ class KptSelect {
|
|
|
2504
2681
|
}
|
|
2505
2682
|
}
|
|
2506
2683
|
static { this.ɵfac = function KptSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSelect)(); }; }
|
|
2507
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"] }, outputs: { value: "valueChange", touch: "touch" }, features: [i0.ɵɵProvidersFeature([{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }])], decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
|
|
2684
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"], open: [1, "open"] }, outputs: { value: "valueChange", touch: "touch", open: "openChange" }, features: [i0.ɵɵProvidersFeature([{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }])], decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
|
|
2508
2685
|
i0.ɵɵelementStart(0, "div", 1, 0);
|
|
2509
2686
|
i0.ɵɵlistener("click", function KptSelect_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown", function KptSelect_Template_div_keydown_0_listener($event) { return ctx.onTriggerKeydown($event); })("blur", function KptSelect_Template_div_blur_0_listener() { return ctx.touch.emit(); });
|
|
2510
2687
|
i0.ɵɵelementStart(2, "div", 2);
|
|
@@ -2527,8 +2704,8 @@ class KptSelect {
|
|
|
2527
2704
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSelect, [{
|
|
2528
2705
|
type: Component,
|
|
2529
2706
|
args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, providers: [{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }], template: "<div\n class=\"kpt-select\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"combobox\"\n tabindex=\"0\"\n [class.kpt-select--open]=\"open()\"\n [class.kpt-select--disabled]=\"disabled()\"\n [class.kpt-select--invalid]=\"showInvalid()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-disabled]=\"disabled() || null\"\n (click)=\"toggleOpen()\"\n (keydown)=\"onTriggerKeydown($event)\"\n (blur)=\"touch.emit()\"\n>\n <div class=\"kpt-select__value\">\n @if (multiple() && selectedOptions().length) {\n @for (opt of selectedOptions(); track opt.value) {\n <span class=\"kpt-select__chip\">\n {{ opt.label }}\n <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" [attr.aria-label]=\"i18n.t('select.removeChip')\">\n <kpt-icon name=\"x\" />\n </button>\n </span>\n }\n } @else if (!multiple() && filled()) {\n <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n } @else {\n <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n>\n <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n @if (filter()) {\n <div class=\"kpt-select__search\">\n <kpt-icon name=\"search\" />\n <input\n type=\"text\"\n class=\"kpt-select__search-input\"\n [value]=\"filterText()\"\n (input)=\"onFilterInput($event)\"\n [attr.placeholder]=\"i18n.t('select.search')\"\n />\n </div>\n }\n <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"kpt-select__option\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n [class.kpt-select__option--selected]=\"isSelected(opt)\"\n [class.kpt-select__option--active]=\"i === activeIndex()\"\n [class.kpt-select__option--disabled]=\"opt.disabled\"\n (click)=\"pick(opt)\"\n (mouseenter)=\"activeIndex.set(i)\"\n >\n @if (multiple()) {\n <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n }\n <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n @if (!multiple() && isSelected(opt)) {\n <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n }\n </li>\n } @empty {\n <li class=\"kpt-select__empty\">{{ i18n.t('select.noResults') }}</li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
|
|
2530
|
-
}],
|
|
2531
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber:
|
|
2707
|
+
}], () => [], { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
|
|
2708
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 42 }); })();
|
|
2532
2709
|
|
|
2533
2710
|
/*
|
|
2534
2711
|
* Pomocniki nazw dni/miesięcy wyliczane z `Intl` — sterowane bieżącym locale i18n.
|
|
@@ -3269,7 +3446,11 @@ class KptDatepicker {
|
|
|
3269
3446
|
...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
|
|
3270
3447
|
this.months = computed(() => monthNames(this.i18n.locale()), /* @ts-ignore */
|
|
3271
3448
|
...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
|
|
3272
|
-
|
|
3449
|
+
/**
|
|
3450
|
+
* Stan kalendarza (dwukierunkowy). Pozwala otworzyć go z zewnątrz i — co ważniejsze — wiedzieć,
|
|
3451
|
+
* kiedy user skończył wybierać. `touch` się do tego nie nadaje: leci też z blur triggera.
|
|
3452
|
+
*/
|
|
3453
|
+
this.open = model(false, /* @ts-ignore */
|
|
3273
3454
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
3274
3455
|
this.today = new Date();
|
|
3275
3456
|
this.view = signal({ y: this.today.getFullYear(), m: this.today.getMonth() }, /* @ts-ignore */
|
|
@@ -3405,6 +3586,18 @@ class KptDatepicker {
|
|
|
3405
3586
|
});
|
|
3406
3587
|
}, /* @ts-ignore */
|
|
3407
3588
|
...(ngDevMode ? [{ debugName: "yearCells" }] : /* istanbul ignore next */ []));
|
|
3589
|
+
// Kalendarz może zostać otwarty także z zewnątrz (`[open]`), nie tylko klikiem w trigger —
|
|
3590
|
+
// widok i bufor czasu ustawiamy więc przy każdym otwarciu, nie w `toggleOpen()`.
|
|
3591
|
+
effect(() => {
|
|
3592
|
+
const isOpen = this.open();
|
|
3593
|
+
untracked(() => {
|
|
3594
|
+
if (!isOpen)
|
|
3595
|
+
return;
|
|
3596
|
+
this.view.set(this.initialView());
|
|
3597
|
+
this.syncTimeFromValue();
|
|
3598
|
+
this.dtView.set(this.selectionMode() === 'time' ? 'clock' : 'calendar');
|
|
3599
|
+
});
|
|
3600
|
+
});
|
|
3408
3601
|
}
|
|
3409
3602
|
// ── Prezentacja czasu ──
|
|
3410
3603
|
formatTime(h, m) {
|
|
@@ -3488,11 +3681,6 @@ class KptDatepicker {
|
|
|
3488
3681
|
toggleOpen() {
|
|
3489
3682
|
if (this.disabled())
|
|
3490
3683
|
return;
|
|
3491
|
-
if (!this.open()) {
|
|
3492
|
-
this.view.set(this.initialView());
|
|
3493
|
-
this.syncTimeFromValue();
|
|
3494
|
-
this.dtView.set(this.selectionMode() === 'time' ? 'clock' : 'calendar');
|
|
3495
|
-
}
|
|
3496
3684
|
this.open.update((o) => !o);
|
|
3497
3685
|
}
|
|
3498
3686
|
close() {
|
|
@@ -3561,7 +3749,7 @@ class KptDatepicker {
|
|
|
3561
3749
|
this.pendingDate.set('');
|
|
3562
3750
|
}
|
|
3563
3751
|
static { this.ɵfac = function KptDatepicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDatepicker)(); }; }
|
|
3564
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 15, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], [1, "kpt-datepicker__icon", 3, "name"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
|
|
3752
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"], open: [1, "open"] }, outputs: { value: "valueChange", touch: "touch", open: "openChange" }, decls: 8, vars: 15, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], [1, "kpt-datepicker__icon", 3, "name"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
|
|
3565
3753
|
i0.ɵɵelementStart(0, "div", 1, 0);
|
|
3566
3754
|
i0.ɵɵlistener("click", function KptDatepicker_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown.enter", function KptDatepicker_Template_div_keydown_enter_0_listener() { return ctx.toggleOpen(); })("blur", function KptDatepicker_Template_div_blur_0_listener() { return ctx.touch.emit(); });
|
|
3567
3755
|
i0.ɵɵconditionalCreate(2, KptDatepicker_Conditional_2_Template, 2, 1, "span", 2)(3, KptDatepicker_Conditional_3_Template, 2, 1, "span", 3);
|
|
@@ -3588,8 +3776,8 @@ class KptDatepicker {
|
|
|
3588
3776
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDatepicker, [{
|
|
3589
3777
|
type: Component,
|
|
3590
3778
|
args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n class=\"kpt-datepicker\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n role=\"button\"\n tabindex=\"0\"\n [class.kpt-datepicker--open]=\"open()\"\n [class.kpt-datepicker--disabled]=\"disabled()\"\n [class.kpt-datepicker--invalid]=\"showInvalid()\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggleOpen()\"\n (keydown.enter)=\"toggleOpen()\"\n (blur)=\"touch.emit()\"\n>\n @if (display()) {\n <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n } @else {\n <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n }\n <span class=\"kpt-datepicker__spacer\"></span>\n @if (display()) {\n <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n }\n <kpt-icon\n class=\"kpt-datepicker__icon\"\n [name]=\"selectionMode() === 'time' ? 'clock' : 'calendar'\"\n />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"close()\"\n (detach)=\"close()\"\n>\n <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n @switch (selectionMode()) {\n @case ('time') {\n <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n <div class=\"kpt-calendar__footer\">\n <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n </div>\n }\n @case ('datetime') {\n @if (dtView() === 'calendar') {\n <div class=\"kpt-calendar__header\">\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n </div>\n <div class=\"kpt-calendar__weekdays\">\n @for (wd of weekdays(); track wd) {\n <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n }\n </div>\n <div class=\"kpt-calendar__grid\">\n @for (week of weeks(); track $index) {\n @for (cell of week; track cell.iso) {\n <button\n type=\"button\"\n class=\"kpt-calendar__day\"\n [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n [class.kpt-calendar__day--today]=\"cell.today\"\n [class.kpt-calendar__day--selected]=\"cell.selected\"\n [disabled]=\"cell.disabled\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectDay(cell)\"\n >{{ cell.day }}</button>\n }\n }\n </div>\n <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n <kpt-icon name=\"clock\" />\n <span>{{ timeBarLabel() }}</span>\n </button>\n } @else {\n <div class=\"kpt-calendar__header\">\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n </div>\n <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n }\n <div class=\"kpt-calendar__footer\">\n <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n </div>\n }\n @case ('monthYear') {\n <div class=\"kpt-calendar__header\">\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n </div>\n <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n @for (cell of monthCells(); track cell.value) {\n <button\n type=\"button\"\n class=\"kpt-calendar__cell\"\n [class.kpt-calendar__cell--selected]=\"cell.selected\"\n [disabled]=\"cell.disabled\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectCell(cell)\"\n >{{ cell.label }}</button>\n }\n </div>\n }\n @case ('year') {\n <div class=\"kpt-calendar__header\">\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n </div>\n <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n @for (cell of yearCells(); track cell.value) {\n <button\n type=\"button\"\n class=\"kpt-calendar__cell\"\n [class.kpt-calendar__cell--selected]=\"cell.selected\"\n [disabled]=\"cell.disabled\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectCell(cell)\"\n >{{ cell.label }}</button>\n }\n </div>\n }\n @case ('month') {\n <div class=\"kpt-calendar__header\">\n <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n </div>\n <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n @for (cell of monthCells(); track cell.value) {\n <button\n type=\"button\"\n class=\"kpt-calendar__cell\"\n [class.kpt-calendar__cell--selected]=\"cell.selected\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectCell(cell)\"\n >{{ cell.label }}</button>\n }\n </div>\n }\n @default {\n <div class=\"kpt-calendar__header\">\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n </div>\n <div class=\"kpt-calendar__weekdays\">\n @for (wd of weekdays(); track wd) {\n <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n }\n </div>\n <div class=\"kpt-calendar__grid\">\n @for (week of weeks(); track $index) {\n @for (cell of week; track cell.iso) {\n <button\n type=\"button\"\n class=\"kpt-calendar__day\"\n [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n [class.kpt-calendar__day--today]=\"cell.today\"\n [class.kpt-calendar__day--selected]=\"cell.selected\"\n [disabled]=\"cell.disabled\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectDay(cell)\"\n >{{ cell.day }}</button>\n }\n }\n </div>\n }\n }\n </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
|
|
3591
|
-
}],
|
|
3592
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber:
|
|
3779
|
+
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
|
|
3780
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 68 }); })();
|
|
3593
3781
|
|
|
3594
3782
|
const _c0$u = ["ta"];
|
|
3595
3783
|
/**
|
|
@@ -4308,7 +4496,10 @@ const ALLOWED_STYLES = new Set([
|
|
|
4308
4496
|
'color', 'background-color', 'text-align', 'font-weight', 'font-style', 'text-decoration',
|
|
4309
4497
|
'width', 'height', 'border', 'border-color', 'border-width', 'border-style', 'vertical-align',
|
|
4310
4498
|
]);
|
|
4311
|
-
const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class']);
|
|
4499
|
+
const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title']);
|
|
4500
|
+
// Schematy URL dopuszczone w `href` wstawianym narzędziem „link" (blocklista jest obchodzalna).
|
|
4501
|
+
const SAFE_URL_SCHEME = /^(https?:|mailto:|tel:)/i;
|
|
4502
|
+
const HAS_URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
|
|
4312
4503
|
/**
|
|
4313
4504
|
* Lekki edytor tekstu sformatowanego (contenteditable) z konfigurowalnym paskiem sekcji.
|
|
4314
4505
|
* Narzędzia: schowek (kopiuj / wklej / wklej bez formatowania), styl (nagłówki H1–H6 / paragraf),
|
|
@@ -4403,11 +4594,14 @@ class KptRichText {
|
|
|
4403
4594
|
}, /* @ts-ignore */
|
|
4404
4595
|
...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
|
|
4405
4596
|
// Synchronizuj tylko przy zmianie zewnętrznej (bez resetu kursora podczas pisania).
|
|
4597
|
+
// Porównanie `el.innerHTML !== v` działa na SUROWEJ wartości modelu (tej samej, którą ustawia
|
|
4598
|
+
// `onInput()`), więc pisanie w edytorze nadal nie odpala tej gałęzi — sanityzacja włącza się
|
|
4599
|
+
// wyłącznie przy zewnętrznym zapisie `value` (init, `[(value)]` z aplikacji, `onSource()`).
|
|
4406
4600
|
effect(() => {
|
|
4407
4601
|
const el = this.editor()?.nativeElement;
|
|
4408
4602
|
const v = this.value();
|
|
4409
4603
|
if (el && el.innerHTML !== v)
|
|
4410
|
-
el.innerHTML = v;
|
|
4604
|
+
el.innerHTML = this.sanitizeHtml(v);
|
|
4411
4605
|
});
|
|
4412
4606
|
// Odzwierciedlenie stanu aktywnego narzędzi na podstawie zaznaczenia.
|
|
4413
4607
|
const onSel = () => this.refreshState();
|
|
@@ -4506,8 +4700,11 @@ class KptRichText {
|
|
|
4506
4700
|
switch (item) {
|
|
4507
4701
|
case 'link': {
|
|
4508
4702
|
const url = window.prompt(this.i18n.t('richText.linkPrompt'));
|
|
4509
|
-
if (url)
|
|
4510
|
-
|
|
4703
|
+
if (url) {
|
|
4704
|
+
const safe = this.sanitizeUrl(url);
|
|
4705
|
+
if (safe)
|
|
4706
|
+
document.execCommand('createLink', false, safe);
|
|
4707
|
+
}
|
|
4511
4708
|
break;
|
|
4512
4709
|
}
|
|
4513
4710
|
case 'copy':
|
|
@@ -5072,6 +5269,21 @@ class KptRichText {
|
|
|
5072
5269
|
canSplit() {
|
|
5073
5270
|
return this.canSplitCtx;
|
|
5074
5271
|
}
|
|
5272
|
+
/**
|
|
5273
|
+
* Waliduje URL z narzędzia „link" (blocklista jest obchodzalna, np. `javascript:`).
|
|
5274
|
+
* Brak schematu → dopisz `https://` (spójne z zachowaniem `normalizeUrl` w mapie); `#`/`/`
|
|
5275
|
+
* przechodzą bez zmian; schemat spoza `SAFE_URL_SCHEME` → `null` (link nie zostaje wstawiony).
|
|
5276
|
+
*/
|
|
5277
|
+
sanitizeUrl(url) {
|
|
5278
|
+
const trimmed = url.trim().replace(/[\x00-\x1f]/g, '');
|
|
5279
|
+
if (!trimmed)
|
|
5280
|
+
return null;
|
|
5281
|
+
if (trimmed.startsWith('#') || trimmed.startsWith('/'))
|
|
5282
|
+
return trimmed;
|
|
5283
|
+
if (!HAS_URL_SCHEME.test(trimmed))
|
|
5284
|
+
return `https://${trimmed}`;
|
|
5285
|
+
return SAFE_URL_SCHEME.test(trimmed) ? trimmed : null;
|
|
5286
|
+
}
|
|
5075
5287
|
sanitizeHtml(html) {
|
|
5076
5288
|
const tpl = document.createElement('template');
|
|
5077
5289
|
tpl.innerHTML = html;
|
|
@@ -5087,7 +5299,9 @@ class KptRichText {
|
|
|
5087
5299
|
el.removeAttribute(attr.name);
|
|
5088
5300
|
}
|
|
5089
5301
|
else if (name === 'href' || name === 'src') {
|
|
5090
|
-
|
|
5302
|
+
// Usuń znaki kontrolne przed testem schematu — przeglądarka i tak je ignoruje przy
|
|
5303
|
+
// parsowaniu URL-a (WHATWG URL spec), więc `jav\tascript:` obchodziłby sam blocklisting.
|
|
5304
|
+
if (/^\s*javascript:/i.test(attr.value.replace(/[\x00-\x1f]/g, '')))
|
|
5091
5305
|
el.removeAttribute(attr.name);
|
|
5092
5306
|
}
|
|
5093
5307
|
else if (name === 'style') {
|
|
@@ -5100,7 +5314,7 @@ class KptRichText {
|
|
|
5100
5314
|
else
|
|
5101
5315
|
el.removeAttribute('style');
|
|
5102
5316
|
}
|
|
5103
|
-
else if (!ALLOWED_ATTRS.has(name) && name !== 'color'
|
|
5317
|
+
else if (!ALLOWED_ATTRS.has(name) && name !== 'color') {
|
|
5104
5318
|
el.removeAttribute(attr.name);
|
|
5105
5319
|
}
|
|
5106
5320
|
}
|
|
@@ -5145,7 +5359,7 @@ class KptRichText {
|
|
|
5145
5359
|
type: Component,
|
|
5146
5360
|
args: [{ selector: 'kpt-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], host: { class: 'kpt-rich-text-host' }, template: "<div class=\"kpt-rich-text\" [class.kpt-rich-text--invalid]=\"showInvalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n @for (section of sections(); track $index; let firstSection = $first) {\n @if (!firstSection) {\n <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n }\n @for (item of section; track item) {\n @switch (item) {\n @case ('heading') {\n <button\n type=\"button\"\n class=\"kpt-rich-text__style\"\n cdkOverlayOrigin\n #styleOrigin=\"cdkOverlayOrigin\"\n [class.is-open]=\"styleOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"aria(item)\"\n [attr.aria-expanded]=\"styleOpen()\"\n [kptTooltip]=\"aria(item)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"openStyle()\"\n >\n <span>{{ styleLabel() }}</span>\n <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n [cdkConnectedOverlayOpen]=\"styleOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeStyle()\"\n (detach)=\"closeStyle()\"\n >\n <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n @for (o of styleOptions(); track o.tag) {\n <li\n class=\"kpt-rich-text__style-opt\"\n [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n role=\"option\"\n [attr.aria-selected]=\"currentBlock() === o.tag\"\n [class.is-selected]=\"currentBlock() === o.tag\"\n (click)=\"pickStyle(o.tag)\"\n >{{ o.label }}</li>\n }\n </ul>\n </ng-template>\n }\n @case ('foreColor') {\n <button\n type=\"button\"\n class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n cdkOverlayOrigin\n #foreOrigin=\"cdkOverlayOrigin\"\n [attr.aria-label]=\"aria(item)\"\n [kptTooltip]=\"aria(item)\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"openColor('foreColor')\"\n >\n <kpt-icon [name]=\"icon(item)\" />\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeColor()\"\n (detach)=\"closeColor()\"\n >\n <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n </ng-template>\n }\n @case ('backColor') {\n <button\n type=\"button\"\n class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n cdkOverlayOrigin\n #backOrigin=\"cdkOverlayOrigin\"\n [attr.aria-label]=\"aria(item)\"\n [kptTooltip]=\"aria(item)\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"openColor('backColor')\"\n >\n <kpt-icon [name]=\"icon(item)\" />\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"backOrigin\"\n [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeColor()\"\n (detach)=\"closeColor()\"\n >\n <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n </ng-template>\n }\n @case ('table') {\n <button\n type=\"button\"\n class=\"kpt-rich-text__tool\"\n cdkOverlayOrigin\n #tableOrigin=\"cdkOverlayOrigin\"\n [class.is-active]=\"tableOpen()\"\n [attr.aria-label]=\"aria(item)\"\n [kptTooltip]=\"aria(item)\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"exec(item)\"\n >\n <kpt-icon [name]=\"icon(item)\" />\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n [cdkConnectedOverlayOpen]=\"tableOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeTable()\"\n (detach)=\"closeTable()\"\n >\n <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n @for (r of gridRows; track r) {\n <div class=\"kpt-rt-grid__row\">\n @for (c of gridCols; track c) {\n <span\n class=\"kpt-rt-grid__cell\"\n [class.is-on]=\"r <= gridR() && c <= gridC()\"\n (mouseenter)=\"gridHover(r, c)\"\n (click)=\"insertTable(r, c)\"\n ></span>\n }\n </div>\n }\n </div>\n <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n </div>\n </ng-template>\n }\n @default {\n <button\n type=\"button\"\n class=\"kpt-rich-text__tool\"\n [class.is-active]=\"isActive(item)\"\n [attr.aria-label]=\"aria(item)\"\n [attr.aria-pressed]=\"isActive(item)\"\n [kptTooltip]=\"aria(item)\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"exec(item)\"\n >\n <kpt-icon [name]=\"icon(item)\" />\n </button>\n }\n }\n }\n }\n </div>\n @if (sourceView()) {\n <textarea\n class=\"kpt-rich-text__source\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n spellcheck=\"false\"\n [attr.aria-label]=\"i18n.t('richText.htmlSource')\"\n (input)=\"onSource($event)\"\n (blur)=\"touch.emit()\"\n ></textarea>\n } @else {\n <div\n #editor\n class=\"kpt-rich-text__editor\"\n [attr.contenteditable]=\"disabled() ? 'false' : 'true'\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.aria-invalid]=\"showInvalid() ? 'true' : null\"\n role=\"textbox\"\n aria-multiline=\"true\"\n (input)=\"onInput()\"\n (paste)=\"onPaste($event)\"\n (contextmenu)=\"onContextMenu($event)\"\n (mousedown)=\"onEditorMouseDown($event)\"\n (mousemove)=\"onEditorMouseMove($event)\"\n (blur)=\"touch.emit()\"\n ></div>\n }\n\n <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n [cdkConnectedOverlayOpen]=\"menuOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeMenu()\"\n (detach)=\"closeMenu()\"\n >\n <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.column') }}</div>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertLeft') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertRight') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerColumn') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteColumn') }}</button>\n <div class=\"kpt-rt-menu__sep\"></div>\n <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.row') }}</div>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertAbove') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertBelow') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerRow') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteRow') }}</button>\n <div class=\"kpt-rt-menu__sep\"></div>\n <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.cell') }}</div>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> {{ i18n.t('richText.menu.cellBackground') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> {{ i18n.t('richText.menu.alignLeft') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> {{ i18n.t('richText.menu.alignCenter') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> {{ i18n.t('richText.menu.alignRight') }}</button>\n <div class=\"kpt-rt-menu__sep\"></div>\n <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canMerge()\" (click)=\"mergeCells()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.mergeCells') }}</button>\n <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> {{ i18n.t('richText.menu.splitCell') }}</button>\n <div class=\"kpt-rt-menu__sep\"></div>\n <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.border') }}</button>\n <div class=\"kpt-rt-menu__sep\"></div>\n <button type=\"button\" class=\"kpt-rt-menu__item kpt-rt-menu__item--danger\" (click)=\"deleteTable()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteTable') }}</button>\n </div>\n </ng-template>\n\n <!-- Popover obramowania (tabela / kom\u00F3rka) -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n [cdkConnectedOverlayOpen]=\"borderOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeBorder()\"\n (detach)=\"closeBorder()\"\n >\n <div class=\"kpt-rt-border\" (mousedown)=\"$event.preventDefault()\">\n <div class=\"kpt-rt-border__seg\">\n <button type=\"button\" [class.is-active]=\"borderTarget() === 'table'\" (click)=\"borderTarget.set('table')\">{{ i18n.t('richText.border.table') }}</button>\n <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">{{ i18n.t('richText.border.cell') }}</button>\n </div>\n <div class=\"kpt-rt-border__widths\">\n <button type=\"button\" (click)=\"setBorderWidth('none')\">{{ i18n.t('richText.border.none') }}</button>\n <button type=\"button\" (click)=\"setBorderWidth('thin')\">{{ i18n.t('richText.border.thin') }}</button>\n <button type=\"button\" (click)=\"setBorderWidth('medium')\">{{ i18n.t('richText.border.medium') }}</button>\n <button type=\"button\" (click)=\"setBorderWidth('thick')\">{{ i18n.t('richText.border.thick') }}</button>\n </div>\n <div class=\"kpt-rich-text__swatches\">\n @for (c of swatches; track c) {\n <button type=\"button\" class=\"kpt-rich-text__swatch\" [style.background]=\"c\" [attr.aria-label]=\"c\" (click)=\"setBorderColor(c)\"></button>\n }\n </div>\n <label class=\"kpt-rich-text__picker\">\n <span>{{ i18n.t('richText.border.customColor') }}</span>\n <input type=\"color\" (input)=\"onBorderColorInput($event)\" />\n </label>\n </div>\n </ng-template>\n\n <!-- Popover koloru t\u0142a kom\u00F3rki (z menu kontekstowego) -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'cellBg'\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n (backdropClick)=\"closeColor()\"\n (detach)=\"closeColor()\"\n >\n <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n </ng-template>\n</div>\n\n<ng-template #paletteTpl>\n <div class=\"kpt-rich-text__palette\" (mousedown)=\"$event.preventDefault()\">\n <div class=\"kpt-rich-text__swatches\">\n @for (c of swatches; track c) {\n <button\n type=\"button\"\n class=\"kpt-rich-text__swatch\"\n [style.background]=\"c\"\n [attr.aria-label]=\"c\"\n (click)=\"applyColor(c)\"\n ></button>\n }\n </div>\n <label class=\"kpt-rich-text__picker\">\n <span>{{ i18n.t('richText.paletteCustom') }}</span>\n <input type=\"color\" (input)=\"onColorInput($event)\" />\n </label>\n </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"] }]
|
|
5147
5361
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] }); })();
|
|
5148
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber:
|
|
5362
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber: 121 }); })();
|
|
5149
5363
|
|
|
5150
5364
|
function KptSlider_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
5151
5365
|
i0.ɵɵdomElementStart(0, "span", 5);
|
|
@@ -5206,8 +5420,13 @@ function KptSlider_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
5206
5420
|
* Suwak wartości (slider) na Signal Forms.
|
|
5207
5421
|
* W trybie `range` udostępnia dwa uchwyty, a wartość jest parą `[min, max]`.
|
|
5208
5422
|
*
|
|
5423
|
+
* Pod `[formField]` zakres bierze się ze schematu (`min(path.volume, 0)`,
|
|
5424
|
+
* `max(path.volume, 100)`) — `[min]`/`[max]` obok `[formField]` to błąd kompilacji.
|
|
5425
|
+
* Tryb `range` (wartość `[number, number]`) łączy się więc tylko z `[(value)]`.
|
|
5426
|
+
*
|
|
5209
5427
|
* @example
|
|
5210
|
-
* <kpt-slider [formField]="f.volume" [
|
|
5428
|
+
* <kpt-slider [formField]="f.volume" [step]="5" showValue />
|
|
5429
|
+
* <kpt-slider [(value)]="volume" [min]="0" [max]="100" [step]="5" showValue />
|
|
5211
5430
|
* <kpt-slider range [(value)]="zakres" [min]="0" [max]="100" showValue />
|
|
5212
5431
|
*/
|
|
5213
5432
|
class KptSlider {
|
|
@@ -5334,7 +5553,7 @@ class KptSlider {
|
|
|
5334
5553
|
}
|
|
5335
5554
|
`, host: { class: 'kpt-slider-host' }, styles: ["@layer kpt.components{.kpt-slider-host{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-slider__input{--_pct: 0%;flex:1;height:1.25rem;appearance:none;background:none;cursor:pointer}.kpt-slider__input::-webkit-slider-runnable-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:linear-gradient(to right,var(--kpt-color-primary) var(--_pct),var(--kpt-color-surface-variant) var(--_pct))}.kpt-slider__input::-moz-range-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__input::-moz-range-progress{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__input::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input::-moz-range-thumb{width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input:focus-visible{outline:none}.kpt-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:disabled{opacity:.5;cursor:not-allowed}.kpt-slider__value{min-width:2.5rem;text-align:end;font-size:var(--kpt-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface)}.kpt-slider__range{position:relative;flex:1;height:1.25rem;display:flex;align-items:center}.kpt-slider__rail{position:absolute;inset-inline:0;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__fill{position:absolute;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__thumb{position:absolute;inset-inline:0;width:100%;height:1.25rem;margin:0;appearance:none;background:none;pointer-events:none}.kpt-slider__thumb::-webkit-slider-runnable-track{height:.4rem;background:none}.kpt-slider__thumb::-moz-range-track{height:.4rem;background:none}.kpt-slider__thumb::-webkit-slider-thumb{pointer-events:auto;appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb::-moz-range-thumb{pointer-events:auto;width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb:focus-visible{outline:none}.kpt-slider__thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb--high{z-index:1}.kpt-slider__thumb:disabled{opacity:.5;cursor:not-allowed}}\n"] }]
|
|
5336
5555
|
}], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
|
|
5337
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSlider, { className: "KptSlider", filePath: "lib/slider/slider.component.ts", lineNumber:
|
|
5556
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSlider, { className: "KptSlider", filePath: "lib/slider/slider.component.ts", lineNumber: 87 }); })();
|
|
5338
5557
|
|
|
5339
5558
|
function KptRating_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
5340
5559
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
@@ -5353,7 +5572,7 @@ function KptRating_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
5353
5572
|
* Ocena gwiazdkami (rating) na Signal Forms.
|
|
5354
5573
|
*
|
|
5355
5574
|
* @example
|
|
5356
|
-
* <kpt-rating [formField]="f.score" [
|
|
5575
|
+
* <kpt-rating [formField]="f.score" [count]="5" />
|
|
5357
5576
|
* <kpt-rating [value]="4" readonly />
|
|
5358
5577
|
*/
|
|
5359
5578
|
class KptRating {
|
|
@@ -5571,7 +5790,7 @@ function KptColorPicker_For_6_Template(rf, ctx) { if (rf & 1) {
|
|
|
5571
5790
|
} if (rf & 2) {
|
|
5572
5791
|
const color_r2 = ctx.$implicit;
|
|
5573
5792
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
5574
|
-
i0.ɵɵstyleProp("background", color_r2);
|
|
5793
|
+
i0.ɵɵstyleProp("background-color", color_r2);
|
|
5575
5794
|
i0.ɵɵclassProp("is-active", color_r2 === ctx_r2.value());
|
|
5576
5795
|
i0.ɵɵdomProperty("disabled", ctx_r2.disabled());
|
|
5577
5796
|
i0.ɵɵattribute("aria-label", color_r2);
|
|
@@ -5599,7 +5818,7 @@ class KptColorPicker {
|
|
|
5599
5818
|
this.value.set(event.target.value);
|
|
5600
5819
|
}
|
|
5601
5820
|
static { this.ɵfac = function KptColorPicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptColorPicker)(); }; }
|
|
5602
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptColorPicker, selectors: [["kpt-color-picker"]], hostAttrs: [1, "kpt-color-picker-host"], inputs: { value: [1, "value"], presets: [1, "presets"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 7, vars: 6, consts: [[1, "kpt-color-picker"], [1, "kpt-color-picker__swatch"], ["type", "color", 3, "input", "blur", "value", "disabled"], ["type", "text", "maxlength", "7", 1, "kpt-color-picker__hex", 3, "input", "blur", "value", "disabled"], [1, "kpt-color-picker__presets"], ["type", "button", 1, "kpt-color-picker__preset", 3, "is-active", "background", "disabled"], ["type", "button", 1, "kpt-color-picker__preset", 3, "click", "disabled"]], template: function KptColorPicker_Template(rf, ctx) { if (rf & 1) {
|
|
5821
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptColorPicker, selectors: [["kpt-color-picker"]], hostAttrs: [1, "kpt-color-picker-host"], inputs: { value: [1, "value"], presets: [1, "presets"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 7, vars: 6, consts: [[1, "kpt-color-picker"], [1, "kpt-color-picker__swatch"], ["type", "color", 3, "input", "blur", "value", "disabled"], ["type", "text", "maxlength", "7", 1, "kpt-color-picker__hex", 3, "input", "blur", "value", "disabled"], [1, "kpt-color-picker__presets"], ["type", "button", 1, "kpt-color-picker__preset", 3, "is-active", "background-color", "disabled"], ["type", "button", 1, "kpt-color-picker__preset", 3, "click", "disabled"]], template: function KptColorPicker_Template(rf, ctx) { if (rf & 1) {
|
|
5603
5822
|
i0.ɵɵdomElementStart(0, "div", 0)(1, "label", 1)(2, "input", 2);
|
|
5604
5823
|
i0.ɵɵdomListener("input", function KptColorPicker_Template_input_input_2_listener($event) { return ctx.value.set($event.target.value); })("blur", function KptColorPicker_Template_input_blur_2_listener() { return ctx.touch.emit(); });
|
|
5605
5824
|
i0.ɵɵdomElementEnd()();
|
|
@@ -5611,7 +5830,7 @@ class KptColorPicker {
|
|
|
5611
5830
|
i0.ɵɵdomElementEnd()();
|
|
5612
5831
|
} if (rf & 2) {
|
|
5613
5832
|
i0.ɵɵadvance();
|
|
5614
|
-
i0.ɵɵstyleProp("background", ctx.value());
|
|
5833
|
+
i0.ɵɵstyleProp("background-color", ctx.value());
|
|
5615
5834
|
i0.ɵɵadvance();
|
|
5616
5835
|
i0.ɵɵdomProperty("value", ctx.value())("disabled", ctx.disabled());
|
|
5617
5836
|
i0.ɵɵadvance();
|
|
@@ -5624,7 +5843,7 @@ class KptColorPicker {
|
|
|
5624
5843
|
type: Component,
|
|
5625
5844
|
args: [{ selector: 'kpt-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
|
|
5626
5845
|
<div class="kpt-color-picker">
|
|
5627
|
-
<label class="kpt-color-picker__swatch" [style.background]="value()">
|
|
5846
|
+
<label class="kpt-color-picker__swatch" [style.background-color]="value()">
|
|
5628
5847
|
<input
|
|
5629
5848
|
type="color"
|
|
5630
5849
|
[value]="value()"
|
|
@@ -5648,7 +5867,7 @@ class KptColorPicker {
|
|
|
5648
5867
|
type="button"
|
|
5649
5868
|
class="kpt-color-picker__preset"
|
|
5650
5869
|
[class.is-active]="color === value()"
|
|
5651
|
-
[style.background]="color"
|
|
5870
|
+
[style.background-color]="color"
|
|
5652
5871
|
[disabled]="disabled()"
|
|
5653
5872
|
(click)="value.set(color)"
|
|
5654
5873
|
[attr.aria-label]="color"
|
|
@@ -6141,8 +6360,13 @@ function KptInputNumber_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
6141
6360
|
* `showButtons="false"` chowa strzałki — wariant do zakresów „od–do", gdzie krokowanie
|
|
6142
6361
|
* nie ma sensu, a pole ma wyglądać jak zwykłe `kpt-input` obok.
|
|
6143
6362
|
*
|
|
6363
|
+
* Pod `[formField]` granic NIE bindujemy w szablonie — `[min]`/`[max]` obok `[formField]`
|
|
6364
|
+
* to błąd kompilacji. Deklaruje je schemat (`min(path.qty, 0)`, `max(path.qty, 99)`),
|
|
6365
|
+
* a dyrektywa `FormField` sama wstrzykuje je w wejścia `min`/`max`.
|
|
6366
|
+
*
|
|
6144
6367
|
* @example
|
|
6145
|
-
* <kpt-input-number [formField]="f.qty" [
|
|
6368
|
+
* <kpt-input-number [formField]="f.qty" [step]="1" />
|
|
6369
|
+
* <kpt-input-number [(value)]="qty" [min]="0" [max]="99" suffix=" szt." />
|
|
6146
6370
|
* <kpt-input-number [formField]="f.priceFrom" [showButtons]="false" suffix=" zł" />
|
|
6147
6371
|
*/
|
|
6148
6372
|
class KptInputNumber {
|
|
@@ -6258,7 +6482,7 @@ class KptInputNumber {
|
|
|
6258
6482
|
</div>
|
|
6259
6483
|
`, host: { class: 'kpt-input-number-host' }, styles: ["@layer kpt.components{.kpt-input-number-host{display:block}.kpt-input-number{display:inline-flex;align-items:stretch;width:100%;height:2.5rem;box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);overflow:hidden}.kpt-input-number:focus-within:not(.kpt-input-number--disabled){border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-input-number--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-input-number--disabled{opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-input-number--plain .kpt-input-number__input{text-align:left;padding-inline:var(--kpt-space-3, .75rem)}.kpt-input-number__input{flex:1;min-width:0;border:0;background:none;text-align:center;color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-input-number__input:focus{outline:none}.kpt-input-number__input::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-input-number__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border:0;background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-input-number__btn:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-input-number__btn:disabled{cursor:not-allowed;opacity:.5}}\n"] }]
|
|
6260
6484
|
}], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
|
|
6261
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInputNumber, { className: "KptInputNumber", filePath: "lib/input-number/input-number.component.ts", lineNumber:
|
|
6485
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInputNumber, { className: "KptInputNumber", filePath: "lib/input-number/input-number.component.ts", lineNumber: 53 }); })();
|
|
6262
6486
|
|
|
6263
6487
|
const _c0$s = () => [0, 1, 2, 3];
|
|
6264
6488
|
function KptPassword_Conditional_4_For_3_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -6831,8 +7055,12 @@ const GAP = Math.PI / 4; // przerwa u dołu (kąt „otwarcia" łuku)
|
|
|
6831
7055
|
/**
|
|
6832
7056
|
* Pokrętło (knob) — wybór wartości po łuku, myszką lub strzałkami. Signal Forms.
|
|
6833
7057
|
*
|
|
7058
|
+
* Pod `[formField]` zakres bierze się ze schematu (`min(path.level, 0)`,
|
|
7059
|
+
* `max(path.level, 100)`) — `[min]`/`[max]` obok `[formField]` to błąd kompilacji.
|
|
7060
|
+
*
|
|
6834
7061
|
* @example
|
|
6835
|
-
* <kpt-knob [formField]="f.level" [
|
|
7062
|
+
* <kpt-knob [formField]="f.level" [step]="1" />
|
|
7063
|
+
* <kpt-knob [(value)]="level" [min]="0" [max]="100" [step]="1" />
|
|
6836
7064
|
*/
|
|
6837
7065
|
class KptKnob {
|
|
6838
7066
|
constructor() {
|
|
@@ -6984,10 +7212,10 @@ class KptKnob {
|
|
|
6984
7212
|
</div>
|
|
6985
7213
|
`, host: { class: 'kpt-knob-host' }, styles: ["@layer kpt.components{.kpt-knob-host{display:inline-block}.kpt-knob{display:inline-flex;cursor:pointer;touch-action:none;outline:none;border-radius:50%}.kpt-knob:focus-visible{box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-color-primary) 40%,transparent)}.kpt-knob[aria-disabled=true]{cursor:not-allowed;opacity:.6}.kpt-knob__range{stroke:var(--kpt-color-border)}.kpt-knob__value{stroke:var(--kpt-color-primary);transition:stroke-dashoffset .1s}.kpt-knob__text{fill:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}}\n"] }]
|
|
6986
7214
|
}], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
|
|
6987
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptKnob, { className: "KptKnob", filePath: "lib/knob/knob.component.ts", lineNumber:
|
|
7215
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptKnob, { className: "KptKnob", filePath: "lib/knob/knob.component.ts", lineNumber: 45 }); })();
|
|
6988
7216
|
|
|
6989
7217
|
const _c0$r = ["*", [["", "kptCardFooter", ""]]];
|
|
6990
|
-
const _c1$
|
|
7218
|
+
const _c1$a = ["*", "[kptCardFooter]"];
|
|
6991
7219
|
function KptCard_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
6992
7220
|
i0.ɵɵdomElementStart(0, "div", 0);
|
|
6993
7221
|
i0.ɵɵtext(1);
|
|
@@ -7024,7 +7252,7 @@ class KptCard {
|
|
|
7024
7252
|
static { this.ɵfac = function KptCard_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptCard)(); }; }
|
|
7025
7253
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptCard, selectors: [["kpt-card"]], hostAttrs: [1, "kpt-card"], hostVars: 1, hostBindings: function KptCard_HostBindings(rf, ctx) { if (rf & 2) {
|
|
7026
7254
|
i0.ɵɵattribute("data-variant", ctx.variant());
|
|
7027
|
-
} }, inputs: { variant: [1, "variant"], header: [1, "header"], flush: [1, "flush"] }, ngContentSelectors: _c1$
|
|
7255
|
+
} }, inputs: { variant: [1, "variant"], header: [1, "header"], flush: [1, "flush"] }, ngContentSelectors: _c1$a, decls: 4, vars: 3, consts: [[1, "kpt-card__header"], [1, "kpt-card__body"]], template: function KptCard_Template(rf, ctx) { if (rf & 1) {
|
|
7028
7256
|
i0.ɵɵprojectionDef(_c0$r);
|
|
7029
7257
|
i0.ɵɵconditionalCreate(0, KptCard_Conditional_0_Template, 2, 1, "div", 0);
|
|
7030
7258
|
i0.ɵɵdomElementStart(1, "div", 1);
|
|
@@ -7123,29 +7351,40 @@ class KptToolbar {
|
|
|
7123
7351
|
}], null, { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] }); })();
|
|
7124
7352
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToolbar, { className: "KptToolbar", filePath: "lib/toolbar/toolbar.component.ts", lineNumber: 27 }); })();
|
|
7125
7353
|
|
|
7126
|
-
const _c0$p = ["*"];
|
|
7354
|
+
const _c0$p = ["*", [["", "kptSidenavFooter", ""]]];
|
|
7355
|
+
const _c1$9 = ["*", "[kptSidenavFooter]"];
|
|
7127
7356
|
/**
|
|
7128
7357
|
* Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle umieszczany w slocie
|
|
7129
7358
|
* `kptShellSidenav` komponentu `kpt-app-shell`.
|
|
7130
7359
|
*
|
|
7360
|
+
* Treść domyślna ląduje w obszarze przewijanym. Element opatrzony atrybutem `kptSidenavFooter`
|
|
7361
|
+
* trafia do stopki stojącej **poza** tym obszarem, więc zostaje przyklejony do dołu panelu
|
|
7362
|
+
* niezależnie od długości nawigacji (blok użytkownika, wersja aplikacji, przełącznik motywu).
|
|
7363
|
+
*
|
|
7131
7364
|
* @example
|
|
7132
7365
|
* <kpt-sidenav kptShellSidenav>
|
|
7133
7366
|
* <a href="#">Pulpit</a>
|
|
7134
7367
|
* <a href="#">Ustawienia</a>
|
|
7368
|
+
* <div kptSidenavFooter>
|
|
7369
|
+
* <kpt-avatar name="Anna Kowalska" size="sm" />
|
|
7370
|
+
* </div>
|
|
7135
7371
|
* </kpt-sidenav>
|
|
7136
7372
|
*/
|
|
7137
7373
|
class KptSidenav {
|
|
7138
7374
|
static { this.ɵfac = function KptSidenav_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSidenav)(); }; }
|
|
7139
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSidenav, selectors: [["kpt-sidenav"]], hostAttrs: [1, "kpt-sidenav"], ngContentSelectors:
|
|
7140
|
-
i0.ɵɵprojectionDef();
|
|
7141
|
-
i0.ɵɵ
|
|
7142
|
-
|
|
7375
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSidenav, selectors: [["kpt-sidenav"]], hostAttrs: [1, "kpt-sidenav"], ngContentSelectors: _c1$9, decls: 3, vars: 0, consts: [[1, "kpt-sidenav__scroll"]], template: function KptSidenav_Template(rf, ctx) { if (rf & 1) {
|
|
7376
|
+
i0.ɵɵprojectionDef(_c0$p);
|
|
7377
|
+
i0.ɵɵdomElementStart(0, "div", 0);
|
|
7378
|
+
i0.ɵɵprojection(1);
|
|
7379
|
+
i0.ɵɵdomElementEnd();
|
|
7380
|
+
i0.ɵɵprojection(2, 1);
|
|
7381
|
+
} }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;background:var(--%NS%kpt-sidenav-bg);color:var(--%NS%kpt-sidenav-fg);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-sidenav-border)}.kpt-sidenav__scroll{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem);flex:1 1 auto;min-block-size:0;box-sizing:border-box;padding:var(--%NS%kpt-space-3, .75rem);overflow-y:auto}.kpt-sidenav__scroll a{display:block;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-md, .5rem);color:inherit;text-decoration:none;font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-sidenav__scroll a:hover{background:var(--%NS%kpt-color-muted)}.kpt-sidenav [kptSidenavFooter]{flex:0 0 auto;box-sizing:border-box;padding:var(--%NS%kpt-space-3, .75rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-sidenav-border)}}\n"], encapsulation: 2 }); }
|
|
7143
7382
|
}
|
|
7144
7383
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSidenav, [{
|
|
7145
7384
|
type: Component,
|
|
7146
|
-
args: [{ selector: 'kpt-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content />', host: { class: 'kpt-sidenav' }, styles: ["@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;
|
|
7385
|
+
args: [{ selector: 'kpt-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<div class="kpt-sidenav__scroll"><ng-content /></div><ng-content select="[kptSidenavFooter]" />', host: { class: 'kpt-sidenav' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;background:var(--kpt-sidenav-bg);color:var(--kpt-sidenav-fg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border)}.kpt-sidenav__scroll{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem);flex:1 1 auto;min-block-size:0;box-sizing:border-box;padding:var(--kpt-space-3, .75rem);overflow-y:auto}.kpt-sidenav__scroll a{display:block;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-md, .5rem);color:inherit;text-decoration:none;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-sidenav__scroll a:hover{background:var(--kpt-color-muted)}.kpt-sidenav [kptSidenavFooter]{flex:0 0 auto;box-sizing:border-box;padding:var(--kpt-space-3, .75rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border)}}\n"] }]
|
|
7147
7386
|
}], null, null); })();
|
|
7148
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSidenav, { className: "KptSidenav", filePath: "lib/sidenav/sidenav.component.ts", lineNumber:
|
|
7387
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSidenav, { className: "KptSidenav", filePath: "lib/sidenav/sidenav.component.ts", lineNumber: 30 }); })();
|
|
7149
7388
|
|
|
7150
7389
|
const _c0$o = [[["", "kptShellToolbar", ""]], [["", "kptShellSidenav", ""]], "*"];
|
|
7151
7390
|
const _c1$8 = ["[kptShellToolbar]", "[kptShellSidenav]", "*"];
|
|
@@ -7784,7 +8023,7 @@ function KptMeterGroup_For_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
7784
8023
|
const item_r1 = ctx.$implicit;
|
|
7785
8024
|
const ɵ$index_5_r2 = ctx.$index;
|
|
7786
8025
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
7787
|
-
i0.ɵɵstyleProp("width", ctx_r2.percent(item_r1), "%")("background", item_r1.color || ctx_r2.fallback(ɵ$index_5_r2));
|
|
8026
|
+
i0.ɵɵstyleProp("width", ctx_r2.percent(item_r1), "%")("background-color", item_r1.color || ctx_r2.fallback(ɵ$index_5_r2));
|
|
7788
8027
|
i0.ɵɵattribute("title", item_r1.label);
|
|
7789
8028
|
} }
|
|
7790
8029
|
function KptMeterGroup_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -7801,7 +8040,7 @@ function KptMeterGroup_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
7801
8040
|
const ɵ$index_11_r5 = ctx.$index;
|
|
7802
8041
|
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
7803
8042
|
i0.ɵɵadvance();
|
|
7804
|
-
i0.ɵɵstyleProp("background", item_r4.color || ctx_r2.fallback(ɵ$index_11_r5));
|
|
8043
|
+
i0.ɵɵstyleProp("background-color", item_r4.color || ctx_r2.fallback(ɵ$index_11_r5));
|
|
7805
8044
|
i0.ɵɵadvance(2);
|
|
7806
8045
|
i0.ɵɵtextInterpolate(item_r4.label);
|
|
7807
8046
|
i0.ɵɵadvance(2);
|
|
@@ -7847,7 +8086,7 @@ class KptMeterGroup {
|
|
|
7847
8086
|
return Math.round(n);
|
|
7848
8087
|
}
|
|
7849
8088
|
static { this.ɵfac = function KptMeterGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMeterGroup)(); }; }
|
|
7850
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMeterGroup, selectors: [["kpt-meter-group"]], hostAttrs: [1, "kpt-meter-group-host"], inputs: { values: [1, "values"], max: [1, "max"], showLegend: [1, "showLegend"] }, decls: 5, vars: 3, consts: [[1, "kpt-meter-group"], ["role", "meter", 1, "kpt-meter-group__track"], [1, "kpt-meter-group__segment", 3, "width", "background"], [1, "kpt-meter-group__legend"], [1, "kpt-meter-group__segment"], [1, "kpt-meter-group__legend-item"], [1, "kpt-meter-group__dot"], [1, "kpt-meter-group__val"]], template: function KptMeterGroup_Template(rf, ctx) { if (rf & 1) {
|
|
8089
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMeterGroup, selectors: [["kpt-meter-group"]], hostAttrs: [1, "kpt-meter-group-host"], inputs: { values: [1, "values"], max: [1, "max"], showLegend: [1, "showLegend"] }, decls: 5, vars: 3, consts: [[1, "kpt-meter-group"], ["role", "meter", 1, "kpt-meter-group__track"], [1, "kpt-meter-group__segment", 3, "width", "background-color"], [1, "kpt-meter-group__legend"], [1, "kpt-meter-group__segment"], [1, "kpt-meter-group__legend-item"], [1, "kpt-meter-group__dot"], [1, "kpt-meter-group__val"]], template: function KptMeterGroup_Template(rf, ctx) { if (rf & 1) {
|
|
7851
8090
|
i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
|
|
7852
8091
|
i0.ɵɵrepeaterCreate(2, KptMeterGroup_For_3_Template, 1, 5, "span", 2, i0.ɵɵrepeaterTrackByIndex);
|
|
7853
8092
|
i0.ɵɵdomElementEnd();
|
|
@@ -7871,7 +8110,7 @@ class KptMeterGroup {
|
|
|
7871
8110
|
<span
|
|
7872
8111
|
class="kpt-meter-group__segment"
|
|
7873
8112
|
[style.width.%]="percent(item)"
|
|
7874
|
-
[style.background]="item.color || fallback(i)"
|
|
8113
|
+
[style.background-color]="item.color || fallback(i)"
|
|
7875
8114
|
[attr.title]="item.label"
|
|
7876
8115
|
></span>
|
|
7877
8116
|
}
|
|
@@ -7880,7 +8119,7 @@ class KptMeterGroup {
|
|
|
7880
8119
|
<ul class="kpt-meter-group__legend">
|
|
7881
8120
|
@for (item of values(); track $index; let i = $index) {
|
|
7882
8121
|
<li class="kpt-meter-group__legend-item">
|
|
7883
|
-
<span class="kpt-meter-group__dot" [style.background]="item.color || fallback(i)"></span>
|
|
8122
|
+
<span class="kpt-meter-group__dot" [style.background-color]="item.color || fallback(i)"></span>
|
|
7884
8123
|
<span>{{ item.label }}</span>
|
|
7885
8124
|
<span class="kpt-meter-group__val">{{ round(percent(item)) }}%</span>
|
|
7886
8125
|
</li>
|
|
@@ -8736,6 +8975,68 @@ class KptCellDef {
|
|
|
8736
8975
|
}]
|
|
8737
8976
|
}], null, { kptCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCell", required: true }] }] }); })();
|
|
8738
8977
|
|
|
8978
|
+
/**
|
|
8979
|
+
* Własny szablon edytora komórki dla kolumny `kpt-data-table` (gdy wbudowane typy
|
|
8980
|
+
* `KptColumnEdit.type` nie wystarczają). Kontekst: `$implicit` = bieżąca wartość edycji,
|
|
8981
|
+
* `row` = wiersz, `commit(value)` = zatwierdź wartość i zamknij edytor, `cancel()` = odrzuć.
|
|
8982
|
+
*
|
|
8983
|
+
* @example
|
|
8984
|
+
* <kpt-data-table [columns]="cols" [data]="rows">
|
|
8985
|
+
* <ng-template kptCellEdit="team" let-value let-commit="commit">
|
|
8986
|
+
* <my-custom-picker [value]="value" (valueChange)="commit($event)" />
|
|
8987
|
+
* </ng-template>
|
|
8988
|
+
* </kpt-data-table>
|
|
8989
|
+
*/
|
|
8990
|
+
class KptCellEditDef {
|
|
8991
|
+
constructor() {
|
|
8992
|
+
/** Nazwa pola kolumny, dla której obowiązuje szablon edytora. */
|
|
8993
|
+
this.kptCellEdit = input.required(/* @ts-ignore */
|
|
8994
|
+
...(ngDevMode ? [{ debugName: "kptCellEdit" }] : /* istanbul ignore next */ []));
|
|
8995
|
+
this.template = inject(TemplateRef);
|
|
8996
|
+
}
|
|
8997
|
+
static { this.ɵfac = function KptCellEditDef_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptCellEditDef)(); }; }
|
|
8998
|
+
static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: KptCellEditDef, selectors: [["ng-template", "kptCellEdit", ""]], inputs: { kptCellEdit: [1, "kptCellEdit"] } }); }
|
|
8999
|
+
}
|
|
9000
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptCellEditDef, [{
|
|
9001
|
+
type: Directive,
|
|
9002
|
+
args: [{
|
|
9003
|
+
selector: 'ng-template[kptCellEdit]',
|
|
9004
|
+
}]
|
|
9005
|
+
}], null, { kptCellEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCellEdit", required: true }] }] }); })();
|
|
9006
|
+
|
|
9007
|
+
/*
|
|
9008
|
+
* Escapowanie komórek CSV dla `exportCsv()` — pure TS, wydzielone żeby dało się
|
|
9009
|
+
* testować `node --test` bez ciągnięcia Angulara.
|
|
9010
|
+
*/
|
|
9011
|
+
// Znak startowy, który arkusz kalkulacyjny czyta jako początek formuły (CWE-1236).
|
|
9012
|
+
const FORMULA_PREFIX = /^[=+\-@\t\r]/;
|
|
9013
|
+
function stringifyCsvValue(value) {
|
|
9014
|
+
switch (typeof value) {
|
|
9015
|
+
case 'undefined':
|
|
9016
|
+
return '';
|
|
9017
|
+
case 'string':
|
|
9018
|
+
return value;
|
|
9019
|
+
case 'number':
|
|
9020
|
+
case 'boolean':
|
|
9021
|
+
case 'bigint':
|
|
9022
|
+
return String(value);
|
|
9023
|
+
default:
|
|
9024
|
+
if (value === null)
|
|
9025
|
+
return '';
|
|
9026
|
+
if (value instanceof Date)
|
|
9027
|
+
return value.toISOString();
|
|
9028
|
+
return JSON.stringify(value);
|
|
9029
|
+
}
|
|
9030
|
+
}
|
|
9031
|
+
/** Escapuje pojedynczą wartość komórki/nagłówka do bezpiecznego pola CSV (separator `;`). */
|
|
9032
|
+
function escapeCsvCell(value) {
|
|
9033
|
+
let text = stringifyCsvValue(value);
|
|
9034
|
+
// Wiodący `'` każe arkuszowi traktować komórkę jako tekst — sam znak nie jest wyświetlany.
|
|
9035
|
+
if (FORMULA_PREFIX.test(text))
|
|
9036
|
+
text = `'${text}`;
|
|
9037
|
+
return /[",\n;]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
|
|
9038
|
+
}
|
|
9039
|
+
|
|
8739
9040
|
/**
|
|
8740
9041
|
* Szablon rozwijanego wiersza (row detail) dla `kpt-data-table`. Renderowany pod
|
|
8741
9042
|
* wierszem po rozwinięciu. Kontekst: `$implicit` = wiersz. Wymaga `expandable`.
|
|
@@ -8763,17 +9064,21 @@ class KptRowDetailDef {
|
|
|
8763
9064
|
|
|
8764
9065
|
const _c0$e = ["scrollEl"];
|
|
8765
9066
|
const _c1$5 = ["theadEl"];
|
|
8766
|
-
const _c2$2 =
|
|
8767
|
-
const _c3 =
|
|
8768
|
-
const _c4 =
|
|
8769
|
-
const _c5 =
|
|
8770
|
-
const _c6 =
|
|
9067
|
+
const _c2$2 = ["editorHost"];
|
|
9068
|
+
const _c3 = [[["", "kptPaginatorActions", ""]]];
|
|
9069
|
+
const _c4 = ["[kptPaginatorActions]"];
|
|
9070
|
+
const _c5 = a0 => ({ $implicit: a0 });
|
|
9071
|
+
const _c6 = a0 => ({ column: a0 });
|
|
9072
|
+
const _c7 = (a0, a1, a2, a3) => ({ $implicit: a0, row: a1, commit: a2, cancel: a3 });
|
|
9073
|
+
const _c8 = () => [];
|
|
9074
|
+
const _c9 = (a0, a1) => ({ $implicit: a0, value: a1 });
|
|
9075
|
+
const _c10 = () => ({ start: "", end: "" });
|
|
8771
9076
|
const _forTrack0$1 = ($index, $item) => $item.field;
|
|
8772
9077
|
function _forTrack1($index, $item) { /* @ts-ignore */
|
|
8773
9078
|
return this.trackRow($item); }
|
|
8774
9079
|
function KptDataTable_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
8775
9080
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
8776
|
-
i0.ɵɵelementStart(0, "input",
|
|
9081
|
+
i0.ɵɵelementStart(0, "input", 15);
|
|
8777
9082
|
i0.ɵɵlistener("input", function KptDataTable_Conditional_0_Conditional_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFilter($event)); });
|
|
8778
9083
|
i0.ɵɵelementEnd();
|
|
8779
9084
|
} if (rf & 2) {
|
|
@@ -8783,7 +9088,7 @@ function KptDataTable_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1
|
|
|
8783
9088
|
} }
|
|
8784
9089
|
function KptDataTable_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
8785
9090
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
8786
|
-
i0.ɵɵelementStart(0, "kpt-button",
|
|
9091
|
+
i0.ɵɵelementStart(0, "kpt-button", 16);
|
|
8787
9092
|
i0.ɵɵlistener("click", function KptDataTable_Conditional_0_Conditional_2_Template_kpt_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.exportCsv()); });
|
|
8788
9093
|
i0.ɵɵtext(1);
|
|
8789
9094
|
i0.ɵɵelementEnd();
|
|
@@ -8793,9 +9098,9 @@ function KptDataTable_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1
|
|
|
8793
9098
|
i0.ɵɵtextInterpolate(ctx_r1.i18n.t("dataTable.exportCsv"));
|
|
8794
9099
|
} }
|
|
8795
9100
|
function KptDataTable_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
8796
|
-
i0.ɵɵelementStart(0, "div",
|
|
8797
|
-
i0.ɵɵconditionalCreate(1, KptDataTable_Conditional_0_Conditional_1_Template, 1, 2, "input",
|
|
8798
|
-
i0.ɵɵconditionalCreate(2, KptDataTable_Conditional_0_Conditional_2_Template, 2, 1, "kpt-button",
|
|
9101
|
+
i0.ɵɵelementStart(0, "div", 5);
|
|
9102
|
+
i0.ɵɵconditionalCreate(1, KptDataTable_Conditional_0_Conditional_1_Template, 1, 2, "input", 13);
|
|
9103
|
+
i0.ɵɵconditionalCreate(2, KptDataTable_Conditional_0_Conditional_2_Template, 2, 1, "kpt-button", 14);
|
|
8799
9104
|
i0.ɵɵelementEnd();
|
|
8800
9105
|
} if (rf & 2) {
|
|
8801
9106
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -8805,14 +9110,14 @@ function KptDataTable_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
8805
9110
|
i0.ɵɵconditional(ctx_r1.exportable() ? 2 : -1);
|
|
8806
9111
|
} }
|
|
8807
9112
|
function KptDataTable_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
8808
|
-
i0.ɵɵelementContainer(0,
|
|
9113
|
+
i0.ɵɵelementContainer(0, 8);
|
|
8809
9114
|
} if (rf & 2) {
|
|
8810
9115
|
i0.ɵɵnextContext();
|
|
8811
9116
|
const filterRowTpl_r4 = i0.ɵɵreference(22);
|
|
8812
9117
|
i0.ɵɵproperty("ngTemplateOutlet", filterRowTpl_r4);
|
|
8813
9118
|
} }
|
|
8814
9119
|
function KptDataTable_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
8815
|
-
i0.ɵɵelement(0, "th",
|
|
9120
|
+
i0.ɵɵelement(0, "th", 17);
|
|
8816
9121
|
} if (rf & 2) {
|
|
8817
9122
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8818
9123
|
i0.ɵɵstyleProp("left", ctx_r1.expanderStickyLeft(), "px");
|
|
@@ -8820,7 +9125,7 @@ function KptDataTable_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
|
8820
9125
|
} }
|
|
8821
9126
|
function KptDataTable_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
8822
9127
|
const _r5 = i0.ɵɵgetCurrentView();
|
|
8823
|
-
i0.ɵɵelementStart(0, "th",
|
|
9128
|
+
i0.ɵɵelementStart(0, "th", 18)(1, "input", 19);
|
|
8824
9129
|
i0.ɵɵlistener("change", function KptDataTable_Conditional_9_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleAllOnPage()); });
|
|
8825
9130
|
i0.ɵɵelementEnd()();
|
|
8826
9131
|
} if (rf & 2) {
|
|
@@ -8832,17 +9137,17 @@ function KptDataTable_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
|
8832
9137
|
i0.ɵɵattribute("aria-label", ctx_r1.i18n.t("dataTable.selectAll"));
|
|
8833
9138
|
} }
|
|
8834
9139
|
function KptDataTable_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
8835
|
-
i0.ɵɵelement(0, "th",
|
|
9140
|
+
i0.ɵɵelement(0, "th", 18);
|
|
8836
9141
|
} if (rf & 2) {
|
|
8837
9142
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8838
9143
|
i0.ɵɵstyleProp("left", ctx_r1.checkboxStickyLeft(), "px");
|
|
8839
9144
|
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
|
|
8840
9145
|
} }
|
|
8841
9146
|
function KptDataTable_For_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
8842
|
-
i0.ɵɵelement(0, "kpt-icon",
|
|
9147
|
+
i0.ɵɵelement(0, "kpt-icon", 21);
|
|
8843
9148
|
} }
|
|
8844
9149
|
function KptDataTable_For_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
8845
|
-
i0.ɵɵelement(0, "kpt-icon",
|
|
9150
|
+
i0.ɵɵelement(0, "kpt-icon", 23);
|
|
8846
9151
|
} if (rf & 2) {
|
|
8847
9152
|
const col_r7 = i0.ɵɵnextContext().$implicit;
|
|
8848
9153
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -8851,20 +9156,19 @@ function KptDataTable_For_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
|
8851
9156
|
} }
|
|
8852
9157
|
function KptDataTable_For_12_Template(rf, ctx) { if (rf & 1) {
|
|
8853
9158
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
8854
|
-
i0.ɵɵelementStart(0, "th",
|
|
8855
|
-
i0.ɵɵlistener("click", function KptDataTable_For_12_Template_th_click_0_listener() { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort(col_r7)); })("dragstart", function KptDataTable_For_12_Template_th_dragstart_0_listener($event) { const
|
|
8856
|
-
i0.ɵɵconditionalCreate(1, KptDataTable_For_12_Conditional_1_Template, 1, 0, "kpt-icon",
|
|
9159
|
+
i0.ɵɵelementStart(0, "th", 20);
|
|
9160
|
+
i0.ɵɵlistener("click", function KptDataTable_For_12_Template_th_click_0_listener() { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort(col_r7)); })("dragstart", function KptDataTable_For_12_Template_th_dragstart_0_listener($event) { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColDragStart(col_r7.field, $event)); })("dragover", function KptDataTable_For_12_Template_th_dragover_0_listener($event) { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reorderable() ? ctx_r1.onColDragOver(col_r7.field, $event) : null); })("drop", function KptDataTable_For_12_Template_th_drop_0_listener($event) { const col_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reorderable() ? ctx_r1.onColDrop(col_r7.field, $event) : null); })("dragend", function KptDataTable_For_12_Template_th_dragend_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColDragEnd()); });
|
|
9161
|
+
i0.ɵɵconditionalCreate(1, KptDataTable_For_12_Conditional_1_Template, 1, 0, "kpt-icon", 21);
|
|
8857
9162
|
i0.ɵɵelementStart(2, "span");
|
|
8858
9163
|
i0.ɵɵtext(3);
|
|
8859
9164
|
i0.ɵɵelementEnd();
|
|
8860
|
-
i0.ɵɵconditionalCreate(4, KptDataTable_For_12_Conditional_4_Template, 1, 3, "kpt-icon",
|
|
9165
|
+
i0.ɵɵconditionalCreate(4, KptDataTable_For_12_Conditional_4_Template, 1, 3, "kpt-icon", 22);
|
|
8861
9166
|
i0.ɵɵelementEnd();
|
|
8862
9167
|
} if (rf & 2) {
|
|
8863
9168
|
const col_r7 = ctx.$implicit;
|
|
8864
|
-
const ɵ$index_33_r8 = ctx.$index;
|
|
8865
9169
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8866
9170
|
i0.ɵɵstyleProp("width", col_r7.width)("left", ctx_r1.frozenLeft(col_r7.field), "px");
|
|
8867
|
-
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r7.field))("kpt-data-table__th--sortable", col_r7.sortable)("kpt-data-table__th--draggable", ctx_r1.isColDraggable(col_r7))("kpt-data-table__th--dragover", ctx_r1.
|
|
9171
|
+
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r7.field))("kpt-data-table__th--sortable", col_r7.sortable)("kpt-data-table__th--draggable", ctx_r1.isColDraggable(col_r7))("kpt-data-table__th--dragover", ctx_r1.dragField() !== null && ctx_r1.dragField() !== col_r7.field && !col_r7.frozen);
|
|
8868
9172
|
i0.ɵɵattribute("draggable", ctx_r1.isColDraggable(col_r7) ? true : null)("data-align", col_r7.align ?? "start")("aria-sort", ctx_r1.ariaSort(col_r7));
|
|
8869
9173
|
i0.ɵɵadvance();
|
|
8870
9174
|
i0.ɵɵconditional(ctx_r1.isColDraggable(col_r7) ? 1 : -1);
|
|
@@ -8874,14 +9178,14 @@ function KptDataTable_For_12_Template(rf, ctx) { if (rf & 1) {
|
|
|
8874
9178
|
i0.ɵɵconditional(col_r7.sortable ? 4 : -1);
|
|
8875
9179
|
} }
|
|
8876
9180
|
function KptDataTable_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
8877
|
-
i0.ɵɵelementContainer(0,
|
|
9181
|
+
i0.ɵɵelementContainer(0, 8);
|
|
8878
9182
|
} if (rf & 2) {
|
|
8879
9183
|
i0.ɵɵnextContext();
|
|
8880
9184
|
const filterRowTpl_r4 = i0.ɵɵreference(22);
|
|
8881
9185
|
i0.ɵɵproperty("ngTemplateOutlet", filterRowTpl_r4);
|
|
8882
9186
|
} }
|
|
8883
9187
|
function KptDataTable_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
8884
|
-
i0.ɵɵelementStart(0, "tr")(1, "td",
|
|
9188
|
+
i0.ɵɵelementStart(0, "tr")(1, "td", 24);
|
|
8885
9189
|
i0.ɵɵtext(2);
|
|
8886
9190
|
i0.ɵɵelementEnd()();
|
|
8887
9191
|
} if (rf & 2) {
|
|
@@ -8892,7 +9196,7 @@ function KptDataTable_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
|
8892
9196
|
i0.ɵɵtextInterpolate(ctx_r1.i18n.t("dataTable.loading"));
|
|
8893
9197
|
} }
|
|
8894
9198
|
function KptDataTable_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
8895
|
-
i0.ɵɵelementStart(0, "tr")(1, "td",
|
|
9199
|
+
i0.ɵɵelementStart(0, "tr")(1, "td", 24);
|
|
8896
9200
|
i0.ɵɵtext(2);
|
|
8897
9201
|
i0.ɵɵelementEnd()();
|
|
8898
9202
|
} if (rf & 2) {
|
|
@@ -8903,7 +9207,7 @@ function KptDataTable_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
|
8903
9207
|
i0.ɵɵtextInterpolate(ctx_r1.emptyText());
|
|
8904
9208
|
} }
|
|
8905
9209
|
function KptDataTable_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
8906
|
-
i0.ɵɵelementStart(0, "tr",
|
|
9210
|
+
i0.ɵɵelementStart(0, "tr", 25);
|
|
8907
9211
|
i0.ɵɵelement(1, "td");
|
|
8908
9212
|
i0.ɵɵelementEnd();
|
|
8909
9213
|
} if (rf & 2) {
|
|
@@ -8913,15 +9217,15 @@ function KptDataTable_Conditional_17_Conditional_0_Template(rf, ctx) { if (rf &
|
|
|
8913
9217
|
i0.ɵɵattribute("colspan", ctx_r1.colspan());
|
|
8914
9218
|
} }
|
|
8915
9219
|
function KptDataTable_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
8916
|
-
i0.ɵɵelementContainer(0,
|
|
9220
|
+
i0.ɵɵelementContainer(0, 26);
|
|
8917
9221
|
} if (rf & 2) {
|
|
8918
|
-
const
|
|
9222
|
+
const row_r8 = ctx.$implicit;
|
|
8919
9223
|
i0.ɵɵnextContext(2);
|
|
8920
|
-
const
|
|
8921
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
9224
|
+
const rowTpl_r9 = i0.ɵɵreference(20);
|
|
9225
|
+
i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, row_r8));
|
|
8922
9226
|
} }
|
|
8923
9227
|
function KptDataTable_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
8924
|
-
i0.ɵɵelementStart(0, "tr",
|
|
9228
|
+
i0.ɵɵelementStart(0, "tr", 25);
|
|
8925
9229
|
i0.ɵɵelement(1, "td");
|
|
8926
9230
|
i0.ɵɵelementEnd();
|
|
8927
9231
|
} if (rf & 2) {
|
|
@@ -8931,9 +9235,9 @@ function KptDataTable_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf &
|
|
|
8931
9235
|
i0.ɵɵattribute("colspan", ctx_r1.colspan());
|
|
8932
9236
|
} }
|
|
8933
9237
|
function KptDataTable_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
8934
|
-
i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_17_Conditional_0_Template, 2, 3, "tr",
|
|
8935
|
-
i0.ɵɵrepeaterCreate(1, KptDataTable_Conditional_17_For_2_Template, 1, 4, "ng-container",
|
|
8936
|
-
i0.ɵɵconditionalCreate(3, KptDataTable_Conditional_17_Conditional_3_Template, 2, 3, "tr",
|
|
9238
|
+
i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_17_Conditional_0_Template, 2, 3, "tr", 25);
|
|
9239
|
+
i0.ɵɵrepeaterCreate(1, KptDataTable_Conditional_17_For_2_Template, 1, 4, "ng-container", 26, _forTrack1, true);
|
|
9240
|
+
i0.ɵɵconditionalCreate(3, KptDataTable_Conditional_17_Conditional_3_Template, 2, 3, "tr", 25);
|
|
8937
9241
|
} if (rf & 2) {
|
|
8938
9242
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8939
9243
|
i0.ɵɵconditional(ctx_r1.topPad() > 0 ? 0 : -1);
|
|
@@ -8943,219 +9247,298 @@ function KptDataTable_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
|
8943
9247
|
i0.ɵɵconditional(ctx_r1.bottomPad() > 0 ? 3 : -1);
|
|
8944
9248
|
} }
|
|
8945
9249
|
function KptDataTable_Conditional_18_For_1_Template(rf, ctx) { if (rf & 1) {
|
|
8946
|
-
i0.ɵɵelementContainer(0,
|
|
9250
|
+
i0.ɵɵelementContainer(0, 26);
|
|
8947
9251
|
} if (rf & 2) {
|
|
8948
|
-
const
|
|
9252
|
+
const row_r10 = ctx.$implicit;
|
|
8949
9253
|
i0.ɵɵnextContext(2);
|
|
8950
|
-
const
|
|
8951
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
9254
|
+
const rowTpl_r9 = i0.ɵɵreference(20);
|
|
9255
|
+
i0.ɵɵproperty("ngTemplateOutlet", rowTpl_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, row_r10));
|
|
8952
9256
|
} }
|
|
8953
9257
|
function KptDataTable_Conditional_18_Template(rf, ctx) { if (rf & 1) {
|
|
8954
|
-
i0.ɵɵrepeaterCreate(0, KptDataTable_Conditional_18_For_1_Template, 1, 4, "ng-container",
|
|
9258
|
+
i0.ɵɵrepeaterCreate(0, KptDataTable_Conditional_18_For_1_Template, 1, 4, "ng-container", 26, _forTrack1, true);
|
|
8955
9259
|
} if (rf & 2) {
|
|
8956
9260
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8957
9261
|
i0.ɵɵrepeater(ctx_r1.paged());
|
|
8958
9262
|
} }
|
|
8959
9263
|
function KptDataTable_ng_template_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
8960
|
-
const
|
|
8961
|
-
i0.ɵɵelementStart(0, "td",
|
|
8962
|
-
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_1_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
8963
|
-
i0.ɵɵelement(2, "kpt-icon",
|
|
9264
|
+
const _r13 = i0.ɵɵgetCurrentView();
|
|
9265
|
+
i0.ɵɵelementStart(0, "td", 17)(1, "button", 30);
|
|
9266
|
+
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_1_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r13); const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleExpand(row_r12)); });
|
|
9267
|
+
i0.ɵɵelement(2, "kpt-icon", 31);
|
|
8964
9268
|
i0.ɵɵelementEnd()();
|
|
8965
9269
|
} if (rf & 2) {
|
|
8966
|
-
const
|
|
9270
|
+
const row_r12 = i0.ɵɵnextContext().$implicit;
|
|
8967
9271
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8968
9272
|
i0.ɵɵstyleProp("left", ctx_r1.expanderStickyLeft(), "px");
|
|
8969
9273
|
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
|
|
8970
9274
|
i0.ɵɵadvance();
|
|
8971
|
-
i0.ɵɵclassProp("kpt-data-table__expander-btn--open", ctx_r1.isExpanded(
|
|
8972
|
-
i0.ɵɵattribute("aria-expanded", ctx_r1.isExpanded(
|
|
9275
|
+
i0.ɵɵclassProp("kpt-data-table__expander-btn--open", ctx_r1.isExpanded(row_r12));
|
|
9276
|
+
i0.ɵɵattribute("aria-expanded", ctx_r1.isExpanded(row_r12))("aria-label", ctx_r1.i18n.t("dataTable.expandRow"));
|
|
8973
9277
|
} }
|
|
8974
9278
|
function KptDataTable_ng_template_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
8975
|
-
const
|
|
8976
|
-
i0.ɵɵelementStart(0, "td",
|
|
8977
|
-
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_2_Template_input_click_1_listener($event) { return $event.stopPropagation(); })("change", function KptDataTable_ng_template_19_Conditional_2_Template_input_change_1_listener() { i0.ɵɵrestoreView(
|
|
9279
|
+
const _r14 = i0.ɵɵgetCurrentView();
|
|
9280
|
+
i0.ɵɵelementStart(0, "td", 18)(1, "input", 32);
|
|
9281
|
+
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Conditional_2_Template_input_click_1_listener($event) { return $event.stopPropagation(); })("change", function KptDataTable_ng_template_19_Conditional_2_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r14); const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleRow(row_r12)); });
|
|
8978
9282
|
i0.ɵɵelementEnd()();
|
|
8979
9283
|
} if (rf & 2) {
|
|
8980
|
-
const
|
|
9284
|
+
const row_r12 = i0.ɵɵnextContext().$implicit;
|
|
8981
9285
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
8982
9286
|
i0.ɵɵstyleProp("left", ctx_r1.checkboxStickyLeft(), "px");
|
|
8983
9287
|
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
|
|
8984
9288
|
i0.ɵɵadvance();
|
|
8985
|
-
i0.ɵɵproperty("checked", ctx_r1.isSelected(
|
|
9289
|
+
i0.ɵɵproperty("checked", ctx_r1.isSelected(row_r12));
|
|
8986
9290
|
i0.ɵɵattribute("aria-label", ctx_r1.i18n.t("dataTable.selectRow"));
|
|
8987
9291
|
} }
|
|
9292
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
9293
|
+
i0.ɵɵelementContainer(0, 26);
|
|
9294
|
+
} if (rf & 2) {
|
|
9295
|
+
const row_r12 = i0.ɵɵnextContext(3).$implicit;
|
|
9296
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
9297
|
+
i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c7, ctx_r1.editingValue(), row_r12, ctx_r1.commitEditValue, ctx_r1.cancelEdit));
|
|
9298
|
+
} }
|
|
9299
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template(rf, ctx) { if (rf & 1) {
|
|
9300
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
9301
|
+
i0.ɵɵelementStart(0, "kpt-input", 41);
|
|
9302
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("keydown.enter", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.commitEdit()); })("keydown.escape", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template_kpt_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
|
|
9303
|
+
i0.ɵɵelementEnd();
|
|
9304
|
+
} if (rf & 2) {
|
|
9305
|
+
const col_r16 = i0.ɵɵnextContext(3).$implicit;
|
|
9306
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9307
|
+
i0.ɵɵproperty("value", ctx_r1.editingValue() ?? "")("placeholder", col_r16.edit.placeholder ?? "");
|
|
9308
|
+
} }
|
|
9309
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template(rf, ctx) { if (rf & 1) {
|
|
9310
|
+
const _r19 = i0.ɵɵgetCurrentView();
|
|
9311
|
+
i0.ɵɵelementStart(0, "kpt-input-number", 42);
|
|
9312
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("keydown.enter", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.commitEdit()); })("keydown.escape", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template_kpt_input_number_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.cancelEdit()); });
|
|
9313
|
+
i0.ɵɵelementEnd();
|
|
9314
|
+
} if (rf & 2) {
|
|
9315
|
+
const col_r16 = i0.ɵɵnextContext(3).$implicit;
|
|
9316
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9317
|
+
i0.ɵɵproperty("value", ctx_r1.editingValue())("min", col_r16.edit.min)("max", col_r16.edit.max)("step", col_r16.edit.step ?? 1);
|
|
9318
|
+
} }
|
|
9319
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template(rf, ctx) { if (rf & 1) {
|
|
9320
|
+
const _r20 = i0.ɵɵgetCurrentView();
|
|
9321
|
+
i0.ɵɵelementStart(0, "kpt-datepicker", 43);
|
|
9322
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template_kpt_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template_kpt_datepicker_openChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
|
|
9323
|
+
i0.ɵɵelementEnd();
|
|
9324
|
+
} if (rf & 2) {
|
|
9325
|
+
const ctx_r1 = i0.ɵɵnextContext(5);
|
|
9326
|
+
i0.ɵɵproperty("value", ctx_r1.editingValue() ?? "")("open", ctx_r1.editorPanelOpen());
|
|
9327
|
+
} }
|
|
9328
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
9329
|
+
const _r21 = i0.ɵɵgetCurrentView();
|
|
9330
|
+
i0.ɵɵelementStart(0, "kpt-select", 44);
|
|
9331
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template_kpt_select_openChange_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
|
|
9332
|
+
i0.ɵɵelementEnd();
|
|
9333
|
+
} if (rf & 2) {
|
|
9334
|
+
const col_r16 = i0.ɵɵnextContext(3).$implicit;
|
|
9335
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9336
|
+
i0.ɵɵproperty("options", col_r16.edit.options ?? i0.ɵɵpureFunction0(4, _c8))("placeholder", col_r16.edit.placeholder ?? "")("value", ctx_r1.editingValue())("open", ctx_r1.editorPanelOpen());
|
|
9337
|
+
} }
|
|
9338
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template(rf, ctx) { if (rf & 1) {
|
|
9339
|
+
const _r22 = i0.ɵɵgetCurrentView();
|
|
9340
|
+
i0.ɵɵelementStart(0, "kpt-select", 45);
|
|
9341
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.editingValue.set($event)); })("openChange", function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template_kpt_select_openChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEditorPanelToggle($event)); });
|
|
9342
|
+
i0.ɵɵelementEnd();
|
|
9343
|
+
} if (rf & 2) {
|
|
9344
|
+
const col_r16 = i0.ɵɵnextContext(3).$implicit;
|
|
9345
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9346
|
+
i0.ɵɵproperty("options", col_r16.edit.options ?? i0.ɵɵpureFunction0(4, _c8))("placeholder", col_r16.edit.placeholder ?? "")("value", ctx_r1.editingValue())("open", ctx_r1.editorPanelOpen());
|
|
9347
|
+
} }
|
|
9348
|
+
function KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
9349
|
+
i0.ɵɵconditionalCreate(0, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_0_Template, 1, 2, "kpt-input", 36)(1, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_1_Template, 1, 4, "kpt-input-number", 37)(2, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_2_Template, 1, 2, "kpt-datepicker", 38)(3, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_3_Template, 1, 5, "kpt-select", 39)(4, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Case_4_Template, 1, 5, "kpt-select", 40);
|
|
9350
|
+
} if (rf & 2) {
|
|
9351
|
+
let tmp_19_0;
|
|
9352
|
+
const col_r16 = i0.ɵɵnextContext(2).$implicit;
|
|
9353
|
+
i0.ɵɵconditional((tmp_19_0 = col_r16.edit?.type) === "text" ? 0 : tmp_19_0 === "number" ? 1 : tmp_19_0 === "date" ? 2 : tmp_19_0 === "select" ? 3 : tmp_19_0 === "multiselect" ? 4 : -1);
|
|
9354
|
+
} }
|
|
8988
9355
|
function KptDataTable_ng_template_19_For_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
8989
|
-
i0.ɵɵ
|
|
9356
|
+
const _r17 = i0.ɵɵgetCurrentView();
|
|
9357
|
+
i0.ɵɵelementStart(0, "div", 35, 4);
|
|
9358
|
+
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_For_4_Conditional_1_Template_div_click_0_listener($event) { return $event.stopPropagation(); })("focusout", function KptDataTable_ng_template_19_For_4_Conditional_1_Template_div_focusout_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEditorFocusOut($event)); });
|
|
9359
|
+
i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_2_Template, 1, 7, "ng-container", 26)(3, KptDataTable_ng_template_19_For_4_Conditional_1_Conditional_3_Template, 5, 1);
|
|
9360
|
+
i0.ɵɵelementEnd();
|
|
8990
9361
|
} if (rf & 2) {
|
|
9362
|
+
let tmp_18_0;
|
|
8991
9363
|
const col_r16 = i0.ɵɵnextContext().$implicit;
|
|
8992
|
-
const
|
|
8993
|
-
|
|
8994
|
-
i0.ɵɵ
|
|
9364
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9365
|
+
i0.ɵɵadvance(2);
|
|
9366
|
+
i0.ɵɵconditional((tmp_18_0 = ctx_r1.cellEditTemplate(col_r16.field)) ? 2 : 3, tmp_18_0);
|
|
8995
9367
|
} }
|
|
8996
9368
|
function KptDataTable_ng_template_19_For_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
9369
|
+
i0.ɵɵelementContainer(0, 26);
|
|
9370
|
+
} if (rf & 2) {
|
|
9371
|
+
const col_r16 = i0.ɵɵnextContext().$implicit;
|
|
9372
|
+
const row_r12 = i0.ɵɵnextContext().$implicit;
|
|
9373
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
9374
|
+
i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c9, row_r12, ctx_r1.getValue(row_r12, col_r16.field)));
|
|
9375
|
+
} }
|
|
9376
|
+
function KptDataTable_ng_template_19_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
8997
9377
|
i0.ɵɵtext(0);
|
|
8998
9378
|
} if (rf & 2) {
|
|
8999
9379
|
const col_r16 = i0.ɵɵnextContext().$implicit;
|
|
9000
|
-
const
|
|
9380
|
+
const row_r12 = i0.ɵɵnextContext().$implicit;
|
|
9001
9381
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
9002
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.getValue(
|
|
9382
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.getValue(row_r12, col_r16.field), " ");
|
|
9003
9383
|
} }
|
|
9004
9384
|
function KptDataTable_ng_template_19_For_4_Template(rf, ctx) { if (rf & 1) {
|
|
9005
|
-
i0.ɵɵ
|
|
9006
|
-
i0.ɵɵ
|
|
9385
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
9386
|
+
i0.ɵɵelementStart(0, "td", 33);
|
|
9387
|
+
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_For_4_Template_td_click_0_listener($event) { const col_r16 = i0.ɵɵrestoreView(_r15).$implicit; const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isEditable(col_r16) ? ctx_r1.startEdit(row_r12, col_r16, $event) : null); })("keydown.enter", function KptDataTable_ng_template_19_For_4_Template_td_keydown_enter_0_listener($event) { const col_r16 = i0.ɵɵrestoreView(_r15).$implicit; const row_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field) ? ctx_r1.startEdit(row_r12, col_r16, $event) : null); });
|
|
9388
|
+
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_For_4_Conditional_1_Template, 4, 1, "div", 34)(2, KptDataTable_ng_template_19_For_4_Conditional_2_Template, 1, 5, "ng-container", 26)(3, KptDataTable_ng_template_19_For_4_Conditional_3_Template, 1, 1);
|
|
9007
9389
|
i0.ɵɵelementEnd();
|
|
9008
9390
|
} if (rf & 2) {
|
|
9009
|
-
let
|
|
9391
|
+
let tmp_22_0;
|
|
9010
9392
|
const col_r16 = ctx.$implicit;
|
|
9011
|
-
const
|
|
9393
|
+
const row_r12 = i0.ɵɵnextContext().$implicit;
|
|
9394
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
9012
9395
|
i0.ɵɵstyleProp("left", ctx_r1.frozenLeft(col_r16.field), "px");
|
|
9013
|
-
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r16.field));
|
|
9014
|
-
i0.ɵɵattribute("data-align", col_r16.align ?? "start");
|
|
9396
|
+
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r16.field))("kpt-data-table__cell--editable", ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field));
|
|
9397
|
+
i0.ɵɵattribute("data-align", col_r16.align ?? "start")("tabindex", ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field) ? 0 : null)("aria-label", ctx_r1.isEditable(col_r16) && !ctx_r1.isEditingCell(row_r12, col_r16.field) ? ctx_r1.i18n.t("dataTable.editCell", i0.ɵɵpureFunction1(10, _c6, col_r16.header)) : null);
|
|
9015
9398
|
i0.ɵɵadvance();
|
|
9016
|
-
i0.ɵɵconditional((
|
|
9399
|
+
i0.ɵɵconditional(ctx_r1.isEditingCell(row_r12, col_r16.field) ? 1 : (tmp_22_0 = ctx_r1.cellTemplate(col_r16.field)) ? 2 : 3, tmp_22_0);
|
|
9017
9400
|
} }
|
|
9018
9401
|
function KptDataTable_ng_template_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
9019
|
-
i0.ɵɵelementStart(0, "tr",
|
|
9020
|
-
i0.ɵɵelementContainer(2,
|
|
9402
|
+
i0.ɵɵelementStart(0, "tr", 29)(1, "td", 46);
|
|
9403
|
+
i0.ɵɵelementContainer(2, 26);
|
|
9021
9404
|
i0.ɵɵelementEnd()();
|
|
9022
9405
|
} if (rf & 2) {
|
|
9023
|
-
const
|
|
9406
|
+
const row_r12 = i0.ɵɵnextContext().$implicit;
|
|
9024
9407
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
9025
9408
|
i0.ɵɵadvance();
|
|
9026
9409
|
i0.ɵɵattribute("colspan", ctx_r1.colspan());
|
|
9027
9410
|
i0.ɵɵadvance();
|
|
9028
|
-
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rowDetailTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(3,
|
|
9411
|
+
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rowDetailTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c5, row_r12));
|
|
9029
9412
|
} }
|
|
9030
9413
|
function KptDataTable_ng_template_19_Template(rf, ctx) { if (rf & 1) {
|
|
9031
|
-
const
|
|
9032
|
-
i0.ɵɵelementStart(0, "tr",
|
|
9033
|
-
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Template_tr_click_0_listener() { const
|
|
9034
|
-
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_Conditional_1_Template, 3, 8, "td",
|
|
9035
|
-
i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_19_Conditional_2_Template, 2, 6, "td",
|
|
9036
|
-
i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_19_For_4_Template,
|
|
9414
|
+
const _r11 = i0.ɵɵgetCurrentView();
|
|
9415
|
+
i0.ɵɵelementStart(0, "tr", 27);
|
|
9416
|
+
i0.ɵɵlistener("click", function KptDataTable_ng_template_19_Template_tr_click_0_listener() { const row_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowClick(row_r12)); });
|
|
9417
|
+
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_19_Conditional_1_Template, 3, 8, "td", 9);
|
|
9418
|
+
i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_19_Conditional_2_Template, 2, 6, "td", 10);
|
|
9419
|
+
i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_19_For_4_Template, 4, 12, "td", 28, _forTrack0$1);
|
|
9037
9420
|
i0.ɵɵelementEnd();
|
|
9038
|
-
i0.ɵɵconditionalCreate(5, KptDataTable_ng_template_19_Conditional_5_Template, 3, 5, "tr",
|
|
9421
|
+
i0.ɵɵconditionalCreate(5, KptDataTable_ng_template_19_Conditional_5_Template, 3, 5, "tr", 29);
|
|
9039
9422
|
} if (rf & 2) {
|
|
9040
|
-
const
|
|
9423
|
+
const row_r12 = ctx.$implicit;
|
|
9041
9424
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
9042
9425
|
i0.ɵɵstyleProp("height", ctx_r1.virtualScroll() ? ctx_r1.rowHeight() : null, "px");
|
|
9043
|
-
i0.ɵɵclassProp("kpt-data-table__row--selected", ctx_r1.isSelected(
|
|
9426
|
+
i0.ɵɵclassProp("kpt-data-table__row--selected", ctx_r1.isSelected(row_r12))("kpt-data-table__row--expanded", ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r12));
|
|
9044
9427
|
i0.ɵɵadvance();
|
|
9045
9428
|
i0.ɵɵconditional(ctx_r1.hasRowDetail() ? 1 : -1);
|
|
9046
9429
|
i0.ɵɵadvance();
|
|
9047
9430
|
i0.ɵɵconditional(ctx_r1.selectable() !== "none" ? 2 : -1);
|
|
9048
9431
|
i0.ɵɵadvance();
|
|
9049
|
-
i0.ɵɵrepeater(ctx_r1.
|
|
9432
|
+
i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
|
|
9050
9433
|
i0.ɵɵadvance(2);
|
|
9051
|
-
i0.ɵɵconditional(ctx_r1.hasRowDetail() && ctx_r1.isExpanded(
|
|
9434
|
+
i0.ɵɵconditional(ctx_r1.hasRowDetail() && ctx_r1.isExpanded(row_r12) && !ctx_r1.virtualScroll() ? 5 : -1);
|
|
9052
9435
|
} }
|
|
9053
9436
|
function KptDataTable_ng_template_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
9054
|
-
i0.ɵɵelement(0, "th",
|
|
9437
|
+
i0.ɵɵelement(0, "th", 17);
|
|
9055
9438
|
} if (rf & 2) {
|
|
9056
9439
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9057
9440
|
i0.ɵɵstyleProp("left", ctx_r1.expanderStickyLeft(), "px");
|
|
9058
9441
|
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
|
|
9059
9442
|
} }
|
|
9060
9443
|
function KptDataTable_ng_template_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
9061
|
-
i0.ɵɵelement(0, "th",
|
|
9444
|
+
i0.ɵɵelement(0, "th", 18);
|
|
9062
9445
|
} if (rf & 2) {
|
|
9063
9446
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9064
9447
|
i0.ɵɵstyleProp("left", ctx_r1.checkboxStickyLeft(), "px");
|
|
9065
9448
|
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.hasFrozen());
|
|
9066
9449
|
} }
|
|
9067
9450
|
function KptDataTable_ng_template_21_For_4_Case_1_Template(rf, ctx) { if (rf & 1) {
|
|
9068
|
-
const
|
|
9069
|
-
i0.ɵɵelementStart(0, "input",
|
|
9070
|
-
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(
|
|
9451
|
+
const _r23 = i0.ɵɵgetCurrentView();
|
|
9452
|
+
i0.ɵɵelementStart(0, "input", 55);
|
|
9453
|
+
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r23); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event.target.value)); })("click", function KptDataTable_ng_template_21_For_4_Case_1_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
|
|
9071
9454
|
i0.ɵɵelementEnd();
|
|
9072
9455
|
} if (rf & 2) {
|
|
9073
|
-
const
|
|
9456
|
+
const col_r24 = i0.ɵɵnextContext().$implicit;
|
|
9074
9457
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9075
|
-
i0.ɵɵproperty("value", ctx_r1.columnFilters()[
|
|
9076
|
-
i0.ɵɵattribute("placeholder",
|
|
9458
|
+
i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r24.field] || "");
|
|
9459
|
+
i0.ɵɵattribute("placeholder", col_r24.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c6, col_r24.header)));
|
|
9077
9460
|
} }
|
|
9078
9461
|
function KptDataTable_ng_template_21_For_4_Case_2_Template(rf, ctx) { if (rf & 1) {
|
|
9079
|
-
const
|
|
9080
|
-
i0.ɵɵelementStart(0, "input",
|
|
9081
|
-
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(
|
|
9462
|
+
const _r25 = i0.ɵɵgetCurrentView();
|
|
9463
|
+
i0.ɵɵelementStart(0, "input", 56);
|
|
9464
|
+
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r25); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNumberFilter(col_r24.field, $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_2_Template_input_click_0_listener($event) { return $event.stopPropagation(); });
|
|
9082
9465
|
i0.ɵɵelementEnd();
|
|
9083
9466
|
} if (rf & 2) {
|
|
9084
|
-
const
|
|
9467
|
+
const col_r24 = i0.ɵɵnextContext().$implicit;
|
|
9085
9468
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9086
|
-
i0.ɵɵproperty("value", ctx_r1.columnFilters()[
|
|
9087
|
-
i0.ɵɵattribute("placeholder",
|
|
9469
|
+
i0.ɵɵproperty("value", ctx_r1.columnFilters()[col_r24.field] || "");
|
|
9470
|
+
i0.ɵɵattribute("placeholder", col_r24.filter.placeholder || "")("aria-label", ctx_r1.i18n.t("dataTable.filter", i0.ɵɵpureFunction1(3, _c6, col_r24.header)));
|
|
9088
9471
|
} }
|
|
9089
9472
|
function KptDataTable_ng_template_21_For_4_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
9090
|
-
const
|
|
9091
|
-
i0.ɵɵelementStart(0, "kpt-select",
|
|
9092
|
-
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(
|
|
9473
|
+
const _r26 = i0.ɵɵgetCurrentView();
|
|
9474
|
+
i0.ɵɵelementStart(0, "kpt-select", 57);
|
|
9475
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_3_Template_kpt_select_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event)); });
|
|
9093
9476
|
i0.ɵɵelementEnd();
|
|
9094
9477
|
} if (rf & 2) {
|
|
9095
|
-
const
|
|
9478
|
+
const col_r24 = i0.ɵɵnextContext().$implicit;
|
|
9096
9479
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9097
|
-
i0.ɵɵproperty("options",
|
|
9480
|
+
i0.ɵɵproperty("options", col_r24.filter.options || i0.ɵɵpureFunction0(4, _c8))("multiple", !!col_r24.filter.multiple)("placeholder", col_r24.filter.placeholder || ctx_r1.i18n.t("dataTable.all"))("value", ctx_r1.columnFilters()[col_r24.field] ?? null);
|
|
9098
9481
|
} }
|
|
9099
9482
|
function KptDataTable_ng_template_21_For_4_Case_4_Template(rf, ctx) { if (rf & 1) {
|
|
9100
|
-
const
|
|
9101
|
-
i0.ɵɵelementStart(0, "div",
|
|
9102
|
-
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(
|
|
9483
|
+
const _r27 = i0.ɵɵgetCurrentView();
|
|
9484
|
+
i0.ɵɵelementStart(0, "div", 52)(1, "input", 56);
|
|
9485
|
+
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r27); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r24.field, "min", $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_click_1_listener($event) { return $event.stopPropagation(); });
|
|
9103
9486
|
i0.ɵɵelementEnd();
|
|
9104
|
-
i0.ɵɵelementStart(2, "input",
|
|
9105
|
-
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(
|
|
9487
|
+
i0.ɵɵelementStart(2, "input", 56);
|
|
9488
|
+
i0.ɵɵlistener("input", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r27); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setRangeFilter(col_r24.field, "max", $event)); })("click", function KptDataTable_ng_template_21_For_4_Case_4_Template_input_click_2_listener($event) { return $event.stopPropagation(); });
|
|
9106
9489
|
i0.ɵɵelementEnd()();
|
|
9107
9490
|
} if (rf & 2) {
|
|
9108
|
-
const
|
|
9491
|
+
const col_r24 = i0.ɵɵnextContext().$implicit;
|
|
9109
9492
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9110
9493
|
i0.ɵɵadvance();
|
|
9111
|
-
i0.ɵɵproperty("value", ctx_r1.rangeVal(
|
|
9112
|
-
i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.min"))("aria-label", ctx_r1.i18n.t("dataTable.filterMin", i0.ɵɵpureFunction1(6,
|
|
9494
|
+
i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r24.field).min);
|
|
9495
|
+
i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.min"))("aria-label", ctx_r1.i18n.t("dataTable.filterMin", i0.ɵɵpureFunction1(6, _c6, col_r24.header)));
|
|
9113
9496
|
i0.ɵɵadvance();
|
|
9114
|
-
i0.ɵɵproperty("value", ctx_r1.rangeVal(
|
|
9115
|
-
i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.max"))("aria-label", ctx_r1.i18n.t("dataTable.filterMax", i0.ɵɵpureFunction1(8,
|
|
9497
|
+
i0.ɵɵproperty("value", ctx_r1.rangeVal(col_r24.field).max);
|
|
9498
|
+
i0.ɵɵattribute("placeholder", ctx_r1.i18n.t("dataTable.max"))("aria-label", ctx_r1.i18n.t("dataTable.filterMax", i0.ɵɵpureFunction1(8, _c6, col_r24.header)));
|
|
9116
9499
|
} }
|
|
9117
9500
|
function KptDataTable_ng_template_21_For_4_Case_5_Template(rf, ctx) { if (rf & 1) {
|
|
9118
|
-
const
|
|
9119
|
-
i0.ɵɵelementStart(0, "div",
|
|
9501
|
+
const _r28 = i0.ɵɵgetCurrentView();
|
|
9502
|
+
i0.ɵɵelementStart(0, "div", 58);
|
|
9120
9503
|
i0.ɵɵlistener("click", function KptDataTable_ng_template_21_For_4_Case_5_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
|
|
9121
|
-
i0.ɵɵelementStart(1, "kpt-slider",
|
|
9122
|
-
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_5_Template_kpt_slider_valueChange_1_listener($event) { i0.ɵɵrestoreView(
|
|
9504
|
+
i0.ɵɵelementStart(1, "kpt-slider", 59);
|
|
9505
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_5_Template_kpt_slider_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r28); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event)); });
|
|
9123
9506
|
i0.ɵɵelementEnd()();
|
|
9124
9507
|
} if (rf & 2) {
|
|
9125
|
-
const
|
|
9508
|
+
const col_r24 = i0.ɵɵnextContext().$implicit;
|
|
9126
9509
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9127
9510
|
i0.ɵɵadvance();
|
|
9128
|
-
i0.ɵɵproperty("min",
|
|
9511
|
+
i0.ɵɵproperty("min", col_r24.filter.min ?? 0)("max", col_r24.filter.max ?? 100)("step", col_r24.filter.step ?? 1)("value", ctx_r1.sliderVal(col_r24));
|
|
9129
9512
|
} }
|
|
9130
9513
|
function KptDataTable_ng_template_21_For_4_Case_6_Template(rf, ctx) { if (rf & 1) {
|
|
9131
|
-
const
|
|
9132
|
-
i0.ɵɵelementStart(0, "kpt-date-range",
|
|
9133
|
-
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_6_Template_kpt_date_range_valueChange_0_listener($event) { i0.ɵɵrestoreView(
|
|
9514
|
+
const _r29 = i0.ɵɵgetCurrentView();
|
|
9515
|
+
i0.ɵɵelementStart(0, "kpt-date-range", 60);
|
|
9516
|
+
i0.ɵɵlistener("valueChange", function KptDataTable_ng_template_21_For_4_Case_6_Template_kpt_date_range_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r29); const col_r24 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setColumnFilter(col_r24.field, $event)); });
|
|
9134
9517
|
i0.ɵɵelementEnd();
|
|
9135
9518
|
} if (rf & 2) {
|
|
9136
|
-
const
|
|
9519
|
+
const col_r24 = i0.ɵɵnextContext().$implicit;
|
|
9137
9520
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9138
|
-
i0.ɵɵproperty("placeholder",
|
|
9521
|
+
i0.ɵɵproperty("placeholder", col_r24.filter.placeholder || ctx_r1.i18n.t("dataTable.dateRange"))("value", ctx_r1.columnFilters()[col_r24.field] || i0.ɵɵpureFunction0(2, _c10));
|
|
9139
9522
|
} }
|
|
9140
9523
|
function KptDataTable_ng_template_21_For_4_Template(rf, ctx) { if (rf & 1) {
|
|
9141
9524
|
i0.ɵɵelementStart(0, "th");
|
|
9142
|
-
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_For_4_Case_1_Template, 1, 5, "input",
|
|
9525
|
+
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_For_4_Case_1_Template, 1, 5, "input", 49)(2, KptDataTable_ng_template_21_For_4_Case_2_Template, 1, 5, "input", 50)(3, KptDataTable_ng_template_21_For_4_Case_3_Template, 1, 5, "kpt-select", 51)(4, KptDataTable_ng_template_21_For_4_Case_4_Template, 3, 10, "div", 52)(5, KptDataTable_ng_template_21_For_4_Case_5_Template, 2, 4, "div", 53)(6, KptDataTable_ng_template_21_For_4_Case_6_Template, 1, 3, "kpt-date-range", 54);
|
|
9143
9526
|
i0.ɵɵelementEnd();
|
|
9144
9527
|
} if (rf & 2) {
|
|
9145
9528
|
let tmp_19_0;
|
|
9146
|
-
const
|
|
9529
|
+
const col_r24 = ctx.$implicit;
|
|
9147
9530
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
9148
|
-
i0.ɵɵstyleProp("width",
|
|
9149
|
-
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(
|
|
9150
|
-
i0.ɵɵattribute("data-align",
|
|
9531
|
+
i0.ɵɵstyleProp("width", col_r24.width)("left", ctx_r1.frozenLeft(col_r24.field), "px");
|
|
9532
|
+
i0.ɵɵclassProp("kpt-data-table__cell--frozen", ctx_r1.isFrozen(col_r24.field));
|
|
9533
|
+
i0.ɵɵattribute("data-align", col_r24.align ?? "start");
|
|
9151
9534
|
i0.ɵɵadvance();
|
|
9152
|
-
i0.ɵɵconditional((tmp_19_0 =
|
|
9535
|
+
i0.ɵɵconditional((tmp_19_0 = col_r24.filter?.type) === "text" ? 1 : tmp_19_0 === "number" ? 2 : tmp_19_0 === "select" ? 3 : tmp_19_0 === "numberRange" ? 4 : tmp_19_0 === "slider" ? 5 : tmp_19_0 === "dateRange" ? 6 : -1);
|
|
9153
9536
|
} }
|
|
9154
9537
|
function KptDataTable_ng_template_21_Template(rf, ctx) { if (rf & 1) {
|
|
9155
|
-
i0.ɵɵelementStart(0, "tr",
|
|
9156
|
-
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_Conditional_1_Template, 1, 4, "th",
|
|
9157
|
-
i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_21_Conditional_2_Template, 1, 4, "th",
|
|
9158
|
-
i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_21_For_4_Template, 7, 8, "th",
|
|
9538
|
+
i0.ɵɵelementStart(0, "tr", 47);
|
|
9539
|
+
i0.ɵɵconditionalCreate(1, KptDataTable_ng_template_21_Conditional_1_Template, 1, 4, "th", 9);
|
|
9540
|
+
i0.ɵɵconditionalCreate(2, KptDataTable_ng_template_21_Conditional_2_Template, 1, 4, "th", 10);
|
|
9541
|
+
i0.ɵɵrepeaterCreate(3, KptDataTable_ng_template_21_For_4_Template, 7, 8, "th", 48, _forTrack0$1);
|
|
9159
9542
|
i0.ɵɵelementEnd();
|
|
9160
9543
|
} if (rf & 2) {
|
|
9161
9544
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -9164,20 +9547,34 @@ function KptDataTable_ng_template_21_Template(rf, ctx) { if (rf & 1) {
|
|
|
9164
9547
|
i0.ɵɵadvance();
|
|
9165
9548
|
i0.ɵɵconditional(ctx_r1.selectable() !== "none" ? 2 : -1);
|
|
9166
9549
|
i0.ɵɵadvance();
|
|
9167
|
-
i0.ɵɵrepeater(ctx_r1.
|
|
9550
|
+
i0.ɵɵrepeater(ctx_r1.visibleOrderedColumns());
|
|
9168
9551
|
} }
|
|
9169
9552
|
function KptDataTable_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
9170
|
-
const
|
|
9171
|
-
i0.ɵɵelementStart(0, "
|
|
9172
|
-
i0.ɵɵ
|
|
9173
|
-
i0.ɵɵ
|
|
9553
|
+
const _r30 = i0.ɵɵgetCurrentView();
|
|
9554
|
+
i0.ɵɵelementStart(0, "div", 12);
|
|
9555
|
+
i0.ɵɵprojection(1);
|
|
9556
|
+
i0.ɵɵelementStart(2, "kpt-paginator", 61);
|
|
9557
|
+
i0.ɵɵlistener("pageIndexChange", function KptDataTable_Conditional_23_Template_kpt_paginator_pageIndexChange_2_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageIndex.set($event)); })("pageSizeChange", function KptDataTable_Conditional_23_Template_kpt_paginator_pageSizeChange_2_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.pageSizeState.set($event)); });
|
|
9558
|
+
i0.ɵɵelementEnd()();
|
|
9174
9559
|
} if (rf & 2) {
|
|
9175
9560
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
9561
|
+
i0.ɵɵadvance(2);
|
|
9176
9562
|
i0.ɵɵproperty("length", ctx_r1.filteredCount())("pageIndex", ctx_r1.pageIndex())("pageSize", ctx_r1.pageSizeState())("pageSizeOptions", ctx_r1.pageSizeOptions());
|
|
9177
9563
|
} }
|
|
9178
9564
|
const REM_PX = 16;
|
|
9179
9565
|
const CHECKBOX_FROZEN_W = 3; // rem
|
|
9180
9566
|
const EXPANDER_FROZEN_W = 2.5; // rem
|
|
9567
|
+
/** Edytory renderujące panel w CDK Overlay — otwierane od razu i zatwierdzane na zamknięciu panelu. */
|
|
9568
|
+
const OVERLAY_EDITORS = ['date', 'select', 'multiselect'];
|
|
9569
|
+
/** Tablice (multiselect) porównujemy po zawartości, resztę po referencji. */
|
|
9570
|
+
function sameEditValue(a, b) {
|
|
9571
|
+
if (a === b)
|
|
9572
|
+
return true;
|
|
9573
|
+
if (Array.isArray(a) && Array.isArray(b)) {
|
|
9574
|
+
return a.length === b.length && a.every((v, i) => v === b[i]);
|
|
9575
|
+
}
|
|
9576
|
+
return false;
|
|
9577
|
+
}
|
|
9181
9578
|
/**
|
|
9182
9579
|
* Flagowa tabela danych Koncept UI: kolumny konfiguracją, sortowanie,
|
|
9183
9580
|
* filtr globalny, paginacja, zaznaczanie wierszy i własne szablony komórek (`kptCell`).
|
|
@@ -9246,9 +9643,18 @@ class KptDataTable {
|
|
|
9246
9643
|
/** Rozwinięte wiersze (dwukierunkowo). */
|
|
9247
9644
|
this.expandedRows = model([], /* @ts-ignore */
|
|
9248
9645
|
...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
|
|
9646
|
+
/**
|
|
9647
|
+
* Pola (`KptColumn.field`) aktualnie ukrytych kolumn (dwukierunkowo). Sam komponent nie
|
|
9648
|
+
* dostarcza UI do zarządzania tym stanem — to hak do podpięcia zewnętrznego przełącznika
|
|
9649
|
+
* kolumn (patrz przykład „Dostosowywanie kolumn" w playground).
|
|
9650
|
+
*/
|
|
9651
|
+
this.hiddenFields = model([], /* @ts-ignore */
|
|
9652
|
+
...(ngDevMode ? [{ debugName: "hiddenFields" }] : /* istanbul ignore next */ []));
|
|
9249
9653
|
this.rowClick = output();
|
|
9250
9654
|
/** Emitowane w trybie lazy przy zmianie sortowania/filtra/strony. */
|
|
9251
9655
|
this.lazyLoad = output();
|
|
9656
|
+
/** Emitowane po zatwierdzeniu edycji komórki (tylko gdy wartość faktycznie się zmieniła). */
|
|
9657
|
+
this.cellEdit = output();
|
|
9252
9658
|
this.i18n = inject(KptI18n);
|
|
9253
9659
|
/** Komunikat pustej tabeli (input albo domyślny z i18n). */
|
|
9254
9660
|
this.emptyText = computed(() => this.emptyMessage() ?? this.i18n.t('dataTable.empty'), /* @ts-ignore */
|
|
@@ -9256,6 +9662,9 @@ class KptDataTable {
|
|
|
9256
9662
|
/** Kolumny w bieżącej kolejności (po ewentualnym przestawieniu). */
|
|
9257
9663
|
this.orderedColumns = linkedSignal(() => this.columns(), /* @ts-ignore */
|
|
9258
9664
|
...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
|
|
9665
|
+
/** Kolumny w bieżącej kolejności, bez tych ukrytych przez `hiddenFields` — do renderowania i eksportu. */
|
|
9666
|
+
this.visibleOrderedColumns = computed(() => this.orderedColumns().filter((c) => !this.hiddenFields().includes(c.field)), /* @ts-ignore */
|
|
9667
|
+
...(ngDevMode ? [{ debugName: "visibleOrderedColumns" }] : /* istanbul ignore next */ []));
|
|
9259
9668
|
// ── Wirtualizacja (ręczne okno wierszy) ──
|
|
9260
9669
|
this.scrollEl = viewChild('scrollEl', /* @ts-ignore */
|
|
9261
9670
|
...(ngDevMode ? [{ debugName: "scrollEl" }] : /* istanbul ignore next */ []));
|
|
@@ -9269,6 +9678,16 @@ class KptDataTable {
|
|
|
9269
9678
|
...(ngDevMode ? [{ debugName: "theadEl" }] : /* istanbul ignore next */ []));
|
|
9270
9679
|
this.theadOffset = signal(0, /* @ts-ignore */
|
|
9271
9680
|
...(ngDevMode ? [{ debugName: "theadOffset" }] : /* istanbul ignore next */ []));
|
|
9681
|
+
// ── Edycja inline komórek ──
|
|
9682
|
+
this.editingCell = signal(null, /* @ts-ignore */
|
|
9683
|
+
...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
|
|
9684
|
+
this.editingValue = signal(null, /* @ts-ignore */
|
|
9685
|
+
...(ngDevMode ? [{ debugName: "editingValue" }] : /* istanbul ignore next */ []));
|
|
9686
|
+
/** Czy panel edytora overlayowego (date/select/multiselect) jest otwarty. */
|
|
9687
|
+
this.editorPanelOpen = signal(false, /* @ts-ignore */
|
|
9688
|
+
...(ngDevMode ? [{ debugName: "editorPanelOpen" }] : /* istanbul ignore next */ []));
|
|
9689
|
+
this.editorHost = viewChild('editorHost', /* @ts-ignore */
|
|
9690
|
+
...(ngDevMode ? [{ debugName: "editorHost" }] : /* istanbul ignore next */ []));
|
|
9272
9691
|
this.virtualStart = computed(() => Math.max(0, Math.floor(this.scrollTop() / this.rowHeight()) - this.buffer), /* @ts-ignore */
|
|
9273
9692
|
...(ngDevMode ? [{ debugName: "virtualStart" }] : /* istanbul ignore next */ []));
|
|
9274
9693
|
this.virtualEnd = computed(() => {
|
|
@@ -9284,8 +9703,12 @@ class KptDataTable {
|
|
|
9284
9703
|
this.bottomPad = computed(() => (this.sorted().length - this.virtualEnd()) * this.rowHeight(), /* @ts-ignore */
|
|
9285
9704
|
...(ngDevMode ? [{ debugName: "bottomPad" }] : /* istanbul ignore next */ []));
|
|
9286
9705
|
// ── Przestawianie kolumn (natywny HTML5 drag-and-drop; działa w trybie zoneless) ──
|
|
9287
|
-
|
|
9288
|
-
|
|
9706
|
+
/**
|
|
9707
|
+
* Pole przeciąganej kolumny (nie indeks — przy ukrytych kolumnach `$index` z pętli
|
|
9708
|
+
* `visibleOrderedColumns()` nie odpowiada pozycji w pełnej `orderedColumns()`).
|
|
9709
|
+
*/
|
|
9710
|
+
this.dragField = signal(null, /* @ts-ignore */
|
|
9711
|
+
...(ngDevMode ? [{ debugName: "dragField" }] : /* istanbul ignore next */ []));
|
|
9289
9712
|
// ── Szablony komórek ──
|
|
9290
9713
|
this.cellDefs = contentChildren(KptCellDef, /* @ts-ignore */
|
|
9291
9714
|
...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
|
|
@@ -9296,6 +9719,21 @@ class KptDataTable {
|
|
|
9296
9719
|
return map;
|
|
9297
9720
|
}, /* @ts-ignore */
|
|
9298
9721
|
...(ngDevMode ? [{ debugName: "cellMap" }] : /* istanbul ignore next */ []));
|
|
9722
|
+
// ── Własne edytory komórek (furtka poza wbudowane typy `column.edit.type`) ──
|
|
9723
|
+
this.cellEditDefs = contentChildren(KptCellEditDef, /* @ts-ignore */
|
|
9724
|
+
...(ngDevMode ? [{ debugName: "cellEditDefs" }] : /* istanbul ignore next */ []));
|
|
9725
|
+
this.cellEditMap = computed(() => {
|
|
9726
|
+
const map = new Map();
|
|
9727
|
+
for (const def of this.cellEditDefs())
|
|
9728
|
+
map.set(def.kptCellEdit(), def.template);
|
|
9729
|
+
return map;
|
|
9730
|
+
}, /* @ts-ignore */
|
|
9731
|
+
...(ngDevMode ? [{ debugName: "cellEditMap" }] : /* istanbul ignore next */ []));
|
|
9732
|
+
/** Dla własnych szablonów (`kptCellEdit`): ustaw wartość i od razu zatwierdź. */
|
|
9733
|
+
this.commitEditValue = (value) => {
|
|
9734
|
+
this.editingValue.set(value);
|
|
9735
|
+
this.commitEdit();
|
|
9736
|
+
};
|
|
9299
9737
|
// ── Rozwijane wiersze ──
|
|
9300
9738
|
this.rowDetailDef = contentChild(KptRowDetailDef, /* @ts-ignore */
|
|
9301
9739
|
...(ngDevMode ? [{ debugName: "rowDetailDef" }] : /* istanbul ignore next */ []));
|
|
@@ -9366,7 +9804,7 @@ class KptDataTable {
|
|
|
9366
9804
|
return rows.slice(start, start + size);
|
|
9367
9805
|
}, /* @ts-ignore */
|
|
9368
9806
|
...(ngDevMode ? [{ debugName: "paged" }] : /* istanbul ignore next */ []));
|
|
9369
|
-
this.colspan = computed(() => this.
|
|
9807
|
+
this.colspan = computed(() => this.visibleOrderedColumns().length +
|
|
9370
9808
|
(this.selectable() !== 'none' ? 1 : 0) +
|
|
9371
9809
|
(this.hasRowDetail() ? 1 : 0), /* @ts-ignore */
|
|
9372
9810
|
...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
|
|
@@ -9386,7 +9824,7 @@ class KptDataTable {
|
|
|
9386
9824
|
this.frozenOffsets = computed(() => {
|
|
9387
9825
|
const map = new Map();
|
|
9388
9826
|
let acc = this.leadingStickyWidth();
|
|
9389
|
-
for (const col of this.
|
|
9827
|
+
for (const col of this.visibleOrderedColumns()) {
|
|
9390
9828
|
if (!col.frozen)
|
|
9391
9829
|
break; // tylko wiodące, sąsiadujące
|
|
9392
9830
|
map.set(col.field, acc);
|
|
@@ -9444,11 +9882,19 @@ class KptDataTable {
|
|
|
9444
9882
|
afterRenderEffect(() => {
|
|
9445
9883
|
this.filterRowPosition();
|
|
9446
9884
|
this.hasColumnFilters();
|
|
9447
|
-
this.
|
|
9885
|
+
this.visibleOrderedColumns();
|
|
9448
9886
|
const first = this.theadEl()?.nativeElement?.rows?.[0];
|
|
9449
9887
|
if (first)
|
|
9450
9888
|
this.theadOffset.set(first.offsetHeight);
|
|
9451
9889
|
});
|
|
9890
|
+
// Wejście w edycję komórki → przenieś fokus na jej edytor.
|
|
9891
|
+
afterRenderEffect(() => {
|
|
9892
|
+
if (!this.editingCell())
|
|
9893
|
+
return;
|
|
9894
|
+
this.editorHost()
|
|
9895
|
+
?.nativeElement.querySelector('input, .kpt-select, [tabindex]')
|
|
9896
|
+
?.focus();
|
|
9897
|
+
});
|
|
9452
9898
|
}
|
|
9453
9899
|
onScroll(event) {
|
|
9454
9900
|
if (!this.virtualScroll())
|
|
@@ -9461,10 +9907,10 @@ class KptDataTable {
|
|
|
9461
9907
|
isColDraggable(col) {
|
|
9462
9908
|
return this.reorderable() && !col.frozen;
|
|
9463
9909
|
}
|
|
9464
|
-
/** Liczba wiodących kolumn zamrożonych — poza nie wolno upuszczać ani ich przesuwać. */
|
|
9910
|
+
/** Liczba wiodących widocznych kolumn zamrożonych — poza nie wolno upuszczać ani ich przesuwać. */
|
|
9465
9911
|
frozenLeadCount() {
|
|
9466
9912
|
let n = 0;
|
|
9467
|
-
for (const col of this.
|
|
9913
|
+
for (const col of this.visibleOrderedColumns()) {
|
|
9468
9914
|
if (col.frozen)
|
|
9469
9915
|
n++;
|
|
9470
9916
|
else
|
|
@@ -9472,45 +9918,48 @@ class KptDataTable {
|
|
|
9472
9918
|
}
|
|
9473
9919
|
return n;
|
|
9474
9920
|
}
|
|
9475
|
-
onColDragStart(
|
|
9476
|
-
|
|
9921
|
+
onColDragStart(field, event) {
|
|
9922
|
+
const col = this.orderedColumns().find((c) => c.field === field);
|
|
9923
|
+
if (col?.frozen)
|
|
9477
9924
|
return; // frozen nieprzeciągalne
|
|
9478
|
-
this.
|
|
9479
|
-
event.dataTransfer?.setData('text/plain',
|
|
9925
|
+
this.dragField.set(field);
|
|
9926
|
+
event.dataTransfer?.setData('text/plain', field);
|
|
9480
9927
|
if (event.dataTransfer)
|
|
9481
9928
|
event.dataTransfer.effectAllowed = 'move';
|
|
9482
9929
|
}
|
|
9483
|
-
onColDragOver(
|
|
9930
|
+
onColDragOver(field, event) {
|
|
9484
9931
|
// Zezwól na upuszczenie tylko poza obszarem kolumn zamrożonych.
|
|
9485
|
-
|
|
9932
|
+
const visIndex = this.visibleOrderedColumns().findIndex((c) => c.field === field);
|
|
9933
|
+
if (this.dragField() !== null && visIndex >= this.frozenLeadCount())
|
|
9486
9934
|
event.preventDefault();
|
|
9487
9935
|
}
|
|
9488
|
-
onColDrop(
|
|
9936
|
+
onColDrop(field, event) {
|
|
9489
9937
|
event.preventDefault();
|
|
9490
|
-
const from = this.
|
|
9491
|
-
if (from === null || from ===
|
|
9938
|
+
const from = this.dragField();
|
|
9939
|
+
if (from === null || from === field)
|
|
9492
9940
|
return;
|
|
9493
|
-
|
|
9941
|
+
const visIndex = this.visibleOrderedColumns().findIndex((c) => c.field === field);
|
|
9942
|
+
if (visIndex < this.frozenLeadCount())
|
|
9494
9943
|
return; // nie wsuwaj przed/pomiędzy kolumny zamrożone
|
|
9495
9944
|
const cols = [...this.orderedColumns()];
|
|
9496
|
-
const
|
|
9497
|
-
cols.
|
|
9945
|
+
const fromIdx = cols.findIndex((c) => c.field === from);
|
|
9946
|
+
const toIdx = cols.findIndex((c) => c.field === field);
|
|
9947
|
+
if (fromIdx === -1 || toIdx === -1)
|
|
9948
|
+
return;
|
|
9949
|
+
const [moved] = cols.splice(fromIdx, 1);
|
|
9950
|
+
cols.splice(toIdx, 0, moved);
|
|
9498
9951
|
this.orderedColumns.set(cols);
|
|
9499
|
-
this.
|
|
9952
|
+
this.dragField.set(null);
|
|
9500
9953
|
}
|
|
9501
9954
|
onColDragEnd() {
|
|
9502
|
-
this.
|
|
9955
|
+
this.dragField.set(null);
|
|
9503
9956
|
}
|
|
9504
9957
|
exportCsv() {
|
|
9505
|
-
const cols = this.
|
|
9958
|
+
const cols = this.visibleOrderedColumns();
|
|
9506
9959
|
const rows = this.lazy() ? this.data() : this.sorted();
|
|
9507
|
-
const
|
|
9508
|
-
const text = String(value ?? '');
|
|
9509
|
-
return /[",\n;]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
|
|
9510
|
-
};
|
|
9511
|
-
const header = cols.map((c) => escape(c.header)).join(';');
|
|
9960
|
+
const header = cols.map((c) => escapeCsvCell(c.header)).join(';');
|
|
9512
9961
|
const body = rows
|
|
9513
|
-
.map((row) => cols.map((c) =>
|
|
9962
|
+
.map((row) => cols.map((c) => escapeCsvCell(row[c.field])).join(';'))
|
|
9514
9963
|
.join('\n');
|
|
9515
9964
|
// BOM () — poprawne polskie znaki w Excelu.
|
|
9516
9965
|
const csv = `${header}\n${body}`;
|
|
@@ -9525,6 +9974,72 @@ class KptDataTable {
|
|
|
9525
9974
|
cellTemplate(field) {
|
|
9526
9975
|
return this.cellMap().get(field) ?? null;
|
|
9527
9976
|
}
|
|
9977
|
+
cellEditTemplate(field) {
|
|
9978
|
+
return this.cellEditMap().get(field) ?? null;
|
|
9979
|
+
}
|
|
9980
|
+
// ── Edycja inline komórek ──
|
|
9981
|
+
isEditable(col) {
|
|
9982
|
+
return !!col.edit || !!this.cellEditTemplate(col.field);
|
|
9983
|
+
}
|
|
9984
|
+
isEditingCell(row, field) {
|
|
9985
|
+
const e = this.editingCell();
|
|
9986
|
+
return !!e && e.field === field && this.sameRow(e.row, row);
|
|
9987
|
+
}
|
|
9988
|
+
startEdit(row, col, event) {
|
|
9989
|
+
event.stopPropagation();
|
|
9990
|
+
if (!this.isEditable(col) || this.isEditingCell(row, col.field))
|
|
9991
|
+
return;
|
|
9992
|
+
this.editingCell.set({ row, field: col.field });
|
|
9993
|
+
this.editingValue.set(this.getValue(row, col.field));
|
|
9994
|
+
// Edytory na overlayu otwieramy od razu. To nie kosmetyka: backdrop CDK sprawia, że każdy klik
|
|
9995
|
+
// poza edytorem zamyka panel, a więc zatwierdza i zamyka edycję — bez tego edytor z zamkniętym
|
|
9996
|
+
// panelem potrafiłby zostać otwarty w nieskończoność.
|
|
9997
|
+
const type = col.edit?.type;
|
|
9998
|
+
this.editorPanelOpen.set(!!type && OVERLAY_EDITORS.includes(type));
|
|
9999
|
+
}
|
|
10000
|
+
/**
|
|
10001
|
+
* Panel edytora zamknięty (wybór, klik poza, Esc) → zatwierdź. Celowo NIE wieszamy tego na
|
|
10002
|
+
* `touch`: ten leci też z blur triggera, czyli już przy naciśnięciu myszy na opcji w panelu —
|
|
10003
|
+
* edytor ginąłby, zanim kliknięcie zdąży wybrać wartość.
|
|
10004
|
+
*/
|
|
10005
|
+
onEditorPanelToggle(open) {
|
|
10006
|
+
this.editorPanelOpen.set(open);
|
|
10007
|
+
if (!open)
|
|
10008
|
+
this.commitEdit();
|
|
10009
|
+
}
|
|
10010
|
+
/**
|
|
10011
|
+
* Edytory bez overlaya (text/number, własne `kptCellEdit`) zatwierdza dopiero wyjście fokusu
|
|
10012
|
+
* **poza cały edytor**. Nie wystarczy `touch`/blur samej kontrolki: `kpt-input-number` ma
|
|
10013
|
+
* fokusowalne strzałki `+`/`-` obok pola (i dodatkowo emituje `touch` w `step_()`), więc każde
|
|
10014
|
+
* kliknięcie strzałki zamykałoby edycję, zanim zdąży zmienić wartość.
|
|
10015
|
+
*/
|
|
10016
|
+
onEditorFocusOut(event) {
|
|
10017
|
+
if (this.editorPanelOpen())
|
|
10018
|
+
return; // edytory overlayowe zatwierdza zamknięcie panelu
|
|
10019
|
+
const host = this.editorHost()?.nativeElement;
|
|
10020
|
+
const next = event.relatedTarget;
|
|
10021
|
+
if (host && next && host.contains(next))
|
|
10022
|
+
return; // fokus został w edytorze (np. strzałki +/-)
|
|
10023
|
+
this.commitEdit();
|
|
10024
|
+
}
|
|
10025
|
+
/** Zatwierdza bieżącą edycję — emituje `cellEdit` tylko gdy wartość faktycznie się zmieniła. */
|
|
10026
|
+
commitEdit() {
|
|
10027
|
+
const editing = this.editingCell();
|
|
10028
|
+
if (!editing)
|
|
10029
|
+
return;
|
|
10030
|
+
const { row, field } = editing;
|
|
10031
|
+
const value = this.editingValue();
|
|
10032
|
+
this.editingCell.set(null);
|
|
10033
|
+
this.editorPanelOpen.set(false);
|
|
10034
|
+
if (sameEditValue(value, this.getValue(row, field)))
|
|
10035
|
+
return;
|
|
10036
|
+
const updatedRow = { ...row, [field]: value };
|
|
10037
|
+
this.cellEdit.emit({ row, field, value, updatedRow });
|
|
10038
|
+
}
|
|
10039
|
+
cancelEdit() {
|
|
10040
|
+
this.editingCell.set(null);
|
|
10041
|
+
this.editorPanelOpen.set(false);
|
|
10042
|
+
}
|
|
9528
10043
|
isExpanded(row) {
|
|
9529
10044
|
return this.expandedRows().some((r) => this.sameRow(r, row));
|
|
9530
10045
|
}
|
|
@@ -9721,33 +10236,34 @@ class KptDataTable {
|
|
|
9721
10236
|
}
|
|
9722
10237
|
static { this.ɵfac = function KptDataTable_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDataTable)(); }; }
|
|
9723
10238
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDataTable, selectors: [["kpt-data-table"]], contentQueries: function KptDataTable_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
|
|
9724
|
-
i0.ɵɵcontentQuerySignal(dirIndex, ctx.cellDefs, KptCellDef, 4)(dirIndex, ctx.rowDetailDef, KptRowDetailDef, 5);
|
|
10239
|
+
i0.ɵɵcontentQuerySignal(dirIndex, ctx.cellDefs, KptCellDef, 4)(dirIndex, ctx.cellEditDefs, KptCellEditDef, 4)(dirIndex, ctx.rowDetailDef, KptRowDetailDef, 5);
|
|
9725
10240
|
} if (rf & 2) {
|
|
9726
|
-
i0.ɵɵqueryAdvance(
|
|
10241
|
+
i0.ɵɵqueryAdvance(3);
|
|
9727
10242
|
} }, viewQuery: function KptDataTable_Query(rf, ctx) { if (rf & 1) {
|
|
9728
|
-
i0.ɵɵviewQuerySignal(ctx.scrollEl, _c0$e, 5)(ctx.theadEl, _c1$5, 5);
|
|
10243
|
+
i0.ɵɵviewQuerySignal(ctx.scrollEl, _c0$e, 5)(ctx.theadEl, _c1$5, 5)(ctx.editorHost, _c2$2, 5);
|
|
9729
10244
|
} if (rf & 2) {
|
|
9730
|
-
i0.ɵɵqueryAdvance(
|
|
10245
|
+
i0.ɵɵqueryAdvance(3);
|
|
9731
10246
|
} }, hostAttrs: [1, "kpt-data-table"], hostVars: 2, hostBindings: function KptDataTable_HostBindings(rf, ctx) { if (rf & 2) {
|
|
9732
10247
|
i0.ɵɵstyleProp("--%NS%kpt-thead-offset", ctx.theadOffset() + "px");
|
|
9733
|
-
} }, inputs: { columns: [1, "columns"], data: [1, "data"], filterable: [1, "filterable"], filterRowPosition: [1, "filterRowPosition"], pageSize: [1, "pageSize"], pageSizeOptions: [1, "pageSizeOptions"], selectable: [1, "selectable"], loading: [1, "loading"], emptyMessage: [1, "emptyMessage"], rowKey: [1, "rowKey"], scrollHeight: [1, "scrollHeight"], virtualScroll: [1, "virtualScroll"], rowHeight: [1, "rowHeight"], reorderable: [1, "reorderable"], exportable: [1, "exportable"], exportFilename: [1, "exportFilename"], lazy: [1, "lazy"], totalRecords: [1, "totalRecords"], expandable: [1, "expandable"], multiExpand: [1, "multiExpand"], selection: [1, "selection"], expandedRows: [1, "expandedRows"] }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", rowClick: "rowClick", lazyLoad: "lazyLoad" }, decls: 24, vars: 13, consts: [["scrollEl", ""], ["theadEl", ""], ["rowTpl", ""], ["filterRowTpl", ""], [1, "kpt-data-table__toolbar"], [1, "kpt-data-table__scroll", 3, "scroll"], [1, "kpt-data-table__table"], [3, "ngTemplateOutlet"], [1, "kpt-data-table__expander", 3, "kpt-data-table__cell--frozen", "left"], [1, "kpt-data-table__checkbox", 3, "kpt-data-table__cell--frozen", "left"], [3, "width", "left", "kpt-data-table__cell--frozen", "kpt-data-table__th--sortable", "kpt-data-table__th--draggable", "kpt-data-table__th--dragover"], [
|
|
9734
|
-
i0.ɵɵ
|
|
9735
|
-
i0.ɵɵ
|
|
10248
|
+
} }, inputs: { columns: [1, "columns"], data: [1, "data"], filterable: [1, "filterable"], filterRowPosition: [1, "filterRowPosition"], pageSize: [1, "pageSize"], pageSizeOptions: [1, "pageSizeOptions"], selectable: [1, "selectable"], loading: [1, "loading"], emptyMessage: [1, "emptyMessage"], rowKey: [1, "rowKey"], scrollHeight: [1, "scrollHeight"], virtualScroll: [1, "virtualScroll"], rowHeight: [1, "rowHeight"], reorderable: [1, "reorderable"], exportable: [1, "exportable"], exportFilename: [1, "exportFilename"], lazy: [1, "lazy"], totalRecords: [1, "totalRecords"], expandable: [1, "expandable"], multiExpand: [1, "multiExpand"], selection: [1, "selection"], expandedRows: [1, "expandedRows"], hiddenFields: [1, "hiddenFields"] }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", hiddenFields: "hiddenFieldsChange", rowClick: "rowClick", lazyLoad: "lazyLoad", cellEdit: "cellEdit" }, ngContentSelectors: _c4, decls: 24, vars: 13, consts: [["scrollEl", ""], ["theadEl", ""], ["rowTpl", ""], ["filterRowTpl", ""], ["editorHost", ""], [1, "kpt-data-table__toolbar"], [1, "kpt-data-table__scroll", 3, "scroll"], [1, "kpt-data-table__table"], [3, "ngTemplateOutlet"], [1, "kpt-data-table__expander", 3, "kpt-data-table__cell--frozen", "left"], [1, "kpt-data-table__checkbox", 3, "kpt-data-table__cell--frozen", "left"], [3, "width", "left", "kpt-data-table__cell--frozen", "kpt-data-table__th--sortable", "kpt-data-table__th--draggable", "kpt-data-table__th--dragover"], [1, "kpt-data-table__pager"], ["type", "search", 1, "kpt-data-table__filter", 3, "value"], ["variant", "outline", "size", "sm"], ["type", "search", 1, "kpt-data-table__filter", 3, "input", "value"], ["variant", "outline", "size", "sm", 3, "click"], [1, "kpt-data-table__expander"], [1, "kpt-data-table__checkbox"], ["type", "checkbox", 3, "change", "checked", "indeterminate"], [3, "click", "dragstart", "dragover", "drop", "dragend"], ["name", "grip-vertical", 1, "kpt-data-table__grip"], [1, "kpt-data-table__sort", 3, "kpt-data-table__sort--active", "name"], [1, "kpt-data-table__sort", 3, "name"], [1, "kpt-data-table__state"], ["aria-hidden", "true", 1, "kpt-data-table__spacer"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "click"], [3, "left", "kpt-data-table__cell--frozen", "kpt-data-table__cell--editable"], [1, "kpt-data-table__detail-row"], ["type", "button", 1, "kpt-data-table__expander-btn", 3, "click"], ["name", "chevron-right"], ["type", "checkbox", 3, "click", "change", "checked"], [3, "click", "keydown.enter"], [1, "kpt-data-table__editor"], [1, "kpt-data-table__editor", 3, "click", "focusout"], [3, "value", "placeholder"], [3, "value", "min", "max", "step"], [3, "value", "open"], [3, "options", "placeholder", "value", "open"], ["multiple", "", "filter", "", 3, "options", "placeholder", "value", "open"], [3, "valueChange", "keydown.enter", "keydown.escape", "value", "placeholder"], [3, "valueChange", "keydown.enter", "keydown.escape", "value", "min", "max", "step"], [3, "valueChange", "openChange", "value", "open"], [3, "valueChange", "openChange", "options", "placeholder", "value", "open"], ["multiple", "", "filter", "", 3, "valueChange", "openChange", "options", "placeholder", "value", "open"], [1, "kpt-data-table__detail"], [1, "kpt-data-table__filter-row"], [3, "width", "left", "kpt-data-table__cell--frozen"], ["type", "search", 1, "kpt-data-table__fcell", 3, "value"], ["type", "text", "inputmode", "numeric", 1, "kpt-data-table__fcell", 3, "value"], ["filter", "", 3, "options", "multiple", "placeholder", "value"], [1, "kpt-data-table__frange"], [1, "kpt-data-table__fslider"], [3, "placeholder", "value"], ["type", "search", 1, "kpt-data-table__fcell", 3, "input", "click", "value"], ["type", "text", "inputmode", "numeric", 1, "kpt-data-table__fcell", 3, "input", "click", "value"], ["filter", "", 3, "valueChange", "options", "multiple", "placeholder", "value"], [1, "kpt-data-table__fslider", 3, "click"], ["range", "", "showValue", "", 3, "valueChange", "min", "max", "step", "value"], [3, "valueChange", "placeholder", "value"], [3, "pageIndexChange", "pageSizeChange", "length", "pageIndex", "pageSize", "pageSizeOptions"]], template: function KptDataTable_Template(rf, ctx) { if (rf & 1) {
|
|
10249
|
+
i0.ɵɵprojectionDef(_c3);
|
|
10250
|
+
i0.ɵɵconditionalCreate(0, KptDataTable_Conditional_0_Template, 3, 2, "div", 5);
|
|
10251
|
+
i0.ɵɵelementStart(1, "div", 6, 0);
|
|
9736
10252
|
i0.ɵɵlistener("scroll", function KptDataTable_Template_div_scroll_1_listener($event) { return ctx.onScroll($event); });
|
|
9737
|
-
i0.ɵɵelementStart(3, "table",
|
|
9738
|
-
i0.ɵɵconditionalCreate(6, KptDataTable_Conditional_6_Template, 1, 1, "ng-container",
|
|
10253
|
+
i0.ɵɵelementStart(3, "table", 7)(4, "thead", null, 1);
|
|
10254
|
+
i0.ɵɵconditionalCreate(6, KptDataTable_Conditional_6_Template, 1, 1, "ng-container", 8);
|
|
9739
10255
|
i0.ɵɵelementStart(7, "tr");
|
|
9740
|
-
i0.ɵɵconditionalCreate(8, KptDataTable_Conditional_8_Template, 1, 4, "th",
|
|
9741
|
-
i0.ɵɵconditionalCreate(9, KptDataTable_Conditional_9_Template, 2, 7, "th",
|
|
9742
|
-
i0.ɵɵrepeaterCreate(11, KptDataTable_For_12_Template, 5, 18, "th",
|
|
10256
|
+
i0.ɵɵconditionalCreate(8, KptDataTable_Conditional_8_Template, 1, 4, "th", 9);
|
|
10257
|
+
i0.ɵɵconditionalCreate(9, KptDataTable_Conditional_9_Template, 2, 7, "th", 10)(10, KptDataTable_Conditional_10_Template, 1, 4, "th", 10);
|
|
10258
|
+
i0.ɵɵrepeaterCreate(11, KptDataTable_For_12_Template, 5, 18, "th", 11, _forTrack0$1);
|
|
9743
10259
|
i0.ɵɵelementEnd();
|
|
9744
|
-
i0.ɵɵconditionalCreate(13, KptDataTable_Conditional_13_Template, 1, 1, "ng-container",
|
|
10260
|
+
i0.ɵɵconditionalCreate(13, KptDataTable_Conditional_13_Template, 1, 1, "ng-container", 8);
|
|
9745
10261
|
i0.ɵɵelementEnd();
|
|
9746
10262
|
i0.ɵɵelementStart(14, "tbody");
|
|
9747
10263
|
i0.ɵɵconditionalCreate(15, KptDataTable_Conditional_15_Template, 3, 2, "tr")(16, KptDataTable_Conditional_16_Template, 3, 2, "tr")(17, KptDataTable_Conditional_17_Template, 4, 2)(18, KptDataTable_Conditional_18_Template, 2, 0);
|
|
9748
10264
|
i0.ɵɵelementEnd()()();
|
|
9749
10265
|
i0.ɵɵtemplate(19, KptDataTable_ng_template_19_Template, 6, 9, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(21, KptDataTable_ng_template_21_Template, 5, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
|
|
9750
|
-
i0.ɵɵconditionalCreate(23, KptDataTable_Conditional_23_Template,
|
|
10266
|
+
i0.ɵɵconditionalCreate(23, KptDataTable_Conditional_23_Template, 3, 4, "div", 12);
|
|
9751
10267
|
} if (rf & 2) {
|
|
9752
10268
|
i0.ɵɵconditional(ctx.filterable() || ctx.exportable() ? 0 : -1);
|
|
9753
10269
|
i0.ɵɵadvance();
|
|
@@ -9761,23 +10277,43 @@ class KptDataTable {
|
|
|
9761
10277
|
i0.ɵɵadvance();
|
|
9762
10278
|
i0.ɵɵconditional(ctx.selectable() === "multiple" ? 9 : ctx.selectable() === "single" ? 10 : -1);
|
|
9763
10279
|
i0.ɵɵadvance(2);
|
|
9764
|
-
i0.ɵɵrepeater(ctx.
|
|
10280
|
+
i0.ɵɵrepeater(ctx.visibleOrderedColumns());
|
|
9765
10281
|
i0.ɵɵadvance(2);
|
|
9766
10282
|
i0.ɵɵconditional(ctx.hasColumnFilters() && ctx.filterRowPosition() === "bottom" ? 13 : -1);
|
|
9767
10283
|
i0.ɵɵadvance(2);
|
|
9768
10284
|
i0.ɵɵconditional(ctx.loading() ? 15 : ctx.displayCount() === 0 ? 16 : ctx.virtualScroll() ? 17 : 18);
|
|
9769
10285
|
i0.ɵɵadvance(8);
|
|
9770
10286
|
i0.ɵɵconditional(ctx.pageSize() > 0 && !ctx.virtualScroll() ? 23 : -1);
|
|
9771
|
-
} }, dependencies: [NgTemplateOutlet,
|
|
10287
|
+
} }, dependencies: [NgTemplateOutlet,
|
|
10288
|
+
KptButton,
|
|
10289
|
+
KptIcon,
|
|
10290
|
+
KptPaginator,
|
|
10291
|
+
KptSelect,
|
|
10292
|
+
KptDateRange,
|
|
10293
|
+
KptSlider,
|
|
10294
|
+
KptInput,
|
|
10295
|
+
KptInputNumber,
|
|
10296
|
+
KptDatepicker], styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--%NS%kpt-table-bg);color:var(--%NS%kpt-table-fg);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border);border-radius:var(--%NS%kpt-table-radius, .75rem);overflow:hidden;flex-grow:1}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-3, .75rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--%NS%kpt-space-3, .75rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__pager{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-table__pager [kptPaginatorActions]{margin-inline-start:.5rem}.kpt-data-table__pager kpt-paginator{flex:1 1 auto;min-width:0}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--%NS%kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--%NS%kpt-table-header-bg);color:var(--%NS%kpt-table-header-fg);font-weight:var(--%NS%kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--%NS%kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--%NS%kpt-space-2, .5rem);font-weight:var(--%NS%kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--%NS%kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--%NS%sortable:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-data-table__cell--editable{cursor:pointer}.kpt-data-table__cell--%NS%editable:hover{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__cell--%NS%editable:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:-2px}.kpt-data-table__editor{display:block;min-width:8rem}.kpt-data-table__editor .kpt-input-number-host{max-width:6.5rem}.kpt-data-table__editor .kpt-input-number__btn{width:1.75rem}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--%NS%draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--%NS%kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--%NS%kpt-color-on-primary);transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:transparent;color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--%NS%kpt-table-row-hover);color:var(--%NS%kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--%NS%kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-table-detail-bg, var(--%NS%kpt-color-surface-variant, var(--%NS%kpt-table-row-hover)));border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border);box-shadow:inset 3px 0 0 0 var(--%NS%kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--%NS%kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--%NS%kpt-table-bg);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--%NS%kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--%NS%kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--%NS%kpt-table-row-selected)}.kpt-data-table__state{padding:var(--%NS%kpt-space-8, 2rem)!important;text-align:center!important;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], encapsulation: 2 }); }
|
|
9772
10297
|
}
|
|
9773
10298
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDataTable, [{
|
|
9774
10299
|
type: Component,
|
|
9775
|
-
args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
10300
|
+
args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
10301
|
+
NgTemplateOutlet,
|
|
10302
|
+
KptButton,
|
|
10303
|
+
KptIcon,
|
|
10304
|
+
KptPaginator,
|
|
10305
|
+
KptSelect,
|
|
10306
|
+
KptDateRange,
|
|
10307
|
+
KptSlider,
|
|
10308
|
+
KptInput,
|
|
10309
|
+
KptInputNumber,
|
|
10310
|
+
KptDatepicker,
|
|
10311
|
+
], host: {
|
|
9776
10312
|
'class': 'kpt-data-table',
|
|
9777
10313
|
'[style.--kpt-thead-offset]': "theadOffset() + 'px'",
|
|
9778
|
-
}, template: "@if (filterable() || exportable()) {\n <div class=\"kpt-data-table__toolbar\">\n @if (filterable()) {\n <input\n class=\"kpt-data-table__filter\"\n type=\"search\"\n [attr.placeholder]=\"i18n.t('dataTable.search')\"\n [value]=\"filterText()\"\n (input)=\"onFilter($event)\"\n />\n }\n @if (exportable()) {\n <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">{{ i18n.t('dataTable.exportCsv') }}</kpt-button>\n }\n </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n <table\n class=\"kpt-data-table__table\"\n [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n >\n <thead #theadEl>\n @if (hasColumnFilters() && filterRowPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n }\n <tr>\n @if (hasRowDetail()) {\n <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n }\n @if (selectable() === 'multiple') {\n <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n <input\n type=\"checkbox\"\n [checked]=\"pageAllSelected()\"\n [indeterminate]=\"pageSomeSelected()\"\n (change)=\"toggleAllOnPage()\"\n [attr.aria-label]=\"i18n.t('dataTable.selectAll')\"\n />\n </th>\n } @else if (selectable() === 'single') {\n <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n }\n @for (col of orderedColumns(); track col.field; let i = $index) {\n <th\n [attr.draggable]=\"isColDraggable(col) ? true : null\"\n [style.width]=\"col.width\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [attr.data-align]=\"col.align ?? 'start'\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n [class.kpt-data-table__th--sortable]=\"col.sortable\"\n [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n [attr.aria-sort]=\"ariaSort(col)\"\n (click)=\"toggleSort(col)\"\n (dragstart)=\"onColDragStart(i, $event)\"\n (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n (dragend)=\"onColDragEnd()\"\n >\n @if (isColDraggable(col)) {\n <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n }\n <span>{{ col.header }}</span>\n @if (col.sortable) {\n <kpt-icon\n class=\"kpt-data-table__sort\"\n [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n [name]=\"sortIconName(col)\"\n />\n }\n </th>\n }\n </tr>\n @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n }\n </thead>\n <tbody>\n @if (loading()) {\n <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ i18n.t('dataTable.loading') }}</td></tr>\n } @else if (displayCount() === 0) {\n <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyText() }}</td></tr>\n } @else if (virtualScroll()) {\n @if (topPad() > 0) {\n <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n }\n @for (row of virtualRows(); track trackRow(row)) {\n <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n }\n @if (bottomPad() > 0) {\n <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n }\n } @else {\n @for (row of paged(); track trackRow(row)) {\n <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n }\n }\n </tbody>\n </table>\n</div>\n\n<ng-template #rowTpl let-row>\n <tr\n [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n (click)=\"onRowClick(row)\"\n >\n @if (hasRowDetail()) {\n <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n <button\n type=\"button\"\n class=\"kpt-data-table__expander-btn\"\n [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n [attr.aria-expanded]=\"isExpanded(row)\"\n [attr.aria-label]=\"i18n.t('dataTable.expandRow')\"\n (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n >\n <kpt-icon name=\"chevron-right\" />\n </button>\n </td>\n }\n @if (selectable() !== 'none') {\n <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleRow(row)\"\n [attr.aria-label]=\"i18n.t('dataTable.selectRow')\"\n />\n </td>\n }\n @for (col of orderedColumns(); track col.field) {\n <td\n [attr.data-align]=\"col.align ?? 'start'\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n >\n @if (cellTemplate(col.field); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n />\n } @else {\n {{ getValue(row, col.field) }}\n }\n </td>\n }\n </tr>\n @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n <tr class=\"kpt-data-table__detail-row\">\n <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n </td>\n </tr>\n }\n</ng-template>\n\n<ng-template #filterRowTpl>\n <tr class=\"kpt-data-table__filter-row\">\n @if (hasRowDetail()) {\n <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n }\n @if (selectable() !== 'none') {\n <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n }\n @for (col of orderedColumns(); track col.field) {\n <th\n [style.width]=\"col.width\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [attr.data-align]=\"col.align ?? 'start'\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n >\n @switch (col.filter?.type) {\n @case ('text') {\n <input\n class=\"kpt-data-table__fcell\"\n type=\"search\"\n [attr.placeholder]=\"col.filter.placeholder || ''\"\n [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n [value]=\"$any(columnFilters()[col.field]) || ''\"\n (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n @case ('number') {\n <input\n class=\"kpt-data-table__fcell\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.placeholder]=\"col.filter.placeholder || ''\"\n [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n [value]=\"$any(columnFilters()[col.field]) || ''\"\n (input)=\"onNumberFilter(col.field, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n @case ('select') {\n <kpt-select\n [options]=\"col.filter.options || []\"\n [multiple]=\"!!col.filter.multiple\"\n filter\n [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.all')\"\n [value]=\"columnFilters()[col.field] ?? null\"\n (valueChange)=\"setColumnFilter(col.field, $event)\"\n />\n }\n @case ('numberRange') {\n <div class=\"kpt-data-table__frange\">\n <input\n class=\"kpt-data-table__fcell\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.placeholder]=\"i18n.t('dataTable.min')\"\n [attr.aria-label]=\"i18n.t('dataTable.filterMin', { column: col.header })\"\n [value]=\"rangeVal(col.field).min\"\n (input)=\"setRangeFilter(col.field, 'min', $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <input\n class=\"kpt-data-table__fcell\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.placeholder]=\"i18n.t('dataTable.max')\"\n [attr.aria-label]=\"i18n.t('dataTable.filterMax', { column: col.header })\"\n [value]=\"rangeVal(col.field).max\"\n (input)=\"setRangeFilter(col.field, 'max', $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n @case ('slider') {\n <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n <kpt-slider\n range\n [min]=\"col.filter.min ?? 0\"\n [max]=\"col.filter.max ?? 100\"\n [step]=\"col.filter.step ?? 1\"\n [value]=\"sliderVal(col)\"\n (valueChange)=\"setColumnFilter(col.field, $event)\"\n showValue\n />\n </div>\n }\n @case ('dateRange') {\n <kpt-date-range\n [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.dateRange')\"\n [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n (valueChange)=\"setColumnFilter(col.field, $event)\"\n />\n }\n }\n </th>\n }\n </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n <kpt-paginator\n [length]=\"filteredCount()\"\n [pageIndex]=\"pageIndex()\"\n (pageIndexChange)=\"pageIndex.set($event)\"\n [pageSize]=\"pageSizeState()\"\n (pageSizeChange)=\"pageSizeState.set($event)\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
|
|
9779
|
-
}], () => [], { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterRowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRowPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], multiExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiExpand", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] }); })();
|
|
9780
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber:
|
|
10314
|
+
}, template: "@if (filterable() || exportable()) {\n <div class=\"kpt-data-table__toolbar\">\n @if (filterable()) {\n <input\n class=\"kpt-data-table__filter\"\n type=\"search\"\n [attr.placeholder]=\"i18n.t('dataTable.search')\"\n [value]=\"filterText()\"\n (input)=\"onFilter($event)\"\n />\n }\n @if (exportable()) {\n <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">{{ i18n.t('dataTable.exportCsv') }}</kpt-button>\n }\n </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n <table\n class=\"kpt-data-table__table\"\n [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n >\n <thead #theadEl>\n @if (hasColumnFilters() && filterRowPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n }\n <tr>\n @if (hasRowDetail()) {\n <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n }\n @if (selectable() === 'multiple') {\n <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n <input\n type=\"checkbox\"\n [checked]=\"pageAllSelected()\"\n [indeterminate]=\"pageSomeSelected()\"\n (change)=\"toggleAllOnPage()\"\n [attr.aria-label]=\"i18n.t('dataTable.selectAll')\"\n />\n </th>\n } @else if (selectable() === 'single') {\n <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n }\n @for (col of visibleOrderedColumns(); track col.field) {\n <th\n [attr.draggable]=\"isColDraggable(col) ? true : null\"\n [style.width]=\"col.width\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [attr.data-align]=\"col.align ?? 'start'\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n [class.kpt-data-table__th--sortable]=\"col.sortable\"\n [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n [class.kpt-data-table__th--dragover]=\"dragField() !== null && dragField() !== col.field && !col.frozen\"\n [attr.aria-sort]=\"ariaSort(col)\"\n (click)=\"toggleSort(col)\"\n (dragstart)=\"onColDragStart(col.field, $event)\"\n (dragover)=\"reorderable() ? onColDragOver(col.field, $event) : null\"\n (drop)=\"reorderable() ? onColDrop(col.field, $event) : null\"\n (dragend)=\"onColDragEnd()\"\n >\n @if (isColDraggable(col)) {\n <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n }\n <span>{{ col.header }}</span>\n @if (col.sortable) {\n <kpt-icon\n class=\"kpt-data-table__sort\"\n [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n [name]=\"sortIconName(col)\"\n />\n }\n </th>\n }\n </tr>\n @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n }\n </thead>\n <tbody>\n @if (loading()) {\n <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ i18n.t('dataTable.loading') }}</td></tr>\n } @else if (displayCount() === 0) {\n <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyText() }}</td></tr>\n } @else if (virtualScroll()) {\n @if (topPad() > 0) {\n <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n }\n @for (row of virtualRows(); track trackRow(row)) {\n <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n }\n @if (bottomPad() > 0) {\n <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n }\n } @else {\n @for (row of paged(); track trackRow(row)) {\n <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n }\n }\n </tbody>\n </table>\n</div>\n\n<ng-template #rowTpl let-row>\n <tr\n [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n (click)=\"onRowClick(row)\"\n >\n @if (hasRowDetail()) {\n <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n <button\n type=\"button\"\n class=\"kpt-data-table__expander-btn\"\n [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n [attr.aria-expanded]=\"isExpanded(row)\"\n [attr.aria-label]=\"i18n.t('dataTable.expandRow')\"\n (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n >\n <kpt-icon name=\"chevron-right\" />\n </button>\n </td>\n }\n @if (selectable() !== 'none') {\n <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n <input\n type=\"checkbox\"\n [checked]=\"isSelected(row)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleRow(row)\"\n [attr.aria-label]=\"i18n.t('dataTable.selectRow')\"\n />\n </td>\n }\n @for (col of visibleOrderedColumns(); track col.field) {\n <td\n [attr.data-align]=\"col.align ?? 'start'\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n [class.kpt-data-table__cell--editable]=\"isEditable(col) && !isEditingCell(row, col.field)\"\n [attr.tabindex]=\"isEditable(col) && !isEditingCell(row, col.field) ? 0 : null\"\n [attr.aria-label]=\"isEditable(col) && !isEditingCell(row, col.field) ? i18n.t('dataTable.editCell', { column: col.header }) : null\"\n (click)=\"isEditable(col) ? startEdit(row, col, $event) : null\"\n (keydown.enter)=\"isEditable(col) && !isEditingCell(row, col.field) ? startEdit(row, col, $event) : null\"\n >\n @if (isEditingCell(row, col.field)) {\n <div\n class=\"kpt-data-table__editor\"\n #editorHost\n (click)=\"$event.stopPropagation()\"\n (focusout)=\"onEditorFocusOut($event)\"\n >\n @if (cellEditTemplate(col.field); as etpl) {\n <ng-container\n [ngTemplateOutlet]=\"etpl\"\n [ngTemplateOutletContext]=\"{ $implicit: editingValue(), row, commit: commitEditValue, cancel: cancelEdit }\"\n />\n } @else {\n @switch (col.edit?.type) {\n @case ('text') {\n <kpt-input\n [value]=\"$any(editingValue()) ?? ''\"\n [placeholder]=\"col.edit.placeholder ?? ''\"\n (valueChange)=\"editingValue.set($event)\"\n (keydown.enter)=\"commitEdit()\"\n (keydown.escape)=\"cancelEdit()\"\n />\n }\n @case ('number') {\n <kpt-input-number\n [value]=\"$any(editingValue())\"\n [min]=\"col.edit.min\"\n [max]=\"col.edit.max\"\n [step]=\"col.edit.step ?? 1\"\n (valueChange)=\"editingValue.set($event)\"\n (keydown.enter)=\"commitEdit()\"\n (keydown.escape)=\"cancelEdit()\"\n />\n }\n @case ('date') {\n <kpt-datepicker\n [value]=\"$any(editingValue()) ?? ''\"\n (valueChange)=\"editingValue.set($event)\"\n [open]=\"editorPanelOpen()\"\n (openChange)=\"onEditorPanelToggle($event)\"\n />\n }\n @case ('select') {\n <kpt-select\n [options]=\"col.edit.options ?? []\"\n [placeholder]=\"col.edit.placeholder ?? ''\"\n [value]=\"editingValue()\"\n (valueChange)=\"editingValue.set($event)\"\n [open]=\"editorPanelOpen()\"\n (openChange)=\"onEditorPanelToggle($event)\"\n />\n }\n @case ('multiselect') {\n <kpt-select\n multiple\n filter\n [options]=\"col.edit.options ?? []\"\n [placeholder]=\"col.edit.placeholder ?? ''\"\n [value]=\"editingValue()\"\n (valueChange)=\"editingValue.set($event)\"\n [open]=\"editorPanelOpen()\"\n (openChange)=\"onEditorPanelToggle($event)\"\n />\n }\n }\n }\n </div>\n } @else if (cellTemplate(col.field); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl\"\n [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n />\n } @else {\n {{ getValue(row, col.field) }}\n }\n </td>\n }\n </tr>\n @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n <tr class=\"kpt-data-table__detail-row\">\n <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n </td>\n </tr>\n }\n</ng-template>\n\n<ng-template #filterRowTpl>\n <tr class=\"kpt-data-table__filter-row\">\n @if (hasRowDetail()) {\n <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n }\n @if (selectable() !== 'none') {\n <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n }\n @for (col of visibleOrderedColumns(); track col.field) {\n <th\n [style.width]=\"col.width\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [attr.data-align]=\"col.align ?? 'start'\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n >\n @switch (col.filter?.type) {\n @case ('text') {\n <input\n class=\"kpt-data-table__fcell\"\n type=\"search\"\n [attr.placeholder]=\"col.filter.placeholder || ''\"\n [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n [value]=\"$any(columnFilters()[col.field]) || ''\"\n (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n @case ('number') {\n <input\n class=\"kpt-data-table__fcell\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.placeholder]=\"col.filter.placeholder || ''\"\n [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n [value]=\"$any(columnFilters()[col.field]) || ''\"\n (input)=\"onNumberFilter(col.field, $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n @case ('select') {\n <kpt-select\n [options]=\"col.filter.options || []\"\n [multiple]=\"!!col.filter.multiple\"\n filter\n [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.all')\"\n [value]=\"columnFilters()[col.field] ?? null\"\n (valueChange)=\"setColumnFilter(col.field, $event)\"\n />\n }\n @case ('numberRange') {\n <div class=\"kpt-data-table__frange\">\n <input\n class=\"kpt-data-table__fcell\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.placeholder]=\"i18n.t('dataTable.min')\"\n [attr.aria-label]=\"i18n.t('dataTable.filterMin', { column: col.header })\"\n [value]=\"rangeVal(col.field).min\"\n (input)=\"setRangeFilter(col.field, 'min', $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n <input\n class=\"kpt-data-table__fcell\"\n type=\"text\"\n inputmode=\"numeric\"\n [attr.placeholder]=\"i18n.t('dataTable.max')\"\n [attr.aria-label]=\"i18n.t('dataTable.filterMax', { column: col.header })\"\n [value]=\"rangeVal(col.field).max\"\n (input)=\"setRangeFilter(col.field, 'max', $event)\"\n (click)=\"$event.stopPropagation()\"\n />\n </div>\n }\n @case ('slider') {\n <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n <kpt-slider\n range\n [min]=\"col.filter.min ?? 0\"\n [max]=\"col.filter.max ?? 100\"\n [step]=\"col.filter.step ?? 1\"\n [value]=\"sliderVal(col)\"\n (valueChange)=\"setColumnFilter(col.field, $event)\"\n showValue\n />\n </div>\n }\n @case ('dateRange') {\n <kpt-date-range\n [placeholder]=\"col.filter.placeholder || i18n.t('dataTable.dateRange')\"\n [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n (valueChange)=\"setColumnFilter(col.field, $event)\"\n />\n }\n }\n </th>\n }\n </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n <div class=\"kpt-data-table__pager\">\n <ng-content select=\"[kptPaginatorActions]\" />\n <kpt-paginator\n [length]=\"filteredCount()\"\n [pageIndex]=\"pageIndex()\"\n (pageIndexChange)=\"pageIndex.set($event)\"\n [pageSize]=\"pageSizeState()\"\n (pageSizeChange)=\"pageSizeState.set($event)\"\n [pageSizeOptions]=\"pageSizeOptions()\"\n />\n </div>\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden;flex-grow:1}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__pager{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__pager [kptPaginatorActions]{margin-inline-start:.5rem}.kpt-data-table__pager kpt-paginator{flex:1 1 auto;min-width:0}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__cell--editable{cursor:pointer}.kpt-data-table__cell--editable:hover{background:var(--kpt-table-row-hover)}.kpt-data-table__cell--editable:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:-2px}.kpt-data-table__editor{display:block;min-width:8rem}.kpt-data-table__editor .kpt-input-number-host{max-width:6.5rem}.kpt-data-table__editor .kpt-input-number__btn{width:1.75rem}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
|
|
10315
|
+
}], () => [], { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterRowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRowPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], multiExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiExpand", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], hiddenFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenFields", required: false }] }, { type: i0.Output, args: ["hiddenFieldsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], cellEditDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellEditDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] }); })();
|
|
10316
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber: 168 }); })();
|
|
9781
10317
|
|
|
9782
10318
|
const _c0$d = a0 => ({ $implicit: a0, level: 0 });
|
|
9783
10319
|
const _c1$4 = (a0, a1) => ({ $implicit: a0, level: a1 });
|
|
@@ -11045,37 +11581,106 @@ function KptMenu_ng_template_3_For_2_Conditional_0_Template(rf, ctx) { if (rf &
|
|
|
11045
11581
|
i0.ɵɵelement(0, "div", 4);
|
|
11046
11582
|
} }
|
|
11047
11583
|
function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
11048
|
-
i0.ɵɵelement(0, "kpt-
|
|
11584
|
+
i0.ɵɵelement(0, "kpt-avatar", 7);
|
|
11049
11585
|
} if (rf & 2) {
|
|
11050
|
-
const
|
|
11051
|
-
i0.ɵɵproperty("name",
|
|
11586
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11587
|
+
i0.ɵɵproperty("src", item_r1.avatar.src ?? null)("name", item_r1.avatar.name ?? "")("icon", item_r1.avatar.icon ?? null);
|
|
11588
|
+
} }
|
|
11589
|
+
function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
11590
|
+
i0.ɵɵelement(0, "kpt-icon", 8);
|
|
11591
|
+
} if (rf & 2) {
|
|
11592
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11593
|
+
i0.ɵɵproperty("name", item_r1.icon);
|
|
11594
|
+
} }
|
|
11595
|
+
function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
11596
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
11597
|
+
i0.ɵɵtext(1);
|
|
11598
|
+
i0.ɵɵelementEnd();
|
|
11599
|
+
} if (rf & 2) {
|
|
11600
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11601
|
+
i0.ɵɵadvance();
|
|
11602
|
+
i0.ɵɵtextInterpolate(item_r1.label);
|
|
11603
|
+
} }
|
|
11604
|
+
function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
11605
|
+
i0.ɵɵelementStart(0, "span", 11);
|
|
11606
|
+
i0.ɵɵtext(1);
|
|
11607
|
+
i0.ɵɵelementEnd();
|
|
11608
|
+
} if (rf & 2) {
|
|
11609
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11610
|
+
i0.ɵɵadvance();
|
|
11611
|
+
i0.ɵɵtextInterpolate(item_r1.description);
|
|
11052
11612
|
} }
|
|
11053
11613
|
function KptMenu_ng_template_3_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
11054
|
-
|
|
11055
|
-
i0.ɵɵ
|
|
11056
|
-
i0.ɵɵ
|
|
11057
|
-
i0.ɵɵconditionalCreate(
|
|
11058
|
-
i0.ɵɵ
|
|
11059
|
-
i0.ɵɵtext(3);
|
|
11614
|
+
i0.ɵɵelementStart(0, "div", 5);
|
|
11615
|
+
i0.ɵɵconditionalCreate(1, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_1_Template, 1, 3, "kpt-avatar", 7)(2, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_2_Template, 1, 1, "kpt-icon", 8);
|
|
11616
|
+
i0.ɵɵelementStart(3, "span", 9);
|
|
11617
|
+
i0.ɵɵconditionalCreate(4, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_4_Template, 2, 1, "span", 10);
|
|
11618
|
+
i0.ɵɵconditionalCreate(5, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_5_Template, 2, 1, "span", 11);
|
|
11060
11619
|
i0.ɵɵelementEnd()();
|
|
11061
11620
|
} if (rf & 2) {
|
|
11062
|
-
const
|
|
11063
|
-
i0.ɵɵclassProp("kpt-menu__item--danger", item_r2.danger);
|
|
11064
|
-
i0.ɵɵproperty("disabled", item_r2.disabled);
|
|
11621
|
+
const item_r1 = i0.ɵɵnextContext().$implicit;
|
|
11065
11622
|
i0.ɵɵadvance();
|
|
11066
|
-
i0.ɵɵconditional(
|
|
11067
|
-
i0.ɵɵadvance(
|
|
11068
|
-
i0.ɵɵ
|
|
11623
|
+
i0.ɵɵconditional(item_r1.avatar ? 1 : item_r1.icon ? 2 : -1);
|
|
11624
|
+
i0.ɵɵadvance(3);
|
|
11625
|
+
i0.ɵɵconditional(item_r1.label ? 4 : -1);
|
|
11626
|
+
i0.ɵɵadvance();
|
|
11627
|
+
i0.ɵɵconditional(item_r1.description ? 5 : -1);
|
|
11628
|
+
} }
|
|
11629
|
+
function KptMenu_ng_template_3_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
11630
|
+
i0.ɵɵelement(0, "kpt-icon", 8);
|
|
11631
|
+
} if (rf & 2) {
|
|
11632
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11633
|
+
i0.ɵɵproperty("name", item_r1.icon);
|
|
11634
|
+
} }
|
|
11635
|
+
function KptMenu_ng_template_3_For_2_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
11636
|
+
i0.ɵɵelementStart(0, "span", 11);
|
|
11637
|
+
i0.ɵɵtext(1);
|
|
11638
|
+
i0.ɵɵelementEnd();
|
|
11639
|
+
} if (rf & 2) {
|
|
11640
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11641
|
+
i0.ɵɵadvance();
|
|
11642
|
+
i0.ɵɵtextInterpolate(item_r1.description);
|
|
11643
|
+
} }
|
|
11644
|
+
function KptMenu_ng_template_3_For_2_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
11645
|
+
i0.ɵɵelement(0, "kpt-badge", 13);
|
|
11646
|
+
} if (rf & 2) {
|
|
11647
|
+
const item_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
11648
|
+
i0.ɵɵproperty("value", item_r1.badge)("variant", item_r1.badgeVariant ?? "primary");
|
|
11649
|
+
} }
|
|
11650
|
+
function KptMenu_ng_template_3_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
11651
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
11652
|
+
i0.ɵɵelementStart(0, "button", 12);
|
|
11653
|
+
i0.ɵɵlistener("click", function KptMenu_ng_template_3_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const item_r1 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pick(item_r1)); });
|
|
11654
|
+
i0.ɵɵconditionalCreate(1, KptMenu_ng_template_3_For_2_Conditional_2_Conditional_1_Template, 1, 1, "kpt-icon", 8);
|
|
11655
|
+
i0.ɵɵelementStart(2, "span", 9)(3, "span", 10);
|
|
11656
|
+
i0.ɵɵtext(4);
|
|
11657
|
+
i0.ɵɵelementEnd();
|
|
11658
|
+
i0.ɵɵconditionalCreate(5, KptMenu_ng_template_3_For_2_Conditional_2_Conditional_5_Template, 2, 1, "span", 11);
|
|
11659
|
+
i0.ɵɵelementEnd();
|
|
11660
|
+
i0.ɵɵconditionalCreate(6, KptMenu_ng_template_3_For_2_Conditional_2_Conditional_6_Template, 1, 2, "kpt-badge", 13);
|
|
11661
|
+
i0.ɵɵelementEnd();
|
|
11662
|
+
} if (rf & 2) {
|
|
11663
|
+
const item_r1 = i0.ɵɵnextContext().$implicit;
|
|
11664
|
+
i0.ɵɵclassProp("kpt-menu__item--danger", item_r1.danger);
|
|
11665
|
+
i0.ɵɵproperty("disabled", item_r1.disabled);
|
|
11666
|
+
i0.ɵɵadvance();
|
|
11667
|
+
i0.ɵɵconditional(item_r1.icon ? 1 : -1);
|
|
11668
|
+
i0.ɵɵadvance(3);
|
|
11669
|
+
i0.ɵɵtextInterpolate(item_r1.label);
|
|
11670
|
+
i0.ɵɵadvance();
|
|
11671
|
+
i0.ɵɵconditional(item_r1.description ? 5 : -1);
|
|
11672
|
+
i0.ɵɵadvance();
|
|
11673
|
+
i0.ɵɵconditional(item_r1.badge !== undefined && item_r1.badge !== null ? 6 : -1);
|
|
11069
11674
|
} }
|
|
11070
11675
|
function KptMenu_ng_template_3_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
11071
|
-
i0.ɵɵconditionalCreate(0, KptMenu_ng_template_3_For_2_Conditional_0_Template, 1, 0, "div", 4)(1, KptMenu_ng_template_3_For_2_Conditional_1_Template,
|
|
11676
|
+
i0.ɵɵconditionalCreate(0, KptMenu_ng_template_3_For_2_Conditional_0_Template, 1, 0, "div", 4)(1, KptMenu_ng_template_3_For_2_Conditional_1_Template, 6, 3, "div", 5)(2, KptMenu_ng_template_3_For_2_Conditional_2_Template, 7, 7, "button", 6);
|
|
11072
11677
|
} if (rf & 2) {
|
|
11073
|
-
const
|
|
11074
|
-
i0.ɵɵconditional(
|
|
11678
|
+
const item_r1 = ctx.$implicit;
|
|
11679
|
+
i0.ɵɵconditional(item_r1.separator ? 0 : item_r1.header ? 1 : 2);
|
|
11075
11680
|
} }
|
|
11076
11681
|
function KptMenu_ng_template_3_Template(rf, ctx) { if (rf & 1) {
|
|
11077
11682
|
i0.ɵɵelementStart(0, "div", 3);
|
|
11078
|
-
i0.ɵɵrepeaterCreate(1, KptMenu_ng_template_3_For_2_Template,
|
|
11683
|
+
i0.ɵɵrepeaterCreate(1, KptMenu_ng_template_3_For_2_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
|
|
11079
11684
|
i0.ɵɵelementEnd();
|
|
11080
11685
|
} if (rf & 2) {
|
|
11081
11686
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
@@ -11117,7 +11722,7 @@ class KptMenu {
|
|
|
11117
11722
|
this.close();
|
|
11118
11723
|
}
|
|
11119
11724
|
static { this.ɵfac = function KptMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMenu)(); }; }
|
|
11120
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMenu, selectors: [["kpt-menu"]], hostAttrs: [1, "kpt-menu-host"], inputs: { items: [1, "items"] }, outputs: { select: "select" }, ngContentSelectors: _c0$5, decls: 4, vars: 4, consts: [["origin", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", 1, "kpt-menu__trigger", 3, "click"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-menu__panel"], ["role", "separator", 1, "kpt-menu__separator"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "kpt-menu__item--danger", "disabled"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "click", "disabled"], [3, "
|
|
11725
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMenu, selectors: [["kpt-menu"]], hostAttrs: [1, "kpt-menu-host"], inputs: { items: [1, "items"] }, outputs: { select: "select" }, ngContentSelectors: _c0$5, decls: 4, vars: 4, consts: [["origin", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", 1, "kpt-menu__trigger", 3, "click"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-menu__panel"], ["role", "separator", 1, "kpt-menu__separator"], ["role", "presentation", 1, "kpt-menu__header"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "kpt-menu__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-menu__text"], [1, "kpt-menu__label"], [1, "kpt-menu__description"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "click", "disabled"], [1, "kpt-menu__badge", 3, "value", "variant"]], template: function KptMenu_Template(rf, ctx) { if (rf & 1) {
|
|
11121
11726
|
i0.ɵɵprojectionDef();
|
|
11122
11727
|
i0.ɵɵelementStart(0, "span", 1, 0);
|
|
11123
11728
|
i0.ɵɵlistener("click", function KptMenu_Template_span_click_0_listener() { return ctx.toggle(); });
|
|
@@ -11129,11 +11734,11 @@ class KptMenu {
|
|
|
11129
11734
|
const origin_r4 = i0.ɵɵreference(1);
|
|
11130
11735
|
i0.ɵɵadvance(3);
|
|
11131
11736
|
i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r4)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
|
|
11132
|
-
} }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;padding:.25rem;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--%NS%kpt-color-danger)}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
|
|
11737
|
+
} }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;padding:.25rem;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--%NS%kpt-color-danger)}.kpt-menu__header{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:default}.kpt-menu__header .kpt-menu__label{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-menu__header kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-menu__label,.kpt-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-menu__description{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-menu__badge{margin-inline-start:auto}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
|
|
11133
11738
|
}
|
|
11134
11739
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptMenu, [{
|
|
11135
11740
|
type: Component,
|
|
11136
|
-
args: [{ selector: 'kpt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], template: `
|
|
11741
|
+
args: [{ selector: 'kpt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], template: `
|
|
11137
11742
|
<span class="kpt-menu__trigger" cdkOverlayOrigin #origin="cdkOverlayOrigin" (click)="toggle()">
|
|
11138
11743
|
<ng-content />
|
|
11139
11744
|
</span>
|
|
@@ -11152,6 +11757,23 @@ class KptMenu {
|
|
|
11152
11757
|
@for (item of items(); track $index) {
|
|
11153
11758
|
@if (item.separator) {
|
|
11154
11759
|
<div class="kpt-menu__separator" role="separator"></div>
|
|
11760
|
+
} @else if (item.header) {
|
|
11761
|
+
<div class="kpt-menu__header" role="presentation">
|
|
11762
|
+
@if (item.avatar) {
|
|
11763
|
+
<kpt-avatar
|
|
11764
|
+
[src]="item.avatar.src ?? null"
|
|
11765
|
+
[name]="item.avatar.name ?? ''"
|
|
11766
|
+
[icon]="item.avatar.icon ?? null"
|
|
11767
|
+
size="sm"
|
|
11768
|
+
/>
|
|
11769
|
+
} @else if (item.icon) {
|
|
11770
|
+
<kpt-icon [name]="item.icon" />
|
|
11771
|
+
}
|
|
11772
|
+
<span class="kpt-menu__text">
|
|
11773
|
+
@if (item.label) { <span class="kpt-menu__label">{{ item.label }}</span> }
|
|
11774
|
+
@if (item.description) { <span class="kpt-menu__description">{{ item.description }}</span> }
|
|
11775
|
+
</span>
|
|
11776
|
+
</div>
|
|
11155
11777
|
} @else {
|
|
11156
11778
|
<button
|
|
11157
11779
|
type="button"
|
|
@@ -11162,15 +11784,21 @@ class KptMenu {
|
|
|
11162
11784
|
(click)="pick(item)"
|
|
11163
11785
|
>
|
|
11164
11786
|
@if (item.icon) { <kpt-icon [name]="item.icon" /> }
|
|
11165
|
-
<span
|
|
11787
|
+
<span class="kpt-menu__text">
|
|
11788
|
+
<span class="kpt-menu__label">{{ item.label }}</span>
|
|
11789
|
+
@if (item.description) { <span class="kpt-menu__description">{{ item.description }}</span> }
|
|
11790
|
+
</span>
|
|
11791
|
+
@if (item.badge !== undefined && item.badge !== null) {
|
|
11792
|
+
<kpt-badge class="kpt-menu__badge" [value]="item.badge" [variant]="item.badgeVariant ?? 'primary'" />
|
|
11793
|
+
}
|
|
11166
11794
|
</button>
|
|
11167
11795
|
}
|
|
11168
11796
|
}
|
|
11169
11797
|
</div>
|
|
11170
11798
|
</ng-template>
|
|
11171
|
-
`, host: { class: 'kpt-menu-host' }, styles: ["@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
|
|
11799
|
+
`, host: { class: 'kpt-menu-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-menu__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--kpt-font-size-sm, .875rem);cursor:default}.kpt-menu__header .kpt-menu__label{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-menu__header kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-menu__label,.kpt-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-menu__description{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-menu__badge{margin-inline-start:auto}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
|
|
11172
11800
|
}], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] }); })();
|
|
11173
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber:
|
|
11801
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber: 116 }); })();
|
|
11174
11802
|
|
|
11175
11803
|
const _c0$4 = [[["", "kptPopoverTrigger", ""]], "*"];
|
|
11176
11804
|
const _c1 = ["[kptPopoverTrigger]", "*"];
|
|
@@ -11472,7 +12100,7 @@ class KptDrawer {
|
|
|
11472
12100
|
i0.ɵɵattribute("data-position", ctx.position());
|
|
11473
12101
|
i0.ɵɵadvance();
|
|
11474
12102
|
i0.ɵɵconditional(ctx.header() || ctx.dismissible() ? 2 : -1);
|
|
11475
|
-
} }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4);
|
|
12103
|
+
} }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4);outline:none;inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%);visibility:hidden;--%NS%_kpt-drawer-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--%NS%_kpt-drawer-vis-delay, 0s)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;width:auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;width:auto;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none;visibility:visible;--%NS%_kpt-drawer-vis-delay: 0s}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-4, 1rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-drawer__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--%NS%kpt-space-4, 1rem)}@media(prefers-reduced-motion:reduce){.kpt-drawer__backdrop,.kpt-drawer__panel{transition:none}}}\n"], encapsulation: 2 }); }
|
|
11476
12104
|
}
|
|
11477
12105
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDrawer, [{
|
|
11478
12106
|
type: Component,
|
|
@@ -11497,7 +12125,7 @@ class KptDrawer {
|
|
|
11497
12125
|
}
|
|
11498
12126
|
<div class="kpt-drawer__body"><ng-content /></div>
|
|
11499
12127
|
</aside>
|
|
11500
|
-
`, host: { class: 'kpt-drawer-host' }, styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4);
|
|
12128
|
+
`, host: { class: 'kpt-drawer-host' }, styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4);outline:none;inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%);visibility:hidden;--_kpt-drawer-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--_kpt-drawer-vis-delay, 0s)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;width:auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;width:auto;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none;visibility:visible;--_kpt-drawer-vis-delay: 0s}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-drawer__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--kpt-space-4, 1rem)}@media(prefers-reduced-motion:reduce){.kpt-drawer__backdrop,.kpt-drawer__panel{transition:none}}}\n"] }]
|
|
11501
12129
|
}], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }] }); })();
|
|
11502
12130
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDrawer, { className: "KptDrawer", filePath: "lib/drawer/drawer.component.ts", lineNumber: 45 }); })();
|
|
11503
12131
|
|
|
@@ -11506,33 +12134,102 @@ function KptContextMenu_Conditional_2_For_3_Conditional_0_Template(rf, ctx) { if
|
|
|
11506
12134
|
i0.ɵɵelement(0, "div", 3);
|
|
11507
12135
|
} }
|
|
11508
12136
|
function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
11509
|
-
i0.ɵɵelement(0, "kpt-
|
|
12137
|
+
i0.ɵɵelement(0, "kpt-avatar", 6);
|
|
11510
12138
|
} if (rf & 2) {
|
|
11511
|
-
const
|
|
11512
|
-
i0.ɵɵproperty("name",
|
|
12139
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12140
|
+
i0.ɵɵproperty("src", item_r3.avatar.src ?? null)("name", item_r3.avatar.name ?? "")("icon", item_r3.avatar.icon ?? null);
|
|
12141
|
+
} }
|
|
12142
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
12143
|
+
i0.ɵɵelement(0, "kpt-icon", 7);
|
|
12144
|
+
} if (rf & 2) {
|
|
12145
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12146
|
+
i0.ɵɵproperty("name", item_r3.icon);
|
|
12147
|
+
} }
|
|
12148
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
12149
|
+
i0.ɵɵelementStart(0, "span", 9);
|
|
12150
|
+
i0.ɵɵtext(1);
|
|
12151
|
+
i0.ɵɵelementEnd();
|
|
12152
|
+
} if (rf & 2) {
|
|
12153
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12154
|
+
i0.ɵɵadvance();
|
|
12155
|
+
i0.ɵɵtextInterpolate(item_r3.label);
|
|
12156
|
+
} }
|
|
12157
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
12158
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
12159
|
+
i0.ɵɵtext(1);
|
|
12160
|
+
i0.ɵɵelementEnd();
|
|
12161
|
+
} if (rf & 2) {
|
|
12162
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12163
|
+
i0.ɵɵadvance();
|
|
12164
|
+
i0.ɵɵtextInterpolate(item_r3.description);
|
|
11513
12165
|
} }
|
|
11514
12166
|
function KptContextMenu_Conditional_2_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
11515
|
-
|
|
11516
|
-
i0.ɵɵ
|
|
11517
|
-
i0.ɵɵ
|
|
11518
|
-
i0.ɵɵconditionalCreate(
|
|
11519
|
-
i0.ɵɵ
|
|
11520
|
-
i0.ɵɵtext(3);
|
|
12167
|
+
i0.ɵɵelementStart(0, "div", 4);
|
|
12168
|
+
i0.ɵɵconditionalCreate(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_1_Template, 1, 3, "kpt-avatar", 6)(2, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_2_Template, 1, 1, "kpt-icon", 7);
|
|
12169
|
+
i0.ɵɵelementStart(3, "span", 8);
|
|
12170
|
+
i0.ɵɵconditionalCreate(4, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_4_Template, 2, 1, "span", 9);
|
|
12171
|
+
i0.ɵɵconditionalCreate(5, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_5_Template, 2, 1, "span", 10);
|
|
11521
12172
|
i0.ɵɵelementEnd()();
|
|
11522
12173
|
} if (rf & 2) {
|
|
11523
|
-
const
|
|
11524
|
-
i0.ɵɵclassProp("kpt-context-menu__item--danger", item_r4.danger);
|
|
11525
|
-
i0.ɵɵproperty("disabled", item_r4.disabled);
|
|
12174
|
+
const item_r3 = i0.ɵɵnextContext().$implicit;
|
|
11526
12175
|
i0.ɵɵadvance();
|
|
11527
|
-
i0.ɵɵconditional(
|
|
11528
|
-
i0.ɵɵadvance(
|
|
11529
|
-
i0.ɵɵ
|
|
12176
|
+
i0.ɵɵconditional(item_r3.avatar ? 1 : item_r3.icon ? 2 : -1);
|
|
12177
|
+
i0.ɵɵadvance(3);
|
|
12178
|
+
i0.ɵɵconditional(item_r3.label ? 4 : -1);
|
|
12179
|
+
i0.ɵɵadvance();
|
|
12180
|
+
i0.ɵɵconditional(item_r3.description ? 5 : -1);
|
|
12181
|
+
} }
|
|
12182
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
12183
|
+
i0.ɵɵelement(0, "kpt-icon", 7);
|
|
12184
|
+
} if (rf & 2) {
|
|
12185
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12186
|
+
i0.ɵɵproperty("name", item_r3.icon);
|
|
12187
|
+
} }
|
|
12188
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
12189
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
12190
|
+
i0.ɵɵtext(1);
|
|
12191
|
+
i0.ɵɵelementEnd();
|
|
12192
|
+
} if (rf & 2) {
|
|
12193
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12194
|
+
i0.ɵɵadvance();
|
|
12195
|
+
i0.ɵɵtextInterpolate(item_r3.description);
|
|
12196
|
+
} }
|
|
12197
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
12198
|
+
i0.ɵɵelement(0, "kpt-badge", 12);
|
|
12199
|
+
} if (rf & 2) {
|
|
12200
|
+
const item_r3 = i0.ɵɵnextContext(2).$implicit;
|
|
12201
|
+
i0.ɵɵproperty("value", item_r3.badge)("variant", item_r3.badgeVariant ?? "primary");
|
|
12202
|
+
} }
|
|
12203
|
+
function KptContextMenu_Conditional_2_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
12204
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
12205
|
+
i0.ɵɵelementStart(0, "button", 11);
|
|
12206
|
+
i0.ɵɵlistener("click", function KptContextMenu_Conditional_2_For_3_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const item_r3 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.pick(item_r3)); });
|
|
12207
|
+
i0.ɵɵconditionalCreate(1, KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_1_Template, 1, 1, "kpt-icon", 7);
|
|
12208
|
+
i0.ɵɵelementStart(2, "span", 8)(3, "span", 9);
|
|
12209
|
+
i0.ɵɵtext(4);
|
|
12210
|
+
i0.ɵɵelementEnd();
|
|
12211
|
+
i0.ɵɵconditionalCreate(5, KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_5_Template, 2, 1, "span", 10);
|
|
12212
|
+
i0.ɵɵelementEnd();
|
|
12213
|
+
i0.ɵɵconditionalCreate(6, KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_6_Template, 1, 2, "kpt-badge", 12);
|
|
12214
|
+
i0.ɵɵelementEnd();
|
|
12215
|
+
} if (rf & 2) {
|
|
12216
|
+
const item_r3 = i0.ɵɵnextContext().$implicit;
|
|
12217
|
+
i0.ɵɵclassProp("kpt-context-menu__item--danger", item_r3.danger);
|
|
12218
|
+
i0.ɵɵproperty("disabled", item_r3.disabled);
|
|
12219
|
+
i0.ɵɵadvance();
|
|
12220
|
+
i0.ɵɵconditional(item_r3.icon ? 1 : -1);
|
|
12221
|
+
i0.ɵɵadvance(3);
|
|
12222
|
+
i0.ɵɵtextInterpolate(item_r3.label);
|
|
12223
|
+
i0.ɵɵadvance();
|
|
12224
|
+
i0.ɵɵconditional(item_r3.description ? 5 : -1);
|
|
12225
|
+
i0.ɵɵadvance();
|
|
12226
|
+
i0.ɵɵconditional(item_r3.badge !== undefined && item_r3.badge !== null ? 6 : -1);
|
|
11530
12227
|
} }
|
|
11531
12228
|
function KptContextMenu_Conditional_2_For_3_Template(rf, ctx) { if (rf & 1) {
|
|
11532
|
-
i0.ɵɵconditionalCreate(0, KptContextMenu_Conditional_2_For_3_Conditional_0_Template, 1, 0, "div", 3)(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Template, 4,
|
|
12229
|
+
i0.ɵɵconditionalCreate(0, KptContextMenu_Conditional_2_For_3_Conditional_0_Template, 1, 0, "div", 3)(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Template, 6, 3, "div", 4)(2, KptContextMenu_Conditional_2_For_3_Conditional_2_Template, 7, 7, "button", 5);
|
|
11533
12230
|
} if (rf & 2) {
|
|
11534
|
-
const
|
|
11535
|
-
i0.ɵɵconditional(
|
|
12231
|
+
const item_r3 = ctx.$implicit;
|
|
12232
|
+
i0.ɵɵconditional(item_r3.separator ? 0 : item_r3.header ? 1 : 2);
|
|
11536
12233
|
} }
|
|
11537
12234
|
function KptContextMenu_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
11538
12235
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
@@ -11540,7 +12237,7 @@ function KptContextMenu_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
11540
12237
|
i0.ɵɵlistener("click", function KptContextMenu_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); })("contextmenu", function KptContextMenu_Conditional_2_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.close()); });
|
|
11541
12238
|
i0.ɵɵelementEnd();
|
|
11542
12239
|
i0.ɵɵelementStart(1, "div", 2);
|
|
11543
|
-
i0.ɵɵrepeaterCreate(2, KptContextMenu_Conditional_2_For_3_Template,
|
|
12240
|
+
i0.ɵɵrepeaterCreate(2, KptContextMenu_Conditional_2_For_3_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
|
|
11544
12241
|
i0.ɵɵelementEnd();
|
|
11545
12242
|
} if (rf & 2) {
|
|
11546
12243
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -11585,7 +12282,7 @@ class KptContextMenu {
|
|
|
11585
12282
|
this.close();
|
|
11586
12283
|
}
|
|
11587
12284
|
static { this.ɵfac = function KptContextMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptContextMenu)(); }; }
|
|
11588
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptContextMenu, selectors: [["kpt-context-menu"]], hostAttrs: [1, "kpt-context-menu-host"], inputs: { items: [1, "items"] }, outputs: { select: "select" }, ngContentSelectors: _c0$2, decls: 3, vars: 1, consts: [[1, "kpt-context-menu__area", 3, "contextmenu"], [1, "kpt-context-menu__backdrop", 3, "click", "contextmenu"], ["role", "menu", 1, "kpt-context-menu__panel"], ["role", "separator", 1, "kpt-context-menu__separator"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "kpt-context-menu__item--danger", "disabled"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "click", "disabled"], [3, "
|
|
12285
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptContextMenu, selectors: [["kpt-context-menu"]], hostAttrs: [1, "kpt-context-menu-host"], inputs: { items: [1, "items"] }, outputs: { select: "select" }, ngContentSelectors: _c0$2, decls: 3, vars: 1, consts: [[1, "kpt-context-menu__area", 3, "contextmenu"], [1, "kpt-context-menu__backdrop", 3, "click", "contextmenu"], ["role", "menu", 1, "kpt-context-menu__panel"], ["role", "separator", 1, "kpt-context-menu__separator"], ["role", "presentation", 1, "kpt-context-menu__header"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "kpt-context-menu__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-context-menu__text"], [1, "kpt-context-menu__label"], [1, "kpt-context-menu__description"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "click", "disabled"], [1, "kpt-context-menu__badge", 3, "value", "variant"]], template: function KptContextMenu_Template(rf, ctx) { if (rf & 1) {
|
|
11589
12286
|
i0.ɵɵprojectionDef();
|
|
11590
12287
|
i0.ɵɵelementStart(0, "div", 0);
|
|
11591
12288
|
i0.ɵɵlistener("contextmenu", function KptContextMenu_Template_div_contextmenu_0_listener($event) { return ctx.onContext($event); });
|
|
@@ -11595,11 +12292,11 @@ class KptContextMenu {
|
|
|
11595
12292
|
} if (rf & 2) {
|
|
11596
12293
|
i0.ɵɵadvance(2);
|
|
11597
12294
|
i0.ɵɵconditional(ctx.open() ? 2 : -1);
|
|
11598
|
-
} }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--%NS%kpt-space-1, .25rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-context-menu__separator{height:1px;margin:var(--%NS%kpt-space-1, .25rem) 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
|
|
12295
|
+
} }, dependencies: [KptAvatar, KptBadge, KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--%NS%kpt-space-1, .25rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-context-menu__header{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:default}.kpt-context-menu__header .kpt-context-menu__label{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-context-menu__header kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-context-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-context-menu__label,.kpt-context-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-context-menu__description{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-context-menu__badge{margin-inline-start:auto}.kpt-context-menu__separator{height:1px;margin:var(--%NS%kpt-space-1, .25rem) 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
|
|
11599
12296
|
}
|
|
11600
12297
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptContextMenu, [{
|
|
11601
12298
|
type: Component,
|
|
11602
|
-
args: [{ selector: 'kpt-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
|
|
12299
|
+
args: [{ selector: 'kpt-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptAvatar, KptBadge, KptIcon], template: `
|
|
11603
12300
|
<div class="kpt-context-menu__area" (contextmenu)="onContext($event)">
|
|
11604
12301
|
<ng-content />
|
|
11605
12302
|
</div>
|
|
@@ -11610,6 +12307,25 @@ class KptContextMenu {
|
|
|
11610
12307
|
@for (item of items(); track $index) {
|
|
11611
12308
|
@if (item.separator) {
|
|
11612
12309
|
<div class="kpt-context-menu__separator" role="separator"></div>
|
|
12310
|
+
} @else if (item.header) {
|
|
12311
|
+
<div class="kpt-context-menu__header" role="presentation">
|
|
12312
|
+
@if (item.avatar) {
|
|
12313
|
+
<kpt-avatar
|
|
12314
|
+
[src]="item.avatar.src ?? null"
|
|
12315
|
+
[name]="item.avatar.name ?? ''"
|
|
12316
|
+
[icon]="item.avatar.icon ?? null"
|
|
12317
|
+
size="sm"
|
|
12318
|
+
/>
|
|
12319
|
+
} @else if (item.icon) {
|
|
12320
|
+
<kpt-icon [name]="item.icon" />
|
|
12321
|
+
}
|
|
12322
|
+
<span class="kpt-context-menu__text">
|
|
12323
|
+
@if (item.label) { <span class="kpt-context-menu__label">{{ item.label }}</span> }
|
|
12324
|
+
@if (item.description) {
|
|
12325
|
+
<span class="kpt-context-menu__description">{{ item.description }}</span>
|
|
12326
|
+
}
|
|
12327
|
+
</span>
|
|
12328
|
+
</div>
|
|
11613
12329
|
} @else {
|
|
11614
12330
|
<button
|
|
11615
12331
|
type="button"
|
|
@@ -11620,15 +12336,27 @@ class KptContextMenu {
|
|
|
11620
12336
|
(click)="pick(item)"
|
|
11621
12337
|
>
|
|
11622
12338
|
@if (item.icon) { <kpt-icon [name]="item.icon" /> }
|
|
11623
|
-
<span
|
|
12339
|
+
<span class="kpt-context-menu__text">
|
|
12340
|
+
<span class="kpt-context-menu__label">{{ item.label }}</span>
|
|
12341
|
+
@if (item.description) {
|
|
12342
|
+
<span class="kpt-context-menu__description">{{ item.description }}</span>
|
|
12343
|
+
}
|
|
12344
|
+
</span>
|
|
12345
|
+
@if (item.badge !== undefined && item.badge !== null) {
|
|
12346
|
+
<kpt-badge
|
|
12347
|
+
class="kpt-context-menu__badge"
|
|
12348
|
+
[value]="item.badge"
|
|
12349
|
+
[variant]="item.badgeVariant ?? 'primary'"
|
|
12350
|
+
/>
|
|
12351
|
+
}
|
|
11624
12352
|
</button>
|
|
11625
12353
|
}
|
|
11626
12354
|
}
|
|
11627
12355
|
</div>
|
|
11628
12356
|
}
|
|
11629
|
-
`, host: { class: 'kpt-context-menu-host' }, styles: ["@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--kpt-color-danger)}.kpt-context-menu__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}}\n"] }]
|
|
12357
|
+
`, host: { class: 'kpt-context-menu-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--kpt-color-danger)}.kpt-context-menu__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:default}.kpt-context-menu__header .kpt-context-menu__label{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-context-menu__header kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-context-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-context-menu__label,.kpt-context-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-context-menu__description{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-context-menu__badge{margin-inline-start:auto}.kpt-context-menu__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}}\n"] }]
|
|
11630
12358
|
}], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] }); })();
|
|
11631
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptContextMenu, { className: "KptContextMenu", filePath: "lib/context-menu/context-menu.component.ts", lineNumber:
|
|
12359
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptContextMenu, { className: "KptContextMenu", filePath: "lib/context-menu/context-menu.component.ts", lineNumber: 82 }); })();
|
|
11632
12360
|
|
|
11633
12361
|
function KptMenubar_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
11634
12362
|
i0.ɵɵelement(0, "kpt-icon", 4);
|
|
@@ -12161,7 +12889,7 @@ class KptBottomSheet {
|
|
|
12161
12889
|
i0.ɵɵattribute("aria-label", ctx.i18n.t("common.close"));
|
|
12162
12890
|
i0.ɵɵadvance();
|
|
12163
12891
|
i0.ɵɵconditional(ctx.header() ? 3 : -1);
|
|
12164
|
-
} }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);border-radius:var(--%NS%kpt-radius-lg, .75rem) var(--%NS%kpt-radius-lg, .75rem) 0 0;box-shadow:var(--%NS%kpt-elevation-4);transform:translateY(100%);transition:transform .25s ease}.kpt-bottom-sheet__panel.is-open{transform:none}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--%NS%kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--%NS%kpt-color-border-strong, var(--%NS%kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--%NS%kpt-font-weight-semibold, 600);margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}}\n"], encapsulation: 2 }); }
|
|
12892
|
+
} }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);border-radius:var(--%NS%kpt-radius-lg, .75rem) var(--%NS%kpt-radius-lg, .75rem) 0 0;box-shadow:var(--%NS%kpt-elevation-4);transform:translateY(100%);visibility:hidden;--%NS%_kpt-bottom-sheet-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--%NS%_kpt-bottom-sheet-vis-delay, 0s)}.kpt-bottom-sheet__panel.is-open{transform:none;visibility:visible;--%NS%_kpt-bottom-sheet-vis-delay: 0s}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--%NS%kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--%NS%kpt-color-border-strong, var(--%NS%kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--%NS%kpt-font-weight-semibold, 600);margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}@media(prefers-reduced-motion:reduce){.kpt-bottom-sheet__backdrop,.kpt-bottom-sheet__panel{transition:none}}}\n"], encapsulation: 2 }); }
|
|
12165
12893
|
}
|
|
12166
12894
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBottomSheet, [{
|
|
12167
12895
|
type: Component,
|
|
@@ -12172,7 +12900,7 @@ class KptBottomSheet {
|
|
|
12172
12900
|
@if (header()) { <div class="kpt-bottom-sheet__header">{{ header() }}</div> }
|
|
12173
12901
|
<div class="kpt-bottom-sheet__body"><ng-content /></div>
|
|
12174
12902
|
</div>
|
|
12175
|
-
`, host: { class: 'kpt-bottom-sheet-host' }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--kpt-space-2, .5rem) var(--kpt-space-4, 1rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);border-radius:var(--kpt-radius-lg, .75rem) var(--kpt-radius-lg, .75rem) 0 0;box-shadow:var(--kpt-elevation-4);transform:translateY(100%);transition:transform .25s ease}.kpt-bottom-sheet__panel.is-open{transform:none}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--kpt-color-border-strong, var(--kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:var(--kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}}\n"] }]
|
|
12903
|
+
`, host: { class: 'kpt-bottom-sheet-host' }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--kpt-space-2, .5rem) var(--kpt-space-4, 1rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);border-radius:var(--kpt-radius-lg, .75rem) var(--kpt-radius-lg, .75rem) 0 0;box-shadow:var(--kpt-elevation-4);transform:translateY(100%);visibility:hidden;--_kpt-bottom-sheet-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--_kpt-bottom-sheet-vis-delay, 0s)}.kpt-bottom-sheet__panel.is-open{transform:none;visibility:visible;--_kpt-bottom-sheet-vis-delay: 0s}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--kpt-color-border-strong, var(--kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:var(--kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}@media(prefers-reduced-motion:reduce){.kpt-bottom-sheet__backdrop,.kpt-bottom-sheet__panel{transition:none}}}\n"] }]
|
|
12176
12904
|
}], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }] }); })();
|
|
12177
12905
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBottomSheet, { className: "KptBottomSheet", filePath: "lib/bottom-sheet/bottom-sheet.component.ts", lineNumber: 27 }); })();
|
|
12178
12906
|
|
|
@@ -12303,5 +13031,5 @@ class KptSpeedDial {
|
|
|
12303
13031
|
* Generated bundle index. Do not edit.
|
|
12304
13032
|
*/
|
|
12305
13033
|
|
|
12306
|
-
export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, renderKptIconSvg };
|
|
13034
|
+
export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, renderKptIconSvg };
|
|
12307
13035
|
//# sourceMappingURL=konce-pt-angular.mjs.map
|