@ardium-ui/ui 4.2.3 → 4.4.0

package/lib/_internal/form-field-component.d.ts

@@ -1,4 +1,5 @@
 import { ControlValueAccessor } from '@angular/forms';
+import { ArdFormFieldControl } from '../form-field/form-field-child.token';
 import { _NgModelComponentBase, _NgModelComponentDefaults } from './ngmodel-component';
 import * as i0 from "@angular/core";
 export interface _FormFieldComponentDefaults extends _NgModelComponentDefaults {
@@ -10,7 +11,7 @@ export declare const _formFieldComponentDefaults: _FormFieldComponentDefaults;
  *
  * **Warning**: `writeValue` function should be implemented on the child component!
  */
-export declare abstract class _FormFieldComponentBase extends _NgModelComponentBase implements ControlValueAccessor {
+export declare abstract class _FormFieldComponentBase extends _NgModelComponentBase implements ControlValueAccessor, ArdFormFieldControl {
     protected readonly _DEFAULTS: _FormFieldComponentDefaults;
     readonly _required: import("@angular/core").InputSignalWithTransform<boolean | undefined, any>;
     get required(): boolean;

package/lib/_internal/selectable-list-component.d.ts

@@ -1,4 +1,5 @@
 import { ControlValueAccessor } from '@angular/forms';
+import { ArdFormFieldControl } from '../form-field/form-field-child.token';
 import { ArdOptionSimple, CompareWithFn, OptionContext } from '../types/item-storage.types';
 import { Nullable } from '../types/utility.types';
 import { _FormFieldComponentBase, _FormFieldComponentDefaults } from './form-field-component';
@@ -15,7 +16,7 @@ export interface _SelectableListComponentDefaults extends _FormFieldComponentDef
     maxSelectedItems: Nullable<number>;
 }
 export declare const _selectableListComponentDefaults: _SelectableListComponentDefaults;
-export declare abstract class _SelectableListComponentBase extends _FormFieldComponentBase implements ControlValueAccessor, SimpleItemStorageHost {
+export declare abstract class _SelectableListComponentBase extends _FormFieldComponentBase implements ControlValueAccessor, SimpleItemStorageHost, ArdFormFieldControl {
     protected readonly _DEFAULTS: _SelectableListComponentDefaults;
     readonly itemStorage: SimpleItemStorage;
     readonly element: HTMLElement;

package/lib/calendar/calendar.component.d.ts

@@ -1,11 +1,11 @@
-import { _NgModelComponentBase } from '../_internal/ngmodel-component';
+import { _FormFieldComponentBase } from '../_internal/form-field-component';
 import { ComponentColor } from '../types/colors.types';
 import { ArdCalendarDefaults } from './calendar.defaults';
 import { ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCalendarYearTemplateDirective } from './calendar.directives';
 import { _CalendarTemplateRepositoryDirective } from './calendar.internal-directives';
 import { ArdCalendarFilterFn, ArdCalendarView } from './calendar.types';
 import * as i0 from "@angular/core";
-export declare class ArdiumCalendarComponent extends _NgModelComponentBase {
+export declare class ArdiumCalendarComponent extends _FormFieldComponentBase {
     protected readonly _DEFAULTS: ArdCalendarDefaults;
     constructor(defaults: ArdCalendarDefaults);
     readonly color: import("@angular/core").InputSignal<ComponentColor>;

package/lib/calendar/calendar.defaults.d.ts

@@ -1,8 +1,8 @@
 import { InjectionToken, Provider } from '@angular/core';
-import { _NgModelComponentDefaults } from '../_internal/ngmodel-component';
+import { _FormFieldComponentDefaults } from '../_internal/form-field-component';
 import { ComponentColor } from '../types/colors.types';
 import { ArdCalendarFilterFn, ArdCalendarView } from './calendar.types';
-export interface ArdCalendarDefaults extends _NgModelComponentDefaults {
+export interface ArdCalendarDefaults extends _FormFieldComponentDefaults {
     color: ComponentColor;
     activeView: ArdCalendarView;
     activeYear: number;

package/lib/form-field/form-field-base.d.ts

@@ -0,0 +1,22 @@
+import { ArdiumErrorDirective } from './error/error.directive';
+import { ArdFormFieldControl } from './form-field-child.token';
+import { ArdiumHintDirective } from './hint/hint.directive';
+import { ArdiumLabelComponent } from './label/label.component';
+import * as i0 from "@angular/core";
+export declare abstract class _FormFieldBase {
+    protected readonly _DEFAULTS: import("./form-field.defaults").ArdFormFieldDefaults;
+    readonly alignHintToLeftByDefault: boolean;
+    readonly control: import("@angular/core").Signal<ArdFormFieldControl | undefined>;
+    get controlHasError(): boolean | undefined;
+    get controlIsSuccess(): boolean | undefined;
+    get controlDisabled(): boolean | undefined;
+    get controlHtmlId(): string | undefined;
+    readonly label: import("@angular/core").Signal<ArdiumLabelComponent | undefined>;
+    readonly hints: import("@angular/core").Signal<readonly ArdiumHintDirective[]>;
+    readonly errors: import("@angular/core").Signal<readonly ArdiumErrorDirective[]>;
+    readonly hasAnyError: import("@angular/core").Signal<boolean>;
+    readonly reserveHintLine: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_FormFieldBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_FormFieldBase, never, never, { "reserveHintLine": { "alias": "reserveHintLine"; "required": false; "isSignal": true; }; }, {}, ["control", "label", "hints", "errors"], never, false, never>;
+}

package/lib/form-field/form-field-child.token.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+export interface ArdFormFieldControl {
+    hasError: (() => boolean) | boolean;
+    isSuccess?: (() => boolean) | boolean;
+    disabled: (() => boolean) | boolean;
+    htmlId: (() => string) | string;
+}
+export declare const ARD_FORM_FIELD_CONTROL: InjectionToken<ArdFormFieldControl>;

package/lib/form-field/form-field-native-inputs.d.ts

@@ -0,0 +1,22 @@
+import { Injector, Signal } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { ArdFormFieldControl } from './form-field-child.token';
+import * as i0 from "@angular/core";
+export declare class ArdiumFormFieldNativeInputAdapterDirective implements ArdFormFieldControl {
+    readonly _required: import("@angular/core").InputSignalWithTransform<boolean | undefined, any>;
+    get required(): boolean;
+    readonly isSuccess: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    protected readonly _injector: Injector;
+    readonly wasTouched: import("@angular/core").WritableSignal<boolean>;
+    private _statusChangesSub?;
+    ngOnInit(): void;
+    protected _ngControl: NgControl | null;
+    readonly htmlId: import("@angular/core").InputSignal<string>;
+    readonly _hasError: import("@angular/core").InputSignalWithTransform<boolean | undefined, any>;
+    private readonly _hasErrorInControl;
+    readonly hasError: Signal<boolean>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldNativeInputAdapterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ArdiumFormFieldNativeInputAdapterDirective, "ard-form-field > input, ard-form-field > textarea, ard-form-field > select, ard-horizontal-form-field > input, ard-horizontal-form-field > textarea, ard-horizontal-form-field > select", never, { "_required": { "alias": "required"; "required": false; "isSignal": true; }; "isSuccess": { "alias": "isSuccess"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "htmlId": { "alias": "htmlId"; "required": false; "isSignal": true; }; "_hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/lib/form-field/form-field.component.d.ts

@@ -1,19 +1,7 @@
 import { OnInit } from '@angular/core';
-import { _FormFieldComponentBase } from '../_internal/form-field-component';
-import { ArdiumErrorDirective } from './error/error.directive';
-import { ArdiumHintDirective } from './hint/hint.directive';
-import { ArdiumLabelComponent } from './label/label.component';
+import { _FormFieldBase } from './form-field-base';
 import * as i0 from "@angular/core";
-export declare class ArdiumFormFieldComponent implements OnInit {
-    protected readonly _DEFAULTS: import("./form-field.defaults").ArdFormFieldDefaults;
-    readonly alignHintToLeftByDefault: boolean;
-    readonly control: import("@angular/core").Signal<_FormFieldComponentBase | undefined>;
-    readonly label: import("@angular/core").Signal<ArdiumLabelComponent | undefined>;
-    readonly hints: import("@angular/core").Signal<readonly ArdiumHintDirective[]>;
-    readonly errors: import("@angular/core").Signal<readonly ArdiumErrorDirective[]>;
-    readonly hasAnyError: import("@angular/core").Signal<boolean>;
-    readonly reserveHintLine: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    ngOnInit(): void;
+export declare class ArdiumFormFieldComponent extends _FormFieldBase implements OnInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFormFieldComponent, "ard-form-field", never, { "reserveHintLine": { "alias": "reserveHintLine"; "required": false; "isSignal": true; }; }, {}, ["control", "label", "hints", "errors"], ["ard-label, [ard-label]", "*", "ard-error, [ard-error]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[left], [ard-hint][left]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[right], [ard-hint][right]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumFormFieldComponent, "ard-form-field", never, {}, {}, never, ["ard-label, [ard-label]", "*", "ard-error, [ard-error]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[left], [ard-hint][left]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[right], [ard-hint][right]"], false, never>;
 }

package/lib/form-field/form-field.defaults.d.ts

@@ -3,6 +3,8 @@ import { SimpleOneAxisAlignment } from './../types/alignment.types';
 export interface ArdFormFieldDefaults {
     defaultHintAlign: SimpleOneAxisAlignment;
     reserveHintLine: boolean;
+    labelRequiredText: string;
+    labelOptionalText: string;
 }
 export declare const ARD_FORM_FIELD_DEFAULTS: InjectionToken<ArdFormFieldDefaults>;
 export declare function provideFormFieldDefaults(config: Partial<ArdFormFieldDefaults>): Provider;

package/lib/form-field/form-field.module.d.ts

@@ -1,14 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./form-field.component";
 import * as i2 from "./horizontal-form-field.component";
-import * as i3 from "./label/label.component";
-import * as i4 from "./hint/hint.component";
-import * as i5 from "./error/error.component";
-import * as i6 from "@angular/common";
-import * as i7 from "./hint/hint.directive";
-import * as i8 from "./error/error.directive";
+import * as i3 from "./form-field-native-inputs";
+import * as i4 from "./label/label.component";
+import * as i5 from "./hint/hint.component";
+import * as i6 from "./error/error.component";
+import * as i7 from "@angular/common";
+import * as i8 from "./hint/hint.directive";
+import * as i9 from "./error/error.directive";
 export declare class ArdiumFormFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumFormFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFormFieldModule, [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumHorizontalFormFieldComponent, typeof i3.ArdiumLabelComponent, typeof i4.ArdiumHintComponent, typeof i5.ArdiumErrorComponent], [typeof i6.CommonModule, typeof i7.ArdiumHintDirective, typeof i8.ArdiumErrorDirective], [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumHorizontalFormFieldComponent, typeof i3.ArdiumLabelComponent, typeof i4.ArdiumHintComponent, typeof i5.ArdiumErrorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumFormFieldModule, [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumHorizontalFormFieldComponent, typeof i3.ArdiumFormFieldNativeInputAdapterDirective, typeof i4.ArdiumLabelComponent, typeof i5.ArdiumHintComponent, typeof i6.ArdiumErrorComponent], [typeof i7.CommonModule, typeof i8.ArdiumHintDirective, typeof i9.ArdiumErrorDirective], [typeof i1.ArdiumFormFieldComponent, typeof i2.ArdiumHorizontalFormFieldComponent, typeof i3.ArdiumFormFieldNativeInputAdapterDirective, typeof i4.ArdiumLabelComponent, typeof i5.ArdiumHintComponent, typeof i6.ArdiumErrorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumFormFieldModule>;
 }

package/lib/form-field/horizontal-form-field.component.d.ts

@@ -1,19 +1,7 @@
 import { OnInit } from '@angular/core';
-import { _FormFieldComponentBase } from '../_internal/form-field-component';
-import { ArdiumErrorDirective } from './error/error.directive';
-import { ArdiumHintDirective } from './hint/hint.directive';
-import { ArdiumLabelComponent } from './label/label.component';
+import { _FormFieldBase } from './form-field-base';
 import * as i0 from "@angular/core";
-export declare class ArdiumHorizontalFormFieldComponent implements OnInit {
-    protected readonly _DEFAULTS: import("./form-field.defaults").ArdFormFieldDefaults;
-    readonly alignHintToLeftByDefault: boolean;
-    readonly control: import("@angular/core").Signal<_FormFieldComponentBase | undefined>;
-    readonly label: import("@angular/core").Signal<ArdiumLabelComponent | undefined>;
-    readonly hints: import("@angular/core").Signal<readonly ArdiumHintDirective[]>;
-    readonly errors: import("@angular/core").Signal<readonly ArdiumErrorDirective[]>;
-    readonly hasAnyError: import("@angular/core").Signal<boolean>;
-    readonly reserveHintLine: import("@angular/core").InputSignalWithTransform<boolean, any>;
-    ngOnInit(): void;
+export declare class ArdiumHorizontalFormFieldComponent extends _FormFieldBase implements OnInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumHorizontalFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumHorizontalFormFieldComponent, "ard-horizontal-form-field", never, { "reserveHintLine": { "alias": "reserveHintLine"; "required": false; "isSignal": true; }; }, {}, ["control", "label", "hints", "errors"], ["ard-label, [ard-label]", "*", "ard-error, [ard-error]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[left], [ard-hint][left]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[right], [ard-hint][right]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumHorizontalFormFieldComponent, "ard-horizontal-form-field", never, {}, {}, never, ["ard-label, [ard-label]", "*", "ard-error, [ard-error]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[left], [ard-hint][left]", "ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])", "ard-hint[right], [ard-hint][right]"], false, never>;
 }

package/lib/form-field/index.d.ts

@@ -1,5 +1,6 @@
 export * from './error/error.component';
 export * from './error/error.directive';
+export * from './form-field-native-inputs';
 export * from './form-field.component';
 export * from './form-field.module';
 export * from './hint/hint.component';

package/lib/form-field/label/label.component.d.ts

@@ -1,8 +1,11 @@
 import * as i0 from "@angular/core";
 export declare class ArdiumLabelComponent {
+    protected readonly _DEFAULTS: import("../form-field.defaults").ArdFormFieldDefaults;
     readonly required: import("@angular/core").InputSignalWithTransform<boolean, any>;
     readonly optional: import("@angular/core").InputSignalWithTransform<boolean, any>;
+    readonly requiredText: import("@angular/core").InputSignal<string>;
+    readonly optionalText: import("@angular/core").InputSignal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumLabelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumLabelComponent, "ard-label", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumLabelComponent, "ard-label", never, { "required": { "alias": "required"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "requiredText": { "alias": "requiredText"; "required": false; "isSignal": true; }; "optionalText": { "alias": "optionalText"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "4.2.3",
+  "version": "4.4.0",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/buttons/button.css

@@ -15,7 +15,7 @@ ard-button {
   cursor: pointer;
   outline: none;
   background: transparent;
-  gap: 6px;
+  gap: 0.375rem;
   font-size: 0.875rem;
   height: 2.5em;
   padding: 0 1.2em;
@@ -244,7 +244,7 @@ ard-button {
 .ard-button .ard-button-content {
   display: flex;
   align-items: center;
-  gap: 0.875rem;
+  gap: 0.375rem;
 }
 .ard-button.ard-align-left {
   flex-direction: row;

package/prebuilt-themes/default/form-field.css

@@ -15,6 +15,19 @@ ard-horizontal-form-field {
   font-size: 0.9375rem;
   font-weight: 500;
 }
+.ard-form-field .ard-label .ard-label__required .ard-label__required-optional-text,
+.ard-horizontal-form-field .ard-label .ard-label__required .ard-label__required-optional-text {
+  font-weight: 500;
+  color: orangered;
+  font-size: 112.5%;
+  line-height: 1;
+}
+.ard-form-field .ard-label .ard-label__optional .ard-label__required-optional-text,
+.ard-horizontal-form-field .ard-label .ard-label__optional .ard-label__required-optional-text {
+  font-weight: 400;
+  font-size: 0.8125rem;
+  font-style: italic;
+}
 .ard-form-field .ard-form-field__hints,
 .ard-horizontal-form-field .ard-form-field__hints {
   padding: 0.125rem 0 0.25rem 0.125rem;

package/prebuilt-themes/default/form-field.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIF;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE,OCjCI;;ADmCN;AAAA;EACE,OCkCQ;EDjCR;EACA;;AAIA;AAAA;EACE,OC2BM;;ADvBR;AAAA;EACE,OCgDO;;AD5CT;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIA;EACE;;;AAKN;EACE;IACE;;EAEF;IACE","file":"form-field.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;EACE;EACA;EACA;;AAIN;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIF;AAAA;EACE;;AAGJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EACE,OCjDI;;ADmDN;AAAA;EACE,OCkBQ;EDjBR;EACA;;AAIA;AAAA;EACE,OCWM;;ADPR;AAAA;EACE,OCgCO;;AD5BT;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIA;EACE;;;AAKN;EACE;IACE;;EAEF;IACE","file":"form-field.css"}

package/themes/default/buttons/button.scss

@@ -9,7 +9,7 @@ ard-button {
 .ard-button {
   @include shared.button;
   background: transparent;
-  gap: 6px;
+  gap: 0.375rem;
   font-size: 0.875rem;
   height: 2.5em;
   padding: 0 1.2em;
@@ -22,7 +22,7 @@ ard-button {
   .ard-button-content {
     display: flex;
     align-items: center;
-    gap: 0.875rem;
+    gap: 0.375rem;
   }
 
   //! aligns

package/themes/default/form-field.scss

@@ -15,6 +15,22 @@ ard-horizontal-form-field {
     padding: 0.25rem 0 0.125rem 0.125rem;
     font-size: 0.9375rem;
     font-weight: 500;
+
+    .ard-label__required {
+      .ard-label__required-optional-text {
+        font-weight: 500;
+        color: orangered;
+        font-size: 112.5%;
+        line-height: 1;
+      }
+    }
+    .ard-label__optional {
+      .ard-label__required-optional-text {
+        font-weight: 400;
+        font-size: 0.8125rem;
+        font-style: italic;
+      }
+    }
   }
   .ard-form-field__hints {
     padding: 0.125rem 0 0.25rem 0.125rem;