@tedi-design-system/angular 8.2.0-rc.7 → 9.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/angular",
-  "version": "8.2.0-rc.7",
+  "version": "9.0.0-rc.1",
   "type": "module",
   "main": "community.mjs",
   "module": "fesm2022/tedi-design-system-angular.mjs",

package/tedi/index.d.ts

@@ -6363,6 +6363,23 @@ interface FormFieldControl<T = unknown> {
      * `aria-describedby`; nothing is pushed when the control stands alone.
      */
     setDescribedBy?(ids: string[]): void;
+    /**
+     * Set by controls that render their own clear button — date and time put one in
+     * their action row beside the picker button, which cannot leave the control
+     * because the overlay anchors to it. The field then skips its generic clear
+     * button so a single `clearable` never yields two.
+     */
+    readonly ownsClearButton?: boolean;
+    /**
+     * Whether the control is read-only. The field hides its clear button while it
+     * is, since the user cannot edit the value; a programmatic `reset()` still works.
+     */
+    readOnly?: Signal<boolean>;
+    /**
+     * Set to `false` by controls that never take a clear button — a textarea, per
+     * the design. The field then skips its button whatever `clearable` says.
+     */
+    readonly clearButton?: false;
 }
 /**
  * Injection token used by `tedi-form-field` to obtain
@@ -6382,6 +6399,8 @@ interface FieldContext {
     valid: Signal<boolean>;
     /** From an input group that disables everything inside it. */
     disabled: Signal<boolean>;
+    /** Whether the field shows a clear button — controls read it instead of declaring their own. */
+    clearable: Signal<boolean>;
 }
 declare const TEDI_FIELD_CONTEXT: InjectionToken<FieldContext>;
 
@@ -6467,6 +6486,12 @@ declare class DateFieldComponent implements OnInit, ControlValueAccessor, FormFi
      * set here.
      */
     readonly size: _angular_core.InputSignal<DateFieldSize | undefined>;
+    /**
+     * Whether the clear button shows once the field has a value. Falls back to the
+     * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
+     * wrapper, and use this only for a standalone field.
+     */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
     /**
      * Forces the error state on, or off, regardless of the reactive-forms state.
      * Leave unset to let the control derive it.
@@ -6628,6 +6653,10 @@ declare class DateFieldComponent implements OnInit, ControlValueAccessor, FormFi
     readonly valid: _angular_core.Signal<boolean>;
     readonly childContext: FieldContext;
     ngOnInit(): void;
+    /** The clear button sits in the date input's action row, beside the calendar. */
+    readonly ownsClearButton = true;
+    /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
+    readonly clearableResolved: _angular_core.Signal<boolean>;
     readonly resolvedDisabledMatchers: _angular_core.Signal<Matcher[]>;
     readonly useNativePickerResolved: _angular_core.Signal<boolean>;
     readonly useNativePickerEffective: _angular_core.Signal<boolean>;
