@public-ui/components 4.2.1 → 4.3.0-rc.1

package/dist/types/internal/functional-components/click-button/controller.d.ts

@@ -2,11 +2,8 @@ import { BaseController } from '../base-controller';
 import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { ClickButtonApi } from './api';
 export declare class ClickButtonController extends BaseController<ClickButtonApi> implements ControllerInterface<ClickButtonApi> {
-    private buttonRef?;
     constructor(stateAccess: StateAccess<ClickButtonApi>);
     componentWillLoad(props: ResolvedInputProps<ClickButtonApi>): void;
     watchLabel(value?: string): void;
     handleClick: () => void;
-    focus(): void;
-    setButtonRef: (element?: HTMLButtonElement) => void;
 }

package/dist/types/internal/functional-components/generic-types.d.ts

@@ -106,11 +106,8 @@ type ControllerCallbackHandlers<Callbacks> = {
 type ControllerListeners<Listeners> = {
     [K in keyof Listeners as `on${Capitalize<string & K>}`]: (event: Listeners[K]) => void;
 };
-type ControllerRefSetters<Refs> = {
-    [K in keyof Refs as `set${Capitalize<string & K>}Ref`]: (element?: Refs[K]) => void;
-};
 export type ControllerInterface<T extends ComponentApi = ComponentApi> = {
     componentWillLoad(props: ResolvedInputProps<T>): void;
     getRenderProp<K extends keyof InternalProps<T>>(key: K): StrictFields<InternalProps<T>>[K];
-} & ComponentWatchers<ExternalProps<T>> & ControllerCallbackHandlers<ExtractCallbacks<T>> & ControllerListeners<ExtractListeners<T>> & ExtractMethods<T> & ControllerRefSetters<ExtractRefs<T>>;
+} & ComponentWatchers<ExternalProps<T>> & ControllerCallbackHandlers<ExtractCallbacks<T>> & ControllerListeners<ExtractListeners<T>>;
 export {};

package/dist/types/internal/functional-components/image/component.d.ts

@@ -1,4 +1,13 @@
 import type { FunctionalComponent as FC } from '../../../stencil-public-runtime';
-import type { FunctionalComponentProps } from '../generic-types';
-import type { ImageApi } from './api';
-export declare const ImageFC: FC<FunctionalComponentProps<ImageApi>>;
+import type { LoadingType } from '../../props';
+type ImageFCProps = {
+    alt: string;
+    loading?: LoadingType;
+    sizes?: string;
+    src: string;
+    srcset?: string;
+    handleError: (event: Event) => void;
+    handleLoad: (event: Event) => void;
+};
+export declare const ImageFC: FC<ImageFCProps>;
+export {};

package/dist/types/internal/functional-components/meter/api.d.ts

@@ -9,7 +9,4 @@ export interface MeterApi extends ComponentApi {
         Optional: HighProp & LowProp & MinProp & OptimumProp & OrientationProp & UnitProp;
         Required: LabelProp & MaxProp & NumberValueProp;
     };
-    States: {
-        liveValue: number;
-    };
 }

package/dist/types/internal/functional-components/meter/controller.d.ts

@@ -7,11 +7,9 @@ type MeterData = {
     optimum: number | undefined;
 };
 export declare class MeterController extends BaseController<MeterApi> implements ControllerInterface<MeterApi> {
-    private interval?;
     private meterData;
     constructor(stateAccess: StateAccess<MeterApi>);
     componentWillLoad(props: ResolvedInputProps<MeterApi>): void;
-    destroy(): void;
     getMeterData(): MeterData;
     watchHigh(value?: number): void;
     watchLabel(value?: string): void;
@@ -22,6 +20,5 @@ export declare class MeterController extends BaseController<MeterApi> implements
     watchOrientation(value?: string): void;
     watchUnit(value?: string): void;
     watchValue(value?: number): void;
-    private startLiveValueInterval;
 }
 export {};

package/dist/types/internal/functional-components/skeleton/api.d.ts

