@mesgflow/ui-kit 0.6.0

package/fesm2022/mesgflow-ui-kit-page-header.mjs

@@ -0,0 +1,83 @@
+import * as i0 from '@angular/core';
+import { input, Component, Directive } from '@angular/core';
+import { Breadcrumb } from '@mesgflow/ui-kit/breadcrumb';
+
+/**
+ * `<mf-page-header title="Ekip" [breadcrumbItems]="[...]">
+ *    <div mfPageHeaderActions><button mfButton>Davet et</button></div>
+ *  </mf-page-header>`
+ *
+ * `breadcrumbItems` boşsa (varsayılan) `mf-breadcrumb` HİÇ render EDİLMEZ —
+ * tek seviyeli sayfalarda (ör. "Ayarlar") gereksiz bir tek-öğeli iz
+ * gösterilmesin diye.
+ *
+ * Yerleşim KAPSAYICI sorgusuyla (`@container`) — viewport'a değil başlığın
+ * kendi genişliğine bakar: 32rem'den dar bir kapsayıcıda (kenar çubuğu açık
+ * tablet, bölünmüş panel) aksiyonlar başlığın ALTINA iner, başlığı ezmez.
+ */
+class PageHeader {
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    breadcrumbItems = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PageHeader, isStandalone: true, selector: "mf-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItems: { classPropertyName: "breadcrumbItems", publicName: "breadcrumbItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block @container" }, exportAs: ["mfPageHeader"], ngImport: i0, template: `
+    @if (breadcrumbItems().length > 0) {
+      <mf-breadcrumb [items]="breadcrumbItems()" class="mb-2 block" />
+    }
+    <div class="flex flex-col gap-3 @lg:flex-row @lg:items-start @lg:justify-between @lg:gap-4">
+      <div class="min-w-0">
+        <h1 class="text-title-lg font-display truncate text-fg">{{ title() }}</h1>
+        @if (description()) {
+          <p class="mt-1 text-sm text-fg-muted">{{ description() }}</p>
+        }
+      </div>
+      <ng-content select="[mfPageHeaderActions]" />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: Breadcrumb, selector: "mf-breadcrumb", inputs: ["items", "ariaLabel"], exportAs: ["mfBreadcrumb"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-page-header',
+                    exportAs: 'mfPageHeader',
+                    imports: [Breadcrumb],
+                    host: { class: 'block @container' },
+                    template: `
+    @if (breadcrumbItems().length > 0) {
+      <mf-breadcrumb [items]="breadcrumbItems()" class="mb-2 block" />
+    }
+    <div class="flex flex-col gap-3 @lg:flex-row @lg:items-start @lg:justify-between @lg:gap-4">
+      <div class="min-w-0">
+        <h1 class="text-title-lg font-display truncate text-fg">{{ title() }}</h1>
+        @if (description()) {
+          <p class="mt-1 text-sm text-fg-muted">{{ description() }}</p>
+        }
+      </div>
+      <ng-content select="[mfPageHeaderActions]" />
+    </div>
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], breadcrumbItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbItems", required: false }] }] } });
+
+/** `<div mfPageHeaderActions><button mfButton>...</button></div>` — bkz. `page-header.ts`'in JSDoc'u. */
+class PageHeaderActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageHeaderActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PageHeaderActions, isStandalone: true, selector: "[mfPageHeaderActions]", host: { classAttribute: "flex shrink-0 items-center gap-2" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageHeaderActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfPageHeaderActions]',
+                    host: { class: 'flex shrink-0 items-center gap-2' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PageHeader, PageHeaderActions };
+//# sourceMappingURL=mesgflow-ui-kit-page-header.mjs.map

package/fesm2022/mesgflow-ui-kit-page-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-page-header.mjs","sources":["../../../projects/ui-kit/page-header/page-header.ts","../../../projects/ui-kit/page-header/page-header-actions.ts","../../../projects/ui-kit/page-header/mesgflow-ui-kit-page-header.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { Breadcrumb, type BreadcrumbItem } from '@mesgflow/ui-kit/breadcrumb';\r\n\r\n/**\r\n * `<mf-page-header title=\"Ekip\" [breadcrumbItems]=\"[...]\">\r\n *    <div mfPageHeaderActions><button mfButton>Davet et</button></div>\r\n *  </mf-page-header>`\r\n *\r\n * `breadcrumbItems` boşsa (varsayılan) `mf-breadcrumb` HİÇ render EDİLMEZ —\r\n * tek seviyeli sayfalarda (ör. \"Ayarlar\") gereksiz bir tek-öğeli iz\r\n * gösterilmesin diye.\r\n *\r\n * Yerleşim KAPSAYICI sorgusuyla (`@container`) — viewport'a değil başlığın\r\n * kendi genişliğine bakar: 32rem'den dar bir kapsayıcıda (kenar çubuğu açık\r\n * tablet, bölünmüş panel) aksiyonlar başlığın ALTINA iner, başlığı ezmez.\r\n */\r\n@Component({\r\n  selector: 'mf-page-header',\r\n  exportAs: 'mfPageHeader',\r\n  imports: [Breadcrumb],\r\n  host: { class: 'block @container' },\r\n  template: `\r\n    @if (breadcrumbItems().length > 0) {\r\n      <mf-breadcrumb [items]=\"breadcrumbItems()\" class=\"mb-2 block\" />\r\n    }\r\n    <div class=\"flex flex-col gap-3 @lg:flex-row @lg:items-start @lg:justify-between @lg:gap-4\">\r\n      <div class=\"min-w-0\">\r\n        <h1 class=\"text-title-lg font-display truncate text-fg\">{{ title() }}</h1>\r\n        @if (description()) {\r\n          <p class=\"mt-1 text-sm text-fg-muted\">{{ description() }}</p>\r\n        }\r\n      </div>\r\n      <ng-content select=\"[mfPageHeaderActions]\" />\r\n    </div>\r\n  `,\r\n})\r\nexport class PageHeader {\r\n  readonly title = input.required<string>();\r\n  readonly description = input('');\r\n  readonly breadcrumbItems = input<BreadcrumbItem[]>([]);\r\n}\r\n","import { Directive } from '@angular/core';\r\n\r\n/** `<div mfPageHeaderActions><button mfButton>...</button></div>` — bkz. `page-header.ts`'in JSDoc'u. */\r\n@Directive({\r\n  selector: '[mfPageHeaderActions]',\r\n  host: { class: 'flex shrink-0 items-center gap-2' },\r\n})\r\nexport class PageHeaderActions {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;;;AAYG;MAqBU,UAAU,CAAA;IACZ,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,WAAW,GAAG,KAAK,CAAC,EAAE;oFAAC;IACvB,eAAe,GAAG,KAAK,CAAmB,EAAE;wFAAC;uGAH3C,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAfX,CAAA;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAfS,UAAU,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAiBT,UAAU,EAAA,UAAA,EAAA,CAAA;kBApBtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,cAAc;oBACxB,OAAO,EAAE,CAAC,UAAU,CAAC;AACrB,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE;AACnC,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;AAaT,EAAA,CAAA;AACF,iBAAA;;;ACjCD;MAKa,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,kCAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,kCAAkC,EAAE;AACpD,iBAAA;;;ACND;;AAEG;;"}

package/fesm2022/mesgflow-ui-kit-pagination.mjs

@@ -0,0 +1,99 @@
+import * as i0 from '@angular/core';
+import { model, input, booleanAttribute, inject, computed, Component } from '@angular/core';
+import { MF_PAGINATION_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+
+/**
+ * Görünen sayfa öğeleri — SABİT uzunlukta: `2 × boundaries + 2 × siblings + 3` (sayfa sayısı
+ * bundan azsa hepsi). Böylece sayfa değiştikçe öğe sayısı oynamaz, düğmeler zıplamaz (Table
+ * sayfalamasındaki değişken uzunluklu listenin aksine). Üç nokta tek bir sayfanın yerini
+ * tutuyorsa üç nokta yerine o sayfa gösterilir (… yalnızca ≥2 sayfayı gizler).
+ *
+ * `paginationRange(6, 20)` → `[1, 'ellipsis-start', 5, 6, 7, 'ellipsis-end', 20]`
+ */
+function paginationRange(current, pageCount, siblings = 1, boundaries = 1) {
+    const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+    const slots = 2 * boundaries + 2 * siblings + 3;
+    if (pageCount <= slots)
+        return range(1, pageCount);
+    const page = Math.min(Math.max(current, 1), pageCount);
+    const startPages = range(1, boundaries);
+    const endPages = range(pageCount - boundaries + 1, pageCount);
+    // Kardeş penceresi kenarlara yaklaşınca kayar — toplam uzunluk sabit kalsın.
+    const siblingsStart = Math.max(Math.min(page - siblings, pageCount - boundaries - siblings * 2 - 1), boundaries + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), pageCount - boundaries - 1);
+    return [
+        ...startPages,
+        siblingsStart > boundaries + 2 ? 'ellipsis-start' : boundaries + 1,
+        ...range(siblingsStart, siblingsEnd),
+        siblingsEnd < pageCount - boundaries - 1 ? 'ellipsis-end' : pageCount - boundaries,
+        ...endPages,
+    ];
+}
+
+const CELL_BASE = 'relative inline-flex shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md border-0 bg-transparent px-2 ' +
+    'font-medium tabular-nums transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+    'disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100';
+const SIZE = { sm: 'h-8 min-w-8 text-xs', md: 'h-9 min-w-9 text-sm' };
+/**
+ * `<mf-pagination [pageCount]="20" [(page)]="page" />`
+ *
+ * Tablo dışı listeler (kart ızgarası, arama sonuçları) için bağımsız sayfalama. Table'ın
+ * kendi sayfalamasıyla AYNI görsel dil: aktif sayfa nötr zemin + alt kenarda 2px marka rayı
+ * ("buradasın" motifi), dolu blok değil.
+ *
+ * Öğe sayısı sabittir (bkz. `paginationRange`) — sayfa değiştikçe düğmeler kaymaz. `compact`:
+ * sayı listesi yerine "Sayfa 3 / 20" (dar alanlar, mobil). `<nav>` landmark'ı + aktif sayfada
+ * `aria-current="page"`; sayfa düğmeleri "Page 3" gibi tam adla duyurulur; üç nokta gizlidir.
+ */
+class Pagination {
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageCount = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /** Aktif sayfanın iki yanında gösterilecek sayfa sayısı. */
+    siblings = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siblings" }] : /* istanbul ignore next */ []));
+    /** İlk/son sayfaya atlama düğmeleri. */
+    showEdges = input(false, { ...(ngDevMode ? { debugName: "showEdges" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Verilmezse `MfLabels.pagination.navAriaLabel` — sayfada birden çok sayfalama varsa ayırt edin. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    labels = inject(MF_PAGINATION_LABELS);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.labels().navAriaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    safeCount = computed(() => Math.max(1, Math.floor(this.pageCount())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeCount" }] : /* istanbul ignore next */ []));
+    current = computed(() => Math.min(Math.max(1, this.page()), this.safeCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    items = computed(() => paginationRange(this.current(), this.safeCount(), this.siblings()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    cell(active = false) {
+        return cn(CELL_BASE, SIZE[this.size()], active
+            ? 'bg-surface-alt font-semibold text-fg'
+            : 'text-fg-muted hover:bg-surface-alt hover:text-fg', active &&
+            "after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full after:bg-accent-fill after:content-['']");
+    }
+    goTo(page) {
+        const next = Math.min(Math.max(1, page), this.safeCount());
+        if (next !== this.current())
+            this.page.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Pagination, isStandalone: true, selector: "mf-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, siblings: { classPropertyName: "siblings", publicName: "siblings", isSignal: true, isRequired: false, transformFunction: null }, showEdges: { classPropertyName: "showEdges", publicName: "showEdges", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { classAttribute: "block" }, exportAs: ["mfPagination"], ngImport: i0, template: "<nav class=\"flex items-center gap-0.5\" [attr.aria-label]=\"effectiveAriaLabel()\">\r\n  @if (showEdges()) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"cell()\"\r\n      [disabled]=\"current() === 1\"\r\n      [attr.aria-label]=\"labels().first\"\r\n      (click)=\"goTo(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n    </button>\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"cell()\"\r\n    [disabled]=\"current() === 1\"\r\n    [attr.aria-label]=\"labels().previous\"\r\n    (click)=\"goTo(current() - 1)\"\r\n  >\r\n    <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n  </button>\r\n\r\n  @if (compact()) {\r\n    <span class=\"px-2 text-sm text-fg-muted tabular-nums\" aria-live=\"polite\">\r\n      {{ labels().page }} {{ current() }} / {{ safeCount() }}\r\n    </span>\r\n  } @else {\r\n    @for (item of items(); track item) {\r\n      @if (item === 'ellipsis-start' || item === 'ellipsis-end') {\r\n        <span\r\n          aria-hidden=\"true\"\r\n          class=\"inline-flex min-w-8 items-center justify-center text-sm text-fg-subtle select-none\"\r\n          >\u2026</span\r\n        >\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"cell(item === current())\"\r\n          [attr.aria-current]=\"item === current() ? 'page' : null\"\r\n          [attr.aria-label]=\"labels().page + ' ' + item\"\r\n          (click)=\"goTo(item)\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n      }\r\n    }\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"cell()\"\r\n    [disabled]=\"current() === safeCount()\"\r\n    [attr.aria-label]=\"labels().next\"\r\n    (click)=\"goTo(current() + 1)\"\r\n  >\r\n    <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n  </button>\r\n  @if (showEdges()) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"cell()\"\r\n      [disabled]=\"current() === safeCount()\"\r\n      [attr.aria-label]=\"labels().last\"\r\n      (click)=\"goTo(safeCount())\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n    </button>\r\n  }\r\n</nav>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Pagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-pagination', exportAs: 'mfPagination', imports: [Icon], host: { class: 'block' }, template: "<nav class=\"flex items-center gap-0.5\" [attr.aria-label]=\"effectiveAriaLabel()\">\r\n  @if (showEdges()) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"cell()\"\r\n      [disabled]=\"current() === 1\"\r\n      [attr.aria-label]=\"labels().first\"\r\n      (click)=\"goTo(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n    </button>\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"cell()\"\r\n    [disabled]=\"current() === 1\"\r\n    [attr.aria-label]=\"labels().previous\"\r\n    (click)=\"goTo(current() - 1)\"\r\n  >\r\n    <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n  </button>\r\n\r\n  @if (compact()) {\r\n    <span class=\"px-2 text-sm text-fg-muted tabular-nums\" aria-live=\"polite\">\r\n      {{ labels().page }} {{ current() }} / {{ safeCount() }}\r\n    </span>\r\n  } @else {\r\n    @for (item of items(); track item) {\r\n      @if (item === 'ellipsis-start' || item === 'ellipsis-end') {\r\n        <span\r\n          aria-hidden=\"true\"\r\n          class=\"inline-flex min-w-8 items-center justify-center text-sm text-fg-subtle select-none\"\r\n          >\u2026</span\r\n        >\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"cell(item === current())\"\r\n          [attr.aria-current]=\"item === current() ? 'page' : null\"\r\n          [attr.aria-label]=\"labels().page + ' ' + item\"\r\n          (click)=\"goTo(item)\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n      }\r\n    }\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"cell()\"\r\n    [disabled]=\"current() === safeCount()\"\r\n    [attr.aria-label]=\"labels().next\"\r\n    (click)=\"goTo(current() + 1)\"\r\n  >\r\n    <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n  </button>\r\n  @if (showEdges()) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"cell()\"\r\n      [disabled]=\"current() === safeCount()\"\r\n      [attr.aria-label]=\"labels().last\"\r\n      (click)=\"goTo(safeCount())\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n    </button>\r\n  }\r\n</nav>\r\n" }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: true }] }], siblings: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblings", required: false }] }], showEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdges", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Pagination, paginationRange };
+//# sourceMappingURL=mesgflow-ui-kit-pagination.mjs.map

package/fesm2022/mesgflow-ui-kit-pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-pagination.mjs","sources":["../../../projects/ui-kit/pagination/pagination-range.ts","../../../projects/ui-kit/pagination/pagination.ts","../../../projects/ui-kit/pagination/pagination.html","../../../projects/ui-kit/pagination/mesgflow-ui-kit-pagination.ts"],"sourcesContent":["export type PaginationItem = number | 'ellipsis-start' | 'ellipsis-end';\r\n\r\n/**\r\n * Görünen sayfa öğeleri — SABİT uzunlukta: `2 × boundaries + 2 × siblings + 3` (sayfa sayısı\r\n * bundan azsa hepsi). Böylece sayfa değiştikçe öğe sayısı oynamaz, düğmeler zıplamaz (Table\r\n * sayfalamasındaki değişken uzunluklu listenin aksine). Üç nokta tek bir sayfanın yerini\r\n * tutuyorsa üç nokta yerine o sayfa gösterilir (… yalnızca ≥2 sayfayı gizler).\r\n *\r\n * `paginationRange(6, 20)` → `[1, 'ellipsis-start', 5, 6, 7, 'ellipsis-end', 20]`\r\n */\r\nexport function paginationRange(\r\n  current: number,\r\n  pageCount: number,\r\n  siblings = 1,\r\n  boundaries = 1,\r\n): PaginationItem[] {\r\n  const range = (from: number, to: number) =>\r\n    Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);\r\n\r\n  const slots = 2 * boundaries + 2 * siblings + 3;\r\n  if (pageCount <= slots) return range(1, pageCount);\r\n\r\n  const page = Math.min(Math.max(current, 1), pageCount);\r\n  const startPages = range(1, boundaries);\r\n  const endPages = range(pageCount - boundaries + 1, pageCount);\r\n\r\n  // Kardeş penceresi kenarlara yaklaşınca kayar — toplam uzunluk sabit kalsın.\r\n  const siblingsStart = Math.max(\r\n    Math.min(page - siblings, pageCount - boundaries - siblings * 2 - 1),\r\n    boundaries + 2,\r\n  );\r\n  const siblingsEnd = Math.min(\r\n    Math.max(page + siblings, boundaries + siblings * 2 + 2),\r\n    pageCount - boundaries - 1,\r\n  );\r\n\r\n  return [\r\n    ...startPages,\r\n    siblingsStart > boundaries + 2 ? 'ellipsis-start' : boundaries + 1,\r\n    ...range(siblingsStart, siblingsEnd),\r\n    siblingsEnd < pageCount - boundaries - 1 ? 'ellipsis-end' : pageCount - boundaries,\r\n    ...endPages,\r\n  ] as PaginationItem[];\r\n}\r\n","import { Component, booleanAttribute, computed, inject, input, model } from '@angular/core';\r\nimport { MF_PAGINATION_LABELS, cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { paginationRange } from './pagination-range';\r\n\r\nconst CELL_BASE =\r\n  'relative inline-flex shrink-0 cursor-pointer appearance-none items-center justify-center rounded-md border-0 bg-transparent px-2 ' +\r\n  'font-medium tabular-nums transition-colors duration-fast ease-emphasis active:scale-[0.99] ' +\r\n  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +\r\n  'disabled:pointer-events-none disabled:opacity-50 disabled:active:scale-100';\r\n\r\nconst SIZE = { sm: 'h-8 min-w-8 text-xs', md: 'h-9 min-w-9 text-sm' } as const;\r\n\r\n/**\r\n * `<mf-pagination [pageCount]=\"20\" [(page)]=\"page\" />`\r\n *\r\n * Tablo dışı listeler (kart ızgarası, arama sonuçları) için bağımsız sayfalama. Table'ın\r\n * kendi sayfalamasıyla AYNI görsel dil: aktif sayfa nötr zemin + alt kenarda 2px marka rayı\r\n * (\"buradasın\" motifi), dolu blok değil.\r\n *\r\n * Öğe sayısı sabittir (bkz. `paginationRange`) — sayfa değiştikçe düğmeler kaymaz. `compact`:\r\n * sayı listesi yerine \"Sayfa 3 / 20\" (dar alanlar, mobil). `<nav>` landmark'ı + aktif sayfada\r\n * `aria-current=\"page\"`; sayfa düğmeleri \"Page 3\" gibi tam adla duyurulur; üç nokta gizlidir.\r\n */\r\n@Component({\r\n  selector: 'mf-pagination',\r\n  exportAs: 'mfPagination',\r\n  imports: [Icon],\r\n  host: { class: 'block' },\r\n  templateUrl: './pagination.html',\r\n})\r\nexport class Pagination {\r\n  readonly page = model(1);\r\n  readonly pageCount = input.required<number>();\r\n  /** Aktif sayfanın iki yanında gösterilecek sayfa sayısı. */\r\n  readonly siblings = input(1);\r\n  /** İlk/son sayfaya atlama düğmeleri. */\r\n  readonly showEdges = input(false, { transform: booleanAttribute });\r\n  readonly compact = input(false, { transform: booleanAttribute });\r\n  readonly size = input<'sm' | 'md'>('md');\r\n  /** Verilmezse `MfLabels.pagination.navAriaLabel` — sayfada birden çok sayfalama varsa ayırt edin. */\r\n  readonly ariaLabel = input<string>();\r\n\r\n  protected readonly labels = inject(MF_PAGINATION_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.labels().navAriaLabel,\r\n  );\r\n  protected readonly safeCount = computed(() => Math.max(1, Math.floor(this.pageCount())));\r\n  protected readonly current = computed(() => Math.min(Math.max(1, this.page()), this.safeCount()));\r\n  protected readonly items = computed(() =>\r\n    paginationRange(this.current(), this.safeCount(), this.siblings()),\r\n  );\r\n\r\n  protected cell(active = false): string {\r\n    return cn(\r\n      CELL_BASE,\r\n      SIZE[this.size()],\r\n      active\r\n        ? 'bg-surface-alt font-semibold text-fg'\r\n        : 'text-fg-muted hover:bg-surface-alt hover:text-fg',\r\n      active &&\r\n        \"after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full after:bg-accent-fill after:content-['']\",\r\n    );\r\n  }\r\n\r\n  protected goTo(page: number): void {\r\n    const next = Math.min(Math.max(1, page), this.safeCount());\r\n    if (next !== this.current()) this.page.set(next);\r\n  }\r\n}\r\n","<nav class=\"flex items-center gap-0.5\" [attr.aria-label]=\"effectiveAriaLabel()\">\r\n  @if (showEdges()) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"cell()\"\r\n      [disabled]=\"current() === 1\"\r\n      [attr.aria-label]=\"labels().first\"\r\n      (click)=\"goTo(1)\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">first_page</span>\r\n    </button>\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"cell()\"\r\n    [disabled]=\"current() === 1\"\r\n    [attr.aria-label]=\"labels().previous\"\r\n    (click)=\"goTo(current() - 1)\"\r\n  >\r\n    <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n  </button>\r\n\r\n  @if (compact()) {\r\n    <span class=\"px-2 text-sm text-fg-muted tabular-nums\" aria-live=\"polite\">\r\n      {{ labels().page }} {{ current() }} / {{ safeCount() }}\r\n    </span>\r\n  } @else {\r\n    @for (item of items(); track item) {\r\n      @if (item === 'ellipsis-start' || item === 'ellipsis-end') {\r\n        <span\r\n          aria-hidden=\"true\"\r\n          class=\"inline-flex min-w-8 items-center justify-center text-sm text-fg-subtle select-none\"\r\n          >…</span\r\n        >\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"cell(item === current())\"\r\n          [attr.aria-current]=\"item === current() ? 'page' : null\"\r\n          [attr.aria-label]=\"labels().page + ' ' + item\"\r\n          (click)=\"goTo(item)\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n      }\r\n    }\r\n  }\r\n\r\n  <button\r\n    type=\"button\"\r\n    [class]=\"cell()\"\r\n    [disabled]=\"current() === safeCount()\"\r\n    [attr.aria-label]=\"labels().next\"\r\n    (click)=\"goTo(current() + 1)\"\r\n  >\r\n    <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n  </button>\r\n  @if (showEdges()) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"cell()\"\r\n      [disabled]=\"current() === safeCount()\"\r\n      [attr.aria-label]=\"labels().last\"\r\n      (click)=\"goTo(safeCount())\"\r\n    >\r\n      <span mfIcon [size]=\"16\" class=\"rtl:-scale-x-100\">last_page</span>\r\n    </button>\r\n  }\r\n</nav>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+import * as i0 from '@angular/core';
+import { model, input, inject, computed, signal, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessorBase, MF_PASSWORD_INPUT_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Input, InputGroup, InputSuffix } from '@mesgflow/ui-kit/input';
+
+/**
+ * `<mf-password-input [(value)]="password" />` — `InputGroup` üstüne kompoze
+ * edilmiş, sağda göster/gizle düğmesi taşıyan parola alanı (emsal:
+ * `NumberInput`/`DateRangePicker`'ın AYNI `mf-input-group` kabuğunu
+ * kullanma deseni). `type="password"`/`"text"` arasında geçiş SADECE
+ * görünürlük içindir — değer her zaman `value` model'inde düz metin olarak
+ * tutulur.
+ */
+class PasswordInput extends ValueAccessorBase {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    showLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    hideLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    passwordLabels = inject(MF_PASSWORD_INPUT_LABELS);
+    effectiveShowLabel = computed(() => this.showLabel() ?? this.passwordLabels().show, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveShowLabel" }] : /* istanbul ignore next */ []));
+    effectiveHideLabel = computed(() => this.hideLabel() ?? this.passwordLabels().hide, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHideLabel" }] : /* istanbul ignore next */ []));
+    visible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.value.set(value);
+    }
+    toggle() {
+        this.visible.update((v) => !v);
+    }
+    onInput(raw) {
+        this.value.set(raw);
+        this.onChange(raw);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PasswordInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: PasswordInput, isStandalone: true, selector: "mf-password-input", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.w-full": "fullWidth()" }, classAttribute: "inline-flex" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PasswordInput), multi: true },
+        ], exportAs: ["mfPasswordInput"], usesInheritance: true, ngImport: i0, template: `
+    <mf-input-group [hasError]="hasError()" [disabled]="disabled()">
+      <input
+        mfInput
+        [type]="visible() ? 'text' : 'password'"
+        class="border-0 bg-transparent p-0 shadow-none focus-visible:outline-none"
+        [value]="value()"
+        [disabled]="disabled()"
+        [placeholder]="placeholder()"
+        [attr.aria-label]="ariaLabel() || null"
+        (input)="onInput($any($event.target).value)"
+        (blur)="onTouched()"
+      />
+      <button
+        mfInputSuffix
+        type="button"
+        class="appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg"
+        [attr.aria-label]="visible() ? effectiveHideLabel() : effectiveShowLabel()"
+        (click)="toggle()"
+      >
+        <span mfIcon [size]="16">{{ visible() ? 'visibility_off' : 'visibility' }}</span>
+      </button>
+    </mf-input-group>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: InputGroup, selector: "mf-input-group", inputs: ["size", "disabled", "hasError", "padded", "wrap"], exportAs: ["mfInputGroup"] }, { kind: "directive", type: InputSuffix, selector: "[mfInputSuffix]", inputs: ["addon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PasswordInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-password-input',
+                    exportAs: 'mfPasswordInput',
+                    imports: [Icon, Input, InputGroup, InputSuffix],
+                    host: { class: 'inline-flex', '[class.w-full]': 'fullWidth()' },
+                    template: `
+    <mf-input-group [hasError]="hasError()" [disabled]="disabled()">
+      <input
+        mfInput
+        [type]="visible() ? 'text' : 'password'"
+        class="border-0 bg-transparent p-0 shadow-none focus-visible:outline-none"
+        [value]="value()"
+        [disabled]="disabled()"
+        [placeholder]="placeholder()"
+        [attr.aria-label]="ariaLabel() || null"
+        (input)="onInput($any($event.target).value)"
+        (blur)="onTouched()"
+      />
+      <button
+        mfInputSuffix
+        type="button"
+        class="appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg"
+        [attr.aria-label]="visible() ? effectiveHideLabel() : effectiveShowLabel()"
+        (click)="toggle()"
+      >
+        <span mfIcon [size]="16">{{ visible() ? 'visibility_off' : 'visibility' }}</span>
+      </button>
+    </mf-input-group>
+  `,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PasswordInput), multi: true },
+                    ],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PasswordInput };
+//# sourceMappingURL=mesgflow-ui-kit-password-input.mjs.map

package/fesm2022/mesgflow-ui-kit-password-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-password-input.mjs","sources":["../../../projects/ui-kit/password-input/password-input.ts","../../../projects/ui-kit/password-input/mesgflow-ui-kit-password-input.ts"],"sourcesContent":["import { Component, computed, forwardRef, inject, input, model, signal } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { MF_PASSWORD_INPUT_LABELS, ValueAccessorBase } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Input, InputGroup, InputSuffix } from '@mesgflow/ui-kit/input';\r\n\r\n/**\r\n * `<mf-password-input [(value)]=\"password\" />` — `InputGroup` üstüne kompoze\r\n * edilmiş, sağda göster/gizle düğmesi taşıyan parola alanı (emsal:\r\n * `NumberInput`/`DateRangePicker`'ın AYNI `mf-input-group` kabuğunu\r\n * kullanma deseni). `type=\"password\"`/`\"text\"` arasında geçiş SADECE\r\n * görünürlük içindir — değer her zaman `value` model'inde düz metin olarak\r\n * tutulur.\r\n */\r\n@Component({\r\n  selector: 'mf-password-input',\r\n  exportAs: 'mfPasswordInput',\r\n  imports: [Icon, Input, InputGroup, InputSuffix],\r\n  host: { class: 'inline-flex', '[class.w-full]': 'fullWidth()' },\r\n  template: `\r\n    <mf-input-group [hasError]=\"hasError()\" [disabled]=\"disabled()\">\r\n      <input\r\n        mfInput\r\n        [type]=\"visible() ? 'text' : 'password'\"\r\n        class=\"border-0 bg-transparent p-0 shadow-none focus-visible:outline-none\"\r\n        [value]=\"value()\"\r\n        [disabled]=\"disabled()\"\r\n        [placeholder]=\"placeholder()\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        (input)=\"onInput($any($event.target).value)\"\r\n        (blur)=\"onTouched()\"\r\n      />\r\n      <button\r\n        mfInputSuffix\r\n        type=\"button\"\r\n        class=\"appearance-none border-0 bg-transparent p-0 transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n        [attr.aria-label]=\"visible() ? effectiveHideLabel() : effectiveShowLabel()\"\r\n        (click)=\"toggle()\"\r\n      >\r\n        <span mfIcon [size]=\"16\">{{ visible() ? 'visibility_off' : 'visibility' }}</span>\r\n      </button>\r\n    </mf-input-group>\r\n  `,\r\n  providers: [\r\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PasswordInput), multi: true },\r\n  ],\r\n})\r\nexport class PasswordInput extends ValueAccessorBase<string> implements ControlValueAccessor {\r\n  readonly value = model('');\r\n  readonly placeholder = input('');\r\n  readonly disabled = input(false);\r\n  readonly hasError = input(false);\r\n  readonly ariaLabel = input('');\r\n  readonly fullWidth = input(false);\r\n  readonly showLabel = input<string>();\r\n  readonly hideLabel = input<string>();\r\n\r\n  private readonly passwordLabels = inject(MF_PASSWORD_INPUT_LABELS);\r\n  protected readonly effectiveShowLabel = computed(\r\n    () => this.showLabel() ?? this.passwordLabels().show,\r\n  );\r\n  protected readonly effectiveHideLabel = computed(\r\n    () => this.hideLabel() ?? this.passwordLabels().hide,\r\n  );\r\n\r\n  protected readonly visible = signal(false);\r\n\r\n  writeValue(value: string): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  protected toggle(): void {\r\n    this.visible.update((v) => !v);\r\n  }\r\n\r\n  protected onInput(raw: string): void {\r\n    this.value.set(raw);\r\n    this.onChange(raw);\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-popover.mjs

@@ -0,0 +1,213 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { input, model, output, signal, computed, effect, untracked, Component } from '@angular/core';
+import { cn } from '@mesgflow/ui-kit/core';
+import { cva } from 'class-variance-authority';
+
+const popoverPanelVariants = cva('overflow-auto rounded-lg border border-hairline bg-overlay shadow-2', {
+    variants: {
+        padding: {
+            none: 'p-0',
+            sm: 'p-1',
+            md: 'p-2',
+            lg: 'p-3',
+        },
+    },
+    defaultVariants: { padding: 'sm' },
+});
+
+/** `--duration-fast` (tokens/motion.css) ile birebir — `animate-overlay-out`un süresi. */
+const EXIT_MS = 120;
+const PLACEMENTS = {
+    'bottom-start': [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ],
+    'bottom-end': [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+    ],
+    'top-start': [
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+    ],
+    'top-end': [
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+    ],
+    /** Ortalanmış dört yön — köşe hizalı değişkenlerin aksine tetikleyicinin TAM ortasına hizalanır (ör. Tooltip'in gelecekteki Popover geçişi için, bkz. plan Faz 1c). */
+    top: [
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+    ],
+    bottom: [
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 },
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+    ],
+    left: [
+        { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -4 },
+        { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 4 },
+    ],
+    right: [
+        { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 4 },
+        { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -4 },
+    ],
+    /** Sağda, tetikleyicinin ÜSTÜYLE hizalı (ortalanmış DEĞİL) — Sidebar daraltılmış nav satırının flyout'u gibi çok satırlı panellerde `right`in dikey ortalaması paneli beklenmedik yönde kaydırır. */
+    'right-start': [
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
+    ],
+};
+/**
+ * `<button cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="open.set(true)">...</button>`
+ * `<mf-popover [origin]="trigger" [(open)]="open">...içerik (ng-content)...</mf-popover>`
+ *
+ * `Select`/`TableColumnsMenu`/`TableFilterMenu`/`DatePicker`'ın HER BİRİNİN
+ * ayrı ayrı yazdığı `cdkConnectedOverlay` + pozisyon dizisi + backdrop/ESC
+ * kapama iskeletini TEK yerde toplayan genel amaçlı panel primitifi (bkz.
+ * README "Yeni bir primitif gerektiğinde"). YENİ kullanım noktaları bunu
+ * kullanmalı — mevcut dört bileşenin buna taşınması BİLEREK bu değişiklikle
+ * birlikte yapılmadı: her biri kendi klavye/vurgu (highlight) mantığını
+ * Popover'ın panel içeriğiyle nasıl kompoze edeceğine karar vermeli, ayrı ve
+ * her ekranın tarayıcıda tek tek doğrulanmasını gerektiren bir iş.
+ *
+ * `origin`, CDK'nın `cdkOverlayOrigin` directive'inin `exportAs` referansı —
+ * ayrı bir wrapper directive'e gerek yok, CDK zaten sağlıyor.
+ */
+class Popover {
+    origin = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "origin" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    padding = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Backdrop şeffaf ama TIKLANABİLİR — dışarı tıklayınca kapanması için var, görsel karartma YOK. */
+    hasBackdrop = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : /* istanbul ignore next */ []));
+    /** `true` ise panel tetikleyiciden DAR olamaz (min-width) — genişleyebilir, küçülemez. */
+    matchTriggerWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matchTriggerWidth" }] : /* istanbul ignore next */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    closed = output();
+    /**
+     * `open()` MANTIKSAL durumu taşır (tüketici `[(open)]` ile doğrudan
+     * yazabilir — ör. `Select`'in bir seçenek tıklamasında `this.open.set(false)`
+     * çağırması). `attached()` ise CDK'ya bağlanan GERÇEK durum: `open()`
+     * `false`'a düştüğünde panel ANINDA kaldırılmaz, `closing` işaretlenip
+     * `animate-overlay-out` oynatılır, `EXIT_MS` sonra `attached` da `false`
+     * olur. Bu ikili, `DialogService.open()`'daki `closePredicate` gecikmesiyle
+     * AYNI doktrini CDK Overlay tarafında uyguluyor (CDK'nın `cdkConnectedOverlay`'i
+     * Dialog'un aksine bir "kapanışı ertele" kancası SUNMUYOR, bu yüzden
+     * `effect()` tabanlı bu yaklaşım gerekiyor).
+     */
+    attached = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attached" }] : /* istanbul ignore next */ []));
+    closing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []));
+    exitTimer;
+    positions = computed(() => PLACEMENTS[this.placement()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(popoverPanelVariants({ padding: this.padding() }), this.closing() ? 'animate-overlay-out' : 'animate-overlay-in', this.panelClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const shouldBeOpen = this.open();
+            clearTimeout(this.exitTimer);
+            if (shouldBeOpen) {
+                this.closing.set(false);
+                this.attached.set(true);
+                return;
+            }
+            untracked(() => {
+                if (!this.attached())
+                    return;
+                const reducedMotion = typeof matchMedia !== 'undefined' &&
+                    matchMedia('(prefers-reduced-motion: reduce)').matches;
+                if (reducedMotion) {
+                    this.attached.set(false);
+                    return;
+                }
+                this.closing.set(true);
+                this.exitTimer = setTimeout(() => {
+                    this.attached.set(false);
+                    this.closing.set(false);
+                }, EXIT_MS);
+            });
+        });
+    }
+    close() {
+        this.open.set(false);
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Popover, isStandalone: true, selector: "mf-popover", inputs: { origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { classAttribute: "contents" }, exportAs: ["mfPopover"], ngImport: i0, template: `
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin()"
+      [cdkConnectedOverlayOpen]="attached()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayHasBackdrop]="hasBackdrop()"
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      [cdkConnectedOverlayMinWidth]="
+        matchTriggerWidth() ? origin().elementRef.nativeElement.offsetWidth : null
+      "
+      (backdropClick)="close()"
+      (detach)="close()"
+    >
+      <!--
+        Panel sarmalayıcısı BİLEREK odaklanabilir değil — Escape'i içindeki
+        odaklanmış elemandan yukarı taşıyan bir olay-delegasyon kapsayıcısı,
+        kendisi bir etkileşim hedefi değil.
+      -->
+      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+      <div [class]="classes()" (keydown.escape)="close()">
+        <ng-content />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Popover, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-popover',
+                    exportAs: 'mfPopover',
+                    imports: [OverlayModule],
+                    host: { class: 'contents' },
+                    template: `
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin()"
+      [cdkConnectedOverlayOpen]="attached()"
+      [cdkConnectedOverlayPositions]="positions()"
+      [cdkConnectedOverlayHasBackdrop]="hasBackdrop()"
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      [cdkConnectedOverlayMinWidth]="
+        matchTriggerWidth() ? origin().elementRef.nativeElement.offsetWidth : null
+      "
+      (backdropClick)="close()"
+      (detach)="close()"
+    >
+      <!--
+        Panel sarmalayıcısı BİLEREK odaklanabilir değil — Escape'i içindeki
+        odaklanmış elemandan yukarı taşıyan bir olay-delegasyon kapsayıcısı,
+        kendisi bir etkileşim hedefi değil.
+      -->
+      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+      <div [class]="classes()" (keydown.escape)="close()">
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Popover, popoverPanelVariants };
+//# sourceMappingURL=mesgflow-ui-kit-popover.mjs.map