@konce-pt/angular 0.8.1 → 0.8.3

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.
Files changed (18) hide show
  1. package/CHANGELOG.md +101 -0
  2. package/README.md +23 -1
  3. package/charts/src/lib/llms.txt +6 -0
  4. package/fesm2022/konce-pt-angular-charts.mjs.map +1 -1
  5. package/fesm2022/konce-pt-angular-icons.mjs +25 -3
  6. package/fesm2022/konce-pt-angular-icons.mjs.map +1 -1
  7. package/fesm2022/konce-pt-angular.mjs +119 -46
  8. package/fesm2022/konce-pt-angular.mjs.map +1 -1
  9. package/package.json +8 -8
  10. package/src/lib/app-shell/llms.txt +6 -0
  11. package/src/lib/card/llms.txt +6 -0
  12. package/src/lib/icon/llms.txt +37 -9
  13. package/src/lib/menu/llms.txt +9 -1
  14. package/src/lib/paginator/llms.txt +5 -1
  15. package/types/konce-pt-angular-icons.d.ts +15 -2
  16. package/types/konce-pt-angular-icons.d.ts.map +1 -1
  17. package/types/konce-pt-angular.d.ts +87 -47
  18. package/types/konce-pt-angular.d.ts.map +1 -1
package/fesm2022/konce-pt-angular.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
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, Injector, viewChildren, contentChildren, afterRenderEffect, linkedSignal } from '@angular/core';
2
+ import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, InjectionToken, provideAppInitializer, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, untracked, forwardRef, numberAttribute, viewChild, Directive, afterRenderEffect, TemplateRef, Injector, viewChildren, contentChildren, linkedSignal } from '@angular/core';
3
3
  import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
4
- import { KPT_ICONS, sanitizeSvgFragment, renderKptIconSvg } from '@konce-pt/icons';
4
+ import { KPT_ICONS, toKptIconRecord, sanitizeSvgFragment, renderKptIconSvg } from '@konce-pt/icons';
5
5
  export { renderKptIconSvg } from '@konce-pt/icons';
6
6
  import { KPT_MESSAGES_EN, KPT_MESSAGES_PL, deepMerge, translate, weekdayNames, monthNames } from '@konce-pt/i18n';
7
7
  export { KPT_MESSAGES_EN, KPT_MESSAGES_PL } from '@konce-pt/i18n';
@@ -282,7 +282,9 @@ class KptIconRegistry {
282
282
  this.version = this._version.asReadonly();
283
283
  }
284
284
  /**
285
- * Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`.
285
+ * Rejestruje (lub nadpisuje) ikony. Przyjmuje listę definicji z subpathu Tablera
286
+ * (`[Rocket, LayoutDashboard]`), obiekt definicji (np. `import * as tabler`) albo
287
+ * mapę `{ nazwa: 'inner svg' }` — patrz [[KptIconInput]].
286
288
  *
287
289
  * Treść jest sanityzowana do allowlisty geometrii SVG (`path`/`circle`/`rect`/`g`/`line`/
288
290
  * `polygon`/`polyline`/`ellipse` i ich atrybutów kształtu/stylu) — mimo to `register()` wolno
@@ -290,7 +292,7 @@ class KptIconRegistry {
290
292
  * z danych runtime/CMS/uploadu bez własnej walidacji domenowej wyżej w stosie.
291
293
  */
292
294
  register(icons) {
293
- for (const [name, svg] of Object.entries(icons)) {
295
+ for (const [name, svg] of Object.entries(toKptIconRecord(icons))) {
294
296
  this.icons.set(name, sanitizeSvgFragment(svg));
295
297
  }
296
298
  this._version.update((v) => v + 1);
@@ -728,7 +730,7 @@ class KptSplitButton {
728
730
  i0.ɵɵattribute("aria-label", ctx.i18n.t("splitButton.more"));
729
731
  i0.ɵɵadvance(3);
730
732
  i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r4)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
731
- } }, 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 }); }
733
+ } }, 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-host{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-host{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 }); }
732
734
  }
733
735
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSplitButton, [{
734
736
  type: Component,
@@ -807,10 +809,34 @@ class KptSplitButton {
807
809
  }
808
810
  </div>
809
811
  </ng-template>
810
- `, 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"] }]
812
+ `, 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-host{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-host{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"] }]
811
813
  }], 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"] }], selected: [{ type: i0.Output, args: ["selected"] }] }); })();
812
814
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSplitButton, { className: "KptSplitButton", filePath: "lib/split-button/split-button.component.ts", lineNumber: 101 }); })();
813
815
 
816
+ /**
817
+ * Rejestruje wskazane ikony w [[KptIconRegistry]] — jedno wywołanie, jeden parametr.
818
+ *
819
+ * Stoi w rdzeniu, a nie w subpathu `@konce-pt/angular/icons`, i to jest cała różnica:
820
+ * tamten moduł importuje `KPT_TABLER_ICONS` statycznie, więc każde jego użycie wciąga
821
+ * komplet 5130 ikon (~1,2 MB). Tutaj dane przychodzą argumentem, czyli o zawartości bundla
822
+ * decyduje `import` w aplikacji — a ikony Tablera są osobnymi eksportami, więc bundler
823
+ * zostawia dokładnie te, po które sięgnięto.
824
+ *
825
+ * @example
826
+ * // Produkcja: do bundla wchodzą dwie ikony.
827
+ * import { LayoutDashboard, Rocket } from '@konce-pt/icons/tabler';
828
+ * bootstrapApplication(App, { providers: [provideKptIcons([LayoutDashboard, Rocket])] });
829
+ *
830
+ * @example
831
+ * // Własne ikony aplikacji, dotychczasowy kształt mapy.
832
+ * provideKptIcons({ logo: '<path d="…" />' });
833
+ */
834
+ function provideKptIcons(icons) {
835
+ return provideAppInitializer(() => {
836
+ inject(KptIconRegistry).register(icons);
837
+ });
838
+ }
839
+
814
840
  // Do not edit directly — generated by scripts/gen-tokens.mjs
815
841
  // from @konce-pt/tokens (tokens/primitives/breakpoint.json).
816
842
  /** Progi breakpointów w pikselach — te same wartości, z których korzystają `@media` biblioteki. */
@@ -840,7 +866,10 @@ const KPT_BREAKPOINTS = {
840
866
  */
841
867
  class KptBreakpointObserver {
842
868
  constructor() {
843
- this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
869
+ // Sam `isPlatformBrowser` nie wystarcza: jsdom (testy jednostkowe aplikacji) melduje się jako
870
+ // przeglądarka, ale nie implementuje `matchMedia` — bez sprawdzenia metody pierwszy render
871
+ // komponentu na `KptAppShell` wywala się na TypeError.
872
+ this.canObserve = isPlatformBrowser(inject(PLATFORM_ID)) && typeof window !== 'undefined' && typeof window.matchMedia === 'function';
844
873
  this.destroyRef = inject(DestroyRef);
845
874
  this.cache = new Map();
846
875
  }
@@ -849,7 +878,7 @@ class KptBreakpointObserver {
849
878
  const cached = this.cache.get(query);
850
879
  if (cached)
851
880
  return cached;
852
- const result = this.isBrowser ? this.observe(query) : signal(false).asReadonly();
881
+ const result = this.canObserve ? this.observe(query) : signal(false).asReadonly();
853
882
  this.cache.set(query, result);
854
883
  return result;
855
884
  }
@@ -1177,7 +1206,7 @@ function KptFormField_Conditional_2_Template(rf, ctx) { if (rf & 1) {
1177
1206
  const ctx_r0 = i0.ɵɵnextContext();
1178
1207
  i0.ɵɵattribute("for", ctx_r0.controlId() || null);
1179
1208
  i0.ɵɵadvance();
1180
- i0.ɵɵtextInterpolate1(" ", ctx_r0.label(), " ");
1209
+ i0.ɵɵtextInterpolate(ctx_r0.label());
1181
1210
  i0.ɵɵadvance();
1182
1211
  i0.ɵɵconditional(ctx_r0.required() ? 2 : -1);
1183
1212
  } }
@@ -1289,7 +1318,7 @@ class KptFormField {
1289
1318
  i0.ɵɵconditional(ctx.label() ? 2 : -1);
1290
1319
  i0.ɵɵadvance(3);
1291
1320
  i0.ɵɵconditional(ctx.error() ? 5 : ctx.hint() ? 6 : -1);
1292
- } }, styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-form-field-label)}.kpt-form-field__required{color:var(--%NS%kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--%NS%kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--%NS%kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--%NS%kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--%NS%kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--%NS%kpt-font-weight-normal, 400);color:var(--%NS%kpt-form-field-placeholder);transition:transform 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-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--%NS%kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--%NS%kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], encapsulation: 2 }); }
1321
+ } }, styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-form-field-label)}.kpt-form-field__required{color:var(--%NS%kpt-color-danger);margin-inline-start:.25rem}.kpt-form-field__message{font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--%NS%kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--%NS%kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--%NS%kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--%NS%kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--%NS%kpt-font-weight-normal, 400);color:var(--%NS%kpt-form-field-placeholder);transition:transform 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-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--%NS%kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--%NS%kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], encapsulation: 2 }); }
1293
1322
  }
1294
1323
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFormField, [{
1295
1324
  type: Component,
@@ -1297,7 +1326,7 @@ class KptFormField {
1297
1326
  class: 'kpt-form-field-host',
1298
1327
  '(input)': 'updateFilled()',
1299
1328
  '(change)': 'updateFilled()',
1300
- }, template: "<div\n class=\"kpt-form-field\"\n [class]=\"'kpt-form-field--' + labelType()\"\n [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n [class.kpt-form-field--invalid]=\"!!error()\"\n>\n <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n @if (label()) {\n <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n {{ label() }}\n @if (required()) {\n <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <div class=\"kpt-form-field__control\">\n <ng-content />\n </div>\n </div>\n\n @if (error()) {\n <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n } @else if (hint()) {\n <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
1329
+ }, template: "<div\n class=\"kpt-form-field\"\n [class]=\"'kpt-form-field--' + labelType()\"\n [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n [class.kpt-form-field--invalid]=\"!!error()\"\n>\n <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n @if (label()) {\n <!-- Bez znaku nowej linii wok\u00F3\u0142 `@if`: Angular zostawi\u0142by tam w\u0119ze\u0142 tekstowy ze spacj\u0105,\n przez co gwiazdka odsuwa\u0142aby si\u0119 inaczej ni\u017C w porcie React (JSX taki w\u0119ze\u0142 usuwa).\n Odst\u0119p daje wy\u0142\u0105cznie `margin-inline-start` na `.kpt-form-field__required`. -->\n <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\"\n >{{ label() }}@if (required()) {<span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>}</label\n >\n }\n\n <div class=\"kpt-form-field__control\">\n <ng-content />\n </div>\n </div>\n\n @if (error()) {\n <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n } @else if (hint()) {\n <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.25rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
1301
1330
  }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KPT_FORM_FIELD_CONTROL), { ...{ descendants: true }, isSignal: true }] }] }); })();
1302
1331
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFormField, { className: "KptFormField", filePath: "lib/form-field/form-field.component.ts", lineNumber: 50 }); })();
1303
1332
 
@@ -2051,11 +2080,11 @@ class KptSelect {
2051
2080
  i0.ɵɵconditional(ctx.multiple() && ctx.selectedOptions().length ? 3 : !ctx.multiple() && ctx.filled() ? 4 : 5);
2052
2081
  i0.ɵɵadvance(4);
2053
2082
  i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r9)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayWidth", trigger_r9.elementRef.nativeElement.offsetWidth);
