verben-ng-ui 1.3.0 → 1.3.2

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.
Files changed (18) hide show
  1. package/esm2022/src/lib/components/sort-table/sort-table.component.mjs +16 -13
  2. package/esm2022/src/lib/components/table-filter/table-filter.component.mjs +32 -17
  3. package/esm2022/src/lib/components/visible-column/visible-column.component.mjs +8 -2
  4. package/esm2022/src/lib/models/DataFilterType.mjs +2 -1
  5. package/esm2022/src/lib/models/config.mjs +15 -1
  6. package/fesm2022/verben-ng-ui-src-lib-components-sort-table.mjs +15 -12
  7. package/fesm2022/verben-ng-ui-src-lib-components-sort-table.mjs.map +1 -1
  8. package/fesm2022/verben-ng-ui-src-lib-components-table-filter.mjs +31 -16
  9. package/fesm2022/verben-ng-ui-src-lib-components-table-filter.mjs.map +1 -1
  10. package/fesm2022/verben-ng-ui-src-lib-components-visible-column.mjs +7 -1
  11. package/fesm2022/verben-ng-ui-src-lib-components-visible-column.mjs.map +1 -1
  12. package/fesm2022/verben-ng-ui-src-lib-models.mjs +15 -0
  13. package/fesm2022/verben-ng-ui-src-lib-models.mjs.map +1 -1
  14. package/package.json +80 -80
  15. package/src/lib/components/sort-table/sort-table.component.d.ts +1 -6
  16. package/src/lib/components/table-filter/table-filter.component.d.ts +6 -7
  17. package/src/lib/components/visible-column/visible-column.component.d.ts +2 -1
  18. package/src/lib/models/DataFilterType.d.ts +2 -1
package/esm2022/src/lib/models/config.mjs CHANGED
@@ -6,6 +6,10 @@ export class Config {
6
6
  type: DataFilterType.String,
7
7
  options: [ConditionalOptions.On, ConditionalOptions.NotEqual],
8
8
  },
