@nuralyui/input 0.0.8 → 0.0.10
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/bundle.js +1277 -0
- package/input.component.d.ts +118 -26
- package/input.component.js +229 -228
- package/input.component.js.map +1 -1
- package/input.style.js +154 -0
- package/input.style.js.map +1 -1
- package/input.style.variable.js +19 -0
- package/input.style.variable.js.map +1 -1
- package/input.types.d.ts +90 -1
- package/input.types.js +73 -0
- package/input.types.js.map +1 -1
- package/package.json +16 -2
- package/demo/input-demo.d.ts +0 -19
- package/demo/input-demo.d.ts.map +0 -1
- package/demo/input-demo.js +0 -339
- package/demo/input-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/input.component.d.ts.map +0 -1
- package/input.style.d.ts.map +0 -1
- package/input.style.variable.d.ts.map +0 -1
- package/input.types.d.ts.map +0 -1
- package/mixins/focus-mixin.d.ts +0 -60
- package/mixins/focus-mixin.d.ts.map +0 -1
- package/mixins/focus-mixin.js +0 -65
- package/mixins/focus-mixin.js.map +0 -1
- package/mixins/index.d.ts +0 -9
- package/mixins/index.d.ts.map +0 -1
- package/mixins/index.js +0 -9
- package/mixins/index.js.map +0 -1
- package/mixins/number-mixin.d.ts +0 -51
- package/mixins/number-mixin.d.ts.map +0 -1
- package/mixins/number-mixin.js +0 -131
- package/mixins/number-mixin.js.map +0 -1
- package/mixins/selection-mixin.d.ts +0 -57
- package/mixins/selection-mixin.d.ts.map +0 -1
- package/mixins/selection-mixin.js +0 -80
- package/mixins/selection-mixin.js.map +0 -1
- package/react.d.ts.map +0 -1
- package/test/hy-input_test.d.ts +0 -2
- package/test/hy-input_test.d.ts.map +0 -1
- package/test/hy-input_test.js +0 -159
- package/test/hy-input_test.js.map +0 -1
- package/utils/index.d.ts +0 -8
- package/utils/index.d.ts.map +0 -1
- package/utils/index.js +0 -8
- package/utils/index.js.map +0 -1
- package/utils/input-renderers.d.ts +0 -54
- package/utils/input-renderers.d.ts.map +0 -1
- package/utils/input-renderers.js +0 -174
- package/utils/input-renderers.js.map +0 -1
- package/utils/input-validation.utils.d.ts +0 -26
- package/utils/input-validation.utils.d.ts.map +0 -1
- package/utils/input-validation.utils.js +0 -105
- package/utils/input-validation.utils.js.map +0 -1
- package/validation.d.ts.map +0 -1
package/input.types.js
CHANGED
|
@@ -1,2 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Built-in validation patterns
|
|
3
|
+
*/
|
|
4
|
+
export const VALIDATION_PATTERNS = {
|
|
5
|
+
EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
6
|
+
URL: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,
|
|
7
|
+
PHONE: /^[\+]?[1-9][\d]{0,15}$/,
|
|
8
|
+
PASSWORD_STRONG: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
|
|
9
|
+
ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
|
|
10
|
+
NUMERIC: /^\d+$/,
|
|
11
|
+
ALPHA: /^[a-zA-Z]+$/,
|
|
12
|
+
USERNAME: /^[a-zA-Z0-9_-]{3,16}$/,
|
|
13
|
+
HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
|
|
14
|
+
IPV4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
|
|
15
|
+
CREDIT_CARD: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/,
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Pre-built validation rules
|
|
19
|
+
*/
|
|
20
|
+
export const VALIDATION_RULES = {
|
|
21
|
+
required: (message) => ({
|
|
22
|
+
required: true,
|
|
23
|
+
message: message || 'This field is required'
|
|
24
|
+
}),
|
|
25
|
+
email: (message) => ({
|
|
26
|
+
type: 'email',
|
|
27
|
+
pattern: VALIDATION_PATTERNS.EMAIL,
|
|
28
|
+
message: message || 'Please enter a valid email address'
|
|
29
|
+
}),
|
|
30
|
+
url: (message) => ({
|
|
31
|
+
type: 'url',
|
|
32
|
+
pattern: VALIDATION_PATTERNS.URL,
|
|
33
|
+
message: message || 'Please enter a valid URL'
|
|
34
|
+
}),
|
|
35
|
+
minLength: (min, message) => ({
|
|
36
|
+
minLength: min,
|
|
37
|
+
message: message || `Minimum length is ${min} characters`
|
|
38
|
+
}),
|
|
39
|
+
maxLength: (max, message) => ({
|
|
40
|
+
maxLength: max,
|
|
41
|
+
message: message || `Maximum length is ${max} characters`
|
|
42
|
+
}),
|
|
43
|
+
min: (min, message) => ({
|
|
44
|
+
type: 'number',
|
|
45
|
+
min,
|
|
46
|
+
message: message || `Minimum value is ${min}`
|
|
47
|
+
}),
|
|
48
|
+
max: (max, message) => ({
|
|
49
|
+
type: 'number',
|
|
50
|
+
max,
|
|
51
|
+
message: message || `Maximum value is ${max}`
|
|
52
|
+
}),
|
|
53
|
+
pattern: (pattern, message) => ({
|
|
54
|
+
pattern,
|
|
55
|
+
message: message || 'Invalid format'
|
|
56
|
+
}),
|
|
57
|
+
strongPassword: (message) => ({
|
|
58
|
+
pattern: VALIDATION_PATTERNS.PASSWORD_STRONG,
|
|
59
|
+
message: message || 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'
|
|
60
|
+
}),
|
|
61
|
+
phone: (message) => ({
|
|
62
|
+
pattern: VALIDATION_PATTERNS.PHONE,
|
|
63
|
+
message: message || 'Please enter a valid phone number'
|
|
64
|
+
}),
|
|
65
|
+
username: (message) => ({
|
|
66
|
+
pattern: VALIDATION_PATTERNS.USERNAME,
|
|
67
|
+
message: message || 'Username must be 3-16 characters long and contain only letters, numbers, hyphens and underscores'
|
|
68
|
+
}),
|
|
69
|
+
creditCard: (message) => ({
|
|
70
|
+
pattern: VALIDATION_PATTERNS.CREDIT_CARD,
|
|
71
|
+
message: message || 'Please enter a valid credit card number'
|
|
72
|
+
}),
|
|
73
|
+
};
|
|
1
74
|
export const EMPTY_STRING = '';
|
|
2
75
|
//# sourceMappingURL=input.types.js.map
|
package/input.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AA4GA;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,kDAAkD;IACzD,GAAG,EAAE,yGAAyG;IAC9G,KAAK,EAAE,wBAAwB;IAC/B,eAAe,EAAE,sEAAsE;IACvF,YAAY,EAAE,gBAAgB;IAC9B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,uBAAuB;IACjC,SAAS,EAAE,oCAAoC;IAC/C,IAAI,EAAE,6FAA6F;IACnG,WAAW,EAAE,qGAAqG;CAC1G,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/C,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,OAAO,IAAI,wBAAwB;KAC7C,CAAC;IAEF,KAAK,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC5C,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB,CAAC,KAAK;QAClC,OAAO,EAAE,OAAO,IAAI,oCAAoC;KACzD,CAAC;IAEF,GAAG,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC1C,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,mBAAmB,CAAC,GAAG;QAChC,OAAO,EAAE,OAAO,IAAI,0BAA0B;KAC/C,CAAC;IAEF,SAAS,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC7D,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,OAAO,IAAI,qBAAqB,GAAG,aAAa;KAC1D,CAAC;IAEF,SAAS,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC7D,SAAS,EAAE,GAAG;QACd,OAAO,EAAE,OAAO,IAAI,qBAAqB,GAAG,aAAa;KAC1D,CAAC;IAEF,GAAG,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACvD,IAAI,EAAE,QAAQ;QACd,GAAG;QACH,OAAO,EAAE,OAAO,IAAI,oBAAoB,GAAG,EAAE;KAC9C,CAAC;IAEF,GAAG,EAAE,CAAC,GAAW,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACvD,IAAI,EAAE,QAAQ;QACd,GAAG;QACH,OAAO,EAAE,OAAO,IAAI,oBAAoB,GAAG,EAAE;KAC9C,CAAC;IAEF,OAAO,EAAE,CAAC,OAAe,EAAE,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/D,OAAO;QACP,OAAO,EAAE,OAAO,IAAI,gBAAgB;KACrC,CAAC;IAEF,cAAc,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACrD,OAAO,EAAE,mBAAmB,CAAC,eAAe;QAC5C,OAAO,EAAE,OAAO,IAAI,2GAA2G;KAChI,CAAC;IAEF,KAAK,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC5C,OAAO,EAAE,mBAAmB,CAAC,KAAK;QAClC,OAAO,EAAE,OAAO,IAAI,mCAAmC;KACxD,CAAC;IAEF,QAAQ,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QAC/C,OAAO,EAAE,mBAAmB,CAAC,QAAQ;QACrC,OAAO,EAAE,OAAO,IAAI,kGAAkG;KACvH,CAAC;IAEF,UAAU,EAAE,CAAC,OAAgB,EAAkB,EAAE,CAAC,CAAC;QACjD,OAAO,EAAE,mBAAmB,CAAC,WAAW;QACxC,OAAO,EAAE,OAAO,IAAI,yCAAyC;KAC9D,CAAC;CACM,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n Default = 'default',\n Error = 'error',\n Warning = 'warning',\n Success = 'success',\n}\n\nexport const enum INPUT_SIZE {\n Large = 'large',\n Medium = 'medium',\n Small = 'small',\n}\n\nexport const enum INPUT_VARIANT {\n Outlined = 'outlined',\n Filled = 'filled',\n Borderless = 'borderless',\n Underlined = 'underlined',\n}\n\nexport const enum INPUT_TYPE {\n PASSWORD = 'password',\n TEXT = 'text',\n NUMBER = 'number',\n EMAIL = 'email',\n URL = 'url',\n TEL = 'tel',\n SEARCH = 'search',\n CALENDAR = 'calendar',\n}\n\nexport interface FocusOptions {\n preventScroll?: boolean;\n cursor?: 'start' | 'end' | 'all' | number;\n select?: boolean;\n}\n\nexport interface BlurOptions {\n preventScroll?: boolean;\n restoreCursor?: boolean;\n}\n\nexport interface FocusChangeEvent {\n focused: boolean;\n cursorPosition?: number;\n selectedText?: string;\n}\n\n/**\n * Validation rule interface\n */\nexport interface ValidationRule {\n /** Validation rule type */\n type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';\n \n /** Required field */\n required?: boolean;\n \n /** Pattern to match */\n pattern?: RegExp;\n \n /** Minimum length for string/array */\n minLength?: number;\n \n /** Maximum length for string/array */\n maxLength?: number;\n \n /** Minimum value for number */\n min?: number;\n \n /** Maximum value for number */\n max?: number;\n \n /** Enumerable values */\n enum?: any[];\n \n /** Custom validation message */\n message?: string;\n \n /** Custom validator function */\n validator?: (rule: ValidationRule, value: any) => Promise<void> | void | { isValid: boolean; message?: string } | Promise<{ isValid: boolean; message?: string }>;\n \n /** Async validator function */\n asyncValidator?: (rule: ValidationRule, value: any) => Promise<void>;\n \n /** Transform value before validation */\n transform?: (value: any) => any;\n \n /** Validation trigger */\n trigger?: 'change' | 'blur' | 'submit';\n \n /** Validation level */\n warningOnly?: boolean;\n}\n\n/**\n * Input validation result\n */\nexport interface InputValidationResult {\n isValid: boolean;\n errors: string[];\n warnings: string[];\n hasError: boolean;\n hasWarning: boolean;\n errorMessage?: string;\n warningMessage?: string;\n}\n\n/**\n * Built-in validation patterns\n */\nexport const VALIDATION_PATTERNS = {\n EMAIL: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/,\n URL: /^https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)$/,\n PHONE: /^[\\+]?[1-9][\\d]{0,15}$/,\n PASSWORD_STRONG: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$/,\n ALPHANUMERIC: /^[a-zA-Z0-9]+$/,\n NUMERIC: /^\\d+$/,\n ALPHA: /^[a-zA-Z]+$/,\n USERNAME: /^[a-zA-Z0-9_-]{3,16}$/,\n HEX_COLOR: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,\n IPV4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,\n CREDIT_CARD: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})$/,\n} as const;\n\n/**\n * Pre-built validation rules\n */\nexport const VALIDATION_RULES = {\n required: (message?: string): ValidationRule => ({\n required: true,\n message: message || 'This field is required'\n }),\n \n email: (message?: string): ValidationRule => ({\n type: 'email',\n pattern: VALIDATION_PATTERNS.EMAIL,\n message: message || 'Please enter a valid email address'\n }),\n \n url: (message?: string): ValidationRule => ({\n type: 'url',\n pattern: VALIDATION_PATTERNS.URL,\n message: message || 'Please enter a valid URL'\n }),\n \n minLength: (min: number, message?: string): ValidationRule => ({\n minLength: min,\n message: message || `Minimum length is ${min} characters`\n }),\n \n maxLength: (max: number, message?: string): ValidationRule => ({\n maxLength: max,\n message: message || `Maximum length is ${max} characters`\n }),\n \n min: (min: number, message?: string): ValidationRule => ({\n type: 'number',\n min,\n message: message || `Minimum value is ${min}`\n }),\n \n max: (max: number, message?: string): ValidationRule => ({\n type: 'number',\n max,\n message: message || `Maximum value is ${max}`\n }),\n \n pattern: (pattern: RegExp, message?: string): ValidationRule => ({\n pattern,\n message: message || 'Invalid format'\n }),\n \n strongPassword: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.PASSWORD_STRONG,\n message: message || 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'\n }),\n \n phone: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.PHONE,\n message: message || 'Please enter a valid phone number'\n }),\n \n username: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.USERNAME,\n message: message || 'Username must be 3-16 characters long and contain only letters, numbers, hyphens and underscores'\n }),\n \n creditCard: (message?: string): ValidationRule => ({\n pattern: VALIDATION_PATTERNS.CREDIT_CARD,\n message: message || 'Please enter a valid credit card number'\n }),\n} as const;\n\nexport const EMPTY_STRING = '';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/input",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -8,5 +8,19 @@
|
|
|
8
8
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
9
9
|
},
|
|
10
10
|
"author": "Labidi Aymen",
|
|
11
|
-
"license": "ISC"
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./index.js"
|
|
15
|
+
},
|
|
16
|
+
"./bundle": {
|
|
17
|
+
"import": "./bundle.js"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"bundle.js",
|
|
22
|
+
"*.js",
|
|
23
|
+
"*.d.ts",
|
|
24
|
+
"*.js.map"
|
|
25
|
+
]
|
|
12
26
|
}
|
package/demo/input-demo.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
import { LitElement } from 'lit';
|
|
7
|
-
import '../input.component';
|
|
8
|
-
export declare class ElButtonDemoElement extends LitElement {
|
|
9
|
-
_changeHandler(_e: unknown): void;
|
|
10
|
-
_focusHandler(_e: unknown): void;
|
|
11
|
-
enterPressedHandler(e: CustomEvent): void;
|
|
12
|
-
render(): import("lit").TemplateResult<1>;
|
|
13
|
-
}
|
|
14
|
-
declare global {
|
|
15
|
-
interface HTMLElementTagNameMap {
|
|
16
|
-
'nr-inputs-demo': ElButtonDemoElement;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
//# sourceMappingURL=input-demo.d.ts.map
|
package/demo/input-demo.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/input/demo/input-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,oBAAoB,CAAC;AAC5B,qBACa,mBAAoB,SAAQ,UAAU;IACjD,cAAc,CAAC,EAAE,EAAE,OAAO;IAI1B,aAAa,CAAC,EAAE,EAAE,OAAO;IAIzB,mBAAmB,CAAC,CAAC,EAAC,WAAW;IAGxB,MAAM;CAqThB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
|
package/demo/input-demo.js
DELETED
|
@@ -1,339 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
7
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
9
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
10
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
11
|
-
};
|
|
12
|
-
import { LitElement, html } from 'lit';
|
|
13
|
-
import { customElement } from 'lit/decorators.js';
|
|
14
|
-
import '../input.component';
|
|
15
|
-
let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
|
|
16
|
-
_changeHandler(_e) {
|
|
17
|
-
console.log(_e);
|
|
18
|
-
}
|
|
19
|
-
_focusHandler(_e) {
|
|
20
|
-
console.log('e', _e);
|
|
21
|
-
}
|
|
22
|
-
enterPressedHandler(e) {
|
|
23
|
-
console.log('e ', e.detail.value);
|
|
24
|
-
}
|
|
25
|
-
render() {
|
|
26
|
-
return html ` <div>
|
|
27
|
-
<h3>Text input</h3>
|
|
28
|
-
<nr-input
|
|
29
|
-
placeholder="Enter your FullName"
|
|
30
|
-
size="large"
|
|
31
|
-
@nr-input=${this._changeHandler}
|
|
32
|
-
@nr-focus=${this._focusHandler}
|
|
33
|
-
@nr-enter=${this.enterPressedHandler}
|
|
34
|
-
>
|
|
35
|
-
<span slot="label">Large input</span>
|
|
36
|
-
<span slot="helper-text">helper</span>
|
|
37
|
-
</nr-input>
|
|
38
|
-
<br />
|
|
39
|
-
<br />
|
|
40
|
-
|
|
41
|
-
<nr-input
|
|
42
|
-
placeholder="Enter your FullName"
|
|
43
|
-
?withCopy=${true}
|
|
44
|
-
size="large"
|
|
45
|
-
@nr-input=${this._changeHandler}
|
|
46
|
-
@nr-focus=${this._focusHandler}
|
|
47
|
-
>
|
|
48
|
-
<span slot="label">Text input with copy</span>
|
|
49
|
-
<span slot="helper-text">helper</span>
|
|
50
|
-
</nr-input>
|
|
51
|
-
<br />
|
|
52
|
-
<br />
|
|
53
|
-
<nr-input
|
|
54
|
-
placeholder="Enter your FullName"
|
|
55
|
-
size="medium"
|
|
56
|
-
@nr-input=${this._changeHandler}
|
|
57
|
-
@nr-focus=${this._focusHandler}
|
|
58
|
-
>
|
|
59
|
-
<span slot="label">Medium input</span>
|
|
60
|
-
<span slot="helper-text">helper</span>
|
|
61
|
-
</nr-input>
|
|
62
|
-
<br />
|
|
63
|
-
<br />
|
|
64
|
-
<nr-input
|
|
65
|
-
placeholder="Enter your FullName"
|
|
66
|
-
size="small"
|
|
67
|
-
@nr-input=${this._changeHandler}
|
|
68
|
-
@nr-focus=${this._focusHandler}
|
|
69
|
-
>
|
|
70
|
-
<span slot="label">Small input</span>
|
|
71
|
-
<span slot="helper-text">helper</span>
|
|
72
|
-
</nr-input>
|
|
73
|
-
<br />
|
|
74
|
-
<br />
|
|
75
|
-
<nr-input size="small" @nr-input=${this._changeHandler} @nr-focus=${this._focusHandler}>
|
|
76
|
-
<span slot="label">without placeholder</span>
|
|
77
|
-
</nr-input>
|
|
78
|
-
<br />
|
|
79
|
-
<br />
|
|
80
|
-
<nr-input
|
|
81
|
-
placeholder="Enter your FullName"
|
|
82
|
-
state="error"
|
|
83
|
-
size="large"
|
|
84
|
-
@nr-input=${this._changeHandler}
|
|
85
|
-
@nr-focus=${this._focusHandler}
|
|
86
|
-
>
|
|
87
|
-
<span slot="label">Error input</span>
|
|
88
|
-
<span slot="helper-text">Error input helper</span>
|
|
89
|
-
</nr-input>
|
|
90
|
-
<br />
|
|
91
|
-
<br />
|
|
92
|
-
<nr-input
|
|
93
|
-
placeholder="Enter your FullName"
|
|
94
|
-
state="error"
|
|
95
|
-
size="large"
|
|
96
|
-
@nr-input=${this._changeHandler}
|
|
97
|
-
@nr-focus=${this._focusHandler}
|
|
98
|
-
>
|
|
99
|
-
<span slot="label">Error input without helper</span>
|
|
100
|
-
</nr-input>
|
|
101
|
-
<br />
|
|
102
|
-
<br />
|
|
103
|
-
<nr-input
|
|
104
|
-
placeholder="Enter your FullName"
|
|
105
|
-
state="warning"
|
|
106
|
-
size="large"
|
|
107
|
-
@nr-input=${this._changeHandler}
|
|
108
|
-
@nr-focus=${this._focusHandler}
|
|
109
|
-
>
|
|
110
|
-
<span slot="label">Warning input</span>
|
|
111
|
-
<span slot="helper-text">Warning input helper</span>
|
|
112
|
-
</nr-input>
|
|
113
|
-
<br />
|
|
114
|
-
<br />
|
|
115
|
-
<nr-input
|
|
116
|
-
placeholder="Enter your FullName"
|
|
117
|
-
state="warning"
|
|
118
|
-
size="large"
|
|
119
|
-
@nr-input=${this._changeHandler}
|
|
120
|
-
@nr-focus=${this._focusHandler}
|
|
121
|
-
>
|
|
122
|
-
<span slot="label">Warning input without helper</span>
|
|
123
|
-
</nr-input>
|
|
124
|
-
<br />
|
|
125
|
-
<br />
|
|
126
|
-
<nr-input
|
|
127
|
-
placeholder="Enter your FullName"
|
|
128
|
-
disabled
|
|
129
|
-
state="error"
|
|
130
|
-
size="large"
|
|
131
|
-
@nr-input=${this._changeHandler}
|
|
132
|
-
@nr-focus=${this._focusHandler}
|
|
133
|
-
>
|
|
134
|
-
<span slot="label">disabled input error </span>
|
|
135
|
-
<span slot="helper-text">helper</span>
|
|
136
|
-
</nr-input>
|
|
137
|
-
<br />
|
|
138
|
-
<br />
|
|
139
|
-
<nr-input
|
|
140
|
-
placeholder="Enter your FullName"
|
|
141
|
-
disabled
|
|
142
|
-
state="warning"
|
|
143
|
-
size="large"
|
|
144
|
-
@nr-input=${this._changeHandler}
|
|
145
|
-
@nr-focus=${this._focusHandler}
|
|
146
|
-
>
|
|
147
|
-
<span slot="label">disabled input warning </span>
|
|
148
|
-
<span slot="helper-text">helper</span>
|
|
149
|
-
</nr-input>
|
|
150
|
-
<br />
|
|
151
|
-
<br />
|
|
152
|
-
<nr-input
|
|
153
|
-
placeholder="Enter your FullName"
|
|
154
|
-
size="large"
|
|
155
|
-
@nr-input=${this._changeHandler}
|
|
156
|
-
@nr-focus=${this._focusHandler}
|
|
157
|
-
>
|
|
158
|
-
<span slot="helper-text">without label</span>
|
|
159
|
-
</nr-input>
|
|
160
|
-
<br /><br />
|
|
161
|
-
<nr-input
|
|
162
|
-
placeholder="Enter your FullName"
|
|
163
|
-
size="large"
|
|
164
|
-
@nr-input=${this._changeHandler}
|
|
165
|
-
@nr-focus=${this._focusHandler}
|
|
166
|
-
>
|
|
167
|
-
</nr-input>
|
|
168
|
-
<br /><br />
|
|
169
|
-
|
|
170
|
-
<nr-input
|
|
171
|
-
?disabled=${true}
|
|
172
|
-
placeholder="Enter your FullName"
|
|
173
|
-
size="large"
|
|
174
|
-
@nr-input=${this._changeHandler}
|
|
175
|
-
@nr-focus=${this._focusHandler}
|
|
176
|
-
>
|
|
177
|
-
<span slot="label">Disabled input</span>
|
|
178
|
-
</nr-input>
|
|
179
|
-
|
|
180
|
-
<br /><br />
|
|
181
|
-
<nr-input
|
|
182
|
-
placeholder="Enter your FullName"
|
|
183
|
-
?disabled=${true}
|
|
184
|
-
size="large"
|
|
185
|
-
@nr-input=${this._changeHandler}
|
|
186
|
-
@nr-focus=${this._focusHandler}
|
|
187
|
-
>
|
|
188
|
-
<span slot="label">Disabled input with label and helper</span>
|
|
189
|
-
<span slot="helper-text">helper</span>
|
|
190
|
-
</nr-input>
|
|
191
|
-
|
|
192
|
-
<br /><br />
|
|
193
|
-
<h3>Password input</h3>
|
|
194
|
-
|
|
195
|
-
<nr-input
|
|
196
|
-
placeholder="your password please"
|
|
197
|
-
size="large"
|
|
198
|
-
type="password"
|
|
199
|
-
@nr-input=${this._changeHandler}
|
|
200
|
-
@nr-focus=${this._focusHandler}
|
|
201
|
-
>
|
|
202
|
-
<span slot="label">Password input</span>
|
|
203
|
-
</nr-input>
|
|
204
|
-
<br /><br />
|
|
205
|
-
<nr-input
|
|
206
|
-
disabled
|
|
207
|
-
placeholder="your password please"
|
|
208
|
-
size="large"
|
|
209
|
-
type="password"
|
|
210
|
-
@nr-input=${this._changeHandler}
|
|
211
|
-
@nr-focus=${this._focusHandler}
|
|
212
|
-
>
|
|
213
|
-
<span slot="label">Password input disabled</span>
|
|
214
|
-
</nr-input>
|
|
215
|
-
<br /><br />
|
|
216
|
-
<nr-input
|
|
217
|
-
placeholder="your password please"
|
|
218
|
-
size="large"
|
|
219
|
-
type="password"
|
|
220
|
-
state="error"
|
|
221
|
-
@nr-input=${this._changeHandler}
|
|
222
|
-
@nr-focus=${this._focusHandler}
|
|
223
|
-
>
|
|
224
|
-
<span slot="label">Password input error</span>
|
|
225
|
-
</nr-input>
|
|
226
|
-
<br /><br />
|
|
227
|
-
<nr-input
|
|
228
|
-
placeholder="your password please"
|
|
229
|
-
disabled
|
|
230
|
-
size="large"
|
|
231
|
-
type="password"
|
|
232
|
-
state="error"
|
|
233
|
-
@nr-input=${this._changeHandler}
|
|
234
|
-
@nr-focus=${this._focusHandler}
|
|
235
|
-
>
|
|
236
|
-
<span slot="label">Password input error disabled</span>
|
|
237
|
-
</nr-input>
|
|
238
|
-
<br /><br />
|
|
239
|
-
<nr-input
|
|
240
|
-
placeholder="your password please"
|
|
241
|
-
size="large"
|
|
242
|
-
type="password"
|
|
243
|
-
state="warning"
|
|
244
|
-
@nr-input=${this._changeHandler}
|
|
245
|
-
@nr-focus=${this._focusHandler}
|
|
246
|
-
>
|
|
247
|
-
<span slot="label">Password input warning </span>
|
|
248
|
-
</nr-input>
|
|
249
|
-
<br /><br />
|
|
250
|
-
<nr-input
|
|
251
|
-
placeholder="your password please"
|
|
252
|
-
disabled
|
|
253
|
-
size="large"
|
|
254
|
-
type="password"
|
|
255
|
-
state="warning"
|
|
256
|
-
@nr-input=${this._changeHandler}
|
|
257
|
-
@nr-focus=${this._focusHandler}
|
|
258
|
-
>
|
|
259
|
-
<span slot="label">Password input warning disabled</span>
|
|
260
|
-
</nr-input>
|
|
261
|
-
<br /><br />
|
|
262
|
-
<h3>Number input</h3>
|
|
263
|
-
|
|
264
|
-
<nr-input
|
|
265
|
-
placeholder="Enter your age"
|
|
266
|
-
size="large"
|
|
267
|
-
type="number"
|
|
268
|
-
@nr-input=${this._changeHandler}
|
|
269
|
-
@nr-focus=${this._focusHandler}
|
|
270
|
-
>
|
|
271
|
-
<span slot="label">Default number input </span>
|
|
272
|
-
</nr-input>
|
|
273
|
-
|
|
274
|
-
<br /><br />
|
|
275
|
-
<nr-input
|
|
276
|
-
state="error"
|
|
277
|
-
placeholder="Enter your age"
|
|
278
|
-
size="large"
|
|
279
|
-
type="number"
|
|
280
|
-
@nr-input=${this._changeHandler}
|
|
281
|
-
@nr-focus=${this._focusHandler}
|
|
282
|
-
>
|
|
283
|
-
<span slot="label">Number input error </span>
|
|
284
|
-
</nr-input>
|
|
285
|
-
<br /><br />
|
|
286
|
-
<nr-input
|
|
287
|
-
disabled
|
|
288
|
-
state="error"
|
|
289
|
-
placeholder="Enter your age"
|
|
290
|
-
size="large"
|
|
291
|
-
type="number"
|
|
292
|
-
@nr-input=${this._changeHandler}
|
|
293
|
-
@nr-focus=${this._focusHandler}
|
|
294
|
-
>
|
|
295
|
-
<span slot="label">Number input error disabled</span>
|
|
296
|
-
</nr-input>
|
|
297
|
-
<br /><br />
|
|
298
|
-
<nr-input
|
|
299
|
-
state="warning"
|
|
300
|
-
placeholder="Enter your age"
|
|
301
|
-
size="large"
|
|
302
|
-
type="number"
|
|
303
|
-
@nr-input=${this._changeHandler}
|
|
304
|
-
@nr-focus=${this._focusHandler}
|
|
305
|
-
>
|
|
306
|
-
<span slot="label">Number input warning </span>
|
|
307
|
-
</nr-input>
|
|
308
|
-
<br /><br />
|
|
309
|
-
<nr-input
|
|
310
|
-
disabled
|
|
311
|
-
state="warning"
|
|
312
|
-
placeholder="Enter your age"
|
|
313
|
-
size="large"
|
|
314
|
-
type="number"
|
|
315
|
-
@nr-input=${this._changeHandler}
|
|
316
|
-
@nr-focus=${this._focusHandler}
|
|
317
|
-
>
|
|
318
|
-
<span slot="label">Number input warning disabled </span>
|
|
319
|
-
</nr-input>
|
|
320
|
-
<br /><br />
|
|
321
|
-
<nr-input
|
|
322
|
-
min="15"
|
|
323
|
-
max="100"
|
|
324
|
-
step="25"
|
|
325
|
-
size="large"
|
|
326
|
-
type="number"
|
|
327
|
-
@nr-input=${this._changeHandler}
|
|
328
|
-
@nr-focus=${this._focusHandler}
|
|
329
|
-
>
|
|
330
|
-
<span slot="label">Number input with steps of 25, max 100 and min 15 </span>
|
|
331
|
-
</nr-input>
|
|
332
|
-
</div>`;
|
|
333
|
-
}
|
|
334
|
-
};
|
|
335
|
-
ElButtonDemoElement = __decorate([
|
|
336
|
-
customElement('nr-inputs-demo')
|
|
337
|
-
], ElButtonDemoElement);
|
|
338
|
-
export { ElButtonDemoElement };
|
|
339
|
-
//# sourceMappingURL=input-demo.js.map
|
package/demo/input-demo.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-demo.js","sourceRoot":"","sources":["../../../../src/components/input/demo/input-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '../input.component';\n@customElement('nr-inputs-demo')\nexport class ElButtonDemoElement extends LitElement {\n _changeHandler(_e: unknown) {\n console.log(_e);\n }\n\n _focusHandler(_e: unknown) {\n console.log('e', _e);\n }\n\n enterPressedHandler(e:CustomEvent){\n console.log('e ',e.detail.value)\n }\n override render() {\n return html` <div>\n <h3>Text input</h3>\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n @nr-enter=${this.enterPressedHandler}\n >\n <span slot=\"label\">Large input</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n\n <nr-input\n placeholder=\"Enter your FullName\"\n ?withCopy=${true}\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Text input with copy</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"medium\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Medium input</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"small\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Small input</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input size=\"small\" @nr-input=${this._changeHandler} @nr-focus=${this._focusHandler}>\n <span slot=\"label\">without placeholder</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"error\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Error input</span>\n <span slot=\"helper-text\">Error input helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"error\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Error input without helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"warning\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Warning input</span>\n <span slot=\"helper-text\">Warning input helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"warning\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Warning input without helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n disabled\n state=\"error\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">disabled input error </span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n disabled\n state=\"warning\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">disabled input warning </span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"helper-text\">without label</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n </nr-input>\n <br /><br />\n\n <nr-input\n ?disabled=${true}\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Disabled input</span>\n </nr-input>\n\n <br /><br />\n <nr-input\n placeholder=\"Enter your FullName\"\n ?disabled=${true}\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Disabled input with label and helper</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n\n <br /><br />\n <h3>Password input</h3>\n\n <nr-input\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input</span>\n </nr-input>\n <br /><br />\n <nr-input\n disabled\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input disabled</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n state=\"error\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input error</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n disabled\n size=\"large\"\n type=\"password\"\n state=\"error\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input error disabled</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n state=\"warning\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input warning </span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n disabled\n size=\"large\"\n type=\"password\"\n state=\"warning\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input warning disabled</span>\n </nr-input>\n <br /><br />\n <h3>Number input</h3>\n\n <nr-input\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Default number input </span>\n </nr-input>\n\n <br /><br />\n <nr-input\n state=\"error\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input error </span>\n </nr-input>\n <br /><br />\n <nr-input\n disabled\n state=\"error\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input error disabled</span>\n </nr-input>\n <br /><br />\n <nr-input\n state=\"warning\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input warning </span>\n </nr-input>\n <br /><br />\n <nr-input\n disabled\n state=\"warning\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input warning disabled </span>\n </nr-input>\n <br /><br />\n <nr-input\n min=\"15\"\n max=\"100\"\n step=\"25\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input with steps of 25, max 100 and min 15 </span>\n </nr-input>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-inputs-demo': ElButtonDemoElement;\n }\n}\n"]}
|
package/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC"}
|
package/input.component.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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.style.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA8jBA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.variable.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA2K1B,CAAC"}
|
package/input.types.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,aAAa;IAC7B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,UAAU,eAAe;CAC1B;AAED,0BAAkB,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}
|
package/mixins/focus-mixin.d.ts
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|