2054
- } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;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-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{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-select.kpt-select--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%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(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-size:var(--%NS%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(--%NS%kpt-color-on-surface-muted);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{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);overflow:hidden;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-select__search{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);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--%NS%kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--%NS%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(--%NS%kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--%NS%kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%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(--%NS%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(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--%NS%kpt-color-on-surface-muted);text-align:center}}\n"], encapsulation: 2 }); }
2083
+ } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;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-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{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-select.kpt-select--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%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(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-size:var(--%NS%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(--%NS%kpt-color-on-surface-muted);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{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);overflow:hidden;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-select__search{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);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--%NS%kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--%NS%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(--%NS%kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--%NS%kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%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(--%NS%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(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-primary);font-size:.7rem}.kpt-select__check .kpt-icon-host{opacity:0}.kpt-select__check.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-select__check.is-on .kpt-icon-host{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--%NS%kpt-color-on-surface-muted);text-align:center}}\n"], encapsulation: 2 }); }
2055
2084
  }
2056
2085
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSelect, [{
2057
2086
  type: Component,
2058
- 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"] }]
2087
+ 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-host{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-host{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
2059
2088
  }], () => [], { 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"] }] }); })();
2060
2089
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 42 }); })();
2061
2090
 
@@ -2970,11 +2999,11 @@ class KptDatepicker {
2970
2999
  i0.ɵɵproperty("name", ctx.selectionMode() === "time" ? "clock" : "calendar");
2971
3000
  i0.ɵɵadvance();
2972
3001
  i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r19)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
2973
- } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;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-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{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-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);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);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__titles{display:flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--%NS%kpt-space-2, .5rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-surface);font:inherit;font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--%NS%kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border-strong);outline-offset:1px}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.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(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--current{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--%NS%kpt-font-size-xs, .75rem);white-space:nowrap}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
3002
+ } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;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-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{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-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);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);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__titles{display:flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--%NS%kpt-space-2, .5rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-surface);font:inherit;font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--%NS%kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border-strong);outline-offset:1px}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.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(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--current{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--%NS%kpt-font-size-xs, .75rem);white-space:nowrap}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
2974
3003
  }
2975
3004
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDatepicker, [{
2976
3005
  type: Component,
2977
- 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]=\"showClock()\" (keydown.escape)=\"close()\">\n @if (showClock()) {\n @if (selectionMode() === 'datetime') {\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 }\n <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n } @else {\n <!-- Nag\u0142\u00F3wek wsp\u00F3lny dla czterech poziom\u00F3w: r\u00F3\u017Cni je tylko tre\u015B\u0107 tytu\u0142u. -->\n <div class=\"kpt-calendar__header\">\n @if (hasNav()) {\n <button type=\"button\" class=\"kpt-calendar__nav\" [disabled]=\"!canPageBack()\" (click)=\"pagePrev()\" [attr.aria-label]=\"navPrevLabel()\"><kpt-icon name=\"chevron-left\" /></button>\n }\n <span class=\"kpt-calendar__titles\">\n @switch (panelView()) {\n @case ('day') {\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('month')\" [attr.aria-label]=\"i18n.t('datepicker.chooseMonth')\">{{ monthName() }}</button>\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('year')\" [attr.aria-label]=\"i18n.t('datepicker.chooseYear')\">{{ viewYear() }}</button>\n }\n @case ('month') {\n @if (selectionMode() === 'month') {\n <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n } @else {\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('year')\" [attr.aria-label]=\"i18n.t('datepicker.chooseYear')\">{{ viewYear() }}</button>\n }\n }\n @case ('year') {\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('decade')\" [attr.aria-label]=\"i18n.t('datepicker.chooseDecade')\">{{ yearRangeLabel() }}</button>\n }\n @case ('decade') {\n <span class=\"kpt-calendar__title\">{{ decadeRangeLabel() }}</span>\n }\n }\n </span>\n @if (hasNav()) {\n <button type=\"button\" class=\"kpt-calendar__nav\" [disabled]=\"!canPageForward()\" (click)=\"pageNext()\" [attr.aria-label]=\"navNextLabel()\"><kpt-icon name=\"chevron-right\" /></button>\n }\n </div>\n\n @switch (panelView()) {\n @case ('day') {\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 @default {\n <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\" [class.kpt-calendar__grid--decades]=\"panelView() === 'decade'\">\n @for (cell of levelCells(); track cell.label) {\n <button\n type=\"button\"\n class=\"kpt-calendar__cell\"\n [class.kpt-calendar__cell--selected]=\"cell.selected\"\n [class.kpt-calendar__cell--current]=\"cell.current\"\n [disabled]=\"cell.disabled\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectCell(cell)\"\n >{{ cell.label }}</button>\n }\n </div>\n }\n }\n\n @if (selectionMode() === 'datetime') {\n <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n <kpt-icon name=\"clock\" />\n <span>{{ timeBarLabel() }}</span>\n </button>\n }\n }\n @if (hasFooter()) {\n <div class=\"kpt-calendar__footer\">\n <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n </div>\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__titles{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);font:inherit;font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border-strong);outline-offset:1px}.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:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.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--current{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.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__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--kpt-font-size-xs, .75rem);white-space:nowrap}.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"] }]
3006
+ 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]=\"showClock()\" (keydown.escape)=\"close()\">\n @if (showClock()) {\n @if (selectionMode() === 'datetime') {\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 }\n <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n } @else {\n <!-- Nag\u0142\u00F3wek wsp\u00F3lny dla czterech poziom\u00F3w: r\u00F3\u017Cni je tylko tre\u015B\u0107 tytu\u0142u. -->\n <div class=\"kpt-calendar__header\">\n @if (hasNav()) {\n <button type=\"button\" class=\"kpt-calendar__nav\" [disabled]=\"!canPageBack()\" (click)=\"pagePrev()\" [attr.aria-label]=\"navPrevLabel()\"><kpt-icon name=\"chevron-left\" /></button>\n }\n <span class=\"kpt-calendar__titles\">\n @switch (panelView()) {\n @case ('day') {\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('month')\" [attr.aria-label]=\"i18n.t('datepicker.chooseMonth')\">{{ monthName() }}</button>\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('year')\" [attr.aria-label]=\"i18n.t('datepicker.chooseYear')\">{{ viewYear() }}</button>\n }\n @case ('month') {\n @if (selectionMode() === 'month') {\n <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n } @else {\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('year')\" [attr.aria-label]=\"i18n.t('datepicker.chooseYear')\">{{ viewYear() }}</button>\n }\n }\n @case ('year') {\n <button type=\"button\" class=\"kpt-calendar__title-btn\" (click)=\"goTo('decade')\" [attr.aria-label]=\"i18n.t('datepicker.chooseDecade')\">{{ yearRangeLabel() }}</button>\n }\n @case ('decade') {\n <span class=\"kpt-calendar__title\">{{ decadeRangeLabel() }}</span>\n }\n }\n </span>\n @if (hasNav()) {\n <button type=\"button\" class=\"kpt-calendar__nav\" [disabled]=\"!canPageForward()\" (click)=\"pageNext()\" [attr.aria-label]=\"navNextLabel()\"><kpt-icon name=\"chevron-right\" /></button>\n }\n </div>\n\n @switch (panelView()) {\n @case ('day') {\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 @default {\n <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\" [class.kpt-calendar__grid--decades]=\"panelView() === 'decade'\">\n @for (cell of levelCells(); track cell.label) {\n <button\n type=\"button\"\n class=\"kpt-calendar__cell\"\n [class.kpt-calendar__cell--selected]=\"cell.selected\"\n [class.kpt-calendar__cell--current]=\"cell.current\"\n [disabled]=\"cell.disabled\"\n [attr.aria-pressed]=\"cell.selected\"\n (click)=\"selectCell(cell)\"\n >{{ cell.label }}</button>\n }\n </div>\n }\n }\n\n @if (selectionMode() === 'datetime') {\n <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n <kpt-icon name=\"clock\" />\n <span>{{ timeBarLabel() }}</span>\n </button>\n }\n }\n @if (hasFooter()) {\n <div class=\"kpt-calendar__footer\">\n <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n </div>\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__titles{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-calendar__title-btn{padding:.25rem var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);font:inherit;font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize;cursor:pointer}.kpt-calendar__title-btn:hover{background:var(--kpt-color-muted-hover)}.kpt-calendar__title-btn:focus-visible{outline:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border-strong);outline-offset:1px}.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:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__nav:disabled{opacity:.3;cursor:not-allowed}.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--current{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.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__grid--decades .kpt-calendar__cell{padding-inline:0;font-size:var(--kpt-font-size-xs, .75rem);white-space:nowrap}.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-host{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"] }]
2978
3007
  }], () => [], { 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 }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", 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"] }] }); })();
2979
3008
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 83 }); })();
2980
3009
 
@@ -4811,11 +4840,11 @@ class KptRichText {
4811
4840
  i0.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.menuPoint())("cdkConnectedOverlayOpen", ctx.borderOpen())("cdkConnectedOverlayHasBackdrop", true);
4812
4841
  i0.ɵɵadvance();
4813
4842
  i0.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.menuPoint())("cdkConnectedOverlayOpen", ctx.colorOpen() && ctx.colorKind() === "cellBg")("cdkConnectedOverlayHasBackdrop", true);
4814
- } }, dependencies: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);overflow:hidden;background:var(--%NS%kpt-form-field-bg)}.kpt-rich-text:focus-within{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-rich-text--invalid{border-color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:var(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-primary)}.kpt-rich-text__divider{width:var(--%NS%kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--%NS%kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font:inherit;font-size:var(--%NS%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(--%NS%kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--%NS%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(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5);color:var(--%NS%kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--%NS%kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--%NS%kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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(--%NS%kpt-color-border-strong);color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%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(--%NS%kpt-color-surface-variant);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%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(--%NS%kpt-space-3, .75rem);border:0;background:var(--%NS%kpt-color-surface-variant);color:var(--%NS%kpt-form-field-text);font-family:var(--%NS%kpt-font-family-mono, ui-monospace, monospace);font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%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(--%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);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--%NS%kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--%NS%kpt-color-muted);color:var(--%NS%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(--%NS%kpt-space-3, .75rem);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-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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%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(--%NS%kpt-space-2, .5rem);margin-top:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--%NS%kpt-space-2, .5rem);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-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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--%NS%kpt-space-2, .5rem);text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;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);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--%NS%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(--%NS%kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-3, .75rem);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-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--%NS%kpt-color-muted)}}\n"], encapsulation: 2 }); }
4843
+ } }, dependencies: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);overflow:hidden;background:var(--%NS%kpt-form-field-bg)}.kpt-rich-text:focus-within{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-rich-text--invalid{border-color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:var(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-primary)}.kpt-rich-text__divider{width:var(--%NS%kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--%NS%kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font:inherit;font-size:var(--%NS%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(--%NS%kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--%NS%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(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5);color:var(--%NS%kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--%NS%kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--%NS%kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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(--%NS%kpt-color-border-strong);color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%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(--%NS%kpt-color-surface-variant);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%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(--%NS%kpt-space-3, .75rem);border:0;background:var(--%NS%kpt-color-surface-variant);color:var(--%NS%kpt-form-field-text);font-family:var(--%NS%kpt-font-family-mono, ui-monospace, monospace);font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%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(--%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);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--%NS%kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--%NS%kpt-color-muted);color:var(--%NS%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(--%NS%kpt-space-3, .75rem);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-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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%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(--%NS%kpt-space-2, .5rem);margin-top:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--%NS%kpt-space-2, .5rem);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-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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--%NS%kpt-space-2, .5rem);text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;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);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-rt-menu__item .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger,.kpt-rt-menu__item--danger .kpt-icon-host{color:var(--%NS%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(--%NS%kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-3, .75rem);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-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--%NS%kpt-color-muted)}}\n"], encapsulation: 2 }); }
4815
4844
  }
4816
4845
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptRichText, [{
4817
4846
  type: Component,
4818
- 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]=\"pressed(item)\"\n [kptTooltip]=\"aria(item)\"\n [disabled]=\"disabled() || !enabled(item)\"\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 (keydown)=\"onKeydown($event)\"\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 ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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"] }]
4847
+ 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]=\"pressed(item)\"\n [kptTooltip]=\"aria(item)\"\n [disabled]=\"disabled() || !enabled(item)\"\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 (keydown)=\"onKeydown($event)\"\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 ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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-host{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger,.kpt-rt-menu__item--danger .kpt-icon-host{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"] }]
4819
4848
  }], () => [], { 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 }] }], maxListLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxListLevel", 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 }] }] }); })();
4820
4849
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber: 135 }); })();
4821
4850
 
@@ -5206,7 +5235,7 @@ class KptFileUpload {
5206
5235
  i0.ɵɵconditional(ctx.accept() ? 5 : -1);
5207
5236
  i0.ɵɵadvance();
5208
5237
  i0.ɵɵconditional(ctx.value().length ? 6 : -1);
5209
- } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--%NS%kpt-space-6, 1.5rem);border:2px dashed var(--%NS%kpt-color-border-strong);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color 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-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%kpt-color-primary) 6%,var(--%NS%kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--%NS%kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__file kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--%NS%kpt-color-danger)}}\n"], encapsulation: 2 }); }
5238
+ } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--%NS%kpt-space-6, 1.5rem);border:2px dashed var(--%NS%kpt-color-border-strong);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color 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-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%kpt-color-primary) 6%,var(--%NS%kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--%NS%kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__file .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--%NS%kpt-color-danger)}}\n"], encapsulation: 2 }); }
5210
5239
  }
