@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-ui-button.mjs

@@ -0,0 +1,108 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, input, contentChild, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LoaderComponent } from '@frame-kit/ui-ng/ui/loader';
+
+const FK_BUTTON_ICON_START = new InjectionToken('FK_BUTTON_ICON_START');
+const FK_BUTTON_ICON_END = new InjectionToken('FK_BUTTON_ICON_END');
+class FkButtonIconStartDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkButtonIconStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkButtonIconStartDirective, isStandalone: true, selector: "[fkButtonIconStart]", host: { attributes: { "aria-hidden": "true" } }, providers: [
+            { provide: FK_BUTTON_ICON_START, useExisting: FkButtonIconStartDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkButtonIconStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkButtonIconStart]',
+                    standalone: true,
+                    providers: [
+                        { provide: FK_BUTTON_ICON_START, useExisting: FkButtonIconStartDirective },
+                    ],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+class FkButtonIconEndDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkButtonIconEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkButtonIconEndDirective, isStandalone: true, selector: "[fkButtonIconEnd]", host: { attributes: { "aria-hidden": "true" } }, providers: [
+            { provide: FK_BUTTON_ICON_END, useExisting: FkButtonIconEndDirective },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkButtonIconEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkButtonIconEnd]',
+                    standalone: true,
+                    providers: [
+                        { provide: FK_BUTTON_ICON_END, useExisting: FkButtonIconEndDirective },
+                    ],
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class ButtonComponent {
+    // ===== BEHAVIOR =====
+    /** Visual style variant of the button (primary, secondary, ghost, etc.). */
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size of the button, affecting padding and font size. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, shows a spinner and disables interaction. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** When true, prevents interaction and applies disabled styling. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** HTML type attribute forwarded to the inner `<button>` element. */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** When true, the button stretches to fill its container width. */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    // ===== CONTENT CHILDREN =====
+    iconStartRef = contentChild(FK_BUTTON_ICON_START, ...(ngDevMode ? [{ debugName: "iconStartRef" }] : /* istanbul ignore next */ []));
+    iconEndRef = contentChild(FK_BUTTON_ICON_END, ...(ngDevMode ? [{ debugName: "iconEndRef" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-button',
+            `fk-button--${this.variant()}`,
+            `fk-button--${this.size()}`,
+            this.isDisabled() ? 'fk-button--disabled' : '',
+            this.loading() ? 'fk-button--loading' : '',
+            this.fullWidth() ? 'fk-button--full-width' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get ariaDisabledAttr() {
+        return this.isDisabled() ? 'true' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ButtonComponent, isStandalone: true, selector: "fk-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.aria-disabled": "this.ariaDisabledAttr" } }, queries: [{ propertyName: "iconStartRef", first: true, predicate: FK_BUTTON_ICON_START, descendants: true, isSignal: true }, { propertyName: "iconEndRef", first: true, predicate: FK_BUTTON_ICON_END, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"fk-button__native\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n  @if (loading()) {\n    <fk-loader\n      className=\"fk-button__loader\"\n      size=\"sm\"\n      color=\"inherit\"\n      ariaLabel=\"Loading\"\n    ></fk-loader>\n  }\n  <span\n    class=\"fk-button__content\"\n    [class.fk-button__content--hidden]=\"loading()\"\n  >\n    <ng-content select=\"[fkButtonIconStart]\" />\n    <ng-content />\n    <ng-content select=\"[fkButtonIconEnd]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-block}:host.fk-button--full-width{display:block;width:100%}.fk-button__native{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-button-icon-gap, .5rem);border:var(--fk-button-border-width, 1px) solid transparent;border-radius:var(--fk-button-border-radius, .5rem);font-weight:var(--fk-button-font-weight, var(--fk-typography-button-font-weight, 400));line-height:var(--fk-button-line-height, var(--fk-typography-button-line-height, 1.5));cursor:var(--fk-button-cursor, pointer);transition:var(--fk-button-transition, background-color .15s ease, border-color .15s ease, color .15s ease);text-decoration:none;white-space:nowrap;width:100%}.fk-button__native:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-button__content{display:inline-flex;align-items:center;gap:var(--fk-button-icon-gap, .5rem)}.fk-button__content--hidden{visibility:hidden}.fk-button__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host.fk-button--sm .fk-button__native{padding:var(--fk-button-padding-sm, .375rem .75rem);font-size:var(--fk-button-font-size-sm, .875rem)}:host.fk-button--md .fk-button__native{padding:var(--fk-button-padding-md, .5rem 1rem);font-size:var(--fk-button-font-size-md, 1rem)}:host.fk-button--lg .fk-button__native{padding:var(--fk-button-padding-lg, .625rem 1.25rem);font-size:var(--fk-button-font-size-lg, 1.125rem)}:host.fk-button--primary .fk-button__native{background-color:var(--fk-button-primary-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-button-primary-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-primary-border-color, transparent)}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-primary-bg-hover, var(--fk-color-primary-hover, #0670e0))}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-primary-bg-active, var(--fk-color-primary-active, #055fc3))}:host.fk-button--secondary .fk-button__native{background-color:var(--fk-button-secondary-bg, transparent);color:var(--fk-button-secondary-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-secondary-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-secondary-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-secondary-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline .fk-button__native{background-color:var(--fk-button-outline-bg, transparent);color:var(--fk-button-outline-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-outline-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-outline-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-outline-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--danger .fk-button__native{background-color:var(--fk-button-danger-bg, var(--fk-color-danger, #e02424));color:var(--fk-button-danger-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-danger-border-color, transparent)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-danger-bg-hover, #b91c1c)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-danger-bg-active, #991b1b)}:host.fk-button--disabled .fk-button__native{opacity:var(--fk-button-opacity-disabled, .6);cursor:var(--fk-button-cursor-disabled, not-allowed)}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "fk-loader", inputs: ["size", "color", "className", "id", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-button', standalone: true, imports: [LoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"fk-button__native\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n  @if (loading()) {\n    <fk-loader\n      className=\"fk-button__loader\"\n      size=\"sm\"\n      color=\"inherit\"\n      ariaLabel=\"Loading\"\n    ></fk-loader>\n  }\n  <span\n    class=\"fk-button__content\"\n    [class.fk-button__content--hidden]=\"loading()\"\n  >\n    <ng-content select=\"[fkButtonIconStart]\" />\n    <ng-content />\n    <ng-content select=\"[fkButtonIconEnd]\" />\n  </span>\n</button>\n", styles: [":host{display:inline-block}:host.fk-button--full-width{display:block;width:100%}.fk-button__native{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fk-button-icon-gap, .5rem);border:var(--fk-button-border-width, 1px) solid transparent;border-radius:var(--fk-button-border-radius, .5rem);font-weight:var(--fk-button-font-weight, var(--fk-typography-button-font-weight, 400));line-height:var(--fk-button-line-height, var(--fk-typography-button-line-height, 1.5));cursor:var(--fk-button-cursor, pointer);transition:var(--fk-button-transition, background-color .15s ease, border-color .15s ease, color .15s ease);text-decoration:none;white-space:nowrap;width:100%}.fk-button__native:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-button__content{display:inline-flex;align-items:center;gap:var(--fk-button-icon-gap, .5rem)}.fk-button__content--hidden{visibility:hidden}.fk-button__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host.fk-button--sm .fk-button__native{padding:var(--fk-button-padding-sm, .375rem .75rem);font-size:var(--fk-button-font-size-sm, .875rem)}:host.fk-button--md .fk-button__native{padding:var(--fk-button-padding-md, .5rem 1rem);font-size:var(--fk-button-font-size-md, 1rem)}:host.fk-button--lg .fk-button__native{padding:var(--fk-button-padding-lg, .625rem 1.25rem);font-size:var(--fk-button-font-size-lg, 1.125rem)}:host.fk-button--primary .fk-button__native{background-color:var(--fk-button-primary-bg, var(--fk-color-primary, #0a84ff));color:var(--fk-button-primary-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-primary-border-color, transparent)}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-primary-bg-hover, var(--fk-color-primary-hover, #0670e0))}:host.fk-button--primary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-primary-bg-active, var(--fk-color-primary-active, #055fc3))}:host.fk-button--secondary .fk-button__native{background-color:var(--fk-button-secondary-bg, transparent);color:var(--fk-button-secondary-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-secondary-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-secondary-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--secondary:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-secondary-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline .fk-button__native{background-color:var(--fk-button-outline-bg, transparent);color:var(--fk-button-outline-color, var(--fk-color-primary, #0a84ff));border-color:var(--fk-button-outline-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-outline-bg-hover, var(--fk-color-surface-muted, #f7f9fb))}:host.fk-button--outline:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-outline-bg-active, var(--fk-color-border, #d9e2ee))}:host.fk-button--danger .fk-button__native{background-color:var(--fk-button-danger-bg, var(--fk-color-danger, #e02424));color:var(--fk-button-danger-color, var(--fk-color-surface, #ffffff));border-color:var(--fk-button-danger-border-color, transparent)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:hover{background-color:var(--fk-button-danger-bg-hover, #b91c1c)}:host.fk-button--danger:not(.fk-button--disabled) .fk-button__native:active{background-color:var(--fk-button-danger-bg-active, #991b1b)}:host.fk-button--disabled .fk-button__native{opacity:var(--fk-button-opacity-disabled, .6);cursor:var(--fk-button-cursor-disabled, not-allowed)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStartRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_BUTTON_ICON_START), { isSignal: true }] }], iconEndRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_BUTTON_ICON_END), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], ariaDisabledAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, FK_BUTTON_ICON_END, FK_BUTTON_ICON_START, FkButtonIconEndDirective, FkButtonIconStartDirective };
+//# sourceMappingURL=frame-kit-ui-ng-ui-button.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-button.mjs","sources":["../../../../packages/ui-ng/ui/button/button-icon.directive.ts","../../../../packages/ui-ng/ui/button/button.component.ts","../../../../packages/ui-ng/ui/button/button.component.html","../../../../packages/ui-ng/ui/button/frame-kit-ui-ng-ui-button.ts"],"sourcesContent":["import { Directive, InjectionToken } from '@angular/core';\n\nexport const FK_BUTTON_ICON_START =\n  new InjectionToken<FkButtonIconStartDirective>('FK_BUTTON_ICON_START');\n\nexport const FK_BUTTON_ICON_END = new InjectionToken<FkButtonIconEndDirective>(\n  'FK_BUTTON_ICON_END',\n);\n\n@Directive({\n  selector: '[fkButtonIconStart]',\n  standalone: true,\n  providers: [\n    { provide: FK_BUTTON_ICON_START, useExisting: FkButtonIconStartDirective },\n  ],\n  host: {\n    'aria-hidden': 'true',\n  },\n})\nexport class FkButtonIconStartDirective {}\n\n@Directive({\n  selector: '[fkButtonIconEnd]',\n  standalone: true,\n  providers: [\n    { provide: FK_BUTTON_ICON_END, useExisting: FkButtonIconEndDirective },\n  ],\n  host: {\n    'aria-hidden': 'true',\n  },\n})\nexport class FkButtonIconEndDirective {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport { LoaderComponent } from '@frame-kit/ui-ng/ui/loader';\nimport type { ButtonSize, ButtonType, ButtonVariant } from './button.types';\nimport {\n  FK_BUTTON_ICON_END,\n  FK_BUTTON_ICON_START,\n} from './button-icon.directive';\n\n@Component({\n  selector: 'fk-button',\n  standalone: true,\n  imports: [LoaderComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n})\nexport class ButtonComponent {\n  // ===== BEHAVIOR =====\n  /** Visual style variant of the button (primary, secondary, ghost, etc.). */\n  readonly variant = input<ButtonVariant>('primary');\n  /** Size of the button, affecting padding and font size. */\n  readonly size = input<ButtonSize>('md');\n  /** When true, shows a spinner and disables interaction. */\n  readonly loading = input<boolean>(false);\n  /** When true, prevents interaction and applies disabled styling. */\n  readonly disabled = input<boolean>(false);\n  /** HTML type attribute forwarded to the inner `<button>` element. */\n  readonly type = input<ButtonType>('button');\n  /** When true, the button stretches to fill its container width. */\n  readonly fullWidth = input<boolean>(false);\n\n  // ===== CONTENT CHILDREN =====\n  readonly iconStartRef = contentChild(FK_BUTTON_ICON_START);\n  readonly iconEndRef = contentChild(FK_BUTTON_ICON_END);\n\n  // ===== BASE PROPS =====\n  readonly id = input<string | null>(null);\n  readonly className = input<string>('');\n  readonly ariaLabel = input<string | null>(null);\n  readonly ariaDescribedBy = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n  readonly classes = computed(() => {\n    return [\n      'fk-button',\n      `fk-button--${this.variant()}`,\n      `fk-button--${this.size()}`,\n      this.isDisabled() ? 'fk-button--disabled' : '',\n      this.loading() ? 'fk-button--loading' : '',\n      this.fullWidth() ? 'fk-button--full-width' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('attr.aria-disabled')\n  get ariaDisabledAttr(): string | null {\n    return this.isDisabled() ? 'true' : null;\n  }\n}\n","<button\n  class=\"fk-button__native\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [id]=\"id()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-describedby]=\"ariaDescribedBy()\"\n>\n  @if (loading()) {\n    <fk-loader\n      className=\"fk-button__loader\"\n      size=\"sm\"\n      color=\"inherit\"\n      ariaLabel=\"Loading\"\n    ></fk-loader>\n  }\n  <span\n    class=\"fk-button__content\"\n    [class.fk-button__content--hidden]=\"loading()\"\n  >\n    <ng-content select=\"[fkButtonIconStart]\" />\n    <ng-content />\n    <ng-content select=\"[fkButtonIconEnd]\" />\n  </span>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-callout.mjs

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { HeadlineComponent } from '@frame-kit/ui-ng/core/headline';
+
+class CalloutComponent {
+    // ===== INPUTS =====
+    /** Optional title rendered as a headline above the projected content. */
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Text alignment applied to the callout body. */
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Custom background color applied via a CSS custom property. */
+    backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    /** Custom border color applied via a CSS custom property. */
+    borderColor = input(null, ...(ngDevMode ? [{ debugName: "borderColor" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return ['fk-callout', this.className()].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostBg() {
+        return this.backgroundColor();
+    }
+    get hostBorderColor() {
+        return this.borderColor();
+    }
+    get hostTextAlign() {
+        return this.align() === 'start' ? null : this.align();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CalloutComponent, isStandalone: true, selector: "fk-callout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.--fk-callout-bg": "this.hostBg", "style.--fk-callout-border-color": "this.hostBorderColor", "style.text-align": "this.hostTextAlign" } }, ngImport: i0, template: "@if (title()) {\n  <fk-headline [level]=\"6\">{{ title() }}</fk-headline>\n}\n\n<p class=\"fk-callout__description\">\n  <ng-content />\n</p>\n", styles: [":host{display:block;padding:var(--fk-callout-padding, var(--fk-rhythm-4, 1rem));background-color:var(--fk-callout-bg, var(--fk-color-surface-muted, #f7f9fb));border:1px solid var(--fk-callout-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-callout-border-radius, var(--fk-radius-md, .375rem));font-size:var(--fk-callout-font-size, var(--fk-typography-small-font-size, .8125rem));--fk-typography-h6-font-size: var(--fk-callout-title-font-size, inherit)}fk-headline+.fk-callout__description{margin-block-start:var(--fk-callout-title-gap, var(--fk-rhythm-2, .5rem))}.fk-callout__description{margin:0;color:var(--fk-text-color-muted, #6b7280);line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}\n"], dependencies: [{ kind: "component", type: HeadlineComponent, selector: "fk-headline", inputs: ["ariaLabel", "className", "fontSize", "id", "level", "variant", "visuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CalloutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-callout', standalone: true, imports: [HeadlineComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title()) {\n  <fk-headline [level]=\"6\">{{ title() }}</fk-headline>\n}\n\n<p class=\"fk-callout__description\">\n  <ng-content />\n</p>\n", styles: [":host{display:block;padding:var(--fk-callout-padding, var(--fk-rhythm-4, 1rem));background-color:var(--fk-callout-bg, var(--fk-color-surface-muted, #f7f9fb));border:1px solid var(--fk-callout-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-callout-border-radius, var(--fk-radius-md, .375rem));font-size:var(--fk-callout-font-size, var(--fk-typography-small-font-size, .8125rem));--fk-typography-h6-font-size: var(--fk-callout-title-font-size, inherit)}fk-headline+.fk-callout__description{margin-block-start:var(--fk-callout-title-gap, var(--fk-rhythm-2, .5rem))}.fk-callout__description{margin:0;color:var(--fk-text-color-muted, #6b7280);line-height:var(--fk-typography-small-line-height, 1.4);letter-spacing:var(--fk-typography-small-letter-spacing, .01em)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostBg: [{
+                type: HostBinding,
+                args: ['style.--fk-callout-bg']
+            }], hostBorderColor: [{
+                type: HostBinding,
+                args: ['style.--fk-callout-border-color']
+            }], hostTextAlign: [{
+                type: HostBinding,
+                args: ['style.text-align']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalloutComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-callout.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-callout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-callout.mjs","sources":["../../../../packages/ui-ng/ui/callout/callout.component.ts","../../../../packages/ui-ng/ui/callout/callout.component.html","../../../../packages/ui-ng/ui/callout/frame-kit-ui-ng-ui-callout.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport { HeadlineComponent } from '@frame-kit/ui-ng/core/headline';\nimport type { TextAlign } from '@frame-kit/ui-ng/core/text';\n\n@Component({\n  selector: 'fk-callout',\n  standalone: true,\n  imports: [HeadlineComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './callout.component.html',\n  styleUrl: './callout.component.scss',\n})\nexport class CalloutComponent {\n  // ===== INPUTS =====\n  /** Optional title rendered as a headline above the projected content. */\n  readonly title = input<string | null>(null);\n  /** Text alignment applied to the callout body. */\n  readonly align = input<TextAlign>('start');\n  /** Custom background color applied via a CSS custom property. */\n  readonly backgroundColor = input<string | null>(null);\n  /** Custom border color applied via a CSS custom property. */\n  readonly borderColor = input<string | null>(null);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return ['fk-callout', this.className()].filter(Boolean).join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.--fk-callout-bg')\n  get hostBg() {\n    return this.backgroundColor();\n  }\n\n  @HostBinding('style.--fk-callout-border-color')\n  get hostBorderColor() {\n    return this.borderColor();\n  }\n\n  @HostBinding('style.text-align')\n  get hostTextAlign() {\n    return this.align() === 'start' ? null : this.align();\n  }\n}\n","@if (title()) {\n  <fk-headline [level]=\"6\">{{ title() }}</fk-headline>\n}\n\n<p class=\"fk-callout__description\">\n  <ng-content />\n</p>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-kit-ui-ng-ui-card.mjs

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class CardComponent {
+    // ===== INPUTS =====
+    /** Preset size that controls the card's internal padding; also accepts any valid CSS padding string for a custom size. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Alignment of the card's content along the cross axis. */
+    align = input('stretch', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** When true, the card has no background fill. */
+    transparent = input(false, ...(ngDevMode ? [{ debugName: "transparent" }] : /* istanbul ignore next */ []));
+    /** When true, the card has no border or shadow. */
+    borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    sizePresets = ['sm', 'md', 'lg'];
+    isCustomSize = computed(() => !this.sizePresets.includes(this.size()), ...(ngDevMode ? [{ debugName: "isCustomSize" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-card',
+            this.isCustomSize() ? '' : `fk-card--${this.size()}`,
+            `fk-card--align-${this.align()}`,
+            this.transparent() ? 'fk-card--transparent' : '',
+            this.borderless() ? 'fk-card--borderless' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostPadding() {
+        return this.isCustomSize() ? this.size() : null;
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: CardComponent, isStandalone: true, selector: "fk-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.padding": "this.hostPadding", "attr.id": "this.hostId", "attr.aria-label": "this.hostAriaLabel" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--fk-card-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-card-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-card-border-radius, var(--fk-radius-lg, .75rem))}:host.fk-card--transparent{background-color:transparent}:host.fk-card--borderless{border-color:transparent}:host.fk-card--align-start{align-items:flex-start}:host.fk-card--align-center{align-items:center}:host.fk-card--align-end{align-items:flex-end}:host.fk-card--align-stretch{align-items:stretch}:host.fk-card--sm{padding:var(--fk-card-padding-sm, var(--fk-rhythm-4, 1rem))}:host.fk-card--md{padding:var(--fk-card-padding-md, var(--fk-rhythm-6, 1.5rem))}:host.fk-card--lg{padding:var(--fk-card-padding-lg, var(--fk-rhythm-8, 2rem))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:column;background-color:var(--fk-card-bg, var(--fk-color-surface, #ffffff));border:1px solid var(--fk-card-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-card-border-radius, var(--fk-radius-lg, .75rem))}:host.fk-card--transparent{background-color:transparent}:host.fk-card--borderless{border-color:transparent}:host.fk-card--align-start{align-items:flex-start}:host.fk-card--align-center{align-items:center}:host.fk-card--align-end{align-items:flex-end}:host.fk-card--align-stretch{align-items:stretch}:host.fk-card--sm{padding:var(--fk-card-padding-sm, var(--fk-rhythm-4, 1rem))}:host.fk-card--md{padding:var(--fk-card-padding-md, var(--fk-rhythm-6, 1.5rem))}:host.fk-card--lg{padding:var(--fk-card-padding-lg, var(--fk-rhythm-8, 2rem))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostPadding: [{
+                type: HostBinding,
+                args: ['style.padding']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CardComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-card.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-card.mjs","sources":["../../../../packages/ui-ng/ui/card/card.component.ts","../../../../packages/ui-ng/ui/card/card.component.html","../../../../packages/ui-ng/ui/card/frame-kit-ui-ng-ui-card.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostBinding,\n  input,\n} from '@angular/core';\n\nimport type { CardAlign, CardSize } from './card.types';\n\n@Component({\n  selector: 'fk-card',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './card.component.html',\n  styleUrl: './card.component.scss',\n})\nexport class CardComponent {\n  // ===== INPUTS =====\n  /** Preset size that controls the card's internal padding; also accepts any valid CSS padding string for a custom size. */\n  readonly size = input<CardSize>('md');\n  /** Alignment of the card's content along the cross axis. */\n  readonly align = input<CardAlign>('stretch');\n  /** When true, the card has no background fill. */\n  readonly transparent = input<boolean>(false);\n  /** When true, the card has no border or shadow. */\n  readonly borderless = input<boolean>(false);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== COMPUTED =====\n  private readonly sizePresets = ['sm', 'md', 'lg'];\n\n  readonly isCustomSize = computed(\n    () => !this.sizePresets.includes(this.size()),\n  );\n\n  readonly classes = computed(() => {\n    return [\n      'fk-card',\n      this.isCustomSize() ? '' : `fk-card--${this.size()}`,\n      `fk-card--align-${this.align()}`,\n      this.transparent() ? 'fk-card--transparent' : '',\n      this.borderless() ? 'fk-card--borderless' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  @HostBinding('style.padding')\n  get hostPadding(): string | null {\n    return this.isCustomSize() ? this.size() : null;\n  }\n\n  @HostBinding('attr.id')\n  get hostId() {\n    return this.id();\n  }\n\n  @HostBinding('attr.aria-label')\n  get hostAriaLabel() {\n    return this.ariaLabel();\n  }\n}\n","<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAkBa,aAAa,CAAA;;;AAGf,IAAA,IAAI,GAAG,KAAK,CAAW,IAAI,2EAAC;;AAE5B,IAAA,KAAK,GAAG,KAAK,CAAY,SAAS,4EAAC;;AAEnC,IAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;;AAEnC,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;;AAGlC,IAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;AAC7B,IAAA,EAAE,GAAG,KAAK,CAAgB,IAAI,yEAAC;AAC/B,IAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;;IAG9B,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAExC,IAAA,YAAY,GAAG,QAAQ,CAC9B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,mFAC9C;AAEQ,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;QAC/B,OAAO;YACL,SAAS;AACT,YAAA,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE;AACpD,YAAA,CAAA,eAAA,EAAkB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE;YAChC,IAAI,CAAC,WAAW,EAAE,GAAG,sBAAsB,GAAG,EAAE;YAChD,IAAI,CAAC,UAAU,EAAE,GAAG,qBAAqB,GAAG,EAAE;YAC9C,IAAI,CAAC,SAAS,EAAE;AACjB;aACE,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;AACd,IAAA,CAAC,8EAAC;AAEF,IAAA,IACI,SAAS,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE;IACvB;AAEA,IAAA,IACI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;IACjD;AAEA,IAAA,IACI,MAAM,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,EAAE,EAAE;IAClB;AAEA,IAAA,IACI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;IACzB;uGAtDW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,imCClB1B,kBACA,EAAA,MAAA,EAAA,CAAA,+xBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDiBa,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cACP,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,+xBAAA,CAAA,EAAA;;sBAwC9C,WAAW;uBAAC,OAAO;;sBAKnB,WAAW;uBAAC,eAAe;;sBAK3B,WAAW;uBAAC,SAAS;;sBAKrB,WAAW;uBAAC,iBAAiB;;;AErEhC;;AAEG;;;;"}

package/fesm2022/frame-kit-ui-ng-ui-copyable-field.mjs

@@ -0,0 +1,113 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, inject, DestroyRef, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Displays a read-only value next to a copy-to-clipboard button.
+ *
+ * Use for showing secrets (API keys, tokens), IDs, URLs, and any value the
+ * user will want to copy rather than re-type. After a successful copy the
+ * copy-button icon swaps to a confirmation for `copiedDuration` ms and a
+ * screen-reader announcement fires.
+ *
+ * The copy button ships with inline SVG icons for both states so the
+ * component works standalone. Consumers can override either icon by
+ * projecting their own element with the `fkCopyIcon` or `fkCopiedIcon`
+ * attribute selector — for example an `fk-icon` wired to their own icon
+ * registry:
+ *
+ * ```html
+ * <fk-copyable-field [value]="apiKey">
+ *   <fk-icon fkCopyIcon name="clipboard-outline" size="sm" />
+ *   <fk-icon fkCopiedIcon name="check-outline" size="sm" />
+ * </fk-copyable-field>
+ * ```
+ */
+class CopyableFieldComponent {
+    // ===== INPUTS =====
+    /** The string value displayed and written to the clipboard when the user copies. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Optional visible label rendered above the value field. */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Controls the size variant of the field. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, the value is rendered in a monospace font. */
+    mono = input(true, ...(ngDevMode ? [{ debugName: "mono" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the copy button read by screen readers. */
+    copyAriaLabel = input('Copy to clipboard', ...(ngDevMode ? [{ debugName: "copyAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Screen-reader announcement text emitted after a successful copy. */
+    copiedAnnouncement = input('Copied to clipboard', ...(ngDevMode ? [{ debugName: "copiedAnnouncement" }] : /* istanbul ignore next */ []));
+    /** How long in milliseconds the "copied" confirmation state is shown. */
+    copiedDuration = input(2000, ...(ngDevMode ? [{ debugName: "copiedDuration" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires after a successful clipboard write, emitting the copied value. */
+    copied = output();
+    /** Fires when the clipboard write fails, emitting the underlying error. */
+    copyFailed = output();
+    // ===== STATE =====
+    _isCopied = signal(false, ...(ngDevMode ? [{ debugName: "_isCopied" }] : /* istanbul ignore next */ []));
+    copyTimer = null;
+    isCopied = this._isCopied.asReadonly();
+    // ===== COMPUTED =====
+    classes = computed(() => {
+        return [
+            'fk-copyable-field',
+            `fk-copyable-field--${this.size()}`,
+            this.mono() ? 'fk-copyable-field--mono' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => {
+            this.clearCopyTimer();
+        });
+    }
+    /** Writes the current value to the clipboard and shows the copied confirmation state. */
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.value());
+        }
+        catch (error) {
+            this.copyFailed.emit(error);
+            return;
+        }
+        this._isCopied.set(true);
+        this.copied.emit(this.value());
+        this.clearCopyTimer();
+        this.copyTimer = setTimeout(() => {
+            this._isCopied.set(false);
+            this.copyTimer = null;
+        }, this.copiedDuration());
+    }
+    clearCopyTimer() {
+        if (this.copyTimer) {
+            clearTimeout(this.copyTimer);
+            this.copyTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CopyableFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CopyableFieldComponent, isStandalone: true, selector: "fk-copyable-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, copyAriaLabel: { classPropertyName: "copyAriaLabel", publicName: "copyAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, copiedAnnouncement: { classPropertyName: "copiedAnnouncement", publicName: "copiedAnnouncement", isSignal: true, isRequired: false, transformFunction: null }, copiedDuration: { classPropertyName: "copiedDuration", publicName: "copiedDuration", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied", copyFailed: "copyFailed" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (label()) {\n  <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n  <span\n    class=\"fk-copyable-field__value\"\n    [id]=\"id() ?? undefined\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    {{ value() }}\n  </span>\n\n  <button\n    type=\"button\"\n    class=\"fk-copyable-field__action\"\n    [attr.aria-label]=\"copyAriaLabel()\"\n    (click)=\"copy()\"\n  >\n    @if (isCopied()) {\n      <ng-content select=\"[fkCopiedIcon]\">\n        <svg\n          class=\"fk-copyable-field__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3 8.5l3 3L13 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </ng-content>\n    } @else {\n      <ng-content select=\"[fkCopyIcon]\">\n        <svg\n          class=\"fk-copyable-field__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <rect\n            x=\"5.25\"\n            y=\"5.25\"\n            width=\"8.5\"\n            height=\"8.5\"\n            rx=\"1.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.25\"\n          />\n          <path\n            d=\"M10 5.25V3.75A1.5 1.5 0 0 0 8.5 2.25h-5A1.5 1.5 0 0 0 2 3.75v5A1.5 1.5 0 0 0 3.5 10.25H5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.25\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </ng-content>\n    }\n  </button>\n</div>\n\n<span class=\"fk-copyable-field__sr-only\" role=\"status\" aria-live=\"polite\">\n  @if (isCopied()) {\n    {{ copiedAnnouncement() }}\n  }\n</span>\n", styles: [":host{display:block}.fk-copyable-field__label{display:block;margin-bottom:var(--fk-copyable-field-label-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-copyable-field-label-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-copyable-field-label-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-copyable-field-label-color, var(--fk-color-muted, #8a98a8))}.fk-copyable-field__row{display:flex;align-items:center;gap:var(--fk-copyable-field-gap, var(--fk-rhythm-2, .5rem));background:var(--fk-copyable-field-bg, var(--fk-color-surface-muted, #f7f9fb));border:1px solid var(--fk-copyable-field-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-copyable-field-radius, var(--fk-radius-md, .5rem))}.fk-copyable-field__value{flex:1;min-width:0;color:var(--fk-copyable-field-value-color, var(--fk-color-text, #1f2d3d));word-break:break-all}.fk-copyable-field__action{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--fk-copyable-field-action-padding, var(--fk-rhythm-1, .25rem));color:var(--fk-copyable-field-action-color, var(--fk-color-muted, #8a98a8));background:transparent;border:none;border-radius:var(--fk-copyable-field-action-radius, var(--fk-radius-sm, .25rem));cursor:pointer;transition:color .15s,background-color .15s}.fk-copyable-field__action:hover{color:var(--fk-copyable-field-action-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-copyable-field-action-bg-hover, var(--fk-color-surface-dim, #f1f4f8))}.fk-copyable-field__action:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-copyable-field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host.fk-copyable-field--sm .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-copyable-field--sm .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-sm, var(--fk-typography-caption-font-size, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-md, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-md, var(--fk-typography-small-font-size, .8125rem))}:host.fk-copyable-field--lg .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-lg, var(--fk-rhythm-3, .75rem) var(--fk-rhythm-4, 1rem))}:host.fk-copyable-field--lg .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-lg, var(--fk-typography-body-font-size, .9375rem))}:host.fk-copyable-field--mono .fk-copyable-field__value{font-family:var(--fk-copyable-field-mono-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CopyableFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-copyable-field', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n  <span\n    class=\"fk-copyable-field__value\"\n    [id]=\"id() ?? undefined\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    {{ value() }}\n  </span>\n\n  <button\n    type=\"button\"\n    class=\"fk-copyable-field__action\"\n    [attr.aria-label]=\"copyAriaLabel()\"\n    (click)=\"copy()\"\n  >\n    @if (isCopied()) {\n      <ng-content select=\"[fkCopiedIcon]\">\n        <svg\n          class=\"fk-copyable-field__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3 8.5l3 3L13 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </ng-content>\n    } @else {\n      <ng-content select=\"[fkCopyIcon]\">\n        <svg\n          class=\"fk-copyable-field__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <rect\n            x=\"5.25\"\n            y=\"5.25\"\n            width=\"8.5\"\n            height=\"8.5\"\n            rx=\"1.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.25\"\n          />\n          <path\n            d=\"M10 5.25V3.75A1.5 1.5 0 0 0 8.5 2.25h-5A1.5 1.5 0 0 0 2 3.75v5A1.5 1.5 0 0 0 3.5 10.25H5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.25\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </ng-content>\n    }\n  </button>\n</div>\n\n<span class=\"fk-copyable-field__sr-only\" role=\"status\" aria-live=\"polite\">\n  @if (isCopied()) {\n    {{ copiedAnnouncement() }}\n  }\n</span>\n", styles: [":host{display:block}.fk-copyable-field__label{display:block;margin-bottom:var(--fk-copyable-field-label-gap, var(--fk-rhythm-1, .25rem));font-size:var(--fk-copyable-field-label-font-size, var(--fk-typography-small-font-size, .8125rem));font-weight:var(--fk-copyable-field-label-font-weight, var(--fk-font-weight-medium, 500));color:var(--fk-copyable-field-label-color, var(--fk-color-muted, #8a98a8))}.fk-copyable-field__row{display:flex;align-items:center;gap:var(--fk-copyable-field-gap, var(--fk-rhythm-2, .5rem));background:var(--fk-copyable-field-bg, var(--fk-color-surface-muted, #f7f9fb));border:1px solid var(--fk-copyable-field-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-copyable-field-radius, var(--fk-radius-md, .5rem))}.fk-copyable-field__value{flex:1;min-width:0;color:var(--fk-copyable-field-value-color, var(--fk-color-text, #1f2d3d));word-break:break-all}.fk-copyable-field__action{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--fk-copyable-field-action-padding, var(--fk-rhythm-1, .25rem));color:var(--fk-copyable-field-action-color, var(--fk-color-muted, #8a98a8));background:transparent;border:none;border-radius:var(--fk-copyable-field-action-radius, var(--fk-radius-sm, .25rem));cursor:pointer;transition:color .15s,background-color .15s}.fk-copyable-field__action:hover{color:var(--fk-copyable-field-action-color-hover, var(--fk-color-text, #1f2d3d));background:var(--fk-copyable-field-action-bg-hover, var(--fk-color-surface-dim, #f1f4f8))}.fk-copyable-field__action:focus-visible{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-copyable-field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host.fk-copyable-field--sm .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-sm, var(--fk-rhythm-1, .25rem) var(--fk-rhythm-2, .5rem))}:host.fk-copyable-field--sm .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-sm, var(--fk-typography-caption-font-size, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-md, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem))}:host.fk-copyable-field--md .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-md, var(--fk-typography-small-font-size, .8125rem))}:host.fk-copyable-field--lg .fk-copyable-field__row{padding:var(--fk-copyable-field-padding-lg, var(--fk-rhythm-3, .75rem) var(--fk-rhythm-4, 1rem))}:host.fk-copyable-field--lg .fk-copyable-field__value{font-size:var(--fk-copyable-field-font-size-lg, var(--fk-typography-body-font-size, .9375rem))}:host.fk-copyable-field--mono .fk-copyable-field__value{font-family:var(--fk-copyable-field-mono-font-family, var(--fk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], copyAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyAriaLabel", required: false }] }], copiedAnnouncement: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedAnnouncement", required: false }] }], copiedDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedDuration", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }], copyFailed: [{ type: i0.Output, args: ["copyFailed"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CopyableFieldComponent };
+//# sourceMappingURL=frame-kit-ui-ng-ui-copyable-field.mjs.map

package/fesm2022/frame-kit-ui-ng-ui-copyable-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-kit-ui-ng-ui-copyable-field.mjs","sources":["../../../../packages/ui-ng/ui/copyable-field/copyable-field.component.ts","../../../../packages/ui-ng/ui/copyable-field/copyable-field.component.html","../../../../packages/ui-ng/ui/copyable-field/frame-kit-ui-ng-ui-copyable-field.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  HostBinding,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport type { CopyableFieldSize } from './copyable-field.types';\n\n/**\n * Displays a read-only value next to a copy-to-clipboard button.\n *\n * Use for showing secrets (API keys, tokens), IDs, URLs, and any value the\n * user will want to copy rather than re-type. After a successful copy the\n * copy-button icon swaps to a confirmation for `copiedDuration` ms and a\n * screen-reader announcement fires.\n *\n * The copy button ships with inline SVG icons for both states so the\n * component works standalone. Consumers can override either icon by\n * projecting their own element with the `fkCopyIcon` or `fkCopiedIcon`\n * attribute selector — for example an `fk-icon` wired to their own icon\n * registry:\n *\n * ```html\n * <fk-copyable-field [value]=\"apiKey\">\n *   <fk-icon fkCopyIcon name=\"clipboard-outline\" size=\"sm\" />\n *   <fk-icon fkCopiedIcon name=\"check-outline\" size=\"sm\" />\n * </fk-copyable-field>\n * ```\n */\n@Component({\n  selector: 'fk-copyable-field',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './copyable-field.component.html',\n  styleUrl: './copyable-field.component.scss',\n})\nexport class CopyableFieldComponent {\n  // ===== INPUTS =====\n  /** The string value displayed and written to the clipboard when the user copies. */\n  readonly value = input.required<string>();\n  /** Optional visible label rendered above the value field. */\n  readonly label = input<string | null>(null);\n  /** Controls the size variant of the field. */\n  readonly size = input<CopyableFieldSize>('md');\n  /** When true, the value is rendered in a monospace font. */\n  readonly mono = input<boolean>(true);\n  /** Accessible label for the copy button read by screen readers. */\n  readonly copyAriaLabel = input<string>('Copy to clipboard');\n  /** Screen-reader announcement text emitted after a successful copy. */\n  readonly copiedAnnouncement = input<string>('Copied to clipboard');\n  /** How long in milliseconds the \"copied\" confirmation state is shown. */\n  readonly copiedDuration = input<number>(2000);\n\n  // ===== BASE PROPS =====\n  readonly className = input<string>('');\n  readonly id = input<string | null>(null);\n  readonly ariaLabel = input<string | null>(null);\n\n  // ===== OUTPUTS =====\n  /** Fires after a successful clipboard write, emitting the copied value. */\n  readonly copied = output<string>();\n  /** Fires when the clipboard write fails, emitting the underlying error. */\n  readonly copyFailed = output<unknown>();\n\n  // ===== STATE =====\n  private readonly _isCopied = signal(false);\n  private copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n  readonly isCopied = this._isCopied.asReadonly();\n\n  // ===== COMPUTED =====\n  readonly classes = computed(() => {\n    return [\n      'fk-copyable-field',\n      `fk-copyable-field--${this.size()}`,\n      this.mono() ? 'fk-copyable-field--mono' : '',\n      this.className(),\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.classes();\n  }\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    destroyRef.onDestroy(() => {\n      this.clearCopyTimer();\n    });\n  }\n\n  /** Writes the current value to the clipboard and shows the copied confirmation state. */\n  async copy(): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(this.value());\n    } catch (error) {\n      this.copyFailed.emit(error);\n\n      return;\n    }\n\n    this._isCopied.set(true);\n    this.copied.emit(this.value());\n\n    this.clearCopyTimer();\n\n    this.copyTimer = setTimeout(() => {\n      this._isCopied.set(false);\n      this.copyTimer = null;\n    }, this.copiedDuration());\n  }\n\n  private clearCopyTimer(): void {\n    if (this.copyTimer) {\n      clearTimeout(this.copyTimer);\n      this.copyTimer = null;\n    }\n  }\n}\n","@if (label()) {\n  <span class=\"fk-copyable-field__label\">{{ label() }}</span>\n}\n\n<div class=\"fk-copyable-field__row\">\n  <span\n    class=\"fk-copyable-field__value\"\n    [id]=\"id() ?? undefined\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    {{ value() }}\n  </span>\n\n  <button\n    type=\"button\"\n    class=\"fk-copyable-field__action\"\n    [attr.aria-label]=\"copyAriaLabel()\"\n    (click)=\"copy()\"\n  >\n    @if (isCopied()) {\n      <ng-content select=\"[fkCopiedIcon]\">\n        <svg\n          class=\"fk-copyable-field__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3 8.5l3 3L13 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </ng-content>\n    } @else {\n      <ng-content select=\"[fkCopyIcon]\">\n        <svg\n          class=\"fk-copyable-field__icon\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <rect\n            x=\"5.25\"\n            y=\"5.25\"\n            width=\"8.5\"\n            height=\"8.5\"\n            rx=\"1.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.25\"\n          />\n          <path\n            d=\"M10 5.25V3.75A1.5 1.5 0 0 0 8.5 2.25h-5A1.5 1.5 0 0 0 2 3.75v5A1.5 1.5 0 0 0 3.5 10.25H5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.25\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      </ng-content>\n    }\n  </button>\n</div>\n\n<span class=\"fk-copyable-field__sr-only\" role=\"status\" aria-live=\"polite\">\n  @if (isCopied()) {\n    {{ copiedAnnouncement() }}\n  }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}