flowbite-angular/fesm2022/flowbite-angular-clipboard.mjs

<div align="center"> <h1>flowbite-angular</h1> <p> Build websites even faster with components on top of Angular and Tailwind CSS </p> <p> <a href="https://discord.com/invite/4eeurUVvTy"> <img src="https://img.shields.io/discord/90291

import { createTheme, mergeDeep } from 'flowbite-angular';
import * as i0 from '@angular/core';
import { InjectionToken, inject, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
import { Button } from 'flowbite-angular/button';
import { Icon } from 'flowbite-angular/icon';
import { fileCopy } from 'flowbite-angular/icon/outline/files-folders';
import { Tooltip } from 'flowbite-angular/tooltip';
import { Clipboard as Clipboard$1 } from '@angular/cdk/clipboard';
import { provideIcons } from '@ng-icons/core';
import { NgpTooltipTrigger } from 'ng-primitives/tooltip';
import { twMerge } from 'tailwind-merge';

const flowbiteClipboardTheme = createTheme({
    host: {
        base: 'w-full max-w-[16rem]',
        transition: '',
    },
});

const defaultFlowbiteClipboardConfig = {
    baseTheme: flowbiteClipboardTheme,
    customTheme: {},
};
const FlowbiteClipboardConfigToken = new InjectionToken('FlowbiteClipboardConfigToken');
/**
 * Provide the default Clipboard configuration
 * @param config The Clipboard configuration
 * @returns The provider
 */
const provideFlowbiteClipboardConfig = (config) => [
    {
        provide: FlowbiteClipboardConfigToken,
        useValue: { ...defaultFlowbiteClipboardConfig, ...config },
    },
];
/**
 * Inject the Clipboard configuration
 * @see {@link defaultFlowbiteClipboardConfig}
 * @returns The configuration
 */
const injectFlowbiteClipboardConfig = () => inject(FlowbiteClipboardConfigToken, { optional: true }) ?? defaultFlowbiteClipboardConfig;

const FlowbiteClipboardStateToken = createStateToken('Flowbite Clipboard');
const provideFlowbiteClipboardState = createStateProvider(FlowbiteClipboardStateToken);
const injectFlowbiteClipboardState = createStateInjector(FlowbiteClipboardStateToken);
const flowbiteClipboardState = createState(FlowbiteClipboardStateToken);

class Clipboard {
    constructor() {
        this.config = injectFlowbiteClipboardConfig();
        this.clipboard = inject(Clipboard$1);
        this.id = input();
        this.value = input();
        /**
         * @see {@link injectFlowbiteClipboardConfig}
         */
        this.customTheme = input(this.config.customTheme);
        this.theme = computed(() => {
            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
            return {
                host: {
                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition),
                },
            };
        });
        /**
         * @internal
         */
        this.state = flowbiteClipboardState(this);
    }
    /**
     * @internal
     */
    onClick() {
        this.copyToClipboard();
    }
    /**
     * @internal
     */
    copyToClipboard() {
        const value = this.value();
        if (value) {
            this.clipboard.copy(value);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Clipboard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Clipboard, isStandalone: true, selector: "\n    div[flowbiteClipboard]\n  ", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteClipboardState(), provideIcons({ fileCopy })], exportAs: ["flowbiteClipboard"], ngImport: i0, template: `
    <div
      [ngpTooltipTrigger]="tooltip"
      class="flex flex-row *:first:rounded-l-md *:last:rounded-none *:last:rounded-r-md">
      <input
        [id]="id()"
        [name]="id()"
        [value]="value()"
        type="text"
        class="block w-full border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400"
        disabled
        readonly />
      <label
        [for]="id()"
        class="sr-only">
        Label
      </label>
      <button
        flowbiteButton
        color="default">
        <flowbite-icon
          name="fileCopy"
          class="size-4 stroke-2" />
      </button>
    </div>
    <ng-template #tooltip>
      <div flowbiteTooltip>Copy to clipboard</div>
    </ng-template>
  `, isInline: true, dependencies: [{ kind: "directive", type: Button, selector: "    button[flowbiteButton],    a[flowbiteButton]  ", inputs: ["customTheme"], exportAs: ["flowbiteButton"] }, { kind: "component", type: Icon, selector: "flowbite-icon", inputs: ["name", "svg", "color", "customTheme"], exportAs: ["flowbiteIcon"] }, { kind: "directive", type: NgpTooltipTrigger, selector: "[ngpTooltipTrigger]", inputs: ["ngpTooltipTrigger", "ngpTooltipTriggerDisabled", "ngpTooltipTriggerPlacement", "ngpTooltipTriggerOffset", "ngpTooltipTriggerShowDelay", "ngpTooltipTriggerHideDelay", "ngpTooltipTriggerFlip", "ngpTooltipTriggerContainer", "ngpTooltipTriggerContext"], exportAs: ["ngpTooltipTrigger"] }, { kind: "directive", type: Tooltip, selector: "    [flowbiteTooltip]  ", inputs: ["color", "customTheme"], exportAs: ["flowbiteTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Clipboard, decorators: [{
            type: Component,
            args: [{
                    standalone: true,
                    selector: `
    div[flowbiteClipboard]
  `,
                    exportAs: 'flowbiteClipboard',
                    hostDirectives: [],
                    imports: [Button, Icon, NgpTooltipTrigger, Tooltip],
                    providers: [provideFlowbiteClipboardState(), provideIcons({ fileCopy })],
                    host: {
                        '[class]': `theme().host.root`,
                        '(click)': 'onClick()',
                    },
                    template: `
    <div
      [ngpTooltipTrigger]="tooltip"
      class="flex flex-row *:first:rounded-l-md *:last:rounded-none *:last:rounded-r-md">
      <input
        [id]="id()"
        [name]="id()"
        [value]="value()"
        type="text"
        class="block w-full border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400"
        disabled
        readonly />
      <label
        [for]="id()"
        class="sr-only">
        Label
      </label>
      <button
        flowbiteButton
        color="default">
        <flowbite-icon
          name="fileCopy"
          class="size-4 stroke-2" />
      </button>
    </div>
    <ng-template #tooltip>
      <div flowbiteTooltip>Copy to clipboard</div>
    </ng-template>
  `,
                    encapsulation: ViewEncapsulation.None,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

/* Clipboard */

/**
 * Generated bundle index. Do not edit.
 */

export { Clipboard, FlowbiteClipboardConfigToken, FlowbiteClipboardStateToken, defaultFlowbiteClipboardConfig, flowbiteClipboardState, flowbiteClipboardTheme, injectFlowbiteClipboardConfig, injectFlowbiteClipboardState, provideFlowbiteClipboardConfig, provideFlowbiteClipboardState };
//# sourceMappingURL=flowbite-angular-clipboard.mjs.map