@kris701/ez-ui 1.3.5 → 1.3.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.
@@ -2466,9 +2466,10 @@ const compressImage = async (file, quality, maxHeight, maxWidth, convertSize) =>
2466
2466
  };
2467
2467
 
2468
2468
  class EzUIMenuBarSubDataList {
2469
+ menuItemTemplate;
2469
2470
  subdatalist = [];
2470
2471
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBarSubDataList, deps: [], target: i0.ɵɵFactoryTarget.Component });
2471
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBarSubDataList, isStandalone: true, selector: "tui-data-list[subdatalist]", inputs: { subdatalist: "subdatalist" }, ngImport: i0, template: `
2472
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBarSubDataList, isStandalone: true, selector: "tui-data-list[subdatalist]", inputs: { menuItemTemplate: "menuItemTemplate", subdatalist: "subdatalist" }, ngImport: i0, template: `
2472
2473
  @for(item of subdatalist; track $index){
2473
2474
  @if(item.items){
2474
2475
  <button
@@ -2483,7 +2484,12 @@ class EzUIMenuBarSubDataList {
2483
2484
  tuiDropdownSided="true"
2484
2485
  [style]="item.style"
2485
2486
  >
2486
- {{item.label}}
2487
+ @if(menuItemTemplate){
2488
+ <ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2489
+ }
2490
+ @else {
2491
+ {{item.label}}
2492
+ }
2487
2493
  </button>
2488
2494
 
2489
2495
  <ng-template #dropdownContent>
@@ -2502,15 +2508,21 @@ class EzUIMenuBarSubDataList {
2502
2508
  (click)="item.command()"
2503
2509
  [style]="item.style"
2504
2510
  >
2505
- {{item.label}}
2511
+ @if(menuItemTemplate){
2512
+ <ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2513
+ }
2514
+ @else {
2515
+ {{item.label}}
2516
+ }
2506
2517
  </button>
2507
2518
  }
2508
2519
  }
2509
- `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
2520
+ `, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["menuItemTemplate", "subdatalist"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
2510
2521
  }
2511
2522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBarSubDataList, decorators: [{
2512
2523
  type: Component,
2513
2524
  args: [{ selector: 'tui-data-list[subdatalist]', standalone: true, imports: [
2525
+ CommonModule,
2514
2526
  TuiDropdown,
2515
2527
  TuiOption,
2516
2528
  TuiChevron
@@ -2529,7 +2541,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
2529
2541
  tuiDropdownSided="true"
2530
2542
  [style]="item.style"
2531
2543
  >
2532
- {{item.label}}
2544
+ @if(menuItemTemplate){
2545
+ <ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2546
+ }
2547
+ @else {
2548
+ {{item.label}}
2549
+ }
2533
2550
  </button>
2534
2551
 
2535
2552
  <ng-template #dropdownContent>
@@ -2548,15 +2565,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
2548
2565
  (click)="item.command()"
2549
2566
  [style]="item.style"
2550
2567
  >
2551
- {{item.label}}
2568
+ @if(menuItemTemplate){
2569
+ <ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2570
+ }
2571
+ @else {
2572
+ {{item.label}}
2573
+ }
2552
2574
  </button>
2553
2575
  }
2554
2576
  }
2555
2577
  `, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
2556
- }], propDecorators: { subdatalist: [{
2578
+ }], propDecorators: { menuItemTemplate: [{
2579
+ type: Input
2580
+ }], subdatalist: [{
2557
2581
  type: Input
2558
2582
  }] } });
2559
2583
  class EzUIMenuBar {
2584
+ itemTemplate;
2585
+ menuItemTemplate;
2560
2586
  items = [];
2561
2587
  ngOnChanges(changes) {
2562
2588
  if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
@@ -2564,7 +2590,7 @@ class EzUIMenuBar {
2564
2590
  }
2565
2591
  }
2566
2592
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
2567
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBar, isStandalone: true, selector: "ezui-menubar", inputs: { items: "items" }, usesOnChanges: true, ngImport: i0, template: `
2593
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMenuBar, isStandalone: true, selector: "ezui-menubar", inputs: { items: "items" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "menuItemTemplate", first: true, predicate: ["menuItemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
2568
2594
  <div tuiGroup class="group" [collapsed]="true">
2569
2595
  @for(item of items; track $index){
2570
2596
  @if(item.items){
@@ -2581,13 +2607,19 @@ class EzUIMenuBar {
2581
2607
  tuiDropdownLimitWidth="fixed"
2582
2608
  [style]="item.style"
2583
2609
  >
2584
- {{item.label}}
2610
+ @if(itemTemplate){
2611
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2612
+ }
2613
+ @else {
2614
+ {{item.label}}
2615
+ }
2585
2616
  </button>
2586
2617
 
2587
2618
  <ng-template #dropdownContent>
2588
2619
  <tui-data-list
2589
2620
  class="subdatalist"
2590
- [subdatalist]="item.items">
2621
+ [subdatalist]="item.items"
2622
+ [menuItemTemplate]="menuItemTemplate">
2591
2623
  </tui-data-list>
2592
2624
  </ng-template>
2593
2625
  }
@@ -2602,12 +2634,17 @@ class EzUIMenuBar {
2602
2634
  (click)="item.command()"
2603
2635
  [style]="item.style"
2604
2636
  >
2605
- {{item.label}}
2637
+ @if(itemTemplate){
2638
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2639
+ }
2640
+ @else {
2641
+ {{item.label}}
2642
+ }
2606
2643
  </button>
2607
2644
  }
2608
2645
  }
2609
2646
  </div>
2610
- `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["subdatalist"] }] });
2647
+ `, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: EzUIMenuBarSubDataList, selector: "tui-data-list[subdatalist]", inputs: ["menuItemTemplate", "subdatalist"] }] });
2611
2648
  }
2612
2649
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, decorators: [{
2613
2650
  type: Component,
@@ -2636,13 +2673,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
2636
2673
  tuiDropdownLimitWidth="fixed"
2637
2674
  [style]="item.style"
2638
2675
  >
2639
- {{item.label}}
2676
+ @if(itemTemplate){
2677
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2678
+ }
2679
+ @else {
2680
+ {{item.label}}
2681
+ }
2640
2682
  </button>
2641
2683
 
2642
2684
  <ng-template #dropdownContent>
2643
2685
  <tui-data-list
2644
2686
  class="subdatalist"
2645
- [subdatalist]="item.items">
2687
+ [subdatalist]="item.items"
2688
+ [menuItemTemplate]="menuItemTemplate">
2646
2689
  </tui-data-list>
2647
2690
  </ng-template>
2648
2691
  }
@@ -2657,13 +2700,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
2657
2700
  (click)="item.command()"
2658
2701
  [style]="item.style"
2659
2702
  >
2660
- {{item.label}}
2703
+ @if(itemTemplate){
2704
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
2705
+ }
2706
+ @else {
2707
+ {{item.label}}
2708
+ }
2661
2709
  </button>
2662
2710
  }
2663
2711
  }
2664
2712
  </div>
2665
2713
  `, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"] }]
2666
- }], propDecorators: { items: [{
2714
+ }], propDecorators: { itemTemplate: [{
2715
+ type: ContentChild,
2716
+ args: ['itemTemplate', { static: false }]
2717
+ }], menuItemTemplate: [{
2718
+ type: ContentChild,
2719
+ args: ['menuItemTemplate', { static: false }]
2720
+ }], items: [{
2667
2721
  type: Input
2668
2722
  }] } });
2669
2723
 
@@ -3407,9 +3461,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3407
3461
  }] } });
3408
3462
 
3409
3463
  class EzUIPopoutMenuSubDataList {
3464
+ itemTemplate;
3410
3465
  popsubdatalist = [];
3411
3466
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenuSubDataList, deps: [], target: i0.ɵɵFactoryTarget.Component });
3412
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIPopoutMenuSubDataList, isStandalone: true, selector: "tui-data-list[popsubdatalist]", inputs: { popsubdatalist: "popsubdatalist" }, ngImport: i0, template: `
3467
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIPopoutMenuSubDataList, isStandalone: true, selector: "tui-data-list[popsubdatalist]", inputs: { itemTemplate: "itemTemplate", popsubdatalist: "popsubdatalist" }, ngImport: i0, template: `
3413
3468
  @for(item of popsubdatalist; track $index){
3414
3469
  @if(item.items){
3415
3470
  <button
@@ -3424,14 +3479,20 @@ class EzUIPopoutMenuSubDataList {
3424
3479
  tuiDropdownSided="true"
3425
3480
  [style]="item.style"
3426
3481
  >
3427
- {{item.label}}
3482
+ @if(itemTemplate){
3483
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
3484
+ }
3485
+ @else {
3486
+ {{item.label}}
3487
+ }
3428
3488
  </button>
3429
3489
 
3430
3490
  <ng-template #dropdownContent>
3431
3491
  <div class="popdropdown">
3432
3492
  <tui-data-list
3433
3493
  class="popsubdatalist"
3434
- [popsubdatalist]="item.items">
3494
+ [popsubdatalist]="item.items"
3495
+ [itemTemplate]="itemTemplate">
3435
3496
  </tui-data-list>
3436
3497
  </div>
3437
3498
  </ng-template>
@@ -3445,15 +3506,21 @@ class EzUIPopoutMenuSubDataList {
3445
3506
  (click)="item.command()"
3446
3507
  [style]="item.style"
3447
3508
  >
3448
- {{item.label}}
3509
+ @if(itemTemplate){
3510
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
3511
+ }
3512
+ @else {
3513
+ {{item.label}}
3514
+ }
3449
3515
  </button>
3450
3516
  }
3451
3517
  }
3452
- `, isInline: true, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["popsubdatalist"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
3518
+ `, isInline: true, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"], dependencies: [{ kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i3$1.TuiDropdownPositionSided, selector: "[tuiDropdownSided]", inputs: ["tuiDropdownSided", "tuiDropdownSidedOffset"] }, { kind: "directive", type: TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }] });
3453
3519
  }
3454
3520
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenuSubDataList, decorators: [{
3455
3521
  type: Component,
3456
3522
  args: [{ selector: 'tui-data-list[popsubdatalist]', standalone: true, imports: [
3523
+ CommonModule,
3457
3524
  TuiDropdown,
3458
3525
  TuiOption,
3459
3526
  TuiChevron
@@ -3472,14 +3539,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3472
3539
  tuiDropdownSided="true"
3473
3540
  [style]="item.style"
3474
3541
  >
3475
- {{item.label}}
3542
+ @if(itemTemplate){
3543
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
3544
+ }
3545
+ @else {
3546
+ {{item.label}}
3547
+ }
3476
3548
  </button>
3477
3549
 
3478
3550
  <ng-template #dropdownContent>
3479
3551
  <div class="popdropdown">
3480
3552
  <tui-data-list
3481
3553
  class="popsubdatalist"
3482
- [popsubdatalist]="item.items">
3554
+ [popsubdatalist]="item.items"
3555
+ [itemTemplate]="itemTemplate">
3483
3556
  </tui-data-list>
3484
3557
  </div>
3485
3558
  </ng-template>
@@ -3493,15 +3566,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3493
3566
  (click)="item.command()"
3494
3567
  [style]="item.style"
3495
3568
  >
3496
- {{item.label}}
3569
+ @if(itemTemplate){
3570
+ <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
3571
+ }
3572
+ @else {
3573
+ {{item.label}}
3574
+ }
3497
3575
  </button>
3498
3576
  }
3499
3577
  }
3500
3578
  `, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
3501
- }], propDecorators: { popsubdatalist: [{
3579
+ }], propDecorators: { itemTemplate: [{
3580
+ type: Input
3581
+ }], popsubdatalist: [{
3502
3582
  type: Input
3503
3583
  }] } });
