@qualcomm-ui/angular 1.4.0 → 1.6.0

package/fesm2022/qualcomm-ui-angular-table.mjs

@@ -7,7 +7,7 @@ import { useInlineIconButtonApi } from '@qualcomm-ui/angular/inline-icon-button'
 import { mergeProps } from '@qualcomm-ui/utils/merge-props';
 import * as i2 from '@qualcomm-ui/angular/icon';
 import { IconDirective } from '@qualcomm-ui/angular/icon';
-import { GripVertical, Filter, UnfoldHorizontal, ArrowUp, ArrowDownUp, GripHorizontal, ChevronRight } from 'lucide-angular';
+import { GripVertical, Funnel, UnfoldHorizontal, ArrowUp, ArrowDownUp, GripHorizontal, ChevronRight } from 'lucide-angular';
 import { provideIcons } from '@qualcomm-ui/angular-core/lucide';
 import { PaginationRootDirective, provideQdsPaginationContext } from '@qualcomm-ui/angular/pagination';
 import { providePaginationContext } from '@qualcomm-ui/angular-core/pagination';
@@ -422,31 +422,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 class TableColumnFilterActionDirective {
+    /**
+     * Whether the column can be filtered. Pass in the state from the column:
+     *
+     * @example
+     * ```angular-html
+     * <button
+     *   q-table-column-filter-action
+     *   [canFilter]="header.column.getCanFilter()"
+     * ></button>
+     * ```
+     */
+    canFilter = input(undefined, ...(ngDevMode ? [{ debugName: "canFilter", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    /**
+     * Whether the column is filtered. Pass in the state from the column:
+     *
+     * @example
+     * ```angular-html
+     * <button
+     *   q-table-column-filter-action
+     *   [isFiltered]="header.column.getIsFiltered()"
+     * ></button>
+     * ```
+     */
+    isFiltered = input(undefined, ...(ngDevMode ? [{ debugName: "isFiltered", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
     /**
      * The column header associated with the filter.
      */
-    header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
     /**
      * Lucide icon to display inside the button.
      *
-     * @default "Filter"
+     * @default "Funnel"
      */
-    icon = input("Filter", ...(ngDevMode ? [{ debugName: "icon" }] : []));
-    canFilter = computed(() => this.header().column.getCanFilter(), ...(ngDevMode ? [{ debugName: "canFilter" }] : []));
+    icon = input("Funnel", ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    filterable = computed(() => this.canFilter() || this.header()?.column.getCanFilter(), ...(ngDevMode ? [{ debugName: "filterable" }] : []));
     inlineIconButtonApi = useInlineIconButtonApi({
         emphasis: "neutral",
         size: "sm",
         variant: "fixed",
     });
     trackBindings = useTrackBindings(() => mergeProps(this.inlineIconButtonApi().getRootBindings(), qdsTableApi.getColumnFilterActionBindings({
+        canFilter: this.canFilter(),
         header: this.header(),
+        isFiltered: this.isFiltered(),
     })));
     ngOnInit() {
         this.trackBindings();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnFilterActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TableColumnFilterActionDirective, isStandalone: false, selector: "[q-table-column-filter-action]", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ Filter })], ngImport: i0, template: `
-    @if (canFilter()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TableColumnFilterActionDirective, isStandalone: false, selector: "[q-table-column-filter-action]", inputs: { canFilter: { classPropertyName: "canFilter", publicName: "canFilter", isSignal: true, isRequired: false, transformFunction: null }, isFiltered: { classPropertyName: "isFiltered", publicName: "isFiltered", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ Funnel })], ngImport: i0, template: `
+    @if (filterable()) {
       <svg
         [q-bind]="inlineIconButtonApi().getIconBindings()"
         [qIcon]="icon()"
@@ -457,11 +487,11 @@ class TableColumnFilterActionDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnFilterActionDirective, decorators: [{
             type: Component,
             args: [{
-                    providers: [provideIcons({ Filter })],
+                    providers: [provideIcons({ Funnel })],
                     selector: "[q-table-column-filter-action]",
                     standalone: false,
                     template: `
-    @if (canFilter()) {
+    @if (filterable()) {
       <svg
         [q-bind]="inlineIconButtonApi().getIconBindings()"
         [qIcon]="icon()"
@@ -469,7 +499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+        }], propDecorators: { canFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilter", required: false }] }], isFiltered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltered", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
@@ -559,13 +589,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 class TableColumnSortActionDirective {
+    /**
+     * Whether the column is sorted. Pass in the state from the column:
+     *
+     * @example
+     * ```angular-html
+     * <button
+     *   q-table-column-sort-action
+     *   [isSorted]="column.getIsSorted()">
+     * </button>
+     * ```
+     */
+    isSorted = input(false, ...(ngDevMode ? [{ debugName: "isSorted" }] : []));
     /**
      * The column header associated with the sort action.
      */
     header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
     canSort = computed(() => this.header().column.getCanSort(), ...(ngDevMode ? [{ debugName: "canSort" }] : []));
     sortIcon = computed(() => {
-        const sortDirection = this.header().column.getIsSorted();
+        const sortDirection = this.isSorted() || this.header().column.getIsSorted();
         return sortDirection ? "ArrowUp" : "ArrowDownUp";
     }, ...(ngDevMode ? [{ debugName: "sortIcon" }] : []));
     inlineIconButtonApi = useInlineIconButtonApi({
@@ -575,12 +617,13 @@ class TableColumnSortActionDirective {
     });
     trackBindings = useTrackBindings(() => mergeProps(this.inlineIconButtonApi().getRootBindings(), qdsTableApi.getColumnSortActionBindings({
         header: this.header(),
+        isSorted: this.isSorted() || this.header().column.getIsSorted(),
     })));
     ngOnInit() {
         this.trackBindings();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: TableColumnSortActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TableColumnSortActionDirective, isStandalone: false, selector: "[q-table-column-sort-action]", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideIcons({ ArrowDownUp, ArrowUp })], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: TableColumnSortActionDirective, isStandalone: false, selector: "[q-table-column-sort-action]", inputs: { isSorted: { classPropertyName: "isSorted", publicName: "isSorted", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideIcons({ ArrowDownUp, ArrowUp })], ngImport: i0, template: `
     @if (canSort()) {
       <svg
         [q-bind]="inlineIconButtonApi().getIconBindings()"
@@ -604,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }] } });
+        }], propDecorators: { isSorted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSorted", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }] } });
 
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
@@ -847,6 +890,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 class TableRowExpandButtonDirective {
+    /**
+     * Whether the row is expanded. Pass in the state from the row:
+     *
+     * @example
+     * ```angular-html
+     * <button
+     *   q-table-row-expand-button
+     *   [isExpanded]="row.getIsExpanded()"
+     * ></button>
+     * ```
+     */
     isExpanded = input(undefined, ...(ngDevMode ? [{ debugName: "isExpanded", transform: booleanAttribute }] : [{
             transform: booleanAttribute,
         }]));