Skip to content

Commit 01bb9b6

Browse files
authored
fix(input): clipboard modification on macos (#DS-3087) (#797)
1 parent f24814e commit 01bb9b6

File tree

12 files changed

+68
-59
lines changed

12 files changed

+68
-59
lines changed

packages/components-dev/all/module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { KbqMomentDateModule } from '@koobiq/angular-moment-adapter/adapter';
55
import { KbqButtonModule } from '@koobiq/components/button';
66
import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
77
import { KbqCheckboxModule } from '@koobiq/components/checkbox';
8-
import { PopUpPlacements, ThemePalette } from '@koobiq/components/core';
8+
import { KbqNormalizeWhitespace, PopUpPlacements, ThemePalette } from '@koobiq/components/core';
99
import { KbqDropdownModule } from '@koobiq/components/dropdown';
1010
import { KbqFormFieldModule } from '@koobiq/components/form-field';
1111
import { KbqIconModule } from '@koobiq/components/icon';
12-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
12+
import { KbqInputModule } from '@koobiq/components/input';
1313
import { KbqLinkModule } from '@koobiq/components/link';
1414
import { KbqListModule } from '@koobiq/components/list';
1515
import { KbqMarkdownModule } from '@koobiq/components/markdown';
@@ -71,7 +71,7 @@ const MAX_PERCENT: number = 100;
7171
KbqToggleModule,
7272
KbqToolTipModule,
7373
KbqTreeModule,
74-
kbqNormalizeWhitespace
74+
KbqNormalizeWhitespace
7575
],
7676
selector: 'dev-app',
7777
templateUrl: './template.html',

packages/components-dev/form-field/module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
22
import { FormsModule } from '@angular/forms';
33
import { COMMA, ENTER, SPACE, TAB } from '@koobiq/cdk/keycodes';
44
import { KbqAutocompleteModule } from '@koobiq/components/autocomplete';
5-
import { KbqHighlightModule, KbqPseudoCheckboxModule } from '@koobiq/components/core';
5+
import { KbqHighlightModule, KbqNormalizeWhitespace, KbqPseudoCheckboxModule } from '@koobiq/components/core';
66
import { KbqFormFieldModule } from '@koobiq/components/form-field';
77
import { KbqIconModule } from '@koobiq/components/icon';
8-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
8+
import { KbqInputModule } from '@koobiq/components/input';
99
import { KbqSelectModule } from '@koobiq/components/select';
1010
import { KbqTagsModule } from '@koobiq/components/tags';
1111
import { KbqToolTipModule } from '@koobiq/components/tooltip';
@@ -116,7 +116,7 @@ const DATA_OBJECT = {
116116
KbqTreeSelectModule,
117117
KbqPseudoCheckboxModule,
118118
KbqAutocompleteModule,
119-
kbqNormalizeWhitespace
119+
KbqNormalizeWhitespace
120120
],
121121
selector: 'dev-app',
122122
templateUrl: './template.html',

packages/components-dev/input/module.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ import {
1010
} from '@angular/core';
1111
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
1212
import { KbqButtonModule } from '@koobiq/components/button';
13-
import { KBQ_LOCALE_SERVICE, KbqLocaleService, KbqLocaleServiceModule } from '@koobiq/components/core';
13+
import {
14+
KBQ_LOCALE_SERVICE,
15+
KbqLocaleService,
16+
KbqLocaleServiceModule,
17+
KbqNormalizeWhitespace
18+
} from '@koobiq/components/core';
1419
import {
1520
KbqFormField,
1621
KbqFormFieldModule,
@@ -19,7 +24,7 @@ import {
1924
hasPasswordStrengthError
2025
} from '@koobiq/components/form-field';
2126
import { KbqIconModule } from '@koobiq/components/icon';
22-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
27+
import { KbqInputModule } from '@koobiq/components/input';
2328
import { KbqToolTipModule } from '@koobiq/components/tooltip';
2429
import { startWith } from 'rxjs';
2530
import { InputExamplesModule } from '../../docs-examples/components/input';
@@ -49,7 +54,7 @@ export class DevExamples {}
4954
KbqToolTipModule,
5055
KbqIconModule,
5156
DevExamples,
52-
kbqNormalizeWhitespace
57+
KbqNormalizeWhitespace
5358
],
5459
selector: 'dev-app',
5560
templateUrl: './template.html',

