@sula-tech/webcomponents 0.24.1 → 0.26.0

package/dist/types/components/sula-workbench-menu/sula-workbench-menu.d.ts

@@ -8,9 +8,9 @@ type CrumbMenuState = {
     top: number;
 };
 /**
- * Navigation menu that combines an inline expandable tree with a drill-down panel.
- * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
- * that level with children open a single-level panel with a breadcrumb trail.
+ * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+ * When any visible item reaches a 4th level, every item with children opens a single-level
+ * drill-down panel with a breadcrumb trail instead.
  *
  * @part shell - Main visual container of the menu.
  * @part title - Menu title, or the current level title while drilled in.
@@ -19,7 +19,7 @@ type CrumbMenuState = {
  * @part toggle-label - Label of the collapse/expand control.
  * @slot profile-content - Extra content rendered inside the profile popover.
  * @part profile-popover - Popover opened from the user area.
- * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+ * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
  * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
  */
 export declare class SulaWorkbenchMenu {
@@ -46,13 +46,9 @@ export declare class SulaWorkbenchMenu {
      */
     labelOverflow: SulaMenuLabelOverflow;
     /**
-     * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place.
-     * With the default of 3, the first two levels expand inline and deeper branches drill down.
-     */
-    drilldownLevel: number;
-    /**
-     * Controls the drill-down from the host: ids from the root to the item whose children are shown.
-     * An empty array shows the tree (leaves the drill-down). Leave it undefined to let only user clicks navigate.
+     * Controls the navigation from the host: ids from the root to the item whose children are shown.
+     * In drill-down mode an empty array goes back to the root; in inline mode the items on the path are expanded.
+     * Leave it undefined to let only user clicks navigate.
      */
     drillPath?: string[];
     /**
@@ -76,7 +72,7 @@ export declare class SulaWorkbenchMenu {
      */
     itemSelected: EventEmitter<SulaWorkbenchMenuItem>;
     /**
-     * Emitted when any item is clicked
+     * Emitted when any item is clickede
      */
     itemClicked: EventEmitter<SulaWorkbenchMenuItem>;
     /**
@@ -103,6 +99,7 @@ export declare class SulaWorkbenchMenu {
     menuToggled: EventEmitter<boolean>;
     collapsed: boolean;
     previewExpanded: boolean;
+    drillMode: boolean;
     stack: SulaWorkbenchMenuItem[];
     direction: SulaWorkbenchMenuDirection;
     selectedPath: SulaWorkbenchMenuPath;
@@ -113,13 +110,18 @@ export declare class SulaWorkbenchMenu {
     private shellEl?;
     private userInfoEl?;
     private profileEl?;
+    private profileOriginEl?;
     private hovering;
+    private expandedPath?;
     private get normalizedWidth();
     private get hostStyleVariables();
     componentWillLoad(): void;
     syncWithItems(items: SulaWorkbenchMenuItem[]): void;
     syncDrillPath(path?: string[]): void;
     private applyDrillPath;
+    private expandInline;
+    private markExpanded;
+    private maxDepth;
     componentDidRender(): void;
     onDocumentClick(event: MouseEvent): void;
     onDocumentKeydown(event: KeyboardEvent): void;
@@ -166,6 +168,7 @@ export declare class SulaWorkbenchMenu {
     private renderCrumbDropdown;
     private renderDrillHeader;
     private renderDrillRow;
+    private renderDrillLayers;
     private renderDrillPanel;
     private getMainIconClass;
     private getMainCaretClass;
@@ -175,7 +178,6 @@ export declare class SulaWorkbenchMenu {
     private renderIconSlot;
     private renderMainRow;
     private renderSubRow;
-    private depthOf;
     private renderInlineList;
     render(): any;
 }

package/dist/types/components/sula-workbench-menu/sula-workbench-menu.stories.d.ts

@@ -3,9 +3,9 @@ import { SulaProfileMenuItem } from '../sula-profile-menu/model/sula-profile-men
 import { SulaWorkbenchMenuItem, SulaWorkbenchMenuUser } from './model/sula-workbench-menu.model';
 type StoryArgs = {
     menuTitle: string;
+    image?: string;
     density: SulaMenuDensity;
     labelOverflow: SulaMenuLabelOverflow;
-    drilldownLevel: number;
     drillPath?: string[];
     items: SulaWorkbenchMenuItem[];
     user: SulaWorkbenchMenuUser;
@@ -27,6 +27,10 @@ declare const _default: {
             defaultValue: string;
             description: string;
         };
+        image: {
+            control: string;
+            description: string;
+        };
         density: {
             control: {
                 type: string;
@@ -41,13 +45,6 @@ declare const _default: {
             options: SulaMenuLabelOverflow[];
             description: string;
         };
-        drilldownLevel: {
-            control: {
-                type: string;
-                min: number;
-            };
-            description: string;
-        };
         drillPath: {
             control: string;
             description: string;
@@ -110,7 +107,6 @@ export declare const WithProfileMenu: {
         menuTitle: string;
         density: SulaMenuDensity;
         labelOverflow: SulaMenuLabelOverflow;
-        drilldownLevel: number;
         items: SulaWorkbenchMenuItem[];
         user: {
             name: string;
@@ -133,7 +129,6 @@ export declare const ControlledDrillPath: {
         menuTitle: string;
         density: SulaMenuDensity;
         labelOverflow: SulaMenuLabelOverflow;
-        drilldownLevel: number;
         items: SulaWorkbenchMenuItem[];
         user: SulaWorkbenchMenuUser;
     };
@@ -146,23 +141,12 @@ export declare const ControlledDrillPath: {
     };
 };
 export declare const InlineOnly: any;
-export declare const ComparisonWithCurrentSulaMenu: {
-    (): HTMLDivElement;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
-export declare const ComparisonDrilldownFourthLevel: {
-    (): HTMLDivElement;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
+export declare const InlineWithExpandedPath: any;
+export declare const FourthLevelBreadcrumb: any;
+export declare const WithBrandImage: any;
+export declare const LongLabels: any;
+export declare const LongLabelsTruncate: any;
+export declare const CompactDensity: any;
+export declare const ComfortableDensity: any;
+export declare const HiddenAndDisabledItems: any;
+export declare const WithoutUser: any;

package/dist/types/components.d.ts

@@ -503,11 +503,21 @@ export namespace Components {
           * @default ''
          */
         "modalTitle": string;
+        /**
+          * Modal width on desktop (any CSS value, e.g. `900px`). Empty keeps the type default
+          * @default ''
+         */
+        "modalWidth": string;
         /**
           * Is modal opened
           * @default false
          */
         "opened": boolean;
+        /**
+          * Disable the primary button
+          * @default false
+         */
+        "primaryButtonDisabled": boolean;
         /**
           * Primary button text
           * @default ''
@@ -518,11 +528,26 @@ export namespace Components {
           * @default ''
          */
         "promoImage": string;
+        /**
+          * Disable the secondary button
+          * @default false
+         */
+        "secondaryButtonDisabled": boolean;
         /**
           * Secondary button text
           * @default ''
          */
         "secondaryButtonText": string;
+        /**
+          * Let the modal grow with its content (no slot scroll); the overlay scrolls instead when it exceeds the viewport
+          * @default false
+         */
+        "slotAutoHeight": boolean;
+        /**
+          * Max height of the slot area (any CSS value, e.g. `60vh`). Empty keeps the type default
+          * @default ''
+         */
+        "slotMaxHeight": string;
         /**
           * Slot overflow behavior
           * @default SulaModalSlotOverflow.Auto
@@ -988,10 +1013,10 @@ export namespace Components {
         "trigger": SulaTooltipTrigger;
     }
     /**
-     * Navigation menu that combines an inline expandable tree with a drill-down panel.
-     * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
-     * that level with children open a single-level panel with a breadcrumb trail.
-     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+     * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+     * When any visible item reaches a 4th level, every item with children opens a single-level
+     * drill-down panel with a breadcrumb trail instead.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
      * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
      */
     interface SulaWorkbenchMenu {
@@ -1006,14 +1031,9 @@ export namespace Components {
          */
         "density": SulaMenuDensity;
         /**
-          * Controls the drill-down from the host: ids from the root to the item whose children are shown. An empty array shows the tree (leaves the drill-down). Leave it undefined to let only user clicks navigate.
+          * Controls the navigation from the host: ids from the root to the item whose children are shown. In drill-down mode an empty array goes back to the root; in inline mode the items on the path are expanded. Leave it undefined to let only user clicks navigate.
          */
         "drillPath"?: string[];
-        /**
-          * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place. With the default of 3, the first two levels expand inline and deeper branches drill down.
-          * @default 3
-         */
-        "drilldownLevel": number;
         /**
           * Menu image
           * @default ''
@@ -1657,10 +1677,10 @@ declare global {
         "menuToggled": boolean;
     }
     /**
-     * Navigation menu that combines an inline expandable tree with a drill-down panel.
-     * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
-     * that level with children open a single-level panel with a breadcrumb trail.
-     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+     * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+     * When any visible item reaches a 4th level, every item with children opens a single-level
+     * drill-down panel with a breadcrumb trail instead.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
      * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
      */
     interface HTMLSulaWorkbenchMenuElement extends Components.SulaWorkbenchMenu, HTMLStencilElement {
@@ -2259,6 +2279,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "modalTitle"?: string;
+        /**
+          * Modal width on desktop (any CSS value, e.g. `900px`). Empty keeps the type default
+          * @default ''
+         */
+        "modalWidth"?: string;
         /**
           * Event emitted when the modal is closed
          */
@@ -2276,6 +2301,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "opened"?: boolean;
+        /**
+          * Disable the primary button
+          * @default false
+         */
+        "primaryButtonDisabled"?: boolean;
         /**
           * Primary button text
           * @default ''
@@ -2286,11 +2316,26 @@ declare namespace LocalJSX {
           * @default ''
          */
         "promoImage"?: string;
+        /**
+          * Disable the secondary button
+          * @default false
+         */
+        "secondaryButtonDisabled"?: boolean;
         /**
           * Secondary button text
           * @default ''
          */
         "secondaryButtonText"?: string;
+        /**
+          * Let the modal grow with its content (no slot scroll); the overlay scrolls instead when it exceeds the viewport
+          * @default false
+         */
+        "slotAutoHeight"?: boolean;
+        /**
+          * Max height of the slot area (any CSS value, e.g. `60vh`). Empty keeps the type default
+          * @default ''
+         */
+        "slotMaxHeight"?: string;
         /**
           * Slot overflow behavior
           * @default SulaModalSlotOverflow.Auto
@@ -2874,10 +2919,10 @@ declare namespace LocalJSX {
         "trigger"?: SulaTooltipTrigger;
     }
     /**
-     * Navigation menu that combines an inline expandable tree with a drill-down panel.
-     * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
-     * that level with children open a single-level panel with a breadcrumb trail.
-     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+     * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+     * When any visible item reaches a 4th level, every item with children opens a single-level
+     * drill-down panel with a breadcrumb trail instead.
+     * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
      * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
      */
     interface SulaWorkbenchMenu {
@@ -2892,14 +2937,9 @@ declare namespace LocalJSX {
          */
         "density"?: SulaMenuDensity;
         /**
-          * Controls the drill-down from the host: ids from the root to the item whose children are shown. An empty array shows the tree (leaves the drill-down). Leave it undefined to let only user clicks navigate.
+          * Controls the navigation from the host: ids from the root to the item whose children are shown. In drill-down mode an empty array goes back to the root; in inline mode the items on the path are expanded. Leave it undefined to let only user clicks navigate.
          */
         "drillPath"?: string[];
-        /**
-          * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place. With the default of 3, the first two levels expand inline and deeper branches drill down.
-          * @default 3
-         */
-        "drilldownLevel"?: number;
         /**
           * Menu image
           * @default ''
@@ -2921,7 +2961,7 @@ declare namespace LocalJSX {
          */
         "menuTitle"?: string;
         /**
-          * Emitted when any item is clicked
+          * Emitted when any item is clickede
          */
         "onItemClicked"?: (event: SulaWorkbenchMenuCustomEvent<SulaWorkbenchMenuItem>) => void;
         /**
@@ -3059,10 +3099,10 @@ declare module "@stencil/core" {
             "sula-toggle": LocalJSX.SulaToggle & JSXBase.HTMLAttributes<HTMLSulaToggleElement>;
             "sula-tooltip": LocalJSX.SulaTooltip & JSXBase.HTMLAttributes<HTMLSulaTooltipElement>;
             /**
-             * Navigation menu that combines an inline expandable tree with a drill-down panel.
-             * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below
-             * that level with children open a single-level panel with a breadcrumb trail.
-             * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.
+             * Navigation menu that expands in place, as in `sula-menu`, while the tree has up to 3 levels.
+             * When any visible item reaches a 4th level, every item with children opens a single-level
+             * drill-down panel with a breadcrumb trail instead.
+             * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 300px.
              * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.
              */
             "sula-workbench-menu": LocalJSX.SulaWorkbenchMenu & JSXBase.HTMLAttributes<HTMLSulaWorkbenchMenuElement>;