@flusys/ng-ui 9.1.1 → 9.1.2

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.
package/README.md CHANGED
@@ -174,6 +174,18 @@ Use `(onChange)` to react to value changes, not `(click)` on the host: a `<label
174
174
 
175
175
  ---
176
176
 
177
+ ## Truncated Text
178
+
179
+ `select`, `multiselect`, `treeselect`, `cascadeselect`, `autocomplete` and `listbox` cut long labels off with `…`, both the selected value in the field and the option rows. Hovering a cut-off label shows its full text as a tooltip; a label that fits shows none. The same behaviour is available for any `truncate` element through `OverflowTitleDirective`:
180
+
181
+ ```html
182
+ <span class="truncate" fOverflowTitle>{{ longLabel }}</span>
183
+ ```
184
+
185
+ It measures on `mouseenter`, so it follows resizes and label changes without observers.
186
+
187
+ ---
188
+
177
189
  ## Buttons & Actions
178
190
 
179
191
  ### ButtonComponent
@@ -6927,6 +6927,45 @@ function attachOverlayPosition(anchor, panel, options = {}) {
6927
6927
  if (placement.width !== null) panel.style.width = `${placement.width}px`;
6928
6928
  });
6929
6929
  }
6930
+ var OverflowTitleDirective = class OverflowTitleDirective {
6931
+ el = inject(ElementRef);
6932
+ sync() {
6933
+ const el = this.el.nativeElement;
6934
+ const text = el.textContent?.trim() ?? "";
6935
+ if (text && el.scrollWidth > el.clientWidth) el.title = text;
6936
+ else el.removeAttribute("title");
6937
+ }
6938
+ static ɵfac = i0.ɵɵngDeclareFactory({
6939
+ minVersion: "12.0.0",
6940
+ version: "22.2.1",
6941
+ ngImport: i0,
6942
+ type: OverflowTitleDirective,
6943
+ deps: [],
6944
+ target: i0.ɵɵFactoryTarget.Directive
6945
+ });
6946
+ static ɵdir = i0.ɵɵngDeclareDirective({
6947
+ minVersion: "14.0.0",
6948
+ version: "22.2.1",
6949
+ type: OverflowTitleDirective,
6950
+ isStandalone: true,
6951
+ selector: "[fOverflowTitle]",
6952
+ host: { listeners: { "mouseenter": "sync()" } },
6953
+ ngImport: i0
6954
+ });
6955
+ };
6956
+ i0.ɵɵngDeclareClassMetadata({
6957
+ minVersion: "12.0.0",
6958
+ version: "22.2.1",
6959
+ ngImport: i0,
6960
+ type: OverflowTitleDirective,
6961
+ decorators: [{
6962
+ type: Directive,
6963
+ args: [{
6964
+ selector: "[fOverflowTitle]",
6965
+ host: { "(mouseenter)": "sync()" }
6966
+ }]
6967
+ }]
6968
+ });
6930
6969
  var SelectComponent = class SelectComponent {
6931
6970
  _el = inject(ElementRef);
6932
6971
  constructor() {
@@ -7765,14 +7804,14 @@ var SelectComponent = class SelectComponent {
7765
7804
  (click)="$event.stopPropagation()"
7766
7805
  />
7767
7806
  } @else if (selectedItemTpl() && selectedOption() != null) {
7768
- <span class="flex-1 min-w-0 truncate text-left">
7807
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-left">
7769
7808
  <ng-container
7770
7809
  [ngTemplateOutlet]="selectedItemTpl()"
7771
7810
  [ngTemplateOutletContext]="{ $implicit: selectedOption() }"
7772
7811
  />
7773
7812
  </span>
7774
7813
  } @else {
7775
- <span
7814
+ <span fOverflowTitle
7776
7815
  data-select-label
7777
7816
  class="flex-1 min-w-0 truncate text-left"
7778
7817
  [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()"
@@ -7921,7 +7960,7 @@ var SelectComponent = class SelectComponent {
7921
7960
  @if (checkmark() && getOptionValue(item.option) === value()) {
7922
7961
  <ui-icon name="check" class="text-xs shrink-0"></ui-icon>
7923
7962
  }
7924
- <span class="flex-1 truncate">
7963
+ <span fOverflowTitle class="flex-1 truncate">
7925
7964
  @if (itemTpl()) {
7926
7965
  <ng-container
7927
7966
  [ngTemplateOutlet]="itemTpl()"
@@ -7968,6 +8007,11 @@ var SelectComponent = class SelectComponent {
7968
8007
  `,
