diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.html b/projects/demo/src/modules/components/multi-select/examples/11/index.html
new file mode 100644
index 000000000000..a710448f3eab
--- /dev/null
+++ b/projects/demo/src/modules/components/multi-select/examples/11/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Select
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.less b/projects/demo/src/modules/components/multi-select/examples/11/index.less
new file mode 100644
index 000000000000..63decfb884f8
--- /dev/null
+++ b/projects/demo/src/modules/components/multi-select/examples/11/index.less
@@ -0,0 +1,8 @@
+.t-tag {
+ margin: 0.125rem 0.5rem 0.125rem -0.25rem;
+}
+
+.t-wrapper {
+ flex-wrap: wrap;
+ padding-inline-start: 0.25rem;
+}
diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.ts b/projects/demo/src/modules/components/multi-select/examples/11/index.ts
new file mode 100644
index 000000000000..fc45461140b1
--- /dev/null
+++ b/projects/demo/src/modules/components/multi-select/examples/11/index.ts
@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+@Component({
+ selector: 'tui-multi-select-example-11',
+ templateUrl: './index.html',
+ styleUrls: ['./index.less'],
+ changeDetection,
+ encapsulation,
+})
+export class TuiMultiSelectExample11 {
+ readonly items = [
+ 'Luke Skywalker',
+ 'Leia Organa Solo',
+ 'Darth Vader',
+ 'Han Solo',
+ 'Obi-Wan Kenobi',
+ 'Yoda',
+ ];
+
+ value: string[] = this.items;
+
+ content: PolymorpheusContent> = ({
+ $implicit: {length},
+ }) => `Selected: ${length}`;
+
+ remove(item: string): void {
+ this.value = this.value.filter(val => val !== item);
+ }
+}
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.component.ts b/projects/demo/src/modules/components/multi-select/multi-select.component.ts
index b71fb2dd91f7..d284907ce5e6 100644
--- a/projects/demo/src/modules/components/multi-select/multi-select.component.ts
+++ b/projects/demo/src/modules/components/multi-select/multi-select.component.ts
@@ -104,6 +104,11 @@ export class ExampleTuiMultiSelectComponent extends AbstractExampleTuiControl {
HTML: import('./examples/10/index.html?raw'),
};
+ readonly example11: TuiDocExample = {
+ TypeScript: import('./examples/11/index.ts?raw'),
+ HTML: import('./examples/11/index.html?raw'),
+ };
+
override labelOutside = true;
readonly items = [
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.module.ts b/projects/demo/src/modules/components/multi-select/multi-select.module.ts
index 4adcfc2fb01a..3a0650c65991 100644
--- a/projects/demo/src/modules/components/multi-select/multi-select.module.ts
+++ b/projects/demo/src/modules/components/multi-select/multi-select.module.ts
@@ -20,6 +20,7 @@ import {
TuiDataListWrapperModule,
TuiMultiSelectModule,
TuiRadioListModule,
+ TuiTagModule,
} from '@taiga-ui/kit';
import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
@@ -34,6 +35,7 @@ import {TuiMultiSelectExample7} from './examples/7';
import {TuiMultiSelectExample8} from './examples/8';
import {TuiMultiSelectExample9} from './examples/9';
import {TuiMultiSelectExample10} from './examples/10';
+import {TuiMultiSelectExample11} from './examples/11';
import {ExampleTuiMultiSelectComponent} from './multi-select.component';
@NgModule({
@@ -53,6 +55,7 @@ import {ExampleTuiMultiSelectComponent} from './multi-select.component';
TuiLetModule,
TuiDropdownModule,
TuiHintModule,
+ TuiTagModule,
TuiTextfieldControllerModule,
InheritedDocumentationModule,
TuiAddonDocModule,
@@ -72,6 +75,7 @@ import {ExampleTuiMultiSelectComponent} from './multi-select.component';
TuiMultiSelectExample8,
TuiMultiSelectExample9,
TuiMultiSelectExample10,
+ TuiMultiSelectExample11,
],
exports: [ExampleTuiMultiSelectComponent],
})
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.template.html b/projects/demo/src/modules/components/multi-select/multi-select.template.html
index eadd8e85fb8a..7d222efa794d 100644
--- a/projects/demo/src/modules/components/multi-select/multi-select.template.html
+++ b/projects/demo/src/modules/components/multi-select/multi-select.template.html
@@ -105,6 +105,14 @@
>
+
+
+
+
diff --git a/projects/kit/components/input-tag/input-tag.style.less b/projects/kit/components/input-tag/input-tag.style.less
index 8948eb21c3f4..91f468d3042a 100644
--- a/projects/kit/components/input-tag/input-tag.style.less
+++ b/projects/kit/components/input-tag/input-tag.style.less
@@ -62,6 +62,10 @@
overflow: hidden;
}
+ &_empty {
+ height: 0;
+ }
+
:host._expandable & {
flex-wrap: wrap;
white-space: normal;
@@ -189,14 +193,18 @@
}
.t-input-wrapper {
- position: relative;
- flex: 1;
- max-width: 100%;
-
&_collapsed {
flex: 0;
margin-inline-start: -0.5rem;
}
+}
+
+.t-input-wrapper,
+.t-value-content {
+ position: relative;
+ display: flex;
+ flex: 1;
+ max-width: 100%;
:host[data-size='s'] & {
min-height: 1.25rem + 2 * @tag-vertical-space;
@@ -215,6 +223,10 @@
}
}
+.t-value-content:empty {
+ display: none;
+}
+
.t-ghost {
visibility: hidden;
white-space: pre;
diff --git a/projects/kit/components/input-tag/input-tag.template.html b/projects/kit/components/input-tag/input-tag.template.html
index 24ceb189d44f..317374a84b5c 100644
--- a/projects/kit/components/input-tag/input-tag.template.html
+++ b/projects/kit/components/input-tag/input-tag.template.html
@@ -45,7 +45,10 @@
[hidden]="!expandable"
[style.maxHeight.rem]="computeMaxHeight"
>
-
+
+
+
-