@quadrel-enterprise-ui/framework 20.17.0 → 20.17.1

package/index.d.ts

@@ -12973,10 +12973,25 @@ interface QdSectionConfig {
      */
     action?: QdLegacySectionActionConfig;
     /**
-     * @description Configures the actions of the section
+     * @description Configures the actions shown on the right of the section toolbar.
      *
-     * - **Single Action**: If only one action is defined, a standard QdButton is displayed with an optional specified icon.
-     * - **Multiple Actions**: If multiple action types are defined, a QdMenuButton is used, showing each action as a dropdown menu item.
+     * The toolbar has two layouts that depend on the screen width.
+     * "Mobile" means the screen is narrower than 960px (the `md` breakpoint).
+     * "Desktop" means it is 960px or wider.
+     *
+     * **One action:**
+     * - Desktop: a single button showing the label, plus the icon if one is set.
+     * - Mobile: if the action has an icon, the button shrinks to show only that icon.
+     *   If it has no icon, the full text button stays visible. The button is never hidden.
+     *
+     * **Two or more actions:**
+     * - Desktop: one menu button that opens a dropdown listing every action. Icons are not shown inside the dropdown.
+     * - Mobile: the same dropdown, but an `addNew` action (if present) is taken out of the dropdown
+     *   and shown next to it as a separate compact plus button.
+     *
+     * **The `addNew` action:**
+     * - It uses a plus icon by default. On desktop it shows the plus icon with its label;
+     *   on mobile it shrinks to the plus icon only.
      */
     actions?: (QdPredefinedSectionActionConfig | QdSectionActionConfig)[];
     /**
@@ -13050,6 +13065,7 @@ interface QdPredefinedSectionActionConfig {
      *
      * - By default, a plus icon is applied, but this can be overridden by specifying a custom icon.
      * - If left undefined, the `plus` icon will be used.
+     * - Desktop: the button shows the icon next to the label. Mobile (screen narrower than 960px): the button shrinks to show only the icon.
      */
     icon?: string;
     /**
@@ -13131,10 +13147,17 @@ interface QdSectionActionConfig {
      */
     handler: () => void;
     /**
-     * @description Defines the icon to display for the action.
+     * @description Defines the icon to display for this action. Leave it empty if no icon is needed.
      *
-     * - The icon visually represents the action in the UI.
-     * - **Note**: If multiple actions are present, the icon is ignored because the actions are displayed in a dropdown menu (MenuButton).
+     * The icon is only used when this is the **only** action (a single button).
+     * With two or more actions it is ignored, because they are shown in a dropdown menu.
+     *
+     * For a single action:
+     * - Desktop: the button shows the icon next to the label.
+     * - Mobile (screen narrower than 960px): the button shrinks to show only the icon.
+     *   If no icon is set, the text button stays visible instead.
+     *
+     * - For a list of available icons, see {@link https://quadrel.ezv.admin.ch/?path=/story/components-icon--icons-set}.
      */
     icon?: string;
     /**
@@ -14545,6 +14568,17 @@ declare class QdSectionToolbarComponent implements AfterViewInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<QdSectionToolbarComponent, "qd-section-toolbar", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/**
+ * Renders the configured section actions in the toolbar.
+ *
+ * The presentation is viewport-adaptive, expressed through three streams:
+ * - Below `md` (mobile): one action is shown directly (`singleAction$`); if an
+ *   `addNew` action is paired with exactly one other action, that one remaining
+ *   action is shown directly as well (`remainingSingleAction$`); any larger set
+ *   collapses into a dropdown (`groupedActionsMenu$`).
+ * - At or above `md` (desktop): every action is shown directly, and the dropdown
+ *   (`groupedActionsMenu$`) appears only when more than one action exists.
+ */
 declare class QdSectionToolbarActionComponent implements OnInit, OnDestroy {
     private readonly actionService;
     private readonly changeDetectorRef;
@@ -14552,7 +14586,8 @@ declare class QdSectionToolbarActionComponent implements OnInit, OnDestroy {
     private readonly eventBroker;
     set config(config: QdSectionConfig);
     singleAction$: Observable<QdSingleActionConfig | null>;
-    multipleActions$: Observable<QdMenuButtonConfig | null>;
+    remainingSingleAction$: Observable<QdSingleActionConfig | null>;
+    groupedActionsMenu$: Observable<QdMenuButtonConfig | null>;
     private _config;
     private readonly _viewonly$;
     private readonly _destroy$;
@@ -14562,7 +14597,8 @@ declare class QdSectionToolbarActionComponent implements OnInit, OnDestroy {
     private initActionStreams;
     private createVisibleActionsStream;
     private createSingleActionStream;
-    private createMultipleActionsStream;
+    private createRemainingSingleActionStream;
+    private createGroupedActionsMenuStream;
     private getLabel;
     private executeAction;
     private validateConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrel-enterprise-ui/framework",
-  "version": "20.17.0",
+  "version": "20.17.1",
   "exports": {
     "./jest-preset": "./jest-preset.js",
     "./package.json": {