@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,154 @@
+import * as i0 from '@angular/core';
+import { model, input, inject, computed, signal, viewChild, effect, untracked, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessorBase, MF_SEARCH_INPUT_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Input } from '@mesgflow/ui-kit/input';
+import { Tooltip } from '@mesgflow/ui-kit/tooltip';
+
+/**
+ * `<mf-search-input [(value)]="term" [loading]="fetching()" placeholder="Ara..." />`
+ *
+ * Kapalıyken sadece bir ikon-buton genişliğinde (ikon tıklanabilir/odaklanabilir
+ * — hem mouse hem klavye ile genişliyor), odak alınca/tıklanınca genişliyor.
+ * Yazarken debounce süresi boyunca VE (varsa) dışarıdan verilen `loading`
+ * true olduğu sürece dönen bir spinner gösteriyor — "arıyor" hissi debounce
+ * bitiminde kaybolmuyor, gerçek sorgu sonucu gelene kadar sürüyor.
+ *
+ * Component (directive değil) — Field/Switch gibi gerçek iç yapı (ikon+input+
+ * temizle butonu+genişleme animasyonu) gerektiriyor (bkz. projects/ui-kit/README.md
+ * "Directive mi, component mi?").
+ */
+class SearchInput extends ValueAccessorBase {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    tooltipLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipLabel" }] : /* istanbul ignore next */ []));
+    /** Tüketicinin gerçek veri çekme durumu — debounce bittikten sonra da spinner'ı sürdürür. */
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    debounceMs = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    /**
+     * `false` → her zaman tam genişlikte açık, ikon tıklanabilir bir "kapı"
+     * değil (bkz. `table/table.ts` — bir VERİ TABLOSUNDA arama gizlenmez,
+     * bu bir navbar deseni; Table `[collapsible]="false"` geçiyor).
+     * Varsayılan `true` — bu bileşenin bugünkü tek gerçek davranışı, henüz
+     * başka bir tüketici yok ama gelecekte navbar/toolbar gibi dar bağlamlarda
+     * ihtiyaç olabilir diye korunuyor.
+     */
+    collapsible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` → kutu sabit `w-64` (256px) yerine kapsayıcısının TAM genişliğinde
+     * açılır — kutunun panelin geri kalanıyla (ör. yan yana duran bir sekme
+     * listesiyle) aynı genişlikte hizalanması gereken bağlamlar için.
+     * `collapsible` ile birlikte anlamlı (`[collapsible]="false"` olmadan
+     * daralmış hâl `w-10` sabit kalır, `fullWidth` sadece GENİŞLEMİŞ genişliği
+     * değiştirir). Varsayılan `false` — navbar/toolbar'daki bugünkü sabit
+     * genişlik davranışı değişmez.
+     */
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    searchInputLabels = inject(MF_SEARCH_INPUT_LABELS);
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.searchInputLabels().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.searchInputLabels().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    effectiveTooltipLabel = computed(() => this.tooltipLabel() ?? this.searchInputLabels().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTooltipLabel" }] : /* istanbul ignore next */ []));
+    effectiveClearAriaLabel = computed(() => this.searchInputLabels().clearAriaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveClearAriaLabel" }] : /* istanbul ignore next */ []));
+    expandedState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedState" }] : /* istanbul ignore next */ []));
+    /** `collapsible()` false ise HER ZAMAN true — genişleme mekaniği devre dışı kalır ama `expandedState` yine de "odaklanınca tooltip'i kapat" gibi yan mantık için iç durumu takip etmeye devam eder. */
+    expanded = computed(() => !this.collapsible() || this.expandedState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** `w-64`/`w-10` yerine `w-full` — bkz. `fullWidth` doc yorumu. */
+    inputWidthClass = computed(() => this.fullWidth()
+        ? 'w-full cursor-text pe-8 ps-9'
+        : this.expanded()
+            ? 'w-64 cursor-text pe-8 ps-9'
+            : 'w-10 cursor-pointer caret-transparent pe-2 ps-9', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputWidthClass" }] : /* istanbul ignore next */ []));
+    draft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    pending = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    showSpinner = computed(() => this.pending() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSpinner" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    tooltipRef = viewChild(Tooltip, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipRef" }] : /* istanbul ignore next */ []));
+    debounceHandle;
+    constructor() {
+        super();
+        // Dışarıdan (ör. "Filtreleri temizle") value() sıfırlanırsa draft de eşlensin.
+        effect(() => {
+            const current = this.value();
+            untracked(() => this.draft.set(current));
+        });
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    expand() {
+        this.expandedState.set(true);
+        // Tooltip'in kendi `(focus)` dinleyicisi AYNI olayda tetiklendiğinden
+        // ("Ara..." balonu) genişlemiş, placeholder'ı zaten aynı metni gösteren
+        // input'un üstünde gereksiz kalıyordu — anında kapatılıyor (gerçek bulgu).
+        this.tooltipRef()?.hide();
+    }
+    collapseIfEmpty() {
+        if (!this.draft().trim())
+            this.expandedState.set(false);
+    }
+    onInput(raw) {
+        this.draft.set(raw);
+        this.pending.set(true);
+        this.onTouched();
+        clearTimeout(this.debounceHandle);
+        this.debounceHandle = setTimeout(() => {
+            this.pending.set(false);
+            this.value.set(raw);
+            this.onChange(raw);
+        }, this.debounceMs());
+    }
+    clear() {
+        clearTimeout(this.debounceHandle);
+        this.pending.set(false);
+        this.draft.set('');
+        this.value.set('');
+        this.onChange('');
+        this.onTouched();
+        this.inputEl()?.nativeElement.focus();
+    }
+    onEscape() {
+        if (this.draft())
+            this.clear();
+        else
+            this.inputEl()?.nativeElement.blur();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SearchInput, isStandalone: true, selector: "mf-search-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltipLabel: { classPropertyName: "tooltipLabel", publicName: "tooltipLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.w-full": "fullWidth()" }, classAttribute: "inline-block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SearchInput), multi: true },
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "tooltipRef", first: true, predicate: Tooltip, descendants: true, isSignal: true }], exportAs: ["mfSearchInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"relative inline-flex items-center\" [class.w-full]=\"fullWidth()\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    [class.animate-spin]=\"showSpinner()\"\r\n    >{{ showSpinner() ? 'progress_activity' : 'search' }}</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    [class]=\"inputWidthClass()\"\r\n    class=\"transition-[width] duration-base ease-out\"\r\n    [value]=\"draft()\"\r\n    [placeholder]=\"expanded() ? effectivePlaceholder() : ''\"\r\n    [attr.aria-label]=\"effectiveAriaLabel()\"\r\n    [mfTooltip]=\"expanded() ? '' : effectiveTooltipLabel()\"\r\n    (focus)=\"expand()\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (blur)=\"collapseIfEmpty()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (expanded() && draft()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-1/2 end-2 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clear()\"\r\n      [attr.aria-label]=\"effectiveClearAriaLabel()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n</div>\r\n", 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: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SearchInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-search-input', exportAs: 'mfSearchInput', imports: [Icon, Input, Tooltip], host: { class: 'inline-block', '[class.w-full]': 'fullWidth()' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SearchInput), multi: true },
+                    ], template: "<div class=\"relative inline-flex items-center\" [class.w-full]=\"fullWidth()\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    [class.animate-spin]=\"showSpinner()\"\r\n    >{{ showSpinner() ? 'progress_activity' : 'search' }}</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    [class]=\"inputWidthClass()\"\r\n    class=\"transition-[width] duration-base ease-out\"\r\n    [value]=\"draft()\"\r\n    [placeholder]=\"expanded() ? effectivePlaceholder() : ''\"\r\n    [attr.aria-label]=\"effectiveAriaLabel()\"\r\n    [mfTooltip]=\"expanded() ? '' : effectiveTooltipLabel()\"\r\n    (focus)=\"expand()\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (blur)=\"collapseIfEmpty()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (expanded() && draft()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-1/2 end-2 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clear()\"\r\n      [attr.aria-label]=\"effectiveClearAriaLabel()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tooltipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], tooltipRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Tooltip), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SearchInput };
+//# sourceMappingURL=mesgflow-ui-kit-search-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-search-input.mjs","sources":["../../../projects/ui-kit/search-input/search-input.ts","../../../projects/ui-kit/search-input/search-input.html","../../../projects/ui-kit/search-input/mesgflow-ui-kit-search-input.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ElementRef,\r\n  computed,\r\n  effect,\r\n  forwardRef,\r\n  inject,\r\n  input,\r\n  model,\r\n  signal,\r\n  untracked,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { MF_SEARCH_INPUT_LABELS, ValueAccessorBase } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Input } from '@mesgflow/ui-kit/input';\r\nimport { Tooltip } from '@mesgflow/ui-kit/tooltip';\r\n\r\n/**\r\n * `<mf-search-input [(value)]=\"term\" [loading]=\"fetching()\" placeholder=\"Ara...\" />`\r\n *\r\n * Kapalıyken sadece bir ikon-buton genişliğinde (ikon tıklanabilir/odaklanabilir\r\n * — hem mouse hem klavye ile genişliyor), odak alınca/tıklanınca genişliyor.\r\n * Yazarken debounce süresi boyunca VE (varsa) dışarıdan verilen `loading`\r\n * true olduğu sürece dönen bir spinner gösteriyor — \"arıyor\" hissi debounce\r\n * bitiminde kaybolmuyor, gerçek sorgu sonucu gelene kadar sürüyor.\r\n *\r\n * Component (directive değil) — Field/Switch gibi gerçek iç yapı (ikon+input+\r\n * temizle butonu+genişleme animasyonu) gerektiriyor (bkz. projects/ui-kit/README.md\r\n * \"Directive mi, component mi?\").\r\n */\r\n@Component({\r\n  selector: 'mf-search-input',\r\n  exportAs: 'mfSearchInput',\r\n  imports: [Icon, Input, Tooltip],\r\n  host: { class: 'inline-block', '[class.w-full]': 'fullWidth()' },\r\n  templateUrl: './search-input.html',\r\n  providers: [\r\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SearchInput), multi: true },\r\n  ],\r\n})\r\nexport class SearchInput extends ValueAccessorBase<string> implements ControlValueAccessor {\r\n  readonly value = model('');\r\n  readonly placeholder = input<string>();\r\n  readonly ariaLabel = input<string>();\r\n  readonly tooltipLabel = input<string>();\r\n  /** Tüketicinin gerçek veri çekme durumu — debounce bittikten sonra da spinner'ı sürdürür. */\r\n  readonly loading = input(false);\r\n  readonly debounceMs = input(300);\r\n  /**\r\n   * `false` → her zaman tam genişlikte açık, ikon tıklanabilir bir \"kapı\"\r\n   * değil (bkz. `table/table.ts` — bir VERİ TABLOSUNDA arama gizlenmez,\r\n   * bu bir navbar deseni; Table `[collapsible]=\"false\"` geçiyor).\r\n   * Varsayılan `true` — bu bileşenin bugünkü tek gerçek davranışı, henüz\r\n   * başka bir tüketici yok ama gelecekte navbar/toolbar gibi dar bağlamlarda\r\n   * ihtiyaç olabilir diye korunuyor.\r\n   */\r\n  readonly collapsible = input(true);\r\n  /**\r\n   * `true` → kutu sabit `w-64` (256px) yerine kapsayıcısının TAM genişliğinde\r\n   * açılır — kutunun panelin geri kalanıyla (ör. yan yana duran bir sekme\r\n   * listesiyle) aynı genişlikte hizalanması gereken bağlamlar için.\r\n   * `collapsible` ile birlikte anlamlı (`[collapsible]=\"false\"` olmadan\r\n   * daralmış hâl `w-10` sabit kalır, `fullWidth` sadece GENİŞLEMİŞ genişliği\r\n   * değiştirir). Varsayılan `false` — navbar/toolbar'daki bugünkü sabit\r\n   * genişlik davranışı değişmez.\r\n   */\r\n  readonly fullWidth = input(false);\r\n\r\n  private readonly searchInputLabels = inject(MF_SEARCH_INPUT_LABELS);\r\n  protected readonly effectivePlaceholder = computed(\r\n    () => this.placeholder() ?? this.searchInputLabels().placeholder,\r\n  );\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.searchInputLabels().ariaLabel,\r\n  );\r\n  protected readonly effectiveTooltipLabel = computed(\r\n    () => this.tooltipLabel() ?? this.searchInputLabels().ariaLabel,\r\n  );\r\n  protected readonly effectiveClearAriaLabel = computed(\r\n    () => this.searchInputLabels().clearAriaLabel,\r\n  );\r\n\r\n  private readonly expandedState = signal(false);\r\n  /** `collapsible()` false ise HER ZAMAN true — genişleme mekaniği devre dışı kalır ama `expandedState` yine de \"odaklanınca tooltip'i kapat\" gibi yan mantık için iç durumu takip etmeye devam eder. */\r\n  protected readonly expanded = computed(() => !this.collapsible() || this.expandedState());\r\n  /** `w-64`/`w-10` yerine `w-full` — bkz. `fullWidth` doc yorumu. */\r\n  protected readonly inputWidthClass = computed(() =>\r\n    this.fullWidth()\r\n      ? 'w-full cursor-text pe-8 ps-9'\r\n      : this.expanded()\r\n        ? 'w-64 cursor-text pe-8 ps-9'\r\n        : 'w-10 cursor-pointer caret-transparent pe-2 ps-9',\r\n  );\r\n  protected readonly draft = signal('');\r\n  protected readonly pending = signal(false);\r\n  protected readonly showSpinner = computed(() => this.pending() || this.loading());\r\n\r\n  private readonly inputEl = viewChild<ElementRef<HTMLInputElement>>('inputEl');\r\n  private readonly tooltipRef = viewChild(Tooltip);\r\n  private debounceHandle?: ReturnType<typeof setTimeout>;\r\n\r\n  constructor() {\r\n    super();\r\n    // Dışarıdan (ör. \"Filtreleri temizle\") value() sıfırlanırsa draft de eşlensin.\r\n    effect(() => {\r\n      const current = this.value();\r\n      untracked(() => this.draft.set(current));\r\n    });\r\n  }\r\n\r\n  writeValue(value: string): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  protected expand(): void {\r\n    this.expandedState.set(true);\r\n    // Tooltip'in kendi `(focus)` dinleyicisi AYNI olayda tetiklendiğinden\r\n    // (\"Ara...\" balonu) genişlemiş, placeholder'ı zaten aynı metni gösteren\r\n    // input'un üstünde gereksiz kalıyordu — anında kapatılıyor (gerçek bulgu).\r\n    this.tooltipRef()?.hide();\r\n  }\r\n\r\n  protected collapseIfEmpty(): void {\r\n    if (!this.draft().trim()) this.expandedState.set(false);\r\n  }\r\n\r\n  protected onInput(raw: string): void {\r\n    this.draft.set(raw);\r\n    this.pending.set(true);\r\n    this.onTouched();\r\n    clearTimeout(this.debounceHandle);\r\n    this.debounceHandle = setTimeout(() => {\r\n      this.pending.set(false);\r\n      this.value.set(raw);\r\n      this.onChange(raw);\r\n    }, this.debounceMs());\r\n  }\r\n\r\n  protected clear(): void {\r\n    clearTimeout(this.debounceHandle);\r\n    this.pending.set(false);\r\n    this.draft.set('');\r\n    this.value.set('');\r\n    this.onChange('');\r\n    this.onTouched();\r\n    this.inputEl()?.nativeElement.focus();\r\n  }\r\n\r\n  protected onEscape(): void {\r\n    if (this.draft()) this.clear();\r\n    else this.inputEl()?.nativeElement.blur();\r\n  }\r\n}\r\n","<div class=\"relative inline-flex items-center\" [class.w-full]=\"fullWidth()\">\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 start-2.5 -translate-y-1/2 text-fg-subtle\"\r\n    [class.animate-spin]=\"showSpinner()\"\r\n    >{{ showSpinner() ? 'progress_activity' : 'search' }}</span\r\n  >\r\n  <input\r\n    mfInput\r\n    #inputEl\r\n    type=\"text\"\r\n    [class]=\"inputWidthClass()\"\r\n    class=\"transition-[width] duration-base ease-out\"\r\n    [value]=\"draft()\"\r\n    [placeholder]=\"expanded() ? effectivePlaceholder() : ''\"\r\n    [attr.aria-label]=\"effectiveAriaLabel()\"\r\n    [mfTooltip]=\"expanded() ? '' : effectiveTooltipLabel()\"\r\n    (focus)=\"expand()\"\r\n    (input)=\"onInput($any($event.target).value)\"\r\n    (blur)=\"collapseIfEmpty()\"\r\n    (keydown.escape)=\"onEscape()\"\r\n  />\r\n  @if (expanded() && draft()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"absolute top-1/2 end-2 -translate-y-1/2 appearance-none border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-fast ease-emphasis hover:text-fg\"\r\n      (click)=\"clear()\"\r\n      [attr.aria-label]=\"effectiveClearAriaLabel()\"\r\n    >\r\n      <span mfIcon [size]=\"16\">close</span>\r\n    </button>\r\n  }\r\n</div>\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-segmented-control.mjs

@@ -0,0 +1,95 @@
+import { Toolbar, ToolbarWidgetGroup, ToolbarWidget } from '@angular/aria/toolbar';
+import * as i0 from '@angular/core';
+import { input, model, computed, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessorBase, cn } from '@mesgflow/ui-kit/core';
+import { cva } from 'class-variance-authority';
+
+const segmentedTrackVariants = cva('inline-flex items-center gap-0.5 rounded-md bg-surface-alt p-0.5', {
+    variants: {
+        size: {
+            sm: 'text-xs',
+            md: 'text-sm',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+const segmentedItemVariants = cva('cursor-pointer appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1 text-fg-muted 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', {
+    variants: {
+        selected: {
+            true: 'bg-surface text-fg shadow-1',
+            false: 'hover:text-fg',
+        },
+        disabled: {
+            true: 'pointer-events-none opacity-50 active:scale-100',
+            false: '',
+        },
+    },
+    defaultVariants: { selected: false, disabled: false },
+});
+
+/**
+ * `<mf-segmented-control [options]="opts" [(value)]="mode" />` — hizalama,
+ * cihaz önizlemesi gibi KISA/tek-seçimli seçenek kümeleri için. `Tabs`'tan
+ * farkı: içerik paneli YOK, sadece bir değer seçimi. ARIA/klavye (roving
+ * tabindex, ok tuşu navigasyonu) `@angular/aria/toolbar`'ın
+ * `Toolbar`/`ToolbarWidgetGroup`/`ToolbarWidget` pattern'inden geliyor —
+ * dokümantasyondaki kompozisyon şekli birebir izlendi (dıştaki `ngToolbar`,
+ * içteki `ngToolbarWidgetGroup [multi]="false"`).
+ */
+class SegmentedControl extends ValueAccessorBase {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    toolbarValue = computed(() => this.value() == null ? [] : [this.value()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarValue" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => cn(segmentedTrackVariants({ size: this.size() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.value.set(value);
+    }
+    /**
+     * `@angular/aria/toolbar`'ın kendi widget-kayıt döngüsü, gerçek bir tıklama
+     * OLMADAN da BOŞ bir dizi ile (`values: []`) tetiklenebiliyor (gerçek bulgu
+     * — bir seçeneğe tıklarken bile araya giren, seçimle ilgisiz iç kayıt
+     * event'leri). `this.value` her event'te güncellenir (görsel durum ETKİLENMEZ,
+     * zaten `values[0]` genelde mevcut değerle AYNI), ama CVA `onChange`/`onTouched`
+     * SADECE dolu bir dizi (gerçek bir seçim) geldiğinde tetiklenir — aksi halde
+     * Reactive Forms'a sahte "null'a değişti" bildirimleri sızardı.
+     */
+    onToolbarValueChange(values) {
+        this.value.set(values[0] ?? null);
+        if (values.length > 0) {
+            this.onChange(values[0]);
+            this.onTouched();
+        }
+    }
+    itemClasses(option) {
+        return cn(segmentedItemVariants({ selected: option.value === this.value(), disabled: this.disabled() }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SegmentedControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SegmentedControl, isStandalone: true, selector: "mf-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SegmentedControl), multi: true },
+        ], exportAs: ["mfSegmentedControl"], usesInheritance: true, ngImport: i0, template: "<div\r\n  ngToolbar\r\n  [disabled]=\"disabled()\"\r\n  [value]=\"toolbarValue()\"\r\n  (valueChange)=\"onToolbarValueChange($event)\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [class]=\"trackClasses()\"\r\n>\r\n  <div ngToolbarWidgetGroup [multi]=\"false\" [disabled]=\"disabled()\" class=\"contents\">\r\n    @for (option of options(); track option.value) {\r\n      <button type=\"button\" ngToolbarWidget [value]=\"option.value\" [class]=\"itemClasses(option)\">\r\n        {{ option.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "value"], outputs: ["valueChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidgetGroup, selector: "[ngToolbarWidgetGroup]", inputs: ["disabled", "multi"], exportAs: ["ngToolbarWidgetGroup"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SegmentedControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-segmented-control', exportAs: 'mfSegmentedControl', imports: [Toolbar, ToolbarWidgetGroup, ToolbarWidget], host: { class: 'inline-block' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SegmentedControl), multi: true },
+                    ], template: "<div\r\n  ngToolbar\r\n  [disabled]=\"disabled()\"\r\n  [value]=\"toolbarValue()\"\r\n  (valueChange)=\"onToolbarValueChange($event)\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [class]=\"trackClasses()\"\r\n>\r\n  <div ngToolbarWidgetGroup [multi]=\"false\" [disabled]=\"disabled()\" class=\"contents\">\r\n    @for (option of options(); track option.value) {\r\n      <button type=\"button\" ngToolbarWidget [value]=\"option.value\" [class]=\"itemClasses(option)\">\r\n        {{ option.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SegmentedControl, segmentedItemVariants, segmentedTrackVariants };
+//# sourceMappingURL=mesgflow-ui-kit-segmented-control.mjs.map

package/fesm2022/mesgflow-ui-kit-segmented-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-segmented-control.mjs","sources":["../../../projects/ui-kit/segmented-control/segmented-control.variants.ts","../../../projects/ui-kit/segmented-control/segmented-control.ts","../../../projects/ui-kit/segmented-control/segmented-control.html","../../../projects/ui-kit/segmented-control/mesgflow-ui-kit-segmented-control.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const segmentedTrackVariants = cva(\r\n  'inline-flex items-center gap-0.5 rounded-md bg-surface-alt p-0.5',\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: 'text-xs',\r\n        md: 'text-sm',\r\n      },\r\n    },\r\n    defaultVariants: { size: 'md' },\r\n  },\r\n);\r\n\r\nexport const segmentedItemVariants = cva(\r\n  'cursor-pointer appearance-none whitespace-nowrap rounded-sm border-0 bg-transparent px-2.5 py-1 text-fg-muted 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  {\r\n    variants: {\r\n      selected: {\r\n        true: 'bg-surface text-fg shadow-1',\r\n        false: 'hover:text-fg',\r\n      },\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50 active:scale-100',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { selected: false, disabled: false },\r\n  },\r\n);\r\n\r\nexport type SegmentedControlSize = VariantProps<typeof segmentedTrackVariants>['size'];\r\n","import {\r\n  Toolbar as AriaToolbar,\r\n  ToolbarWidget as AriaToolbarWidget,\r\n  ToolbarWidgetGroup as AriaToolbarWidgetGroup,\r\n} from '@angular/aria/toolbar';\r\nimport { Component, computed, forwardRef, input, model } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { ValueAccessorBase, cn } from '@mesgflow/ui-kit/core';\r\nimport {\r\n  segmentedItemVariants,\r\n  segmentedTrackVariants,\r\n  type SegmentedControlSize,\r\n} from './segmented-control.variants';\r\n\r\nexport interface SegmentedOption<T> {\r\n  label: string;\r\n  value: T;\r\n}\r\n\r\n/**\r\n * `<mf-segmented-control [options]=\"opts\" [(value)]=\"mode\" />` — hizalama,\r\n * cihaz önizlemesi gibi KISA/tek-seçimli seçenek kümeleri için. `Tabs`'tan\r\n * farkı: içerik paneli YOK, sadece bir değer seçimi. ARIA/klavye (roving\r\n * tabindex, ok tuşu navigasyonu) `@angular/aria/toolbar`'ın\r\n * `Toolbar`/`ToolbarWidgetGroup`/`ToolbarWidget` pattern'inden geliyor —\r\n * dokümantasyondaki kompozisyon şekli birebir izlendi (dıştaki `ngToolbar`,\r\n * içteki `ngToolbarWidgetGroup [multi]=\"false\"`).\r\n */\r\n@Component({\r\n  selector: 'mf-segmented-control',\r\n  exportAs: 'mfSegmentedControl',\r\n  imports: [AriaToolbar, AriaToolbarWidgetGroup, AriaToolbarWidget],\r\n  host: { class: 'inline-block' },\r\n  templateUrl: './segmented-control.html',\r\n  providers: [\r\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SegmentedControl), multi: true },\r\n  ],\r\n})\r\nexport class SegmentedControl<T>\r\n  extends ValueAccessorBase<T | null>\r\n  implements ControlValueAccessor\r\n{\r\n  readonly options = input.required<SegmentedOption<T>[]>();\r\n  readonly value = model<T | null>(null);\r\n  readonly size = input<SegmentedControlSize>('md');\r\n  readonly ariaLabel = input('');\r\n  readonly disabled = input(false);\r\n\r\n  protected readonly toolbarValue = computed<T[]>(() =>\r\n    this.value() == null ? [] : [this.value() as T],\r\n  );\r\n  protected readonly trackClasses = computed(() =>\r\n    cn(segmentedTrackVariants({ size: this.size() })),\r\n  );\r\n\r\n  writeValue(value: T | null): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  /**\r\n   * `@angular/aria/toolbar`'ın kendi widget-kayıt döngüsü, gerçek bir tıklama\r\n   * OLMADAN da BOŞ bir dizi ile (`values: []`) tetiklenebiliyor (gerçek bulgu\r\n   * — bir seçeneğe tıklarken bile araya giren, seçimle ilgisiz iç kayıt\r\n   * event'leri). `this.value` her event'te güncellenir (görsel durum ETKİLENMEZ,\r\n   * zaten `values[0]` genelde mevcut değerle AYNI), ama CVA `onChange`/`onTouched`\r\n   * SADECE dolu bir dizi (gerçek bir seçim) geldiğinde tetiklenir — aksi halde\r\n   * Reactive Forms'a sahte \"null'a değişti\" bildirimleri sızardı.\r\n   */\r\n  protected onToolbarValueChange(values: readonly T[]): void {\r\n    this.value.set(values[0] ?? null);\r\n    if (values.length > 0) {\r\n      this.onChange(values[0]!);\r\n      this.onTouched();\r\n    }\r\n  }\r\n\r\n  protected itemClasses(option: SegmentedOption<T>): string {\r\n    return cn(\r\n      segmentedItemVariants({ selected: option.value === this.value(), disabled: this.disabled() }),\r\n    );\r\n  }\r\n}\r\n","<div\r\n  ngToolbar\r\n  [disabled]=\"disabled()\"\r\n  [value]=\"toolbarValue()\"\r\n  (valueChange)=\"onToolbarValueChange($event)\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [class]=\"trackClasses()\"\r\n>\r\n  <div ngToolbarWidgetGroup [multi]=\"false\" [disabled]=\"disabled()\" class=\"contents\">\r\n    @for (option of options(); track option.value) {\r\n      <button type=\"button\" ngToolbarWidget [value]=\"option.value\" [class]=\"itemClasses(option)\">\r\n        {{ option.label }}\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaToolbar","AriaToolbarWidgetGroup","AriaToolbarWidget"],"mappings":"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"}

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

@@ -0,0 +1,227 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { input, model, inject, computed, signal, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Chip } from '@mesgflow/ui-kit/chip';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { MF_SELECT_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Popover } from '@mesgflow/ui-kit/popover';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Bkz. `core/recipes.ts` `controlSurface` — aynı kabuk, tetikleyici bir
+ * <button>'a uygulanıyor. `focus:border-accent` — Input/Combobox'ın ZATEN
+ * sahip olduğu odak kenarlığı burada eksikti (gerçek bulgu): odaklı bir
+ * select yalnızca outline ile belli oluyordu, kenarlık aksanlanmıyordu.
+ */
+const selectTriggerVariants = cva(
+/*
+ * `appearance-none`: bkz. button.variants.ts'teki aynı gerekçe — sıfırlamazsan
+ * tarayıcının varsayılan `<button>` kenarlığı+dolgusu bu cva'nın
+ * border/padding'iyle ÜST ÜSTE biner (gerçek bulgu, ilk ekran görüntüsünde
+ * kolon başlıklarındaki sıralama butonları yanlışlıkla select kutusu gibi
+ * göründü).
+ */
+'inline-flex w-full appearance-none items-center justify-between gap-2 rounded-md border border-border bg-surface text-fg shadow-control ' +
+    'transition-colors duration-fast ease-emphasis ' +
+    'hover:border-border-strong ' +
+    'focus:border-accent ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:hover:border-border', {
+    variants: {
+        size: {
+            sm: 'h-control-sm px-2.5 text-sm',
+            md: 'h-control-md px-3 text-sm',
+            lg: 'h-control-lg px-3.5 text-base',
+        },
+        /** Input/NumberInput ile aynı emsal — `@angular/forms/signals` rezerve `invalid` yerine `hasError`. */
+        hasError: {
+            true: 'border-danger focus-visible:outline-danger',
+            false: '',
+        },
+    },
+    defaultVariants: { size: 'md', hasError: false },
+});
+
+/**
+ * `<mf-select [options]="opts" [(value)]="chosen" placeholder="Seç" />`
+ * (tek-seçimli, varsayılan) veya `<mf-select multiple [options]="opts"
+ * [(values)]="chosen" />` (çoklu-seçim — tetikleyici seçilenleri Chip
+ * özeti olarak gösterir, bir seçeneğe tıklamak paneli KAPATMAZ, tekrar
+ * tıklamak seçimi KALDIRIR).
+ *
+ * `multiple` AÇIKKEN `value`/`(valueChange)` KULLANILMAZ — ayrı bir
+ * `values: model<T[]>` var (bkz. aşağıda). İkisini AYIRMANIN sebebi:
+ * `value`'nun TİPİNİ (`T | null`) tek-seçimli kullanım için DEĞİŞTİRMEDEN
+ * bırakmak — mevcut tüm `[(value)]="tekTip"` tüketicileri (Table'ın alan/
+ * operatör/sayfa-boyutu seçicileri, TableFilterBar'ın VE/VEYA seçicisi)
+ * BİREBİR aynı tipte kalıyor, çoklu-seçim EKLENTİ, DEĞİŞİKLİK değil.
+ *
+ * Bu kitin ilk overlay tabanlı primitifi — native `<select>` değil,
+ * çünkü açılır panelin kendisi (arka plan/kenarlık/hover rengi) native
+ * `<select>` popup'ında tarayıcı-bağımlı ve stillenemez kalıyordu; CDK Overlay
+ * + kendi listbox'ımız panel dahil her pikseli bizim token sistemimizle
+ * boyayabiliyor. `@angular/cdk` zaten bağımlı, ek paket gerekmedi — pozisyonlama
+ * CSS'i `styles.css`'teki resmi `@angular/cdk/overlay-prebuilt.css`
+ * import'undan geliyor (bkz. o import'un yanındaki not).
+ *
+ * Arama/virtual-scroll YOK — Table'ın alan/operatör/sayfa-boyutu
+ * seçicileri gibi kısa listeler için kasıtlı olarak minimal.
+ */
+class Select {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** SADECE `multiple=true`'da kullanılır — bkz. sınıf üstündeki JSDoc. */
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    maxVisibleChips = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxVisibleChips" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // `ControlValueAccessor`'ın gerçek Angular arayüzü `any` kullanıyor (bkz.
+    // `@angular/forms`'un kendi tip tanımı) — burada `T | T[] | null` YAZMAK bu
+    // sözleşmeyi İHLAL ETMİYOR, sadece tek/çoklu iki modu TEK bir callback
+    // çiftinde (onChange/onTouched) taşımayı mümkün kılıyor.
+    onChange = () => { };
+    onTouched = () => { };
+    selectLabels = inject(MF_SELECT_LABELS);
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.selectLabels().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    highlighted = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => cn(selectTriggerVariants({ size: this.size(), hasError: this.hasError() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const current = this.value();
+        return this.options().find((option) => option.value === current)?.label ?? '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    selectedOptions = computed(() => {
+        if (!this.multiple())
+            return [];
+        const selected = new Set(this.values());
+        return this.options().filter((o) => selected.has(o.value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    visibleChips = computed(() => this.selectedOptions().slice(0, this.maxVisibleChips()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []));
+    overflowChipCount = computed(() => Math.max(0, this.selectedOptions().length - this.maxVisibleChips()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowChipCount" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled())
+            return;
+        if (!this.open())
+            this.highlighted.set(Math.max(0, this.options().findIndex((o) => o.value === this.value())));
+        this.open.update((v) => !v);
+    }
+    close() {
+        this.open.set(false);
+        this.onTouched();
+    }
+    /** Tek-seçimli modda seçeneği commit eder VE paneli kapatır; çoklu-seçim modunda `toggleValue`'ya devreder (panel AÇIK kalır — bkz. `toggleValue`). */
+    select(option) {
+        if (this.multiple()) {
+            this.toggleValue(option.value);
+            return;
+        }
+        this.value.set(option.value);
+        this.onChange(option.value);
+        this.close();
+    }
+    /** Çoklu-seçimde bir değeri ekler/çıkarır — panel KAPANMAZ, kullanıcı birden fazla seçim yapabilir (Escape/dışarı tıklama ile kapatır). */
+    toggleValue(v) {
+        const current = this.values();
+        const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+        this.values.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    writeValue(value) {
+        if (this.multiple()) {
+            this.values.set(Array.isArray(value) ? value : []);
+        }
+        else {
+            this.value.set(Array.isArray(value) ? null : value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    isSelected(option) {
+        if (this.multiple())
+            return this.values().includes(option.value);
+        return option.value === this.value();
+    }
+    optionClasses(option, index) {
+        return cn(
+        // `rounded-sm`(6px) — panelin kendi `rounded-lg`(12px) kapsayıcısı
+        // içindeki İÇ İÇE (nested) daha küçük radius, bkz. styles.css radius
+        // notu: menü öğesi gibi kontrol-içi satırlar bir kademe küçük kalıyor.
+        'flex cursor-pointer items-center justify-between gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis', index === this.highlighted() && !this.isSelected(option) && 'bg-surface-alt', 
+        // Seçili satır Badge/Avatar'daki aynı tonal işaret rol token'ını
+        // konuşuyor (`color-mix()` tabanlı) — tutarlı "tint fill" imzası.
+        this.isSelected(option) && 'bg-primary-tint text-primary-tint-fg');
+    }
+    onTriggerKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (!this.open())
+                this.toggle();
+        }
+    }
+    onPanelKeydown(event) {
+        const options = this.options();
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.highlighted.update((i) => Math.min(options.length - 1, i + 1));
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.highlighted.update((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            const option = options[this.highlighted()];
+            if (option)
+                this.select(option);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Select, isStandalone: true, selector: "mf-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChips: { classPropertyName: "maxVisibleChips", publicName: "maxVisibleChips", 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 }, size: { classPropertyName: "size", publicName: "size", 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 } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Select), multi: true }], exportAs: ["mfSelect"], ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"triggerClasses()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  aria-haspopup=\"listbox\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  @if (multiple()) {\r\n    @if (selectedOptions().length > 0) {\r\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-1\">\r\n        @for (option of visibleChips(); track option.label) {\r\n          <mf-chip size=\"sm\">{{ option.label }}</mf-chip>\r\n        }\r\n        @if (overflowChipCount() > 0) {\r\n          <mf-chip size=\"sm\">+{{ overflowChipCount() }}</mf-chip>\r\n        }\r\n      </span>\r\n    } @else {\r\n      <span class=\"truncate text-fg-subtle\">{{ effectivePlaceholder() }}</span>\r\n    }\r\n  } @else {\r\n    <span class=\"truncate\" [class.text-fg-subtle]=\"!selectedLabel()\">\r\n      {{ selectedLabel() || effectivePlaceholder() }}\r\n    </span>\r\n  }\r\n  <span mfIcon [size]=\"18\" class=\"shrink-0 text-fg-subtle\">unfold_more</span>\r\n</button>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    role=\"listbox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    class=\"w-full max-h-64 min-w-[8rem] text-sm\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @for (option of options(); track option.label; let i = $index) {\r\n      <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"isSelected(option)\"\r\n        [class]=\"optionClasses(option, i)\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        @if (isSelected(option)) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n", dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: Chip, selector: "mf-chip", inputs: ["tone", "size", "selected", "disabled", "removable", "removeLabel"], outputs: ["removed"], exportAs: ["mfChip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Select, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-select', exportAs: 'mfSelect', imports: [OverlayModule, Icon, Popover, Chip], host: { class: 'block' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Select), multi: true }], template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"triggerClasses()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  aria-haspopup=\"listbox\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  @if (multiple()) {\r\n    @if (selectedOptions().length > 0) {\r\n      <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-1\">\r\n        @for (option of visibleChips(); track option.label) {\r\n          <mf-chip size=\"sm\">{{ option.label }}</mf-chip>\r\n        }\r\n        @if (overflowChipCount() > 0) {\r\n          <mf-chip size=\"sm\">+{{ overflowChipCount() }}</mf-chip>\r\n        }\r\n      </span>\r\n    } @else {\r\n      <span class=\"truncate text-fg-subtle\">{{ effectivePlaceholder() }}</span>\r\n    }\r\n  } @else {\r\n    <span class=\"truncate\" [class.text-fg-subtle]=\"!selectedLabel()\">\r\n      {{ selectedLabel() || effectivePlaceholder() }}\r\n    </span>\r\n  }\r\n  <span mfIcon [size]=\"18\" class=\"shrink-0 text-fg-subtle\">unfold_more</span>\r\n</button>\r\n\r\n<mf-popover\r\n  [origin]=\"origin\"\r\n  [open]=\"open()\"\r\n  placement=\"bottom-start\"\r\n  padding=\"sm\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul\r\n    role=\"listbox\"\r\n    tabindex=\"0\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    class=\"w-full max-h-64 min-w-[8rem] text-sm\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n  >\r\n    @for (option of options(); track option.label; let i = $index) {\r\n      <!-- role=\"option\" B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi yukar\u0131daki listbox (keydown)'da merkezi. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n      <li\r\n        role=\"option\"\r\n        [attr.aria-selected]=\"isSelected(option)\"\r\n        [class]=\"optionClasses(option, i)\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"select(option)\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        @if (isSelected(option)) {\r\n          <span mfIcon [size]=\"16\">check</span>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Select, selectTriggerVariants };
+//# sourceMappingURL=mesgflow-ui-kit-select.mjs.map