@taiga-ui/kit
Version:
Taiga UI Angular main components kit
78 lines • 13.3 kB
JavaScript
import { Clipboard } from '@angular/cdk/clipboard';
import { ChangeDetectionStrategy, Component, computed, inject, Input, signal, ViewEncapsulation, } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiDirectiveBinding, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiButton, tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { TUI_NOTIFICATION_OPTIONS } from '@taiga-ui/core/components/notification';
import { TuiHintDirective } from '@taiga-ui/core/directives/hint';
import { TUI_DARK_MODE } from '@taiga-ui/core/tokens';
import { TuiIcons } from '@taiga-ui/core/directives/icons';
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
import { toSignal } from '@angular/core/rxjs-interop';
import { NgIf } from '@angular/common';
import { TUI_COPY_OPTIONS } from './copy.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/components/button";
class TuiButtonCopyComponent {
constructor() {
this.el = tuiInjectElement();
this.clipboard = inject(Clipboard);
this.options = inject(TUI_COPY_OPTIONS);
this.copyTexts = toSignal(inject(TUI_COPY_TEXTS));
this.notification = inject(TUI_NOTIFICATION_OPTIONS);
this.hint = inject(TuiHintDirective);
this.check = tuiIsString(this.notification.icon)
? this.notification.icon
: this.notification.icon('positive');
this.appearance = this.hint.appearance ||
this.hint.el.closest('[tuiTheme]')?.getAttribute('tuiTheme');
this.darkMode = inject(TUI_DARK_MODE);
this.copied = signal(false);
this.copiedText = computed(() => this.copyTexts()?.[1] ?? '');
this.icon = tuiDirectiveBinding(TuiIcons, 'iconStart', computed(() => {
if (this.copied()) {
return this.check;
}
return typeof this.options.icon === 'string'
? this.options.icon
: this.options.icon('s');
}));
this.tuiButtonCopy = '';
}
copy(target) {
const copied = this.el === target;
if (copied) {
this.clipboard.copy(this.tuiButtonCopy);
}
this.copied.set(copied);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiButtonCopyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiButtonCopyComponent, isStandalone: true, selector: "[tuiButtonCopy]", inputs: { tuiButtonCopy: "tuiButtonCopy" }, host: { attributes: { "tuiButton": "", "type": "button" }, listeners: { "document:click.capture": "copy($event.target)" }, properties: { "attr.tuiTheme": "appearance === \"dark\" ? \"light\" : darkMode() ? \"light\" : \"dark\"" } }, providers: [tuiButtonOptionsProvider({ appearance: 'flat-grayscale', size: 's' })], hostDirectives: [{ directive: i1.TuiButton }], ngImport: i0, template: `
<ng-container *ngIf="copied(); else notCopied">
{{ copiedText() }}
</ng-container>
<ng-template #notCopied>
<ng-content />
</ng-template>
`, isInline: true, styles: ["tui-hint:has([tuiButtonCopy]){display:flex;padding:.375rem;max-inline-size:none}[tuiButtonCopy]:not(:first-of-type){margin-inline-start:calc(.75rem - 1px);border-image:linear-gradient(transparent .375rem,var(--tui-border-normal) .375rem,var(--tui-border-normal) calc(100% - .375rem),transparent calc(100% - .375rem)) 0 0 0 1 / 0 1px / 0 .375rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiButtonCopyComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiButtonCopyComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: '[tuiButtonCopy]', imports: [NgIf], template: `
<ng-container *ngIf="copied(); else notCopied">
{{ copiedText() }}
</ng-container>
<ng-template #notCopied>
<ng-content />
</ng-template>
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiButtonOptionsProvider({ appearance: 'flat-grayscale', size: 's' })], hostDirectives: [TuiButton], host: {
tuiButton: '',
type: 'button',
'[attr.tuiTheme]': 'appearance === "dark" ? "light" : darkMode() ? "light" : "dark"',
'(document:click.capture)': 'copy($event.target)',
}, styles: ["tui-hint:has([tuiButtonCopy]){display:flex;padding:.375rem;max-inline-size:none}[tuiButtonCopy]:not(:first-of-type){margin-inline-start:calc(.75rem - 1px);border-image:linear-gradient(transparent .375rem,var(--tui-border-normal) .375rem,var(--tui-border-normal) calc(100% - .375rem),transparent calc(100% - .375rem)) 0 0 0 1 / 0 1px / 0 .375rem}\n"] }]
}], propDecorators: { tuiButtonCopy: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLWNvcHkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2RpcmVjdGl2ZXMvY29weS9idXR0b24tY29weS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQ2pELE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFFBQVEsRUFDUixNQUFNLEVBQ04sS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLG1CQUFtQixFQUFFLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQ25GLE9BQU8sRUFBQyxTQUFTLEVBQUUsd0JBQXdCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRixPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUNoRixPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNoRSxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDcEQsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3pELE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUNwRCxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDcEQsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBRXJDLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLGdCQUFnQixDQUFDOzs7QUFFaEQsTUF5QmEsc0JBQXNCO0lBekJuQztRQTBCcUIsT0FBRSxHQUFHLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsY0FBUyxHQUFH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Q2xpcGJvYXJkfSBmcm9tICdAYW5ndWxhci9jZGsvY2xpcGJvYXJkJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIGNvbXB1dGVkLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBzaWduYWwsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge3R1aURpcmVjdGl2ZUJpbmRpbmcsIHR1aUlzU3RyaW5nfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtUdWlCdXR0b24sIHR1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUVUlfTk9USUZJQ0FUSU9OX09QVElPTlN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvbm90aWZpY2F0aW9uJztcbmltcG9ydCB7VHVpSGludERpcmVjdGl2ZX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9oaW50JztcbmltcG9ydCB7VFVJX0RBUktfTU9ERX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdG9rZW5zJztcbmltcG9ydCB7VHVpSWNvbnN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2RpcmVjdGl2ZXMvaWNvbnMnO1xuaW1wb3J0IHtUVUlfQ09QWV9URVhUU30gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuaW1wb3J0IHt0b1NpZ25hbH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHtOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5pbXBvcnQge1RVSV9DT1BZX09QVElPTlN9IGZyb20gJy4vY29weS5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ1t0dWlCdXR0b25Db3B5XScsXG4gICAgaW1wb3J0czogW05nSWZdLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjb3BpZWQoKTsgZWxzZSBub3RDb3BpZWRcIj5cbiAgICAgICAgICAgIHt7IGNvcGllZFRleHQoKSB9fVxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNub3RDb3BpZWQ+XG4gICAgICAgICAgICA8bmctY29udGVudCAvPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIGAsXG4gICAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLWNvcHkuc3R5bGVzLmxlc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW3R1aUJ1dHRvbk9wdGlvbnNQcm92aWRlcih7YXBwZWFyYW5jZTogJ2ZsYXQtZ3JheXNjYWxlJywgc2l6ZTogJ3MnfSldLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbVHVpQnV0dG9uXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHR1aUJ1dHRvbjogJycsXG4gICAgICAgIHR5cGU6ICdidXR0b24nLFxuICAgICAgICAnW2F0dHIudHVpVGhlbWVdJzpcbiAgICAgICAgICAgICdhcHBlYXJhbmNlID09PSBcImRhcmtcIiA/IFwibGlnaHRcIiA6IGRhcmtNb2RlKCkgPyBcImxpZ2h0XCIgOiBcImRhcmtcIicsXG4gICAgICAgICcoZG9jdW1lbnQ6Y2xpY2suY2FwdHVyZSknOiAnY29weSgkZXZlbnQudGFyZ2V0KScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQnV0dG9uQ29weUNvbXBvbmVudCB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNsaXBib2FyZCA9IGluamVjdChDbGlwYm9hcmQpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3B0aW9ucyA9IGluamVjdChUVUlfQ09QWV9PUFRJT05TKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNvcHlUZXh0cyA9IHRvU2lnbmFsKGluamVjdChUVUlfQ09QWV9URVhUUykpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgbm90aWZpY2F0aW9uID0gaW5qZWN0KFRVSV9OT1RJRklDQVRJT05fT1BUSU9OUyk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBoaW50ID0gaW5qZWN0KFR1aUhpbnREaXJlY3RpdmUpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBjaGVjayA9IHR1aUlzU3RyaW5nKHRoaXMubm90aWZpY2F0aW9uLmljb24pXG4gICAgICAgID8gdGhpcy5ub3RpZmljYXRpb24uaWNvblxuICAgICAgICA6IHRoaXMubm90aWZpY2F0aW9uLmljb24oJ3Bvc2l0aXZlJyk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgYXBwZWFyYW5jZSA9XG4gICAgICAgIHRoaXMuaGludC5hcHBlYXJhbmNlIHx8XG4gICAgICAgIHRoaXMuaGludC5lbC5jbG9zZXN0KCdbdHVpVGhlbWVdJyk/LmdldEF0dHJpYnV0ZSgndHVpVGhlbWUnKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBkYXJrTW9kZSA9IGluamVjdChUVUlfREFSS19NT0RFKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBjb3BpZWQgPSBzaWduYWwoZmFsc2UpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBjb3BpZWRUZXh0ID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5jb3B5VGV4dHMoKT8uWzFdID8/ICcnKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaWNvbiA9IHR1aURpcmVjdGl2ZUJpbmRpbmcoXG4gICAgICAgIFR1aUljb25zLFxuICAgICAgICAnaWNvblN0YXJ0JyxcbiAgICAgICAgY29tcHV0ZWQoKCkgPT4ge1xuICAgICAgICAgICAgaWYgKHRoaXMuY29waWVkKCkpIHtcbiAgICAgICAgICAgICAgICByZXR1cm4gdGhpcy5jaGVjaztcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgcmV0dXJuIHR5cGVvZiB0aGlzLm9wdGlvbnMuaWNvbiA9PT0gJ3N0cmluZydcbiAgICAgICAgICAgICAgICA/IHRoaXMub3B0aW9ucy5pY29uXG4gICAgICAgICAgICAgICAgOiB0aGlzLm9wdGlvbnMuaWNvbigncycpO1xuICAgICAgICB9KSxcbiAgICApO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgdHVpQnV0dG9uQ29weSA9ICcnO1xuXG4gICAgcHJvdGVjdGVkIGNvcHkodGFyZ2V0OiBIVE1MRWxlbWVudCk6IHZvaWQge1xuICAgICAgICBjb25zdCBjb3BpZWQgPSB0aGlzLmVsID09PSB0YXJnZXQ7XG5cbiAgICAgICAgaWYgKGNvcGllZCkge1xuICAgICAgICAgICAgdGhpcy5jbGlwYm9hcmQuY29weSh0aGlzLnR1aUJ1dHRvbkNvcHkpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5jb3BpZWQuc2V0KGNvcGllZCk7XG4gICAgfVxufVxuIl19