@mesgflow/ui-kit 0.6.0

package/fesm2022/mesgflow-ui-kit-context-menu.mjs

@@ -0,0 +1,92 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, inject, ViewContainerRef, Directive } from '@angular/core';
+
+/**
+ * `<div [mfContextMenu]="menuTpl" #ctx="mfContextMenu">Sağ tıkla</div>
+ *  <ng-template #menuTpl>
+ *    <mf-menu (itemSelected)="onSelect($event); ctx.close()">
+ *      <button mfMenuItem value="edit">Düzenle</button>
+ *      <button mfMenuItem value="delete">Sil</button>
+ *    </mf-menu>
+ *  </ng-template>`
+ *
+ * Sağ tıkla İMLEÇ KONUMUNDA bir menü açar — native tarayıcı bağlam menüsü
+ * `event.preventDefault()` ile bastırılır. Kitteki ilk "gerçek DOM elemanına
+ * değil bir NOKTAYA sabitlenen" overlay (bkz. `Tooltip`'in aynı
+ * `flexibleConnectedTo` + elle `Overlay.create()` deseni) — `mf-popover`
+ * KULLANILMADI çünkü `Popover.origin` bir `CdkOverlayOrigin` (gerçek bir
+ * DOM elemanı) şart koşuyor, imleç noktası değil; CDK'nın
+ * `flexibleConnectedTo` stratejisi bir `{x, y}` noktasını da DOĞRUDAN kabul
+ * ediyor, ayrı bir "görünmez sanal anchor elemanı" hilesi GEREKMİYOR.
+ *
+ * Menü seçimi/kapanışı çağıranın kendi sorumluluğunda — `mfMenuTrigger`
+ * deseniyle AYNI ilke (bkz. `menu-trigger.ts`): `itemSelected`'te
+ * `ctx.close()`'u KENDİ elle çağırırsın.
+ */
+class ContextMenu {
+    mfContextMenu = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfContextMenu" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    overlayRef;
+    onContextMenu(event) {
+        const template = this.mfContextMenu();
+        if (this.disabled() || !template)
+            return;
+        event.preventDefault();
+        this.close();
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo({ x: event.clientX, y: event.clientY })
+            .withPositions([
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+        ])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+        });
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        this.overlayRef.keydownEvents().subscribe((e) => {
+            if (e.key === 'Escape')
+                this.close();
+        });
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+    }
+    /** Public — menü içeriğinden (bkz. sınıf üstündeki JSDoc örneği) elle kapatmak için. */
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ContextMenu, isStandalone: true, selector: "[mfContextMenu]", inputs: { mfContextMenu: { classPropertyName: "mfContextMenu", publicName: "mfContextMenu", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, exportAs: ["mfContextMenu"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ContextMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfContextMenu]',
+                    exportAs: 'mfContextMenu',
+                    host: {
+                        '(contextmenu)': 'onContextMenu($event)',
+                    },
+                }]
+        }], propDecorators: { mfContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfContextMenu", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ContextMenu };
+//# sourceMappingURL=mesgflow-ui-kit-context-menu.mjs.map

package/fesm2022/mesgflow-ui-kit-context-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-context-menu.mjs","sources":["../../../projects/ui-kit/context-menu/context-menu.ts","../../../projects/ui-kit/context-menu/mesgflow-ui-kit-context-menu.ts"],"sourcesContent":["import { Overlay, type OverlayRef } from '@angular/cdk/overlay';\r\nimport { TemplatePortal } from '@angular/cdk/portal';\r\nimport { Directive, OnDestroy, TemplateRef, ViewContainerRef, inject, input } from '@angular/core';\r\n\r\n/**\r\n * `<div [mfContextMenu]=\"menuTpl\" #ctx=\"mfContextMenu\">Sağ tıkla</div>\r\n *  <ng-template #menuTpl>\r\n *    <mf-menu (itemSelected)=\"onSelect($event); ctx.close()\">\r\n *      <button mfMenuItem value=\"edit\">Düzenle</button>\r\n *      <button mfMenuItem value=\"delete\">Sil</button>\r\n *    </mf-menu>\r\n *  </ng-template>`\r\n *\r\n * Sağ tıkla İMLEÇ KONUMUNDA bir menü açar — native tarayıcı bağlam menüsü\r\n * `event.preventDefault()` ile bastırılır. Kitteki ilk \"gerçek DOM elemanına\r\n * değil bir NOKTAYA sabitlenen\" overlay (bkz. `Tooltip`'in aynı\r\n * `flexibleConnectedTo` + elle `Overlay.create()` deseni) — `mf-popover`\r\n * KULLANILMADI çünkü `Popover.origin` bir `CdkOverlayOrigin` (gerçek bir\r\n * DOM elemanı) şart koşuyor, imleç noktası değil; CDK'nın\r\n * `flexibleConnectedTo` stratejisi bir `{x, y}` noktasını da DOĞRUDAN kabul\r\n * ediyor, ayrı bir \"görünmez sanal anchor elemanı\" hilesi GEREKMİYOR.\r\n *\r\n * Menü seçimi/kapanışı çağıranın kendi sorumluluğunda — `mfMenuTrigger`\r\n * deseniyle AYNI ilke (bkz. `menu-trigger.ts`): `itemSelected`'te\r\n * `ctx.close()`'u KENDİ elle çağırırsın.\r\n */\r\n@Directive({\r\n  selector: '[mfContextMenu]',\r\n  exportAs: 'mfContextMenu',\r\n  host: {\r\n    '(contextmenu)': 'onContextMenu($event)',\r\n  },\r\n})\r\nexport class ContextMenu implements OnDestroy {\r\n  readonly mfContextMenu = input<TemplateRef<unknown> | null>(null);\r\n  readonly disabled = input(false);\r\n\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n  private overlayRef?: OverlayRef;\r\n\r\n  protected onContextMenu(event: MouseEvent): void {\r\n    const template = this.mfContextMenu();\r\n    if (this.disabled() || !template) return;\r\n    event.preventDefault();\r\n    this.close();\r\n\r\n    const positionStrategy = this.overlay\r\n      .position()\r\n      .flexibleConnectedTo({ x: event.clientX, y: event.clientY })\r\n      .withPositions([\r\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },\r\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },\r\n        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },\r\n        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'bottom' },\r\n      ])\r\n      .withPush(true);\r\n\r\n    this.overlayRef = this.overlay.create({\r\n      positionStrategy,\r\n      scrollStrategy: this.overlay.scrollStrategies.close(),\r\n      hasBackdrop: true,\r\n      backdropClass: 'cdk-overlay-transparent-backdrop',\r\n    });\r\n    this.overlayRef.backdropClick().subscribe(() => this.close());\r\n    this.overlayRef.keydownEvents().subscribe((e) => {\r\n      if (e.key === 'Escape') this.close();\r\n    });\r\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\r\n  }\r\n\r\n  /** Public — menü içeriğinden (bkz. sınıf üstündeki JSDoc örneği) elle kapatmak için. */\r\n  close(): void {\r\n    this.overlayRef?.dispose();\r\n    this.overlayRef = undefined;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.close();\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-copy-button.mjs

@@ -0,0 +1,167 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, inject, DOCUMENT, DestroyRef, Directive, computed, Component } from '@angular/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { MF_COPY_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Tooltip } from '@mesgflow/ui-kit/tooltip';
+
+/** Kopyalandı durumunun görünür kaldığı süre (ms). */
+const COPIED_MS = 2000;
+/**
+ * Metni panoya yazar. `navigator.clipboard` yoksa ya da reddedilirse (güvenli olmayan bağlam,
+ * izin) gizli bir `<textarea>` + `execCommand('copy')` yedeğine düşer — eski ama HTTP'de de
+ * çalışan tek yol. Başarısızsa `false`.
+ */
+async function copyToClipboard(text, doc = document) {
+    try {
+        if (doc.defaultView?.navigator.clipboard) {
+            await doc.defaultView.navigator.clipboard.writeText(text);
+            return true;
+        }
+    }
+    catch {
+        // Yedeğe düş.
+    }
+    const area = doc.createElement('textarea');
+    area.value = text;
+    area.setAttribute('readonly', '');
+    area.style.cssText = 'position:fixed;inset-block-start:0;opacity:0;pointer-events:none';
+    doc.body.appendChild(area);
+    area.select();
+    try {
+        return doc.execCommand('copy');
+    }
+    catch {
+        return false;
+    }
+    finally {
+        area.remove();
+    }
+}
+/**
+ * `<button mfButton [mfCopy]="token" #c="mfCopy">{{ c.copied() ? '✓' : 'Kopyala' }}</button>`
+ *
+ * Herhangi bir düğmeyi kopyala düğmesine çevirir — görünüm tamamen tüketicide; hazır görünüm
+ * için `<mf-copy-button>`. `copied()` başarıdan sonra 2 sn `true` kalır (ikon/etiket değişimi
+ * için), `failed()` başarısızlıkta. Metin tıklama ANINDA okunur (dinamik değerler güncel olur).
+ */
+class Copy {
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'mfCopy' });
+    copySuccess = output();
+    copyError = output();
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    failed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+    document = inject(DOCUMENT);
+    timer;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+    }
+    async copy() {
+        const text = this.value();
+        const ok = await copyToClipboard(text, this.document);
+        clearTimeout(this.timer);
+        this.copied.set(ok);
+        this.failed.set(!ok);
+        if (ok)
+            this.copySuccess.emit(text);
+        else
+            this.copyError.emit();
+        this.timer = setTimeout(() => {
+            this.copied.set(false);
+            this.failed.set(false);
+        }, COPIED_MS);
+        return ok;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Copy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Copy, isStandalone: true, selector: "[mfCopy]", inputs: { value: { classPropertyName: "value", publicName: "mfCopy", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { copySuccess: "copySuccess", copyError: "copyError" }, host: { listeners: { "click": "copy()" } }, exportAs: ["mfCopy"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Copy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfCopy]',
+                    exportAs: 'mfCopy',
+                    host: { '(click)': 'copy()' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfCopy", required: true }] }], copySuccess: [{ type: i0.Output, args: ["copySuccess"] }], copyError: [{ type: i0.Output, args: ["copyError"] }] } });
+
+/**
+ * `<mf-copy-button [value]="apiKey" />` — ikon düğmesi: tıklanınca ikon ✓'ye döner (2 sn),
+ * başarısızsa ⚠; sonuç `aria-live` ile duyurulur. Düğmenin erişilebilir adı SABİT ("Copy" ya da
+ * `label`) — ekran okuyucu durum değişimini canlı bölgeden duyar, ad oynamaz.
+ */
+class CopyButton {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Düğmenin adı + ipucu. Verilmezse `MfLabels.copy.copy`. */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    labels = inject(MF_COPY_LABELS);
+    effectiveLabel = computed(() => this.label() ?? this.labels().copy, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLabel" }] : /* istanbul ignore next */ []));
+    iconClass(copied, failed) {
+        if (copied)
+            return 'text-success animate-pop';
+        return failed ? 'text-danger' : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CopyButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: CopyButton, isStandalone: true, selector: "mf-copy-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex" }, exportAs: ["mfCopyButton"], ngImport: i0, template: `
+    <button
+      mfButton
+      tone="neutral"
+      appearance="text"
+      size="icon"
+      shape="square"
+      type="button"
+      [mfCopy]="value()"
+      #copier="mfCopy"
+      [mfTooltip]="effectiveLabel()"
+      [attr.aria-label]="effectiveLabel()"
+    >
+      <span mfIcon [size]="16" [class]="iconClass(copier.copied(), copier.failed())">{{
+        copier.copied() ? 'check' : copier.failed() ? 'error' : 'content_copy'
+      }}</span>
+    </button>
+    <span class="sr-only" aria-live="polite">{{
+      copier.copied() ? labels().copied : copier.failed() ? labels().failed : ''
+    }}</span>
+  `, 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"] }, { kind: "directive", type: Tooltip, selector: "[mfTooltip], [mfTooltipContent]", inputs: ["mfTooltip", "mfTooltipContent", "tooltipPosition"], exportAs: ["mfTooltip"] }, { kind: "directive", type: Copy, selector: "[mfCopy]", inputs: ["mfCopy"], outputs: ["copySuccess", "copyError"], exportAs: ["mfCopy"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CopyButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-copy-button',
+                    exportAs: 'mfCopyButton',
+                    imports: [Button, Icon, Tooltip, Copy],
+                    host: { class: 'inline-flex' },
+                    template: `
+    <button
+      mfButton
+      tone="neutral"
+      appearance="text"
+      size="icon"
+      shape="square"
+      type="button"
+      [mfCopy]="value()"
+      #copier="mfCopy"
+      [mfTooltip]="effectiveLabel()"
+      [attr.aria-label]="effectiveLabel()"
+    >
+      <span mfIcon [size]="16" [class]="iconClass(copier.copied(), copier.failed())">{{
+        copier.copied() ? 'check' : copier.failed() ? 'error' : 'content_copy'
+      }}</span>
+    </button>
+    <span class="sr-only" aria-live="polite">{{
+      copier.copied() ? labels().copied : copier.failed() ? labels().failed : ''
+    }}</span>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Copy, CopyButton, copyToClipboard };
+//# sourceMappingURL=mesgflow-ui-kit-copy-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-copy-button.mjs","sources":["../../../projects/ui-kit/copy-button/copy.ts","../../../projects/ui-kit/copy-button/copy-button.ts","../../../projects/ui-kit/copy-button/mesgflow-ui-kit-copy-button.ts"],"sourcesContent":["import { DOCUMENT, DestroyRef, Directive, inject, input, output, signal } from '@angular/core';\r\n\r\n/** Kopyalandı durumunun görünür kaldığı süre (ms). */\r\nconst COPIED_MS = 2000;\r\n\r\n/**\r\n * Metni panoya yazar. `navigator.clipboard` yoksa ya da reddedilirse (güvenli olmayan bağlam,\r\n * izin) gizli bir `<textarea>` + `execCommand('copy')` yedeğine düşer — eski ama HTTP'de de\r\n * çalışan tek yol. Başarısızsa `false`.\r\n */\r\nexport async function copyToClipboard(text: string, doc: Document = document): Promise<boolean> {\r\n  try {\r\n    if (doc.defaultView?.navigator.clipboard) {\r\n      await doc.defaultView.navigator.clipboard.writeText(text);\r\n      return true;\r\n    }\r\n  } catch {\r\n    // Yedeğe düş.\r\n  }\r\n  const area = doc.createElement('textarea');\r\n  area.value = text;\r\n  area.setAttribute('readonly', '');\r\n  area.style.cssText = 'position:fixed;inset-block-start:0;opacity:0;pointer-events:none';\r\n  doc.body.appendChild(area);\r\n  area.select();\r\n  try {\r\n    return doc.execCommand('copy');\r\n  } catch {\r\n    return false;\r\n  } finally {\r\n    area.remove();\r\n  }\r\n}\r\n\r\n/**\r\n * `<button mfButton [mfCopy]=\"token\" #c=\"mfCopy\">{{ c.copied() ? '✓' : 'Kopyala' }}</button>`\r\n *\r\n * Herhangi bir düğmeyi kopyala düğmesine çevirir — görünüm tamamen tüketicide; hazır görünüm\r\n * için `<mf-copy-button>`. `copied()` başarıdan sonra 2 sn `true` kalır (ikon/etiket değişimi\r\n * için), `failed()` başarısızlıkta. Metin tıklama ANINDA okunur (dinamik değerler güncel olur).\r\n */\r\n@Directive({\r\n  selector: '[mfCopy]',\r\n  exportAs: 'mfCopy',\r\n  host: { '(click)': 'copy()' },\r\n})\r\nexport class Copy {\r\n  readonly value = input.required<string>({ alias: 'mfCopy' });\r\n\r\n  readonly copySuccess = output<string>();\r\n  readonly copyError = output<void>();\r\n\r\n  readonly copied = signal(false);\r\n  readonly failed = signal(false);\r\n\r\n  private readonly document = inject(DOCUMENT);\r\n  private timer: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  constructor() {\r\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\r\n  }\r\n\r\n  async copy(): Promise<boolean> {\r\n    const text = this.value();\r\n    const ok = await copyToClipboard(text, this.document);\r\n    clearTimeout(this.timer);\r\n    this.copied.set(ok);\r\n    this.failed.set(!ok);\r\n    if (ok) this.copySuccess.emit(text);\r\n    else this.copyError.emit();\r\n    this.timer = setTimeout(() => {\r\n      this.copied.set(false);\r\n      this.failed.set(false);\r\n    }, COPIED_MS);\r\n    return ok;\r\n  }\r\n}\r\n","import { Component, computed, inject, input } from '@angular/core';\r\nimport { Button } from '@mesgflow/ui-kit/button';\r\nimport { MF_COPY_LABELS } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Tooltip } from '@mesgflow/ui-kit/tooltip';\r\nimport { Copy } from './copy';\r\n\r\n/**\r\n * `<mf-copy-button [value]=\"apiKey\" />` — ikon düğmesi: tıklanınca ikon ✓'ye döner (2 sn),\r\n * başarısızsa ⚠; sonuç `aria-live` ile duyurulur. Düğmenin erişilebilir adı SABİT (\"Copy\" ya da\r\n * `label`) — ekran okuyucu durum değişimini canlı bölgeden duyar, ad oynamaz.\r\n */\r\n@Component({\r\n  selector: 'mf-copy-button',\r\n  exportAs: 'mfCopyButton',\r\n  imports: [Button, Icon, Tooltip, Copy],\r\n  host: { class: 'inline-flex' },\r\n  template: `\r\n    <button\r\n      mfButton\r\n      tone=\"neutral\"\r\n      appearance=\"text\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      type=\"button\"\r\n      [mfCopy]=\"value()\"\r\n      #copier=\"mfCopy\"\r\n      [mfTooltip]=\"effectiveLabel()\"\r\n      [attr.aria-label]=\"effectiveLabel()\"\r\n    >\r\n      <span mfIcon [size]=\"16\" [class]=\"iconClass(copier.copied(), copier.failed())\">{{\r\n        copier.copied() ? 'check' : copier.failed() ? 'error' : 'content_copy'\r\n      }}</span>\r\n    </button>\r\n    <span class=\"sr-only\" aria-live=\"polite\">{{\r\n      copier.copied() ? labels().copied : copier.failed() ? labels().failed : ''\r\n    }}</span>\r\n  `,\r\n})\r\nexport class CopyButton {\r\n  readonly value = input.required<string>();\r\n  /** Düğmenin adı + ipucu. Verilmezse `MfLabels.copy.copy`. */\r\n  readonly label = input<string>();\r\n\r\n  protected readonly labels = inject(MF_COPY_LABELS);\r\n  protected readonly effectiveLabel = computed(() => this.label() ?? this.labels().copy);\r\n\r\n  protected iconClass(copied: boolean, failed: boolean): string {\r\n    if (copied) return 'text-success animate-pop';\r\n    return failed ? 'text-danger' : '';\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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"}