@odx/foundation 1.0.0-beta.259 → 1.0.0-beta.260

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 1.0.0-beta.260
+
+### Major Changes
+
+- Remove generic from `FormAssociated` mixin due to issues with type inference in certain scenarios
+- Remove `--_min-width` custom property from control elements, use `min-width` property instead
+
+### Minor Changes
+
+- New `odx-input-number` component
+- Improve `odx-input` component accessibility and flexibility
+- Add input `loading` state
+- Add auto sizing behavior for input controls
+- Remove CSS parts from `odx-loading-overlay` component
+
+### Bug Fixes
+
+- Fix positioning of clear action in `odx-input` and `odx-select` components
+- Move `[loading]` styles into button control to prevent leakage to other components
+
+
 ## 1.0.0-beta.259
 
 ### Minor Changes

package/dist/components/abstract/control-element.d.ts

@@ -22,6 +22,7 @@ declare const ControlElement_base: import('../../utils/main.js').Constructor<Can
 export declare class ControlElement extends ControlElement_base {
     #private;
     static readonly styles: CSSResultGroup;
+    protected get nestedControlSize(): ControlSize;
     size: ControlSize;
     connectedCallback(): void;
     click(): void;
@@ -29,7 +30,7 @@ export declare class ControlElement extends ControlElement_base {
     protected renderContent(): TemplateResult;
     protected renderLabel(defaultContent?: TemplateResult | string): TemplateResult;
     protected renderSlot(name: 'prefix' | 'suffix', defaultContent?: TemplateResult | string): TemplateResult;
-    protected updated(props: PropertyValues): void;
+    protected updated(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=control-element.d.ts.map

package/dist/components/abstract/input-control-element.d.ts

@@ -0,0 +1,36 @@
+import { Alignment, FormAssociated } from '../../main.js';
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { ControlElement } from './control-element.js';
+declare const InputControlElement_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof ControlElement;
+/**
+ *
+ * @slot prefix - Prefix slot
+ * @slot suffix - Suffix slot
+ * @slot - Default slot
+ */
+export declare class InputControlElement extends InputControlElement_base {
+    #private;
+    static readonly styles: CSSResultGroup;
+    static shadowRootOptions: ShadowRootInit;
+    private measureTarget;
+    focusTarget: HTMLInputElement;
+    autocomplete: HTMLInputElement['autocomplete'];
+    alignment: Alignment;
+    hideControls: boolean;
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    placeholder: string;
+    unit?: string;
+    constructor();
+    disconnectedCallback(): void;
+    toFormValue(): string;
+    protected firstUpdated(props: PropertyValues): void;
+    protected updated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    protected renderInput(): TemplateResult;
+    protected handleInput(event: InputEvent & {
+        target: HTMLInputElement;
+    }): void;
+    protected updateInputWidth(): void;
+}
+export {};
+//# sourceMappingURL=input-control-element.d.ts.map

package/dist/components/autocomplete/autocomplete.d.ts

@@ -8,7 +8,7 @@ declare global {
         'odx-autocomplete': OdxAutocomplete;
     }
 }
-declare const OdxAutocomplete_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof CustomElement;
+declare const OdxAutocomplete_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class OdxAutocomplete extends OdxAutocomplete_base {
     #private;
     static shadowRootOptions: ShadowRootInit;

package/dist/components/input/input.d.ts

@@ -1,30 +1,37 @@
-import { FormAssociated } from '../../main.js';
-import { OdxIconName } from '@odx/icons';
-import { nothing, PropertyValues, TemplateResult } from 'lit';
-import { ControlElement } from '../abstract/control-element.js';
+import { ValuesOf } from '../../utils/main.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { InputControlElement } from '../abstract/input-control-element.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-input': OdxInput;
     }
 }
-declare const OdxInput_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof ControlElement;
-export declare class OdxInput extends OdxInput_base {
+export type InputType = ValuesOf<typeof InputType>;
+export declare const InputType: {
+    readonly TEXT: "text";
+    readonly EMAIL: "email";
+    readonly HIDDEN: "hidden";
+    readonly NUMBER: "number";
+    readonly PASSWORD: "password";
+    readonly SEARCH: "search";
+    readonly TEL: "tel";
+    readonly URL: "url";
+    readonly TIME: "time";
+};
+export declare class OdxInput extends InputControlElement {
     #private;
-    static shadowRootOptions: ShadowRootInit;
-    focusTarget: HTMLInputElement;
+    private passwordRevealed;
+    autocapitalize: string;
     clearable: boolean;
-    hideControls: boolean;
-    placeholder: string;
-    min?: number;
-    max?: number;
-    step?: number;
-    type: HTMLInputElement['type'];
+    loading: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    type: InputType;
     value: string;
-    stepUp(): void;
-    stepDown(): void;
+    protected firstUpdated(props: PropertyValues<this>): void;
     protected willUpdate(props: PropertyValues<this>): void;
-    protected render(): TemplateResult;
-    protected renderControl(type: string, icon: OdxIconName, listener: EventListener, disabled: boolean, slot?: string): TemplateResult | typeof nothing;
+    protected updated(props: PropertyValues<this>): void;
+    protected renderInput(): TemplateResult;
 }
-export {};
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input-number/input-number.d.ts

@@ -0,0 +1,38 @@
+import { ValuesOf } from '../../utils/main.js';
+import { OdxIconName } from '@odx/icons';
+import { PropertyValues, TemplateResult } from 'lit';
+import { InputControlElement } from '../abstract/input-control-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-input-number': OdxInputNumber;
+    }
+}
+export type InputNumberStepBehavior = ValuesOf<typeof InputNumberStepBehavior>;
+export declare const InputNumberStepBehavior: {
+    readonly IGNORE: "ignore";
+    readonly ROUND: "round";
+    readonly CEIL: "ceil";
+    readonly FLOOR: "floor";
+};
+export declare class OdxInputNumber extends InputControlElement {
+    #private;
+    iconDecrement: OdxIconName;
+    iconIncrement: OdxIconName;
+    min: number;
+    max: number;
+    step: number;
+    stepBehavior: InputNumberStepBehavior;
+    value: number;
+    constructor();
+    stepUp(n?: number): void;
+    stepDown(n?: number): void;
+    toFormValue(): string;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
+    protected updated(props: PropertyValues<this>): void;
+    protected renderInput(): TemplateResult;
+    protected handleInput(_event: InputEvent & {
+        target: HTMLInputElement;
+    }): void;
+}
+//# sourceMappingURL=input-number.d.ts.map

