@baloise/ds-core 16.0.3-nightly.20240417 → 16.1.0

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

@@ -17,6 +17,7 @@ export interface BalConfig {
     fallbackLanguage?: BalLanguage;
     logger?: BalLogger;
     animated?: boolean;
+    httpFormSubmit?: boolean;
     _jmp?: (c: any) => any;
     _raf?: (c: any) => number;
     _ael?: (el: any, eventName: string, listener: any, options: any) => void;
@@ -31,6 +32,7 @@ export interface BalConfigState {
     fallbackLanguage: BalLanguage;
     logger: BalLogger;
     animated: boolean;
+    httpFormSubmit: boolean;
 }
 export interface BalPlatformConfig {
     jmp?: (c: any) => any;

package/dist/types/utils/dropdown/auto-fill.d.ts

@@ -0,0 +1,8 @@
+import { DropdownComponent } from './component';
+export declare class DropdownAutoFillUtil {
+    private component;
+    connectedCallback(component: DropdownComponent): void;
+    handleAutoFill: (ev: Event) => Promise<void>;
+    private isAutoFillAllowed;
+    private parseAutoFillValueWithOptions;
+}

package/dist/types/utils/dropdown/component.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DropdownValueUtil } from './value';
+import { BalOption } from './option';
+import { DropdownFocus } from './focus';
+import { DropdownPopupUtil } from './popup';
+export type DropdownComponent = DropdownFocus & {
+    el: HTMLElement;
+    selectEl: HTMLSelectElement | undefined;
+    panelEl: HTMLDivElement | undefined;
+    nativeEl: HTMLInputElement | undefined;
+    listEl: HTMLBalOptionListElement | undefined;
+    valueUtil: DropdownValueUtil;
+    popupUtil: DropdownPopupUtil;
+    multiple: boolean;
+    chips: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    clearable: boolean;
+    hasFocus: boolean;
+    isExpanded: boolean;
+    isAutoFilled: boolean;
+    inputLabel: string;
+    nativeOptions: string[];
+    choices: BalOption[];
+    options: BalOption[];
+    rawOptions: BalOption[];
+    rawValue: string[];
+    value?: string | string[];
+    initialValue?: string | string[];
+    panelCleanup?: () => void;
+    balChange: EventEmitter<BalEvents.BalDropdownChangeDetail>;
+    balBlur: EventEmitter<BalEvents.BalDropdownBlurDetail>;
+    balFocus: EventEmitter<BalEvents.BalDropdownFocusDetail>;
+};

package/dist/types/utils/dropdown/dropdown.i18n.d.ts

@@ -0,0 +1,8 @@
+import { I18n } from '../../interfaces';
+interface I18nBalDropdown {
+    clearable: string;
+    open: string;
+    close: string;
+}
+export declare const i18nBalDropdown: I18n<I18nBalDropdown>;
+export {};

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

@@ -0,0 +1,13 @@
+import { DropdownComponent } from './component';
+export type DropdownEvents = {
+    listenOnClickOutside(ev: UIEvent): any;
+    listenOnClick(ev: UIEvent): any;
+};
+export declare class DropdownEventsUtil {
+    private component;
+    connectedCallback(component: DropdownComponent): void;
+    handleFocus(ev: FocusEvent): void;
+    handleBlur(ev: FocusEvent): void;
+    handleClick(ev: MouseEvent): void;
+    handleOutsideClick(ev: UIEvent): void;
+}

package/dist/types/utils/dropdown/filters.d.ts

@@ -0,0 +1,2 @@
+export declare function startsWith(text: string, input: string): boolean;
+export declare function includes(text: string, input: string): boolean;

package/dist/types/utils/dropdown/focus.d.ts

@@ -0,0 +1,13 @@
+import { DropdownComponent } from './component';
+export type DropdownFocus = {
+    labelToFocus: string;
+};
+export declare class DropdownFocusUtil {
+    private component;
+    private keyHitTimeout;
+    private timeout;
+    connectedCallback(component: DropdownComponent): void;
+    focusOptionByLabel(key: string, options?: Partial<{
+        select: boolean;
+    }>): void;
+}

package/dist/types/utils/dropdown/form-submit.d.ts

@@ -0,0 +1,22 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { DropdownComponent } from './component';
+export type DropdownFormSubmit = {
+    resetHandler(ev: UIEvent): any;
+};
+export declare class DropdownFormSubmitUtil {
+    private component;
+    private resetHandlerTimer?;
+    connectedCallback(component: DropdownComponent): void;
+    componentDidRender(): void;
+    handle(ev: UIEvent): void;
+}
+export interface DropdownNativeSelectProps {
+    name: string;
+    httpFormSubmit: boolean;
+    multiple: boolean;
+    required: boolean;
+    disabled: boolean;
+    rawValue: string[];
+    refSelectEl: (el: HTMLSelectElement) => void;
+}
+export declare const DropdownNativeSelect: FunctionalComponent<DropdownNativeSelectProps>;

package/dist/types/utils/dropdown/icon.d.ts

@@ -0,0 +1,13 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { BalLanguage } from '../config';
+export interface DropdownIconProps {
+    language: BalLanguage;
+    loading: boolean;
+    clearable: boolean;
+    filled: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    expanded: boolean;
+    icon: string;
+}
+export declare const DropdownIcon: FunctionalComponent<DropdownIconProps>;

package/dist/types/utils/dropdown/index.d.ts

@@ -0,0 +1,13 @@
+export * from './auto-fill';
+export * from './component';
+export * from './dropdown.i18n';
+export * from './events';
+export * from './filters';
+export * from './focus';
+export * from './form-submit';
+export * from './icon';
+export * from './option';
+export * from './option-list';
+export * from './popup';
+export * from './value';
+export * from './input';

package/dist/types/utils/dropdown/input.d.ts

@@ -0,0 +1,27 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { BalAriaForm } from '../form';
+import { BalLanguage } from '../config';
+import { Attributes } from '../attributes';
+export interface DropdownInputProps {
+    name: string;
+    inputId: string;
+    httpFormSubmit: boolean;
+    ariaForm: BalAriaForm;
+    rawValue: string[];
+    autocomplete: string;
+    placeholder: string;
+    inputLabel: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    expanded: boolean;
+    invalid: boolean;
+    language: BalLanguage;
+    inheritedAttributes: Attributes;
+    refInputEl: (el: HTMLInputElement) => void;
+    onChange: (ev: Event) => void;
+    onFocus: (ev: FocusEvent) => void;
+    onBlur: (ev: FocusEvent) => void;
+    onKeyDown: (ev: KeyboardEvent) => void;
+}
+export declare const DropdownInput: FunctionalComponent<DropdownInputProps>;

package/dist/types/utils/dropdown/option-list.d.ts

@@ -0,0 +1,17 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { BalOption } from './option';
+export interface DropdownOptionListProps {
+    inputId: string;
+    block: string;
+    filter: BalProps.BalOptionListFilter;
+    required: boolean;
+    isExpanded: boolean;
+    isDisabled: boolean;
+    hasPropOptions: boolean;
+    multiple: boolean;
+    contentHeight: number;
+    rawOptions: BalOption[];
+    refPanelEl: (el: HTMLDivElement) => void;
+    refListEl: (el: HTMLBalOptionListElement) => void;
+}
+export declare const DropdownOptionList: FunctionalComponent<DropdownOptionListProps>;

package/dist/types/utils/dropdown/option.d.ts

@@ -0,0 +1,25 @@
+import { DropdownComponent } from './component';
+export type BalBaseOption<TValue = string> = {
+    value: TValue;
+    label: string;
+};
+export type BalOptionOptions = {
+    disabled: boolean;
+    invalid: boolean;
+    selected: boolean;
+    focused: boolean;
+    hidden: boolean;
+    multiline: boolean;
+};
+export type BalOption<TValue = string> = BalBaseOption<TValue> & BalOptionOptions;
+export type NewBalOption<TValue = string> = (option: BalBaseOption<TValue>, options?: Partial<BalOptionOptions>) => BalOption<TValue>;
+export declare const newBalOption: NewBalOption;
+export declare const mapOption: (option: Partial<BalOption>) => BalOption;
+export declare class DropdownOptionUtil {
+    private component;
+    connectedCallback(component: DropdownComponent): void;
+    componentWillRender(): Promise<void>;
+    hasPropOptions(): boolean;
+    optionChanged(): Promise<void>;
+    listenToOptionChange(_ev: BalEvents.BalOptionChange): Promise<void>;
+}

package/dist/types/utils/dropdown/popup.d.ts

@@ -0,0 +1,9 @@
+import { DropdownComponent } from './component';
+export declare class DropdownPopupUtil {
+    private component;
+    connectedCallback(component: DropdownComponent): void;
+    updatePanelPosition: (referenceEl: HTMLElement, floatingEl: HTMLElement) => () => void;
+    toggleList(): void;
+    expandList(): void;
+    collapseList(): void;
+}

package/dist/types/utils/dropdown/value.d.ts

@@ -0,0 +1,28 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+import { DropdownComponent } from './component';
+import { BalOption } from './option';
+export declare class DropdownValueUtil {
+    private component;
+    connectedCallback(component: DropdownComponent): void;
+    componentDidLoad(): void;
+    isDisabled(): boolean;
+    isFilled(): boolean;
+    valueChanged(newValue: string | string[] | undefined, oldValue: string | string[] | undefined): void;
+    updateRawValueBySelection(newRawValue?: string[], isAutoFilled?: boolean): void;
+    parseValueString(newValue?: string | string[]): string[];
+    updateRawValueByValueProp(newValue?: string | string[]): void;
+    updateRawValue(newRawValue?: string[]): Promise<void>;
+    removeOption(option: BalOption): void;
+    updateInputContent(): Promise<void>;
+}
+export interface DropdownValueProps {
+    filled: boolean;
+    chips: boolean;
+    invalid: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
+    choices: BalOption[];
+    onRemoveChip: (option: BalOption) => void;
+}
+export declare const DropdownValue: FunctionalComponent<DropdownValueProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-core",
-  "version": "16.0.3-nightly.20240417",
+  "version": "16.1.0",
   "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "bubu": "vitest --ui"
   },
   "dependencies": {
-    "@baloise/ds-styles": "16.0.3-nightly.20240417",
-    "@baloise/ds-icons": "16.0.3-nightly.20240417",
+    "@baloise/ds-styles": "16.1.0",
+    "@baloise/ds-icons": "16.1.0",
     "@baloise/web-app-utils": "3.11.2",
     "@floating-ui/dom": "~1.6.3",
     "@popperjs/core": "~2.11.4",
@@ -54,10 +54,10 @@
     "@baloise/output-target-react": "0.0.0",
     "@baloise/output-target-vue": "0.0.0",
     "@baloise/output-target-web": "0.0.0",
-    "@baloise/ds-css": "16.0.3-nightly.20240417",
-    "@baloise/ds-maps": "16.0.3-nightly.20240417",
-    "@baloise/ds-brand-icons": "16.0.3-nightly.20240417",
-    "@baloise/ds-favicons": "16.0.3-nightly.20240417"
+    "@baloise/ds-css": "16.1.0",
+    "@baloise/ds-maps": "16.1.0",
+    "@baloise/ds-brand-icons": "16.1.0",
+    "@baloise/ds-favicons": "16.1.0"
   },
   "sideEffects": false
 }

