@oicl/openbridge-webcomponents-svelte 2.0.0-next.15 → 2.0.0-next.151

package/dist/components/tabbed-card/ObcTabbedCard.svelte

@@ -2,22 +2,22 @@
   <script lang="ts">
     
       import '@oicl/openbridge-webcomponents/dist/components/tabbed-card/tabbed-card.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       
       import type { Snippet } from 'svelte';
 
       export interface Props {
      class?: string;
      style?: string;
-      /** Number of tabs to display (1–5). Determines how many tab-title/content slot pairs are rendered. */
-nTabs?: number;
-      /** Index of the currently selected tab (zero-based). Updates automatically on user interaction. */
-selectedTab?: number;
-      /** If true, only the default slot is rendered for tab content, and the consumer is responsible for toggling content based on the selected tab.
-When false (default), each tab uses its own named slots for title and content. */
-hasDefaultSlotOnly?: boolean;
-      /** If true, each tab will have an icon slot. */
-hasTabIcons?: boolean
+     /** Number of tabs to display (1–5). Determines how many tab-title/content slot pairs are rendered. */
+     nTabs?: number;
+     /** Index of the currently selected tab (zero-based). Updates automatically on user interaction. */
+     selectedTab?: number;
+     /** If true, only the default slot is rendered for tab content, and the consumer is responsible for toggling content based on the selected tab. When false (default), each tab uses its own named slots for title and content. */
+     hasDefaultSlotOnly?: boolean;
+     /** If true, each tab will have an icon slot. */
+     hasTabIcons?: boolean
    }
       export interface Events {
     onTabChange?: (event: CustomEvent<{tab:number}>) => void
@@ -47,99 +47,69 @@ hasTabIcons?: boolean
     use:setProperties={props}
     class={className}
     style={style}
-    ontab-change={onTabChange} >
+    use:forwardEvents={{'tab-change': onTabChange}} >
       
       {#if children}
         {@render children()}
       {/if}
 
       {#if tabTitle0}
-        <div slot="tab-title-0">
-          {@render tabTitle0()}
-        </div>
+        <NamedSlot name="tab-title-0" content={tabTitle0} />
       {/if}
 
       {#if tabContent0}
-        <div slot="tab-content-0">
-          {@render tabContent0()}
-        </div>
+        <NamedSlot name="tab-content-0" content={tabContent0} />
       {/if}
 
       {#if tabTitle1}
-        <div slot="tab-title-1">
-          {@render tabTitle1()}
-        </div>
+        <NamedSlot name="tab-title-1" content={tabTitle1} />
       {/if}
 
       {#if tabContent1}
-        <div slot="tab-content-1">
-          {@render tabContent1()}
-        </div>
+        <NamedSlot name="tab-content-1" content={tabContent1} />
       {/if}
 
       {#if tabTitle2}
-        <div slot="tab-title-2">
-          {@render tabTitle2()}
-        </div>
+        <NamedSlot name="tab-title-2" content={tabTitle2} />
       {/if}
 
       {#if tabContent2}
-        <div slot="tab-content-2">
-          {@render tabContent2()}
-        </div>
+        <NamedSlot name="tab-content-2" content={tabContent2} />
       {/if}
 
       {#if tabTitle3}
-        <div slot="tab-title-3">
-          {@render tabTitle3()}
-        </div>
+        <NamedSlot name="tab-title-3" content={tabTitle3} />
       {/if}
 
       {#if tabContent3}
-        <div slot="tab-content-3">
-          {@render tabContent3()}
-        </div>
+        <NamedSlot name="tab-content-3" content={tabContent3} />
       {/if}
 
       {#if tabTitle4}
-        <div slot="tab-title-4">
-          {@render tabTitle4()}
-        </div>
+        <NamedSlot name="tab-title-4" content={tabTitle4} />
       {/if}
 
       {#if tabContent4}
-        <div slot="tab-content-4">
-          {@render tabContent4()}
-        </div>
+        <NamedSlot name="tab-content-4" content={tabContent4} />
       {/if}
 
       {#if tabIcon0}
-        <div slot="tab-icon-0">
-          {@render tabIcon0()}
-        </div>
+        <NamedSlot name="tab-icon-0" content={tabIcon0} />
       {/if}
 
       {#if tabIcon1}
-        <div slot="tab-icon-1">
-          {@render tabIcon1()}
-        </div>
+        <NamedSlot name="tab-icon-1" content={tabIcon1} />
       {/if}
 
       {#if tabIcon2}
-        <div slot="tab-icon-2">
-          {@render tabIcon2()}
-        </div>
+        <NamedSlot name="tab-icon-2" content={tabIcon2} />
       {/if}
 
       {#if tabIcon3}
-        <div slot="tab-icon-3">
-          {@render tabIcon3()}
-        </div>
+        <NamedSlot name="tab-icon-3" content={tabIcon3} />
       {/if}
 
       {#if tabIcon4}
-        <div slot="tab-icon-4">
-          {@render tabIcon4()}
-        </div>
+        <NamedSlot name="tab-icon-4" content={tabIcon4} />
       {/if}
     </obc-tabbed-card>

package/dist/components/tabbed-card/ObcTabbedCard.svelte.d.ts

@@ -7,8 +7,7 @@ export interface Props {
     nTabs?: number;
     /** Index of the currently selected tab (zero-based). Updates automatically on user interaction. */
     selectedTab?: number;
-    /** If true, only the default slot is rendered for tab content, and the consumer is responsible for toggling content based on the selected tab.
-When false (default), each tab uses its own named slots for title and content. */
+    /** If true, only the default slot is rendered for tab content, and the consumer is responsible for toggling content based on the selected tab. When false (default), each tab uses its own named slots for title and content. */
     hasDefaultSlotOnly?: boolean;
     /** If true, each tab will have an icon slot. */
     hasTabIcons?: boolean;

package/dist/components/table/ObcTable.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableRow, ObcTableColumn, ObcTableCellData} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+    export type {ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableExpandToggleEvent, ObcTableRow, ObcTableColumn, ObcTableCellData} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
       import '@oicl/openbridge-webcomponents/dist/components/table/table.js';
-      import { setProperties } from "../../util.js";
-      import type {ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableRow, ObcTableColumn, ObcTableCellData} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+      import { setProperties, forwardEvents } from "../../util.js";
+      import type {ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableExpandToggleEvent, ObcTableRow, ObcTableColumn, ObcTableCellData} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -12,12 +12,16 @@
      data?: ObcTableRow[];
      columns?: ObcTableColumn<ObcTableCellData, ObcTableRow>[];
      rowDivider?: boolean;
+     /** Available when `showHeader==true`. */
      narrowHeader?: boolean;
      showHeader?: boolean;
      striped?: boolean;
      selectable?: boolean;
+     /** Available when `selectable==true`. */
      selectedRowIds?: string[] | undefined;
+     /** Available when `selectable==true && selectedRowIds==undefined`. */
      defaultSelectedRowIds?: string[] | undefined;
+     /** Available when `selectable==true && showHeader==true`. */
      selectAllAriaLabel?: string
    }
       export interface Events {
@@ -25,23 +29,20 @@
     onCellButtonClick?: (event: ObcTableCellClickEvent) => void;
     onCellCheckboxChange?: (event: ObcTableCellCheckboxChangeEvent) => void;
     onCellTagClick?: (event: ObcTableCellTagClickEvent) => void;
-    onSelectionChange?: (event: ObcTableSelectionChangeEvent) => void
+    onSelectionChange?: (event: ObcTableSelectionChangeEvent) => void;
+    onExpandToggle?: (event: ObcTableExpandToggleEvent) => void
   }
       export interface Slots {
   children?: Snippet
 }
-      const {onRowClick, onCellButtonClick, onCellCheckboxChange, onCellTagClick, onSelectionChange, class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const {onRowClick, onCellButtonClick, onCellCheckboxChange, onCellTagClick, onSelectionChange, onExpandToggle, class: className, style, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-table
     use:setProperties={props}
     class={className}
     style={style}
-    onrow-click={onRowClick}
-   oncell-button-click={onCellButtonClick}
-   oncell-checkbox-change={onCellCheckboxChange}
-   oncell-tag-click={onCellTagClick}
-   onselection-change={onSelectionChange} >
+    use:forwardEvents={{'row-click': onRowClick, 'cell-button-click': onCellButtonClick, 'cell-checkbox-change': onCellCheckboxChange, 'cell-tag-click': onCellTagClick, 'selection-change': onSelectionChange, 'expand-toggle': onExpandToggle}} >
       
     {#if children}
       {@render children()}

package/dist/components/table/ObcTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import '@oicl/openbridge-webcomponents/dist/components/table/table.js';
-import type { ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableRow, ObcTableColumn, ObcTableCellData } from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+import type { ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableExpandToggleEvent, ObcTableRow, ObcTableColumn, ObcTableCellData } from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
@@ -7,12 +7,16 @@ export interface Props {
     data?: ObcTableRow[];
     columns?: ObcTableColumn<ObcTableCellData, ObcTableRow>[];
     rowDivider?: boolean;
+    /** Available when `showHeader==true`. */
     narrowHeader?: boolean;
     showHeader?: boolean;
     striped?: boolean;
     selectable?: boolean;
+    /** Available when `selectable==true`. */
     selectedRowIds?: string[] | undefined;
+    /** Available when `selectable==true && selectedRowIds==undefined`. */
     defaultSelectedRowIds?: string[] | undefined;
+    /** Available when `selectable==true && showHeader==true`. */
     selectAllAriaLabel?: string;
 }
 export interface Events {
@@ -21,6 +25,7 @@ export interface Events {
     onCellCheckboxChange?: (event: ObcTableCellCheckboxChangeEvent) => void;
     onCellTagClick?: (event: ObcTableCellTagClickEvent) => void;
     onSelectionChange?: (event: ObcTableSelectionChangeEvent) => void;
+    onExpandToggle?: (event: ObcTableExpandToggleEvent) => void;
 }
 export interface Slots {
     children?: Snippet;
@@ -32,6 +37,7 @@ declare const ObcTable: import("svelte").Component<$$ComponentProps, {
     ObcTableCellCheckboxChangeEvent: typeof ObcTableCellCheckboxChangeEvent;
     ObcTableCellTagClickEvent: typeof ObcTableCellTagClickEvent;
     ObcTableSelectionChangeEvent: typeof ObcTableSelectionChangeEvent;
+    ObcTableExpandToggleEvent: typeof ObcTableExpandToggleEvent;
     ObcTableRow: typeof ObcTableRow;
     ObcTableColumn: typeof ObcTableColumn;
     ObcTableCellData: typeof ObcTableCellData;

package/dist/components/table-header-item/ObcTableHeaderItem.svelte

@@ -3,6 +3,7 @@
     export type {ObcTableHeaderItemType, ObcTableHeaderItemSortDirection} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
       import '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
       import { setProperties } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {ObcTableHeaderItemType, ObcTableHeaderItemSortDirection} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
       import type { Snippet } from 'svelte';
 
@@ -12,6 +13,7 @@
      type?: ObcTableHeaderItemType;
      disabled?: boolean;
      hasLeadingIcon?: boolean;
+     /** Available when `sortable==true`. */
      sortDirection?: ObcTableHeaderItemSortDirection;
      showDivider?: boolean;
      checked?: boolean;
@@ -21,9 +23,10 @@
     
   }
       export interface Slots {
+  leadingIcon?: Snippet;
   children?: Snippet
 }
-      const { class: className, style, children, ...props} = $props<Props & Events & Slots>();
+      const { class: className, style, leadingIcon, children, ...props} = $props<Props & Events & Slots>();
 
     </script>
     <obc-table-header-item
@@ -32,7 +35,11 @@
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if leadingIcon}
+        <NamedSlot name="leading-icon" content={leadingIcon} />
+      {/if}
+
+      {#if children}
+        {@render children()}
+      {/if}
     </obc-table-header-item>

package/dist/components/table-header-item/ObcTableHeaderItem.svelte.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     type?: ObcTableHeaderItemType;
     disabled?: boolean;
     hasLeadingIcon?: boolean;
+    /** Available when `sortable==true`. */
     sortDirection?: ObcTableHeaderItemSortDirection;
     showDivider?: boolean;
     checked?: boolean;
@@ -15,6 +16,7 @@ export interface Props {
 export interface Events {
 }
 export interface Slots {
+    leadingIcon?: Snippet;
     children?: Snippet;
 }
 type $$ComponentProps = Props & Events & Slots;

package/dist/components/tag/ObcTag.svelte

@@ -1,9 +1,9 @@
 
   <script lang="ts">
-    export type {TagColor} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+    export type {TagColor, TagSize} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
       import '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
       import { setProperties } from "../../util.js";
-      import type {TagColor} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+      import type {TagColor, TagSize} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
       import type { Snippet } from 'svelte';
 
       export interface Props {
@@ -11,6 +11,7 @@
      style?: string;
      label?: string;
      color?: TagColor;
+     size?: TagSize;
      hasIcon?: boolean
    }
       export interface Events {
@@ -28,7 +29,7 @@
     style={style}
      >
       
-    {#if children}
-      {@render children()}
-    {/if}
+      {#if children}
+        {@render children()}
+      {/if}
     </obc-tag>

package/dist/components/tag/ObcTag.svelte.d.ts

@@ -1,11 +1,12 @@
 import '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
-import type { TagColor } from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+import type { TagColor, TagSize } from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
 import type { Snippet } from 'svelte';
 export interface Props {
     class?: string;
     style?: string;
     label?: string;
     color?: TagColor;
+    size?: TagSize;
     hasIcon?: boolean;
 }
 export interface Events {
@@ -16,6 +17,7 @@ export interface Slots {
 type $$ComponentProps = Props & Events & Slots;
 declare const ObcTag: import("svelte").Component<$$ComponentProps, {
     TagColor: typeof TagColor;
+    TagSize: typeof TagSize;
 }, "">;
 type ObcTag = ReturnType<typeof ObcTag>;
 export default ObcTag;

package/dist/components/text-input-field/ObcTextInputField.svelte

@@ -2,7 +2,8 @@
   <script lang="ts">
     export type {HTMLInputTypeAttribute, ObcTextInputFieldTextAlign, ObcTextInputFieldSize, ObcTextInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
-      import { setProperties } from "../../util.js";
+      import { setProperties, forwardEvents } from "../../util.js";
+      import NamedSlot from "../../NamedSlot.svelte";
       import type {HTMLInputTypeAttribute, ObcTextInputFieldTextAlign, ObcTextInputFieldSize, ObcTextInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
       import type { Snippet } from 'svelte';
 
@@ -16,35 +17,37 @@
      disabled?: boolean;
      readonly?: boolean;
      error?: boolean;
+     /** Available when `error==true`. */
      errorText?: string;
-      /** If true, the input field will not update its value on focus */
-rejectUpdatesOnFocus?: boolean;
-      /** If true, the value will only be initially set, and not updated on change */
-rejectUpdates?: boolean;
-      /** If true, the input field will not update its value if the value is the same as the previous value
-This is useful to avoid React re-rendering to reset the value. */
-rejectDuplicateUpdates?: boolean;
-      /** Name attribute for form integration */
-name?: string;
-      /** Maximum number of characters allowed */
-maxlength?: number | undefined;
-      /** Minimum number of characters required */
-minlength?: number | undefined;
+     /** If true, the input field will not update its value on focus */
+     rejectUpdatesOnFocus?: boolean;
+     /** If true, the value will only be initially set, and not updated on change */
+     rejectUpdates?: boolean;
+     /** If true, the input field will not update its value if the value is the same as the previous value This is useful to avoid React re-rendering to reset the value. */
+     rejectDuplicateUpdates?: boolean;
+     /** Name attribute for form integration */
+     name?: string;
+     /** Maximum number of characters allowed */
+     maxlength?: number | undefined;
+     /** Minimum number of characters required */
+     minlength?: number | undefined;
      size?: ObcTextInputFieldSize;
      hasLeadingIcon?: boolean;
-      /** Shows a clear button when the input has a value */
-hasClearButton?: boolean;
+     /** Shows a clear button when the input has a value */
+     hasClearButton?: boolean;
      helperText?: string;
      label?: string;
      required?: boolean;
+     /** Available when `label!=''`. */
      hasLabelIcon?: boolean;
+     /** Available when `label!=''`. */
      labelPlacement?: ObcTextInputFieldPlacement;
      hasHelperIcon?: boolean;
      helperPlacement?: ObcTextInputFieldPlacement
    }
       export interface Events {
     onInput?: (event: CustomEvent<unknown>) => void;
-    onChange?: (event: CustomEvent<unknown>) => void;
+    onChange?: (event: CustomEvent<{value: string}>) => void;
     onClear?: (event: CustomEvent<unknown>) => void;
     onBlur?: (event: CustomEvent<unknown>) => void
   }
@@ -60,26 +63,17 @@ hasClearButton?: boolean;
     use:setProperties={props}
     class={className}
     style={style}
-    oninput={onInput}
-   onchange={onChange}
-   onclear={onClear}
-   onblur={onBlur} >
+    use:forwardEvents={{'input': onInput, 'change': onChange, 'clear': onClear, 'blur': onBlur}} >
       
       {#if leadingIcon}
-        <div slot="leading-icon">
-          {@render leadingIcon()}
-        </div>
+        <NamedSlot name="leading-icon" content={leadingIcon} />
       {/if}
 
       {#if labelIcon}
-        <div slot="label-icon">
-          {@render labelIcon()}
-        </div>
+        <NamedSlot name="label-icon" content={labelIcon} />
       {/if}
 
       {#if helperIcon}
-        <div slot="helper-icon">
-          {@render helperIcon()}
-        </div>
+        <NamedSlot name="helper-icon" content={helperIcon} />
       {/if}
     </obc-text-input-field>

package/dist/components/text-input-field/ObcTextInputField.svelte.d.ts

@@ -11,13 +11,13 @@ export interface Props {
     disabled?: boolean;
     readonly?: boolean;
     error?: boolean;
+    /** Available when `error==true`. */
     errorText?: string;
     /** If true, the input field will not update its value on focus */
     rejectUpdatesOnFocus?: boolean;
     /** If true, the value will only be initially set, and not updated on change */
     rejectUpdates?: boolean;
-    /** If true, the input field will not update its value if the value is the same as the previous value
-This is useful to avoid React re-rendering to reset the value. */
+    /** If true, the input field will not update its value if the value is the same as the previous value This is useful to avoid React re-rendering to reset the value. */
     rejectDuplicateUpdates?: boolean;
     /** Name attribute for form integration */
     name?: string;
@@ -32,14 +32,18 @@ This is useful to avoid React re-rendering to reset the value. */
     helperText?: string;
     label?: string;
     required?: boolean;
+    /** Available when `label!=''`. */
     hasLabelIcon?: boolean;
+    /** Available when `label!=''`. */
     labelPlacement?: ObcTextInputFieldPlacement;
     hasHelperIcon?: boolean;
     helperPlacement?: ObcTextInputFieldPlacement;
 }
 export interface Events {
     onInput?: (event: CustomEvent<unknown>) => void;
-    onChange?: (event: CustomEvent<unknown>) => void;
+    onChange?: (event: CustomEvent<{
+        value: string;
+    }>) => void;
     onClear?: (event: CustomEvent<unknown>) => void;
     onBlur?: (event: CustomEvent<unknown>) => void;
 }