@mk-kit/ui 0.41.0 → 0.42.0

package/fesm2022/mk-kit-ui-directives.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DOCUMENT, PLATFORM_ID, input, booleanAttribute, output, effect, Directive, numberAttribute, signal, afterNextRender, Injector, computed, Injectable, DestroyRef, TemplateRef, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, DOCUMENT, PLATFORM_ID, input, booleanAttribute, output, effect, Directive, numberAttribute, signal, afterNextRender, Injector, computed, Injectable, DestroyRef, TemplateRef, ViewContainerRef, Pipe } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
+import { MK_I18N } from '@mk-kit/ui/core';
 
 /**
  * Emits when a pointer press lands outside the host element — the building block
@@ -1767,6 +1768,398 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { permission: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCanDisable", required: true }] }] } });
 
+/**
+ * Resolve the locale a formatting pipe should use: an explicit per-call
+ * locale wins, then `provideMkI18n({ locale })`, then the runtime default
+ * (`undefined` lets `Intl` pick the environment locale).
+ */
+function mkResolveLocale(i18n, explicit) {
+    return explicit || i18n.locale || undefined;
+}
+/**
+ * Small bounded memo for `Intl` formatter instances — constructing them is
+ * far more expensive than calling `format()`, and a pure pipe in a list
+ * re-runs for every row.
+ */
+class MkIntlCache {
+    create;
+    limit;
+    map = new Map();
+    constructor(create, limit = 32) {
+        this.create = create;
+        this.limit = limit;
+    }
+    get(locale, options = {}) {
+        const key = `${locale ?? ''}|${JSON.stringify(options)}`;
+        let hit = this.map.get(key);
+        if (hit === undefined) {
+            hit = this.create(locale, options);
+            if (this.map.size >= this.limit) {
+                // Evict the oldest entry (Map iteration order is insertion order).
+                this.map.delete(this.map.keys().next().value);
+            }
+            this.map.set(key, hit);
+        }
+        return hit;
+    }
+}
+/** Coerce a pipe input to a finite number; `null` for anything else. */
+function mkToNumber(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === 'string' && value.trim() === '')
+        return null;
+    const n = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(n) ? n : null;
+}
+/** Coerce a `Date | number | string` to a valid timestamp; `null` for anything else. */
+function mkToTimestamp(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    const t = value instanceof Date
+        ? value.getTime()
+        : typeof value === 'number'
+            ? value
+            : new Date(value).getTime();
+    return Number.isFinite(t) ? t : null;
+}
+
+const formatters$1 = new MkIntlCache((locale, options) => new Intl.NumberFormat(locale, options));
+/**
+ * `mkCurrency` — format a number as money with `Intl.NumberFormat`, honouring
+ * the locale and default currency from `provideMkI18n({ locale, currency })`.
+ * No Angular locale data is needed. Pure: `null`, `undefined`, `''` and
+ * non-numeric input render as `''`.
+ *
+ * ```html
+ * {{ 1234.5 | mkCurrency }}                                <!-- $1,234.50 (i18n currency, default USD) -->
+ * {{ 1234.5 | mkCurrency:'EUR' }}                          <!-- €1,234.50 -->
+ * {{ 1234.5 | mkCurrency:'PLN':{ locale: 'pl-PL' } }}      <!-- 1234,50 zł -->
+ * {{ 1234567 | mkCurrency:'USD':{ notation: 'compact' } }} <!-- $1.2M -->
+ * {{ total() | mkCurrency:'GBP':{ signDisplay: 'always' } }} <!-- signals work as-is -->
+ * ```
+ */
+class MkCurrencyPipe {
+    i18n = inject(MK_I18N);
+    /**
+     * @param value Amount in major units (`12.5` → `$12.50`).
+     * @param currency ISO 4217 code; defaults to `provideMkI18n({ currency })`, then `'USD'`.
+     * @param options Locale and `Intl.NumberFormat` currency options.
+     */
+    transform(value, currency, options = {}) {
+        const amount = mkToNumber(value);
+        if (amount === null)
+            return '';
+        const { locale, display, ...rest } = options;
+        const intlOptions = {
+            style: 'currency',
+            currency: (currency || this.i18n.currency || 'USD').toUpperCase(),
+            currencyDisplay: display ?? 'symbol',
+            ...rest,
+        };
+        return formatters$1
+            .get(mkResolveLocale(this.i18n, locale), intlOptions)
+            .format(amount);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MkCurrencyPipe, isStandalone: true, name: "mkCurrency" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mkCurrency', pure: true }]
+        }] });
+
+/** Unit ladder: `[unit, milliseconds per unit]`, smallest first. */
+const UNITS = [
+    ['second', 1_000],
+    ['minute', 60_000],
+    ['hour', 3_600_000],
+    ['day', 86_400_000],
+    ['week', 604_800_000],
+    ['month', 2_629_800_000], // 365.25 / 12 days
+    ['year', 31_557_600_000], // 365.25 days
+];
+const formatters = new MkIntlCache((locale, options) => new Intl.RelativeTimeFormat(locale, options));
+/**
+ * `mkRelativeTime` — "3 minutes ago" / "in 2 days" / "yesterday" from a
+ * `Date`, timestamp or ISO string, via `Intl.RelativeTimeFormat` in the
+ * `provideMkI18n` locale (no Angular locale data). Pure: `null`, `undefined`
+ * and unparsable input render as `''`.
+ *
+ * The pipe picks the largest unit whose magnitude is at least 1 (seconds →
+ * minutes → hours → days → weeks → months → years) and rounds. Pass `now`
+ * for deterministic output in tests, or bind a ticking signal to keep a
+ * list live — a pure pipe only re-runs when an argument changes:
+ *
+ * ```html
+ * {{ comment.createdAt | mkRelativeTime }}                    <!-- 3 minutes ago -->
+ * {{ due | mkRelativeTime:now() }}                            <!-- in 2 days (now() ticks) -->
+ * {{ due | mkRelativeTime:null:{ style: 'short' } }}          <!-- in 2 days -->
+ * {{ ts | mkRelativeTime:null:{ locale: 'pl', numeric: 'always' } }} <!-- 3 minuty temu -->
+ * ```
+ */
+class MkRelativeTimePipe {
+    i18n = inject(MK_I18N);
+    /**
+     * @param value The instant to describe.
+     * @param now Reference instant; defaults to `Date.now()` at call time.
+     * @param options Locale, numeric mode, style and unit cap.
+     */
+    transform(value, now, options = {}) {
+        const target = mkToTimestamp(value);
+        if (target === null)
+            return '';
+        const reference = mkToTimestamp(now) ?? Date.now();
+        const diff = target - reference;
+        const [unit, amount] = pickUnit(diff, options.maxUnit ?? 'year');
+        const { locale, maxUnit: _maxUnit, ...rest } = options;
+        return formatters
+            .get(mkResolveLocale(this.i18n, locale), {
+            numeric: 'auto',
+            style: 'long',
+            ...rest,
+        })
+            .format(amount, unit);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRelativeTimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MkRelativeTimePipe, isStandalone: true, name: "mkRelativeTime" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRelativeTimePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mkRelativeTime', pure: true }]
+        }] });
+/** Choose the largest unit (≤ `maxUnit`) whose rounded magnitude is ≥ 1; seconds otherwise. */
+function pickUnit(diffMs, maxUnit) {
+    const cap = UNITS.findIndex(([u]) => u === maxUnit || `${u}s` === maxUnit);
+    const last = cap === -1 ? UNITS.length - 1 : cap;
+    const abs = Math.abs(diffMs);
+    for (let i = last; i > 0; i--) {
+        const [unit, ms] = UNITS[i];
+        if (abs >= ms)
+            return [unit, Math.round(diffMs / ms)];
+    }
+    const value = Math.round(diffMs / 1000);
+    // Avoid "-0 seconds": normalise negative zero so 'auto' can render "now".
+    return ['second', value === 0 ? 0 : value];
+}
+
+const DECIMAL_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+const BINARY_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB'];
+const numbers$1 = new MkIntlCache((locale, options) => new Intl.NumberFormat(locale, options));
+/**
+ * `mkFileSize` — bytes → a human-readable size such as `1.2 MB`, with the
+ * number formatted by `Intl.NumberFormat` in the `provideMkI18n` locale.
+ * Pure: `null`, `undefined`, `''` and non-numeric input render as `''`.
+ *
+ * ```html
+ * {{ 1_234_567 | mkFileSize }}                        <!-- 1.2 MB -->
+ * {{ 1_234_567 | mkFileSize:{ base: 'binary' } }}     <!-- 1.2 MiB -->
+ * {{ 1_234_567 | mkFileSize:{ digits: 2, locale: 'de' } }} <!-- 1,23 MB -->
+ * {{ 512 | mkFileSize }}                              <!-- 512 B -->
+ * ```
+ */
+class MkFileSizePipe {
+    i18n = inject(MK_I18N);
+    transform(value, options = {}) {
+        const bytes = mkToNumber(value);
+        if (bytes === null)
+            return '';
+        const binary = options.base === 'binary';
+        const divisor = binary ? 1024 : 1000;
+        const units = binary ? BINARY_UNITS : DECIMAL_UNITS;
+        const negative = bytes < 0;
+        let amount = Math.abs(bytes);
+        let index = 0;
+        while (amount >= divisor && index < units.length - 1) {
+            amount /= divisor;
+            index++;
+        }
+        let digits = index === 0 ? 0 : Math.max(0, options.digits ?? 1);
+        // 999.96 kB would round to "1000 kB": promote to the next unit instead.
+        if (index < units.length - 1 && Number(amount.toFixed(digits)) >= divisor) {
+            amount /= divisor;
+            index++;
+            digits = Math.max(0, options.digits ?? 1);
+        }
+        const number = numbers$1
+            .get(mkResolveLocale(this.i18n, options.locale), { maximumFractionDigits: digits })
+            .format(negative ? -amount : amount);
+        return `${number} ${units[index]}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MkFileSizePipe, isStandalone: true, name: "mkFileSize" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mkFileSize', pure: true }]
+        }] });
+
+/**
+ * `mkInitials` — "Ada Lovelace" → "AL", the same rule `mk-avatar` uses for
+ * its fallback: first letter of the first and last word, upper-cased. A
+ * single word yields its first `max` letters ("Ada" → "AD"); more than two
+ * words with `max` > 2 take one letter per word from the start ("Jean
+ * Luc Picard" with `max: 3` → "JLP"). Leading/trailing/duplicate whitespace
+ * is ignored, and grapheme-aware slicing keeps emoji and accents intact.
+ * Pure: `null`, `undefined` and blank input render as `''`.
+ *
+ * ```html
+ * {{ user.name | mkInitials }}      <!-- Grace Hopper → GH -->
+ * {{ user.name | mkInitials:1 }}    <!-- Grace Hopper → G -->
+ * {{ 'Jean Luc Picard' | mkInitials:3 }} <!-- JLP -->
+ * ```
+ */
+class MkInitialsPipe {
+    /**
+     * @param value Full name.
+     * @param max Maximum number of letters; default `2`, minimum `1`.
+     */
+    transform(value, max = 2) {
+        if (value === null || value === undefined)
+            return '';
+        const words = String(value).trim().split(/\s+/).filter(Boolean);
+        if (words.length === 0)
+            return '';
+        const limit = Math.max(1, Math.floor(max) || 1);
+        let letters;
+        if (words.length === 1) {
+            letters = graphemes$1(words[0]).slice(0, limit);
+        }
+        else if (limit >= words.length) {
+            letters = words.map((w) => graphemes$1(w)[0]);
+        }
+        else if (limit === 1) {
+            letters = [graphemes$1(words[0])[0]];
+        }
+        else {
+            // First (limit - 1) words plus the last word: "Ada King Lovelace" → "AL".
+            letters = [
+                ...words.slice(0, limit - 1).map((w) => graphemes$1(w)[0]),
+                graphemes$1(words[words.length - 1])[0],
+            ];
+        }
+        return letters.join('').toLocaleUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkInitialsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MkInitialsPipe, isStandalone: true, name: "mkInitials" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkInitialsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mkInitials', pure: true }]
+        }] });
+/** Split into user-perceived characters (code points as a fallback). */
+function graphemes$1(word) {
+    if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+        return [...new Intl.Segmenter().segment(word)].map((s) => s.segment);
+    }
+    return Array.from(word);
+}
+
+/**
+ * `mkTruncate` — shorten text to `length` characters and append an ellipsis.
+ * The ellipsis counts toward the limit, so the output never exceeds
+ * `length` characters; counting is grapheme-aware (emoji and accented
+ * letters are one character). Text that already fits is returned as-is.
+ * Pure: `null` and `undefined` render as `''`.
+ *
+ * ```html
+ * {{ post.body | mkTruncate:80 }}                          <!-- hard cut at 80 -->
+ * {{ post.body | mkTruncate:80:{ wordBoundary: true } }}   <!-- cut at the last space -->
+ * {{ hash | mkTruncate:12:{ ellipsis: '...' } }}
+ * ```
+ */
+class MkTruncatePipe {
+    /**
+     * @param value Text to shorten.
+     * @param length Maximum characters in the output, ellipsis included. Default `50`.
+     * @param options Ellipsis string and word-boundary mode.
+     */
+    transform(value, length = 50, options = {}) {
+        if (value === null || value === undefined)
+            return '';
+        const text = String(value);
+        const limit = Math.max(0, Math.floor(length) || 0);
+        const chars = graphemes(text);
+        if (chars.length <= limit)
+            return text;
+        const ellipsis = options.ellipsis ?? '…';
+        const budget = Math.max(0, limit - graphemes(ellipsis).length);
+        let cut = chars.slice(0, budget).join('');
+        if (options.wordBoundary) {
+            // Only back up to a boundary when the cut lands inside a word.
+            const next = chars[budget] ?? '';
+            if (next && !/\s/.test(next)) {
+                const at = cut.search(/\s+\S*$/);
+                if (at > 0)
+                    cut = cut.slice(0, at);
+            }
+        }
+        return cut.replace(/\s+$/, '') + ellipsis;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MkTruncatePipe, isStandalone: true, name: "mkTruncate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mkTruncate', pure: true }]
+        }] });
+/** Split into user-perceived characters (code points as a fallback). */
+function graphemes(text) {
+    if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+        return [...new Intl.Segmenter().segment(text)].map((s) => s.segment);
+    }
+    return Array.from(text);
+}
+
+const rules = new MkIntlCache((locale, options) => new Intl.PluralRules(locale, options));
+const numbers = new MkIntlCache((locale, options) => new Intl.NumberFormat(locale, options));
+/**
+ * `mkPluralize` — pick the right word for a count using the locale's plural
+ * rules (`Intl.PluralRules`), optionally prefixed with the formatted count.
+ * The English shorthand takes a singular and an optional plural (default
+ * `singular + 's'`); other languages pass a {@link MkPluralForms} map.
+ * Pure: `null`, `undefined`, `''` and non-numeric counts render as `''`.
+ *
+ * ```html
+ * {{ count | mkPluralize:'item' }}                 <!-- 1 item / 3 items -->
+ * {{ count | mkPluralize:'entry':'entries' }}      <!-- 1 entry / 2 entries -->
+ * {{ count | mkPluralize:'file':null:{ withCount: false } }} <!-- files -->
+ * {{ n | mkPluralize:{ one: 'plik', few: 'pliki', many: 'plików', other: 'pliku' }:null:{ locale: 'pl' } }}
+ * ```
+ */
+class MkPluralizePipe {
+    i18n = inject(MK_I18N);
+    /**
+     * @param value The count.
+     * @param singular Singular word, or a full {@link MkPluralForms} map.
+     * @param plural Plural word for the shorthand form; default `singular + 's'`. Ignored with a map.
+     * @param options Locale and whether to prefix the count.
+     */
+    transform(value, singular, plural, options = {}) {
+        const count = mkToNumber(value);
+        if (count === null)
+            return '';
+        const locale = mkResolveLocale(this.i18n, options.locale);
+        const category = rules.get(locale).select(count);
+        let word;
+        if (typeof singular === 'string') {
+            word = category === 'one' ? singular : (plural ?? `${singular}s`);
+        }
+        else {
+            word = singular[category] ?? singular.other;
+        }
+        if (options.withCount === false)
+            return word;
+        return `${numbers.get(locale).format(count)} ${word}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPluralizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MkPluralizePipe, isStandalone: true, name: "mkPluralize" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPluralizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mkPluralize', pure: true }]
+        }] });
+
 /**
  * DIRECTIVES / utilities group barrel for @mk-kit/ui.
  */