package/components/bal-app2.js

@@ -1,87 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as balBrowser } from './browser.js';
-import { b as balDevice } from './device.js';
-import { h as debounce, k as rIC } from './helpers.js';
-import { L as Logger } from './log.js';
-import { s as startFocusVisible } from './focus-visible.js';
-import { b as updateBalAnimated } from './config.utils.js';
-
-const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}";
-const BalAppStyle0 = balAppCss;
-
-const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        this.notifyResize = async () => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
-            }
-        };
-        this.animated = true;
-        this.ready = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    connectedCallback() {
-        updateBalAnimated(this.animated);
-        if (balBrowser.hasWindow) {
-            window.addEventListener('resize', this.debouncedNotify);
-            this.debouncedNotify();
-        }
-    }
-    componentDidLoad() {
-        rIC(async () => {
-            this.ready = true;
-            startFocusVisible();
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", null)));
-    }
-    get el() { return this; }
-    static get style() { return BalAppStyle0; }
-}, [4, "bal-app", {
-        "animated": [516],
-        "ready": [1540],
-        "setFocus": [64]
-    }]);
-__decorate([
-    Logger('bal-app'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], App.prototype, "createLogger", null);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-app"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-app":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, App);
-            }
-            break;
-    } });
-}
-
-export { App as A, defineCustomElement as d };