@db-ux/wc-core-components 4.3.2 → 4.4.0-loading-567cd0c

package/dist/types/components.d.ts

@@ -24,6 +24,7 @@ import { DBIconProps } from "./components/icon/model";
 import { DBInfotextProps } from "./components/infotext/model";
 import { DBInputProps } from "./components/input/model";
 import { DBLinkProps } from "./components/link/model";
+import { DBLoadingIndicatorProps } from "./components/loading-indicator/model";
 import { DBNavigationProps } from "./components/navigation/model";
 import { DBNavigationItemProps } from "./components/navigation-item/model";
 import { DBNotificationProps } from "./components/notification/model";
@@ -60,6 +61,7 @@ export { DBIconProps } from "./components/icon/model";
 export { DBInfotextProps } from "./components/infotext/model";
 export { DBInputProps } from "./components/input/model";
 export { DBLinkProps } from "./components/link/model";
+export { DBLoadingIndicatorProps } from "./components/loading-indicator/model";
 export { DBNavigationProps } from "./components/navigation/model";
 export { DBNavigationItemProps } from "./components/navigation-item/model";
 export { DBNotificationProps } from "./components/notification/model";
@@ -369,6 +371,36 @@ export namespace Components {
         "variant": DBLinkProps["variant"];
         "wrap": DBLinkProps["wrap"];
     }