5211
5240
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFileUpload, [{
5212
5241
  type: Component,
@@ -5238,7 +5267,7 @@ class KptFileUpload {
5238
5267
  }
5239
5268
  </ul>
5240
5269
  }
5241
- `, host: { class: 'kpt-file-upload-host' }, styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--kpt-space-6, 1.5rem);border:2px dashed var(--kpt-color-border-strong);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color 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-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 6%,var(--kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__file kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--kpt-color-danger)}}\n"] }]
5270
+ `, host: { class: 'kpt-file-upload-host' }, styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--kpt-space-6, 1.5rem);border:2px dashed var(--kpt-color-border-strong);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color 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-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 6%,var(--kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__file .kpt-icon-host{color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--kpt-color-danger)}}\n"] }]
5242
5271
  }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", 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"] }] }); })();
5243
5272
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFileUpload, { className: "KptFileUpload", filePath: "lib/file-upload/file-upload.component.ts", lineNumber: 49 }); })();
5244
5273
 
@@ -7035,9 +7064,11 @@ class KptAppShell {
7035
7064
  * przycisk obsługuje desktop i wąski ekran. Bez tej dyrektywy aplikacja musiałaby sama
7036
7065
  * wstrzyknąć `KptBreakpointObserver` i rozstrzygnąć, który z dwóch modeli przełączyć.
7037
7066
  *
7038
- * Atrybuty ARIA nakłada wyłącznie na natywny `<button>`/`<a>`. Na komponencie opakowującym
7039
- * (np. `kpt-icon-button`) trafiłyby na zewnętrzny element bez roli, co jest naruszeniem
7040
- * `aria-allowed-attr` — tam etykietę podaj samemu komponentowi.
7067
+ * Atrybuty ARIA nigdy nie lądują na hoście komponentu opakowującego — na elemencie bez roli
7068
+ * naruszałyby `aria-allowed-attr`. Na natywnym `<button>`/`<a>` nakłada je wiązanie hosta;
7069
+ * gdy hostem jest komponent (np. `kpt-icon-button`), dyrektywa schodzi z nimi na jego
7070
+ * wewnętrzną kontrolkę. Etykietę w tym drugim przypadku podaje sam komponent (`ariaLabel`),
7071
+ * więc jej tutaj nie ruszamy, żeby nie nadpisać wyboru aplikacji.
7041
7072
  *
7042
7073
  * @example
7043
7074
  * <button kptShellNavToggle type="button"><kpt-icon name="menu" /></button>
@@ -7049,13 +7080,26 @@ class KptShellNavToggle {
7049
7080
  this.label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'kptShellNavToggle' });
7050
7081
  this.shell = inject(KptAppShell);
7051
7082
  this.i18n = inject(KptI18n);
7052
- this.isNativeControl = /^(?:BUTTON|A)$/.test(inject(ElementRef).nativeElement.tagName);
7083
+ this.host = inject(ElementRef);
7084
+ this.isNativeControl = /^(?:BUTTON|A)$/.test(this.host.nativeElement.tagName);
7053
7085
  this.ariaExpanded = computed(() => this.isNativeControl ? String(this.shell.isSidenavOpen()) : null, /* @ts-ignore */
7054
7086
  ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
7055
7087
  this.ariaControls = computed(() => (this.isNativeControl ? this.shell.sidenavId : null), /* @ts-ignore */
7056
7088
  ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
7057
7089
  this.ariaLabel = computed(() => this.isNativeControl ? this.label() || this.i18n.t('appShell.toggleNavigation') : null, /* @ts-ignore */
7058
7090
  ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
7091
+ if (this.isNativeControl)
7092
+ return;
7093
+ // Host jest komponentem — kontrolka z rolą przycisku siedzi w jego szablonie. Musi to być
7094
+ // efekt porenderowy: w chwili konstrukcji dyrektywy widok dziecka jeszcze nie istnieje,
7095
+ // a `aria-expanded` ma być poprawne już przy pierwszym odczycie przez czytnik ekranu.
7096
+ afterRenderEffect(() => {
7097
+ const control = this.host.nativeElement.querySelector('button, a');
7098
+ if (!control)
7099
+ return;
7100
+ control.setAttribute('aria-expanded', String(this.shell.isSidenavOpen()));
7101
+ control.setAttribute('aria-controls', this.shell.sidenavId);
7102
+ });
7059
7103
  }
7060
7104
  static { this.ɵfac = function KptShellNavToggle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptShellNavToggle)(); }; }
7061
7105
  static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: KptShellNavToggle, selectors: [["", "kptShellNavToggle", ""]], hostVars: 3, hostBindings: function KptShellNavToggle_HostBindings(rf, ctx) { if (rf & 1) {
@@ -7075,7 +7119,7 @@ class KptShellNavToggle {
7075
7119
  '[attr.aria-label]': 'ariaLabel()',
7076
7120
  },
7077
7121
  }]
7078
- }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptShellNavToggle", required: false }] }] }); })();
7122
+ }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptShellNavToggle", required: false }] }] }); })();
7079
7123
 
7080
7124
  const _c0$o = ["*"];