@@ -6702,7 +6731,7 @@ declare class DateFieldComponent implements OnInit, ControlValueAccessor, FormFi
     private toIsoDate;
     private queryNativeInput;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateFieldComponent, "tedi-date-field", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "tagEllipsis": { "alias": "tagEllipsis"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledMatchers": { "alias": "disabledMatchers"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disablePast": { "alias": "disablePast"; "required": false; "isSignal": true; }; "disableFuture": { "alias": "disableFuture"; "required": false; "isSignal": true; }; "shouldDisableMonth": { "alias": "shouldDisableMonth"; "required": false; "isSignal": true; }; "shouldDisableYear": { "alias": "shouldDisableYear"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; "availableDays": { "alias": "availableDays"; "required": false; "isSignal": true; }; "unavailableDays": { "alias": "unavailableDays"; "required": false; "isSignal": true; }; "selectionLevel": { "alias": "selectionLevel"; "required": false; "isSignal": true; }; "monthYearSelectType": { "alias": "monthYearSelectType"; "required": false; "isSignal": true; }; "initialMonth": { "alias": "initialMonth"; "required": false; "isSignal": true; }; "localeCode": { "alias": "localeCode"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "enableCalendar": { "alias": "enableCalendar"; "required": false; "isSignal": true; }; "calendarTrigger": { "alias": "calendarTrigger"; "required": false; "isSignal": true; }; "useNativePicker": { "alias": "useNativePicker"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "openChange": "openChange"; }, never, ["[tediCalendarFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateFieldComponent, "tedi-date-field", never, { "inputId": { "alias": "inputId"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "multiRow": { "alias": "multiRow"; "required": false; "isSignal": true; }; "tagEllipsis": { "alias": "tagEllipsis"; "required": false; "isSignal": true; }; "isTagRemovable": { "alias": "isTagRemovable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabledMatchers": { "alias": "disabledMatchers"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disablePast": { "alias": "disablePast"; "required": false; "isSignal": true; }; "disableFuture": { "alias": "disableFuture"; "required": false; "isSignal": true; }; "shouldDisableMonth": { "alias": "shouldDisableMonth"; "required": false; "isSignal": true; }; "shouldDisableYear": { "alias": "shouldDisableYear"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; "availableDays": { "alias": "availableDays"; "required": false; "isSignal": true; }; "unavailableDays": { "alias": "unavailableDays"; "required": false; "isSignal": true; }; "selectionLevel": { "alias": "selectionLevel"; "required": false; "isSignal": true; }; "monthYearSelectType": { "alias": "monthYearSelectType"; "required": false; "isSignal": true; }; "initialMonth": { "alias": "initialMonth"; "required": false; "isSignal": true; }; "localeCode": { "alias": "localeCode"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "showOutsideDays": { "alias": "showOutsideDays"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "enableCalendar": { "alias": "enableCalendar"; "required": false; "isSignal": true; }; "calendarTrigger": { "alias": "calendarTrigger"; "required": false; "isSignal": true; }; "useNativePicker": { "alias": "useNativePicker"; "required": false; "isSignal": true; }; "hideOnScroll": { "alias": "hideOnScroll"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "openChange": "openChange"; }, never, ["[tediCalendarFooter]"], true, never>;
 }
 
 declare class DatePickerCalendarGridComponent {
@@ -7041,10 +7070,12 @@ declare class FormFieldComponent implements FieldContext {
      */
     icon: _angular_core.InputSignal<string | FormFieldIcon | undefined>;
     /**
-     * Whether the field shows a clear button once the control holds a value.
-     * @default false
+     * Whether the field shows a clear button once the control holds a value. The
+     * single source of truth for every control inside it — date and time fields
+     * read it too instead of declaring their own input. A textarea never gets one.
+     * @default true
      */
-    clearable: _angular_core.InputSignal<boolean>;
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Show the clear button only while the filled field is hovered or focused.
      * Requires `clearable`.
@@ -7074,6 +7105,12 @@ declare class FormFieldComponent implements FieldContext {
      * itself and no box is rendered at all.
      */
     readonly hasBox: _angular_core.Signal<boolean>;
+    /**
+     * Whether the field renders its own clear button. Controls that render one
+     * themselves opt out, so `clearable` drives them without producing two, and
+     * a control that cannot be reset, or never takes one, gets none.
+     */
+    readonly renderClearButton: _angular_core.Signal<boolean>;
     readonly ownsSurface: _angular_core.Signal<boolean>;
     readonly disabled: _angular_core.Signal<boolean>;
     readonly invalid: _angular_core.Signal<boolean>;
@@ -8370,6 +8407,9 @@ declare class TextFieldComponent implements OnInit, ControlValueAccessor, FormFi
      * Combined with the reactive-forms disabled state and any input-group state.
      */
     readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readOnlyAttribute: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readOnlyProperty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readOnly: _angular_core.Signal<boolean>;
     readonly disabled: _angular_core.Signal<boolean>;
     private readonly derived;
     readonly describedBy: _tedi_design_system_angular_tedi.ControlDescribedBy;
@@ -8395,7 +8435,7 @@ declare class TextFieldComponent implements OnInit, ControlValueAccessor, FormFi
     focus(): void;
     reset(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextFieldComponent, "input[tedi-text-field]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "arrowsHidden": { "alias": "arrowsHidden"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "clear": "clear"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextFieldComponent, "input[tedi-text-field]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "arrowsHidden": { "alias": "arrowsHidden"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnlyAttribute": { "alias": "readonly"; "required": false; "isSignal": true; }; "readOnlyProperty": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "clear": "clear"; }, never, never, true, never>;
 }
 
 type TextareaSize = Exclude<InputSize, "large">;
@@ -8478,6 +8518,11 @@ declare class TextareaComponent implements OnInit, ControlValueAccessor, FormFie
      */
     readonly minHeightStyle: _angular_core.Signal<string>;
     readonly maxHeightStyle: _angular_core.Signal<string>;
+    readonly readOnlyAttribute: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readOnlyProperty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readOnly: _angular_core.Signal<boolean>;
+    /** Textareas take no clear button, even inside a `clearable` form field. */
+    readonly clearButton = false;
     readonly disabled: _angular_core.Signal<boolean>;
     private readonly derived;
     readonly describedBy: _tedi_design_system_angular_tedi.ControlDescribedBy;
@@ -8500,7 +8545,7 @@ declare class TextareaComponent implements OnInit, ControlValueAccessor, FormFie
     focus(): void;
     reset(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "textarea[tedi-textarea]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "autoGrow": { "alias": "autoGrow"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "textarea[tedi-textarea]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "invalidInput": { "alias": "invalid"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "autoGrow": { "alias": "autoGrow"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "readOnlyAttribute": { "alias": "readonly"; "required": false; "isSignal": true; }; "readOnlyProperty": { "alias": "readOnly"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 type TimePickerVariant = "scroll" | "slots" | "dropdown";
@@ -8675,8 +8720,12 @@ declare class TimeFieldComponent implements OnInit, ControlValueAccessor, FormFi
      * set here.
      */
     readonly size: _angular_core.InputSignal<"small" | "default" | undefined>;
-    /** Show a clear button when the field has a value. */
-    readonly clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the clear button shows once the field has a value. Falls back to the
+     * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
+     * wrapper, and use this only for a standalone field.
+     */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
     /** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
     readonly pickerVariant: _angular_core.InputSignal<TimeFieldPickerVariant>;
     /**
@@ -8723,6 +8772,10 @@ declare class TimeFieldComponent implements OnInit, ControlValueAccessor, FormFi
     ngOnInit(): void;
     readonly hasValue: _angular_core.Signal<boolean>;
     readonly showClear: _angular_core.Signal<boolean>;
+    /** The clear button sits in the time field's action row, beside the picker. */
+    readonly ownsClearButton = true;
+    /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
+    readonly clearableResolved: _angular_core.Signal<boolean>;
     readonly useNativePickerResolved: _angular_core.Signal<boolean>;
     readonly hasPicker: _angular_core.Signal<boolean>;
     readonly hasNativePicker: _angular_core.Signal<boolean>;