packages/components-dev/number-formatter/module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33
import { KbqButtonModule } from '@koobiq/components/button';
4-
import { KbqFormattersModule, KbqLocaleServiceModule } from '@koobiq/components/core';
4+
import { KbqFormattersModule, KbqLocaleServiceModule, KbqNormalizeWhitespace } from '@koobiq/components/core';
55
import { KbqFormFieldModule } from '@koobiq/components/form-field';
6-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
6+
import { KbqInputModule } from '@koobiq/components/input';
77
import { DevLocaleSelector } from '../locale-selector';
88

99
@Component({
@@ -16,7 +16,7 @@ import { DevLocaleSelector } from '../locale-selector';
1616
KbqFormFieldModule,
1717
FormsModule,
1818
DevLocaleSelector,
19-
kbqNormalizeWhitespace
19+
KbqNormalizeWhitespace
2020
],
2121
selector: 'dev-app',
2222
templateUrl: './template.html',
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Directive, ElementRef, inject } from '@angular/core';
2+
3+
@Directive({
4+
standalone: true,
5+
selector: '[kbqNormalizeWhitespace]',
6+
host: {
7+
'(copy)': 'onCopy($event)'
8+
}
9+
})
10+
export class KbqNormalizeWhitespace {
11+
/** @docs-private */
12+
protected elementRef: ElementRef<HTMLElement> = inject(ElementRef);
13+
14+
/**
15+
* Replace thin-space with space on copy event
16+
*/
17+
onCopy($event: ClipboardEvent) {
18+
const value =
19+
(this.elementRef.nativeElement as HTMLInputElement).value || this.elementRef.nativeElement.textContent;
20+
21+
if ($event.type === 'copy' && value) {
22+
$event.preventDefault();
23+
$event.clipboardData?.setData('text', value?.replace(/\u2009/g, ' '));
24+
}
25+
}
26+
}

packages/components/core/common-behaviors/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { InjectionToken } from '@angular/core';
22

33
export * from './checkbox';
4+
export * from './clipboard';
45
export { CanColor, CanColorCtor, KbqColorDirective, KbqComponentColors, mixinColor, ThemePalette } from './color';
56
export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
67
export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';

