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" > -
+
+
+ +
-