package/dist/components/listbox/listbox.d.ts

@@ -7,7 +7,7 @@ declare global {
         'odx-listbox': OdxListbox;
     }
 }
-declare const OdxListbox_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof CustomElement;
+declare const OdxListbox_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class OdxListbox extends OdxListbox_base {
     #private;
     interactive: boolean;

package/dist/components/loading-overlay/loading-overlay.d.ts

@@ -7,7 +7,7 @@ declare global {
 }
 export declare class OdxLoadingOverlay extends CustomElement {
     #private;
-    private readonly overlay;
+    private readonly backdrop;
     get loadingContainer(): HTMLElement;
     loading: boolean;
     disconnectedCallback(): void;

package/dist/components/main.d.ts

@@ -32,6 +32,7 @@ export * from './icon-button/icon-button.js';
 export * from './image/image.js';
 export * from './inline-message/inline-message.js';
 export * from './input/input.js';
+export * from './input-number/input-number.js';
 export * from './key-value/key-value.js';
 export * from './key-value-list/key-value-list.js';
 export * from './label/label.js';

package/dist/components/popover/popover-host.d.ts

@@ -19,7 +19,6 @@ export declare class PopoverHost extends PopoverHost_base {
     set referenceElement(value: HTMLElement | null);
     get referenceElement(): HTMLElement | null;
     placement: Placement;
-    fpsLimit: number;
     get popoverPlacementOptions(): PopoverPlacementOptions;
     constructor();
     connectedCallback(): void;

package/dist/components/select/select.d.ts

@@ -17,7 +17,6 @@ export declare class OdxSelect extends OdxSelect_base {
     protected readonly dropdown: OdxDropdown;
     clearable: boolean;
     constructor();
-    clear(): void;
     connectedCallback(): void;
     firstUpdated(props: PropertyValues<this>): void;
     protected canSelect(option: OdxOption): boolean;

package/dist/components/slider/slider-handle.d.ts

@@ -20,7 +20,7 @@ export declare const SliderHandleVariant: Pick<{
     readonly SUBTLE: "subtle";
     readonly GHOST: "ghost";
 }, "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
-declare const OdxSliderHandle_base: import('../../utils/main.js').Constructor<FormAssociated<number>> & typeof CustomElement;
+declare const OdxSliderHandle_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class OdxSliderHandle extends OdxSliderHandle_base implements IsDraggable {
     #private;
     static shadowRootOptions: ShadowRootInit;

package/dist/components/textarea/textarea.d.ts

@@ -5,7 +5,7 @@ declare global {
         'odx-textarea': OdxTextArea;
     }
 }
-declare const OdxTextArea_base: import('../../utils/main.js').Constructor<FormAssociated<string>> & typeof CustomElement;
+declare const OdxTextArea_base: import('../../utils/main.js').Constructor<FormAssociated> & typeof CustomElement;
 export declare class OdxTextArea extends OdxTextArea_base {
     #private;
     static shadowRootOptions: ShadowRootInit;