From a2c16d1e842bbec8179fd3704c808a3cd7e899b1 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Mon, 3 Mar 2025 15:57:23 +0100
Subject: [PATCH 1/4] Add styling to kol-input-file
Refs: #6368
---
.../src/components/input-file/shadow.tsx | 12 ++++++--
.../src/components/input-file/style.scss | 30 +++++++++++++++++++
packages/components/src/locales/de.ts | 2 ++
packages/components/src/locales/en.ts | 2 ++
.../default/src/components/input-file.scss | 14 +++++++++
.../ecl/src/ecl-ec/components/input-file.scss | 11 +++++++
.../ecl/src/ecl-eu/components/input-file.scss | 12 ++++++++
7 files changed, 81 insertions(+), 2 deletions(-)
diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
index 12bf929f06..fa2c70d9c6 100644
--- a/packages/components/src/components/input-file/shadow.tsx
+++ b/packages/components/src/components/input-file/shadow.tsx
@@ -25,6 +25,8 @@ import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../
import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
import { InputFileController } from './controller';
+import { translate } from '../../i18n';
+import { KolButtonWcTag } from '../../core/component-names';
/**
* @slot - Die Beschriftung des Eingabefeldes.
@@ -93,7 +95,9 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
return (
+ {this.filename}
+
);
@@ -204,6 +208,7 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
*/
@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;
+ @State() private filename: string = translate('kol-filename-text');
@State() public state: InputFileStates = {
_hideMsg: false,
_id: `id-${nonce()}`,
@@ -318,10 +323,13 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
private onChange = (event: Event): void => {
if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
const value = this.inputRef.files;
+ this.filename = value?.length
+ ? Array.from(value)
+ .map((file) => file.name)
+ .join(', ')
+ : translate('kol-filename-text');
this.controller.onFacade.onChange(event, value);
-
- // Static form handling
this.controller.setFormAssociatedValue(value);
}
};
diff --git a/packages/components/src/components/input-file/style.scss b/packages/components/src/components/input-file/style.scss
index 6320d2b279..ca949f9415 100644
--- a/packages/components/src/components/input-file/style.scss
+++ b/packages/components/src/components/input-file/style.scss
@@ -13,5 +13,35 @@
@layer kol-component {
.kol-input {
padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ }
+
+ .kol-input-container {
+ $root: &;
+ padding: 0 0 0 rem(8) !important;
+
+ &__container {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ height: var(--a11y-min-size);
+ }
+
+ &__filename {
+ flex-grow: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-left: rem(4);
+ }
+
+ &:has(> #{$root}__adornment--start):has(> #{$root}__adornment--end) {
+ grid-template-columns: auto 1fr;
+ }
}
}
diff --git a/packages/components/src/locales/de.ts b/packages/components/src/locales/de.ts
index 54690dbc48..306e4aa3f9 100644
--- a/packages/components/src/locales/de.ts
+++ b/packages/components/src/locales/de.ts
@@ -48,4 +48,6 @@ export default {
'hide-password': 'ausblenden',
'no-results-message': 'Keine Ergebnisse gefunden.',
'delete-selection': 'Auswahl entfernen',
+ 'filename-text': 'Datei auswählen oder hier ablegen...',
+ 'data-browse-text': 'Datei auswählen',
};
diff --git a/packages/components/src/locales/en.ts b/packages/components/src/locales/en.ts
index e4567e70f6..363d595b1e 100644
--- a/packages/components/src/locales/en.ts
+++ b/packages/components/src/locales/en.ts
@@ -48,4 +48,6 @@ export default {
'hide-password': 'Hide',
'no-results-message': 'No results found.',
'delete-selection': 'Delete selection',
+ 'filename-text': 'Choose a file or drop it here...',
+ 'data-browse-text': 'Browse',
};
diff --git a/packages/themes/default/src/components/input-file.scss b/packages/themes/default/src/components/input-file.scss
index 6563f36af9..c3dad4fa7a 100644
--- a/packages/themes/default/src/components/input-file.scss
+++ b/packages/themes/default/src/components/input-file.scss
@@ -1,9 +1,23 @@
@use '../@shared/input-text' as *;
@use '../mixins/rem' as *;
+@use '../mixins/button' as *;
@layer kol-theme-component {
+ @include kol-button('kol-button');
+
.kol-input-container {
gap: initial;
+
+ &__filename {
+ color: var(--color-subtle);
+ }
+ }
+
+ .kol-button {
+ &__text {
+ border-radius: 0 !important;
+ white-space: nowrap;
+ }
}
.kol-input {
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-file.scss b/packages/themes/ecl/src/ecl-ec/components/input-file.scss
index 5ce54a978e..5eae05f58f 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-file.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-file.scss
@@ -1 +1,12 @@
@use '../@shared/input-text' as *;
+@use '../mixins/button' as *;
+
+@layer kol-theme-component {
+ @include kol-button('kol-button');
+
+ .kol-button {
+ &__text {
+ white-space: nowrap;
+ }
+ }
+}
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-file.scss b/packages/themes/ecl/src/ecl-eu/components/input-file.scss
index 5ce54a978e..eec9ed94dd 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-file.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-file.scss
@@ -1 +1,13 @@
@use '../@shared/input-text' as *;
+@use '../mixins/button' as *;
+
+@layer kol-theme-component {
+ @include kol-button('kol-button');
+
+ .kol-button {
+ &__text {
+ border-radius: 0 !important;
+ white-space: nowrap;
+ }
+ }
+}
From 9993d257828cd6c2e453eba476b322f3fbf91b21 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Tue, 4 Mar 2025 12:14:50 +0100
Subject: [PATCH 2/4] Add drag and drop support
Refs: #6368
---
.../src/components/input-file/shadow.tsx | 27 +++++++++++++++++++
.../default/src/components/input-file.scss | 4 +++
.../ecl/src/ecl-ec/components/input-file.scss | 6 +++++
.../ecl/src/ecl-eu/components/input-file.scss | 6 +++++
4 files changed, 43 insertions(+)
diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
index fa2c70d9c6..a605215201 100644
--- a/packages/components/src/components/input-file/shadow.tsx
+++ b/packages/components/src/components/input-file/shadow.tsx
@@ -320,6 +320,33 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
this.controller.componentWillLoad();
}
+ public componentDidLoad(): void {
+ const container = this.inputRef?.parentElement?.parentElement;
+ container?.addEventListener('dragover', this.onDragOver);
+ container?.addEventListener('dragleave', this.onDragLeave);
+ container?.addEventListener('drop', this.onDrop);
+ }
+
+ private onDragOver = (event: DragEvent): void => {
+ event.preventDefault();
+ this.inputRef?.parentElement?.parentElement?.classList.add('kol-input-container--is-dragover');
+ };
+
+ private onDragLeave = (): void => {
+ this.inputRef?.parentElement?.parentElement?.classList.remove('kol-input-container--is-dragover');
+ };
+
+ private onDrop = (event: DragEvent): void => {
+ event.preventDefault();
+ this.inputRef?.parentElement?.parentElement?.classList.remove('kol-input-container--is-dragover');
+ if (event.dataTransfer?.files.length) {
+ const files = event.dataTransfer.files;
+ this.filename = Array.from(files)
+ .map((file) => file.name)
+ .join(', ');
+ this.controller.setFormAssociatedValue(files);
+ }
+ };
private onChange = (event: Event): void => {
if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
const value = this.inputRef.files;
diff --git a/packages/themes/default/src/components/input-file.scss b/packages/themes/default/src/components/input-file.scss
index c3dad4fa7a..da55916d9f 100644
--- a/packages/themes/default/src/components/input-file.scss
+++ b/packages/themes/default/src/components/input-file.scss
@@ -11,6 +11,10 @@
&__filename {
color: var(--color-subtle);
}
+
+ &--is-dragover {
+ border-color: var(--color-primary) !important;
+ }
}
.kol-button {
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-file.scss b/packages/themes/ecl/src/ecl-ec/components/input-file.scss
index 5eae05f58f..93d580d999 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-file.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-file.scss
@@ -9,4 +9,10 @@
white-space: nowrap;
}
}
+
+ .kol-input-container {
+ &--is-dragover {
+ border-color: var(--color-blue) !important;
+ }
+ }
}
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-file.scss b/packages/themes/ecl/src/ecl-eu/components/input-file.scss
index eec9ed94dd..44aaadce65 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-file.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-file.scss
@@ -10,4 +10,10 @@
white-space: nowrap;
}
}
+
+ .kol-input-container {
+ &--is-dragover {
+ border-color: var(--color-blue) !important;
+ }
+ }
}
From 54480b84b651beae047cfa723f2d3e4e159fbe57 Mon Sep 17 00:00:00 2001
From: Cyrine Ben Romdhane <135605630+anicyne@users.noreply.github.com>
Date: Tue, 4 Mar 2025 12:19:46 +0100
Subject: [PATCH 3/4] Fix input-file test
Refs: #6368
---
.../test/__snapshots__/snapshot.spec.tsx.snap | 56 +++++++++++++++++++
1 file changed, 56 insertions(+)
diff --git a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
index 8d67d7e52b..9f494ace3b 100644
--- a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
@@ -15,7 +15,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -38,7 +42,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -61,7 +69,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -84,7 +96,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
@@ -113,7 +129,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
+
+ kol-filename-text
+
+
@@ -142,7 +162,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
+
+ kol-filename-text
+
+
@@ -167,7 +191,11 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho