[showcase][mercury] Adding styles for Paginator

.vscode/settings.json

@@ -4,5 +4,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "cSpell.words": ["Globant", "GeneXus"]
+  "cSpell.words": ["GeneXus", "Globant", "paginators", "Paginators"]
 }

packages/mercury/package.json

@@ -69,7 +69,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@genexus/chameleon-controls-library": "~6.5.0",
+    "@genexus/chameleon-controls-library": "~6.7.0",
     "@genexus/svg-sass-generator": "1.1.24",
     "@vitest/browser": "~3.1.1",
     "@vitest/coverage-v8": "~3.1.1",

packages/mercury/src/bundles.ts

@@ -135,6 +135,10 @@ export const getThemeBundles = (basePath: string, bundleNamePrefix?: string) =>
       bundleName: "components/navigation-list",
       bundleNamePrefix
     }),
+    getThemeModelItem(basePath, {
+      bundleName: "components/paginator",
+      bundleNamePrefix
+    }),
     getThemeModelItem(basePath, {
       bundleName: "components/pills",
       bundleNamePrefix

packages/mercury/src/bundles/scss/components/paginator.scss

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

packages/mercury/src/components/paginator/_paginator-styles.scss

@@ -0,0 +1,246 @@
+@use "../../base/button/button-styles" as *;
+@use "../../base/common" as *;
+@use "../../base/label/label-styles" as *;
+@use "../../base/typography" as *;
+@use "../../icons/button" as *;
+@use "../combo-box/combo-box-styles" as *;
+@use "../input/input-styles" as *;
+
+%paginator {
+  display: grid;
+  gap: var(--mer-spacing--xs);
+  grid-template: "items-per-page items-per-page-info . first__button prev__button go-to next__button last__button" 1fr / auto auto 1fr auto auto auto auto;
+
+  &__combo-box {
+    inline-size: 80px;
+  }
+
+  &__go-to {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--mer-spacing--xs);
+  }
+
+  &__items-per-page {
+    align-items: center;
+    gap: var(--mer-spacing--xs);
+
+    &__info {
+      color: var(--mer-text__complementary);
+    }
+  }
+
+  &__pages {
+    gap: var(--mer-spacing--xs);
+
+    &__button {
+      border-radius: var(--mer-border__radius--sm);
+      color: var(--mer-icon__neutral);
+      padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);
+
+      &--active {
+        background: var(--mer-accent__primary);
+        color: var(--mer-text__on-primary);
+      }
+
+      &--hover {
+        color: var(--mer-icon__on-primary--hover);
+        background-color: var(--item__bg-color--selected-hover);
+      }
+    }
+  }
+}
+
+%paginator__pages__button__selector--before {
+  background-color: currentColor;
+  block-size: var(--mer-spacing--md);
+  content: "";
+  inline-size: var(--mer-spacing--md);
+  mask: no-repeat center / 100% var(--button-arrow-icon);
+  -webkit-mask: no-repeat center / 100% var(--button-arrow-icon);
+}
+
+/// @group Paginator
+/// @param {String} $paginator-selector [".paginator"] -
+/// @param {String} $paginator__go-to-selector [".paginator::part(go-to)"] -
+/// @param {String} $paginator__go-to__input-selector [".paginator::part(go-to__input)"] -
+/// @param {String} $paginator__items-per-page-selector [".paginator::part(items-per-page)"] -
+/// @param {String} $paginator__items-per-page__label-selector [".paginator::part(items-per-page__label)"] -
+/// @param {String} $paginator__items-per-page__info-selector:
+//  [".paginator::part(items-per-page-info)"] -
+/// @param {String} $paginator__navigation-page-selector: [".paginator::part(page)"] -
+/// @param {String} $paginator__navigation-page-not-selected-selector: [".paginator::part(page page-not-selected)"] -
+/// @param {String} $paginator__navigation-page-active-selector: [".paginator::part(page page-active)"] -
+/// @param {String} $paginator__navigation-pages-selector: [".paginator::part(pages)"] -
+/// @param {String} $paginator__first-button-selector [".paginator::part(first__button)"] -
+/// @param {String} $paginator__last-button-selector [".paginator::part(last__button)"] -
+/// @param {String} $paginator__next-button-selector [".paginator::part(next__button)"] -
+/// @param {String} $paginator__previous-button-selector [".paginator::part(prev__button)"] -
+/// @param {String} $paginator__combo-box-selector [".paginator::part(items-per-page__combo-box)"] -
+/// @param {String} $paginator__combo-box--disabled-selector [".paginator[disabled]"] -
+/// @param {String} $paginator__combo-box__placeholder-selector:
+//  [".paginator[part='ch-combo-box-render--placeholder']"] -
+/// @param {String} $paginator__window-selector [".paginator::part(window)"] -
+/// @param {String} $paginator__group-selector [".paginator::part(group)"] -
+/// @param {String} $paginator__group__content-selector [".paginator::part(group__content)"] -
+/// @param {String} $paginator__group__header-selector [".paginator::part(group__header)"] -
+/// @param {String} $paginator__group__header--disabled-selector:
+//  [".paginator::part(group__header disabled)"] -
+/// @param {String} $paginator__group__header--expandable-selector:
+//  [".paginator::part(group__header expandable)"] -
+/// @param {String} $paginator__item-selector [".paginator::part(item)"] -
+/// @param {String} $paginator__item--disabled-selector [".paginator::part(item disabled)"] -
+/// @param {String} $paginator__item--nested-selector [".paginator::part(item nested)"] -
+/// @param {String} $paginator__item--selected-selector [".paginator::part(item selected)"] -
+/// @param {Boolean} $add--disabled [false] -
+/// @param {Boolean} $add--placeholder [false] -
+/// @param {Boolean} $add--error [false] -
+@mixin paginator(
+  $paginator-selector: ".paginator",
+  $paginator__go-to-selector: ".paginator::part(go-to)",
+  $paginator__go-to__input-selector: ".paginator::part(go-to__input)",
+  $paginator__items-per-page-selector: ".paginator::part(items-per-page)",
+  $paginator__items-per-page__label-selector:
+    ".paginator::part(items-per-page__label)",
+  $paginator__items-per-page__info-selector:
+    ".paginator::part(items-per-page-info)",
+  $paginator__navigation-page-selector: ".paginator::part(page)",
+  $paginator__navigation-page-not-selected-selector:
+    ".paginator::part(page page-not-selected)",
+  $paginator__navigation-page-active-selector:
+    ".paginator::part(page page-active)",
+  $paginator__navigation-pages-selector: ".paginator::part(pages)",
+  $paginator__first-button-selector: ".paginator::part(first__button)",
+  $paginator__last-button-selector: ".paginator::part(last__button)",
+  $paginator__next-button-selector: ".paginator::part(next__button)",
+  $paginator__previous-button-selector: ".paginator::part(prev__button)",
+  $paginator__combo-box-selector: ".paginator::part(items-per-page__combo-box)",
+  $paginator__combo-box--disabled-selector: ".paginator[disabled]",
+  $paginator__combo-box__placeholder-selector:
+    ".paginator[part='ch-combo-box-render--placeholder']",
+  $paginator__window-selector: ".paginator::part(window)",
+  $paginator__group-selector: ".paginator::part(group)",
+  $paginator__group__content-selector: ".paginator::part(group__content)",
+  $paginator__group__header-selector: ".paginator::part(group__header)",
+  $paginator__group__header--disabled-selector:
+    ".paginator::part(group__header disabled)",
+  $paginator__group__header--expandable-selector:
+    ".paginator::part(group__header expandable)",
+  $paginator__item-selector: ".paginator::part(item)",
+  $paginator__item--disabled-selector: ".paginator::part(item disabled)",
+  $paginator__item--nested-selector: ".paginator::part(item nested)",
+  $paginator__item--selected-selector: ".paginator::part(item selected)",
+  $add--disabled: false,
+  $add--placeholder: false,
+  $add--error: false
+) {
+  #{$paginator-selector} {
+    @extend %paginator;
+    @extend %body-regular-s;
+  }
+
+  #{$paginator__go-to-selector} {
+    @extend %paginator__go-to;
+  }
+
+  #{$paginator__items-per-page-selector} {
+    @extend %paginator__items-per-page;
+  }
+
+  #{$paginator__items-per-page__info-selector} {
+    @extend %paginator__items-per-page__info;
+  }
+
+  @include button-tertiary($selector: #{$paginator__first-button-selector});
+
+  @include button-icon-only($selector: #{paginator__first-button-selector});
+
+  @include button-tertiary($selector: #{$paginator__last-button-selector});
+
+  @include button-icon-only($selector: #{paginator__last-button-selector});
+
+  @include button-tertiary($selector: #{$paginator__next-button-selector});
+
+  @include button-icon-only($selector: #{paginator__next-button-selector});
+
+  @include button-tertiary($selector: #{$paginator__previous-button-selector});
+
+  @include button-icon-only($selector: #{paginator__previous-button-selector});
+
+  #{$paginator__first-button-selector}::before,
+  #{$paginator__last-button-selector}::before,
+  #{$paginator__next-button-selector}::before,
+  #{$paginator__previous-button-selector}::before {
+    @extend %paginator__pages__button__selector--before;
+  }
+
+  #{$paginator__previous-button-selector}::before {
+    --button-arrow-icon: var(--icon__system_chevron-left_primary--enabled);
+  }
+
+  #{$paginator__next-button-selector}::before {
+    --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled);
+  }
+
+  #{$paginator__first-button-selector}::before {
+    --button-arrow-icon: var(--icon__system_chevron-pag-left_primary--enabled);
+  }
+
+  #{$paginator__last-button-selector}::before {
+    --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled);
+  }
+
+  #{$paginator__navigation-pages-selector} {
+    @extend %paginator__pages;
+  }
+
+  #{$paginator__navigation-page-selector} {
+    @extend %paginator__pages__button;
+
+    &:hover {
+      @extend %paginator__pages__button--hover;
+    }
+  }
+
+  #{$paginator__navigation-page-active-selector} {
+    @extend %body-semi-bold-s;
+    @extend %paginator__pages__button--active;
+  }
+
+  @include combo-box(
+    $combo-box-selector: #{$paginator__combo-box-selector},
+    $combo-box--disabled-selector: #{$paginator__combo-box--disabled-selector},
+    $combo-box__placeholder-selector:
+      #{$paginator__combo-box__placeholder-selector},
+    $window-selector: #{$paginator__window-selector},
+    $group-selector: #{$paginator__group-selector},
+    $group__content-selector: #{$paginator__group__content-selector},
+    $group__header-selector: #{$paginator__group__header-selector},
+    $group__header--disabled-selector:
+      #{$paginator__group__header--disabled-selector},
+    $group__header--expandable-selector:
+      #{$paginator__group__header--expandable-selector},
+    $item-selector: #{$paginator__item-selector},
+    $item--disabled-selector: #{$paginator__item--disabled-selector},
+    $item--nested-selector: #{$paginator__item--nested-selector},
+    $item--selected-selector: #{$paginator__item--selected-selector},
+    $add--disabled: false,
+    $add--placeholder: false,
+    $add--error: false
+  );
+
+  #{$paginator__combo-box-selector} {
+    @extend %paginator__combo-box;
+  }
+
+  @include input(
+    $input-selector: $paginator__go-to__input-selector,
+    $add--disabled: false,
+    $add--error: false,
+    $add--placeholder: false
+  );
+
+  @include label(
+    $label-selector: #{$paginator__items-per-page__label-selector}
+  );
+}

