@kris701/ez-ui 1.3.12 → 1.3.14
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/fesm2022/kris701-ez-ui.mjs +329 -281
- package/fesm2022/kris701-ez-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/kris701-ez-ui.d.ts +7 -3
|
@@ -2485,143 +2485,21 @@ class EzUIMenuBarSubDataList {
|
|
|
2485
2485
|
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: `
|
|
2486
2486
|
@for(item of subdatalist; track $index){
|
|
2487
2487
|
@if(item.items){
|
|
2488
|
-
|
|
2489
|
-
class="subdatalistitem"
|
|
2490
|
-
tuiOption
|
|
2491
|
-
tuiChevron
|
|
2492
|
-
[iconStart]="item.icon"
|
|
2493
|
-
[disabled]="item.disabled"
|
|
2494
|
-
[tuiDropdown]="dropdownContent"
|
|
2495
|
-
[(tuiDropdownOpen)]="item.expanded"
|
|
2496
|
-
tuiDropdownLimitWidth="fixed"
|
|
2497
|
-
tuiDropdownSided="true"
|
|
2498
|
-
[style]="item.style"
|
|
2499
|
-
>
|
|
2500
|
-
@if(menuItemTemplate){
|
|
2501
|
-
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2502
|
-
}
|
|
2503
|
-
@else {
|
|
2504
|
-
{{item.label}}
|
|
2505
|
-
}
|
|
2506
|
-
</button>
|
|
2507
|
-
|
|
2508
|
-
<ng-template #dropdownContent>
|
|
2509
|
-
<tui-data-list
|
|
2510
|
-
class="subdatalist"
|
|
2511
|
-
[subdatalist]="item.items">
|
|
2512
|
-
</tui-data-list>
|
|
2513
|
-
</ng-template>
|
|
2514
|
-
}
|
|
2515
|
-
@else {
|
|
2516
|
-
<button
|
|
2517
|
-
class="subdatalistitem"
|
|
2518
|
-
tuiOption
|
|
2519
|
-
[iconStart]="item.icon"
|
|
2520
|
-
[disabled]="item.disabled"
|
|
2521
|
-
(click)="item.command()"
|
|
2522
|
-
[style]="item.style"
|
|
2523
|
-
>
|
|
2524
|
-
@if(menuItemTemplate){
|
|
2525
|
-
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2526
|
-
}
|
|
2527
|
-
@else {
|
|
2528
|
-
{{item.label}}
|
|
2529
|
-
}
|
|
2530
|
-
</button>
|
|
2531
|
-
}
|
|
2532
|
-
}
|
|
2533
|
-
`, 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"] }] });
|
|
2534
|
-
}
|
|
2535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBarSubDataList, decorators: [{
|
|
2536
|
-
type: Component,
|
|
2537
|
-
args: [{ selector: 'tui-data-list[subdatalist]', standalone: true, imports: [
|
|
2538
|
-
CommonModule,
|
|
2539
|
-
TuiDropdown,
|
|
2540
|
-
TuiOption,
|
|
2541
|
-
TuiChevron
|
|
2542
|
-
], template: `
|
|
2543
|
-
@for(item of subdatalist; track $index){
|
|
2544
|
-
@if(item.items){
|
|
2545
|
-
<button
|
|
2546
|
-
class="subdatalistitem"
|
|
2547
|
-
tuiOption
|
|
2548
|
-
tuiChevron
|
|
2549
|
-
[iconStart]="item.icon"
|
|
2550
|
-
[disabled]="item.disabled"
|
|
2551
|
-
[tuiDropdown]="dropdownContent"
|
|
2552
|
-
[(tuiDropdownOpen)]="item.expanded"
|
|
2553
|
-
tuiDropdownLimitWidth="fixed"
|
|
2554
|
-
tuiDropdownSided="true"
|
|
2555
|
-
[style]="item.style"
|
|
2556
|
-
>
|
|
2557
|
-
@if(menuItemTemplate){
|
|
2558
|
-
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2559
|
-
}
|
|
2560
|
-
@else {
|
|
2561
|
-
{{item.label}}
|
|
2562
|
-
}
|
|
2563
|
-
</button>
|
|
2564
|
-
|
|
2565
|
-
<ng-template #dropdownContent>
|
|
2566
|
-
<tui-data-list
|
|
2567
|
-
class="subdatalist"
|
|
2568
|
-
[subdatalist]="item.items">
|
|
2569
|
-
</tui-data-list>
|
|
2570
|
-
</ng-template>
|
|
2571
|
-
}
|
|
2572
|
-
@else {
|
|
2573
|
-
<button
|
|
2574
|
-
class="subdatalistitem"
|
|
2575
|
-
tuiOption
|
|
2576
|
-
[iconStart]="item.icon"
|
|
2577
|
-
[disabled]="item.disabled"
|
|
2578
|
-
(click)="item.command()"
|
|
2579
|
-
[style]="item.style"
|
|
2580
|
-
>
|
|
2581
|
-
@if(menuItemTemplate){
|
|
2582
|
-
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2583
|
-
}
|
|
2584
|
-
@else {
|
|
2585
|
-
{{item.label}}
|
|
2586
|
-
}
|
|
2587
|
-
</button>
|
|
2588
|
-
}
|
|
2589
|
-
}
|
|
2590
|
-
`, styles: [".subdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
|
|
2591
|
-
}], propDecorators: { menuItemTemplate: [{
|
|
2592
|
-
type: Input
|
|
2593
|
-
}], subdatalist: [{
|
|
2594
|
-
type: Input
|
|
2595
|
-
}] } });
|
|
2596
|
-
class EzUIMenuBar {
|
|
2597
|
-
itemTemplate;
|
|
2598
|
-
menuItemTemplate;
|
|
2599
|
-
items = [];
|
|
2600
|
-
ngOnChanges(changes) {
|
|
2601
|
-
if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
|
|
2602
|
-
this.items = changes['items'].currentValue;
|
|
2603
|
-
}
|
|
2604
|
-
}
|
|
2605
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2606
|
-
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: `
|
|
2607
|
-
<div tuiGroup class="group" [collapsed]="true">
|
|
2608
|
-
@for(item of items; track $index){
|
|
2609
|
-
@if(item.items){
|
|
2488
|
+
@if(!item.hidden){
|
|
2610
2489
|
<button
|
|
2611
|
-
|
|
2490
|
+
class="subdatalistitem"
|
|
2491
|
+
tuiOption
|
|
2612
2492
|
tuiChevron
|
|
2613
|
-
size="s"
|
|
2614
|
-
appearance="outline"
|
|
2615
|
-
type="button"
|
|
2616
2493
|
[iconStart]="item.icon"
|
|
2617
2494
|
[disabled]="item.disabled"
|
|
2618
2495
|
[tuiDropdown]="dropdownContent"
|
|
2619
2496
|
[(tuiDropdownOpen)]="item.expanded"
|
|
2620
|
-
tuiDropdownLimitWidth="
|
|
2497
|
+
tuiDropdownLimitWidth="auto"
|
|
2498
|
+
tuiDropdownSided="true"
|
|
2621
2499
|
[style]="item.style"
|
|
2622
2500
|
>
|
|
2623
|
-
@if(
|
|
2624
|
-
<ng-container [ngTemplateOutlet]="
|
|
2501
|
+
@if(menuItemTemplate){
|
|
2502
|
+
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2625
2503
|
}
|
|
2626
2504
|
@else {
|
|
2627
2505
|
{{item.label}}
|
|
@@ -2631,24 +2509,23 @@ class EzUIMenuBar {
|
|
|
2631
2509
|
<ng-template #dropdownContent>
|
|
2632
2510
|
<tui-data-list
|
|
2633
2511
|
class="subdatalist"
|
|
2634
|
-
[subdatalist]="item.items"
|
|
2635
|
-
[menuItemTemplate]="menuItemTemplate">
|
|
2512
|
+
[subdatalist]="item.items">
|
|
2636
2513
|
</tui-data-list>
|
|
2637
2514
|
</ng-template>
|
|
2638
2515
|
}
|
|
2639
|
-
|
|
2516
|
+
}
|
|
2517
|
+
@else {
|
|
2518
|
+
@if(!item.hidden){
|
|
2640
2519
|
<button
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
tuiButton
|
|
2644
|
-
type="button"
|
|
2520
|
+
class="subdatalistitem"
|
|
2521
|
+
tuiOption
|
|
2645
2522
|
[iconStart]="item.icon"
|
|
2646
2523
|
[disabled]="item.disabled"
|
|
2647
|
-
(click)="item.command()"
|
|
2524
|
+
(click)="item.command(item)"
|
|
2648
2525
|
[style]="item.style"
|
|
2649
2526
|
>
|
|
2650
|
-
@if(
|
|
2651
|
-
<ng-container [ngTemplateOutlet]="
|
|
2527
|
+
@if(menuItemTemplate){
|
|
2528
|
+
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2652
2529
|
}
|
|
2653
2530
|
@else {
|
|
2654
2531
|
{{item.label}}
|
|
@@ -2656,38 +2533,34 @@ class EzUIMenuBar {
|
|
|
2656
2533
|
</button>
|
|
2657
2534
|
}
|
|
2658
2535
|
}
|
|
2659
|
-
|
|
2660
|
-
`, isInline: true, styles: [".
|
|
2536
|
+
}
|
|
2537
|
+
`, isInline: true, styles: [".subdatalist{display:flex;flex-direction:column;padding:10px}.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"] }] });
|
|
2661
2538
|
}
|
|
2662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type:
|
|
2539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBarSubDataList, decorators: [{
|
|
2663
2540
|
type: Component,
|
|
2664
|
-
args: [{ selector: '
|
|
2665
|
-
FormsModule,
|
|
2541
|
+
args: [{ selector: 'tui-data-list[subdatalist]', standalone: true, imports: [
|
|
2666
2542
|
CommonModule,
|
|
2667
|
-
TuiGroup,
|
|
2668
|
-
TuiButton,
|
|
2669
2543
|
TuiDropdown,
|
|
2670
|
-
|
|
2671
|
-
|
|
2544
|
+
TuiOption,
|
|
2545
|
+
TuiChevron
|
|
2672
2546
|
], template: `
|
|
2673
|
-
|
|
2674
|
-
@
|
|
2675
|
-
@if(item.
|
|
2547
|
+
@for(item of subdatalist; track $index){
|
|
2548
|
+
@if(item.items){
|
|
2549
|
+
@if(!item.hidden){
|
|
2676
2550
|
<button
|
|
2677
|
-
|
|
2551
|
+
class="subdatalistitem"
|
|
2552
|
+
tuiOption
|
|
2678
2553
|
tuiChevron
|
|
2679
|
-
size="s"
|
|
2680
|
-
appearance="outline"
|
|
2681
|
-
type="button"
|
|
2682
2554
|
[iconStart]="item.icon"
|
|
2683
2555
|
[disabled]="item.disabled"
|
|
2684
2556
|
[tuiDropdown]="dropdownContent"
|
|
2685
2557
|
[(tuiDropdownOpen)]="item.expanded"
|
|
2686
|
-
tuiDropdownLimitWidth="
|
|
2558
|
+
tuiDropdownLimitWidth="auto"
|
|
2559
|
+
tuiDropdownSided="true"
|
|
2687
2560
|
[style]="item.style"
|
|
2688
2561
|
>
|
|
2689
|
-
@if(
|
|
2690
|
-
<ng-container [ngTemplateOutlet]="
|
|
2562
|
+
@if(menuItemTemplate){
|
|
2563
|
+
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2691
2564
|
}
|
|
2692
2565
|
@else {
|
|
2693
2566
|
{{item.label}}
|
|
@@ -2697,24 +2570,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2697
2570
|
<ng-template #dropdownContent>
|
|
2698
2571
|
<tui-data-list
|
|
2699
2572
|
class="subdatalist"
|
|
2700
|
-
[subdatalist]="item.items"
|
|
2701
|
-
[menuItemTemplate]="menuItemTemplate">
|
|
2573
|
+
[subdatalist]="item.items">
|
|
2702
2574
|
</tui-data-list>
|
|
2703
2575
|
</ng-template>
|
|
2704
2576
|
}
|
|
2705
|
-
|
|
2577
|
+
}
|
|
2578
|
+
@else {
|
|
2579
|
+
@if(!item.hidden){
|
|
2706
2580
|
<button
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
tuiButton
|
|
2710
|
-
type="button"
|
|
2581
|
+
class="subdatalistitem"
|
|
2582
|
+
tuiOption
|
|
2711
2583
|
[iconStart]="item.icon"
|
|
2712
2584
|
[disabled]="item.disabled"
|
|
2713
|
-
(click)="item.command()"
|
|
2585
|
+
(click)="item.command(item)"
|
|
2714
2586
|
[style]="item.style"
|
|
2715
2587
|
>
|
|
2716
|
-
@if(
|
|
2717
|
-
<ng-container [ngTemplateOutlet]="
|
|
2588
|
+
@if(menuItemTemplate){
|
|
2589
|
+
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2718
2590
|
}
|
|
2719
2591
|
@else {
|
|
2720
2592
|
{{item.label}}
|
|
@@ -2722,8 +2594,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
2722
2594
|
</button>
|
|
2723
2595
|
}
|
|
2724
2596
|
}
|
|
2597
|
+
}
|
|
2598
|
+
`, styles: [".subdatalist{display:flex;flex-direction:column;padding:10px}.subdatalistitem{padding:0 10px!important}\n"] }]
|
|
2599
|
+
}], propDecorators: { menuItemTemplate: [{
|
|
2600
|
+
type: Input
|
|
2601
|
+
}], subdatalist: [{
|
|
2602
|
+
type: Input
|
|
2603
|
+
}] } });
|
|
2604
|
+
class EzUIMenuBar {
|
|
2605
|
+
itemTemplate;
|
|
2606
|
+
menuItemTemplate;
|
|
2607
|
+
items = [];
|
|
2608
|
+
ngOnChanges(changes) {
|
|
2609
|
+
if (changes['items'] && changes['items'].currentValue != changes['items'].previousValue) {
|
|
2610
|
+
this.items = changes['items'].currentValue;
|
|
2611
|
+
}
|
|
2612
|
+
}
|
|
2613
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2614
|
+
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: `
|
|
2615
|
+
<div tuiGroup class="group" [collapsed]="true">
|
|
2616
|
+
@for(item of items; track $index){
|
|
2617
|
+
@if(item.items){
|
|
2618
|
+
@if(!item.hidden){
|
|
2619
|
+
<button
|
|
2620
|
+
tuiButton
|
|
2621
|
+
tuiChevron
|
|
2622
|
+
size="s"
|
|
2623
|
+
appearance="outline"
|
|
2624
|
+
type="button"
|
|
2625
|
+
[iconStart]="item.icon"
|
|
2626
|
+
[disabled]="item.disabled"
|
|
2627
|
+
[tuiDropdown]="dropdownContent"
|
|
2628
|
+
[(tuiDropdownOpen)]="item.expanded"
|
|
2629
|
+
tuiDropdownLimitWidth="auto"
|
|
2630
|
+
[style]="item.style"
|
|
2631
|
+
>
|
|
2632
|
+
@if(itemTemplate){
|
|
2633
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2634
|
+
}
|
|
2635
|
+
@else {
|
|
2636
|
+
{{item.label}}
|
|
2637
|
+
}
|
|
2638
|
+
</button>
|
|
2639
|
+
|
|
2640
|
+
<ng-template #dropdownContent>
|
|
2641
|
+
<tui-data-list
|
|
2642
|
+
class="subdatalist"
|
|
2643
|
+
[subdatalist]="item.items"
|
|
2644
|
+
[menuItemTemplate]="menuItemTemplate">
|
|
2645
|
+
</tui-data-list>
|
|
2646
|
+
</ng-template>
|
|
2647
|
+
}
|
|
2648
|
+
}
|
|
2649
|
+
@else {
|
|
2650
|
+
@if(!item.hidden){
|
|
2651
|
+
<button
|
|
2652
|
+
appearance="outline"
|
|
2653
|
+
size="s"
|
|
2654
|
+
tuiButton
|
|
2655
|
+
type="button"
|
|
2656
|
+
[iconStart]="item.icon"
|
|
2657
|
+
[disabled]="item.disabled"
|
|
2658
|
+
(click)="item.command(item)"
|
|
2659
|
+
[style]="item.style"
|
|
2660
|
+
>
|
|
2661
|
+
@if(itemTemplate){
|
|
2662
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2663
|
+
}
|
|
2664
|
+
@else {
|
|
2665
|
+
{{item.label}}
|
|
2666
|
+
}
|
|
2667
|
+
</button>
|
|
2668
|
+
}
|
|
2669
|
+
}
|
|
2670
|
+
}
|
|
2725
2671
|
</div>
|
|
2726
|
-
`, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column}\n"] }]
|
|
2672
|
+
`, isInline: true, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column;padding:10px}\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"] }] });
|
|
2673
|
+
}
|
|
2674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMenuBar, decorators: [{
|
|
2675
|
+
type: Component,
|
|
2676
|
+
args: [{ selector: 'ezui-menubar', standalone: true, imports: [
|
|
2677
|
+
FormsModule,
|
|
2678
|
+
CommonModule,
|
|
2679
|
+
TuiGroup,
|
|
2680
|
+
TuiButton,
|
|
2681
|
+
TuiDropdown,
|
|
2682
|
+
TuiChevron,
|
|
2683
|
+
EzUIMenuBarSubDataList
|
|
2684
|
+
], template: `
|
|
2685
|
+
<div tuiGroup class="group" [collapsed]="true">
|
|
2686
|
+
@for(item of items; track $index){
|
|
2687
|
+
@if(item.items){
|
|
2688
|
+
@if(!item.hidden){
|
|
2689
|
+
<button
|
|
2690
|
+
tuiButton
|
|
2691
|
+
tuiChevron
|
|
2692
|
+
size="s"
|
|
2693
|
+
appearance="outline"
|
|
2694
|
+
type="button"
|
|
2695
|
+
[iconStart]="item.icon"
|
|
2696
|
+
[disabled]="item.disabled"
|
|
2697
|
+
[tuiDropdown]="dropdownContent"
|
|
2698
|
+
[(tuiDropdownOpen)]="item.expanded"
|
|
2699
|
+
tuiDropdownLimitWidth="auto"
|
|
2700
|
+
[style]="item.style"
|
|
2701
|
+
>
|
|
2702
|
+
@if(itemTemplate){
|
|
2703
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2704
|
+
}
|
|
2705
|
+
@else {
|
|
2706
|
+
{{item.label}}
|
|
2707
|
+
}
|
|
2708
|
+
</button>
|
|
2709
|
+
|
|
2710
|
+
<ng-template #dropdownContent>
|
|
2711
|
+
<tui-data-list
|
|
2712
|
+
class="subdatalist"
|
|
2713
|
+
[subdatalist]="item.items"
|
|
2714
|
+
[menuItemTemplate]="menuItemTemplate">
|
|
2715
|
+
</tui-data-list>
|
|
2716
|
+
</ng-template>
|
|
2717
|
+
}
|
|
2718
|
+
}
|
|
2719
|
+
@else {
|
|
2720
|
+
@if(!item.hidden){
|
|
2721
|
+
<button
|
|
2722
|
+
appearance="outline"
|
|
2723
|
+
size="s"
|
|
2724
|
+
tuiButton
|
|
2725
|
+
type="button"
|
|
2726
|
+
[iconStart]="item.icon"
|
|
2727
|
+
[disabled]="item.disabled"
|
|
2728
|
+
(click)="item.command(item)"
|
|
2729
|
+
[style]="item.style"
|
|
2730
|
+
>
|
|
2731
|
+
@if(itemTemplate){
|
|
2732
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
2733
|
+
}
|
|
2734
|
+
@else {
|
|
2735
|
+
{{item.label}}
|
|
2736
|
+
}
|
|
2737
|
+
</button>
|
|
2738
|
+
}
|
|
2739
|
+
}
|
|
2740
|
+
}
|
|
2741
|
+
</div>
|
|
2742
|
+
`, styles: [".group{width:100%;white-space:nowrap}.subdatalist{display:flex;flex-direction:column;padding:10px}\n"] }]
|
|
2727
2743
|
}], propDecorators: { itemTemplate: [{
|
|
2728
2744
|
type: ContentChild,
|
|
2729
2745
|
args: ['itemTemplate', { static: false }]
|
|
@@ -2747,19 +2763,26 @@ class EzUIMarkdownEditor {
|
|
|
2747
2763
|
isFirst = true;
|
|
2748
2764
|
isEditing = signal(false, /* @ts-ignore */
|
|
2749
2765
|
...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
|
|
2766
|
+
additionalMenuBarItemsRoot = {
|
|
2767
|
+
icon: 'plus',
|
|
2768
|
+
items: [],
|
|
2769
|
+
hidden: true,
|
|
2770
|
+
style: 'border-bottom-right-radius: 0px !important;border-top-right-radius: 0px !important;'
|
|
2771
|
+
};
|
|
2772
|
+
additionalMenuBarItems = [];
|
|
2750
2773
|
items = signal([
|
|
2751
2774
|
{
|
|
2752
2775
|
icon: 'save',
|
|
2753
|
-
command: async () => await this.toggleEdit(true),
|
|
2776
|
+
command: async (e) => await this.toggleEdit(true),
|
|
2754
2777
|
style: 'border-bottom-left-radius: 0px !important;'
|
|
2755
2778
|
},
|
|
2756
2779
|
{
|
|
2757
2780
|
icon: 'x',
|
|
2758
|
-
command: async () => await this.toggleEdit(false)
|
|
2781
|
+
command: async (e) => await this.toggleEdit(false)
|
|
2759
2782
|
},
|
|
2760
2783
|
{
|
|
2761
2784
|
label: 'B',
|
|
2762
|
-
command: async () => {
|
|
2785
|
+
command: async (e) => {
|
|
2763
2786
|
if (this.editor) {
|
|
2764
2787
|
const editor = this.editor.nativeElement;
|
|
2765
2788
|
const start = editor.selectionStart;
|
|
@@ -2772,7 +2795,7 @@ class EzUIMarkdownEditor {
|
|
|
2772
2795
|
},
|
|
2773
2796
|
{
|
|
2774
2797
|
label: 'I',
|
|
2775
|
-
command: async () => {
|
|
2798
|
+
command: async (e) => {
|
|
2776
2799
|
if (this.editor) {
|
|
2777
2800
|
const editor = this.editor.nativeElement;
|
|
2778
2801
|
const start = editor.selectionStart;
|
|
@@ -2788,7 +2811,7 @@ class EzUIMarkdownEditor {
|
|
|
2788
2811
|
items: [
|
|
2789
2812
|
{
|
|
2790
2813
|
label: 'H1',
|
|
2791
|
-
command: async () => {
|
|
2814
|
+
command: async (e) => {
|
|
2792
2815
|
if (this.editor) {
|
|
2793
2816
|
const editor = this.editor.nativeElement;
|
|
2794
2817
|
const start = editor.selectionStart;
|
|
@@ -2801,7 +2824,7 @@ class EzUIMarkdownEditor {
|
|
|
2801
2824
|
},
|
|
2802
2825
|
{
|
|
2803
2826
|
label: 'H2',
|
|
2804
|
-
command: async () => {
|
|
2827
|
+
command: async (e) => {
|
|
2805
2828
|
if (this.editor) {
|
|
2806
2829
|
const editor = this.editor.nativeElement;
|
|
2807
2830
|
const start = editor.selectionStart;
|
|
@@ -2814,7 +2837,7 @@ class EzUIMarkdownEditor {
|
|
|
2814
2837
|
},
|
|
2815
2838
|
{
|
|
2816
2839
|
label: 'H3',
|
|
2817
|
-
command: async () => {
|
|
2840
|
+
command: async (e) => {
|
|
2818
2841
|
if (this.editor) {
|
|
2819
2842
|
const editor = this.editor.nativeElement;
|
|
2820
2843
|
const start = editor.selectionStart;
|
|
@@ -2829,7 +2852,7 @@ class EzUIMarkdownEditor {
|
|
|
2829
2852
|
},
|
|
2830
2853
|
{
|
|
2831
2854
|
icon: 'link',
|
|
2832
|
-
command: async () => {
|
|
2855
|
+
command: async (e) => {
|
|
2833
2856
|
if (this.editor) {
|
|
2834
2857
|
const editor = this.editor.nativeElement;
|
|
2835
2858
|
const start = editor.selectionStart;
|
|
@@ -2842,13 +2865,14 @@ class EzUIMarkdownEditor {
|
|
|
2842
2865
|
},
|
|
2843
2866
|
{
|
|
2844
2867
|
icon: 'image',
|
|
2845
|
-
command: async () => {
|
|
2868
|
+
command: async (e) => {
|
|
2846
2869
|
if (this.editor) {
|
|
2847
2870
|
this.fileUpload?.nativeElement.click();
|
|
2848
2871
|
}
|
|
2849
2872
|
},
|
|
2850
2873
|
style: 'border-bottom-right-radius: 0px !important;border-top-right-radius: 0px !important;'
|
|
2851
2874
|
},
|
|
2875
|
+
this.additionalMenuBarItemsRoot,
|
|
2852
2876
|
], /* @ts-ignore */
|
|
2853
2877
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
2854
2878
|
async onFileSelected(event) {
|
|
@@ -2908,6 +2932,14 @@ class EzUIMarkdownEditor {
|
|
|
2908
2932
|
}
|
|
2909
2933
|
}
|
|
2910
2934
|
}
|
|
2935
|
+
if (changes['additionalMenuBarItems']) {
|
|
2936
|
+
if (changes['additionalMenuBarItems'].currentValue != changes['additionalMenuBarItems'].previousValue) {
|
|
2937
|
+
this.additionalMenuBarItemsRoot.items = this.additionalMenuBarItems;
|
|
2938
|
+
this.additionalMenuBarItemsRoot.hidden =
|
|
2939
|
+
this.additionalMenuBarItems.length == 0 ||
|
|
2940
|
+
this.additionalMenuBarItems.filter(x => !x.hidden).length == 0;
|
|
2941
|
+
}
|
|
2942
|
+
}
|
|
2911
2943
|
}
|
|
2912
2944
|
async formatPreview() {
|
|
2913
2945
|
if (this.preview) {
|
|
@@ -2929,7 +2961,7 @@ class EzUIMarkdownEditor {
|
|
|
2929
2961
|
setTimeout(async () => await this.formatPreview(), 500);
|
|
2930
2962
|
}
|
|
2931
2963
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIMarkdownEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", slim: "slim", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
2964
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIMarkdownEditor, isStandalone: true, selector: "ezui-markdowneditor", inputs: { disabled: "disabled", slim: "slim", value: "value", additionalMenuBarItems: "additionalMenuBarItems" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "flex w-full" }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
2933
2965
|
@if(isEditing() && !disabled){
|
|
2934
2966
|
<div class="editor-container">
|
|
2935
2967
|
<div class="editor">
|
|
@@ -3051,6 +3083,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3051
3083
|
type: Input
|
|
3052
3084
|
}], valueChange: [{
|
|
3053
3085
|
type: Output
|
|
3086
|
+
}], additionalMenuBarItems: [{
|
|
3087
|
+
type: Input
|
|
3054
3088
|
}] } });
|
|
3055
3089
|
|
|
3056
3090
|
class EzUIMultiSelect {
|
|
@@ -3480,52 +3514,56 @@ class EzUIPopoutMenuSubDataList {
|
|
|
3480
3514
|
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: `
|
|
3481
3515
|
@for(item of popsubdatalist; track $index){
|
|
3482
3516
|
@if(item.items){
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
{
|
|
3500
|
-
|
|
3501
|
-
|
|
3517
|
+
@if(!item.hidden){
|
|
3518
|
+
<button
|
|
3519
|
+
class="subdatalistitem"
|
|
3520
|
+
tuiOption
|
|
3521
|
+
tuiChevron
|
|
3522
|
+
[iconStart]="item.icon"
|
|
3523
|
+
[disabled]="item.disabled"
|
|
3524
|
+
[tuiDropdown]="dropdownContent"
|
|
3525
|
+
[(tuiDropdownOpen)]="item.expanded"
|
|
3526
|
+
tuiDropdownLimitWidth="auto"
|
|
3527
|
+
tuiDropdownSided="true"
|
|
3528
|
+
[style]="item.style"
|
|
3529
|
+
>
|
|
3530
|
+
@if(itemTemplate){
|
|
3531
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
3532
|
+
}
|
|
3533
|
+
@else {
|
|
3534
|
+
{{item.label}}
|
|
3535
|
+
}
|
|
3536
|
+
</button>
|
|
3502
3537
|
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3538
|
+
<ng-template #dropdownContent>
|
|
3539
|
+
<div class="popdropdown">
|
|
3540
|
+
<tui-data-list
|
|
3541
|
+
class="popsubdatalist"
|
|
3542
|
+
[popsubdatalist]="item.items"
|
|
3543
|
+
[itemTemplate]="itemTemplate">
|
|
3544
|
+
</tui-data-list>
|
|
3545
|
+
</div>
|
|
3546
|
+
</ng-template>
|
|
3547
|
+
}
|
|
3512
3548
|
}
|
|
3513
3549
|
@else {
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
{
|
|
3527
|
-
|
|
3528
|
-
|
|
3550
|
+
@if(!item.hidden){
|
|
3551
|
+
<button
|
|
3552
|
+
class="subdatalistitem"
|
|
3553
|
+
tuiOption
|
|
3554
|
+
[iconStart]="item.icon"
|
|
3555
|
+
[disabled]="item.disabled"
|
|
3556
|
+
(click)="item.command(item)"
|
|
3557
|
+
[style]="item.style"
|
|
3558
|
+
>
|
|
3559
|
+
@if(itemTemplate){
|
|
3560
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
3561
|
+
}
|
|
3562
|
+
@else {
|
|
3563
|
+
{{item.label}}
|
|
3564
|
+
}
|
|
3565
|
+
</button>
|
|
3566
|
+
}
|
|
3529
3567
|
}
|
|
3530
3568
|
}
|
|
3531
3569
|
`, 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"] }] });
|
|
@@ -3540,52 +3578,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3540
3578
|
], template: `
|
|
3541
3579
|
@for(item of popsubdatalist; track $index){
|
|
3542
3580
|
@if(item.items){
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3546
|
-
|
|
3547
|
-
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
{
|
|
3560
|
-
|
|
3561
|
-
|
|
3581
|
+
@if(!item.hidden){
|
|
3582
|
+
<button
|
|
3583
|
+
class="subdatalistitem"
|
|
3584
|
+
tuiOption
|
|
3585
|
+
tuiChevron
|
|
3586
|
+
[iconStart]="item.icon"
|
|
3587
|
+
[disabled]="item.disabled"
|
|
3588
|
+
[tuiDropdown]="dropdownContent"
|
|
3589
|
+
[(tuiDropdownOpen)]="item.expanded"
|
|
3590
|
+
tuiDropdownLimitWidth="auto"
|
|
3591
|
+
tuiDropdownSided="true"
|
|
3592
|
+
[style]="item.style"
|
|
3593
|
+
>
|
|
3594
|
+
@if(itemTemplate){
|
|
3595
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
3596
|
+
}
|
|
3597
|
+
@else {
|
|
3598
|
+
{{item.label}}
|
|
3599
|
+
}
|
|
3600
|
+
</button>
|
|
3562
3601
|
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3602
|
+
<ng-template #dropdownContent>
|
|
3603
|
+
<div class="popdropdown">
|
|
3604
|
+
<tui-data-list
|
|
3605
|
+
class="popsubdatalist"
|
|
3606
|
+
[popsubdatalist]="item.items"
|
|
3607
|
+
[itemTemplate]="itemTemplate">
|
|
3608
|
+
</tui-data-list>
|
|
3609
|
+
</div>
|
|
3610
|
+
</ng-template>
|
|
3611
|
+
}
|
|
3572
3612
|
}
|
|
3573
3613
|
@else {
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
{
|
|
3587
|
-
|
|
3588
|
-
|
|
3614
|
+
@if(!item.hidden){
|
|
3615
|
+
<button
|
|
3616
|
+
class="subdatalistitem"
|
|
3617
|
+
tuiOption
|
|
3618
|
+
[iconStart]="item.icon"
|
|
3619
|
+
[disabled]="item.disabled"
|
|
3620
|
+
(click)="item.command(item)"
|
|
3621
|
+
[style]="item.style"
|
|
3622
|
+
>
|
|
3623
|
+
@if(itemTemplate){
|
|
3624
|
+
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
|
|
3625
|
+
}
|
|
3626
|
+
@else {
|
|
3627
|
+
{{item.label}}
|
|
3628
|
+
}
|
|
3629
|
+
</button>
|
|
3630
|
+
}
|
|
3589
3631
|
}
|
|
3590
3632
|
}
|
|
3591
3633
|
`, styles: [".popdropdown{margin:10px}.popsubdatalist{display:flex;flex-direction:column}.subdatalistitem{padding:0 10px!important}\n"] }]
|
|
@@ -3619,6 +3661,7 @@ class EzUIPopoutMenu {
|
|
|
3619
3661
|
[appearance]="appearance"
|
|
3620
3662
|
[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
|
|
3621
3663
|
[tuiDropdown]="dropdownContent"
|
|
3664
|
+
tuiDropdownLimitWidth="auto"
|
|
3622
3665
|
[(tuiDropdownOpen)]="dropdownOpen"
|
|
3623
3666
|
(click)="onMenuOpen.emit(dropdownOpen())"
|
|
3624
3667
|
>
|
|
@@ -3633,7 +3676,7 @@ class EzUIPopoutMenu {
|
|
|
3633
3676
|
</div>
|
|
3634
3677
|
</ng-template>
|
|
3635
3678
|
</button>
|
|
3636
|
-
`, 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"] }] });
|
|
3679
|
+
`, 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.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: "component", type: EzUIPopoutMenuSubDataList, selector: "tui-data-list[popsubdatalist]", inputs: ["itemTemplate", "popsubdatalist"] }] });
|
|
3637
3680
|
}
|
|
3638
3681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIPopoutMenu, decorators: [{
|
|
3639
3682
|
type: Component,
|
|
@@ -3652,6 +3695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
3652
3695
|
[appearance]="appearance"
|
|
3653
3696
|
[tuiAppearanceState]="dropdownOpen() ? 'active' : null"
|
|
3654
3697
|
[tuiDropdown]="dropdownContent"
|
|
3698
|
+
tuiDropdownLimitWidth="auto"
|
|
3655
3699
|
[(tuiDropdownOpen)]="dropdownOpen"
|
|
3656
3700
|
(click)="onMenuOpen.emit(dropdownOpen())"
|
|
3657
3701
|
>
|
|
@@ -4299,16 +4343,18 @@ class EzUIShowMoreText {
|
|
|
4299
4343
|
}
|
|
4300
4344
|
}
|
|
4301
4345
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: EzUIShowMoreText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4346
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: EzUIShowMoreText, isStandalone: true, selector: "ezui-showmoretext", inputs: { value: "value", maxCharacters: "maxCharacters" }, usesOnChanges: true, ngImport: i0, template: `
|
|
4303
4347
|
<tui-elastic-container>
|
|
4304
4348
|
<div [innerHTML]="current()"></div>
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4349
|
+
@if(value.length > maxCharacters){
|
|
4350
|
+
<button
|
|
4351
|
+
tuiLink
|
|
4352
|
+
type="button"
|
|
4353
|
+
(click)="toggle()"
|
|
4354
|
+
>
|
|
4355
|
+
Show {{ current() === value ? 'less' : 'more' }}
|
|
4356
|
+
</button>
|
|
4357
|
+
}
|
|
4312
4358
|
</tui-elastic-container>
|
|
4313
4359
|
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TuiElasticContainer, selector: "tui-elastic-container" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }] });
|
|
4314
4360
|
}
|
|
@@ -4322,13 +4368,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
4322
4368
|
], template: `
|
|
4323
4369
|
<tui-elastic-container>
|
|
4324
4370
|
<div [innerHTML]="current()"></div>
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4371
|
+
@if(value.length > maxCharacters){
|
|
4372
|
+
<button
|
|
4373
|
+
tuiLink
|
|
4374
|
+
type="button"
|
|
4375
|
+
(click)="toggle()"
|
|
4376
|
+
>
|
|
4377
|
+
Show {{ current() === value ? 'less' : 'more' }}
|
|
4378
|
+
</button>
|
|
4379
|
+
}
|
|
4332
4380
|
</tui-elastic-container>
|
|
4333
4381
|
` }]
|
|
4334
4382
|
}], propDecorators: { value: [{
|