@db-ux/react-core-components 1.0.0-test-13b991d

package/dist/components/input/input.js

@@ -0,0 +1,119 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, delay, getHideProp, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import DBInfotext from "../infotext/infotext";
+function DBInputFn(props, component) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => undefined);
+    const [_messageId, set_messageId] = useState(() => undefined);
+    const [_validMessageId, set_validMessageId] = useState(() => undefined);
+    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
+    const [_dataListId, set_dataListId] = useState(() => undefined);
+    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_value, set_value] = useState(() => "");
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    function handleInput(event) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+        if (props.input) {
+            props.input(event);
+        }
+    }
+    function handleChange(event) {
+        var _a, _b, _c, _d, _e, _f;
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        if (props.change) {
+            props.change(event);
+        }
+        /* For a11y reasons we need to map the correct message with the input */
+        if (!((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
+            set_descByIds(_invalidMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback((_d = (_b = props.invalidMessage) !== null && _b !== void 0 ? _b : (_c = _ref.current) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE);
+                delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (props.validation === "valid" ||
+            (((_e = _ref.current) === null || _e === void 0 ? void 0 : _e.validity.valid) &&
+                (props.required || props.minLength || props.maxLength || props.pattern))) {
+            set_descByIds(_validMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback((_f = props.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE);
+                delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (stringPropVisible(props.message, props.showMessage)) {
+            set_descByIds(_messageId);
+        }
+        else {
+            set_descByIds("");
+        }
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+        if (props.blur) {
+            props.blur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+        if (props.focus) {
+            props.focus(event);
+        }
+    }
+    function getDataList(_list) {
+        return Array.from((isArrayOfStrings(_list)
+            ? _list.map((val) => ({
+                value: val,
+                label: undefined,
+            }))
+            : _list) || []);
+    }
+    useEffect(() => {
+        var _a;
+        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `input-${uuid()}`;
+        set_id(mId);
+        set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+        set_dataListId(mId + DEFAULT_DATALIST_ID_SUFFIX);
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (_id) {
+            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
+            set_messageId(messageId);
+            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+            set_dataListId((_a = props.dataListId) !== null && _a !== void 0 ? _a : _id + DEFAULT_DATALIST_ID_SUFFIX);
+            if (stringPropVisible(props.message, props.showMessage)) {
+                set_descByIds(messageId);
+            }
+        }
+    }, [_id]);
+    useEffect(() => {
+        set_value(props.value);
+    }, [props.value]);
+    return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-icon": getHideProp(props.showIcon), "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon-after": getHideProp(props.showIcon) }),
+        React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
+        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: props.disabled, required: props.required, step: props.step, value: props.value, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, readOnly: props.readOnly, form: props.form, pattern: props.pattern, autoComplete: props.autocomplete, autoFocus: props.autofocus, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": _descByIds })),
+        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_c = getDataList(props.dataList)) === null || _c === void 0 ? void 0 : _c.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
+        props.children,
+        stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
+        React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE),
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_g = (_e = props.invalidMessage) !== null && _e !== void 0 ? _e : (_f = _ref.current) === null || _f === void 0 ? void 0 : _f.validationMessage) !== null && _g !== void 0 ? _g : DEFAULT_INVALID_MESSAGE),
+        React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
+}
+const DBInput = forwardRef(DBInputFn);
+DBInput.defaultProps = {};
+export default DBInput;

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

@@ -0,0 +1,39 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
+export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
+export type InputTypeType = (typeof InputTypeList)[number];
+export type DBInputDefaultProps = {
+    /**
+     * Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.
+     */
+    dataList?: string[] | ValueLabelType[];
+    /**
+     * Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.
+     */
+    dataListId?: string;
+    /**
+     * Maximum value
+     */
+    max?: number | string;
+    /**
+     * Minimum value
+     */
+    min?: number | string;
+    /**
+     * Pattern the value must match to be valid
+     */
+    pattern?: string;
+    /**
+     * 	Type of form control
+     */
+    type?: InputTypeType | string;
+    /**
+     * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).
+     */
+    step?: number | string;
+};
+export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps;
+export type DBInputDefaultState = {
+    _dataListId?: string;
+    getDataList: (_list?: string[] | ValueLabelType[]) => ValueLabelType[];
+};
+export type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState;

package/dist/components/input/model.js

@@ -0,0 +1,5 @@
+export const InputTypeList = ['color', 'date', 'datetime-local', 'email', 'file',
+    // TODO: move this to own component
+    'hidden', 'month', 'number', 'password', 'range',
+    // TODO: move this to own component
+    'search', 'tel', 'text', 'time', 'url', 'week'];

package/dist/components/link/index.d.ts

@@ -0,0 +1 @@
+export { default as DBLink } from './link';

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { default as DBLink } from './link';

package/dist/components/link/link.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLAnchorElement>, "text" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../../shared/model").LinkProps> & import("./model").DBLinkDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLAnchorElement> & import("../../shared/model").LinkProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLAnchorElement>>;
+export default DBLink;

package/dist/components/link/link.js

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+function DBLinkFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    function handleClick(event) {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+    }
+    return (React.createElement("a", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "aria-selected": props.selected, "aria-label": props.label, "aria-current": props.current, "data-size": props.size, "data-hide-icon-after": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal", onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+}
+const DBLink = forwardRef(DBLinkFn);
+DBLink.defaultProps = {};
+export default DBLink;

package/dist/components/link/model.d.ts

@@ -0,0 +1,24 @@
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, ShowIconProps, TextProps } from '../../shared/model';
+export declare const LinkVariantList: readonly ["adaptive", "brand"];
+export type LinkVariantType = (typeof LinkVariantList)[number];
+export declare const LinkSizeList: readonly ["medium", "small"];
+export type LinkSizeType = (typeof LinkSizeList)[number];
+export declare const LinkContentList: readonly ["external", "internal"];
+export type LinkContentType = (typeof LinkContentList)[number];
+export type DBLinkDefaultProps = {
+    /**
+     * Adds a different arrow after the link to indicate external or internal link
+     */
+    content?: LinkContentType;
+    /**
+     * Change the size of the link
+     */
+    size?: LinkSizeType;
+    /**
+     * Change the styling of the link. `inline` will remove the arrow. Defaults to adaptive.
+     */
+    variant?: LinkVariantType;
+};
+export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & ShowIconProps & TextProps;
+export type DBLinkDefaultState = {};
+export type DBLinkState = DBLinkDefaultState & GlobalState & ClickEventState<HTMLAnchorElement>;

package/dist/components/link/model.js

@@ -0,0 +1,3 @@
+export const LinkVariantList = ['adaptive', 'brand'];
+export const LinkSizeList = ['medium', 'small'];
+export const LinkContentList = ['external', 'internal'];

package/dist/components/navigation/index.d.ts

@@ -0,0 +1 @@
+export { default as DBNavigation } from './navigation';

package/dist/components/navigation/index.js

@@ -0,0 +1 @@
+export { default as DBNavigation } from './navigation';

package/dist/components/navigation/model.d.ts

@@ -0,0 +1,5 @@
+import { AriaLabelledByProps, GlobalProps, GlobalState } from '../../shared/model';
+export type DBNavigationDefaultProps = {};
+export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps & AriaLabelledByProps;
+export type DBNavigationDefaultState = {};
+export type DBNavigationState = DBNavigationDefaultState & GlobalState;

package/dist/components/navigation/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/navigation.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBNavigation: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../..").GlobalProps | "labelledBy"> & import("../..").GlobalProps & import("../..").AriaLabelledByProps & React.RefAttributes<HTMLDivElement>>;
+export default DBNavigation;

package/dist/components/navigation/navigation.js

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { DEFAULT_ID } from "../../shared/constants";
+function DBNavigationFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    useEffect(() => {
+        set_id(props.id || "navigation-" + uuid());
+    }, []);
+    return (React.createElement("nav", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, "aria-labelledby": props.labelledBy }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-navigation", props.className) }),
+        React.createElement("menu", null, props.children)));
+}
+const DBNavigation = forwardRef(DBNavigationFn);
+DBNavigation.defaultProps = {};
+export default DBNavigation;

package/dist/components/navigation-item/index.d.ts

@@ -0,0 +1 @@
+export { default as DBNavigationItem } from './navigation-item';

package/dist/components/navigation-item/index.js

@@ -0,0 +1 @@
+export { default as DBNavigationItem } from './navigation-item';

package/dist/components/navigation-item/model.d.ts

@@ -0,0 +1,34 @@
+import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
+import { NavigationItemSafeTriangle } from '../../utils/navigation';
+export type DBNavigationItemDefaultProps = {
+    /**
+     * Alternative indicator for active navigation item (bold font). In contrast to the use of aria-current="page" on the contained anchor, this does not guarantee correct a11y.
+     */
+    active?: boolean;
+    /**
+     * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
+     */
+    disabled?: boolean;
+    /**
+     * React-specific property to pass in a slot for sub-navigation
+     */
+    subNavigation?: any;
+    /**
+     * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
+     */
+    subNavigationExpanded?: boolean;
+};
+export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & NavigationBackButtonProps & ShowIconProps & TextProps;
+export type DBNavigationItemDefaultState = {
+    handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
+    hasAreaPopup: boolean;
+    isSubNavigationExpanded: boolean;
+    subNavigationId: string;
+    /**
+     * Internal state property to show/hide sub-navigation button
+     */
+    hasSubNavigation?: boolean;
+    updateSubNavigationState: () => void;
+    navigationItemSafeTriangle?: NavigationItemSafeTriangle;
+};
+export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState;

package/dist/components/navigation-item/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation-item/navigation-item.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBNavigationItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "width" | "text" | "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBNavigationItemDefaultProps | keyof import("../../shared/model").NavigationBackButtonProps> & import("./model").DBNavigationItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").NavigationBackButtonProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLLIElement>>;
+export default DBNavigationItem;

package/dist/components/navigation-item/navigation-item.js

@@ -0,0 +1,68 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import DBButton from "../button/button";
+import { cls, getBooleanAsString, getHideProp, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { NavigationItemSafeTriangle } from "../../utils/navigation";
+import { DEFAULT_BACK } from "../../shared/constants";
+function DBNavigationItemFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
+    const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
+    const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
+    const [subNavigationId, setSubNavigationId] = useState(() => "sub-navigation-" + uuid());
+    const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    function handleClick(event) {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+        if (hasAreaPopup) {
+            setIsSubNavigationExpanded(true);
+        }
+    }
+    function handleBackClick(event) {
+        event.stopPropagation();
+        setIsSubNavigationExpanded(false);
+    }
+    function updateSubNavigationState() {
+        var _a;
+        if (initialized && document && subNavigationId) {
+            const subNavigationSlot = document === null || document === void 0 ? void 0 : document.getElementById(subNavigationId);
+            if (subNavigationSlot) {
+                if (((_a = subNavigationSlot.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    setHasAreaPopup(true);
+                    if (!navigationItemSafeTriangle) {
+                        setNavigationItemSafeTriangle(new NavigationItemSafeTriangle(_ref.current, subNavigationSlot));
+                    }
+                }
+                else {
+                    setHasSubNavigation(false);
+                }
+            }
+        }
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (props.subNavigationExpanded !== undefined) {
+            setIsSubNavigationExpanded(!!props.subNavigationExpanded);
+        }
+    }, [props.subNavigationExpanded]);
+    useEffect(() => {
+        updateSubNavigationState();
+    }, [initialized]);
+    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-active": props.active, "aria-disabled": getBooleanAsString(props.disabled) }),
+        !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
+        hasSubNavigation ? (React.createElement(React.Fragment, null,
+            React.createElement("button", { className: "db-navigation-item-expand-button", "aria-haspopup": hasAreaPopup, "aria-expanded": isSubNavigationExpanded, disabled: props.disabled, onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
+            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId },
+                hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
+                    React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_a = props.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null,
+                React.createElement(React.Fragment, null, props.subNavigation)))) : null));
+}
+const DBNavigationItem = forwardRef(DBNavigationItemFn);
+DBNavigationItem.defaultProps = {};
+export default DBNavigationItem;

package/dist/components/notification/index.d.ts

@@ -0,0 +1 @@
+export { default as DBNotification } from './notification';

package/dist/components/notification/index.js

@@ -0,0 +1 @@
+export { default as DBNotification } from './notification';

package/dist/components/notification/model.d.ts

@@ -0,0 +1,57 @@
+import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
+export type NotificationVariantType = (typeof NotificationVariantList)[number];
+export declare const NotificationLinkVariantList: readonly ["block", "inline"];
+export type NotificationLinkVariantType = (typeof NotificationLinkVariantList)[number];
+export declare const NotificationAriaLiveList: readonly ["assertive", "polite", "off"];
+export type NotificationAriaLiveType = (typeof NotificationAriaLiveList)[number];
+export type DBNotificationDefaultProps = {
+    /**
+     * The arialive attribute will lead to that the screenreader interrupts immediately
+     * and reads out the notification if set to "assertive", while it will wait for the
+     * user's idleness when set to "polite", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)
+     */
+    ariaLive?: NotificationAriaLiveType;
+    /**
+     * The closeable attribute shows/hides the close button on the top right.
+     */
+    closeable?: boolean;
+    /**
+     * The headline attribute changes the text of the bold headline.
+     */
+    headline?: string | any;
+    /**
+     * The slotImage can be set instead of an icon.
+     */
+    image?: any;
+    /**
+     * The slotLink can be set for non overlay-notifications
+     */
+    link?: any;
+    /**
+     * The linkVariant will be used if slotLink is set.
+     */
+    linkVariant?: NotificationLinkVariantType;
+    /**
+     * Enables or disables the visibility of the headline.
+     */
+    showHeadline?: boolean;
+    /**
+     * The timestamp attribute can be set for overlay notifications
+     */
+    timestamp?: string;
+    /**
+     * Enables or disables the visibility of the timestamp.
+     */
+    showTimestamp?: boolean;
+    /**
+     * The variant attribute changes the styling of the notification.
+     * The docked notifications are used e.g. between header and main content to show a global alert.
+     * The standalone notifications are used  e.g. inside a form to show an alert for a specific field.
+     * The overlay notifications are used for absolute and floating notifications like snackbars etc.
+     */
+    variant?: NotificationVariantType;
+};
+export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
+export type DBNotificationDefaultState = {};
+export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState;

package/dist/components/notification/model.js

@@ -0,0 +1,3 @@
+export const NotificationVariantList = ['docked', 'standalone', 'overlay'];
+export const NotificationLinkVariantList = ['block', 'inline'];
+export const NotificationAriaLiveList = ['assertive', 'polite', 'off'];

package/dist/components/notification/notification.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "text" | "icon" | "onClose" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBNotificationDefaultProps | "semantic" | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").CloseEventProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").PopoverProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLDivElement>>;
+export default DBNotification;

