@mesgflow/ui-kit 0.6.0 → 0.8.0

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

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, inject, computed, Component } from '@angular/core';
 import { MF_COMMON_LABELS, cn } from '@mesgflow/ui-kit/core';
-import { Icon } from '@mesgflow/ui-kit/icon';
 
 const SIZE_PX = { xs: 14, sm: 16, md: 20, lg: 24 };
 const TONE_CLASS = {
@@ -16,15 +15,12 @@ const TONE_CLASS = {
     help: 'text-help',
 };
 /**
- * `<mf-spinner size="sm" />` — dönen yüklenme göstergesi. Ayrı bir SVG/CSS
- * animasyonu ÇİZMEK yerine kitin zaten her yerde kullandığı `progress_activity`
- * Material Symbol'ü + `animate-spin` deseni tekrar kullanılıyor (bkz.
- * `ConfirmDialog`'un onay butonu) — tüm "yükleniyor" göstergeleri tek bir
- * görsel dil konuşuyor.
+ * `<mf-spinner size="sm" />` — dönen yüklenme göstergesi: iki katmanlı SVG
+ * halka (soluk iz + dönen yay). v0.7 öncesi Material Symbols ligature'ıydı —
+ * font yüklenene kadar "progress_activity" METNİ görünüyordu (FOUT) ve
+ * ikon seti değişince (Lucide) kırılıyordu; SVG her ikisinden bağımsız.
  *
- * `role="status"` + `aria-label` HOST'ta (ikonun kendisi `Icon` directive'i
- * gereği her zaman `aria-hidden` — bkz. icon.ts) — ekran okuyucu ligature
- * kaynak metnini ("progress_activity") DEĞİL, buradaki anlamlı etiketi anons eder.
+ * `role="status"` + `aria-label` HOST'ta, SVG `aria-hidden`.
  */
 class Spinner {
     size = input('md', /* @ts-ignore */
@@ -39,23 +35,56 @@ class Spinner {
     ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
     sizePx = computed(() => SIZE_PX[this.size()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sizePx" }] : /* istanbul ignore next */ []));
-    iconClasses = computed(() => cn('animate-spin', TONE_CLASS[this.tone()]), /* @ts-ignore */
+    iconClasses = computed(() => cn('block animate-spin', TONE_CLASS[this.tone()]), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Spinner, isStandalone: true, selector: "mf-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "effectiveAriaLabel()" }, classAttribute: "inline-flex" }, exportAs: ["mfSpinner"], ngImport: i0, template: `<span mfIcon [size]="sizePx()" [class]="iconClasses()">progress_activity</span>`, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Spinner, isStandalone: true, selector: "mf-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "effectiveAriaLabel()" }, classAttribute: "inline-flex" }, exportAs: ["mfSpinner"], ngImport: i0, template: `
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      [attr.width]="sizePx()"
+      [attr.height]="sizePx()"
+      [class]="iconClasses()"
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.2" stroke-width="2.5" />
+      <path
+        d="M21 12a9 9 0 0 0-9-9"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      />
+    </svg>
+  `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Spinner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Spinner, decorators: [{
             type: Component,
             args: [{
                     selector: 'mf-spinner',
                     exportAs: 'mfSpinner',
-                    imports: [Icon],
                     host: {
                         class: 'inline-flex',
                         role: 'status',
                         '[attr.aria-label]': 'effectiveAriaLabel()',
                     },
-                    template: `<span mfIcon [size]="sizePx()" [class]="iconClasses()">progress_activity</span>`,
+                    template: `
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      [attr.width]="sizePx()"
+      [attr.height]="sizePx()"
+      [class]="iconClasses()"
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.2" stroke-width="2.5" />
+      <path
+        d="M21 12a9 9 0 0 0-9-9"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 

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

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-spinner.mjs","sources":["../../../projects/ui-kit/spinner/spinner.ts","../../../projects/ui-kit/spinner/mesgflow-ui-kit-spinner.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\r\nimport { cn, MF_COMMON_LABELS, type MfSize, type MfTone } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\n\r\nexport type SpinnerSize = 'xs' | MfSize;\r\nexport type SpinnerTone = MfTone | 'current';\r\n\r\nconst SIZE_PX: Record<SpinnerSize, number> = { xs: 14, sm: 16, md: 20, lg: 24 };\r\n\r\nconst TONE_CLASS: Record<SpinnerTone, string> = {\r\n  /** Ambient metin rengini MİRAS ALIR — ör. dolu bir butonun içine gömülü spinner, butonun kendi `text-fg-on-accent`'ini otomatik kullanır. Varsayılan. */\r\n  current: 'text-current',\r\n  neutral: 'text-fg-subtle',\r\n  primary: 'text-accent',\r\n  success: 'text-success',\r\n  warning: 'text-warning',\r\n  danger: 'text-danger',\r\n  info: 'text-info',\r\n  help: 'text-help',\r\n};\r\n\r\n/**\r\n * `<mf-spinner size=\"sm\" />` — dönen yüklenme göstergesi. Ayrı bir SVG/CSS\r\n * animasyonu ÇİZMEK yerine kitin zaten her yerde kullandığı `progress_activity`\r\n * Material Symbol'ü + `animate-spin` deseni tekrar kullanılıyor (bkz.\r\n * `ConfirmDialog`'un onay butonu) — tüm \"yükleniyor\" göstergeleri tek bir\r\n * görsel dil konuşuyor.\r\n *\r\n * `role=\"status\"` + `aria-label` HOST'ta (ikonun kendisi `Icon` directive'i\r\n * gereği her zaman `aria-hidden` — bkz. icon.ts) — ekran okuyucu ligature\r\n * kaynak metnini (\"progress_activity\") DEĞİL, buradaki anlamlı etiketi anons eder.\r\n */\r\n@Component({\r\n  selector: 'mf-spinner',\r\n  exportAs: 'mfSpinner',\r\n  imports: [Icon],\r\n  host: {\r\n    class: 'inline-flex',\r\n    role: 'status',\r\n    '[attr.aria-label]': 'effectiveAriaLabel()',\r\n  },\r\n  template: `<span mfIcon [size]=\"sizePx()\" [class]=\"iconClasses()\">progress_activity</span>`,\r\n})\r\nexport class Spinner {\r\n  readonly size = input<SpinnerSize>('md');\r\n  readonly tone = input<SpinnerTone>('current');\r\n  /** Verilmezse `MF_COMMON_LABELS`'ın `loading`'i kullanılır (bkz. `provideMesgflowUi`). */\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private readonly commonLabels = inject(MF_COMMON_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.commonLabels().loading,\r\n  );\r\n\r\n  protected readonly sizePx = computed(() => SIZE_PX[this.size()]);\r\n  protected readonly iconClasses = computed(() => cn('animate-spin', TONE_CLASS[this.tone()]));\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-spinner.mjs","sources":["../../../projects/ui-kit/spinner/spinner.ts","../../../projects/ui-kit/spinner/mesgflow-ui-kit-spinner.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\r\nimport { cn, MF_COMMON_LABELS, type MfSize, type MfTone } from '@mesgflow/ui-kit/core';\r\n\r\nexport type SpinnerSize = 'xs' | MfSize;\r\nexport type SpinnerTone = MfTone | 'current';\r\n\r\nconst SIZE_PX: Record<SpinnerSize, number> = { xs: 14, sm: 16, md: 20, lg: 24 };\r\n\r\nconst TONE_CLASS: Record<SpinnerTone, string> = {\r\n  /** Ambient metin rengini MİRAS ALIR — ör. dolu bir butonun içine gömülü spinner, butonun kendi `text-fg-on-accent`'ini otomatik kullanır. Varsayılan. */\r\n  current: 'text-current',\r\n  neutral: 'text-fg-subtle',\r\n  primary: 'text-accent',\r\n  success: 'text-success',\r\n  warning: 'text-warning',\r\n  danger: 'text-danger',\r\n  info: 'text-info',\r\n  help: 'text-help',\r\n};\r\n\r\n/**\r\n * `<mf-spinner size=\"sm\" />` — dönen yüklenme göstergesi: iki katmanlı SVG\r\n * halka (soluk iz + dönen yay). v0.7 öncesi Material Symbols ligature'ıydı —\r\n * font yüklenene kadar \"progress_activity\" METNİ görünüyordu (FOUT) ve\r\n * ikon seti değişince (Lucide) kırılıyordu; SVG her ikisinden bağımsız.\r\n *\r\n * `role=\"status\"` + `aria-label` HOST'ta, SVG `aria-hidden`.\r\n */\r\n@Component({\r\n  selector: 'mf-spinner',\r\n  exportAs: 'mfSpinner',\r\n  host: {\r\n    class: 'inline-flex',\r\n    role: 'status',\r\n    '[attr.aria-label]': 'effectiveAriaLabel()',\r\n  },\r\n  template: `\r\n    <svg\r\n      aria-hidden=\"true\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      [attr.width]=\"sizePx()\"\r\n      [attr.height]=\"sizePx()\"\r\n      [class]=\"iconClasses()\"\r\n    >\r\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2.5\" />\r\n      <path\r\n        d=\"M21 12a9 9 0 0 0-9-9\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2.5\"\r\n        stroke-linecap=\"round\"\r\n      />\r\n    </svg>\r\n  `,\r\n})\r\nexport class Spinner {\r\n  readonly size = input<SpinnerSize>('md');\r\n  readonly tone = input<SpinnerTone>('current');\r\n  /** Verilmezse `MF_COMMON_LABELS`'ın `loading`'i kullanılır (bkz. `provideMesgflowUi`). */\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private readonly commonLabels = inject(MF_COMMON_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.commonLabels().loading,\r\n  );\r\n\r\n  protected readonly sizePx = computed(() => SIZE_PX[this.size()]);\r\n  protected readonly iconClasses = computed(() =>\r\n    cn('block animate-spin', TONE_CLASS[this.tone()]),\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-split-button.mjs

@@ -0,0 +1,205 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, inject, computed, Component } from '@angular/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { MF_SPLIT_BUTTON_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Menu, MenuItem, MenuTrigger } from '@mesgflow/ui-kit/menu';
+import { Popover } from '@mesgflow/ui-kit/popover';
+
+/**
+ * `<mf-split-button label="Kaydet" [items]="more" (primaryClick)="save()" (itemSelect)="run($event)" />`
+ *
+ * Birincil eylem + ilgili ikincil eylemler menüsü (GitHub "Merge ▾", Gmail
+ * "Gönder ▾"). İki gerçek düğme: soldaki eylemi çalıştırır, sağdaki
+ * (`aria-haspopup="menu"`) menüyü açar — ekran okuyucu ikisini ayrı duyurur.
+ *
+ * Menü `@angular/aria/menu` (ok tuşları, typeahead, Escape) + `mf-popover`
+ * (tetikleyiciden büyüyen panel). Öğeler VERİ olarak verilir: `mfMenuItem`
+ * içerik projeksiyonuyla aria menüsüne bağlanamadığı için bu bileşen onları
+ * kendi şablonunda çizer.
+ */
+class SplitButton {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    appearance = input('filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Menü düğmesinin erişilebilir adı — verilmezse `MF_SPLIT_BUTTON_LABELS`. */
+    menuLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "menuLabel" }] : /* istanbul ignore next */ []));
+    primaryClick = output();
+    itemSelect = output();
+    labels = inject(MF_SPLIT_BUTTON_LABELS);
+    effectiveMenuLabel = computed(() => this.menuLabel() ?? this.labels().moreActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMenuLabel" }] : /* istanbul ignore next */ []));
+    /** Bitişik iki düğme: iç köşeler kare, ayırıcı çizgi (dolu görünümde açık ton). */
+    primaryClass = computed(() => cn('rounded-e-none'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryClass" }] : /* istanbul ignore next */ []));
+    toggleClass = computed(() => cn('rounded-s-none px-2', this.appearance() === 'filled' || this.appearance() === 'soft'
+        ? 'border-s-white/20 dark:border-s-black/20'
+        : '-ms-px'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleClass" }] : /* istanbul ignore next */ []));
+    onSelect(value) {
+        this.itemSelect.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SplitButton, isStandalone: true, selector: "mf-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", itemSelect: "itemSelect" }, host: { classAttribute: "inline-flex" }, exportAs: ["mfSplitButton"], ngImport: i0, template: `
+    <div class="inline-flex" role="group" [attr.aria-label]="label()">
+      <button
+        mfButton
+        type="button"
+        [tone]="tone()"
+        [appearance]="appearance()"
+        [size]="size()"
+        [iconStart]="icon()"
+        [loading]="loading()"
+        [disabled]="disabled()"
+        [class]="primaryClass()"
+        (click)="primaryClick.emit()"
+      >
+        {{ label() }}
+      </button>
+      <button
+        mfButton
+        type="button"
+        cdkOverlayOrigin
+        #origin="cdkOverlayOrigin"
+        mfMenuTrigger
+        #trigger="ngMenuTrigger"
+        [menu]="menuRef"
+        [tone]="tone()"
+        [appearance]="appearance()"
+        [size]="size()"
+        [disabled]="disabled()"
+        [class]="toggleClass()"
+        [attr.aria-label]="effectiveMenuLabel()"
+      >
+        <span
+          mfIcon
+          [size]="16"
+          class="transition-transform duration-fast ease-emphasis"
+          [class.rotate-180]="trigger.expanded()"
+          >expand_more</span
+        >
+      </button>
+    </div>
+    <mf-popover
+      [origin]="origin"
+      [open]="trigger.expanded()"
+      (closed)="trigger.close()"
+      placement="bottom-end"
+      padding="none"
+    >
+      <mf-menu #menuRef="ngMenu" (itemSelected)="onSelect($event); trigger.close()">
+        @for (item of items(); track item.value) {
+          <button
+            mfMenuItem
+            [value]="item.value"
+            [disabled]="!!item.disabled"
+            [class.text-danger]="item.danger"
+          >
+            @if (item.icon) {
+              <span mfIcon [size]="16" class="text-fg-subtle" [class.text-danger]="item.danger">{{
+                item.icon
+              }}</span>
+            }
+            {{ item.label }}
+          </button>
+        }
+      </mf-menu>
+    </mf-popover>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Menu, selector: "mf-menu", exportAs: ["mfMenu"] }, { kind: "directive", type: MenuItem, selector: "button[mfMenuItem], div[mfMenuItem]" }, { kind: "directive", type: MenuTrigger, selector: "[mfMenuTrigger]", exportAs: ["mfMenuTrigger"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SplitButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-split-button',
+                    exportAs: 'mfSplitButton',
+                    imports: [OverlayModule, Button, Icon, Menu, MenuItem, MenuTrigger, Popover],
+                    host: { class: 'inline-flex' },
+                    template: `
+    <div class="inline-flex" role="group" [attr.aria-label]="label()">
+      <button
+        mfButton
+        type="button"
+        [tone]="tone()"
+        [appearance]="appearance()"
+        [size]="size()"
+        [iconStart]="icon()"
+        [loading]="loading()"
+        [disabled]="disabled()"
+        [class]="primaryClass()"
+        (click)="primaryClick.emit()"
+      >
+        {{ label() }}
+      </button>
+      <button
+        mfButton
+        type="button"
+        cdkOverlayOrigin
+        #origin="cdkOverlayOrigin"
+        mfMenuTrigger
+        #trigger="ngMenuTrigger"
+        [menu]="menuRef"
+        [tone]="tone()"
+        [appearance]="appearance()"
+        [size]="size()"
+        [disabled]="disabled()"
+        [class]="toggleClass()"
+        [attr.aria-label]="effectiveMenuLabel()"
+      >
+        <span
+          mfIcon
+          [size]="16"
+          class="transition-transform duration-fast ease-emphasis"
+          [class.rotate-180]="trigger.expanded()"
+          >expand_more</span
+        >
+      </button>
+    </div>
+    <mf-popover
+      [origin]="origin"
+      [open]="trigger.expanded()"
+      (closed)="trigger.close()"
+      placement="bottom-end"
+      padding="none"
+    >
+      <mf-menu #menuRef="ngMenu" (itemSelected)="onSelect($event); trigger.close()">
+        @for (item of items(); track item.value) {
+          <button
+            mfMenuItem
+            [value]="item.value"
+            [disabled]="!!item.disabled"
+            [class.text-danger]="item.danger"
+          >
+            @if (item.icon) {
+              <span mfIcon [size]="16" class="text-fg-subtle" [class.text-danger]="item.danger">{{
+                item.icon
+              }}</span>
+            }
+            {{ item.label }}
+          </button>
+        }
+      </mf-menu>
+    </mf-popover>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], primaryClick: [{ type: i0.Output, args: ["primaryClick"] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplitButton };
+//# sourceMappingURL=mesgflow-ui-kit-split-button.mjs.map

package/fesm2022/mesgflow-ui-kit-split-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-split-button.mjs","sources":["../../../projects/ui-kit/split-button/split-button.ts","../../../projects/ui-kit/split-button/mesgflow-ui-kit-split-button.ts"],"sourcesContent":["import { OverlayModule } from '@angular/cdk/overlay';\r\nimport { Component, booleanAttribute, computed, inject, input, output } from '@angular/core';\r\nimport { Button, type ButtonAppearance, type ButtonTone } from '@mesgflow/ui-kit/button';\r\nimport { MF_SPLIT_BUTTON_LABELS, cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Menu, MenuItem, MenuTrigger } from '@mesgflow/ui-kit/menu';\r\nimport { Popover } from '@mesgflow/ui-kit/popover';\r\n\r\nexport interface SplitButtonItem<V = string> {\r\n  label: string;\r\n  value: V;\r\n  icon?: string;\r\n  disabled?: boolean;\r\n  /** Tehlikeli eylem (Sil) — kırmızı metin. */\r\n  danger?: boolean;\r\n}\r\n\r\n/**\r\n * `<mf-split-button label=\"Kaydet\" [items]=\"more\" (primaryClick)=\"save()\" (itemSelect)=\"run($event)\" />`\r\n *\r\n * Birincil eylem + ilgili ikincil eylemler menüsü (GitHub \"Merge ▾\", Gmail\r\n * \"Gönder ▾\"). İki gerçek düğme: soldaki eylemi çalıştırır, sağdaki\r\n * (`aria-haspopup=\"menu\"`) menüyü açar — ekran okuyucu ikisini ayrı duyurur.\r\n *\r\n * Menü `@angular/aria/menu` (ok tuşları, typeahead, Escape) + `mf-popover`\r\n * (tetikleyiciden büyüyen panel). Öğeler VERİ olarak verilir: `mfMenuItem`\r\n * içerik projeksiyonuyla aria menüsüne bağlanamadığı için bu bileşen onları\r\n * kendi şablonunda çizer.\r\n */\r\n@Component({\r\n  selector: 'mf-split-button',\r\n  exportAs: 'mfSplitButton',\r\n  imports: [OverlayModule, Button, Icon, Menu, MenuItem, MenuTrigger, Popover],\r\n  host: { class: 'inline-flex' },\r\n  template: `\r\n    <div class=\"inline-flex\" role=\"group\" [attr.aria-label]=\"label()\">\r\n      <button\r\n        mfButton\r\n        type=\"button\"\r\n        [tone]=\"tone()\"\r\n        [appearance]=\"appearance()\"\r\n        [size]=\"size()\"\r\n        [iconStart]=\"icon()\"\r\n        [loading]=\"loading()\"\r\n        [disabled]=\"disabled()\"\r\n        [class]=\"primaryClass()\"\r\n        (click)=\"primaryClick.emit()\"\r\n      >\r\n        {{ label() }}\r\n      </button>\r\n      <button\r\n        mfButton\r\n        type=\"button\"\r\n        cdkOverlayOrigin\r\n        #origin=\"cdkOverlayOrigin\"\r\n        mfMenuTrigger\r\n        #trigger=\"ngMenuTrigger\"\r\n        [menu]=\"menuRef\"\r\n        [tone]=\"tone()\"\r\n        [appearance]=\"appearance()\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"disabled()\"\r\n        [class]=\"toggleClass()\"\r\n        [attr.aria-label]=\"effectiveMenuLabel()\"\r\n      >\r\n        <span\r\n          mfIcon\r\n          [size]=\"16\"\r\n          class=\"transition-transform duration-fast ease-emphasis\"\r\n          [class.rotate-180]=\"trigger.expanded()\"\r\n          >expand_more</span\r\n        >\r\n      </button>\r\n    </div>\r\n    <mf-popover\r\n      [origin]=\"origin\"\r\n      [open]=\"trigger.expanded()\"\r\n      (closed)=\"trigger.close()\"\r\n      placement=\"bottom-end\"\r\n      padding=\"none\"\r\n    >\r\n      <mf-menu #menuRef=\"ngMenu\" (itemSelected)=\"onSelect($event); trigger.close()\">\r\n        @for (item of items(); track item.value) {\r\n          <button\r\n            mfMenuItem\r\n            [value]=\"item.value\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class.text-danger]=\"item.danger\"\r\n          >\r\n            @if (item.icon) {\r\n              <span mfIcon [size]=\"16\" class=\"text-fg-subtle\" [class.text-danger]=\"item.danger\">{{\r\n                item.icon\r\n              }}</span>\r\n            }\r\n            {{ item.label }}\r\n          </button>\r\n        }\r\n      </mf-menu>\r\n    </mf-popover>\r\n  `,\r\n})\r\nexport class SplitButton<V = string> {\r\n  readonly label = input.required<string>();\r\n  readonly items = input.required<SplitButtonItem<V>[]>();\r\n  readonly icon = input('');\r\n  readonly tone = input<ButtonTone>('primary');\r\n  readonly appearance = input<ButtonAppearance>('filled');\r\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\r\n  readonly loading = input(false, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  /** Menü düğmesinin erişilebilir adı — verilmezse `MF_SPLIT_BUTTON_LABELS`. */\r\n  readonly menuLabel = input<string>();\r\n\r\n  readonly primaryClick = output<void>();\r\n  readonly itemSelect = output<V>();\r\n\r\n  private readonly labels = inject(MF_SPLIT_BUTTON_LABELS);\r\n  protected readonly effectiveMenuLabel = computed(\r\n    () => this.menuLabel() ?? this.labels().moreActions,\r\n  );\r\n\r\n  /** Bitişik iki düğme: iç köşeler kare, ayırıcı çizgi (dolu görünümde açık ton). */\r\n  protected readonly primaryClass = computed(() => cn('rounded-e-none'));\r\n  protected readonly toggleClass = computed(() =>\r\n    cn(\r\n      'rounded-s-none px-2',\r\n      this.appearance() === 'filled' || this.appearance() === 'soft'\r\n        ? 'border-s-white/20 dark:border-s-black/20'\r\n        : '-ms-px',\r\n    ),\r\n  );\r\n\r\n  protected onSelect(value: V): void {\r\n    this.itemSelect.emit(value);\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-splitter.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, linkedSignal, computed, Component } from '@angular/core';
-import { cn, inlineStartRatio, isRtl } from '@mesgflow/ui-kit/core';
+import { input, inject, ElementRef, linkedSignal, computed, Component, signal, model, contentChildren, effect } from '@angular/core';
+import { cn, inlineStartRatio, isRtl, MF_PANEL_GROUP_LABELS } from '@mesgflow/ui-kit/core';
 
 /**
  * `<mf-splitter><div splitterPane1>Sol</div><div splitterPane2>Sağ</div></mf-splitter>`
@@ -81,17 +81,224 @@ class Splitter {
             this.currentSplit.set(this.max());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Splitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Splitter, isStandalone: true, selector: "mf-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, initialSplit: { classPropertyName: "initialSplit", publicName: "split", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["mfSplitter"], ngImport: i0, template: "<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Splitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Splitter, isStandalone: true, selector: "mf-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, initialSplit: { classPropertyName: "initialSplit", publicName: "split", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, exportAs: ["mfSplitter"], ngImport: i0, template: "<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Splitter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Splitter, decorators: [{
             type: Component,
             args: [{ selector: 'mf-splitter', exportAs: 'mfSplitter', host: { '[class]': 'hostClasses()' }, template: "<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\r\n" }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], initialSplit: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }] } });
 
+class Panel {
+    /** % */
+    minSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /** % */
+    maxSize = input(90, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Grup tarafından yazılır (%). */
+    size = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Panel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: Panel, isStandalone: true, selector: "mf-panel", inputs: { minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex-basis.%": "size()", "style.flex-grow": "0", "style.flex-shrink": "1" }, classAttribute: "relative min-h-0 min-w-0 overflow-auto" }, exportAs: ["mfPanel"], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Panel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-panel',
+                    exportAs: 'mfPanel',
+                    host: {
+                        class: 'relative min-h-0 min-w-0 overflow-auto',
+                        '[style.flex-basis.%]': 'size()',
+                        '[style.flex-grow]': '0',
+                        '[style.flex-shrink]': '1',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }] } });
+/**
+ * `<mf-panel-group [(sizes)]="layout" orientation="horizontal">
+ *    <mf-panel [minSize]="15">Gezgin</mf-panel>
+ *    <mf-panel-resizer />
+ *    <mf-panel>Editör</mf-panel>
+ *    <mf-panel-resizer />
+ *    <mf-panel [minSize]="20">Önizleme</mf-panel>
+ *  </mf-panel-group>`
+ *
+ * N panelli yeniden boyutlandırma (IDE/e-posta editörü düzeni). `sizes`
+ * yüzde dizisi (toplam 100); her ayırıcı iki komşu paneli etkiler.
+ * Ayırıcı WAI-ARIA "Window Splitter": `role="separator"` + `aria-valuenow`
+ * (sol panelin yüzdesi) + ok tuşları (Shift ile 10), Home/End, çift tık eşitler.
+ * `minSize`/`maxSize` panel başına sınır. `sizes` verilmezse eşit bölünür.
+ */
+class PanelGroup {
+    sizes = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    panels = contentChildren(Panel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    resizers = contentChildren(PanelResizer, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizers" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    /** Etkin boyutlar — `sizes` panel sayısıyla uyuşmuyorsa eşit bölünmüş. */
+    resolved = computed(() => {
+        const n = this.panels().length;
+        const sizes = this.sizes();
+        if (sizes.length === n && n > 0)
+            return sizes;
+        return Array.from({ length: n }, () => 100 / Math.max(1, n));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const sizes = this.resolved();
+            this.panels().forEach((p, i) => p.size.set(sizes[i] ?? 0));
+            this.resizers().forEach((r, i) => r.index.set(i));
+        });
+    }
+    /** `index` numaralı ayırıcıyı `delta` yüzde kaydırır (komşu iki panel arasında). */
+    resize(index, delta) {
+        const sizes = [...this.resolved()];
+        const a = this.panels()[index];
+        const b = this.panels()[index + 1];
+        if (!a || !b)
+            return;
+        const total = sizes[index] + sizes[index + 1];
+        const min = a.minSize();
+        const max = Math.min(a.maxSize(), total - b.minSize());
+        const next = Math.min(max, Math.max(min, Math.max(total - b.maxSize(), sizes[index] + delta)));
+        sizes[index] = +next.toFixed(2);
+        sizes[index + 1] = +(total - next).toFixed(2);
+        this.sizes.set(sizes);
+    }
+    /** İki komşuyu eşitler (çift tık). */
+    equalize(index) {
+        const sizes = this.resolved();
+        const half = (sizes[index] + sizes[index + 1]) / 2;
+        this.resize(index, half - sizes[index]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: PanelGroup, isStandalone: true, selector: "mf-panel-group", inputs: { sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizes: "sizesChange" }, host: { properties: { "class": "'flex h-full w-full ' + (orientation() === 'vertical' ? 'flex-col' : 'flex-row')", "attr.data-orientation": "orientation()" } }, queries: [{ propertyName: "panels", predicate: Panel, isSignal: true }, { propertyName: "resizers", predicate: PanelResizer, isSignal: true }], exportAs: ["mfPanelGroup"], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-panel-group',
+                    exportAs: 'mfPanelGroup',
+                    host: {
+                        '[class]': "'flex h-full w-full ' + (orientation() === 'vertical' ? 'flex-col' : 'flex-row')",
+                        '[attr.data-orientation]': 'orientation()',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], ctorParameters: () => [], propDecorators: { sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }, { type: i0.Output, args: ["sizesChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Panel), { isSignal: true }] }], resizers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PanelResizer), { isSignal: true }] }] } });
+class PanelResizer {
+    group = inject(PanelGroup);
+    labels = inject(MF_PANEL_GROUP_LABELS);
+    el = inject(ElementRef).nativeElement;
+    index = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    startPos = 0;
+    startSize = 0;
+    dragging = false;
+    valueNow = computed(() => Math.round(this.group.resolved()[this.index()] ?? 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []));
+    valueMin = computed(() => this.group.panels()[this.index()]?.minSize() ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueMin" }] : /* istanbul ignore next */ []));
+    valueMax = computed(() => this.group.panels()[this.index()]?.maxSize() ?? 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueMax" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.labels().resize.replace('{index}', String(this.index() + 1)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const vertical = this.group.orientation() === 'vertical';
+        return [
+            'group/resizer relative z-[1] flex shrink-0 items-center justify-center outline-none touch-none select-none',
+            'before:absolute before:rounded-full before:bg-border before:transition-colors before:duration-fast',
+            'hover:before:bg-accent focus-visible:before:bg-focus-ring active:before:bg-accent',
+            vertical
+                ? 'h-2 w-full cursor-row-resize before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 hover:before:h-0.5'
+                : 'h-full w-2 cursor-col-resize before:inset-0 before:mx-auto before:w-px hover:before:w-0.5',
+        ].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onKeydown(e) {
+        const event = e;
+        const vertical = this.group.orientation() === 'vertical';
+        const rtl = !vertical && isRtl(this.el);
+        const step = event.shiftKey ? 10 : 2;
+        const grow = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+        const shrink = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+        const i = this.index();
+        if (event.key === grow)
+            this.group.resize(i, step);
+        else if (event.key === shrink)
+            this.group.resize(i, -step);
+        else if (event.key === 'Home')
+            this.group.resize(i, -100);
+        else if (event.key === 'End')
+            this.group.resize(i, 100);
+        else if (event.key === 'Enter')
+            this.group.equalize(i);
+        else
+            return;
+        event.preventDefault();
+    }
+    onPointerDown(e) {
+        const event = e;
+        this.dragging = true;
+        this.el.setPointerCapture?.(event.pointerId);
+        this.startPos = this.group.orientation() === 'vertical' ? event.clientY : event.clientX;
+        this.startSize = this.group.resolved()[this.index()] ?? 0;
+        event.preventDefault();
+    }
+    onPointerMove(e) {
+        const event = e;
+        if (!this.dragging)
+            return;
+        const rect = this.group.host.nativeElement.getBoundingClientRect();
+        const vertical = this.group.orientation() === 'vertical';
+        const px = (vertical ? event.clientY : event.clientX) - this.startPos;
+        const total = vertical ? rect.height : rect.width;
+        const dir = !vertical && isRtl(this.el) ? -1 : 1;
+        const target = this.startSize + (dir * px * 100) / total;
+        this.group.resize(this.index(), target - (this.group.resolved()[this.index()] ?? 0));
+    }
+    onPointerUp(e) {
+        const event = e;
+        this.dragging = false;
+        this.el.releasePointerCapture?.(event.pointerId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelResizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: PanelResizer, isStandalone: true, selector: "mf-panel-resizer", host: { attributes: { "role": "separator", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "dblclick": "group.equalize(index())" }, properties: { "attr.aria-orientation": "group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'", "attr.aria-valuenow": "valueNow()", "attr.aria-valuemin": "valueMin()", "attr.aria-valuemax": "valueMax()", "attr.aria-label": "label()", "class": "classes()" } }, exportAs: ["mfPanelResizer"], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PanelResizer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-panel-resizer',
+                    template: '',
+                    exportAs: 'mfPanelResizer',
+                    host: {
+                        role: 'separator',
+                        tabindex: '0',
+                        '[attr.aria-orientation]': "group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'",
+                        '[attr.aria-valuenow]': 'valueNow()',
+                        '[attr.aria-valuemin]': 'valueMin()',
+                        '[attr.aria-valuemax]': 'valueMax()',
+                        '[attr.aria-label]': 'label()',
+                        '[class]': 'classes()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(dblclick)': 'group.equalize(index())',
+                    },
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Splitter };
+export { Panel, PanelGroup, PanelResizer, Splitter };
 //# sourceMappingURL=mesgflow-ui-kit-splitter.mjs.map