@konce-pt/angular 0.3.0 → 0.4.0

package/dist/fesm2022/konce-pt-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, afterNextRender, numberAttribute, viewChild, Directive, DestroyRef, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, InjectionToken, signal, inject, Injectable, ElementRef, effect, makeEnvironmentProviders, afterNextRender, numberAttribute, viewChild, Directive, DestroyRef, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 
@@ -210,6 +210,468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, host: { class: 'kpt-fab-host' }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--kpt-radius-lg, .75rem);background:var(--_bg);color:var(--_fg);box-shadow:var(--kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--kpt-font-weight-medium, 500);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),box-shadow var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-fab:hover:not(:disabled){background:var(--_bg-hover);box-shadow:var(--kpt-elevation-4)}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.kpt-fab[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--kpt-space-5, 1.25rem);font-size:var(--kpt-font-size-sm, .875rem);border-radius:var(--kpt-radius-full, 9999px)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/** Token konfiguracji i18n. Konsumowany przez `KptI18n`. */
+const KPT_I18N_CONFIG = new InjectionToken('KPT_I18N_CONFIG');
+
+/*
+ * Kontrakt tłumaczeń Koncept UI + słowniki bazowe (EN, PL).
+ *
+ * Plik jest celowo wolny od zależności Angulara — to czysty TypeScript/JSON.
+ * Dzięki temu ten sam kontrakt (`KptMessages`) i te same słowniki przenoszą się
+ * 1:1 do przyszłego portu React (Context + hook zamiast DI).
+ *
+ * Autor nowego języka wypełnia strukturę `KptMessages` (np. `de.json`) i podaje
+ * ją przez `provideKptI18n({ locale: 'de', messages: { de } })`. Brakujące klucze
+ * spadają na fallback EN.
+ */
+const KPT_MESSAGES_EN = {
+    common: {
+        close: 'Close',
+        remove: 'Remove',
+        previous: 'Previous',
+        next: 'Next',
+        clear: 'Clear',
+        done: 'Done',
+        all: 'All',
+    },
+    paginator: {
+        rowsPerPage: 'Rows:',
+        range: '{start}–{end} of {total}',
+        prevPage: 'Previous page',
+        nextPage: 'Next page',
+    },
+    select: {
+        search: 'Search…',
+        noResults: 'No results',
+        removeChip: 'Remove',
+    },
+    listbox: {
+        search: 'Search…',
+        empty: 'No items',
+    },
+    dataView: {
+        list: 'List',
+        grid: 'Grid',
+        empty: 'No items',
+        count: '{count} items',
+    },
+    dataTable: {
+        search: 'Search…',
+        exportCsv: 'Export CSV',
+        loading: 'Loading…',
+        empty: 'No data',
+        selectAll: 'Select all',
+        selectRow: 'Select row',
+        expandRow: 'Expand row',
+        filter: 'Filter: {column}',
+        filterMin: 'Filter min: {column}',
+        filterMax: 'Filter max: {column}',
+        all: 'All',
+        dateRange: 'Date range',
+        min: 'min',
+        max: 'max',
+    },
+    confirm: {
+        header: 'Confirmation',
+        accept: 'Confirm',
+        reject: 'Cancel',
+    },
+    fileUpload: {
+        hint: '<strong>Click</strong> or drag files here',
+        remove: 'Remove',
+    },
+    chipsInput: {
+        placeholder: 'Add and press Enter…',
+    },
+    dateRange: {
+        placeholder: 'Select range',
+        from: 'From',
+        to: 'To',
+        fromTime: 'From (time)',
+        toTime: 'To (time)',
+    },
+    datepicker: {
+        prevMonth: 'Previous month',
+        nextMonth: 'Next month',
+        prevYear: 'Previous year',
+        nextYear: 'Next year',
+        prevYears: 'Previous years',
+        nextYears: 'Next years',
+        calendar: 'Calendar',
+        month: 'Month',
+        time: 'Time',
+    },
+    pickList: {
+        available: 'Available',
+        selected: 'Selected',
+        moveAllRight: 'Move all right',
+        moveRight: 'Move right',
+        moveLeft: 'Move left',
+        moveAllLeft: 'Move all left',
+    },
+    orderList: {
+        up: 'Up',
+        down: 'Down',
+    },
+    inputNumber: {
+        decrement: 'Decrease',
+        increment: 'Increase',
+    },
+    password: {
+        show: 'Show password',
+        hide: 'Hide password',
+        strength: ['Very weak', 'Weak', 'Medium', 'Good', 'Strong'],
+    },
+    spinner: {
+        label: 'Loading',
+    },
+    speedDial: {
+        actions: 'Actions',
+    },
+    scrollTop: {
+        label: 'Scroll to top',
+    },
+    splitButton: {
+        more: 'More actions',
+    },
+    panel: {
+        toggle: 'Collapse / expand',
+    },
+    breadcrumb: {
+        label: 'breadcrumb',
+    },
+    galleria: {
+        image: 'Image {index}',
+    },
+    carousel: {
+        slide: 'Slide {index}',
+    },
+    richText: {
+        copy: 'Copy',
+        paste: 'Paste with formatting',
+        pasteText: 'Paste without formatting',
+        heading: 'Style',
+        bold: 'Bold',
+        italic: 'Italic',
+        underline: 'Underline',
+        strike: 'Strikethrough',
+        ul: 'Bulleted list',
+        ol: 'Numbered list',
+        foreColor: 'Text color',
+        backColor: 'Text background color',
+        alignLeft: 'Align left',
+        alignCenter: 'Center',
+        alignRight: 'Align right',
+        alignJustify: 'Justify',
+        link: 'Insert link',
+        table: 'Table',
+        clear: 'Clear formatting',
+        html: 'HTML preview',
+        styleNormal: 'Normal',
+        styleHeading: 'Heading {level}',
+        linkPrompt: 'URL:',
+        htmlSource: 'HTML source',
+        paletteCustom: 'Custom…',
+        menu: {
+            column: 'Column',
+            row: 'Row',
+            cell: 'Cell',
+            insertLeft: 'Insert left',
+            insertRight: 'Insert right',
+            headerColumn: 'Header column',
+            deleteColumn: 'Delete column',
+            insertAbove: 'Insert above',
+            insertBelow: 'Insert below',
+            headerRow: 'Header row',
+            deleteRow: 'Delete row',
+            cellBackground: 'Background color',
+            alignLeft: 'Left',
+            alignCenter: 'Center',
+            alignRight: 'Right',
+            mergeCells: 'Merge cells',
+            splitCell: 'Split cell',
+            border: 'Border…',
+            deleteTable: 'Delete table',
+        },
+        border: {
+            table: 'Table',
+            cell: 'Cell',
+            none: 'None',
+            thin: 'Thin',
+            medium: 'Medium',
+            thick: 'Thick',
+            customColor: 'Color…',
+        },
+    },
+};
+const KPT_MESSAGES_PL = {
+    common: {
+        close: 'Zamknij',
+        remove: 'Usuń',
+        previous: 'Poprzedni',
+        next: 'Następny',
+        clear: 'Wyczyść',
+        done: 'Gotowe',
+        all: 'Wszystkie',
+    },
+    paginator: {
+        rowsPerPage: 'Wierszy:',
+        range: '{start}–{end} z {total}',
+        prevPage: 'Poprzednia strona',
+        nextPage: 'Następna strona',
+    },
+    select: {
+        search: 'Szukaj…',
+        noResults: 'Brak wyników',
+        removeChip: 'Usuń',
+    },
+    listbox: {
+        search: 'Szukaj…',
+        empty: 'Brak pozycji',
+    },
+    dataView: {
+        list: 'Lista',
+        grid: 'Siatka',
+        empty: 'Brak elementów',
+        count: '{count} elementów',
+    },
+    dataTable: {
+        search: 'Szukaj…',
+        exportCsv: 'Eksport CSV',
+        loading: 'Ładowanie…',
+        empty: 'Brak danych',
+        selectAll: 'Zaznacz wszystkie',
+        selectRow: 'Zaznacz wiersz',
+        expandRow: 'Rozwiń wiersz',
+        filter: 'Filtr: {column}',
+        filterMin: 'Filtr min: {column}',
+        filterMax: 'Filtr max: {column}',
+        all: 'Wszystkie',
+        dateRange: 'Zakres dat',
+        min: 'min',
+        max: 'max',
+    },
+    confirm: {
+        header: 'Potwierdzenie',
+        accept: 'Potwierdź',
+        reject: 'Anuluj',
+    },
+    fileUpload: {
+        hint: '<strong>Kliknij</strong> lub przeciągnij pliki tutaj',
+        remove: 'Usuń',
+    },
+    chipsInput: {
+        placeholder: 'Dodaj i naciśnij Enter…',
+    },
+    dateRange: {
+        placeholder: 'Wybierz zakres',
+        from: 'Od',
+        to: 'Koniec',
+        fromTime: 'Od (godzina)',
+        toTime: 'Koniec (godzina)',
+    },
+    datepicker: {
+        prevMonth: 'Poprzedni miesiąc',
+        nextMonth: 'Następny miesiąc',
+        prevYear: 'Poprzedni rok',
+        nextYear: 'Następny rok',
+        prevYears: 'Poprzednie lata',
+        nextYears: 'Następne lata',
+        calendar: 'Kalendarz',
+        month: 'Miesiąc',
+        time: 'Godzina',
+    },
+    pickList: {
+        available: 'Dostępne',
+        selected: 'Wybrane',
+        moveAllRight: 'Przenieś wszystko w prawo',
+        moveRight: 'Przenieś w prawo',
+        moveLeft: 'Przenieś w lewo',
+        moveAllLeft: 'Przenieś wszystko w lewo',
+    },
+    orderList: {
+        up: 'W górę',
+        down: 'W dół',
+    },
+    inputNumber: {
+        decrement: 'Zmniejsz',
+        increment: 'Zwiększ',
+    },
+    password: {
+        show: 'Pokaż hasło',
+        hide: 'Ukryj hasło',
+        strength: ['Bardzo słabe', 'Słabe', 'Średnie', 'Dobre', 'Silne'],
+    },
+    spinner: {
+        label: 'Ładowanie',
+    },
+    speedDial: {
+        actions: 'Akcje',
+    },
+    scrollTop: {
+        label: 'Przewiń do góry',
+    },
+    splitButton: {
+        more: 'Więcej akcji',
+    },
+    panel: {
+        toggle: 'Zwiń / rozwiń',
+    },
+    breadcrumb: {
+        label: 'breadcrumb',
+    },
+    galleria: {
+        image: 'Obraz {index}',
+    },
+    carousel: {
+        slide: 'Slajd {index}',
+    },
+    richText: {
+        copy: 'Kopiuj',
+        paste: 'Wklej z formatowaniem',
+        pasteText: 'Wklej bez formatowania',
+        heading: 'Styl',
+        bold: 'Pogrubienie',
+        italic: 'Kursywa',
+        underline: 'Podkreślenie',
+        strike: 'Przekreślenie',
+        ul: 'Lista punktowana',
+        ol: 'Lista numerowana',
+        foreColor: 'Kolor tekstu',
+        backColor: 'Kolor tła tekstu',
+        alignLeft: 'Wyrównaj do lewej',
+        alignCenter: 'Wyśrodkuj',
+        alignRight: 'Wyrównaj do prawej',
+        alignJustify: 'Wyjustuj',
+        link: 'Wstaw link',
+        table: 'Tabela',
+        clear: 'Usuń formatowanie',
+        html: 'Podgląd HTML',
+        styleNormal: 'Normalny',
+        styleHeading: 'Nagłówek {level}',
+        linkPrompt: 'Adres URL:',
+        htmlSource: 'Źródło HTML',
+        paletteCustom: 'Własny…',
+        menu: {
+            column: 'Kolumna',
+            row: 'Wiersz',
+            cell: 'Komórka',
+            insertLeft: 'Wstaw z lewej',
+            insertRight: 'Wstaw z prawej',
+            headerColumn: 'Nagłówek kolumny',
+            deleteColumn: 'Usuń kolumnę',
+            insertAbove: 'Wstaw powyżej',
+            insertBelow: 'Wstaw poniżej',
+            headerRow: 'Nagłówek wiersza',
+            deleteRow: 'Usuń wiersz',
+            cellBackground: 'Kolor tła',
+            alignLeft: 'Do lewej',
+            alignCenter: 'Wyśrodkuj',
+            alignRight: 'Do prawej',
+            mergeCells: 'Scal komórki',
+            splitCell: 'Podziel komórkę',
+            border: 'Obramowanie…',
+            deleteTable: 'Usuń tabelę',
+        },
+        border: {
+            table: 'Tabela',
+            cell: 'Komórka',
+            none: 'Bez',
+            thin: 'Cienkie',
+            medium: 'Średnie',
+            thick: 'Grube',
+            customColor: 'Kolor…',
+        },
+    },
+};
+
+/** Deep-merge `patch` na kopię `base` (łączy tylko obiekty, wartości nadpisuje). */
+function deepMerge(base, patch) {
+    const out = { ...base };
+    for (const [key, value] of Object.entries(patch)) {
+        const current = out[key];
+        if (value && typeof value === 'object' && !Array.isArray(value) && current && typeof current === 'object') {
+            out[key] = deepMerge(current, value);
+        }
+        else if (value !== undefined) {
+            out[key] = value;
+        }
+    }
+    return out;
+}
+/**
+ * Serwis tłumaczeń Koncept UI. Trzyma rejestr słowników per język, bieżący locale
+ * (sygnał) i funkcję `t()` z interpolacją. Skonfiguruj przez `provideKptI18n(...)`.
+ *
+ * Domyślnie EN. Języki bazowe: EN, PL. Dowolny inny język dodaje się jednym
+ * słownikiem (`registerMessages` lub `provideKptI18n({ messages: { de } })`);
+ * brakujące klucze spadają na EN.
+ */
+class KptI18n {
+    /** Rejestr słowników: język → pełny `KptMessages`. */
+    registry = new Map([
+        ['en', KPT_MESSAGES_EN],
+        ['pl', KPT_MESSAGES_PL],
+    ]);
+    _locale = signal('en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
+    /** Bieżący język (tylko do odczytu). */
+    locale = this._locale.asReadonly();
+    /** Aktywny słownik (z fallbackiem na EN, gdy język nieznany). */
+    messages = computed(() => this.registry.get(this._locale()) ?? KPT_MESSAGES_EN, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const config = inject(KPT_I18N_CONFIG, { optional: true });
+        if (config?.messages) {
+            for (const [locale, patch] of Object.entries(config.messages)) {
+                this.registerMessages(locale, patch);
+            }
+        }
+        if (config?.locale)
+            this._locale.set(config.locale);
+    }
+    /** Ustawia bieżący język. Zmiana jest reaktywna dla wszystkich komponentów. */
+    setLocale(locale) {
+        this._locale.set(locale);
+    }
+    /**
+     * Rejestruje lub nadpisuje słownik języka. Częściowy słownik deep-merge'uje się
+     * na istniejący (lub EN dla nowego języka) → brakujące klucze mają wartość EN.
+     */
+    registerMessages(locale, patch) {
+        const base = this.registry.get(locale) ?? KPT_MESSAGES_EN;
+        this.registry.set(locale, deepMerge(base, patch));
+    }
+    /**
+     * Tłumaczy klucz w notacji kropkowej (np. `'paginator.range'`), z opcjonalną
+     * interpolacją `{name}`. Brakujący klucz spada na EN, a w ostateczności zwraca sam klucz.
+     */
+    t(key, params) {
+        const raw = this.lookup(this.messages(), key) ?? this.lookup(KPT_MESSAGES_EN, key) ?? key;
+        if (!params)
+            return raw;
+        return raw.replace(/\{(\w+)\}/g, (_, name) => String(params[name] ?? `{${name}}`));
+    }
+    lookup(dict, key) {
+        let node = dict;
+        for (const part of key.split('.')) {
+            if (node && typeof node === 'object' && part in node) {
+                node = node[part];
+            }
+            else {
+                return undefined;
+            }
+        }
+        return typeof node === 'string' ? node : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptI18n, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptI18n, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 const KPT_ICONS = {
     'menu': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" />',
     'x': '<path d="M18 6l-12 12" /> <path d="M6 6l12 12" />',
@@ -356,6 +818,7 @@ class KptSplitButton {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     primaryClick = output();
     select = output();
+    i18n = inject(KptI18n);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     positions = [
@@ -381,7 +844,7 @@ class KptSplitButton {
         #origin="cdkOverlayOrigin"
         [disabled]="disabled()"
         (click)="open.set(!open())"
-        aria-label="Więcej akcji"
+        [attr.aria-label]="i18n.t('splitButton.more')"
       ><kpt-icon name="chevron-down" /></button>
     </div>
 
@@ -429,7 +892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         #origin="cdkOverlayOrigin"
         [disabled]="disabled()"
         (click)="open.set(!open())"
-        aria-label="Więcej akcji"
+        [attr.aria-label]="i18n.t('splitButton.more')"
       ><kpt-icon name="chevron-down" /></button>
     </div>
 
@@ -464,6 +927,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, host: { class: 'kpt-split-button-host' }, styles: ["@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;border-radius:var(--kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--_bg);color:var(--_fg);cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);height:2.5rem;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-split-button__main:hover:not(:disabled),.kpt-split-button__toggle:hover:not(:disabled){background:var(--_bg-hover)}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}.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__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], primaryClick: [{ type: i0.Output, args: ["primaryClick"] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
+/**
+ * Konfiguruje i18n Koncept UI. Ustawia język początkowy i rejestruje/nadpisuje
+ * słowniki. Języki bazowe (EN, PL) są dostępne bez konfiguracji.
+ *
+ * @example
+ * // main.ts — polski interfejs
+ * bootstrapApplication(App, {
+ *   providers: [provideKptI18n({ locale: 'pl' })],
+ * });
+ *
+ * @example
+ * // Własny język jednym plikiem JSON (brakujące klucze → EN)
+ * import de from './i18n/de.json';
+ * provideKptI18n({ locale: 'de', messages: { de } });
+ *
+ * @example
+ * // Nadpisanie pojedynczych etykiet istniejącego języka
+ * provideKptI18n({ messages: { en: { paginator: { rowsPerPage: 'Rows per page:' } } } });
+ */
+function provideKptI18n(config = {}) {
+    return makeEnvironmentProviders([{ provide: KPT_I18N_CONFIG, useValue: config }]);
+}
+
 /**
  * Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
  *
@@ -525,6 +1011,7 @@ class KptChip {
     removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     removed = output();
+    i18n = inject(KptI18n);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptChip, isStandalone: true, selector: "kpt-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { classAttribute: "kpt-chip-host" }, ngImport: i0, template: `
     <span class="kpt-chip" [attr.data-variant]="variant()" [class.kpt-chip--disabled]="disabled()">
@@ -535,7 +1022,7 @@ class KptChip {
           class="kpt-chip__remove"
           [disabled]="disabled()"
           (click)="removed.emit()"
-          aria-label="Usuń"
+          [attr.aria-label]="i18n.t('common.remove')"
         ><kpt-icon name="x" /></button>
       }
     </span>
@@ -552,7 +1039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           class="kpt-chip__remove"
           [disabled]="disabled()"
           (click)="removed.emit()"
-          aria-label="Usuń"
+          [attr.aria-label]="i18n.t('common.remove')"
         ><kpt-icon name="x" /></button>
       }
     </span>
@@ -623,14 +1110,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class KptSpinner {
     size = input('1.5rem', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    label = input('Ładowanie', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etykieta a11y; bez wartości używa i18n (`spinner.label`). */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
+    effectiveLabel = computed(() => this.label() ?? this.i18n.t('spinner.label'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: KptSpinner, isStandalone: true, selector: "kpt-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-spinner-host" }, ngImport: i0, template: `<span class="kpt-spinner" role="status" [attr.aria-label]="label()" [style.width]="size()" [style.height]="size()"></span>`, isInline: true, styles: ["@layer kpt.components{.kpt-spinner-host{display:inline-flex;vertical-align:middle;color:var(--kpt-color-primary)}.kpt-spinner{display:inline-block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}@keyframes kpt-spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.kpt-spinner{animation-duration:1.4s}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: KptSpinner, isStandalone: true, selector: "kpt-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-spinner-host" }, ngImport: i0, template: `<span class="kpt-spinner" role="status" [attr.aria-label]="effectiveLabel()" [style.width]="size()" [style.height]="size()"></span>`, isInline: true, styles: ["@layer kpt.components{.kpt-spinner-host{display:inline-flex;vertical-align:middle;color:var(--kpt-color-primary)}.kpt-spinner{display:inline-block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}@keyframes kpt-spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.kpt-spinner{animation-duration:1.4s}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSpinner, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<span class="kpt-spinner" role="status" [attr.aria-label]="label()" [style.width]="size()" [style.height]="size()"></span>`, host: { class: 'kpt-spinner-host' }, styles: ["@layer kpt.components{.kpt-spinner-host{display:inline-flex;vertical-align:middle;color:var(--kpt-color-primary)}.kpt-spinner{display:inline-block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}@keyframes kpt-spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.kpt-spinner{animation-duration:1.4s}}}\n"] }]
+            args: [{ selector: 'kpt-spinner', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<span class="kpt-spinner" role="status" [attr.aria-label]="effectiveLabel()" [style.width]="size()" [style.height]="size()"></span>`, host: { class: 'kpt-spinner-host' }, styles: ["@layer kpt.components{.kpt-spinner-host{display:inline-flex;vertical-align:middle;color:var(--kpt-color-primary)}.kpt-spinner{display:inline-block;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}@keyframes kpt-spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.kpt-spinner{animation-duration:1.4s}}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -1229,6 +1720,7 @@ class KptSelect {
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     touch = output();
+    i18n = inject(KptI18n);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     filterText = signal('', /* @ts-ignore */
@@ -1334,13 +1826,30 @@ class KptSelect {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSelect, isStandalone: true, selector: "kpt-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-select-host" }, ngImport: i0, 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]=\"invalid()\"\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)\" aria-label=\"Usu\u0144\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && hasValue()) {\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          placeholder=\"Szukaj\u2026\"\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\">Brak wynik\u00F3w</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"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSelect, isStandalone: true, selector: "kpt-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-select-host" }, ngImport: i0, 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]=\"invalid()\"\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() && hasValue()) {\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"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, 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]=\"invalid()\"\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)\" aria-label=\"Usu\u0144\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && hasValue()) {\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          placeholder=\"Szukaj\u2026\"\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\">Brak wynik\u00F3w</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"] }]
+            args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, 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]=\"invalid()\"\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() && hasValue()) {\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"] }]
         }], propDecorators: { 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"] }] } });
 
+/*
+ * Pomocniki nazw dni/miesięcy wyliczane z `Intl` — sterowane bieżącym locale i18n.
+ * Dzięki temu kalendarze (`kpt-datepicker`, `kpt-date-range`) nie trzymają
+ * zaszytych tablic nazw i działają dla dowolnego języka.
+ */
+/** Krótkie nazwy dni tygodnia, zaczynając od poniedziałku (Pn…Nd). */
+function weekdayNames(locale) {
+    const fmt = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+    // 2024-01-01 (UTC) to poniedziałek.
+    return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2024, 0, 1 + i))));
+}
+/** Pełne nazwy miesięcy (styczeń…grudzień / January…December). */
+function monthNames(locale) {
+    const fmt = new Intl.DateTimeFormat(locale, { month: 'long' });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(Date.UTC(2024, i, 1))));
+}
+
 const R_OUTER = 40;
 const R_INNER = 26;
 const pad$2 = (n) => String(n).padStart(2, '0');