7081
7125
  function KptAlert_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -7819,7 +7863,7 @@ class KptAuth {
7819
7863
  KptIcon,
7820
7864
  KptInput,
7821
7865
  KptPassword,
7822
- NgTemplateOutlet], styles: ["@layer kpt.components{.kpt-auth-host{display:block;--%NS%_kpt-auth-duration: var(--%NS%kpt-anim-duration, var(--%NS%kpt-motion-duration-slow, .32s));--%NS%_kpt-auth-easing: var(--%NS%kpt-motion-easing-emphasized, cubic-bezier(.3, 0, 0, 1));--%NS%_kpt-auth-dir: 1}[dir=rtl] .kpt-auth-host{--%NS%_kpt-auth-dir: -1}.kpt-auth{display:flex;align-items:center;justify-content:center;min-block-size:var(--%NS%kpt-auth-min-height, 100vh);min-block-size:var(--%NS%kpt-auth-min-height, 100dvh);padding:var(--%NS%kpt-auth-padding, var(--%NS%kpt-space-4, 1rem));background:var(--%NS%kpt-color-surface)}.kpt-auth__card{position:relative;display:grid;inline-size:min(var(--%NS%kpt-auth-width, 64rem),100%);min-block-size:var(--%NS%kpt-auth-card-height, 34rem);overflow:hidden;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-auth-card-border, 1px solid var(--%NS%kpt-color-border));border-radius:var(--%NS%kpt-auth-card-radius, var(--%NS%kpt-radius-lg, .75rem));box-shadow:var(--%NS%kpt-auth-card-shadow, var(--%NS%kpt-elevation-3));grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\"}.kpt-auth__form-side{grid-area:form;display:flex;align-items:center;justify-content:center;padding:var(--%NS%kpt-space-6, 1.5rem);overflow-y:auto}.kpt-auth__inner{inline-size:min(24rem,100%);display:flex;flex-direction:column;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-auth__brand:empty,.kpt-auth__sso:empty,.kpt-auth__footer:empty{display:none}.kpt-auth__title{margin:0;font-size:var(--%NS%kpt-font-size-xl, 1.5rem);font-weight:var(--%NS%kpt-font-weight-bold, 700);color:var(--%NS%kpt-color-on-surface);outline:none}.kpt-auth__subtitle{margin:0;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-auth__form{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-3, .75rem);margin-block-start:var(--%NS%kpt-space-2, .5rem)}.kpt-auth__row{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-2, .5rem);flex-wrap:wrap}.kpt-auth__link{padding:0;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-primary);background:none;border:0;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.kpt-auth__link:hover{color:var(--%NS%kpt-color-primary-hover)}.kpt-auth__link--center{align-self:center}.kpt-auth__separator{display:flex;align-items:center;gap:var(--%NS%kpt-space-3, .75rem);margin-block:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-auth__separator:before,.kpt-auth__separator:after{content:\"\";flex:1;block-size:1px;background:var(--%NS%kpt-color-border)}.kpt-auth__providers{display:grid;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-auth__providers[data-layout=grid]{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr))}.kpt-auth__provider{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-3, .75rem);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface);background:var(--%NS%kpt-color-surface-raised);border:1px solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-auth__provider:hover:not(:disabled){background:var(--%NS%kpt-color-surface-hover)}.kpt-auth__provider:disabled{opacity:.6;cursor:not-allowed}.kpt-auth__provider-logo{font-size:1.25rem;inline-size:1.25rem;block-size:1.25rem;flex-shrink:0}.kpt-auth__provider-desc{margin-inline-start:auto;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-auth__providers[data-layout=grid] .kpt-auth__provider{flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem);text-align:center}.kpt-auth__switch{margin:0;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted);text-align:center}.kpt-auth__promo{grid-area:promo;display:flex;align-items:center;justify-content:center;padding:var(--%NS%kpt-space-8, 2rem);color:var(--%NS%kpt-color-primary-contrast);background:var(--%NS%kpt-auth-promo-bg, linear-gradient(135deg, var(--%NS%kpt-color-primary), var(--%NS%kpt-color-primary-hover)))}.kpt-auth__promo-inner{display:flex;flex-direction:column;align-items:center;gap:var(--%NS%kpt-space-3, .75rem);text-align:center}.kpt-auth__promo-title{margin:0;font-size:var(--%NS%kpt-font-size-lg, 1.25rem);font-weight:var(--%NS%kpt-font-weight-bold, 700)}.kpt-auth__promo-text{margin:0;font-size:var(--%NS%kpt-font-size-sm, .875rem);opacity:.85}.kpt-auth__promo-cta .kpt-button{color:var(--%NS%kpt-color-primary-contrast);border-color:color-mix(in oklch,var(--%NS%kpt-color-primary-contrast) 60%,transparent);background:transparent}.kpt-auth__promo-cta .kpt-button:hover:not(:disabled){background:color-mix(in oklch,var(--%NS%kpt-color-primary-contrast) 12%,transparent)}.kpt-auth-host[data-layout=slider] .kpt-auth__promo,.kpt-auth-host[data-layout=slider] .kpt-auth__form-side{transition:transform var(--%NS%_kpt-auth-duration) var(--%NS%_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo{transform:translate(calc(var(--%NS%_kpt-auth-dir) * -100%))}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__form-side{transform:translate(calc(var(--%NS%_kpt-auth-dir) * 100%))}.kpt-auth-host[data-layout=slider][data-mode=signIn] .kpt-auth__promo-inner{animation:kpt-auth-promo-start var(--%NS%_kpt-auth-duration) var(--%NS%_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo-inner{animation:kpt-auth-promo-end var(--%NS%_kpt-auth-duration) var(--%NS%_kpt-auth-easing)}@keyframes kpt-auth-promo-start{0%{transform:translate(calc(var(--%NS%_kpt-auth-dir) * -14%))}to{transform:none}}@keyframes kpt-auth-promo-end{0%{transform:translate(calc(var(--%NS%_kpt-auth-dir) * 14%))}to{transform:none}}@keyframes kpt-auth-enter{0%{opacity:0;transform:translate(calc(var(--%NS%_kpt-auth-dir) * 1.25rem))}to{opacity:1;transform:none}}.kpt-auth__inner{animation:kpt-auth-enter var(--%NS%_kpt-auth-duration) var(--%NS%kpt-motion-easing-standard, cubic-bezier(.2, 0, 0, 1))}.kpt-auth__card{grid-template-columns:1fr;grid-template-areas:\"promo\" \"form\";min-block-size:0}.kpt-auth__promo{padding:var(--%NS%kpt-space-6, 1.5rem)}@media(min-width:768px){.kpt-auth__card{grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\";min-block-size:var(--%NS%kpt-auth-card-height, 34rem)}.kpt-auth__promo{padding:var(--%NS%kpt-space-8, 2rem)}}@media(max-width:767px){.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__form-side{transform:none}.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo-inner{animation:none;transform:none}}@media(prefers-reduced-motion:reduce){.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout][data-mode] .kpt-auth__form-side,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__provider{transition:none}.kpt-auth-host[data-layout][data-mode] .kpt-auth__inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner{animation:none}}}\n"], encapsulation: 2 }); }
7866
+ NgTemplateOutlet], styles: ["@layer kpt.components{.kpt-auth-host{display:block;--%NS%_kpt-auth-duration: var(--%NS%kpt-anim-duration, var(--%NS%kpt-motion-duration-slow, .32s));--%NS%_kpt-auth-easing: var(--%NS%kpt-motion-easing-emphasized, cubic-bezier(.3, 0, 0, 1));--%NS%_kpt-auth-dir: 1}[dir=rtl] .kpt-auth-host{--%NS%_kpt-auth-dir: -1}.kpt-auth{display:flex;align-items:center;justify-content:center;min-block-size:var(--%NS%kpt-auth-min-height, 100vh);min-block-size:var(--%NS%kpt-auth-min-height, 100dvh);padding:var(--%NS%kpt-auth-padding, var(--%NS%kpt-space-4, 1rem));background:var(--%NS%kpt-color-surface)}.kpt-auth__card{position:relative;display:grid;inline-size:min(var(--%NS%kpt-auth-width, 64rem),100%);min-block-size:var(--%NS%kpt-auth-card-height, 34rem);overflow:hidden;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-auth-card-border, 1px solid var(--%NS%kpt-color-border));border-radius:var(--%NS%kpt-auth-card-radius, var(--%NS%kpt-radius-lg, .75rem));box-shadow:var(--%NS%kpt-auth-card-shadow, var(--%NS%kpt-elevation-3));grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\"}.kpt-auth__form-side{grid-area:form;display:flex;align-items:center;justify-content:center;padding:var(--%NS%kpt-space-6, 1.5rem);overflow-y:auto}.kpt-auth__inner{inline-size:min(24rem,100%);display:flex;flex-direction:column;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-auth__brand:empty,.kpt-auth__sso:empty,.kpt-auth__footer:empty{display:none}.kpt-auth__title{margin:0;font-size:var(--%NS%kpt-font-size-xl, 1.5rem);font-weight:var(--%NS%kpt-font-weight-bold, 700);color:var(--%NS%kpt-color-on-surface);outline:none}.kpt-auth__subtitle{margin:0;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-auth__form{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-3, .75rem);margin-block-start:var(--%NS%kpt-space-2, .5rem)}.kpt-auth__row{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-2, .5rem);flex-wrap:wrap}.kpt-auth__link{padding:0;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-primary);background:none;border:0;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.kpt-auth__link:hover{color:var(--%NS%kpt-color-primary-hover)}.kpt-auth__link--center{align-self:center}.kpt-auth__separator{display:flex;align-items:center;gap:var(--%NS%kpt-space-3, .75rem);margin-block:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-auth__separator:before,.kpt-auth__separator:after{content:\"\";flex:1;block-size:1px;background:var(--%NS%kpt-color-border)}.kpt-auth__providers{display:grid;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-auth__providers[data-layout=grid]{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr))}.kpt-auth__provider{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-3, .75rem);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface);background:var(--%NS%kpt-color-surface-raised);border:1px solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-auth__provider:hover:not(:disabled){background:var(--%NS%kpt-color-surface-hover)}.kpt-auth__provider:disabled{opacity:.6;cursor:not-allowed}.kpt-auth__provider-logo{font-size:1.25rem;inline-size:1.25rem;block-size:1.25rem;flex-shrink:0}.kpt-auth__provider-desc{margin-inline-start:auto;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-auth__providers[data-layout=grid] .kpt-auth__provider{flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem);text-align:center}.kpt-auth__switch{margin:0;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted);text-align:center}.kpt-auth__promo{grid-area:promo;display:flex;align-items:center;justify-content:center;padding:var(--%NS%kpt-space-8, 2rem);color:var(--%NS%kpt-color-primary-contrast);background:var(--%NS%kpt-auth-promo-bg, linear-gradient(135deg, var(--%NS%kpt-color-primary), var(--%NS%kpt-color-primary-hover)));--%NS%kpt-color-surface: transparent;--%NS%kpt-color-surface-raised: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 12%, transparent);--%NS%kpt-color-surface-variant: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 16%, transparent);--%NS%kpt-color-surface-hover: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 12%, transparent);--%NS%kpt-color-surface-selected: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 20%, transparent);--%NS%kpt-color-surface-sunken: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 8%, transparent);--%NS%kpt-color-muted: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 12%, transparent);--%NS%kpt-color-on-surface: var(--%NS%kpt-color-primary-contrast);--%NS%kpt-color-on-surface-muted: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 72%, transparent);--%NS%kpt-color-border: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 35%, transparent);--%NS%kpt-color-border-strong: color-mix(in oklab, var(--%NS%kpt-color-primary-contrast) 55%, transparent)}.kpt-auth__promo-inner{display:flex;flex-direction:column;align-items:center;gap:var(--%NS%kpt-space-3, .75rem);text-align:center}.kpt-auth__promo-title{margin:0;font-size:var(--%NS%kpt-font-size-lg, 1.25rem);font-weight:var(--%NS%kpt-font-weight-bold, 700)}.kpt-auth__promo-text{margin:0;font-size:var(--%NS%kpt-font-size-sm, .875rem);opacity:.85}.kpt-auth__promo-cta .kpt-button{color:var(--%NS%kpt-color-primary-contrast);border-color:color-mix(in oklch,var(--%NS%kpt-color-primary-contrast) 60%,transparent);background:transparent}.kpt-auth__promo-cta .kpt-button:hover:not(:disabled){background:color-mix(in oklch,var(--%NS%kpt-color-primary-contrast) 12%,transparent)}.kpt-auth-host[data-layout=slider] .kpt-auth__promo,.kpt-auth-host[data-layout=slider] .kpt-auth__form-side{transition:transform var(--%NS%_kpt-auth-duration) var(--%NS%_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo{transform:translate(calc(var(--%NS%_kpt-auth-dir) * -100%))}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__form-side{transform:translate(calc(var(--%NS%_kpt-auth-dir) * 100%))}.kpt-auth-host[data-layout=slider][data-mode=signIn] .kpt-auth__promo-inner{animation:kpt-auth-promo-start var(--%NS%_kpt-auth-duration) var(--%NS%_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo-inner{animation:kpt-auth-promo-end var(--%NS%_kpt-auth-duration) var(--%NS%_kpt-auth-easing)}@keyframes kpt-auth-promo-start{0%{transform:translate(calc(var(--%NS%_kpt-auth-dir) * -14%))}to{transform:none}}@keyframes kpt-auth-promo-end{0%{transform:translate(calc(var(--%NS%_kpt-auth-dir) * 14%))}to{transform:none}}@keyframes kpt-auth-enter{0%{opacity:0;transform:translate(calc(var(--%NS%_kpt-auth-dir) * 1.25rem))}to{opacity:1;transform:none}}.kpt-auth__inner{animation:kpt-auth-enter var(--%NS%_kpt-auth-duration) var(--%NS%kpt-motion-easing-standard, cubic-bezier(.2, 0, 0, 1))}.kpt-auth__card{grid-template-columns:1fr;grid-template-areas:\"promo\" \"form\";min-block-size:0}.kpt-auth__promo{padding:var(--%NS%kpt-space-6, 1.5rem)}@media(min-width:768px){.kpt-auth__card{grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\";min-block-size:var(--%NS%kpt-auth-card-height, 34rem)}.kpt-auth__promo{padding:var(--%NS%kpt-space-8, 2rem)}}@media(max-width:767px){.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__form-side{transform:none}.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo-inner{animation:none;transform:none}}@media(prefers-reduced-motion:reduce){.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout][data-mode] .kpt-auth__form-side,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__provider{transition:none}.kpt-auth-host[data-layout][data-mode] .kpt-auth__inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner{animation:none}}}\n"], encapsulation: 2 }); }
7823
7867
  }
