@sdcorejs/angular 21.0.1 → 21.0.3
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/README.md +22 -4
- package/assets/scss/core/_inline-edit.scss +105 -0
- package/assets/scss/core/form.scss +15 -0
- package/fesm2022/sdcorejs-angular-components-anchor.mjs +9 -9
- package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs +111 -24
- package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-avatar.mjs +4 -4
- package/fesm2022/sdcorejs-angular-components-avatar.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-badge.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-base.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-button.mjs +4 -4
- package/fesm2022/sdcorejs-angular-components-button.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-chart.mjs +12 -12
- package/fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-code-editor.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-document-builder.mjs +6 -6
- package/fesm2022/sdcorejs-angular-components-editor.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-form-generic.mjs +288 -375
- package/fesm2022/sdcorejs-angular-components-form-generic.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-history.mjs +7 -7
- package/fesm2022/sdcorejs-angular-components-import-excel.mjs +10 -10
- package/fesm2022/sdcorejs-angular-components-inform.mjs +6 -6
- package/fesm2022/sdcorejs-angular-components-mini-editor.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs +158 -0
- package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs.map +1 -0
- package/fesm2022/sdcorejs-angular-components-modal.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-operator.mjs +6 -4
- package/fesm2022/sdcorejs-angular-components-operator.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-preview.mjs +8 -8
- package/fesm2022/sdcorejs-angular-components-preview.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-query-bar.mjs +60 -106
- package/fesm2022/sdcorejs-angular-components-query-bar.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-query-builder.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-quick-action.mjs +3 -3
- package/fesm2022/sdcorejs-angular-components-section.mjs +6 -6
- package/fesm2022/sdcorejs-angular-components-side-drawer.mjs +4 -4
- package/fesm2022/sdcorejs-angular-components-side-drawer.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-splitter.mjs +12 -12
- package/fesm2022/sdcorejs-angular-components-stepper.mjs +6 -6
- package/fesm2022/sdcorejs-angular-components-tab-router.mjs +18 -18
- package/fesm2022/sdcorejs-angular-components-tab.mjs +6 -6
- package/fesm2022/sdcorejs-angular-components-table.mjs +335 -208
- package/fesm2022/sdcorejs-angular-components-table.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-upload-file.mjs +16 -16
- package/fesm2022/sdcorejs-angular-components-upload-file.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components-view.mjs +45 -13
- package/fesm2022/sdcorejs-angular-components-view.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-components.mjs +1 -0
- package/fesm2022/sdcorejs-angular-components.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-directives.mjs +21 -21
- package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs +28 -8
- package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-checkbox.mjs +11 -6
- package/fesm2022/sdcorejs-angular-forms-checkbox.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs +15 -10
- package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-chip.mjs +15 -10
- package/fesm2022/sdcorejs-angular-forms-chip.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-date-range.mjs +21 -12
- package/fesm2022/sdcorejs-angular-forms-date-range.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-date.mjs +29 -17
- package/fesm2022/sdcorejs-angular-forms-date.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-datetime.mjs +34 -22
- package/fesm2022/sdcorejs-angular-forms-datetime.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-directives.mjs +12 -12
- package/fesm2022/sdcorejs-angular-forms-inline-text.mjs +167 -0
- package/fesm2022/sdcorejs-angular-forms-inline-text.mjs.map +1 -0
- package/fesm2022/sdcorejs-angular-forms-input-color.mjs +7 -5
- package/fesm2022/sdcorejs-angular-forms-input-color.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-input-number.mjs +37 -10
- package/fesm2022/sdcorejs-angular-forms-input-number.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-input.mjs +38 -12
- package/fesm2022/sdcorejs-angular-forms-input.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-label.mjs +3 -3
- package/fesm2022/sdcorejs-angular-forms-models.mjs +32 -2
- package/fesm2022/sdcorejs-angular-forms-models.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-radio.mjs +11 -6
- package/fesm2022/sdcorejs-angular-forms-radio.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-select.mjs +36 -12
- package/fesm2022/sdcorejs-angular-forms-select.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-switch.mjs +11 -6
- package/fesm2022/sdcorejs-angular-forms-switch.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms-textarea.mjs +17 -7
- package/fesm2022/sdcorejs-angular-forms-textarea.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-forms.mjs +4 -4
- package/fesm2022/sdcorejs-angular-handlers.mjs +3 -3
- package/fesm2022/sdcorejs-angular-i18n.mjs +26 -6
- package/fesm2022/sdcorejs-angular-i18n.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-interceptors.mjs +6 -6
- package/fesm2022/sdcorejs-angular-modules-auth.mjs +9 -9
- package/fesm2022/sdcorejs-angular-modules-authom.mjs +7 -7
- package/fesm2022/sdcorejs-angular-modules-keycloak.mjs +7 -7
- package/fesm2022/sdcorejs-angular-modules-layout.mjs +73 -73
- package/fesm2022/sdcorejs-angular-modules-permission.mjs +9 -9
- package/fesm2022/sdcorejs-angular-pipes.mjs +14 -14
- package/fesm2022/sdcorejs-angular-services-api.mjs +10 -10
- package/fesm2022/sdcorejs-angular-services-cache.mjs +3 -3
- package/fesm2022/sdcorejs-angular-services-confirm.mjs +6 -6
- package/fesm2022/sdcorejs-angular-services-confirm.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-services-docx.mjs +3 -3
- package/fesm2022/sdcorejs-angular-services-excel.mjs +3 -3
- package/fesm2022/sdcorejs-angular-services-license.mjs +3 -3
- package/fesm2022/sdcorejs-angular-services-loading.mjs +3 -3
- package/fesm2022/sdcorejs-angular-services-notify.mjs +23 -10
- package/fesm2022/sdcorejs-angular-services-notify.mjs.map +1 -1
- package/fesm2022/sdcorejs-angular-services-storage.mjs +3 -3
- package/package.json +9 -1
- package/types/sdcorejs-angular-components-autoid-inspector.d.ts +53 -4
- package/types/sdcorejs-angular-components-form-generic.d.ts +12 -13
- package/types/sdcorejs-angular-components-modal-resizable.d.ts +32 -0
- package/types/sdcorejs-angular-components-table.d.ts +99 -10
- package/types/sdcorejs-angular-components-view.d.ts +33 -0
- package/types/sdcorejs-angular-components.d.ts +1 -0
- package/types/sdcorejs-angular-forms-autocomplete.d.ts +16 -3
- package/types/sdcorejs-angular-forms-checkbox.d.ts +5 -1
- package/types/sdcorejs-angular-forms-chip-calendar.d.ts +5 -2
- package/types/sdcorejs-angular-forms-chip.d.ts +5 -2
- package/types/sdcorejs-angular-forms-date-range.d.ts +12 -5
- package/types/sdcorejs-angular-forms-date.d.ts +14 -5
- package/types/sdcorejs-angular-forms-datetime.d.ts +14 -5
- package/types/sdcorejs-angular-forms-inline-text.d.ts +80 -0
- package/types/sdcorejs-angular-forms-input-color.d.ts +3 -1
- package/types/sdcorejs-angular-forms-input-number.d.ts +14 -2
- package/types/sdcorejs-angular-forms-input.d.ts +14 -2
- package/types/sdcorejs-angular-forms-models.d.ts +40 -2
- package/types/sdcorejs-angular-forms-radio.d.ts +5 -2
- package/types/sdcorejs-angular-forms-select.d.ts +23 -5
- package/types/sdcorejs-angular-forms-switch.d.ts +5 -2
- package/types/sdcorejs-angular-forms-textarea.d.ts +9 -2
- package/types/sdcorejs-angular-i18n.d.ts +4 -0
|
@@ -6,7 +6,7 @@ import { MatChipInputEvent } from '@angular/material/chips';
|
|
|
6
6
|
import { ErrorStateMatcher } from '@angular/material/core';
|
|
7
7
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
8
8
|
import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
9
|
-
import { SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
9
|
+
import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
10
10
|
import { Size } from '@sdcorejs/utils/models';
|
|
11
11
|
|
|
12
12
|
declare class SdRemovableChipPipe implements PipeTransform {
|
|
@@ -45,7 +45,10 @@ declare class SdChip implements AfterViewInit {
|
|
|
45
45
|
max: _angular_core.InputSignalWithTransform<number, number | null | undefined>;
|
|
46
46
|
addable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
47
47
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
48
|
-
|
|
48
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
|
|
49
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
50
|
+
/** `true` when the static view should render (`viewed===true`, or disabled `'inline'`). */
|
|
51
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
49
52
|
hyperlink: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
|
|
50
53
|
model: _angular_core.ModelSignal<(string | number)[] | undefined>;
|
|
51
54
|
sdChange: _angular_core.OutputEmitterRef<any[]>;
|
|
@@ -4,6 +4,7 @@ import { FormGroup, FormControl } from '@angular/forms';
|
|
|
4
4
|
import { MatDateRangePicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
|
|
5
5
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
6
6
|
import { SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
7
|
+
import { SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
|
|
7
8
|
import { Size } from '@sdcorejs/utils/models';
|
|
8
9
|
|
|
9
10
|
interface Daterange {
|
|
@@ -38,10 +39,16 @@ declare class SdDateRange implements OnDestroy, OnInit {
|
|
|
38
39
|
readonly errorMessage: _angular_core.Signal<string | undefined>;
|
|
39
40
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
40
41
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
41
|
-
/**
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
|
|
42
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (range picker). */
|
|
43
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
44
|
+
/** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
|
|
45
|
+
clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
46
|
+
/** `true` when `viewed === 'inline'`. */
|
|
47
|
+
readonly isInline: _angular_core.Signal<boolean>;
|
|
48
|
+
/** `true` when `viewed === true` (static view, no editor). */
|
|
49
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
50
|
+
/** Open the range picker from the inline text face. No-op unless `viewed='inline'`. */
|
|
51
|
+
enterInlineEdit: () => void;
|
|
45
52
|
/** Optional <ng-template #sdValue> projected by consumer to override the viewed text. */
|
|
46
53
|
sdValueTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
47
54
|
/**
|
|
@@ -77,7 +84,7 @@ declare class SdDateRange implements OnDestroy, OnInit {
|
|
|
77
84
|
onClosePicker: () => void;
|
|
78
85
|
onOpenPicker: (event: MouseEvent) => void;
|
|
79
86
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDateRange, never>;
|
|
80
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDateRange, "sd-date-range", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "
|
|
87
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDateRange, "sd-date-range", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; }, ["sdLabelDef", "sdValueTemplate"], never, true, never>;
|
|
81
88
|
}
|
|
82
89
|
|
|
83
90
|
export { SdDateRange };
|
|
@@ -4,7 +4,7 @@ import { FormGroup } from '@angular/forms';
|
|
|
4
4
|
import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
|
|
5
5
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
6
6
|
import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
7
|
-
import { SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
7
|
+
import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
8
8
|
import { Size } from '@sdcorejs/utils/models';
|
|
9
9
|
|
|
10
10
|
declare class SdDate implements OnDestroy, OnInit {
|
|
@@ -35,9 +35,18 @@ declare class SdDate implements OnDestroy, OnInit {
|
|
|
35
35
|
hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
36
36
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
37
37
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (calendar). */
|
|
39
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
40
|
+
/** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
|
|
41
|
+
clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
42
|
+
/** `true` when `viewed === 'inline'`. */
|
|
43
|
+
readonly isInline: _angular_core.Signal<boolean>;
|
|
44
|
+
/** `true` when `viewed === true` (static view, no editor). */
|
|
45
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
46
|
+
/** Open the calendar from the inline text face. No-op unless `viewed='inline'`. */
|
|
47
|
+
enterInlineEdit: () => void;
|
|
48
|
+
/** View display template: `sdViewDef` overrides the projected `#sdValue` (unified). */
|
|
49
|
+
readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
41
50
|
inlineError: _angular_core.InputSignal<string | undefined>;
|
|
42
51
|
/**
|
|
43
52
|
* Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
|
|
@@ -76,7 +85,7 @@ declare class SdDate implements OnDestroy, OnInit {
|
|
|
76
85
|
onChange: (event: MatDatepickerInputEvent<Date>) => void;
|
|
77
86
|
clear: ($event: any) => void;
|
|
78
87
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDate, never>;
|
|
79
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDate, "sd-date", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "
|
|
88
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDate, "sd-date", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef", "sdLabelDef"], ["[sdLabel]"], true, never>;
|
|
80
89
|
}
|
|
81
90
|
|
|
82
91
|
export { SdDate };
|
|
@@ -3,7 +3,7 @@ import { OnDestroy, OnInit, ElementRef, TemplateRef } from '@angular/core';
|
|
|
3
3
|
import { FormGroup } from '@angular/forms';
|
|
4
4
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
5
5
|
import { SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
6
|
-
import { SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
6
|
+
import { SdViewed, SdViewedInput, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
7
7
|
import { Size } from '@sdcorejs/utils/models';
|
|
8
8
|
|
|
9
9
|
declare class SdDatetime implements OnDestroy, OnInit {
|
|
@@ -35,11 +35,20 @@ declare class SdDatetime implements OnDestroy, OnInit {
|
|
|
35
35
|
hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
36
36
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
37
37
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
38
|
-
|
|
38
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (datetime overlay). */
|
|
39
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
39
40
|
/** Hiển thị thêm cột giây trong picker. Mặc định: chỉ HH:MM. */
|
|
40
41
|
showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
41
|
-
/**
|
|
42
|
-
|
|
42
|
+
/** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
|
|
43
|
+
clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
44
|
+
/** `true` when `viewed === 'inline'`. */
|
|
45
|
+
readonly isInline: _angular_core.Signal<boolean>;
|
|
46
|
+
/** `true` when `viewed === true` (static view, no editor). */
|
|
47
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
48
|
+
/** Open the datetime overlay from the inline text face. No-op unless `viewed='inline'`. */
|
|
49
|
+
enterInlineEdit: () => void;
|
|
50
|
+
/** View display template: `sdViewDef` overrides the projected `#sdValue` (unified). */
|
|
51
|
+
readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
43
52
|
inlineError: _angular_core.InputSignal<string | undefined>;
|
|
44
53
|
/**
|
|
45
54
|
* Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
|
|
@@ -86,7 +95,7 @@ declare class SdDatetime implements OnDestroy, OnInit {
|
|
|
86
95
|
onConfirmInput: (event: any) => void;
|
|
87
96
|
clear: ($event: any) => void;
|
|
88
97
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdDatetime, never>;
|
|
89
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDatetime, "sd-datetime", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "
|
|
98
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdDatetime, "sd-datetime", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef"], ["[sdLabel]"], true, never>;
|
|
90
99
|
}
|
|
91
100
|
|
|
92
101
|
export { SdDatetime };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
3
|
+
|
|
4
|
+
/** Visual / `data-state` of the inline input. `'auto'` derives from focus + value. */
|
|
5
|
+
type SdInlineTextState = 'auto' | 'pending' | 'active' | 'focus' | 'error';
|
|
6
|
+
/** `'standalone'` draws its own affordance (hover bg + focus ring); `'seamless'` defers all chrome to the host. */
|
|
7
|
+
type SdInlineTextChrome = 'standalone' | 'seamless';
|
|
8
|
+
/**
|
|
9
|
+
* Borderless, content-hugging text input — the seamless primitive shared by
|
|
10
|
+
* `sd-input` / `sd-input-number` (`viewed='inline'`) and the query-bar / query-builder chips.
|
|
11
|
+
*
|
|
12
|
+
* why: a native `<input>` inside `mat-form-field` cannot hug its content, so inline-edit
|
|
13
|
+
* looked like a full-width input rather than text. This primitive renders a raw `<input>`
|
|
14
|
+
* sized via the native `size` attribute (clamped) so the click/hover target tracks the value.
|
|
15
|
+
*
|
|
16
|
+
* It is intentionally unopinionated about commit/parse/format: it forwards the raw DOM events
|
|
17
|
+
* (focus / blur / keydown / paste / composition / Enter / Escape) so each consumer keeps its own
|
|
18
|
+
* logic (e.g. sd-input-number's vi-VN formatting). Two binding modes:
|
|
19
|
+
* - **uncontrolled** via `[(value)]` — used by the chips' signal drafts;
|
|
20
|
+
* - **controlled** via `[control]` (an external `SdFormControl`) — used by the form controls.
|
|
21
|
+
*/
|
|
22
|
+
declare class SdInlineText {
|
|
23
|
+
/** Uncontrolled value (two-way). Ignored when `[control]` is provided. */
|
|
24
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
25
|
+
/** Optional external FormControl (controlled mode) — used by sd-input / sd-input-number. */
|
|
26
|
+
readonly control: _angular_core.InputSignal<SdFormControl | undefined>;
|
|
27
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
28
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
29
|
+
/** Show a hover/value-gated clear-× (default `true`). */
|
|
30
|
+
readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
31
|
+
/** `'auto'` derives state from focus + value; pass an explicit value (e.g. `'error'`) to override. */
|
|
32
|
+
readonly state: _angular_core.InputSignal<SdInlineTextState>;
|
|
33
|
+
readonly chrome: _angular_core.InputSignal<SdInlineTextChrome>;
|
|
34
|
+
readonly autoId: _angular_core.InputSignal<string | undefined>;
|
|
35
|
+
readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
36
|
+
/** Lower bound (chars) so short/empty values keep a clickable target. */
|
|
37
|
+
readonly minSize: _angular_core.InputSignal<number>;
|
|
38
|
+
readonly cleared: _angular_core.OutputEmitterRef<void>;
|
|
39
|
+
readonly keyupEnter: _angular_core.OutputEmitterRef<void>;
|
|
40
|
+
readonly keydownEscape: _angular_core.OutputEmitterRef<void>;
|
|
41
|
+
readonly sdFocus: _angular_core.OutputEmitterRef<FocusEvent>;
|
|
42
|
+
readonly sdBlur: _angular_core.OutputEmitterRef<FocusEvent>;
|
|
43
|
+
readonly sdKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
|
|
44
|
+
readonly sdPaste: _angular_core.OutputEmitterRef<ClipboardEvent>;
|
|
45
|
+
readonly sdCompositionStart: _angular_core.OutputEmitterRef<CompositionEvent>;
|
|
46
|
+
readonly sdCompositionEnd: _angular_core.OutputEmitterRef<CompositionEvent>;
|
|
47
|
+
private readonly inputRef;
|
|
48
|
+
/** Bumped on input/blur/composition + bound-control changes so size/state methods re-eval under OnPush. */
|
|
49
|
+
protected readonly tick: _angular_core.WritableSignal<number>;
|
|
50
|
+
protected readonly focused: _angular_core.WritableSignal<boolean>;
|
|
51
|
+
constructor();
|
|
52
|
+
/**
|
|
53
|
+
* Current text — from the bound control in controlled mode, else the value model.
|
|
54
|
+
* why: `tick` is a tracked dependency so the computed re-runs when a bound control's
|
|
55
|
+
* value changes programmatically (control.value itself is not a signal).
|
|
56
|
+
*/
|
|
57
|
+
protected readonly currentText: _angular_core.Signal<string>;
|
|
58
|
+
protected readonly hasValue: _angular_core.Signal<boolean>;
|
|
59
|
+
protected readonly sizeOf: _angular_core.Signal<number>;
|
|
60
|
+
protected readonly showClear: _angular_core.Signal<boolean>;
|
|
61
|
+
protected readonly effectiveState: _angular_core.Signal<SdInlineTextState>;
|
|
62
|
+
protected onInput(ev: Event): void;
|
|
63
|
+
protected onFocus(ev: FocusEvent): void;
|
|
64
|
+
protected onBlur(ev: FocusEvent): void;
|
|
65
|
+
protected onKeyup(ev: KeyboardEvent): void;
|
|
66
|
+
protected onKeydown(ev: KeyboardEvent): void;
|
|
67
|
+
protected onPaste(ev: ClipboardEvent): void;
|
|
68
|
+
protected onCompositionStart(ev: CompositionEvent): void;
|
|
69
|
+
protected onCompositionEnd(ev: CompositionEvent): void;
|
|
70
|
+
protected clear(ev: Event): void;
|
|
71
|
+
/** Focus the native input. */
|
|
72
|
+
focus(): void;
|
|
73
|
+
/** Blur the native input. */
|
|
74
|
+
blur(): void;
|
|
75
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdInlineText, never>;
|
|
76
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdInlineText, "sd-inline-text", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "chrome": { "alias": "chrome"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "cleared": "cleared"; "keyupEnter": "keyupEnter"; "keydownEscape": "keydownEscape"; "sdFocus": "sdFocus"; "sdBlur": "sdBlur"; "sdKeydown": "sdKeydown"; "sdPaste": "sdPaste"; "sdCompositionStart": "sdCompositionStart"; "sdCompositionEnd": "sdCompositionEnd"; }, never, never, true, never>;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export { SdInlineText };
|
|
80
|
+
export type { SdInlineTextChrome, SdInlineTextState };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { ElementRef } from '@angular/core';
|
|
3
3
|
import { MatFormFieldAppearance } from '@angular/material/form-field';
|
|
4
|
+
import { SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
|
|
4
5
|
import { Size } from '@sdcorejs/utils/models';
|
|
5
6
|
|
|
6
7
|
declare const SD_INPUT_COLOR_HEX_PATTERN = "^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$";
|
|
@@ -18,7 +19,8 @@ declare class SdInputColor {
|
|
|
18
19
|
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
19
20
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
20
21
|
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
21
|
-
|
|
22
|
+
/** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */
|
|
23
|
+
readonly viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
22
24
|
readonly valueModel: _angular_core.ModelSignal<string | null | undefined>;
|
|
23
25
|
readonly sdChange: _angular_core.OutputEmitterRef<string | null | undefined>;
|
|
24
26
|
readonly picker: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
@@ -3,8 +3,9 @@ import { OnDestroy, OnInit, AfterViewInit, ElementRef, TemplateRef, EventEmitter
|
|
|
3
3
|
import { FormGroup, FormControl, FormGroupDirective, NgForm } from '@angular/forms';
|
|
4
4
|
import { ErrorStateMatcher } from '@angular/material/core';
|
|
5
5
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
6
|
+
import { SdInlineText } from '@sdcorejs/angular/forms/inline-text';
|
|
6
7
|
import { SdViewDefDirective, SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
7
|
-
import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
8
|
+
import { SdViewed, SdViewedInput, SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
8
9
|
import { Size } from '@sdcorejs/utils/models';
|
|
9
10
|
|
|
10
11
|
declare class SdInputNumberErrotStateMatcher implements ErrorStateMatcher {
|
|
@@ -16,6 +17,8 @@ declare class SdInputNumber implements OnDestroy, OnInit, AfterViewInit {
|
|
|
16
17
|
#private;
|
|
17
18
|
id: string;
|
|
18
19
|
control: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
20
|
+
/** The inline primitive — only present when `viewed='inline'`; drives focus/blur in that mode. */
|
|
21
|
+
inlineRef: _angular_core.Signal<SdInlineText | undefined>;
|
|
19
22
|
sdLabelTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
20
23
|
sdValueTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
21
24
|
sdViewDef: _angular_core.Signal<SdViewDefDirective<any, any> | undefined>;
|
|
@@ -43,7 +46,16 @@ declare class SdInputNumber implements OnDestroy, OnInit, AfterViewInit {
|
|
|
43
46
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
44
47
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
45
48
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
46
|
-
|
|
49
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (input IS the face). */
|
|
50
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
51
|
+
/** `true` when `viewed === 'inline'`. */
|
|
52
|
+
readonly isInline: _angular_core.Signal<boolean>;
|
|
53
|
+
/** `true` when `viewed === true` (static view, no input). */
|
|
54
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
55
|
+
/** Focus the inline input. No-op unless `viewed='inline'`. */
|
|
56
|
+
enterInlineEdit: () => void;
|
|
57
|
+
/** View display template: `sdViewDef` overrides the projected `#sdValue` for the static view (unified). */
|
|
58
|
+
readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
47
59
|
type: _angular_core.InputSignal<"negative" | "positive" | undefined>;
|
|
48
60
|
precision: _angular_core.InputSignal<number>;
|
|
49
61
|
format: _angular_core.InputSignal<"1,234,567.89" | "1.234.567,89" | undefined>;
|
|
@@ -2,14 +2,17 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { OnDestroy, OnInit, AfterViewInit, ElementRef, TemplateRef, EventEmitter } from '@angular/core';
|
|
3
3
|
import { FormGroup } from '@angular/forms';
|
|
4
4
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
5
|
+
import { SdInlineText } from '@sdcorejs/angular/forms/inline-text';
|
|
5
6
|
import { SdSuffixDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
6
|
-
import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
7
|
+
import { SdViewed, SdViewedInput, SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
7
8
|
import { Size } from '@sdcorejs/utils/models';
|
|
8
9
|
|
|
9
10
|
declare class SdInput implements OnDestroy, OnInit, AfterViewInit {
|
|
10
11
|
#private;
|
|
11
12
|
id: string;
|
|
12
13
|
control: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
14
|
+
/** The inline primitive — only present when `viewed='inline'`; drives focus/blur in that mode. */
|
|
15
|
+
inlineRef: _angular_core.Signal<SdInlineText | undefined>;
|
|
13
16
|
sdLabelTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
14
17
|
sdValueTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
15
18
|
sdSuffixDef: _angular_core.Signal<SdSuffixDefDirective | undefined>;
|
|
@@ -40,7 +43,16 @@ declare class SdInput implements OnDestroy, OnInit, AfterViewInit {
|
|
|
40
43
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
41
44
|
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
42
45
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
43
|
-
|
|
46
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (no panel — the input IS the face). */
|
|
47
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
48
|
+
/** `true` when `viewed === 'inline'`. */
|
|
49
|
+
readonly isInline: _angular_core.Signal<boolean>;
|
|
50
|
+
/** `true` when `viewed === true` (static view, no input). */
|
|
51
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
52
|
+
/** Focus the inline input. No-op unless `viewed='inline'`. */
|
|
53
|
+
enterInlineEdit: () => void;
|
|
54
|
+
/** View display template: `sdViewDef` overrides the projected `#sdValue` for the static view (unified). */
|
|
55
|
+
readonly viewTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
44
56
|
minlength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
|
|
45
57
|
maxlength: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
|
|
46
58
|
pattern: _angular_core.InputSignal<string | null | undefined>;
|
|
@@ -81,5 +81,43 @@ interface SdFormControlSnapshot<T> {
|
|
|
81
81
|
*/
|
|
82
82
|
declare function sdFormControlState<T = unknown>(control: Signal<AbstractControl<T> | null | undefined>): Signal<SdFormControlSnapshot<T>>;
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
/**
|
|
85
|
+
* Three display states shared by sd-form-controls:
|
|
86
|
+
* - `false` → full edit chrome (input / dropdown).
|
|
87
|
+
* - `true` → static read-only view (`<sd-view>` text), no editor.
|
|
88
|
+
* - `'inline'` → the editor is STILL rendered (so its panel works), but its chrome is
|
|
89
|
+
* hidden; the `<sd-view>` text is the visible face / trigger. Click the text to open
|
|
90
|
+
* the picker's panel. The text is retained while the panel is open — it only changes
|
|
91
|
+
* when a new value is committed (JIRA-style click-to-edit).
|
|
92
|
+
*/
|
|
93
|
+
type SdViewed = boolean | 'inline';
|
|
94
|
+
type SdViewedInput = SdViewed | '' | null | undefined;
|
|
95
|
+
/**
|
|
96
|
+
* `viewed` input transform. Keeps `booleanAttribute` coercion so a bare attribute
|
|
97
|
+
* (`<sd-select viewed>`) still resolves to `true`, but intercepts the literal
|
|
98
|
+
* `'inline'` first — `booleanAttribute('inline')` would otherwise coerce it to `true`.
|
|
99
|
+
*/
|
|
100
|
+
declare function sdViewedTransform(v: SdViewedInput): SdViewed;
|
|
101
|
+
interface SdViewedInlineApi {
|
|
102
|
+
/** `viewed() === 'inline'` — editor rendered but chrome hidden; sd-view text is the trigger face. */
|
|
103
|
+
readonly isInline: Signal<boolean>;
|
|
104
|
+
/** `viewed() === true` — static read-only view (no editor rendered). */
|
|
105
|
+
readonly isViewed: Signal<boolean>;
|
|
106
|
+
/** Open the picker from the inline text face. No-op unless `'inline'`. */
|
|
107
|
+
enterInlineEdit(): void;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Compose the tri-state `viewed` semantics into a control. `open` opens the control's
|
|
111
|
+
* native picker (mat-select panel / mat-calendar / overlay). In `'inline'` mode the editor
|
|
112
|
+
* is always rendered (chrome hidden via CSS), so `open()` can fire immediately on click —
|
|
113
|
+
* no render-swap, the view text never disappears.
|
|
114
|
+
*
|
|
115
|
+
* @param viewed the control's `viewed` input signal.
|
|
116
|
+
* @param open opens the control's picker; called by `enterInlineEdit`.
|
|
117
|
+
* @param disabled the control's disabled state. why: a disabled `'inline'` field must behave
|
|
118
|
+
* like `viewed=true` (static, NOT click-to-edit) — you can't edit a disabled control.
|
|
119
|
+
*/
|
|
120
|
+
declare function sdViewedInline(viewed: Signal<SdViewed>, open?: () => void, disabled?: Signal<boolean>): SdViewedInlineApi;
|
|
121
|
+
|
|
122
|
+
export { HandleSdCustomValidator, SD_FORM_CONFIGURATION, SdFormControl, SdInlineErrorValidator, sdFormControlState, sdViewedInline, sdViewedTransform };
|
|
123
|
+
export type { ISdFormConfiguration, SdCustomValidator, SdFormControlSnapshot, SdSearch, SdSearchReq, SdSelectionData, SdViewed, SdViewedInlineApi, SdViewedInput };
|
|
@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
|
|
|
2
2
|
import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
|
3
3
|
import { FormGroup } from '@angular/forms';
|
|
4
4
|
import { SdSuffixDefDirective, SdLabelDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
5
|
-
import { SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
5
|
+
import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
|
|
6
6
|
import { Color } from '@sdcorejs/utils/models';
|
|
7
7
|
|
|
8
8
|
declare class SdRadio implements OnInit, AfterViewInit, OnDestroy {
|
|
@@ -21,7 +21,10 @@ declare class SdRadio implements OnInit, AfterViewInit, OnDestroy {
|
|
|
21
21
|
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
22
22
|
readonly inlineError: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
|
|
23
23
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
24
|
-
|
|
24
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
|
|
25
|
+
readonly viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
26
|
+
/** `true` when the static read-only view should render. */
|
|
27
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
25
28
|
readonly color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
|
|
26
29
|
readonly hyperlink: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
|
|
27
30
|
readonly model: _angular_core.ModelSignal<string | number | boolean | null | undefined>;
|
|
@@ -5,7 +5,7 @@ import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-f
|
|
|
5
5
|
import { MatInput } from '@angular/material/input';
|
|
6
6
|
import { MatSelect, MatSelectChange } from '@angular/material/select';
|
|
7
7
|
import { SdItemDefDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
8
|
-
import { SdCustomValidator, SdSearch, SdSelectionData, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
8
|
+
import { SdViewed, SdViewedInput, SdCustomValidator, SdSearch, SdSelectionData, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
9
9
|
import { Size } from '@sdcorejs/utils/models';
|
|
10
10
|
|
|
11
11
|
declare class SdSelect<T extends object | string | number = Record<string, unknown>> implements OnInit {
|
|
@@ -17,6 +17,13 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
|
|
|
17
17
|
sdValueTemplate: Signal<TemplateRef<any> | undefined>;
|
|
18
18
|
itemDef: Signal<SdItemDefDefDirective<any> | undefined>;
|
|
19
19
|
sdViewDef: Signal<SdViewDefDirective<any, any> | undefined>;
|
|
20
|
+
/**
|
|
21
|
+
* View display template. `sdViewDef` is now just a custom override of the view rendering —
|
|
22
|
+
* it replaces the projected `#sdValue` template when present (fed into `<sd-view>`'s
|
|
23
|
+
* `valueTemplate`), so there is ONE rendering path. No more `.sd-view` class / focus-swap;
|
|
24
|
+
* click-to-edit is governed by `viewed='inline'`.
|
|
25
|
+
*/
|
|
26
|
+
readonly viewTemplate: Signal<TemplateRef<any> | undefined>;
|
|
20
27
|
autoIdInput: _angular_core.InputSignal<string | null | undefined>;
|
|
21
28
|
autoId: Signal<string | undefined>;
|
|
22
29
|
readonly dataDisabled: Signal<"true" | "false">;
|
|
@@ -42,10 +49,21 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
|
|
|
42
49
|
hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
43
50
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
44
51
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
45
|
-
|
|
52
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (bare editor). */
|
|
53
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
46
54
|
multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
47
|
-
/**
|
|
48
|
-
|
|
55
|
+
/**
|
|
56
|
+
* Whether the `viewed='inline'` text face shows a hover clear-× to empty the value.
|
|
57
|
+
* Default `true`. Set `false` where the HOST owns removal (e.g. `<sd-query-bar>` chips,
|
|
58
|
+
* whose own `×` removes the whole filter) so the chip isn't cluttered with two ×.
|
|
59
|
+
*/
|
|
60
|
+
clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
61
|
+
/** `true` when `viewed === 'inline'` — editor mounted but chrome hidden; sd-view text is the trigger face. */
|
|
62
|
+
readonly isInline: Signal<boolean>;
|
|
63
|
+
/** `true` when `viewed === true` — static read-only view, no editor mounted. */
|
|
64
|
+
readonly isViewed: Signal<boolean>;
|
|
65
|
+
/** Open the picker from the inline text face. No-op unless `viewed='inline'`. */
|
|
66
|
+
enterInlineEdit: () => void;
|
|
49
67
|
validator: _angular_core.InputSignal<SdCustomValidator | undefined>;
|
|
50
68
|
inlineError: _angular_core.InputSignal<string | undefined>;
|
|
51
69
|
/**
|
|
@@ -89,7 +107,7 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
|
|
|
89
107
|
open: () => void;
|
|
90
108
|
onOpenedChange: (isOpened: boolean) => void;
|
|
91
109
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSelect<any>, never>;
|
|
92
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSelect<any>, "sd-select", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": true; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": true; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "minWidthPanel": { "alias": "minWidthPanel"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "
|
|
110
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdSelect<any>, "sd-select", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": true; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": true; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "minWidthPanel": { "alias": "minWidthPanel"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
|
|
93
111
|
}
|
|
94
112
|
|
|
95
113
|
export { SdSelect };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
|
|
3
3
|
import { FormGroup } from '@angular/forms';
|
|
4
|
-
import { SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
4
|
+
import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
|
|
5
5
|
import { Color } from '@sdcorejs/utils/models';
|
|
6
6
|
|
|
7
7
|
declare class SdSwitch implements OnInit, AfterViewInit, OnDestroy {
|
|
@@ -14,7 +14,10 @@ declare class SdSwitch implements OnInit, AfterViewInit, OnDestroy {
|
|
|
14
14
|
readonly label: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
|
|
15
15
|
readonly color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
|
|
16
16
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
17
|
-
|
|
17
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
|
|
18
|
+
readonly viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
19
|
+
/** `true` when the static read-only view should render. */
|
|
20
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
18
21
|
readonly hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
19
22
|
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
20
23
|
readonly model: _angular_core.ModelSignal<boolean | null | undefined>;
|
|
@@ -3,7 +3,7 @@ import { OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
|
|
|
3
3
|
import { FormGroup } from '@angular/forms';
|
|
4
4
|
import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
|
|
5
5
|
import { SdViewDefDirective, SdLabelDefDirective, SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
|
|
6
|
-
import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
6
|
+
import { SdViewed, SdViewedInput, SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
|
|
7
7
|
import { Size } from '@sdcorejs/utils/models';
|
|
8
8
|
|
|
9
9
|
declare class SdTextarea implements OnInit, AfterViewInit, OnDestroy {
|
|
@@ -33,8 +33,15 @@ declare class SdTextarea implements OnInit, AfterViewInit, OnDestroy {
|
|
|
33
33
|
hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
34
34
|
required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
35
35
|
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
36
|
-
|
|
36
|
+
/** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (textarea reads like text). */
|
|
37
|
+
viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
|
|
37
38
|
autoHeight: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
39
|
+
/** `true` when `viewed === 'inline'`. */
|
|
40
|
+
readonly isInline: _angular_core.Signal<boolean>;
|
|
41
|
+
/** `true` when `viewed === true` (static view, no editor). */
|
|
42
|
+
readonly isViewed: _angular_core.Signal<boolean>;
|
|
43
|
+
/** Focus the inline textarea. No-op unless `viewed='inline'`. */
|
|
44
|
+
enterInlineEdit: () => void;
|
|
38
45
|
maxlength: _angular_core.InputSignalWithTransform<number | null, unknown>;
|
|
39
46
|
pattern: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
|
|
40
47
|
validator: _angular_core.InputSignal<SdCustomValidator | undefined>;
|
|
@@ -69,7 +69,9 @@ declare const EN_MESSAGES: {
|
|
|
69
69
|
readonly 'core.operator.contain.display': "Contains";
|
|
70
70
|
readonly 'core.operator.not-contain.display': "Does not contain";
|
|
71
71
|
readonly 'core.operator.start-with.display': "Starts with";
|
|
72
|
+
readonly 'core.operator.not-start-with.display': "Does not start with";
|
|
72
73
|
readonly 'core.operator.end-with.display': "Ends with";
|
|
74
|
+
readonly 'core.operator.not-end-with.display': "Does not end with";
|
|
73
75
|
readonly 'core.operator.in.display': "In";
|
|
74
76
|
readonly 'core.operator.not-in.display': "Not in";
|
|
75
77
|
readonly 'core.operator.between.display': "Between";
|
|
@@ -269,6 +271,8 @@ declare const EN_MESSAGES: {
|
|
|
269
271
|
readonly 'core.component.form-builder.empty-hint': "Build your form by dragging fields from the left panel, or press";
|
|
270
272
|
readonly 'core.component.form-builder.conditional': "Conditional";
|
|
271
273
|
readonly 'core.component.form-builder.group-drop-here': "Drop a field here to add it to this group";
|
|
274
|
+
readonly 'core.component.form-builder.edit-group': "Edit group";
|
|
275
|
+
readonly 'core.component.form-builder.group-empty-hint': "Click Details to add fields to this group";
|
|
272
276
|
readonly 'core.component.form-builder.hidden': "Hidden";
|
|
273
277
|
readonly 'core.component.form-builder.read-only': "Read only";
|
|
274
278
|
readonly 'core.component.form-builder.untitled': "Untitled";
|