+    interface DbLoadingIndicator {
+        /**
+          * @default true
+         */
+        "autoDisable": DBLoadingIndicatorProps["autoDisable"];
+        "className": DBLoadingIndicatorProps["className"];
+        "delay": DBLoadingIndicatorProps["delay"];
+        "id": DBLoadingIndicatorProps["id"];
+        /**
+          * @default true
+         */
+        "indeterminate": DBLoadingIndicatorProps["indeterminate"];
+        "label": DBLoadingIndicatorProps["label"];
+        "max": DBLoadingIndicatorProps["max"];
+        "overlay": DBLoadingIndicatorProps["overlay"];
+        "progressText": DBLoadingIndicatorProps["progressText"];
+        "role": DBLoadingIndicatorProps["role"];
+        "showLabel": DBLoadingIndicatorProps["showLabel"];
+        "showProgressText": DBLoadingIndicatorProps["showProgressText"];
+        /**
+          * @default "medium"
+         */
+        "size": DBLoadingIndicatorProps["size"];
+        "state": DBLoadingIndicatorProps["state"];
+        "value": DBLoadingIndicatorProps["value"];
+        /**
+          * @default "inline"
+         */
+        "variant": DBLoadingIndicatorProps["variant"];
+    }
     interface DbNavigation {
         "className": DBNavigationProps["className"];
         "id": DBNavigationProps["id"];
@@ -397,6 +429,7 @@ export namespace Components {
         "icon": DBNotificationProps["icon"];
         "id": DBNotificationProps["id"];
         "linkVariant": DBNotificationProps["linkVariant"];
+        "role": DBNotificationProps["role"];
         "semantic": DBNotificationProps["semantic"];
         "showHeadline": DBNotificationProps["showHeadline"];
         "showIcon": DBNotificationProps["showIcon"];
@@ -460,6 +493,7 @@ export namespace Components {
         "options": DBSelectProps["options"];
         "placeholder": DBSelectProps["placeholder"];
         "required": DBSelectProps["required"];
+        "showEmptyOption": DBSelectProps["showEmptyOption"];
         "showIcon": DBSelectProps["showIcon"];
         "showLabel": DBSelectProps["showLabel"];
         "showMessage": DBSelectProps["showMessage"];
@@ -639,6 +673,10 @@ export interface DbInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDbInputElement;
 }
+export interface DbLoadingIndicatorCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDbLoadingIndicatorElement;
+}
 export interface DbNavigationItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDbNavigationItemElement;
@@ -897,6 +935,23 @@ declare global {
         prototype: HTMLDbLinkElement;
         new (): HTMLDbLinkElement;
     };
+    interface HTMLDbLoadingIndicatorElementEventMap {
+        "timeout": any;
+    }
+    interface HTMLDbLoadingIndicatorElement extends Components.DbLoadingIndicator, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDbLoadingIndicatorElementEventMap>(type: K, listener: (this: HTMLDbLoadingIndicatorElement, ev: DbLoadingIndicatorCustomEvent<HTMLDbLoadingIndicatorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDbLoadingIndicatorElementEventMap>(type: K, listener: (this: HTMLDbLoadingIndicatorElement, ev: DbLoadingIndicatorCustomEvent<HTMLDbLoadingIndicatorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDbLoadingIndicatorElement: {
+        prototype: HTMLDbLoadingIndicatorElement;
+        new (): HTMLDbLoadingIndicatorElement;
+    };
     interface HTMLDbNavigationElement extends Components.DbNavigation, HTMLStencilElement {
     }
     var HTMLDbNavigationElement: {
@@ -1131,6 +1186,7 @@ declare global {
         "db-infotext": HTMLDbInfotextElement;
         "db-input": HTMLDbInputElement;
         "db-link": HTMLDbLinkElement;
+        "db-loading-indicator": HTMLDbLoadingIndicatorElement;
         "db-navigation": HTMLDbNavigationElement;
         "db-navigation-item": HTMLDbNavigationItemElement;
         "db-notification": HTMLDbNotificationElement;
@@ -1459,6 +1515,37 @@ declare namespace LocalJSX {
         "variant"?: DBLinkProps["variant"];
         "wrap"?: DBLinkProps["wrap"];
     }
+    interface DbLoadingIndicator {
+        /**
+          * @default true
+         */
+        "autoDisable"?: DBLoadingIndicatorProps["autoDisable"];
+        "className"?: DBLoadingIndicatorProps["className"];
+        "delay"?: DBLoadingIndicatorProps["delay"];
+        "id"?: DBLoadingIndicatorProps["id"];
+        /**
+          * @default true
+         */
+        "indeterminate"?: DBLoadingIndicatorProps["indeterminate"];
+        "label"?: DBLoadingIndicatorProps["label"];
+        "max"?: DBLoadingIndicatorProps["max"];
+        "onTimeout"?: (event: DbLoadingIndicatorCustomEvent<any>) => void;
+        "overlay"?: DBLoadingIndicatorProps["overlay"];
+        "progressText"?: DBLoadingIndicatorProps["progressText"];
+        "role"?: DBLoadingIndicatorProps["role"];
+        "showLabel"?: DBLoadingIndicatorProps["showLabel"];
+        "showProgressText"?: DBLoadingIndicatorProps["showProgressText"];
+        /**
+          * @default "medium"
+         */
+        "size"?: DBLoadingIndicatorProps["size"];
+        "state"?: DBLoadingIndicatorProps["state"];
+        "value"?: DBLoadingIndicatorProps["value"];
+        /**
+          * @default "inline"
+         */
+        "variant"?: DBLoadingIndicatorProps["variant"];
+    }
     interface DbNavigation {
         "className"?: DBNavigationProps["className"];
         "id"?: DBNavigationProps["id"];
@@ -1489,6 +1576,7 @@ declare namespace LocalJSX {
         "id"?: DBNotificationProps["id"];
         "linkVariant"?: DBNotificationProps["linkVariant"];
         "onClose"?: (event: DbNotificationCustomEvent<any>) => void;
+        "role"?: DBNotificationProps["role"];
         "semantic"?: DBNotificationProps["semantic"];
         "showHeadline"?: DBNotificationProps["showHeadline"];
         "showIcon"?: DBNotificationProps["showIcon"];
@@ -1561,6 +1649,7 @@ declare namespace LocalJSX {
         "options"?: DBSelectProps["options"];
         "placeholder"?: DBSelectProps["placeholder"];
         "required"?: DBSelectProps["required"];
+        "showEmptyOption"?: DBSelectProps["showEmptyOption"];
         "showIcon"?: DBSelectProps["showIcon"];
         "showLabel"?: DBSelectProps["showLabel"];
         "showMessage"?: DBSelectProps["showMessage"];
@@ -1734,6 +1823,7 @@ declare namespace LocalJSX {
         "db-infotext": DbInfotext;
         "db-input": DbInput;
         "db-link": DbLink;
+        "db-loading-indicator": DbLoadingIndicator;
         "db-navigation": DbNavigation;
         "db-navigation-item": DbNavigationItem;
         "db-notification": DbNotification;
@@ -1776,6 +1866,7 @@ declare module "@stencil/core" {
             "db-infotext": LocalJSX.DbInfotext & JSXBase.HTMLAttributes<HTMLDbInfotextElement>;
             "db-input": LocalJSX.DbInput & JSXBase.HTMLAttributes<HTMLDbInputElement>;
             "db-link": LocalJSX.DbLink & JSXBase.HTMLAttributes<HTMLDbLinkElement>;
+            "db-loading-indicator": LocalJSX.DbLoadingIndicator & JSXBase.HTMLAttributes<HTMLDbLoadingIndicatorElement>;
             "db-navigation": LocalJSX.DbNavigation & JSXBase.HTMLAttributes<HTMLDbNavigationElement>;
             "db-navigation-item": LocalJSX.DbNavigationItem & JSXBase.HTMLAttributes<HTMLDbNavigationItemElement>;
             "db-notification": LocalJSX.DbNotification & JSXBase.HTMLAttributes<HTMLDbNotificationElement>;

package/dist/types/index.d.ts

@@ -77,3 +77,5 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from "./components/loading-indicator";
+export * from "./components/loading-indicator/model";

package/dist/types/shared/model.d.ts

@@ -157,10 +157,6 @@ export type PopoverDelayType = (typeof PopoverDelayList)[number];
 export declare const PopoverWidthList: readonly ["auto", "fixed"];
 export type PopoverWidthType = (typeof PopoverWidthList)[number];
 export type PopoverProps = {
-    /**
-     * Add a delay before showing the tooltip
-     */
-    delay?: PopoverDelayType;
     /**
      * Disable animation
      */
@@ -169,6 +165,12 @@ export type PopoverProps = {
      * Use fixed with for default max-width
      */
     width?: PopoverWidthType;
+} & DelayProps;
+export type DelayProps = {
+    /**
+     * Add a delay before showing the component
+     */
+    delay?: PopoverDelayType;
 };
 export type NameProps = {
     /**
@@ -397,10 +399,6 @@ export type LinkProps = {
      * The relationship of the linked URL as space-separated link types.
      */
     rel?: string;
-    /**
-     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
-     */
-    role?: string;
     /**
      * How much of the referrer to send when following the link.
      * @deprecated use `referrerPolicy` instead
@@ -411,6 +409,12 @@ export type LinkProps = {
      */
     referrerPolicy?: LinkReferrerPolicyType;
 };
+export type RoleProps = {
+    /**
+     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     */
+    role?: string;
+};
 export type TextProps = {
     /**
      * Alternative for default slot/children.

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

@@ -58,3 +58,15 @@ export declare const getOptionKey: (option: {
     value?: string | number | string[] | undefined;
 }, prefix: string) => string;
 export declare const isKeyboardEvent: <T>(event?: ClickEvent<T> | GeneralKeyboardEvent<T>) => event is GeneralKeyboardEvent<T>;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+export declare const getNotificationRole: ({ semantic, role, ariaLive }: {
+    semantic?: string;
+    role?: string;
+    ariaLive?: string;
+}) => string | undefined;

package/dist/vscode.html-custom-data.json

@@ -932,6 +932,79 @@
       ],
       "references": []
     },
+    {
+      "name": "db-loading-indicator",
+      "description": "\n---\n\n\n### **Events:**\n - **timeout**\n\n### **Slots:**\n - **children** - default slot",
+      "attributes": [
+        {
+          "name": "id",
+          "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
+          "values": []
+        },
+        {
+          "name": "auto-disable",
+          "description": "Disable the parent component (e.g. a DBButton) when loading indicator is inside it",
+          "values": []
+        },
+        { "name": "overlay", "values": [] },
+        {
+          "name": "state",
+          "values": [
+            { "name": "inactive" },
+            { "name": "active" },
+            { "name": "successful" },
+            { "name": "critical" }
+          ]
+        },
+        { "name": "indeterminate", "values": [] },
+        {
+          "name": "delay",
+          "description": "Add a delay before showing the component",
+          "values": [{ "name": "none" }, { "name": "slow" }, { "name": "fast" }]
+        },
+        { "name": "value", "values": [] },
+        { "name": "max", "values": [] },
+        {
+          "name": "role",
+          "values": [
+            { "name": "alert" },
+            { "name": "status" },
+            { "name": "none" }
+          ]
+        },
+        {
+          "name": "classname",
+          "description": "React specific for adding className to the component.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size attribute changes the font-size and other related sizes of the component.",
+          "values": [{ "name": "small" }, { "name": "medium" }]
+        },
+        {
+          "name": "variant",
+          "values": [
+            { "name": "progress-bar" },
+            { "name": "onsite" },
+            { "name": "inline" }
+          ]
+        },
+        {
+          "name": "show-label",
+          "description": "Enables/disables the visibility of the label",
+          "values": []
+        },
+        { "name": "label", "values": [] },
+        { "name": "progress-text", "values": [] },
+        {
+          "name": "show-progress-text",
+          "description": "Enables/disables the visibility of the progressText",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "db-tooltip",
       "description": "\n---\n\n\n### **Slots:**\n - **children** - default slot",
@@ -968,13 +1041,13 @@
         },
         {
           "name": "delay",
-          "description": "Add a delay before showing the tooltip",
+          "description": "Add a delay before showing the component",
           "values": [{ "name": "none" }, { "name": "slow" }, { "name": "fast" }]
         },
         {
           "name": "width",
           "description": "Use fixed with for default max-width",
-          "values": [{ "name": "auto" }, { "name": "fixed" }]
+          "values": []
         },
         {
           "name": "show-arrow",
@@ -1283,13 +1356,13 @@
           "values": []
         },
         {
-          "name": "loading-text",
-          "description": "Dropdown - hint if data has to be loaded",
+          "name": "no-results-text",
+          "description": "Dropdown - hint if there are no options",
           "values": []
         },
         {
-          "name": "no-results-text",
-          "description": "Dropdown - hint if there are no options",
+          "name": "loading-text",
+          "description": "Dropdown - hint if data has to be loaded",
           "values": []
         },
         {
@@ -1759,15 +1832,6 @@
           "description": "React specific for adding className to the component.",
           "values": []
         },
-        {
-          "name": "aria-live",
-          "description": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
-          "values": [
-            { "name": "assertive" },
-            { "name": "polite" },
-            { "name": "off" }
-          ]
-        },
         {
           "name": "semantic",
           "description": "The semantic defines the default variants for most components.",
@@ -1780,6 +1844,20 @@
             { "name": "successful" }
           ]
         },
+        {
+          "name": "role",
+          "description": "Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).",
+          "values": []
+        },
+        {
+          "name": "aria-live",
+          "description": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
+          "values": [
+            { "name": "assertive" },
+            { "name": "polite" },
+            { "name": "off" }
+          ]
+        },
         {
           "name": "variant",
           "description": "The variant attribute changes the styling of the notification.\n- The docked notifications are used e.g. between header and main content to show a global alert.\n- The standalone notifications are used  e.g. inside a form to show an alert for a specific field.\n- The overlay notifications are used for absolute and floating notifications like snackbars etc.",
@@ -1930,13 +2008,13 @@
         },
         {
           "name": "delay",
-          "description": "Add a delay before showing the tooltip",
+          "description": "Add a delay before showing the component",
           "values": [{ "name": "none" }, { "name": "slow" }, { "name": "fast" }]
         },
         {
           "name": "width",
           "description": "Use fixed with for default max-width",
-          "values": [{ "name": "auto" }, { "name": "fixed" }]
+          "values": []
         }
       ],
       "references": []
@@ -2102,16 +2180,21 @@
           "description": "When the required attribute specified, the user will be required to fill the form element before submitting the form.\nThe form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).",
           "values": []
         },
-        {
-          "name": "classname",
-          "description": "React specific for adding className to the component.",
-          "values": []
-        },
         {
           "name": "variant",
           "description": "Change the variant of the label to float or hidden",
           "values": [{ "name": "above" }, { "name": "floating" }]
         },
+        {
+          "name": "show-empty-option",
+          "description": "Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\nBy default, it is shown for non-required selects and hidden for required selects.\nSet to `true` to always show or `false` to always hide the empty option.\n\nNote: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\nSetting `showEmptyOption` alone has no effect if neither of these conditions is met.",
+          "values": []
+        },
+        {
+          "name": "classname",
+          "description": "React specific for adding className to the component.",
+          "values": []
+        },
         {
           "name": "show-label",
           "description": "Enables/disables the visibility of the label",
@@ -2925,6 +3008,83 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "loading-indicator-button",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-delay",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-density",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-indeterminate",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-overlay",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-show-label",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-show-progress-text",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-size",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-state-determinate",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-state",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-timeout",
+      "description": "\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "loading-indicator-showcase",
+      "description": "\n---\n",
+      "attributes": [
+        {
+          "name": "is-patternhub",
+          "values": [{ "name": "PatternhubProps[\"isPatternhub\"]" }]
+        }
+      ],
+      "references": []
     }
   ]
 }