@kris701/ez-ui 1.2.5 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ import { FormsModule } from '@angular/forms';
7
7
  import * as i3$1 from '@taiga-ui/core';
8
8
  import { TuiIcon, TuiInput, TuiButton, TuiTitle, TuiLoader, TuiDialog, TuiDropdown, TuiOption, TuiGroup, TuiScrollbar, TuiSelectLike, TuiDataList, TuiTextfield, TuiLink, TuiHint, TuiCheckbox, TUI_DARK_MODE, TuiRoot } from '@taiga-ui/core';
9
9
  import * as i4$1 from '@taiga-ui/kit';
10
- import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
10
+ import { TuiBlock, TuiSwitch, TuiInputDate, TuiInputDateTime, TuiFiles, TuiChevron, TuiTextarea, TuiChip, TuiMultiSelect, TuiInputNumber, TuiInputChip, TuiPassword, TuiSelect, TuiBadge, TuiStatus, TuiDataListWrapper, TuiBadgeNotification, TuiBadgedContent, TuiButtonSelect, TuiStringifyContentPipe, TUI_CONFIRM } from '@taiga-ui/kit';
11
11
  import * as i3$3 from '@taiga-ui/addon-mobile';
12
12
  import { TuiDropdownSheet } from '@taiga-ui/addon-mobile';
13
13
  import { TuiDay, TuiTime } from '@taiga-ui/cdk/date-time';
@@ -2957,6 +2957,7 @@ class EzUIMultiSelect {
2957
2957
  disabled = false;
2958
2958
  selected = undefined;
2959
2959
  selectedChange = new EventEmitter();
2960
+ appearanceMap = {};
2960
2961
  ngOnChanges(changes) {
2961
2962
  if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
2962
2963
  this.selected = changes['selected'].currentValue;
@@ -2978,22 +2979,26 @@ class EzUIMultiSelect {
2978
2979
  return item[this.optionValue];
2979
2980
  }
2980
2981
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
2981
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMultiSelect, isStandalone: true, selector: "ezui-multiselect", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
2982
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMultiSelect, isStandalone: true, selector: "ezui-multiselect", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
2982
2983
  <tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
2983
2984
  @if(label != ''){
2984
2985
  <label tuiLabel>{{label}}</label>
2985
2986
  }
2986
2987
  <input tuiInputChip tuiSelectLike [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
2987
- <tui-input-chip *tuiItem />
2988
+ <tui-input-chip
2989
+ *tuiItem="let context"
2990
+ [appearance]="appearanceMap[getOptionValue(context.item)] ? appearanceMap[getOptionValue(context.item)] : 'neutral'"/>
2988
2991
  <tui-data-list *tuiDropdown tuiMultiSelectGroup >
2989
2992
  @for (item of options; track getOptionValue(item)) {
2990
- <button tuiOption [value]="getOptionValue(item)">
2991
- {{ getOptionLabel(item) }}
2993
+ @let value = getOptionValue(item);
2994
+ @let label = getOptionLabel(item);
2995
+ <button tuiOption [value]="value" >
2996
+ <span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
2992
2997
  </button>
2993
2998
  }
2994
2999
  </tui-data-list>
2995
3000
  </tui-textfield>
2996
- `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i7.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
3001
+ `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.TuiMultiSelectGroupDirective, selector: "[tuiMultiSelectGroup]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i7.TuiItem, selector: "[tuiItem]" }, { kind: "component", type: i3$1.TuiTextfieldMultiComponent, selector: "tui-textfield[multi]", inputs: ["rows"] }, { kind: "directive", type: i4$1.TuiInputChipDirective, selector: "input[tuiInputChip]", inputs: ["separator", "unique"] }, { kind: "component", type: i4$1.TuiInputChipComponent, selector: "tui-input-chip", inputs: ["editable"] }, { kind: "directive", type: TuiSelectLike, selector: "[tuiSelectLike]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }] });
2997
3002
  }
