@nuralyui/input 0.0.4 → 0.0.6
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/demo/input-demo.d.ts +1 -1
- package/demo/input-demo.d.ts.map +1 -1
- package/demo/input-demo.js +109 -109
- package/demo/input-demo.js.map +1 -1
- package/input.component.d.ts +40 -21
- package/input.component.d.ts.map +1 -1
- package/input.component.js +306 -114
- package/input.component.js.map +1 -1
- package/input.style.d.ts.map +1 -1
- package/input.style.js +347 -95
- package/input.style.js.map +1 -1
- package/{variables.style.d.ts → input.style.variable.d.ts} +1 -1
- package/input.style.variable.d.ts.map +1 -0
- package/{variables.style.js → input.style.variable.js} +51 -26
- package/input.style.variable.js.map +1 -0
- package/{input.constant.d.ts → input.types.d.ts} +1 -1
- package/input.types.d.ts.map +1 -0
- package/input.types.js +2 -0
- package/input.types.js.map +1 -0
- package/package.json +1 -1
- package/react.d.ts +7 -4
- package/react.d.ts.map +1 -1
- package/react.js +9 -6
- package/react.js.map +1 -1
- package/test/hy-input_test.js +15 -15
- package/test/hy-input_test.js.map +1 -1
- package/utils/index.d.ts +8 -0
- package/utils/index.d.ts.map +1 -0
- package/utils/index.js +8 -0
- package/utils/index.js.map +1 -0
- package/utils/input-renderers.d.ts +50 -0
- package/utils/input-renderers.d.ts.map +1 -0
- package/utils/input-renderers.js +157 -0
- package/utils/input-renderers.js.map +1 -0
- package/utils/input-validation.utils.d.ts +26 -0
- package/utils/input-validation.utils.d.ts.map +1 -0
- package/utils/input-validation.utils.js +105 -0
- package/utils/input-validation.utils.js.map +1 -0
- package/input.constant.d.ts.map +0 -1
- package/input.constant.js +0 -2
- package/input.constant.js.map +0 -1
- package/variables.style.d.ts.map +0 -1
- package/variables.style.js.map +0 -1
|
@@ -39,10 +39,10 @@ export const styleVariables = css `
|
|
|
39
39
|
--hybrid-input-local-number-icons-color: #000000;
|
|
40
40
|
--hybrid-input-local-password-icon-padding-left: 8px;
|
|
41
41
|
--hybrid-input-local-password-icon-padding-right: 8px;
|
|
42
|
-
--hybrid-input-local-number-icons-
|
|
43
|
-
--hybrid-input-local-number-icons-
|
|
44
|
-
--hybrid-input-local-number-icons-
|
|
45
|
-
--hybrid-input-local-number-icons-
|
|
42
|
+
--hybrid-input-local-number-icons-separator-color: #e0e0e0;
|
|
43
|
+
--hybrid-input-local-number-icons-separator-padding-bottom: 4px;
|
|
44
|
+
--hybrid-input-local-number-icons-separator-padding-left: 5px;
|
|
45
|
+
--hybrid-input-local-number-icons-separator-padding-right: 5px;
|
|
46
46
|
--hybrid-input-local-copy-icon-padding-right:5px;
|
|
47
47
|
|
|
48
48
|
--hybrid-input-local-number-icons-container-width: 70px;
|
|
@@ -68,29 +68,54 @@ export const styleVariables = css `
|
|
|
68
68
|
--hybrid-input-local-small-padding-bottom: 4px;
|
|
69
69
|
--hybrid-input-local-small-padding-left: 9px;
|
|
70
70
|
--hybrid-input-local-small-padding-right: 4px;
|
|
71
|
+
|
|
72
|
+
/* Prefix and Suffix styling variables */
|
|
73
|
+
--hybrid-input-local-prefix-color: #525252;
|
|
74
|
+
--hybrid-input-local-prefix-font-size: 13px;
|
|
75
|
+
--hybrid-input-local-prefix-padding-right: 8px;
|
|
76
|
+
--hybrid-input-local-suffix-color: #525252;
|
|
77
|
+
--hybrid-input-local-suffix-font-size: 13px;
|
|
78
|
+
--hybrid-input-local-suffix-padding-left: 8px;
|
|
79
|
+
--hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;
|
|
80
|
+
|
|
81
|
+
/* Addon Before/After styling variables */
|
|
82
|
+
--hybrid-input-local-addon-background-color: #e8e8e8;
|
|
83
|
+
--hybrid-input-local-addon-color: #525252;
|
|
84
|
+
--hybrid-input-local-addon-padding: 8px 12px;
|
|
71
85
|
}
|
|
72
86
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
87
|
+
/*
|
|
88
|
+
* These override the light theme defaults when data-theme="dark" is applied
|
|
89
|
+
* This provides explicit theme control via JavaScript or HTML attributes
|
|
90
|
+
*/
|
|
91
|
+
.input-wrapper[data-theme="dark"] {
|
|
92
|
+
--hybrid-input-local-background-color: #393939;
|
|
93
|
+
--hybrid-input-local-focus-border: 2px solid #ffffff;
|
|
94
|
+
--hybrid-input-local-text-color: #ffffff;
|
|
95
|
+
--hybrid-input-local-error-border: 2px solid #fa4d56;
|
|
96
|
+
--hybrid-input-local-error-helper-text-color: #ffb3b8;
|
|
97
|
+
--hybrid-input-local-disabled-background-color: #393939;
|
|
98
|
+
--hybrid-input-local-disabled-placeholder-color: #6f6f6f;
|
|
99
|
+
--hybrid-input-local-disabled-helper-text-color: #6f6f6f;
|
|
100
|
+
--hybrid-input-local-disabled-label-color: #6f6f6f;
|
|
101
|
+
--hybrid-input-local-warning-icon-color: #f0c300;
|
|
102
|
+
--hybrid-input-local-error-icon-color: #da1e28;
|
|
103
|
+
--hybrid-input-local-password-icon-color: #ffffff;
|
|
104
|
+
--hybrid-input-local-number-icons-color: #ffffff;
|
|
105
|
+
--hybrid-input-local-label-color: #c6c6c6;
|
|
106
|
+
--hybrid-input-local-helper-text-color: #c6c6c6;
|
|
107
|
+
--hybrid-input-local-number-icons-separator-color: #525252;
|
|
108
|
+
--hybrid-input-local-calendar-icon-color: #ffffff;
|
|
109
|
+
--hybrid-input-local-copy-icon-color: #ffffff;
|
|
110
|
+
|
|
111
|
+
/* Dark theme prefix and suffix colors */
|
|
112
|
+
--hybrid-input-local-prefix-color: #c6c6c6;
|
|
113
|
+
--hybrid-input-local-suffix-color: #c6c6c6;
|
|
114
|
+
--hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;
|
|
115
|
+
|
|
116
|
+
/* Dark theme addon colors */
|
|
117
|
+
--hybrid-input-local-addon-background-color: #525252;
|
|
118
|
+
--hybrid-input-local-addon-color: #c6c6c6;
|
|
94
119
|
}
|
|
95
120
|
`;
|
|
96
|
-
//# sourceMappingURL=
|
|
121
|
+
//# sourceMappingURL=input.style.variable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.style.variable.js","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-input-local-background-color: #f4f4f4;\n --hybrid-input-local-text-color: #000000;\n --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-input-local-font-size:13px;\n --hybrid-input-local-label-color: #525252;\n --hybrid-input-local-placeholder-color: #a8a8a8;\n --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n --hybrid-input-local-border-top: 2px solid transparent;\n --hybrid-input-local-border-left: 2px solid transparent;\n --hybrid-input-local-border-right: 2px solid transparent;\n --hybrid-input-local-disabled-border-bottom: none;\n --hybrid-input-local-disabled-border-top: none;\n --hybrid-input-local-disabled-border-left: none;\n --hybrid-input-local-disabled-border-right: none;\n --hybrid-input-local-focus-border: 2px solid #0f62fe;\n --hybrid-input-local-border-radius: 0px;\n --hybrid-input-local-label-font-size: 13px;\n --hybrid-input-local-helper-text-color: #525252;\n --hybrid-input-local-helper-text-font-size: 13px;\n --hybrid-input-local-placeholder-font-size: 13px;\n --hybrid-input-label-padding-bottom: 5px;\n --hybrid-input-local-helper-text-padding-top: 5px;\n --hybrid-input-local-disabled-background-color: #f4f4f4;\n --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n --hybrid-input-local-error-helper-text-color: #da1e28;\n --hybrid-input-local-error-border: 2px solid #da1e28;\n --hybrid-input-local-warning-helper-text-color: #161616;\n --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n --hybrid-input-local-disabled-label-color: #c6c6c6;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #000000;\n --hybrid-input-local-calendar-icon-color: #000000;\n --hybrid-input-local-copy-icon-color: #000000;\n --hybrid-input-local-disabled-icon-opacity: 0.4;\n --hybrid-input-local-number-icons-color: #000000;\n --hybrid-input-local-password-icon-padding-left: 8px;\n --hybrid-input-local-password-icon-padding-right: 8px;\n --hybrid-input-local-number-icons-separator-color: #e0e0e0;\n --hybrid-input-local-number-icons-separator-padding-bottom: 4px;\n --hybrid-input-local-number-icons-separator-padding-left: 5px;\n --hybrid-input-local-number-icons-separator-padding-right: 5px;\n --hybrid-input-local-copy-icon-padding-right:5px;\n\n --hybrid-input-local-number-icons-container-width: 70px;\n --hybrid-input-local-number-icons-container-padding-left: 5px;\n --hybrid-input-local-number-icons-container-padding-right: 5px;\n --hybrid-input-local-number-icons-width: 12px;\n --hybrid-input-local-number-icons-height: 12px;\n\n --hybrid-input-local-number-icons-padding-left: 4px;\n --hybrid-input-local-number-icons-padding-right: 4px;\n\n --hybrid-input-local-large-padding-top: 10px;\n --hybrid-input-local-large-padding-bottom: 10px;\n --hybrid-input-local-large-padding-left: 9px;\n --hybrid-input-local-large-padding-right: 4px;\n\n --hybrid-input-local-medium-padding-top: 7px;\n --hybrid-input-local-medium-padding-bottom: 7px;\n --hybrid-input-local-medium-padding-left: 9px;\n --hybrid-input-local-medium-padding-right: 4px;\n\n --hybrid-input-local-small-padding-top: 4px;\n --hybrid-input-local-small-padding-bottom: 4px;\n --hybrid-input-local-small-padding-left: 9px;\n --hybrid-input-local-small-padding-right: 4px;\n\n /* Prefix and Suffix styling variables */\n --hybrid-input-local-prefix-color: #525252;\n --hybrid-input-local-prefix-font-size: 13px;\n --hybrid-input-local-prefix-padding-right: 8px;\n --hybrid-input-local-suffix-color: #525252;\n --hybrid-input-local-suffix-font-size: 13px;\n --hybrid-input-local-suffix-padding-left: 8px;\n --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;\n\n /* Addon Before/After styling variables */\n --hybrid-input-local-addon-background-color: #e8e8e8;\n --hybrid-input-local-addon-color: #525252;\n --hybrid-input-local-addon-padding: 8px 12px;\n }\n\n /* \n * These override the light theme defaults when data-theme=\"dark\" is applied\n * This provides explicit theme control via JavaScript or HTML attributes\n */\n .input-wrapper[data-theme=\"dark\"] {\n --hybrid-input-local-background-color: #393939;\n --hybrid-input-local-focus-border: 2px solid #ffffff;\n --hybrid-input-local-text-color: #ffffff;\n --hybrid-input-local-error-border: 2px solid #fa4d56;\n --hybrid-input-local-error-helper-text-color: #ffb3b8;\n --hybrid-input-local-disabled-background-color: #393939;\n --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n --hybrid-input-local-disabled-label-color: #6f6f6f;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #ffffff;\n --hybrid-input-local-number-icons-color: #ffffff;\n --hybrid-input-local-label-color: #c6c6c6;\n --hybrid-input-local-helper-text-color: #c6c6c6;\n --hybrid-input-local-number-icons-separator-color: #525252;\n --hybrid-input-local-calendar-icon-color: #ffffff;\n --hybrid-input-local-copy-icon-color: #ffffff;\n \n /* Dark theme prefix and suffix colors */\n --hybrid-input-local-prefix-color: #c6c6c6;\n --hybrid-input-local-suffix-color: #c6c6c6;\n --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;\n\n /* Dark theme addon colors */\n --hybrid-input-local-addon-background-color: #525252;\n --hybrid-input-local-addon-color: #c6c6c6;\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
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,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}
|
package/input.types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n Default = 'default',\n Error = 'error',\n Warning = 'warning',\n}\n\nexport const enum INPUT_SIZE {\n Large = 'large',\n Medium = 'medium',\n Small = 'small',\n}\n\nexport const enum INPUT_TYPE {\n PASSWORD = 'password',\n TEXT = 'text',\n NUMBER = 'number',\n CALENDAR = 'calendar',\n}\n\nexport const EMPTY_STRING = '';\n"]}
|
package/package.json
CHANGED
package/react.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { NrInputElement } from './input.component.js';
|
|
2
|
+
export declare const NrInput: import("@lit-labs/react").ReactWebComponent<NrInputElement, {
|
|
3
|
+
nrInput: string;
|
|
4
|
+
nrFocus: string;
|
|
5
|
+
nrEnter: string;
|
|
6
|
+
nrCopySuccess: string;
|
|
7
|
+
nrCopyError: string;
|
|
5
8
|
}>;
|
|
6
9
|
//# sourceMappingURL=react.d.ts.map
|
package/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,eAAO,MAAM,OAAO;;;;;;EAWlB,CAAC"}
|
package/react.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { createComponent } from '@lit-labs/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export const
|
|
5
|
-
tagName: '
|
|
6
|
-
elementClass:
|
|
3
|
+
import { NrInputElement } from './input.component.js';
|
|
4
|
+
export const NrInput = createComponent({
|
|
5
|
+
tagName: 'nr-input',
|
|
6
|
+
elementClass: NrInputElement,
|
|
7
7
|
react: React,
|
|
8
8
|
events: {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
nrInput: 'nr-input',
|
|
10
|
+
nrFocus: 'nr-focus',
|
|
11
|
+
nrEnter: 'nr-enter',
|
|
12
|
+
nrCopySuccess: 'nr-copy-success',
|
|
13
|
+
nrCopyError: 'nr-copy-error'
|
|
11
14
|
},
|
|
12
15
|
});
|
|
13
16
|
//# sourceMappingURL=react.js.map
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,UAAU;QACnB,aAAa,EAAE,iBAAiB;QAChC,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrInputElement } from './input.component.js';\nexport const NrInput = createComponent({\n tagName: 'nr-input',\n elementClass: NrInputElement,\n react: React,\n events: {\n nrInput: 'nr-input',\n nrFocus: 'nr-focus',\n nrEnter: 'nr-enter',\n nrCopySuccess: 'nr-copy-success',\n nrCopyError: 'nr-copy-error'\n },\n});\n"]}
|
package/test/hy-input_test.js
CHANGED
|
@@ -8,11 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
-
import { EMPTY_STRING } from '../input.
|
|
11
|
+
import { EMPTY_STRING } from '../input.types';
|
|
12
12
|
import '../input.component';
|
|
13
|
-
suite('
|
|
13
|
+
suite('NrInputElement', () => {
|
|
14
14
|
test('default properties', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
15
|
-
const el = yield fixture(html `<
|
|
15
|
+
const el = yield fixture(html `<nr-input> </nr-input>`);
|
|
16
16
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
17
17
|
const input = el.shadowRoot.querySelector('input');
|
|
18
18
|
const slot = el.shadowRoot.querySelector('slot');
|
|
@@ -41,7 +41,7 @@ suite('HyInputElement', () => {
|
|
|
41
41
|
expect(assignedNode.length).to.equal(0);
|
|
42
42
|
}));
|
|
43
43
|
test('input type password', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
44
|
-
const el = yield fixture(html `<
|
|
44
|
+
const el = yield fixture(html `<nr-input type="password"> </nr-input>`);
|
|
45
45
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
46
46
|
let passwordIcon = inputContainer.querySelector('#password-icon');
|
|
47
47
|
expect(inputContainer.querySelector('#number-icons')).to.be.null;
|
|
@@ -58,7 +58,7 @@ suite('HyInputElement', () => {
|
|
|
58
58
|
const step = 5;
|
|
59
59
|
const min = 10;
|
|
60
60
|
const max = 100;
|
|
61
|
-
const el = yield fixture(html `<
|
|
61
|
+
const el = yield fixture(html `<nr-input type="number" step=${step} min=${min} max=${max}> </nr-input>`);
|
|
62
62
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
63
63
|
const input = el.shadowRoot.querySelector('input');
|
|
64
64
|
const passwordIcon = inputContainer.querySelector('#password-icon');
|
|
@@ -72,7 +72,7 @@ suite('HyInputElement', () => {
|
|
|
72
72
|
test('increment number', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
73
73
|
const step = 5;
|
|
74
74
|
const min = 10;
|
|
75
|
-
const el = yield fixture(html `<
|
|
75
|
+
const el = yield fixture(html `<nr-input type="number" step=${step} min=${min}> </nr-input>`);
|
|
76
76
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
77
77
|
const input = el.shadowRoot.querySelector('input');
|
|
78
78
|
const numberIcon = inputContainer.querySelector('#number-icons');
|
|
@@ -82,7 +82,7 @@ suite('HyInputElement', () => {
|
|
|
82
82
|
}));
|
|
83
83
|
test('decrement number', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
84
84
|
const step = 5;
|
|
85
|
-
const el = yield fixture(html `<
|
|
85
|
+
const el = yield fixture(html `<nr-input type="number" step=${step}> </nr-input>`);
|
|
86
86
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
87
87
|
const input = el.shadowRoot.querySelector('input');
|
|
88
88
|
const inputValue = input.value;
|
|
@@ -95,14 +95,14 @@ suite('HyInputElement', () => {
|
|
|
95
95
|
suite('input with state', () => {
|
|
96
96
|
test('warning input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
97
97
|
const inputState = "warning" /* INPUT_STATE.Warning */;
|
|
98
|
-
const el = yield fixture(html `<
|
|
98
|
+
const el = yield fixture(html `<nr-input state=${inputState}> </nr-input>`);
|
|
99
99
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
100
100
|
expect(inputContainer.querySelector('#warning-icon')).to.exist;
|
|
101
101
|
expect(inputContainer.querySelector('#error-icon')).to.not.exist;
|
|
102
102
|
}));
|
|
103
103
|
test('error input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
104
104
|
const inputState = "error" /* INPUT_STATE.Error */;
|
|
105
|
-
const el = yield fixture(html `<
|
|
105
|
+
const el = yield fixture(html `<nr-input state=${inputState}> </nr-input>`);
|
|
106
106
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
107
107
|
expect(inputContainer.querySelector('#warning-icon')).to.not.exist;
|
|
108
108
|
expect(inputContainer.querySelector('#error-icon')).to.exist;
|
|
@@ -111,26 +111,26 @@ suite('HyInputElement', () => {
|
|
|
111
111
|
suite('input with size', () => {
|
|
112
112
|
test('large input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
113
113
|
const inputSize = "large" /* INPUT_SIZE.Large */;
|
|
114
|
-
const el = yield fixture(html `<
|
|
114
|
+
const el = yield fixture(html `<nr-input size=${inputSize}> </nr-input>`);
|
|
115
115
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
116
116
|
expect(inputContainer).to.have.attribute('data-size', inputSize);
|
|
117
117
|
}));
|
|
118
118
|
test('medium input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
119
119
|
const inputSize = "medium" /* INPUT_SIZE.Medium */;
|
|
120
|
-
const el = yield fixture(html `<
|
|
120
|
+
const el = yield fixture(html `<nr-input size=${inputSize}> </nr-input>`);
|
|
121
121
|
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
122
122
|
expect(inputContainer).to.have.attribute('data-size', inputSize);
|
|
123
123
|
}));
|
|
124
124
|
});
|
|
125
125
|
test('input with placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
126
126
|
const placeholder = 'text of placeholder';
|
|
127
|
-
const el = yield fixture(html `<
|
|
127
|
+
const el = yield fixture(html `<nr-input placeholder=${placeholder}> </nr-input>`);
|
|
128
128
|
const input = el.shadowRoot.querySelector('input');
|
|
129
129
|
expect(input).to.have.attribute('placeholder', placeholder);
|
|
130
130
|
}));
|
|
131
131
|
test('input with label', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
132
132
|
const inputLabel = 'input label';
|
|
133
|
-
const el = yield fixture(html `<
|
|
133
|
+
const el = yield fixture(html `<nr-input> <span slot="label">${inputLabel}</span> </nr-input>`);
|
|
134
134
|
const slot = el.shadowRoot.querySelector('slot');
|
|
135
135
|
const assignedNode = slot.assignedNodes();
|
|
136
136
|
expect(assignedNode[0]).to.have.attribute('slot', 'label');
|
|
@@ -138,14 +138,14 @@ suite('HyInputElement', () => {
|
|
|
138
138
|
}));
|
|
139
139
|
test('input with helper text', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
140
140
|
const inputHelper = 'input helper';
|
|
141
|
-
const el = yield fixture(html `<
|
|
141
|
+
const el = yield fixture(html `<nr-input> <span slot="helper-text">${inputHelper}</span> </nr-input>`);
|
|
142
142
|
const slot = el.shadowRoot.querySelectorAll('slot');
|
|
143
143
|
const assignedNode = slot[1].assignedNodes();
|
|
144
144
|
expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');
|
|
145
145
|
expect(assignedNode[0].textContent).to.equal(inputHelper);
|
|
146
146
|
}));
|
|
147
147
|
test('input disabled', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
148
|
-
const el = yield fixture(html `<
|
|
148
|
+
const el = yield fixture(html `<nr-input disabled></nr-input>`);
|
|
149
149
|
const input = el.shadowRoot.querySelector('input');
|
|
150
150
|
expect(input.disabled).to.be.true;
|
|
151
151
|
let inputFocus = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-input_test.js","sourceRoot":"","sources":["../../../../src/components/input/test/hy-input_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport {HyInputElement} from '../input.component';\nimport {INPUT_STATE, INPUT_SIZE, INPUT_TYPE, EMPTY_STRING} from '../input.constant';\nimport '../input.component';\nimport {HyIconElement} from '../../icon';\nsuite('HyInputElement', () => {\n test('default properties', async () => {\n const el: HyInputElement = await fixture(html`<hy-input> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(el.disabled).to.be.false;\n expect(el.state).to.equal(INPUT_STATE.Default);\n expect(el.value).to.equal(EMPTY_STRING);\n expect(el.size).to.equal(INPUT_SIZE.Medium);\n expect(el.type).to.equal(INPUT_TYPE.TEXT);\n expect(el.placeholder).to.equal(EMPTY_STRING);\n expect(el.min).to.be.undefined;\n expect(el.max).to.be.undefined;\n expect(el.step).to.be.undefined;\n\n expect(input).to.not.have.attribute('min');\n expect(input).to.not.have.attribute('max');\n expect(input).to.not.have.attribute('step');\n expect(input.disabled).to.be.false;\n expect(input.type).to.equal(INPUT_TYPE.TEXT);\n expect(input.value).to.equal(EMPTY_STRING);\n expect(input.placeholder).to.equal(EMPTY_STRING);\n expect(inputContainer).to.have.attribute('data-size', INPUT_SIZE.Medium);\n expect(inputContainer.querySelector('#warning-icon')).to.be.null;\n expect(inputContainer.querySelector('#error-icon')).to.be.null;\n expect(inputContainer.querySelector('#password-icon')).to.be.null;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(assignedNode.length).to.equal(0);\n });\n\n test('input type password', async () => {\n const el: HyInputElement = await fixture(html`<hy-input type=\"password\"> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n let passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(passwordIcon).to.exist;\n expect(passwordIcon).to.have.attribute('name', 'eye');\n passwordIcon.click();\n await el.updateComplete;\n expect(el.inputType).to.equal('text');\n passwordIcon = inputContainer.querySelector('#password-icon')!;\n expect(passwordIcon).to.have.attribute('name', 'eye-slash');\n });\n\n suite('input type number', () => {\n test('init number input ', async () => {\n const step = 5;\n const min = 10;\n const max = 100;\n const el: HyInputElement = await fixture(\n html`<hy-input type=\"number\" step=${step} min=${min} max=${max}> </hy-input>`\n );\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n expect(passwordIcon).to.be.null;\n expect(numberIcon).to.exist;\n expect(input).to.have.attribute('min', min.toString());\n expect(input).to.have.attribute('max', max.toString());\n expect(input).to.have.attribute('step', step.toString());\n });\n test('increment number', async () => {\n const step = 5;\n const min = 10;\n const el: HyInputElement = await fixture(html`<hy-input type=\"number\" step=${step} min=${min}> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const plusButton: HyIconElement = numberIcon!.querySelector(\"[name='plus']\")!;\n plusButton.click();\n expect(input.value).to.equal((min + step).toString());\n });\n test('decrement number', async () => {\n const step = 5;\n const el: HyInputElement = await fixture(html`<hy-input type=\"number\" step=${step}> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const inputValue = input.value;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const minusButton: HyIconElement = numberIcon!.querySelector(\"[name='minus']\")!;\n minusButton.click();\n expect(input.value).to.equal((+inputValue - step).toString());\n });\n });\n\n suite('input with state', () => {\n test('warning input', async () => {\n const inputState = INPUT_STATE.Warning;\n const el: HyInputElement = await fixture(html`<hy-input state=${inputState}> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.exist;\n expect(inputContainer.querySelector('#error-icon')).to.not.exist;\n });\n test('error input', async () => {\n const inputState = INPUT_STATE.Error;\n const el: HyInputElement = await fixture(html`<hy-input state=${inputState}> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.not.exist;\n expect(inputContainer.querySelector('#error-icon')).to.exist;\n });\n });\n suite('input with size', () => {\n test('large input', async () => {\n const inputSize = INPUT_SIZE.Large;\n const el: HyInputElement = await fixture(html`<hy-input size=${inputSize}> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n test('medium input', async () => {\n const inputSize = INPUT_SIZE.Medium;\n const el: HyInputElement = await fixture(html`<hy-input size=${inputSize}> </hy-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n });\n test('input with placeholder', async () => {\n const placeholder = 'text of placeholder';\n const el: HyInputElement = await fixture(html`<hy-input placeholder=${placeholder}> </hy-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input).to.have.attribute('placeholder', placeholder);\n });\n\n test('input with label', async () => {\n const inputLabel = 'input label';\n const el: HyInputElement = await fixture(html`<hy-input> <span slot=\"label\">${inputLabel}</span> </hy-input>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'label');\n expect(assignedNode[0].textContent).to.equal(inputLabel);\n });\n\n test('input with helper text', async () => {\n const inputHelper = 'input helper';\n const el: HyInputElement = await fixture(\n html`<hy-input> <span slot=\"helper-text\">${inputHelper}</span> </hy-input>`\n );\n const slot = el.shadowRoot!.querySelectorAll('slot');\n const assignedNode = slot[1].assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');\n expect(assignedNode[0].textContent).to.equal(inputHelper);\n });\n\n test('input disabled', async () => {\n const el: HyInputElement = await fixture(html`<hy-input disabled></hy-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input.disabled).to.be.true;\n let inputFocus = false;\n input.addEventListener('focus', () => {\n inputFocus = true;\n });\n input.focus();\n\n expect(inputFocus).to.equal(false);\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"hy-input_test.js","sourceRoot":"","sources":["../../../../src/components/input/test/hy-input_test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { NrInputElement } from '../input.component';\nimport { INPUT_STATE, INPUT_SIZE, INPUT_TYPE, EMPTY_STRING } from '../input.types';\nimport '../input.component';\nimport { HyIconElement } from '../../icon';\nsuite('NrInputElement', () => {\n test('default properties', async () => {\n const el: NrInputElement = await fixture(html`<nr-input> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(el.disabled).to.be.false;\n expect(el.state).to.equal(INPUT_STATE.Default);\n expect(el.value).to.equal(EMPTY_STRING);\n expect(el.size).to.equal(INPUT_SIZE.Medium);\n expect(el.type).to.equal(INPUT_TYPE.TEXT);\n expect(el.placeholder).to.equal(EMPTY_STRING);\n expect(el.min).to.be.undefined;\n expect(el.max).to.be.undefined;\n expect(el.step).to.be.undefined;\n\n expect(input).to.not.have.attribute('min');\n expect(input).to.not.have.attribute('max');\n expect(input).to.not.have.attribute('step');\n expect(input.disabled).to.be.false;\n expect(input.type).to.equal(INPUT_TYPE.TEXT);\n expect(input.value).to.equal(EMPTY_STRING);\n expect(input.placeholder).to.equal(EMPTY_STRING);\n expect(inputContainer).to.have.attribute('data-size', INPUT_SIZE.Medium);\n expect(inputContainer.querySelector('#warning-icon')).to.be.null;\n expect(inputContainer.querySelector('#error-icon')).to.be.null;\n expect(inputContainer.querySelector('#password-icon')).to.be.null;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(assignedNode.length).to.equal(0);\n });\n\n test('input type password', async () => {\n const el: NrInputElement = await fixture(html`<nr-input type=\"password\"> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n let passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(passwordIcon).to.exist;\n expect(passwordIcon).to.have.attribute('name', 'eye');\n passwordIcon.click();\n await el.updateComplete;\n expect(el.inputType).to.equal('text');\n passwordIcon = inputContainer.querySelector('#password-icon')!;\n expect(passwordIcon).to.have.attribute('name', 'eye-slash');\n });\n\n suite('input type number', () => {\n test('init number input ', async () => {\n const step = 5;\n const min = 10;\n const max = 100;\n const el: NrInputElement = await fixture(\n html`<nr-input type=\"number\" step=${step} min=${min} max=${max}> </nr-input>`\n );\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n expect(passwordIcon).to.be.null;\n expect(numberIcon).to.exist;\n expect(input).to.have.attribute('min', min.toString());\n expect(input).to.have.attribute('max', max.toString());\n expect(input).to.have.attribute('step', step.toString());\n });\n test('increment number', async () => {\n const step = 5;\n const min = 10;\n const el: NrInputElement = await fixture(html`<nr-input type=\"number\" step=${step} min=${min}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const plusButton: HyIconElement = numberIcon!.querySelector(\"[name='plus']\")!;\n plusButton.click();\n expect(input.value).to.equal((min + step).toString());\n });\n test('decrement number', async () => {\n const step = 5;\n const el: NrInputElement = await fixture(html`<nr-input type=\"number\" step=${step}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const inputValue = input.value;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const minusButton: HyIconElement = numberIcon!.querySelector(\"[name='minus']\")!;\n minusButton.click();\n expect(input.value).to.equal((+inputValue - step).toString());\n });\n });\n\n suite('input with state', () => {\n test('warning input', async () => {\n const inputState = INPUT_STATE.Warning;\n const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.exist;\n expect(inputContainer.querySelector('#error-icon')).to.not.exist;\n });\n test('error input', async () => {\n const inputState = INPUT_STATE.Error;\n const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.not.exist;\n expect(inputContainer.querySelector('#error-icon')).to.exist;\n });\n });\n suite('input with size', () => {\n test('large input', async () => {\n const inputSize = INPUT_SIZE.Large;\n const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n test('medium input', async () => {\n const inputSize = INPUT_SIZE.Medium;\n const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n });\n test('input with placeholder', async () => {\n const placeholder = 'text of placeholder';\n const el: NrInputElement = await fixture(html`<nr-input placeholder=${placeholder}> </nr-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input).to.have.attribute('placeholder', placeholder);\n });\n\n test('input with label', async () => {\n const inputLabel = 'input label';\n const el: NrInputElement = await fixture(html`<nr-input> <span slot=\"label\">${inputLabel}</span> </nr-input>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'label');\n expect(assignedNode[0].textContent).to.equal(inputLabel);\n });\n\n test('input with helper text', async () => {\n const inputHelper = 'input helper';\n const el: NrInputElement = await fixture(\n html`<nr-input> <span slot=\"helper-text\">${inputHelper}</span> </nr-input>`\n );\n const slot = el.shadowRoot!.querySelectorAll('slot');\n const assignedNode = slot[1].assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');\n expect(assignedNode[0].textContent).to.equal(inputHelper);\n });\n\n test('input disabled', async () => {\n const el: NrInputElement = await fixture(html`<nr-input disabled></nr-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input.disabled).to.be.true;\n let inputFocus = false;\n input.addEventListener('focus', () => {\n inputFocus = true;\n });\n input.focus();\n\n expect(inputFocus).to.equal(false);\n });\n});\n"]}
|
package/utils/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}
|
package/utils/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/utils/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport { InputValidationUtils } from './input-validation.utils.js';\nexport { InputRenderUtils } from './input-renderers.js';\n"]}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { TemplateResult, nothing } from 'lit';
|
|
7
|
+
/**
|
|
8
|
+
* Rendering utilities for input component icons and elements
|
|
9
|
+
*/
|
|
10
|
+
export declare class InputRenderUtils {
|
|
11
|
+
/**
|
|
12
|
+
* Renders prefix slot content
|
|
13
|
+
*/
|
|
14
|
+
static renderPrefix(): TemplateResult;
|
|
15
|
+
/**
|
|
16
|
+
* Renders suffix slot content
|
|
17
|
+
*/
|
|
18
|
+
static renderSuffix(): TemplateResult;
|
|
19
|
+
/**
|
|
20
|
+
* Renders addon before slot content (outside input borders)
|
|
21
|
+
* Only renders if hasAddonBefore is true
|
|
22
|
+
*/
|
|
23
|
+
static renderAddonBefore(hasAddonBefore: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing;
|
|
24
|
+
/**
|
|
25
|
+
* Renders addon after slot content (outside input borders)
|
|
26
|
+
* Only renders if hasAddonAfter is true
|
|
27
|
+
*/
|
|
28
|
+
static renderAddonAfter(hasAddonAfter: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing;
|
|
29
|
+
/**
|
|
30
|
+
* Renders the copy icon when withCopy is enabled
|
|
31
|
+
*/
|
|
32
|
+
static renderCopyIcon(withCopy: boolean, disabled: boolean, readonly: boolean, onCopy: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
33
|
+
/**
|
|
34
|
+
* Renders state-based icons (warning, error)
|
|
35
|
+
*/
|
|
36
|
+
static renderStateIcon(state: string): TemplateResult | typeof nothing;
|
|
37
|
+
/**
|
|
38
|
+
* Renders the calendar icon for calendar input type
|
|
39
|
+
*/
|
|
40
|
+
static renderCalendarIcon(state: string, type: string): TemplateResult | typeof nothing;
|
|
41
|
+
/**
|
|
42
|
+
* Renders password toggle icon
|
|
43
|
+
*/
|
|
44
|
+
static renderPasswordIcon(type: string, inputType: string, disabled: boolean, readonly: boolean, onToggle: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
45
|
+
/**
|
|
46
|
+
* Renders number input increment/decrement icons
|
|
47
|
+
*/
|
|
48
|
+
static renderNumberIcons(type: string, state: string, disabled: boolean, readonly: boolean, onIncrement: () => void, onDecrement: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=input-renderers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-renderers.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpD;;GAEG;AACH,qBAAa,gBAAgB;IAE3B;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;;OAGG;IACH,MAAM,CAAC,iBAAiB,CAAC,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUpH;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUlH;;OAEG;IACH,MAAM,CAAC,cAAc,CACnB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,MAAM,IAAI,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IAelC;;OAEG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,OAAO,OAAO;IAWtE;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,cAAc,GAAG,OAAO,OAAO;IAQlC;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IA4BlC;;OAEG;IACH,MAAM,CAAC,iBAAiB,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,MAAM,IAAI,EACvB,WAAW,EAAE,MAAM,IAAI,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;CA0BnC"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { html, nothing } from 'lit';
|
|
7
|
+
/**
|
|
8
|
+
* Rendering utilities for input component icons and elements
|
|
9
|
+
*/
|
|
10
|
+
export class InputRenderUtils {
|
|
11
|
+
/**
|
|
12
|
+
* Renders prefix slot content
|
|
13
|
+
*/
|
|
14
|
+
static renderPrefix() {
|
|
15
|
+
return html `
|
|
16
|
+
<div class="input-prefix">
|
|
17
|
+
<slot name="prefix"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Renders suffix slot content
|
|
23
|
+
*/
|
|
24
|
+
static renderSuffix() {
|
|
25
|
+
return html `
|
|
26
|
+
<div class="input-suffix">
|
|
27
|
+
<slot name="suffix"></slot>
|
|
28
|
+
</div>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Renders addon before slot content (outside input borders)
|
|
33
|
+
* Only renders if hasAddonBefore is true
|
|
34
|
+
*/
|
|
35
|
+
static renderAddonBefore(hasAddonBefore, onSlotChange) {
|
|
36
|
+
if (!hasAddonBefore)
|
|
37
|
+
return nothing;
|
|
38
|
+
return html `
|
|
39
|
+
<div class="input-addon-before">
|
|
40
|
+
<slot name="addon-before" @slotchange=${onSlotChange}></slot>
|
|
41
|
+
</div>
|
|
42
|
+
`;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Renders addon after slot content (outside input borders)
|
|
46
|
+
* Only renders if hasAddonAfter is true
|
|
47
|
+
*/
|
|
48
|
+
static renderAddonAfter(hasAddonAfter, onSlotChange) {
|
|
49
|
+
if (!hasAddonAfter)
|
|
50
|
+
return nothing;
|
|
51
|
+
return html `
|
|
52
|
+
<div class="input-addon-after">
|
|
53
|
+
<slot name="addon-after" @slotchange=${onSlotChange}></slot>
|
|
54
|
+
</div>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Renders the copy icon when withCopy is enabled
|
|
59
|
+
*/
|
|
60
|
+
static renderCopyIcon(withCopy, disabled, readonly, onCopy, onKeydown) {
|
|
61
|
+
if (!withCopy)
|
|
62
|
+
return nothing;
|
|
63
|
+
return html `<hy-icon
|
|
64
|
+
name="copy"
|
|
65
|
+
type="regular"
|
|
66
|
+
id="copy-icon"
|
|
67
|
+
role="button"
|
|
68
|
+
aria-label="Copy input value"
|
|
69
|
+
tabindex="0"
|
|
70
|
+
@click=${!disabled && !readonly ? onCopy : nothing}
|
|
71
|
+
@keydown=${onKeydown}
|
|
72
|
+
></hy-icon>`;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Renders state-based icons (warning, error)
|
|
76
|
+
*/
|
|
77
|
+
static renderStateIcon(state) {
|
|
78
|
+
switch (state) {
|
|
79
|
+
case "warning" /* INPUT_STATE.Warning */:
|
|
80
|
+
return html `<hy-icon name="warning" id="warning-icon"></hy-icon>`;
|
|
81
|
+
case "error" /* INPUT_STATE.Error */:
|
|
82
|
+
return html `<hy-icon name="exclamation-circle" id="error-icon"></hy-icon>`;
|
|
83
|
+
default:
|
|
84
|
+
return nothing;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Renders the calendar icon for calendar input type
|
|
89
|
+
*/
|
|
90
|
+
static renderCalendarIcon(state, type) {
|
|
91
|
+
if (state !== "default" /* INPUT_STATE.Default */ || type !== "calendar" /* INPUT_TYPE.CALENDAR */) {
|
|
92
|
+
return nothing;
|
|
93
|
+
}
|
|
94
|
+
return html `<hy-icon name="calendar" type="regular" id="calendar-icon"></hy-icon>`;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Renders password toggle icon
|
|
98
|
+
*/
|
|
99
|
+
static renderPasswordIcon(type, inputType, disabled, readonly, onToggle, onKeydown) {
|
|
100
|
+
if (type !== "password" /* INPUT_TYPE.PASSWORD */)
|
|
101
|
+
return nothing;
|
|
102
|
+
if (inputType === "text" /* INPUT_TYPE.TEXT */) {
|
|
103
|
+
return html `<hy-icon
|
|
104
|
+
name="eye-slash"
|
|
105
|
+
type="regular"
|
|
106
|
+
id="password-icon"
|
|
107
|
+
role="button"
|
|
108
|
+
aria-label="Hide password"
|
|
109
|
+
tabindex="0"
|
|
110
|
+
@click=${!disabled && !readonly ? onToggle : nothing}
|
|
111
|
+
@keydown=${onKeydown}
|
|
112
|
+
></hy-icon>`;
|
|
113
|
+
}
|
|
114
|
+
else {
|
|
115
|
+
return html `<hy-icon
|
|
116
|
+
name="eye"
|
|
117
|
+
type="regular"
|
|
118
|
+
id="password-icon"
|
|
119
|
+
role="button"
|
|
120
|
+
aria-label="Show password"
|
|
121
|
+
tabindex="0"
|
|
122
|
+
@click=${!disabled && !readonly ? onToggle : nothing}
|
|
123
|
+
@keydown=${onKeydown}
|
|
124
|
+
></hy-icon>`;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Renders number input increment/decrement icons
|
|
129
|
+
*/
|
|
130
|
+
static renderNumberIcons(type, state, disabled, readonly, onIncrement, onDecrement, onKeydown) {
|
|
131
|
+
if (type !== "number" /* INPUT_TYPE.NUMBER */)
|
|
132
|
+
return nothing;
|
|
133
|
+
return html `
|
|
134
|
+
<div id="number-icons">
|
|
135
|
+
${state !== "default" /* INPUT_STATE.Default */ ? html `<span id="icons-separator">|</span>` : nothing}
|
|
136
|
+
<hy-icon
|
|
137
|
+
name="minus"
|
|
138
|
+
aria-label="Decrease value"
|
|
139
|
+
role="button"
|
|
140
|
+
tabindex="0"
|
|
141
|
+
@click=${!disabled && !readonly ? onDecrement : nothing}
|
|
142
|
+
@keydown=${onKeydown}
|
|
143
|
+
></hy-icon>
|
|
144
|
+
<span id="icons-separator">|</span>
|
|
145
|
+
<hy-icon
|
|
146
|
+
name="plus"
|
|
147
|
+
aria-label="Increase value"
|
|
148
|
+
role="button"
|
|
149
|
+
tabindex="0"
|
|
150
|
+
@click=${!disabled && !readonly ? onIncrement : nothing}
|
|
151
|
+
@keydown=${onKeydown}
|
|
152
|
+
></hy-icon>
|
|
153
|
+
</div>
|
|
154
|
+
`;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
//# sourceMappingURL=input-renderers.js.map
|