@nuralyui/input 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/input.component.d.ts +14 -43
- package/input.component.d.ts.map +1 -1
- package/input.component.js +83 -219
- package/input.component.js.map +1 -1
- package/mixins/focus-mixin.d.ts +60 -0
- package/mixins/focus-mixin.d.ts.map +1 -0
- package/mixins/focus-mixin.js +65 -0
- package/mixins/focus-mixin.js.map +1 -0
- package/mixins/index.d.ts +9 -0
- package/mixins/index.d.ts.map +1 -0
- package/mixins/index.js +9 -0
- package/mixins/index.js.map +1 -0
- package/mixins/number-mixin.d.ts +51 -0
- package/mixins/number-mixin.d.ts.map +1 -0
- package/mixins/number-mixin.js +131 -0
- package/mixins/number-mixin.js.map +1 -0
- package/mixins/selection-mixin.d.ts +57 -0
- package/mixins/selection-mixin.d.ts.map +1 -0
- package/mixins/selection-mixin.js +80 -0
- package/mixins/selection-mixin.js.map +1 -0
- package/package.json +1 -1
package/input.component.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright 2023
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
4
|
* SPDX-License-Identifier: MIT
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement, PropertyValues } from 'lit';
|
|
7
|
-
import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT
|
|
8
|
-
import
|
|
9
|
-
declare
|
|
10
|
-
|
|
7
|
+
import { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT } from './input.types.js';
|
|
8
|
+
declare const InputBaseMixin: (new (...args: any[]) => import("./mixins/number-mixin.js").NumberCapable) & (new (...args: any[]) => import("./mixins/focus-mixin.js").FocusCapable) & (new (...args: any[]) => import("./mixins/selection-mixin.js").SelectionCapable) & (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
|
|
9
|
+
export declare class NrInputElement extends InputBaseMixin {
|
|
10
|
+
static styles: import("lit").CSSResult[];
|
|
11
11
|
disabled: boolean;
|
|
12
12
|
readonly: boolean;
|
|
13
13
|
state: INPUT_STATE;
|
|
@@ -28,7 +28,7 @@ export declare class NrInputElement extends NrInputElement_base {
|
|
|
28
28
|
hasAddonBefore: boolean;
|
|
29
29
|
hasAddonAfter: boolean;
|
|
30
30
|
focused: boolean;
|
|
31
|
-
|
|
31
|
+
private get _input();
|
|
32
32
|
/**
|
|
33
33
|
* Get the character count display text
|
|
34
34
|
*/
|
|
@@ -37,6 +37,14 @@ export declare class NrInputElement extends NrInputElement_base {
|
|
|
37
37
|
* Check if character count is over the limit
|
|
38
38
|
*/
|
|
39
39
|
get isOverCharacterLimit(): boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Get the input element
|
|
42
|
+
*/
|
|
43
|
+
protected get input(): HTMLInputElement;
|
|
44
|
+
/**
|
|
45
|
+
* Override inputElement getter from mixins to use our @query property
|
|
46
|
+
*/
|
|
47
|
+
protected get inputElement(): HTMLInputElement;
|
|
40
48
|
/**
|
|
41
49
|
* Required components that must be registered for this component to work properly
|
|
42
50
|
*/
|
|
@@ -56,42 +64,6 @@ export declare class NrInputElement extends NrInputElement_base {
|
|
|
56
64
|
* Handle slot changes to determine addon visibility
|
|
57
65
|
*/
|
|
58
66
|
private _handleSlotChange;
|
|
59
|
-
/**
|
|
60
|
-
* Focus the input with advanced options
|
|
61
|
-
*/
|
|
62
|
-
focus(options?: FocusOptions): void;
|
|
63
|
-
/**
|
|
64
|
-
* Blur the input with advanced options
|
|
65
|
-
*/
|
|
66
|
-
blur(options?: BlurOptions): void;
|
|
67
|
-
/**
|
|
68
|
-
* Select all text in the input
|
|
69
|
-
*/
|
|
70
|
-
selectAll(): void;
|
|
71
|
-
/**
|
|
72
|
-
* Select a range of text in the input
|
|
73
|
-
*/
|
|
74
|
-
selectRange(start: number, end: number): void;
|
|
75
|
-
/**
|
|
76
|
-
* Get the current cursor position
|
|
77
|
-
*/
|
|
78
|
-
getCursorPosition(): number;
|
|
79
|
-
/**
|
|
80
|
-
* Set the cursor position
|
|
81
|
-
*/
|
|
82
|
-
setCursorPosition(position: number | 'start' | 'end' | 'all'): void;
|
|
83
|
-
/**
|
|
84
|
-
* Get the currently selected text
|
|
85
|
-
*/
|
|
86
|
-
getSelectedText(): string;
|
|
87
|
-
/**
|
|
88
|
-
* Check if the input is currently focused
|
|
89
|
-
*/
|
|
90
|
-
isFocused(): boolean;
|
|
91
|
-
/**
|
|
92
|
-
* Centralized event dispatcher to ensure consistent event structure
|
|
93
|
-
*/
|
|
94
|
-
private _dispatchInputEvent;
|
|
95
67
|
private _handleKeyDown;
|
|
96
68
|
private _valueChange;
|
|
97
69
|
private _focusEvent;
|
|
@@ -104,7 +76,6 @@ export declare class NrInputElement extends NrInputElement_base {
|
|
|
104
76
|
private _togglePasswordIcon;
|
|
105
77
|
private _getAriaDescribedBy;
|
|
106
78
|
render(): import("lit").TemplateResult<1>;
|
|
107
|
-
static styles: import("lit").CSSResult[];
|
|
108
79
|
}
|
|
109
80
|
export {};
|
|
110
81
|
//# sourceMappingURL=input.component.d.ts.map
|
package/input.component.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAkC,MAAM,kBAAkB,CAAC;AAKtH,QAAA,MAAM,cAAc,ggBAAyE,CAAC;AAC9F,qBACa,cAAe,SAAQ,cAAc;IAChD,OAAgB,MAAM,4BAAU;IAOhC,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,cAAuB;IAG5B,KAAK,SAAgB;IAGrB,IAAI,aAAqB;IAGzB,OAAO,gBAA4B;IAGnC,IAAI,aAAmB;IAGvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,WAAW,SAAgB;IAG3B,YAAY,SAAS;IAGrB,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,SAAS,SAAgB;IAGzB,cAAc,UAAS;IAGvB,aAAa,UAAS;IAGtB,OAAO,UAAS;IAGhB,OAAO,KAAK,MAAM,GAEjB;IAMD;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAMlC;IAED;;OAEG;IACH,IAAI,oBAAoB,IAAI,OAAO,CAElC;IAMD;;OAEG;IACH,SAAS,KAAK,KAAK,IAAI,gBAAgB,CAEtC;IAED;;OAEG;IACH,SAAS,KAAK,YAAY,IAAI,gBAAgB,CAE7C;IAMD;;OAEG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAIjB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAwBpD,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAkBjD,YAAY,IAAI,IAAI;IAQ7B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAUhC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,YAAY;IA8CpB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,kBAAkB;YAqBZ,OAAO;IAerB,OAAO,CAAC,QAAQ;IAgChB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAelB,MAAM;CAoEhB"}
|
package/input.component.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
1
|
/**
|
|
3
2
|
* @license
|
|
4
|
-
* Copyright 2023
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
4
|
* SPDX-License-Identifier: MIT
|
|
6
5
|
*/
|
|
7
6
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
@@ -20,16 +19,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
20
19
|
});
|
|
21
20
|
};
|
|
22
21
|
import { LitElement, html } from 'lit';
|
|
23
|
-
import { customElement, property,
|
|
22
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
24
23
|
import { styles } from './input.style.js';
|
|
25
24
|
import { EMPTY_STRING } from './input.types.js';
|
|
26
25
|
import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
|
|
27
|
-
import { InputValidationUtils } from './utils/
|
|
28
|
-
import {
|
|
29
|
-
|
|
30
|
-
let NrInputElement = class NrInputElement extends
|
|
26
|
+
import { InputValidationUtils, InputRenderUtils } from './utils/index.js';
|
|
27
|
+
import { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';
|
|
28
|
+
const InputBaseMixin = NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement))));
|
|
29
|
+
let NrInputElement = class NrInputElement extends InputBaseMixin {
|
|
31
30
|
constructor() {
|
|
32
31
|
super(...arguments);
|
|
32
|
+
// ========================================
|
|
33
|
+
// PROPERTIES
|
|
34
|
+
// ========================================
|
|
33
35
|
this.disabled = false;
|
|
34
36
|
this.readonly = false;
|
|
35
37
|
this.state = "default" /* INPUT_STATE.Default */;
|
|
@@ -42,15 +44,28 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
42
44
|
this.withCopy = false;
|
|
43
45
|
this.allowClear = false;
|
|
44
46
|
this.showCount = false;
|
|
47
|
+
// ========================================
|
|
48
|
+
// STATE
|
|
49
|
+
// ========================================
|
|
45
50
|
this.inputType = EMPTY_STRING;
|
|
46
51
|
this.hasAddonBefore = false;
|
|
47
52
|
this.hasAddonAfter = false;
|
|
48
53
|
this.focused = false;
|
|
54
|
+
// ========================================
|
|
55
|
+
// LIFECYCLE METHODS
|
|
56
|
+
// ========================================
|
|
49
57
|
/**
|
|
50
58
|
* Required components that must be registered for this component to work properly
|
|
51
59
|
*/
|
|
52
|
-
this.requiredComponents = ['
|
|
60
|
+
this.requiredComponents = ['nr-icon'];
|
|
53
61
|
}
|
|
62
|
+
// Use manual query instead of @query decorator to avoid TypeScript mixin issues
|
|
63
|
+
get _input() {
|
|
64
|
+
return this.shadowRoot.querySelector('#input');
|
|
65
|
+
}
|
|
66
|
+
// ========================================
|
|
67
|
+
// COMPUTED PROPERTIES
|
|
68
|
+
// ========================================
|
|
54
69
|
/**
|
|
55
70
|
* Get the character count display text
|
|
56
71
|
*/
|
|
@@ -67,17 +82,36 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
67
82
|
get isOverCharacterLimit() {
|
|
68
83
|
return this.maxLength ? this.value.length > this.maxLength : false;
|
|
69
84
|
}
|
|
85
|
+
// ========================================
|
|
86
|
+
// COMPUTED PROPERTIES
|
|
87
|
+
// ========================================
|
|
88
|
+
/**
|
|
89
|
+
* Get the input element
|
|
90
|
+
*/
|
|
91
|
+
get input() {
|
|
92
|
+
return this._input;
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Override inputElement getter from mixins to use our @query property
|
|
96
|
+
*/
|
|
97
|
+
get inputElement() {
|
|
98
|
+
return this._input;
|
|
99
|
+
}
|
|
70
100
|
/**
|
|
71
101
|
* Check for required dependencies when component is connected to DOM
|
|
72
102
|
*/
|
|
73
103
|
connectedCallback() {
|
|
74
104
|
super.connectedCallback();
|
|
75
|
-
this.validateDependencies();
|
|
76
105
|
}
|
|
77
106
|
willUpdate(_changedProperties) {
|
|
78
|
-
|
|
107
|
+
super.willUpdate(_changedProperties);
|
|
108
|
+
// Initialize inputType when type changes or on first render
|
|
109
|
+
if (_changedProperties.has('type') || !this.inputType) {
|
|
79
110
|
this.inputType = this.type;
|
|
80
|
-
|
|
111
|
+
}
|
|
112
|
+
// Set default value for number inputs with min
|
|
113
|
+
if (_changedProperties.has('type') || _changedProperties.has('min')) {
|
|
114
|
+
if (this.type === "number" /* INPUT_TYPE.NUMBER */ && this.min && !this.value) {
|
|
81
115
|
this.value = this.min;
|
|
82
116
|
}
|
|
83
117
|
}
|
|
@@ -93,10 +127,7 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
93
127
|
if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {
|
|
94
128
|
const input = this.input;
|
|
95
129
|
if (input) {
|
|
96
|
-
|
|
97
|
-
input.setAttribute('step', this.step);
|
|
98
|
-
else
|
|
99
|
-
input.removeAttribute('step');
|
|
130
|
+
this.setStep(this.step);
|
|
100
131
|
if (this.min)
|
|
101
132
|
input.setAttribute('min', this.min);
|
|
102
133
|
else
|
|
@@ -115,6 +146,9 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
115
146
|
firstUpdated() {
|
|
116
147
|
this._checkInitialSlotContent();
|
|
117
148
|
}
|
|
149
|
+
// ========================================
|
|
150
|
+
// PRIVATE METHODS
|
|
151
|
+
// ========================================
|
|
118
152
|
/**
|
|
119
153
|
* Check initial slot content on first render
|
|
120
154
|
*/
|
|
@@ -142,163 +176,20 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
142
176
|
// ========================================
|
|
143
177
|
// FOCUS MANAGEMENT METHODS
|
|
144
178
|
// ========================================
|
|
145
|
-
|
|
146
|
-
* Focus the input with advanced options
|
|
147
|
-
*/
|
|
148
|
-
focus(options) {
|
|
149
|
-
if (!this.input)
|
|
150
|
-
return;
|
|
151
|
-
const focusOptions = Object.assign({ preventScroll: false }, options);
|
|
152
|
-
// Focus the input element
|
|
153
|
-
this.input.focus({ preventScroll: focusOptions.preventScroll });
|
|
154
|
-
// Handle cursor positioning
|
|
155
|
-
if (focusOptions.cursor !== undefined) {
|
|
156
|
-
this.setCursorPosition(focusOptions.cursor);
|
|
157
|
-
}
|
|
158
|
-
// Handle text selection
|
|
159
|
-
if (focusOptions.select) {
|
|
160
|
-
this.selectAll();
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* Blur the input with advanced options
|
|
165
|
-
*/
|
|
166
|
-
blur(options) {
|
|
167
|
-
if (!this.input)
|
|
168
|
-
return;
|
|
169
|
-
const currentPosition = this.getCursorPosition();
|
|
170
|
-
this.input.blur();
|
|
171
|
-
// Restore cursor position if requested
|
|
172
|
-
if ((options === null || options === void 0 ? void 0 : options.restoreCursor) && currentPosition !== -1) {
|
|
173
|
-
// We'll restore it on next focus
|
|
174
|
-
this.input.dataset.restoreCursor = currentPosition.toString();
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
/**
|
|
178
|
-
* Select all text in the input
|
|
179
|
-
*/
|
|
180
|
-
selectAll() {
|
|
181
|
-
if (!this.input)
|
|
182
|
-
return;
|
|
183
|
-
// Ensure the input is focused first
|
|
184
|
-
if (document.activeElement !== this.input) {
|
|
185
|
-
this.input.focus();
|
|
186
|
-
}
|
|
187
|
-
// Wait for next frame to ensure focus is complete
|
|
188
|
-
requestAnimationFrame(() => {
|
|
189
|
-
if (!this.input)
|
|
190
|
-
return;
|
|
191
|
-
this.input.select();
|
|
192
|
-
});
|
|
193
|
-
}
|
|
194
|
-
/**
|
|
195
|
-
* Select a range of text in the input
|
|
196
|
-
*/
|
|
197
|
-
selectRange(start, end) {
|
|
198
|
-
if (!this.input)
|
|
199
|
-
return;
|
|
200
|
-
// Ensure the input is focused first
|
|
201
|
-
if (document.activeElement !== this.input) {
|
|
202
|
-
this.input.focus();
|
|
203
|
-
}
|
|
204
|
-
// Wait for next frame to ensure focus is complete
|
|
205
|
-
requestAnimationFrame(() => {
|
|
206
|
-
if (!this.input)
|
|
207
|
-
return;
|
|
208
|
-
const maxLength = this.input.value.length;
|
|
209
|
-
const validStart = Math.max(0, Math.min(start, maxLength));
|
|
210
|
-
const validEnd = Math.max(validStart, Math.min(end, maxLength));
|
|
211
|
-
this.input.setSelectionRange(validStart, validEnd);
|
|
212
|
-
});
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* Get the current cursor position
|
|
216
|
-
*/
|
|
217
|
-
getCursorPosition() {
|
|
218
|
-
if (!this.input)
|
|
219
|
-
return -1;
|
|
220
|
-
return this.input.selectionStart || 0;
|
|
221
|
-
}
|
|
222
|
-
/**
|
|
223
|
-
* Set the cursor position
|
|
224
|
-
*/
|
|
225
|
-
setCursorPosition(position) {
|
|
226
|
-
if (!this.input)
|
|
227
|
-
return;
|
|
228
|
-
// Ensure the input is focused first
|
|
229
|
-
if (document.activeElement !== this.input) {
|
|
230
|
-
this.input.focus();
|
|
231
|
-
}
|
|
232
|
-
requestAnimationFrame(() => {
|
|
233
|
-
if (!this.input)
|
|
234
|
-
return;
|
|
235
|
-
let pos;
|
|
236
|
-
const valueLength = this.value.length;
|
|
237
|
-
switch (position) {
|
|
238
|
-
case 'start':
|
|
239
|
-
pos = 0;
|
|
240
|
-
break;
|
|
241
|
-
case 'end':
|
|
242
|
-
pos = valueLength;
|
|
243
|
-
break;
|
|
244
|
-
case 'all':
|
|
245
|
-
this.selectAll();
|
|
246
|
-
return;
|
|
247
|
-
default:
|
|
248
|
-
pos = typeof position === 'number' ? Math.min(Math.max(0, position), valueLength) : 0;
|
|
249
|
-
}
|
|
250
|
-
this.input.setSelectionRange(pos, pos);
|
|
251
|
-
});
|
|
252
|
-
}
|
|
253
|
-
/**
|
|
254
|
-
* Get the currently selected text
|
|
255
|
-
*/
|
|
256
|
-
getSelectedText() {
|
|
257
|
-
if (!this.input)
|
|
258
|
-
return '';
|
|
259
|
-
const start = this.input.selectionStart || 0;
|
|
260
|
-
const end = this.input.selectionEnd || 0;
|
|
261
|
-
return this.value.substring(start, end);
|
|
262
|
-
}
|
|
263
|
-
/**
|
|
264
|
-
* Check if the input is currently focused
|
|
265
|
-
*/
|
|
266
|
-
isFocused() {
|
|
267
|
-
return this.focused && document.activeElement === this.input;
|
|
268
|
-
}
|
|
179
|
+
// Focus methods are provided by InputMixin
|
|
269
180
|
// ========================================
|
|
270
181
|
// EVENT HANDLING METHODS
|
|
271
182
|
// ========================================
|
|
272
|
-
|
|
273
|
-
* Centralized event dispatcher to ensure consistent event structure
|
|
274
|
-
*/
|
|
275
|
-
_dispatchInputEvent(eventName, detail) {
|
|
276
|
-
this.dispatchEvent(new CustomEvent(eventName, {
|
|
277
|
-
detail,
|
|
278
|
-
bubbles: true
|
|
279
|
-
}));
|
|
280
|
-
}
|
|
183
|
+
// Event handling methods moved to EventHandlerMixin
|
|
281
184
|
_handleKeyDown(keyDownEvent) {
|
|
282
|
-
// Prevent all key input when readonly
|
|
283
|
-
if (this.readonly) {
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
'Home', 'End', 'PageUp', 'PageDown'
|
|
287
|
-
];
|
|
288
|
-
if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
|
|
289
|
-
const allowedCombinations = ['KeyA', 'KeyC'];
|
|
290
|
-
if (allowedCombinations.includes(keyDownEvent.code)) {
|
|
291
|
-
return;
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
if (!allowedReadonlyKeys.includes(keyDownEvent.key)) {
|
|
295
|
-
keyDownEvent.preventDefault();
|
|
296
|
-
return;
|
|
297
|
-
}
|
|
185
|
+
// Prevent all key input when readonly - use mixin utility
|
|
186
|
+
if (this.readonly && !this.isReadonlyKeyAllowed(keyDownEvent)) {
|
|
187
|
+
keyDownEvent.preventDefault();
|
|
188
|
+
return;
|
|
298
189
|
}
|
|
299
190
|
// Handle Enter key
|
|
300
191
|
if (keyDownEvent.key === 'Enter') {
|
|
301
|
-
this.
|
|
192
|
+
this.dispatchCustomEvent('nr-enter', {
|
|
302
193
|
target: keyDownEvent.target,
|
|
303
194
|
value: this.value,
|
|
304
195
|
originalEvent: keyDownEvent
|
|
@@ -309,7 +200,7 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
309
200
|
if (this.type === "number" /* INPUT_TYPE.NUMBER */) {
|
|
310
201
|
InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);
|
|
311
202
|
if (keyDownEvent.defaultPrevented) {
|
|
312
|
-
this.
|
|
203
|
+
this.dispatchCustomEvent('nr-invalid-key', {
|
|
313
204
|
key: keyDownEvent.key,
|
|
314
205
|
target: keyDownEvent.target,
|
|
315
206
|
value: this.value,
|
|
@@ -327,7 +218,7 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
327
218
|
const newValue = target.value;
|
|
328
219
|
// Check character limit
|
|
329
220
|
if (this.maxLength && newValue.length > this.maxLength) {
|
|
330
|
-
this.
|
|
221
|
+
this.dispatchCustomEvent('nr-character-limit-exceeded', {
|
|
331
222
|
value: newValue,
|
|
332
223
|
target: target,
|
|
333
224
|
limit: this.maxLength,
|
|
@@ -339,24 +230,26 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
339
230
|
const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);
|
|
340
231
|
if (!validation.isValid) {
|
|
341
232
|
console.warn(validation.warnings[0]);
|
|
342
|
-
this.
|
|
233
|
+
this.dispatchValidationEvent('nr-validation-error', {
|
|
343
234
|
value: newValue,
|
|
344
235
|
target: target,
|
|
345
236
|
error: validation.warnings[0],
|
|
346
|
-
originalEvent: e
|
|
237
|
+
originalEvent: e,
|
|
238
|
+
isValid: false
|
|
347
239
|
});
|
|
348
240
|
return;
|
|
349
241
|
}
|
|
350
242
|
validation.warnings.forEach(warning => console.warn(warning));
|
|
351
243
|
}
|
|
352
244
|
this.value = newValue;
|
|
353
|
-
this.
|
|
245
|
+
this.dispatchInputEvent('nr-input', {
|
|
354
246
|
value: this.value,
|
|
355
247
|
target: target,
|
|
356
248
|
originalEvent: e
|
|
357
249
|
});
|
|
358
250
|
}
|
|
359
251
|
_focusEvent(e) {
|
|
252
|
+
var _a;
|
|
360
253
|
this.focused = true;
|
|
361
254
|
// Handle cursor restoration if requested
|
|
362
255
|
const input = e.target;
|
|
@@ -367,24 +260,25 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
367
260
|
}
|
|
368
261
|
const focusDetail = {
|
|
369
262
|
focused: true,
|
|
370
|
-
cursorPosition: this.getCursorPosition(),
|
|
263
|
+
cursorPosition: (_a = this.getCursorPosition()) !== null && _a !== void 0 ? _a : undefined,
|
|
371
264
|
selectedText: this.getSelectedText()
|
|
372
265
|
};
|
|
373
|
-
this.
|
|
374
|
-
this.
|
|
266
|
+
this.dispatchFocusEvent('nr-focus', Object.assign({ target: e.target, value: this.value }, focusDetail));
|
|
267
|
+
this.dispatchFocusEvent('nr-focus-change', focusDetail);
|
|
375
268
|
}
|
|
376
269
|
_blurEvent(e) {
|
|
270
|
+
var _a;
|
|
377
271
|
this.focused = false;
|
|
378
272
|
const focusDetail = {
|
|
379
273
|
focused: false,
|
|
380
|
-
cursorPosition: this.getCursorPosition(),
|
|
274
|
+
cursorPosition: (_a = this.getCursorPosition()) !== null && _a !== void 0 ? _a : undefined,
|
|
381
275
|
selectedText: this.getSelectedText()
|
|
382
276
|
};
|
|
383
|
-
this.
|
|
384
|
-
this.
|
|
277
|
+
this.dispatchFocusEvent('nr-blur', Object.assign({ target: e.target, value: this.value }, focusDetail));
|
|
278
|
+
this.dispatchFocusEvent('nr-focus-change', focusDetail);
|
|
385
279
|
}
|
|
386
280
|
_handleIconKeydown(keyDownEvent) {
|
|
387
|
-
if (
|
|
281
|
+
if (this.isActivationKey(keyDownEvent)) {
|
|
388
282
|
keyDownEvent.preventDefault();
|
|
389
283
|
const target = keyDownEvent.target;
|
|
390
284
|
if (target.id === 'copy-icon') {
|
|
@@ -412,10 +306,13 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
412
306
|
const input = this.shadowRoot.getElementById('input');
|
|
413
307
|
input.select();
|
|
414
308
|
yield navigator.clipboard.writeText(input.value);
|
|
415
|
-
this.
|
|
309
|
+
this.dispatchActionEvent('nr-copy-success', {
|
|
310
|
+
value: input.value,
|
|
311
|
+
action: 'copy'
|
|
312
|
+
});
|
|
416
313
|
}
|
|
417
314
|
catch (error) {
|
|
418
|
-
this.
|
|
315
|
+
this.dispatchCustomEvent('nr-copy-error', { error });
|
|
419
316
|
}
|
|
420
317
|
});
|
|
421
318
|
}
|
|
@@ -429,12 +326,14 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
429
326
|
if (this.input) {
|
|
430
327
|
this.input.value = EMPTY_STRING;
|
|
431
328
|
}
|
|
432
|
-
this.
|
|
329
|
+
this.dispatchActionEvent('nr-clear', {
|
|
433
330
|
previousValue,
|
|
434
|
-
|
|
331
|
+
newValue: this.value,
|
|
332
|
+
target: this.input,
|
|
333
|
+
action: 'clear'
|
|
435
334
|
});
|
|
436
335
|
// Also dispatch input event for consistency
|
|
437
|
-
this.
|
|
336
|
+
this.dispatchInputEvent('nr-input', {
|
|
438
337
|
value: this.value,
|
|
439
338
|
target: this.input,
|
|
440
339
|
action: 'clear'
|
|
@@ -444,42 +343,10 @@ let NrInputElement = class NrInputElement extends NuralyUIBaseMixin(LitElement)
|
|
|
444
343
|
// OPERATION METHODS
|
|
445
344
|
// ========================================
|
|
446
345
|
_increment() {
|
|
447
|
-
|
|
448
|
-
this.input.stepUp();
|
|
449
|
-
this.value = this.input.value;
|
|
450
|
-
this._dispatchInputEvent('nr-input', {
|
|
451
|
-
value: this.value,
|
|
452
|
-
target: this.input,
|
|
453
|
-
action: 'increment'
|
|
454
|
-
});
|
|
455
|
-
}
|
|
456
|
-
catch (error) {
|
|
457
|
-
console.warn('Failed to increment value:', error);
|
|
458
|
-
this._dispatchInputEvent('nr-increment-error', {
|
|
459
|
-
error,
|
|
460
|
-
value: this.value,
|
|
461
|
-
target: this.input
|
|
462
|
-
});
|
|
463
|
-
}
|
|
346
|
+
this.increment();
|
|
464
347
|
}
|
|
465
348
|
_decrement() {
|
|
466
|
-
|
|
467
|
-
this.input.stepDown();
|
|
468
|
-
this.value = this.input.value;
|
|
469
|
-
this._dispatchInputEvent('nr-input', {
|
|
470
|
-
value: this.value,
|
|
471
|
-
target: this.input,
|
|
472
|
-
action: 'decrement'
|
|
473
|
-
});
|
|
474
|
-
}
|
|
475
|
-
catch (error) {
|
|
476
|
-
console.warn('Failed to decrement value:', error);
|
|
477
|
-
this._dispatchInputEvent('nr-decrement-error', {
|
|
478
|
-
error,
|
|
479
|
-
value: this.value,
|
|
480
|
-
target: this.input
|
|
481
|
-
});
|
|
482
|
-
}
|
|
349
|
+
this.decrement();
|
|
483
350
|
}
|
|
484
351
|
_togglePasswordIcon() {
|
|
485
352
|
if (this.inputType === "password" /* INPUT_TYPE.PASSWORD */) {
|
|
@@ -603,9 +470,6 @@ __decorate([
|
|
|
603
470
|
__decorate([
|
|
604
471
|
state()
|
|
605
472
|
], NrInputElement.prototype, "focused", void 0);
|
|
606
|
-
__decorate([
|
|
607
|
-
query('#input')
|
|
608
|
-
], NrInputElement.prototype, "input", void 0);
|
|
609
473
|
NrInputElement = __decorate([
|
|
610
474
|
customElement('nr-input')
|
|
611
475
|
], NrInputElement);
|
package/input.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, EMPTY_STRING, FocusOptions, BlurOptions, FocusChangeEvent } from './input.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { InputValidationUtils } from './utils/input-validation.utils.js';\nimport { InputRenderUtils } from './utils/input-renderers.js';\nimport '../icon/icon.component.js';\n\n@customElement('nr-input')\nexport class NrInputElement extends NuralyUIBaseMixin(LitElement) {\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: Boolean, reflect: true})\n readonly = false;\n\n @property({type: String, reflect: true})\n state = INPUT_STATE.Default;\n\n @property({type: String})\n value = EMPTY_STRING;\n\n @property({type: String})\n size = INPUT_SIZE.Medium;\n\n @property({type: String, reflect: true})\n variant = INPUT_VARIANT.Underlined;\n\n @property({reflect: true})\n type = INPUT_TYPE.TEXT;\n\n @property({type: String})\n step?: string;\n\n @property({type: String})\n min?: string;\n\n @property({type: String})\n max?: string;\n\n @property({type: String})\n placeholder = EMPTY_STRING;\n\n @property({type: String})\n autocomplete = 'off';\n\n @property({type: Boolean, reflect: true})\n withCopy = false;\n\n @property({type: Boolean, reflect: true})\n allowClear = false;\n\n @property({type: Boolean, reflect: true})\n showCount = false;\n\n @property({type: Number})\n maxLength?: number;\n\n @state()\n inputType = EMPTY_STRING;\n\n @state()\n hasAddonBefore = false;\n\n @state()\n hasAddonAfter = false;\n\n @state()\n focused = false;\n\n @query('#input')\n input!: HTMLInputElement;\n\n /**\n * Get the character count display text\n */\n get characterCountDisplay(): string {\n const currentLength = this.value.length;\n if (this.maxLength) {\n return `${currentLength}/${this.maxLength}`;\n }\n return `${currentLength}`;\n }\n\n /**\n * Check if character count is over the limit\n */\n get isOverCharacterLimit(): boolean {\n return this.maxLength ? this.value.length > this.maxLength : false;\n }\n\n /**\n * Required components that must be registered for this component to work properly\n */\n override requiredComponents = ['hy-icon'];\n\n /**\n * Check for required dependencies when component is connected to DOM\n */\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n override willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('type')) {\n this.inputType = this.type;\n if (this.inputType === INPUT_TYPE.NUMBER && this.min && !this.value) {\n this.value = this.min;\n }\n }\n \n // Validate numeric properties when they change\n if (_changedProperties.has('type') || \n _changedProperties.has('min') || \n _changedProperties.has('max') || \n _changedProperties.has('step')) {\n InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);\n }\n }\n\n override updated(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {\n const input = this.input;\n if (input) {\n if (this.step) input.setAttribute('step', this.step);\n else input.removeAttribute('step');\n \n if (this.min) input.setAttribute('min', this.min);\n else input.removeAttribute('min');\n \n if (this.max) input.setAttribute('max', this.max);\n else input.removeAttribute('max');\n\n if (this.maxLength) input.setAttribute('maxlength', this.maxLength.toString());\n else input.removeAttribute('maxlength');\n }\n }\n }\n\n override firstUpdated(): void {\n this._checkInitialSlotContent();\n }\n\n /**\n * Check initial slot content on first render\n */\n private _checkInitialSlotContent(): void {\n // Check for addon-before content\n const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n this.hasAddonBefore = addonBeforeElements.length > 0;\n\n // Check for addon-after content \n const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n this.hasAddonAfter = addonAfterElements.length > 0;\n }\n\n /**\n * Handle slot changes to determine addon visibility\n */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const slotName = slot.name;\n \n if (slotName === 'addon-before') {\n this.hasAddonBefore = slot.assignedElements().length > 0;\n } else if (slotName === 'addon-after') {\n this.hasAddonAfter = slot.assignedElements().length > 0;\n }\n }\n\n // ========================================\n // FOCUS MANAGEMENT METHODS\n // ========================================\n\n /**\n * Focus the input with advanced options\n */\n override focus(options?: FocusOptions): void {\n if (!this.input) return;\n\n const focusOptions: FocusOptions = { preventScroll: false, ...options };\n \n // Focus the input element\n this.input.focus({ preventScroll: focusOptions.preventScroll });\n\n // Handle cursor positioning\n if (focusOptions.cursor !== undefined) {\n this.setCursorPosition(focusOptions.cursor);\n }\n\n // Handle text selection\n if (focusOptions.select) {\n this.selectAll();\n }\n }\n\n /**\n * Blur the input with advanced options\n */\n override blur(options?: BlurOptions): void {\n if (!this.input) return;\n\n const currentPosition = this.getCursorPosition();\n \n this.input.blur();\n\n // Restore cursor position if requested\n if (options?.restoreCursor && currentPosition !== -1) {\n // We'll restore it on next focus\n this.input.dataset.restoreCursor = currentPosition.toString();\n }\n }\n\n /**\n * Select all text in the input\n */\n selectAll(): void {\n if (!this.input) return;\n \n // Ensure the input is focused first\n if (document.activeElement !== this.input) {\n this.input.focus();\n }\n \n // Wait for next frame to ensure focus is complete\n requestAnimationFrame(() => {\n if (!this.input) return;\n this.input.select();\n });\n }\n\n /**\n * Select a range of text in the input\n */\n selectRange(start: number, end: number): void {\n if (!this.input) return;\n \n // Ensure the input is focused first\n if (document.activeElement !== this.input) {\n this.input.focus();\n }\n \n // Wait for next frame to ensure focus is complete\n requestAnimationFrame(() => {\n if (!this.input) return;\n \n const maxLength = this.input.value.length;\n const validStart = Math.max(0, Math.min(start, maxLength));\n const validEnd = Math.max(validStart, Math.min(end, maxLength));\n \n this.input.setSelectionRange(validStart, validEnd);\n });\n }\n\n /**\n * Get the current cursor position\n */\n getCursorPosition(): number {\n if (!this.input) return -1;\n return this.input.selectionStart || 0;\n }\n\n /**\n * Set the cursor position\n */\n setCursorPosition(position: number | 'start' | 'end' | 'all'): void {\n if (!this.input) return;\n \n // Ensure the input is focused first\n if (document.activeElement !== this.input) {\n this.input.focus();\n }\n \n requestAnimationFrame(() => {\n if (!this.input) return;\n\n let pos: number;\n const valueLength = this.value.length;\n\n switch (position) {\n case 'start':\n pos = 0;\n break;\n case 'end':\n pos = valueLength;\n break;\n case 'all':\n this.selectAll();\n return;\n default:\n pos = typeof position === 'number' ? Math.min(Math.max(0, position), valueLength) : 0;\n }\n\n this.input.setSelectionRange(pos, pos);\n });\n }\n\n /**\n * Get the currently selected text\n */\n getSelectedText(): string {\n if (!this.input) return '';\n const start = this.input.selectionStart || 0;\n const end = this.input.selectionEnd || 0;\n return this.value.substring(start, end);\n }\n\n /**\n * Check if the input is currently focused\n */\n isFocused(): boolean {\n return this.focused && document.activeElement === this.input;\n }\n\n // ========================================\n // EVENT HANDLING METHODS\n // ========================================\n\n /**\n * Centralized event dispatcher to ensure consistent event structure\n */\n private _dispatchInputEvent(eventName: string, detail: any): void {\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail,\n bubbles: true\n })\n );\n }\n\n private _handleKeyDown(keyDownEvent: KeyboardEvent) {\n // Prevent all key input when readonly\n if (this.readonly) {\n const allowedReadonlyKeys = [\n 'Tab', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n 'Home', 'End', 'PageUp', 'PageDown'\n ];\n \n if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {\n const allowedCombinations = ['KeyA', 'KeyC'];\n if (allowedCombinations.includes(keyDownEvent.code)) {\n return;\n }\n }\n \n if (!allowedReadonlyKeys.includes(keyDownEvent.key)) {\n keyDownEvent.preventDefault();\n return;\n }\n }\n\n // Handle Enter key\n if (keyDownEvent.key === 'Enter') {\n this._dispatchInputEvent('nr-enter', {\n target: keyDownEvent.target,\n value: this.value,\n originalEvent: keyDownEvent\n });\n return;\n }\n\n // Prevent non-numeric input for number type\n if (this.type === INPUT_TYPE.NUMBER) {\n InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);\n \n if (keyDownEvent.defaultPrevented) {\n this._dispatchInputEvent('nr-invalid-key', {\n key: keyDownEvent.key,\n target: keyDownEvent.target,\n value: this.value,\n originalEvent: keyDownEvent\n });\n }\n }\n }\n\n private _valueChange(e: Event) {\n if (this.readonly) {\n e.preventDefault();\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const newValue = target.value;\n \n // Check character limit\n if (this.maxLength && newValue.length > this.maxLength) {\n this._dispatchInputEvent('nr-character-limit-exceeded', {\n value: newValue,\n target: target,\n limit: this.maxLength,\n originalEvent: e\n });\n // Note: HTML maxlength attribute usually prevents this, but we dispatch event for awareness\n }\n \n if (this.type === INPUT_TYPE.NUMBER && newValue) {\n const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);\n \n if (!validation.isValid) {\n console.warn(validation.warnings[0]);\n this._dispatchInputEvent('nr-validation-error', {\n value: newValue,\n target: target,\n error: validation.warnings[0],\n originalEvent: e\n });\n return;\n }\n \n validation.warnings.forEach(warning => console.warn(warning));\n }\n \n this.value = newValue;\n this._dispatchInputEvent('nr-input', {\n value: this.value, \n target: target,\n originalEvent: e \n });\n }\n\n private _focusEvent(e: Event) {\n this.focused = true;\n \n // Handle cursor restoration if requested\n const input = e.target as HTMLInputElement;\n if (input.dataset.restoreCursor) {\n const position = parseInt(input.dataset.restoreCursor, 10);\n this.setCursorPosition(position);\n delete input.dataset.restoreCursor;\n }\n \n const focusDetail: FocusChangeEvent = {\n focused: true,\n cursorPosition: this.getCursorPosition(),\n selectedText: this.getSelectedText()\n };\n \n this._dispatchInputEvent('nr-focus', {\n target: e.target,\n value: this.value,\n ...focusDetail\n });\n \n this._dispatchInputEvent('nr-focus-change', focusDetail);\n }\n\n private _blurEvent(e: Event) {\n this.focused = false;\n \n const focusDetail: FocusChangeEvent = {\n focused: false,\n cursorPosition: this.getCursorPosition(),\n selectedText: this.getSelectedText()\n };\n \n this._dispatchInputEvent('nr-blur', {\n target: e.target,\n value: this.value,\n ...focusDetail\n });\n \n this._dispatchInputEvent('nr-focus-change', focusDetail);\n }\n\n private _handleIconKeydown(keyDownEvent: KeyboardEvent) {\n if (keyDownEvent.key === 'Enter' || keyDownEvent.key === ' ') {\n keyDownEvent.preventDefault();\n const target = keyDownEvent.target as HTMLElement;\n \n if (target.id === 'copy-icon') {\n this._onCopy();\n } else if (target.id === 'clear-icon') {\n this._onClear();\n } else if (target.id === 'password-icon') {\n this._togglePasswordIcon();\n } else if (target.closest('#number-icons')) {\n if (target.getAttribute('name') === 'plus') {\n this._increment();\n } else if (target.getAttribute('name') === 'minus') {\n this._decrement();\n }\n }\n }\n }\n\n private async _onCopy() {\n try {\n const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n input.select();\n await navigator.clipboard.writeText(input.value);\n \n this._dispatchInputEvent('nr-copy-success', { value: input.value });\n } catch (error) {\n this._dispatchInputEvent('nr-copy-error', { error });\n }\n }\n\n private _onClear() {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const previousValue = this.value;\n this.value = EMPTY_STRING;\n \n // Update the input element value\n if (this.input) {\n this.input.value = EMPTY_STRING;\n }\n\n this._dispatchInputEvent('nr-clear', {\n previousValue,\n target: this.input\n });\n\n // Also dispatch input event for consistency\n this._dispatchInputEvent('nr-input', {\n value: this.value,\n target: this.input,\n action: 'clear'\n });\n }\n\n // ========================================\n // OPERATION METHODS\n // ========================================\n\n private _increment() {\n try {\n this.input.stepUp();\n this.value = this.input.value;\n this._dispatchInputEvent('nr-input', {\n value: this.value, \n target: this.input,\n action: 'increment'\n });\n } catch (error) {\n console.warn('Failed to increment value:', error);\n this._dispatchInputEvent('nr-increment-error', {\n error,\n value: this.value,\n target: this.input\n });\n }\n }\n\n private _decrement() {\n try {\n this.input.stepDown();\n this.value = this.input.value;\n this._dispatchInputEvent('nr-input', {\n value: this.value, \n target: this.input,\n action: 'decrement'\n });\n } catch (error) {\n console.warn('Failed to decrement value:', error);\n this._dispatchInputEvent('nr-decrement-error', {\n error,\n value: this.value,\n target: this.input\n });\n }\n }\n\n private _togglePasswordIcon() {\n if (this.inputType === INPUT_TYPE.PASSWORD) {\n this.inputType = INPUT_TYPE.TEXT;\n } else if (this.inputType === INPUT_TYPE.TEXT && this.type === INPUT_TYPE.PASSWORD) {\n this.inputType = INPUT_TYPE.PASSWORD;\n }\n }\n\n private _getAriaDescribedBy(): string {\n const describedBy: string[] = [];\n \n const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n describedBy.push('helper-text');\n }\n \n return describedBy.join(' ') || '';\n }\n\n // ========================================\n // RENDER METHODS\n // ========================================\n\n override render() {\n return html`\n <slot name=\"label\"></slot>\n <div class=\"input-wrapper\" data-theme=\"${this.currentTheme}\">\n ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n <div data-size=${this.size} id=\"input-container\">\n ${InputRenderUtils.renderPrefix()}\n <input\n id=\"input\"\n .disabled=${this.disabled}\n .readOnly=${this.readonly}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .type=\"${this.inputType}\"\n .autocomplete=${this.autocomplete}\n aria-invalid=${this.state === INPUT_STATE.Error ? 'true' : 'false'}\n aria-describedby=${this._getAriaDescribedBy()}\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @blur=${this._blurEvent}\n @keydown=${this._handleKeyDown}\n />\n ${InputRenderUtils.renderSuffix()}\n ${InputRenderUtils.renderCopyIcon(\n this.withCopy,\n this.disabled,\n this.readonly,\n () => this._onCopy(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderClearIcon(\n this.allowClear,\n this.value,\n this.disabled,\n this.readonly,\n () => this._onClear(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderStateIcon(this.state)}\n ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}\n ${InputRenderUtils.renderPasswordIcon(\n this.type,\n this.inputType,\n this.disabled,\n this.readonly,\n () => this._togglePasswordIcon(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderNumberIcons(\n this.type,\n this.state,\n this.disabled,\n this.readonly,\n () => this._increment(),\n () => this._decrement(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n </div>\n ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e: Event) => this._handleSlotChange(e))}\n </div>\n <slot name=\"helper-text\"></slot>\n ${this.showCount ? html`\n <div class=\"character-count\" ?data-over-limit=${this.isOverCharacterLimit}>\n ${this.characterCountDisplay}\n </div>\n ` : ''}\n `;\n }\n\n static override styles = styles;\n}\n\n"]}
|
|
1
|
+
{"version":3,"file":"input.component.js","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './input.style.js';\nimport { INPUT_TYPE, INPUT_STATE, INPUT_SIZE, INPUT_VARIANT, EMPTY_STRING, FocusChangeEvent } from './input.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { InputValidationUtils, InputRenderUtils } from './utils/index.js';\nimport { SelectionMixin, FocusMixin, NumberMixin } from './mixins/index.js';\n\nconst InputBaseMixin = NumberMixin(FocusMixin(SelectionMixin(NuralyUIBaseMixin(LitElement))));\n@customElement('nr-input')\nexport class NrInputElement extends InputBaseMixin {\n static override styles = styles;\n\n // ========================================\n // PROPERTIES\n // ========================================\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n @property({type: Boolean, reflect: true})\n readonly = false;\n\n @property({type: String, reflect: true})\n state = INPUT_STATE.Default;\n\n @property({type: String})\n value = EMPTY_STRING;\n\n @property({type: String})\n size = INPUT_SIZE.Medium;\n\n @property({type: String, reflect: true})\n variant = INPUT_VARIANT.Underlined;\n\n @property({reflect: true})\n type = INPUT_TYPE.TEXT;\n\n @property({type: String})\n step?: string;\n\n @property({type: String})\n min?: string;\n\n @property({type: String})\n max?: string;\n\n @property({type: String})\n placeholder = EMPTY_STRING;\n\n @property({type: String})\n autocomplete = 'off';\n\n @property({type: Boolean, reflect: true})\n withCopy = false;\n\n @property({type: Boolean, reflect: true})\n allowClear = false;\n\n @property({type: Boolean, reflect: true})\n showCount = false;\n\n @property({type: Number})\n maxLength?: number;\n\n // ========================================\n // STATE\n // ========================================\n\n @state()\n inputType = EMPTY_STRING;\n\n @state()\n hasAddonBefore = false;\n\n @state()\n hasAddonAfter = false;\n\n @state()\n focused = false;\n\n // Use manual query instead of @query decorator to avoid TypeScript mixin issues\n private get _input(): HTMLInputElement {\n return this.shadowRoot!.querySelector('#input') as HTMLInputElement;\n }\n\n // ========================================\n // COMPUTED PROPERTIES\n // ========================================\n\n /**\n * Get the character count display text\n */\n get characterCountDisplay(): string {\n const currentLength = this.value.length;\n if (this.maxLength) {\n return `${currentLength}/${this.maxLength}`;\n }\n return `${currentLength}`;\n }\n\n /**\n * Check if character count is over the limit\n */\n get isOverCharacterLimit(): boolean {\n return this.maxLength ? this.value.length > this.maxLength : false;\n }\n\n // ========================================\n // COMPUTED PROPERTIES\n // ========================================\n\n /**\n * Get the input element\n */\n protected get input(): HTMLInputElement {\n return this._input;\n }\n\n /**\n * Override inputElement getter from mixins to use our @query property\n */\n protected get inputElement(): HTMLInputElement {\n return this._input;\n }\n\n // ========================================\n // LIFECYCLE METHODS\n // ========================================\n\n /**\n * Required components that must be registered for this component to work properly\n */\n override requiredComponents = ['nr-icon'];\n\n /**\n * Check for required dependencies when component is connected to DOM\n */\n override connectedCallback() {\n super.connectedCallback();\n }\n\n override willUpdate(_changedProperties: PropertyValues): void {\n super.willUpdate(_changedProperties);\n\n // Initialize inputType when type changes or on first render\n if (_changedProperties.has('type') || !this.inputType) {\n this.inputType = this.type;\n }\n\n // Set default value for number inputs with min\n if (_changedProperties.has('type') || _changedProperties.has('min')) {\n if (this.type === INPUT_TYPE.NUMBER && this.min && !this.value) {\n this.value = this.min;\n }\n }\n\n // Validate numeric properties when they change\n if (_changedProperties.has('type') || \n _changedProperties.has('min') || \n _changedProperties.has('max') || \n _changedProperties.has('step')) {\n InputValidationUtils.validateNumericProperties(this.type, this.min, this.max, this.step);\n }\n }\n\n override updated(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('step') || _changedProperties.has('min') || _changedProperties.has('max') || _changedProperties.has('maxLength')) {\n const input = this.input;\n if (input) {\n this.setStep(this.step);\n \n if (this.min) input.setAttribute('min', this.min);\n else input.removeAttribute('min');\n \n if (this.max) input.setAttribute('max', this.max);\n else input.removeAttribute('max');\n\n if (this.maxLength) input.setAttribute('maxlength', this.maxLength.toString());\n else input.removeAttribute('maxlength');\n }\n }\n }\n\n override firstUpdated(): void {\n this._checkInitialSlotContent();\n }\n\n // ========================================\n // PRIVATE METHODS\n // ========================================\n\n /**\n * Check initial slot content on first render\n */\n private _checkInitialSlotContent(): void {\n // Check for addon-before content\n const addonBeforeElements = this.querySelectorAll('[slot=\"addon-before\"]');\n this.hasAddonBefore = addonBeforeElements.length > 0;\n\n // Check for addon-after content \n const addonAfterElements = this.querySelectorAll('[slot=\"addon-after\"]');\n this.hasAddonAfter = addonAfterElements.length > 0;\n }\n\n /**\n * Handle slot changes to determine addon visibility\n */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const slotName = slot.name;\n \n if (slotName === 'addon-before') {\n this.hasAddonBefore = slot.assignedElements().length > 0;\n } else if (slotName === 'addon-after') {\n this.hasAddonAfter = slot.assignedElements().length > 0;\n }\n }\n\n // ========================================\n // FOCUS MANAGEMENT METHODS\n // ========================================\n\n // Focus methods are provided by InputMixin\n\n // ========================================\n // EVENT HANDLING METHODS\n // ========================================\n\n // Event handling methods moved to EventHandlerMixin\n\n private _handleKeyDown(keyDownEvent: KeyboardEvent): void {\n // Prevent all key input when readonly - use mixin utility\n if (this.readonly && !this.isReadonlyKeyAllowed(keyDownEvent)) {\n keyDownEvent.preventDefault();\n return;\n }\n\n // Handle Enter key\n if (keyDownEvent.key === 'Enter') {\n this.dispatchCustomEvent('nr-enter', {\n target: keyDownEvent.target,\n value: this.value,\n originalEvent: keyDownEvent\n });\n return;\n }\n\n // Prevent non-numeric input for number type\n if (this.type === INPUT_TYPE.NUMBER) {\n InputValidationUtils.preventNonNumericInput(keyDownEvent, this.min);\n \n if (keyDownEvent.defaultPrevented) {\n this.dispatchCustomEvent('nr-invalid-key', {\n key: keyDownEvent.key,\n target: keyDownEvent.target,\n value: this.value,\n originalEvent: keyDownEvent\n });\n }\n }\n }\n\n private _valueChange(e: Event): void {\n if (this.readonly) {\n e.preventDefault();\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const newValue = target.value;\n \n // Check character limit\n if (this.maxLength && newValue.length > this.maxLength) {\n this.dispatchCustomEvent('nr-character-limit-exceeded', {\n value: newValue,\n target: target,\n limit: this.maxLength,\n originalEvent: e\n });\n // Note: HTML maxlength attribute usually prevents this, but we dispatch event for awareness\n }\n \n if (this.type === INPUT_TYPE.NUMBER && newValue) {\n const validation = InputValidationUtils.validateNumericValue(newValue, this.min, this.max);\n \n if (!validation.isValid) {\n console.warn(validation.warnings[0]);\n this.dispatchValidationEvent('nr-validation-error', {\n value: newValue,\n target: target,\n error: validation.warnings[0],\n originalEvent: e,\n isValid: false\n });\n return;\n }\n \n validation.warnings.forEach(warning => console.warn(warning));\n }\n \n this.value = newValue;\n this.dispatchInputEvent('nr-input', {\n value: this.value, \n target: target,\n originalEvent: e \n });\n }\n\n private _focusEvent(e: Event): void {\n this.focused = true;\n \n // Handle cursor restoration if requested\n const input = e.target as HTMLInputElement;\n if (input.dataset.restoreCursor) {\n const position = parseInt(input.dataset.restoreCursor, 10);\n this.setCursorPosition(position);\n delete input.dataset.restoreCursor;\n }\n \n const focusDetail: FocusChangeEvent = {\n focused: true,\n cursorPosition: this.getCursorPosition() ?? undefined,\n selectedText: this.getSelectedText()\n };\n \n this.dispatchFocusEvent('nr-focus', {\n target: e.target,\n value: this.value,\n ...focusDetail\n });\n \n this.dispatchFocusEvent('nr-focus-change', focusDetail);\n }\n\n private _blurEvent(e: Event): void {\n this.focused = false;\n \n const focusDetail: FocusChangeEvent = {\n focused: false,\n cursorPosition: this.getCursorPosition() ?? undefined,\n selectedText: this.getSelectedText()\n };\n \n this.dispatchFocusEvent('nr-blur', {\n target: e.target,\n value: this.value,\n ...focusDetail\n });\n \n this.dispatchFocusEvent('nr-focus-change', focusDetail);\n }\n\n private _handleIconKeydown(keyDownEvent: KeyboardEvent): void {\n if (this.isActivationKey(keyDownEvent)) {\n keyDownEvent.preventDefault();\n const target = keyDownEvent.target as HTMLElement;\n \n if (target.id === 'copy-icon') {\n this._onCopy();\n } else if (target.id === 'clear-icon') {\n this._onClear();\n } else if (target.id === 'password-icon') {\n this._togglePasswordIcon();\n } else if (target.closest('#number-icons')) {\n if (target.getAttribute('name') === 'plus') {\n this._increment();\n } else if (target.getAttribute('name') === 'minus') {\n this._decrement();\n }\n }\n }\n }\n\n private async _onCopy(): Promise<void> {\n try {\n const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n input.select();\n await navigator.clipboard.writeText(input.value);\n \n this.dispatchActionEvent('nr-copy-success', { \n value: input.value,\n action: 'copy'\n });\n } catch (error) {\n this.dispatchCustomEvent('nr-copy-error', { error });\n }\n }\n\n private _onClear(): void {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const previousValue = this.value;\n this.value = EMPTY_STRING;\n \n // Update the input element value\n if (this.input) {\n this.input.value = EMPTY_STRING;\n }\n\n this.dispatchActionEvent('nr-clear', {\n previousValue,\n newValue: this.value,\n target: this.input,\n action: 'clear'\n });\n\n // Also dispatch input event for consistency\n this.dispatchInputEvent('nr-input', {\n value: this.value,\n target: this.input,\n action: 'clear'\n });\n }\n\n // ========================================\n // OPERATION METHODS\n // ========================================\n\n private _increment(): void {\n this.increment();\n }\n\n private _decrement(): void {\n this.decrement();\n }\n\n private _togglePasswordIcon(): void {\n if (this.inputType === INPUT_TYPE.PASSWORD) {\n this.inputType = INPUT_TYPE.TEXT;\n } else if (this.inputType === INPUT_TYPE.TEXT && this.type === INPUT_TYPE.PASSWORD) {\n this.inputType = INPUT_TYPE.PASSWORD;\n }\n }\n\n private _getAriaDescribedBy(): string {\n const describedBy: string[] = [];\n \n const helperSlot = this.shadowRoot?.querySelector('slot[name=\"helper-text\"]');\n if (helperSlot && (helperSlot as HTMLSlotElement).assignedNodes().length > 0) {\n describedBy.push('helper-text');\n }\n \n return describedBy.join(' ') || '';\n }\n\n // ========================================\n // RENDER METHODS\n // ========================================\n\n override render() {\n return html`\n <slot name=\"label\"></slot>\n <div class=\"input-wrapper\" data-theme=\"${this.currentTheme}\">\n ${InputRenderUtils.renderAddonBefore(this.hasAddonBefore, (e: Event) => this._handleSlotChange(e))}\n <div data-size=${this.size} id=\"input-container\">\n ${InputRenderUtils.renderPrefix()}\n <input\n id=\"input\"\n .disabled=${this.disabled}\n .readOnly=${this.readonly}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .type=\"${this.inputType}\"\n .autocomplete=${this.autocomplete}\n aria-invalid=${this.state === INPUT_STATE.Error ? 'true' : 'false'}\n aria-describedby=${this._getAriaDescribedBy()}\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @blur=${this._blurEvent}\n @keydown=${this._handleKeyDown}\n />\n ${InputRenderUtils.renderSuffix()}\n ${InputRenderUtils.renderCopyIcon(\n this.withCopy,\n this.disabled,\n this.readonly,\n () => this._onCopy(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderClearIcon(\n this.allowClear,\n this.value,\n this.disabled,\n this.readonly,\n () => this._onClear(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderStateIcon(this.state)}\n ${InputRenderUtils.renderCalendarIcon(this.state, this.type)}\n ${InputRenderUtils.renderPasswordIcon(\n this.type,\n this.inputType,\n this.disabled,\n this.readonly,\n () => this._togglePasswordIcon(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n ${InputRenderUtils.renderNumberIcons(\n this.type,\n this.state,\n this.disabled,\n this.readonly,\n () => this._increment(),\n () => this._decrement(),\n (e: KeyboardEvent) => this._handleIconKeydown(e)\n )}\n </div>\n ${InputRenderUtils.renderAddonAfter(this.hasAddonAfter, (e: Event) => this._handleSlotChange(e))}\n </div>\n <slot name=\"helper-text\"></slot>\n ${this.showCount ? html`\n <div class=\"character-count\" ?data-over-limit=${this.isOverCharacterLimit}>\n ${this.characterCountDisplay}\n </div>\n ` : ''}\n `;\n }\n}\n\n"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
declare type Constructor<T = {}> = new (...args: any[]) => T;
|
|
8
|
+
/**
|
|
9
|
+
* Options for focus behavior
|
|
10
|
+
*/
|
|
11
|
+
export interface FocusOptions {
|
|
12
|
+
preventScroll?: boolean;
|
|
13
|
+
selectText?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Options for blur behavior
|
|
17
|
+
*/
|
|
18
|
+
export interface BlurOptions {
|
|
19
|
+
relatedTarget?: Element | null;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Interface for components that support focus operations
|
|
23
|
+
*/
|
|
24
|
+
export interface FocusCapable {
|
|
25
|
+
/**
|
|
26
|
+
* Focus the input element
|
|
27
|
+
* @param options - Focus options
|
|
28
|
+
*/
|
|
29
|
+
focus(options?: FocusOptions): void;
|
|
30
|
+
/**
|
|
31
|
+
* Blur the input element
|
|
32
|
+
* @param options - Blur options
|
|
33
|
+
*/
|
|
34
|
+
blur(options?: BlurOptions): void;
|
|
35
|
+
/**
|
|
36
|
+
* Check if the input is currently focused
|
|
37
|
+
* @returns True if focused
|
|
38
|
+
*/
|
|
39
|
+
isFocused(): boolean;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Mixin that provides focus management capabilities to input components
|
|
43
|
+
*
|
|
44
|
+
* @param superClass - The base class to extend
|
|
45
|
+
* @returns Enhanced class with focus capabilities
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```typescript
|
|
49
|
+
* export class MyInput extends FocusMixin(LitElement) {
|
|
50
|
+
* @query('input') input!: HTMLInputElement;
|
|
51
|
+
*
|
|
52
|
+
* handleClick() {
|
|
53
|
+
* this.focus({ selectText: true });
|
|
54
|
+
* }
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
export declare const FocusMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FocusCapable> & T;
|
|
59
|
+
export {};
|
|
60
|
+
//# sourceMappingURL=focus-mixin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/focus-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAEpC;;;OAGG;IACH,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAElC;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,qFA8CtB,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Mixin that provides focus management capabilities to input components
|
|
8
|
+
*
|
|
9
|
+
* @param superClass - The base class to extend
|
|
10
|
+
* @returns Enhanced class with focus capabilities
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* export class MyInput extends FocusMixin(LitElement) {
|
|
15
|
+
* @query('input') input!: HTMLInputElement;
|
|
16
|
+
*
|
|
17
|
+
* handleClick() {
|
|
18
|
+
* this.focus({ selectText: true });
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export const FocusMixin = (superClass) => {
|
|
24
|
+
class FocusMixinClass extends superClass {
|
|
25
|
+
/**
|
|
26
|
+
* Get the input element - must be implemented by the component
|
|
27
|
+
*/
|
|
28
|
+
get inputElement() {
|
|
29
|
+
var _a;
|
|
30
|
+
// Try to get from shadowRoot first (for custom elements)
|
|
31
|
+
const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input, textarea');
|
|
32
|
+
if (shadowInput) {
|
|
33
|
+
return shadowInput;
|
|
34
|
+
}
|
|
35
|
+
// Fallback to light DOM
|
|
36
|
+
const input = this.querySelector('input, textarea');
|
|
37
|
+
if (!input) {
|
|
38
|
+
throw new Error('FocusMixin requires an input or textarea element');
|
|
39
|
+
}
|
|
40
|
+
return input;
|
|
41
|
+
}
|
|
42
|
+
focus(options = {}) {
|
|
43
|
+
const input = this.inputElement;
|
|
44
|
+
if (input) {
|
|
45
|
+
input.focus({ preventScroll: options.preventScroll });
|
|
46
|
+
if (options.selectText) {
|
|
47
|
+
input.select();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
blur() {
|
|
52
|
+
const input = this.inputElement;
|
|
53
|
+
if (input) {
|
|
54
|
+
input.blur();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
isFocused() {
|
|
58
|
+
const input = this.inputElement;
|
|
59
|
+
return input ? document.activeElement === input : false;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
// Cast return type to the superClass type passed in
|
|
63
|
+
return FocusMixinClass;
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=focus-mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus-mixin.js","sourceRoot":"","sources":["../../../../src/components/input/mixins/focus-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA4CH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC7E,MAAM,eAAgB,SAAQ,UAAU;QACtC;;WAEG;QACH,IAAc,YAAY;;YACxB,yDAAyD;YACzD,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,yBAAyB,CAA2C,CAAC;YACxH,IAAI,WAAW,EAAE;gBACf,OAAO,WAAW,CAAC;aACpB;YAED,wBAAwB;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAA2C,CAAC;YAC9F,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;aACrE;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QAEQ,KAAK,CAAC,UAAwB,EAAE;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;gBAEtD,IAAI,OAAO,CAAC,UAAU,EAAE;oBACtB,KAAK,CAAC,MAAM,EAAE,CAAC;iBAChB;aACF;QACH,CAAC;QAEQ,IAAI;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,IAAI,EAAE,CAAC;aACd;QACH,CAAC;QAED,SAAS;YACP,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAC1D,CAAC;KACF;IAED,oDAAoD;IACpD,OAAO,eAAgD,CAAC;AAC1D,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Options for focus behavior\n */\nexport interface FocusOptions {\n preventScroll?: boolean;\n selectText?: boolean;\n}\n\n/**\n * Options for blur behavior\n */\nexport interface BlurOptions {\n relatedTarget?: Element | null;\n}\n\n/**\n * Interface for components that support focus operations\n */\nexport interface FocusCapable {\n /**\n * Focus the input element\n * @param options - Focus options\n */\n focus(options?: FocusOptions): void;\n\n /**\n * Blur the input element\n * @param options - Blur options\n */\n blur(options?: BlurOptions): void;\n\n /**\n * Check if the input is currently focused\n * @returns True if focused\n */\n isFocused(): boolean;\n}\n\n/**\n * Mixin that provides focus management capabilities to input components\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with focus capabilities\n * \n * @example\n * ```typescript\n * export class MyInput extends FocusMixin(LitElement) {\n * @query('input') input!: HTMLInputElement;\n * \n * handleClick() {\n * this.focus({ selectText: true });\n * }\n * }\n * ```\n */\nexport const FocusMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class FocusMixinClass extends superClass implements FocusCapable {\n /**\n * Get the input element - must be implemented by the component\n */\n protected get inputElement(): HTMLInputElement | HTMLTextAreaElement {\n // Try to get from shadowRoot first (for custom elements)\n const shadowInput = this.shadowRoot?.querySelector('#input, input, textarea') as HTMLInputElement | HTMLTextAreaElement;\n if (shadowInput) {\n return shadowInput;\n }\n \n // Fallback to light DOM\n const input = this.querySelector('input, textarea') as HTMLInputElement | HTMLTextAreaElement;\n if (!input) {\n throw new Error('FocusMixin requires an input or textarea element');\n }\n return input;\n }\n\n override focus(options: FocusOptions = {}): void {\n const input = this.inputElement;\n if (input) {\n input.focus({ preventScroll: options.preventScroll });\n \n if (options.selectText) {\n input.select();\n }\n }\n }\n\n override blur(): void {\n const input = this.inputElement;\n if (input) {\n input.blur();\n }\n }\n\n isFocused(): boolean {\n const input = this.inputElement;\n return input ? document.activeElement === input : false;\n }\n }\n\n // Cast return type to the superClass type passed in\n return FocusMixinClass as Constructor<FocusCapable> & T;\n};\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
export { SelectionMixin, SelectionCapable } from './selection-mixin.js';
|
|
7
|
+
export { FocusMixin, FocusCapable, FocusOptions, BlurOptions } from './focus-mixin.js';
|
|
8
|
+
export { NumberMixin, NumberCapable } from './number-mixin.js';
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}
|
package/mixins/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
export { SelectionMixin } from './selection-mixin.js';
|
|
7
|
+
export { FocusMixin } from './focus-mixin.js';
|
|
8
|
+
export { NumberMixin } from './number-mixin.js';
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAoB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,UAAU,EAA2C,MAAM,kBAAkB,CAAC;AACvF,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport { SelectionMixin, SelectionCapable } from './selection-mixin.js';\nexport { FocusMixin, FocusCapable, FocusOptions, BlurOptions } from './focus-mixin.js';\nexport { NumberMixin, NumberCapable } from './number-mixin.js';\n"]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
declare type Constructor<T = {}> = new (...args: any[]) => T;
|
|
8
|
+
/**
|
|
9
|
+
* Interface for components that support number operations
|
|
10
|
+
*/
|
|
11
|
+
export interface NumberCapable {
|
|
12
|
+
/**
|
|
13
|
+
* Increment the number value
|
|
14
|
+
*/
|
|
15
|
+
increment(): void;
|
|
16
|
+
/**
|
|
17
|
+
* Decrement the number value
|
|
18
|
+
*/
|
|
19
|
+
decrement(): void;
|
|
20
|
+
/**
|
|
21
|
+
* Set the step attribute for number inputs
|
|
22
|
+
* @param step - The step value
|
|
23
|
+
*/
|
|
24
|
+
setStep(step: string | undefined): void;
|
|
25
|
+
/**
|
|
26
|
+
* Validate if a step value is valid
|
|
27
|
+
* @param step - The step value to validate
|
|
28
|
+
* @returns True if valid
|
|
29
|
+
*/
|
|
30
|
+
isValidStep(step: string | undefined): boolean;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Mixin that provides number input capabilities to input components
|
|
34
|
+
*
|
|
35
|
+
* @param superClass - The base class to extend
|
|
36
|
+
* @returns Enhanced class with number capabilities
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```typescript
|
|
40
|
+
* export class MyInput extends NumberMixin(LitElement) {
|
|
41
|
+
* @query('input') input!: HTMLInputElement;
|
|
42
|
+
*
|
|
43
|
+
* handleUpClick() {
|
|
44
|
+
* this.increment();
|
|
45
|
+
* }
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
export declare const NumberMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<NumberCapable> & T;
|
|
50
|
+
export {};
|
|
51
|
+
//# sourceMappingURL=number-mixin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/number-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,IAAI,IAAI,CAAC;IAElB;;OAEG;IACH,SAAS,IAAI,IAAI,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAExC;;;;OAIG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,sFAkHvB,CAAC"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Mixin that provides number input capabilities to input components
|
|
8
|
+
*
|
|
9
|
+
* @param superClass - The base class to extend
|
|
10
|
+
* @returns Enhanced class with number capabilities
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* export class MyInput extends NumberMixin(LitElement) {
|
|
15
|
+
* @query('input') input!: HTMLInputElement;
|
|
16
|
+
*
|
|
17
|
+
* handleUpClick() {
|
|
18
|
+
* this.increment();
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export const NumberMixin = (superClass) => {
|
|
24
|
+
class NumberMixinClass extends superClass {
|
|
25
|
+
/**
|
|
26
|
+
* Get the input element - must be implemented by the component
|
|
27
|
+
*/
|
|
28
|
+
get inputElement() {
|
|
29
|
+
var _a;
|
|
30
|
+
// Try to get from shadowRoot first (for custom elements)
|
|
31
|
+
const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input');
|
|
32
|
+
if (shadowInput) {
|
|
33
|
+
return shadowInput;
|
|
34
|
+
}
|
|
35
|
+
// Fallback to light DOM
|
|
36
|
+
const input = this.querySelector('input');
|
|
37
|
+
if (!input) {
|
|
38
|
+
throw new Error('NumberMixin requires an input element');
|
|
39
|
+
}
|
|
40
|
+
return input;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Dispatch an input event - will be overridden by components that have _dispatchInputEvent
|
|
44
|
+
*/
|
|
45
|
+
dispatchInputEvent(eventName, detail) {
|
|
46
|
+
// Try to use the component's _dispatchInputEvent method if available
|
|
47
|
+
if ('_dispatchInputEvent' in this && typeof this._dispatchInputEvent === 'function') {
|
|
48
|
+
this._dispatchInputEvent(eventName, detail);
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
// Fallback to standard event dispatch
|
|
52
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
53
|
+
detail,
|
|
54
|
+
bubbles: true,
|
|
55
|
+
composed: true
|
|
56
|
+
}));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
increment() {
|
|
60
|
+
try {
|
|
61
|
+
const input = this.inputElement;
|
|
62
|
+
// If input has no value, set it to min or 0 before stepping
|
|
63
|
+
if (!input.value) {
|
|
64
|
+
const min = input.getAttribute('min');
|
|
65
|
+
input.value = min ? min : '0';
|
|
66
|
+
}
|
|
67
|
+
input.stepUp();
|
|
68
|
+
const newValue = input.value;
|
|
69
|
+
this.dispatchInputEvent('nr-input', {
|
|
70
|
+
value: newValue,
|
|
71
|
+
target: input,
|
|
72
|
+
action: 'increment'
|
|
73
|
+
});
|
|
74
|
+
// Update component value if it has one
|
|
75
|
+
if ('value' in this) {
|
|
76
|
+
this.value = newValue;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
catch (error) {
|
|
80
|
+
console.warn('Failed to increment value:', error);
|
|
81
|
+
this.dispatchInputEvent('nr-increment-error', {
|
|
82
|
+
error,
|
|
83
|
+
value: this.inputElement.value,
|
|
84
|
+
target: this.inputElement
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
decrement() {
|
|
89
|
+
try {
|
|
90
|
+
const input = this.inputElement;
|
|
91
|
+
input.stepDown();
|
|
92
|
+
const newValue = input.value;
|
|
93
|
+
this.dispatchInputEvent('nr-input', {
|
|
94
|
+
value: newValue,
|
|
95
|
+
target: input,
|
|
96
|
+
action: 'decrement'
|
|
97
|
+
});
|
|
98
|
+
// Update component value if it has one
|
|
99
|
+
if ('value' in this) {
|
|
100
|
+
this.value = newValue;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
catch (error) {
|
|
104
|
+
console.warn('Failed to decrement value:', error);
|
|
105
|
+
this.dispatchInputEvent('nr-decrement-error', {
|
|
106
|
+
error,
|
|
107
|
+
value: this.inputElement.value,
|
|
108
|
+
target: this.inputElement
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
setStep(step) {
|
|
113
|
+
const input = this.inputElement;
|
|
114
|
+
if (step && this.isValidStep(step)) {
|
|
115
|
+
input.setAttribute('step', step);
|
|
116
|
+
}
|
|
117
|
+
else {
|
|
118
|
+
input.removeAttribute('step');
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
isValidStep(step) {
|
|
122
|
+
if (!step)
|
|
123
|
+
return true;
|
|
124
|
+
const stepValue = parseFloat(step);
|
|
125
|
+
return !isNaN(stepValue) && stepValue > 0;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
// Cast return type to the superClass type passed in
|
|
129
|
+
return NumberMixinClass;
|
|
130
|
+
};
|
|
131
|
+
//# sourceMappingURL=number-mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-mixin.js","sourceRoot":"","sources":["../../../../src/components/input/mixins/number-mixin.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support number operations\n */\nexport interface NumberCapable {\n /**\n * Increment the number value\n */\n increment(): void;\n\n /**\n * Decrement the number value\n */\n decrement(): void;\n\n /**\n * Set the step attribute for number inputs\n * @param step - The step value\n */\n setStep(step: string | undefined): void;\n\n /**\n * Validate if a step value is valid\n * @param step - The step value to validate\n * @returns True if valid\n */\n isValidStep(step: string | undefined): boolean;\n}\n\n/**\n * Mixin that provides number input capabilities to input components\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with number capabilities\n * \n * @example\n * ```typescript\n * export class MyInput extends NumberMixin(LitElement) {\n * @query('input') input!: HTMLInputElement;\n * \n * handleUpClick() {\n * this.increment();\n * }\n * }\n * ```\n */\nexport const NumberMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class NumberMixinClass extends superClass implements NumberCapable {\n /**\n * Get the input element - must be implemented by the component\n */\n protected get inputElement(): HTMLInputElement {\n // Try to get from shadowRoot first (for custom elements)\n const shadowInput = this.shadowRoot?.querySelector('#input, input') as HTMLInputElement;\n if (shadowInput) {\n return shadowInput;\n }\n \n // Fallback to light DOM\n const input = this.querySelector('input') as HTMLInputElement;\n if (!input) {\n throw new Error('NumberMixin requires an input element');\n }\n return input;\n }\n\n /**\n * Dispatch an input event - will be overridden by components that have _dispatchInputEvent\n */\n protected dispatchInputEvent(eventName: string, detail: any): void {\n // Try to use the component's _dispatchInputEvent method if available\n if ('_dispatchInputEvent' in this && typeof (this as any)._dispatchInputEvent === 'function') {\n (this as any)._dispatchInputEvent(eventName, detail);\n } else {\n // Fallback to standard event dispatch\n this.dispatchEvent(new CustomEvent(eventName, {\n detail,\n bubbles: true,\n composed: true\n }));\n }\n }\n\n increment(): void {\n try {\n const input = this.inputElement;\n \n // If input has no value, set it to min or 0 before stepping\n if (!input.value) {\n const min = input.getAttribute('min');\n input.value = min ? min : '0';\n }\n \n input.stepUp();\n const newValue = input.value;\n \n this.dispatchInputEvent('nr-input', {\n value: newValue,\n target: input,\n action: 'increment'\n });\n \n // Update component value if it has one\n if ('value' in this) {\n (this as any).value = newValue;\n }\n } catch (error) {\n console.warn('Failed to increment value:', error);\n this.dispatchInputEvent('nr-increment-error', {\n error,\n value: this.inputElement.value,\n target: this.inputElement\n });\n }\n }\n\n decrement(): void {\n try {\n const input = this.inputElement;\n input.stepDown();\n const newValue = input.value;\n \n this.dispatchInputEvent('nr-input', {\n value: newValue,\n target: input,\n action: 'decrement'\n });\n \n // Update component value if it has one\n if ('value' in this) {\n (this as any).value = newValue;\n }\n } catch (error) {\n console.warn('Failed to decrement value:', error);\n this.dispatchInputEvent('nr-decrement-error', {\n error,\n value: this.inputElement.value,\n target: this.inputElement\n });\n }\n }\n\n setStep(step: string | undefined): void {\n const input = this.inputElement;\n if (step && this.isValidStep(step)) {\n input.setAttribute('step', step);\n } else {\n input.removeAttribute('step');\n }\n }\n\n isValidStep(step: string | undefined): boolean {\n if (!step) return true;\n const stepValue = parseFloat(step);\n return !isNaN(stepValue) && stepValue > 0;\n }\n }\n\n // Cast return type to the superClass type passed in\n return NumberMixinClass as Constructor<NumberCapable> & T;\n};\n"]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
declare type Constructor<T = {}> = new (...args: any[]) => T;
|
|
8
|
+
/**
|
|
9
|
+
* Interface for components that support text selection operations
|
|
10
|
+
*/
|
|
11
|
+
export interface SelectionCapable {
|
|
12
|
+
/**
|
|
13
|
+
* Select all text in the input
|
|
14
|
+
*/
|
|
15
|
+
selectAll(): void;
|
|
16
|
+
/**
|
|
17
|
+
* Select a range of text in the input
|
|
18
|
+
* @param start - Start position
|
|
19
|
+
* @param end - End position
|
|
20
|
+
*/
|
|
21
|
+
selectRange(start: number, end: number): void;
|
|
22
|
+
/**
|
|
23
|
+
* Get the current cursor position
|
|
24
|
+
* @returns The cursor position or null if not available
|
|
25
|
+
*/
|
|
26
|
+
getCursorPosition(): number | null;
|
|
27
|
+
/**
|
|
28
|
+
* Set the cursor position
|
|
29
|
+
* @param position - The position to set
|
|
30
|
+
*/
|
|
31
|
+
setCursorPosition(position: number): void;
|
|
32
|
+
/**
|
|
33
|
+
* Get the currently selected text
|
|
34
|
+
* @returns The selected text or empty string
|
|
35
|
+
*/
|
|
36
|
+
getSelectedText(): string;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Mixin that provides text selection capabilities to input components
|
|
40
|
+
*
|
|
41
|
+
* @param superClass - The base class to extend
|
|
42
|
+
* @returns Enhanced class with selection capabilities
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```typescript
|
|
46
|
+
* export class MyInput extends SelectionMixin(LitElement) {
|
|
47
|
+
* @query('input') input!: HTMLInputElement;
|
|
48
|
+
*
|
|
49
|
+
* handleDoubleClick() {
|
|
50
|
+
* this.selectAll();
|
|
51
|
+
* }
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
export declare const SelectionMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SelectionCapable> & T;
|
|
56
|
+
export {};
|
|
57
|
+
//# sourceMappingURL=selection-mixin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selection-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/selection-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,IAAI,IAAI,CAAC;IAElB;;;;OAIG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAE9C;;;OAGG;IACH,iBAAiB,IAAI,MAAM,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1C;;;OAGG;IACH,eAAe,IAAI,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,yFA8D1B,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Mixin that provides text selection capabilities to input components
|
|
8
|
+
*
|
|
9
|
+
* @param superClass - The base class to extend
|
|
10
|
+
* @returns Enhanced class with selection capabilities
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* export class MyInput extends SelectionMixin(LitElement) {
|
|
15
|
+
* @query('input') input!: HTMLInputElement;
|
|
16
|
+
*
|
|
17
|
+
* handleDoubleClick() {
|
|
18
|
+
* this.selectAll();
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export const SelectionMixin = (superClass) => {
|
|
24
|
+
class SelectionMixinClass extends superClass {
|
|
25
|
+
/**
|
|
26
|
+
* Get the input element - must be implemented by the component
|
|
27
|
+
*/
|
|
28
|
+
get inputElement() {
|
|
29
|
+
var _a;
|
|
30
|
+
// Try to get from shadowRoot first (for custom elements)
|
|
31
|
+
const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input, textarea');
|
|
32
|
+
if (shadowInput) {
|
|
33
|
+
return shadowInput;
|
|
34
|
+
}
|
|
35
|
+
// Fallback to light DOM
|
|
36
|
+
const input = this.querySelector('input, textarea');
|
|
37
|
+
if (!input) {
|
|
38
|
+
throw new Error('SelectionMixin requires an input or textarea element');
|
|
39
|
+
}
|
|
40
|
+
return input;
|
|
41
|
+
}
|
|
42
|
+
selectAll() {
|
|
43
|
+
const input = this.inputElement;
|
|
44
|
+
if (input) {
|
|
45
|
+
input.select();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
selectRange(start, end) {
|
|
49
|
+
const input = this.inputElement;
|
|
50
|
+
if (input && input.setSelectionRange) {
|
|
51
|
+
input.focus();
|
|
52
|
+
input.setSelectionRange(start, end);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
getCursorPosition() {
|
|
56
|
+
const input = this.inputElement;
|
|
57
|
+
if (input && typeof input.selectionStart === 'number') {
|
|
58
|
+
return input.selectionStart;
|
|
59
|
+
}
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
setCursorPosition(position) {
|
|
63
|
+
const input = this.inputElement;
|
|
64
|
+
if (input && input.setSelectionRange) {
|
|
65
|
+
input.focus();
|
|
66
|
+
input.setSelectionRange(position, position);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
getSelectedText() {
|
|
70
|
+
const input = this.inputElement;
|
|
71
|
+
if (input && input.selectionStart !== null && input.selectionEnd !== null) {
|
|
72
|
+
return input.value.substring(input.selectionStart, input.selectionEnd);
|
|
73
|
+
}
|
|
74
|
+
return '';
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
// Cast return type to the superClass type passed in
|
|
78
|
+
return SelectionMixinClass;
|
|
79
|
+
};
|
|
80
|
+
//# sourceMappingURL=selection-mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selection-mixin.js","sourceRoot":"","sources":["../../../../src/components/input/mixins/selection-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAyCH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAoC,UAAa,EAAE,EAAE;IACjF,MAAM,mBAAoB,SAAQ,UAAU;QAC1C;;WAEG;QACH,IAAc,YAAY;;YACxB,yDAAyD;YACzD,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,yBAAyB,CAA2C,CAAC;YACxH,IAAI,WAAW,EAAE;gBACf,OAAO,WAAW,CAAC;aACpB;YAED,wBAAwB;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAA2C,CAAC;YAC9F,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;aACzE;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,SAAS;YACP,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,MAAM,EAAE,CAAC;aAChB;QACH,CAAC;QAED,WAAW,CAAC,KAAa,EAAE,GAAW;YACpC,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,IAAI,KAAK,CAAC,iBAAiB,EAAE;gBACpC,KAAK,CAAC,KAAK,EAAE,CAAC;gBACd,KAAK,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;aACrC;QACH,CAAC;QAED,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,IAAI,OAAO,KAAK,CAAC,cAAc,KAAK,QAAQ,EAAE;gBACrD,OAAO,KAAK,CAAC,cAAc,CAAC;aAC7B;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,iBAAiB,CAAC,QAAgB;YAChC,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,IAAI,KAAK,CAAC,iBAAiB,EAAE;gBACpC,KAAK,CAAC,KAAK,EAAE,CAAC;gBACd,KAAK,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;aAC7C;QACH,CAAC;QAED,eAAe;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,IAAI,KAAK,CAAC,cAAc,KAAK,IAAI,IAAI,KAAK,CAAC,YAAY,KAAK,IAAI,EAAE;gBACzE,OAAO,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;aACxE;YACD,OAAO,EAAE,CAAC;QACZ,CAAC;KACF;IAED,oDAAoD;IACpD,OAAO,mBAAwD,CAAC;AAClE,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support text selection operations\n */\nexport interface SelectionCapable {\n /**\n * Select all text in the input\n */\n selectAll(): void;\n\n /**\n * Select a range of text in the input\n * @param start - Start position\n * @param end - End position\n */\n selectRange(start: number, end: number): void;\n\n /**\n * Get the current cursor position\n * @returns The cursor position or null if not available\n */\n getCursorPosition(): number | null;\n\n /**\n * Set the cursor position\n * @param position - The position to set\n */\n setCursorPosition(position: number): void;\n\n /**\n * Get the currently selected text\n * @returns The selected text or empty string\n */\n getSelectedText(): string;\n}\n\n/**\n * Mixin that provides text selection capabilities to input components\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with selection capabilities\n * \n * @example\n * ```typescript\n * export class MyInput extends SelectionMixin(LitElement) {\n * @query('input') input!: HTMLInputElement;\n * \n * handleDoubleClick() {\n * this.selectAll();\n * }\n * }\n * ```\n */\nexport const SelectionMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class SelectionMixinClass extends superClass implements SelectionCapable {\n /**\n * Get the input element - must be implemented by the component\n */\n protected get inputElement(): HTMLInputElement | HTMLTextAreaElement {\n // Try to get from shadowRoot first (for custom elements)\n const shadowInput = this.shadowRoot?.querySelector('#input, input, textarea') as HTMLInputElement | HTMLTextAreaElement;\n if (shadowInput) {\n return shadowInput;\n }\n \n // Fallback to light DOM\n const input = this.querySelector('input, textarea') as HTMLInputElement | HTMLTextAreaElement;\n if (!input) {\n throw new Error('SelectionMixin requires an input or textarea element');\n }\n return input;\n }\n\n selectAll(): void {\n const input = this.inputElement;\n if (input) {\n input.select();\n }\n }\n\n selectRange(start: number, end: number): void {\n const input = this.inputElement;\n if (input && input.setSelectionRange) {\n input.focus();\n input.setSelectionRange(start, end);\n }\n }\n\n getCursorPosition(): number | null {\n const input = this.inputElement;\n if (input && typeof input.selectionStart === 'number') {\n return input.selectionStart;\n }\n return null;\n }\n\n setCursorPosition(position: number): void {\n const input = this.inputElement;\n if (input && input.setSelectionRange) {\n input.focus();\n input.setSelectionRange(position, position);\n }\n }\n\n getSelectedText(): string {\n const input = this.inputElement;\n if (input && input.selectionStart !== null && input.selectionEnd !== null) {\n return input.value.substring(input.selectionStart, input.selectionEnd);\n }\n return '';\n }\n }\n\n // Cast return type to the superClass type passed in\n return SelectionMixinClass as Constructor<SelectionCapable> & T;\n};\n"]}
|