@mesgflow/ui-kit 0.11.1 → 0.12.0

package/fesm2022/mesgflow-ui-kit-password-strength.mjs

@@ -0,0 +1,590 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, inject, DOCUMENT, computed, afterRenderEffect, Component } from '@angular/core';
+import { MF_PASSWORD_STRENGTH_LABELS, mergeLabels, nextId, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Sızıntı listelerinin en tepesindeki parolalar + parola tabanı olarak en sık kullanılan kelimeler
+ * (EN + TR). Tam bir sözlük DEĞİL — tahmincinin en bariz tahminleri yakalaması için küçük bir
+ * örneklem (~3 KB). Girdiler küçük harf; tahminci karşılaştırmadan önce iki tarafı da leet
+ * normalizasyonundan geçirir (`p@ssw0rd` → `password`), bu yüzden leet varyantları ayrıca yazılmaz.
+ * Tam kapsam isteyen tüketici `MF_PASSWORD_STRENGTH_ESTIMATOR` ile `zxcvbn-ts` takar.
+ */
+const COMMON_PASSWORDS = [
+    // Sızıntı listelerinin tepesi
+    'password',
+    'passwort',
+    'passw',
+    'pass',
+    'qwerty',
+    'qwertz',
+    'azerty',
+    'letmein',
+    'welcome',
+    'admin',
+    'administrator',
+    'root',
+    'login',
+    'iloveyou',
+    'monkey',
+    'dragon',
+    'master',
+    'shadow',
+    'superman',
+    'batman',
+    'trustno1',
+    'whatever',
+    'freedom',
+    'sunshine',
+    'princess',
+    'football',
+    'baseball',
+    'soccer',
+    'hockey',
+    'basketball',
+    'starwars',
+    'pokemon',
+    'computer',
+    'internet',
+    'secret',
+    'default',
+    'changeme',
+    'guest',
+    'test',
+    'tester',
+    'demo',
+    'user',
+    'access',
+    'hello',
+    'love',
+    'lovely',
+    'charlie',
+    'michael',
+    'jennifer',
+    'jordan',
+    'hunter',
+    'ranger',
+    'buster',
+    'thomas',
+    'robert',
+    'daniel',
+    'andrew',
+    'joshua',
+    'jessica',
+    'ashley',
+    'nicole',
+    'killer',
+    'cheese',
+    'cookie',
+    'chocolate',
+    'flower',
+    'summer',
+    'winter',
+    'spring',
+    'autumn',
+    'monday',
+    'friday',
+    'january',
+    'october',
+    'december',
+    'banana',
+    'orange',
+    'purple',
+    'yellow',
+    'silver',
+    'golden',
+    'diamond',
+    'matrix',
+    'mustang',
+    'ferrari',
+    'harley',
+    'corvette',
+    'maverick',
+    'phoenix',
+    'tigger',
+    'pepper',
+    'ginger',
+    'maggie',
+    'bailey',
+    'snoopy',
+    'family',
+    'friends',
+    'money',
+    'heaven',
+    'angel',
+    'blessed',
+    'jesus',
+    'samsung',
+    'apple',
+    'google',
+    'microsoft',
+    'facebook',
+    'linkedin',
+    'company',
+    'business',
+    'office',
+    'zaq1zaq1',
+    'asdfgh',
+    'zxcvbn',
+    'qazwsx',
+    '1q2w3e4r',
+    'abc123',
+    // TR
+    'sifre',
+    'parola',
+    'parolam',
+    'sifrem',
+    'gizli',
+    'merhaba',
+    'selam',
+    'askim',
+    'sevgilim',
+    'canim',
+    'bitanem',
+    'hayatim',
+    'annem',
+    'babam',
+    'kardesim',
+    'bismillah',
+    'allah',
+    'galatasaray',
+    'fenerbahce',
+    'besiktas',
+    'trabzonspor',
+    'cimbom',
+    'istanbul',
+    'ankara',
+    'izmir',
+    'turkiye',
+    'turkey',
+    'ataturk',
+    'mustafa',
+    'mehmet',
+    'ahmet',
+    'ayse',
+    'fatma',
+    'zeynep',
+    'emine',
+    'yildiz',
+    'gunes',
+    'deniz',
+    'kartal',
+    'aslan',
+];
+
+/** Değerlendirilen azami uzunluk (kod noktası) — çok uzun yapıştırmalarda maliyet tavanı. */
+const MAX_LENGTH = 128;
+/** Skor eşikleri (bit) — sırasıyla 1, 2, 3, 4 için alt sınır. */
+const THRESHOLDS = [28, 40, 56, 72];
+/** Bu uzunluktan kısa yaygın kelimeler parolanın İÇİNDE aranmaz (yanlış pozitif olur). */
+const MIN_EMBEDDED_WORD = 5;
+/** Kişisel değer parçası olarak sayılacak asgari uzunluk. */
+const MIN_PERSONAL_TOKEN = 3;
+const LEET = {
+    '@': 'a',
+    '4': 'a',
+    '8': 'b',
+    '3': 'e',
+    '1': 'i',
+    '!': 'i',
+    '0': 'o',
+    $: 's',
+    '5': 's',
+    '7': 't',
+};
+const KEYBOARD_ROWS = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm', 'qwertzuiop', 'azertyuiop'];
+const deleet = (s) => Array.from(s, (c) => LEET[c] ?? c).join('');
+const COMMON = new Set(COMMON_PASSWORDS.map(deleet));
+const COMMON_EMBEDDED = [...COMMON].filter((w) => w.length >= MIN_EMBEDDED_WORD);
+/** İki harf aynı klavye satırında komşuysa +1/-1 yön, değilse 0. */
+function keyboardDirection(a, b) {
+    for (const row of KEYBOARD_ROWS) {
+        const i = row.indexOf(a);
+        if (i === -1)
+            continue;
+        const j = row.indexOf(b);
+        if (j !== -1 && Math.abs(i - j) === 1)
+            return j - i;
+    }
+    return 0;
+}
+/**
+ * Bağımlılıksız, birkaç KB'lık tahmin edilebilirlik tahmincisi. "1 büyük harf + 1 rakam" saymaz
+ * (NIST 800-63B): her karakterin TAHMİN EDİLEMEZ olup olmadığına bakar, tahmin edilebilir
+ * olanları (tekrar, ardışık dizi, klavye satırı, yıl, yaygın kelime, kişisel değer) entropiye
+ * saymaz, kalan "etkin uzunluk × log2(karakter havuzu)" bitini 0–4'e eşler.
+ *
+ * Sınırı: tam bir sözlük taşımaz — sözlükte olup listede olmayan kelime tabanlı parolaları
+ * fazla puanlayabilir. Tam kapsam için `zxcvbn-ts`'i `MF_PASSWORD_STRENGTH_ESTIMATOR` ile takın.
+ */
+function estimatePasswordStrength(value, options = {}) {
+    const minLength = options.minLength ?? 8;
+    const chars = Array.from(value).slice(0, MAX_LENGTH);
+    if (!chars.length)
+        return { score: 0 };
+    // Kod noktası başına TEK karakterlik küçük harf izi — indeksler `chars` ile birebir hizalı kalsın
+    // diye uzunluğu değişen dönüşümler (`İ` → `i̇`, astral karakterler) yer tutucuyla değiştirilir.
+    const lower = chars.map((c) => {
+        const l = c.toLowerCase();
+        return l.length === 1 ? l : '￿';
+    });
+    const flat = lower.join('');
+    const plain = deleet(flat);
+    const predictable = new Array(chars.length).fill(false);
+    const found = new Set();
+    const tooShort = chars.length < minLength;
+    // 1. Yaygın parola — tamamı ya da sonundaki rakam/sembol kırpılmış hali.
+    const base = flat.replace(/[\d\p{P}\p{S}\s]+$/u, '');
+    if (COMMON.has(plain) || (base.length >= 4 && COMMON.has(deleet(base)))) {
+        return { score: 0, warning: tooShort ? 'tooShort' : 'common' };
+    }
+    // İlki hariç bir aralığı tahmin edilebilir işaretler (kelime TEK bir "karakter" kadar bilgi taşır).
+    const markRange = (start, length, reason) => {
+        for (let i = start + 1; i < start + length && i < chars.length; i++)
+            predictable[i] = true;
+        found.add(reason);
+    };
+    const markAll = (haystack, needle, reason) => {
+        for (let at = haystack.indexOf(needle); at !== -1; at = haystack.indexOf(needle, at + 1)) {
+            markRange(at, needle.length, reason);
+        }
+    };
+    // 2. Gömülü yaygın kelimeler (`MySummer!x`).
+    for (const word of COMMON_EMBEDDED)
+        markAll(plain, word, 'common');
+    // 3. Kişisel değerler — e-postanın yerel kısmı ve alan adı dahil, harf/rakam olmayan yerden bölünür.
+    for (const input of options.userInputs ?? []) {
+        const tokens = input
+            .toLowerCase()
+            .split(/[^\p{L}\p{N}]+/u)
+            .filter((t) => t.length >= MIN_PERSONAL_TOKEN);
+        for (const token of new Set(tokens)) {
+            markAll(flat, token, 'personal');
+            markAll(plain, deleet(token), 'personal');
+        }
+    }
+    // 4. Yıllar (19xx/20xx) — iki rakam kadar bilgi.
+    for (const m of flat.matchAll(/(?:19|20)\d\d/g)) {
+        const at = m.index ?? 0;
+        predictable[at + 2] = true;
+        predictable[at + 3] = true;
+        found.add('sequence');
+    }
+    // 5. Tekrar eden bloklar (`abcabc`, `xk9v…xk9v`) — daha önce geçmiş bir bloğun kopyası bilgi taşımaz.
+    for (let i = 1; i < chars.length;) {
+        let copy = 0;
+        for (let len = Math.min(chars.length - i, i); len >= 2; len--) {
+            if (flat.slice(0, i).includes(flat.slice(i, i + len))) {
+                copy = len;
+                break;
+            }
+        }
+        if (copy) {
+            for (let k = i; k < i + copy; k++)
+                predictable[k] = true;
+            found.add('repeated');
+            i += copy;
+        }
+        else {
+            i++;
+        }
+    }
+    // 6. Karakter karakter: tekrar (`aaa`), ardışık kod noktası (`abcd`, `4321`), klavye satırı (`asdf`).
+    let previousStep = 0;
+    let previousKey = 0;
+    for (let i = 1; i < chars.length; i++) {
+        const step = (flat.codePointAt(i) ?? 0) - (flat.codePointAt(i - 1) ?? 0);
+        const key = keyboardDirection(flat[i - 1], flat[i]);
+        if (step === 0) {
+            predictable[i] = true;
+            found.add('repeated');
+        }
+        else if (Math.abs(step) === 1 && step === previousStep) {
+            predictable[i] = true;
+            found.add('sequence');
+        }
+        else if (key !== 0 && key === previousKey) {
+            predictable[i] = true;
+            found.add('sequence');
+        }
+        previousStep = step;
+        previousKey = key;
+    }
+    // Karakter havuzu — Unicode sınıflarıyla (Türkçe `ğ`/`Ş` doğru sınıfa düşer).
+    let pool = 0;
+    if (chars.some((c) => /\p{Ll}/u.test(c)))
+        pool += 26;
+    if (chars.some((c) => /\p{Lu}/u.test(c)))
+        pool += 26;
+    if (chars.some((c) => /\p{Nd}/u.test(c)))
+        pool += 10;
+    if (chars.some((c) => /[^\p{L}\p{N}]/u.test(c)))
+        pool += 33;
+    if (chars.some((c) => (c.codePointAt(0) ?? 0) > 0x7f))
+        pool += 32;
+    const effective = Math.max(1, predictable.filter((p) => !p).length);
+    const bits = effective * Math.log2(Math.max(pool, 2));
+    let score = THRESHOLDS.filter((t) => bits >= t).length;
+    if (tooShort)
+        score = Math.min(score, 1);
+    // İpucu yalnızca parola henüz iyi DEĞİLKEN — güçlü bir parolaya "şundan kaçının" denmez.
+    if (score >= 3)
+        return { score };
+    const warning = tooShort
+        ? 'tooShort'
+        : ['common', 'personal', 'sequence', 'repeated'].find((w) => found.has(w));
+    return warning ? { score, warning } : { score };
+}
+/**
+ * `mf-password-strength`'in kullandığı tahminci — varsayılan `estimatePasswordStrength`.
+ * Uygulama genelinde değiştirmek için (ör. `zxcvbn-ts`):
+ * `{ provide: MF_PASSWORD_STRENGTH_ESTIMATOR, useValue: (v, o) => fromZxcvbn(zxcvbn(v, o.userInputs)) }`.
+ */
+const MF_PASSWORD_STRENGTH_ESTIMATOR = new InjectionToken('mesgflow.password-strength-estimator', { factory: () => estimatePasswordStrength });
+/** Skoru görsel seviyeye eşler: 0–1 zayıf, 2 orta, 3 iyi, 4 güçlü. */
+function passwordStrengthLevel(score) {
+    return score <= 1 ? 'weak' : score === 2 ? 'fair' : score === 3 ? 'good' : 'strong';
+}
+
+const PATTERNS = {
+    lowercase: /\p{Ll}/u,
+    uppercase: /\p{Lu}/u,
+    digit: /\p{Nd}/u,
+    symbol: /[^\p{L}\p{N}\s]/u,
+};
+/** Tek bir gereksinimi sınar — Unicode-farkında (`ş` küçük harf, `Ğ` büyük harf sayılır). */
+function meetsPasswordRequirement(value, requirement) {
+    switch (requirement.kind) {
+        case 'minLength':
+            return Array.from(value).length >= requirement.value;
+        case 'custom':
+            return requirement.test(value);
+        default:
+            return PATTERNS[requirement.kind].test(value);
+    }
+}
+/** Gereksinim listesini sınar — form doğrulayıcısında da aynı sonucu üretmek için dışa açık. */
+function checkPasswordRequirements(value, requirements) {
+    return requirements.map((requirement) => ({
+        requirement,
+        met: meetsPasswordRequirement(value, requirement),
+    }));
+}
+
+/** Segment satırı — boyut ekseni `mf-progress` çubuğunun kalınlıklarıyla aynı ritimde. */
+const passwordStrengthTrackVariants = cva('flex w-full', {
+    variants: {
+        size: {
+            sm: 'h-1 gap-1',
+            md: 'h-1.5 gap-1.5',
+            lg: 'h-2 gap-1.5',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+
+const SEGMENTS = [0, 1, 2, 3];
+/** Segmentlerin art arda dolması için kademe (ms). */
+const SEGMENT_STAGGER_MS = 40;
+/** Karşılanmamış gereksinim varken gösterilen azami skor — form reddedecekken "Güçlü" yazmasın. */
+const UNSATISFIED_CAP = 2;
+// Tailwind dinamik sınıf adı göremez — ton sınıfları literal kalmalı.
+const SEGMENT_TONE = {
+    weak: 'bg-danger-fill',
+    fair: 'bg-warning-fill',
+    good: 'bg-success-fill',
+    strong: 'bg-success-fill',
+};
+const TEXT_TONE = {
+    weak: 'text-danger',
+    fair: 'text-warning',
+    good: 'text-success',
+    strong: 'text-success',
+};
+/**
+ * `<mf-password-input inputId="pw" autocomplete="new-password" [(value)]="password" />
+ *  <mf-password-strength for="pw" [value]="password()" [requirements]="rules" />`
+ *
+ * Kayıt / parola değiştirme formlarında parola alanının ALTINA kompoze edilen güç ölçer —
+ * `mf-character-count`'un `mfInput`'a göre durduğu yerde durur, değeri herhangi bir kaynaktan
+ * alabilir. Parolayı saklamaz, yaymaz: tek girdisi `value`.
+ *
+ * - Ölçüm: tahmin edilebilirlik (uzunluk ağırlıklı + tekrar/dizi/yaygın kelime/kişisel değer
+ *   cezaları), "1 büyük harf + 1 rakam" sayımı DEĞİL — bkz. `estimatePasswordStrength`.
+ *   Uygulama genelinde `MF_PASSWORD_STRENGTH_ESTIMATOR`, örnek bazında `[result]` ile değişir
+ *   (ör. `zxcvbn-ts`, sunucu/HIBP sonucu).
+ * - Görsel: 4 segment + seviye etiketi + tek satır ipucu; isteğe bağlı gereksinim listesi.
+ *   Renk tek gösterge değil — segment sayısı ve metin de aynı bilgiyi taşır (WCAG 1.4.1).
+ * - Erişilebilirlik: çubuk `role="meter"` (`aria-valuetext` = seviye adı). Görünen metin
+ *   ekran okuyucudan gizli; yerine `for` ile bağlanan kontrolün `aria-describedby`'ına eklenen
+ *   gizli bir özet okunur (yalnızca kendi id'sini ekler/çıkarır — `mf-field` ile çakışmaz).
+ *   `aria-live` bölgesi her tuşta DEĞİL, yalnızca seviye değişince duyurur.
+ *
+ * Dışa açık sinyaller (`#strength="mfPasswordStrength"`): `score()`, `level()`, `satisfied()` —
+ * ör. gönder düğmesini `!strength.satisfied()` iken kilitlemek için.
+ */
+class PasswordStrength {
+    /** Ölçülecek parola. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Parola `<input>`'unun id'si (`mf-password-input [inputId]` / `mf-field for` ile aynı). */
+    for = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "for" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Kontrol listesi — boşsa çizilmez. Karşılanmayan varken skor en fazla "orta" gösterilir. */
+    requirements = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requirements" }] : /* istanbul ignore next */ []));
+    /** Parolada geçmemesi gereken kişisel değerler (e-posta, ad…) — yerleşik tahminciye iletilir. */
+    userInputs = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userInputs" }] : /* istanbul ignore next */ []));
+    /** Bunun altındaki uzunluk en fazla "zayıf" sayılır. */
+    minLength = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /** Kontrollü mod: verilirse tahminci ÇALIŞMAZ, bu sonuç gösterilir (async/sunucu tahmincileri). */
+    result = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "result" }] : /* istanbul ignore next */ []));
+    /** Örnek bazında metin override'ı — verilmeyen alanlar `provideMesgflowUi` etiketlerinden gelir. */
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    document = inject(DOCUMENT);
+    estimator = inject(MF_PASSWORD_STRENGTH_ESTIMATOR);
+    injectedLabels = inject(MF_PASSWORD_STRENGTH_LABELS);
+    text = computed(() => mergeLabels(this.injectedLabels(), this.labels()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    segments = SEGMENTS;
+    staggerMs = SEGMENT_STAGGER_MS;
+    descriptionId = nextId('mf-password-strength');
+    estimate = computed(() => {
+        const value = this.value();
+        if (!value)
+            return { score: 0 };
+        return (this.result() ??
+            this.estimator(value, { minLength: this.minLength(), userInputs: this.userInputs() }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "estimate" }] : /* istanbul ignore next */ []));
+    checks = computed(() => {
+        const value = this.value();
+        const text = this.text();
+        return checkPasswordRequirements(value, this.requirements()).map(({ requirement, met }) => ({
+            met,
+            key: requirement.kind === 'custom' ? `custom:${requirement.id}` : requirement.kind,
+            label: requirement.kind === 'custom'
+                ? requirement.label
+                : requirement.kind === 'minLength'
+                    ? text.requirements.minLength.replace('{count}', String(requirement.value))
+                    : text.requirements[requirement.kind],
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checks" }] : /* istanbul ignore next */ []));
+    /** Tüm gereksinimler karşılandı mı (liste boşsa `true`). */
+    satisfied = computed(() => this.checks().every((c) => c.met), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "satisfied" }] : /* istanbul ignore next */ []));
+    /** Gösterilen skor (0–4) — karşılanmamış gereksinim varken en fazla 2. */
+    score = computed(() => {
+        if (!this.value())
+            return 0;
+        const raw = Math.min(4, Math.max(0, Math.round(this.estimate().score)));
+        return (this.satisfied() ? raw : Math.min(raw, UNSATISFIED_CAP));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "score" }] : /* istanbul ignore next */ []));
+    /** Görsel seviye — değer boşken `null`. */
+    level = computed(() => this.value() ? passwordStrengthLevel(this.score()) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    filled = computed(() => (this.value() ? Math.max(1, this.score()) : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+    levelLabel = computed(() => {
+        const level = this.level();
+        return level ? this.text().levels[level] : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levelLabel" }] : /* istanbul ignore next */ []));
+    hint = computed(() => {
+        if (!this.value())
+            return '';
+        const { hint, warning } = this.estimate();
+        if (hint)
+            return hint;
+        // Sınırlı skor (gereksinim eksik) "iyi" ipucunu gizlemesin diye ipucu ham sonuçtan gelir.
+        return warning ? this.text().warnings[warning] : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    metCount = computed(() => this.checks().filter((c) => c.met).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metCount" }] : /* istanbul ignore next */ []));
+    requirementsSummary = computed(() => this.checks().length
+        ? this.text()
+            .requirementsMet.replace('{met}', String(this.metCount()))
+            .replace('{total}', String(this.checks().length))
+        : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "requirementsSummary" }] : /* istanbul ignore next */ []));
+    /** Kontrole odaklanınca okunan gizli özet. Değer boşken gereksinimleri sıralar. */
+    description = computed(() => {
+        const text = this.text();
+        if (!this.value()) {
+            const rules = this.checks().map((c) => c.label);
+            return rules.length ? `${text.requirementsLabel}: ${rules.join(', ')}.` : '';
+        }
+        return [`${text.ariaLabel}: ${this.levelLabel()}.`, this.hint(), this.requirementsSummary()]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /**
+     * Canlı bölge metni YALNIZCA seviyeye bağlı — aynı seviyede yazmaya devam etmek metni
+     * değiştirmediği için DOM'a yazılmaz, ekran okuyucu her tuşta konuşmaz.
+     */
+    announcement = computed(() => {
+        const label = this.levelLabel();
+        return label ? `${this.text().ariaLabel}: ${label}` : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    levelText = computed(() => {
+        const level = this.level();
+        return cn('inline-flex shrink-0 items-center gap-1 font-medium transition-colors duration-fast ease-emphasis', level ? TEXT_TONE[level] : 'text-fg-subtle');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levelText" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => cn(passwordStrengthTrackVariants({ size: this.size() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('@container block w-full'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    segmentFill(index) {
+        const level = this.level();
+        return cn('absolute inset-0 origin-[0_50%] rounded-full transition-[transform,background-color] duration-slow ease-emphasis rtl:origin-[100%_50%]', level ? SEGMENT_TONE[level] : 'bg-transparent', index < this.filled() ? 'scale-x-100' : 'scale-x-0');
+    }
+    constructor() {
+        afterRenderEffect((onCleanup) => {
+            const id = this.for();
+            if (!id)
+                return;
+            const control = this.document.getElementById(id);
+            if (!control)
+                return;
+            const own = this.descriptionId;
+            const ids = (control.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+            if (!ids.includes(own))
+                control.setAttribute('aria-describedby', [...ids, own].join(' '));
+            onCleanup(() => {
+                const rest = (control.getAttribute('aria-describedby') ?? '')
+                    .split(/\s+/)
+                    .filter((x) => x && x !== own);
+                if (rest.length)
+                    control.setAttribute('aria-describedby', rest.join(' '));
+                else
+                    control.removeAttribute('aria-describedby');
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PasswordStrength, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: PasswordStrength, isStandalone: true, selector: "mf-password-strength", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, requirements: { classPropertyName: "requirements", publicName: "requirements", isSignal: true, isRequired: false, transformFunction: null }, userInputs: { classPropertyName: "userInputs", publicName: "userInputs", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["mfPasswordStrength"], ngImport: i0, template: "<div\r\n  role=\"meter\"\r\n  aria-valuemin=\"0\"\r\n  aria-valuemax=\"4\"\r\n  [attr.aria-valuenow]=\"score()\"\r\n  [attr.aria-valuetext]=\"levelLabel() || null\"\r\n  [attr.aria-label]=\"text().ariaLabel\"\r\n  [class]=\"trackClasses()\"\r\n>\r\n  @for (segment of segments; track segment) {\r\n    <span class=\"relative flex-1 overflow-hidden rounded-full bg-border\">\r\n      <span [class]=\"segmentFill(segment)\" [style.transition-delay.ms]=\"segment * staggerMs\"></span>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<p class=\"m-0 mt-1.5 flex min-h-5 flex-wrap items-center gap-x-2 text-xs\" aria-hidden=\"true\">\r\n  @if (level(); as current) {\r\n    <span [class]=\"levelText()\">\r\n      @if (current === 'strong') {\r\n        <span mfIcon [size]=\"14\" [filled]=\"true\" class=\"animate-pop\">check_circle</span>\r\n      }\r\n      {{ levelLabel() }}\r\n    </span>\r\n    @if (hint()) {\r\n      <span class=\"min-w-0 text-fg-subtle animate-fade-in\">{{ hint() }}</span>\r\n    }\r\n  }\r\n</p>\r\n\r\n@if (checks().length) {\r\n  <ul\r\n    class=\"m-0 mt-2 grid list-none gap-x-4 gap-y-1 p-0 @sm:grid-cols-2\"\r\n    [attr.aria-label]=\"text().requirementsLabel\"\r\n  >\r\n    @for (check of checks(); track check.key) {\r\n      <li\r\n        class=\"flex items-center gap-1.5 text-xs transition-colors duration-fast ease-emphasis\"\r\n        [class]=\"check.met ? 'text-fg' : 'text-fg-subtle'\"\r\n      >\r\n        @if (check.met) {\r\n          <span mfIcon [size]=\"14\" [filled]=\"true\" class=\"text-success animate-pop\"\r\n            >check_circle</span\r\n          >\r\n        } @else {\r\n          <span mfIcon [size]=\"14\">radio_button_unchecked</span>\r\n        }\r\n        <span>{{ check.label }}</span>\r\n        <span class=\"sr-only\"> ({{ check.met ? text().met : text().unmet }})</span>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n<span class=\"sr-only\" [id]=\"descriptionId\">{{ description() }}</span>\r\n<span class=\"sr-only\" aria-live=\"polite\">{{ announcement() }}</span>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PasswordStrength, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-password-strength', exportAs: 'mfPasswordStrength', imports: [Icon], host: { '[class]': 'hostClasses()' }, template: "<div\r\n  role=\"meter\"\r\n  aria-valuemin=\"0\"\r\n  aria-valuemax=\"4\"\r\n  [attr.aria-valuenow]=\"score()\"\r\n  [attr.aria-valuetext]=\"levelLabel() || null\"\r\n  [attr.aria-label]=\"text().ariaLabel\"\r\n  [class]=\"trackClasses()\"\r\n>\r\n  @for (segment of segments; track segment) {\r\n    <span class=\"relative flex-1 overflow-hidden rounded-full bg-border\">\r\n      <span [class]=\"segmentFill(segment)\" [style.transition-delay.ms]=\"segment * staggerMs\"></span>\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<p class=\"m-0 mt-1.5 flex min-h-5 flex-wrap items-center gap-x-2 text-xs\" aria-hidden=\"true\">\r\n  @if (level(); as current) {\r\n    <span [class]=\"levelText()\">\r\n      @if (current === 'strong') {\r\n        <span mfIcon [size]=\"14\" [filled]=\"true\" class=\"animate-pop\">check_circle</span>\r\n      }\r\n      {{ levelLabel() }}\r\n    </span>\r\n    @if (hint()) {\r\n      <span class=\"min-w-0 text-fg-subtle animate-fade-in\">{{ hint() }}</span>\r\n    }\r\n  }\r\n</p>\r\n\r\n@if (checks().length) {\r\n  <ul\r\n    class=\"m-0 mt-2 grid list-none gap-x-4 gap-y-1 p-0 @sm:grid-cols-2\"\r\n    [attr.aria-label]=\"text().requirementsLabel\"\r\n  >\r\n    @for (check of checks(); track check.key) {\r\n      <li\r\n        class=\"flex items-center gap-1.5 text-xs transition-colors duration-fast ease-emphasis\"\r\n        [class]=\"check.met ? 'text-fg' : 'text-fg-subtle'\"\r\n      >\r\n        @if (check.met) {\r\n          <span mfIcon [size]=\"14\" [filled]=\"true\" class=\"text-success animate-pop\"\r\n            >check_circle</span\r\n          >\r\n        } @else {\r\n          <span mfIcon [size]=\"14\">radio_button_unchecked</span>\r\n        }\r\n        <span>{{ check.label }}</span>\r\n        <span class=\"sr-only\"> ({{ check.met ? text().met : text().unmet }})</span>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n<span class=\"sr-only\" [id]=\"descriptionId\">{{ description() }}</span>\r\n<span class=\"sr-only\" aria-live=\"polite\">{{ announcement() }}</span>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], requirements: [{ type: i0.Input, args: [{ isSignal: true, alias: "requirements", required: false }] }], userInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInputs", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MF_PASSWORD_STRENGTH_ESTIMATOR, PasswordStrength, checkPasswordRequirements, estimatePasswordStrength, meetsPasswordRequirement, passwordStrengthLevel, passwordStrengthTrackVariants };
+//# sourceMappingURL=mesgflow-ui-kit-password-strength.mjs.map