@genexus/mercury 0.8.10 → 0.9.0

package/dist/bundles/css/components/widget.css

@@ -0,0 +1 @@
+.widget{--spacing-body-block-start: var(--mer-spacing--md);--spacing-body-block-end: var(--mer-spacing--md);--spacing-body-inline-start: var(--mer-spacing--md);--spacing-body-inline-end: var(--mer-spacing--md)}

package/dist/bundles/scss/components/widget.scss

@@ -0,0 +1,3 @@
+@import "../../../mercury.scss";
+
+@include mercury-only($components: true, $widget: true);

package/dist/bundles.d.ts

@@ -1,8 +1,9 @@
+import { ThemeModel } from "@genexus/chameleon-controls-library";
 export type MercuryBundles = [MercuryBundleReset, ...MercuryBundleOptimized[]] | [MercuryBundleReset, ...MercuryBundleFull[]];
 export type MercuryBundleOptimized = MercuryBundleComponent | MercuryBundleComponentForm | MercuryBundleUtil;
 export type MercuryBundleFull = MercuryBundleComponent | MercuryBundleUtil | MercuryBundleUtilFormFull;
 export type MercuryBundleBase = "base/base" | "base/icons";
-export type MercuryBundleComponent = "components/accordion" | "components/chat" | "components/code" | "components/dialog" | "components/flexible-layout" | "components/list-box" | "components/markdown-viewer" | "components/navigation-list" | "components/segmented-control" | "components/sidebar" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tree-view" | "components/tooltip";
+export type MercuryBundleComponent = "components/accordion" | "components/chat" | "components/code" | "components/dialog" | "components/flexible-layout" | "components/list-box" | "components/markdown-viewer" | "components/navigation-list" | "components/segmented-control" | "components/sidebar" | "components/tab" | "components/tabular-grid" | "components/ticket-list" | "components/tooltip" | "components/tree-view" | "components/widget";
 export type MercuryBundleComponentForm = "components/button" | "components/checkbox" | "components/combo-box" | "components/edit" | "components/icon" | "components/radio-group" | "components/slider";
 export type MercuryBundleReset = "resets/box-sizing";
 export type MercuryBundleUtil = "utils/form" | "utils/layout" | "utils/typography" | "chameleon/scrollbar";
@@ -200,6 +201,14 @@ export declare const getThemeBundles: (basePath: string) => [{
     readonly name: BundleNames;
     readonly url: `${string}components/tree-view.css`;
     readonly attachStyleSheet: boolean;
+}, {
+    readonly name: BundleNames;
+    readonly url: `${string}components/widget.css`;
+    readonly attachStyleSheet?: undefined;
+} | {
+    readonly name: BundleNames;
+    readonly url: `${string}components/widget.css`;
+    readonly attachStyleSheet: boolean;
 }, {
     readonly name: BundleNames;
     readonly url: `${string}resets/box-sizing.css`;
@@ -249,4 +258,33 @@ export declare const getThemeBundles: (basePath: string) => [{
     readonly url: `${string}chameleon/scrollbar.css`;
     readonly attachStyleSheet: boolean;
 }];
+/**
+ * Given the bundles array and the basePath (optional), returns the given
+ * bundles in the format of type `ThemeModel`.
+ *
+ * This is useful for defining the following in a dialog:
+ *
+ * ```tsx
+ * const CSS_BUNDLES: ThemeModel = getBundles(
+ *   [
+ *     "components/accordion",
+ *     "components/button",
+ *     "components/checkbox",
+ *     "components/combo-box",
+ *     "components/edit",
+ *     "components/tree-view",
+ *     "utils/form",
+ *     "utils/layout",
+ *   ],
+ *   "./assets/css/"
+ * );
+ *
+ * HTML/render/template:
+ *   <Host>
+ *     <ch-theme model={CSS_BUNDLES}></ch-theme>
+ *     ...
+ *   </Host>
+ * ```
+ */
+export declare const getBundles: (bundles: MercuryBundleOptimized[] | MercuryBundleFull[], basePath?: string) => ThemeModel;
 export {};

package/dist/bundles.js

@@ -48,6 +48,7 @@ export const getThemeBundles = (basePath) => [
     getThemeModelItem(basePath, "components/ticket-list"),
     getThemeModelItem(basePath, "components/tooltip"),
     getThemeModelItem(basePath, "components/tree-view"),
+    getThemeModelItem(basePath, "components/widget"),
     // Resets
     getThemeModelItem(basePath, "resets/box-sizing"),
     // Utils
@@ -57,3 +58,34 @@ export const getThemeBundles = (basePath) => [
     getThemeModelItem(basePath, "utils/typography"),
     getThemeModelItem(basePath, "chameleon/scrollbar")
 ];
+/**
+ * Given the bundles array and the basePath (optional), returns the given
+ * bundles in the format of type `ThemeModel`.
+ *
+ * This is useful for defining the following in a dialog:
+ *
+ * ```tsx
+ * const CSS_BUNDLES: ThemeModel = getBundles(
+ *   [
+ *     "components/accordion",
+ *     "components/button",
+ *     "components/checkbox",
+ *     "components/combo-box",
+ *     "components/edit",
+ *     "components/tree-view",
+ *     "utils/form",
+ *     "utils/layout",
+ *   ],
+ *   "./assets/css/"
+ * );
+ *
+ * HTML/render/template:
+ *   <Host>
+ *     <ch-theme model={CSS_BUNDLES}></ch-theme>
+ *     ...
+ *   </Host>
+ * ```
+ */
+export const getBundles = (bundles, basePath) => basePath
+    ? bundles.map(bundle => getThemeModelItem(basePath, bundle))
+    : bundles;

package/dist/mercury.scss

@@ -8613,6 +8613,21 @@
   );
 }
 
+%widget {
+  --spacing-body-block-start: var(--mer-spacing--md);
+  --spacing-body-block-end: var(--mer-spacing--md);
+  --spacing-body-inline-start: var(--mer-spacing--md);
+  --spacing-body-inline-end: var(--mer-spacing--md);
+}
+
+/// @group Widget
+/// @param {String} $selector [".widget"] -
+@mixin widget($selector: ".widget") {
+  #{$selector} {
+    @extend %widget;
+  }
+}
+
 
 @mixin mercury(
   // Resets
@@ -8681,7 +8696,8 @@
   $tabular-grid: true,
   $ticket-list: true,
   $tooltip: true,
-  $tree-view: true
+  $tree-view: true,
+  $widget: true
 ) {
   // - - - - - - - - - - - - - - - - - - - -
   //                  Icons
@@ -16991,6 +17007,10 @@
   @if $tree-view {
     @include tree-view();
   }
+
+  @if $widget {
+    @include widget();
+  }
 }
 
 @mixin mercury-only(
@@ -17060,7 +17080,8 @@
   $tabular-grid: false,
   $ticket-list: false,
   $tooltip: false,
-  $tree-view: false
+  $tree-view: false,
+  $widget: false
 ) {
   @include mercury(
     // Resets
@@ -17129,6 +17150,7 @@
     $tabular-grid: $tabular-grid,
     $ticket-list: $ticket-list,
     $tooltip: $tooltip,
-    $tree-view: $tree-view
+    $tree-view: $tree-view,
+    $widget: $widget
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.8.10",
+  "version": "0.9.0",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",