@db-ux/wc-core-components 3.0.0 → 3.0.2

package/dist/esm/{navigation--rT2utIA.js.map → navigation--UdC9CzO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"navigation--rT2utIA.js","sources":["src/utils/navigation.ts"],"sourcesContent":["import { handleDataOutside } from './floating-components';\nexport type TriangleData = {\n  itemRect: DOMRect;\n  parentElementWidth: number;\n  subNavigationHeight: number;\n  padding: number;\n  outsideVX: 'left' | 'right' | undefined;\n  outsideVY: 'top' | 'bottom' | undefined;\n};\nexport const isEventTargetNavigationItem = (event: unknown): boolean => {\n  const {\n    target\n  } = event as {\n    target: HTMLElement;\n  };\n  return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));\n};\nexport class NavigationItemSafeTriangle {\n  private readonly element: HTMLElement | null;\n  private readonly subNavigation: HTMLElement | null;\n  private readonly parentSubNavigation: HTMLElement | null = null;\n  private triangleData?: TriangleData;\n  private initialized: boolean = false;\n  private mouseX: number = 0;\n  private mouseY: number = 0;\n  constructor(element: HTMLElement | null, subNavigation: HTMLElement | null) {\n    this.element = element;\n    this.subNavigation = subNavigation;\n    if (!this.element || !this.subNavigation) {\n      return;\n    }\n    this.parentSubNavigation = this.element?.closest('.db-sub-navigation');\n\n    /*\n     * only initiate if:\n     * 1. item is not at root navigation level\n     * 2. item is not in the mobile navigation / within db-drawer\n     */\n    if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {\n      this.init();\n    }\n  }\n  private init() {\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n\n    // the triangle has the width of the sub-navigation, current nav-item can be wider.\n    // so the width of the triangle must be adapted to a possibly wider nav-item.\n    this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);\n    this.initialized = true;\n  }\n  public enableFollow() {\n    if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    const dataOutsidePair = handleDataOutside(this.subNavigation);\n    const itemRect = this.element.getBoundingClientRect();\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n    this.triangleData = {\n      itemRect,\n      parentElementWidth,\n      subNavigationHeight: this.subNavigation.getBoundingClientRect().height,\n      padding: (parentElementWidth - itemRect.width) / 2,\n      outsideVX: dataOutsidePair.vx,\n      outsideVY: dataOutsidePair.vy\n    };\n  }\n  public disableFollow() {\n    this.triangleData = undefined;\n  }\n  private getTriangleTipX(): number {\n    if (!this.triangleData) return 0;\n    if (this.triangleData.outsideVX === 'right') {\n      // vertical flipped triangle needs an inverted x pos\n      return this.triangleData.itemRect.width - this.mouseX;\n    }\n\n    // triangle stops shrinking from 75% x pos\n    return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);\n  }\n  private getTriangleTipY(): number {\n    if (!this.triangleData) return 0;\n\n    // padding must be added to the y pos of the tip so that the y pos matches the cursor\n    const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;\n    if (this.triangleData.outsideVY === 'bottom') {\n      // add offset to tip y pos to match corrected sub-navigation y pos\n      return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);\n    }\n    return mouseYLimited;\n  }\n  private hasMouseEnteredSubNavigation(): boolean {\n    if (!this.triangleData) {\n      return false;\n    }\n    const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';\n    if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {\n      return true;\n    }\n    if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {\n      return true;\n    }\n    return false;\n  }\n  private getTriangleCoordinates(variant: 'safe-triangle' | 'fill-gap'): undefined | {\n    lb: string;\n    lt: string;\n    rt: string;\n    rb: string;\n  } {\n    if (!this.triangleData) {\n      return;\n    }\n    if (variant === 'fill-gap') {\n      const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;\n      const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;\n      return {\n        lb: `${xStart} ${itemHeight}`,\n        lt: `${xStart} 0`,\n        rt: '100% 0',\n        rb: `100% ${itemHeight}`\n      };\n    }\n    const tipX = this.getTriangleTipX();\n    const tipY = this.getTriangleTipY();\n    const lb = `${tipX}px ${tipY}px`;\n    const lt = `${tipX}px ${tipY}px`;\n    return {\n      lb,\n      lt,\n      rt: '100% 0',\n      rb: '100% 100%'\n    };\n  }\n  public followByMouseEvent(event: MouseEvent) {\n    if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    this.mouseX = event.clientX - this.triangleData.itemRect.left;\n    this.mouseY = event.clientY - this.triangleData.itemRect.top;\n    const isOverSubNavigation = this.hasMouseEnteredSubNavigation();\n    const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');\n    if (!coordinates) {\n      return;\n    }\n    this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);\n    if (isOverSubNavigation) {\n      this.triangleData = undefined;\n    }\n  }\n}\nexport default {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation--UdC9CzO.js","sources":["src/utils/navigation.ts"],"sourcesContent":["import { handleDataOutside } from './floating-components';\nexport type TriangleData = {\n  itemRect: DOMRect;\n  parentElementWidth: number;\n  subNavigationHeight: number;\n  padding: number;\n  outsideVX: 'left' | 'right' | undefined;\n  outsideVY: 'top' | 'bottom' | undefined;\n};\nexport const isEventTargetNavigationItem = (event: unknown): boolean => {\n  const {\n    target\n  } = event as {\n    target: HTMLElement;\n  };\n  return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));\n};\nexport class NavigationItemSafeTriangle {\n  private readonly element: HTMLElement | null;\n  private readonly subNavigation: HTMLElement | null;\n  private readonly parentSubNavigation: HTMLElement | null = null;\n  private triangleData?: TriangleData;\n  private initialized: boolean = false;\n  private mouseX: number = 0;\n  private mouseY: number = 0;\n  constructor(element: HTMLElement | null, subNavigation: HTMLElement | null) {\n    this.element = element;\n    this.subNavigation = subNavigation;\n    if (!this.element || !this.subNavigation) {\n      return;\n    }\n    this.parentSubNavigation = this.element?.closest('.db-sub-navigation');\n\n    /*\n     * only initiate if:\n     * 1. item is not at root navigation level\n     * 2. item is not in the mobile navigation / within db-drawer\n     */\n    if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {\n      this.init();\n    }\n  }\n  private init() {\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n\n    // the triangle has the width of the sub-navigation, current nav-item can be wider.\n    // so the width of the triangle must be adapted to a possibly wider nav-item.\n    this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);\n    this.initialized = true;\n  }\n  public enableFollow() {\n    if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    const dataOutsidePair = handleDataOutside(this.subNavigation);\n    const itemRect = this.element.getBoundingClientRect();\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n    this.triangleData = {\n      itemRect,\n      parentElementWidth,\n      subNavigationHeight: this.subNavigation.getBoundingClientRect().height,\n      padding: (parentElementWidth - itemRect.width) / 2,\n      outsideVX: dataOutsidePair.vx,\n      outsideVY: dataOutsidePair.vy\n    };\n  }\n  public disableFollow() {\n    this.triangleData = undefined;\n  }\n  private getTriangleTipX(): number {\n    if (!this.triangleData) return 0;\n    if (this.triangleData.outsideVX === 'right') {\n      // vertical flipped triangle needs an inverted x pos\n      return this.triangleData.itemRect.width - this.mouseX;\n    }\n\n    // triangle stops shrinking from 75% x pos\n    return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);\n  }\n  private getTriangleTipY(): number {\n    if (!this.triangleData) return 0;\n\n    // padding must be added to the y pos of the tip so that the y pos matches the cursor\n    const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;\n    if (this.triangleData.outsideVY === 'bottom') {\n      // add offset to tip y pos to match corrected sub-navigation y pos\n      return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);\n    }\n    return mouseYLimited;\n  }\n  private hasMouseEnteredSubNavigation(): boolean {\n    if (!this.triangleData) {\n      return false;\n    }\n    const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';\n    if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {\n      return true;\n    }\n    if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {\n      return true;\n    }\n    return false;\n  }\n  private getTriangleCoordinates(variant: 'safe-triangle' | 'fill-gap'): undefined | {\n    lb: string;\n    lt: string;\n    rt: string;\n    rb: string;\n  } {\n    if (!this.triangleData) {\n      return;\n    }\n    if (variant === 'fill-gap') {\n      const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;\n      const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;\n      return {\n        lb: `${xStart} ${itemHeight}`,\n        lt: `${xStart} 0`,\n        rt: '100% 0',\n        rb: `100% ${itemHeight}`\n      };\n    }\n    const tipX = this.getTriangleTipX();\n    const tipY = this.getTriangleTipY();\n    const lb = `${tipX}px ${tipY}px`;\n    const lt = `${tipX}px ${tipY}px`;\n    return {\n      lb,\n      lt,\n      rt: '100% 0',\n      rb: '100% 100%'\n    };\n  }\n  public followByMouseEvent(event: MouseEvent) {\n    if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    this.mouseX = event.clientX - this.triangleData.itemRect.left;\n    this.mouseY = event.clientY - this.triangleData.itemRect.top;\n    const isOverSubNavigation = this.hasMouseEnteredSubNavigation();\n    const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');\n    if (!coordinates) {\n      return;\n    }\n    this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);\n    if (isOverSubNavigation) {\n      this.triangleData = undefined;\n    }\n  }\n}\nexport default {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle\n}"],"names":[],"mappings":"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"}

package/dist/types/components/checkbox/checkbox.d.ts

@@ -35,7 +35,7 @@ export declare class DBCheckbox {
     _validMessageId: any;
     _invalidMessageId: any;
     _invalidMessage: any;
-    _descByIds: string;
+    _descByIds: any;
     _voiceOverFallback: string;
     hasValidState(): boolean;
     handleValidation(): void;

package/dist/types/components/custom-select/custom-select.d.ts

@@ -17,6 +17,7 @@ export declare class DBCustomSelect {
     showMessage: DBCustomSelectProps["showMessage"];
     ariaDescribedBy: DBCustomSelectProps["ariaDescribedBy"];
     showNoResults: DBCustomSelectProps["showNoResults"];
+    showLoading: DBCustomSelectProps["showLoading"];
     multiple: DBCustomSelectProps["multiple"];
     showSelectAll: DBCustomSelectProps["showSelectAll"];
     showSearch: DBCustomSelectProps["showSearch"];
@@ -53,10 +54,9 @@ export declare class DBCustomSelect {
     dropdownWidth: DBCustomSelectProps["dropdownWidth"];
     searchLabel: DBCustomSelectProps["searchLabel"];
     searchPlaceholder: DBCustomSelectProps["searchPlaceholder"];
-    showLoading: DBCustomSelectProps["showLoading"];
     ariaListLabel: DBCustomSelectProps["ariaListLabel"];
-    noResultsText: DBCustomSelectProps["noResultsText"];
     loadingText: DBCustomSelectProps["loadingText"];
+    noResultsText: DBCustomSelectProps["noResultsText"];
     mobileCloseButtonText: DBCustomSelectProps["mobileCloseButtonText"];
     showClearSelection: DBCustomSelectProps["showClearSelection"];
     clearSelectionText: DBCustomSelectProps["clearSelectionText"];
@@ -73,7 +73,8 @@ export declare class DBCustomSelect {
     _placeholderId: any;
     _infoTextId: any;
     _validity: string;
-    _descByIds: string;
+    _userInteraction: boolean;
+    _descByIds: any;
     _selectedLabels: string;
     _selectedLabelsId: any;
     _voiceOverFallback: string;

package/dist/types/components/custom-select/model.d.ts

@@ -190,6 +190,7 @@ export type DBCustomSelectDefaultState = {
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
     _searchValue?: string;
+    _userInteraction?: boolean;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;

package/dist/types/components/header/header.d.ts

@@ -9,14 +9,13 @@ import { EventEmitter } from "../../stencil-public-runtime";
  */
 export declare class DBHeader {
     private _ref;
-    id: DBHeaderProps["id"];
     forceMobile: DBHeaderProps["forceMobile"];
     drawerOpen: DBHeaderProps["drawerOpen"];
     toggle: EventEmitter<Parameters<Required<DBHeaderProps>["onToggle"]>[number]> | void;
     className: DBHeaderProps["className"];
+    id: DBHeaderProps["id"];
     width: DBHeaderProps["width"];
     burgerMenuLabel: DBHeaderProps["burgerMenuLabel"];
-    _id: string;
     initialized: boolean;
     forcedToMobile: boolean;
     handleToggle(event?: any): void;

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

@@ -60,8 +60,8 @@ export declare class DBInput {
     _invalidMessageId: any;
     _invalidMessage: any;
     _dataListId: any;
-    _descByIds: string;
-    _value: string;
+    _descByIds: any;
+    _value: any;
     _voiceOverFallback: string;
     hasValidState(): boolean;
     handleValidation(): void;

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

@@ -42,7 +42,7 @@ export declare class DBSelect {
     _invalidMessageId: any;
     _invalidMessage: any;
     _placeholderId: string;
-    _descByIds: string;
+    _descByIds: any;
     _value: string;
     initialized: boolean;
     _voiceOverFallback: string;

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

@@ -49,7 +49,7 @@ export declare class DBTextarea {
     _validMessageId: any;
     _invalidMessageId: any;
     _invalidMessage: any;
-    _descByIds: string;
+    _descByIds: any;
     _value: string;
     _voiceOverFallback: string;
     hasValidState(): boolean;

package/dist/types/index.d.ts

@@ -1,40 +1,79 @@
 export * from './components/accordion';
 export * from './components/accordion-item';
+export * from './components/accordion-item/model';
+export * from './components/accordion/model';
 export * from './components/badge';
+export * from './components/badge/model';
 export * from './components/brand';
+export * from './components/brand/model';
 export * from './components/button';
+export * from './components/button/model';
 export * from './components/card';
+export * from './components/card/model';
 export * from './components/checkbox';
+export * from './components/checkbox/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
+export * from './components/custom-select-dropdown/model';
 export * from './components/custom-select-form-field';
+export * from './components/custom-select-form-field/model';
 export * from './components/custom-select-list';
 export * from './components/custom-select-list-item';
+export * from './components/custom-select-list-item/model';
+export * from './components/custom-select-list/model';
+export * from './components/custom-select/model';
 export * from './components/divider';
+export * from './components/divider/model';
 export * from './components/drawer';
+export * from './components/drawer/model';
 export * from './components/header';
+export * from './components/header/model';
 export * from './components/icon';
+export * from './components/icon/model';
 export * from './components/infotext';
+export * from './components/infotext/model';
 export * from './components/input';
+export * from './components/input/model';
 export * from './components/link';
+export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
+export * from './components/navigation-item/model';
+export * from './components/navigation/model';
 export * from './components/notification';
+export * from './components/notification/model';
 export * from './components/page';
+export * from './components/page/model';
 export * from './components/popover';
+export * from './components/popover/model';
 export * from './components/radio';
+export * from './components/radio/model';
 export * from './components/section';
+export * from './components/section/model';
 export * from './components/select';
+export * from './components/select/model';
 export * from './components/stack';
+export * from './components/stack/model';
 export * from './components/switch';
+export * from './components/switch/model';
 export * from './components/tab-item';
+export * from './components/tab-item/model';
 export * from './components/tab-list';
+export * from './components/tab-list/model';
 export * from './components/tab-panel';
+export * from './components/tab-panel/model';
 export * from './components/tabs';
+export * from './components/tabs/model';
 export * from './components/tag';
+export * from './components/tag/model';
 export * from './components/textarea';
+export * from './components/textarea/model';
 export * from './components/tooltip';
+export * from './components/tooltip/model';
 export * from './shared/constants';
 export * from './shared/model';
+export * from './utils/document-click-listener';
+export * from './utils/document-scroll-listener';
+export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';

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

@@ -1045,6 +1045,11 @@
           "description": "Dropdown - enable no options infotext",
           "values": []
         },
+        {
+          "name": "show-loading",
+          "description": "Dropdown - enable loading infotext and spinner",
+          "values": []
+        },
         {
           "name": "multiple",
           "description": "Enables CustomSelect",
@@ -1220,24 +1225,19 @@
           "description": "Search placeholder",
           "values": []
         },
-        {
-          "name": "show-loading",
-          "description": "Dropdown - enable loading infotext and spinner",
-          "values": []
-        },
         {
           "name": "aria-list-label",
           "description": "Overwrite the default aria-label (props.label) for the custom-select-list",
           "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": []
         },
         {
-          "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": []
         },
         {
@@ -1408,11 +1408,6 @@
       "name": "db-header",
       "description": "\n---\n\n\n### **Events:**\n - **toggle**\n\n### **Slots:**\n - **children** - default slot\n- **metaNavigation** - Slot to pass in a meta navigation.\n- Desktop: Above the regular header\n- Mobile: Inside the drawer\n- **secondaryAction** - Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.\n- Desktop: Shown separated by divider at the end of the header\n- Mobile: Shown inside the drawer at the bottom.\n- **brand** - Slot to pass in the DBBrand component\n- **primaryAction** - Slot to pass one or more elements like DBButton (e.g. search) as primary action.\n- Desktop: Shown next to the main-navigation\n- Mobile: Shown next to the brand",
       "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": "force-mobile",
           "description": "Forces the header to use mobile layout for desktop as well.\nYou should only use this setting if you really can't provide a smaller navigation.\nOverwrite size of the drawer with '--db-drawer-max-width: xxx'",
@@ -1428,6 +1423,11 @@
           "description": "React specific for adding className to the component.",
           "values": []
         },
+        {
+          "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": "width",
           "description": "Set max width for the component",

package/dist/web-types.json

@@ -951,7 +951,7 @@
               { "name": "_validMessageId" },
               { "name": "_invalidMessageId" },
               { "name": "_invalidMessage" },
-              { "name": "_descByIds", "type": "string" },
+              { "name": "_descByIds" },
               { "name": "_voiceOverFallback", "type": "string" }
             ],
             "events": [
@@ -1673,8 +1673,8 @@
               { "name": "_invalidMessageId" },
               { "name": "_invalidMessage" },
               { "name": "_dataListId" },
-              { "name": "_descByIds", "type": "string" },
-              { "name": "_value", "type": "string" },
+              { "name": "_descByIds" },
+              { "name": "_value" },
               { "name": "_voiceOverFallback", "type": "string" }
             ],
             "events": [
@@ -1992,6 +1992,11 @@
               "description": "Dropdown - enable no options infotext",
               "value": { "type": "boolean" }
             },
+            {
+              "name": "show-loading",
+              "description": "Dropdown - enable loading infotext and spinner",
+              "value": { "type": "boolean" }
+            },
             {
               "name": "multiple",
               "description": "Enables CustomSelect",
@@ -2154,24 +2159,19 @@
               "description": "Search placeholder",
               "value": { "type": "string" }
             },
-            {
-              "name": "show-loading",
-              "description": "Dropdown - enable loading infotext and spinner",
-              "value": { "type": "boolean" }
-            },
             {
               "name": "aria-list-label",
               "description": "Overwrite the default aria-label (props.label) for the custom-select-list",
               "value": { "type": "string" }
             },
             {
-              "name": "no-results-text",
-              "description": "Dropdown - hint if there are no options",
+              "name": "loading-text",
+              "description": "Dropdown - hint if data has to be loaded",
               "value": { "type": "string" }
             },
             {
-              "name": "loading-text",
-              "description": "Dropdown - hint if data has to be loaded",
+              "name": "no-results-text",
+              "description": "Dropdown - hint if there are no options",
               "value": { "type": "string" }
             },
             {
@@ -2251,6 +2251,11 @@
                 "description": "Dropdown - enable no options infotext",
                 "type": "boolean"
               },
+              {
+                "name": "showLoading",
+                "description": "Dropdown - enable loading infotext and spinner",
+                "type": "boolean"
+              },
               {
                 "name": "multiple",
                 "description": "Enables CustomSelect",
@@ -2411,24 +2416,19 @@
                 "description": "Search placeholder",
                 "type": "string"
               },
-              {
-                "name": "showLoading",
-                "description": "Dropdown - enable loading infotext and spinner",
-                "type": "boolean"
-              },
               {
                 "name": "ariaListLabel",
                 "description": "Overwrite the default aria-label (props.label) for the custom-select-list",
                 "type": "string"
               },
               {
-                "name": "noResultsText",
-                "description": "Dropdown - hint if there are no options",
+                "name": "loadingText",
+                "description": "Dropdown - hint if data has to be loaded",
                 "type": "string"
               },
               {
-                "name": "loadingText",
-                "description": "Dropdown - hint if data has to be loaded",
+                "name": "noResultsText",
+                "description": "Dropdown - hint if there are no options",
                 "type": "string"
               },
               {
@@ -2467,7 +2467,8 @@
               { "name": "_placeholderId" },
               { "name": "_infoTextId" },
               { "name": "_validity", "type": "string" },
-              { "name": "_descByIds", "type": "string" },
+              { "name": "_userInteraction", "type": "boolean" },
+              { "name": "_descByIds" },
               { "name": "_selectedLabels", "type": "string" },
               { "name": "_selectedLabelsId" },
               { "name": "_voiceOverFallback", "type": "string" },
@@ -2775,11 +2776,6 @@
           "description": "\n---\n\n\n### **Events:**\n - **toggle**\n\n### **Slots:**\n - **children** - default slot\n- **metaNavigation** - Slot to pass in a meta navigation.\n- Desktop: Above the regular header\n- Mobile: Inside the drawer\n- **secondaryAction** - Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.\n- Desktop: Shown separated by divider at the end of the header\n- Mobile: Shown inside the drawer at the bottom.\n- **brand** - Slot to pass in the DBBrand component\n- **primaryAction** - Slot to pass one or more elements like DBButton (e.g. search) as primary action.\n- Desktop: Shown next to the main-navigation\n- Mobile: Shown next to the brand",
           "doc-url": "https://design-system.deutschebahn.com/core-web/review/main/components/header/properties",
           "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.",
-              "value": { "type": "string" }
-            },
             {
               "name": "force-mobile",
               "description": "Forces the header to use mobile layout for desktop as well.\nYou should only use this setting if you really can't provide a smaller navigation.\nOverwrite size of the drawer with '--db-drawer-max-width: xxx'",
@@ -2795,6 +2791,11 @@
               "description": "React specific for adding className to the component.",
               "value": { "type": "string" }
             },
+            {
+              "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.",
+              "value": { "type": "string" }
+            },
             {
               "name": "width",
               "description": "Set max width for the component",
@@ -2835,11 +2836,6 @@
           ],
           "js": {
             "properties": [
-              {
-                "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.",
-                "type": "string"
-              },
               {
                 "name": "forceMobile",
                 "description": "Forces the header to use mobile layout for desktop as well.\nYou should only use this setting if you really can't provide a smaller navigation.\nOverwrite size of the drawer with '--db-drawer-max-width: xxx'",
@@ -2855,6 +2851,11 @@
                 "description": "React specific for adding className to the component.",
                 "type": "string"
               },
+              {
+                "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.",
+                "type": "string"
+              },
               {
                 "name": "width",
                 "description": "Set max width for the component",
@@ -2865,7 +2866,6 @@
                 "description": "This attribute sets the label for the burger menu button for mobile headers.",
                 "type": "string"
               },
-              { "name": "_id" },
               { "name": "initialized", "type": "boolean" },
               { "name": "forcedToMobile", "type": "boolean" }
             ],
@@ -4184,7 +4184,7 @@
               { "name": "_invalidMessageId" },
               { "name": "_invalidMessage" },
               { "name": "_placeholderId", "type": "string" },
-              { "name": "_descByIds", "type": "string" },
+              { "name": "_descByIds" },
               { "name": "_value", "type": "string" },
               { "name": "initialized", "type": "boolean" },
               { "name": "_voiceOverFallback", "type": "string" }
@@ -5284,7 +5284,7 @@
               { "name": "_validMessageId" },
               { "name": "_invalidMessageId" },
               { "name": "_invalidMessage" },
-              { "name": "_descByIds", "type": "string" },
+              { "name": "_descByIds" },
               { "name": "_value", "type": "string" },
               { "name": "_voiceOverFallback", "type": "string" }
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/wc-core-components",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Stencil components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -29,11 +29,11 @@
     "start": "stencil build --watch"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@custom-elements-manifest/analyzer": "0.10.4",
     "@stencil/core": "4.36.1",
-    "cem-plugin-expanded-types": "^1.4.0",
-    "custom-element-jet-brains-integration": "^1.7.0",
-    "custom-element-vs-code-integration": "^1.5.0",
+    "cem-plugin-expanded-types": "1.4.0",
+    "custom-element-jet-brains-integration": "1.7.0",
+    "custom-element-vs-code-integration": "1.5.0",
     "workbox-build": "7.3.0"
   },
   "publishConfig": {
@@ -42,7 +42,7 @@
   },
   "web-types": "./dist/web-types.json",
   "dependencies": {
-    "@db-ux/core-components": "3.0.0",
-    "@db-ux/core-foundations": "3.0.0"
+    "@db-ux/core-components": "3.0.2",
+    "@db-ux/core-foundations": "3.0.2"
   }
 }

package/dist/db-ux/p-07594af1.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s}from"./p-CNzNv7KB.js";import{l as h,g as a,h as e,f as d,k as c}from"./p-DC9V_oNU.js";import{h as n,d as l,s as o,b as f,u as r,j as u,c as b}from"./p-YECpAE3G.js";const v=class{constructor(s){i(this,s);this.change=t(this,"change");this.blur=t(this,"blur");this.focus=t(this,"focus");this.initialized=false;this._id=undefined;this._messageId=undefined;this._validMessageId=undefined;this._invalidMessageId=undefined;this._invalidMessage=undefined;this._descByIds="";this._voiceOverFallback=""}hasValidState(){var i;return!!((i=this.validMessage)!==null&&i!==void 0?i:this.validation==="valid")}handleValidation(){var i,t,s,a;if(!((i=this._ref)===null||i===void 0?void 0:i.validity.valid)||this.validation==="invalid"){this._descByIds=this._invalidMessageId;this._invalidMessage=this.invalidMessage||((t=this._ref)===null||t===void 0?void 0:t.validationMessage)||h;if(n()){this._voiceOverFallback=this._invalidMessage;l((()=>this._voiceOverFallback=""),1e3)}}else if(this.hasValidState()&&((s=this._ref)===null||s===void 0?void 0:s.validity.valid)&&this.required){this._descByIds=this._validMessageId;if(n()){this._voiceOverFallback=(a=this.validMessage)!==null&&a!==void 0?a:c;l((()=>this._voiceOverFallback=""),1e3)}}else if(o(this.message,this.showMessage)){this._descByIds=this._messageId}else{this._descByIds=""}}handleChange(i){if(this.change){this.change.emit(i)}this.handleValidation()}handleBlur(i){if(this.blur){this.blur.emit(i)}}handleFocus(i){if(this.focus){this.focus.emit(i)}}enableAttributePassing(i,t){const s=i===null||i===void 0?void 0:i.closest(t);if(i&&s){const t=s.attributes;for(let h=0;h<t.length;h++){const a=t.item(h);if(a&&(a.name.startsWith("data-")||a.name.startsWith("aria-"))){i.setAttribute(a.name,a.value);s.removeAttribute(a.name)}if(a&&a.name==="class"){const t=a.value.includes("hydrated");const h=a.value.replace("hydrated","").trim();const e=i.getAttribute("class");i.setAttribute(a.name,`${e?`${e} `:""}${h}`);if(t){s.setAttribute("class","hydrated")}else{s.removeAttribute(a.name)}}}}}watch0Fn(){var i;this._invalidMessage=this.invalidMessage||((i=this._ref)===null||i===void 0?void 0:i.validationMessage)||h}watch0(){this.watch0Fn()}watch1Fn(){if(this._id){const i=this._id+d;this._messageId=i;this._validMessageId=this._id+a;this._invalidMessageId=this._id+e;if(o(this.message,this.showMessage)){this._descByIds=i}}}watch1(){this.watch1Fn()}watch2Fn(){if(this._ref){if(this.indeterminate!==undefined){this._ref.indeterminate=!!f(this.indeterminate)}}}watch2(){this.watch2Fn()}watch3Fn(){if(this.initialized&&this._ref){if(this.checked!=undefined){this._ref.checked=!!f(this.checked)}this.initialized=false}}watch3(){this.watch3Fn()}componentDidLoad(){var i;this.enableAttributePassing(this._ref,"db-checkbox");this.initialized=true;const t=(i=this.id)!==null&&i!==void 0?i:`checkbox-${r()}`;this._id=t;this._messageId=t+d;this._validMessageId=t+a;this._invalidMessageId=t+e;this._invalidMessage=this.invalidMessage||h;this.watch0Fn();this.watch1Fn();this.watch2Fn();this.watch3Fn()}render(){var i;return s("div",{key:"d09d5b8c0b6192a373fd8e6600fdb8e533cc3ab5",class:b("db-checkbox",this.className),"data-size":this.size,"data-hide-asterisk":u(this.showRequiredAsterisk),"data-hide-label":u(this.showLabel)},s("label",{key:"c95d8c43a6949a51cce6b9bcafe1fa4cf802531a",htmlFor:this._id},s("input",{key:"3894ac295370c9a4bd7d5d7bc84b913fe195f8f4",type:"checkbox","aria-invalid":this.validation==="invalid","data-custom-validity":this.validation,ref:i=>{this._ref=i},id:this._id,name:this.name,checked:f(this.checked,"checked"),disabled:f(this.disabled,"disabled"),value:this.value,required:f(this.required,"required"),onChange:i=>this.handleChange(i),onBlur:i=>this.handleBlur(i),onFocus:i=>this.handleFocus(i),"aria-describedby":(i=this.ariaDescribedBy)!==null&&i!==void 0?i:this._descByIds}),this.label?this.label:s("slot",null)),o(this.message,this.showMessage)?s("db-infotext",{size:"small",icon:this.messageIcon,id:this._messageId},this.message):null,this.hasValidState()?s("db-infotext",{size:"small",semantic:"successful",id:this._validMessageId},this.validMessage||c):null,s("db-infotext",{key:"d7eda556b0b13f40183f06471b7fa559ecf0a26c",size:"small",semantic:"critical",id:this._invalidMessageId},this._invalidMessage),s("span",{key:"dd9238f5200aa849b78c64fb46313559dc8d08a4","data-visually-hidden":"true",role:"status"},this._voiceOverFallback))}static get watchers(){return{_ref:["watch0","watch2","watch3"],invalidMessage:["watch0"],_id:["watch1"],initialized:["watch2","watch3"],indeterminate:["watch2"],checked:["watch3"]}}};export{v as db_checkbox};
-//# sourceMappingURL=p-07594af1.entry.js.map

package/dist/db-ux/p-07594af1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DBCheckbox","constructor","hostRef","this","initialized","_id","undefined","_messageId","_validMessageId","_invalidMessageId","_invalidMessage","_descByIds","_voiceOverFallback","hasValidState","_a","validMessage","validation","handleValidation","_ref","validity","valid","invalidMessage","_b","validationMessage","DEFAULT_INVALID_MESSAGE","hasVoiceOver","delay","_c","required","_d","DEFAULT_VALID_MESSAGE","stringPropVisible","message","showMessage","handleChange","event","change","emit","handleBlur","blur","handleFocus","focus","enableAttributePassing","element","customElementSelector","parent","closest","attributes","i","length","attr","item","name","startsWith","setAttribute","value","removeAttribute","isWebComponent","includes","replace","trim","currentClass","getAttribute","watch0Fn","watch0","watch1Fn","messageId","DEFAULT_MESSAGE_ID_SUFFIX","DEFAULT_VALID_MESSAGE_ID_SUFFIX","DEFAULT_INVALID_MESSAGE_ID_SUFFIX","watch1","watch2Fn","indeterminate","getBoolean","watch2","watch3Fn","checked","watch3","componentDidLoad","mId","id","uuid","render","h","key","class","cls","className","size","getHideProp","showRequiredAsterisk","showLabel","htmlFor","type","ref","el","disabled","onChange","onBlur","onFocus","ariaDescribedBy","label","icon","messageIcon","semantic","role"],"sources":["src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  DEFAULT_INVALID_MESSAGE,\n  DEFAULT_INVALID_MESSAGE_ID_SUFFIX,\n  DEFAULT_MESSAGE_ID_SUFFIX,\n  DEFAULT_VALID_MESSAGE,\n  DEFAULT_VALID_MESSAGE_ID_SUFFIX,\n} from \"../../shared/constants\";\nimport { ChangeEvent, InteractionEvent } from \"../../shared/model\";\nimport {\n  cls,\n  delay,\n  getBoolean,\n  getHideProp,\n  hasVoiceOver,\n  stringPropVisible,\n  uuid,\n} from \"../../utils\";\nimport {\n  handleFrameworkEventAngular,\n  handleFrameworkEventVue,\n} from \"../../utils/form-components\";\nimport { DBInfotext } from \"../infotext/infotext\";\nimport { DBCheckboxProps, DBCheckboxState } from \"./model\";\n\nimport {\n  Component,\n  h,\n  Fragment,\n  Watch,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n\n/**\n * @slot children - This is a default/unnamed slot\n\n */\n @Component({\n  tag: \"db-checkbox\",\n})\nexport class DBCheckbox {\n  private _ref!: HTMLInputElement | any;\n  @Prop() id: DBCheckboxProps[\"id\"];\n  @Prop() invalidMessage: DBCheckboxProps[\"invalidMessage\"];\n  @Prop() message: DBCheckboxProps[\"message\"];\n  @Prop() showMessage: DBCheckboxProps[\"showMessage\"];\n  @Prop() indeterminate: DBCheckboxProps[\"indeterminate\"];\n  @Prop() checked: DBCheckboxProps[\"checked\"];\n  @Prop() validMessage: DBCheckboxProps[\"validMessage\"];\n  @Prop() validation: DBCheckboxProps[\"validation\"];\n  @Prop() required: DBCheckboxProps[\"required\"];\n  @Event() change: EventEmitter<\n    Parameters<Required<DBCheckboxProps>[\"onChange\"]>[number]\n  > | void;\n  @Event() blur: EventEmitter<\n    Parameters<Required<DBCheckboxProps>[\"onBlur\"]>[number]\n  > | void;\n  @Event() focus: EventEmitter<\n    Parameters<Required<DBCheckboxProps>[\"onFocus\"]>[number]\n  > | void;\n  @Prop({attribute: \"classname\"}) className: DBCheckboxProps[\"className\"];\n  @Prop() size: DBCheckboxProps[\"size\"];\n  @Prop() showRequiredAsterisk: DBCheckboxProps[\"showRequiredAsterisk\"];\n  @Prop() showLabel: DBCheckboxProps[\"showLabel\"];\n  @Prop() name: DBCheckboxProps[\"name\"];\n  @Prop() disabled: DBCheckboxProps[\"disabled\"];\n  @Prop() value: DBCheckboxProps[\"value\"];\n  @Prop() ariaDescribedBy: DBCheckboxProps[\"ariaDescribedBy\"];\n  @Prop() label: DBCheckboxProps[\"label\"];\n  @Prop() messageIcon: DBCheckboxProps[\"messageIcon\"];\n  @State() initialized = false;\n  @State() _id = undefined;\n  @State() _messageId = undefined;\n  @State() _validMessageId = undefined;\n  @State() _invalidMessageId = undefined;\n  @State() _invalidMessage = undefined;\n  @State() _descByIds = \"\";\n  @State() _voiceOverFallback = \"\";\n\n  hasValidState() {\n    return !!(this.validMessage ?? this.validation === \"valid\");\n  }\n  handleValidation() {\n    /* For a11y reasons we need to map the correct message with the checkbox */\n    if (!this._ref?.validity.valid || this.validation === \"invalid\") {\n      this._descByIds = this._invalidMessageId;\n      this._invalidMessage =\n        this.invalidMessage ||\n        this._ref?.validationMessage ||\n        DEFAULT_INVALID_MESSAGE;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this._invalidMessage;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (\n      this.hasValidState() &&\n      this._ref?.validity.valid &&\n      this.required\n    ) {\n      this._descByIds = this._validMessageId;\n      if (hasVoiceOver()) {\n        this._voiceOverFallback = this.validMessage ?? DEFAULT_VALID_MESSAGE;\n        delay(() => (this._voiceOverFallback = \"\"), 1000);\n      }\n    } else if (stringPropVisible(this.message, this.showMessage)) {\n      this._descByIds = this._messageId;\n    } else {\n      this._descByIds = \"\";\n    }\n  }\n  handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (this.change) {\n      this.change.emit(event);\n    }\n    this.handleValidation();\n  }\n  handleBlur(event: InteractionEvent<HTMLInputElement> | any) {\n    if (this.blur) {\n      this.blur.emit(event);\n    }\n  }\n  handleFocus(event: InteractionEvent<HTMLInputElement> | any) {\n    if (this.focus) {\n      this.focus.emit(event);\n    }\n  }\n\n  /**\n   * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n   * @param element  the ref for the component\n   * @param customElementSelector  the custom element like `my-component`\n   */\n  private enableAttributePassing(\n    element: HTMLInputElement | null,\n    customElementSelector: string\n  ) {\n    const parent = element?.closest(customElementSelector);\n    if (element && parent) {\n      const attributes = parent.attributes;\n      for (let i = 0; i < attributes.length; i++) {\n        const attr = attributes.item(i);\n        if (\n          attr &&\n          (attr.name.startsWith(\"data-\") || attr.name.startsWith(\"aria-\"))\n        ) {\n          element.setAttribute(attr.name, attr.value);\n          parent.removeAttribute(attr.name);\n        }\n        if (attr && attr.name === \"class\") {\n          const isWebComponent = attr.value.includes(\"hydrated\");\n          const value = attr.value.replace(\"hydrated\", \"\").trim();\n          const currentClass = element.getAttribute(\"class\");\n          element.setAttribute(\n            attr.name,\n            `${currentClass ? `${currentClass} ` : \"\"}${value}`\n          );\n          if (isWebComponent) {\n            // Stencil is using this class for lazy loading component\n            parent.setAttribute(\"class\", \"hydrated\");\n          } else {\n            parent.removeAttribute(attr.name);\n          }\n        }\n      }\n    }\n  }\n\n  watch0Fn() {\n    this._invalidMessage =\n      this.invalidMessage ||\n      this._ref?.validationMessage ||\n      DEFAULT_INVALID_MESSAGE;\n  }\n\n  @Watch(\"_ref\")\n  @Watch(\"invalidMessage\")\n  watch0() {\n    this.watch0Fn();\n  }\n\n  watch1Fn() {\n    if (this._id) {\n      const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;\n      this._messageId = messageId;\n      this._validMessageId = this._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n      this._invalidMessageId = this._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n      if (stringPropVisible(this.message, this.showMessage)) {\n        this._descByIds = messageId;\n      }\n    }\n  }\n\n  @Watch(\"_id\")\n  watch1() {\n    this.watch1Fn();\n  }\n\n  watch2Fn() {\n    if (this._ref) {\n      if (this.indeterminate !== undefined) {\n        // When indeterminate is set, the value of the checked prop only impacts the form submitted values.\n        // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)\n        this._ref.indeterminate = !!getBoolean(this.indeterminate);\n      }\n    }\n  }\n\n  @Watch(\"initialized\")\n  @Watch(\"_ref\")\n  @Watch(\"indeterminate\")\n  watch2() {\n    this.watch2Fn();\n  }\n\n  watch3Fn() {\n    if (this.initialized && this._ref) {\n      // in angular this must be set via native element\n      if (this.checked != undefined) {\n        this._ref.checked = !!getBoolean(this.checked);\n      }\n      this.initialized = false;\n    }\n  }\n\n  @Watch(\"initialized\")\n  @Watch(\"_ref\")\n  @Watch(\"checked\")\n  watch3() {\n    this.watch3Fn();\n  }\n\n  componentDidLoad() {\n    this.enableAttributePassing(this._ref, \"db-checkbox\");\n    this.initialized = true;\n    const mId = this.id ?? `checkbox-${uuid()}`;\n    this._id = mId;\n    this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;\n    this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;\n    this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;\n    this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;\n    this.watch0Fn();\n    this.watch1Fn();\n    this.watch2Fn();\n    this.watch3Fn();\n  }\n\n  render() {\n    return (\n      <div\n        class={cls(\"db-checkbox\", this.className)}\n        data-size={this.size}\n        data-hide-asterisk={getHideProp(this.showRequiredAsterisk)}\n        data-hide-label={getHideProp(this.showLabel)}\n      >\n        <label htmlFor={this._id}>\n          <input\n            type=\"checkbox\"\n            aria-invalid={this.validation === \"invalid\"}\n            data-custom-validity={this.validation}\n            ref={(el: any) => {\n              this._ref = el;\n            }}\n            id={this._id}\n            name={this.name}\n            checked={getBoolean(this.checked, \"checked\")}\n            disabled={getBoolean(this.disabled, \"disabled\")}\n            value={this.value}\n            required={getBoolean(this.required, \"required\")}\n            onChange={(event) => this.handleChange(event)}\n            onBlur={(event) => this.handleBlur(event)}\n            onFocus={(event) => this.handleFocus(event)}\n            aria-describedby={this.ariaDescribedBy ?? this._descByIds}\n          />\n          {this.label ? this.label : <slot></slot>}\n        </label>\n        {stringPropVisible(this.message, this.showMessage) ? (\n          <db-infotext\n            size=\"small\"\n            icon={this.messageIcon}\n            id={this._messageId}\n          >\n            {this.message}\n          </db-infotext>\n        ) : null}\n        {this.hasValidState() ? (\n          <db-infotext\n            size=\"small\"\n            semantic=\"successful\"\n            id={this._validMessageId}\n          >\n            {this.validMessage || DEFAULT_VALID_MESSAGE}\n          </db-infotext>\n        ) : null}\n        <db-infotext\n          size=\"small\"\n          semantic=\"critical\"\n          id={this._invalidMessageId}\n        >\n          {this._invalidMessage}\n        </db-infotext>\n        <span data-visually-hidden=\"true\" role=\"status\">\n          {this._voiceOverFallback}\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/db-ux/p-44142b26.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s}from"./p-CNzNv7KB.js";import{l as h,g as a,h as e,f as d,k as l,b as n,r,a as o}from"./p-DC9V_oNU.js";import{h as c,d as f,s as u,u as v,e as b,b as m,j as p,c as y}from"./p-YECpAE3G.js";const w=class{constructor(s){i(this,s);this.input=t(this,"input");this.change=t(this,"change");this.blur=t(this,"blur");this.focus=t(this,"focus");this._id=undefined;this._messageId=undefined;this._validMessageId=undefined;this._invalidMessageId=undefined;this._invalidMessage=undefined;this._descByIds="";this._value="";this._voiceOverFallback=""}hasValidState(){var i;return!!((i=this.validMessage)!==null&&i!==void 0?i:this.validation==="valid")}handleValidation(){var i,t,s,a;if(!((i=this._ref)===null||i===void 0?void 0:i.validity.valid)||this.validation==="invalid"){this._descByIds=this._invalidMessageId;this._invalidMessage=this.invalidMessage||((t=this._ref)===null||t===void 0?void 0:t.validationMessage)||h;if(c()){this._voiceOverFallback=this._invalidMessage;f((()=>this._voiceOverFallback=""),1e3)}}else if(this.hasValidState()&&((s=this._ref)===null||s===void 0?void 0:s.validity.valid)&&(this.required||this.minLength||this.maxLength)){this._descByIds=this._validMessageId;if(c()){this._voiceOverFallback=(a=this.validMessage)!==null&&a!==void 0?a:l;f((()=>this._voiceOverFallback=""),1e3)}}else if(u(this.message,this.showMessage)){this._descByIds=this._messageId}else{this._descByIds=""}}handleInput(i){if(this.input){this.input.emit(i)}this.handleValidation()}handleChange(i){if(this.change){this.change.emit(i)}this.handleValidation()}handleBlur(i){if(this.blur){this.blur.emit(i)}}handleFocus(i){if(this.focus){this.focus.emit(i)}}enableAttributePassing(i,t){const s=i===null||i===void 0?void 0:i.closest(t);if(i&&s){const t=s.attributes;for(let h=0;h<t.length;h++){const a=t.item(h);if(a&&(a.name.startsWith("data-")||a.name.startsWith("aria-"))){i.setAttribute(a.name,a.value);s.removeAttribute(a.name)}if(a&&a.name==="class"){const t=a.value.includes("hydrated");const h=a.value.replace("hydrated","").trim();const e=i.getAttribute("class");i.setAttribute(a.name,`${e?`${e} `:""}${h}`);if(t){s.setAttribute("class","hydrated")}else{s.removeAttribute(a.name)}}}}}watch0Fn(){var i;this._invalidMessage=this.invalidMessage||((i=this._ref)===null||i===void 0?void 0:i.validationMessage)||h}watch0(){this.watch0Fn()}watch1Fn(){if(this._id){const i=this._id+d;this._messageId=i;this._validMessageId=this._id+a;this._invalidMessageId=this._id+e;if(u(this.message,this.showMessage)){this._descByIds=i}}}watch1(){this.watch1Fn()}watch2Fn(){this._value=this.value}watch2(){this.watch2Fn()}componentDidLoad(){var i;this.enableAttributePassing(this._ref,"db-textarea");const t=(i=this.id)!==null&&i!==void 0?i:`textarea-${v()}`;this._id=t;this._messageId=t+d;this._validMessageId=t+a;this._invalidMessageId=t+e;this._invalidMessage=this.invalidMessage||h;this.watch0Fn();this.watch1Fn();this.watch2Fn()}render(){var i,t,h,a,e;return s("div",{key:"066914fb703dd14040eba1547f2a6d259c8f8bc2",class:y("db-textarea",this.className),"data-variant":this.variant,"data-hide-asterisk":p(this.showRequiredAsterisk),"data-hide-label":p(this.showLabel)},s("label",{key:"2037bfd141592ee0acfc2c23bb5f3c2c4abb13ce",htmlFor:this._id},(i=this.label)!==null&&i!==void 0?i:o),s("textarea",{key:"255a990e807905deff1ba3dd540cfb50c85506b2","aria-invalid":this.validation==="invalid","data-custom-validity":this.validation,"data-field-sizing":this.fieldSizing,ref:i=>{this._ref=i},id:this._id,"data-resize":this.resize,"data-hide-resizer":p((t=this.showResizer)!==null&&t!==void 0?t:true),disabled:m(this.disabled,"disabled"),required:m(this.required,"required"),readOnly:m(this.readOnly,"readOnly")||m(this.readonly,"readonly"),form:this.form,maxLength:b(this.maxLength,this.maxlength),minLength:b(this.minLength,this.minlength),name:this.name,wrap:this.wrap,spellcheck:this.spellCheck,autocomplete:this.autocomplete,onInput:i=>this.handleInput(i),onChange:i=>this.handleChange(i),onBlur:i=>this.handleBlur(i),onFocus:i=>this.handleFocus(i),value:(h=this.value)!==null&&h!==void 0?h:this._value,"aria-describedby":(a=this.ariaDescribedBy)!==null&&a!==void 0?a:this._descByIds,placeholder:(e=this.placeholder)!==null&&e!==void 0?e:n,rows:b(this.rows,r),cols:b(this.cols)}),u(this.message,this.showMessage)?s("db-infotext",{size:"small",icon:this.messageIcon,id:this._messageId},this.message):null,this.hasValidState()?s("db-infotext",{size:"small",semantic:"successful",id:this._validMessageId},this.validMessage||l):null,s("db-infotext",{key:"8f5e12098eb1a75aae4b11167e65723df250dfb6",size:"small",semantic:"critical",id:this._invalidMessageId},this._invalidMessage),s("span",{key:"5632e00e8f1362293bd0f208e1fe26d88fb0581c","data-visually-hidden":"true",role:"status"},this._voiceOverFallback))}static get watchers(){return{_ref:["watch0"],invalidMessage:["watch0"],_id:["watch1"],value:["watch2"]}}};export{w as db_textarea};
-//# sourceMappingURL=p-44142b26.entry.js.map