7824
7868
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAuth, [{
7825
7869
  type: Component,
@@ -7839,7 +7883,7 @@ class KptAuth {
7839
7883
  '[attr.data-layout]': 'layout()',
7840
7884
  '[attr.data-mode]': 'mode()',
7841
7885
  '[style.--kpt-anim-duration]': "(animated() ? animationDuration() : 0) + 'ms'",
7842
- }, template: "<div class=\"kpt-auth\">\n <div class=\"kpt-auth__card\">\n <!--\n W drzewie \u017Cyje wy\u0142\u0105cznie formularz aktywnego trybu. Dzi\u0119ki temu nie ma element\u00F3w\n niewidocznych, ale wci\u0105\u017C fokusowalnych \u2014 najcz\u0119stsza wada ekran\u00F3w logowania z animacj\u0105,\n w kt\u00F3rych oba formularze zostaj\u0105 w DOM i wygasza si\u0119 je sam\u0105 przezroczysto\u015Bci\u0105.\n -->\n <div class=\"kpt-auth__form-side\">\n <div class=\"kpt-auth__inner\" [attr.data-mode]=\"mode()\">\n <div class=\"kpt-auth__brand\"><ng-content select=\"[kptAuthBrand]\" /></div>\n\n <h2 #heading class=\"kpt-auth__title\" [id]=\"headingId()\" [attr.data-mode]=\"mode()\" tabindex=\"-1\">\n {{ title() }}\n </h2>\n <p class=\"kpt-auth__subtitle\">{{ subtitle() }}</p>\n\n @if (error()) {\n <kpt-alert variant=\"danger\">{{ error() }}</kpt-alert>\n }\n @if (notice()) {\n <kpt-alert variant=\"success\">{{ notice() }}</kpt-alert>\n }\n\n @switch (mode()) {\n @case ('signIn') {\n <form class=\"kpt-auth__form\" [formRoot]=\"signInForm\" (submit)=\"onSignIn()\" [attr.aria-labelledby]=\"ids.signIn\">\n <kpt-form-field [label]=\"i18n.t('auth.email')\" [error]=\"signInEmailError()\" required [controlId]=\"ids.email\">\n <kpt-input\n [formField]=\"signInForm.email\"\n type=\"email\"\n autocomplete=\"email\"\n [id]=\"ids.email\"\n [placeholder]=\"i18n.t('auth.emailPlaceholder')\"\n />\n </kpt-form-field>\n\n <kpt-form-field [label]=\"i18n.t('auth.password')\" [error]=\"signInPasswordError()\" required [controlId]=\"ids.password\">\n <kpt-password [formField]=\"signInForm.password\" autocomplete=\"current-password\" [id]=\"ids.password\" />\n </kpt-form-field>\n\n <ng-content select=\"[kptAuthFields]\" />\n\n <div class=\"kpt-auth__row\">\n @if (showRemember()) {\n <kpt-checkbox [formField]=\"signInForm.remember\" [label]=\"i18n.t('auth.remember')\" />\n } @else {\n <span></span>\n }\n <button type=\"button\" class=\"kpt-auth__link\" (click)=\"setMode('forgot')\">\n {{ i18n.t('auth.forgotLink') }}\n </button>\n </div>\n\n <kpt-button type=\"submit\" fullWidth [loading]=\"busy()\" [disabled]=\"signInInvalid()\">\n {{ i18n.t('auth.signInSubmit') }}\n </kpt-button>\n </form>\n }\n\n @case ('signUp') {\n <form class=\"kpt-auth__form\" [formRoot]=\"signUpForm\" (submit)=\"onSignUp()\" [attr.aria-labelledby]=\"ids.signUp\">\n @if (showName()) {\n <kpt-form-field [label]=\"i18n.t('auth.name')\" [error]=\"signUpNameError()\" required [controlId]=\"ids.name\">\n <kpt-input [formField]=\"signUpForm.name\" autocomplete=\"name\" [id]=\"ids.name\" />\n </kpt-form-field>\n }\n\n <kpt-form-field [label]=\"i18n.t('auth.email')\" [error]=\"signUpEmailError()\" required [controlId]=\"ids.regEmail\">\n <kpt-input\n [formField]=\"signUpForm.email\"\n type=\"email\"\n autocomplete=\"email\"\n [id]=\"ids.regEmail\"\n [placeholder]=\"i18n.t('auth.emailPlaceholder')\"\n />\n </kpt-form-field>\n\n <kpt-form-field\n [label]=\"i18n.t('auth.password')\"\n [error]=\"signUpPasswordError()\"\n [hint]=\"i18n.t('auth.passwordHint', { min: 8 })\"\n required\n [controlId]=\"ids.regPassword\"\n >\n <kpt-password [formField]=\"signUpForm.password\" autocomplete=\"new-password\" feedback [id]=\"ids.regPassword\" />\n </kpt-form-field>\n\n <kpt-form-field [label]=\"i18n.t('auth.confirmPassword')\" [error]=\"signUpConfirmError()\" required [controlId]=\"ids.regConfirm\">\n <kpt-password [formField]=\"signUpForm.confirm\" autocomplete=\"new-password\" [id]=\"ids.regConfirm\" />\n </kpt-form-field>\n\n <ng-content select=\"[kptAuthFields]\" />\n\n @if (requireTerms()) {\n <kpt-form-field [error]=\"signUpTermsError()\">\n <kpt-checkbox [formField]=\"signUpForm.terms\" [label]=\"i18n.t('auth.terms')\" />\n </kpt-form-field>\n }\n\n <kpt-button type=\"submit\" fullWidth [loading]=\"busy()\" [disabled]=\"signUpInvalid()\">\n {{ i18n.t('auth.signUpSubmit') }}\n </kpt-button>\n </form>\n }\n\n @case ('forgot') {\n <form class=\"kpt-auth__form\" [formRoot]=\"resetForm\" (submit)=\"onReset()\" [attr.aria-labelledby]=\"ids.forgot\">\n <kpt-form-field [label]=\"i18n.t('auth.email')\" [error]=\"resetEmailError()\" required [controlId]=\"ids.resetEmail\">\n <kpt-input\n [formField]=\"resetForm.email\"\n type=\"email\"\n autocomplete=\"email\"\n [id]=\"ids.resetEmail\"\n [placeholder]=\"i18n.t('auth.emailPlaceholder')\"\n />\n </kpt-form-field>\n\n <kpt-button type=\"submit\" fullWidth [loading]=\"busy()\" [disabled]=\"resetInvalid()\">\n {{ i18n.t('auth.resetSubmit') }}\n </kpt-button>\n <button type=\"button\" class=\"kpt-auth__link kpt-auth__link--center\" (click)=\"setMode('signIn')\">\n {{ i18n.t('auth.backToSignIn') }}\n </button>\n </form>\n }\n }\n\n @if (mode() !== 'forgot') {\n <div class=\"kpt-auth__sso\"><ng-content select=\"[kptAuthSso]\" /></div>\n\n @if (providers().length > 0) {\n <div class=\"kpt-auth__separator\" role=\"separator\" [attr.aria-label]=\"i18n.t('auth.orContinueWith')\">\n <span class=\"kpt-auth__separator-text\">{{ i18n.t('auth.orContinueWith') }}</span>\n </div>\n\n <div class=\"kpt-auth__providers\" [attr.data-layout]=\"providerLayout()\">\n @for (provider of providers(); track provider.id) {\n @if (templateFor(provider); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"providerContext(provider)\" />\n } @else {\n <button\n type=\"button\"\n class=\"kpt-auth__provider\"\n [disabled]=\"busy()\"\n [attr.aria-label]=\"i18n.t('auth.continueWith', { provider: provider.label })\"\n (click)=\"selectProvider(provider)\"\n >\n @if (provider.iconUrl) {\n <img class=\"kpt-auth__provider-logo\" [src]=\"provider.iconUrl\" alt=\"\" />\n } @else if (provider.icon) {\n <kpt-icon class=\"kpt-auth__provider-logo\" [name]=\"provider.icon\" />\n }\n <span class=\"kpt-auth__provider-label\">{{ provider.label }}</span>\n @if (provider.description && providerLayout() === 'list') {\n <span class=\"kpt-auth__provider-desc\">{{ provider.description }}</span>\n }\n </button>\n }\n }\n </div>\n }\n\n <p class=\"kpt-auth__switch\">\n {{ signUpActive() ? i18n.t('auth.haveAccount') : i18n.t('auth.noAccount') }}\n <button type=\"button\" class=\"kpt-auth__link\" (click)=\"setMode(signUpActive() ? 'signIn' : 'signUp')\">\n {{ signUpActive() ? i18n.t('auth.signInSwitch') : i18n.t('auth.signUpSwitch') }}\n </button>\n </p>\n }\n\n <div class=\"kpt-auth__footer\"><ng-content select=\"[kptAuthFooter]\" /></div>\n </div>\n </div>\n\n <aside class=\"kpt-auth__promo\">\n <div class=\"kpt-auth__promo-inner\">\n @if (promoHeading()) {\n <p class=\"kpt-auth__promo-title\">{{ promoHeading() }}</p>\n }\n @if (promoBody()) {\n <p class=\"kpt-auth__promo-text\">{{ promoBody() }}</p>\n }\n <ng-content select=\"[kptAuthPromo]\" />\n @if (mode() !== 'forgot') {\n <kpt-button class=\"kpt-auth__promo-cta\" variant=\"outline\" (click)=\"setMode(promoMode())\">\n {{ promoMode() === 'signUp' ? i18n.t('auth.signUpSwitch') : i18n.t('auth.signInSwitch') }}\n </kpt-button>\n }\n </div>\n </aside>\n </div>\n</div>\n", styles: ["@layer kpt.components{.kpt-auth-host{display:block;--_kpt-auth-duration: var(--kpt-anim-duration, var(--kpt-motion-duration-slow, .32s));--_kpt-auth-easing: var(--kpt-motion-easing-emphasized, cubic-bezier(.3, 0, 0, 1));--_kpt-auth-dir: 1}[dir=rtl] .kpt-auth-host{--_kpt-auth-dir: -1}.kpt-auth{display:flex;align-items:center;justify-content:center;min-block-size:var(--kpt-auth-min-height, 100vh);min-block-size:var(--kpt-auth-min-height, 100dvh);padding:var(--kpt-auth-padding, var(--kpt-space-4, 1rem));background:var(--kpt-color-surface)}.kpt-auth__card{position:relative;display:grid;inline-size:min(var(--kpt-auth-width, 64rem),100%);min-block-size:var(--kpt-auth-card-height, 34rem);overflow:hidden;background:var(--kpt-color-surface-raised);border:var(--kpt-auth-card-border, 1px solid var(--kpt-color-border));border-radius:var(--kpt-auth-card-radius, var(--kpt-radius-lg, .75rem));box-shadow:var(--kpt-auth-card-shadow, var(--kpt-elevation-3));grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\"}.kpt-auth__form-side{grid-area:form;display:flex;align-items:center;justify-content:center;padding:var(--kpt-space-6, 1.5rem);overflow-y:auto}.kpt-auth__inner{inline-size:min(24rem,100%);display:flex;flex-direction:column;gap:var(--kpt-space-3, .75rem)}.kpt-auth__brand:empty,.kpt-auth__sso:empty,.kpt-auth__footer:empty{display:none}.kpt-auth__title{margin:0;font-size:var(--kpt-font-size-xl, 1.5rem);font-weight:var(--kpt-font-weight-bold, 700);color:var(--kpt-color-on-surface);outline:none}.kpt-auth__subtitle{margin:0;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-auth__form{display:flex;flex-direction:column;gap:var(--kpt-space-3, .75rem);margin-block-start:var(--kpt-space-2, .5rem)}.kpt-auth__row{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);flex-wrap:wrap}.kpt-auth__link{padding:0;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-primary);background:none;border:0;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.kpt-auth__link:hover{color:var(--kpt-color-primary-hover)}.kpt-auth__link--center{align-self:center}.kpt-auth__separator{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem);margin-block:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-auth__separator:before,.kpt-auth__separator:after{content:\"\";flex:1;block-size:1px;background:var(--kpt-color-border)}.kpt-auth__providers{display:grid;gap:var(--kpt-space-2, .5rem)}.kpt-auth__providers[data-layout=grid]{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr))}.kpt-auth__provider{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface);background:var(--kpt-color-surface-raised);border:1px solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-auth__provider:hover:not(:disabled){background:var(--kpt-color-surface-hover)}.kpt-auth__provider:disabled{opacity:.6;cursor:not-allowed}.kpt-auth__provider-logo{font-size:1.25rem;inline-size:1.25rem;block-size:1.25rem;flex-shrink:0}.kpt-auth__provider-desc{margin-inline-start:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-auth__providers[data-layout=grid] .kpt-auth__provider{flex-direction:column;gap:var(--kpt-space-1, .25rem);text-align:center}.kpt-auth__switch{margin:0;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted);text-align:center}.kpt-auth__promo{grid-area:promo;display:flex;align-items:center;justify-content:center;padding:var(--kpt-space-8, 2rem);color:var(--kpt-color-primary-contrast);background:var(--kpt-auth-promo-bg, linear-gradient(135deg, var(--kpt-color-primary), var(--kpt-color-primary-hover)))}.kpt-auth__promo-inner{display:flex;flex-direction:column;align-items:center;gap:var(--kpt-space-3, .75rem);text-align:center}.kpt-auth__promo-title{margin:0;font-size:var(--kpt-font-size-lg, 1.25rem);font-weight:var(--kpt-font-weight-bold, 700)}.kpt-auth__promo-text{margin:0;font-size:var(--kpt-font-size-sm, .875rem);opacity:.85}.kpt-auth__promo-cta .kpt-button{color:var(--kpt-color-primary-contrast);border-color:color-mix(in oklch,var(--kpt-color-primary-contrast) 60%,transparent);background:transparent}.kpt-auth__promo-cta .kpt-button:hover:not(:disabled){background:color-mix(in oklch,var(--kpt-color-primary-contrast) 12%,transparent)}.kpt-auth-host[data-layout=slider] .kpt-auth__promo,.kpt-auth-host[data-layout=slider] .kpt-auth__form-side{transition:transform var(--_kpt-auth-duration) var(--_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo{transform:translate(calc(var(--_kpt-auth-dir) * -100%))}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__form-side{transform:translate(calc(var(--_kpt-auth-dir) * 100%))}.kpt-auth-host[data-layout=slider][data-mode=signIn] .kpt-auth__promo-inner{animation:kpt-auth-promo-start var(--_kpt-auth-duration) var(--_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo-inner{animation:kpt-auth-promo-end var(--_kpt-auth-duration) var(--_kpt-auth-easing)}@keyframes kpt-auth-promo-start{0%{transform:translate(calc(var(--_kpt-auth-dir) * -14%))}to{transform:none}}@keyframes kpt-auth-promo-end{0%{transform:translate(calc(var(--_kpt-auth-dir) * 14%))}to{transform:none}}@keyframes kpt-auth-enter{0%{opacity:0;transform:translate(calc(var(--_kpt-auth-dir) * 1.25rem))}to{opacity:1;transform:none}}.kpt-auth__inner{animation:kpt-auth-enter var(--_kpt-auth-duration) var(--kpt-motion-easing-standard, cubic-bezier(.2, 0, 0, 1))}.kpt-auth__card{grid-template-columns:1fr;grid-template-areas:\"promo\" \"form\";min-block-size:0}.kpt-auth__promo{padding:var(--kpt-space-6, 1.5rem)}@media(min-width:768px){.kpt-auth__card{grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\";min-block-size:var(--kpt-auth-card-height, 34rem)}.kpt-auth__promo{padding:var(--kpt-space-8, 2rem)}}@media(max-width:767px){.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__form-side{transform:none}.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo-inner{animation:none;transform:none}}@media(prefers-reduced-motion:reduce){.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout][data-mode] .kpt-auth__form-side,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__provider{transition:none}.kpt-auth-host[data-layout][data-mode] .kpt-auth__inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner{animation:none}}}\n"] }]
7886
+ }, template: "<div class=\"kpt-auth\">\n <div class=\"kpt-auth__card\">\n <!--\n W drzewie \u017Cyje wy\u0142\u0105cznie formularz aktywnego trybu. Dzi\u0119ki temu nie ma element\u00F3w\n niewidocznych, ale wci\u0105\u017C fokusowalnych \u2014 najcz\u0119stsza wada ekran\u00F3w logowania z animacj\u0105,\n w kt\u00F3rych oba formularze zostaj\u0105 w DOM i wygasza si\u0119 je sam\u0105 przezroczysto\u015Bci\u0105.\n -->\n <div class=\"kpt-auth__form-side\">\n <div class=\"kpt-auth__inner\" [attr.data-mode]=\"mode()\">\n <div class=\"kpt-auth__brand\"><ng-content select=\"[kptAuthBrand]\" /></div>\n\n <h2 #heading class=\"kpt-auth__title\" [id]=\"headingId()\" [attr.data-mode]=\"mode()\" tabindex=\"-1\">\n {{ title() }}\n </h2>\n <p class=\"kpt-auth__subtitle\">{{ subtitle() }}</p>\n\n @if (error()) {\n <kpt-alert variant=\"danger\">{{ error() }}</kpt-alert>\n }\n @if (notice()) {\n <kpt-alert variant=\"success\">{{ notice() }}</kpt-alert>\n }\n\n @switch (mode()) {\n @case ('signIn') {\n <form class=\"kpt-auth__form\" [formRoot]=\"signInForm\" (submit)=\"onSignIn()\" [attr.aria-labelledby]=\"ids.signIn\">\n <kpt-form-field [label]=\"i18n.t('auth.email')\" [error]=\"signInEmailError()\" required [controlId]=\"ids.email\">\n <kpt-input\n [formField]=\"signInForm.email\"\n type=\"email\"\n autocomplete=\"email\"\n [id]=\"ids.email\"\n [placeholder]=\"i18n.t('auth.emailPlaceholder')\"\n />\n </kpt-form-field>\n\n <kpt-form-field [label]=\"i18n.t('auth.password')\" [error]=\"signInPasswordError()\" required [controlId]=\"ids.password\">\n <kpt-password [formField]=\"signInForm.password\" autocomplete=\"current-password\" [id]=\"ids.password\" />\n </kpt-form-field>\n\n <ng-content select=\"[kptAuthFields]\" />\n\n <div class=\"kpt-auth__row\">\n @if (showRemember()) {\n <kpt-checkbox [formField]=\"signInForm.remember\" [label]=\"i18n.t('auth.remember')\" />\n } @else {\n <span></span>\n }\n <button type=\"button\" class=\"kpt-auth__link\" (click)=\"setMode('forgot')\">\n {{ i18n.t('auth.forgotLink') }}\n </button>\n </div>\n\n <kpt-button type=\"submit\" fullWidth [loading]=\"busy()\" [disabled]=\"signInInvalid()\">\n {{ i18n.t('auth.signInSubmit') }}\n </kpt-button>\n </form>\n }\n\n @case ('signUp') {\n <form class=\"kpt-auth__form\" [formRoot]=\"signUpForm\" (submit)=\"onSignUp()\" [attr.aria-labelledby]=\"ids.signUp\">\n @if (showName()) {\n <kpt-form-field [label]=\"i18n.t('auth.name')\" [error]=\"signUpNameError()\" required [controlId]=\"ids.name\">\n <kpt-input [formField]=\"signUpForm.name\" autocomplete=\"name\" [id]=\"ids.name\" />\n </kpt-form-field>\n }\n\n <kpt-form-field [label]=\"i18n.t('auth.email')\" [error]=\"signUpEmailError()\" required [controlId]=\"ids.regEmail\">\n <kpt-input\n [formField]=\"signUpForm.email\"\n type=\"email\"\n autocomplete=\"email\"\n [id]=\"ids.regEmail\"\n [placeholder]=\"i18n.t('auth.emailPlaceholder')\"\n />\n </kpt-form-field>\n\n <kpt-form-field\n [label]=\"i18n.t('auth.password')\"\n [error]=\"signUpPasswordError()\"\n [hint]=\"i18n.t('auth.passwordHint', { min: 8 })\"\n required\n [controlId]=\"ids.regPassword\"\n >\n <kpt-password [formField]=\"signUpForm.password\" autocomplete=\"new-password\" feedback [id]=\"ids.regPassword\" />\n </kpt-form-field>\n\n <kpt-form-field [label]=\"i18n.t('auth.confirmPassword')\" [error]=\"signUpConfirmError()\" required [controlId]=\"ids.regConfirm\">\n <kpt-password [formField]=\"signUpForm.confirm\" autocomplete=\"new-password\" [id]=\"ids.regConfirm\" />\n </kpt-form-field>\n\n <ng-content select=\"[kptAuthFields]\" />\n\n @if (requireTerms()) {\n <kpt-form-field [error]=\"signUpTermsError()\">\n <kpt-checkbox [formField]=\"signUpForm.terms\" [label]=\"i18n.t('auth.terms')\" />\n </kpt-form-field>\n }\n\n <kpt-button type=\"submit\" fullWidth [loading]=\"busy()\" [disabled]=\"signUpInvalid()\">\n {{ i18n.t('auth.signUpSubmit') }}\n </kpt-button>\n </form>\n }\n\n @case ('forgot') {\n <form class=\"kpt-auth__form\" [formRoot]=\"resetForm\" (submit)=\"onReset()\" [attr.aria-labelledby]=\"ids.forgot\">\n <kpt-form-field [label]=\"i18n.t('auth.email')\" [error]=\"resetEmailError()\" required [controlId]=\"ids.resetEmail\">\n <kpt-input\n [formField]=\"resetForm.email\"\n type=\"email\"\n autocomplete=\"email\"\n [id]=\"ids.resetEmail\"\n [placeholder]=\"i18n.t('auth.emailPlaceholder')\"\n />\n </kpt-form-field>\n\n <kpt-button type=\"submit\" fullWidth [loading]=\"busy()\" [disabled]=\"resetInvalid()\">\n {{ i18n.t('auth.resetSubmit') }}\n </kpt-button>\n <button type=\"button\" class=\"kpt-auth__link kpt-auth__link--center\" (click)=\"setMode('signIn')\">\n {{ i18n.t('auth.backToSignIn') }}\n </button>\n </form>\n }\n }\n\n @if (mode() !== 'forgot') {\n <div class=\"kpt-auth__sso\"><ng-content select=\"[kptAuthSso]\" /></div>\n\n @if (providers().length > 0) {\n <div class=\"kpt-auth__separator\" role=\"separator\" [attr.aria-label]=\"i18n.t('auth.orContinueWith')\">\n <span class=\"kpt-auth__separator-text\">{{ i18n.t('auth.orContinueWith') }}</span>\n </div>\n\n <div class=\"kpt-auth__providers\" [attr.data-layout]=\"providerLayout()\">\n @for (provider of providers(); track provider.id) {\n @if (templateFor(provider); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"providerContext(provider)\" />\n } @else {\n <button\n type=\"button\"\n class=\"kpt-auth__provider\"\n [disabled]=\"busy()\"\n [attr.aria-label]=\"i18n.t('auth.continueWith', { provider: provider.label })\"\n (click)=\"selectProvider(provider)\"\n >\n @if (provider.iconUrl) {\n <img class=\"kpt-auth__provider-logo\" [src]=\"provider.iconUrl\" alt=\"\" />\n } @else if (provider.icon) {\n <kpt-icon class=\"kpt-auth__provider-logo\" [name]=\"provider.icon\" />\n }\n <span class=\"kpt-auth__provider-label\">{{ provider.label }}</span>\n @if (provider.description && providerLayout() === 'list') {\n <span class=\"kpt-auth__provider-desc\">{{ provider.description }}</span>\n }\n </button>\n }\n }\n </div>\n }\n\n <p class=\"kpt-auth__switch\">\n {{ signUpActive() ? i18n.t('auth.haveAccount') : i18n.t('auth.noAccount') }}\n <button type=\"button\" class=\"kpt-auth__link\" (click)=\"setMode(signUpActive() ? 'signIn' : 'signUp')\">\n {{ signUpActive() ? i18n.t('auth.signInSwitch') : i18n.t('auth.signUpSwitch') }}\n </button>\n </p>\n }\n\n <div class=\"kpt-auth__footer\"><ng-content select=\"[kptAuthFooter]\" /></div>\n </div>\n </div>\n\n <aside class=\"kpt-auth__promo\">\n <div class=\"kpt-auth__promo-inner\">\n @if (promoHeading()) {\n <p class=\"kpt-auth__promo-title\">{{ promoHeading() }}</p>\n }\n @if (promoBody()) {\n <p class=\"kpt-auth__promo-text\">{{ promoBody() }}</p>\n }\n <ng-content select=\"[kptAuthPromo]\" />\n @if (mode() !== 'forgot') {\n <kpt-button class=\"kpt-auth__promo-cta\" variant=\"outline\" (click)=\"setMode(promoMode())\">\n {{ promoMode() === 'signUp' ? i18n.t('auth.signUpSwitch') : i18n.t('auth.signInSwitch') }}\n </kpt-button>\n }\n </div>\n </aside>\n </div>\n</div>\n", styles: ["@layer kpt.components{.kpt-auth-host{display:block;--_kpt-auth-duration: var(--kpt-anim-duration, var(--kpt-motion-duration-slow, .32s));--_kpt-auth-easing: var(--kpt-motion-easing-emphasized, cubic-bezier(.3, 0, 0, 1));--_kpt-auth-dir: 1}[dir=rtl] .kpt-auth-host{--_kpt-auth-dir: -1}.kpt-auth{display:flex;align-items:center;justify-content:center;min-block-size:var(--kpt-auth-min-height, 100vh);min-block-size:var(--kpt-auth-min-height, 100dvh);padding:var(--kpt-auth-padding, var(--kpt-space-4, 1rem));background:var(--kpt-color-surface)}.kpt-auth__card{position:relative;display:grid;inline-size:min(var(--kpt-auth-width, 64rem),100%);min-block-size:var(--kpt-auth-card-height, 34rem);overflow:hidden;background:var(--kpt-color-surface-raised);border:var(--kpt-auth-card-border, 1px solid var(--kpt-color-border));border-radius:var(--kpt-auth-card-radius, var(--kpt-radius-lg, .75rem));box-shadow:var(--kpt-auth-card-shadow, var(--kpt-elevation-3));grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\"}.kpt-auth__form-side{grid-area:form;display:flex;align-items:center;justify-content:center;padding:var(--kpt-space-6, 1.5rem);overflow-y:auto}.kpt-auth__inner{inline-size:min(24rem,100%);display:flex;flex-direction:column;gap:var(--kpt-space-3, .75rem)}.kpt-auth__brand:empty,.kpt-auth__sso:empty,.kpt-auth__footer:empty{display:none}.kpt-auth__title{margin:0;font-size:var(--kpt-font-size-xl, 1.5rem);font-weight:var(--kpt-font-weight-bold, 700);color:var(--kpt-color-on-surface);outline:none}.kpt-auth__subtitle{margin:0;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-auth__form{display:flex;flex-direction:column;gap:var(--kpt-space-3, .75rem);margin-block-start:var(--kpt-space-2, .5rem)}.kpt-auth__row{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);flex-wrap:wrap}.kpt-auth__link{padding:0;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-primary);background:none;border:0;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.kpt-auth__link:hover{color:var(--kpt-color-primary-hover)}.kpt-auth__link--center{align-self:center}.kpt-auth__separator{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem);margin-block:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-auth__separator:before,.kpt-auth__separator:after{content:\"\";flex:1;block-size:1px;background:var(--kpt-color-border)}.kpt-auth__providers{display:grid;gap:var(--kpt-space-2, .5rem)}.kpt-auth__providers[data-layout=grid]{grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr))}.kpt-auth__provider{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface);background:var(--kpt-color-surface-raised);border:1px solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-auth__provider:hover:not(:disabled){background:var(--kpt-color-surface-hover)}.kpt-auth__provider:disabled{opacity:.6;cursor:not-allowed}.kpt-auth__provider-logo{font-size:1.25rem;inline-size:1.25rem;block-size:1.25rem;flex-shrink:0}.kpt-auth__provider-desc{margin-inline-start:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-auth__providers[data-layout=grid] .kpt-auth__provider{flex-direction:column;gap:var(--kpt-space-1, .25rem);text-align:center}.kpt-auth__switch{margin:0;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted);text-align:center}.kpt-auth__promo{grid-area:promo;display:flex;align-items:center;justify-content:center;padding:var(--kpt-space-8, 2rem);color:var(--kpt-color-primary-contrast);background:var(--kpt-auth-promo-bg, linear-gradient(135deg, var(--kpt-color-primary), var(--kpt-color-primary-hover)));--kpt-color-surface: transparent;--kpt-color-surface-raised: color-mix(in oklab, var(--kpt-color-primary-contrast) 12%, transparent);--kpt-color-surface-variant: color-mix(in oklab, var(--kpt-color-primary-contrast) 16%, transparent);--kpt-color-surface-hover: color-mix(in oklab, var(--kpt-color-primary-contrast) 12%, transparent);--kpt-color-surface-selected: color-mix(in oklab, var(--kpt-color-primary-contrast) 20%, transparent);--kpt-color-surface-sunken: color-mix(in oklab, var(--kpt-color-primary-contrast) 8%, transparent);--kpt-color-muted: color-mix(in oklab, var(--kpt-color-primary-contrast) 12%, transparent);--kpt-color-on-surface: var(--kpt-color-primary-contrast);--kpt-color-on-surface-muted: color-mix(in oklab, var(--kpt-color-primary-contrast) 72%, transparent);--kpt-color-border: color-mix(in oklab, var(--kpt-color-primary-contrast) 35%, transparent);--kpt-color-border-strong: color-mix(in oklab, var(--kpt-color-primary-contrast) 55%, transparent)}.kpt-auth__promo-inner{display:flex;flex-direction:column;align-items:center;gap:var(--kpt-space-3, .75rem);text-align:center}.kpt-auth__promo-title{margin:0;font-size:var(--kpt-font-size-lg, 1.25rem);font-weight:var(--kpt-font-weight-bold, 700)}.kpt-auth__promo-text{margin:0;font-size:var(--kpt-font-size-sm, .875rem);opacity:.85}.kpt-auth__promo-cta .kpt-button{color:var(--kpt-color-primary-contrast);border-color:color-mix(in oklch,var(--kpt-color-primary-contrast) 60%,transparent);background:transparent}.kpt-auth__promo-cta .kpt-button:hover:not(:disabled){background:color-mix(in oklch,var(--kpt-color-primary-contrast) 12%,transparent)}.kpt-auth-host[data-layout=slider] .kpt-auth__promo,.kpt-auth-host[data-layout=slider] .kpt-auth__form-side{transition:transform var(--_kpt-auth-duration) var(--_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo{transform:translate(calc(var(--_kpt-auth-dir) * -100%))}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__form-side{transform:translate(calc(var(--_kpt-auth-dir) * 100%))}.kpt-auth-host[data-layout=slider][data-mode=signIn] .kpt-auth__promo-inner{animation:kpt-auth-promo-start var(--_kpt-auth-duration) var(--_kpt-auth-easing)}.kpt-auth-host[data-layout=slider][data-mode=signUp] .kpt-auth__promo-inner{animation:kpt-auth-promo-end var(--_kpt-auth-duration) var(--_kpt-auth-easing)}@keyframes kpt-auth-promo-start{0%{transform:translate(calc(var(--_kpt-auth-dir) * -14%))}to{transform:none}}@keyframes kpt-auth-promo-end{0%{transform:translate(calc(var(--_kpt-auth-dir) * 14%))}to{transform:none}}@keyframes kpt-auth-enter{0%{opacity:0;transform:translate(calc(var(--_kpt-auth-dir) * 1.25rem))}to{opacity:1;transform:none}}.kpt-auth__inner{animation:kpt-auth-enter var(--_kpt-auth-duration) var(--kpt-motion-easing-standard, cubic-bezier(.2, 0, 0, 1))}.kpt-auth__card{grid-template-columns:1fr;grid-template-areas:\"promo\" \"form\";min-block-size:0}.kpt-auth__promo{padding:var(--kpt-space-6, 1.5rem)}@media(min-width:768px){.kpt-auth__card{grid-template-columns:1fr 1fr;grid-template-areas:\"form promo\";min-block-size:var(--kpt-auth-card-height, 34rem)}.kpt-auth__promo{padding:var(--kpt-space-8, 2rem)}}@media(max-width:767px){.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__form-side{transform:none}.kpt-auth-host[data-layout=slider][data-mode] .kpt-auth__promo-inner{animation:none;transform:none}}@media(prefers-reduced-motion:reduce){.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo,.kpt-auth-host[data-layout][data-mode] .kpt-auth__form-side,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__provider{transition:none}.kpt-auth-host[data-layout][data-mode] .kpt-auth__inner,.kpt-auth-host[data-layout][data-mode] .kpt-auth__promo-inner{animation:none}}}\n"] }]
7843
7887
  }], null, { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], providerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "providerLayout", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], requireTerms: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireTerms", required: false }] }], showRemember: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRemember", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], notice: [{ type: i0.Input, args: [{ isSignal: true, alias: "notice", required: false }] }], promoTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "promoTitle", required: false }] }], promoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "promoText", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], signUp: [{ type: i0.Output, args: ["signUp"] }], resetPassword: [{ type: i0.Output, args: ["resetPassword"] }], providerSelect: [{ type: i0.Output, args: ["providerSelect"] }], headings: [{ type: i0.ViewChildren, args: ['heading', { isSignal: true }] }], providerDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptAuthProviderDef), { isSignal: true }] }] }); })();
