@mesgflow/ui-kit 0.6.0

package/fesm2022/mesgflow-ui-kit-color-picker.mjs

@@ -0,0 +1,210 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { model, input, inject, computed, signal, viewChild, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MF_COLOR_PICKER_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Popover } from '@mesgflow/ui-kit/popover';
+
+function hexToRgb(hex) {
+    const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+    if (!match)
+        return null;
+    return { r: parseInt(match[1], 16), g: parseInt(match[2], 16), b: parseInt(match[3], 16) };
+}
+function rgbToHex({ r, g, b }) {
+    const toHex = (n) => Math.round(Math.min(255, Math.max(0, n)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function rgbToHsv({ r, g, b }) {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const delta = max - min;
+    let h = 0;
+    if (delta !== 0) {
+        if (max === rn)
+            h = 60 * (((gn - bn) / delta) % 6);
+        else if (max === gn)
+            h = 60 * ((bn - rn) / delta + 2);
+        else
+            h = 60 * ((rn - gn) / delta + 4);
+    }
+    if (h < 0)
+        h += 360;
+    const s = max === 0 ? 0 : (delta / max) * 100;
+    const v = max * 100;
+    return { h, s, v };
+}
+function hsvToRgb({ h, s, v }) {
+    const sn = s / 100;
+    const vn = v / 100;
+    const c = vn * sn;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = vn - c;
+    let rp;
+    let gp;
+    let bp;
+    if (h < 60)
+        [rp, gp, bp] = [c, x, 0];
+    else if (h < 120)
+        [rp, gp, bp] = [x, c, 0];
+    else if (h < 180)
+        [rp, gp, bp] = [0, c, x];
+    else if (h < 240)
+        [rp, gp, bp] = [0, x, c];
+    else if (h < 300)
+        [rp, gp, bp] = [x, 0, c];
+    else
+        [rp, gp, bp] = [c, 0, x];
+    return { r: (rp + m) * 255, g: (gp + m) * 255, b: (bp + m) * 255 };
+}
+
+/**
+ * `<mf-color-picker [(value)]="brandColor" [palette]="brandPalette" />` —
+ * HSV alanı + hue slider + hex girdi + marka paleti + (destekleniyorsa)
+ * `EyeDropper` API. `@angular/aria`'da hazır bir color-picker pattern'i YOK
+ * — HSV alanı ve hue slider'ı `Slider`'daki AYNI hand-rolled pointer/klavye
+ * yaklaşımıyla kuruldu. Overlay pozisyonlaması `Select`'in kanıtlanmış
+ * `cdkConnectedOverlay` deseni.
+ */
+class ColorPicker {
+    /** Varsayılan — kitin kendi marka rengi (`--color-primary-600`, bkz. tokens/color.css) — jenerik bir Tailwind yeşili DEĞİL. */
+    value = model('#004d40', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    palette = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    colorPickerLabels = inject(MF_COLOR_PICKER_LABELS);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.colorPickerLabels().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    hexDraft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hexDraft" }] : /* istanbul ignore next */ []));
+    areaEl = viewChild('area', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaEl" }] : /* istanbul ignore next */ []));
+    hueTrackEl = viewChild('hueTrack', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hueTrackEl" }] : /* istanbul ignore next */ []));
+    hsv = computed(() => rgbToHsv(hexToRgb(this.value()) ?? { r: 0, g: 0, b: 0 }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hsv" }] : /* istanbul ignore next */ []));
+    areaBackground = computed(() => `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(${this.hsv().h}, 100%, 50%)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaBackground" }] : /* istanbul ignore next */ []));
+    supportsEyeDropper = typeof window !== 'undefined' && !!window.EyeDropper;
+    writeValue(value) {
+        this.value.set(value || '#000000');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.hexDraft.set(this.value());
+        this.open.update((v) => !v);
+    }
+    close() {
+        this.open.set(false);
+        this.onTouched();
+    }
+    setHsv(next) {
+        const hex = rgbToHex(hsvToRgb({ ...this.hsv(), ...next }));
+        this.value.set(hex);
+        this.hexDraft.set(hex);
+        this.onChange(hex);
+    }
+    onAreaPointerDown(event) {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.updateFromAreaPointer(event);
+    }
+    onAreaPointerMove(event) {
+        if (event.buttons !== 1)
+            return;
+        this.updateFromAreaPointer(event);
+    }
+    updateFromAreaPointer(event) {
+        const rect = this.areaEl()?.nativeElement.getBoundingClientRect();
+        if (!rect)
+            return;
+        const s = Math.min(100, Math.max(0, ((event.clientX - rect.left) / rect.width) * 100));
+        const v = Math.min(100, Math.max(0, 100 - ((event.clientY - rect.top) / rect.height) * 100));
+        this.setHsv({ s, v });
+    }
+    onHuePointerDown(event) {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.updateFromHuePointer(event);
+    }
+    onHuePointerMove(event) {
+        if (event.buttons !== 1)
+            return;
+        this.updateFromHuePointer(event);
+    }
+    updateFromHuePointer(event) {
+        const rect = this.hueTrackEl()?.nativeElement.getBoundingClientRect();
+        if (!rect)
+            return;
+        const h = Math.min(360, Math.max(0, ((event.clientX - rect.left) / rect.width) * 360));
+        this.setHsv({ h });
+    }
+    onHexInput(raw) {
+        this.hexDraft.set(raw);
+        const rgb = hexToRgb(raw);
+        if (rgb) {
+            const hex = rgbToHex(rgb);
+            this.value.set(hex);
+            this.onChange(hex);
+        }
+    }
+    selectPaletteColor(hex) {
+        this.value.set(hex);
+        this.hexDraft.set(hex);
+        this.onChange(hex);
+    }
+    async pickWithEyeDropper() {
+        if (!window.EyeDropper)
+            return;
+        try {
+            const result = await new window.EyeDropper().open();
+            this.value.set(result.sRGBHex);
+            this.hexDraft.set(result.sRGBHex);
+            this.onChange(result.sRGBHex);
+        }
+        catch {
+            // Kullanıcı Escape ile iptal etti — sessizce yut, gerçek bir hata değil.
+        }
+    }
+    classes = computed(() => cn('flex aspect-square h-control-md shrink-0 items-center justify-center rounded-md border border-border shadow-control transition-colors duration-fast ease-emphasis ' +
+        'hover:border-border-strong focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +
+        (this.disabled() ? 'pointer-events-none cursor-not-allowed opacity-50' : 'cursor-pointer')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ColorPicker, isStandalone: true, selector: "mf-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-flex" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPicker), multi: true },
+        ], viewQueries: [{ propertyName: "areaEl", first: true, predicate: ["area"], descendants: true, isSignal: true }, { propertyName: "hueTrackEl", first: true, predicate: ["hueTrack"], descendants: true, isSignal: true }], exportAs: ["mfColorPicker"], ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"classes()\"\r\n  [style.background]=\"disabled() ? null : value()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"effectiveAriaLabel()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  (click)=\"toggle()\"\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=\"lg\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <div\r\n    #area\r\n    class=\"relative h-32 w-full cursor-crosshair touch-none rounded-md\"\r\n    [style.background]=\"areaBackground()\"\r\n    (pointerdown)=\"onAreaPointerDown($event)\"\r\n    (pointermove)=\"onAreaPointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow-control\"\r\n      [style.left.%]=\"hsv().s\"\r\n      [style.top.%]=\"100 - hsv().v\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div\r\n    #hueTrack\r\n    class=\"relative mt-3 h-3 w-full touch-none rounded-full\"\r\n    style=\"background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)\"\r\n    (pointerdown)=\"onHuePointerDown($event)\"\r\n    (pointermove)=\"onHuePointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface bg-surface shadow-control\"\r\n      [style.left.%]=\"(hsv().h / 360) * 100\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div class=\"mt-3 flex items-center gap-2\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"min-h-8 w-full rounded-md border border-border bg-surface px-2 py-1 text-sm text-fg shadow-control focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [value]=\"hexDraft()\"\r\n      (input)=\"onHexInput($any($event.target).value)\"\r\n      [attr.aria-label]=\"colorPickerLabels().hexAriaLabel\"\r\n    />\r\n    @if (supportsEyeDropper) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg\"\r\n        (click)=\"pickWithEyeDropper()\"\r\n        [attr.aria-label]=\"colorPickerLabels().pickFromScreenAriaLabel\"\r\n      >\r\n        <span mfIcon [size]=\"16\">colorize</span>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (palette().length > 0) {\r\n    <div class=\"mt-3 flex flex-wrap gap-1.5\">\r\n      @for (color of palette(); track color) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"h-6 w-6 rounded-sm border border-border transition-transform duration-fast hover:scale-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring\"\r\n          [style.background]=\"color\"\r\n          [attr.aria-label]=\"color\"\r\n          (click)=\"selectPaletteColor(color)\"\r\n        ></button>\r\n      }\r\n    </div>\r\n  }\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-color-picker', exportAs: 'mfColorPicker', host: { class: 'inline-flex' }, imports: [OverlayModule, Icon, Popover], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPicker), multi: true },
+                    ], template: "<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"classes()\"\r\n  [style.background]=\"disabled() ? null : value()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"effectiveAriaLabel()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  (click)=\"toggle()\"\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=\"lg\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <div\r\n    #area\r\n    class=\"relative h-32 w-full cursor-crosshair touch-none rounded-md\"\r\n    [style.background]=\"areaBackground()\"\r\n    (pointerdown)=\"onAreaPointerDown($event)\"\r\n    (pointermove)=\"onAreaPointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow-control\"\r\n      [style.left.%]=\"hsv().s\"\r\n      [style.top.%]=\"100 - hsv().v\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div\r\n    #hueTrack\r\n    class=\"relative mt-3 h-3 w-full touch-none rounded-full\"\r\n    style=\"background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)\"\r\n    (pointerdown)=\"onHuePointerDown($event)\"\r\n    (pointermove)=\"onHuePointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface bg-surface shadow-control\"\r\n      [style.left.%]=\"(hsv().h / 360) * 100\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div class=\"mt-3 flex items-center gap-2\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"min-h-8 w-full rounded-md border border-border bg-surface px-2 py-1 text-sm text-fg shadow-control focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [value]=\"hexDraft()\"\r\n      (input)=\"onHexInput($any($event.target).value)\"\r\n      [attr.aria-label]=\"colorPickerLabels().hexAriaLabel\"\r\n    />\r\n    @if (supportsEyeDropper) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg\"\r\n        (click)=\"pickWithEyeDropper()\"\r\n        [attr.aria-label]=\"colorPickerLabels().pickFromScreenAriaLabel\"\r\n      >\r\n        <span mfIcon [size]=\"16\">colorize</span>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (palette().length > 0) {\r\n    <div class=\"mt-3 flex flex-wrap gap-1.5\">\r\n      @for (color of palette(); track color) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"h-6 w-6 rounded-sm border border-border transition-transform duration-fast hover:scale-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring\"\r\n          [style.background]=\"color\"\r\n          [attr.aria-label]=\"color\"\r\n          (click)=\"selectPaletteColor(color)\"\r\n        ></button>\r\n      }\r\n    </div>\r\n  }\r\n</mf-popover>\r\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], areaEl: [{ type: i0.ViewChild, args: ['area', { isSignal: true }] }], hueTrackEl: [{ type: i0.ViewChild, args: ['hueTrack', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPicker, hexToRgb, hsvToRgb, rgbToHex, rgbToHsv };
+//# sourceMappingURL=mesgflow-ui-kit-color-picker.mjs.map

package/fesm2022/mesgflow-ui-kit-color-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-color-picker.mjs","sources":["../../../projects/ui-kit/color-picker/color.ts","../../../projects/ui-kit/color-picker/color-picker.ts","../../../projects/ui-kit/color-picker/color-picker.html","../../../projects/ui-kit/color-picker/mesgflow-ui-kit-color-picker.ts"],"sourcesContent":["export interface Hsv {\r\n  h: number; // 0-360\r\n  s: number; // 0-100\r\n  v: number; // 0-100\r\n}\r\n\r\nexport interface Rgb {\r\n  r: number;\r\n  g: number;\r\n  b: number;\r\n}\r\n\r\nexport function hexToRgb(hex: string): Rgb | null {\r\n  const match = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex.trim());\r\n  if (!match) return null;\r\n  return { r: parseInt(match[1], 16), g: parseInt(match[2], 16), b: parseInt(match[3], 16) };\r\n}\r\n\r\nexport function rgbToHex({ r, g, b }: Rgb): string {\r\n  const toHex = (n: number) =>\r\n    Math.round(Math.min(255, Math.max(0, n)))\r\n      .toString(16)\r\n      .padStart(2, '0');\r\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\r\n}\r\n\r\nexport function rgbToHsv({ r, g, b }: Rgb): Hsv {\r\n  const rn = r / 255;\r\n  const gn = g / 255;\r\n  const bn = b / 255;\r\n  const max = Math.max(rn, gn, bn);\r\n  const min = Math.min(rn, gn, bn);\r\n  const delta = max - min;\r\n\r\n  let h = 0;\r\n  if (delta !== 0) {\r\n    if (max === rn) h = 60 * (((gn - bn) / delta) % 6);\r\n    else if (max === gn) h = 60 * ((bn - rn) / delta + 2);\r\n    else h = 60 * ((rn - gn) / delta + 4);\r\n  }\r\n  if (h < 0) h += 360;\r\n\r\n  const s = max === 0 ? 0 : (delta / max) * 100;\r\n  const v = max * 100;\r\n\r\n  return { h, s, v };\r\n}\r\n\r\nexport function hsvToRgb({ h, s, v }: Hsv): Rgb {\r\n  const sn = s / 100;\r\n  const vn = v / 100;\r\n  const c = vn * sn;\r\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\r\n  const m = vn - c;\r\n\r\n  let rp: number;\r\n  let gp: number;\r\n  let bp: number;\r\n  if (h < 60) [rp, gp, bp] = [c, x, 0];\r\n  else if (h < 120) [rp, gp, bp] = [x, c, 0];\r\n  else if (h < 180) [rp, gp, bp] = [0, c, x];\r\n  else if (h < 240) [rp, gp, bp] = [0, x, c];\r\n  else if (h < 300) [rp, gp, bp] = [x, 0, c];\r\n  else [rp, gp, bp] = [c, 0, x];\r\n\r\n  return { r: (rp + m) * 255, g: (gp + m) * 255, b: (bp + m) * 255 };\r\n}\r\n","import { OverlayModule } from '@angular/cdk/overlay';\r\nimport {\r\n  Component,\r\n  ElementRef,\r\n  computed,\r\n  forwardRef,\r\n  inject,\r\n  input,\r\n  model,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { cn, MF_COLOR_PICKER_LABELS } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Popover } from '@mesgflow/ui-kit/popover';\r\nimport { hexToRgb, hsvToRgb, rgbToHex, rgbToHsv, type Hsv } from './color';\r\n\r\ninterface EyeDropperResult {\r\n  sRGBHex: string;\r\n}\r\n\r\ninterface EyeDropperApi {\r\n  open(): Promise<EyeDropperResult>;\r\n}\r\n\r\ndeclare global {\r\n  interface Window {\r\n    EyeDropper?: new () => EyeDropperApi;\r\n  }\r\n}\r\n\r\n/**\r\n * `<mf-color-picker [(value)]=\"brandColor\" [palette]=\"brandPalette\" />` —\r\n * HSV alanı + hue slider + hex girdi + marka paleti + (destekleniyorsa)\r\n * `EyeDropper` API. `@angular/aria`'da hazır bir color-picker pattern'i YOK\r\n * — HSV alanı ve hue slider'ı `Slider`'daki AYNI hand-rolled pointer/klavye\r\n * yaklaşımıyla kuruldu. Overlay pozisyonlaması `Select`'in kanıtlanmış\r\n * `cdkConnectedOverlay` deseni.\r\n */\r\n@Component({\r\n  selector: 'mf-color-picker',\r\n  exportAs: 'mfColorPicker',\r\n  host: { class: 'inline-flex' },\r\n  imports: [OverlayModule, Icon, Popover],\r\n  templateUrl: './color-picker.html',\r\n  providers: [\r\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ColorPicker), multi: true },\r\n  ],\r\n})\r\nexport class ColorPicker implements ControlValueAccessor {\r\n  /** Varsayılan — kitin kendi marka rengi (`--color-primary-600`, bkz. tokens/color.css) — jenerik bir Tailwind yeşili DEĞİL. */\r\n  readonly value = model('#004d40');\r\n  readonly palette = input<string[]>([]);\r\n  readonly disabled = input(false);\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private onChange: (value: string) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  protected readonly colorPickerLabels = inject(MF_COLOR_PICKER_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.colorPickerLabels().ariaLabel,\r\n  );\r\n\r\n  protected readonly open = signal(false);\r\n  protected readonly hexDraft = signal('');\r\n\r\n  protected readonly areaEl = viewChild<ElementRef<HTMLElement>>('area');\r\n  protected readonly hueTrackEl = viewChild<ElementRef<HTMLElement>>('hueTrack');\r\n\r\n  protected readonly hsv = computed<Hsv>(() =>\r\n    rgbToHsv(hexToRgb(this.value()) ?? { r: 0, g: 0, b: 0 }),\r\n  );\r\n\r\n  protected readonly areaBackground = computed(\r\n    () =>\r\n      `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(${this.hsv().h}, 100%, 50%)`,\r\n  );\r\n\r\n  protected readonly supportsEyeDropper = typeof window !== 'undefined' && !!window.EyeDropper;\r\n\r\n  writeValue(value: string): void {\r\n    this.value.set(value || '#000000');\r\n  }\r\n\r\n  registerOnChange(fn: (value: string) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  protected toggle(): void {\r\n    if (this.disabled()) return;\r\n    this.hexDraft.set(this.value());\r\n    this.open.update((v) => !v);\r\n  }\r\n\r\n  protected close(): void {\r\n    this.open.set(false);\r\n    this.onTouched();\r\n  }\r\n\r\n  private setHsv(next: Partial<Hsv>): void {\r\n    const hex = rgbToHex(hsvToRgb({ ...this.hsv(), ...next }));\r\n    this.value.set(hex);\r\n    this.hexDraft.set(hex);\r\n    this.onChange(hex);\r\n  }\r\n\r\n  protected onAreaPointerDown(event: PointerEvent): void {\r\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\r\n    this.updateFromAreaPointer(event);\r\n  }\r\n\r\n  protected onAreaPointerMove(event: PointerEvent): void {\r\n    if (event.buttons !== 1) return;\r\n    this.updateFromAreaPointer(event);\r\n  }\r\n\r\n  private updateFromAreaPointer(event: PointerEvent): void {\r\n    const rect = this.areaEl()?.nativeElement.getBoundingClientRect();\r\n    if (!rect) return;\r\n    const s = Math.min(100, Math.max(0, ((event.clientX - rect.left) / rect.width) * 100));\r\n    const v = Math.min(100, Math.max(0, 100 - ((event.clientY - rect.top) / rect.height) * 100));\r\n    this.setHsv({ s, v });\r\n  }\r\n\r\n  protected onHuePointerDown(event: PointerEvent): void {\r\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\r\n    this.updateFromHuePointer(event);\r\n  }\r\n\r\n  protected onHuePointerMove(event: PointerEvent): void {\r\n    if (event.buttons !== 1) return;\r\n    this.updateFromHuePointer(event);\r\n  }\r\n\r\n  private updateFromHuePointer(event: PointerEvent): void {\r\n    const rect = this.hueTrackEl()?.nativeElement.getBoundingClientRect();\r\n    if (!rect) return;\r\n    const h = Math.min(360, Math.max(0, ((event.clientX - rect.left) / rect.width) * 360));\r\n    this.setHsv({ h });\r\n  }\r\n\r\n  protected onHexInput(raw: string): void {\r\n    this.hexDraft.set(raw);\r\n    const rgb = hexToRgb(raw);\r\n    if (rgb) {\r\n      const hex = rgbToHex(rgb);\r\n      this.value.set(hex);\r\n      this.onChange(hex);\r\n    }\r\n  }\r\n\r\n  protected selectPaletteColor(hex: string): void {\r\n    this.value.set(hex);\r\n    this.hexDraft.set(hex);\r\n    this.onChange(hex);\r\n  }\r\n\r\n  protected async pickWithEyeDropper(): Promise<void> {\r\n    if (!window.EyeDropper) return;\r\n    try {\r\n      const result = await new window.EyeDropper().open();\r\n      this.value.set(result.sRGBHex);\r\n      this.hexDraft.set(result.sRGBHex);\r\n      this.onChange(result.sRGBHex);\r\n    } catch {\r\n      // Kullanıcı Escape ile iptal etti — sessizce yut, gerçek bir hata değil.\r\n    }\r\n  }\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      'flex aspect-square h-control-md shrink-0 items-center justify-center rounded-md border border-border shadow-control transition-colors duration-fast ease-emphasis ' +\r\n        'hover:border-border-strong focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +\r\n        (this.disabled() ? 'pointer-events-none cursor-not-allowed opacity-50' : 'cursor-pointer'),\r\n    ),\r\n  );\r\n}\r\n","<button\r\n  type=\"button\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"classes()\"\r\n  [style.background]=\"disabled() ? null : value()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"effectiveAriaLabel()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  (click)=\"toggle()\"\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=\"lg\"\r\n  panelClass=\"w-56\"\r\n  (closed)=\"close()\"\r\n>\r\n  <div\r\n    #area\r\n    class=\"relative h-32 w-full cursor-crosshair touch-none rounded-md\"\r\n    [style.background]=\"areaBackground()\"\r\n    (pointerdown)=\"onAreaPointerDown($event)\"\r\n    (pointermove)=\"onAreaPointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow-control\"\r\n      [style.left.%]=\"hsv().s\"\r\n      [style.top.%]=\"100 - hsv().v\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div\r\n    #hueTrack\r\n    class=\"relative mt-3 h-3 w-full touch-none rounded-full\"\r\n    style=\"background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)\"\r\n    (pointerdown)=\"onHuePointerDown($event)\"\r\n    (pointermove)=\"onHuePointerMove($event)\"\r\n  >\r\n    <div\r\n      class=\"pointer-events-none absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface bg-surface shadow-control\"\r\n      [style.left.%]=\"(hsv().h / 360) * 100\"\r\n    ></div>\r\n  </div>\r\n\r\n  <div class=\"mt-3 flex items-center gap-2\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"min-h-8 w-full rounded-md border border-border bg-surface px-2 py-1 text-sm text-fg shadow-control focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n      [value]=\"hexDraft()\"\r\n      (input)=\"onHexInput($any($event.target).value)\"\r\n      [attr.aria-label]=\"colorPickerLabels().hexAriaLabel\"\r\n    />\r\n    @if (supportsEyeDropper) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg\"\r\n        (click)=\"pickWithEyeDropper()\"\r\n        [attr.aria-label]=\"colorPickerLabels().pickFromScreenAriaLabel\"\r\n      >\r\n        <span mfIcon [size]=\"16\">colorize</span>\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (palette().length > 0) {\r\n    <div class=\"mt-3 flex flex-wrap gap-1.5\">\r\n      @for (color of palette(); track color) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"h-6 w-6 rounded-sm border border-border transition-transform duration-fast hover:scale-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-focus-ring\"\r\n          [style.background]=\"color\"\r\n          [attr.aria-label]=\"color\"\r\n          (click)=\"selectPaletteColor(color)\"\r\n        ></button>\r\n      }\r\n    </div>\r\n  }\r\n</mf-popover>\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-combobox.mjs

@@ -0,0 +1,181 @@
+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 { MF_COMBOBOX_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Popover } from '@mesgflow/ui-kit/popover';
+import { cva } from 'class-variance-authority';
+
+/** `Select`'in trigger/option görsel diliyle AYNI — bkz. select.variants.ts / `core/recipes.ts`. */
+const comboboxTriggerVariants = cva('w-full rounded-md border border-border bg-surface pe-9 text-sm text-fg shadow-control ' +
+    'transition-colors duration-fast ease-emphasis placeholder:text-fg-subtle ' +
+    '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: 'min-h-(--control-h-sm) px-2.5 py-1',
+            md: 'min-h-(--control-h-md) px-3 py-1.5',
+            lg: 'min-h-(--control-h-lg) px-3.5 py-2 text-base',
+        },
+        hasError: {
+            true: 'border-danger focus:border-danger focus-visible:outline-danger',
+            false: '',
+        },
+    },
+    defaultVariants: { size: 'md', hasError: false },
+});
+const comboboxOptionVariants = cva('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', {
+    variants: {
+        highlighted: {
+            true: 'bg-surface-alt',
+            false: '',
+        },
+        selected: {
+            true: 'bg-primary-tint text-primary-tint-fg',
+            false: '',
+        },
+    },
+    defaultVariants: { highlighted: false, selected: false },
+});
+
+let comboboxIdSeq = 0;
+/**
+ * `<mf-combobox [options]="opts" [(value)]="chosen" placeholder="Ara..." />`
+ *
+ * `Select`'in (bkz. select.ts) genişletilmiş hâli — filtrelenebilir/typeahead
+ * seçim. `@angular/aria/combobox` + `@angular/aria/listbox` zincirini
+ * KULLANMADI, bilinçli bir tercih: o zincir kendi popup pozisyonlamasını
+ * taşımıyor (headless), `Select`'in ZATEN kanıtlanmış CDK Overlay + elle ARIA
+ * deseni (highlighted index, `role="listbox"`/`role="option"`) buraya
+ * genişletmek, dört ayrı directive'i (Combobox/ComboboxPopup/ComboboxWidget/
+ * Listbox/Option) doğru sırayla bağlamaktan daha az riskli.
+ *
+ * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU —
+ * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır
+ * (klasik combobox tuzağı).
+ */
+class Combobox {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* 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 */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    comboboxLabels = inject(MF_COMBOBOX_LABELS);
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.comboboxLabels().placeholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    highlighted = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => cn(comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    /** ARIA 1.2 combobox deseni: input'un `aria-controls`'ü panel listbox'ına işaret etmeli. */
+    listboxId = `mf-combobox-listbox-${++comboboxIdSeq}`;
+    selectedLabel = computed(() => this.options().find((o) => o.value === this.value())?.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const q = this.query().trim().toLowerCase();
+        if (!q)
+            return this.options();
+        return this.options().filter((o) => o.label.toLowerCase().includes(q));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onFocus() {
+        if (this.disabled())
+            return;
+        this.query.set('');
+        this.highlighted.set(0);
+        this.open.set(true);
+    }
+    onQueryInput(raw) {
+        this.query.set(raw);
+        this.highlighted.set(0);
+        if (!this.open())
+            this.open.set(true);
+    }
+    select(option) {
+        this.value.set(option.value);
+        this.onChange(option.value);
+        this.close();
+    }
+    close() {
+        this.open.set(false);
+        this.query.set('');
+        this.onTouched();
+    }
+    isSelected(option) {
+        return option.value === this.value();
+    }
+    optionClasses(option, index) {
+        return cn(comboboxOptionVariants({
+            highlighted: index === this.highlighted() && !this.isSelected(option),
+            selected: this.isSelected(option),
+        }));
+    }
+    onKeydown(event) {
+        const options = this.filteredOptions();
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (!this.open()) {
+                this.open.set(true);
+                return;
+            }
+            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.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: Combobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Combobox, isStandalone: true, selector: "mf-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, 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" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], exportAs: ["mfCombobox"], ngImport: i0, template: "<div class=\"relative\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [class]=\"triggerClasses()\"\r\n    [value]=\"open() ? query() : selectedLabel()\"\r\n    [placeholder]=\"effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\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  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul [id]=\"listboxId\" role=\"listbox\" class=\"max-h-64 min-w-[8rem] text-sm\">\r\n    @for (option of filteredOptions(); track option.label; let i = $index) {\r\n      <!--\r\n        `role=\"option\"` sat\u0131rlar\u0131 B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi\r\n        input'un `(keydown)` i\u015Fleyicisinde (yukar\u0131da) merkezi olarak y\u00F6netiliyor\r\n        (roving-highlight deseni); `(click)` yaln\u0131zca fare/dokunma i\u00E7in.\r\n      -->\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        (mousedown)=\"$event.preventDefault()\"\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    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ comboboxLabels().noResults }}</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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Combobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-combobox', exportAs: 'mfCombobox', host: { class: 'block' }, imports: [OverlayModule, Icon, Popover], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], template: "<div class=\"relative\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [class]=\"triggerClasses()\"\r\n    [value]=\"open() ? query() : selectedLabel()\"\r\n    [placeholder]=\"effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\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  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul [id]=\"listboxId\" role=\"listbox\" class=\"max-h-64 min-w-[8rem] text-sm\">\r\n    @for (option of filteredOptions(); track option.label; let i = $index) {\r\n      <!--\r\n        `role=\"option\"` sat\u0131rlar\u0131 B\u0130LEREK odaklanabilir de\u011Fil \u2014 klavye gezinmesi\r\n        input'un `(keydown)` i\u015Fleyicisinde (yukar\u0131da) merkezi olarak y\u00F6netiliyor\r\n        (roving-highlight deseni); `(click)` yaln\u0131zca fare/dokunma i\u00E7in.\r\n      -->\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        (mousedown)=\"$event.preventDefault()\"\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    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ comboboxLabels().noResults }}</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"] }], 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 { Combobox, comboboxOptionVariants, comboboxTriggerVariants };
+//# sourceMappingURL=mesgflow-ui-kit-combobox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-combobox.mjs","sources":["../../../projects/ui-kit/combobox/combobox.variants.ts","../../../projects/ui-kit/combobox/combobox.ts","../../../projects/ui-kit/combobox/combobox.html","../../../projects/ui-kit/combobox/mesgflow-ui-kit-combobox.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/** `Select`'in trigger/option görsel diliyle AYNI — bkz. select.variants.ts / `core/recipes.ts`. */\r\nexport const comboboxTriggerVariants = cva(\r\n  'w-full rounded-md border border-border bg-surface pe-9 text-sm text-fg shadow-control ' +\r\n    'transition-colors duration-fast ease-emphasis placeholder:text-fg-subtle ' +\r\n    'hover:border-border-strong ' +\r\n    'focus:border-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:hover:border-border',\r\n  {\r\n    variants: {\r\n      size: {\r\n        sm: 'min-h-(--control-h-sm) px-2.5 py-1',\r\n        md: 'min-h-(--control-h-md) px-3 py-1.5',\r\n        lg: 'min-h-(--control-h-lg) px-3.5 py-2 text-base',\r\n      },\r\n      hasError: {\r\n        true: 'border-danger focus:border-danger focus-visible:outline-danger',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { size: 'md', hasError: false },\r\n  },\r\n);\r\n\r\nexport type ComboboxSize = VariantProps<typeof comboboxTriggerVariants>['size'];\r\nexport type ComboboxHasError = VariantProps<typeof comboboxTriggerVariants>['hasError'];\r\n\r\nexport const comboboxOptionVariants = cva(\r\n  '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',\r\n  {\r\n    variants: {\r\n      highlighted: {\r\n        true: 'bg-surface-alt',\r\n        false: '',\r\n      },\r\n      selected: {\r\n        true: 'bg-primary-tint text-primary-tint-fg',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { highlighted: false, selected: false },\r\n  },\r\n);\r\n","import { OverlayModule } from '@angular/cdk/overlay';\r\nimport { Component, computed, forwardRef, inject, input, model, signal } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { cn, MF_COMBOBOX_LABELS, type MfSize } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Popover } from '@mesgflow/ui-kit/popover';\r\nimport { comboboxOptionVariants, comboboxTriggerVariants } from './combobox.variants';\r\n\r\nexport interface ComboboxOption<T> {\r\n  label: string;\r\n  value: T;\r\n}\r\n\r\nlet comboboxIdSeq = 0;\r\n\r\n/**\r\n * `<mf-combobox [options]=\"opts\" [(value)]=\"chosen\" placeholder=\"Ara...\" />`\r\n *\r\n * `Select`'in (bkz. select.ts) genişletilmiş hâli — filtrelenebilir/typeahead\r\n * seçim. `@angular/aria/combobox` + `@angular/aria/listbox` zincirini\r\n * KULLANMADI, bilinçli bir tercih: o zincir kendi popup pozisyonlamasını\r\n * taşımıyor (headless), `Select`'in ZATEN kanıtlanmış CDK Overlay + elle ARIA\r\n * deseni (highlighted index, `role=\"listbox\"`/`role=\"option\"`) buraya\r\n * genişletmek, dört ayrı directive'i (Combobox/ComboboxPopup/ComboboxWidget/\r\n * Listbox/Option) doğru sırayla bağlamaktan daha az riskli.\r\n *\r\n * `(mousedown)=\"$event.preventDefault()\"` seçenek satırında ZORUNLU —\r\n * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır\r\n * (klasik combobox tuzağı).\r\n */\r\n@Component({\r\n  selector: 'mf-combobox',\r\n  exportAs: 'mfCombobox',\r\n  host: { class: 'block' },\r\n  imports: [OverlayModule, Icon, Popover],\r\n  templateUrl: './combobox.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }],\r\n})\r\nexport class Combobox<T> implements ControlValueAccessor {\r\n  readonly options = input.required<ComboboxOption<T>[]>();\r\n  readonly value = model<T | null>(null);\r\n  readonly placeholder = input<string>();\r\n  readonly disabled = input(false);\r\n  readonly size = input<MfSize>('md');\r\n  readonly hasError = input(false);\r\n  readonly ariaLabel = input('');\r\n\r\n  private onChange: (value: T | null) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  protected readonly comboboxLabels = inject(MF_COMBOBOX_LABELS);\r\n  protected readonly effectivePlaceholder = computed(\r\n    () => this.placeholder() ?? this.comboboxLabels().placeholder,\r\n  );\r\n\r\n  protected readonly open = signal(false);\r\n  protected readonly query = signal('');\r\n  protected readonly highlighted = signal(0);\r\n\r\n  protected readonly triggerClasses = computed(() =>\r\n    cn(comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() })),\r\n  );\r\n  /** ARIA 1.2 combobox deseni: input'un `aria-controls`'ü panel listbox'ına işaret etmeli. */\r\n  protected readonly listboxId = `mf-combobox-listbox-${++comboboxIdSeq}`;\r\n\r\n  protected readonly selectedLabel = computed(\r\n    () => this.options().find((o) => o.value === this.value())?.label ?? '',\r\n  );\r\n\r\n  protected readonly filteredOptions = computed(() => {\r\n    const q = this.query().trim().toLowerCase();\r\n    if (!q) return this.options();\r\n    return this.options().filter((o) => o.label.toLowerCase().includes(q));\r\n  });\r\n\r\n  writeValue(value: T | null): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: (value: T | null) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  protected onFocus(): void {\r\n    if (this.disabled()) return;\r\n    this.query.set('');\r\n    this.highlighted.set(0);\r\n    this.open.set(true);\r\n  }\r\n\r\n  protected onQueryInput(raw: string): void {\r\n    this.query.set(raw);\r\n    this.highlighted.set(0);\r\n    if (!this.open()) this.open.set(true);\r\n  }\r\n\r\n  protected select(option: ComboboxOption<T>): void {\r\n    this.value.set(option.value);\r\n    this.onChange(option.value);\r\n    this.close();\r\n  }\r\n\r\n  protected close(): void {\r\n    this.open.set(false);\r\n    this.query.set('');\r\n    this.onTouched();\r\n  }\r\n\r\n  protected isSelected(option: ComboboxOption<T>): boolean {\r\n    return option.value === this.value();\r\n  }\r\n\r\n  protected optionClasses(option: ComboboxOption<T>, index: number): string {\r\n    return cn(\r\n      comboboxOptionVariants({\r\n        highlighted: index === this.highlighted() && !this.isSelected(option),\r\n        selected: this.isSelected(option),\r\n      }),\r\n    );\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    const options = this.filteredOptions();\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.close();\r\n      return;\r\n    }\r\n    if (event.key === 'ArrowDown') {\r\n      event.preventDefault();\r\n      if (!this.open()) {\r\n        this.open.set(true);\r\n        return;\r\n      }\r\n      this.highlighted.update((i) => Math.min(options.length - 1, i + 1));\r\n      return;\r\n    }\r\n    if (event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      this.highlighted.update((i) => Math.max(0, i - 1));\r\n      return;\r\n    }\r\n    if (event.key === 'Enter') {\r\n      event.preventDefault();\r\n      const option = options[this.highlighted()];\r\n      if (option) this.select(option);\r\n    }\r\n  }\r\n}\r\n","<div class=\"relative\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\r\n  <input\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    [class]=\"triggerClasses()\"\r\n    [value]=\"open() ? query() : selectedLabel()\"\r\n    [placeholder]=\"effectivePlaceholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"listboxId\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onQueryInput($any($event.target).value)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (blur)=\"close()\"\r\n  />\r\n  <span\r\n    mfIcon\r\n    [size]=\"18\"\r\n    class=\"pointer-events-none absolute top-1/2 end-3 -translate-y-1/2 text-fg-subtle\"\r\n    >unfold_more</span\r\n  >\r\n</div>\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  [hasBackdrop]=\"false\"\r\n  [matchTriggerWidth]=\"true\"\r\n  (closed)=\"close()\"\r\n>\r\n  <ul [id]=\"listboxId\" role=\"listbox\" class=\"max-h-64 min-w-[8rem] text-sm\">\r\n    @for (option of filteredOptions(); track option.label; let i = $index) {\r\n      <!--\r\n        `role=\"option\"` satırları BİLEREK odaklanabilir değil — klavye gezinmesi\r\n        input'un `(keydown)` işleyicisinde (yukarıda) merkezi olarak yönetiliyor\r\n        (roving-highlight deseni); `(click)` yalnızca fare/dokunma için.\r\n      -->\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        (mousedown)=\"$event.preventDefault()\"\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    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ comboboxLabels().noResults }}</li>\r\n    }\r\n  </ul>\r\n</mf-popover>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}