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

fix(input,label): correct validation state attribute handling in text inputs and refine label description icon styling

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 11:10:21 +00:00
parent edf7a86f07
commit 8cc45a53e9
4 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,7 +44,7 @@ export class DeesInputText extends DeesInputBase {
accessor showPasswordBool = false;
@property({
type: Boolean,
type: String,
reflect: true,
})
accessor validationState!: 'valid' | 'warn' | 'invalid';
@@ -172,31 +172,31 @@ export class DeesInputText extends DeesInputBase {
}
/* Error state for input */
:host([validation-state="invalid"]) input {
:host([validationstate="invalid"]) input {
border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
}
:host([validation-state="invalid"]) input:focus {
:host([validationstate="invalid"]) input:focus {
border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')};
}
/* Warning state for input */
:host([validation-state="warn"]) input {
:host([validationstate="warn"]) input {
border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
}
:host([validation-state="warn"]) input:focus {
:host([validationstate="warn"]) input:focus {
border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')};
}
/* Valid state for input */
:host([validation-state="valid"]) input {
:host([validationstate="valid"]) input {
border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
}
:host([validation-state="valid"]) input:focus {
:host([validationstate="valid"]) input:focus {
border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')};
}