9
+ {
10
+ type: DataFilterType.Enum,
11
+ options: [ConditionalOptions.On, ConditionalOptions.NotEqual],
12
+ },
9
13
  {
10
14
  type: DataFilterType.Integer,
11
15
  options: [
@@ -16,6 +20,16 @@ export class Config {
16
20
  ConditionalOptions.GreaterThanAndEqual,
17
21
  ],
18
22
  },
23
+ {
24
+ type: DataFilterType.Number,
25
+ options: [
26
+ ConditionalOptions.On,
27
+ ConditionalOptions.Before,
28
+ ConditionalOptions.LessThanAndEqual,
29
+ ConditionalOptions.After,
30
+ ConditionalOptions.GreaterThanAndEqual,
31
+ ],
32
+ },
19
33
  {
20
34
  type: DataFilterType.Decimal,
21
35
  options: [
@@ -54,4 +68,4 @@ export class Config {
54
68
  return typeOption ? typeOption.options : null;
55
69
  }
56
70
  }
57
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvbW9kZWxzL2NvbmZpZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDbEQsT0FBTyxFQUFFLGtCQUFrQixFQUFlLE1BQU0sZ0JBQWdCLENBQUM7QUFFakUsTUFBTSxPQUFPLE1BQU07SUFDakIsV0FBVyxHQUFrQjtRQUMzQjtZQUNFLElBQUksRUFBRSxjQUFjLENBQUMsTUFBTTtZQUMzQixPQUFPLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxFQUFFLEVBQUUsa0JBQWtCLENBQUMsUUFBUSxDQUFDO1NBQzlEO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsY0FBYyxDQUFDLE9BQU87WUFDNUIsT0FBTyxFQUFFO2dCQUNQLGtCQUFrQixDQUFDLEVBQUU7Z0JBQ3JCLGtCQUFrQixDQUFDLE1BQU07Z0JBQ3pCLGtCQUFrQixDQUFDLGdCQUFnQjtnQkFDbkMsa0JBQWtCLENBQUMsS0FBSztnQkFDeEIsa0JBQWtCLENBQUMsbUJBQW1CO2FBQ3ZDO1NBQ0Y7UUFDRDtZQUNFLElBQUksRUFBRSxjQUFjLENBQUMsT0FBTztZQUM1QixPQUFPLEVBQUU7Z0JBQ1Asa0JBQWtCLENBQUMsRUFBRTtnQkFDckIsa0JBQWtCLENBQUMsTUFBTTtnQkFDekIsa0JBQWtCLENBQUMsZ0JBQWdCO2dCQUNuQyxrQkFBa0IsQ0FBQyxLQUFLO2dCQUN4QixrQkFBa0IsQ0FBQyxtQkFBbUI7YUFDdkM7U0FDRjtRQUNEO1lBQ0UsSUFBSSxFQUFFLGNBQWMsQ0FBQyxNQUFNO1lBQzNCLE9BQU8sRUFBRTtnQkFDUCxrQkFBa0IsQ0FBQyxFQUFFO2dCQUNyQixrQkFBa0IsQ0FBQyxNQUFNO2dCQUN6QixrQkFBa0IsQ0FBQyxnQkFBZ0I7Z0JBQ25DLGtCQUFrQixDQUFDLEtBQUs7Z0JBQ3hCLGtCQUFrQixDQUFDLG1CQUFtQjthQUN2QztTQUNGO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsY0FBYyxDQUFDLElBQUk7WUFDekIsT0FBTyxFQUFFO2dCQUNQLGtCQUFrQixDQUFDLEVBQUU7Z0JBQ3JCLGtCQUFrQixDQUFDLE1BQU07Z0JBQ3pCLGtCQUFrQixDQUFDLEtBQUs7YUFDekI7U0FDRjtRQUNEO1lBQ0UsSUFBSSxFQUFFLGNBQWMsQ0FBQyxJQUFJO1lBQ3pCLE9BQU8sRUFBRSxDQUFDLGtCQUFrQixDQUFDLEdBQUcsRUFBRSxrQkFBa0IsQ0FBQyxFQUFFLENBQUM7U0FDekQ7S0FDRixDQUFDO0lBRUYsbUJBQW1CLENBQUMsVUFBMEI7UUFDNUMsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQ3RDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxLQUFLLFVBQVUsQ0FDdkMsQ0FBQztRQUNGLE9BQU8sVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDaEQsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGF0YUZpbHRlclR5cGUgfSBmcm9tICcuL0RhdGFGaWx0ZXJUeXBlJztcbmltcG9ydCB7IENvbmRpdGlvbmFsT3B0aW9ucywgSVR5cGVPcHRpb24gfSBmcm9tICcuL3RhYmxlLWZpbHRlcic7XG5cbmV4cG9ydCBjbGFzcyBDb25maWcge1xuICB0eXBlT3B0aW9uczogSVR5cGVPcHRpb25bXSA9IFtcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5TdHJpbmcsXG4gICAgICBvcHRpb25zOiBbQ29uZGl0aW9uYWxPcHRpb25zLk9uLCBDb25kaXRpb25hbE9wdGlvbnMuTm90RXF1YWxdLFxuICAgIH0sXG4gICAge1xuICAgICAgdHlwZTogRGF0YUZpbHRlclR5cGUuSW50ZWdlcixcbiAgICAgIG9wdGlvbnM6IFtcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLk9uLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQmVmb3JlLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuTGVzc1RoYW5BbmRFcXVhbCxcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLkFmdGVyLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuR3JlYXRlclRoYW5BbmRFcXVhbCxcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5EZWNpbWFsLFxuICAgICAgb3B0aW9uczogW1xuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuT24sXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5CZWZvcmUsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5MZXNzVGhhbkFuZEVxdWFsLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQWZ0ZXIsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5HcmVhdGVyVGhhbkFuZEVxdWFsLFxuICAgICAgXSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHR5cGU6IERhdGFGaWx0ZXJUeXBlLkNyZWRpdCxcbiAgICAgIG9wdGlvbnM6IFtcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLk9uLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQmVmb3JlLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuTGVzc1RoYW5BbmRFcXVhbCxcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLkFmdGVyLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuR3JlYXRlclRoYW5BbmRFcXVhbCxcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5EYXRlLFxuICAgICAgb3B0aW9uczogW1xuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuT24sXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5CZWZvcmUsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5BZnRlcixcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5Cb29sLFxuICAgICAgb3B0aW9uczogW0NvbmRpdGlvbmFsT3B0aW9ucy5ZZXMsIENvbmRpdGlvbmFsT3B0aW9ucy5Ob10sXG4gICAgfSxcbiAgXTtcblxuICBnZXRDb25kaXRpb25PcHRpb25zKGZpbHRlclR5cGU6IERhdGFGaWx0ZXJUeXBlKTogc3RyaW5nW10gfCBudWxsIHtcbiAgICBjb25zdCB0eXBlT3B0aW9uID0gdGhpcy50eXBlT3B0aW9ucy5maW5kKFxuICAgICAgKG9wdGlvbikgPT4gb3B0aW9uLnR5cGUgPT09IGZpbHRlclR5cGVcbiAgICApO1xuICAgIHJldHVybiB0eXBlT3B0aW9uID8gdHlwZU9wdGlvbi5vcHRpb25zIDogbnVsbDtcbiAgfVxufVxuIl19
71
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlnLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmVyYmVuLW5nLXVpL3NyYy9saWIvbW9kZWxzL2NvbmZpZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDbEQsT0FBTyxFQUFFLGtCQUFrQixFQUFlLE1BQU0sZ0JBQWdCLENBQUM7QUFFakUsTUFBTSxPQUFPLE1BQU07SUFDakIsV0FBVyxHQUFrQjtRQUMzQjtZQUNFLElBQUksRUFBRSxjQUFjLENBQUMsTUFBTTtZQUMzQixPQUFPLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxFQUFFLEVBQUUsa0JBQWtCLENBQUMsUUFBUSxDQUFDO1NBQzlEO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsY0FBYyxDQUFDLElBQUk7WUFDekIsT0FBTyxFQUFFLENBQUMsa0JBQWtCLENBQUMsRUFBRSxFQUFFLGtCQUFrQixDQUFDLFFBQVEsQ0FBQztTQUM5RDtRQUNEO1lBQ0UsSUFBSSxFQUFFLGNBQWMsQ0FBQyxPQUFPO1lBQzVCLE9BQU8sRUFBRTtnQkFDUCxrQkFBa0IsQ0FBQyxFQUFFO2dCQUNyQixrQkFBa0IsQ0FBQyxNQUFNO2dCQUN6QixrQkFBa0IsQ0FBQyxnQkFBZ0I7Z0JBQ25DLGtCQUFrQixDQUFDLEtBQUs7Z0JBQ3hCLGtCQUFrQixDQUFDLG1CQUFtQjthQUN2QztTQUNGO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsY0FBYyxDQUFDLE1BQU07WUFDM0IsT0FBTyxFQUFFO2dCQUNQLGtCQUFrQixDQUFDLEVBQUU7Z0JBQ3JCLGtCQUFrQixDQUFDLE1BQU07Z0JBQ3pCLGtCQUFrQixDQUFDLGdCQUFnQjtnQkFDbkMsa0JBQWtCLENBQUMsS0FBSztnQkFDeEIsa0JBQWtCLENBQUMsbUJBQW1CO2FBQ3ZDO1NBQ0Y7UUFDRDtZQUNFLElBQUksRUFBRSxjQUFjLENBQUMsT0FBTztZQUM1QixPQUFPLEVBQUU7Z0JBQ1Asa0JBQWtCLENBQUMsRUFBRTtnQkFDckIsa0JBQWtCLENBQUMsTUFBTTtnQkFDekIsa0JBQWtCLENBQUMsZ0JBQWdCO2dCQUNuQyxrQkFBa0IsQ0FBQyxLQUFLO2dCQUN4QixrQkFBa0IsQ0FBQyxtQkFBbUI7YUFDdkM7U0FDRjtRQUNEO1lBQ0UsSUFBSSxFQUFFLGNBQWMsQ0FBQyxNQUFNO1lBQzNCLE9BQU8sRUFBRTtnQkFDUCxrQkFBa0IsQ0FBQyxFQUFFO2dCQUNyQixrQkFBa0IsQ0FBQyxNQUFNO2dCQUN6QixrQkFBa0IsQ0FBQyxnQkFBZ0I7Z0JBQ25DLGtCQUFrQixDQUFDLEtBQUs7Z0JBQ3hCLGtCQUFrQixDQUFDLG1CQUFtQjthQUN2QztTQUNGO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsY0FBYyxDQUFDLElBQUk7WUFDekIsT0FBTyxFQUFFO2dCQUNQLGtCQUFrQixDQUFDLEVBQUU7Z0JBQ3JCLGtCQUFrQixDQUFDLE1BQU07Z0JBQ3pCLGtCQUFrQixDQUFDLEtBQUs7YUFDekI7U0FDRjtRQUNEO1lBQ0UsSUFBSSxFQUFFLGNBQWMsQ0FBQyxJQUFJO1lBQ3pCLE9BQU8sRUFBRSxDQUFDLGtCQUFrQixDQUFDLEdBQUcsRUFBRSxrQkFBa0IsQ0FBQyxFQUFFLENBQUM7U0FDekQ7S0FDRixDQUFDO0lBRUYsbUJBQW1CLENBQUMsVUFBMEI7UUFDNUMsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQ3RDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxLQUFLLFVBQVUsQ0FDdkMsQ0FBQztRQUNGLE9BQU8sVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDaEQsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGF0YUZpbHRlclR5cGUgfSBmcm9tICcuL0RhdGFGaWx0ZXJUeXBlJztcbmltcG9ydCB7IENvbmRpdGlvbmFsT3B0aW9ucywgSVR5cGVPcHRpb24gfSBmcm9tICcuL3RhYmxlLWZpbHRlcic7XG5cbmV4cG9ydCBjbGFzcyBDb25maWcge1xuICB0eXBlT3B0aW9uczogSVR5cGVPcHRpb25bXSA9IFtcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5TdHJpbmcsXG4gICAgICBvcHRpb25zOiBbQ29uZGl0aW9uYWxPcHRpb25zLk9uLCBDb25kaXRpb25hbE9wdGlvbnMuTm90RXF1YWxdLFxuICAgIH0sXG4gICAge1xuICAgICAgdHlwZTogRGF0YUZpbHRlclR5cGUuRW51bSxcbiAgICAgIG9wdGlvbnM6IFtDb25kaXRpb25hbE9wdGlvbnMuT24sIENvbmRpdGlvbmFsT3B0aW9ucy5Ob3RFcXVhbF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5JbnRlZ2VyLFxuICAgICAgb3B0aW9uczogW1xuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuT24sXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5CZWZvcmUsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5MZXNzVGhhbkFuZEVxdWFsLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQWZ0ZXIsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5HcmVhdGVyVGhhbkFuZEVxdWFsLFxuICAgICAgXSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHR5cGU6IERhdGFGaWx0ZXJUeXBlLk51bWJlcixcbiAgICAgIG9wdGlvbnM6IFtcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLk9uLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQmVmb3JlLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuTGVzc1RoYW5BbmRFcXVhbCxcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLkFmdGVyLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuR3JlYXRlclRoYW5BbmRFcXVhbCxcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5EZWNpbWFsLFxuICAgICAgb3B0aW9uczogW1xuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuT24sXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5CZWZvcmUsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5MZXNzVGhhbkFuZEVxdWFsLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQWZ0ZXIsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5HcmVhdGVyVGhhbkFuZEVxdWFsLFxuICAgICAgXSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHR5cGU6IERhdGFGaWx0ZXJUeXBlLkNyZWRpdCxcbiAgICAgIG9wdGlvbnM6IFtcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLk9uLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuQmVmb3JlLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuTGVzc1RoYW5BbmRFcXVhbCxcbiAgICAgICAgQ29uZGl0aW9uYWxPcHRpb25zLkFmdGVyLFxuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuR3JlYXRlclRoYW5BbmRFcXVhbCxcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5EYXRlLFxuICAgICAgb3B0aW9uczogW1xuICAgICAgICBDb25kaXRpb25hbE9wdGlvbnMuT24sXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5CZWZvcmUsXG4gICAgICAgIENvbmRpdGlvbmFsT3B0aW9ucy5BZnRlcixcbiAgICAgIF0sXG4gICAgfSxcbiAgICB7XG4gICAgICB0eXBlOiBEYXRhRmlsdGVyVHlwZS5Cb29sLFxuICAgICAgb3B0aW9uczogW0NvbmRpdGlvbmFsT3B0aW9ucy5ZZXMsIENvbmRpdGlvbmFsT3B0aW9ucy5Ob10sXG4gICAgfSxcbiAgXTtcblxuICBnZXRDb25kaXRpb25PcHRpb25zKGZpbHRlclR5cGU6IERhdGFGaWx0ZXJUeXBlKTogc3RyaW5nW10gfCBudWxsIHtcbiAgICBjb25zdCB0eXBlT3B0aW9uID0gdGhpcy50eXBlT3B0aW9ucy5maW5kKFxuICAgICAgKG9wdGlvbikgPT4gb3B0aW9uLnR5cGUgPT09IGZpbHRlclR5cGUsXG4gICAgKTtcbiAgICByZXR1cm4gdHlwZU9wdGlvbiA/IHR5cGVPcHRpb24ub3B0aW9ucyA6IG51bGw7XG4gIH1cbn1cbiJdfQ==
package/fesm2022/verben-ng-ui-src-lib-components-sort-table.mjs CHANGED
@@ -13,7 +13,7 @@ class SortTableComponent {
13
13
  displayedOptions = 4;
14
14
  propertyText = 'Property';
15
15
  showMoreText = 'Show more';
16
- sortButtonText = 'Sort';
16
+ sortButtonText = 'Confirm';
17
17
  pd;
18
18
  mg;
19
19
  height;
@@ -65,15 +65,17 @@ class SortTableComponent {
65
65
  }
66
66
  }
67
67
  applySort() {
68
- const selectedSorts = this.sortOptions.filter((option) => option.checked);
69
- const selectedSortDetails = selectedSorts.map((sort, index) => {
70
- return {
71
- name: sort.name,
72
- type: sort.type || 'String',
73
- value: this.getSortOrder(sort.type, this.selectedOrders.get(index) || 'asc') || '',
74
- checked: sort.checked || false,
75
- };
76
- });
68
+ const selectedSortDetails = this.sortOptions.reduce((acc, sort, index) => {
69
+ if (sort.checked) {
70
+ acc.push({
71
+ name: sort.name,
72
+ type: sort.type || 'String',
73
+ value: this.getSortOrder(sort.type, this.selectedOrders.get(index) || 'asc') || '',
74
+ checked: sort.checked || false,
75
+ });
76
+ }
77
+ return acc;
78
+ }, []);
77
79
  this.selectedOptions.emit(selectedSortDetails);
78
80
  return selectedSortDetails;
79
81
  }
@@ -132,6 +134,7 @@ class SortTableComponent {
132
134
  this.updateSortButtonState();
133
135
  this.checkAll = false;
134
136
  this.resetSortData.emit();
137
+ this.applySort();
135
138
  }
136
139
  updateSortButtonState() {
137
140
  this.disableSortButton = this.countSelectedSorts() === 0;
@@ -178,11 +181,11 @@ class SortTableComponent {
178
181
  this.draggedIndex = null;
179
182
  }
180
183
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SortTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
181
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: SortTableComponent, selector: "verben-sort-table", inputs: { enableDragAndDrop: "enableDragAndDrop", sortOptions: "sortOptions", resetText: "resetText", displayedOptions: "displayedOptions", propertyText: "propertyText", showMoreText: "showMoreText", sortButtonText: "sortButtonText", pd: "pd", mg: "mg", height: "height", width: "width", bgColor: "bgColor", boxShadow: "boxShadow", textColor: "textColor", primaryColor: "primaryColor", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor", border: "border", borderRadius: "borderRadius", selectWidth: "selectWidth", containerHeight: "containerHeight" }, outputs: { selectedOptions: "selectedOptions", resetSortData: "resetSortData" }, ngImport: i0, template: "<div\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n class=\"sort-wrapper\"\n>\n <!-- Header Section -->\n <div class=\"sort-header flex justify-between text-sm\">\n <span class=\"sort-title font-semibold\">\n Sort\n <sup [style.color]=\"secondaryColor\">[{{ countSelectedSorts() }}]</sup>\n </span>\n <span\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n class=\"cursor-pointer\"\n (click)=\"resetSort()\"\n >\n {{ resetText }}\n </span>\n </div>\n\n <hr />\n\n <!-- Sort Options (Scrollable Section) -->\n <div class=\"sort-options flex-grow overflow-y-auto my-2\">\n <p class=\"pd\">{{ propertyText }}</p>\n\n <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n <input type=\"checkbox\" [checked]=\"checkAll\" (change)=\"toggleSelectAll()\" />\n Select All\n </label>\n </div>\n\n <div\n *ngFor=\"let option of visibleSortOptions; let i = index\"\n [attr.draggable]=\"enableDragAndDrop\"\n (dragstart)=\"onDragStart(i, $event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(i, $event)\"\n class=\"sort-option\"\n >\n <div [style.font-size]=\"'14px'\" [style.margin-top]=\"'13px'\">\n <div class=\"flex items-center gap-md\">\n <verben-svg\n *ngIf=\"enableDragAndDrop\"\n fill=\"var(--vbn-color-text)\"\n [width]=\"25\"\n class=\"svg\"\n icon=\"square-dot\"\n ></verben-svg>\n <div class=\"flex items-center gap\">\n <input\n type=\"checkbox\"\n [checked]=\"option.checked\"\n (change)=\"toggleSort(i)\"\n />\n <span>{{ option.name }}</span>\n </div>\n </div>\n\n <!-- Sorting Controls -->\n <div class=\"flex items-center gap\" [style.margin-left]=\"'35px'\">\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n 1-100\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n 100-1\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n A-Z\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n Z-A\n </label>\n </div>\n </div>\n </div>\n\n <!-- Show More -->\n <div *ngIf=\"showMore && hiddenSortOptions.length > 0\">\n <span\n [style.padding]=\"'20px 10px 0px 10px'\"\n [style.color]=\"'var(--vbn-color-text)'\"\n class=\"cursor-pointer block\"\n (click)=\"toggleShowMore()\"\n >\n {{ showMoreText }}\n </span>\n </div>\n </div>\n\n <hr />\n\n <!-- Sort Button -->\n <div class=\"btn-wrapper mt-2 flex-shrink-0\">\n <button\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n [disabled]=\"countSelectedSorts() === 0\"\n [ngClass]=\"{\n disabledBtn: countSelectedSorts() === 0,\n enableBtn: countSelectedSorts() !== 0\n }\"\n (click)=\"applySort()\"\n >\n {{ sortButtonText }}\n </button>\n </div>\n</div>\n", styles: ["hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.gap{gap:7px}.gap-sm{gap:4px}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.pd{padding:10px}.sort-header{margin-bottom:10px;padding:10px 0}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.block{display:block}.btn-wrapper{display:flex;justify-content:end}.gap-md{gap:2px}.disabledBtn{cursor:not-allowed}.enabledBtn{cursor:pointer}.sort-wrapper{display:flex;flex-direction:column;overflow:hidden}.sort-options{flex-grow:1;overflow-y:auto;margin-top:.5rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
184
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: SortTableComponent, selector: "verben-sort-table", inputs: { enableDragAndDrop: "enableDragAndDrop", sortOptions: "sortOptions", resetText: "resetText", displayedOptions: "displayedOptions", propertyText: "propertyText", showMoreText: "showMoreText", sortButtonText: "sortButtonText", pd: "pd", mg: "mg", height: "height", width: "width", bgColor: "bgColor", boxShadow: "boxShadow", textColor: "textColor", primaryColor: "primaryColor", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor", border: "border", borderRadius: "borderRadius", selectWidth: "selectWidth", containerHeight: "containerHeight" }, outputs: { selectedOptions: "selectedOptions", resetSortData: "resetSortData" }, ngImport: i0, template: "<div\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n class=\"sort-wrapper\"\n>\n <!-- Header Section -->\n <div class=\"sort-header flex justify-between text-sm\">\n <span class=\"sort-title font-semibold\">\n Sort\n <sup [style.color]=\"secondaryColor\">[{{ countSelectedSorts() }}]</sup>\n </span>\n <span\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n class=\"cursor-pointer\"\n (click)=\"resetSort()\"\n >\n {{ resetText }}\n </span>\n </div>\n\n <hr />\n\n <!-- Sort Options (Scrollable Section) -->\n <div class=\"sort-options flex-grow overflow-y-auto my-2\">\n <p class=\"pd\">{{ propertyText }}</p>\n\n <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n Select All\n </label>\n </div>\n\n <div\n *ngFor=\"let option of visibleSortOptions; let i = index\"\n [attr.draggable]=\"enableDragAndDrop\"\n (dragstart)=\"onDragStart(i, $event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(i, $event)\"\n class=\"sort-option\"\n >\n <div [style.font-size]=\"'14px'\" [style.margin-top]=\"'13px'\">\n <div class=\"flex items-center gap-md\">\n <verben-svg\n *ngIf=\"enableDragAndDrop\"\n fill=\"var(--vbn-color-text)\"\n [width]=\"25\"\n class=\"svg\"\n icon=\"square-dot\"\n ></verben-svg>\n <div class=\"flex items-center gap\">\n <input\n type=\"checkbox\"\n [checked]=\"option.checked\"\n (change)=\"toggleSort(i)\"\n />\n <span>{{ option.name }}</span>\n </div>\n </div>\n\n <!-- Sorting Controls -->\n <div class=\"flex items-center gap\" [style.margin-left]=\"'35px'\">\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n 1-100\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n 100-1\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n A-Z\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n Z-A\n </label>\n </div>\n </div>\n </div>\n\n <!-- Show More -->\n <div *ngIf=\"showMore && hiddenSortOptions.length > 0\">\n <span\n [style.padding]=\"'20px 10px 0px 10px'\"\n [style.color]=\"'var(--vbn-color-text)'\"\n class=\"cursor-pointer block\"\n (click)=\"toggleShowMore()\"\n >\n {{ showMoreText }}\n </span>\n </div>\n </div>\n\n <hr />\n\n <!-- Sort Button -->\n <div class=\"btn-wrapper mt-2 flex-shrink-0\">\n <button\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applySort()\"\n >\n {{ sortButtonText }}\n </button>\n </div>\n</div>\n", styles: ["hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.gap{gap:7px}.gap-sm{gap:4px}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.pd{padding:10px}.sort-header{margin-bottom:10px;padding:10px 0}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.block{display:block}.btn-wrapper{display:flex;justify-content:end}.gap-md{gap:2px}.disabledBtn{cursor:not-allowed}.enabledBtn{cursor:pointer}.sort-wrapper{display:flex;flex-direction:column;overflow:hidden}.sort-options{flex-grow:1;overflow-y:auto;margin-top:.5rem;margin-bottom:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
182
185
  }
183
186
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: SortTableComponent, decorators: [{
184
187
  type: Component,
185
- args: [{ selector: 'verben-sort-table', template: "<div\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n class=\"sort-wrapper\"\n>\n <!-- Header Section -->\n <div class=\"sort-header flex justify-between text-sm\">\n <span class=\"sort-title font-semibold\">\n Sort\n <sup [style.color]=\"secondaryColor\">[{{ countSelectedSorts() }}]</sup>\n </span>\n <span\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n class=\"cursor-pointer\"\n (click)=\"resetSort()\"\n >\n {{ resetText }}\n </span>\n </div>\n\n <hr />\n\n <!-- Sort Options (Scrollable Section) -->\n <div class=\"sort-options flex-grow overflow-y-auto my-2\">\n <p class=\"pd\">{{ propertyText }}</p>\n\n <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n <input type=\"checkbox\" [checked]=\"checkAll\" (change)=\"toggleSelectAll()\" />\n Select All\n </label>\n </div>\n\n <div\n *ngFor=\"let option of visibleSortOptions; let i = index\"\n [attr.draggable]=\"enableDragAndDrop\"\n (dragstart)=\"onDragStart(i, $event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(i, $event)\"\n class=\"sort-option\"\n >\n <div [style.font-size]=\"'14px'\" [style.margin-top]=\"'13px'\">\n <div class=\"flex items-center gap-md\">\n <verben-svg\n *ngIf=\"enableDragAndDrop\"\n fill=\"var(--vbn-color-text)\"\n [width]=\"25\"\n class=\"svg\"\n icon=\"square-dot\"\n ></verben-svg>\n <div class=\"flex items-center gap\">\n <input\n type=\"checkbox\"\n [checked]=\"option.checked\"\n (change)=\"toggleSort(i)\"\n />\n <span>{{ option.name }}</span>\n </div>\n </div>\n\n <!-- Sorting Controls -->\n <div class=\"flex items-center gap\" [style.margin-left]=\"'35px'\">\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n 1-100\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n 100-1\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n A-Z\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n Z-A\n </label>\n </div>\n </div>\n </div>\n\n <!-- Show More -->\n <div *ngIf=\"showMore && hiddenSortOptions.length > 0\">\n <span\n [style.padding]=\"'20px 10px 0px 10px'\"\n [style.color]=\"'var(--vbn-color-text)'\"\n class=\"cursor-pointer block\"\n (click)=\"toggleShowMore()\"\n >\n {{ showMoreText }}\n </span>\n </div>\n </div>\n\n <hr />\n\n <!-- Sort Button -->\n <div class=\"btn-wrapper mt-2 flex-shrink-0\">\n <button\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n [disabled]=\"countSelectedSorts() === 0\"\n [ngClass]=\"{\n disabledBtn: countSelectedSorts() === 0,\n enableBtn: countSelectedSorts() !== 0\n }\"\n (click)=\"applySort()\"\n >\n {{ sortButtonText }}\n </button>\n </div>\n</div>\n", styles: ["hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.gap{gap:7px}.gap-sm{gap:4px}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.pd{padding:10px}.sort-header{margin-bottom:10px;padding:10px 0}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.block{display:block}.btn-wrapper{display:flex;justify-content:end}.gap-md{gap:2px}.disabledBtn{cursor:not-allowed}.enabledBtn{cursor:pointer}.sort-wrapper{display:flex;flex-direction:column;overflow:hidden}.sort-options{flex-grow:1;overflow-y:auto;margin-top:.5rem;margin-bottom:.5rem}\n"] }]
188
+ args: [{ selector: 'verben-sort-table', template: "<div\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n class=\"sort-wrapper\"\n>\n <!-- Header Section -->\n <div class=\"sort-header flex justify-between text-sm\">\n <span class=\"sort-title font-semibold\">\n Sort\n <sup [style.color]=\"secondaryColor\">[{{ countSelectedSorts() }}]</sup>\n </span>\n <span\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n class=\"cursor-pointer\"\n (click)=\"resetSort()\"\n >\n {{ resetText }}\n </span>\n </div>\n\n <hr />\n\n <!-- Sort Options (Scrollable Section) -->\n <div class=\"sort-options flex-grow overflow-y-auto my-2\">\n <p class=\"pd\">{{ propertyText }}</p>\n\n <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n Select All\n </label>\n </div>\n\n <div\n *ngFor=\"let option of visibleSortOptions; let i = index\"\n [attr.draggable]=\"enableDragAndDrop\"\n (dragstart)=\"onDragStart(i, $event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(i, $event)\"\n class=\"sort-option\"\n >\n <div [style.font-size]=\"'14px'\" [style.margin-top]=\"'13px'\">\n <div class=\"flex items-center gap-md\">\n <verben-svg\n *ngIf=\"enableDragAndDrop\"\n fill=\"var(--vbn-color-text)\"\n [width]=\"25\"\n class=\"svg\"\n icon=\"square-dot\"\n ></verben-svg>\n <div class=\"flex items-center gap\">\n <input\n type=\"checkbox\"\n [checked]=\"option.checked\"\n (change)=\"toggleSort(i)\"\n />\n <span>{{ option.name }}</span>\n </div>\n </div>\n\n <!-- Sorting Controls -->\n <div class=\"flex items-center gap\" [style.margin-left]=\"'35px'\">\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n 1-100\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n 100-1\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n A-Z\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n Z-A\n </label>\n </div>\n </div>\n </div>\n\n <!-- Show More -->\n <div *ngIf=\"showMore && hiddenSortOptions.length > 0\">\n <span\n [style.padding]=\"'20px 10px 0px 10px'\"\n [style.color]=\"'var(--vbn-color-text)'\"\n class=\"cursor-pointer block\"\n (click)=\"toggleShowMore()\"\n >\n {{ showMoreText }}\n </span>\n </div>\n </div>\n\n <hr />\n\n <!-- Sort Button -->\n <div class=\"btn-wrapper mt-2 flex-shrink-0\">\n <button\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applySort()\"\n >\n {{ sortButtonText }}\n </button>\n </div>\n</div>\n", styles: ["hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-sm{font-size:14px}.gap{gap:7px}.gap-sm{gap:4px}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.pd{padding:10px}.sort-header{margin-bottom:10px;padding:10px 0}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.block{display:block}.btn-wrapper{display:flex;justify-content:end}.gap-md{gap:2px}.disabledBtn{cursor:not-allowed}.enabledBtn{cursor:pointer}.sort-wrapper{display:flex;flex-direction:column;overflow:hidden}.sort-options{flex-grow:1;overflow-y:auto;margin-top:.5rem;margin-bottom:.5rem}\n"] }]
186
189
  }], propDecorators: { enableDragAndDrop: [{
187
190
  type: Input
188
191
  }], sortOptions: [{
package/fesm2022/verben-ng-ui-src-lib-components-sort-table.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"verben-ng-ui-src-lib-components-sort-table.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/sort-table/sort-table.component.ts","../../../projects/verben-ng-ui/src/lib/components/sort-table/sort-table.component.html","../../../projects/verben-ng-ui/src/lib/components/sort-table/sort-table.module.ts","../../../projects/verben-ng-ui/src/lib/components/sort-table/verben-ng-ui-src-lib-components-sort-table.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { DataFilterType } from 'verben-ng-ui/src/lib/models';\nimport { IDataFilter } from 'verben-ng-ui/src/lib/models';\n\n@Component({\n selector: 'verben-sort-table',\n templateUrl: './sort-table.component.html',\n styleUrls: ['./sort-table.component.css'],\n})\nexport class SortTableComponent {\n @Input() enableDragAndDrop: boolean = false;\n @Input() sortOptions: IDataFilter[] = [];\n @Input() resetText: string = 'Reset';\n @Input() displayedOptions: number = 4;\n @Input() propertyText: string = 'Property';\n @Input() showMoreText: string = 'Show more';\n @Input() sortButtonText: string = 'Sort';\n @Input() pd?: string;\n @Input() mg?: string;\n @Input() height?: string;\n @Input() width?: string;\n @Input() bgColor?: string;\n @Input() boxShadow?: string;\n @Input() textColor?: string;\n @Input() primaryColor?: string;\n @Input() secondaryColor?: string;\n @Input() tertiaryColor?: string;\n @Input() border?: string = '';\n @Input() borderRadius?: string;\n @Input() selectWidth?: string;\n @Input() containerHeight?: string = '400px';\n @Output() selectedOptions = new EventEmitter<IDataFilter[]>();\n @Output() resetSortData = new EventEmitter();\n draggedIndex: number | null = null;\n visibleSortOptions: IDataFilter[] = [];\n hiddenSortOptions: IDataFilter[] = [];\n showMore: boolean = false;\n disableSortButton: boolean = false;\n selectedOrders: Map<number, 'asc' | 'desc'> = new Map();\n defaultSortOptions: IDataFilter[] = [];\n checkAll: boolean = false;\n ngOnInit() {\n this.defaultSortOptions = [...this.sortOptions];\n this.updateVisibleOptions();\n this.updateSortButtonState();\n }\n\n updateVisibleOptions() {\n if (this.sortOptions.length > this.displayedOptions) {\n this.visibleSortOptions = this.sortOptions.slice(\n 0,\n this.displayedOptions\n );\n this.hiddenSortOptions = this.sortOptions.slice(this.displayedOptions);\n this.showMore = true;\n } else {\n this.visibleSortOptions = this.sortOptions;\n this.showMore = false;\n }\n }\n\n toggleShowMore() {\n if (this.showMoreText === 'Show more') {\n this.visibleSortOptions.push(...this.hiddenSortOptions);\n this.showMoreText = 'Show less';\n } else {\n this.updateVisibleOptions();\n this.showMoreText = 'Show more';\n }\n }\n applySort() {\n const selectedSorts = this.sortOptions.filter((option) => option.checked);\n const selectedSortDetails = selectedSorts.map((sort, index) => {\n return {\n name: sort.name,\n type: sort.type || 'String',\n value:\n this.getSortOrder(\n sort.type,\n this.selectedOrders.get(index) || 'asc'\n ) || '',\n checked: sort.checked || false,\n };\n });\n this.selectedOptions.emit(selectedSortDetails);\n return selectedSortDetails;\n }\n getSortOrder(type: DataFilterType, selectedOrder: 'asc' | 'desc') {\n if (type === 'Number') {\n return selectedOrder === 'asc' ? 'asc' : 'desc';\n } else if (type === 'String') {\n return selectedOrder === 'asc' ? 'asc' : 'desc';\n } else if (type === 'Date') {\n return selectedOrder === 'asc' ? 'asc' : 'desc';\n }\n return null;\n }\n\n toggleSort(index: number) {\n const option = this.sortOptions[index];\n option.checked = !option.checked;\n if (!option.checked) {\n this.checkAll = false;\n } else if (this.sortOptions.every((option) => option.checked)) {\n this.checkAll = true;\n }\n\n if (option.checked) {\n this.selectedOrders.set(index, 'asc');\n } else {\n this.selectedOrders.delete(index);\n }\n this.updateSortButtonState();\n }\n toggleSelectAll() {\n this.checkAll = !this.checkAll; // Toggle checkAll state\n\n // Set all options to checked/unchecked and assign default sort order when checked\n this.sortOptions.forEach((option, index) => {\n option.checked = this.checkAll;\n\n if (this.checkAll) {\n // If checked, set the default sort order to 'asc' for all\n this.selectedOrders.set(index, 'asc');\n } else {\n // If unchecked, remove the sort order\n this.selectedOrders.delete(index);\n }\n });\n\n this.updateSortButtonState(); // Update the state of the sort button\n }\n\n resetSort() {\n this.sortOptions.forEach((option, index) => {\n option.checked = false;\n this.selectedOrders.delete(index);\n });\n\n this.sortOptions = [...this.defaultSortOptions];\n this.updateVisibleOptions();\n this.updateSortButtonState();\n this.checkAll = false;\n this.resetSortData.emit();\n }\n\n updateSortButtonState() {\n this.disableSortButton = this.countSelectedSorts() === 0;\n }\n\n countSelectedSorts(): number {\n return this.sortOptions.filter((option) => option.checked).length;\n }\n\n setSortOrder(index: number, order: 'asc' | 'desc') {\n this.selectedOrders.set(index, order);\n }\n\n onDragStart(index: number, event: DragEvent) {\n if (!this.enableDragAndDrop) return;\n this.draggedIndex = index;\n event.dataTransfer?.setData('text/plain', String(index));\n }\n\n onDragOver(event: DragEvent) {\n if (!this.enableDragAndDrop) return;\n event.preventDefault();\n }\n\n onDrop(index: number, event: DragEvent) {\n if (!this.enableDragAndDrop) return;\n event.preventDefault();\n if (this.draggedIndex !== null) {\n this.swapColumns(this.draggedIndex, index);\n }\n }\n\n swapColumns(fromIndex: number, toIndex: number) {\n if (\n fromIndex < this.visibleSortOptions.length &&\n toIndex < this.visibleSortOptions.length\n ) {\n const temp = this.visibleSortOptions[fromIndex];\n this.visibleSortOptions[fromIndex] = this.visibleSortOptions[toIndex];\n this.visibleSortOptions[toIndex] = temp;\n\n const globalFromIndex = this.sortOptions.indexOf(temp);\n const globalToIndex = this.sortOptions.indexOf(\n this.visibleSortOptions[fromIndex]\n );\n\n if (globalFromIndex !== -1 && globalToIndex !== -1) {\n const tempGlobal = this.sortOptions[globalFromIndex];\n this.sortOptions[globalFromIndex] = this.sortOptions[globalToIndex];\n this.sortOptions[globalToIndex] = tempGlobal;\n }\n }\n this.draggedIndex = null;\n }\n}\n","<div\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n class=\"sort-wrapper\"\n>\n <!-- Header Section -->\n <div class=\"sort-header flex justify-between text-sm\">\n <span class=\"sort-title font-semibold\">\n Sort\n <sup [style.color]=\"secondaryColor\">[{{ countSelectedSorts() }}]</sup>\n </span>\n <span\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n class=\"cursor-pointer\"\n (click)=\"resetSort()\"\n >\n {{ resetText }}\n </span>\n </div>\n\n <hr />\n\n <!-- Sort Options (Scrollable Section) -->\n <div class=\"sort-options flex-grow overflow-y-auto my-2\">\n <p class=\"pd\">{{ propertyText }}</p>\n\n <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n <input type=\"checkbox\" [checked]=\"checkAll\" (change)=\"toggleSelectAll()\" />\n Select All\n </label>\n </div>\n\n <div\n *ngFor=\"let option of visibleSortOptions; let i = index\"\n [attr.draggable]=\"enableDragAndDrop\"\n (dragstart)=\"onDragStart(i, $event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(i, $event)\"\n class=\"sort-option\"\n >\n <div [style.font-size]=\"'14px'\" [style.margin-top]=\"'13px'\">\n <div class=\"flex items-center gap-md\">\n <verben-svg\n *ngIf=\"enableDragAndDrop\"\n fill=\"var(--vbn-color-text)\"\n [width]=\"25\"\n class=\"svg\"\n icon=\"square-dot\"\n ></verben-svg>\n <div class=\"flex items-center gap\">\n <input\n type=\"checkbox\"\n [checked]=\"option.checked\"\n (change)=\"toggleSort(i)\"\n />\n <span>{{ option.name }}</span>\n </div>\n </div>\n\n <!-- Sorting Controls -->\n <div class=\"flex items-center gap\" [style.margin-left]=\"'35px'\">\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n 1-100\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n 100-1\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n A-Z\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n Z-A\n </label>\n </div>\n </div>\n </div>\n\n <!-- Show More -->\n <div *ngIf=\"showMore && hiddenSortOptions.length > 0\">\n <span\n [style.padding]=\"'20px 10px 0px 10px'\"\n [style.color]=\"'var(--vbn-color-text)'\"\n class=\"cursor-pointer block\"\n (click)=\"toggleShowMore()\"\n >\n {{ showMoreText }}\n </span>\n </div>\n </div>\n\n <hr />\n\n <!-- Sort Button -->\n <div class=\"btn-wrapper mt-2 flex-shrink-0\">\n <button\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n [disabled]=\"countSelectedSorts() === 0\"\n [ngClass]=\"{\n disabledBtn: countSelectedSorts() === 0,\n enableBtn: countSelectedSorts() !== 0\n }\"\n (click)=\"applySort()\"\n >\n {{ sortButtonText }}\n </button>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { SortTableComponent } from './sort-table.component';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\n@NgModule({\n declarations: [SortTableComponent],\n imports: [FormsModule, CommonModule, CommonModule, FormsModule, SvgModule],\n exports: [SortTableComponent],\n})\nexport class SortTableModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"verben-ng-ui-src-lib-components-sort-table.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/sort-table/sort-table.component.ts","../../../projects/verben-ng-ui/src/lib/components/sort-table/sort-table.component.html","../../../projects/verben-ng-ui/src/lib/components/sort-table/sort-table.module.ts","../../../projects/verben-ng-ui/src/lib/components/sort-table/verben-ng-ui-src-lib-components-sort-table.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { DataFilterType } from 'verben-ng-ui/src/lib/models';\nimport { IDataFilter } from 'verben-ng-ui/src/lib/models';\n\n@Component({\n selector: 'verben-sort-table',\n templateUrl: './sort-table.component.html',\n styleUrls: ['./sort-table.component.css'],\n})\nexport class SortTableComponent {\n @Input() enableDragAndDrop: boolean = false;\n @Input() sortOptions: IDataFilter[] = [];\n @Input() resetText: string = 'Reset';\n @Input() displayedOptions: number = 4;\n @Input() propertyText: string = 'Property';\n @Input() showMoreText: string = 'Show more';\n @Input() sortButtonText: string = 'Confirm';\n @Input() pd?: string;\n @Input() mg?: string;\n @Input() height?: string;\n @Input() width?: string;\n @Input() bgColor?: string;\n @Input() boxShadow?: string;\n @Input() textColor?: string;\n @Input() primaryColor?: string;\n @Input() secondaryColor?: string;\n @Input() tertiaryColor?: string;\n @Input() border?: string = '';\n @Input() borderRadius?: string;\n @Input() selectWidth?: string;\n @Input() containerHeight?: string = '400px';\n @Output() selectedOptions = new EventEmitter<IDataFilter[]>();\n @Output() resetSortData = new EventEmitter();\n draggedIndex: number | null = null;\n visibleSortOptions: IDataFilter[] = [];\n hiddenSortOptions: IDataFilter[] = [];\n showMore: boolean = false;\n disableSortButton: boolean = false;\n selectedOrders: Map<number, 'asc' | 'desc'> = new Map();\n defaultSortOptions: IDataFilter[] = [];\n checkAll: boolean = false;\n ngOnInit() {\n this.defaultSortOptions = [...this.sortOptions];\n this.updateVisibleOptions();\n this.updateSortButtonState();\n }\n\n updateVisibleOptions() {\n if (this.sortOptions.length > this.displayedOptions) {\n this.visibleSortOptions = this.sortOptions.slice(\n 0,\n this.displayedOptions,\n );\n this.hiddenSortOptions = this.sortOptions.slice(this.displayedOptions);\n this.showMore = true;\n } else {\n this.visibleSortOptions = this.sortOptions;\n this.showMore = false;\n }\n }\n\n toggleShowMore() {\n if (this.showMoreText === 'Show more') {\n this.visibleSortOptions.push(...this.hiddenSortOptions);\n this.showMoreText = 'Show less';\n } else {\n this.updateVisibleOptions();\n this.showMoreText = 'Show more';\n }\n }\n applySort() {\n const selectedSortDetails = this.sortOptions.reduce<IDataFilter[]>(\n (acc, sort, index) => {\n if (sort.checked) {\n acc.push({\n name: sort.name,\n type: sort.type || 'String',\n value:\n this.getSortOrder(\n sort.type,\n this.selectedOrders.get(index) || 'asc',\n ) || '',\n checked: sort.checked || false,\n });\n }\n return acc;\n },\n [],\n );\n this.selectedOptions.emit(selectedSortDetails);\n return selectedSortDetails;\n }\n getSortOrder(type: DataFilterType, selectedOrder: 'asc' | 'desc') {\n if (type === 'Number') {\n return selectedOrder === 'asc' ? 'asc' : 'desc';\n } else if (type === 'String') {\n return selectedOrder === 'asc' ? 'asc' : 'desc';\n } else if (type === 'Date') {\n return selectedOrder === 'asc' ? 'asc' : 'desc';\n }\n return null;\n }\n\n toggleSort(index: number) {\n const option = this.sortOptions[index];\n option.checked = !option.checked;\n if (!option.checked) {\n this.checkAll = false;\n } else if (this.sortOptions.every((option) => option.checked)) {\n this.checkAll = true;\n }\n\n if (option.checked) {\n this.selectedOrders.set(index, 'asc');\n } else {\n this.selectedOrders.delete(index);\n }\n this.updateSortButtonState();\n }\n toggleSelectAll() {\n this.checkAll = !this.checkAll; // Toggle checkAll state\n\n // Set all options to checked/unchecked and assign default sort order when checked\n this.sortOptions.forEach((option, index) => {\n option.checked = this.checkAll;\n\n if (this.checkAll) {\n // If checked, set the default sort order to 'asc' for all\n this.selectedOrders.set(index, 'asc');\n } else {\n // If unchecked, remove the sort order\n this.selectedOrders.delete(index);\n }\n });\n\n this.updateSortButtonState(); // Update the state of the sort button\n }\n\n resetSort() {\n this.sortOptions.forEach((option, index) => {\n option.checked = false;\n this.selectedOrders.delete(index);\n });\n\n this.sortOptions = [...this.defaultSortOptions];\n this.updateVisibleOptions();\n this.updateSortButtonState();\n this.checkAll = false;\n this.resetSortData.emit();\n this.applySort();\n }\n\n updateSortButtonState() {\n this.disableSortButton = this.countSelectedSorts() === 0;\n }\n\n countSelectedSorts(): number {\n return this.sortOptions.filter((option) => option.checked).length;\n }\n\n setSortOrder(index: number, order: 'asc' | 'desc') {\n this.selectedOrders.set(index, order);\n }\n\n onDragStart(index: number, event: DragEvent) {\n if (!this.enableDragAndDrop) return;\n this.draggedIndex = index;\n event.dataTransfer?.setData('text/plain', String(index));\n }\n\n onDragOver(event: DragEvent) {\n if (!this.enableDragAndDrop) return;\n event.preventDefault();\n }\n\n onDrop(index: number, event: DragEvent) {\n if (!this.enableDragAndDrop) return;\n event.preventDefault();\n if (this.draggedIndex !== null) {\n this.swapColumns(this.draggedIndex, index);\n }\n }\n\n swapColumns(fromIndex: number, toIndex: number) {\n if (\n fromIndex < this.visibleSortOptions.length &&\n toIndex < this.visibleSortOptions.length\n ) {\n const temp = this.visibleSortOptions[fromIndex];\n this.visibleSortOptions[fromIndex] = this.visibleSortOptions[toIndex];\n this.visibleSortOptions[toIndex] = temp;\n\n const globalFromIndex = this.sortOptions.indexOf(temp);\n const globalToIndex = this.sortOptions.indexOf(\n this.visibleSortOptions[fromIndex],\n );\n\n if (globalFromIndex !== -1 && globalToIndex !== -1) {\n const tempGlobal = this.sortOptions[globalFromIndex];\n this.sortOptions[globalFromIndex] = this.sortOptions[globalToIndex];\n this.sortOptions[globalToIndex] = tempGlobal;\n }\n }\n this.draggedIndex = null;\n }\n}\n","<div\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n class=\"sort-wrapper\"\n>\n <!-- Header Section -->\n <div class=\"sort-header flex justify-between text-sm\">\n <span class=\"sort-title font-semibold\">\n Sort\n <sup [style.color]=\"secondaryColor\">[{{ countSelectedSorts() }}]</sup>\n </span>\n <span\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n class=\"cursor-pointer\"\n (click)=\"resetSort()\"\n >\n {{ resetText }}\n </span>\n </div>\n\n <hr />\n\n <!-- Sort Options (Scrollable Section) -->\n <div class=\"sort-options flex-grow overflow-y-auto my-2\">\n <p class=\"pd\">{{ propertyText }}</p>\n\n <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n Select All\n </label>\n </div>\n\n <div\n *ngFor=\"let option of visibleSortOptions; let i = index\"\n [attr.draggable]=\"enableDragAndDrop\"\n (dragstart)=\"onDragStart(i, $event)\"\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop(i, $event)\"\n class=\"sort-option\"\n >\n <div [style.font-size]=\"'14px'\" [style.margin-top]=\"'13px'\">\n <div class=\"flex items-center gap-md\">\n <verben-svg\n *ngIf=\"enableDragAndDrop\"\n fill=\"var(--vbn-color-text)\"\n [width]=\"25\"\n class=\"svg\"\n icon=\"square-dot\"\n ></verben-svg>\n <div class=\"flex items-center gap\">\n <input\n type=\"checkbox\"\n [checked]=\"option.checked\"\n (change)=\"toggleSort(i)\"\n />\n <span>{{ option.name }}</span>\n </div>\n </div>\n\n <!-- Sorting Controls -->\n <div class=\"flex items-center gap\" [style.margin-left]=\"'35px'\">\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n 1-100\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'Number'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n 100-1\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"asc\"\n [checked]=\"selectedOrders.get(i) === 'asc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'asc')\"\n />\n A-Z\n </label>\n <label\n class=\"flex items-center gap-sm\"\n *ngIf=\"option.type === 'String' || option.type === 'Date'\"\n >\n <input\n type=\"radio\"\n name=\"sortOrder{{ i }}\"\n value=\"desc\"\n [checked]=\"selectedOrders.get(i) === 'desc'\"\n [disabled]=\"!option.checked\"\n (change)=\"setSortOrder(i, 'desc')\"\n />\n Z-A\n </label>\n </div>\n </div>\n </div>\n\n <!-- Show More -->\n <div *ngIf=\"showMore && hiddenSortOptions.length > 0\">\n <span\n [style.padding]=\"'20px 10px 0px 10px'\"\n [style.color]=\"'var(--vbn-color-text)'\"\n class=\"cursor-pointer block\"\n (click)=\"toggleShowMore()\"\n >\n {{ showMoreText }}\n </span>\n </div>\n </div>\n\n <hr />\n\n <!-- Sort Button -->\n <div class=\"btn-wrapper mt-2 flex-shrink-0\">\n <button\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applySort()\"\n >\n {{ sortButtonText }}\n </button>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { SortTableComponent } from './sort-table.component';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\n@NgModule({\n declarations: [SortTableComponent],\n imports: [FormsModule, CommonModule, CommonModule, FormsModule, SvgModule],\n exports: [SortTableComponent],\n})\nexport class SortTableModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/verben-ng-ui-src-lib-components-table-filter.mjs CHANGED
@@ -32,23 +32,24 @@ class TableFilterComponent {
32
32
  borderRadius;
33
33
  selectWidth;
34
34
  maxFilterLength = 3;
35
+ savedFilters = [];
35
36
  tooltip = false;
37
+ saveCallback;
36
38
  filtersApplied = new EventEmitter();
37
39
  resetSortData = new EventEmitter();
38
40
  filterArray = [];
39
41
  selectedFilterValue = '';
40
- selectedFilterType;
42
+ selectedFilterType = null;
41
43
  conditionOptions = [];
42
44
  selectedCondition = '';
43
45
  inputValue;
44
- savedFilters = [];
45
46
  selectedFilters = [];
46
47
  showAllFilters = false;
47
48
  editIndex = null;
48
49
  checkAll = false;
49
50
  isDuplicateFilter = false;
50
51
  disableAddFilterBtn = false;
51
- disableApplyFilterBtn = true;
52
+ //disableApplyFilterBtn: boolean = true;
52
53
  duplicateMessage = '';
53
54
  configInstance;
54
55
  storageKey = 'savedFilters';
@@ -72,15 +73,19 @@ class TableFilterComponent {
72
73
  this.selectedFilterType = null;
73
74
  this.selectedCondition = '';
74
75
  this.inputValue = '';
75
- this.savedFilters = [];
76
+ // this.savedFilters = [];
77
+ this.savedFilters.forEach((x) => {
78
+ x.checked = false;
79
+ });
76
80
  this.editIndex = null;
77
81
  this.checkAll = false;
78
82
  this.isDuplicateFilter = false;
79
- this.disableApplyFilterBtn = true;
83
+ // this.disableApplyFilterBtn = true;
80
84
  this.duplicateMessage = '';
81
85
  localStorage.removeItem(this.storageKey);
82
86
  this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
83
87
  this.resetSortData.emit();
88
+ this.applyFilters(true);
84
89
  }
85
90
  addFilter() {
86
91
  if (!this.selectedFilterValue ||
@@ -96,14 +101,14 @@ class TableFilterComponent {
96
101
  this.selectedCondition == 'On') {
97
102
  const leftFilter = {
98
103
  name: this.selectedFilterValue,
99
- type: this.selectedFilterType,
104
+ type: this.selectedFilterType || DataFilterType.String,
100
105
  condition: 'After',
101
106
  value: this.inputValue.concat(' 00:00'),
102
107
  checked: true,
103
108
  };
104
109
  const rightFilter = {
105
110
  name: this.selectedFilterValue,
106
- type: this.selectedFilterType,
111
+ type: this.selectedFilterType || DataFilterType.String,
107
112
  condition: 'Before',
108
113
  value: this.inputValue.concat(' 23:59'),
109
114
  checked: true,
@@ -133,7 +138,7 @@ class TableFilterComponent {
133
138
  else {
134
139
  const newFilter = {
135
140
  name: this.selectedFilterValue,
136
- type: this.selectedFilterType,
141
+ type: this.selectedFilterType || DataFilterType.String,
137
142
  condition: this.selectedCondition,
138
143
  value: this.inputValue,
139
144
  checked: true,
@@ -158,7 +163,7 @@ class TableFilterComponent {
158
163
  }
159
164
  }
160
165
  this.clearOperationSection();
161
- this.checkFilterButton();
166
+ // this.checkFilterButton();
162
167
  }
163
168
  toggleCheckbox(index) {
164
169
  this.savedFilters[index].checked = !this.savedFilters[index].checked;
@@ -168,11 +173,14 @@ class TableFilterComponent {
168
173
  deleteFilter(index) {
169
174
  this.savedFilters.splice(index, 1);
170
175
  this.checkDuplicateFilter();
171
- this.checkFilterButton();
176
+ // this.checkFilterButton();
172
177
  this.filterCount = this.savedFilters.filter((item) => item.checked === true).length;
173
178
  if (this.savedFilters.length === 0) {
174
179
  this.checkAll = false;
175
180
  }
181
+ if (this.saveCallback) {
182
+ this.saveCallback(this.savedFilters);
183
+ }
176
184
  }
177
185
  editFilter(index) {
178
186
  const filter = this.savedFilters[index];
@@ -183,8 +191,11 @@ class TableFilterComponent {
183
191
  this.inputValue = filter.value;
184
192
  this.editIndex = index;
185
193
  }
186
- applyFilters() {
194
+ applyFilters(skipSave = false) {
187
195
  this.selectedFilters = this.savedFilters.filter((filter) => filter.checked);
196
+ if (this.saveCallback && !skipSave) {
197
+ this.saveCallback(this.savedFilters);
198
+ }
188
199
  this.filtersApplied.emit(this.selectedFilters);
189
200
  this.filtersApplied.emit(this.storageKey);
190
201
  }
@@ -201,9 +212,9 @@ class TableFilterComponent {
201
212
  this.selectedCondition = '';
202
213
  this.inputValue = '';
203
214
  }
204
- checkFilterButton() {
205
- this.disableApplyFilterBtn = this.savedFilters.length === 0;
206
- }
215
+ // checkFilterButton() {
216
+ // this.disableApplyFilterBtn = this.savedFilters.length === 0;
217
+ // }
207
218
  toggleSelectAll() {
208
219
  this.checkAll = !this.checkAll;
209
220
  this.savedFilters.forEach((filter) => (filter.checked = this.checkAll));
@@ -231,11 +242,11 @@ class TableFilterComponent {
231
242
  }
232
243
  }
233
244
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
234
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: TableFilterComponent, selector: "verben-table-filter", inputs: { filterOptions: "filterOptions", pd: "pd", mg: "mg", height: "height", width: "width", bgColor: "bgColor", boxShadow: "boxShadow", textColor: "textColor", primaryColor: "primaryColor", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor", border: "border", borderRadius: "borderRadius", selectWidth: "selectWidth", maxFilterLength: "maxFilterLength", tooltip: "tooltip" }, outputs: { filtersApplied: "filtersApplied", resetSortData: "resetSortData" }, ngImport: i0, template: "<section\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n>\n <div class=\"top\">\n <h3 [style.color]=\"tertiaryColor\" [style.font-size]=\"'14px'\">\n Filters\n <span [style.color]=\"secondaryColor\"\n ><sup>({{ filterCount }})</sup></span\n >\n </h3>\n <button\n [style.color]=\"secondaryColor\"\n [style.background-color]=\"bgColor\"\n [style.border]=\"'none'\"\n [style.cursor]=\"'pointer'\"\n [style.font-size]=\"'12px'\"\n (click)=\"resetFilters()\"\n >\n Reset\n </button>\n </div>\n <hr />\n\n <!-- Saved Filters Section -->\n <div class=\"center\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Saved Filters</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n ></verben-svg>\n </div>\n <div class=\"selectAllWrapper\" *ngIf=\"savedFilters.length\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n <p [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">Select All</p>\n </div>\n <div\n *ngFor=\"let filter of visibleFilters; let i = index\"\n class=\"centerInnerWrapper\"\n >\n <div class=\"checkboxWrapper\">\n <span\n ><input\n type=\"checkbox\"\n [checked]=\"filter.checked\"\n (click)=\"toggleCheckbox(i)\"\n /></span>\n <p\n [style.font-size]=\"'13px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ filter.name }} {{ filter.condition }} {{ filter.value}}\n </p>\n </div>\n <div class=\"iconWrapper\">\n <verben-svg\n icon=\"pencil\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-border-focus)\"\n fill=\"var(--vbn-color-surface)\"\n (click)=\"editFilter(i)\"\n ></verben-svg>\n <verben-svg\n icon=\"trash\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-error)\"\n (click)=\"deleteFilter(i)\"\n ></verben-svg>\n </div>\n </div>\n\n <div\n class=\"moreWrapper\"\n *ngIf=\"savedFilters.length > maxFilterLength\"\n (click)=\"toggleShowMore()\"\n >\n <p\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ showAllFilters ? \"Show less\" : \"Show more\" }}\n </p>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"var(--vbn-color-text)\"\n stroke=\"var(--vbn-color-text)\"\n ></verben-svg>\n </div>\n </div>\n <hr />\n\n <!-- Operation Section -->\n <div class=\"bottom\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Operation</h3>\n <div [ngStyle]=\"{'position':'relative'}\"> \n \n <verben-tooltip \n [tooltipContent]=\"tooltipTemplate\"\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n width=\"200px\" \n [top]=\"'20px'\" \n [right]=\"'0px'\" \n >\n <verben-svg \n icon=\"info\" \n [width]=\"15\" \n [height]=\"15\" \n *ngIf=\"isDuplicateFilter\"\n fill=\"var(--vbn-color-error)\"\n >\n </verben-svg>\n </verben-tooltip>\n \n <ng-template #tooltipTemplate>\n {{duplicateMessage}}\n </ng-template>\n <!-- <verben-tooltip\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n [textColor]=\"'var(--vbn-color-surface)'\"\n [padding]=\"'10px'\"\n [borderRadius]=\"'8px'\"\n [top]=\"'20px'\" \n [right]=\"'0px'\" \n width=\"250px\" \n #tooltip \n *ngIf=\"tooltip\"\n >\n <h3>{{duplicateMessage}}</h3>\n </verben-tooltip> -->\n </div>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n *ngIf=\"!isDuplicateFilter\"\n ></verben-svg>\n </div>\n\n <div class=\"inputsWrapper\">\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n [options]=\"filterArray\"\n [(ngModel)]=\"selectedFilterValue\"\n (ngModelChange)=\"onFilterNameChange(selectedFilterValue)\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n placeholder=\"Select value\"\n [options]=\"conditionOptions\"\n (onChange)=\"checkDuplicateFilter()\"\n [(ngModel)]=\"selectedCondition\"\n >\n </verben-drop-down>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Date'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"80px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [type]=\"'date'\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Credit' || selectedFilterType === 'Integer'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input integer\"\n [showBorder]=\"true\"\n\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n\n appValidate=\"integer\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Decimal'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input a decimal\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"false\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"decimal\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType !== 'Credit' && selectedFilterType !== 'Date' && selectedFilterType !== 'Integer' && selectedFilterType !== 'Decimal'\"\n border=\"1px solid var(--vbn-color-border)\"\n placeHolder=\"input value\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n </div>\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.border-radius]=\"borderRadius\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [disabled]=\"disableAddFilterBtn\"\n [ngClass]=\"{\n disablebtn: disableAddFilterBtn,\n enableBtn: !disableAddFilterBtn\n }\"\n (click)=\"addFilter()\"\n >\n + Add\n </button>\n </div>\n <hr />\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applyFilters()\"\n [disabled]=\"disableApplyFilterBtn\"\n [ngClass]=\"{\n disablebtn: disableApplyFilterBtn,\n enableBtn: !disableApplyFilterBtn\n }\"\n >\n Filter\n </button>\n </div>\n\n\n </div>\n\n</section>\n", styles: ["h3,p{margin-top:0!important;margin-bottom:0!important}.top{display:flex;align-items:end;justify-content:space-between}hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.centerInnerWrapper{display:flex;align-items:center;justify-content:space-between}.savedWrapper{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.checkboxWrapper{display:flex;align-items:center;gap:.3rem}.iconWrapper{display:flex;align-items:center;gap:.7rem;cursor:pointer}.moreWrapper{display:flex;align-items:center;gap:.4rem;cursor:pointer}.center{overflow-y:auto;max-height:24rem}.inputsWrapper{margin-top:.5rem;display:flex;align-items:center;gap:.5rem}.btnWrapper{display:flex;justify-content:end}.inputsWrapper select:nth-of-type(1){width:120px}.inputsWrapper select:nth-of-type(2){width:70px}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.selectAllWrapper{display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem}.selectAllWrapper>input{cursor:pointer}.disablebtn{cursor:not-allowed}.enableBtn{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i5.ValidateDirective, selector: "[appValidate]", inputs: ["appValidate", "required", "showBorder", "showErrorMessage", "errorBorderColor", "errorMessageColor", "errorIconTooltipPosition", "showErrorIcon"] }, { kind: "component", type: i6.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }, { kind: "component", type: i7.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
245
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: TableFilterComponent, selector: "verben-table-filter", inputs: { filterOptions: "filterOptions", pd: "pd", mg: "mg", height: "height", width: "width", bgColor: "bgColor", boxShadow: "boxShadow", textColor: "textColor", primaryColor: "primaryColor", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor", border: "border", borderRadius: "borderRadius", selectWidth: "selectWidth", maxFilterLength: "maxFilterLength", savedFilters: "savedFilters", tooltip: "tooltip", saveCallback: "saveCallback" }, outputs: { filtersApplied: "filtersApplied", resetSortData: "resetSortData" }, ngImport: i0, template: "<section\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n>\n <div class=\"top\">\n <h3 [style.color]=\"tertiaryColor\" [style.font-size]=\"'14px'\">\n Filters\n <span [style.color]=\"secondaryColor\"\n ><sup>({{ filterCount }})</sup></span\n >\n </h3>\n <button\n [style.color]=\"secondaryColor\"\n [style.background-color]=\"bgColor\"\n [style.border]=\"'none'\"\n [style.cursor]=\"'pointer'\"\n [style.font-size]=\"'12px'\"\n (click)=\"resetFilters()\"\n >\n Reset\n </button>\n </div>\n <hr />\n\n <!-- Saved Filters Section -->\n <div class=\"center\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Saved Filters</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n ></verben-svg>\n </div>\n <div class=\"selectAllWrapper\" *ngIf=\"savedFilters.length\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n <p [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">Select All</p>\n </div>\n <div\n *ngFor=\"let filter of visibleFilters; let i = index\"\n class=\"centerInnerWrapper\"\n >\n <div class=\"checkboxWrapper\">\n <span\n ><input\n type=\"checkbox\"\n [checked]=\"filter.checked\"\n (click)=\"toggleCheckbox(i)\"\n /></span>\n <p\n [style.font-size]=\"'13px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ filter.name }} {{ filter.condition }} {{ filter.value }}\n </p>\n </div>\n <div class=\"iconWrapper\">\n <verben-svg\n icon=\"pencil\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-border-focus)\"\n fill=\"var(--vbn-color-surface)\"\n (click)=\"editFilter(i)\"\n ></verben-svg>\n <verben-svg\n icon=\"trash\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-error)\"\n (click)=\"deleteFilter(i)\"\n ></verben-svg>\n </div>\n </div>\n\n <div\n class=\"moreWrapper\"\n *ngIf=\"savedFilters.length > maxFilterLength\"\n (click)=\"toggleShowMore()\"\n >\n <p\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ showAllFilters ? \"Show less\" : \"Show more\" }}\n </p>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"var(--vbn-color-text)\"\n stroke=\"var(--vbn-color-text)\"\n ></verben-svg>\n </div>\n </div>\n <hr />\n\n <!-- Operation Section -->\n <div class=\"bottom\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Operation</h3>\n <div [ngStyle]=\"{ position: 'relative' }\">\n <verben-tooltip\n [tooltipContent]=\"tooltipTemplate\"\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n width=\"200px\"\n [top]=\"'20px'\"\n [right]=\"'0px'\"\n >\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n *ngIf=\"isDuplicateFilter\"\n fill=\"var(--vbn-color-error)\"\n >\n </verben-svg>\n </verben-tooltip>\n\n <ng-template #tooltipTemplate>\n {{ duplicateMessage }}\n </ng-template>\n <!-- <verben-tooltip\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n [textColor]=\"'var(--vbn-color-surface)'\"\n [padding]=\"'10px'\"\n [borderRadius]=\"'8px'\"\n [top]=\"'20px'\" \n [right]=\"'0px'\" \n width=\"250px\" \n #tooltip \n *ngIf=\"tooltip\"\n >\n <h3>{{duplicateMessage}}</h3>\n </verben-tooltip> -->\n </div>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n *ngIf=\"!isDuplicateFilter\"\n ></verben-svg>\n </div>\n\n <div class=\"inputsWrapper\">\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n [options]=\"filterArray\"\n [(ngModel)]=\"selectedFilterValue\"\n (ngModelChange)=\"onFilterNameChange(selectedFilterValue)\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n placeholder=\"Select value\"\n [options]=\"conditionOptions\"\n (onChange)=\"checkDuplicateFilter()\"\n [(ngModel)]=\"selectedCondition\"\n >\n </verben-drop-down>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Date'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"80px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [type]=\"'date'\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"\n selectedFilterType === 'Credit' || selectedFilterType === 'Integer'\n \"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input integer\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"integer\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Decimal'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input a decimal\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"false\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"decimal\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Number'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input number\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"false\"\n type=\"number\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"number\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"\n selectedFilterType !== 'Credit' &&\n selectedFilterType !== 'Date' &&\n selectedFilterType !== 'Integer' &&\n selectedFilterType !== 'Decimal' &&\n selectedFilterType !== 'Number'\n \"\n border=\"1px solid var(--vbn-color-border)\"\n placeHolder=\"input value\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n </div>\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.border-radius]=\"borderRadius\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [disabled]=\"disableAddFilterBtn\"\n [ngClass]=\"{\n disablebtn: disableAddFilterBtn,\n enableBtn: !disableAddFilterBtn,\n }\"\n (click)=\"addFilter()\"\n >\n + Add\n </button>\n </div>\n <hr />\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applyFilters()\"\n >\n Confirm\n </button>\n </div>\n </div>\n</section>\n", styles: ["h3,p{margin-top:0!important;margin-bottom:0!important}.top{display:flex;align-items:end;justify-content:space-between}hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.centerInnerWrapper{display:flex;align-items:center;justify-content:space-between}.savedWrapper{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.checkboxWrapper{display:flex;align-items:center;gap:.3rem}.iconWrapper{display:flex;align-items:center;gap:.7rem;cursor:pointer}.moreWrapper{display:flex;align-items:center;gap:.4rem;cursor:pointer}.center{overflow-y:auto;max-height:24rem}.inputsWrapper{margin-top:.5rem;display:flex;align-items:center;gap:.5rem}.btnWrapper{display:flex;justify-content:end}.inputsWrapper select:nth-of-type(1){width:120px}.inputsWrapper select:nth-of-type(2){width:70px}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.selectAllWrapper{display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem}.selectAllWrapper>input{cursor:pointer}.disablebtn{cursor:not-allowed}.enableBtn{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i5.ValidateDirective, selector: "[appValidate]", inputs: ["appValidate", "required", "showBorder", "showErrorMessage", "errorBorderColor", "errorMessageColor", "errorIconTooltipPosition", "showErrorIcon"] }, { kind: "component", type: i6.TooltipComponent, selector: "verben-tooltip", inputs: ["tooltipContent", "customClass", "backgroundColor", "textColor", "padding", "borderRadius", "zIndex", "border", "width", "top", "bottom", "left", "right"] }, { kind: "component", type: i7.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }] });
235
246
  }
236
247
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: TableFilterComponent, decorators: [{
237
248
  type: Component,
238
- args: [{ selector: 'verben-table-filter', template: "<section\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n>\n <div class=\"top\">\n <h3 [style.color]=\"tertiaryColor\" [style.font-size]=\"'14px'\">\n Filters\n <span [style.color]=\"secondaryColor\"\n ><sup>({{ filterCount }})</sup></span\n >\n </h3>\n <button\n [style.color]=\"secondaryColor\"\n [style.background-color]=\"bgColor\"\n [style.border]=\"'none'\"\n [style.cursor]=\"'pointer'\"\n [style.font-size]=\"'12px'\"\n (click)=\"resetFilters()\"\n >\n Reset\n </button>\n </div>\n <hr />\n\n <!-- Saved Filters Section -->\n <div class=\"center\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Saved Filters</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n ></verben-svg>\n </div>\n <div class=\"selectAllWrapper\" *ngIf=\"savedFilters.length\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n <p [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">Select All</p>\n </div>\n <div\n *ngFor=\"let filter of visibleFilters; let i = index\"\n class=\"centerInnerWrapper\"\n >\n <div class=\"checkboxWrapper\">\n <span\n ><input\n type=\"checkbox\"\n [checked]=\"filter.checked\"\n (click)=\"toggleCheckbox(i)\"\n /></span>\n <p\n [style.font-size]=\"'13px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ filter.name }} {{ filter.condition }} {{ filter.value}}\n </p>\n </div>\n <div class=\"iconWrapper\">\n <verben-svg\n icon=\"pencil\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-border-focus)\"\n fill=\"var(--vbn-color-surface)\"\n (click)=\"editFilter(i)\"\n ></verben-svg>\n <verben-svg\n icon=\"trash\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-error)\"\n (click)=\"deleteFilter(i)\"\n ></verben-svg>\n </div>\n </div>\n\n <div\n class=\"moreWrapper\"\n *ngIf=\"savedFilters.length > maxFilterLength\"\n (click)=\"toggleShowMore()\"\n >\n <p\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ showAllFilters ? \"Show less\" : \"Show more\" }}\n </p>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"var(--vbn-color-text)\"\n stroke=\"var(--vbn-color-text)\"\n ></verben-svg>\n </div>\n </div>\n <hr />\n\n <!-- Operation Section -->\n <div class=\"bottom\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Operation</h3>\n <div [ngStyle]=\"{'position':'relative'}\"> \n \n <verben-tooltip \n [tooltipContent]=\"tooltipTemplate\"\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n width=\"200px\" \n [top]=\"'20px'\" \n [right]=\"'0px'\" \n >\n <verben-svg \n icon=\"info\" \n [width]=\"15\" \n [height]=\"15\" \n *ngIf=\"isDuplicateFilter\"\n fill=\"var(--vbn-color-error)\"\n >\n </verben-svg>\n </verben-tooltip>\n \n <ng-template #tooltipTemplate>\n {{duplicateMessage}}\n </ng-template>\n <!-- <verben-tooltip\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n [textColor]=\"'var(--vbn-color-surface)'\"\n [padding]=\"'10px'\"\n [borderRadius]=\"'8px'\"\n [top]=\"'20px'\" \n [right]=\"'0px'\" \n width=\"250px\" \n #tooltip \n *ngIf=\"tooltip\"\n >\n <h3>{{duplicateMessage}}</h3>\n </verben-tooltip> -->\n </div>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n *ngIf=\"!isDuplicateFilter\"\n ></verben-svg>\n </div>\n\n <div class=\"inputsWrapper\">\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n [options]=\"filterArray\"\n [(ngModel)]=\"selectedFilterValue\"\n (ngModelChange)=\"onFilterNameChange(selectedFilterValue)\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n placeholder=\"Select value\"\n [options]=\"conditionOptions\"\n (onChange)=\"checkDuplicateFilter()\"\n [(ngModel)]=\"selectedCondition\"\n >\n </verben-drop-down>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Date'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"80px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [type]=\"'date'\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Credit' || selectedFilterType === 'Integer'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input integer\"\n [showBorder]=\"true\"\n\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n\n appValidate=\"integer\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Decimal'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input a decimal\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"false\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"decimal\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType !== 'Credit' && selectedFilterType !== 'Date' && selectedFilterType !== 'Integer' && selectedFilterType !== 'Decimal'\"\n border=\"1px solid var(--vbn-color-border)\"\n placeHolder=\"input value\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n </div>\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.border-radius]=\"borderRadius\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [disabled]=\"disableAddFilterBtn\"\n [ngClass]=\"{\n disablebtn: disableAddFilterBtn,\n enableBtn: !disableAddFilterBtn\n }\"\n (click)=\"addFilter()\"\n >\n + Add\n </button>\n </div>\n <hr />\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applyFilters()\"\n [disabled]=\"disableApplyFilterBtn\"\n [ngClass]=\"{\n disablebtn: disableApplyFilterBtn,\n enableBtn: !disableApplyFilterBtn\n }\"\n >\n Filter\n </button>\n </div>\n\n\n </div>\n\n</section>\n", styles: ["h3,p{margin-top:0!important;margin-bottom:0!important}.top{display:flex;align-items:end;justify-content:space-between}hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.centerInnerWrapper{display:flex;align-items:center;justify-content:space-between}.savedWrapper{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.checkboxWrapper{display:flex;align-items:center;gap:.3rem}.iconWrapper{display:flex;align-items:center;gap:.7rem;cursor:pointer}.moreWrapper{display:flex;align-items:center;gap:.4rem;cursor:pointer}.center{overflow-y:auto;max-height:24rem}.inputsWrapper{margin-top:.5rem;display:flex;align-items:center;gap:.5rem}.btnWrapper{display:flex;justify-content:end}.inputsWrapper select:nth-of-type(1){width:120px}.inputsWrapper select:nth-of-type(2){width:70px}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.selectAllWrapper{display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem}.selectAllWrapper>input{cursor:pointer}.disablebtn{cursor:not-allowed}.enableBtn{cursor:pointer}\n"] }]
249
+ args: [{ selector: 'verben-table-filter', template: "<section\n [style.background-color]=\"bgColor\"\n [style.box-shadow]=\"boxShadow\"\n [style.border]=\"border\"\n [style.border-radius]=\"borderRadius\"\n [style.color]=\"textColor\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n [style.padding]=\"pd\"\n>\n <div class=\"top\">\n <h3 [style.color]=\"tertiaryColor\" [style.font-size]=\"'14px'\">\n Filters\n <span [style.color]=\"secondaryColor\"\n ><sup>({{ filterCount }})</sup></span\n >\n </h3>\n <button\n [style.color]=\"secondaryColor\"\n [style.background-color]=\"bgColor\"\n [style.border]=\"'none'\"\n [style.cursor]=\"'pointer'\"\n [style.font-size]=\"'12px'\"\n (click)=\"resetFilters()\"\n >\n Reset\n </button>\n </div>\n <hr />\n\n <!-- Saved Filters Section -->\n <div class=\"center\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Saved Filters</h3>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n ></verben-svg>\n </div>\n <div class=\"selectAllWrapper\" *ngIf=\"savedFilters.length\">\n <input\n type=\"checkbox\"\n [checked]=\"checkAll\"\n (change)=\"toggleSelectAll()\"\n />\n <p [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">Select All</p>\n </div>\n <div\n *ngFor=\"let filter of visibleFilters; let i = index\"\n class=\"centerInnerWrapper\"\n >\n <div class=\"checkboxWrapper\">\n <span\n ><input\n type=\"checkbox\"\n [checked]=\"filter.checked\"\n (click)=\"toggleCheckbox(i)\"\n /></span>\n <p\n [style.font-size]=\"'13px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ filter.name }} {{ filter.condition }} {{ filter.value }}\n </p>\n </div>\n <div class=\"iconWrapper\">\n <verben-svg\n icon=\"pencil\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-border-focus)\"\n fill=\"var(--vbn-color-surface)\"\n (click)=\"editFilter(i)\"\n ></verben-svg>\n <verben-svg\n icon=\"trash\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"var(--vbn-color-error)\"\n (click)=\"deleteFilter(i)\"\n ></verben-svg>\n </div>\n </div>\n\n <div\n class=\"moreWrapper\"\n *ngIf=\"savedFilters.length > maxFilterLength\"\n (click)=\"toggleShowMore()\"\n >\n <p\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [style.color]=\"tertiaryColor\"\n >\n {{ showAllFilters ? \"Show less\" : \"Show more\" }}\n </p>\n <verben-svg\n icon=\"chevron\"\n [width]=\"8\"\n [height]=\"6\"\n fill=\"var(--vbn-color-text)\"\n stroke=\"var(--vbn-color-text)\"\n ></verben-svg>\n </div>\n </div>\n <hr />\n\n <!-- Operation Section -->\n <div class=\"bottom\">\n <div class=\"savedWrapper\">\n <h3 [style.font-size]=\"'13px'\">Operation</h3>\n <div [ngStyle]=\"{ position: 'relative' }\">\n <verben-tooltip\n [tooltipContent]=\"tooltipTemplate\"\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n width=\"200px\"\n [top]=\"'20px'\"\n [right]=\"'0px'\"\n >\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n *ngIf=\"isDuplicateFilter\"\n fill=\"var(--vbn-color-error)\"\n >\n </verben-svg>\n </verben-tooltip>\n\n <ng-template #tooltipTemplate>\n {{ duplicateMessage }}\n </ng-template>\n <!-- <verben-tooltip\n [backgroundColor]=\"'var(--vbn-color-surface-alt)'\"\n [textColor]=\"'var(--vbn-color-surface)'\"\n [padding]=\"'10px'\"\n [borderRadius]=\"'8px'\"\n [top]=\"'20px'\" \n [right]=\"'0px'\" \n width=\"250px\" \n #tooltip \n *ngIf=\"tooltip\"\n >\n <h3>{{duplicateMessage}}</h3>\n </verben-tooltip> -->\n </div>\n <verben-svg\n icon=\"info\"\n [width]=\"15\"\n [height]=\"15\"\n fill=\"var(--vbn-color-text-muted)\"\n *ngIf=\"!isDuplicateFilter\"\n ></verben-svg>\n </div>\n\n <div class=\"inputsWrapper\">\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n [options]=\"filterArray\"\n [(ngModel)]=\"selectedFilterValue\"\n (ngModelChange)=\"onFilterNameChange(selectedFilterValue)\"\n >\n </verben-drop-down>\n <verben-drop-down\n width=\"7rem\"\n placeholder=\"Select value\"\n placeholder=\"Select value\"\n [options]=\"conditionOptions\"\n (onChange)=\"checkDuplicateFilter()\"\n [(ngModel)]=\"selectedCondition\"\n >\n </verben-drop-down>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Date'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"80px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [type]=\"'date'\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"\n selectedFilterType === 'Credit' || selectedFilterType === 'Integer'\n \"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input integer\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"integer\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Decimal'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input a decimal\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"false\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"decimal\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"selectedFilterType === 'Number'\"\n border=\"1px solid var(--vbn-color-border)\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n placeHolder=\"input number\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"false\"\n type=\"number\"\n [errorPosition]=\"'bottom'\"\n appValidate=\"number\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"\n selectedFilterType !== 'Credit' &&\n selectedFilterType !== 'Date' &&\n selectedFilterType !== 'Integer' &&\n selectedFilterType !== 'Decimal' &&\n selectedFilterType !== 'Number'\n \"\n border=\"1px solid var(--vbn-color-border)\"\n placeHolder=\"input value\"\n borderRadius=\"5px\"\n textColor=\"var(--vbn-color-text)\"\n width=\"100px\"\n height=\"25px\"\n pd=\"6px\"\n [showBorder]=\"true\"\n [showErrorMessage]=\"true\"\n [errorPosition]=\"'bottom'\"\n [(ngModel)]=\"inputValue\"\n ></verbena-input>\n </div>\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.border-radius]=\"borderRadius\"\n [style.background-color]=\"'transparent'\"\n [style.color]=\"secondaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'500'\"\n [disabled]=\"disableAddFilterBtn\"\n [ngClass]=\"{\n disablebtn: disableAddFilterBtn,\n enableBtn: !disableAddFilterBtn,\n }\"\n (click)=\"addFilter()\"\n >\n + Add\n </button>\n </div>\n <hr />\n\n <div class=\"btnWrapper\">\n <button\n [style.margin-top]=\"'0.5rem'\"\n [style.outline]=\"'none'\"\n [style.border]=\"'none'\"\n [style.padding]=\"'0.2rem 1.6rem'\"\n [style.background-color]=\"primaryColor\"\n [style.color]=\"tertiaryColor\"\n [style.font-size]=\"'12px'\"\n [style.font-weight]=\"'600'\"\n (click)=\"applyFilters()\"\n >\n Confirm\n </button>\n </div>\n </div>\n</section>\n", styles: ["h3,p{margin-top:0!important;margin-bottom:0!important}.top{display:flex;align-items:end;justify-content:space-between}hr{border:1px solid var(--vbn-color-border);margin:.8rem 0rem}.centerInnerWrapper{display:flex;align-items:center;justify-content:space-between}.savedWrapper{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.checkboxWrapper{display:flex;align-items:center;gap:.3rem}.iconWrapper{display:flex;align-items:center;gap:.7rem;cursor:pointer}.moreWrapper{display:flex;align-items:center;gap:.4rem;cursor:pointer}.center{overflow-y:auto;max-height:24rem}.inputsWrapper{margin-top:.5rem;display:flex;align-items:center;gap:.5rem}.btnWrapper{display:flex;justify-content:end}.inputsWrapper select:nth-of-type(1){width:120px}.inputsWrapper select:nth-of-type(2){width:70px}input[type=checkbox].checked{accent-color:var(--vbn-color-border-focus)}.selectAllWrapper{display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem}.selectAllWrapper>input{cursor:pointer}.disablebtn{cursor:not-allowed}.enableBtn{cursor:pointer}\n"] }]
239
250
  }], ctorParameters: () => [], propDecorators: { filterOptions: [{
240
251
  type: Input
241
252
  }], pd: [{
@@ -266,8 +277,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
266
277
  type: Input
267
278
  }], maxFilterLength: [{
268
279
  type: Input
280
+ }], savedFilters: [{
281
+ type: Input
269
282
  }], tooltip: [{
270
283
  type: Input
284
+ }], saveCallback: [{
285
+ type: Input
271
286
  }], filtersApplied: [{
272
287
  type: Output
273
288
  }], resetSortData: [{