package/dist/components/notification/notification.js

@@ -0,0 +1,25 @@
+"use client";
+import * as React from "react";
+import { useRef, forwardRef } from "react";
+import DBButton from "../button/button";
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
+import { cls, getHideProp, stringPropVisible, filterPassingProps, getRootProps } from "../../utils";
+function DBNotificationFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    function handleClose(event) {
+        if (props.onClose) {
+            props.onClose();
+        }
+    }
+    return (React.createElement("article", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-link-variant": props.linkVariant }),
+        React.createElement(React.Fragment, null, props.image),
+        stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
+        React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
+        stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("span", null, props.timestamp)) : null,
+        React.createElement(React.Fragment, null, props.link),
+        props.closeable ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
+}
+const DBNotification = forwardRef(DBNotificationFn);
+DBNotification.defaultProps = {};
+export default DBNotification;

package/dist/components/page/index.d.ts

@@ -0,0 +1 @@
+export { default as DBPage } from './page';

package/dist/components/page/index.js

@@ -0,0 +1 @@
+export { default as DBPage } from './page';

package/dist/components/page/model.d.ts

@@ -0,0 +1,32 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export declare const PageVariantList: readonly ["auto", "fixed"];
+export type PageVariantType = (typeof PageVariantList)[number];
+export declare const PageDocumentOverflowList: readonly ["hidden", "auto"];
+export type PageDocumentOverflowType = (typeof PageDocumentOverflowList)[number];
+export type DBPageDefaultProps = {
+    /**
+     * The documentOverflow sets the overflow:hidden/auto to the root document
+     */
+    documentOverflow?: PageDocumentOverflowType;
+    /**
+     * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
+     */
+    fadeIn?: boolean;
+    /**
+     * The slot can be used for React to set a footer.
+     */
+    footer?: any;
+    /**
+     * The slot can be used for React to set a header.
+     */
+    header?: any;
+    /**
+     * The variant=fixed uses flex-box to make header and footer static
+     */
+    variant?: PageVariantType;
+};
+export type DBPageProps = DBPageDefaultProps & GlobalProps;
+export type DBPageDefaultState = {
+    fontsLoaded?: boolean;
+};
+export type DBPageState = DBPageDefaultState & GlobalState;