3504
3584
  class EzUIPopoutMenu {
3585
+ itemTemplate;
3505
3586
  items = [];
3506
3587
  dropdownOpen = signal(false, /* @ts-ignore */
3507
3588
  ...(ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []));
@@ -3515,7 +3596,7 @@ class EzUIPopoutMenu {
3515
3596
  }
3516
3597
  }
3517
3598
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
3518
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIPopoutMenu, isStandalone: true, selector: "ezui-popoutmenu", inputs: { items: "items", icon: "icon", label: "label", size: "size", appearance: "appearance" }, usesOnChanges: true, ngImport: i0, template: `
3599
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: EzUIPopoutMenu, isStandalone: true, selector: "ezui-popoutmenu", inputs: { items: "items", icon: "icon", label: "label", size: "size", appearance: "appearance" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
3519
3600
  <button
3520
3601
  [iconStart]="icon"
3521
3602
  tuiButton
@@ -3531,12 +3612,13 @@ class EzUIPopoutMenu {
3531
3612
  <div class="popdropdown">
3532
3613
  <tui-data-list
3533
3614
  class="popsubdatalist"
3534
- [popsubdatalist]="items">
3615
+ [popsubdatalist]="items"
3616
+ [itemTemplate]="itemTemplate">
3535
3617
  </tui-data-list>
3536
3618
  </div>
3537
3619
  </ng-template>
3538
3620
  </button>
3539
- `, isInline: true, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["popsubdatalist"] }] });
3621
+ `, isInline: true, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i3$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i3$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownAuto],[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist"] }] });
3540
3622
  }
3541
3623
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, decorators: [{
3542
3624
  type: Component,
@@ -3562,13 +3644,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
3562
3644
  <div class="popdropdown">
3563
3645
  <tui-data-list
3564
3646
  class="popsubdatalist"
3565
- [popsubdatalist]="items">
3647
+ [popsubdatalist]="items"
3648
+ [itemTemplate]="itemTemplate">
3566
3649
  </tui-data-list>
3567
3650
  </div>
3568
3651
  </ng-template>
3569
3652
  </button>
3570
3653
  `, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}\n"] }]
3571
- }], propDecorators: { items: [{
3654
+ }], propDecorators: { itemTemplate: [{
3655
+ type: ContentChild,
3656
+ args: ['itemTemplate', { static: false }]
3657
+ }], items: [{
3572
3658
  type: Input
3573
3659
  }], icon: [{
3574
3660
  type: Input