@@ -1622,11 +2131,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, host: { class: 'kpt-clock-host' }, styles: ["@layer kpt.components{.kpt-clock-host{display:block}.kpt-clock__time{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-1, .25rem);margin-bottom:var(--kpt-space-3, .75rem);font-variant-numeric:tabular-nums}.kpt-clock__seg{border:0;background:none;padding:.1rem .4rem;border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-2xl, 1.5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-clock__seg.is-active{color:var(--kpt-color-primary);background:var(--kpt-color-muted)}.kpt-clock__colon{font-size:var(--kpt-font-size-2xl, 1.5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted)}.kpt-clock__ampm{display:flex;flex-direction:column;gap:2px;margin-inline-start:var(--kpt-space-2, .5rem)}.kpt-clock__ampm button{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.1rem .4rem;border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-clock__ampm button.is-active{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-clock__face{position:relative;width:13rem;max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:50%;background:var(--kpt-color-surface-variant);touch-action:none;-webkit-user-select:none;user-select:none}.kpt-clock__center{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--kpt-color-primary);z-index:2}.kpt-clock__hand{position:absolute;left:50%;bottom:50%;width:2px;height:40%;margin-left:-1px;transform-origin:bottom center;background:var(--kpt-color-primary);z-index:1}.kpt-clock__hand--inner{height:26%}.kpt-clock__hand:before{content:\"\";position:absolute;top:-3px;left:50%;width:8px;height:8px;transform:translate(-50%);border-radius:50%;background:var(--kpt-color-primary)}.kpt-clock__num{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:50%;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;z-index:2}.kpt-clock__num:hover{background:var(--kpt-color-muted)}.kpt-clock__num--inner{width:1.6rem;height:1.6rem;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-clock__num--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] } });
 
-const WEEKDAYS$1 = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
-const MONTHS$1 = [
-    'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec',
-    'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień',
-];
 const pad$1 = (n) => String(n).padStart(2, '0');
 const toIso$1 = (d) => `${d.getFullYear()}-${pad$1(d.getMonth() + 1)}-${pad$1(d.getDate())}`;
 /**
@@ -1675,14 +2179,18 @@ class KptDatepicker {
         switch (this.selectionMode()) {
             case 'monthYear': return iso ? 'RRRR-MM' : 'MM.RRRR';
             case 'year': return 'RRRR';
-            case 'month': return this.monthDisplay() === 'number' ? 'MM' : 'Miesiąc';
+            case 'month': return this.monthDisplay() === 'number' ? 'MM' : this.i18n.t('datepicker.month');
             case 'time': return time;
             case 'datetime': return `${iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR'} ${time}`;
             default: return iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR';
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
-    weekdays = WEEKDAYS$1;
+    i18n = inject(KptI18n);
+    weekdays = computed(() => weekdayNames(this.i18n.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    months = computed(() => monthNames(this.i18n.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     today = new Date();
@@ -1703,7 +2211,7 @@ class KptDatepicker {
     ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
     monthLabel = computed(() => {
         const { y, m } = this.view();
-        return `${MONTHS$1[m]} ${y}`;
+        return `${this.months()[m]} ${y}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
     yearPageStart = computed(() => {
@@ -1743,7 +2251,7 @@ class KptDatepicker {
                 const m = /^(\d{2})$/.exec(v);
                 if (!m)
                     return '';
-                return this.monthDisplay() === 'number' ? m[1] : (MONTHS$1[+m[1] - 1] ?? '');
+                return this.monthDisplay() === 'number' ? m[1] : (this.months()[+m[1] - 1] ?? '');
             }
             case 'time': {
                 const t = this.parseTime(v);
@@ -1804,7 +2312,7 @@ class KptDatepicker {
         const sel = this.value();
         const isMonthOnly = this.selectionMode() === 'month';
         const numeric = this.monthDisplay() === 'number';
-        return MONTHS$1.map((name, i) => {
+        return this.months().map((name, i) => {
             const mm = pad$1(i + 1);
             const value = isMonthOnly ? mm : `${y}-${mm}`;
             return {
@@ -1974,11 +2482,11 @@ class KptDatepicker {
         this.pendingDate.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDatepicker, isStandalone: true, selector: "kpt-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, monthDisplay: { classPropertyName: "monthDisplay", publicName: "monthDisplay", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-datepicker-host" }, ngImport: i0, 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]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\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)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays; track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" aria-label=\"Kalendarz\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">Godzina</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" aria-label=\"Poprzedni rok\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" aria-label=\"Nast\u0119pny rok\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" aria-label=\"Poprzednie lata\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" aria-label=\"Nast\u0119pne lata\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">Miesi\u0105c</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays; track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptClock, selector: "kpt-clock", inputs: ["value", "hourFormat", "minuteStep"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDatepicker, isStandalone: true, selector: "kpt-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, monthDisplay: { classPropertyName: "monthDisplay", publicName: "monthDisplay", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-datepicker-host" }, ngImport: i0, 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]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\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 class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptClock, selector: "kpt-clock", inputs: ["value", "hourFormat", "minuteStep"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDatepicker, decorators: [{
             type: Component,
-            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]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\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)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays; track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" aria-label=\"Kalendarz\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">Godzina</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" aria-label=\"Poprzedni rok\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" aria-label=\"Nast\u0119pny rok\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" aria-label=\"Poprzednie lata\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" aria-label=\"Nast\u0119pne lata\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">Miesi\u0105c</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays; track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
+            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]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\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 class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
         }], propDecorators: { 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 }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] } });
 
 /**
@@ -2174,28 +2682,6 @@ const COMMAND = {
     alignJustify: 'justifyFull',
     clear: 'removeFormat',
 };
-const ARIA = {
-    copy: 'Kopiuj',
-    paste: 'Wklej z formatowaniem',
-    pasteText: 'Wklej bez formatowania',
-    heading: 'Styl',
-    bold: 'Pogrubienie',
-    italic: 'Kursywa',
-    underline: 'Podkreślenie',
-    strike: 'Przekreślenie',
-    ul: 'Lista punktowana',
-    ol: 'Lista numerowana',
-    foreColor: 'Kolor tekstu',
-    backColor: 'Kolor tła tekstu',
-    alignLeft: 'Wyrównaj do lewej',
-    alignCenter: 'Wyśrodkuj',
-    alignRight: 'Wyrównaj do prawej',
-    alignJustify: 'Wyjustuj',
-    link: 'Wstaw link',
-    table: 'Tabela',
-    clear: 'Usuń formatowanie',
-    html: 'Podgląd HTML',
-};
 const SWATCHES = [
     '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#ffffff',
     '#e11d48', '#ea580c', '#ca8a04', '#16a34a', '#0891b2', '#2563eb', '#7c3aed',
@@ -2240,6 +2726,7 @@ class KptRichText {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    i18n = inject(KptI18n);
     swatches = SWATCHES;
     editor = viewChild('editor', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
@@ -2278,16 +2765,17 @@ class KptRichText {
     selAnchor = null;
     selecting = false;
     canSplitCtx = false;
-    styleOptions = [
-        { tag: 'p', label: 'Normalny' },
-        { tag: 'h1', label: 'Nagłówek 1' },
-        { tag: 'h2', label: 'Nagłówek 2' },
-        { tag: 'h3', label: 'Nagłówek 3' },
-        { tag: 'h4', label: 'Nagłówek 4' },
-        { tag: 'h5', label: 'Nagłówek 5' },
-        { tag: 'h6', label: 'Nagłówek 6' },
-    ];
-    styleLabel = computed(() => this.styleOptions.find((o) => o.tag === this.currentBlock())?.label ?? 'Normalny', /* @ts-ignore */
+    styleOptions = computed(() => [
+        { tag: 'p', label: this.i18n.t('richText.styleNormal') },
+        { tag: 'h1', label: this.i18n.t('richText.styleHeading', { level: 1 }) },
+        { tag: 'h2', label: this.i18n.t('richText.styleHeading', { level: 2 }) },
+        { tag: 'h3', label: this.i18n.t('richText.styleHeading', { level: 3 }) },
+        { tag: 'h4', label: this.i18n.t('richText.styleHeading', { level: 4 }) },
+        { tag: 'h5', label: this.i18n.t('richText.styleHeading', { level: 5 }) },
+        { tag: 'h6', label: this.i18n.t('richText.styleHeading', { level: 6 }) },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleOptions" }] : /* istanbul ignore next */ []));
+    styleLabel = computed(() => this.styleOptions().find((o) => o.tag === this.currentBlock())?.label ?? this.i18n.t('richText.styleNormal'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "styleLabel" }] : /* istanbul ignore next */ []));
     activeCmds = signal(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeCmds" }] : /* istanbul ignore next */ []));
@@ -2330,7 +2818,7 @@ class KptRichText {
         return ICON[item];
     }
     aria(item) {
-        return ARIA[item];
+        return this.i18n.t(`richText.${item}`);
     }
     isActive(item) {
         if (item === 'html')
@@ -2409,7 +2897,7 @@ class KptRichText {
         this.focusEditor();
         switch (item) {
             case 'link': {
-                const url = window.prompt('Adres URL:');
+                const url = window.prompt(this.i18n.t('richText.linkPrompt'));
                 if (url)
                     document.execCommand('createLink', false, url);
                 break;
@@ -3014,11 +3502,11 @@ class KptRichText {
         return tpl.innerHTML;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRichText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptRichText, isStandalone: true, selector: "kpt-rich-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-rich-text-host" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kpt-rich-text\" [class.kpt-rich-text--invalid]=\"invalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions; track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      aria-label=\"\u0179r\u00F3d\u0142o HTML\"\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]=\"invalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">Kolumna</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> Wstaw z lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> Wstaw z prawej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek kolumny</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> Usu\u0144 kolumn\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Wiersz</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> Wstaw powy\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> Wstaw poni\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek wiersza</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> Usu\u0144 wiersz</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Kom\u00F3rka</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> Kolor t\u0142a</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> Do lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> Wy\u015Brodkuj</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> Do prawej</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\" /> Scal kom\u00F3rki</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> Podziel kom\u00F3rk\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> Obramowanie\u2026</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\" /> Usu\u0144 tabel\u0119</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')\">Tabela</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">Kom\u00F3rka</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">Bez</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">Cienkie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">\u015Arednie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">Grube</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>Kolor\u2026</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>W\u0142asny\u2026</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KptTooltip, selector: "[kptTooltip]", inputs: ["kptTooltip", "kptTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptRichText, isStandalone: true, selector: "kpt-rich-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-rich-text-host" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kpt-rich-text\" [class.kpt-rich-text--invalid]=\"invalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions(); track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      [attr.aria-label]=\"i18n.t('richText.htmlSource')\"\n      (input)=\"onSource($event)\"\n      (blur)=\"touch.emit()\"\n    ></textarea>\n  } @else {\n    <div\n      #editor\n      class=\"kpt-rich-text__editor\"\n      [attr.contenteditable]=\"disabled() ? 'false' : 'true'\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.column') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertRight') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerColumn') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteColumn') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.row') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertAbove') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertBelow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerRow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteRow') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.cell') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> {{ i18n.t('richText.menu.cellBackground') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> {{ i18n.t('richText.menu.alignLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> {{ i18n.t('richText.menu.alignCenter') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> {{ i18n.t('richText.menu.alignRight') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canMerge()\" (click)=\"mergeCells()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.mergeCells') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> {{ i18n.t('richText.menu.splitCell') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.border') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item kpt-rt-menu__item--danger\" (click)=\"deleteTable()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteTable') }}</button>\n    </div>\n  </ng-template>\n\n  <!-- Popover obramowania (tabela / kom\u00F3rka) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"borderOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeBorder()\"\n    (detach)=\"closeBorder()\"\n  >\n    <div class=\"kpt-rt-border\" (mousedown)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-border__seg\">\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'table'\" (click)=\"borderTarget.set('table')\">{{ i18n.t('richText.border.table') }}</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">{{ i18n.t('richText.border.cell') }}</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">{{ i18n.t('richText.border.none') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">{{ i18n.t('richText.border.thin') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">{{ i18n.t('richText.border.medium') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">{{ i18n.t('richText.border.thick') }}</button>\n      </div>\n      <div class=\"kpt-rich-text__swatches\">\n        @for (c of swatches; track c) {\n          <button type=\"button\" class=\"kpt-rich-text__swatch\" [style.background]=\"c\" [attr.aria-label]=\"c\" (click)=\"setBorderColor(c)\"></button>\n        }\n      </div>\n      <label class=\"kpt-rich-text__picker\">\n        <span>{{ i18n.t('richText.border.customColor') }}</span>\n        <input type=\"color\" (input)=\"onBorderColorInput($event)\" />\n      </label>\n    </div>\n  </ng-template>\n\n  <!-- Popover koloru t\u0142a kom\u00F3rki (z menu kontekstowego) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'cellBg'\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeColor()\"\n    (detach)=\"closeColor()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n  </ng-template>\n</div>\n\n<ng-template #paletteTpl>\n  <div class=\"kpt-rich-text__palette\" (mousedown)=\"$event.preventDefault()\">\n    <div class=\"kpt-rich-text__swatches\">\n      @for (c of swatches; track c) {\n        <button\n          type=\"button\"\n          class=\"kpt-rich-text__swatch\"\n          [style.background]=\"c\"\n          [attr.aria-label]=\"c\"\n          (click)=\"applyColor(c)\"\n        ></button>\n      }\n    </div>\n    <label class=\"kpt-rich-text__picker\">\n      <span>{{ i18n.t('richText.paletteCustom') }}</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KptTooltip, selector: "[kptTooltip]", inputs: ["kptTooltip", "kptTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRichText, decorators: [{
             type: Component,
-            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]=\"invalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions; track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      aria-label=\"\u0179r\u00F3d\u0142o HTML\"\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]=\"invalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">Kolumna</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> Wstaw z lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> Wstaw z prawej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek kolumny</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> Usu\u0144 kolumn\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Wiersz</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> Wstaw powy\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> Wstaw poni\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek wiersza</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> Usu\u0144 wiersz</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Kom\u00F3rka</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> Kolor t\u0142a</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> Do lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> Wy\u015Brodkuj</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> Do prawej</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\" /> Scal kom\u00F3rki</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> Podziel kom\u00F3rk\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> Obramowanie\u2026</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\" /> Usu\u0144 tabel\u0119</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')\">Tabela</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">Kom\u00F3rka</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">Bez</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">Cienkie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">\u015Arednie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">Grube</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>Kolor\u2026</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>W\u0142asny\u2026</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"] }]
+            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]=\"invalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions(); track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      [attr.aria-label]=\"i18n.t('richText.htmlSource')\"\n      (input)=\"onSource($event)\"\n      (blur)=\"touch.emit()\"\n    ></textarea>\n  } @else {\n    <div\n      #editor\n      class=\"kpt-rich-text__editor\"\n      [attr.contenteditable]=\"disabled() ? 'false' : 'true'\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.column') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertRight') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerColumn') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteColumn') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.row') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertAbove') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertBelow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerRow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteRow') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.cell') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> {{ i18n.t('richText.menu.cellBackground') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> {{ i18n.t('richText.menu.alignLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> {{ i18n.t('richText.menu.alignCenter') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> {{ i18n.t('richText.menu.alignRight') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canMerge()\" (click)=\"mergeCells()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.mergeCells') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> {{ i18n.t('richText.menu.splitCell') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.border') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item kpt-rt-menu__item--danger\" (click)=\"deleteTable()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteTable') }}</button>\n    </div>\n  </ng-template>\n\n  <!-- Popover obramowania (tabela / kom\u00F3rka) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"borderOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeBorder()\"\n    (detach)=\"closeBorder()\"\n  >\n    <div class=\"kpt-rt-border\" (mousedown)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-border__seg\">\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'table'\" (click)=\"borderTarget.set('table')\">{{ i18n.t('richText.border.table') }}</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">{{ i18n.t('richText.border.cell') }}</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">{{ i18n.t('richText.border.none') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">{{ i18n.t('richText.border.thin') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">{{ i18n.t('richText.border.medium') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">{{ i18n.t('richText.border.thick') }}</button>\n      </div>\n      <div class=\"kpt-rich-text__swatches\">\n        @for (c of swatches; track c) {\n          <button type=\"button\" class=\"kpt-rich-text__swatch\" [style.background]=\"c\" [attr.aria-label]=\"c\" (click)=\"setBorderColor(c)\"></button>\n        }\n      </div>\n      <label class=\"kpt-rich-text__picker\">\n        <span>{{ i18n.t('richText.border.customColor') }}</span>\n        <input type=\"color\" (input)=\"onBorderColorInput($event)\" />\n      </label>\n    </div>\n  </ng-template>\n\n  <!-- Popover koloru t\u0142a kom\u00F3rki (z menu kontekstowego) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'cellBg'\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeColor()\"\n    (detach)=\"closeColor()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n  </ng-template>\n</div>\n\n<ng-template #paletteTpl>\n  <div class=\"kpt-rich-text__palette\" (mousedown)=\"$event.preventDefault()\">\n    <div class=\"kpt-rich-text__swatches\">\n      @for (c of swatches; track c) {\n        <button\n          type=\"button\"\n          class=\"kpt-rich-text__swatch\"\n          [style.background]=\"c\"\n          [attr.aria-label]=\"c\"\n          (click)=\"applyColor(c)\"\n        ></button>\n      }\n    </div>\n    <label class=\"kpt-rich-text__picker\">\n      <span>{{ i18n.t('richText.paletteCustom') }}</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
 
 /**
@@ -3279,6 +3767,7 @@ class KptFileUpload {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    i18n = inject(KptI18n);
     dragover = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragover" }] : /* istanbul ignore next */ []));
     onSelect(event) {
@@ -3325,7 +3814,7 @@ class KptFileUpload {
     >
       <input #fileInput type="file" hidden [accept]="accept()" [multiple]="multiple()" (change)="onSelect($event)" />
       <kpt-icon name="upload" class="kpt-file-upload__icon" />
-      <div class="kpt-file-upload__text"><strong>Kliknij</strong> lub przeciągnij pliki tutaj</div>
+      <div class="kpt-file-upload__text" [innerHTML]="i18n.t('fileUpload.hint')"></div>
       @if (accept()) { <div class="kpt-file-upload__hint">{{ accept() }}</div> }
     </div>
 
@@ -3336,7 +3825,7 @@ class KptFileUpload {
             <kpt-icon name="photo" />
             <span class="kpt-file-upload__name">{{ file.name }}</span>
             <span class="kpt-file-upload__size">{{ size(file) }}</span>
-            <button type="button" class="kpt-file-upload__remove" (click)="remove(file, $event)" aria-label="Usuń"><kpt-icon name="trash" /></button>
+            <button type="button" class="kpt-file-upload__remove" (click)="remove(file, $event)" [attr.aria-label]="i18n.t('fileUpload.remove')"><kpt-icon name="trash" /></button>
           </li>
         }
       </ul>
@@ -3357,7 +3846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     >
       <input #fileInput type="file" hidden [accept]="accept()" [multiple]="multiple()" (change)="onSelect($event)" />
       <kpt-icon name="upload" class="kpt-file-upload__icon" />
-      <div class="kpt-file-upload__text"><strong>Kliknij</strong> lub przeciągnij pliki tutaj</div>
+      <div class="kpt-file-upload__text" [innerHTML]="i18n.t('fileUpload.hint')"></div>
       @if (accept()) { <div class="kpt-file-upload__hint">{{ accept() }}</div> }
     </div>
 
@@ -3368,7 +3857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             <kpt-icon name="photo" />
             <span class="kpt-file-upload__name">{{ file.name }}</span>
             <span class="kpt-file-upload__size">{{ size(file) }}</span>
-            <button type="button" class="kpt-file-upload__remove" (click)="remove(file, $event)" aria-label="Usuń"><kpt-icon name="trash" /></button>
+            <button type="button" class="kpt-file-upload__remove" (click)="remove(file, $event)" [attr.aria-label]="i18n.t('fileUpload.remove')"><kpt-icon name="trash" /></button>
           </li>
         }
       </ul>
@@ -3472,11 +3961,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, host: { class: 'kpt-color-picker-host' }, styles: ["@layer kpt.components{.kpt-color-picker-host{display:block}.kpt-color-picker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);flex-wrap:wrap}.kpt-color-picker__swatch{position:relative;width:2.5rem;height:2.5rem;border-radius:var(--kpt-radius-md, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border-strong);cursor:pointer;overflow:hidden}.kpt-color-picker__swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}.kpt-color-picker__hex{width:6rem;height:2.5rem;box-sizing:border-box;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);font-family:var(--kpt-font-family-mono);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-form-field-text);background:var(--kpt-form-field-bg);text-transform:uppercase}.kpt-color-picker__hex: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-color-picker__presets{display:flex;gap:.3rem}.kpt-color-picker__preset{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--kpt-color-on-surface) 15%,transparent);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-color-picker__preset.is-active{outline:2px solid var(--kpt-color-focus-ring);outline-offset:1px}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", 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"] }] } });
 
-const WEEKDAYS = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
-const MONTHS = [
-    'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec',
-    'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień',
-];
 const pad = (n) => String(n).padStart(2, '0');
 const toIso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 /**
@@ -3497,15 +3981,22 @@ class KptDateRange {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
-    placeholder = input('Wybierz zakres', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Placeholder; bez wartości używa i18n (`dateRange.placeholder`). */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     displayFormat = input('pl', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
     mode = input('date', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     hourFormat = input(24, { ...(ngDevMode ? { debugName: "hourFormat" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     minuteStep = input(1, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    weekdays = WEEKDAYS;
+    i18n = inject(KptI18n);
+    weekdays = computed(() => weekdayNames(this.i18n.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    months = computed(() => monthNames(this.i18n.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.i18n.t('dateRange.placeholder'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     today = new Date();
@@ -3529,7 +4020,7 @@ class KptDateRange {
     ];
     monthLabel = computed(() => {
         const { y, m } = this.view();
-        return `${MONTHS[m]} ${y}`;
+        return `${this.months()[m]} ${y}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
     datePart(v) {
@@ -3693,11 +4184,11 @@ class KptDateRange {
         this.endDate.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDateRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDateRange, isStandalone: true, selector: "kpt-date-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-date-range-host" }, ngImport: i0, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\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]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays; track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od (godzina)</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec (godzina)</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{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-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--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-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .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-range-tabs 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)}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptClock, selector: "kpt-clock", inputs: ["value", "hourFormat", "minuteStep"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDateRange, isStandalone: true, selector: "kpt-date-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-date-range-host" }, ngImport: i0, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\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]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.from') }}</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.to') }}</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays(); track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.fromTime') }}</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.toTime') }}</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{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-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--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-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .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-range-tabs 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)}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptClock, selector: "kpt-clock", inputs: ["value", "hourFormat", "minuteStep"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDateRange, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\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]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays; track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od (godzina)</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec (godzina)</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{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-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--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-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .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-range-tabs 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)}}\n"] }]
+            args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\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]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.from') }}</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.to') }}</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays(); track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">{{ i18n.t('dateRange.fromTime') }}</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">{{ i18n.t('dateRange.toTime') }}</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{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-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--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-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .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-range-tabs 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)}}\n"] }]
         }], propDecorators: { 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 }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] } });
 
 /**
@@ -3723,6 +4214,7 @@ class KptInputNumber {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    i18n = inject(KptI18n);
     display = computed(() => {
         const v = this.value();
         if (v === null || v === undefined || Number.isNaN(v))
@@ -3767,7 +4259,7 @@ class KptInputNumber {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: KptInputNumber, isStandalone: true, selector: "kpt-input-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-input-number-host" }, ngImport: i0, template: `
     <div class="kpt-input-number" [class.kpt-input-number--disabled]="disabled()" [class.kpt-input-number--invalid]="invalid()">
-      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canDec()" (click)="step_(-1)" aria-label="Zmniejsz"><kpt-icon name="minus" /></button>
+      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canDec()" (click)="step_(-1)" [attr.aria-label]="i18n.t('inputNumber.decrement')"><kpt-icon name="minus" /></button>
       <input
         class="kpt-input-number__input"
         type="text"
@@ -3778,7 +4270,7 @@ class KptInputNumber {
         (input)="onInput($event)"
         (blur)="touch.emit()"
       />
-      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canInc()" (click)="step_(1)" aria-label="Zwiększ"><kpt-icon name="plus" /></button>
+      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canInc()" (click)="step_(1)" [attr.aria-label]="i18n.t('inputNumber.increment')"><kpt-icon name="plus" /></button>
     </div>
   `, isInline: true, styles: ["@layer kpt.components{.kpt-input-number-host{display:block}.kpt-input-number{display:inline-flex;align-items:stretch;width:100%;height:2.5rem;box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);overflow:hidden}.kpt-input-number:focus-within:not(.kpt-input-number--disabled){border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-input-number--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-input-number--disabled{opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-input-number__input{flex:1;min-width:0;border:0;background:none;text-align:center;color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-input-number__input:focus{outline:none}.kpt-input-number__input::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-input-number__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border:0;background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-input-number__btn:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-input-number__btn:disabled{cursor:not-allowed;opacity:.5}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -3786,7 +4278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             type: Component,
             args: [{ selector: 'kpt-input-number', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
     <div class="kpt-input-number" [class.kpt-input-number--disabled]="disabled()" [class.kpt-input-number--invalid]="invalid()">
-      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canDec()" (click)="step_(-1)" aria-label="Zmniejsz"><kpt-icon name="minus" /></button>
+      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canDec()" (click)="step_(-1)" [attr.aria-label]="i18n.t('inputNumber.decrement')"><kpt-icon name="minus" /></button>
       <input
         class="kpt-input-number__input"
         type="text"
@@ -3797,7 +4289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         (input)="onInput($event)"
         (blur)="touch.emit()"
       />
-      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canInc()" (click)="step_(1)" aria-label="Zwiększ"><kpt-icon name="plus" /></button>
+      <button type="button" class="kpt-input-number__btn" [disabled]="disabled() || !canInc()" (click)="step_(1)" [attr.aria-label]="i18n.t('inputNumber.increment')"><kpt-icon name="plus" /></button>
     </div>
   `, host: { class: 'kpt-input-number-host' }, styles: ["@layer kpt.components{.kpt-input-number-host{display:block}.kpt-input-number{display:inline-flex;align-items:stretch;width:100%;height:2.5rem;box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);overflow:hidden}.kpt-input-number:focus-within:not(.kpt-input-number--disabled){border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-input-number--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-input-number--disabled{opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-input-number__input{flex:1;min-width:0;border:0;background:none;text-align:center;color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-input-number__input:focus{outline:none}.kpt-input-number__input::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-input-number__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border:0;background:var(--kpt-color-muted);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-input-number__btn:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-input-number__btn:disabled{cursor:not-allowed;opacity:.5}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], 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"] }] } });
@@ -3818,6 +4310,7 @@ class KptPassword {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    i18n = inject(KptI18n);
     visible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     strength = computed(() => {
@@ -3832,8 +4325,7 @@ class KptPassword {
         if (/[^A-Za-z0-9]/.test(v))
             s++;
         const score = Math.min(s, 4);
-        const labels = ['Bardzo słabe', 'Słabe', 'Średnie', 'Dobre', 'Silne'];
-        return { score, label: labels[score] };
+        return { score, label: this.i18n.messages().password.strength[score] };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -3849,7 +4341,7 @@ class KptPassword {
         (input)="value.set($any($event.target).value)"
         (blur)="touch.emit()"
       />
-      <button type="button" class="kpt-password__toggle" [disabled]="disabled()" (click)="visible.set(!visible())" [attr.aria-label]="visible() ? 'Ukryj hasło' : 'Pokaż hasło'">
+      <button type="button" class="kpt-password__toggle" [disabled]="disabled()" (click)="visible.set(!visible())" [attr.aria-label]="visible() ? i18n.t('password.hide') : i18n.t('password.show')">
         <kpt-icon [name]="visible() ? 'eye-off' : 'eye'" />
       </button>
     </div>
@@ -3879,7 +4371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         (input)="value.set($any($event.target).value)"
         (blur)="touch.emit()"
       />
-      <button type="button" class="kpt-password__toggle" [disabled]="disabled()" (click)="visible.set(!visible())" [attr.aria-label]="visible() ? 'Ukryj hasło' : 'Pokaż hasło'">
+      <button type="button" class="kpt-password__toggle" [disabled]="disabled()" (click)="visible.set(!visible())" [attr.aria-label]="visible() ? i18n.t('password.hide') : i18n.t('password.show')">
         <kpt-icon [name]="visible() ? 'eye-off' : 'eye'" />
       </button>
     </div>
@@ -4009,13 +4501,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class KptChipsInput {
     value = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    placeholder = input('Dodaj i naciśnij Enter…', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Placeholder; bez wartości używa i18n (`chipsInput.placeholder`). */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     allowDuplicates = input(false, { ...(ngDevMode ? { debugName: "allowDuplicates" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    i18n = inject(KptI18n);
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.i18n.t('chipsInput.placeholder'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
     onKeydown(event) {
         const el = event.target;
         if (event.key === 'Enter' || event.key === ',') {
@@ -4048,7 +4544,7 @@ class KptChipsInput {
       <input
         class="kpt-chips-input__field"
         type="text"
-        [placeholder]="value().length ? '' : placeholder()"
+        [placeholder]="value().length ? '' : effectivePlaceholder()"
         [disabled]="disabled()"
         (keydown)="onKeydown($event)"
         (blur)="commit($any($event.target)); touch.emit()"
@@ -4066,7 +4562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       <input
         class="kpt-chips-input__field"
         type="text"
-        [placeholder]="value().length ? '' : placeholder()"
+        [placeholder]="value().length ? '' : effectivePlaceholder()"
         [disabled]="disabled()"
         (keydown)="onKeydown($event)"
         (blur)="commit($any($event.target)); touch.emit()"
@@ -4181,6 +4677,7 @@ class KptListbox {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    i18n = inject(KptI18n);
     query = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     visible = computed(() => {
@@ -4208,7 +4705,7 @@ class KptListbox {
       @if (filter()) {
         <div class="kpt-listbox__filter">
           <kpt-icon name="search" />
-          <input type="text" placeholder="Szukaj…" [value]="query()" (input)="query.set($any($event.target).value)" />
+          <input type="text" [attr.placeholder]="i18n.t('listbox.search')" [value]="query()" (input)="query.set($any($event.target).value)" />
         </div>
       }
       <div class="kpt-listbox__items">
@@ -4226,7 +4723,7 @@ class KptListbox {
             @if (isSelected(opt.value)) { <kpt-icon name="check" /> }
           </button>
         } @empty {
-          <div class="kpt-listbox__empty">Brak pozycji</div>
+          <div class="kpt-listbox__empty">{{ i18n.t('listbox.empty') }}</div>
         }
       </div>
     </div>
@@ -4239,7 +4736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       @if (filter()) {
         <div class="kpt-listbox__filter">
           <kpt-icon name="search" />
-          <input type="text" placeholder="Szukaj…" [value]="query()" (input)="query.set($any($event.target).value)" />
+          <input type="text" [attr.placeholder]="i18n.t('listbox.search')" [value]="query()" (input)="query.set($any($event.target).value)" />
         </div>
       }
       <div class="kpt-listbox__items">
@@ -4257,7 +4754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             @if (isSelected(opt.value)) { <kpt-icon name="check" /> }
           </button>
         } @empty {
-          <div class="kpt-listbox__empty">Brak pozycji</div>
+          <div class="kpt-listbox__empty">{{ i18n.t('listbox.empty') }}</div>
         }
       </div>
     </div>
@@ -4577,6 +5074,7 @@ class KptPanel {
     animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     animationDuration = input(500, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptPanel, isStandalone: true, selector: "kpt-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "style.--kpt-anim-duration": "(animated() ? animationDuration() : 0) + 'ms'" }, classAttribute: "kpt-panel-host" }, ngImport: i0, template: `
     <div class="kpt-panel">
@@ -4584,7 +5082,7 @@ class KptPanel {
         <span class="kpt-panel__title">{{ header() }}</span>
         <span class="kpt-panel__actions"><ng-content select="[kptPanelActions]" /></span>
         @if (toggleable()) {
-          <button type="button" class="kpt-panel__toggle" (click)="collapsed.set(!collapsed())" [attr.aria-expanded]="!collapsed()" aria-label="Zwiń / rozwiń">
+          <button type="button" class="kpt-panel__toggle" (click)="collapsed.set(!collapsed())" [attr.aria-expanded]="!collapsed()" [attr.aria-label]="i18n.t('panel.toggle')">
             <kpt-icon [name]="collapsed() ? 'chevron-down' : 'chevron-up'" />
           </button>
         }
@@ -4610,7 +5108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         <span class="kpt-panel__title">{{ header() }}</span>
         <span class="kpt-panel__actions"><ng-content select="[kptPanelActions]" /></span>
         @if (toggleable()) {
-          <button type="button" class="kpt-panel__toggle" (click)="collapsed.set(!collapsed())" [attr.aria-expanded]="!collapsed()" aria-label="Zwiń / rozwiń">
+          <button type="button" class="kpt-panel__toggle" (click)="collapsed.set(!collapsed())" [attr.aria-expanded]="!collapsed()" [attr.aria-label]="i18n.t('panel.toggle')">
             <kpt-icon [name]="collapsed() ? 'chevron-down' : 'chevron-up'" />
           </button>
         }
@@ -4801,6 +5299,7 @@ class KptScrollTop {
     ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
     target = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
     visible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     scroller = window;
@@ -4829,7 +5328,7 @@ class KptScrollTop {
       class="kpt-scroll-top"
       [class.is-visible]="visible()"
       (click)="scrollUp()"
-      aria-label="Przewiń do góry"
+      [attr.aria-label]="i18n.t('scrollTop.label')"
       [attr.tabindex]="visible() ? 0 : -1"
     ><kpt-icon name="arrow-up" /></button>
   `, isInline: true, styles: ["@layer kpt.components{.kpt-scroll-top-host{display:contents}.kpt-scroll-top{position:fixed;right:var(--kpt-space-6, 1.5rem);bottom:var(--kpt-space-6, 1.5rem);z-index:var(--kpt-z-overlay, 1000);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:var(--kpt-color-primary);color:var(--kpt-color-on-primary);box-shadow:var(--kpt-elevation-3);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .2s,visibility .2s,transform .2s}.kpt-scroll-top.is-visible{opacity:1;visibility:visible;transform:none}.kpt-scroll-top:hover{background:var(--kpt-color-primary-hover, var(--kpt-color-primary))}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -4842,7 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       class="kpt-scroll-top"
       [class.is-visible]="visible()"
       (click)="scrollUp()"
-      aria-label="Przewiń do góry"
+      [attr.aria-label]="i18n.t('scrollTop.label')"
       [attr.tabindex]="visible() ? 0 : -1"
     ><kpt-icon name="arrow-up" /></button>
   `, host: { class: 'kpt-scroll-top-host' }, styles: ["@layer kpt.components{.kpt-scroll-top-host{display:contents}.kpt-scroll-top{position:fixed;right:var(--kpt-space-6, 1.5rem);bottom:var(--kpt-space-6, 1.5rem);z-index:var(--kpt-z-overlay, 1000);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:var(--kpt-color-primary);color:var(--kpt-color-on-primary);box-shadow:var(--kpt-elevation-3);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .2s,visibility .2s,transform .2s}.kpt-scroll-top.is-visible{opacity:1;visibility:visible;transform:none}.kpt-scroll-top:hover{background:var(--kpt-color-primary-hover, var(--kpt-color-primary))}}\n"] }]
@@ -4862,6 +5361,7 @@ class KptImage {
     width = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     preview = input(false, { ...(ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    i18n = inject(KptI18n);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     openPreview() {
@@ -4882,7 +5382,7 @@ class KptImage {
 
     @if (open()) {
       <div class="kpt-image__overlay" (click)="close()">
-        <button type="button" class="kpt-image__close" (click)="close()" aria-label="Zamknij"><kpt-icon name="x" /></button>
+        <button type="button" class="kpt-image__close" (click)="close()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
         <img class="kpt-image__full" [src]="src()" [alt]="alt()" (click)="$event.stopPropagation()" />
       </div>
     }
@@ -4900,7 +5400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
     @if (open()) {
       <div class="kpt-image__overlay" (click)="close()">
-        <button type="button" class="kpt-image__close" (click)="close()" aria-label="Zamknij"><kpt-icon name="x" /></button>
+        <button type="button" class="kpt-image__close" (click)="close()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
         <img class="kpt-image__full" [src]="src()" [alt]="alt()" (click)="$event.stopPropagation()" />
       </div>
     }
@@ -5325,9 +5825,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class KptBreadcrumb {
     items = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptBreadcrumb, isStandalone: true, selector: "kpt-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-breadcrumb-host" }, ngImport: i0, template: `
-    <nav class="kpt-breadcrumb" aria-label="breadcrumb">
+    <nav class="kpt-breadcrumb" [attr.aria-label]="i18n.t('breadcrumb.label')">
       @for (item of items(); track $index; let last = $last) {
         @if (item.url && !last) {
           <a class="kpt-breadcrumb__link" [href]="item.url">{{ item.label }}</a>
@@ -5344,7 +5845,7 @@ class KptBreadcrumb {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptBreadcrumb, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <nav class="kpt-breadcrumb" aria-label="breadcrumb">
+    <nav class="kpt-breadcrumb" [attr.aria-label]="i18n.t('breadcrumb.label')">
       @for (item of items(); track $index; let last = $last) {
         @if (item.url && !last) {
           <a class="kpt-breadcrumb__link" [href]="item.url">{{ item.label }}</a>
@@ -5487,12 +5988,15 @@ class KptPaginator {
     /** Dostępne rozmiary strony. */
     pageSizeOptions = input([5, 10, 20, 50], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
     totalPages = computed(() => Math.max(1, Math.ceil(this.length() / this.pageSize())), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     rangeStart = computed(() => (this.length() === 0 ? 0 : this.pageIndex() * this.pageSize() + 1), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
     rangeEnd = computed(() => Math.min(this.length(), (this.pageIndex() + 1) * this.pageSize()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    rangeLabel = computed(() => this.i18n.t('paginator.range', { start: this.rangeStart(), end: this.rangeEnd(), total: this.length() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeLabel" }] : /* istanbul ignore next */ []));
     canPrev = computed(() => this.pageIndex() > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []));
     canNext = computed(() => this.pageIndex() < this.totalPages() - 1, /* @ts-ignore */
@@ -5519,11 +6023,11 @@ class KptPaginator {
         this.pageIndex.set(0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptPaginator, isStandalone: true, selector: "kpt-paginator", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange" }, host: { classAttribute: "kpt-paginator" }, ngImport: i0, template: "<div class=\"kpt-paginator__size\">\n  <label>\n    Wierszy:\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\">{{ rangeStart() }}\u2013{{ rangeEnd() }} z {{ length() }}</span>\n\n<div class=\"kpt-paginator__nav\">\n  <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canPrev()\" (click)=\"prev()\" aria-label=\"Poprzednia strona\"><kpt-icon name=\"chevron-left\" /></kpt-button>\n  <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canNext()\" (click)=\"next()\" aria-label=\"Nast\u0119pna strona\"><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"], dependencies: [{ kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptPaginator, isStandalone: true, selector: "kpt-paginator", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange" }, host: { classAttribute: "kpt-paginator" }, ngImport: i0, 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"], dependencies: [{ kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptPaginator, decorators: [{
             type: Component,
-            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    Wierszy:\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\">{{ rangeStart() }}\u2013{{ rangeEnd() }} z {{ length() }}</span>\n\n<div class=\"kpt-paginator__nav\">\n  <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canPrev()\" (click)=\"prev()\" aria-label=\"Poprzednia strona\"><kpt-icon name=\"chevron-left\" /></kpt-button>\n  <kpt-button variant=\"outline\" size=\"sm\" [disabled]=\"!canNext()\" (click)=\"next()\" aria-label=\"Nast\u0119pna strona\"><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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { 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 }] }] } });
 
 /**
@@ -5609,8 +6113,9 @@ class KptDataTable {
     selectable = input('none', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    emptyMessage = input('Brak danych', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Komunikat pustej tabeli; bez wartości używa i18n (`dataTable.empty`). */
+    emptyMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     /** Pole identyfikujące wiersz (dla zaznaczania). Bez niego — porównanie po referencji. */
     rowKey = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
@@ -5647,6 +6152,10 @@ class KptDataTable {
     rowClick = output();
     /** Emitowane w trybie lazy przy zmianie sortowania/filtra/strony. */
     lazyLoad = output();
+    i18n = inject(KptI18n);
+    /** Komunikat pustej tabeli (input albo domyślny z i18n). */
+    emptyText = computed(() => this.emptyMessage() ?? this.i18n.t('dataTable.empty'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     /** Kolumny w bieżącej kolejności (po ewentualnym przestawieniu). */
     orderedColumns = linkedSignal(() => this.columns(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orderedColumns" }] : /* istanbul ignore next */ []));
@@ -6115,14 +6624,14 @@ class KptDataTable {
         return key ? row[key] : row;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDataTable, isStandalone: true, selector: "kpt-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterRowPosition: { classPropertyName: "filterRowPosition", publicName: "filterRowPosition", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, multiExpand: { classPropertyName: "multiExpand", publicName: "multiExpand", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", rowClick: "rowClick", lazyLoad: "lazyLoad" }, host: { properties: { "style.--kpt-thead-offset": "theadOffset() + 'px'" }, classAttribute: "kpt-data-table" }, queries: [{ propertyName: "cellDefs", predicate: KptCellDef, isSignal: true }, { propertyName: "rowDetailDef", first: true, predicate: KptRowDetailDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }, { propertyName: "theadEl", first: true, predicate: ["theadEl"], descendants: true, isSignal: true }], ngImport: i0, 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        placeholder=\"Szukaj\u2026\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">Eksport CSV</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              aria-label=\"Zaznacz wszystkie\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">\u0141adowanie\u2026</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          aria-label=\"Rozwi\u0144 wiersz\"\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          aria-label=\"Zaznacz wiersz\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"'Filtr: ' + 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]=\"'Filtr: ' + 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 || 'Wszystkie'\"\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                placeholder=\"min\"\n                [attr.aria-label]=\"'Filtr min: ' + 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                placeholder=\"max\"\n                [attr.aria-label]=\"'Filtr max: ' + 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 || 'Zakres dat'\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptPaginator, selector: "kpt-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: KptSelect, selector: "kpt-select", inputs: ["options", "placeholder", "multiple", "filter", "disabled", "invalid", "touched", "value"], outputs: ["valueChange", "touch"] }, { kind: "component", type: KptDateRange, selector: "kpt-date-range", inputs: ["value", "disabled", "invalid", "touched", "placeholder", "displayFormat", "mode", "hourFormat", "minuteStep"], outputs: ["valueChange", "touch"] }, { kind: "component", type: KptSlider, selector: "kpt-slider", inputs: ["value", "range", "min", "max", "step", "showValue", "disabled", "invalid", "touched"], outputs: ["valueChange", "touch"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDataTable, isStandalone: true, selector: "kpt-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterRowPosition: { classPropertyName: "filterRowPosition", publicName: "filterRowPosition", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, multiExpand: { classPropertyName: "multiExpand", publicName: "multiExpand", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", rowClick: "rowClick", lazyLoad: "lazyLoad" }, host: { properties: { "style.--kpt-thead-offset": "theadOffset() + 'px'" }, classAttribute: "kpt-data-table" }, queries: [{ propertyName: "cellDefs", predicate: KptCellDef, isSignal: true }, { propertyName: "rowDetailDef", first: true, predicate: KptRowDetailDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }, { propertyName: "theadEl", first: true, predicate: ["theadEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        [attr.placeholder]=\"i18n.t('dataTable.search')\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">{{ i18n.t('dataTable.exportCsv') }}</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead #theadEl>\n      @if (hasColumnFilters() && filterRowPosition() === 'top') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n      <tr>\n        @if (hasRowDetail()) {\n          <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n        }\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"pageAllSelected()\"\n              [indeterminate]=\"pageSomeSelected()\"\n              (change)=\"toggleAllOnPage()\"\n              [attr.aria-label]=\"i18n.t('dataTable.selectAll')\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ i18n.t('dataTable.loading') }}</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyText() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.expandRow')\"\n          (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n        >\n          <kpt-icon name=\"chevron-right\" />\n        </button>\n      </td>\n    }\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.selectRow')\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('number') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"onNumberFilter(col.field, $event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('select') {\n            <kpt-select\n              [options]=\"col.filter?.options || []\"\n              [multiple]=\"!!col.filter?.multiple\"\n              filter\n              [placeholder]=\"col.filter?.placeholder || i18n.t('dataTable.all')\"\n              [value]=\"columnFilters()[col.field] ?? null\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n          @case ('numberRange') {\n            <div class=\"kpt-data-table__frange\">\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.min')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMin', { column: col.header })\"\n                [value]=\"rangeVal(col.field).min\"\n                (input)=\"setRangeFilter(col.field, 'min', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.max')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMax', { column: col.header })\"\n                [value]=\"rangeVal(col.field).max\"\n                (input)=\"setRangeFilter(col.field, 'max', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n            </div>\n          }\n          @case ('slider') {\n            <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n              <kpt-slider\n                range\n                [min]=\"col.filter?.min ?? 0\"\n                [max]=\"col.filter?.max ?? 100\"\n                [step]=\"col.filter?.step ?? 1\"\n                [value]=\"sliderVal(col)\"\n                (valueChange)=\"setColumnFilter(col.field, $event)\"\n                showValue\n              />\n            </div>\n          }\n          @case ('dateRange') {\n            <kpt-date-range\n              [placeholder]=\"col.filter?.placeholder || i18n.t('dataTable.dateRange')\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptPaginator, selector: "kpt-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: KptSelect, selector: "kpt-select", inputs: ["options", "placeholder", "multiple", "filter", "disabled", "invalid", "touched", "value"], outputs: ["valueChange", "touch"] }, { kind: "component", type: KptDateRange, selector: "kpt-date-range", inputs: ["value", "disabled", "invalid", "touched", "placeholder", "displayFormat", "mode", "hourFormat", "minuteStep"], outputs: ["valueChange", "touch"] }, { kind: "component", type: KptSlider, selector: "kpt-slider", inputs: ["value", "range", "min", "max", "step", "showValue", "disabled", "invalid", "touched"], outputs: ["valueChange", "touch"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDataTable, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptButton, KptIcon, KptPaginator, KptSelect, KptDateRange, KptSlider], host: {
                         'class': 'kpt-data-table',
                         '[style.--kpt-thead-offset]': "theadOffset() + 'px'",
-                    }, 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        placeholder=\"Szukaj\u2026\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">Eksport CSV</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              aria-label=\"Zaznacz wszystkie\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">\u0141adowanie\u2026</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          aria-label=\"Rozwi\u0144 wiersz\"\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          aria-label=\"Zaznacz wiersz\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"'Filtr: ' + 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]=\"'Filtr: ' + 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 || 'Wszystkie'\"\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                placeholder=\"min\"\n                [attr.aria-label]=\"'Filtr min: ' + 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                placeholder=\"max\"\n                [attr.aria-label]=\"'Filtr max: ' + 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 || 'Zakres dat'\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
+                    }, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        [attr.placeholder]=\"i18n.t('dataTable.search')\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">{{ i18n.t('dataTable.exportCsv') }}</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead #theadEl>\n      @if (hasColumnFilters() && filterRowPosition() === 'top') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n      <tr>\n        @if (hasRowDetail()) {\n          <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n        }\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"pageAllSelected()\"\n              [indeterminate]=\"pageSomeSelected()\"\n              (change)=\"toggleAllOnPage()\"\n              [attr.aria-label]=\"i18n.t('dataTable.selectAll')\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ i18n.t('dataTable.loading') }}</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyText() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.expandRow')\"\n          (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n        >\n          <kpt-icon name=\"chevron-right\" />\n        </button>\n      </td>\n    }\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          [attr.aria-label]=\"i18n.t('dataTable.selectRow')\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('number') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"i18n.t('dataTable.filter', { column: col.header })\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"onNumberFilter(col.field, $event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('select') {\n            <kpt-select\n              [options]=\"col.filter?.options || []\"\n              [multiple]=\"!!col.filter?.multiple\"\n              filter\n              [placeholder]=\"col.filter?.placeholder || i18n.t('dataTable.all')\"\n              [value]=\"columnFilters()[col.field] ?? null\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n          @case ('numberRange') {\n            <div class=\"kpt-data-table__frange\">\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.min')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMin', { column: col.header })\"\n                [value]=\"rangeVal(col.field).min\"\n                (input)=\"setRangeFilter(col.field, 'min', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                [attr.placeholder]=\"i18n.t('dataTable.max')\"\n                [attr.aria-label]=\"i18n.t('dataTable.filterMax', { column: col.header })\"\n                [value]=\"rangeVal(col.field).max\"\n                (input)=\"setRangeFilter(col.field, 'max', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n            </div>\n          }\n          @case ('slider') {\n            <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n              <kpt-slider\n                range\n                [min]=\"col.filter?.min ?? 0\"\n                [max]=\"col.filter?.max ?? 100\"\n                [step]=\"col.filter?.step ?? 1\"\n                [value]=\"sliderVal(col)\"\n                (valueChange)=\"setColumnFilter(col.field, $event)\"\n                showValue\n              />\n            </div>\n          }\n          @case ('dateRange') {\n            <kpt-date-range\n              [placeholder]=\"col.filter?.placeholder || i18n.t('dataTable.dateRange')\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterRowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRowPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], multiExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiExpand", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] } });
 
 /**
@@ -6304,6 +6813,7 @@ class KptCarousel {
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     activeIndex = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
     slideTpl = contentChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slideTpl" }] : /* istanbul ignore next */ []));
     next() {
@@ -6328,10 +6838,10 @@ class KptCarousel {
         </div>
       </div>
 
-      <button class="kpt-carousel__nav kpt-carousel__nav--prev" type="button" (click)="prev()" [disabled]="activeIndex() === 0" aria-label="Poprzedni">
+      <button class="kpt-carousel__nav kpt-carousel__nav--prev" type="button" (click)="prev()" [disabled]="activeIndex() === 0" [attr.aria-label]="i18n.t('common.previous')">
         <kpt-icon name="chevron-left" />
       </button>
-      <button class="kpt-carousel__nav kpt-carousel__nav--next" type="button" (click)="next()" [disabled]="activeIndex() >= items().length - 1" aria-label="Następny">
+      <button class="kpt-carousel__nav kpt-carousel__nav--next" type="button" (click)="next()" [disabled]="activeIndex() >= items().length - 1" [attr.aria-label]="i18n.t('common.next')">
         <kpt-icon name="chevron-right" />
       </button>
 
@@ -6342,7 +6852,7 @@ class KptCarousel {
             class="kpt-carousel__dot"
             [class.is-active]="i === activeIndex()"
             (click)="goTo(i)"
-            [attr.aria-label]="'Slajd ' + (i + 1)"
+            [attr.aria-label]="i18n.t('carousel.slide', { index: i + 1 })"
           ></button>
         }
       </div>
@@ -6363,10 +6873,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         </div>
       </div>
 
-      <button class="kpt-carousel__nav kpt-carousel__nav--prev" type="button" (click)="prev()" [disabled]="activeIndex() === 0" aria-label="Poprzedni">
+      <button class="kpt-carousel__nav kpt-carousel__nav--prev" type="button" (click)="prev()" [disabled]="activeIndex() === 0" [attr.aria-label]="i18n.t('common.previous')">
         <kpt-icon name="chevron-left" />
       </button>
-      <button class="kpt-carousel__nav kpt-carousel__nav--next" type="button" (click)="next()" [disabled]="activeIndex() >= items().length - 1" aria-label="Następny">
+      <button class="kpt-carousel__nav kpt-carousel__nav--next" type="button" (click)="next()" [disabled]="activeIndex() >= items().length - 1" [attr.aria-label]="i18n.t('common.next')">
         <kpt-icon name="chevron-right" />
       </button>
 
@@ -6377,7 +6887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             class="kpt-carousel__dot"
             [class.is-active]="i === activeIndex()"
             (click)="goTo(i)"
-            [attr.aria-label]="'Slajd ' + (i + 1)"
+            [attr.aria-label]="i18n.t('carousel.slide', { index: i + 1 })"
           ></button>
         }
       </div>
@@ -6402,6 +6912,7 @@ class KptDataView {
     pageSize = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     paginated = input(true, { ...(ngDevMode ? { debugName: "paginated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    i18n = inject(KptI18n);
     itemTpl = contentChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
     pageIndex = model(0, /* @ts-ignore */
@@ -6420,10 +6931,10 @@ class KptDataView {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDataView, isStandalone: true, selector: "kpt-data-view", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", pageIndex: "pageIndexChange" }, host: { classAttribute: "kpt-data-view-host" }, queries: [{ propertyName: "itemTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="kpt-data-view">
       <div class="kpt-data-view__toolbar">
-        <div class="kpt-data-view__count">{{ items().length }} elementów</div>
+        <div class="kpt-data-view__count">{{ i18n.t('dataView.count', { count: items().length }) }}</div>
         <div class="kpt-data-view__switch">
-          <button type="button" [class.is-active]="layout() === 'list'" (click)="layout.set('list')" aria-label="Lista"><kpt-icon name="list" /></button>
-          <button type="button" [class.is-active]="layout() === 'grid'" (click)="layout.set('grid')" aria-label="Siatka"><kpt-icon name="menu" /></button>
+          <button type="button" [class.is-active]="layout() === 'list'" (click)="layout.set('list')" [attr.aria-label]="i18n.t('dataView.list')"><kpt-icon name="list" /></button>
+          <button type="button" [class.is-active]="layout() === 'grid'" (click)="layout.set('grid')" [attr.aria-label]="i18n.t('dataView.grid')"><kpt-icon name="menu" /></button>
         </div>
       </div>
 
@@ -6433,7 +6944,7 @@ class KptDataView {
             <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
           </div>
         } @empty {
-          <div class="kpt-data-view__empty">Brak elementów</div>
+          <div class="kpt-data-view__empty">{{ i18n.t('dataView.empty') }}</div>
         }
       </div>
 
@@ -6448,10 +6959,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kpt-data-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptIcon, KptPaginator], template: `
     <div class="kpt-data-view">
       <div class="kpt-data-view__toolbar">
-        <div class="kpt-data-view__count">{{ items().length }} elementów</div>
+        <div class="kpt-data-view__count">{{ i18n.t('dataView.count', { count: items().length }) }}</div>
         <div class="kpt-data-view__switch">
-          <button type="button" [class.is-active]="layout() === 'list'" (click)="layout.set('list')" aria-label="Lista"><kpt-icon name="list" /></button>
-          <button type="button" [class.is-active]="layout() === 'grid'" (click)="layout.set('grid')" aria-label="Siatka"><kpt-icon name="menu" /></button>
+          <button type="button" [class.is-active]="layout() === 'list'" (click)="layout.set('list')" [attr.aria-label]="i18n.t('dataView.list')"><kpt-icon name="list" /></button>
+          <button type="button" [class.is-active]="layout() === 'grid'" (click)="layout.set('grid')" [attr.aria-label]="i18n.t('dataView.grid')"><kpt-icon name="menu" /></button>
         </div>
       </div>
 
@@ -6461,7 +6972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
           </div>
         } @empty {
-          <div class="kpt-data-view__empty">Brak elementów</div>
+          <div class="kpt-data-view__empty">{{ i18n.t('dataView.empty') }}</div>
         }
       </div>
 
@@ -6486,12 +6997,19 @@ class KptPickList {
     ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
     target = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-    sourceHeader = input('Dostępne', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sourceHeader" }] : /* istanbul ignore next */ []));
-    targetHeader = input('Wybrane', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "targetHeader" }] : /* istanbul ignore next */ []));
+    /** Nagłówek listy źródłowej; bez wartości używa i18n (`pickList.available`). */
+    sourceHeader = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sourceHeader" }] : /* istanbul ignore next */ []));
+    /** Nagłówek listy docelowej; bez wartości używa i18n (`pickList.selected`). */
+    targetHeader = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "targetHeader" }] : /* istanbul ignore next */ []));
     itemTpl = contentChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
+    effectiveSourceHeader = computed(() => this.sourceHeader() ?? this.i18n.t('pickList.available'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSourceHeader" }] : /* istanbul ignore next */ []));
+    effectiveTargetHeader = computed(() => this.targetHeader() ?? this.i18n.t('pickList.selected'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTargetHeader" }] : /* istanbul ignore next */ []));
     selSource = signal(new Set(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selSource" }] : /* istanbul ignore next */ []));
     selTarget = signal(new Set(), /* @ts-ignore */
@@ -6520,7 +7038,7 @@ class KptPickList {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptPickList, isStandalone: true, selector: "kpt-pick-list", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, sourceHeader: { classPropertyName: "sourceHeader", publicName: "sourceHeader", isSignal: true, isRequired: false, transformFunction: null }, targetHeader: { classPropertyName: "targetHeader", publicName: "targetHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { source: "sourceChange", target: "targetChange" }, host: { classAttribute: "kpt-pick-list-host" }, queries: [{ propertyName: "itemTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="kpt-pick-list">
       <div class="kpt-pick-list__col">
-        <div class="kpt-pick-list__header">{{ sourceHeader() }}</div>
+        <div class="kpt-pick-list__header">{{ effectiveSourceHeader() }}</div>
         <ul class="kpt-pick-list__items">
           @for (item of source(); track $index) {
             <li class="kpt-pick-list__item" [class.is-selected]="selSource().has(item)" (click)="toggle('source', item)">
@@ -6531,14 +7049,14 @@ class KptPickList {
       </div>
 
       <div class="kpt-pick-list__controls">
-        <button type="button" (click)="move('source', true)" aria-label="Przenieś wszystko w prawo"><kpt-icon name="chevron-right" /><kpt-icon name="chevron-right" /></button>
-        <button type="button" (click)="move('source', false)" aria-label="Przenieś w prawo"><kpt-icon name="chevron-right" /></button>
-        <button type="button" (click)="move('target', false)" aria-label="Przenieś w lewo"><kpt-icon name="chevron-left" /></button>
-        <button type="button" (click)="move('target', true)" aria-label="Przenieś wszystko w lewo"><kpt-icon name="chevron-left" /><kpt-icon name="chevron-left" /></button>
+        <button type="button" (click)="move('source', true)" [attr.aria-label]="i18n.t('pickList.moveAllRight')"><kpt-icon name="chevron-right" /><kpt-icon name="chevron-right" /></button>
+        <button type="button" (click)="move('source', false)" [attr.aria-label]="i18n.t('pickList.moveRight')"><kpt-icon name="chevron-right" /></button>
+        <button type="button" (click)="move('target', false)" [attr.aria-label]="i18n.t('pickList.moveLeft')"><kpt-icon name="chevron-left" /></button>
+        <button type="button" (click)="move('target', true)" [attr.aria-label]="i18n.t('pickList.moveAllLeft')"><kpt-icon name="chevron-left" /><kpt-icon name="chevron-left" /></button>
       </div>
 
       <div class="kpt-pick-list__col">
-        <div class="kpt-pick-list__header">{{ targetHeader() }}</div>
+        <div class="kpt-pick-list__header">{{ effectiveTargetHeader() }}</div>
         <ul class="kpt-pick-list__items">
           @for (item of target(); track $index) {
             <li class="kpt-pick-list__item" [class.is-selected]="selTarget().has(item)" (click)="toggle('target', item)">
@@ -6555,7 +7073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kpt-pick-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptIcon], template: `
     <div class="kpt-pick-list">
       <div class="kpt-pick-list__col">
-        <div class="kpt-pick-list__header">{{ sourceHeader() }}</div>
+        <div class="kpt-pick-list__header">{{ effectiveSourceHeader() }}</div>
         <ul class="kpt-pick-list__items">
           @for (item of source(); track $index) {
             <li class="kpt-pick-list__item" [class.is-selected]="selSource().has(item)" (click)="toggle('source', item)">
@@ -6566,14 +7084,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       </div>
 
       <div class="kpt-pick-list__controls">
-        <button type="button" (click)="move('source', true)" aria-label="Przenieś wszystko w prawo"><kpt-icon name="chevron-right" /><kpt-icon name="chevron-right" /></button>
-        <button type="button" (click)="move('source', false)" aria-label="Przenieś w prawo"><kpt-icon name="chevron-right" /></button>
-        <button type="button" (click)="move('target', false)" aria-label="Przenieś w lewo"><kpt-icon name="chevron-left" /></button>
-        <button type="button" (click)="move('target', true)" aria-label="Przenieś wszystko w lewo"><kpt-icon name="chevron-left" /><kpt-icon name="chevron-left" /></button>
+        <button type="button" (click)="move('source', true)" [attr.aria-label]="i18n.t('pickList.moveAllRight')"><kpt-icon name="chevron-right" /><kpt-icon name="chevron-right" /></button>
+        <button type="button" (click)="move('source', false)" [attr.aria-label]="i18n.t('pickList.moveRight')"><kpt-icon name="chevron-right" /></button>
+        <button type="button" (click)="move('target', false)" [attr.aria-label]="i18n.t('pickList.moveLeft')"><kpt-icon name="chevron-left" /></button>
+        <button type="button" (click)="move('target', true)" [attr.aria-label]="i18n.t('pickList.moveAllLeft')"><kpt-icon name="chevron-left" /><kpt-icon name="chevron-left" /></button>
       </div>
 
       <div class="kpt-pick-list__col">
-        <div class="kpt-pick-list__header">{{ targetHeader() }}</div>
+        <div class="kpt-pick-list__header">{{ effectiveTargetHeader() }}</div>
         <ul class="kpt-pick-list__items">
           @for (item of target(); track $index) {
             <li class="kpt-pick-list__item" [class.is-selected]="selTarget().has(item)" (click)="toggle('target', item)">
@@ -6600,6 +7118,7 @@ class KptOrderList {
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    i18n = inject(KptI18n);
     itemTpl = contentChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
     selected = signal(null, /* @ts-ignore */
@@ -6620,8 +7139,8 @@ class KptOrderList {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptOrderList, isStandalone: true, selector: "kpt-order-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { classAttribute: "kpt-order-list-host" }, queries: [{ propertyName: "itemTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="kpt-order-list">
       <div class="kpt-order-list__controls">
-        <button type="button" (click)="moveSelected(-1)" [disabled]="selected() === null" aria-label="W górę"><kpt-icon name="arrow-up" /></button>
-        <button type="button" (click)="moveSelected(1)" [disabled]="selected() === null" aria-label="W dół"><kpt-icon name="arrow-down" /></button>
+        <button type="button" (click)="moveSelected(-1)" [disabled]="selected() === null" [attr.aria-label]="i18n.t('orderList.up')"><kpt-icon name="arrow-up" /></button>
+        <button type="button" (click)="moveSelected(1)" [disabled]="selected() === null" [attr.aria-label]="i18n.t('orderList.down')"><kpt-icon name="arrow-down" /></button>
       </div>
       <div class="kpt-order-list__panel">
         @if (header()) { <div class="kpt-order-list__header">{{ header() }}</div> }
@@ -6641,8 +7160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kpt-order-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptIcon], template: `
     <div class="kpt-order-list">
       <div class="kpt-order-list__controls">
-        <button type="button" (click)="moveSelected(-1)" [disabled]="selected() === null" aria-label="W górę"><kpt-icon name="arrow-up" /></button>
-        <button type="button" (click)="moveSelected(1)" [disabled]="selected() === null" aria-label="W dół"><kpt-icon name="arrow-down" /></button>
+        <button type="button" (click)="moveSelected(-1)" [disabled]="selected() === null" [attr.aria-label]="i18n.t('orderList.up')"><kpt-icon name="arrow-up" /></button>
+        <button type="button" (click)="moveSelected(1)" [disabled]="selected() === null" [attr.aria-label]="i18n.t('orderList.down')"><kpt-icon name="arrow-down" /></button>
       </div>
       <div class="kpt-order-list__panel">
         @if (header()) { <div class="kpt-order-list__header">{{ header() }}</div> }
@@ -6670,6 +7189,7 @@ class KptGalleria {
     activeIndex = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     showThumbnails = input(true, { ...(ngDevMode ? { debugName: "showThumbnails" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    i18n = inject(KptI18n);
     current = computed(() => this.items()[this.activeIndex()] ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
     next() {
@@ -6682,17 +7202,17 @@ class KptGalleria {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptGalleria, isStandalone: true, selector: "kpt-galleria", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "kpt-galleria-host" }, ngImport: i0, template: `
     <div class="kpt-galleria">
       <div class="kpt-galleria__stage">
-        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--prev" (click)="prev()" [disabled]="activeIndex() === 0" aria-label="Poprzedni"><kpt-icon name="chevron-left" /></button>
+        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--prev" (click)="prev()" [disabled]="activeIndex() === 0" [attr.aria-label]="i18n.t('common.previous')"><kpt-icon name="chevron-left" /></button>
         @if (current(); as item) {
           <img class="kpt-galleria__image" [src]="item.src" [alt]="item.alt || ''" />
         }
-        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--next" (click)="next()" [disabled]="activeIndex() >= items().length - 1" aria-label="Następny"><kpt-icon name="chevron-right" /></button>
+        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--next" (click)="next()" [disabled]="activeIndex() >= items().length - 1" [attr.aria-label]="i18n.t('common.next')"><kpt-icon name="chevron-right" /></button>
       </div>
 
       @if (showThumbnails()) {
         <div class="kpt-galleria__thumbs">
           @for (item of items(); track $index; let i = $index) {
-            <button type="button" class="kpt-galleria__thumb" [class.is-active]="i === activeIndex()" (click)="activeIndex.set(i)" [attr.aria-label]="'Obraz ' + (i + 1)">
+            <button type="button" class="kpt-galleria__thumb" [class.is-active]="i === activeIndex()" (click)="activeIndex.set(i)" [attr.aria-label]="i18n.t('galleria.image', { index: i + 1 })">
               <img [src]="item.thumbnail || item.src" [alt]="item.alt || ''" />
             </button>
           }
@@ -6706,17 +7226,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kpt-galleria', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
     <div class="kpt-galleria">
       <div class="kpt-galleria__stage">
-        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--prev" (click)="prev()" [disabled]="activeIndex() === 0" aria-label="Poprzedni"><kpt-icon name="chevron-left" /></button>
+        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--prev" (click)="prev()" [disabled]="activeIndex() === 0" [attr.aria-label]="i18n.t('common.previous')"><kpt-icon name="chevron-left" /></button>
         @if (current(); as item) {
           <img class="kpt-galleria__image" [src]="item.src" [alt]="item.alt || ''" />
         }
-        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--next" (click)="next()" [disabled]="activeIndex() >= items().length - 1" aria-label="Następny"><kpt-icon name="chevron-right" /></button>
+        <button type="button" class="kpt-galleria__nav kpt-galleria__nav--next" (click)="next()" [disabled]="activeIndex() >= items().length - 1" [attr.aria-label]="i18n.t('common.next')"><kpt-icon name="chevron-right" /></button>
       </div>
 
       @if (showThumbnails()) {
         <div class="kpt-galleria__thumbs">
           @for (item of items(); track $index; let i = $index) {
-            <button type="button" class="kpt-galleria__thumb" [class.is-active]="i === activeIndex()" (click)="activeIndex.set(i)" [attr.aria-label]="'Obraz ' + (i + 1)">
+            <button type="button" class="kpt-galleria__thumb" [class.is-active]="i === activeIndex()" (click)="activeIndex.set(i)" [attr.aria-label]="i18n.t('galleria.image', { index: i + 1 })">
               <img [src]="item.thumbnail || item.src" [alt]="item.alt || ''" />
             </button>
           }
@@ -6739,6 +7259,7 @@ class KptAlert {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     closed = output();
+    i18n = inject(KptI18n);
     visible = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     iconName() {
@@ -6759,7 +7280,7 @@ class KptAlert {
         <div class="kpt-alert__message"><ng-content /></div>
       </div>
       @if (dismissible()) {
-        <button class="kpt-alert__close" type="button" (click)="dismiss()" aria-label="Zamknij"><kpt-icon name="x" /></button>
+        <button class="kpt-alert__close" type="button" (click)="dismiss()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
       }
     </div>
   `, isInline: true, styles: ["@layer kpt.components{.kpt-alert{--_accent: var(--kpt-color-info);display:flex;align-items:flex-start;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border:var(--kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--_accent) 35%,transparent);border-inline-start:3px solid var(--_accent);border-radius:var(--kpt-radius-md, .5rem);background:color-mix(in oklch,var(--_accent) 10%,var(--kpt-color-surface));color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-alert[data-variant=success]{--_accent: var(--kpt-color-success)}.kpt-alert[data-variant=warning]{--_accent: var(--kpt-color-warning)}.kpt-alert[data-variant=danger]{--_accent: var(--kpt-color-danger)}.kpt-alert__icon{color:var(--_accent);font-weight:700;line-height:1.5}.kpt-alert__content{flex:1;min-width:0}.kpt-alert__title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:.15rem}.kpt-alert__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-alert__close:hover{color:var(--kpt-color-on-surface)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -6776,7 +7297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         <div class="kpt-alert__message"><ng-content /></div>
       </div>
       @if (dismissible()) {
-        <button class="kpt-alert__close" type="button" (click)="dismiss()" aria-label="Zamknij"><kpt-icon name="x" /></button>
+        <button class="kpt-alert__close" type="button" (click)="dismiss()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
       }
     </div>
   `, host: { class: 'kpt-alert-host', '[hidden]': '!visible()' }, styles: ["@layer kpt.components{.kpt-alert{--_accent: var(--kpt-color-info);display:flex;align-items:flex-start;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border:var(--kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--_accent) 35%,transparent);border-inline-start:3px solid var(--_accent);border-radius:var(--kpt-radius-md, .5rem);background:color-mix(in oklch,var(--_accent) 10%,var(--kpt-color-surface));color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-alert[data-variant=success]{--_accent: var(--kpt-color-success)}.kpt-alert[data-variant=warning]{--_accent: var(--kpt-color-warning)}.kpt-alert[data-variant=danger]{--_accent: var(--kpt-color-danger)}.kpt-alert__icon{color:var(--_accent);font-weight:700;line-height:1.5}.kpt-alert__content{flex:1;min-width:0}.kpt-alert__title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:.15rem}.kpt-alert__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-alert__close:hover{color:var(--kpt-color-on-surface)}}\n"] }]
@@ -6803,6 +7324,7 @@ class KptDialog {
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     /** Pozwala zamknąć klawiszem Esc / przyciskiem ×. */
     dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    i18n = inject(KptI18n);
     dialogRef = viewChild('dlg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -6830,7 +7352,7 @@ class KptDialog {
         <div class="kpt-dialog__header">
           <h2 class="kpt-dialog__title">{{ header() }}</h2>
           @if (dismissible()) {
-            <button class="kpt-dialog__close" type="button" (click)="open.set(false)" aria-label="Zamknij"><kpt-icon name="x" /></button>
+            <button class="kpt-dialog__close" type="button" (click)="open.set(false)" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
           }
         </div>
       }
@@ -6847,7 +7369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         <div class="kpt-dialog__header">
           <h2 class="kpt-dialog__title">{{ header() }}</h2>
           @if (dismissible()) {
-            <button class="kpt-dialog__close" type="button" (click)="open.set(false)" aria-label="Zamknij"><kpt-icon name="x" /></button>
+            <button class="kpt-dialog__close" type="button" (click)="open.set(false)" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
           }
         </div>
       }
@@ -6907,6 +7429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class KptToastContainer {
     service = inject(KptToastService);
+    i18n = inject(KptI18n);
     toasts = this.service.toasts;
     dismiss(id) {
         this.service.dismiss(id);
@@ -6926,7 +7449,7 @@ class KptToastContainer {
             }
             <div class="kpt-toast__message">{{ toast.message }}</div>
           </div>
-          <button class="kpt-toast__close" type="button" (click)="dismiss(toast.id)" aria-label="Zamknij"><kpt-icon name="x" /></button>
+          <button class="kpt-toast__close" type="button" (click)="dismiss(toast.id)" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
         </div>
       }
     </div>
@@ -6945,7 +7468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             }
             <div class="kpt-toast__message">{{ toast.message }}</div>
           </div>
-          <button class="kpt-toast__close" type="button" (click)="dismiss(toast.id)" aria-label="Zamknij"><kpt-icon name="x" /></button>
+          <button class="kpt-toast__close" type="button" (click)="dismiss(toast.id)" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
         </div>
       }
     </div>
@@ -7303,6 +7826,7 @@ class KptDrawer {
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     closeOnBackdrop = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    i18n = inject(KptI18n);
     onBackdrop() {
         if (this.closeOnBackdrop())
             this.close();
@@ -7326,7 +7850,7 @@ class KptDrawer {
         <div class="kpt-drawer__header">
           <span class="kpt-drawer__title">{{ header() }}</span>
           @if (dismissible()) {
-            <button type="button" class="kpt-drawer__close" (click)="close()" aria-label="Zamknij"><kpt-icon name="x" /></button>
+            <button type="button" class="kpt-drawer__close" (click)="close()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
           }
         </div>
       }
@@ -7351,7 +7875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         <div class="kpt-drawer__header">
           <span class="kpt-drawer__title">{{ header() }}</span>
           @if (dismissible()) {
-            <button type="button" class="kpt-drawer__close" (click)="close()" aria-label="Zamknij"><kpt-icon name="x" /></button>
+            <button type="button" class="kpt-drawer__close" (click)="close()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
           }
         </div>
       }
@@ -7770,6 +8294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Umieść raz w aplikacji (np. obok `<kpt-toast-container />`).
  */
 class KptConfirmContainer {
+    i18n = inject(KptI18n);
     service = inject(KptConfirmService);
     req = this.service.current;
     isOpen = computed(() => this.req() !== null, /* @ts-ignore */
@@ -7780,14 +8305,14 @@ class KptConfirmContainer {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptConfirmContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptConfirmContainer, isStandalone: true, selector: "kpt-confirm-container", host: { classAttribute: "kpt-confirm-container-host" }, ngImport: i0, template: `
-    <kpt-dialog [open]="isOpen()" (openChange)="onOpenChange($event)" [header]="req()?.header ?? 'Potwierdzenie'">
+    <kpt-dialog [open]="isOpen()" (openChange)="onOpenChange($event)" [header]="req()?.header ?? i18n.t('confirm.header')">
       <div class="kpt-confirm__body">
         @if (req()?.icon) { <kpt-icon [name]="req()!.icon!" class="kpt-confirm__icon" [attr.data-variant]="req()?.variant ?? 'filled'" /> }
         <p class="kpt-confirm__message">{{ req()?.message }}</p>
       </div>
       <div kptDialogFooter>
-        <kpt-button variant="text" (click)="service.reject()">{{ req()?.rejectLabel ?? 'Anuluj' }}</kpt-button>
-        <kpt-button [variant]="req()?.variant ?? 'filled'" (click)="service.accept()">{{ req()?.acceptLabel ?? 'Potwierdź' }}</kpt-button>
+        <kpt-button variant="text" (click)="service.reject()">{{ req()?.rejectLabel ?? i18n.t('confirm.reject') }}</kpt-button>
+        <kpt-button [variant]="req()?.variant ?? 'filled'" (click)="service.accept()">{{ req()?.acceptLabel ?? i18n.t('confirm.accept') }}</kpt-button>
       </div>
     </kpt-dialog>
   `, isInline: true, styles: ["@layer kpt.components{.kpt-confirm__body{display:flex;align-items:flex-start;gap:var(--kpt-space-3, .75rem)}.kpt-confirm__icon{flex:none;font-size:1.5rem}.kpt-confirm__icon[data-variant=danger]{color:var(--kpt-color-danger)}.kpt-confirm__icon[data-variant=filled]{color:var(--kpt-color-primary)}.kpt-confirm__message{margin:0;color:var(--kpt-color-on-surface);line-height:var(--kpt-line-height-normal, 1.5)}}\n"], dependencies: [{ kind: "component", type: KptDialog, selector: "kpt-dialog", inputs: ["open", "header", "dismissible"], outputs: ["openChange"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -7795,14 +8320,14 @@ class KptConfirmContainer {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptConfirmContainer, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-confirm-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptDialog, KptButton, KptIcon], template: `
-    <kpt-dialog [open]="isOpen()" (openChange)="onOpenChange($event)" [header]="req()?.header ?? 'Potwierdzenie'">
+    <kpt-dialog [open]="isOpen()" (openChange)="onOpenChange($event)" [header]="req()?.header ?? i18n.t('confirm.header')">
       <div class="kpt-confirm__body">
         @if (req()?.icon) { <kpt-icon [name]="req()!.icon!" class="kpt-confirm__icon" [attr.data-variant]="req()?.variant ?? 'filled'" /> }
         <p class="kpt-confirm__message">{{ req()?.message }}</p>
       </div>
       <div kptDialogFooter>
-        <kpt-button variant="text" (click)="service.reject()">{{ req()?.rejectLabel ?? 'Anuluj' }}</kpt-button>
-        <kpt-button [variant]="req()?.variant ?? 'filled'" (click)="service.accept()">{{ req()?.acceptLabel ?? 'Potwierdź' }}</kpt-button>
+        <kpt-button variant="text" (click)="service.reject()">{{ req()?.rejectLabel ?? i18n.t('confirm.reject') }}</kpt-button>
+        <kpt-button [variant]="req()?.variant ?? 'filled'" (click)="service.accept()">{{ req()?.acceptLabel ?? i18n.t('confirm.accept') }}</kpt-button>
       </div>
     </kpt-dialog>
   `, host: { class: 'kpt-confirm-container-host' }, styles: ["@layer kpt.components{.kpt-confirm__body{display:flex;align-items:flex-start;gap:var(--kpt-space-3, .75rem)}.kpt-confirm__icon{flex:none;font-size:1.5rem}.kpt-confirm__icon[data-variant=danger]{color:var(--kpt-color-danger)}.kpt-confirm__icon[data-variant=filled]{color:var(--kpt-color-primary)}.kpt-confirm__message{margin:0;color:var(--kpt-color-on-surface);line-height:var(--kpt-line-height-normal, 1.5)}}\n"] }]
@@ -7822,6 +8347,7 @@ class KptBottomSheet {
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
     closeOnBackdrop = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    i18n = inject(KptI18n);
     onBackdrop() {
         if (this.closeOnBackdrop())
             this.close();
@@ -7833,7 +8359,7 @@ class KptBottomSheet {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptBottomSheet, isStandalone: true, selector: "kpt-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "kpt-bottom-sheet-host" }, ngImport: i0, template: `
     <div class="kpt-bottom-sheet__backdrop" [class.is-open]="open()" (click)="onBackdrop()"></div>
     <div class="kpt-bottom-sheet__panel" [class.is-open]="open()" role="dialog" aria-modal="true" (keydown.escape)="close()" tabindex="-1">
-      <button type="button" class="kpt-bottom-sheet__handle" (click)="close()" aria-label="Zamknij"></button>
+      <button type="button" class="kpt-bottom-sheet__handle" (click)="close()" [attr.aria-label]="i18n.t('common.close')"></button>
       @if (header()) { <div class="kpt-bottom-sheet__header">{{ header() }}</div> }
       <div class="kpt-bottom-sheet__body"><ng-content /></div>
     </div>
@@ -7844,7 +8370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kpt-bottom-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div class="kpt-bottom-sheet__backdrop" [class.is-open]="open()" (click)="onBackdrop()"></div>
     <div class="kpt-bottom-sheet__panel" [class.is-open]="open()" role="dialog" aria-modal="true" (keydown.escape)="close()" tabindex="-1">
-      <button type="button" class="kpt-bottom-sheet__handle" (click)="close()" aria-label="Zamknij"></button>
+      <button type="button" class="kpt-bottom-sheet__handle" (click)="close()" [attr.aria-label]="i18n.t('common.close')"></button>
       @if (header()) { <div class="kpt-bottom-sheet__header">{{ header() }}</div> }
       <div class="kpt-bottom-sheet__body"><ng-content /></div>
     </div>
@@ -7864,9 +8390,13 @@ class KptSpeedDial {
     ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     icon = input('plus', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Akcje', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Etykieta a11y FAB (stan zamknięty); bez wartości używa i18n (`speedDial.actions`). */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     select = output();
+    i18n = inject(KptI18n);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.i18n.t('speedDial.actions'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     toggle() {
@@ -7892,7 +8422,7 @@ class KptSpeedDial {
           </button>
         }
       </div>
-      <kpt-fab [ariaLabel]="open() ? 'Zamknij' : ariaLabel()" (click)="toggle()">
+      <kpt-fab [ariaLabel]="open() ? i18n.t('common.close') : effectiveAriaLabel()" (click)="toggle()">
         <span class="kpt-speed-dial__trigger-icon"><kpt-icon [name]="icon()" /></span>
       </kpt-fab>
     </div>
@@ -7911,7 +8441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           </button>
         }
       </div>
-      <kpt-fab [ariaLabel]="open() ? 'Zamknij' : ariaLabel()" (click)="toggle()">
+      <kpt-fab [ariaLabel]="open() ? i18n.t('common.close') : effectiveAriaLabel()" (click)="toggle()">
         <span class="kpt-speed-dial__trigger-icon"><kpt-icon [name]="icon()" /></span>
       </kpt-fab>
     </div>
@@ -7928,5 +8458,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, 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, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree };
+export { KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n };
 //# sourceMappingURL=konce-pt-angular.mjs.map