design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-input-text): adjust password toggle and validation icon alignment in text input

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 17:01:05 +00:00
parent 212a46894e
commit 2f4afddf73
3 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
changelog.md
View File

@@ -1,5 +1,11 @@
# Changelog # Changelog
## 2026-04-12 - 3.74.1 - fix(dees-input-text)
adjust password toggle and validation icon alignment in text input
- positions the password toggle and validation icon with fixed top offsets for improved vertical alignment
- updates the validation icon styling to use a larger themed icon without the circular background
## 2026-04-12 - 3.74.0 - feat(input-text) ## 2026-04-12 - 3.74.0 - feat(input-text)
add validated success state and text editing context menu to text inputs add validated success state and text editing context menu to text inputs

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '3.74.0', version: '3.74.1',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

14
ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
View File

@@ -134,7 +134,7 @@ export class DeesInputText extends DeesInputBase {
.showPassword { .showPassword {
position: absolute; position: absolute;
right: 1px; right: 1px;
top: 50%; top: 20px;
transform: translateY(-50%); transform: translateY(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -155,19 +155,16 @@ export class DeesInputText extends DeesInputBase {
/* Valid checkmark icon */ /* Valid checkmark icon */
.validIcon { .validIcon {
position: absolute; position: absolute;
right: 8px; right: 10px;
top: 50%; top: 20px;
transform: translateY(-50%); transform: translateY(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
pointer-events: none; pointer-events: none;
color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
} }
.validIcon.show { .validIcon.show {
@@ -175,8 +172,7 @@ export class DeesInputText extends DeesInputBase {
} }
.validIcon dees-icon { .validIcon dees-icon {
font-size: 14px; font-size: 18px;
color: white;
} }
/* Validation styles */ /* Validation styles */