@jack-henry/jh-elements 2.0.0-beta.8 → 2.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/components/input-password/input-password.js +12 -12
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -9,5 +9,5 @@ SPDX-License-Identifier: Apache-2.0
|
|
|
9
9
|
Contains Jack Henry's web component library. To get started, visit our documentation sites.
|
|
10
10
|
|
|
11
11
|
* [Jackhenry.design](https://jackhenry.design) focuses on introducing the underlying concepts of the Design System, usage guidelines, and a style guide.
|
|
12
|
-
* [Storybook](https://
|
|
12
|
+
* [Storybook](https://main--68f8e6a25b256d0ef89b13e6.chromatic.com/?path=/docs/welcome-about-jh--docs) focuses on technical implementations and considerations
|
|
13
13
|
for engineers, author guidance, and a playground where you can test drive our components.
|
|
@@ -21,7 +21,16 @@ export class JhInputPassword extends JhInput {
|
|
|
21
21
|
css`
|
|
22
22
|
.password-toggle-btn {
|
|
23
23
|
position: absolute;
|
|
24
|
-
right: var(--jh-
|
|
24
|
+
right: var(--jh-dimension-400);
|
|
25
|
+
}
|
|
26
|
+
.clear-button {
|
|
27
|
+
right: var(--jh-dimension-1400);
|
|
28
|
+
}
|
|
29
|
+
.display-clear-button input {
|
|
30
|
+
padding-right: var(--jh-dimension-2400);
|
|
31
|
+
}
|
|
32
|
+
input {
|
|
33
|
+
padding-right: var(--jh-dimension-1400);
|
|
25
34
|
}
|
|
26
35
|
:host([size='small']) .password-toggle-btn {
|
|
27
36
|
top: 4px;
|
|
@@ -70,9 +79,8 @@ export class JhInputPassword extends JhInput {
|
|
|
70
79
|
this.#inputEl = this.shadowRoot.querySelector('input');
|
|
71
80
|
}
|
|
72
81
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
await super.updated(changedProperties);
|
|
82
|
+
updated(changedProperties) {
|
|
83
|
+
super.updated(changedProperties);
|
|
76
84
|
|
|
77
85
|
if (changedProperties.has('passwordVisible')) {
|
|
78
86
|
if (this.passwordVisible) {
|
|
@@ -82,14 +90,6 @@ export class JhInputPassword extends JhInput {
|
|
|
82
90
|
}
|
|
83
91
|
}
|
|
84
92
|
this.#insertTogglePasswordBtn();
|
|
85
|
-
this.#addInputClass();
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
#addInputClass() {
|
|
89
|
-
// hook into base input styles to add padding to input to accommodate the toggle password button
|
|
90
|
-
if (!this.#inputEl.classList.contains('input-right-slot-button')) {
|
|
91
|
-
this.#inputEl.classList.add('input-right-slot-button');
|
|
92
|
-
}
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
#insertTogglePasswordBtn() {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jack-henry/jh-elements",
|
|
3
3
|
"description": "Jack Henry's design system web components.",
|
|
4
|
-
"version": "2.0.0-beta.
|
|
4
|
+
"version": "2.0.0-beta.9",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/Banno/jack-henry-design-system.git"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@jack-henry/jh-tokens": "2.0.0-beta.8",
|
|
26
|
-
"@jack-henry/jh-icons": "2.0.0-beta.
|
|
26
|
+
"@jack-henry/jh-icons": "2.0.0-beta.7",
|
|
27
27
|
"lit": "3.3.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|