@ascentgl/ads-ui 21.50.0 → 21.52.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Input, Component, NgModule, input, output, computed, ChangeDetectionStrategy, EventEmitter, signal, effect, ViewChild, Output, ElementRef, HostListener, Directive, InjectionToken, inject, DestroyRef, Pipe, contentChild, TemplateRef, Inject, Optional, ChangeDetectorRef, Injectable, Renderer2, viewChild, ViewChildren } from '@angular/core';
 import * as i1 from '@ascentgl/ads-icons';
 import { AdsIconModule, AdsIconRegistry } from '@ascentgl/ads-icons';
-import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconFilter, adsIconArrowUpAndDown, adsIconMenuMoreInfo, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew } from '@ascentgl/ads-icons/icons';
+import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconDropdownArrow, adsIconChevronUp, adsIconSortDownToUp, adsIconSortUpToDown, adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown, adsIconFilter, adsIconArrowUpAndDown, adsIconMenuMoreInfo, adsIconHamburgerMenu, adsIconChevronLeft, adsIconStatusNew } from '@ascentgl/ads-icons/icons';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgOptimizedImage, NgTemplateOutlet, NgClass, NgStyle, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/material/badge';
@@ -7289,7 +7289,7 @@ class AdsCustomHeaderComponent {
     constructor(registry) {
         this.registry = registry;
         this.menuOpen = false;
-        this.registry.register([adsIconMenuFilters]);
+        this.registry.register([adsIconMenuFilters, adsIconSortingArrowUp, adsIconSortingArrowDown]);
     }
     agInit(params) {
         this.params = params;
@@ -7347,11 +7347,11 @@ class AdsCustomHeaderComponent {
         this.menuOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCustomHeaderComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCustomHeaderComponent, isStandalone: false, selector: "ads-custom-header", ngImport: i0, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"menuOpen = false\"\n  ></span>\n\n  <span class=\"header-text\">{{ displayName }}</span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      <ads-icon name=\"menu_filters\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AdsColumnSortFilterMenuComponent, selector: "ads-column-sort-filter-menu", inputs: ["config", "currentSortDirection", "selectedFilterValues"], outputs: ["sortChanged", "filterChanged", "hideColumn"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCustomHeaderComponent, isStandalone: false, selector: "ads-custom-header", ngImport: i0, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"menuOpen = false\"\n  ></span>\n\n  <span class=\"header-text\">{{ displayName }}</span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      @if (sortDirection === 'asc') {\n        <ads-icon name=\"sorting_arrow_up\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else if (sortDirection === 'desc') {\n        <ads-icon name=\"sorting_arrow_down\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else {\n        <ads-icon name=\"menu_filters\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      }\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AdsColumnSortFilterMenuComponent, selector: "ads-column-sort-filter-menu", inputs: ["config", "currentSortDirection", "selectedFilterValues"], outputs: ["sortChanged", "filterChanged", "hideColumn"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCustomHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-custom-header', standalone: false, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"menuOpen = false\"\n  ></span>\n\n  <span class=\"header-text\">{{ displayName }}</span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      <ads-icon name=\"menu_filters\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"] }]
+            args: [{ selector: 'ads-custom-header', standalone: false, template: "<div class=\"ads-custom-header\">\n  <span\n    class=\"menu-trigger-anchor\"\n    [class.align-right]=\"isLastColumn\"\n    #menuTrigger=\"matMenuTrigger\"\n    [matMenuTriggerFor]=\"sortFilterMenu\"\n    (menuOpened)=\"menuOpen = true\"\n    (menuClosed)=\"menuOpen = false\"\n  ></span>\n\n  <span class=\"header-text\">{{ displayName }}</span>\n\n  @if (hasSortFilterConfig) {\n    <button\n      class=\"header-menu-button\"\n      [class.active]=\"isActive\"\n      (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n    >\n      @if (sortDirection === 'asc') {\n        <ads-icon name=\"sorting_arrow_up\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else if (sortDirection === 'desc') {\n        <ads-icon name=\"sorting_arrow_down\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      } @else {\n        <ads-icon name=\"menu_filters\" theme=\"iconPrimary\" stroke=\"iconPrimary\" size=\"auto\" />\n      }\n    </button>\n  }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n  @if (sortFilterConfig) {\n    <ads-column-sort-filter-menu\n      [config]=\"sortFilterConfig\"\n      [currentSortDirection]=\"sortDirection\"\n      [selectedFilterValues]=\"filterValues\"\n      (sortChanged)=\"onSortChanged($event)\"\n      (filterChanged)=\"onFilterChanged($event)\"\n      (hideColumn)=\"onHideColumn($event)\"\n    />\n  }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdsIconRegistry }] });
 
 class AdsColumnSortFilterMenuModule {
@@ -7909,9 +7909,34 @@ class AdsTableComponent {
         }
     }
     // ============ Custom Sort/Filter Menu Methods ============
+    /** @ignore - Extract unique values from a column in rowData */
+    getUniqueColumnValues(field) {
+        if (!this.rowData || this.rowData.length === 0) {
+            return [];
+        }
+        const uniqueValues = new Set();
+        this.rowData.forEach(row => {
+            const value = row[field];
+            if (value !== null && value !== undefined) {
+                uniqueValues.add(String(value));
+            }
+        });
+        return Array.from(uniqueValues).sort();
+    }
     /** @ignore */
     getColumnSortFilterConfig(field) {
-        return this.columnSortFilterConfigs.find(config => config.field === field);
+        const config = this.columnSortFilterConfigs.find(config => config.field === field);
+        if (!config) {
+            return undefined;
+        }
+        // Auto-populate filterOptions from rowData if not provided
+        if (!config.filterOptions || config.filterOptions.length === 0) {
+            return {
+                ...config,
+                filterOptions: this.getUniqueColumnValues(field),
+            };
+        }
+        return config;
     }
     /** @ignore */
     getColumnSortDirection(field) {