7844
7888
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAuth, { className: "KptAuth", filePath: "lib/auth/auth.component.ts", lineNumber: 94 }); })();
7845
7889
 
@@ -9125,6 +9169,17 @@ class KptPaginator {
9125
9169
  this.pageSizeOptions = input([5, 10, 20, 50], /* @ts-ignore */
9126
9170
  ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
9127
9171
  this.i18n = inject(KptI18n);
9172
+ /**
9173
+ * Opcje selecta: `pageSizeOptions` uzupełnione o bieżący `pageSize`. Bez tego rozmiar spoza
9174
+ * listy (np. `[pageSize]="8"` przy domyślnych opcjach) nie ma odpowiadającej opcji — select
9175
+ * pokazuje pierwszą pozycję i cicho kłamie o stanie, po którym tabela naprawdę stronicuje.
9176
+ */
9177
+ this.sizeOptions = computed(() => {
9178
+ const options = this.pageSizeOptions();
9179
+ const size = this.pageSize();
9180
+ return options.includes(size) ? options : [...options, size].sort((a, b) => a - b);
9181
+ }, /* @ts-ignore */
9182
+ ...(ngDevMode ? [{ debugName: "sizeOptions" }] : /* istanbul ignore next */ []));
9128
9183
  this.totalPages = computed(() => Math.max(1, Math.ceil(this.length() / this.pageSize())), /* @ts-ignore */
9129
9184
  ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
9130
9185
  this.rangeStart = computed(() => (this.length() === 0 ? 0 : this.pageIndex() * this.pageSize() + 1), /* @ts-ignore */
@@ -9182,7 +9237,7 @@ class KptPaginator {
9182
9237
  i0.ɵɵadvance();
9183
9238
  i0.ɵɵproperty("value", ctx.pageSize());
9184
9239
  i0.ɵɵadvance();
9185
- i0.ɵɵrepeater(ctx.pageSizeOptions());
9240
+ i0.ɵɵrepeater(ctx.sizeOptions());
9186
9241
  i0.ɵɵadvance(3);
9187
9242
  i0.ɵɵtextInterpolate(ctx.rangeLabel());
9188
9243
  i0.ɵɵadvance(2);
@@ -9195,7 +9250,7 @@ class KptPaginator {
9195
9250
  }
9196
9251
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptPaginator, [{
9197
9252
  type: Component,
9198
- args: [{ selector: 'kpt-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptButton, KptIcon], host: { class: 'kpt-paginator' }, template: "<div class=\"kpt-paginator__size\">\n <label>\n {{ i18n.t('paginator.rowsPerPage') }}\n <select class=\"kpt-paginator__select\" [value]=\"pageSize()\" (change)=\"onSizeChange($event)\">\n @for (opt of pageSizeOptions(); track opt) {\n <option [value]=\"opt\" [selected]=\"opt === pageSize()\">{{ opt }}</option>\n }\n </select>\n </label>\n</div>\n\n<span class=\"kpt-paginator__range\">{{ rangeLabel() }}</span>\n\n<div class=\"kpt-paginator__nav\">\n <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canPrev()\" (click)=\"prev()\" [attr.aria-label]=\"i18n.t('paginator.prevPage')\"><kpt-icon name=\"chevron-left\" /></kpt-button>\n <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canNext()\" (click)=\"next()\" [attr.aria-label]=\"i18n.t('paginator.nextPage')\"><kpt-icon name=\"chevron-right\" /></kpt-button>\n</div>\n", styles: ["@layer kpt.components{.kpt-paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--kpt-space-4, 1rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-paginator__size label{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-paginator__select{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-radius-md, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-paginator__select:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus)}.kpt-paginator__nav{display:flex;gap:var(--kpt-space-2, .5rem)}}\n"] }]
9253
+ args: [{ selector: 'kpt-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptButton, KptIcon], host: { class: 'kpt-paginator' }, template: "<div class=\"kpt-paginator__size\">\n <label>\n {{ i18n.t('paginator.rowsPerPage') }}\n <select class=\"kpt-paginator__select\" [value]=\"pageSize()\" (change)=\"onSizeChange($event)\">\n @for (opt of sizeOptions(); track opt) {\n <option [value]=\"opt\" [selected]=\"opt === pageSize()\">{{ opt }}</option>\n }\n </select>\n </label>\n</div>\n\n<span class=\"kpt-paginator__range\">{{ rangeLabel() }}</span>\n\n<div class=\"kpt-paginator__nav\">\n <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canPrev()\" (click)=\"prev()\" [attr.aria-label]=\"i18n.t('paginator.prevPage')\"><kpt-icon name=\"chevron-left\" /></kpt-button>\n <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canNext()\" (click)=\"next()\" [attr.aria-label]=\"i18n.t('paginator.nextPage')\"><kpt-icon name=\"chevron-right\" /></kpt-button>\n</div>\n", styles: ["@layer kpt.components{.kpt-paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--kpt-space-4, 1rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-paginator__size label{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-paginator__select{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-radius-md, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-paginator__select:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus)}.kpt-paginator__nav{display:flex;gap:var(--kpt-space-2, .5rem)}}\n"] }]
9199
9254
  }], () => [], { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }] }); })();
9200
9255
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPaginator, { className: "KptPaginator", filePath: "lib/paginator/paginator.component.ts", lineNumber: 30 }); })();
9201
9256
 
@@ -9846,8 +9901,9 @@ function sameEditValue(a, b) {
9846
9901
  * @example
9847
9902
  * <kpt-data-table [columns]="cols" [data]="rows" filterable [pageSize]="10"
9848
9903
  * selectable="multiple" rowKey="id" [(selection)]="picked">
9849
- * <ng-template kptCell="status" let-value="value">
9850
- * <span class="badge">{{ value }}</span>
9904
+ * <!-- Kontekst szablonu komórki: $implicit = wiersz, value = wartość pola. -->
9905
+ * <ng-template kptCell="status" let-row let-value="value">
9906
+ * <span class="badge" [title]="row.name">{{ value }}</span>
9851
9907
  * </ng-template>
9852
9908
  * </kpt-data-table>
9853
9909
  */
@@ -10576,7 +10632,7 @@ class KptDataTable {
10576
10632
  KptSlider,
10577
10633
  KptInput,
10578
10634
  KptInputNumber,
10579
- 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__table tfoot th,.kpt-data-table__table tfoot td{position:sticky;bottom:0;z-index:1;background:var(--%NS%kpt-table-summary-bg, 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;border-bottom:0;border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__table .kpt-data-table__summary-label{text-align:end}.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 tfoot th.kpt-data-table__cell--frozen,.kpt-data-table tfoot td.kpt-data-table__cell--frozen{z-index:3;background:var(--%NS%kpt-table-summary-bg, 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 }); }
10635
+ 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__table tfoot th,.kpt-data-table__table tfoot td{position:sticky;bottom:0;z-index:1;background:var(--%NS%kpt-table-summary-bg, 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;border-bottom:0;border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-table-border)}.kpt-data-table__table .kpt-data-table__summary-label{text-align:end}.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-host,.kpt-data-table__filter-row .kpt-date-range-host{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-host{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-host{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 tfoot th.kpt-data-table__cell--frozen,.kpt-data-table tfoot td.kpt-data-table__cell--frozen{z-index:3;background:var(--%NS%kpt-table-summary-bg, 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 }); }
10580
10636
  }
10581
10637
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDataTable, [{
10582
10638
  type: Component,
@@ -10594,9 +10650,9 @@ class KptDataTable {
10594
10650
  ], host: {
10595
10651
  'class': 'kpt-data-table',
10596
10652
  '[style.--kpt-thead-offset]': "theadOffset() + 'px'",
10597
- }, 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 @if (hasSummary() && !loading() && displayCount() > 0) {\n <tfoot>\n <tr class=\"kpt-data-table__summary\">\n @if (summaryLabelSpan() > 0) {\n <th\n class=\"kpt-data-table__summary-label\"\n [attr.colspan]=\"summaryLabelSpan()\"\n [class.kpt-data-table__cell--frozen]=\"hasFrozen()\"\n [style.left.px]=\"hasFrozen() ? 0 : null\"\n >\n {{ summaryLabelText() }}\n </th>\n }\n @for (col of visibleOrderedColumns(); track col.field; let i = $index) {\n @if (i >= summaryStartIndex()) {\n <td\n [attr.data-align]=\"col.align ?? 'end'\"\n [style.width]=\"col.width\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n >\n {{ summaryText(col.field) }}\n </td>\n }\n }\n </tr>\n </tfoot>\n }\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__table tfoot th,.kpt-data-table__table tfoot td{position:sticky;bottom:0;z-index:1;background:var(--kpt-table-summary-bg, var(--kpt-table-header-bg));color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;border-bottom:0;border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table .kpt-data-table__summary-label{text-align:end}.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 tfoot th.kpt-data-table__cell--frozen,.kpt-data-table tfoot td.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-summary-bg, 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"] }]
10653
+ }, 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 @if (hasSummary() && !loading() && displayCount() > 0) {\n <tfoot>\n <tr class=\"kpt-data-table__summary\">\n @if (summaryLabelSpan() > 0) {\n <th\n class=\"kpt-data-table__summary-label\"\n [attr.colspan]=\"summaryLabelSpan()\"\n [class.kpt-data-table__cell--frozen]=\"hasFrozen()\"\n [style.left.px]=\"hasFrozen() ? 0 : null\"\n >\n {{ summaryLabelText() }}\n </th>\n }\n @for (col of visibleOrderedColumns(); track col.field; let i = $index) {\n @if (i >= summaryStartIndex()) {\n <td\n [attr.data-align]=\"col.align ?? 'end'\"\n [style.width]=\"col.width\"\n [style.left.px]=\"frozenLeft(col.field)\"\n [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n >\n {{ summaryText(col.field) }}\n </td>\n }\n }\n </tr>\n </tfoot>\n }\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__table tfoot th,.kpt-data-table__table tfoot td{position:sticky;bottom:0;z-index:1;background:var(--kpt-table-summary-bg, var(--kpt-table-header-bg));color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;border-bottom:0;border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table .kpt-data-table__summary-label{text-align:end}.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-host,.kpt-data-table__filter-row .kpt-date-range-host{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-host{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-host{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 tfoot th.kpt-data-table__cell--frozen,.kpt-data-table tfoot td.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-summary-bg, 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"] }]
10598
10654
  }], () => [], { 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 }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], summaryValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryValues", 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 }] }] }); })();
