@nuralyui/input 0.0.1
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 +19 -0
- package/demo/input-demo.d.ts.map +1 -0
- package/demo/input-demo.js +339 -0
- package/demo/input-demo.js.map +1 -0
- package/index.d.ts +3 -0
- package/index.d.ts.map +1 -0
- package/index.js +3 -0
- package/index.js.map +1 -0
- package/input.component.d.ts +43 -0
- package/input.component.d.ts.map +1 -0
- package/input.component.js +189 -0
- package/input.component.js.map +1 -0
- package/input.constant.d.ts +18 -0
- package/input.constant.d.ts.map +1 -0
- package/input.constant.js +2 -0
- package/input.constant.js.map +1 -0
- package/input.style.d.ts +2 -0
- package/input.style.d.ts.map +1 -0
- package/input.style.js +199 -0
- package/input.style.js.map +1 -0
- package/package.json +12 -0
- package/react.d.ts +6 -0
- package/react.d.ts.map +1 -0
- package/react.js +13 -0
- package/react.js.map +1 -0
- package/test/hy-input_test.d.ts +2 -0
- package/test/hy-input_test.d.ts.map +1 -0
- package/test/hy-input_test.js +159 -0
- package/test/hy-input_test.js.map +1 -0
- package/validation.d.ts +3 -0
- package/validation.d.ts.map +1 -0
- package/validation.js +3 -0
- package/validation.js.map +1 -0
- package/variables.style.d.ts +2 -0
- package/variables.style.d.ts.map +1 -0
- package/variables.style.js +96 -0
- package/variables.style.js.map +1 -0
|
@@ -0,0 +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, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './input.style.js';\nimport {INPUT_TYPE, INPUT_STATE, INPUT_SIZE, EMPTY_STRING} from './input.constant.js';\nimport {choose} from 'lit/directives/choose.js';\n\n@customElement('hy-input')\nexport class HyInputElement extends LitElement {\n // W3C standards\n\n @property({type: Boolean, reflect: true})\n disabled = 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({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()\n withCopy = false;\n\n @state()\n inputType = EMPTY_STRING;\n\n @query('#input')\n input!: HTMLInputElement;\n \n override willUpdate(_changedProperties: PropertyValues): void {\n if(_changedProperties.has('type')){\n this.inputType = this.type;\n if (this.inputType == INPUT_TYPE.NUMBER) if (this.min && !this.value) this.value = this.min;\n }\n }\n\n private _increment() {\n this.input.stepUp();\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: this.input,\n })\n );\n }\n private _decrement() {\n this.input.stepDown();\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: this.input,\n })\n );\n\n }\n\n private _valueChange(e: Event) {\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n detail: e.target,\n })\n );\n }\n private handleKeyDown(keyDownEvent:KeyboardEvent){\n if(keyDownEvent.key ==='Enter'){\n this.dispatchEvent(\n new CustomEvent('enter-pressed', {\n detail: keyDownEvent.target,\n })\n );\n }\n }\n private onCopy() {\n const input = this.shadowRoot!.getElementById('input')! as HTMLInputElement;\n input.select();\n navigator.clipboard.writeText(input.value);\n }\n\n private _focusEvent(e: Event) {\n this.dispatchEvent(\n new CustomEvent('focused', {\n detail: e.target,\n })\n );\n }\n\n _togglePasswordIcon() {\n if (this.inputType == INPUT_TYPE.PASSWORD) this.inputType = INPUT_TYPE.TEXT;\n else if (this.inputType == INPUT_TYPE.TEXT) this.inputType = INPUT_TYPE.PASSWORD;\n }\n\n override render() {\n return html`\n <slot name=\"label\"></slot>\n <div data-size=${this.size} id=\"input-container\">\n <input\n id=\"input\"\n .disabled=${this.disabled}\n .value=${this.value}\n .placeholder=${this.placeholder}\n .step=${this.step ? this.step : nothing}\n .min=${this.min ? this.min : nothing}\n .max=${this.max ? this.max : nothing}\n .type=\"${this.inputType}\"\n @input=${this._valueChange}\n @focus=${this._focusEvent}\n @keydown=${this.handleKeyDown}\n />\n ${this.withCopy\n ? html`<hy-icon\n name=\"copy\"\n type=\"regular\"\n id=\"copy-icon\"\n @click=${!this.disabled ? this.onCopy : nothing}\n ></hy-icon>`\n : nothing}\n ${choose(this.state, [\n [INPUT_STATE.Default, () => undefined],\n [INPUT_STATE.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n [INPUT_STATE.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n ])}\n ${this.state == INPUT_STATE.Default && this.type == INPUT_TYPE.CALENDAR\n ? html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`\n : nothing}\n ${this.type == INPUT_TYPE.PASSWORD\n ? choose(this.inputType, [\n [\n INPUT_TYPE.TEXT,\n () =>\n html`<hy-icon\n name=\"eye-slash\"\n type=\"regular\"\n id=\"password-icon\"\n @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n ></hy-icon>`,\n ],\n [\n INPUT_TYPE.PASSWORD,\n () =>\n html`<hy-icon\n name=\"eye\"\n type=\"regular\"\n id=\"password-icon\"\n @click=${!this.disabled ? this._togglePasswordIcon : nothing}\n ></hy-icon>`,\n ],\n ])\n : this.type == INPUT_TYPE.NUMBER\n ? html`\n <div id=\"number-icons\">\n ${this.state != INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n <hy-icon name=\"minus\" @click=${!this.disabled ? this._decrement : nothing}></hy-icon>\n <span id=\"icons-separator\">|</span>\n <hy-icon name=\"plus\" @click=${!this.disabled ? this._increment : nothing}></hy-icon>\n </div>\n `\n : nothing}\n </div>\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n static override styles = styles;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-input': HyInputElement;\n }\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'hy-input':\n | React.DetailedHTMLProps<React.HTMLAttributes<HyInputElement>, HyInputElement>\n | Partial<HyInputElement>;\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const enum INPUT_STATE {
|
|
2
|
+
Default = "default",
|
|
3
|
+
Error = "error",
|
|
4
|
+
Warning = "warning"
|
|
5
|
+
}
|
|
6
|
+
export declare const enum INPUT_SIZE {
|
|
7
|
+
Large = "large",
|
|
8
|
+
Medium = "medium",
|
|
9
|
+
Small = "small"
|
|
10
|
+
}
|
|
11
|
+
export declare const enum INPUT_TYPE {
|
|
12
|
+
PASSWORD = "password",
|
|
13
|
+
TEXT = "text",
|
|
14
|
+
NUMBER = "number",
|
|
15
|
+
CALENDAR = "calendar"
|
|
16
|
+
}
|
|
17
|
+
export declare const EMPTY_STRING = "";
|
|
18
|
+
//# sourceMappingURL=input.constant.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.constant.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.constant.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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.constant.js","sourceRoot":"","sources":["../../../src/components/input/input.constant.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/input.style.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAuMA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
|
package/input.style.js
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import { styleVariables } from './variables.style.js';
|
|
3
|
+
const inputStyle = css `
|
|
4
|
+
:host {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:host > #input-container,
|
|
11
|
+
#input-container > input {
|
|
12
|
+
background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:host([disabled]) > #input-container,
|
|
16
|
+
:host([disabled]) > #input-container > input {
|
|
17
|
+
background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));
|
|
18
|
+
cursor: not-allowed;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
hy-icon {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
::placeholder {
|
|
27
|
+
color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));
|
|
28
|
+
font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));
|
|
29
|
+
font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));
|
|
30
|
+
}
|
|
31
|
+
#warning-icon {
|
|
32
|
+
--hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));
|
|
33
|
+
}
|
|
34
|
+
#error-icon {
|
|
35
|
+
--hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));
|
|
36
|
+
}
|
|
37
|
+
#calendar-icon {
|
|
38
|
+
--hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));
|
|
39
|
+
}
|
|
40
|
+
#password-icon {
|
|
41
|
+
padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));
|
|
42
|
+
padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
--hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));
|
|
45
|
+
}
|
|
46
|
+
#copy-icon {
|
|
47
|
+
padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));
|
|
48
|
+
--hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
}
|
|
51
|
+
#number-icons {
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: space-between;
|
|
54
|
+
align-items: center;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
position: absolute;
|
|
57
|
+
right: 0;
|
|
58
|
+
top: 0;
|
|
59
|
+
height: 100%;
|
|
60
|
+
width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));
|
|
61
|
+
padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));
|
|
62
|
+
}
|
|
63
|
+
#number-icons hy-icon {
|
|
64
|
+
--hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));
|
|
65
|
+
padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));
|
|
66
|
+
padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));
|
|
67
|
+
width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));
|
|
68
|
+
height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([disabled]) #password-icon,
|
|
72
|
+
:host([disabled]) #error-icon,
|
|
73
|
+
:host([disabled]) #warning-icon,
|
|
74
|
+
:host([disabled]) #number-icons,
|
|
75
|
+
:host([disabled]) #calendar-icon,
|
|
76
|
+
:host([disabled]) #copy-icon {
|
|
77
|
+
opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:host(:not([disabled])[state='error']) > #input-container {
|
|
81
|
+
border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host([state='error']) input[type='number'] ~ #number-icons,
|
|
85
|
+
:host([state='warning']) input[type='number'] ~ #number-icons {
|
|
86
|
+
position: static;
|
|
87
|
+
padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:host([state='error']) ::slotted([slot='helper-text']) {
|
|
91
|
+
color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
:host([state='warning']) ::slotted([slot='helper-text']) {
|
|
95
|
+
color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
:host(:not([state='error'])) > #input-container:focus-within {
|
|
99
|
+
border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:host([disabled]) #password-icon,
|
|
103
|
+
:host([disabled]) #number-icons,
|
|
104
|
+
:host([disabled]) #copy-icon {
|
|
105
|
+
cursor: not-allowed;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([disabled]) ::placeholder {
|
|
109
|
+
color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Chrome, Safari, Edge, Opera */
|
|
113
|
+
input::-webkit-outer-spin-button,
|
|
114
|
+
input::-webkit-inner-spin-button {
|
|
115
|
+
-webkit-appearance: none;
|
|
116
|
+
}
|
|
117
|
+
/* Firefox */
|
|
118
|
+
input[type='number'] {
|
|
119
|
+
-moz-appearance: textfield;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
#icons-separator {
|
|
123
|
+
color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));
|
|
124
|
+
padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));
|
|
125
|
+
padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));
|
|
126
|
+
padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
#input-container {
|
|
130
|
+
border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));
|
|
131
|
+
border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));
|
|
132
|
+
border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));
|
|
133
|
+
border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));
|
|
134
|
+
border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius));
|
|
135
|
+
display: flex;
|
|
136
|
+
position: relative;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
:host([disabled]) #input-container {
|
|
140
|
+
border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));
|
|
141
|
+
border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));
|
|
142
|
+
border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));
|
|
143
|
+
border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));
|
|
144
|
+
opacity:0.6;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
input {
|
|
148
|
+
width: 100%;
|
|
149
|
+
border: none;
|
|
150
|
+
outline: none;
|
|
151
|
+
color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));
|
|
152
|
+
font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));
|
|
153
|
+
font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
::slotted([slot='label']) {
|
|
157
|
+
color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));
|
|
158
|
+
font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));
|
|
159
|
+
padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
::slotted([slot='helper-text']) {
|
|
163
|
+
color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));
|
|
164
|
+
font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));
|
|
165
|
+
padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
:host([disabled]) ::slotted([slot='helper-text']) {
|
|
169
|
+
color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host([disabled]) ::slotted([slot='label']) {
|
|
173
|
+
color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));
|
|
174
|
+
}
|
|
175
|
+
`;
|
|
176
|
+
const sizeInputStyle = css `
|
|
177
|
+
div[data-size='large'] {
|
|
178
|
+
padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));
|
|
179
|
+
padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));
|
|
180
|
+
padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));
|
|
181
|
+
padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
div[data-size='medium'] {
|
|
185
|
+
padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));
|
|
186
|
+
padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));
|
|
187
|
+
padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));
|
|
188
|
+
padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
div[data-size='small'] {
|
|
192
|
+
padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));
|
|
193
|
+
padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));
|
|
194
|
+
padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));
|
|
195
|
+
padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));
|
|
196
|
+
}
|
|
197
|
+
`;
|
|
198
|
+
export const styles = [inputStyle, sizeInputStyle, styleVariables];
|
|
199
|
+
//# sourceMappingURL=input.style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AAEpD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KrB,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './variables.style.js';\n\nconst inputStyle = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));\n }\n\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n ::placeholder {\n color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));\n }\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));\n }\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));\n padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));\n }\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));\n }\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));\n }\n\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));\n }\n\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n #icons-separator {\n color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));\n padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));\n padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));\n }\n\n #input-container {\n border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));\n border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius)); \n display: flex;\n position: relative;\n }\n\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));\n border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));\n border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));\n opacity:0.6;\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));\n }\n\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\nconst sizeInputStyle = css`\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));\n }\n\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));\n }\n\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));\n padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));\n }\n`;\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
|
package/package.json
ADDED
package/react.d.ts
ADDED
package/react.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,eAAO,MAAM,OAAO;;;EAQlB,CAAC"}
|
package/react.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createComponent } from '@lit-labs/react';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { HyInputElement } from './input.component.js';
|
|
4
|
+
export const HyInput = createComponent({
|
|
5
|
+
tagName: 'hy-input',
|
|
6
|
+
elementClass: HyInputElement,
|
|
7
|
+
react: React,
|
|
8
|
+
events: {
|
|
9
|
+
valueChange: 'valueChange',
|
|
10
|
+
focused: 'focused'
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=react.js.map
|
package/react.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,aAAa;QAC1B,OAAO,EAAC,SAAS;KAClB;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyInputElement} from './input.component.js';\nexport const HyInput = createComponent({\n tagName: 'hy-input',\n elementClass: HyInputElement,\n react: React,\n events: {\n valueChange: 'valueChange',\n focused:'focused'\n },\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hy-input_test.d.ts","sourceRoot":"","sources":["../../../../src/components/input/test/hy-input_test.ts"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
+
import { EMPTY_STRING } from '../input.constant';
|
|
12
|
+
import '../input.component';
|
|
13
|
+
suite('HyInputElement', () => {
|
|
14
|
+
test('default properties', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
15
|
+
const el = yield fixture(html `<hy-input> </hy-input>`);
|
|
16
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
17
|
+
const input = el.shadowRoot.querySelector('input');
|
|
18
|
+
const slot = el.shadowRoot.querySelector('slot');
|
|
19
|
+
const assignedNode = slot.assignedNodes();
|
|
20
|
+
expect(el.disabled).to.be.false;
|
|
21
|
+
expect(el.state).to.equal("default" /* INPUT_STATE.Default */);
|
|
22
|
+
expect(el.value).to.equal(EMPTY_STRING);
|
|
23
|
+
expect(el.size).to.equal("medium" /* INPUT_SIZE.Medium */);
|
|
24
|
+
expect(el.type).to.equal("text" /* INPUT_TYPE.TEXT */);
|
|
25
|
+
expect(el.placeholder).to.equal(EMPTY_STRING);
|
|
26
|
+
expect(el.min).to.be.undefined;
|
|
27
|
+
expect(el.max).to.be.undefined;
|
|
28
|
+
expect(el.step).to.be.undefined;
|
|
29
|
+
expect(input).to.not.have.attribute('min');
|
|
30
|
+
expect(input).to.not.have.attribute('max');
|
|
31
|
+
expect(input).to.not.have.attribute('step');
|
|
32
|
+
expect(input.disabled).to.be.false;
|
|
33
|
+
expect(input.type).to.equal("text" /* INPUT_TYPE.TEXT */);
|
|
34
|
+
expect(input.value).to.equal(EMPTY_STRING);
|
|
35
|
+
expect(input.placeholder).to.equal(EMPTY_STRING);
|
|
36
|
+
expect(inputContainer).to.have.attribute('data-size', "medium" /* INPUT_SIZE.Medium */);
|
|
37
|
+
expect(inputContainer.querySelector('#warning-icon')).to.be.null;
|
|
38
|
+
expect(inputContainer.querySelector('#error-icon')).to.be.null;
|
|
39
|
+
expect(inputContainer.querySelector('#password-icon')).to.be.null;
|
|
40
|
+
expect(inputContainer.querySelector('#number-icons')).to.be.null;
|
|
41
|
+
expect(assignedNode.length).to.equal(0);
|
|
42
|
+
}));
|
|
43
|
+
test('input type password', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
44
|
+
const el = yield fixture(html `<hy-input type="password"> </hy-input>`);
|
|
45
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
46
|
+
let passwordIcon = inputContainer.querySelector('#password-icon');
|
|
47
|
+
expect(inputContainer.querySelector('#number-icons')).to.be.null;
|
|
48
|
+
expect(passwordIcon).to.exist;
|
|
49
|
+
expect(passwordIcon).to.have.attribute('name', 'eye');
|
|
50
|
+
passwordIcon.click();
|
|
51
|
+
yield el.updateComplete;
|
|
52
|
+
expect(el.inputType).to.equal('text');
|
|
53
|
+
passwordIcon = inputContainer.querySelector('#password-icon');
|
|
54
|
+
expect(passwordIcon).to.have.attribute('name', 'eye-slash');
|
|
55
|
+
}));
|
|
56
|
+
suite('input type number', () => {
|
|
57
|
+
test('init number input ', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
58
|
+
const step = 5;
|
|
59
|
+
const min = 10;
|
|
60
|
+
const max = 100;
|
|
61
|
+
const el = yield fixture(html `<hy-input type="number" step=${step} min=${min} max=${max}> </hy-input>`);
|
|
62
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
63
|
+
const input = el.shadowRoot.querySelector('input');
|
|
64
|
+
const passwordIcon = inputContainer.querySelector('#password-icon');
|
|
65
|
+
const numberIcon = inputContainer.querySelector('#number-icons');
|
|
66
|
+
expect(passwordIcon).to.be.null;
|
|
67
|
+
expect(numberIcon).to.exist;
|
|
68
|
+
expect(input).to.have.attribute('min', min.toString());
|
|
69
|
+
expect(input).to.have.attribute('max', max.toString());
|
|
70
|
+
expect(input).to.have.attribute('step', step.toString());
|
|
71
|
+
}));
|
|
72
|
+
test('increment number', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
73
|
+
const step = 5;
|
|
74
|
+
const min = 10;
|
|
75
|
+
const el = yield fixture(html `<hy-input type="number" step=${step} min=${min}> </hy-input>`);
|
|
76
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
77
|
+
const input = el.shadowRoot.querySelector('input');
|
|
78
|
+
const numberIcon = inputContainer.querySelector('#number-icons');
|
|
79
|
+
const plusButton = numberIcon.querySelector("[name='plus']");
|
|
80
|
+
plusButton.click();
|
|
81
|
+
expect(input.value).to.equal((min + step).toString());
|
|
82
|
+
}));
|
|
83
|
+
test('decrement number', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
84
|
+
const step = 5;
|
|
85
|
+
const el = yield fixture(html `<hy-input type="number" step=${step}> </hy-input>`);
|
|
86
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
87
|
+
const input = el.shadowRoot.querySelector('input');
|
|
88
|
+
const inputValue = input.value;
|
|
89
|
+
const numberIcon = inputContainer.querySelector('#number-icons');
|
|
90
|
+
const minusButton = numberIcon.querySelector("[name='minus']");
|
|
91
|
+
minusButton.click();
|
|
92
|
+
expect(input.value).to.equal((+inputValue - step).toString());
|
|
93
|
+
}));
|
|
94
|
+
});
|
|
95
|
+
suite('input with state', () => {
|
|
96
|
+
test('warning input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
97
|
+
const inputState = "warning" /* INPUT_STATE.Warning */;
|
|
98
|
+
const el = yield fixture(html `<hy-input state=${inputState}> </hy-input>`);
|
|
99
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
100
|
+
expect(inputContainer.querySelector('#warning-icon')).to.exist;
|
|
101
|
+
expect(inputContainer.querySelector('#error-icon')).to.not.exist;
|
|
102
|
+
}));
|
|
103
|
+
test('error input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
104
|
+
const inputState = "error" /* INPUT_STATE.Error */;
|
|
105
|
+
const el = yield fixture(html `<hy-input state=${inputState}> </hy-input>`);
|
|
106
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
107
|
+
expect(inputContainer.querySelector('#warning-icon')).to.not.exist;
|
|
108
|
+
expect(inputContainer.querySelector('#error-icon')).to.exist;
|
|
109
|
+
}));
|
|
110
|
+
});
|
|
111
|
+
suite('input with size', () => {
|
|
112
|
+
test('large input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
113
|
+
const inputSize = "large" /* INPUT_SIZE.Large */;
|
|
114
|
+
const el = yield fixture(html `<hy-input size=${inputSize}> </hy-input>`);
|
|
115
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
116
|
+
expect(inputContainer).to.have.attribute('data-size', inputSize);
|
|
117
|
+
}));
|
|
118
|
+
test('medium input', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
119
|
+
const inputSize = "medium" /* INPUT_SIZE.Medium */;
|
|
120
|
+
const el = yield fixture(html `<hy-input size=${inputSize}> </hy-input>`);
|
|
121
|
+
const inputContainer = el.shadowRoot.querySelector('#input-container');
|
|
122
|
+
expect(inputContainer).to.have.attribute('data-size', inputSize);
|
|
123
|
+
}));
|
|
124
|
+
});
|
|
125
|
+
test('input with placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
126
|
+
const placeholder = 'text of placeholder';
|
|
127
|
+
const el = yield fixture(html `<hy-input placeholder=${placeholder}> </hy-input>`);
|
|
128
|
+
const input = el.shadowRoot.querySelector('input');
|
|
129
|
+
expect(input).to.have.attribute('placeholder', placeholder);
|
|
130
|
+
}));
|
|
131
|
+
test('input with label', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
132
|
+
const inputLabel = 'input label';
|
|
133
|
+
const el = yield fixture(html `<hy-input> <span slot="label">${inputLabel}</span> </hy-input>`);
|
|
134
|
+
const slot = el.shadowRoot.querySelector('slot');
|
|
135
|
+
const assignedNode = slot.assignedNodes();
|
|
136
|
+
expect(assignedNode[0]).to.have.attribute('slot', 'label');
|
|
137
|
+
expect(assignedNode[0].textContent).to.equal(inputLabel);
|
|
138
|
+
}));
|
|
139
|
+
test('input with helper text', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
140
|
+
const inputHelper = 'input helper';
|
|
141
|
+
const el = yield fixture(html `<hy-input> <span slot="helper-text">${inputHelper}</span> </hy-input>`);
|
|
142
|
+
const slot = el.shadowRoot.querySelectorAll('slot');
|
|
143
|
+
const assignedNode = slot[1].assignedNodes();
|
|
144
|
+
expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');
|
|
145
|
+
expect(assignedNode[0].textContent).to.equal(inputHelper);
|
|
146
|
+
}));
|
|
147
|
+
test('input disabled', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
148
|
+
const el = yield fixture(html `<hy-input disabled></hy-input>`);
|
|
149
|
+
const input = el.shadowRoot.querySelector('input');
|
|
150
|
+
expect(input.disabled).to.be.true;
|
|
151
|
+
let inputFocus = false;
|
|
152
|
+
input.addEventListener('focus', () => {
|
|
153
|
+
inputFocus = true;
|
|
154
|
+
});
|
|
155
|
+
input.focus();
|
|
156
|
+
expect(inputFocus).to.equal(false);
|
|
157
|
+
}));
|
|
158
|
+
});
|
|
159
|
+
//# sourceMappingURL=hy-input_test.js.map
|
|
@@ -0,0 +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"]}
|
package/validation.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/components/input/validation.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,QAAmF,CAAA;AAEpG,eAAO,MAAM,SAAS,QAAS,CAAC"}
|
package/validation.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../../src/components/input/validation.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG,gFAAgF,CAAA;AAEpG,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC","sourcesContent":["export const PORT = /^(?:[1-9]\\d{0,4}|[1-5]\\d{5}|6[0-4]\\d{4}|65[0-4]\\d{3}|655[0-2]\\d{2}|6553[0-5])$/\n\nexport const NOT_EMPTY = /^.+$/;"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variables.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/variables.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA6F1B,CAAC"}
|