@sd-angular/core 19.0.0-beta.40 → 19.0.0-beta.42
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/fesm2022/sd-angular-core-components-table.mjs +3 -3
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-workflow.mjs +6 -6
- package/fesm2022/sd-angular-core-components-workflow.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs +71 -29
- package/fesm2022/sd-angular-core-forms-autocomplete.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-select.mjs +97 -36
- package/fesm2022/sd-angular-core-forms-select.mjs.map +1 -1
- package/forms/autocomplete/src/autocomplete.component.d.ts +1 -0
- package/forms/select/src/select.component.d.ts +7 -2
- package/package.json +45 -45
- package/sd-angular-core-19.0.0-beta.42.tgz +0 -0
- package/sd-angular-core-19.0.0-beta.40.tgz +0 -0
|
@@ -228,7 +228,7 @@ class ColumnFilterComponent {
|
|
|
228
228
|
this.ref.markForCheck();
|
|
229
229
|
};
|
|
230
230
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: "<div class=\"d-flex c-inline-column align-items-end\">\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 <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n <!-- Only number column icon broken. add mb when not default symbol -->\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 @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\"\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\"\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\">\r\n <sd-input-number\r\n [autoId]=\"autoId + '-from-' + column.field\"\r\n style=\"flex: 1\"\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\"\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 *ngIf=\"column.type === 'boolean'\"\r\n [autoId]=\"autoId + column.field\"\r\n [style.flex]=\"1\"\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 [autoId]=\"autoId + column.field\"\r\n [style.flex]=\"1\"\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 *ngIf=\"column.option.selection === 'MULTIPLE'\"\r\n [autoId]=\"autoId + column.field\"\r\n [style.flex]=\"1\"\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\"\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\"\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\">\r\n <sd-date\r\n [autoId]=\"autoId + '-from-' + column.field\"\r\n style=\"flex: 1\"\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\"\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 } @else {\r\n <sd-input [autoId]=\"autoId + column.field\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n }\r\n</div>\r\n", 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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: i3.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"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "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", "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", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "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", "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", "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 });
|
|
231
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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: "<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 <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 @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 } @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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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: i3.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"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "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", "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", "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", "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", "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 });
|
|
232
232
|
}
|
|
233
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, decorators: [{
|
|
234
234
|
type: Component,
|
|
@@ -244,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
244
244
|
SdDate,
|
|
245
245
|
SdDateRange,
|
|
246
246
|
SdBadge,
|
|
247
|
-
], template: "<div class=\"d-flex c-inline-column align-items-end\">\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 <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n
|
|
247
|
+
], template: "<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 <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 @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 } @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"] }]
|
|
248
248
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _autoId: [{
|
|
249
249
|
type: Input,
|
|
250
250
|
args: ['autoId']
|
|
@@ -423,7 +423,7 @@ class ExternalFilterComponent {
|
|
|
423
423
|
});
|
|
424
424
|
};
|
|
425
425
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "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", "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", "hideInlineError", "required", "disabled", "viewed", "multiple", "validator", "inlineError", "appearance", "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", "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", "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", "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"], 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 });
|
|
426
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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()\"\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: i2.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: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.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"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "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", "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", "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", "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", "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", "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"], 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 });
|
|
427
427
|
}
|
|
428
428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, decorators: [{
|
|
429
429
|
type: Component,
|