10599
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber: 163 }); })();
10655
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber: 164 }); })();
10600
10656
 
10601
10657
  const _c0$c = a0 => ({ $implicit: a0, level: 0 });
10602
10658
  const _c1$4 = (a0, a1) => ({ $implicit: a0, level: a1 });
@@ -11083,7 +11139,7 @@ class KptDataView {
11083
11139
  i0.ɵɵrepeater(ctx.pageItems());
11084
11140
  i0.ɵɵadvance(3);
11085
11141
  i0.ɵɵconditional(ctx.showPager() ? 13 : -1);
11086
- } }, dependencies: [NgTemplateOutlet, KptIcon, KptPaginator], styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-view__switch{display:inline-flex;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active{background:var(--%NS%kpt-color-primary);color:var(--%NS%kpt-color-on-primary)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__item{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--%NS%kpt-space-6, 1.5rem);text-align:center;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-view kpt-paginator{margin-top:var(--%NS%kpt-space-3, .75rem);display:block}}\n"], encapsulation: 2 }); }
11142
+ } }, dependencies: [NgTemplateOutlet, KptIcon, KptPaginator], styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-view__switch{display:inline-flex;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active{background:var(--%NS%kpt-color-primary);color:var(--%NS%kpt-color-on-primary)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__item{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--%NS%kpt-space-6, 1.5rem);text-align:center;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-view .kpt-paginator{margin-top:var(--%NS%kpt-space-3, .75rem);display:block}}\n"], encapsulation: 2 }); }
11087
11143
  }