packages/components/input/input-number.ts

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Clipboard } from '@angular/cdk/clipboard';
21
import { coerceBooleanProperty } from '@angular/cdk/coercion';
32
import {
43
Attribute,
@@ -7,7 +6,6 @@ import {
76
ElementRef,
87
EventEmitter,
98
forwardRef,
10-
inject,
119
Inject,
1210
Input,
1311
OnDestroy,
@@ -91,31 +89,6 @@ export const KBQ_NUMBER_INPUT_VALUE_ACCESSOR: any = {
9189
multi: true
9290
};
9391

94-
@Directive({
95-
standalone: true,
96-
selector: '[kbqNormalizeWhitespace]',
97-
host: {
98-
'(copy)': 'onCopy($event)'
99-
}
100-
})
101-
export class kbqNormalizeWhitespace {
102-
/** @docs-private */
103-
protected elementRef: ElementRef = inject(ElementRef);
104-
/** @docs-private */
105-
protected clipboard = inject(Clipboard);
106-
107-
/**
108-
* Replace thin-space with space on copy event
109-
*/
110-
onCopy($event: ClipboardEvent) {
111-
if ($event.type === 'copy' && (this.elementRef.nativeElement as HTMLInputElement).value) {
112-
$event.preventDefault();
113-
$event.stopPropagation();
114-
this.clipboard.copy(this.elementRef.nativeElement.value.replace(/\u2009/g, ' '));
115-
}
116-
}
117-
}
118-
11992
@Directive({
12093
selector: `input[kbqNumberInput]`,
12194
exportAs: 'kbqNumericalInput',

packages/docs-examples/components/filesize-formatter/filesize-formatter-overview/filesize-formatter-overview-example.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import {
66
KbqDataSizePipe,
77
KbqFormsModule,
88
KbqMeasurementSystem,
9+
KbqNormalizeWhitespace,
910
PopUpPlacements
1011
} from '@koobiq/components/core';
1112
import { KbqFormFieldModule } from '@koobiq/components/form-field';
1213
import { KbqIconModule } from '@koobiq/components/icon';
13-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
14+
import { KbqInputModule } from '@koobiq/components/input';
1415
import { KbqSelectModule } from '@koobiq/components/select';
1516
import { KbqToolTipModule } from '@koobiq/components/tooltip';
1617

@@ -29,7 +30,7 @@ import { KbqToolTipModule } from '@koobiq/components/tooltip';
2930
KbqFormsModule,
3031
KbqInputModule,
3132
KbqToolTipModule,
32-
kbqNormalizeWhitespace
33+
KbqNormalizeWhitespace
3334
],
3435
host: {
3536
class: 'example-filesize-formatter__container layout-gap-3xl layout-margin-bottom-s'

packages/docs-examples/components/input/input-number-overview/input-number-overview-example.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { KbqFormsModule } from '@koobiq/components/core';
3+
import { KbqFormsModule, KbqNormalizeWhitespace } from '@koobiq/components/core';
44
import { KbqFormFieldModule } from '@koobiq/components/form-field';
5-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
5+
import { KbqInputModule } from '@koobiq/components/input';
66

77
/**
88
* @title Input number
@@ -15,7 +15,7 @@ import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input
1515
KbqInputModule,
1616
FormsModule,
1717
KbqFormsModule,
18-
kbqNormalizeWhitespace
18+
KbqNormalizeWhitespace
1919
],
2020
template: `
2121
<div class="kbq-text-big">

packages/docs-examples/components/number-formatter/number-formatter-overview/number-formatter-overview-example.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { ChangeDetectorRef, Component, inject } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { KBQ_LOCALE_SERVICE, KbqFormattersModule, KbqLocaleService } from '@koobiq/components/core';
3+
import {
4+
KBQ_LOCALE_SERVICE,
5+
KbqFormattersModule,
6+
KbqLocaleService,
7+
KbqNormalizeWhitespace
8+
} from '@koobiq/components/core';
49
import { KbqFormFieldModule } from '@koobiq/components/form-field';
5-
import { KbqInputModule, kbqNormalizeWhitespace } from '@koobiq/components/input';
10+
import { KbqInputModule } from '@koobiq/components/input';
611
import { delay } from 'rxjs';
712
import { distinctUntilChanged } from 'rxjs/operators';
813

@@ -18,7 +23,7 @@ import { distinctUntilChanged } from 'rxjs/operators';
1823
KbqFormFieldModule,
1924
KbqFormattersModule,
2025
KbqInputModule,
21-
kbqNormalizeWhitespace
26+
KbqNormalizeWhitespace
2227
],
2328
styles: `
2429
:host {

tools/public_api_guard/components/core.api.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2026,6 +2026,16 @@ export class KbqMeasureScrollbarService {
20262026
static ɵprov: i0.ɵɵInjectableDeclaration<KbqMeasureScrollbarService>;
20272027
}
20282028

2029+
// @public (undocumented)
2030+
export class KbqNormalizeWhitespace {
2031+
protected elementRef: ElementRef<HTMLElement>;
2032+
onCopy($event: ClipboardEvent): void;
2033+
// (undocumented)
2034+
static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNormalizeWhitespace, "[kbqNormalizeWhitespace]", never, {}, {}, never, never, true, never>;
2035+
// (undocumented)
2036+
static ɵfac: i0.ɵɵFactoryDeclaration<KbqNormalizeWhitespace, never>;
2037+
}
2038+
20292039
// @public
20302040
export type KbqNumberFormatOptions = {
20312041
viewGroupSeparator?: string;

tools/public_api_guard/components/input.api.md

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import { AbstractControl } from '@angular/forms';
88
import { CanUpdateErrorState } from '@koobiq/components/core';
9-
import { Clipboard as Clipboard_2 } from '@angular/cdk/clipboard';
109
import { ControlValueAccessor } from '@angular/forms';
1110
import { DoCheck } from '@angular/core';
1211
import { ElementRef } from '@angular/core';
@@ -213,17 +212,6 @@ export class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, On
213212
static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputPassword, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
214213
}
215214

216-
// @public (undocumented)
217-
export class kbqNormalizeWhitespace {
218-
protected clipboard: Clipboard_2;
219-
protected elementRef: ElementRef;
220-
onCopy($event: ClipboardEvent): void;
221-
// (undocumented)
222-
static ɵdir: i0.ɵɵDirectiveDeclaration<kbqNormalizeWhitespace, "[kbqNormalizeWhitespace]", never, {}, {}, never, never, true, never>;
223-
// (undocumented)
224-
static ɵfac: i0.ɵɵFactoryDeclaration<kbqNormalizeWhitespace, never>;
225-
}
226-
227215
// @public (undocumented)
228216
export class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, OnDestroy {
229217
constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService?: KbqLocaleService | undefined);

0 commit comments

Comments
 (0)