7969
8008
  isInline: true,
7970
8009
  dependencies: [
8010
+ {
8011
+ kind: "directive",
8012
+ type: OverflowTitleDirective,
8013
+ selector: "[fOverflowTitle]"
8014
+ },
7971
8015
  {
7972
8016
  kind: "component",
7973
8017
  type: UiIconComponent,
@@ -8021,6 +8065,7 @@ i0.ɵɵngDeclareClassMetadata({
8021
8065
  args: [{
8022
8066
  selector: "f-select",
8023
8067
  imports: [
8068
+ OverflowTitleDirective,
8024
8069
  UiIconComponent,
8025
8070
  NgTemplateOutlet,
8026
8071
  ScrollerComponent
@@ -8069,14 +8114,14 @@ i0.ɵɵngDeclareClassMetadata({
8069
8114
  (click)="$event.stopPropagation()"
8070
8115
  />
8071
8116
  } @else if (selectedItemTpl() && selectedOption() != null) {
8072
- <span class="flex-1 min-w-0 truncate text-left">
8117
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-left">
8073
8118
  <ng-container
8074
8119
  [ngTemplateOutlet]="selectedItemTpl()"
8075
8120
  [ngTemplateOutletContext]="{ $implicit: selectedOption() }"
8076
8121
  />
8077
8122
  </span>
8078
8123
  } @else {
8079
- <span
8124
+ <span fOverflowTitle
8080
8125
  data-select-label
8081
8126
  class="flex-1 min-w-0 truncate text-left"
8082
8127
  [class.text-(--f-form-field-placeholder-color)]="!selectedLabel()"
@@ -8225,7 +8270,7 @@ i0.ɵɵngDeclareClassMetadata({
8225
8270
  @if (checkmark() && getOptionValue(item.option) === value()) {
8226
8271
  <ui-icon name="check" class="text-xs shrink-0"></ui-icon>
8227
8272
  }
8228
- <span class="flex-1 truncate">
8273
+ <span fOverflowTitle class="flex-1 truncate">
8229
8274
  @if (itemTpl()) {
8230
8275
  <ng-container
8231
8276
  [ngTemplateOutlet]="itemTpl()"
@@ -9502,12 +9547,12 @@ var MultiSelectComponent = class MultiSelectComponent {
9502
9547
  >
9503
9548
  @if (selectedLabels().length) {
9504
9549
  @if (display() === 'comma') {
9505
- <span
9550
+ <span fOverflowTitle
9506
9551
  class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
9507
9552
  >{{ commaLabel() }}</span
9508
9553
  >
9509
9554
  } @else if (selectedLabels().length > maxSelectedLabels()) {
9510
- <span
9555
+ <span fOverflowTitle
9511
9556
  class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
9512
9557
  >{{ selectedLabels().length }} items selected</span
9513
9558
  >
@@ -9628,7 +9673,7 @@ var MultiSelectComponent = class MultiSelectComponent {
9628
9673
  ></ui-icon>
9629
9674
  }
9630
9675
  </div>
9631
- <span class="flex-1 truncate font-medium">Select All</span>
9676
+ <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
9632
9677
  </button>
9633
9678
  }
9634
9679
  <div
@@ -9724,7 +9769,7 @@ var MultiSelectComponent = class MultiSelectComponent {
9724
9769
  ></ui-icon>
9725
9770
  }
9726
9771
  </div>
9727
- <span class="flex-1 truncate">
9772
+ <span fOverflowTitle class="flex-1 truncate">
9728
9773
  @if (itemTpl()) {
9729
9774
  <ng-container
9730
9775
  [ngTemplateOutlet]="itemTpl()"
@@ -9768,6 +9813,11 @@ var MultiSelectComponent = class MultiSelectComponent {
9768
9813
  `,
9769
9814
  isInline: true,
9770
9815
  dependencies: [
9816
+ {
9817
+ kind: "directive",
9818
+ type: OverflowTitleDirective,
9819
+ selector: "[fOverflowTitle]"
9820
+ },
9771
9821
  {
9772
9822
  kind: "component",
9773
9823
  type: UiIconComponent,
@@ -9821,6 +9871,7 @@ i0.ɵɵngDeclareClassMetadata({
9821
9871
  args: [{
9822
9872
  selector: "f-multiselect",
9823
9873
  imports: [
9874
+ OverflowTitleDirective,
9824
9875
  UiIconComponent,
9825
9876
  NgTemplateOutlet,
9826
9877
  ScrollerComponent
@@ -9856,12 +9907,12 @@ i0.ɵɵngDeclareClassMetadata({
9856
9907
  >
9857
9908
  @if (selectedLabels().length) {
9858
9909
  @if (display() === 'comma') {
9859
- <span
9910
+ <span fOverflowTitle
9860
9911
  class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
9861
9912
  >{{ commaLabel() }}</span
9862
9913
  >
9863
9914
  } @else if (selectedLabels().length > maxSelectedLabels()) {
9864
- <span
9915
+ <span fOverflowTitle
9865
9916
  class="flex-1 min-w-0 truncate text-sm text-(--f-form-field-color)"
9866
9917
  >{{ selectedLabels().length }} items selected</span
9867
9918
  >
@@ -9982,7 +10033,7 @@ i0.ɵɵngDeclareClassMetadata({
9982
10033
  ></ui-icon>
9983
10034
  }
9984
10035
  </div>
9985
- <span class="flex-1 truncate font-medium">Select All</span>
10036
+ <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
9986
10037
  </button>
9987
10038
  }
9988
10039
  <div
@@ -10078,7 +10129,7 @@ i0.ɵɵngDeclareClassMetadata({
10078
10129
  ></ui-icon>
10079
10130
  }
10080
10131
  </div>
10081
- <span class="flex-1 truncate">
10132
+ <span fOverflowTitle class="flex-1 truncate">
10082
10133
  @if (itemTpl()) {
10083
10134
  <ng-container
10084
10135
  [ngTemplateOutlet]="itemTpl()"
@@ -28256,7 +28307,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
28256
28307
  [ngTemplateOutletContext]="{ $implicit: item, index: i }"
28257
28308
  />
28258
28309
  } @else {
28259
- <span class="flex-1 truncate">{{ getLabel(item) }}</span>
28310
+ <span fOverflowTitle class="flex-1 truncate">{{ getLabel(item) }}</span>
28260
28311
  }
28261
28312
  </div>
28262
28313
  </ng-template>
@@ -28306,7 +28357,7 @@ var AutoCompleteComponent = class AutoCompleteComponent {
28306
28357
  }"
28307
28358
  />
28308
28359
  } @else {
28309
- <span class="flex-1 truncate">{{
28360
+ <span fOverflowTitle class="flex-1 truncate">{{
28310
28361
  getLabel(row.item)
28311
28362
  }}</span>
28312
28363
  }
@@ -28327,6 +28378,11 @@ var AutoCompleteComponent = class AutoCompleteComponent {
28327
28378
  `,
28328
28379
  isInline: true,
28329
28380
  dependencies: [
28381
+ {
28382
+ kind: "directive",
28383
+ type: OverflowTitleDirective,
28384
+ selector: "[fOverflowTitle]"
28385
+ },
28330
28386
  {
28331
28387
  kind: "component",
28332
28388
  type: UiIconComponent,
@@ -28407,6 +28463,7 @@ i0.ɵɵngDeclareClassMetadata({
28407
28463
  args: [{
28408
28464
  selector: "f-autocomplete",
28409
28465
  imports: [
28466
+ OverflowTitleDirective,
28410
28467
  UiIconComponent,
28411
28468
  FormsModule,
28412
28469
  NgTemplateOutlet,
@@ -28615,7 +28672,7 @@ i0.ɵɵngDeclareClassMetadata({
28615
28672
  [ngTemplateOutletContext]="{ $implicit: item, index: i }"
28616
28673
  />
28617
28674
  } @else {
28618
- <span class="flex-1 truncate">{{ getLabel(item) }}</span>
28675
+ <span fOverflowTitle class="flex-1 truncate">{{ getLabel(item) }}</span>
28619
28676
  }
28620
28677
  </div>
28621
28678
  </ng-template>
@@ -28665,7 +28722,7 @@ i0.ɵɵngDeclareClassMetadata({
28665
28722
  }"
28666
28723
  />
28667
28724
  } @else {
28668
- <span class="flex-1 truncate">{{
28725
+ <span fOverflowTitle class="flex-1 truncate">{{
28669
28726
  getLabel(row.item)
28670
28727
  }}</span>
28671
28728
  }
@@ -30136,7 +30193,7 @@ var ListboxComponent = class ListboxComponent {
30136
30193
  <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
30137
30194
  }
30138
30195
  </div>
30139
- <span class="flex-1 truncate font-medium">Select All</span>
30196
+ <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
30140
30197
  </button>
30141
30198
  }
30142
30199
 
@@ -30218,7 +30275,7 @@ var ListboxComponent = class ListboxComponent {
30218
30275
  <span class="w-3 h-3 shrink-0"></span>
30219
30276
  }
30220
30277
  }
30221
- <span class="flex-1 truncate">
30278
+ <span fOverflowTitle class="flex-1 truncate">
30222
30279
  @if (itemTpl()) {
30223
30280
  <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
30224
30281
  } @else {
@@ -30231,6 +30288,11 @@ var ListboxComponent = class ListboxComponent {
30231
30288
  `,
30232
30289
  isInline: true,
30233
30290
  dependencies: [
30291
+ {
30292
+ kind: "directive",
30293
+ type: OverflowTitleDirective,
30294
+ selector: "[fOverflowTitle]"
30295
+ },
30234
30296
  {
30235
30297
  kind: "component",
30236
30298
  type: UiIconComponent,
@@ -30284,6 +30346,7 @@ i0.ɵɵngDeclareClassMetadata({
30284
30346
  args: [{
30285
30347
  selector: "f-listbox",
30286
30348
  imports: [
30349
+ OverflowTitleDirective,
30287
30350
  UiIconComponent,
30288
30351
  NgTemplateOutlet,
30289
30352
  ScrollerComponent
@@ -30338,7 +30401,7 @@ i0.ɵɵngDeclareClassMetadata({
30338
30401
  <ui-icon name="check" class="text-[9px] text-primary-contrast"></ui-icon>
30339
30402
  }
30340
30403
  </div>
30341
- <span class="flex-1 truncate font-medium">Select All</span>
30404
+ <span fOverflowTitle class="flex-1 truncate font-medium">Select All</span>
30342
30405
  </button>
30343
30406
  }
30344
30407
 
@@ -30420,7 +30483,7 @@ i0.ɵɵngDeclareClassMetadata({
30420
30483
  <span class="w-3 h-3 shrink-0"></span>
30421
30484
  }
30422
30485
  }
30423
- <span class="flex-1 truncate">
30486
+ <span fOverflowTitle class="flex-1 truncate">
30424
30487
  @if (itemTpl()) {
30425
30488
  <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item.option }" />
30426
30489
  } @else {
@@ -31858,7 +31921,7 @@ var TreeSelectComponent = class TreeSelectComponent {
31858
31921
  (keydown)="onTriggerKeyDown($event)"
31859
31922
  >
31860
31923
  @if (valueTpl()) {
31861
- <span class="flex-1 min-w-0 truncate text-left text-sm">
31924
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
31862
31925
  <ng-container
31863
31926
  [ngTemplateOutlet]="valueTpl()"
31864
31927
  [ngTemplateOutletContext]="{
@@ -31868,7 +31931,7 @@ var TreeSelectComponent = class TreeSelectComponent {
31868
31931
  />
31869
31932
  </span>
31870
31933
  } @else if (selectionMode() === 'single') {
31871
- <span
31934
+ <span fOverflowTitle
31872
31935
  class="truncate text-sm"
31873
31936
  [class.text-(--f-form-field-placeholder-color)]="
31874
31937
  !selectedLabels().length
@@ -31899,7 +31962,7 @@ var TreeSelectComponent = class TreeSelectComponent {
31899
31962
  }
31900
31963
  </div>
31901
31964
  } @else if (selectedLabels().length) {
31902
- <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
31965
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
31903
31966
  selectedLabels().join(', ')
31904
31967
  }}</span>
31905
31968
  } @else {
@@ -32063,12 +32126,17 @@ var TreeSelectComponent = class TreeSelectComponent {
32063
32126
  class="text-xs text-(--f-text-muted-color) shrink-0"
32064
32127
  ></ui-icon>
32065
32128
  }
32066
- <span class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
32129
+ <span fOverflowTitle class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
32067
32130
  </div>
32068
32131
  </ng-template>
32069
32132
  `,
32070
32133
  isInline: true,
32071
32134
  dependencies: [
32135
+ {
32136
+ kind: "directive",
32137
+ type: OverflowTitleDirective,
32138
+ selector: "[fOverflowTitle]"
32139
+ },
32072
32140
  {
32073
32141
  kind: "component",
32074
32142
  type: UiIconComponent,
@@ -32122,6 +32190,7 @@ i0.ɵɵngDeclareClassMetadata({
32122
32190
  args: [{
32123
32191
  selector: "f-treeselect",
32124
32192
  imports: [
32193
+ OverflowTitleDirective,
32125
32194
  UiIconComponent,
32126
32195
  NgTemplateOutlet,
32127
32196
  ScrollerComponent
@@ -32151,7 +32220,7 @@ i0.ɵɵngDeclareClassMetadata({
32151
32220
  (keydown)="onTriggerKeyDown($event)"
32152
32221
  >
32153
32222
  @if (valueTpl()) {
32154
- <span class="flex-1 min-w-0 truncate text-left text-sm">
32223
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
32155
32224
  <ng-container
32156
32225
  [ngTemplateOutlet]="valueTpl()"
32157
32226
  [ngTemplateOutletContext]="{
@@ -32161,7 +32230,7 @@ i0.ɵɵngDeclareClassMetadata({
32161
32230
  />
32162
32231
  </span>
32163
32232
  } @else if (selectionMode() === 'single') {
32164
- <span
32233
+ <span fOverflowTitle
32165
32234
  class="truncate text-sm"
32166
32235
  [class.text-(--f-form-field-placeholder-color)]="
32167
32236
  !selectedLabels().length
@@ -32192,7 +32261,7 @@ i0.ɵɵngDeclareClassMetadata({
32192
32261
  }
32193
32262
  </div>
32194
32263
  } @else if (selectedLabels().length) {
32195
- <span class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
32264
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-sm text-(--f-text-color)">{{
32196
32265
  selectedLabels().join(', ')
32197
32266
  }}</span>
32198
32267
  } @else {
@@ -32356,7 +32425,7 @@ i0.ɵɵngDeclareClassMetadata({
32356
32425
  class="text-xs text-(--f-text-muted-color) shrink-0"
32357
32426
  ></ui-icon>
32358
32427
  }
32359
- <span class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
32428
+ <span fOverflowTitle class="flex-1 truncate" [class.font-medium]="row.node.selectable === false">{{ row.node.label }}</span>
32360
32429
  </div>
32361
32430
  </ng-template>
32362
32431
  `
@@ -40847,7 +40916,7 @@ var CascadeSelectComponent = class CascadeSelectComponent {
40847
40916
  (keydown)="onKeyDown($event)"
40848
40917
  >
40849
40918
  @if (valueTpl()) {
40850
- <span class="flex-1 min-w-0 truncate text-left text-sm">
40919
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
40851
40920
  <ng-container
40852
40921
  [ngTemplateOutlet]="valueTpl()"
40853
40922
  [ngTemplateOutletContext]="{
@@ -40857,7 +40926,7 @@ var CascadeSelectComponent = class CascadeSelectComponent {
40857
40926
  />
40858
40927
  </span>
40859
40928
  } @else {
40860
- <span
40929
+ <span fOverflowTitle
40861
40930
  class="flex-1 min-w-0 truncate text-left text-sm"
40862
40931
  [class.text-(--f-form-field-placeholder-color)]="
40863
40932
  !selectedPath().length
@@ -40928,7 +40997,7 @@ var CascadeSelectComponent = class CascadeSelectComponent {
40928
40997
  (click)="onOptionClick(opt, $index)"
40929
40998
  (mouseenter)="onOptionHover(opt, $index)"
40930
40999
  >
40931
- <span class="truncate">
41000
+ <span fOverflowTitle class="truncate">
40932
41001
  @if (getChildren(opt, $index).length && groupTpl()) {
40933
41002
  <ng-container
40934
41003
  [ngTemplateOutlet]="groupTpl()"
@@ -40982,27 +41051,35 @@ var CascadeSelectComponent = class CascadeSelectComponent {
40982
41051
  </div>
40983
41052
  `,
40984
41053
  isInline: true,
40985
- dependencies: [{
40986
- kind: "component",
40987
- type: UiIconComponent,
40988
- selector: "ui-icon",
40989
- inputs: [
40990
- "name",
40991
- "size",
40992
- "spin",
40993
- "fill",
40994
- "severity"
40995
- ]
40996
- }, {
40997
- kind: "directive",
40998
- type: NgTemplateOutlet,
40999
- selector: "[ngTemplateOutlet]",
41000
- inputs: [
41001
- "ngTemplateOutletContext",
41002
- "ngTemplateOutlet",
41003
- "ngTemplateOutletInjector"
41004
- ]
41005
- }]
41054
+ dependencies: [
41055
+ {
41056
+ kind: "directive",
41057
+ type: OverflowTitleDirective,
41058
+ selector: "[fOverflowTitle]"
41059
+ },
41060
+ {
41061
+ kind: "component",
41062
+ type: UiIconComponent,
41063
+ selector: "ui-icon",
41064
+ inputs: [
41065
+ "name",
41066
+ "size",
41067
+ "spin",
41068
+ "fill",
41069
+ "severity"
41070
+ ]
41071
+ },
41072
+ {
41073
+ kind: "directive",
41074
+ type: NgTemplateOutlet,
41075
+ selector: "[ngTemplateOutlet]",
41076
+ inputs: [
41077
+ "ngTemplateOutletContext",
41078
+ "ngTemplateOutlet",
41079
+ "ngTemplateOutletInjector"
41080
+ ]
41081
+ }
41082
+ ]
41006
41083
  });
41007
41084
  };
41008
41085
  i0.ɵɵngDeclareClassMetadata({
@@ -41014,7 +41091,11 @@ i0.ɵɵngDeclareClassMetadata({
41014
41091
  type: Component,
41015
41092
  args: [{
41016
41093
  selector: "f-cascadeselect",
41017
- imports: [UiIconComponent, NgTemplateOutlet],
41094
+ imports: [
41095
+ OverflowTitleDirective,
41096
+ UiIconComponent,
41097
+ NgTemplateOutlet
41098
+ ],
41018
41099
  providers: [{
41019
41100
  provide: NG_VALUE_ACCESSOR,
41020
41101
  useExisting: forwardRef(() => CascadeSelectComponent),
@@ -41040,7 +41121,7 @@ i0.ɵɵngDeclareClassMetadata({
41040
41121
  (keydown)="onKeyDown($event)"
41041
41122
  >
41042
41123
  @if (valueTpl()) {
41043
- <span class="flex-1 min-w-0 truncate text-left text-sm">
41124
+ <span fOverflowTitle class="flex-1 min-w-0 truncate text-left text-sm">
41044
41125
  <ng-container
41045
41126
  [ngTemplateOutlet]="valueTpl()"
41046
41127
  [ngTemplateOutletContext]="{
@@ -41050,7 +41131,7 @@ i0.ɵɵngDeclareClassMetadata({
41050
41131
  />
41051
41132
  </span>
41052
41133
  } @else {
41053
- <span
41134
+ <span fOverflowTitle
41054
41135
  class="flex-1 min-w-0 truncate text-left text-sm"
41055
41136
  [class.text-(--f-form-field-placeholder-color)]="
41056
41137
  !selectedPath().length
@@ -41121,7 +41202,7 @@ i0.ɵɵngDeclareClassMetadata({
41121
41202
  (click)="onOptionClick(opt, $index)"
41122
41203
  (mouseenter)="onOptionHover(opt, $index)"
41123
41204
  >
41124
- <span class="truncate">
41205
+ <span fOverflowTitle class="truncate">
41125
41206
  @if (getChildren(opt, $index).length && groupTpl()) {
41126
41207
  <ng-container
41127
41208
  [ngTemplateOutlet]="groupTpl()"
@@ -49488,6 +49569,6 @@ i0.ɵɵngDeclareClassMetadata({
49488
49569
  }],
49489
49570
  ctorParameters: () => []
49490
49571
  });
49491
- export { AURA_PRESET, AccordionComponent, AccordionContentComponent, AccordionContext, AccordionHeaderComponent, AccordionPanelComponent, AnimateOnScrollDirective, AutoCompleteComponent, AutoFocusDirective, AvatarComponent, AvatarGroupComponent, BadgeComponent, BlockUiComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CascadeSelectComponent, ChartComponent, CheckboxComponent, ChipComponent, ColorPickerComponent, ConfirmDialog, ConfirmPopupComponent, ConfirmationService, ContextMenuComponent, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_REF, DataViewComponent, DatePickerComponent, DialogComponent, DividerComponent, DockComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, EditorComponent, FButtonDirective, FTemplateDirective, FieldsetComponent, FileUploadComponent, FloatLabelComponent, FluidComponent, GalleriaComponent, IconFieldComponent, IftaLabelComponent, ImageCompareComponent, ImageComponent, InplaceComponent, InputGroupAddonComponent, InputGroupComponent, InputIconComponent, InputMaskDirective, InputNumberComponent, InputOtpComponent, InputPasswordDirective, InputTextDirective, KeyFilterDirective, KnobComponent, LARA_PRESET, ListboxComponent, MegaMenuComponent, MenuComponent, MenubarComponent, MessageComponent, MessageService, MeterGroupComponent, MultiSelectComponent, NOIR_PRIMARY, NORA_PRESET, NgUIConfig, OrderListComponent, OrganizationChartComponent, OverlayBadgeComponent, OverlayStackService, PRESETS, PRESET_NAMES, PRIMARY_PALETTES, PaginatorComponent, PanelComponent, PanelMenuComponent, PasswordComponent, PickListComponent, PopoverComponent, ProgressSpinnerComponent, ProgressbarComponent, RadioButtonComponent, RatingComponent, RippleDirective, SURFACE_PALETTES, ScrollPanelComponent, ScrollTopComponent, ScrollerComponent, SelectButtonComponent, SelectComponent, SkeletonComponent, SliderComponent, SortIconComponent, SortableColumnDirective, SpeedDialComponent, SplitButtonComponent, SplitterComponent, SplitterPanelComponent, StepsComponent, StyleClassDirective, TabComponent, TabListComponent, TabPanelComponent, TabPanelsComponent, TableComponent, TabsComponent, TabsContext, TagComponent, TerminalComponent, TextareaDirective, TieredMenuComponent, TimelineComponent, ToastComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeSelectComponent, TreeTableComponent, TreeTableService, TreeTableTogglerComponent, UiIconComponent, applyDarkSemantics, applyLightSemantics, applyPreset, applyPrimaryPalette, applySurfacePalette, applyTheme, attachOverlayPosition, buildBootstrapPreset, computeOverlayPlacement, overlayPlacementStyle, overlayPosition, provideNgUI };
49572
+ export { AURA_PRESET, AccordionComponent, AccordionContentComponent, AccordionContext, AccordionHeaderComponent, AccordionPanelComponent, AnimateOnScrollDirective, AutoCompleteComponent, AutoFocusDirective, AvatarComponent, AvatarGroupComponent, BadgeComponent, BlockUiComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CarouselComponent, CascadeSelectComponent, ChartComponent, CheckboxComponent, ChipComponent, ColorPickerComponent, ConfirmDialog, ConfirmPopupComponent, ConfirmationService, ContextMenuComponent, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_REF, DataViewComponent, DatePickerComponent, DialogComponent, DividerComponent, DockComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, EditorComponent, FButtonDirective, FTemplateDirective, FieldsetComponent, FileUploadComponent, FloatLabelComponent, FluidComponent, GalleriaComponent, IconFieldComponent, IftaLabelComponent, ImageCompareComponent, ImageComponent, InplaceComponent, InputGroupAddonComponent, InputGroupComponent, InputIconComponent, InputMaskDirective, InputNumberComponent, InputOtpComponent, InputPasswordDirective, InputTextDirective, KeyFilterDirective, KnobComponent, LARA_PRESET, ListboxComponent, MegaMenuComponent, MenuComponent, MenubarComponent, MessageComponent, MessageService, MeterGroupComponent, MultiSelectComponent, NOIR_PRIMARY, NORA_PRESET, NgUIConfig, OrderListComponent, OrganizationChartComponent, OverflowTitleDirective, OverlayBadgeComponent, OverlayStackService, PRESETS, PRESET_NAMES, PRIMARY_PALETTES, PaginatorComponent, PanelComponent, PanelMenuComponent, PasswordComponent, PickListComponent, PopoverComponent, ProgressSpinnerComponent, ProgressbarComponent, RadioButtonComponent, RatingComponent, RippleDirective, SURFACE_PALETTES, ScrollPanelComponent, ScrollTopComponent, ScrollerComponent, SelectButtonComponent, SelectComponent, SkeletonComponent, SliderComponent, SortIconComponent, SortableColumnDirective, SpeedDialComponent, SplitButtonComponent, SplitterComponent, SplitterPanelComponent, StepsComponent, StyleClassDirective, TabComponent, TabListComponent, TabPanelComponent, TabPanelsComponent, TableComponent, TabsComponent, TabsContext, TagComponent, TerminalComponent, TextareaDirective, TieredMenuComponent, TimelineComponent, ToastComponent, ToggleButtonComponent, ToggleSwitchComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeSelectComponent, TreeTableComponent, TreeTableService, TreeTableTogglerComponent, UiIconComponent, applyDarkSemantics, applyLightSemantics, applyPreset, applyPrimaryPalette, applySurfacePalette, applyTheme, attachOverlayPosition, buildBootstrapPreset, computeOverlayPlacement, overlayPlacementStyle, overlayPosition, provideNgUI };
49492
49573
 
49493
49574
  //# sourceMappingURL=flusys-ng-ui.mjs.map