feat(sbb-autocomplete): favourites PoC

react-library/src/components/stencil-generated/index.ts

@@ -51,6 +51,7 @@ export const SbbNavigationMarker = /*@__PURE__*/createReactComponent<JSX.SbbNavi
 export const SbbNavigationSection = /*@__PURE__*/createReactComponent<JSX.SbbNavigationSection, HTMLSbbNavigationSectionElement>('sbb-navigation-section');
 export const SbbOptgroup = /*@__PURE__*/createReactComponent<JSX.SbbOptgroup, HTMLSbbOptgroupElement>('sbb-optgroup');
 export const SbbOption = /*@__PURE__*/createReactComponent<JSX.SbbOption, HTMLSbbOptionElement>('sbb-option');
+export const SbbOptionGroup = /*@__PURE__*/createReactComponent<JSX.SbbOptionGroup, HTMLSbbOptionGroupElement>('sbb-option-group');
 export const SbbOverlay = /*@__PURE__*/createReactComponent<JSX.SbbOverlay, HTMLSbbOverlayElement>('sbb-overlay');
 export const SbbPearlChain = /*@__PURE__*/createReactComponent<JSX.SbbPearlChain, HTMLSbbPearlChainElement>('sbb-pearl-chain');
 export const SbbPearlChainTime = /*@__PURE__*/createReactComponent<JSX.SbbPearlChainTime, HTMLSbbPearlChainTimeElement>('sbb-pearl-chain-time');

src/components.d.ts

@@ -1112,6 +1112,7 @@ export namespace Components {
           * Whether the option is currently active.
          */
         "active"?: boolean;
+        "activeColumn"?: number;
         /**
           * Whether the option is disabled. TBI: missing disabled style, will be implemented with the select component.
          */
@@ -1134,11 +1135,22 @@ export namespace Components {
           * @param value the label of the option group
          */
         "setGroupLabel": (value: string) => Promise<void>;
+        "toggleFavourite": () => Promise<void>;
         /**
           * Value of the option.
          */
         "value"?: string;
     }
+    interface SbbOptionGroup {
+        /**
+          * Whether the group is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Option group label.
+         */
+        "label": string;
+    }
     interface SbbOverlay {
         /**
           * Dismiss the overlay.
@@ -2146,6 +2158,12 @@ declare global {
         prototype: HTMLSbbOptionElement;
         new (): HTMLSbbOptionElement;
     };
+    interface HTMLSbbOptionGroupElement extends Components.SbbOptionGroup, HTMLStencilElement {
+    }
+    var HTMLSbbOptionGroupElement: {
+        prototype: HTMLSbbOptionGroupElement;
+        new (): HTMLSbbOptionGroupElement;
+    };
     interface HTMLSbbOverlayElement extends Components.SbbOverlay, HTMLStencilElement {
     }
     var HTMLSbbOverlayElement: {
@@ -2427,6 +2445,7 @@ declare global {
         "sbb-navigation-section": HTMLSbbNavigationSectionElement;
         "sbb-optgroup": HTMLSbbOptgroupElement;
         "sbb-option": HTMLSbbOptionElement;
+        "sbb-option-group": HTMLSbbOptionGroupElement;
         "sbb-overlay": HTMLSbbOverlayElement;
         "sbb-pearl-chain": HTMLSbbPearlChainElement;
         "sbb-pearl-chain-time": HTMLSbbPearlChainTimeElement;
@@ -3535,6 +3554,7 @@ declare namespace LocalJSX {
           * Whether the option is currently active.
          */
         "active"?: boolean;
+        "activeColumn"?: number;
         /**
           * Whether the option is disabled. TBI: missing disabled style, will be implemented with the select component.
          */
@@ -3543,6 +3563,10 @@ declare namespace LocalJSX {
           * The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://lyne.sbb.ch/tokens/icons/.
          */
         "iconName"?: string;
+        /**
+          * Emits when the option is clicked.
+         */
+        "onOption-click"?: (event: SbbOptionCustomEvent<SbbOptionEventData>) => void;
         /**
           * Emits when the option selection status changes.
          */
@@ -3556,6 +3580,16 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface SbbOptionGroup {
+        /**
+          * Whether the group is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Option group label.
+         */
+        "label"?: string;
+    }
     interface SbbOverlay {
         "onDidDismiss"?: (event: SbbOverlayCustomEvent<InterfaceOverlayEventDetail>) => void;
         "onDidPresent"?: (event: SbbOverlayCustomEvent<void>) => void;
@@ -4319,6 +4353,7 @@ declare namespace LocalJSX {
         "sbb-navigation-section": SbbNavigationSection;
         "sbb-optgroup": SbbOptgroup;
         "sbb-option": SbbOption;
+        "sbb-option-group": SbbOptionGroup;
         "sbb-overlay": SbbOverlay;
         "sbb-pearl-chain": SbbPearlChain;
         "sbb-pearl-chain-time": SbbPearlChainTime;
@@ -4407,6 +4442,7 @@ declare module "@stencil/core" {
             "sbb-navigation-section": LocalJSX.SbbNavigationSection & JSXBase.HTMLAttributes<HTMLSbbNavigationSectionElement>;
             "sbb-optgroup": LocalJSX.SbbOptgroup & JSXBase.HTMLAttributes<HTMLSbbOptgroupElement>;
             "sbb-option": LocalJSX.SbbOption & JSXBase.HTMLAttributes<HTMLSbbOptionElement>;
+            "sbb-option-group": LocalJSX.SbbOptionGroup & JSXBase.HTMLAttributes<HTMLSbbOptionGroupElement>;
             "sbb-overlay": LocalJSX.SbbOverlay & JSXBase.HTMLAttributes<HTMLSbbOverlayElement>;
             "sbb-pearl-chain": LocalJSX.SbbPearlChain & JSXBase.HTMLAttributes<HTMLSbbPearlChainElement>;
             "sbb-pearl-chain-time": LocalJSX.SbbPearlChainTime & JSXBase.HTMLAttributes<HTMLSbbPearlChainTimeElement>;

src/components/sbb-autocomplete/readme.md

@@ -47,7 +47,7 @@ Standalone, by setting the `origin` and `trigger` properties:
 </sbb-autocomplete>
 ```
 ### Option grouping
-`sbb-option` can be collected into groups using `sbb-optgroup` element:
+`sbb-option` can be collected into groups using `sbb-option-group` element:
 
 ```html
 <!-- Origin element -->
@@ -57,13 +57,13 @@ Standalone, by setting the `origin` and `trigger` properties:
   <input placeholder="Trigger element" />
 
   <sbb-autocomplete>
-    <sbb-optgroup label="Group 1">
+    <sbb-option-group label="Group 1">
       <sbb-option icon-name="clock-small" value="Option 1"> Option 1 </sbb-option>
       ...
-    </sbb-optgroup>
-    <sbb-optgroup label="Group 2">
+    </sbb-option-group>
+    <sbb-option-group label="Group 2">
       ...
-    </sbb-optgroup>
+    </sbb-option-group>
   </sbb-autocomplete>
 </sbb-form-field>
 ```