@@ -1775,5 +2168,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MK_FIELD_PRESETS, MkAutofocus, MkAutosize, MkCan, MkCanDisable, MkCannot, MkClickOutside, MkCopyToClipboard, MkField, MkHistoryService, MkHistoryStack, MkHotkey, MkHotkeysService, MkInfiniteScroll, MkIntersect, MkMask, MkPermissionPolicy, MkRipple, MkScrollspy, mkApplyMask, mkMaskCaret, mkMatchesHotkey, mkParseHotkey, mkPermissionGranted, registerHistoryHotkeys };
+export { MK_FIELD_PRESETS, MkAutofocus, MkAutosize, MkCan, MkCanDisable, MkCannot, MkClickOutside, MkCopyToClipboard, MkCurrencyPipe, MkField, MkFileSizePipe, MkHistoryService, MkHistoryStack, MkHotkey, MkHotkeysService, MkInfiniteScroll, MkInitialsPipe, MkIntersect, MkMask, MkPermissionPolicy, MkPluralizePipe, MkRelativeTimePipe, MkRipple, MkScrollspy, MkTruncatePipe, mkApplyMask, mkMaskCaret, mkMatchesHotkey, mkParseHotkey, mkPermissionGranted, registerHistoryHotkeys };
 //# sourceMappingURL=mk-kit-ui-directives.mjs.map