@@ -1,3 +1,4 @@
+import type { KolFocusOptions } from '../../../schema';
 import type { ApiFromConfig } from '../generic-types';
 export declare const skeletonPropsConfig: {
     readonly required: readonly [import("../../props").PropDefinition<string, import("../../props").NameProp>];
@@ -14,7 +15,7 @@ export type SkeletonApi = ApiFromConfig<typeof skeletonPropsConfig, {
         keydown: KeyboardEvent;
     };
     Methods: {
-        focus: () => void;
+        focus: (options?: KolFocusOptions) => void;
         toggle: () => void;
     };
     Refs: {

package/dist/types/internal/functional-components/skeleton/controller.d.ts

@@ -1,8 +1,9 @@
+import type { KolFocusOptions } from '../../../schema';
 import { BaseController } from '../base-controller';
 import type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';
 import type { SkeletonApi } from './api';
 export declare class SkeletonController extends BaseController<SkeletonApi> implements ControllerInterface<SkeletonApi> {
-    private readonly clickButtonCtrl;
+    private readonly buttonRef;
     private intervalId?;
     constructor(stateAccess: StateAccess<SkeletonApi>);
     componentWillLoad(props: ResolvedInputProps<SkeletonApi>): void;
@@ -10,7 +11,7 @@ export declare class SkeletonController extends BaseController<SkeletonApi> impl
     toggle(): void;
     onKeydown: (event: KeyboardEvent) => void;
     handleClick: () => void;
-    focus(): void;
+    focus(options?: KolFocusOptions): void;
     setButtonRef: (element?: HTMLButtonElement) => void;
     private startLoadedEventInterval;
     private emitLoaded;

package/dist/types/schema/components/image.d.ts

@@ -1,10 +1,5 @@
-import type { Generic } from 'adopted-style-sheets';
-import type { PropAlt, PropImageSizes, PropImageSource, PropImageSrcset, PropLoading } from '../props';
-type RequiredProps = PropAlt & PropImageSource;
-type OptionalProps = PropLoading & PropImageSizes & PropImageSrcset;
-type RequiredStates = RequiredProps & PropLoading;
-type OptionalStates = PropImageSizes & PropImageSrcset;
-export type ImageProps = Generic.Element.Members<RequiredProps, OptionalProps>;
-export type ImageStates = Generic.Element.Members<RequiredStates, OptionalStates>;
-export type ImageAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
-export {};
+import type { EventCallback } from '../types';
+export type KoliBriImageEventCallbacks = {
+    onError?: EventCallback<Event>;
+    onLoad?: EventCallback<Event>;
+};

package/dist/types/schema/components/input-password.d.ts

@@ -1,6 +1,6 @@
 import type { Generic } from 'adopted-style-sheets';
 import type { MsgPropType, PropAccessKey, PropAutoComplete, PropDisabled, PropHasCounter, PropHideLabel, PropHideMsg, PropHint, PropHorizontalIcons, PropId, PropLabelWithExpertSlot, PropMaxLengthBehavior, PropMsg, PropName, PropReadOnly, PropRequired, PropShortKey, PropSyncValueBySelector, PropTouched, PropVariantClassName } from '../props';
-import { PropVisibilityToggle } from '../props/visibility-toggle';
+import type { PropVisibilityToggle } from '../props/visibility-toggle';
 import type { InputTypeOnDefault, KoliBriHIcons, Stringified } from '../types';
 import type { InternalButtonProps } from './button';
 type RequiredProps = PropLabelWithExpertSlot;

package/dist/types/schema/interfaces/FocusableElement.d.ts

@@ -1,3 +1,9 @@
+export type KolFocusOptions = {
+    preventScroll?: true;
+    focusVisible?: true;
+} & ScrollIntoViewOptions & {
+    afterFocus?: () => void;
+};
 export interface FocusableElement {
-    focus(): Promise<void>;
+    focus(options?: KolFocusOptions): Promise<void>;
 }

package/dist/types/utils/element-focus.d.ts

@@ -1,2 +1,3 @@
+import type { KolFocusOptions } from '../schema';
 export declare function delegateFocus(host: HTMLElement, callback: () => Promise<void>): Promise<void>;
-export declare function setFocus(element: HTMLElement): Promise<void>;
+export declare function setFocus(element: HTMLElement | undefined | null, options?: KolFocusOptions): Promise<void>;

package/dist/types/utils/element-interaction.d.ts

@@ -7,5 +7,6 @@ type MethodDecorator_ = (_target: object, _key: string, descriptor: PropertyDesc
 export declare function directFocus(refPropName: string): MethodDecorator_;
 export declare function directClick(refPropName: string): MethodDecorator_;
 export declare function delegateFocus(refPropName: string): MethodDecorator_;
+export declare function ctrlFocus(ctrlPropName: string): MethodDecorator_;
 export declare function delegateClick(refPropName: string): MethodDecorator_;
 export {};

package/dist/types/utils/events.d.ts

@@ -8,9 +8,11 @@ declare enum KolEvent {
     click = "click",
     close = "close",
     create = "create",
+    error = "error",
     focus = "focus",
     input = "input",
     keydown = "keydown",
+    load = "load",
     mousedown = "mousedown",
     reset = "reset",
     select = "select",
@@ -19,5 +21,5 @@ declare enum KolEvent {
     submit = "submit",
     toggle = "toggle"
 }
-declare function dispatchDomEvent<T>(target: HTMLElement, event: KolEvent, detail?: T): boolean;
+declare function dispatchDomEvent<T>(target: EventTarget, event: KolEvent, detail?: T): boolean;
 export { KolEvent, dispatchDomEvent };

package/doc/accordion.md

@@ -32,10 +32,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/badge.md

@@ -20,10 +20,16 @@ In addition to specifying the background color and automatically calculating the
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/button-link.md

@@ -51,10 +51,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/button.md

@@ -44,10 +44,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/combobox.md

@@ -40,10 +40,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/details.md

@@ -36,10 +36,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/image.md

@@ -9,13 +9,14 @@ The **Image** component renders an image with support for responsive loading via
 
 ## Properties
 
-| Property            | Attribute  | Description                                                                   | Type                             | Default     |
-| ------------------- | ---------- | ----------------------------------------------------------------------------- | -------------------------------- | ----------- |
-| `_alt` _(required)_ | `_alt`     | Sets the alternative text of the image.                                       | `string`                         | `undefined` |
-| `_loading`          | `_loading` | Defines the loading mode for the image.                                       | `"eager" \| "lazy" \| undefined` | `undefined` |
-| `_sizes`            | `_sizes`   | Defines the image sizes for different screen resolutions, supporting _srcset. | `string \| undefined`            | `undefined` |
-| `_src` _(required)_ | `_src`     | Sets the image `src` attribute to the given string.                           | `string`                         | `undefined` |
-| `_srcset`           | `_srcset`  | Sets a list of source URLs with widths of the images.                         | `string \| undefined`            | `undefined` |
+| Property            | Attribute  | Description                                                                   | Type                                                                                                        | Default     |
+| ------------------- | ---------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `_alt` _(required)_ | `_alt`     | Sets the alternative text of the image.                                       | `string`                                                                                                    | `undefined` |
+| `_loading`          | `_loading` | Defines the loading mode for the image.                                       | `"eager" \| "lazy" \| undefined`                                                                            | `undefined` |
+| `_on`               | --         | Defines callbacks for image load events (`onError`, `onLoad`).                | `undefined \| { onError?: EventCallback<Event> \| undefined; onLoad?: EventCallback<Event> \| undefined; }` | `undefined` |
+| `_sizes`            | `_sizes`   | Defines the image sizes for different screen resolutions, supporting _srcset. | `string \| undefined`                                                                                       | `undefined` |
+| `_src` _(required)_ | `_src`     | Sets the image `src` attribute to the given string.                           | `string`                                                                                                    | `undefined` |
+| `_srcset`           | `_srcset`  | Sets a list of source URLs with widths of the images.                         | `string \| undefined`                                                                                       | `undefined` |
 
 
 ----------------------------------------------

package/doc/input-checkbox.md

@@ -44,10 +44,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-color.md

@@ -43,10 +43,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-date.md

@@ -49,10 +49,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-email.md

@@ -51,10 +51,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-file.md

@@ -43,10 +43,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-number.md

@@ -49,10 +49,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-password.md

@@ -50,10 +50,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-radio.md

@@ -40,10 +40,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-range.md

@@ -45,10 +45,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/input-text.md

@@ -52,10 +52,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/link-button.md

@@ -42,10 +42,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/link.md

@@ -29,10 +29,16 @@
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/popover-button.md

@@ -42,10 +42,16 @@ Type: `Promise<void>`
 
 
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/select.md

@@ -31,10 +31,16 @@
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/single-select.md

@@ -35,10 +35,16 @@ The **SingleSelect** component creates a dropdown list from which exactly one pr
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/skeleton.md

@@ -20,10 +20,16 @@
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Focuses the interactive element of the component.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`

package/doc/skip-nav.md

@@ -17,10 +17,16 @@ The **SkipNav** component renders a hidden navigation that allows keyboard and a
 
 ## Methods
 
-### `focus() => Promise<void>`
+### `focus(options?: KolFocusOptions) => Promise<void>`
 
 Sets focus on the internal element.
 
+#### Parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `options` | `KolFocusOptions \| undefined` |             |
+
 #### Returns
 
 Type: `Promise<void>`