@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.
Files changed (130) hide show
  1. package/README.md +22 -4
  2. package/assets/scss/core/_inline-edit.scss +105 -0
  3. package/assets/scss/core/form.scss +15 -0
  4. package/fesm2022/sdcorejs-angular-components-anchor.mjs +9 -9
  5. package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs +111 -24
  6. package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs.map +1 -1
  7. package/fesm2022/sdcorejs-angular-components-avatar.mjs +4 -4
  8. package/fesm2022/sdcorejs-angular-components-avatar.mjs.map +1 -1
  9. package/fesm2022/sdcorejs-angular-components-badge.mjs +3 -3
  10. package/fesm2022/sdcorejs-angular-components-base.mjs +3 -3
  11. package/fesm2022/sdcorejs-angular-components-button.mjs +4 -4
  12. package/fesm2022/sdcorejs-angular-components-button.mjs.map +1 -1
  13. package/fesm2022/sdcorejs-angular-components-chart.mjs +12 -12
  14. package/fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs +3 -3
  15. package/fesm2022/sdcorejs-angular-components-code-editor.mjs +3 -3
  16. package/fesm2022/sdcorejs-angular-components-document-builder.mjs +6 -6
  17. package/fesm2022/sdcorejs-angular-components-editor.mjs +3 -3
  18. package/fesm2022/sdcorejs-angular-components-form-generic.mjs +288 -375
  19. package/fesm2022/sdcorejs-angular-components-form-generic.mjs.map +1 -1
  20. package/fesm2022/sdcorejs-angular-components-history.mjs +7 -7
  21. package/fesm2022/sdcorejs-angular-components-import-excel.mjs +10 -10
  22. package/fesm2022/sdcorejs-angular-components-inform.mjs +6 -6
  23. package/fesm2022/sdcorejs-angular-components-mini-editor.mjs +3 -3
  24. package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs +158 -0
  25. package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs.map +1 -0
  26. package/fesm2022/sdcorejs-angular-components-modal.mjs +3 -3
  27. package/fesm2022/sdcorejs-angular-components-operator.mjs +6 -4
  28. package/fesm2022/sdcorejs-angular-components-operator.mjs.map +1 -1
  29. package/fesm2022/sdcorejs-angular-components-preview.mjs +8 -8
  30. package/fesm2022/sdcorejs-angular-components-preview.mjs.map +1 -1
  31. package/fesm2022/sdcorejs-angular-components-query-bar.mjs +60 -106
  32. package/fesm2022/sdcorejs-angular-components-query-bar.mjs.map +1 -1
  33. package/fesm2022/sdcorejs-angular-components-query-builder.mjs +3 -3
  34. package/fesm2022/sdcorejs-angular-components-quick-action.mjs +3 -3
  35. package/fesm2022/sdcorejs-angular-components-section.mjs +6 -6
  36. package/fesm2022/sdcorejs-angular-components-side-drawer.mjs +4 -4
  37. package/fesm2022/sdcorejs-angular-components-side-drawer.mjs.map +1 -1
  38. package/fesm2022/sdcorejs-angular-components-splitter.mjs +12 -12
  39. package/fesm2022/sdcorejs-angular-components-stepper.mjs +6 -6
  40. package/fesm2022/sdcorejs-angular-components-tab-router.mjs +18 -18
  41. package/fesm2022/sdcorejs-angular-components-tab.mjs +6 -6
  42. package/fesm2022/sdcorejs-angular-components-table.mjs +335 -208
  43. package/fesm2022/sdcorejs-angular-components-table.mjs.map +1 -1
  44. package/fesm2022/sdcorejs-angular-components-upload-file.mjs +16 -16
  45. package/fesm2022/sdcorejs-angular-components-upload-file.mjs.map +1 -1
  46. package/fesm2022/sdcorejs-angular-components-view.mjs +45 -13
  47. package/fesm2022/sdcorejs-angular-components-view.mjs.map +1 -1
  48. package/fesm2022/sdcorejs-angular-components.mjs +1 -0
  49. package/fesm2022/sdcorejs-angular-components.mjs.map +1 -1
  50. package/fesm2022/sdcorejs-angular-directives.mjs +21 -21
  51. package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs +28 -8
  52. package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs.map +1 -1
  53. package/fesm2022/sdcorejs-angular-forms-checkbox.mjs +11 -6
  54. package/fesm2022/sdcorejs-angular-forms-checkbox.mjs.map +1 -1
  55. package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs +15 -10
  56. package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs.map +1 -1
  57. package/fesm2022/sdcorejs-angular-forms-chip.mjs +15 -10
  58. package/fesm2022/sdcorejs-angular-forms-chip.mjs.map +1 -1
  59. package/fesm2022/sdcorejs-angular-forms-date-range.mjs +21 -12
  60. package/fesm2022/sdcorejs-angular-forms-date-range.mjs.map +1 -1
  61. package/fesm2022/sdcorejs-angular-forms-date.mjs +29 -17
  62. package/fesm2022/sdcorejs-angular-forms-date.mjs.map +1 -1
  63. package/fesm2022/sdcorejs-angular-forms-datetime.mjs +34 -22
  64. package/fesm2022/sdcorejs-angular-forms-datetime.mjs.map +1 -1
  65. package/fesm2022/sdcorejs-angular-forms-directives.mjs +12 -12
  66. package/fesm2022/sdcorejs-angular-forms-inline-text.mjs +167 -0
  67. package/fesm2022/sdcorejs-angular-forms-inline-text.mjs.map +1 -0
  68. package/fesm2022/sdcorejs-angular-forms-input-color.mjs +7 -5
  69. package/fesm2022/sdcorejs-angular-forms-input-color.mjs.map +1 -1
  70. package/fesm2022/sdcorejs-angular-forms-input-number.mjs +37 -10
  71. package/fesm2022/sdcorejs-angular-forms-input-number.mjs.map +1 -1
  72. package/fesm2022/sdcorejs-angular-forms-input.mjs +38 -12
  73. package/fesm2022/sdcorejs-angular-forms-input.mjs.map +1 -1
  74. package/fesm2022/sdcorejs-angular-forms-label.mjs +3 -3
  75. package/fesm2022/sdcorejs-angular-forms-models.mjs +32 -2
  76. package/fesm2022/sdcorejs-angular-forms-models.mjs.map +1 -1
  77. package/fesm2022/sdcorejs-angular-forms-radio.mjs +11 -6
  78. package/fesm2022/sdcorejs-angular-forms-radio.mjs.map +1 -1
  79. package/fesm2022/sdcorejs-angular-forms-select.mjs +36 -12
  80. package/fesm2022/sdcorejs-angular-forms-select.mjs.map +1 -1
  81. package/fesm2022/sdcorejs-angular-forms-switch.mjs +11 -6
  82. package/fesm2022/sdcorejs-angular-forms-switch.mjs.map +1 -1
  83. package/fesm2022/sdcorejs-angular-forms-textarea.mjs +17 -7
  84. package/fesm2022/sdcorejs-angular-forms-textarea.mjs.map +1 -1
  85. package/fesm2022/sdcorejs-angular-forms.mjs +4 -4
  86. package/fesm2022/sdcorejs-angular-handlers.mjs +3 -3
  87. package/fesm2022/sdcorejs-angular-i18n.mjs +26 -6
  88. package/fesm2022/sdcorejs-angular-i18n.mjs.map +1 -1
  89. package/fesm2022/sdcorejs-angular-interceptors.mjs +6 -6
  90. package/fesm2022/sdcorejs-angular-modules-auth.mjs +9 -9
  91. package/fesm2022/sdcorejs-angular-modules-authom.mjs +7 -7
  92. package/fesm2022/sdcorejs-angular-modules-keycloak.mjs +7 -7
  93. package/fesm2022/sdcorejs-angular-modules-layout.mjs +73 -73
  94. package/fesm2022/sdcorejs-angular-modules-permission.mjs +9 -9
  95. package/fesm2022/sdcorejs-angular-pipes.mjs +14 -14
  96. package/fesm2022/sdcorejs-angular-services-api.mjs +10 -10
  97. package/fesm2022/sdcorejs-angular-services-cache.mjs +3 -3
  98. package/fesm2022/sdcorejs-angular-services-confirm.mjs +6 -6
  99. package/fesm2022/sdcorejs-angular-services-confirm.mjs.map +1 -1
  100. package/fesm2022/sdcorejs-angular-services-docx.mjs +3 -3
  101. package/fesm2022/sdcorejs-angular-services-excel.mjs +3 -3
  102. package/fesm2022/sdcorejs-angular-services-license.mjs +3 -3
  103. package/fesm2022/sdcorejs-angular-services-loading.mjs +3 -3
  104. package/fesm2022/sdcorejs-angular-services-notify.mjs +23 -10
  105. package/fesm2022/sdcorejs-angular-services-notify.mjs.map +1 -1
  106. package/fesm2022/sdcorejs-angular-services-storage.mjs +3 -3
  107. package/package.json +9 -1
  108. package/types/sdcorejs-angular-components-autoid-inspector.d.ts +53 -4
  109. package/types/sdcorejs-angular-components-form-generic.d.ts +12 -13
  110. package/types/sdcorejs-angular-components-modal-resizable.d.ts +32 -0
  111. package/types/sdcorejs-angular-components-table.d.ts +99 -10
  112. package/types/sdcorejs-angular-components-view.d.ts +33 -0
  113. package/types/sdcorejs-angular-components.d.ts +1 -0
  114. package/types/sdcorejs-angular-forms-autocomplete.d.ts +16 -3
  115. package/types/sdcorejs-angular-forms-checkbox.d.ts +5 -1
  116. package/types/sdcorejs-angular-forms-chip-calendar.d.ts +5 -2
  117. package/types/sdcorejs-angular-forms-chip.d.ts +5 -2
  118. package/types/sdcorejs-angular-forms-date-range.d.ts +12 -5
  119. package/types/sdcorejs-angular-forms-date.d.ts +14 -5
  120. package/types/sdcorejs-angular-forms-datetime.d.ts +14 -5
  121. package/types/sdcorejs-angular-forms-inline-text.d.ts +80 -0
  122. package/types/sdcorejs-angular-forms-input-color.d.ts +3 -1
  123. package/types/sdcorejs-angular-forms-input-number.d.ts +14 -2
  124. package/types/sdcorejs-angular-forms-input.d.ts +14 -2
  125. package/types/sdcorejs-angular-forms-models.d.ts +40 -2
  126. package/types/sdcorejs-angular-forms-radio.d.ts +5 -2
  127. package/types/sdcorejs-angular-forms-select.d.ts +23 -5
  128. package/types/sdcorejs-angular-forms-switch.d.ts +5 -2
  129. package/types/sdcorejs-angular-forms-textarea.d.ts +9 -2
  130. 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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- /** Bare mode strip the form-field shell to fit inline in a chip / token. */
42
- bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
43
- /** Viewed mode render a read-only <sd-view> instead of the editable form-field. */
44
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "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>;
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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
39
- /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
40
- bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
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; }; "bare": { "alias": "bare"; "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>;
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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
42
- bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
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; }; "bare": { "alias": "bare"; "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>;
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
- readonly viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- export { HandleSdCustomValidator, SD_FORM_CONFIGURATION, SdFormControl, SdInlineErrorValidator, sdFormControlState };
85
- export type { ISdFormConfiguration, SdCustomValidator, SdFormControlSnapshot, SdSearch, SdSearchReq, SdSelectionData };
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
- readonly viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
48
- bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
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; }; "bare": { "alias": "bare"; "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>;
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
- readonly viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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
- viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
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";