@taiga-ui/kit
Version:
Taiga UI Angular main components kit
172 lines (163 loc) • 16.2 kB
JavaScript
import * as i1$1 from '@angular/cdk/clipboard';
import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
import * as i0 from '@angular/core';
import { inject, signal, computed, input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive } from '@angular/core';
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/components/button';
import { tuiButtonOptionsProvider, TuiButton } from '@taiga-ui/core/components/button';
import { TUI_NOTIFICATION_OPTIONS } from '@taiga-ui/core/components/notification';
import { tuiIconStart, tuiIconEnd } from '@taiga-ui/core/directives/icons';
import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
import { tuiCreateOptions, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import * as i2 from '@taiga-ui/core/portals/hint';
import { TuiHint, TuiHintDirective } from '@taiga-ui/core/portals/hint';
import { BehaviorSubject, switchMap, timer, map, startWith, Subject } from 'rxjs';
import { TuiTextfieldComponent } from '@taiga-ui/core/components/textfield';
import * as i1$2 from '@taiga-ui/core/directives/appearance';
import { TUI_APPEARANCE_OPTIONS, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
const [TUI_COPY_OPTIONS, tuiCopyOptionsProvider] = tuiCreateOptions({
icon: '@tui.copy',
});
class TuiButtonCopy {
constructor() {
this.el = tuiInjectElement();
this.clipboard = inject(Clipboard);
this.options = inject(TUI_COPY_OPTIONS);
this.copyTexts = inject(TUI_COPY_TEXTS);
this.notification = inject(TUI_NOTIFICATION_OPTIONS);
this.check = tuiIsString(this.notification.icon)
? this.notification.icon
: this.notification.icon('positive');
this.copied = signal(false);
this.copiedText = computed(() => this.copyTexts()[1]);
this.icon = tuiIconStart(computed(() => (this.copied() ? this.check : this.options.icon)));
this.tuiButtonCopy = input('');
}
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: "19.2.21", ngImport: i0, type: TuiButtonCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiButtonCopy, isStandalone: true, selector: "[tuiButtonCopy]", inputs: { tuiButtonCopy: { classPropertyName: "tuiButtonCopy", publicName: "tuiButtonCopy", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiButton": "", "type": "button" }, listeners: { "document:click.capture": "copy($event.target)" } }, providers: [tuiButtonOptionsProvider({ appearance: 'flat-grayscale', size: 's' })], hostDirectives: [{ directive: i1.TuiButton }], ngImport: i0, template: `
@if (copied()) {
{{ copiedText() }}
} @else {
<ng-content />
}
`, isInline: true, styles: ["tui-hint:has([tuiButtonCopy]):where(*[data-tui-version=\"5.7.0\"]){display:flex;padding:.375rem;max-inline-size:none}[tuiButtonCopy]:where(*[data-tui-version=\"5.7.0\"]):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"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiButtonCopy, decorators: [{
type: Component,
args: [{ selector: '[tuiButtonCopy]', template: `
@if (copied()) {
{{ copiedText() }}
} @else {
<ng-content />
}
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiButtonOptionsProvider({ appearance: 'flat-grayscale', size: 's' })], hostDirectives: [TuiButton], host: {
tuiButton: '',
type: 'button',
'(document:click.capture)': 'copy($event.target)',
}, styles: ["tui-hint:has([tuiButtonCopy]):where(*[data-tui-version=\"5.7.0\"]){display:flex;padding:.375rem;max-inline-size:none}[tuiButtonCopy]:where(*[data-tui-version=\"5.7.0\"]):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"] }]
}] });
class TuiCopyComponent {
constructor() {
this.notification = inject(TUI_NOTIFICATION_OPTIONS);
this.options = inject(TUI_COPY_OPTIONS);
this.copied$ = new BehaviorSubject(false);
this.texts = inject(TUI_COPY_TEXTS);
this.hint = toSignal(this.copied$.pipe(switchMap((copied) => timer(2000).pipe(map(TUI_FALSE_HANDLER), startWith(copied)))));
this.size = input('m');
}
get check() {
return tuiIsString(this.notification.icon)
? this.notification.icon
: this.notification.icon('positive');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiCopyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TuiCopyComponent, isStandalone: true, selector: "tui-copy", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "copied$.next(false)" }, properties: { "attr.data-size": "size()" } }, ngImport: i0, template: "<span\n #content\n tuiHintAppearance=\"floating\"\n tuiHintDirection=\"top\"\n class=\"t-content\"\n [cdkCopyToClipboard]=\"content.textContent ?? ''\"\n [tuiHint]=\"template\"\n [tuiHintManual]=\"!!hint()\"\n (cdkCopyToClipboardCopied)=\"copied$.next($event)\"\n>\n <ng-content />\n</span>\n<button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [attr.aria-label]=\"texts()[0]\"\n [cdkCopyToClipboard]=\"content.textContent ?? ''\"\n [iconStart]=\"options.icon\"\n (cdkCopyToClipboardCopied)=\"copied$.next($event)\"\n></button>\n<ng-template #template>\n <tui-icon\n class=\"t-icon\"\n [icon]=\"check\"\n />\n {{ texts()[1] }}\n</ng-template>\n", styles: [":host{cursor:pointer}:host[data-size=m]{--t-size: min( calc(1em + 1px) , 1rem)}:host[data-size=l]{--t-size: max(calc(1em / 1.57), min(max(calc(1em / 1.18), 1.25rem), 1.5rem))}@media(hover:hover)and (pointer:fine){:host:hover .t-content{opacity:var(--tui-disabled-opacity);-webkit-mask-position:0;mask-position:0}:host:hover .t-button{opacity:1}}:host:has(.t-button:focus-visible) .t-content{opacity:var(--tui-disabled-opacity);-webkit-mask-position:0;mask-position:0}.t-content{transition-property:opacity,mask;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-mask-image:linear-gradient(to var(--tui-inline-start),transparent calc(1.25 * var(--t-size)),black calc(2 * var(--t-size))),linear-gradient(to var(--tui-inline-end),black,black calc(2 * var(--t-size)),transparent calc(2 * var(--t-size)));mask-image:linear-gradient(to var(--tui-inline-start),transparent calc(1.25 * var(--t-size)),black calc(2 * var(--t-size))),linear-gradient(to var(--tui-inline-end),black,black calc(2 * var(--t-size)),transparent calc(2 * var(--t-size)));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:calc(var(--tui-inline) * 2 * var(--t-size)),0;mask-position:calc(var(--tui-inline) * 2 * var(--t-size)),0}.t-button{position:sticky;inset-inline-start:0;opacity:0;border-radius:0;font-size:inherit!important;margin-inline-start:calc(-1 * var(--t-size));--t-size: inherit}.t-button:before{font-size:var(--t-size)}.t-button:focus-visible{opacity:1}.t-icon{font-size:1rem;margin-inline-end:.25rem;vertical-align:sub;color:var(--tui-text-positive)}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i2.TuiHintManual, selector: "[tuiHint][tuiHintManual]", inputs: ["tuiHintManual"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiCopyComponent, decorators: [{
type: Component,
args: [{ selector: 'tui-copy', imports: [ClipboardModule, TuiButton, TuiHint, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-size]': 'size()',
'(pointerdown)': 'copied$.next(false)',
}, template: "<span\n #content\n tuiHintAppearance=\"floating\"\n tuiHintDirection=\"top\"\n class=\"t-content\"\n [cdkCopyToClipboard]=\"content.textContent ?? ''\"\n [tuiHint]=\"template\"\n [tuiHintManual]=\"!!hint()\"\n (cdkCopyToClipboardCopied)=\"copied$.next($event)\"\n>\n <ng-content />\n</span>\n<button\n appearance=\"icon\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [attr.aria-label]=\"texts()[0]\"\n [cdkCopyToClipboard]=\"content.textContent ?? ''\"\n [iconStart]=\"options.icon\"\n (cdkCopyToClipboardCopied)=\"copied$.next($event)\"\n></button>\n<ng-template #template>\n <tui-icon\n class=\"t-icon\"\n [icon]=\"check\"\n />\n {{ texts()[1] }}\n</ng-template>\n", styles: [":host{cursor:pointer}:host[data-size=m]{--t-size: min( calc(1em + 1px) , 1rem)}:host[data-size=l]{--t-size: max(calc(1em / 1.57), min(max(calc(1em / 1.18), 1.25rem), 1.5rem))}@media(hover:hover)and (pointer:fine){:host:hover .t-content{opacity:var(--tui-disabled-opacity);-webkit-mask-position:0;mask-position:0}:host:hover .t-button{opacity:1}}:host:has(.t-button:focus-visible) .t-content{opacity:var(--tui-disabled-opacity);-webkit-mask-position:0;mask-position:0}.t-content{transition-property:opacity,mask;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-mask-image:linear-gradient(to var(--tui-inline-start),transparent calc(1.25 * var(--t-size)),black calc(2 * var(--t-size))),linear-gradient(to var(--tui-inline-end),black,black calc(2 * var(--t-size)),transparent calc(2 * var(--t-size)));mask-image:linear-gradient(to var(--tui-inline-start),transparent calc(1.25 * var(--t-size)),black calc(2 * var(--t-size))),linear-gradient(to var(--tui-inline-end),black,black calc(2 * var(--t-size)),transparent calc(2 * var(--t-size)));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:calc(var(--tui-inline) * 2 * var(--t-size)),0;mask-position:calc(var(--tui-inline) * 2 * var(--t-size)),0}.t-button{position:sticky;inset-inline-start:0;opacity:0;border-radius:0;font-size:inherit!important;margin-inline-start:calc(-1 * var(--t-size));--t-size: inherit}.t-button:before{font-size:var(--t-size)}.t-button:focus-visible{opacity:1}.t-icon{font-size:1rem;margin-inline-end:.25rem;vertical-align:sub;color:var(--tui-text-positive)}\n"] }]
}] });
class TuiCopyDirective {
constructor() {
this.copied$ = new Subject();
this.clipboard = inject(Clipboard);
this.stringify = inject(TUI_ITEMS_HANDLERS).stringify;
this.textfield = inject(TuiTextfieldComponent);
this.icons = tuiIconEnd(inject(TUI_COPY_OPTIONS).icon);
this.copyTexts = inject(TUI_COPY_TEXTS);
this.hint = tuiDirectiveBinding(TuiHintDirective, 'content', toSignal(toObservable(inject(TUI_COPY_TEXTS)).pipe(switchMap(([copy, copied]) => this.copied$.pipe(switchMap(() => timer(3000).pipe(map(() => copy), startWith(copied))), startWith(copy)))), { initialValue: '' }));
}
get hasValue() {
return this.multi
? !!this.textfield.control()?.value.length
: !!this.textfield.value();
}
copy() {
if (this.multi) {
this.clipboard.copy(this.textfield.control()?.value.map(this.stringify()).join(', '));
}
else {
this.textfield.input()?.nativeElement.select();
this.clipboard.copy(this.textfield.value());
}
this.copied$.next();
}
get multi() {
return Array.isArray(this.textfield.control()?.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiCopyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiCopyDirective, isStandalone: true, selector: "tui-icon[tuiCopy]", host: { listeners: { "click": "copy()" }, properties: { "style.border-width.rem": "textfield.options.size() === \"l\" ? null : 0.25", "style.opacity": "hasValue ? null : \"var(--tui-disabled-opacity)\"", "style.pointer-events": "hasValue ? null : \"none\"" }, styleAttribute: "cursor: pointer" }, providers: [
{
provide: TUI_APPEARANCE_OPTIONS,
useValue: { appearance: 'icon' },
},
], hostDirectives: [{ directive: i1$2.TuiWithAppearance }, { directive: i2.TuiHintDirective, inputs: ["tuiHintAppearance", "tuiHintAppearance", "tuiHintContext", "tuiHintContext"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiCopyDirective, decorators: [{
type: Directive,
args: [{
selector: 'tui-icon[tuiCopy]',
providers: [
{
provide: TUI_APPEARANCE_OPTIONS,
useValue: { appearance: 'icon' },
},
],
hostDirectives: [
TuiWithAppearance,
{
directive: TuiHintDirective,
inputs: ['tuiHintAppearance', 'tuiHintContext'],
},
],
host: {
style: 'cursor: pointer',
'[style.border-width.rem]': 'textfield.options.size() === "l" ? null : 0.25',
'[style.opacity]': 'hasValue ? null : "var(--tui-disabled-opacity)"',
'[style.pointer-events]': 'hasValue ? null : "none"',
'(click)': 'copy()',
},
}]
}] });
const TuiCopy = [TuiCopyComponent, TuiCopyDirective, TuiButtonCopy];
// TODO: Move to components in v5
/**
* Generated bundle index. Do not edit.
*/
export { TUI_COPY_OPTIONS, TuiButtonCopy, TuiCopy, TuiCopyComponent, TuiCopyDirective, tuiCopyOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-copy.mjs.map