packages/mercury/src/mercury.scss

@@ -68,6 +68,7 @@
 @use "components/list-box/list-box-styles" as *;
 @use "components/markdown-viewer/markdown-viewer-styles" as *;
 @use "components/navigation-list/navigation-list-styles" as *;
+@use "components/paginator/paginator-styles" as *;
 @use "components/pills/pills-styles" as *;
 @use "components/property-grid/property-grid-styles" as *;
 @use "components/radio-group/radio-group-styles" as *;
@@ -148,6 +149,7 @@
   $list-box: true,
   $markdown-viewer: true,
   $navigation-list: true,
+  $paginator: true,
   $pills: true,
   $radio-group: true,
   $segmented-control: true,
@@ -436,6 +438,10 @@
     @include navigation-list();
   }
 
+  @if $paginator {
+    @include paginator();
+  }
+
   @if $pills {
     @include pills();
   }
@@ -550,6 +556,7 @@
   $list-box: false,
   $markdown-viewer: false,
   $navigation-list: false,
+  $paginator: false,
   $pills: false,
   $radio-group: false,
   $segmented-control: false,
@@ -625,6 +632,7 @@
     $list-box: $list-box,
     $markdown-viewer: $markdown-viewer,
     $navigation-list: $navigation-list,
+    $paginator: $paginator,
     $pills: $pills,
     $radio-group: $radio-group,
     $segmented-control: $segmented-control,