[mercury] add .buttons-spacer, .control-header, and .ch-checkbox startImgSrc support.

packages/mercury/package.json

@@ -27,7 +27,7 @@
   "license": "MIT",
   "devDependencies": {
     "@atao60/fse-cli": "^0.1.9",
-    "@genexus/chameleon-controls-library": "6.0.0-next.37",
+    "@genexus/chameleon-controls-library": "6.0.0-next.40",
     "@genexus/svg-sass-generator": "1.1.24",
     "chokidar": "^3.6.0",
     "chokidar-cli": "^3.0.0",

packages/mercury/showcase/assets/scripts/assets-manager.js

@@ -1,5 +1,5 @@
 import { MERCURY_ASSETS } from "./assets/MERCURY_ASSETS.js";
-export { getThemeBundles } from "./bundles.js";
+export { getThemeBundles, getBundles } from "./bundles.js";
 const ASSETS_BY_VENDOR = {};
 const ALIAS_TO_VENDOR_NAME = {};
 const SEPARATOR = "/";
@@ -155,6 +155,7 @@ export const getTreeViewImagePathCallback = (item, iconDirection) => {
 export const getImagePathCallbackDefinitions = {
     "ch-accordion-render": getImagePathCallback,
     "ch-navigation-list-render": getNavigationListImagePathCallback,
+    "ch-checkbox": getImagePathCallback,
     "ch-edit": getImagePathCallback,
     "ch-image": getImagePathCallback,
     "ch-tree-view-render": getTreeViewImagePathCallback

packages/mercury/showcase/assets/scripts/bundles.js

@@ -58,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;

packages/mercury/showcase/assets/scripts/scripts-header.js

@@ -1,8 +1,8 @@
 import { BUTTON_ICONS } from "./icons-showcase-paths.js";
 // All definitions in this script are used for local testing purposes
 // only. The IDE Web's SDK implements all this and more
-import { defineCustomElements } from "https://unpkg.com/@genexus/chameleon-controls-library@6.0.0-next.36/dist/esm/loader.js";
-import { registryProperty } from "https://unpkg.com/@genexus/chameleon-controls-library@6.0.0-next.36/dist/esm/index.js";
+import { defineCustomElements } from "https://unpkg.com/@genexus/chameleon-controls-library@6.0.0-next.40/dist/esm/loader.js";
+import { registryProperty } from "https://unpkg.com/@genexus/chameleon-controls-library@6.0.0-next.40/dist/esm/index.js";
 import {
   getImagePathCallbackDefinitions,
   getIconPath

packages/mercury/showcase/dialog.html

@@ -89,6 +89,7 @@ <h1 class="section__title">dialog</h1>
                         effort required for updates and enhancements.
                       </p>
                     </div>
+
                     <button slot="footer" type="button" class="button-tertiary">
                       Cancel
                     </button>
@@ -187,8 +188,10 @@ <h1 class="section__title">.control-footer</h1>
                 </p>
                 <div class="article__content">
                   <div class="control-footer dummy-border">
-                    <button class="button-tertiary">Cancel</button>
-                    <button class="button-primary">Save</button>
+                    <div class="buttons-spacer">
+                      <button class="button-secondary">Cancel</button>
+                      <button class="button-primary">Save</button>
+                    </div>
                   </div>
                 </div>
                 <div class="article__code">
@@ -227,8 +230,10 @@ <h1 class="section__title">.control-footer</h1>
                   <div
                     class="control-footer-with-border dummy-border-highlighted dummy-border-inline-end dummy-border-block-end dummy-border-inline-start"
                   >
-                    <button class="button-tertiary">Cancel</button>
-                    <button class="button-primary">Save</button>
+                    <div class="buttons-spacer">
+                      <button class="button-secondary">Cancel</button>
+                      <button class="button-primary">Save</button>
+                    </div>
                   </div>
                 </div>
                 <div class="article__code">
@@ -244,6 +249,52 @@ <h1 class="section__title">.control-footer</h1>
               </div>
               <!-- /.article__main -->
             </article>
+
+            <!-- ========================== 
+          control-footer: with spacing
+          =========================== -->
+            <article
+              class="article"
+              data-nav
+              data-title="control-footer: with spacing"
+            >
+              <header class="article__header"></header>
+              <!-- main -->
+              <div class="article__main">
+                <p class="article__description">
+                  The <code>.control-footer</code> component only applies
+                  padding to the top (block-start) by default. To add padding on
+                  the other sides, you can use any of the available "spacing"
+                  classes. These classes will adjust the padding based on the
+                  specific context in which the <code>.control-footer</code> is
+                  used.
+                </p>
+                <div class="article__content widget">
+                  <div
+                    class="control-footer-with-border dummy-border-highlighted dummy-border-inline-end dummy-border-block-end dummy-border-inline-start spacing-body"
+                  >
+                    <div class="buttons-spacer">
+                      <button class="button-secondary">Cancel</button>
+                      <button class="button-primary">Save</button>
+                    </div>
+                  </div>
+                </div>
+                <div class="article__code">
+                  <ch-code language="tsx" class="code"> </ch-code>
+                  <script>
+                    code = `<div class="widget">
+  <div class="control-footer-with-border spacing-body">
+    <button class="button-tertiary">Cancel</button>
+    <button class="button-primary">Save</button>
+  </div>
+</div>
+`;
+                  </script>
+                </div>
+                <!-- /.article__content -->
+              </div>
+              <!-- /.article__main -->
+            </article>
           </div>
         </section>
       </div>

packages/mercury/showcase/form-checkbox.html

@@ -145,6 +145,51 @@ <h1 class="section__title">checkbox</h1>
               <!-- /.article__main -->
             </article>
 
+            <!-- ========================== 
+          with icon
+          =========================== -->
+            <article class="article" data-nav data-title="with icon">
+              <header class="article__header"></header>
+              <!-- main -->
+              <div class="article__main">
+                <div class="article__content">
+                  <ch-checkbox
+                    id="checkbox-with-icon-enabled"
+                    class="checkbox"
+                    checked-value="true"
+                    un-checked-value="false"
+                    value="true"
+                    caption="The Caption"
+                  ></ch-checkbox>
+                  <script type="module">
+                    const ADD_CIRCLE_ICON = getIconPath({
+                      category: "gemini-tools",
+                      name: "add-circle",
+                      colorType: "on-elevation"
+                    });
+                    console.log(ADD_CIRCLE_ICON);
+                    const checkboxWithIconEnabled = document.getElementById(
+                      "checkbox-with-icon-enabled"
+                    );
+                    checkboxWithIconEnabled.startImgSrc = ADD_CIRCLE_ICON;
+                  </script>
+                </div>
+                <div class="article__code">
+                  <ch-code language="tsx" class="code"> </ch-code>
+                  <script>
+                    code = `const ADD_CIRCLE_ICON = getIconPath({
+  category: "gemini-tools",
+  name: "add-circle",
+  colorType: "on-elevation"
+});
+<ch-checkbox class="checkbox" startImgSrc={ADD_CIRCLE_ICON}></ch-checkbox>`;
+                  </script>
+                </div>
+                <!-- /.article__content -->
+              </div>
+              <!-- /.article__main -->
+            </article>
+
             <!-- ========================== 
           with error
           =========================== -->

packages/mercury/showcase/scss/mercury.scss

@@ -683,8 +683,39 @@
 // ----------------------
 
 @mixin control-footer-base() {
-  padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
-  gap: var(--mer-spacing--sm);
+  padding-block-start: var(--mer-spacing--xs);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@mixin control-footer-border() {
+  border-block-start: var(--mer-border__width--sm) solid
+    var(--mer-border-color__on-elevation--01);
+}
+@mixin control-footer(
+  $selector: ".control-footer",
+  $with-border-selector: ".control-footer-with-border",
+  $with-border: true
+) {
+  #{$selector},
+  #{$with-border-selector} {
+    @include control-footer-base();
+  }
+  @if $with-border {
+    #{$with-border-selector} {
+      @include control-footer-border();
+    }
+  }
+}
+
+// ----------------------
+// Pseudo Dialog Header
+// ----------------------
+
+@mixin control-header-base() {
+  padding-block-end: var(--mer-spacing--sm);
+  display: flex;
+  justify-content: space-between;
   align-items: center;
 }
 @mixin control-footer-border() {
@@ -2148,8 +2179,39 @@
 // ----------------------
 
 @mixin control-footer-base() {
-  padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
-  gap: var(--mer-spacing--sm);
+  padding-block-start: var(--mer-spacing--xs);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@mixin control-footer-border() {
+  border-block-start: var(--mer-border__width--sm) solid
+    var(--mer-border-color__on-elevation--01);
+}
+@mixin control-footer(
+  $selector: ".control-footer",
+  $with-border-selector: ".control-footer-with-border",
+  $with-border: true
+) {
+  #{$selector},
+  #{$with-border-selector} {
+    @include control-footer-base();
+  }
+  @if $with-border {
+    #{$with-border-selector} {
+      @include control-footer-border();
+    }
+  }
+}
+
+// ----------------------
+// Pseudo Dialog Header
+// ----------------------
+
+@mixin control-header-base() {
+  padding-block-end: var(--mer-spacing--sm);
+  display: flex;
+  justify-content: space-between;
   align-items: center;
 }
 @mixin control-footer-border() {
@@ -2514,6 +2576,11 @@
   }
 }
 
+%buttons-spacer {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /// @group Button
 /// @param {String} $selector [".button-primary"] -
 /// @param {String} $destructive-selector [".button-primary-destructive"] -
@@ -2635,6 +2702,14 @@
   }
 }
 
+/// @group Button
+/// @param {String} $selector [".buttons-spacer"] -
+@mixin buttons-spacer($selector: ".buttons-spacer") {
+  #{$selector} {
+    @extend %buttons-spacer;
+  }
+}
+
 @mixin button-classes() {
   // Button primary
   @include button-primary();
@@ -2644,6 +2719,9 @@
 
   // Button tertiary
   @include button-tertiary();
+
+  // Buttons spacer
+  @include buttons-spacer();
 }
 
 %field {
@@ -4637,8 +4715,39 @@
 // ----------------------
 
 @mixin control-footer-base() {
-  padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
-  gap: var(--mer-spacing--sm);
+  padding-block-start: var(--mer-spacing--xs);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@mixin control-footer-border() {
+  border-block-start: var(--mer-border__width--sm) solid
+    var(--mer-border-color__on-elevation--01);
+}
+@mixin control-footer(
+  $selector: ".control-footer",
+  $with-border-selector: ".control-footer-with-border",
+  $with-border: true
+) {
+  #{$selector},
+  #{$with-border-selector} {
+    @include control-footer-base();
+  }
+  @if $with-border {
+    #{$with-border-selector} {
+      @include control-footer-border();
+    }
+  }
+}
+
+// ----------------------
+// Pseudo Dialog Header
+// ----------------------
+
+@mixin control-header-base() {
+  padding-block-end: var(--mer-spacing--sm);
+  display: flex;
+  justify-content: space-between;
   align-items: center;
 }
 @mixin control-footer-border() {
@@ -8614,10 +8723,10 @@
 }
 
 %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);
+  --spacing-body-block-start: var(--mer-spacing--sm);
+  --spacing-body-block-end: var(--mer-spacing--sm);
+  --spacing-body-inline-start: var(--mer-spacing--sm);
+  --spacing-body-inline-end: var(--mer-spacing--sm);
 }
 
 /// @group Widget
@@ -16880,6 +16989,7 @@
       @include button-primary();
       @include button-secondary();
       @include button-tertiary();
+      @include buttons-spacer();
 
       @include button-icon-only();
       @include button-icon-and-text();