ngx-com 0.1.4 → 0.1.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.
- package/README.md +1 -1
- package/fesm2022/ngx-com-components-dropdown.mjs +34 -18
- package/fesm2022/ngx-com-components-dropdown.mjs.map +1 -1
- package/fesm2022/ngx-com-components-table.mjs +65 -20
- package/fesm2022/ngx-com-components-table.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-com-components-dropdown.d.ts +1 -1
- package/types/ngx-com-components-table.d.ts +40 -6
package/README.md
CHANGED
|
@@ -158,7 +158,7 @@ import { ComDropdown, ComDropdownOption } from 'ngx-com/components/dropdown';
|
|
|
158
158
|
| Sort | `ngx-com/components/sort` | Column sort header for tables |
|
|
159
159
|
| Spinner | `ngx-com/components/spinner` | Loading indicator |
|
|
160
160
|
| Switch | `ngx-com/components/switch` | Toggle switch control |
|
|
161
|
-
| Table | `ngx-com/components/table` | Data table with sorting
|
|
161
|
+
| Table | `ngx-com/components/table` | Data table with sorting and class customization |
|
|
162
162
|
| Tabs | `ngx-com/components/tabs` | Tabbed navigation |
|
|
163
163
|
| Timepicker | `ngx-com/components/timepicker` | Time input control |
|
|
164
164
|
| Toast | `ngx-com/components/toast` | Toast notification service |
|
|
@@ -768,6 +768,7 @@ class ComDropdownSearch {
|
|
|
768
768
|
#searchInput
|
|
769
769
|
type="text"
|
|
770
770
|
[class]="searchClasses()"
|
|
771
|
+
[value]="internalValue()"
|
|
771
772
|
[placeholder]="placeholder()"
|
|
772
773
|
[disabled]="disabled()"
|
|
773
774
|
[attr.aria-label]="ariaLabel()"
|
|
@@ -830,6 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
830
831
|
#searchInput
|
|
831
832
|
type="text"
|
|
832
833
|
[class]="searchClasses()"
|
|
834
|
+
[value]="internalValue()"
|
|
833
835
|
[placeholder]="placeholder()"
|
|
834
836
|
[disabled]="disabled()"
|
|
835
837
|
[attr.aria-label]="ariaLabel()"
|
|
@@ -2344,14 +2346,10 @@ class ComDropdown {
|
|
|
2344
2346
|
<div
|
|
2345
2347
|
#panelElement
|
|
2346
2348
|
[class]="panelClasses()"
|
|
2347
|
-
[attr.id]="panelId()"
|
|
2348
|
-
[attr.role]="'listbox'"
|
|
2349
2349
|
tabindex="-1"
|
|
2350
|
-
[attr.aria-multiselectable]="multiple() || null"
|
|
2351
|
-
[attr.aria-label]="placeholder()"
|
|
2352
2350
|
(keydown)="onPanelKeydown($event)"
|
|
2353
2351
|
>
|
|
2354
|
-
<!-- Search input -->
|
|
2352
|
+
<!-- Search input (outside listbox for valid ARIA structure) -->
|
|
2355
2353
|
@if (searchable()) {
|
|
2356
2354
|
<com-dropdown-search
|
|
2357
2355
|
[placeholder]="searchPlaceholder()"
|
|
@@ -2371,6 +2369,10 @@ class ComDropdown {
|
|
|
2371
2369
|
[minBufferPx]="200"
|
|
2372
2370
|
[style.height]="maxHeight()"
|
|
2373
2371
|
class="overflow-auto"
|
|
2372
|
+
role="listbox"
|
|
2373
|
+
[attr.id]="panelId()"
|
|
2374
|
+
[attr.aria-multiselectable]="multiple() || null"
|
|
2375
|
+
[attr.aria-label]="placeholder()"
|
|
2374
2376
|
>
|
|
2375
2377
|
<com-dropdown-option
|
|
2376
2378
|
*cdkVirtualFor="let option of filteredOptions(); trackBy: trackByOption; let i = index"
|
|
@@ -2404,6 +2406,10 @@ class ComDropdown {
|
|
|
2404
2406
|
class="overflow-auto"
|
|
2405
2407
|
[style.maxHeight]="maxHeight()"
|
|
2406
2408
|
data-scroll-container
|
|
2409
|
+
role="listbox"
|
|
2410
|
+
[attr.id]="panelId()"
|
|
2411
|
+
[attr.aria-multiselectable]="multiple() || null"
|
|
2412
|
+
[attr.aria-label]="placeholder()"
|
|
2407
2413
|
>
|
|
2408
2414
|
@if (groupedOptions().length > 0) {
|
|
2409
2415
|
@for (group of groupedOptions(); track group.key) {
|
|
@@ -2595,14 +2601,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2595
2601
|
<div
|
|
2596
2602
|
#panelElement
|
|
2597
2603
|
[class]="panelClasses()"
|
|
2598
|
-
[attr.id]="panelId()"
|
|
2599
|
-
[attr.role]="'listbox'"
|
|
2600
2604
|
tabindex="-1"
|
|
2601
|
-
[attr.aria-multiselectable]="multiple() || null"
|
|
2602
|
-
[attr.aria-label]="placeholder()"
|
|
2603
2605
|
(keydown)="onPanelKeydown($event)"
|
|
2604
2606
|
>
|
|
2605
|
-
<!-- Search input -->
|
|
2607
|
+
<!-- Search input (outside listbox for valid ARIA structure) -->
|
|
2606
2608
|
@if (searchable()) {
|
|
2607
2609
|
<com-dropdown-search
|
|
2608
2610
|
[placeholder]="searchPlaceholder()"
|
|
@@ -2622,6 +2624,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2622
2624
|
[minBufferPx]="200"
|
|
2623
2625
|
[style.height]="maxHeight()"
|
|
2624
2626
|
class="overflow-auto"
|
|
2627
|
+
role="listbox"
|
|
2628
|
+
[attr.id]="panelId()"
|
|
2629
|
+
[attr.aria-multiselectable]="multiple() || null"
|
|
2630
|
+
[attr.aria-label]="placeholder()"
|
|
2625
2631
|
>
|
|
2626
2632
|
<com-dropdown-option
|
|
2627
2633
|
*cdkVirtualFor="let option of filteredOptions(); trackBy: trackByOption; let i = index"
|
|
@@ -2655,6 +2661,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2655
2661
|
class="overflow-auto"
|
|
2656
2662
|
[style.maxHeight]="maxHeight()"
|
|
2657
2663
|
data-scroll-container
|
|
2664
|
+
role="listbox"
|
|
2665
|
+
[attr.id]="panelId()"
|
|
2666
|
+
[attr.aria-multiselectable]="multiple() || null"
|
|
2667
|
+
[attr.aria-label]="placeholder()"
|
|
2658
2668
|
>
|
|
2659
2669
|
@if (groupedOptions().length > 0) {
|
|
2660
2670
|
@for (group of groupedOptions(); track group.key) {
|
|
@@ -2844,11 +2854,8 @@ class ComDropdownPanel {
|
|
|
2844
2854
|
<div
|
|
2845
2855
|
#panelElement
|
|
2846
2856
|
[class]="panelClasses()"
|
|
2847
|
-
[attr.role]="'listbox'"
|
|
2848
|
-
[attr.aria-multiselectable]="multiselectable() || null"
|
|
2849
|
-
[attr.id]="panelId()"
|
|
2850
2857
|
>
|
|
2851
|
-
<!-- Search slot -->
|
|
2858
|
+
<!-- Search slot (outside listbox for valid ARIA structure) -->
|
|
2852
2859
|
<ng-content select="[comDropdownSearch]" />
|
|
2853
2860
|
|
|
2854
2861
|
<!-- Options container -->
|
|
@@ -2859,6 +2866,9 @@ class ComDropdownPanel {
|
|
|
2859
2866
|
[minBufferPx]="200"
|
|
2860
2867
|
[style.height]="maxHeight()"
|
|
2861
2868
|
class="overflow-auto"
|
|
2869
|
+
role="listbox"
|
|
2870
|
+
[attr.aria-multiselectable]="multiselectable() || null"
|
|
2871
|
+
[attr.id]="panelId()"
|
|
2862
2872
|
>
|
|
2863
2873
|
<div
|
|
2864
2874
|
*cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
|
|
@@ -2874,6 +2884,9 @@ class ComDropdownPanel {
|
|
|
2874
2884
|
<div
|
|
2875
2885
|
class="overflow-auto"
|
|
2876
2886
|
[style.maxHeight]="maxHeight()"
|
|
2887
|
+
role="listbox"
|
|
2888
|
+
[attr.aria-multiselectable]="multiselectable() || null"
|
|
2889
|
+
[attr.id]="panelId()"
|
|
2877
2890
|
>
|
|
2878
2891
|
@for (option of options(); track option.id; let i = $index) {
|
|
2879
2892
|
<ng-container
|
|
@@ -2909,11 +2922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2909
2922
|
<div
|
|
2910
2923
|
#panelElement
|
|
2911
2924
|
[class]="panelClasses()"
|
|
2912
|
-
[attr.role]="'listbox'"
|
|
2913
|
-
[attr.aria-multiselectable]="multiselectable() || null"
|
|
2914
|
-
[attr.id]="panelId()"
|
|
2915
2925
|
>
|
|
2916
|
-
<!-- Search slot -->
|
|
2926
|
+
<!-- Search slot (outside listbox for valid ARIA structure) -->
|
|
2917
2927
|
<ng-content select="[comDropdownSearch]" />
|
|
2918
2928
|
|
|
2919
2929
|
<!-- Options container -->
|
|
@@ -2924,6 +2934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2924
2934
|
[minBufferPx]="200"
|
|
2925
2935
|
[style.height]="maxHeight()"
|
|
2926
2936
|
class="overflow-auto"
|
|
2937
|
+
role="listbox"
|
|
2938
|
+
[attr.aria-multiselectable]="multiselectable() || null"
|
|
2939
|
+
[attr.id]="panelId()"
|
|
2927
2940
|
>
|
|
2928
2941
|
<div
|
|
2929
2942
|
*cdkVirtualFor="let option of options(); trackBy: trackByFn; let i = index"
|
|
@@ -2939,6 +2952,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2939
2952
|
<div
|
|
2940
2953
|
class="overflow-auto"
|
|
2941
2954
|
[style.maxHeight]="maxHeight()"
|
|
2955
|
+
role="listbox"
|
|
2956
|
+
[attr.aria-multiselectable]="multiselectable() || null"
|
|
2957
|
+
[attr.id]="panelId()"
|
|
2942
2958
|
>
|
|
2943
2959
|
@for (option of options(); track option.id; let i = $index) {
|
|
2944
2960
|
<ng-container
|