Merge 464623b into fbc5f33

taiga-family · Dec 24, 2021 · b161797 · b161797
2 parents fbc5f33 + 464623b
commit b161797
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/projects/demo/src/modules/components/select/select.component.ts b/projects/demo/src/modules/components/select/select.component.ts
@@ -2,6 +2,7 @@ import {Component, forwardRef, ViewChild} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {ALWAYS_FALSE_HANDLER, TuiBooleanHandler, TuiIdentityMatcher} from '@taiga-ui/cdk';
+import {TuiValueContentContext} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
@@ -57,7 +58,9 @@ class Account {
 })
 export class ExampleTuiSelectComponent extends AbstractExampleTuiControl {
     @ViewChild('valueTemplateContent')
-    private readonly valueTemplateRef: PolymorpheusContent = '';
+    private readonly valueTemplateRef: PolymorpheusContent<
+        TuiValueContentContext<Account>
+    > = '';
 
     readonly exampleImportModule = exampleImportModule;
     readonly exampleInsertTemplate = exampleInsertTemplate;
@@ -130,7 +133,7 @@ export class ExampleTuiSelectComponent extends AbstractExampleTuiControl {
         (item: Account) => item.balance < 300,
     ];
 
-    get valueContent(): PolymorpheusContent {
+    get valueContent(): PolymorpheusContent<TuiValueContentContext<Account>> {
         return this.valueTemplateRef && this.selectedValueTemplate
             ? this.valueTemplateRef
             : '';

diff --git a/projects/demo/src/modules/components/select/select.style.less b/projects/demo/src/modules/components/select/select.style.less
@@ -3,3 +3,8 @@
     color: var(--tui-accent);
     margin: 0 0.25rem 0 -0.25rem;
 }
+
+.text-overflow {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/projects/demo/src/modules/components/select/select.template.html b/projects/demo/src/modules/components/select/select.template.html
@@ -101,7 +101,7 @@
         </tui-doc-demo>
         <ng-template #valueTemplateContent let-item>
             <tui-svg src="tuiIconCheck" class="icon"></tui-svg>
-            {{ item }}
+            <div class="text-overflow">{{ item }}</div>
         </ng-template>
         <div i18n>
             <p>

diff --git a/projects/kit/components/select/select.style.less b/projects/kit/components/select/select.style.less
@@ -16,18 +16,23 @@
     /* stylelint-enable */
 }
 
-.hosted {
+.t-hosted {
     display: block;
     border-radius: inherit;
 }
 
-.textfield {
+.t-textfield {
     border-radius: inherit;
     text-align: inherit;
 }
 
-.value {
+.t-value {
     display: flex;
     width: 100%;
     align-items: center;
+    overflow: hidden;
+
+    &__primitive {
+        .text-overflow();
+    }
 }
diff --git a/projects/kit/components/select/select.template.html b/projects/kit/components/select/select.template.html
@@ -1,12 +1,12 @@
 <tui-hosted-dropdown
-    class="hosted"
+    class="t-hosted"
     [canOpen]="canOpen"
     [content]="datalist || ''"
     (tuiActiveZoneChange)="onActiveZone($event)"
 >
     <tui-primitive-textfield
         automation-id="tui-select__textfield"
-        class="textfield"
+        class="t-textfield"
         [editable]="false"
         [pseudoFocused]="computedFocused"
         [pseudoHovered]="computedHovered"
@@ -27,9 +27,13 @@
             *ngIf="value !== null"
             polymorpheus-outlet
             automation-id="tui-select__value"
-            class="value"
+            class="t-value"
             [content]="computedContent"
             [context]="computeContext(value, computedFocused)"
-        ></div>
+        >
+            <ng-template let-primitiveValue>
+                <div class="t-value__primitive">{{ primitiveValue }}</div>
+            </ng-template>
+        </div>
     </tui-primitive-textfield>
 </tui-hosted-dropdown>