@acorex/components 20.7.35 → 20.7.37

package/button/index.d.ts

@@ -266,15 +266,9 @@ declare class AXButtonComponent extends MXButtonBaseComponent implements AfterVi
      *  @ignore
      */
     private get __hostClass();
-    /**
-     * Sets focus on the button element and adds a focus style class.
-     *
-     */
+    protected emitOnFocusEvent(e?: FocusEvent): void;
+    protected emitOnBlurEvent(e?: FocusEvent): void;
     focus(): void;
-    /**
-     * Removes the focus style class from the button element
-     * when the button loses focus.
-     */
     blur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, ["loadingIcon"], ["ax-loading, ax-loading-spinner", "ax-prefix, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content", "*"], true, never>;

package/data-table/index.d.ts

@@ -34,7 +34,7 @@ interface onColumnSizeChangedEvent extends AXEvent {
 }
 interface AXDataTableRowDbClick extends AXDataTableRowClick {
 }
-type AXDataTableBorder = 'full' | 'minimal';
+type AXDataTableLook = 'classic' | 'minimal';
 declare abstract class AXBaseDataTable extends MXBaseComponent {
     dataSource: AXDataSource<unknown>;
     /**
@@ -614,14 +614,14 @@ declare class AXRowSelectColumnComponent extends AXDataTableColumnComponent {
  */
 declare class AXInfiniteScrollDataTableComponent extends AXBaseDataTable implements OnInit, DoCheck {
     /**
-     * Controls the table border style.
+     * Controls the table look.
      *
-     * - `full` — vertical and horizontal cell borders (default).
-     * - `minimal` — horizontal row borders only.
+     * - `classic` — classic look (default).
+     * - `minimal` — minimal look.
      *
-     * @defaultValue `'full'`
+     * @defaultValue `'classic'`
      */
-    border: i0.InputSignal<AXDataTableBorder>;
+    look: i0.InputSignal<AXDataTableLook>;
     private document;
     private platformID;
     private ngZone;
@@ -862,7 +862,7 @@ declare class AXInfiniteScrollDataTableComponent extends AXBaseDataTable impleme
      */
     protected _handleOnScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXInfiniteScrollDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXInfiniteScrollDataTableComponent, "ax-infinite-scroll-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "onPageChanged": "onPageChanged"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "focusedRowChange": "focusedRowChange"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXInfiniteScrollDataTableComponent, "ax-infinite-scroll-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "onPageChanged": "onPageChanged"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "focusedRowChange": "focusedRowChange"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, ["columns"], ["ax-header", "ax-footer"], true, never>;
 }
 
 /**
@@ -873,14 +873,14 @@ declare class AXInfiniteScrollDataTableComponent extends AXBaseDataTable impleme
 declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, AfterViewInit {
     #private;
     /**
-     * Controls the table border style.
+     * Controls the table look.
      *
-     * - `full` — vertical and horizontal cell borders (default).
-     * - `minimal` — horizontal row borders only.
+     * - `classic` — classic look (default).
+     * - `minimal` — minimal look.
      *
-     * @defaultValue `'full'`
+     * @defaultValue `'classic'`
      */
-    border: i0.InputSignal<AXDataTableBorder>;
+    look: i0.InputSignal<AXDataTableLook>;
     private _unsubscriber;
     private _zone;
     private document;
@@ -1260,7 +1260,7 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
         headerOnly?: boolean;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; }; "rowDetailsTemplate": { "alias": "rowDetailsTemplate"; "required": false; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; }; "rowDetailsTemplate": { "alias": "rowDetailsTemplate"; "required": false; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
 }
 
 declare class AXDataTableModule {
@@ -1270,4 +1270,4 @@ declare class AXDataTableModule {
 }
 
 export { AXBaseDataTable, AXBaseRowCommandColumnComponent, AXDataTableColumnComponent, AXDataTableColumnResizableDirective, AXDataTableComponent, AXDataTableModule, AXDataTableTextColumnComponent, AXInfiniteScrollDataTableComponent, AXRowCommandColumnComponent, AXRowDropdownCommandColumnComponent, AXRowExpandColumnComponent, AXRowIndexColumnComponent, AXRowSelectColumnComponent };
-export type { AXColumnsOrderChangedEvent, AXDataTableBorder, AXDataTableRowClick, AXDataTableRowDbClick, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };
+export type { AXColumnsOrderChangedEvent, AXDataTableLook, AXDataTableRowClick, AXDataTableRowDbClick, AXDataTableScrollIndexChanged, AXRowCommandItem, AXRowCommandItemClickEvent, onColumnSizeChangedEvent };

package/datetime-box/index.d.ts

@@ -1,13 +1,30 @@
+import * as _acorex_core_date_time from '@acorex/core/date-time';
+import { TimeUnit } from '@acorex/core/date-time';
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
 import { EventEmitter } from '@angular/core';
-import { MXInputBaseValueComponent, MXLookComponent, AXEvent, AXFocusEvent } from '@acorex/cdk/common';
+import { MXInputBaseValueComponent, MXLookComponent, AXEvent, AXFocusEvent, AXValueChangedEvent } from '@acorex/cdk/common';
 import { MXCalendarBaseComponent, AXDateTimePickerType, AXCalendarNavigationLookType, AXCalendarNavigateEvent } from '@acorex/components/calendar';
 import { AXDateTimeInputComponent } from '@acorex/components/datetime-input';
 import { AXDateTimePickerComponent } from '@acorex/components/datetime-picker';
 import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
 
+/**
+ * Controls how date/time is chosen in the datetime box.
+ * - `default`: text input with calendar popup.
+ * - `classic`: inline select boxes for year, month, day, and optionally hour/minute.
+ */
+type AXDateTimeBoxLookType = 'default' | 'classic';
+type AXDateTimeBoxClassicPart = Extract<TimeUnit, 'year' | 'month' | 'day' | 'hour' | 'minute'>;
+interface AXDateTimeBoxClassicField {
+    part: AXDateTimeBoxClassicPart;
+    dropdownWidth: string;
+    maxVisibleItems: number;
+}
+declare const AX_DATETIME_BOX_CLASSIC_DATE_FIELDS: AXDateTimeBoxClassicField[];
+declare const AX_DATETIME_BOX_CLASSIC_TIME_FIELDS: AXDateTimeBoxClassicField[];
+
 declare const AXDateTimeBoxComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXInputBaseValueComponent<Date>;
     ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
@@ -55,6 +72,12 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      * Day view navigation style of the embedded calendar.
      */
     readonly calendarLook: _angular_core.InputSignal<AXCalendarNavigationLookType>;
+    /**
+     * Input style of the datetime box.
+     * - `default`: text input with calendar popup.
+     * - `classic`: inline select boxes for date/time parts.
+     */
+    readonly boxLook: _angular_core.InputSignal<AXDateTimeBoxLookType>;
     /**
      * @deprecated use locale & mode instead
      */
@@ -62,10 +85,39 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
     protected _editingDateObj: _angular_core.WritableSignal<Date>;
     protected _calendarSystem: _angular_core.WritableSignal<string>;
     private _format;
+    protected readonly _classicDateFields: AXDateTimeBoxClassicField[];
+    protected readonly _classicTimeFields: AXDateTimeBoxClassicField[];
+    private readonly _classicTimeOptions;
+    protected _classicDate: _angular_core.Signal<_acorex_core_date_time.AXDateTime>;
+    protected _classicYearOptions: _angular_core.Signal<{
+        id: number;
+        text: string;
+    }[]>;
+    protected _classicMonthOptions: _angular_core.Signal<{
+        id: number;
+        text: string;
+    }[]>;
+    protected _classicDayOptions: _angular_core.Signal<{
+        id: number;
+        text: string;
+    }[]>;
+    protected get _classicBoxClass(): string;
+    protected get _classicHasDatePart(): boolean;
+    protected get _classicHasTimePart(): boolean;
     /**
      *  @ignore
      */
-    protected _handleInputModelChange(value: Date | null): void;
+    protected _classicPartValue(part: AXDateTimeBoxClassicPart): {
+        id: number;
+        text: string;
+    } | null;
+    /**
+     *  @ignore
+     */
+    protected _classicPartOptions(part: AXDateTimeBoxClassicPart): {
+        id: number;
+        text: string;
+    }[];
     /**
      *  @ignore
      */
@@ -96,13 +148,21 @@ declare class AXDateTimeBoxComponent extends AXDateTimeBoxComponent_base {
      * @ignore
      */
     internalValueChanged(value: any): void;
+    /**
+     *  @ignore
+     */
+    protected _handleClassicPartChanged(e: AXValueChangedEvent, part: AXDateTimeBoxClassicPart): void;
+    /**
+     *  @ignore
+     */
+    private _readSelectValue;
     /**
      *  @ignore
      */
     protected _handleInputOnClick(): void;
     private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDateTimeBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "required": false; "isSignal": true; }; "calendarLook": { "alias": "calendarLook"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onOpened": "onOpened"; "onClosed": "onClosed"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDateTimeBoxComponent, "ax-datetime-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "allowTyping": { "alias": "allowTyping"; "required": false; "isSignal": true; }; "picker": { "alias": "picker"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "required": false; "isSignal": true; }; "calendarLook": { "alias": "calendarLook"; "required": false; "isSignal": true; }; "boxLook": { "alias": "boxLook"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onOpened": "onOpened"; "onClosed": "onClosed"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "formatChange": "formatChange"; }, never, ["ax-prefix", "ax-suffix", "ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
 }
 
 declare class AXDateTimeBoxModule {
@@ -111,4 +171,5 @@ declare class AXDateTimeBoxModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDateTimeBoxModule>;
 }
 
-export { AXDateTimeBoxComponent, AXDateTimeBoxModule };
+export { AXDateTimeBoxComponent, AXDateTimeBoxModule, AX_DATETIME_BOX_CLASSIC_DATE_FIELDS, AX_DATETIME_BOX_CLASSIC_TIME_FIELDS };
+export type { AXDateTimeBoxClassicField, AXDateTimeBoxClassicPart, AXDateTimeBoxLookType };

package/fesm2022/acorex-components-button.mjs

@@ -456,20 +456,19 @@ class AXButtonComponent extends MXButtonBaseComponent {
         }
         return list;
     }
-    /**
-     * Sets focus on the button element and adds a focus style class.
-     *
-     */
+    emitOnFocusEvent(e) {
+        this.getButton()?.classList.add('ax-state-focus');
+        super.emitOnFocusEvent(e);
+    }
+    emitOnBlurEvent(e) {
+        this.getButton()?.classList.remove('ax-state-focus');
+        super.emitOnBlurEvent(e);
+    }
     focus() {
         this.getButton()?.focus();
-        this.getButton().classList.add('ax-state-focus');
     }
-    /**
-     * Removes the focus style class from the button element
-     * when the button loses focus.
-     */
     blur() {
-        this.getButton().classList.remove('ax-state-focus');
+        this.getButton()?.blur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXButtonComponent, isStandalone: true, selector: "ax-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", selectedChange: "selectedChange", toggleableChange: "toggleableChange", lookChange: "lookChange", colorChange: "colorChange", disabledChange: "disabledChange", loadingText: "loadingTextChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [