@genexus/genexus-ide-ui 1.0.1 → 1.0.3

package/dist/collection/components/new-object/new-object.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +569,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/new-object/new-object.js

@@ -305,7 +305,7 @@ export class GxIdeNewObject {
                 "mutable": false,
                 "complexType": {
                     "original": "EntityData",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
                         "EntityData": {
                             "location": "import",
@@ -326,7 +326,7 @@ export class GxIdeNewObject {
                 "mutable": false,
                 "complexType": {
                     "original": "EntityData",
-                    "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+                    "resolved": "{ id: string; name: string; iconSrc?: string; }",
                     "references": {
                         "EntityData": {
                             "location": "import",

package/dist/collection/components/object-selector/gx-ide-assets/object-selector/langs/object-selector.lang.en.json

@@ -2,12 +2,11 @@
   "componentName": "Object Selector",
   "location": "Location",
   "filter": {
-    "title": "Filters",
     "pattern": "Pattern",
     "type": "Type",
     "category": "Category",
     "module": "Module",
-    "modified": "Modified",
+    "after": "After",
     "afterNone": "None",
     "afterDateTime": "After Date/Time",
     "afterLastBuild": "After Last Build",
@@ -44,5 +43,8 @@
   "loader": {
     "title": "Loading Objects...",
     "cancelLabel": "Cancel Process"
+  },
+  "emptyState": {
+    "title": "You search did not match any object"
   }
 }

package/dist/collection/components/object-selector/gx-ide-assets/object-selector/langs/object-selector.lang.ja.json

@@ -2,11 +2,11 @@
   "componentName": "オブジェクトセレクター",
   "location": "場所",
   "filter": {
-    "title": "フィルタ",
     "pattern": "パターン",
     "type": "タイプ",
     "category": "カテゴリ",
     "module": "モジュール",
+    "after": "",
     "modified": "変更あり",
     "afterNone": "なし",
     "afterDateTime": "日付/時刻以降",
@@ -44,5 +44,8 @@
   "loader": {
     "title": "オブジェクトのロード中...",
     "cancelLabel": "プロセスをキャンセル"
+  },
+  "emptyState": {
+    "title": ""
   }
-}
+}

package/dist/collection/components/object-selector/gx-ide-assets/object-selector/shortcuts.json

@@ -1,6 +1,6 @@
 [
   {
-    "selector": "[part~='gxg-button--ok']",
+    "selector": "[part~='button-confirm']",
     "keyShortcuts": "Enter",
     "action": "click",
     "conditions": {
@@ -8,7 +8,7 @@
     }
   },
   {
-    "selector": "[part~='gxg-button--cancel']",
+    "selector": "[part~='button-cancel']",
     "keyShortcuts": "Escape",
     "action": "click"
   }

package/dist/collection/components/object-selector/helpers.js

@@ -0,0 +1,13 @@
+// - - - - - - - - - - - -
+// Data Mappings
+// - - - - - - - - - - - -
+// ch-combo-box-render
+export const mapObjectTypeToComboBoxItemModel = (objectTypeModel) => objectTypeModel.map(objectType => ({
+    value: objectType.id,
+    caption: objectType.name
+}));
+export const mapCategoryToComboBoxItemModel = (categoryModel) => categoryModel.map(category => ({
+    value: category.id,
+    caption: category.label
+}));
+//# sourceMappingURL=helpers.js.map

package/dist/collection/components/object-selector/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/object-selector/helpers.ts"],"names":[],"mappings":"AAEA,0BAA0B;AAC1B,gBAAgB;AAChB,0BAA0B;AAE1B,sBAAsB;AAEtB,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,eAA6B,EACd,EAAE,CACjB,eAAe,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IACjC,KAAK,EAAE,UAAU,CAAC,EAAE;IACpB,OAAO,EAAE,UAAU,CAAC,IAAI;CACzB,CAAC,CAAC,CAAC;AACN,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAC5C,aAAyB,EACV,EAAE,CACjB,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7B,KAAK,EAAE,QAAQ,CAAC,EAAE;IAClB,OAAO,EAAE,QAAQ,CAAC,KAAK;CACxB,CAAC,CAAC,CAAC","sourcesContent":["import { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\nimport { ObjectType, GxOption } from \"../../common/types\";\n// - - - - - - - - - - - -\n// Data Mappings\n// - - - - - - - - - - - -\n\n// ch-combo-box-render\n\nexport const mapObjectTypeToComboBoxItemModel = (\n  objectTypeModel: ObjectType[]\n): ComboBoxModel =>\n  objectTypeModel.map(objectType => ({\n    value: objectType.id,\n    caption: objectType.name\n  }));\nexport const mapCategoryToComboBoxItemModel = (\n  categoryModel: GxOption[]\n): ComboBoxModel =>\n  categoryModel.map(category => ({\n    value: category.id,\n    caption: category.label\n  }));\n"]}

package/dist/collection/components/object-selector/object-selector.css

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,70 +569,56 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
 :host {
-  display: block;
-  border: 1px solid var(--gxg-border-color--regular);
-  background-color: var(--mer-color__surface);
+  block-size: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  overflow: auto;
 }
 
 /* Filters */
-.filter-grid {
-  display: grid;
-  padding: var(--mer-spacing--sm);
-  row-gap: var(--gx-ide-grid-row-gap);
-  column-gap: var(--gx-ide-grid-column-gap);
-  border-block-start: 1px solid var(--gx-ide-container-border-color);
-  border-block-end: 1px solid var(--gx-ide-container-border-color);
+.filter-layout {
+  grid-template: "pattern type" "category module" "modified modified";
   grid-template-columns: 1fr 1fr;
-  grid-template-areas: "pattern type" "category module-folder" "modified-row modified-row";
 }
-.filter-grid .pattern {
+
+.pattern {
   grid-area: pattern;
 }
-.filter-grid .type {
+
+.type {
   grid-area: type;
 }
-.filter-grid .category {
+
+.category {
   grid-area: category;
 }
-.filter-grid .module-folder {
-  grid-area: module-folder;
-}
-.filter-grid .modified-row {
-  grid-area: modified-row;
-}
-.filter-grid--no-title {
-  border-top: 0;
-}
 
-/*modified row*/
-.modified-row {
-  min-height: 24px;
-  display: flex;
-  align-items: center;
-  gap: var(--gx-ide-grid-column-gap);
-  flex: 1;
-}
-.modified-row__inner-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--gx-ide-grid-column-gap);
-  flex: 1;
+.module {
+  grid-area: module;
 }
-.modified-row__inner-wrapper .date-time {
+
+.modified-accordion {
+  grid-area: modified;
   display: flex;
-  align-items: center;
-}
-.modified-row .user {
-  max-width: 205px !important;
+  flex-direction: column;
 }
-.modified-row .date-time {
-  flex: 1;
+
+.field-group-modified {
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
 gx-ide-container::part(content) {
@@ -597,13 +643,36 @@ ch-tabular-grid {
 }
 /* Objects Table */
 .objects-count {
-  display: flex;
-  justify-content: space-around;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-block-start: var(--mer-border__width--sm) solid var(--mer-color__elevation--04);
+}
+
+.objects-selected {
+  text-align: start;
+}
+
+.objects-matching {
+  text-align: end;
+}
+
+.objects-selected,
+.objects-matching {
+  padding: var(--mer-spacing--xs) var(--mer-spacing--md);
+}
+
+div.buttons-footer {
+  justify-content: space-between;
+}
+
+ch-tabular-grid-rowset-empty {
+  position: relative;
 }
-.objects-count > * {
-  flex: 1;
-  padding: var(--mer-spacing--2xs);
+
+ch-tabular-grid.empty-result::part(main) {
+  overflow: hidden;
 }
-.objects-count > :not(:last-child) {
-  border-inline-end: 1px solid var(--gx-ide-container-border-color);
+
+input::-webkit-datetime-edit-fields-wrapper {
+  padding: none;
 }