@sd-angular/core 19.0.29 → 19.0.30
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-form-generic.mjs +11 -11
- package/fesm2022/sd-angular-core-components-form-generic.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-query-bar.mjs +2 -2
- package/fesm2022/sd-angular-core-components-query-bar.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-query-builder.mjs +1 -1
- package/fesm2022/sd-angular-core-components-query-builder.mjs.map +1 -1
- package/fesm2022/sd-angular-core-components-table.mjs +6 -6
- package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input-color.mjs +4 -2
- package/fesm2022/sd-angular-core-forms-input-color.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input-number.mjs +6 -4
- package/fesm2022/sd-angular-core-forms-input-number.mjs.map +1 -1
- package/fesm2022/sd-angular-core-forms-input.mjs +7 -4
- package/fesm2022/sd-angular-core-forms-input.mjs.map +1 -1
- package/fesm2022/sd-angular-core-modules-layout.mjs +1 -1
- package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
- package/forms/input/src/input.component.d.ts +3 -1
- package/forms/input-color/src/input-color.component.d.ts +3 -1
- package/forms/input-number/src/input-number.component.d.ts +3 -1
- package/package.json +17 -17
|
@@ -469,7 +469,7 @@ class SdQueryBuildChip {
|
|
|
469
469
|
return t === 'string' || t === 'number';
|
|
470
470
|
});
|
|
471
471
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuildChip, isStandalone: true, selector: "sd-query-build-chip", inputs: { building: { classPropertyName: "building", publicName: "building", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, allowedOperators: { classPropertyName: "allowedOperators", publicName: "allowedOperators", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickOperator: "pickOperator", commitValue: "commitValue", cancel: "cancel", seamlessCommit: "seamlessCommit", draftChange: "draftChange", draftCommit: "draftCommit" }, viewQueries: [{ propertyName: "opMenu", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n In-progress chip (inline-mode token build flow).\n Seamless string/number branch keeps its own pill; everything else renders inside\n the dashed .c-token.c-token-building shell.\n-->\n@let _building = building();\n@let _autoId = autoId();\n\n@if (isSeamless()) {\n <sd-query-inline-value-chip\n [field]=\"_building.field\"\n [operator]=\"$any(_building.operator)\"\n [value]=\"_building.value ?? null\"\n [density]=\"density()\"\n [showOperator]=\"showOperator()\"\n [autoId]=\"_autoId\"\n [autofocus]=\"true\"\n (valueChange)=\"seamlessCommit.emit($event)\"\n (remove)=\"cancel.emit()\" />\n} @else {\n <div class=\"c-token c-token-building\">\n <span class=\"c-token-field\">{{ _building.field.label }}</span>\n\n @if (_building.step === 'operator') {\n <sd-operator\n #buildOperator\n class=\"c-token-op\"\n [operators]=\"allowedOperators()\"\n [model]=\"_building.operator\"\n (modelChange)=\"pickOperator.emit($any($event))\" />\n } @else {\n <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\n \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\n <sd-operator\n class=\"c-token-op\"\n [operators]=\"[$any(_building.operator)]\"\n [model]=\"$any(_building.operator)\"\n [disabled]=\"true\" />\n\n @if (_building.field.type === 'values' || _building.field.type === 'lazy-values') {\n @let _bopt = $any(_building.field).option;\n <span class=\"c-token-value c-token-value-edit\">\n <sd-select #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\" minWidthPanel=\"300px\"\n [autoId]=\"_autoId\"\n [items]=\"_building.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\n [valueField]=\"_bopt.valueField\"\n [displayField]=\"_bopt.displayField\"\n [multiple]=\"multiple()\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\">\n <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\n <ng-template #sdValue let-selectedItems=\"selectedItems\">\n @if ((selectedItems?.length ?? 0) > 1) {\n <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\n } @else if ((selectedItems?.length ?? 0) === 1) {\n <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\n }\n </ng-template>\n </sd-select>\n </span>\n } @else if (_building.field.type === 'date') {\n <span class=\"c-token-value c-token-value-edit\">\n @if (_building.operator === 'BETWEEN') {\n <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\n <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n } @else {\n <sd-date #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-date>\n }\n </span>\n } @else if (_building.field.type === 'datetime') {\n <span class=\"c-token-value c-token-value-edit\">\n @if (_building.operator === 'BETWEEN') {\n <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\n <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n } @else {\n <sd-datetime #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\n }\n </span>\n } @else if (_building.field.type === 'boolean') {\n <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\n Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\n .c-bool-true / .c-bool-false. -->\n <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\n <button\n type=\"button\"\n class=\"c-bool-btn c-bool-true\"\n [class.c-bool-active]=\"_building.value === true\"\n [attr.data-autoId]=\"_autoId + '-true'\"\n (click)=\"commitValue.emit(true)\">\n {{ $any(_building.field).trueLabel || 'C\u00F3' }}\n </button>\n <button\n type=\"button\"\n class=\"c-bool-btn c-bool-false\"\n [class.c-bool-active]=\"_building.value === false\"\n [attr.data-autoId]=\"_autoId + '-false'\"\n (click)=\"commitValue.emit(false)\">\n {{ $any(_building.field).falseLabel || 'Kh\u00F4ng' }}\n </button>\n </span>\n } @else {\n <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\n <span class=\"c-token-value c-token-value-edit\">\n <sd-input size=\"sm\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"draftChange.emit($event)\"\n (keyupEnter)=\"draftCommit.emit()\"></sd-input>\n </span>\n }\n }\n\n <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\n <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n </button>\n </div>\n}\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "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", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryBuildChip, isStandalone: true, selector: "sd-query-build-chip", inputs: { building: { classPropertyName: "building", publicName: "building", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, allowedOperators: { classPropertyName: "allowedOperators", publicName: "allowedOperators", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showOperator: { classPropertyName: "showOperator", publicName: "showOperator", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pickOperator: "pickOperator", commitValue: "commitValue", cancel: "cancel", seamlessCommit: "seamlessCommit", draftChange: "draftChange", draftCommit: "draftCommit" }, viewQueries: [{ propertyName: "opMenu", first: true, predicate: ["buildOperator"], descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: ["bPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n In-progress chip (inline-mode token build flow).\n Seamless string/number branch keeps its own pill; everything else renders inside\n the dashed .c-token.c-token-building shell.\n-->\n@let _building = building();\n@let _autoId = autoId();\n\n@if (isSeamless()) {\n <sd-query-inline-value-chip\n [field]=\"_building.field\"\n [operator]=\"$any(_building.operator)\"\n [value]=\"_building.value ?? null\"\n [density]=\"density()\"\n [showOperator]=\"showOperator()\"\n [autoId]=\"_autoId\"\n [autofocus]=\"true\"\n (valueChange)=\"seamlessCommit.emit($event)\"\n (remove)=\"cancel.emit()\" />\n} @else {\n <div class=\"c-token c-token-building\">\n <span class=\"c-token-field\">{{ _building.field.label }}</span>\n\n @if (_building.step === 'operator') {\n <sd-operator\n #buildOperator\n class=\"c-token-op\"\n [operators]=\"allowedOperators()\"\n [model]=\"_building.operator\"\n (modelChange)=\"pickOperator.emit($any($event))\" />\n } @else {\n <!-- why: badge readonly cho operator \u0111\u00E3 ch\u1ECDn \u2014 v\u1EABn render <sd-operator>\n \u0111\u1EC3 gi\u1EEF th\u1ECB gi\u00E1c gi\u1ED1ng chip ho\u00E0n th\u00E0nh (icon + tooltip). -->\n <sd-operator\n class=\"c-token-op\"\n [operators]=\"[$any(_building.operator)]\"\n [model]=\"$any(_building.operator)\"\n [disabled]=\"true\" />\n\n @if (_building.field.type === 'values' || _building.field.type === 'lazy-values') {\n @let _bopt = $any(_building.field).option;\n <span class=\"c-token-value c-token-value-edit\">\n <sd-select #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\" minWidthPanel=\"300px\"\n [autoId]=\"_autoId\"\n [items]=\"_building.field.type === 'lazy-values' ? $any(_bopt).search : $any(_bopt.items)\"\n [valueField]=\"_bopt.valueField\"\n [displayField]=\"_bopt.displayField\"\n [multiple]=\"multiple()\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\">\n <!-- why: build chip multi-select c\u0169ng c\u1EA7n \"head +N\" \u0111\u1EC3 g\u1ECDn (gi\u1ED1ng completed chip). -->\n <ng-template #sdValue let-selectedItems=\"selectedItems\">\n @if ((selectedItems?.length ?? 0) > 1) {\n <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span> +{{ selectedItems.length - 1 }}\n } @else if ((selectedItems?.length ?? 0) === 1) {\n <span class=\"c-token-multi-head\">{{ $any(selectedItems)[0][_bopt.displayField] }}</span>\n }\n </ng-template>\n </sd-select>\n </span>\n } @else if (_building.field.type === 'date') {\n <span class=\"c-token-value c-token-value-edit\">\n @if (_building.operator === 'BETWEEN') {\n <!-- why: 1 sd-date-range thay 2 sd-date \u2014 g\u1ECDn h\u01A1n, h\u00E0nh vi th\u1ED1ng nh\u1EA5t v\u1EDBi completed chip. -->\n <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n } @else {\n <sd-date #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-date>\n }\n </span>\n } @else if (_building.field.type === 'datetime') {\n <span class=\"c-token-value c-token-value-edit\">\n @if (_building.operator === 'BETWEEN') {\n <!-- why: datetime BETWEEN downgrade v\u1EC1 date-range (m\u1EA5t time precision; \u0111\u00E3 th\u1ED1ng nh\u1EA5t). -->\n <sd-date-range #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-date-range>\n } @else {\n <sd-datetime #bPicker size=\"sm\" [viewed]=\"'inline'\" [clearable]=\"false\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"commitValue.emit($event)\"></sd-datetime>\n }\n </span>\n } @else if (_building.field.type === 'boolean') {\n <!-- why: native button thay sd-button (tr\u00E1nh mat-button baseline 36px g\u00E2y tr\u00E0n).\n Pill nh\u1ECF v\u1EBD b\u1EB1ng CSS scoped trong chip \u2014 gi\u1EEF semantic colour qua class\n .c-bool-true / .c-bool-false. -->\n <span class=\"c-token-value c-token-value-edit c-bool-toggle\">\n <button\n type=\"button\"\n class=\"c-bool-btn c-bool-true\"\n [class.c-bool-active]=\"_building.value === true\"\n [attr.data-autoId]=\"_autoId + '-true'\"\n (click)=\"commitValue.emit(true)\">\n {{ $any(_building.field).trueLabel || 'C\u00F3' }}\n </button>\n <button\n type=\"button\"\n class=\"c-bool-btn c-bool-false\"\n [class.c-bool-active]=\"_building.value === false\"\n [attr.data-autoId]=\"_autoId + '-false'\"\n (click)=\"commitValue.emit(false)\">\n {{ $any(_building.field).falseLabel || 'Kh\u00F4ng' }}\n </button>\n </span>\n } @else {\n <!-- Fallback (e.g. unforeseen type) \u2014 generic sd-input wired via draft outputs. -->\n <span class=\"c-token-value c-token-value-edit\">\n <sd-input size=\"sm\"\n [autoId]=\"_autoId\"\n [model]=\"$any(_building.value)\"\n (sdChange)=\"draftChange.emit($event)\"\n (keyupEnter)=\"draftCommit.emit()\"></sd-input>\n </span>\n }\n }\n\n <button type=\"button\" class=\"c-token-remove\" aria-label=\"Cancel\" (click)=\"cancel.emit()\">\n <mat-icon fontSet=\"material-icons-outlined\">close</mat-icon>\n </button>\n </div>\n}\n", styles: [":host{display:contents}.c-token{display:inline-flex;align-items:center;gap:4px;padding:0 0 0 12px;border:1px solid var(--sd-primary-light);border-radius:999px;background:var(--sd-primary-light);font-size:13px;color:#5f6368;white-space:nowrap;overflow:hidden}:host-context(.c-density-compact) .c-token{height:28px}:host-context(.c-density-comfortable) .c-token{height:32px}.c-token-field{font-weight:500;line-height:1}.c-token-op{display:inline-flex;align-items:center;color:inherit}.c-token-op ::ng-deep .c-op-trigger{padding:0;color:inherit}.c-token-op ::ng-deep .c-op-icon svg{width:14px;height:14px;display:block}.c-token-value{border:none;background:transparent;padding:0;font:inherit;font-weight:500;color:var(--sd-primary)}.c-token-value-edit{display:inline-flex;align-items:center;gap:4px;max-width:240px}.c-token-value-edit sd-input,.c-token-value-edit sd-input-number{display:inline-flex;max-width:140px}.c-token-value-edit sd-date-range{display:inline-flex;max-width:220px;min-width:0;flex:0 1 auto}.c-token-value-edit sd-select,.c-token-value-edit sd-date,.c-token-value-edit sd-datetime{display:inline-flex;align-items:center;line-height:1}.c-token ::ng-deep .mat-mdc-form-field{line-height:1}.c-token ::ng-deep .mat-mdc-text-field-wrapper,.c-token ::ng-deep .mat-mdc-form-field-flex{padding:0;min-height:0;background:transparent}.c-token ::ng-deep .mat-mdc-form-field-infix{padding:0;min-height:0;width:auto;border:0;display:inline-flex;align-items:center}.c-token ::ng-deep .mat-mdc-select-value,.c-token ::ng-deep .mat-mdc-input-element,.c-token ::ng-deep input{line-height:1;font-size:13px;padding:0;height:auto;color:inherit}.c-token ::ng-deep .mat-mdc-select-value{display:inline-flex;align-items:center;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--sd-primary);font-weight:500}.c-token ::ng-deep .sd-suffix-icon{display:none}.c-token-multi-head{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.c-token-building{border-style:dashed}.c-bool-toggle{display:inline-flex;align-items:center;gap:4px}.c-bool-btn{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:0;padding:0 8px;border:1px solid currentColor;border-radius:999px;background:transparent;font:inherit;font-size:11px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .12s ease,color .12s ease}:host-context(.c-density-comfortable) .c-bool-btn{height:20px;padding:0 10px;font-size:12px}.c-bool-true{color:var(--sd-success)}.c-bool-false{color:var(--sd-warning)}.c-bool-active.c-bool-true{background:var(--sd-success);color:#fff;border-color:var(--sd-success)}.c-bool-active.c-bool-false{background:var(--sd-warning);color:#fff;border-color:var(--sd-warning)}.c-bool-btn:hover:not(.c-bool-active).c-bool-true{background:var(--sd-success-light)}.c-bool-btn:hover:not(.c-bool-active).c-bool-false{background:var(--sd-warning-light)}.c-token-remove{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:none;border-left:1px solid rgba(0,0,0,.04);border-radius:0;background:transparent;cursor:pointer;color:inherit}:host-context(.c-density-compact) .c-token-remove{width:26px}:host-context(.c-density-comfortable) .c-token-remove{width:28px}.c-token-remove mat-icon{font-size:14px;width:14px;height:14px}.c-token-remove:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "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", "viewed", "clearable", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "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", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdQueryInlineValueChip, selector: "sd-query-inline-value-chip", inputs: ["field", "operator", "value", "density", "showOperator", "autoId", "autofocus"], outputs: ["valueChange", "remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
473
473
|
}
|
|
474
474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryBuildChip, decorators: [{
|
|
475
475
|
type: Component,
|
|
@@ -708,7 +708,7 @@ class SdQueryChipPopover {
|
|
|
708
708
|
}
|
|
709
709
|
}
|
|
710
710
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryChipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
711
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryChipPopover, isStandalone: true, selector: "sd-query-chip-popover", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, chipIndex: { classPropertyName: "chipIndex", publicName: "chipIndex", isSignal: true, isRequired: false, transformFunction: null }, autoIdBase: { classPropertyName: "autoIdBase", publicName: "autoIdBase", isSignal: true, isRequired: false, transformFunction: null }, switchPickerMenu: { classPropertyName: "switchPickerMenu", publicName: "switchPickerMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", swapField: "swapField" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Chip popover \u2014 operator + value editor for the popover-mode chip.\n Visual layout mirrors the previous inline `<mat-menu #chipPopover>` in query-bar.\n Body branches on operator + field.type \u2014 8 paths preserved exactly.\n-->\n<mat-menu #menu=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\" (closed)=\"onMenuClosed()\">\n <ng-template matMenuContent>\n @let _field = field();\n @let _editingOperator = editingOperator();\n @let _editingValue = editingValue();\n @let _editingOptions = editingOptions();\n @let _editingOptionsLoading = editingOptionsLoading();\n @let _switchPickerMenu = switchPickerMenu();\n\n @if (_field) {\n <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\n <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\n <!-- why: nested mat-menu trigger to swap the chip's field \u2014 parent provides\n the field-picker MatMenu via [switchPickerMenu]. -->\n @if (_switchPickerMenu) {\n <button\n type=\"button\"\n class=\"c-pop-header-field\"\n [matMenuTriggerFor]=\"_switchPickerMenu\"\n matTooltip=\"\u0110\u1ED5i field\">\n <span>{{ _field.label }}</span>\n <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\n </button>\n } @else {\n <span class=\"c-pop-header-field\">{{ _field.label }}</span>\n }\n <!-- Operator selector (right-aligned). Disabled when field has \u22641 operator. -->\n <sd-operator\n class=\"c-pop-header-operator\"\n [autoId]=\"chipAutoId('operator')\"\n [operators]=\"allowedOperators()\"\n [model]=\"_editingOperator\"\n [disabled]=\"!showOperatorSelector()\"\n (modelChange)=\"onEditingOperatorChange($any($event))\" />\n </div>\n\n <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\n @if (!isNoDataOperator(_editingOperator)) {\n @if (_editingOperator === 'BETWEEN') {\n @if (_field.type === 'date') {\n <div class=\"c-pop-between\">\n <sd-date size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-from')\"\n placeholder=\"T\u1EEB\"\n [model]=\"$any(_editingValue)?.from\"\n (sdChange)=\"onEditingRangeFrom($event)\">\n </sd-date>\n <sd-date size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-to')\"\n placeholder=\"\u0110\u1EBFn\"\n [model]=\"$any(_editingValue)?.to\"\n (sdChange)=\"onEditingRangeTo($event)\">\n </sd-date>\n </div>\n } @else if (_field.type === 'datetime') {\n <div class=\"c-pop-between\">\n <sd-datetime size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-from')\"\n placeholder=\"T\u1EEB\"\n [model]=\"$any(_editingValue)?.from\"\n (sdChange)=\"onEditingRangeFrom($event)\">\n </sd-datetime>\n <sd-datetime size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-to')\"\n placeholder=\"\u0110\u1EBFn\"\n [model]=\"$any(_editingValue)?.to\"\n (sdChange)=\"onEditingRangeTo($event)\">\n </sd-datetime>\n </div>\n } @else {\n <div class=\"c-pop-between\">\n <sd-input-number size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-from')\"\n placeholder=\"T\u1EEB\"\n [model]=\"$any(_editingValue)?.from\"\n (sdChange)=\"onEditingRangeFrom($event)\">\n </sd-input-number>\n <sd-input-number size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-to')\"\n placeholder=\"\u0110\u1EBFn\"\n [model]=\"$any(_editingValue)?.to\"\n (sdChange)=\"onEditingRangeTo($event)\">\n </sd-input-number>\n </div>\n }\n } @else if (_field.type === 'boolean') {\n <div class=\"c-pop-boolean c-bool-toggle\">\n <sd-button\n [autoId]=\"chipAutoId('value-true')\"\n [type]=\"_editingValue === true ? 'fill' : 'outline'\"\n color=\"success\"\n [title]=\"$any(_field).trueLabel || 'C\u00F3'\"\n (click)=\"onEditingValueInput(true)\">\n </sd-button>\n <sd-button\n [autoId]=\"chipAutoId('value-false')\"\n [type]=\"_editingValue === false ? 'fill' : 'outline'\"\n color=\"warning\"\n [title]=\"$any(_field).falseLabel || 'Kh\u00F4ng'\"\n (click)=\"onEditingValueInput(false)\">\n </sd-button>\n </div>\n } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\n @let _opt = $any(_field).option;\n <sd-select size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\n [items]=\"_editingOptions\"\n [valueField]=\"_opt.valueField\"\n [displayField]=\"_opt.displayField\"\n [multiple]=\"multiple()\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-select>\n @if (_editingOptionsLoading) {\n <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\n }\n } @else if (_field.type === 'date') {\n <sd-date size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-date>\n } @else if (_field.type === 'datetime') {\n <sd-datetime size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-datetime>\n } @else if (_field.type === 'number') {\n <sd-input-number size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-input-number>\n } @else {\n <sd-input size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-input>\n }\n }\n </div>\n }\n </ng-template>\n</mat-menu>\n", styles: [":host{display:contents}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading{padding:10px 8px;font-size:12px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle{display:inline-flex;align-items:center;gap:4px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle .mdc-button,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-stroked-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1.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: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { 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", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { 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", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdQueryChipPopover, isStandalone: true, selector: "sd-query-chip-popover", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, chipIndex: { classPropertyName: "chipIndex", publicName: "chipIndex", isSignal: true, isRequired: false, transformFunction: null }, autoIdBase: { classPropertyName: "autoIdBase", publicName: "autoIdBase", isSignal: true, isRequired: false, transformFunction: null }, switchPickerMenu: { classPropertyName: "switchPickerMenu", publicName: "switchPickerMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", swapField: "swapField" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Chip popover \u2014 operator + value editor for the popover-mode chip.\n Visual layout mirrors the previous inline `<mat-menu #chipPopover>` in query-bar.\n Body branches on operator + field.type \u2014 8 paths preserved exactly.\n-->\n<mat-menu #menu=\"matMenu\" class=\"c-chip-popover\" xPosition=\"after\" yPosition=\"below\" (closed)=\"onMenuClosed()\">\n <ng-template matMenuContent>\n @let _field = field();\n @let _editingOperator = editingOperator();\n @let _editingValue = editingValue();\n @let _editingOptions = editingOptions();\n @let _editingOptionsLoading = editingOptionsLoading();\n @let _switchPickerMenu = switchPickerMenu();\n\n @if (_field) {\n <div class=\"c-pop-header\" (click)=\"$event.stopPropagation()\">\n <mat-icon fontSet=\"material-icons-outlined\">{{ iconFor(_field) }}</mat-icon>\n <!-- why: nested mat-menu trigger to swap the chip's field \u2014 parent provides\n the field-picker MatMenu via [switchPickerMenu]. -->\n @if (_switchPickerMenu) {\n <button\n type=\"button\"\n class=\"c-pop-header-field\"\n [matMenuTriggerFor]=\"_switchPickerMenu\"\n matTooltip=\"\u0110\u1ED5i field\">\n <span>{{ _field.label }}</span>\n <mat-icon fontSet=\"material-icons-outlined\">unfold_more</mat-icon>\n </button>\n } @else {\n <span class=\"c-pop-header-field\">{{ _field.label }}</span>\n }\n <!-- Operator selector (right-aligned). Disabled when field has \u22641 operator. -->\n <sd-operator\n class=\"c-pop-header-operator\"\n [autoId]=\"chipAutoId('operator')\"\n [operators]=\"allowedOperators()\"\n [model]=\"_editingOperator\"\n [disabled]=\"!showOperatorSelector()\"\n (modelChange)=\"onEditingOperatorChange($any($event))\" />\n </div>\n\n <div class=\"c-pop-body\" (click)=\"$event.stopPropagation()\">\n @if (!isNoDataOperator(_editingOperator)) {\n @if (_editingOperator === 'BETWEEN') {\n @if (_field.type === 'date') {\n <div class=\"c-pop-between\">\n <sd-date size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-from')\"\n placeholder=\"T\u1EEB\"\n [model]=\"$any(_editingValue)?.from\"\n (sdChange)=\"onEditingRangeFrom($event)\">\n </sd-date>\n <sd-date size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-to')\"\n placeholder=\"\u0110\u1EBFn\"\n [model]=\"$any(_editingValue)?.to\"\n (sdChange)=\"onEditingRangeTo($event)\">\n </sd-date>\n </div>\n } @else if (_field.type === 'datetime') {\n <div class=\"c-pop-between\">\n <sd-datetime size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-from')\"\n placeholder=\"T\u1EEB\"\n [model]=\"$any(_editingValue)?.from\"\n (sdChange)=\"onEditingRangeFrom($event)\">\n </sd-datetime>\n <sd-datetime size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-to')\"\n placeholder=\"\u0110\u1EBFn\"\n [model]=\"$any(_editingValue)?.to\"\n (sdChange)=\"onEditingRangeTo($event)\">\n </sd-datetime>\n </div>\n } @else {\n <div class=\"c-pop-between\">\n <sd-input-number size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-from')\"\n placeholder=\"T\u1EEB\"\n [model]=\"$any(_editingValue)?.from\"\n (sdChange)=\"onEditingRangeFrom($event)\">\n </sd-input-number>\n <sd-input-number size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value-to')\"\n placeholder=\"\u0110\u1EBFn\"\n [model]=\"$any(_editingValue)?.to\"\n (sdChange)=\"onEditingRangeTo($event)\">\n </sd-input-number>\n </div>\n }\n } @else if (_field.type === 'boolean') {\n <div class=\"c-pop-boolean c-bool-toggle\">\n <sd-button\n [autoId]=\"chipAutoId('value-true')\"\n [type]=\"_editingValue === true ? 'fill' : 'outline'\"\n color=\"success\"\n [title]=\"$any(_field).trueLabel || 'C\u00F3'\"\n (click)=\"onEditingValueInput(true)\">\n </sd-button>\n <sd-button\n [autoId]=\"chipAutoId('value-false')\"\n [type]=\"_editingValue === false ? 'fill' : 'outline'\"\n color=\"warning\"\n [title]=\"$any(_field).falseLabel || 'Kh\u00F4ng'\"\n (click)=\"onEditingValueInput(false)\">\n </sd-button>\n </div>\n } @else if (_field.type === 'values' || _field.type === 'lazy-values') {\n @let _opt = $any(_field).option;\n <sd-select size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\n [items]=\"_editingOptions\"\n [valueField]=\"_opt.valueField\"\n [displayField]=\"_opt.displayField\"\n [multiple]=\"multiple()\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-select>\n @if (_editingOptionsLoading) {\n <div class=\"c-pop-values-loading\">\u0110ang t\u1EA3i...</div>\n }\n } @else if (_field.type === 'date') {\n <sd-date size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-date>\n } @else if (_field.type === 'datetime') {\n <sd-datetime size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Ch\u1ECDn gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-datetime>\n } @else if (_field.type === 'number') {\n <sd-input-number size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-input-number>\n } @else {\n <sd-input size=\"sm\" hideInlineError\n [autoId]=\"chipAutoId('value')\"\n placeholder=\"Nh\u1EADp gi\u00E1 tr\u1ECB\"\n [model]=\"$any(_editingValue)\"\n (sdChange)=\"onEditingValueInput($event)\">\n </sd-input>\n }\n }\n </div>\n }\n </ng-template>\n</mat-menu>\n", styles: [":host{display:contents}::ng-deep .mat-mdc-menu-panel.c-chip-popover{min-width:280px;max-width:320px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e4e7;font-size:13px;font-weight:500;color:#212121}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header mat-icon{font-size:16px;width:16px;height:16px;color:var(--sd-primary)}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header .c-pop-header-operator{margin-left:auto}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 6px;margin-left:-4px;background:transparent;border:1px solid transparent;border-radius:4px;font:inherit;font-weight:500;color:#212121;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#7a7a7a!important}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-header-field:hover{background:#f5f6f7;border-color:#e2e4e7}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-body{padding:10px 12px;display:flex;flex-direction:column;gap:12px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-between{display:grid;grid-template-columns:1fr 1fr;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean{display:flex;gap:8px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-boolean button{flex:1;height:32px;border:1px solid #d6d8db;border-radius:6px;background:#fff;font:inherit;font-size:13px;cursor:pointer}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-pop-values-loading{padding:10px 8px;font-size:12px;color:#7a7a7a}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle{display:inline-flex;align-items:center;gap:4px}::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle .mdc-button,::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-stroked-button],::ng-deep .mat-mdc-menu-panel.c-chip-popover .c-bool-toggle button[mat-flat-button]{border-radius:999px;min-width:0;padding:0 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1.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: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { 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", "showSelectAll", "clearable", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "clearable", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "clearable", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
712
712
|
}
|
|
713
713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdQueryChipPopover, decorators: [{
|
|
714
714
|
type: Component,
|