@sd-angular/core 19.0.0-beta.89 → 19.0.0-beta.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/anchor/index.d.ts +1 -2
- package/components/anchor/src/components/anchor-vertical/{anchor-list/anchor-list.component.d.ts → anchor-vertical-list.component.d.ts} +4 -4
- package/components/anchor/src/components/index.d.ts +1 -1
- package/components/anchor/src/index.d.ts +2 -0
- package/components/anchor/src/models/index.d.ts +1 -1
- package/components/anchor/src/models/{anchor.model.d.ts → sd-anchor.model.d.ts} +0 -5
- package/fesm2022/sd-angular-core-components-anchor.mjs +9 -9
- package/fesm2022/sd-angular-core-components-anchor.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +2 -2
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-workflow.mjs +5 -5
- package/fesm2022/sd-angular-core-components-workflow.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input-number.mjs +13 -5
- package/fesm2022/sd-angular-core-forms-input-number.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-layout.mjs +1 -1
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/fesm2022/sd-angular-core-pipes.mjs +3 -4
- package/fesm2022/sd-angular-core-pipes.mjs.map +1 -1
- package/fesm2022/sd-angular-core-services-api.mjs +2 -1
- package/fesm2022/sd-angular-core-services-api.mjs.map +1 -1
- package/forms/input-number/src/input-number.component.d.ts +2 -1
- package/package.json +40 -40
- package/pipes/src/format-number.pipe.d.ts +1 -1
- package/sd-angular-core-19.0.0-beta.90.tgz +0 -0
- package/services/api/src/api.model.d.ts +1 -0
- package/sd-angular-core-19.0.0-beta.89.tgz +0 -0
- /package/components/anchor/src/components/{main/main.component.d.ts → anchor/anchor.component.d.ts} +0 -0
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from './src
|
|
2
|
-
export * from './src/models';
|
|
1
|
+
export * from './src';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OnDestroy } from '@angular/core';
|
|
2
|
-
import { SdAnchorItem } from '
|
|
2
|
+
import { SdAnchorItem } from '../anchor-item/anchor-item.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
export declare class
|
|
4
|
+
export declare class SdAnchorVerticalList implements OnDestroy {
|
|
5
5
|
#private;
|
|
6
6
|
sections: import("@angular/core").InputSignal<readonly SdAnchorItem[]>;
|
|
7
7
|
activeSectionId: import("@angular/core").InputSignal<string>;
|
|
@@ -11,6 +11,6 @@ export declare class SdVerticalAnchorList implements OnDestroy {
|
|
|
11
11
|
constructor();
|
|
12
12
|
onClickSection: (id: string) => void;
|
|
13
13
|
ngOnDestroy(): void;
|
|
14
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<
|
|
15
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<
|
|
14
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchorVerticalList, never>;
|
|
15
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorVerticalList, "sd-anchor-vertical-list", never, { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "activeSectionId": { "alias": "activeSectionId"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; }, { "sdClickSection": "sdClickSection"; }, never, never, true, never>;
|
|
16
16
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './anchor-item/anchor-item.component';
|
|
2
|
-
export * from './
|
|
2
|
+
export * from './anchor/anchor.component';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './anchor.model';
|
|
1
|
+
export * from './sd-anchor.model';
|
|
@@ -20,14 +20,14 @@ class SdAnchorItem {
|
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
22
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchorItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: SdAnchorItem, isStandalone: true, selector: "sd-anchor-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: SdAnchorItem, isStandalone: true, selector: "sd-anchor-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section>\r\n <ng-content></ng-content>\r\n</section>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchorItem, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'sd-anchor-item', imports: [CommonModule], standalone: true, template: "<section
|
|
27
|
+
args: [{ selector: 'sd-anchor-item', imports: [CommonModule], standalone: true, template: "<section>\r\n <ng-content></ng-content>\r\n</section>\r\n" }]
|
|
28
28
|
}], ctorParameters: () => [] });
|
|
29
29
|
|
|
30
|
-
class
|
|
30
|
+
class SdAnchorVerticalList {
|
|
31
31
|
sections = input.required();
|
|
32
32
|
activeSectionId = input('');
|
|
33
33
|
ellipsis = input(false);
|
|
@@ -47,12 +47,12 @@ class SdVerticalAnchorList {
|
|
|
47
47
|
ngOnDestroy() {
|
|
48
48
|
this.#subscription.unsubscribe();
|
|
49
49
|
}
|
|
50
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type:
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type:
|
|
50
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchorVerticalList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAnchorVerticalList, isStandalone: true, selector: "sd-anchor-vertical-list", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null }, activeSectionId: { classPropertyName: "activeSectionId", publicName: "activeSectionId", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClickSection: "sdClickSection" }, ngImport: i0, template: "<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\n @for (section of sections(); track section.id) {\n <div\n class=\"c-anchor-list-item\"\n [class.active]=\"section.id === activeSectionId()\"\n (click)=\"onClickSection(section.id)\"\n (keydown.enter)=\"onClickSection(section.id)\"\n tabindex=\"0\">\n @if (section.icon()) {\n <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n }\n <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n {{ section.title() }}\n </div>\n </div>\n }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-anchor-list{height:100%;display:flex;flex-direction:column}.c-anchor-list .c-anchor-list-item{border-left:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--sd-primary);font-weight:700}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52
52
|
}
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type:
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchorVerticalList, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'sd-vertical-
|
|
55
|
+
args: [{ selector: 'sd-anchor-vertical-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule], standalone: true, template: "<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\n @for (section of sections(); track section.id) {\n <div\n class=\"c-anchor-list-item\"\n [class.active]=\"section.id === activeSectionId()\"\n (click)=\"onClickSection(section.id)\"\n (keydown.enter)=\"onClickSection(section.id)\"\n tabindex=\"0\">\n @if (section.icon()) {\n <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n }\n <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n {{ section.title() }}\n </div>\n </div>\n }\n</div>\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-anchor-list{height:100%;display:flex;flex-direction:column}.c-anchor-list .c-anchor-list-item{border-left:2px solid var(--sd-secondary-light);color:var(--sd-black500);padding:.5rem 1.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.c-anchor-list .c-anchor-list-item .c-anchor-list-item-text.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-anchor-list .c-anchor-list-item.active{border-left:2px solid var(--sd-primary);font-weight:700}.c-anchor-list .c-anchor-list-item:not(.active){border-left:2px solid var(--sd-secondary-light);font-weight:400}\n"] }]
|
|
56
56
|
}], ctorParameters: () => [] });
|
|
57
57
|
|
|
58
58
|
class SdAnchor {
|
|
@@ -136,11 +136,11 @@ class SdAnchor {
|
|
|
136
136
|
this.#disposeResources();
|
|
137
137
|
}
|
|
138
138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, isOverscroll: { classPropertyName: "isOverscroll", publicName: "isOverscroll", isSignal: true, isRequired: false, transformFunction: null }, isHiddenAnchorList: { classPropertyName: "isHiddenAnchorList", publicName: "isHiddenAnchorList", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: SdAnchorItem, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAnchor, isStandalone: true, selector: "sd-anchor", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, isOverscroll: { classPropertyName: "isOverscroll", publicName: "isOverscroll", isSignal: true, isRequired: false, transformFunction: null }, isHiddenAnchorList: { classPropertyName: "isHiddenAnchorList", publicName: "isHiddenAnchorList", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: SdAnchorItem, isSignal: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\n <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\n <ng-content></ng-content>\n </div>\n\n @if (!isHiddenAnchorList()) {\n <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\n <sd-anchor-vertical-list\n [sections]=\"sections()\"\n [ellipsis]=\"ellipsis()\"\n [sidebarWidth]=\"sidebarWidth()\"\n [activeSectionId]=\"activeSectionId()\"\n (sdClickSection)=\"scrollSectionByClick($event)\">\n </sd-anchor-vertical-list>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{width:100%}.c-anchor-vertical .c-anchor-list{position:sticky;top:0;right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SdAnchorVerticalList, selector: "sd-anchor-vertical-list", inputs: ["sections", "activeSectionId", "ellipsis", "sidebarWidth"], outputs: ["sdClickSection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
140
140
|
}
|
|
141
141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAnchor, decorators: [{
|
|
142
142
|
type: Component,
|
|
143
|
-
args: [{ selector: 'sd-anchor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule,
|
|
143
|
+
args: [{ selector: 'sd-anchor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SdAnchorVerticalList], standalone: true, template: "<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\n <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\n <ng-content></ng-content>\n </div>\n\n @if (!isHiddenAnchorList()) {\n <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\n <sd-anchor-vertical-list\n [sections]=\"sections()\"\n [ellipsis]=\"ellipsis()\"\n [sidebarWidth]=\"sidebarWidth()\"\n [activeSectionId]=\"activeSectionId()\"\n (sdClickSection)=\"scrollSectionByClick($event)\">\n </sd-anchor-vertical-list>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.c-anchor-vertical{position:relative;display:flex;height:100%;width:100%;gap:16px;overflow-y:auto}.c-anchor-vertical.c-stop-scroll-propagation{overscroll-behavior:contain}.c-anchor-vertical .c-anchor-content{width:100%}.c-anchor-vertical .c-anchor-list{position:sticky;top:0;right:6px}\n"] }]
|
|
144
144
|
}], ctorParameters: () => [] });
|
|
145
145
|
|
|
146
146
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-angular-core-components-anchor.mjs","sources":["../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.html","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-list/anchor-list.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-list/anchor-list.component.html","../../../projects/sd-angular/components/anchor/src/components/main/main.component.ts","../../../projects/sd-angular/components/anchor/src/components/main/main.component.html","../../../projects/sd-angular/components/anchor/sd-angular-core-components-anchor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, effect, inject, input } from '@angular/core';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { IAnchorItem } from '../../models';\r\n\r\n@Component({\r\n selector: 'sd-anchor-item',\r\n templateUrl: './anchor-item.component.html',\r\n styleUrls: ['./anchor-item.component.scss'],\r\n imports: [CommonModule],\r\n standalone: true,\r\n})\r\nexport class SdAnchorItem implements IAnchorItem {\r\n title = input.required<string>();\r\n icon = input<string | undefined>();\r\n id: string = uuidv4();\r\n elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n if (this.title()) {\r\n this.elementRef.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n}\r\n","<section [attr.data-sd-anchor-section-id]=\"id\">\r\n <ng-content [attr.data-sd-anchor-section-id]=\"id\"></ng-content>\r\n</section>\r\n","import { ChangeDetectionStrategy, Component, OnDestroy, input, output } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { Subject, Subscription, debounceTime } from 'rxjs';\r\nimport { SdAnchorItem } from '../../anchor-item/anchor-item.component';\r\n\r\n@Component({\r\n selector: 'sd-vertical-anchor-list',\r\n templateUrl: './anchor-list.component.html',\r\n styleUrls: ['./anchor-list.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [CommonModule, MatIconModule],\r\n standalone: true,\r\n})\r\nexport class SdVerticalAnchorList implements OnDestroy {\r\n sections = input.required<readonly SdAnchorItem[]>();\r\n activeSectionId = input<string>('');\r\n ellipsis = input<boolean>(false);\r\n sidebarWidth = input<string>('');\r\n\r\n sdClickSection = output<string>();\r\n\r\n #delay = 200;\r\n #clickSectionSubject = new Subject<string>();\r\n #subscription = new Subscription();\r\n\r\n constructor() {\r\n this.#subscription.add(\r\n this.#clickSectionSubject\r\n .pipe(debounceTime(this.#delay))\r\n .subscribe((id: string) => this.sdClickSection.emit(id))\r\n );\r\n }\r\n\r\n onClickSection = (id: string): void => {\r\n this.#clickSectionSubject.next(id);\r\n };\r\n\r\n ngOnDestroy(): void {\r\n this.#subscription.unsubscribe();\r\n }\r\n}\r\n","<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\r\n @for (section of sections(); track section.id) {\r\n <div\r\n class=\"c-anchor-list-item\"\r\n [class.active]=\"section.id === activeSectionId()\"\r\n (click)=\"onClickSection(section.id)\"\r\n (keydown.enter)=\"onClickSection(section.id)\"\r\n tabindex=\"0\">\r\n @if (section.icon()) {\r\n <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\r\n }\r\n <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\r\n {{ section.title() }}\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n OnDestroy,\r\n afterNextRender,\r\n booleanAttribute,\r\n contentChildren,\r\n input,\r\n signal,\r\n viewChild,\r\n} from '@angular/core';\r\nimport { Subscription, auditTime, debounceTime, filter, fromEvent, map, take } from 'rxjs';\r\nimport { SdVerticalAnchorList } from '../anchor-vertical/anchor-list/anchor-list.component';\r\nimport { SdAnchorItem } from '../anchor-item/anchor-item.component';\r\n\r\n@Component({\r\n selector: 'sd-anchor',\r\n templateUrl: './main.component.html',\r\n styleUrls: ['./main.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [CommonModule, SdVerticalAnchorList],\r\n standalone: true,\r\n})\r\nexport class SdAnchor implements OnDestroy {\r\n wrapper = viewChild.required<ElementRef>('wrapper');\r\n sections = contentChildren(SdAnchorItem);\r\n\r\n type = input<'vertical' | 'horizontal'>('vertical');\r\n sidebarWidth = input<string>('200px');\r\n ellipsis = input(false, { transform: booleanAttribute });\r\n isOverscroll = input(false, { transform: booleanAttribute });\r\n isHiddenAnchorList = input(false, { transform: booleanAttribute });\r\n\r\n activeSectionId = signal<string>('');\r\n\r\n #scrollSubscription = new Subscription();\r\n #clickScrollSubscription = new Subscription();\r\n #delay = 100;\r\n #currentScrollTop = 0;\r\n #timeoutId: ReturnType<typeof setTimeout> | null = null;\r\n\r\n constructor() {\r\n afterNextRender(() => {\r\n if (!this.isHiddenAnchorList()) {\r\n this.activeSectionId.set(this.sections()[0]?.id ?? '');\r\n this.#registerScrollSubscription();\r\n }\r\n });\r\n }\r\n\r\n #registerScrollSubscription = (): void => {\r\n this.#disposeResources();\r\n const wrapperEl = this.wrapper().nativeElement;\r\n this.#scrollSubscription = fromEvent<UIEvent>(wrapperEl, 'scroll')\r\n .pipe(auditTime(50))\r\n .subscribe((event: UIEvent) => {\r\n const el = event.target as HTMLElement;\r\n this.#currentScrollTop = this.#updateCurrentScroll(el);\r\n for (const section of this.sections()) {\r\n const rect = section.elementRef.nativeElement;\r\n const rectTop = rect.offsetTop;\r\n const rectBottom = rectTop + rect.offsetHeight;\r\n if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {\r\n this.activeSectionId.set(section.id);\r\n break;\r\n }\r\n }\r\n });\r\n };\r\n\r\n scrollSectionByClick(idSectionTarget: string): void {\r\n this.activeSectionId.set(idSectionTarget);\r\n const targetSection = this.sections().find(s => s.id === idSectionTarget)?.elementRef;\r\n if (!targetSection) return;\r\n\r\n this.#disposeResources();\r\n const wrapperEl = this.wrapper().nativeElement;\r\n const targetElement = targetSection.nativeElement;\r\n const prevScrollTop = this.#currentScrollTop;\r\n\r\n this.#clickScrollSubscription = fromEvent<UIEvent>(wrapperEl, 'scroll')\r\n .pipe(\r\n auditTime(this.#delay),\r\n map((event: UIEvent) => {\r\n const el = event.target as HTMLElement;\r\n this.#currentScrollTop = this.#updateCurrentScroll(el);\r\n const wrapperTop = wrapperEl.getBoundingClientRect().top;\r\n const targetRect = targetElement.getBoundingClientRect();\r\n const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight;\r\n return Math.abs(targetRect.top - wrapperTop) < 1 || isVisible;\r\n }),\r\n filter(Boolean),\r\n debounceTime(this.#delay + 100),\r\n take(1)\r\n )\r\n .subscribe(() => this.#registerScrollSubscription());\r\n\r\n this.#timeoutId = setTimeout(() => {\r\n if (prevScrollTop === this.#currentScrollTop) {\r\n this.#registerScrollSubscription();\r\n }\r\n }, this.#delay + 100);\r\n\r\n wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });\r\n }\r\n\r\n #updateCurrentScroll(el: HTMLElement): number {\r\n const style = getComputedStyle(el);\r\n return el.scrollTop + parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth);\r\n }\r\n\r\n #disposeResources = (): void => {\r\n if (this.#timeoutId) clearTimeout(this.#timeoutId);\r\n this.#scrollSubscription?.unsubscribe();\r\n this.#clickScrollSubscription?.unsubscribe();\r\n };\r\n\r\n ngOnDestroy(): void {\r\n this.#disposeResources();\r\n }\r\n}\r\n","<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\r\n <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (!isHiddenAnchorList()) {\r\n <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\r\n <sd-vertical-anchor-list\r\n [sections]=\"sections()\"\r\n [ellipsis]=\"ellipsis()\"\r\n [sidebarWidth]=\"sidebarWidth()\"\r\n [activeSectionId]=\"activeSectionId()\"\r\n (sdClickSection)=\"scrollSectionByClick($event)\">\r\n </sd-vertical-anchor-list>\r\n </div>\r\n }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuidv4"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sd-angular-core-components-anchor.mjs","sources":["../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-item/anchor-item.component.html","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-vertical-list.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor-vertical/anchor-vertical-list.component.html","../../../projects/sd-angular/components/anchor/src/components/anchor/anchor.component.ts","../../../projects/sd-angular/components/anchor/src/components/anchor/anchor.component.html","../../../projects/sd-angular/components/anchor/sd-angular-core-components-anchor.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, effect, inject, input } from '@angular/core';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { IAnchorItem } from '../../models';\r\n\r\n@Component({\r\n selector: 'sd-anchor-item',\r\n templateUrl: './anchor-item.component.html',\r\n styleUrls: ['./anchor-item.component.scss'],\r\n imports: [CommonModule],\r\n standalone: true,\r\n})\r\nexport class SdAnchorItem implements IAnchorItem {\r\n title = input.required<string>();\r\n icon = input<string | undefined>();\r\n id: string = uuidv4();\r\n elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n if (this.title()) {\r\n this.elementRef.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n}\r\n","<section>\r\n <ng-content></ng-content>\r\n</section>\r\n","import { ChangeDetectionStrategy, Component, OnDestroy, input, output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { Subject, Subscription, debounceTime } from 'rxjs';\n\nimport { SdAnchorItem } from '../anchor-item/anchor-item.component';\n\n@Component({\n selector: 'sd-anchor-vertical-list',\n templateUrl: './anchor-vertical-list.component.html',\n styleUrl: './anchor-vertical-list.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, MatIconModule],\n standalone: true,\n})\nexport class SdAnchorVerticalList implements OnDestroy {\n sections = input.required<readonly SdAnchorItem[]>();\n activeSectionId = input<string>('');\n ellipsis = input<boolean>(false);\n sidebarWidth = input<string>('');\n\n sdClickSection = output<string>();\n\n #delay = 200;\n #clickSectionSubject = new Subject<string>();\n #subscription = new Subscription();\n\n constructor() {\n this.#subscription.add(\n this.#clickSectionSubject\n .pipe(debounceTime(this.#delay))\n .subscribe((id: string) => this.sdClickSection.emit(id))\n );\n }\n\n onClickSection = (id: string): void => {\n this.#clickSectionSubject.next(id);\n };\n\n ngOnDestroy(): void {\n this.#subscription.unsubscribe();\n }\n}\n","<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\n @for (section of sections(); track section.id) {\n <div\n class=\"c-anchor-list-item\"\n [class.active]=\"section.id === activeSectionId()\"\n (click)=\"onClickSection(section.id)\"\n (keydown.enter)=\"onClickSection(section.id)\"\n tabindex=\"0\">\n @if (section.icon()) {\n <mat-icon class=\"c-anchor-list-item-icon\">{{ section.icon() }}</mat-icon>\n }\n <div class=\"c-anchor-list-item-text\" [class.ellipsis]=\"ellipsis()\">\n {{ section.title() }}\n </div>\n </div>\n }\n</div>\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n OnDestroy,\n afterNextRender,\n booleanAttribute,\n contentChildren,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription, auditTime, debounceTime, filter, fromEvent, map, take } from 'rxjs';\n\nimport { SdAnchorVerticalList } from '../anchor-vertical/anchor-vertical-list.component';\nimport { SdAnchorItem } from '../anchor-item/anchor-item.component';\n\n@Component({\n selector: 'sd-anchor',\n templateUrl: './anchor.component.html',\n styleUrls: ['./anchor.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, SdAnchorVerticalList],\n standalone: true,\n})\nexport class SdAnchor implements OnDestroy {\n wrapper = viewChild.required<ElementRef>('wrapper');\n sections = contentChildren(SdAnchorItem);\n\n type = input<'vertical' | 'horizontal'>('vertical');\n sidebarWidth = input<string>('200px');\n ellipsis = input(false, { transform: booleanAttribute });\n isOverscroll = input(false, { transform: booleanAttribute });\n isHiddenAnchorList = input(false, { transform: booleanAttribute });\n\n activeSectionId = signal<string>('');\n\n #scrollSubscription = new Subscription();\n #clickScrollSubscription = new Subscription();\n #delay = 100;\n #currentScrollTop = 0;\n #timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n constructor() {\n afterNextRender(() => {\n if (!this.isHiddenAnchorList()) {\n this.activeSectionId.set(this.sections()[0]?.id ?? '');\n this.#registerScrollSubscription();\n }\n });\n }\n\n #registerScrollSubscription = (): void => {\n this.#disposeResources();\n const wrapperEl = this.wrapper().nativeElement;\n this.#scrollSubscription = fromEvent<UIEvent>(wrapperEl, 'scroll')\n .pipe(auditTime(50))\n .subscribe((event: UIEvent) => {\n const el = event.target as HTMLElement;\n this.#currentScrollTop = this.#updateCurrentScroll(el);\n for (const section of this.sections()) {\n const rect = section.elementRef.nativeElement;\n const rectTop = rect.offsetTop;\n const rectBottom = rectTop + rect.offsetHeight;\n if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {\n this.activeSectionId.set(section.id);\n break;\n }\n }\n });\n };\n\n scrollSectionByClick(idSectionTarget: string): void {\n this.activeSectionId.set(idSectionTarget);\n const targetSection = this.sections().find(s => s.id === idSectionTarget)?.elementRef;\n if (!targetSection) return;\n\n this.#disposeResources();\n const wrapperEl = this.wrapper().nativeElement;\n const targetElement = targetSection.nativeElement;\n const prevScrollTop = this.#currentScrollTop;\n\n this.#clickScrollSubscription = fromEvent<UIEvent>(wrapperEl, 'scroll')\n .pipe(\n auditTime(this.#delay),\n map((event: UIEvent) => {\n const el = event.target as HTMLElement;\n this.#currentScrollTop = this.#updateCurrentScroll(el);\n const wrapperTop = wrapperEl.getBoundingClientRect().top;\n const targetRect = targetElement.getBoundingClientRect();\n const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight;\n return Math.abs(targetRect.top - wrapperTop) < 1 || isVisible;\n }),\n filter(Boolean),\n debounceTime(this.#delay + 100),\n take(1)\n )\n .subscribe(() => this.#registerScrollSubscription());\n\n this.#timeoutId = setTimeout(() => {\n if (prevScrollTop === this.#currentScrollTop) {\n this.#registerScrollSubscription();\n }\n }, this.#delay + 100);\n\n wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' });\n }\n\n #updateCurrentScroll(el: HTMLElement): number {\n const style = getComputedStyle(el);\n return el.scrollTop + parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth);\n }\n\n #disposeResources = (): void => {\n if (this.#timeoutId) clearTimeout(this.#timeoutId);\n this.#scrollSubscription?.unsubscribe();\n this.#clickScrollSubscription?.unsubscribe();\n };\n\n ngOnDestroy(): void {\n this.#disposeResources();\n }\n}\n","<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll() }\" #wrapper>\n <div class=\"c-anchor-content\" [style.width]=\"'calc(100% - ' + sidebarWidth() + ' - 16px)'\">\n <ng-content></ng-content>\n </div>\n\n @if (!isHiddenAnchorList()) {\n <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth()\">\n <sd-anchor-vertical-list\n [sections]=\"sections()\"\n [ellipsis]=\"ellipsis()\"\n [sidebarWidth]=\"sidebarWidth()\"\n [activeSectionId]=\"activeSectionId()\"\n (sdClickSection)=\"scrollSectionByClick($event)\">\n </sd-anchor-vertical-list>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuidv4"],"mappings":"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"}
|
|
@@ -222,7 +222,7 @@ class ColumnFilterComponent {
|
|
|
222
222
|
this.ref.markForCheck();
|
|
223
223
|
};
|
|
224
224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
225
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { _autoId: ["autoId", "_autoId"], _value: ["value", "_value"], _inlineOperator: ["inlineOperator", "_inlineOperator"], _columnFilter: ["columnFilter", "_columnFilter"], cacheValues: "cacheValues", _column: ["column", "_column"] }, outputs: { inlineOperatorChange: "inlineOperatorChange", operatorChange: "operatorChange", filterChange: "filterChange" }, ngImport: i0, template: "@let template = column?.filter?.filterDef;\r\n@let context = { columnFilter: columnFilter, autoId: autoId + column.field };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n @if (\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'boolean' ||\r\n column.type === 'values' ||\r\n column.type === 'lazy-values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n ) {\r\n <!-- Operator filter -->\r\n <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n <sd-button\r\n class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n fontSet=\"material-symbols-outlined\"\r\n [prefixIcon]=\"inlineSymbol\"\r\n [matMenuTriggerFor]=\"menu\"\r\n type=\"link\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n operator.symbol\r\n }}</mat-icon>\r\n <span> {{ operator.display }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n @if (template) {\r\n <ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\r\n } \r\n <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n @else {\r\n @if (column.type === 'string') {\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input>\r\n } @else if (column.type === 'number') {\r\n @if (!column.filter?.type) {\r\n <sd-input-number\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input-number>\r\n } @else if (column.filter?.type === 'split-number') {\r\n <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n <sd-input-number\r\n [autoId]=\"autoId + '-from-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].from\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input-number>\r\n <div class=\"mx-4\">-</div>\r\n <sd-input-number\r\n [autoId]=\"autoId + '-to-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input-number>\r\n </div>\r\n }\r\n } @else if (column.type === 'boolean') {\r\n <sd-select\r\n minWidthPanel=\"200px\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n [style.width]=\"'100%'\"\r\n size=\"sm\"\r\n [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' },\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n <ng-template sdItemDef let-item=\"item\">\r\n @if (item.value === '1') {\r\n <sd-badge color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n } @else {\r\n <sd-badge color=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n }\r\n </ng-template>\r\n </sd-select>\r\n } @else if (column.type === 'values') {\r\n <sd-select\r\n minWidthPanel=\"200px\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n [style.width]=\"'100%'\"\r\n size=\"sm\"\r\n [items]=\"items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (column.type === 'lazy-values') {\r\n <sd-select\r\n minWidthPanel=\"200px\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n [style.width]=\"'100%'\"\r\n size=\"sm\"\r\n [items]=\"items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n <sd-date-range\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date-range>\r\n } @else if (column.filter?.type === 'date') {\r\n <sd-date\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date>\r\n } @else if (column.filter?.type === 'split-date') {\r\n <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n <sd-date\r\n [autoId]=\"autoId + '-from-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].from\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date>\r\n <div class=\"mx-4\">-</div>\r\n <sd-date\r\n [autoId]=\"autoId + '-to-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date>\r\n </div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <sd-input [autoId]=\"autoId + column.field\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n }\r\n</div>", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { _autoId: ["autoId", "_autoId"], _value: ["value", "_value"], _inlineOperator: ["inlineOperator", "_inlineOperator"], _columnFilter: ["columnFilter", "_columnFilter"], cacheValues: "cacheValues", _column: ["column", "_column"] }, outputs: { inlineOperatorChange: "inlineOperatorChange", operatorChange: "operatorChange", filterChange: "filterChange" }, ngImport: i0, template: "@let template = column?.filter?.filterDef;\r\n@let context = { columnFilter: columnFilter, autoId: autoId + column.field };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\r\n @if (\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'boolean' ||\r\n column.type === 'values' ||\r\n column.type === 'lazy-values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time'\r\n ) {\r\n <!-- Operator filter -->\r\n <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n <sd-button\r\n class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n fontSet=\"material-symbols-outlined\"\r\n [prefixIcon]=\"inlineSymbol\"\r\n [matMenuTriggerFor]=\"menu\"\r\n type=\"link\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n operator.symbol\r\n }}</mat-icon>\r\n <span> {{ operator.display }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n @if (template) {\r\n <ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\r\n } \r\n <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n @else {\r\n @if (column.type === 'string') {\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input>\r\n } @else if (column.type === 'number') {\r\n @if (!column.filter?.type) {\r\n <sd-input-number\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input-number>\r\n } @else if (column.filter?.type === 'split-number') {\r\n <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n <sd-input-number\r\n [autoId]=\"autoId + '-from-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].from\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input-number>\r\n <div class=\"mx-4\">-</div>\r\n <sd-input-number\r\n [autoId]=\"autoId + '-to-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-input-number>\r\n </div>\r\n }\r\n } @else if (column.type === 'boolean') {\r\n <sd-select\r\n minWidthPanel=\"200px\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n [style.width]=\"'100%'\"\r\n size=\"sm\"\r\n [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' },\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n <ng-template sdItemDef let-item=\"item\">\r\n @if (item.value === '1') {\r\n <sd-badge color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n } @else {\r\n <sd-badge color=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n }\r\n </ng-template>\r\n </sd-select>\r\n } @else if (column.type === 'values') {\r\n <sd-select\r\n minWidthPanel=\"200px\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n [style.width]=\"'100%'\"\r\n size=\"sm\"\r\n [items]=\"items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (column.type === 'lazy-values') {\r\n <sd-select\r\n minWidthPanel=\"200px\"\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n [style.width]=\"'100%'\"\r\n size=\"sm\"\r\n [items]=\"items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column.option.selection === 'MULTIPLE'\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n <sd-date-range\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date-range>\r\n } @else if (column.filter?.type === 'date') {\r\n <sd-date\r\n [autoId]=\"autoId + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date>\r\n } @else if (column.filter?.type === 'split-date') {\r\n <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n <sd-date\r\n [autoId]=\"autoId + '-from-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].from\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date>\r\n <div class=\"mx-4\">-</div>\r\n <sd-date\r\n [autoId]=\"autoId + '-to-' + column.field\"\r\n style=\"flex: 1 1 0%; min-width: 0\"\r\n type=\"date\"\r\n size=\"sm\"\r\n [(model)]=\"columnFilter[column.field].to\"\r\n (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\"\r\n hideInlineError>\r\n </sd-date>\r\n </div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <sd-input [autoId]=\"autoId + column.field\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n }\r\n</div>", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
226
226
|
}
|
|
227
227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, decorators: [{
|
|
228
228
|
type: Component,
|
|
@@ -425,7 +425,7 @@ class ExternalFilterComponent {
|
|
|
425
425
|
});
|
|
426
426
|
};
|
|
427
427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n @if (!isMobileOrTablet && externalFilters.length) {\r\n <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n <div class=\"d-flex mr-4\" sdHeaderRight>\r\n <sd-button\r\n [autoId]=\"autoId + 'clearFilter'\"\r\n [disabled]=\"!filtered\"\r\n type=\"link\"\r\n prefixIcon=\"cleaning_services\"\r\n tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n <sd-button\r\n [autoId]=\"autoId + 'setting'\"\r\n type=\"link\"\r\n prefixIcon=\"settings\"\r\n tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"></sd-button>\r\n <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n @for (externalFilter of externalFilters; track externalFilter.field) {\r\n <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n <sd-checkbox\r\n [label]=\"externalFilter.title\"\r\n [model]=\"inlineExternal[externalFilter.field]\"\r\n [disabled]=\"externalFilter.required\" />\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n @for (item of externalFilters; track item.field) {\r\n @if (inlineExternal[item.field]) {\r\n <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n @if (item.type === 'string') {\r\n <sd-input\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input>\r\n } @else if (item.type === 'number') {\r\n <sd-input-number\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input-number>\r\n } @else if (item.type === 'boolean') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"[\r\n { value: true, display: item.option?.displayOnTrue || 'True' },\r\n { value: false, display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.type === 'date') {\r\n <sd-date\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-date>\r\n } @else if (item.type === 'datetime') {\r\n <sd-datetime\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-datetime>\r\n } @else if (item.type === 'daterange') {\r\n <sd-date-range\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n appearance=\"outline\"\r\n hideInlineError>\r\n </sd-date-range>\r\n } @else if (item.type === 'values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'lazy-values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'custom' && item.filterDef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n item.filterDef;\r\n context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n \"></ng-container>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n @if (filter?.manualFilter) {\r\n <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n <sd-button\r\n [autoId]=\"autoId + 'onSubmit'\"\r\n [disabled]=\"form.invalid\"\r\n type=\"fill\"\r\n color=\"primary\"\r\n title=\"T\u00ECm ki\u1EBFm\"\r\n prefixIcon=\"filter_alt\"\r\n (click)=\"onSubmit()\">\r\n </sd-button>\r\n </div>\r\n }\r\n </sd-section>\r\n }\r\n <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
428
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n @if (!isMobileOrTablet && externalFilters.length) {\r\n <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n <div class=\"d-flex mr-4\" sdHeaderRight>\r\n <sd-button\r\n [autoId]=\"autoId + 'clearFilter'\"\r\n [disabled]=\"!filtered\"\r\n type=\"link\"\r\n prefixIcon=\"cleaning_services\"\r\n tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n <sd-button\r\n [autoId]=\"autoId + 'setting'\"\r\n type=\"link\"\r\n prefixIcon=\"settings\"\r\n tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n [matMenuTriggerFor]=\"menu\"\r\n (click)=\"$event.stopPropagation()\"></sd-button>\r\n <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n @for (externalFilter of externalFilters; track externalFilter.field) {\r\n <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n <sd-checkbox\r\n [label]=\"externalFilter.title\"\r\n [model]=\"inlineExternal[externalFilter.field]\"\r\n [disabled]=\"externalFilter.required\" />\r\n </button>\r\n }\r\n </mat-menu>\r\n </div>\r\n <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n @for (item of externalFilters; track item.field) {\r\n @if (inlineExternal[item.field]) {\r\n <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n @if (item.type === 'string') {\r\n <sd-input\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input>\r\n } @else if (item.type === 'number') {\r\n <sd-input-number\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (keyupEnter)=\"onKeyupEnter()\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-input-number>\r\n } @else if (item.type === 'boolean') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"[\r\n { value: true, display: item.option?.displayOnTrue || 'True' },\r\n { value: false, display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.type === 'date') {\r\n <sd-date\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-date>\r\n } @else if (item.type === 'datetime') {\r\n <sd-datetime\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n hideInlineError>\r\n </sd-datetime>\r\n } @else if (item.type === 'daterange') {\r\n <sd-date-range\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n appearance=\"outline\"\r\n hideInlineError>\r\n </sd-date-range>\r\n } @else if (item.type === 'values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items | filterValues | async\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'lazy-values') {\r\n @if (item.option.selection === 'MULTIPLE') {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n } @else {\r\n <sd-select\r\n [autoId]=\"autoId + item.field\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter![item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n [form]=\"form\"\r\n [required]=\"item.required\"\r\n hideInlineError>\r\n </sd-select>\r\n }\r\n } @else if (item.type === 'custom' && item.filterDef) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n item.filterDef;\r\n context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n \"></ng-container>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n @if (filter?.manualFilter) {\r\n <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n <sd-button\r\n [autoId]=\"autoId + 'onSubmit'\"\r\n [disabled]=\"form.invalid\"\r\n type=\"fill\"\r\n color=\"primary\"\r\n title=\"T\u00ECm ki\u1EBFm\"\r\n prefixIcon=\"filter_alt\"\r\n (click)=\"onSubmit()\">\r\n </sd-button>\r\n </div>\r\n }\r\n </sd-section>\r\n }\r\n <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
429
429
|
}
|
|
430
430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
|
|
431
431
|
type: Component,
|