2998
3003
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMultiSelect, decorators: [{
2999
3004
  type: Component,
@@ -3008,18 +3013,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3008
3013
  TuiSelectLike,
3009
3014
  TuiMultiSelect,
3010
3015
  TuiDropdown,
3011
- TuiChevron
3016
+ TuiChevron,
3017
+ TuiChip
3012
3018
  ], template: `
3013
3019
  <tui-textfield multi tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
3014
3020
  @if(label != ''){
3015
3021
  <label tuiLabel>{{label}}</label>
3016
3022
  }
3017
3023
  <input tuiInputChip tuiSelectLike [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
3018
- <tui-input-chip *tuiItem />
3024
+ <tui-input-chip
3025
+ *tuiItem="let context"
3026
+ [appearance]="appearanceMap[getOptionValue(context.item)] ? appearanceMap[getOptionValue(context.item)] : 'neutral'"/>
3019
3027
  <tui-data-list *tuiDropdown tuiMultiSelectGroup >
3020
3028
  @for (item of options; track getOptionValue(item)) {
3021
- <button tuiOption [value]="getOptionValue(item)">
3022
- {{ getOptionLabel(item) }}
3029
+ @let value = getOptionValue(item);
3030
+ @let label = getOptionLabel(item);
3031
+ <button tuiOption [value]="value" >
3032
+ <span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
3023
3033
  </button>
3024
3034
  }
3025
3035
  </tui-data-list>
@@ -3043,6 +3053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3043
3053
  type: Input
3044
3054
  }], selectedChange: [{
3045
3055
  type: Output
3056
+ }], appearanceMap: [{
3057
+ type: Input
3046
3058
  }] } });
3047
3059
 
3048
3060
  class EzUINumberInput {
@@ -3166,6 +3178,7 @@ class EzUISelect {
3166
3178
  disabled = false;
3167
3179
  selected = undefined;
3168
3180
  selectedChange = new EventEmitter();
3181
+ appearanceMap = {};
3169
3182
  ngOnChanges(changes) {
3170
3183
  if (changes['selected'] && changes['selected'].currentValue != changes['selected'].previousValue) {
3171
3184
  this.selected = changes['selected'].currentValue;
@@ -3187,21 +3200,27 @@ class EzUISelect {
3187
3200
  return item[this.optionValue];
3188
3201
  }
3189
3202
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
3190
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISelect, isStandalone: true, selector: "ezui-select", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
3191
- <tui-textfield tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
3203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUISelect, isStandalone: true, selector: "ezui-select", inputs: { icon: "icon", label: "label", size: "size", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", disabled: "disabled", selected: "selected", appearanceMap: "appearanceMap" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: `
3204
+ <tui-textfield tuiChevron [content]="selected && content" [tuiTextfieldSize]="size" [iconStart]="icon">
3192
3205
  @if(label != ''){
3193
3206
  <label tuiLabel>{{label}}</label>
3194
3207
  }
3195
3208
  <input tuiSelect [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
3196
3209
  <tui-data-list *tuiDropdown >
3197
3210
  @for (item of options; track getOptionValue(item)) {
3198
- <button tuiOption [value]="getOptionValue(item)">
3199
- {{ getOptionLabel(item) }}
3211
+ @let value = getOptionValue(item);
3212
+ @let label = getOptionLabel(item);
3213
+ <button tuiOption [value]="value" >
3214
+ <span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
3200
3215
  </button>
3201
3216
  }
3202
3217
  </tui-data-list>
3203
3218
  </tui-textfield>
3204
- `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
3219
+
3220
+ <ng-template #content>
3221
+ <span tuiChip [size]="size == 's' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
3222
+ </ng-template>
3223
+ `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i2.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i3.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i3.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "directive", type: TuiChip, selector: "[tuiChip]", inputs: ["size"] }] });
3205
3224
  }
3206
3225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUISelect, decorators: [{
3207
3226
  type: Component,
@@ -3213,21 +3232,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3213
3232
  TuiTextfield,
3214
3233
  TuiDropdown,
3215
3234
  TuiChevron,
3216
- TuiInput
3235
+ TuiInput,
3236
+ TuiChip
3217
3237
  ], template: `
3218
- <tui-textfield tuiChevron [stringify]="stringify" [tuiTextfieldSize]="size" [iconStart]="icon">
3238
+ <tui-textfield tuiChevron [content]="selected && content" [tuiTextfieldSize]="size" [iconStart]="icon">
3219
3239
  @if(label != ''){
3220
3240
  <label tuiLabel>{{label}}</label>
3221
3241
  }
3222
3242
  <input tuiSelect [(ngModel)]="selected" (ngModelChange)="selectedChange.emit(this.selected)" [disabled]="disabled"/>
3223
3243
  <tui-data-list *tuiDropdown >
3224
3244
  @for (item of options; track getOptionValue(item)) {
3225
- <button tuiOption [value]="getOptionValue(item)">
3226
- {{ getOptionLabel(item) }}
3245
+ @let value = getOptionValue(item);
3246
+ @let label = getOptionLabel(item);
3247
+ <button tuiOption [value]="value" >
3248
+ <span tuiChip size="xs" [appearance]="appearanceMap[value]">{{label}}</span>
3227
3249
  </button>
3228
3250
  }
3229
3251
  </tui-data-list>
3230
3252
  </tui-textfield>
3253
+
3254
+ <ng-template #content>
3255
+ <span tuiChip [size]="size == 's' ? 'xxs' : 'xs'" [appearance]="appearanceMap[selected]">{{stringify(selected)}}</span>
3256
+ </ng-template>
3231
3257
  ` }]
3232
3258
  }], propDecorators: { icon: [{
3233
3259
  type: Input
@@ -3247,6 +3273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3247
3273
  type: Input
3248
3274
  }], selectedChange: [{
3249
3275
  type: Output
3276
+ }], appearanceMap: [{
3277
+ type: Input
3250
3278
  }] } });
3251
3279
 
3252
3280
  class EzUIShowMoreText {