11088
11144
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDataView, [{
11089
11145
  type: Component,
@@ -11111,7 +11167,7 @@ class KptDataView {
11111
11167
  <kpt-paginator [length]="items().length" [(pageIndex)]="pageIndex" [pageSize]="pageSize()" [pageSizeOptions]="[pageSize()]" />
11112
11168
  }
11113
11169
  </div>
11114
- `, host: { class: 'kpt-data-view-host' }, styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-view__switch{display:inline-flex;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active{background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--kpt-space-3, .75rem)}.kpt-data-view__item{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--kpt-space-6, 1.5rem);text-align:center;color:var(--kpt-color-on-surface-muted)}.kpt-data-view kpt-paginator{margin-top:var(--kpt-space-3, .75rem);display:block}}\n"] }]
11170
+ `, host: { class: 'kpt-data-view-host' }, styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-view__switch{display:inline-flex;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active{background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--kpt-space-3, .75rem)}.kpt-data-view__item{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--kpt-space-6, 1.5rem);text-align:center;color:var(--kpt-color-on-surface-muted)}.kpt-data-view .kpt-paginator{margin-top:var(--kpt-space-3, .75rem);display:block}}\n"] }]
11115
11171
  }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }] }); })();
11116
11172
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataView, { className: "KptDataView", filePath: "lib/data-view/data-view.component.ts", lineNumber: 49 }); })();
11117
11173
 
@@ -11246,7 +11302,7 @@ class KptPickList {
11246
11302
  i0.ɵɵtextInterpolate(ctx.effectiveTargetHeader());
11247
11303
  i0.ɵɵadvance(2);
11248
11304
  i0.ɵɵrepeater(ctx.target());
11249
- } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-variant);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--%NS%kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__item{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 16%,transparent);color:var(--%NS%kpt-color-primary)}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__controls button kpt-icon+kpt-icon{margin-left:-.5rem}}\n"], encapsulation: 2 }); }
11305
+ } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-variant);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--%NS%kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__item{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 16%,transparent);color:var(--%NS%kpt-color-primary)}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__controls button .kpt-icon-host+.kpt-icon-host{margin-left:-.5rem}}\n"], encapsulation: 2 }); }
11250
11306
  }
11251
11307
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptPickList, [{
11252
11308
  type: Component,
@@ -11281,7 +11337,7 @@ class KptPickList {
11281
11337
  </ul>
11282
11338
  </div>
11283
11339
  </div>
11284
- `, host: { class: 'kpt-pick-list-host' }, styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);font-weight:var(--kpt-font-weight-semibold, 600);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__item{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--kpt-color-primary) 16%,transparent);color:var(--kpt-color-primary)}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--kpt-color-muted)}.kpt-pick-list__controls button kpt-icon+kpt-icon{margin-left:-.5rem}}\n"] }]
11340
+ `, host: { class: 'kpt-pick-list-host' }, styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);font-weight:var(--kpt-font-weight-semibold, 600);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__item{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--kpt-color-primary) 16%,transparent);color:var(--kpt-color-primary)}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--kpt-color-muted)}.kpt-pick-list__controls button .kpt-icon-host+.kpt-icon-host{margin-left:-.5rem}}\n"] }]
11285
11341
  }], null, { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
11286
11342
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPickList, { className: "KptPickList", filePath: "lib/pick-list/pick-list.component.ts", lineNumber: 55 }); })();
11287
11343
 
@@ -11897,13 +11953,30 @@ class KptMenu {
11897
11953
  this.items = input([], /* @ts-ignore */
11898
11954
  ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
11899
11955
  this.selected = output();
11900
- this.open = signal(false, /* @ts-ignore */
11956
+ /**
11957
+ * Czy panel jest otwarty (dwukierunkowe). Publiczne, bo aplikacja bywa właścicielem tego
11958
+ * stanu — zamknięcie menu po nawigacji albo otwarcie go skrótem klawiaturowym nie da się
11959
+ * wyrazić przez samo `(selected)`. Port React ma tu `open`/`defaultOpen`/`onOpenChange`.
11960
+ */
11961
+ this.open = model(false, /* @ts-ignore */
11901
11962
  ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
11963
+ this.host = inject(ElementRef);
11902
11964
  this.positions = [
11903
11965
  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
11904
11966
  { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
11905
11967
  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
11906
11968
  ];
11969
+ // ARIA idzie na kontrolkę wewnątrz slotu, nie na `.kpt-menu__trigger`. Trigger to zwykły
11970
+ // `<span>` opakowujący rzutowaną treść — zwykle `kpt-button` z prawdziwym `<button>`.
11971
+ // Nadanie mu `role="button"` zrobiłoby zagnieżdżoną kontrolkę i drugi tab stop, a atrybuty
11972
+ // stanu wylądowałyby na elemencie bez roli (naruszenie `aria-allowed-attr`).
11973
+ afterRenderEffect(() => {
11974
+ const control = this.host.nativeElement.querySelector('.kpt-menu__trigger button, .kpt-menu__trigger a, .kpt-menu__trigger [role="button"]');
11975
+ if (!control)
11976
+ return;
11977
+ control.setAttribute('aria-haspopup', 'menu');
11978
+ control.setAttribute('aria-expanded', String(this.open()));
11979
+ });
11907
11980
  }
11908
11981
  toggle() {
11909
11982
  this.open.update((o) => !o);
@@ -11918,7 +11991,7 @@ class KptMenu {
11918
11991
  this.close();
11919
11992
  }
11920
11993
  static { this.ɵfac = function KptMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMenu)(); }; }
11921
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMenu, selectors: [["kpt-menu"]], hostAttrs: [1, "kpt-menu-host"], inputs: { items: [1, "items"] }, outputs: { selected: "selected" }, 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) {
11994
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMenu, selectors: [["kpt-menu"]], hostAttrs: [1, "kpt-menu-host"], inputs: { items: [1, "items"], open: [1, "open"] }, outputs: { selected: "selected", open: "openChange" }, 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) {
11922
11995
  i0.ɵɵprojectionDef();
11923
11996
  i0.ɵɵelementStart(0, "span", 1, 0);
11924
11997
  i0.ɵɵlistener("click", function KptMenu_Template_span_click_0_listener() { return ctx.toggle(); });
@@ -11930,7 +12003,7 @@ class KptMenu {
11930
12003
  const origin_r4 = i0.ɵɵreference(1);
11931
12004
  i0.ɵɵadvance(3);
11932
12005
  i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r4)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
11933
- } }, 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 }); }
12006
+ } }, 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-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__item--danger .kpt-icon-host{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-host{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 }); }
11934
12007
  }
11935
12008
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptMenu, [{
11936
12009
  type: Component,
@@ -11992,9 +12065,9 @@ class KptMenu {
11992
12065
  }
11993
12066
  </div>
11994
12067
  </ng-template>
11995
- `, 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"] }]
11996
- }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] }); })();
11997
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber: 116 }); })();
12068
+ `, 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-host{color:var(--kpt-color-on-surface-muted)}.kpt-menu__item--danger .kpt-icon-host{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-host{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"] }]
12069
+ }], () => [], { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
12070
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber: 126 }); })();
11998
12071
 
11999
12072
  const _c0$4 = [[["", "kptPopoverTrigger", ""]], "*"];
12000
12073
  const _c1 = ["[kptPopoverTrigger]", "*"];
@@ -12488,7 +12561,7 @@ class KptContextMenu {
12488
12561
  } if (rf & 2) {
12489
12562
  i0.ɵɵadvance(2);
12490
12563
  i0.ɵɵconditional(ctx.open() ? 2 : -1);
12491
- } }, 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 }); }
12564
+ } }, 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-host{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 }); }
12492
12565
  }
12493
12566
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptContextMenu, [{
12494
12567
  type: Component,
@@ -12550,7 +12623,7 @@ class KptContextMenu {
12550
12623
  }
12551
12624
  </div>
12552
12625
  }
12553
- `, 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"] }]
12626
+ `, 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-host{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"] }]
12554
12627
  }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] }); })();
12555
12628
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptContextMenu, { className: "KptContextMenu", filePath: "lib/context-menu/context-menu.component.ts", lineNumber: 82 }); })();
12556
12629
 
@@ -13227,5 +13300,5 @@ class KptSpeedDial {
13227
13300
  * Generated bundle index. Do not edit.
13228
13301
  */
13229
13302
 
13230
- export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, 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 };
13303
+ export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, 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, provideKptIcons };
13231
13304
  //# sourceMappingURL=konce-pt-angular.mjs.map