diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index 00c844c336..10ec455041 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -7,7 +7,7 @@
-
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 29c4ba369f..53a641fa91 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -31,17 +31,6 @@ export class BitFormFieldComponent implements AfterContentChecked {
@ContentChildren(BitSuffixDirective) suffixChildren: QueryList;
ngAfterContentChecked(): void {
- this.input.hasPrefix = this.prefixChildren.length > 0;
- this.input.hasSuffix = this.suffixChildren.length > 0;
-
- this.prefixChildren.forEach((prefix) => {
- prefix.first = prefix == this.prefixChildren.first;
- });
-
- this.suffixChildren.forEach((suffix) => {
- suffix.last = suffix == this.suffixChildren.last;
- });
-
if (this.error) {
this.input.ariaDescribedBy = this.error.id;
} else if (this.hint) {
diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts
index fb9a848866..96cacb9764 100644
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -167,8 +167,6 @@ const ButtonGroupTemplate: Story = (args: BitFormFieldCom
Label
-
-
diff --git a/libs/components/src/form-field/prefix.directive.ts b/libs/components/src/form-field/prefix.directive.ts
index 28ae6bd970..010dbc056e 100644
--- a/libs/components/src/form-field/prefix.directive.ts
+++ b/libs/components/src/form-field/prefix.directive.ts
@@ -9,7 +9,7 @@ export const PrefixClasses = [
"tw-border-solid",
"tw-border-secondary-500",
"tw-text-muted",
- "tw-rounded",
+ "tw-rounded-none",
];
@Directive({
@@ -17,12 +17,6 @@ export const PrefixClasses = [
})
export class BitPrefixDirective {
@HostBinding("class") @Input() get classList() {
- return PrefixClasses.concat([
- "tw-border-r-0",
- "tw-rounded-r-none",
- !this.first ? "tw-rounded-l-none" : "",
- ]).filter((c) => c != "");
+ return PrefixClasses.concat(["tw-border-r-0", "first:tw-rounded-l"]);
}
-
- @Input() first = false;
}
diff --git a/libs/components/src/form-field/suffix.directive.ts b/libs/components/src/form-field/suffix.directive.ts
index c644e80cb2..6b0a8e978a 100644
--- a/libs/components/src/form-field/suffix.directive.ts
+++ b/libs/components/src/form-field/suffix.directive.ts
@@ -7,12 +7,6 @@ import { PrefixClasses } from "./prefix.directive";
})
export class BitSuffixDirective {
@HostBinding("class") @Input() get classList() {
- return PrefixClasses.concat([
- "tw-rounded-l-none",
- "tw-border-l-0",
- !this.last ? "tw-rounded-r-none" : "",
- ]).filter((c) => c != "");
+ return PrefixClasses.concat(["tw-border-l-0", "last:tw-rounded-r"]);
}
-
- @Input() last = false;
}
diff --git a/libs/components/src/input/input.directive.ts b/libs/components/src/input/input.directive.ts
index f75e3da61c..571d54adcc 100644
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -17,18 +17,20 @@ export class BitInputDirective {
"tw-bg-background-alt",
"tw-border",
"tw-border-solid",
- "tw-rounded",
+ this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
"tw-text-main",
"tw-placeholder-text-muted",
+ // Rounded
+ "tw-rounded-none",
+ "first:tw-rounded-l",
+ "last:tw-rounded-r",
+ // Focus
"focus:tw-outline-none",
"focus:tw-border-primary-700",
"focus:tw-ring-1",
"focus:tw-ring-primary-700",
"focus:tw-z-10",
"disabled:tw-bg-secondary-100",
- this.hasPrefix ? "tw-rounded-l-none" : "",
- this.hasSuffix ? "tw-rounded-r-none" : "",
- this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
].filter((s) => s != "");
}