@sd-angular/core 19.0.0-beta.69 → 19.0.0-beta.70
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/table/src/models/table-column.model.d.ts +1 -0
- package/components/table/src/services/table-filter/table-filter.model.d.ts +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +4 -4
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-directives.mjs +7 -42
- package/fesm2022/sd-angular-core-directives.mjs.map +1 -1
- package/package.json +57 -57
- package/sd-angular-core-19.0.0-beta.70.tgz +0 -0
- package/utilities/models/src/filter.model.d.ts +4 -3
- package/utilities/models/src/order.model.d.ts +2 -1
- package/utilities/models/src/paging.model.d.ts +2 -1
- package/sd-angular-core-19.0.0-beta.69.tgz +0 -0
|
@@ -19,7 +19,7 @@ export interface TableFilterValue {
|
|
|
19
19
|
filtered?: boolean;
|
|
20
20
|
}
|
|
21
21
|
export interface SdTableFilterRequest<T = any> {
|
|
22
|
-
columnOperator: Record<
|
|
22
|
+
columnOperator: Record<SdNestedKeyOf<T>, SdOperator>;
|
|
23
23
|
rawColumnFilter: Record<SdNestedKeyOf<T>, any>;
|
|
24
24
|
rawExternalFilter: Record<string, any>;
|
|
25
25
|
pageNumber: number;
|
|
@@ -231,11 +231,11 @@ class ColumnFilterComponent {
|
|
|
231
231
|
this.ref.markForCheck();
|
|
232
232
|
};
|
|
233
233
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
234
|
-
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: 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 });
|
|
234
|
+
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: "@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 });
|
|
235
235
|
}
|
|
236
236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, decorators: [{
|
|
237
237
|
type: Component,
|
|
238
|
-
args: [{ selector: 'column-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatMenuModule, MatIconModule, SdButton, SdInput, SdInputNumber, SdSelect, SdDate, SdDateRange, SdBadge], template: "<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100
|
|
238
|
+
args: [{ selector: 'column-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatMenuModule, MatIconModule, SdButton, SdInput, SdInputNumber, SdSelect, SdDate, SdDateRange, SdBadge], 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"] }]
|
|
239
239
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _autoId: [{
|
|
240
240
|
type: Input,
|
|
241
241
|
args: ['autoId']
|
|
@@ -865,11 +865,11 @@ class SdDesktopCellView {
|
|
|
865
865
|
this.isCollapsed.update(current => !current);
|
|
866
866
|
};
|
|
867
867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCellView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
868
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCellView, isStandalone: true, selector: "sd-desktop-cell-view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, charLimited: { classPropertyName: "charLimited", publicName: "charLimited", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [
|
|
868
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdDesktopCellView, isStandalone: true, selector: "sd-desktop-cell-view", inputs: { autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, charLimited: { classPropertyName: "charLimited", publicName: "charLimited", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [sdTooltipDelay]=\"100\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n <ng-template #htmlTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n }\r\n <!-- End -->\r\n }\r\n } @else {\r\n <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n @if (view.badge) {\r\n @if (view.data) {\r\n <sd-badge\r\n [attr.data-autoId]=\"autoId()\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [sdTooltip]=\"view.tooltip\"\r\n (click)=\"!!view.click && view.click()\">\r\n </sd-badge>\r\n }\r\n } @else {\r\n @if (view.click) {\r\n <div class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n <a\r\n href=\"javascript:;\"\r\n [attr.data-autoId]=\"autoId()\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n (click)=\"view.click()\">\r\n {{ view.data }}\r\n </a>\r\n </div>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"isCollapsed()\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n {{ view.data }}\r\n </div>\r\n\r\n <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip\">\r\n {{ view.data }}\r\n </div>\r\n }\r\n <!-- End -->\r\n }\r\n }\r\n }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["click"] }, { kind: "pipe", type: SdSafeHtmlPipe, name: "sdSafeHtml" }, { kind: "directive", type: SdTooltipDirective, selector: "[sdTooltip]", inputs: ["sdTooltip", "sdTooltipPosition", "sdTooltipDelay", "sdTooltipColor"] }, { kind: "pipe", type: ToStringPipe, name: "asString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
869
869
|
}
|
|
870
870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDesktopCellView, decorators: [{
|
|
871
871
|
type: Component,
|
|
872
|
-
args: [{ selector: 'sd-desktop-cell-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [
|
|
872
|
+
args: [{ selector: 'sd-desktop-cell-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, SdBadge, SdSafeHtmlPipe, SdTooltipDirective, ToStringPipe], template: "@let view = item().meta.display[column().field];\r\n\r\n@let columnCharLimit = column()?.charLimited;\r\n@let isExpandByMore = isOverflowing() && columnCharLimit?.expandType === 'more';\r\n@let isExpandByTooltip = isOverflowing() && columnCharLimit?.expandType === 'tooltip';\r\n\r\n@if (view) {\r\n @if (view.isHtml) {\r\n @if (view.click) {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlClickTooltip : '')\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"columnCharLimit?.enable\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"\r\n aria-hidden=\"true\"></div>\r\n\r\n <ng-template #htmlClickTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis-html]=\"isCollapsed()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? htmlTooltip : '')\"\r\n containerClass=\"c-tooltip-html-d374bd93-f136-425c-bcc2-2d88cb163e44\"\r\n container=\"body\"\r\n placement=\"bottom\"\r\n [sdTooltipDelay]=\"100\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n\r\n <ng-template #htmlTooltip>\r\n <div\r\n class=\"c-tooltip-inner-content\"\r\n [style.max-width]=\"'calc(' + charLimited()?.width + ' * 1.5)'\"\r\n style=\"max-height: 200px; overflow-y: auto; scrollbar-width: thin\">\r\n <div [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n </div>\r\n </ng-template>\r\n\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [sdTooltip]=\"view.tooltip\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | sdSafeHtml\"></div>\r\n }\r\n <!-- End -->\r\n }\r\n } @else {\r\n <!-- N\u1EBFu l\u00E0 gi\u00E1 tr\u1ECB l\u1EA5y hi\u1EC3n th\u1ECB l\u1EA5y tr\u1EF1c ti\u1EBFp t\u1EEB field -->\r\n @if (view.badge) {\r\n @if (view.data) {\r\n <sd-badge\r\n [attr.data-autoId]=\"autoId()\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [sdTooltip]=\"view.tooltip\"\r\n (click)=\"!!view.click && view.click()\">\r\n </sd-badge>\r\n }\r\n } @else {\r\n @if (view.click) {\r\n <div class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n <a\r\n href=\"javascript:;\"\r\n [attr.data-autoId]=\"autoId()\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"columnCharLimit?.enable\"\r\n (click)=\"view.click()\">\r\n {{ view.data }}\r\n </a>\r\n </div>\r\n } @else {\r\n <!-- N\u1EBFu column c\u00F3 b\u1EADt \"gi\u1EDBi h\u1EA1n k\u00FD t\u1EF1\" -->\r\n @if (columnCharLimit?.enable) {\r\n <div\r\n #contentContainer\r\n [attr.data-autoId]=\"autoId()\"\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [style.max-width]=\"charLimited()?.width\"\r\n [class.c-ellipsis]=\"isCollapsed()\"\r\n [sdTooltip]=\"view.tooltip || (isExpandByTooltip ? view.data : '') | asString\">\r\n {{ view.data }}\r\n </div>\r\n\r\n <!-- N\u1EBFu option xem full th\u00F4ng tin l\u00E0 \"btn xem th\u00EAm\" -->\r\n @if (isExpandByMore) {\r\n <button (click)=\"toggle()\" class=\"c-collapse\">{{ isCollapsed() ? 'Xem th\u00EAm' : 'Thu g\u1ECDn' }}</button>\r\n }\r\n } @else {\r\n <div [attr.data-autoId]=\"autoId()\" class=\"text-break\" [style]=\"view.cellStyle\" [sdTooltip]=\"view.tooltip\">\r\n {{ view.data }}\r\n </div>\r\n }\r\n <!-- End -->\r\n }\r\n }\r\n }\r\n}\r\n", styles: [".c-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ellipsis-html{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;text-overflow:ellipsis;overflow:hidden}.c-collapse{background:none;color:#00e;border:none;padding:0;font-size:12px;cursor:pointer;outline:none}\n"] }]
|
|
873
873
|
}], ctorParameters: () => [] });
|
|
874
874
|
|
|
875
875
|
class SdDesktopCell {
|