@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -0,0 +1,299 @@
+import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, Component, Service, input, Directive } from '@angular/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { MF_LIGHTBOX_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+
+/** Görüntüleyici paneli — `LightboxService.open()` açar. */
+class LightboxViewer {
+    ref = inject(DialogRef);
+    data = inject(DIALOG_DATA);
+    labels = inject(MF_LIGHTBOX_LABELS);
+    images = signal(this.data.images, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+    index = signal(this.data.index, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    zoom = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.images()[this.index()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    counter = computed(() => this.labels()
+        .counter.replace('{index}', String(this.index() + 1))
+        .replace('{total}', String(this.images().length)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
+    step(delta) {
+        const n = this.images().length;
+        const rtl = document.documentElement.dir === 'rtl';
+        this.go((this.index() + (rtl ? -delta : delta) + n) % n);
+    }
+    go(i) {
+        this.index.set(i);
+        this.zoom.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LightboxViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: LightboxViewer, isStandalone: true, selector: "mf-lightbox-viewer", host: { listeners: { "keydown.arrowleft": "step(-1)", "keydown.arrowright": "step(1)", "keydown.+": "zoom.set(true)", "keydown.-": "zoom.set(false)" }, classAttribute: "flex h-dvh w-screen flex-col text-white animate-fade-in" }, ngImport: i0, template: `
+    <header class="flex items-center justify-between gap-3 px-4 py-3">
+      <p class="text-sm text-white/80 tabular-nums" aria-live="polite">{{ counter() }}</p>
+      <div class="flex items-center gap-1">
+        <button
+          mfButton
+          size="icon"
+          shape="square"
+          appearance="ghost"
+          tone="neutral"
+          class="text-white hover:bg-white/10"
+          [attr.aria-label]="zoom() ? labels().zoomOut : labels().zoomIn"
+          (click)="zoom.set(!zoom())"
+        >
+          <span mfIcon [size]="20">{{ zoom() ? 'zoom_out' : 'zoom_in' }}</span>
+        </button>
+        <button
+          mfButton
+          size="icon"
+          shape="square"
+          appearance="ghost"
+          tone="neutral"
+          class="text-white hover:bg-white/10"
+          [attr.aria-label]="labels().close"
+          (click)="ref.close()"
+        >
+          <span mfIcon [size]="20">close</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="relative flex min-h-0 flex-1 items-center justify-center overflow-auto px-14">
+      @if (images().length > 1) {
+        <button
+          mfButton
+          size="icon-lg"
+          appearance="soft"
+          tone="neutral"
+          class="absolute start-3 top-1/2 z-[1] -translate-y-1/2 bg-white/10 text-white backdrop-blur hover:bg-white/20"
+          [attr.aria-label]="labels().previous"
+          (click)="step(-1)"
+        >
+          <span mfIcon [size]="22" class="rtl:-scale-x-100">chevron_left</span>
+        </button>
+      }
+      @if (current(); as img) {
+        <!-- Fare kısayolu: aynı eylem araç çubuğundaki yakınlaştırma düğmesinde ve +/- tuşlarında. -->
+        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+        <img
+          [src]="img.src"
+          [alt]="img.alt"
+          class="max-h-full select-none object-contain transition-transform duration-slow ease-emphasis animate-overlay-in"
+          [class]="zoom() ? 'max-w-none scale-150 cursor-zoom-out' : 'max-w-full cursor-zoom-in'"
+          (click)="zoom.set(!zoom())"
+        />
+      }
+      @if (images().length > 1) {
+        <button
+          mfButton
+          size="icon-lg"
+          appearance="soft"
+          tone="neutral"
+          class="absolute end-3 top-1/2 z-[1] -translate-y-1/2 bg-white/10 text-white backdrop-blur hover:bg-white/20"
+          [attr.aria-label]="labels().next"
+          (click)="step(1)"
+        >
+          <span mfIcon [size]="22" class="rtl:-scale-x-100">chevron_right</span>
+        </button>
+      }
+    </div>
+
+    <footer class="flex flex-col items-center gap-3 px-4 py-3">
+      @if (current().caption) {
+        <p class="max-w-2xl text-center text-sm text-white/85">{{ current().caption }}</p>
+      }
+      @if (images().length > 1) {
+        <div class="flex max-w-full gap-2 overflow-x-auto p-1">
+          @for (img of images(); track $index; let i = $index) {
+            <button
+              type="button"
+              class="h-14 w-20 shrink-0 overflow-hidden rounded-md opacity-60 ring-2 ring-transparent transition-[opacity,box-shadow] hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              [class.opacity-100]="i === index()"
+              [class.ring-white]="i === index()"
+              [attr.aria-label]="img.alt"
+              [attr.aria-current]="i === index() || null"
+              (click)="go(i)"
+            >
+              <img [src]="img.thumb ?? img.src" alt="" class="h-full w-full object-cover" />
+            </button>
+          }
+        </div>
+      }
+    </footer>
+  `, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LightboxViewer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-lightbox-viewer',
+                    imports: [Button, Icon],
+                    host: {
+                        class: 'flex h-dvh w-screen flex-col text-white animate-fade-in',
+                        '(keydown.arrowleft)': 'step(-1)',
+                        '(keydown.arrowright)': 'step(1)',
+                        '(keydown.+)': 'zoom.set(true)',
+                        '(keydown.-)': 'zoom.set(false)',
+                    },
+                    template: `
+    <header class="flex items-center justify-between gap-3 px-4 py-3">
+      <p class="text-sm text-white/80 tabular-nums" aria-live="polite">{{ counter() }}</p>
+      <div class="flex items-center gap-1">
+        <button
+          mfButton
+          size="icon"
+          shape="square"
+          appearance="ghost"
+          tone="neutral"
+          class="text-white hover:bg-white/10"
+          [attr.aria-label]="zoom() ? labels().zoomOut : labels().zoomIn"
+          (click)="zoom.set(!zoom())"
+        >
+          <span mfIcon [size]="20">{{ zoom() ? 'zoom_out' : 'zoom_in' }}</span>
+        </button>
+        <button
+          mfButton
+          size="icon"
+          shape="square"
+          appearance="ghost"
+          tone="neutral"
+          class="text-white hover:bg-white/10"
+          [attr.aria-label]="labels().close"
+          (click)="ref.close()"
+        >
+          <span mfIcon [size]="20">close</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="relative flex min-h-0 flex-1 items-center justify-center overflow-auto px-14">
+      @if (images().length > 1) {
+        <button
+          mfButton
+          size="icon-lg"
+          appearance="soft"
+          tone="neutral"
+          class="absolute start-3 top-1/2 z-[1] -translate-y-1/2 bg-white/10 text-white backdrop-blur hover:bg-white/20"
+          [attr.aria-label]="labels().previous"
+          (click)="step(-1)"
+        >
+          <span mfIcon [size]="22" class="rtl:-scale-x-100">chevron_left</span>
+        </button>
+      }
+      @if (current(); as img) {
+        <!-- Fare kısayolu: aynı eylem araç çubuğundaki yakınlaştırma düğmesinde ve +/- tuşlarında. -->
+        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+        <img
+          [src]="img.src"
+          [alt]="img.alt"
+          class="max-h-full select-none object-contain transition-transform duration-slow ease-emphasis animate-overlay-in"
+          [class]="zoom() ? 'max-w-none scale-150 cursor-zoom-out' : 'max-w-full cursor-zoom-in'"
+          (click)="zoom.set(!zoom())"
+        />
+      }
+      @if (images().length > 1) {
+        <button
+          mfButton
+          size="icon-lg"
+          appearance="soft"
+          tone="neutral"
+          class="absolute end-3 top-1/2 z-[1] -translate-y-1/2 bg-white/10 text-white backdrop-blur hover:bg-white/20"
+          [attr.aria-label]="labels().next"
+          (click)="step(1)"
+        >
+          <span mfIcon [size]="22" class="rtl:-scale-x-100">chevron_right</span>
+        </button>
+      }
+    </div>
+
+    <footer class="flex flex-col items-center gap-3 px-4 py-3">
+      @if (current().caption) {
+        <p class="max-w-2xl text-center text-sm text-white/85">{{ current().caption }}</p>
+      }
+      @if (images().length > 1) {
+        <div class="flex max-w-full gap-2 overflow-x-auto p-1">
+          @for (img of images(); track $index; let i = $index) {
+            <button
+              type="button"
+              class="h-14 w-20 shrink-0 overflow-hidden rounded-md opacity-60 ring-2 ring-transparent transition-[opacity,box-shadow] hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              [class.opacity-100]="i === index()"
+              [class.ring-white]="i === index()"
+              [attr.aria-label]="img.alt"
+              [attr.aria-current]="i === index() || null"
+              (click)="go(i)"
+            >
+              <img [src]="img.thumb ?? img.src" alt="" class="h-full w-full object-cover" />
+            </button>
+          }
+        </div>
+      }
+    </footer>
+  `,
+                }]
+        }] });
+/**
+ * `inject(LightboxService).open(images, 2)` — tam ekran görsel görüntüleyici.
+ * CDK Dialog üstünde: odak tuzağı + geri dönüş, Escape, `aria-modal`, koyu
+ * cam arka plan. ←/→ gezinir, +/− yakınlaştırır, küçük resim şeridi.
+ */
+class LightboxService {
+    dialog = inject(Dialog);
+    labels = inject(MF_LIGHTBOX_LABELS);
+    open(images, index = 0) {
+        return this.dialog.open(LightboxViewer, {
+            data: { images, index },
+            ariaLabel: this.labels().gallery,
+            backdropClass: 'mf-lightbox-backdrop',
+            panelClass: 'mf-lightbox-panel',
+            autoFocus: 'dialog',
+            restoreFocus: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LightboxService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: LightboxService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LightboxService, decorators: [{
+            type: Service
+        }] });
+/**
+ * `<img mfLightbox [mfLightboxGroup]="gallery" [mfLightboxIndex]="i" …>` —
+ * tıklanınca (ve Enter/Boşluk ile) grubu o görselden açar. Görsel
+ * odaklanabilir bir `button` rolü alır.
+ */
+class LightboxTrigger {
+    mfLightboxGroup = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfLightboxGroup" }] : /* istanbul ignore next */ []));
+    mfLightboxIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfLightboxIndex" }] : /* istanbul ignore next */ []));
+    service = inject(LightboxService);
+    open() {
+        this.service.open(this.mfLightboxGroup(), this.mfLightboxIndex());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LightboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: LightboxTrigger, isStandalone: true, selector: "[mfLightbox]", inputs: { mfLightboxGroup: { classPropertyName: "mfLightboxGroup", publicName: "mfLightboxGroup", isSignal: true, isRequired: true, transformFunction: null }, mfLightboxIndex: { classPropertyName: "mfLightboxIndex", publicName: "mfLightboxIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "click": "open()", "keydown.enter": "open()", "keydown.space": "$event.preventDefault(); open()" }, classAttribute: "cursor-zoom-in" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LightboxTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfLightbox]',
+                    host: {
+                        role: 'button',
+                        tabindex: '0',
+                        class: 'cursor-zoom-in',
+                        '(click)': 'open()',
+                        '(keydown.enter)': 'open()',
+                        '(keydown.space)': '$event.preventDefault(); open()',
+                    },
+                }]
+        }], propDecorators: { mfLightboxGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfLightboxGroup", required: true }] }], mfLightboxIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfLightboxIndex", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LightboxService, LightboxTrigger, LightboxViewer };
+//# sourceMappingURL=mesgflow-ui-kit-lightbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-lightbox.mjs","sources":["../../../projects/ui-kit/lightbox/lightbox.ts","../../../projects/ui-kit/lightbox/mesgflow-ui-kit-lightbox.ts"],"sourcesContent":["import { DIALOG_DATA, Dialog, DialogRef } from '@angular/cdk/dialog';\r\nimport { Component, Directive, Service, computed, inject, input, signal } from '@angular/core';\r\nimport { Button } from '@mesgflow/ui-kit/button';\r\nimport { MF_LIGHTBOX_LABELS } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\n\r\nexport interface LightboxImage {\r\n  src: string;\r\n  alt: string;\r\n  caption?: string;\r\n  /** Küçük resim şeridi için (verilmezse `src`). */\r\n  thumb?: string;\r\n}\r\n\r\ninterface LightboxData {\r\n  images: readonly LightboxImage[];\r\n  index: number;\r\n}\r\n\r\n/** Görüntüleyici paneli — `LightboxService.open()` açar. */\r\n@Component({\r\n  selector: 'mf-lightbox-viewer',\r\n  imports: [Button, Icon],\r\n  host: {\r\n    class: 'flex h-dvh w-screen flex-col text-white animate-fade-in',\r\n    '(keydown.arrowleft)': 'step(-1)',\r\n    '(keydown.arrowright)': 'step(1)',\r\n    '(keydown.+)': 'zoom.set(true)',\r\n    '(keydown.-)': 'zoom.set(false)',\r\n  },\r\n  template: `\r\n    <header class=\"flex items-center justify-between gap-3 px-4 py-3\">\r\n      <p class=\"text-sm text-white/80 tabular-nums\" aria-live=\"polite\">{{ counter() }}</p>\r\n      <div class=\"flex items-center gap-1\">\r\n        <button\r\n          mfButton\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          appearance=\"ghost\"\r\n          tone=\"neutral\"\r\n          class=\"text-white hover:bg-white/10\"\r\n          [attr.aria-label]=\"zoom() ? labels().zoomOut : labels().zoomIn\"\r\n          (click)=\"zoom.set(!zoom())\"\r\n        >\r\n          <span mfIcon [size]=\"20\">{{ zoom() ? 'zoom_out' : 'zoom_in' }}</span>\r\n        </button>\r\n        <button\r\n          mfButton\r\n          size=\"icon\"\r\n          shape=\"square\"\r\n          appearance=\"ghost\"\r\n          tone=\"neutral\"\r\n          class=\"text-white hover:bg-white/10\"\r\n          [attr.aria-label]=\"labels().close\"\r\n          (click)=\"ref.close()\"\r\n        >\r\n          <span mfIcon [size]=\"20\">close</span>\r\n        </button>\r\n      </div>\r\n    </header>\r\n\r\n    <div class=\"relative flex min-h-0 flex-1 items-center justify-center overflow-auto px-14\">\r\n      @if (images().length > 1) {\r\n        <button\r\n          mfButton\r\n          size=\"icon-lg\"\r\n          appearance=\"soft\"\r\n          tone=\"neutral\"\r\n          class=\"absolute start-3 top-1/2 z-[1] -translate-y-1/2 bg-white/10 text-white backdrop-blur hover:bg-white/20\"\r\n          [attr.aria-label]=\"labels().previous\"\r\n          (click)=\"step(-1)\"\r\n        >\r\n          <span mfIcon [size]=\"22\" class=\"rtl:-scale-x-100\">chevron_left</span>\r\n        </button>\r\n      }\r\n      @if (current(); as img) {\r\n        <!-- Fare kısayolu: aynı eylem araç çubuğundaki yakınlaştırma düğmesinde ve +/- tuşlarında. -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n        <img\r\n          [src]=\"img.src\"\r\n          [alt]=\"img.alt\"\r\n          class=\"max-h-full select-none object-contain transition-transform duration-slow ease-emphasis animate-overlay-in\"\r\n          [class]=\"zoom() ? 'max-w-none scale-150 cursor-zoom-out' : 'max-w-full cursor-zoom-in'\"\r\n          (click)=\"zoom.set(!zoom())\"\r\n        />\r\n      }\r\n      @if (images().length > 1) {\r\n        <button\r\n          mfButton\r\n          size=\"icon-lg\"\r\n          appearance=\"soft\"\r\n          tone=\"neutral\"\r\n          class=\"absolute end-3 top-1/2 z-[1] -translate-y-1/2 bg-white/10 text-white backdrop-blur hover:bg-white/20\"\r\n          [attr.aria-label]=\"labels().next\"\r\n          (click)=\"step(1)\"\r\n        >\r\n          <span mfIcon [size]=\"22\" class=\"rtl:-scale-x-100\">chevron_right</span>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <footer class=\"flex flex-col items-center gap-3 px-4 py-3\">\r\n      @if (current().caption) {\r\n        <p class=\"max-w-2xl text-center text-sm text-white/85\">{{ current().caption }}</p>\r\n      }\r\n      @if (images().length > 1) {\r\n        <div class=\"flex max-w-full gap-2 overflow-x-auto p-1\">\r\n          @for (img of images(); track $index; let i = $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"h-14 w-20 shrink-0 overflow-hidden rounded-md opacity-60 ring-2 ring-transparent transition-[opacity,box-shadow] hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white\"\r\n              [class.opacity-100]=\"i === index()\"\r\n              [class.ring-white]=\"i === index()\"\r\n              [attr.aria-label]=\"img.alt\"\r\n              [attr.aria-current]=\"i === index() || null\"\r\n              (click)=\"go(i)\"\r\n            >\r\n              <img [src]=\"img.thumb ?? img.src\" alt=\"\" class=\"h-full w-full object-cover\" />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </footer>\r\n  `,\r\n})\r\nexport class LightboxViewer {\r\n  protected readonly ref = inject(DialogRef);\r\n  private readonly data = inject<LightboxData>(DIALOG_DATA);\r\n  protected readonly labels = inject(MF_LIGHTBOX_LABELS);\r\n\r\n  protected readonly images = signal(this.data.images);\r\n  protected readonly index = signal(this.data.index);\r\n  protected readonly zoom = signal(false);\r\n  protected readonly current = computed(() => this.images()[this.index()]);\r\n  protected readonly counter = computed(() =>\r\n    this.labels()\r\n      .counter.replace('{index}', String(this.index() + 1))\r\n      .replace('{total}', String(this.images().length)),\r\n  );\r\n\r\n  protected step(delta: number): void {\r\n    const n = this.images().length;\r\n    const rtl = document.documentElement.dir === 'rtl';\r\n    this.go((this.index() + (rtl ? -delta : delta) + n) % n);\r\n  }\r\n\r\n  protected go(i: number): void {\r\n    this.index.set(i);\r\n    this.zoom.set(false);\r\n  }\r\n}\r\n\r\n/**\r\n * `inject(LightboxService).open(images, 2)` — tam ekran görsel görüntüleyici.\r\n * CDK Dialog üstünde: odak tuzağı + geri dönüş, Escape, `aria-modal`, koyu\r\n * cam arka plan. ←/→ gezinir, +/− yakınlaştırır, küçük resim şeridi.\r\n */\r\n@Service()\r\nexport class LightboxService {\r\n  private readonly dialog = inject(Dialog);\r\n  private readonly labels = inject(MF_LIGHTBOX_LABELS);\r\n\r\n  open(images: readonly LightboxImage[], index = 0): DialogRef<unknown, LightboxViewer> {\r\n    return this.dialog.open<unknown, LightboxData, LightboxViewer>(LightboxViewer, {\r\n      data: { images, index },\r\n      ariaLabel: this.labels().gallery,\r\n      backdropClass: 'mf-lightbox-backdrop',\r\n      panelClass: 'mf-lightbox-panel',\r\n      autoFocus: 'dialog',\r\n      restoreFocus: true,\r\n    });\r\n  }\r\n}\r\n\r\n/**\r\n * `<img mfLightbox [mfLightboxGroup]=\"gallery\" [mfLightboxIndex]=\"i\" …>` —\r\n * tıklanınca (ve Enter/Boşluk ile) grubu o görselden açar. Görsel\r\n * odaklanabilir bir `button` rolü alır.\r\n */\r\n@Directive({\r\n  selector: '[mfLightbox]',\r\n  host: {\r\n    role: 'button',\r\n    tabindex: '0',\r\n    class: 'cursor-zoom-in',\r\n    '(click)': 'open()',\r\n    '(keydown.enter)': 'open()',\r\n    '(keydown.space)': '$event.preventDefault(); open()',\r\n  },\r\n})\r\nexport class LightboxTrigger {\r\n  readonly mfLightboxGroup = input.required<readonly LightboxImage[]>();\r\n  readonly mfLightboxIndex = input(0);\r\n  private readonly service = inject(LightboxService);\r\n\r\n  open(): void {\r\n    this.service.open(this.mfLightboxGroup(), this.mfLightboxIndex());\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, Directive } from '@angular/core';
-import { cn } from '@mesgflow/ui-kit/core';
+import { cn, focusRecipe } from '@mesgflow/ui-kit/core';
 
 const TONE_CLASSES = {
     neutral: 'text-fg-muted hover:text-fg',
@@ -27,7 +27,7 @@ class Link {
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     underline = input('hover', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "underline" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('transition-colors duration-fast ease-emphasis focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring', TONE_CLASSES[this.tone()], UNDERLINE_CLASSES[this.underline()]), /* @ts-ignore */
+    classes = computed(() => cn('transition-colors duration-fast ease-emphasis ' + focusRecipe, TONE_CLASSES[this.tone()], UNDERLINE_CLASSES[this.underline()]), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Link, isStandalone: true, selector: "a[mfLink]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });

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

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-link.mjs","sources":["../../../projects/ui-kit/link/link.ts","../../../projects/ui-kit/link/mesgflow-ui-kit-link.ts"],"sourcesContent":["import { Directive, computed, input } from '@angular/core';\r\nimport { cn, type MfTone } from '@mesgflow/ui-kit/core';\r\n\r\nexport type LinkUnderline = 'always' | 'hover' | 'none';\r\n\r\nconst TONE_CLASSES: Record<MfTone, string> = {\r\n  neutral: 'text-fg-muted hover:text-fg',\r\n  primary: 'text-accent hover:text-accent-strong',\r\n  success: 'text-success',\r\n  warning: 'text-warning',\r\n  danger: 'text-danger',\r\n  info: 'text-info',\r\n  help: 'text-help',\r\n};\r\n\r\nconst UNDERLINE_CLASSES: Record<LinkUnderline, string> = {\r\n  always: 'underline underline-offset-2',\r\n  hover: 'no-underline underline-offset-2 hover:underline',\r\n  none: 'no-underline',\r\n};\r\n\r\n/**\r\n * `<a mfLink href=\"/ayarlar\">Ayarlar</a>` — düz metin içine gömülü bağlantılar\r\n * için (ör. \"Zaten hesabınız var mı? Giriş yapın\"). Navigasyon bağlantıları\r\n * (sidebar, tabs, breadcrumb) KENDİ bileşenlerinin stilini taşır, bu\r\n * directive'i KULLANMAZ — `Link` SADECE metin akışı içindeki bağlantılar için.\r\n */\r\n@Directive({\r\n  selector: 'a[mfLink]',\r\n  host: { '[class]': 'classes()' },\r\n})\r\nexport class Link {\r\n  readonly tone = input<MfTone>('primary');\r\n  readonly underline = input<LinkUnderline>('hover');\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      'transition-colors duration-fast ease-emphasis focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',\r\n      TONE_CLASSES[this.tone()],\r\n      UNDERLINE_CLASSES[this.underline()],\r\n    ),\r\n  );\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,GAA2B;AAC3C,IAAA,OAAO,EAAE,6BAA6B;AACtC,IAAA,OAAO,EAAE,sCAAsC;AAC/C,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,IAAI,EAAE,WAAW;CAClB;AAED,MAAM,iBAAiB,GAAkC;AACvD,IAAA,MAAM,EAAE,8BAA8B;AACtC,IAAA,KAAK,EAAE,iDAAiD;AACxD,IAAA,IAAI,EAAE,cAAc;CACrB;AAED;;;;;AAKG;MAKU,IAAI,CAAA;IACN,IAAI,GAAG,KAAK,CAAS,SAAS;6EAAC;IAC/B,SAAS,GAAG,KAAK,CAAgB,OAAO;kFAAC;IAE/B,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,6JAA6J,EAC7J,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EACzB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CACpC;gFACF;uGAVU,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAJ,IAAI,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAJ,IAAI,EAAA,UAAA,EAAA,CAAA;kBAJhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;AC9BD;;AAEG;;"}
+{"version":3,"file":"mesgflow-ui-kit-link.mjs","sources":["../../../projects/ui-kit/link/link.ts","../../../projects/ui-kit/link/mesgflow-ui-kit-link.ts"],"sourcesContent":["import { Directive, computed, input } from '@angular/core';\r\nimport { cn, type MfTone, focusRecipe } from '@mesgflow/ui-kit/core';\r\n\r\nexport type LinkUnderline = 'always' | 'hover' | 'none';\r\n\r\nconst TONE_CLASSES: Record<MfTone, string> = {\r\n  neutral: 'text-fg-muted hover:text-fg',\r\n  primary: 'text-accent hover:text-accent-strong',\r\n  success: 'text-success',\r\n  warning: 'text-warning',\r\n  danger: 'text-danger',\r\n  info: 'text-info',\r\n  help: 'text-help',\r\n};\r\n\r\nconst UNDERLINE_CLASSES: Record<LinkUnderline, string> = {\r\n  always: 'underline underline-offset-2',\r\n  hover: 'no-underline underline-offset-2 hover:underline',\r\n  none: 'no-underline',\r\n};\r\n\r\n/**\r\n * `<a mfLink href=\"/ayarlar\">Ayarlar</a>` — düz metin içine gömülü bağlantılar\r\n * için (ör. \"Zaten hesabınız var mı? Giriş yapın\"). Navigasyon bağlantıları\r\n * (sidebar, tabs, breadcrumb) KENDİ bileşenlerinin stilini taşır, bu\r\n * directive'i KULLANMAZ — `Link` SADECE metin akışı içindeki bağlantılar için.\r\n */\r\n@Directive({\r\n  selector: 'a[mfLink]',\r\n  host: { '[class]': 'classes()' },\r\n})\r\nexport class Link {\r\n  readonly tone = input<MfTone>('primary');\r\n  readonly underline = input<LinkUnderline>('hover');\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      'transition-colors duration-fast ease-emphasis ' + focusRecipe,\r\n      TONE_CLASSES[this.tone()],\r\n      UNDERLINE_CLASSES[this.underline()],\r\n    ),\r\n  );\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,GAA2B;AAC3C,IAAA,OAAO,EAAE,6BAA6B;AACtC,IAAA,OAAO,EAAE,sCAAsC;AAC/C,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,IAAI,EAAE,WAAW;CAClB;AAED,MAAM,iBAAiB,GAAkC;AACvD,IAAA,MAAM,EAAE,8BAA8B;AACtC,IAAA,KAAK,EAAE,iDAAiD;AACxD,IAAA,IAAI,EAAE,cAAc;CACrB;AAED;;;;;AAKG;MAKU,IAAI,CAAA;IACN,IAAI,GAAG,KAAK,CAAS,SAAS;6EAAC;IAC/B,SAAS,GAAG,KAAK,CAAgB,OAAO;kFAAC;IAE/B,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,gDAAgD,GAAG,WAAW,EAC9D,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EACzB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CACpC;gFACF;uGAVU,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAJ,IAAI,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAJ,IAAI,EAAA,UAAA,EAAA,CAAA;kBAJhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;AC9BD;;AAEG;;"}

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

@@ -0,0 +1,151 @@
+import { Listbox as Listbox$1, Option } from '@angular/aria/listbox';
+import * as i0 from '@angular/core';
+import { input, model, booleanAttribute, Component } from '@angular/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+
+/**
+ * `<mf-listbox [options]="plans" [(value)]="chosen" ariaLabel="Plan" />`
+ *
+ * Her zaman görünür seçim listesi (açılır olmayan Select) — ayar panelleri,
+ * filtre kenar çubukları, iki sütunlu seçiciler. `@angular/aria/listbox`:
+ * ↑/↓, Home/End, typeahead, Shift+ok ile aralık (çoklu), `aria-activedescendant`.
+ *
+ * `value` her zaman bir DİZİ (aria listbox sözleşmesi); tekli modda tek öğeli.
+ */
+class Listbox {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Listbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Listbox, isStandalone: true, selector: "mf-listbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", 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: "block" }, exportAs: ["mfListbox"], ngImport: i0, template: `
+    <ul
+      ngListbox
+      [(value)]="value"
+      [multi]="multi()"
+      [selectionMode]="multi() ? 'explicit' : 'follow'"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel() || null"
+      focusMode="activedescendant"
+      class="m-0 flex max-h-72 list-none flex-col gap-0.5 overflow-y-auto rounded-lg border border-hairline bg-surface p-1 text-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-disabled:opacity-50"
+    >
+      @for (option of options(); track option.value) {
+        <li
+          ngOption
+          [value]="option.value"
+          [label]="option.label"
+          [disabled]="!!option.disabled"
+          class="group/opt flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 text-fg-muted transition-colors duration-fast ease-emphasis select-none data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-selected:bg-primary-tint aria-selected:text-primary-tint-fg aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+        >
+          @if (multi()) {
+            <span
+              aria-hidden="true"
+              class="flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border border-border-strong bg-surface text-fg-on-accent transition-colors group-aria-selected/opt:border-accent-fill group-aria-selected/opt:bg-accent-fill"
+            >
+              <span
+                mfIcon
+                [size]="12"
+                class="scale-0 transition-transform duration-base ease-spring group-aria-selected/opt:scale-100"
+                >check</span
+              >
+            </span>
+          }
+          @if (option.icon) {
+            <span
+              mfIcon
+              [size]="18"
+              class="shrink-0 text-fg-subtle group-aria-selected/opt:text-inherit"
+              >{{ option.icon }}</span
+            >
+          }
+          <span class="min-w-0 flex-1">
+            <span class="block truncate font-medium">{{ option.label }}</span>
+            @if (option.description) {
+              <span class="block truncate text-xs text-fg-subtle">{{ option.description }}</span>
+            }
+          </span>
+          @if (!multi()) {
+            <span mfIcon [size]="16" class="invisible shrink-0 group-aria-selected/opt:visible"
+              >check</span
+            >
+          }
+        </li>
+      }
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Listbox$1, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Listbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-listbox',
+                    exportAs: 'mfListbox',
+                    imports: [Listbox$1, Option, Icon],
+                    host: { class: 'block' },
+                    template: `
+    <ul
+      ngListbox
+      [(value)]="value"
+      [multi]="multi()"
+      [selectionMode]="multi() ? 'explicit' : 'follow'"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel() || null"
+      focusMode="activedescendant"
+      class="m-0 flex max-h-72 list-none flex-col gap-0.5 overflow-y-auto rounded-lg border border-hairline bg-surface p-1 text-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-disabled:opacity-50"
+    >
+      @for (option of options(); track option.value) {
+        <li
+          ngOption
+          [value]="option.value"
+          [label]="option.label"
+          [disabled]="!!option.disabled"
+          class="group/opt flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 text-fg-muted transition-colors duration-fast ease-emphasis select-none data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-selected:bg-primary-tint aria-selected:text-primary-tint-fg aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+        >
+          @if (multi()) {
+            <span
+              aria-hidden="true"
+              class="flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border border-border-strong bg-surface text-fg-on-accent transition-colors group-aria-selected/opt:border-accent-fill group-aria-selected/opt:bg-accent-fill"
+            >
+              <span
+                mfIcon
+                [size]="12"
+                class="scale-0 transition-transform duration-base ease-spring group-aria-selected/opt:scale-100"
+                >check</span
+              >
+            </span>
+          }
+          @if (option.icon) {
+            <span
+              mfIcon
+              [size]="18"
+              class="shrink-0 text-fg-subtle group-aria-selected/opt:text-inherit"
+              >{{ option.icon }}</span
+            >
+          }
+          <span class="min-w-0 flex-1">
+            <span class="block truncate font-medium">{{ option.label }}</span>
+            @if (option.description) {
+              <span class="block truncate text-xs text-fg-subtle">{{ option.description }}</span>
+            }
+          </span>
+          @if (!multi()) {
+            <span mfIcon [size]="16" class="invisible shrink-0 group-aria-selected/opt:visible"
+              >check</span
+            >
+          }
+        </li>
+      }
+    </ul>
+  `,
+                }]
+        }], 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"] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Listbox };
+//# sourceMappingURL=mesgflow-ui-kit-listbox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-listbox.mjs","sources":["../../../projects/ui-kit/listbox/listbox.ts","../../../projects/ui-kit/listbox/mesgflow-ui-kit-listbox.ts"],"sourcesContent":["import { Listbox as AriaListbox, Option as AriaOption } from '@angular/aria/listbox';\r\nimport { Component, booleanAttribute, input, model } from '@angular/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\n\r\nexport interface ListboxOption<V> {\r\n  label: string;\r\n  value: V;\r\n  description?: string;\r\n  icon?: string;\r\n  disabled?: boolean;\r\n}\r\n\r\n/**\r\n * `<mf-listbox [options]=\"plans\" [(value)]=\"chosen\" ariaLabel=\"Plan\" />`\r\n *\r\n * Her zaman görünür seçim listesi (açılır olmayan Select) — ayar panelleri,\r\n * filtre kenar çubukları, iki sütunlu seçiciler. `@angular/aria/listbox`:\r\n * ↑/↓, Home/End, typeahead, Shift+ok ile aralık (çoklu), `aria-activedescendant`.\r\n *\r\n * `value` her zaman bir DİZİ (aria listbox sözleşmesi); tekli modda tek öğeli.\r\n */\r\n@Component({\r\n  selector: 'mf-listbox',\r\n  exportAs: 'mfListbox',\r\n  imports: [AriaListbox, AriaOption, Icon],\r\n  host: { class: 'block' },\r\n  template: `\r\n    <ul\r\n      ngListbox\r\n      [(value)]=\"value\"\r\n      [multi]=\"multi()\"\r\n      [selectionMode]=\"multi() ? 'explicit' : 'follow'\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      focusMode=\"activedescendant\"\r\n      class=\"m-0 flex max-h-72 list-none flex-col gap-0.5 overflow-y-auto rounded-lg border border-hairline bg-surface p-1 text-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-disabled:opacity-50\"\r\n    >\r\n      @for (option of options(); track option.value) {\r\n        <li\r\n          ngOption\r\n          [value]=\"option.value\"\r\n          [label]=\"option.label\"\r\n          [disabled]=\"!!option.disabled\"\r\n          class=\"group/opt flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 text-fg-muted transition-colors duration-fast ease-emphasis select-none data-[active=true]:bg-state-hover data-[active=true]:text-fg aria-selected:bg-primary-tint aria-selected:text-primary-tint-fg aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\r\n        >\r\n          @if (multi()) {\r\n            <span\r\n              aria-hidden=\"true\"\r\n              class=\"flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border border-border-strong bg-surface text-fg-on-accent transition-colors group-aria-selected/opt:border-accent-fill group-aria-selected/opt:bg-accent-fill\"\r\n            >\r\n              <span\r\n                mfIcon\r\n                [size]=\"12\"\r\n                class=\"scale-0 transition-transform duration-base ease-spring group-aria-selected/opt:scale-100\"\r\n                >check</span\r\n              >\r\n            </span>\r\n          }\r\n          @if (option.icon) {\r\n            <span\r\n              mfIcon\r\n              [size]=\"18\"\r\n              class=\"shrink-0 text-fg-subtle group-aria-selected/opt:text-inherit\"\r\n              >{{ option.icon }}</span\r\n            >\r\n          }\r\n          <span class=\"min-w-0 flex-1\">\r\n            <span class=\"block truncate font-medium\">{{ option.label }}</span>\r\n            @if (option.description) {\r\n              <span class=\"block truncate text-xs text-fg-subtle\">{{ option.description }}</span>\r\n            }\r\n          </span>\r\n          @if (!multi()) {\r\n            <span mfIcon [size]=\"16\" class=\"invisible shrink-0 group-aria-selected/opt:visible\"\r\n              >check</span\r\n            >\r\n          }\r\n        </li>\r\n      }\r\n    </ul>\r\n  `,\r\n})\r\nexport class Listbox<V> {\r\n  readonly options = input.required<ListboxOption<V>[]>();\r\n  readonly value = model<V[]>([]);\r\n  readonly multi = input(false, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly ariaLabel = input('');\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaListbox","AriaOption"],"mappings":";;;;;AAYA;;;;;;;;AAQG;MA8DU,OAAO,CAAA;IACT,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAsB;IAC9C,KAAK,GAAG,KAAK,CAAM,EAAE;8EAAC;IACtB,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACrD,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACxD,SAAS,GAAG,KAAK,CAAC,EAAE;kFAAC;uGALnB,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,OAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAxDR,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxDSA,SAAW,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,aAAA,EAAA,OAAA,EAAA,MAAA,EAAA,cAAA,EAAA,WAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAEC,MAAU,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,IAAI,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FA0D5B,OAAO,EAAA,UAAA,EAAA,CAAA;kBA7DnB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,OAAO,EAAE,CAACD,SAAW,EAAEC,MAAU,EAAE,IAAI,CAAC;AACxC,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;AACxB,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDT,EAAA,CAAA;AACF,iBAAA;;;ACjFD;;AAEG;;"}