package/dist/components/page/model.js

@@ -0,0 +1,2 @@
+export const PageVariantList = ['auto', 'fixed'];
+export const PageDocumentOverflowList = ['hidden', 'auto'];

package/dist/components/page/page.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBPage: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../..").GlobalProps | keyof import("./model").DBPageDefaultProps> & import("./model").DBPageDefaultProps & import("../..").GlobalProps & React.RefAttributes<HTMLDivElement>>;
+export default DBPage;

package/dist/components/page/page.js

@@ -0,0 +1,47 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString, filterPassingProps, getRootProps } from "../../utils";
+function DBPageFn(props, component) {
+    const _ref = component || useRef(component);
+    const [fontsLoaded, setFontsLoaded] = useState(() => false);
+    const hasInitialized = useRef(false);
+    if (!hasInitialized.current) {
+        if (typeof window !== "undefined" &&
+            document &&
+            (props.documentOverflow === "hidden" ||
+                (props.variant === "fixed" && props.documentOverflow !== "auto"))) {
+            // We need to set this to `html` element that the flex-box solution works
+            // See https://stackoverflow.com/a/43710216 - Approach 1 - flexbox
+            document.documentElement.classList.add("db-page-document");
+        }
+        hasInitialized.current = true;
+    }
+    useEffect(() => {
+        setFontsLoaded(!props.fadeIn);
+        if (document && props.fadeIn) {
+            document.fonts.ready.then(() => {
+                setFontsLoaded(true);
+            });
+        }
+        else {
+            setFontsLoaded(true);
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (typeof window !== "undefined" &&
+                document.documentElement.classList.contains("db-page-document")) {
+                // remove document styles set by this
+                document.documentElement.classList.remove("db-page-document");
+            }
+        };
+    }, []);
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-page", props.className), "data-variant": props.variant, "data-fade-in": props.fadeIn, "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
+        React.createElement(React.Fragment, null, props.header),
+        React.createElement("main", { className: "db-main" }, props.children),
+        React.createElement(React.Fragment, null, props.footer)));
+}
+const DBPage = forwardRef(DBPageFn);
+DBPage.defaultProps = {};
+export default DBPage;

package/dist/components/popover/index.d.ts

@@ -0,0 +1 @@
+export { default as DBPopover } from './popover';

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { default as DBPopover } from './popover';