|
| 1 | +import { AsyncPipe } from '@angular/common'; |
| 2 | +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; |
| 3 | +import { ReactiveFormsModule, UntypedFormControl, Validators } from '@angular/forms'; |
| 4 | +import { KbqAutocompleteModule, KbqAutocompleteSelectedEvent } from '@koobiq/components/autocomplete'; |
| 5 | +import { KbqButtonModule } from '@koobiq/components/button'; |
| 6 | +import { KbqOptionModule } from '@koobiq/components/core'; |
| 7 | +import { KbqDividerModule } from '@koobiq/components/divider'; |
| 8 | +import { KbqDropdownModule } from '@koobiq/components/dropdown'; |
| 9 | +import { KbqFormFieldModule } from '@koobiq/components/form-field'; |
| 10 | +import { KbqIconModule } from '@koobiq/components/icon'; |
| 11 | +import { KbqInputModule } from '@koobiq/components/input'; |
| 12 | +import { KbqSelectModule } from '@koobiq/components/select'; |
| 13 | +import { KbqTitleModule } from '@koobiq/components/title'; |
| 14 | +import { Observable } from 'rxjs'; |
| 15 | +import { map, startWith } from 'rxjs/operators'; |
| 16 | + |
| 17 | +const options = [ |
| 18 | + 'One', |
| 19 | + 'Two', |
| 20 | + 'Three', |
| 21 | + 'Four', |
| 22 | + 'Five', |
| 23 | + 'Longest text (0123456789 qwertyuiopasdfghjklzxcvbnm)', |
| 24 | + 'Волгоград', |
| 25 | + 'Воронеж', |
| 26 | + 'Ейск', |
| 27 | + 'Екабпилс', |
| 28 | + 'Екатеринбург', |
| 29 | + 'Екатериновка', |
| 30 | + 'Екатеринославка', |
| 31 | + 'Екаша', |
| 32 | + 'Екибастуз', |
| 33 | + 'Екпинди', |
| 34 | + 'Елань', |
| 35 | + 'Елец', |
| 36 | + 'Казань', |
| 37 | + 'Краснодар', |
| 38 | + 'Красноярск', |
| 39 | + 'Москва', |
| 40 | + 'Нижний Новгород', |
| 41 | + 'Новосибирск', |
| 42 | + 'Омск', |
| 43 | + 'Пермь', |
| 44 | + 'Ростов-на-Дону', |
| 45 | + 'Самара', |
| 46 | + 'Санкт-Петербург', |
| 47 | + 'Уфа', |
| 48 | + 'Челябинск' |
| 49 | +]; |
| 50 | + |
| 51 | +/** |
| 52 | + * @title Title |
| 53 | + */ |
| 54 | +@Component({ |
| 55 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 56 | + standalone: true, |
| 57 | + selector: 'title-overview-example', |
| 58 | + imports: [ |
| 59 | + KbqTitleModule, |
| 60 | + KbqButtonModule, |
| 61 | + KbqFormFieldModule, |
| 62 | + KbqOptionModule, |
| 63 | + KbqSelectModule, |
| 64 | + KbqDropdownModule, |
| 65 | + KbqIconModule, |
| 66 | + KbqAutocompleteModule, |
| 67 | + KbqInputModule, |
| 68 | + ReactiveFormsModule, |
| 69 | + KbqDividerModule, |
| 70 | + AsyncPipe |
| 71 | + ], |
| 72 | + template: ` |
| 73 | + <div class="dev-container"> |
| 74 | + <div class="kbq-subheading">Simple cut text with tooltip in div</div> |
| 75 | + <br /> |
| 76 | + <div class="child dev-text-with-tooltip kbq-text-big" kbq-title> |
| 77 | + {{ longValue }} |
| 78 | + </div> |
| 79 | + </div> |
| 80 | +
|
| 81 | + <div class="dev-container"> |
| 82 | + <div class="kbq-subheading">Simple cut text with tooltip inside button</div> |
| 83 | + <br /> |
| 84 | + <button class="dev-text-with-tooltip kbq-text-big" kbq-button kbq-title> |
| 85 | + {{ longValue }} |
| 86 | + </button> |
| 87 | + </div> |
| 88 | +
|
| 89 | + <div class="dev-container dev-container-responsive"> |
| 90 | + <div class="kbq-subheading">Responsive text with tooltip</div> |
| 91 | + <br /> |
| 92 | + <div class="dev-child wide kbq-text-big" kbq-title> |
| 93 | + {{ longValue }} |
| 94 | + </div> |
| 95 | + </div> |
| 96 | +
|
| 97 | + <div class="dev-container"> |
| 98 | + <div class="kbq-subheading">Tooltip tracking for parent & child as parameters</div> |
| 99 | + <br /> |
| 100 | +
|
| 101 | + <div kbq-title style="max-width: 50%"> |
| 102 | + <div class="dev-parent" #kbqTitleContainer> |
| 103 | + <div class="dev-child kbq-text-normal" #kbqTitleText> |
| 104 | + {{ field }} |
| 105 | + </div> |
| 106 | + </div> |
| 107 | + </div> |
| 108 | +
|
| 109 | + <button (click)="onAddText()" kbq-button>Add text</button> |
| 110 | + <button (click)="field = defaultValue" kbq-button>Set Default text</button> |
| 111 | + </div> |
| 112 | +
|
| 113 | + <div class="dev-container"> |
| 114 | + <div class="kbq-subheading">Select/autocomplete with long KbqOptions and tooltips</div> |
| 115 | + <br /> |
| 116 | +
|
| 117 | + <kbq-form-field> |
| 118 | + <kbq-select [(value)]="singleSelected" [placeholder]="'placeholder'"> |
| 119 | + <kbq-option [value]="'Disabled'" disabled>Disabled</kbq-option> |
| 120 | + <kbq-option [value]="'Normal'" kbq-title>Normal</kbq-option> |
| 121 | + <kbq-option [value]="'Hovered'" kbq-title>Hovered</kbq-option> |
| 122 | + <kbq-option [value]="'Focused'" kbq-title>Focused</kbq-option> |
| 123 | + <kbq-option [value]="'Selected'" kbq-title>Selected</kbq-option> |
| 124 | + <kbq-option [value]="'Selected1'" kbq-title>Selected1</kbq-option> |
| 125 | + <kbq-option [value]="'Selected2'" kbq-title>Selected2</kbq-option> |
| 126 | + <kbq-option [value]="'Selected3'" kbq-title>Selected3</kbq-option> |
| 127 | + <kbq-option [value]="'Selected4'" kbq-title>Selected4</kbq-option> |
| 128 | + <kbq-option [value]="'Selected5'" kbq-title>Selected5</kbq-option> |
| 129 | + <kbq-option [value]="'Selected6'" kbq-title>Selected6</kbq-option> |
| 130 | + <kbq-option [value]="'Selected7'" kbq-title>Selected7</kbq-option> |
| 131 | + <kbq-option [value]="'Selected8'" kbq-title> |
| 132 | + {{ longValue }} |
| 133 | + </kbq-option> |
| 134 | + <kbq-option [value]="'Selected9'" kbq-title> |
| 135 | + {{ longValue }} |
| 136 | + </kbq-option> |
| 137 | + </kbq-select> |
| 138 | + </kbq-form-field> |
| 139 | +
|
| 140 | + <kbq-form-field> |
| 141 | + <input [formControl]="formControl" [kbqAutocomplete]="auto" kbqInput type="text" /> |
| 142 | + <kbq-autocomplete #auto="kbqAutocomplete"> |
| 143 | + @for (option of filteredOptions | async; track option) { |
| 144 | + <kbq-option [value]="option" kbq-title> |
| 145 | + {{ option }} |
| 146 | + </kbq-option> |
| 147 | + } |
| 148 | + </kbq-autocomplete> |
| 149 | + </kbq-form-field> |
| 150 | + </div> |
| 151 | +
|
| 152 | + <div class="dev-container"> |
| 153 | + <div class="kbq-subheading">Dropdown with long options and tooltips</div> |
| 154 | + <br /> |
| 155 | +
|
| 156 | + <button class="kbq-button_transparent" [kbqDropdownTriggerFor]="appDropdown" kbq-button> |
| 157 | + dropdown |
| 158 | + <i kbq-icon="kbq-chevron-down-s_16"></i> |
| 159 | + </button> |
| 160 | +
|
| 161 | + <kbq-dropdown #appDropdown="kbqDropdown" [overlapTriggerX]="false" [overlapTriggerY]="true"> |
| 162 | + <button kbq-dropdown-item kbq-title> |
| 163 | + <i kbq-icon="kbq-circle-xs_16"></i> |
| 164 | + Общие сведения |
| 165 | + </button> |
| 166 | +
|
| 167 | + <kbq-divider /> |
| 168 | +
|
| 169 | + <button kbq-dropdown-item kbq-title> |
| 170 | + {{ longValue }} |
| 171 | + </button> |
| 172 | +
|
| 173 | + <button kbq-dropdown-item kbq-title> |
| 174 | + <div #kbqTitleContainer> |
| 175 | + <div>Complex header</div> |
| 176 | + <div #kbqTitleText>{{ longValue }}</div> |
| 177 | + </div> |
| 178 | + </button> |
| 179 | + <button kbq-dropdown-item kbq-title> |
| 180 | + <div #kbqTitleContainer> |
| 181 | + <div>Complex header</div> |
| 182 | + <div #kbqTitleText>{{ defaultValue }}</div> |
| 183 | + </div> |
| 184 | + </button> |
| 185 | + </kbq-dropdown> |
| 186 | +
|
| 187 | + <button [kbqDropdownTriggerFor]="appDropdownWithNested" kbq-button> |
| 188 | + nested dropdown |
| 189 | + <i kbq-icon="kbq-chevron-down-s_16"></i> |
| 190 | + </button> |
| 191 | +
|
| 192 | + <kbq-dropdown #appDropdownWithNested="kbqDropdown"> |
| 193 | + <button [kbqDropdownTriggerFor]="appDropdownNested" kbq-dropdown-item>1 level (1)</button> |
| 194 | + <button kbq-dropdown-item>1 level (2)</button> |
| 195 | + <button kbq-dropdown-item>1 level (3)</button> |
| 196 | + </kbq-dropdown> |
| 197 | +
|
| 198 | + <kbq-dropdown #appDropdownNested="kbqDropdown"> |
| 199 | + <button [kbqDropdownTriggerFor]="appDropdownNestedNested" kbq-dropdown-item kbq-title> |
| 200 | + {{ longValue }} |
| 201 | + </button> |
| 202 | + <button kbq-dropdown-item>2 level (2)</button> |
| 203 | + <button kbq-dropdown-item>2 level (3)</button> |
| 204 | + </kbq-dropdown> |
| 205 | +
|
| 206 | + <kbq-dropdown #appDropdownNestedNested="kbqDropdown"> |
| 207 | + <button kbq-dropdown-item>3 level (1)</button> |
| 208 | + <button kbq-dropdown-item>3 level (2)</button> |
| 209 | + <button kbq-dropdown-item>3 level (3)</button> |
| 210 | + </kbq-dropdown> |
| 211 | + </div> |
| 212 | + ` |
| 213 | +}) |
| 214 | +export class TitleOverviewExample implements OnInit { |
| 215 | + defaultValue = 'Just a text'; |
| 216 | + longValue = `${this.defaultValue} and a long text and a long text and a long text and a long text and a long text and a long text`; |
| 217 | + field = this.defaultValue; |
| 218 | + singleSelected: string = ''; |
| 219 | + filteredOptions: Observable<string[]>; |
| 220 | + |
| 221 | + formControl = new UntypedFormControl('', Validators.required); |
| 222 | + |
| 223 | + ngOnInit(): void { |
| 224 | + this.filteredOptions = this.formControl.valueChanges.pipe( |
| 225 | + startWith(''), |
| 226 | + map((value) => this.filter(value)) |
| 227 | + ); |
| 228 | + } |
| 229 | + |
| 230 | + onSelectionChange($event: KbqAutocompleteSelectedEvent) { |
| 231 | + console.log(`onSelectionChange: ${$event}`); |
| 232 | + } |
| 233 | + |
| 234 | + onAddText() { |
| 235 | + this.field = `${this.field} and a long text and a long text and a long text`; |
| 236 | + } |
| 237 | + |
| 238 | + private filter(value: string): string[] { |
| 239 | + const filterValue = value.toLowerCase(); |
| 240 | + |
| 241 | + return options.filter((option) => option.toLowerCase().includes(filterValue)); |
| 242 | + } |
| 243 | +} |
0 commit comments