@sdcorejs/angular 20.0.0 → 20.0.3

package/forms/models/index.d.ts

@@ -81,5 +81,43 @@ interface SdFormControlSnapshot<T> {
  */
 declare function sdFormControlState<T = unknown>(control: Signal<AbstractControl<T> | null | undefined>): Signal<SdFormControlSnapshot<T>>;
 
-export { HandleSdCustomValidator, SD_FORM_CONFIGURATION, SdFormControl, SdInlineErrorValidator, sdFormControlState };
-export type { ISdFormConfiguration, SdCustomValidator, SdFormControlSnapshot, SdSearch, SdSearchReq, SdSelectionData };
+/**
+ * Three display states shared by sd-form-controls:
+ * - `false`  → full edit chrome (input / dropdown).
+ * - `true`   → static read-only view (`<sd-view>` text), no editor.
+ * - `'inline'` → the editor is STILL rendered (so its panel works), but its chrome is
+ *   hidden; the `<sd-view>` text is the visible face / trigger. Click the text to open
+ *   the picker's panel. The text is retained while the panel is open — it only changes
+ *   when a new value is committed (JIRA-style click-to-edit).
+ */
+type SdViewed = boolean | 'inline';
+type SdViewedInput = SdViewed | '' | null | undefined;
+/**
+ * `viewed` input transform. Keeps `booleanAttribute` coercion so a bare attribute
+ * (`<sd-select viewed>`) still resolves to `true`, but intercepts the literal
+ * `'inline'` first — `booleanAttribute('inline')` would otherwise coerce it to `true`.
+ */
+declare function sdViewedTransform(v: SdViewedInput): SdViewed;
+interface SdViewedInlineApi {
+    /** `viewed() === 'inline'` — editor rendered but chrome hidden; sd-view text is the trigger face. */
+    readonly isInline: Signal<boolean>;
+    /** `viewed() === true` — static read-only view (no editor rendered). */
+    readonly isViewed: Signal<boolean>;
+    /** Open the picker from the inline text face. No-op unless `'inline'`. */
+    enterInlineEdit(): void;
+}
+/**
+ * Compose the tri-state `viewed` semantics into a control. `open` opens the control's
+ * native picker (mat-select panel / mat-calendar / overlay). In `'inline'` mode the editor
+ * is always rendered (chrome hidden via CSS), so `open()` can fire immediately on click —
+ * no render-swap, the view text never disappears.
+ *
+ * @param viewed   the control's `viewed` input signal.
+ * @param open     opens the control's picker; called by `enterInlineEdit`.
+ * @param disabled the control's disabled state. why: a disabled `'inline'` field must behave
+ *   like `viewed=true` (static, NOT click-to-edit) — you can't edit a disabled control.
+ */
+declare function sdViewedInline(viewed: Signal<SdViewed>, open?: () => void, disabled?: Signal<boolean>): SdViewedInlineApi;
+
+export { HandleSdCustomValidator, SD_FORM_CONFIGURATION, SdFormControl, SdInlineErrorValidator, sdFormControlState, sdViewedInline, sdViewedTransform };
+export type { ISdFormConfiguration, SdCustomValidator, SdFormControlSnapshot, SdSearch, SdSearchReq, SdSelectionData, SdViewed, SdViewedInlineApi, SdViewedInput };

package/forms/radio/index.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { SdSuffixDefDirective, SdLabelDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Color } from '@sdcorejs/utils/models';
 
 declare class SdRadio implements OnInit, AfterViewInit, OnDestroy {
@@ -21,7 +21,10 @@ declare class SdRadio implements OnInit, AfterViewInit, OnDestroy {
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly inlineError: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    readonly viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static read-only view should render. */
+    readonly isViewed: _angular_core.Signal<boolean>;
     readonly color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
     readonly hyperlink: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly model: _angular_core.ModelSignal<string | number | boolean | null | undefined>;

package/forms/select/index.d.ts

@@ -5,7 +5,7 @@ import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-f
 import { MatInput } from '@angular/material/input';
 import { MatSelect, MatSelectChange } from '@angular/material/select';
 import { SdItemDefDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdCustomValidator, SdSearch, SdSelectionData, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdViewed, SdViewedInput, SdCustomValidator, SdSearch, SdSelectionData, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 
 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
     sdValueTemplate: Signal<TemplateRef<any> | undefined>;
     itemDef: Signal<SdItemDefDefDirective<any> | undefined>;
     sdViewDef: Signal<SdViewDefDirective<any, any> | undefined>;
+    /**
+     * View display template. `sdViewDef` is now just a custom override of the view rendering —
+     * it replaces the projected `#sdValue` template when present (fed into `<sd-view>`'s
+     * `valueTemplate`), so there is ONE rendering path. No more `.sd-view` class / focus-swap;
+     * click-to-edit is governed by `viewed='inline'`.
+     */
+    readonly viewTemplate: Signal<TemplateRef<any> | undefined>;
     autoIdInput: _angular_core.InputSignal<string | null | undefined>;
     autoId: Signal<string | undefined>;
     readonly dataDisabled: Signal<"true" | "false">;
@@ -42,10 +49,21 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
     hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (bare editor). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
     multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
-    bare: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the `viewed='inline'` text face shows a hover clear-× to empty the value.
+     * Default `true`. Set `false` where the HOST owns removal (e.g. `<sd-query-bar>` chips,
+     * whose own `×` removes the whole filter) so the chip isn't cluttered with two ×.
+     */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'` — editor mounted but chrome hidden; sd-view text is the trigger face. */
+    readonly isInline: Signal<boolean>;
+    /** `true` when `viewed === true` — static read-only view, no editor mounted. */
+    readonly isViewed: Signal<boolean>;
+    /** Open the picker from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
     validator: _angular_core.InputSignal<SdCustomValidator | undefined>;
     inlineError: _angular_core.InputSignal<string | undefined>;
     /**
@@ -89,7 +107,7 @@ declare class SdSelect<T extends object | string | number = Record<string, unkno
     open: () => void;
     onOpenedChange: (isOpened: boolean) => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdSelect<any>, never>;
-    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>;
+    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>;
 }
 
 export { SdSelect };

package/forms/switch/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Color } from '@sdcorejs/utils/models';
 
 declare class SdSwitch implements OnInit, AfterViewInit, OnDestroy {
@@ -14,7 +14,10 @@ declare class SdSwitch implements OnInit, AfterViewInit, OnDestroy {
     readonly label: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly color: _angular_core.InputSignalWithTransform<Color, Color | null | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    readonly viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static read-only view should render. */
+    readonly isViewed: _angular_core.Signal<boolean>;
     readonly hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly model: _angular_core.ModelSignal<boolean | null | undefined>;

package/forms/textarea/index.d.ts

@@ -3,7 +3,7 @@ import { OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { MatFormFieldAppearance, FloatLabelType } from '@angular/material/form-field';
 import { SdViewDefDirective, SdLabelDefDirective, SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdViewed, SdViewedInput, SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 
 declare class SdTextarea implements OnInit, AfterViewInit, OnDestroy {
@@ -33,8 +33,15 @@ declare class SdTextarea implements OnInit, AfterViewInit, OnDestroy {
     hideInlineError: _angular_core.InputSignalWithTransform<boolean, unknown>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    viewed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (textarea reads like text). */
+    viewed: _angular_core.InputSignalWithTransform<SdViewed, SdViewedInput>;
     autoHeight: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: _angular_core.Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: _angular_core.Signal<boolean>;
+    /** Focus the inline textarea. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
     maxlength: _angular_core.InputSignalWithTransform<number | null, unknown>;
     pattern: _angular_core.InputSignalWithTransform<string | undefined, string | null | undefined>;
     validator: _angular_core.InputSignal<SdCustomValidator | undefined>;

package/i18n/index.d.ts

@@ -69,7 +69,9 @@ declare const EN_MESSAGES: {
     readonly 'core.operator.contain.display': "Contains";
     readonly 'core.operator.not-contain.display': "Does not contain";
     readonly 'core.operator.start-with.display': "Starts with";
+    readonly 'core.operator.not-start-with.display': "Does not start with";
     readonly 'core.operator.end-with.display': "Ends with";
+    readonly 'core.operator.not-end-with.display': "Does not end with";
     readonly 'core.operator.in.display': "In";
     readonly 'core.operator.not-in.display': "Not in";
     readonly 'core.operator.between.display': "Between";
@@ -269,6 +271,8 @@ declare const EN_MESSAGES: {
     readonly 'core.component.form-builder.empty-hint': "Build your form by dragging fields from the left panel, or press";
     readonly 'core.component.form-builder.conditional': "Conditional";
     readonly 'core.component.form-builder.group-drop-here': "Drop a field here to add it to this group";
+    readonly 'core.component.form-builder.edit-group': "Edit group";
+    readonly 'core.component.form-builder.group-empty-hint': "Click Details to add fields to this group";
     readonly 'core.component.form-builder.hidden': "Hidden";
     readonly 'core.component.form-builder.read-only': "Read only";
     readonly 'core.component.form-builder.untitled': "Untitled";

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@sdcorejs/angular",
-  "version": "20.0.0",
+  "version": "20.0.3",
+  "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
     "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0",
@@ -104,6 +105,10 @@
       "types": "./components/modal/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-components-modal.mjs"
     },
+    "./components/modal-resizable": {
+      "types": "./components/modal-resizable/index.d.ts",
+      "default": "./fesm2022/sdcorejs-angular-components-modal-resizable.mjs"
+    },
     "./components/operator": {
       "types": "./components/operator/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-components-operator.mjs"
@@ -204,6 +209,10 @@
       "types": "./forms/directives/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-forms-directives.mjs"
     },
+    "./forms/inline-text": {
+      "types": "./forms/inline-text/index.d.ts",
+      "default": "./fesm2022/sdcorejs-angular-forms-inline-text.mjs"
+    },
     "./forms/input": {
       "types": "./forms/input/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-forms-input.mjs"