@mesgflow/ui-kit 0.6.0 → 0.8.0

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

@@ -3,7 +3,7 @@ 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 { MF_COLOR_PICKER_LABELS, cn, focusRecipe } from '@mesgflow/ui-kit/core';
 import { Icon } from '@mesgflow/ui-kit/icon';
 import { Popover } from '@mesgflow/ui-kit/popover';
 
@@ -187,19 +187,21 @@ class ColorPicker {
         }
     }
     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 ' +
+        'hover:border-border-strong ' +
+        focusRecipe +
+        ' ' +
         (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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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"] }] });
+        ], 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-state-hover 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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" }]
+                    ], 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-state-hover 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 }] }] } });
 
 /**

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

@@ -1 +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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"}
+{"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, focusRecipe } 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 ' +\r\n        focusRecipe +\r\n        ' ' +\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-state-hover 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":";;;;;;;;;AAYM,SAAU,QAAQ,CAAC,GAAW,EAAA;IAClC,MAAM,KAAK,GAAG,2CAA2C,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;AAC1E,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;AACvB,IAAA,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;AAC5F;AAEM,SAAU,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAO,EAAA;IACvC,MAAM,KAAK,GAAG,CAAC,CAAS,KACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACrC,QAAQ,CAAC,EAAE;AACX,SAAA,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AACrB,IAAA,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE;AAC7C;AAEM,SAAU,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAO,EAAA;AACvC,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG;AAClB,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG;AAClB,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG;AAClB,IAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAChC,IAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAChC,IAAA,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG;IAEvB,IAAI,CAAC,GAAG,CAAC;AACT,IAAA,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,IAAI,GAAG,KAAK,EAAE;AAAE,YAAA,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC;aAC7C,IAAI,GAAG,KAAK,EAAE;AAAE,YAAA,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC;;AAChD,YAAA,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC;IACvC;IACA,IAAI,CAAC,GAAG,CAAC;QAAE,CAAC,IAAI,GAAG;AAEnB,IAAA,MAAM,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,IAAI,GAAG;AAC7C,IAAA,MAAM,CAAC,GAAG,GAAG,GAAG,GAAG;AAEnB,IAAA,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpB;AAEM,SAAU,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAO,EAAA;AACvC,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG;AAClB,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG;AAClB,IAAA,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE;IACjB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAEhB,IAAA,IAAI,EAAU;AACd,IAAA,IAAI,EAAU;AACd,IAAA,IAAI,EAAU;IACd,IAAI,CAAC,GAAG,EAAE;AAAE,QAAA,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SAC/B,IAAI,CAAC,GAAG,GAAG;AAAE,QAAA,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SACrC,IAAI,CAAC,GAAG,GAAG;AAAE,QAAA,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SACrC,IAAI,CAAC,GAAG,GAAG;AAAE,QAAA,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SACrC,IAAI,CAAC,GAAG,GAAG;AAAE,QAAA,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;;AACrC,QAAA,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAE7B,IAAA,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE;AACpE;;AClCA;;;;;;;AAOG;MAWU,WAAW,CAAA;;IAEb,KAAK,GAAG,KAAK,CAAC,SAAS;8EAAC;IACxB,OAAO,GAAG,KAAK,CAAW,EAAE;gFAAC;IAC7B,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;AACvB,IAAA,SAAS,GAAG,KAAK;6FAAU;AAE5B,IAAA,QAAQ,GAA4B,MAAK,EAAE,CAAC;AAC5C,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAErB,IAAA,iBAAiB,GAAG,MAAM,CAAC,sBAAsB,CAAC;AAClD,IAAA,kBAAkB,GAAG,QAAQ,CAC9C,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC,SAAS;2FAC7D;IAEkB,IAAI,GAAG,MAAM,CAAC,KAAK;6EAAC;IACpB,QAAQ,GAAG,MAAM,CAAC,EAAE;iFAAC;IAErB,MAAM,GAAG,SAAS,CAA0B,MAAM;+EAAC;IACnD,UAAU,GAAG,SAAS,CAA0B,UAAU;mFAAC;AAE3D,IAAA,GAAG,GAAG,QAAQ,CAAM,MACrC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;4EACzD;AAEkB,IAAA,cAAc,GAAG,QAAQ,CAC1C,MACE,CAAA,8FAAA,EAAiG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA,YAAA,CAAc;uFAC9H;IAEkB,kBAAkB,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,UAAU;AAE5F,IAAA,UAAU,CAAC,KAAa,EAAA;QACtB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC;IACpC;AAEA,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;IAEU,MAAM,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QACrB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7B;IAEU,KAAK,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,SAAS,EAAE;IAClB;AAEQ,IAAA,MAAM,CAAC,IAAkB,EAAA;AAC/B,QAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;AAC1D,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpB;AAEU,IAAA,iBAAiB,CAAC,KAAmB,EAAA;QAC5C,KAAK,CAAC,aAA6B,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AACvE,QAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;IACnC;AAEU,IAAA,iBAAiB,CAAC,KAAmB,EAAA;AAC7C,QAAA,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC;YAAE;AACzB,QAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;IACnC;AAEQ,IAAA,qBAAqB,CAAC,KAAmB,EAAA;QAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;AACjE,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC;AACtF,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;QAC5F,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IACvB;AAEU,IAAA,gBAAgB,CAAC,KAAmB,EAAA;QAC3C,KAAK,CAAC,aAA6B,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AACvE,QAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;IAClC;AAEU,IAAA,gBAAgB,CAAC,KAAmB,EAAA;AAC5C,QAAA,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC;YAAE;AACzB,QAAA,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;IAClC;AAEQ,IAAA,oBAAoB,CAAC,KAAmB,EAAA;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa,CAAC,qBAAqB,EAAE;AACrE,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC;AACtF,QAAA,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;IACpB;AAEU,IAAA,UAAU,CAAC,GAAW,EAAA;AAC9B,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;AACtB,QAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;QACzB,IAAI,GAAG,EAAE;AACP,YAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;QACpB;IACF;AAEU,IAAA,kBAAkB,CAAC,GAAW,EAAA;AACtC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpB;AAEU,IAAA,MAAM,kBAAkB,GAAA;QAChC,IAAI,CAAC,MAAM,CAAC,UAAU;YAAE;AACxB,QAAA,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE;YACnD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;YAC9B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;AACjC,YAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;QAC/B;AAAE,QAAA,MAAM;;QAER;IACF;IAEmB,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,oKAAoK;QAClK,6BAA6B;QAC7B,WAAW;QACX,GAAG;AACH,SAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,mDAAmD,GAAG,gBAAgB,CAAC,CAC7F;gFACF;uGArIU,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAJX;AACT,YAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AACxF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChDH,wnGAiFA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDrCY,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,4DAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,qFAAE,OAAO,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,WAAA,EAAA,SAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAM3B,WAAW,EAAA,UAAA,EAAA,CAAA;kBAVvB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,YACjB,eAAe,EAAA,IAAA,EACnB,EAAE,KAAK,EAAE,aAAa,EAAE,EAAA,OAAA,EACrB,CAAC,aAAa,EAAE,IAAI,EAAE,OAAO,CAAC,EAAA,SAAA,EAE5B;AACT,wBAAA,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE;AACxF,qBAAA,EAAA,QAAA,EAAA,wnGAAA,EAAA;AAoB8D,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,MAAM,oEACF,UAAU,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErE/E;;AAEG;;"}

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

@@ -1,9 +1,9 @@
 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 { input, model, booleanAttribute, output, inject, computed, viewChild, signal, forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MF_COMBOBOX_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { focusRecipe, MF_COMBOBOX_LABELS, nextId, 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';
@@ -12,7 +12,9 @@ import { cva } from 'class-variance-authority';
 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 ' +
+    'focus:border-accent ' +
+    focusRecipe +
+    ' ' +
     'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:hover:border-border', {
     variants: {
         size: {
@@ -30,7 +32,7 @@ const comboboxTriggerVariants = cva('w-full rounded-md border border-border bg-s
 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',
+            true: 'bg-state-hover text-fg',
             false: '',
         },
         selected: {
@@ -41,63 +43,94 @@ const comboboxOptionVariants = cva('flex cursor-pointer items-center justify-bet
     defaultVariants: { highlighted: false, selected: false },
 });
 
-let comboboxIdSeq = 0;
 /**
- * `<mf-combobox [options]="opts" [(value)]="chosen" placeholder="Ara..." />`
+ * `<mf-combobox [options]="opts" [(value)]="chosen" />` — filtrelenebilir tekli seçim.
+ * `<mf-combobox multiple [options]="opts" [(values)]="tags" creatable (create)="add($event)" />`
+ * — çoklu seçim (çipler), isteğe bağlı "oluştur" satırı.
  *
- * `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.
+ * ARIA 1.2 combobox deseni: input `role="combobox"` + `aria-controls` (listbox)
+ * + `aria-activedescendant` (vurgulanan satır; odak input'ta kalır). Çoklu
+ * modda listbox `aria-multiselectable`, seçim sonrası panel AÇIK kalır ve
+ * sorgu temizlenir; boş sorguda Backspace son çipi kaldırır.
  *
- * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU —
- * aksi halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır
- * (klasik combobox tuzağı).
+ * `(mousedown)="$event.preventDefault()"` seçenek satırında ZORUNLU — aksi
+ * halde input'un `blur`'ı `click`'ten ÖNCE tetiklenip paneli kapatır.
  */
 class Combobox {
     options = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Çoklu modda seçili değerler. */
+    values = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Sorgu hiçbir etiketle birebir eşleşmezse listenin sonunda "oluştur" satırı. */
+    creatable = input(false, { ...(ngDevMode ? { debugName: "creatable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     placeholder = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    hasError = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Harici `<label for>` / `mf-field for` için input id'si. */
+    inputId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /** "Oluştur" satırı seçildi — tüketici seçeneği ekleyip seçer. */
+    create = output();
     onChange = () => { };
     onTouched = () => { };
-    comboboxLabels = inject(MF_COMBOBOX_LABELS);
-    effectivePlaceholder = computed(() => this.placeholder() ?? this.comboboxLabels().placeholder, /* @ts-ignore */
+    labels = inject(MF_COMBOBOX_LABELS);
+    effectivePlaceholder = computed(() => this.placeholder() ?? this.labels().placeholder, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* 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 */
+    listboxId = nextId('mf-combobox-listbox');
+    optionIdPrefix = nextId('mf-combobox-option');
+    triggerClasses = computed(() => cn(comboboxTriggerVariants({ size: this.size(), hasError: this.hasError() }), this.multiple() && 'flex flex-wrap items-center gap-1 cursor-text focus-within:border-accent'), /* @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));
+    selectedOptions = computed(() => {
+        const values = this.values();
+        return values
+            .map((v) => this.options().find((o) => o.value === v))
+            .filter((o) => !!o);
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const q = this.query().trim().toLocaleLowerCase();
+        const matches = !q
+            ? this.options()
+            : this.options().filter((o) => `${o.label} ${o.description ?? ''}`.toLocaleLowerCase().includes(q));
+        const rows = matches.map((option) => ({ kind: 'option', option }));
+        const exact = this.options().some((o) => o.label.toLocaleLowerCase() === q);
+        if (this.creatable() && q && !exact)
+            rows.push({ kind: 'create', query: this.query().trim() });
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    activeDescendant = computed(() => this.open() && this.rows().length ? `${this.optionIdPrefix}-${this.highlighted()}` : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    createLabel(query) {
+        return this.labels().create.replace('{query}', query);
+    }
+    removeLabel(label) {
+        return this.labels().remove.replace('{label}', label);
+    }
     writeValue(value) {
-        this.value.set(value);
+        if (this.multiple())
+            this.values.set(Array.isArray(value) ? value : []);
+        else
+            this.value.set(value ?? null);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -112,66 +145,113 @@ class Combobox {
         this.highlighted.set(0);
         this.open.set(true);
     }
+    focusInput() {
+        this.inputEl()?.nativeElement.focus();
+    }
     onQueryInput(raw) {
         this.query.set(raw);
         this.highlighted.set(0);
         if (!this.open())
             this.open.set(true);
     }
-    select(option) {
+    choose(row) {
+        if (row.kind === 'create') {
+            this.create.emit(row.query);
+            this.query.set('');
+            if (!this.multiple())
+                this.close();
+            return;
+        }
+        const option = row.option;
+        if (option.disabled)
+            return;
+        if (this.multiple()) {
+            const values = this.values();
+            const next = values.includes(option.value)
+                ? values.filter((v) => v !== option.value)
+                : [...values, option.value];
+            this.values.set(next);
+            this.onChange(next);
+            this.query.set('');
+            this.focusInput();
+            return;
+        }
         this.value.set(option.value);
         this.onChange(option.value);
         this.close();
     }
+    removeValue(value) {
+        const next = this.values().filter((v) => v !== value);
+        this.values.set(next);
+        this.onChange(next);
+        this.focusInput();
+    }
     close() {
         this.open.set(false);
         this.query.set('');
         this.onTouched();
     }
     isSelected(option) {
-        return option.value === this.value();
+        return this.multiple() ? this.values().includes(option.value) : option.value === this.value();
     }
-    optionClasses(option, index) {
-        return cn(comboboxOptionVariants({
-            highlighted: index === this.highlighted() && !this.isSelected(option),
-            selected: this.isSelected(option),
-        }));
+    rowClasses(row, index) {
+        const selected = row.kind === 'option' && this.isSelected(row.option);
+        return cn(comboboxOptionVariants({ highlighted: index === this.highlighted() && !selected, selected }), row.kind === 'option' && row.option.disabled && 'pointer-events-none opacity-50', selected && index === this.highlighted() && 'outline-1 -outline-offset-1 outline-accent/40');
     }
     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);
+        const rows = this.rows();
+        switch (event.key) {
+            case 'Escape':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                return;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.open()) {
+                    this.open.set(true);
+                    return;
+                }
+                this.highlighted.update((i) => Math.min(rows.length - 1, i + 1));
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlighted.update((i) => Math.max(0, i - 1));
+                return;
+            case 'Home':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.highlighted.set(0);
+                }
+                return;
+            case 'End':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.highlighted.set(Math.max(0, rows.length - 1));
+                }
+                return;
+            case 'Enter': {
+                event.preventDefault();
+                const row = rows[this.highlighted()];
+                if (row)
+                    this.choose(row);
                 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);
+            case 'Backspace':
+                if (this.multiple() && !this.query() && this.values().length) {
+                    this.removeValue(this.values()[this.values().length - 1]);
+                }
+                return;
         }
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Combobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", create: "create" }, host: { classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["mfCombobox"], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : 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    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\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\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\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        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", 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 }] }] } });
+            args: [{ selector: 'mf-combobox', exportAs: 'mfCombobox', host: { class: 'block' }, imports: [OverlayModule, Icon, Popover], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Combobox), multi: true }], template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n<div\r\n  class=\"relative\"\r\n  cdkOverlayOrigin\r\n  #origin=\"cdkOverlayOrigin\"\r\n  [class]=\"multiple() ? triggerClasses() : ''\"\r\n  (click)=\"multiple() && focusInput()\"\r\n>\r\n  @if (multiple()) {\r\n    @for (option of selectedOptions(); track option.label) {\r\n      <span\r\n        class=\"inline-flex max-w-full items-center gap-1 rounded-sm bg-primary-tint py-0.5 ps-2 pe-1 text-xs font-medium text-primary-tint-fg animate-pop\"\r\n      >\r\n        <span class=\"truncate\">{{ option.label }}</span>\r\n        <button\r\n          type=\"button\"\r\n          tabindex=\"-1\"\r\n          class=\"flex h-4 w-4 items-center justify-center rounded-xs text-primary-tint-fg/70 hover:bg-state-hover hover:text-primary-tint-fg\"\r\n          [attr.aria-label]=\"removeLabel(option.label)\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"$event.stopPropagation(); removeValue(option.value)\"\r\n        >\r\n          <span mfIcon [size]=\"12\">close</span>\r\n        </button>\r\n      </span>\r\n    }\r\n  }\r\n  <input\r\n    #inputEl\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    aria-autocomplete=\"list\"\r\n    autocomplete=\"off\"\r\n    [attr.id]=\"inputId() || null\"\r\n    [class]=\"\r\n      multiple()\r\n        ? 'min-w-24 flex-1 border-0 bg-transparent p-0 text-sm text-fg outline-none placeholder:text-fg-subtle'\r\n        : triggerClasses()\r\n    \"\r\n    [value]=\"open() || multiple() ? query() : selectedLabel()\"\r\n    [placeholder]=\"multiple() && selectedOptions().length ? '' : 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    [attr.aria-activedescendant]=\"activeDescendant()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\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\r\n    [id]=\"listboxId\"\r\n    role=\"listbox\"\r\n    [attr.aria-multiselectable]=\"multiple() || null\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    class=\"max-h-64 min-w-[8rem] overflow-y-auto text-sm\"\r\n  >\r\n    @for (row of rows(); track $index; let i = $index) {\r\n      <!--\r\n        Sat\u0131rlar B\u0130LEREK odaklanabilir de\u011Fil \u2014 odak input'ta kal\u0131r, vurgulanan\r\n        sat\u0131r aria-activedescendant ile duyurulur.\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        [id]=\"optionIdPrefix + '-' + i\"\r\n        [attr.aria-selected]=\"row.kind === 'option' ? isSelected(row.option) : false\"\r\n        [attr.aria-disabled]=\"(row.kind === 'option' && row.option.disabled) || null\"\r\n        [class]=\"rowClasses(row, i)\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (mouseenter)=\"highlighted.set(i)\"\r\n        (click)=\"choose(row)\"\r\n      >\r\n        @if (row.kind === 'option') {\r\n          <span class=\"min-w-0\">\r\n            <span class=\"block truncate\">{{ row.option.label }}</span>\r\n            @if (row.option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{\r\n                row.option.description\r\n              }}</span>\r\n            }\r\n          </span>\r\n          @if (isSelected(row.option)) {\r\n            <span mfIcon [size]=\"16\" class=\"shrink-0\">check</span>\r\n          }\r\n        } @else {\r\n          <span class=\"flex items-center gap-2 text-accent\">\r\n            <span mfIcon [size]=\"16\">add</span>\r\n            <span class=\"truncate\">{{ createLabel(row.query) }}</span>\r\n          </span>\r\n        }\r\n      </li>\r\n    } @empty {\r\n      <li class=\"px-2.5 py-3 text-center text-fg-subtle\">{{ labels().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"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", 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 }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], create: [{ type: i0.Output, args: ["create"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.