mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kam
e4ffb24ecb
The copy link button rendered its icon as a Material Symbols ligature text node, and since the button is appended inside each heading's `.docs-anchor`, that text leaked into the heading and the Algolia crawler indexed values like `Descriptionlink`. The glyph is now rendered via a `::before` pseudo-element using the icon codepoint, so no `link`/`check` text exists in the DOM and headings index correctly again.
73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
/*!
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {Clipboard} from '@angular/cdk/clipboard';
|
|
import {Component, inject, input, signal} from '@angular/core';
|
|
import {MatTooltip} from '@angular/material/tooltip';
|
|
import {IconComponent} from '../icon/icon.component';
|
|
|
|
export const CONFIRMATION_DISPLAY_TIME_MS = 1000;
|
|
|
|
@Component({
|
|
selector: 'docs-copy-link-button',
|
|
template: `<docs-icon></docs-icon>`,
|
|
styles: `
|
|
:host {
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-left: 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
color: var(--quaternary-contrast);
|
|
vertical-align: middle;
|
|
}
|
|
:host(.docs-copy-link-success) {
|
|
color: var(--bright-blue);
|
|
}
|
|
docs-icon::before {
|
|
content: '\\e250'; /* codepoint for "link" */
|
|
font-family: 'Material Symbols Outlined';
|
|
}
|
|
:host(.docs-copy-link-success) docs-icon::before {
|
|
content: '\\e668'; /* codepoint for "check" */
|
|
}
|
|
`,
|
|
hostDirectives: [
|
|
{
|
|
directive: MatTooltip,
|
|
inputs: ['matTooltip'],
|
|
},
|
|
],
|
|
host: {
|
|
'[ariaLabel]': '"Copy link to " + label()',
|
|
'(click)': 'copyLink()',
|
|
'matTooltipPosition': 'above',
|
|
'[class.docs-copy-link-success]': 'showCopySuccess()',
|
|
},
|
|
imports: [IconComponent],
|
|
})
|
|
export class CopyLinkButton {
|
|
readonly href = input.required<string>();
|
|
readonly label = input.required<string>();
|
|
|
|
protected readonly showCopySuccess = signal(false);
|
|
|
|
private readonly clipboard = inject(Clipboard);
|
|
|
|
copyLink(): void {
|
|
const link = `${window.location.origin}${this.href()}`;
|
|
this.clipboard.copy(link);
|
|
this.showCopySuccess.set(true);
|
|
setTimeout(() => {
|
|
this.showCopySuccess.set(false);
|
|
}, CONFIRMATION_DISPLAY_TIME_MS);
|
|
}
|
|
}
|