@genexus/genexus-ide-ui 0.0.83 → 0.0.85

package/dist/node_modules/@genexus/gemini/dist/collection/components/card/card.css

@@ -681,7 +681,7 @@ FORM ELEMENTS
 :host {
   display: block;
   background: var(--color-on-primary);
-  box-shadow: var(--box-shadow-01);
+  box-shadow: var(--box-shadow-card);
   border-radius: var(--border-radius-md);
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-regular);
@@ -693,11 +693,11 @@ FORM ELEMENTS
 }
 
 :host([elevation=xs]) {
-  box-shadow: var(--box-shadow-01);
+  box-shadow: var(--box-shadow-card);
 }
 
 :host([elevation=m]) {
-  box-shadow: var(--box-shadow-03);
+  box-shadow: var(--box-shadow-card);
 }
 
 :host([padding="0"]) {
@@ -746,6 +746,7 @@ FORM ELEMENTS
   /* Handle on hover */
   cursor: initial;
   overflow: auto;
+  height: 100%;
 }
 .content::-webkit-scrollbar {
   width: var(--gxg-scrollbar-width, 6px);
@@ -765,82 +766,214 @@ FORM ELEMENTS
   background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
 }
 
-/*********************************************
-Mercury
-**********************************************/
-:host(.mercury) {
-  /*general styles for all type of cards*/
-  /*this is usually a mixing to include in every mercury component*/
-  font-family: var(--font-family-primary);
-  font-size: var(--mc-font-size-xs);
-  color: var(--gray-03);
-  line-height: var(--line-height-default);
-  font-weight: var(--font-weight-regular);
-  box-sizing: border-box;
-  padding: 0;
-  border-radius: 0;
-  background-color: var(--gray-10);
+/*No Shadow*/
+:host(.card--no-shadow) {
   box-shadow: none;
-  color: var(--gray-04);
 }
 
-/*type "section"*/
-:host(.mercury.card--section) .content {
-  padding: var(--mc-card-section-padding--v) var(--mc-card-section-padding--h);
+/*Title*/
+:host(.card--title) .wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  grid-template-rows: auto 1fr;
 }
-:host(.mercury.card--section) .card__header {
-  text-transform: capitalize;
+
+:host(.card) {
+  background-color: var(--gray-00);
+}
+:host(.card) .card__header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: var(--spacing-comp-04) var(--spacing-comp-04) 0 var(--spacing-comp-04);
+  padding-block-end: var(--spacing-comp-04);
+  border-block-end: 1px solid var(--gray-02);
+  gap: var(--spacing-comp-06);
+}
+:host(.card) .card__header--left {
   display: flex;
+  align-items: center;
   gap: var(--spacing-comp-03);
-  margin: var(--mc-card-section-padding--v) var(--mc-card-section-padding--h) 0 var(--mc-card-section-padding--h);
-  padding-bottom: var(--mc-card-section-padding--v);
-  border-bottom: var(--border-width-sm) solid var(--gray-13);
+  width: 50%;
+}
+:host(.card) .card__header--left .card-title-wrapper {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:host(.card) .card__header--right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: end;
+  gap: var(--spacing-comp-03);
+  font-size: var(--font-size-xl);
+  width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+:host(.card) .card__header .subtitle-wrapper {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-on-background);
+  padding-inline-end: 3px;
+  /*prevents text cut text if italic, due to ellipsis*/
+}
+:host(.card) .card__header .subtitle-wrapper a {
+  color: var(--gray-06);
+}
+:host(.card) .card__header .subtitle {
+  white-space: nowrap;
+  color: var(--color-on-background);
+}
+:host(.card) .content {
+  padding: var(--spacing-comp-04);
+  font-size: inherit;
+  line-height: var(--line-height-default);
+  color: var(--gray-06);
 }
 
-/*no padding top*/
-:host(.mercury.card--section[no-padding-top]) .content {
-  padding-top: 0;
+/*--- Section ---*/
+:host(.card--section) {
+  font-size: 13px;
+  border-radius: var(--border-radius-lg);
+  padding: 0;
 }
 
-/*type "article"*/
-:host(.mercury.card--article) {
+/*--- Article ---*/
+:host(.card--article) {
+  background-color: var(--gray-01);
+  font-size: 12px;
+  border: 1px solid var(--gray-02);
+  border-radius: var(--border-radius-md);
+  padding: 0;
+}
+:host(.card--article) .card__header .card__title {
+  margin: 0;
   color: var(--gray-06);
-  font-size: var(--mc-font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: var(--font-weight-regular);
+  font-size: 14px;
 }
-:host(.mercury.card--article) .content {
-  padding: var(--mc-card-article-padding--v) var(--mc-card-article-padding--h);
+:host(.card--article) .card__header .subtitle-wrapper {
+  color: var(--gray-06);
+  font-style: italic;
+}
+:host(.card--article) .content {
+  font-style: italic;
+  color: var(--gray-04);
+  line-height: var(--line-height-comfortable);
 }
 
-/*type "mini"*/
-:host(.mercury.card--mini) {
-  color: var(--gray-05);
-  font-size: var(--mc-font-size-xxs);
+/*semibold*/
+:host(.card--article.title-semibold) .card__header .card__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+/*--- Mini ---*/
+:host(.card--mini) {
+  background-color: var(--gray-01);
+  font-size: 12px;
+  border: 1px solid var(--gray-02);
+  border-radius: var(--border-radius-md);
+  padding: 0;
 }
-:host(.mercury.card--mini) .card__header {
-  text-transform: capitalize;
-  margin: var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h) 0 var(--mc-card-mini-padding--h);
+:host(.card--mini) .card__header {
+  margin: var(--spacing-comp-02) var(--spacing-comp-02) 0 var(--spacing-comp-02);
+  padding-block-end: var(--spacing-comp-02);
+  border-bottom: 0;
 }
-:host(.mercury.card--mini) .content {
-  padding: var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h);
+:host(.card--mini) .card__header .card__header--left {
+  width: 100%;
 }
-
-/*type "article" or "mini" shared styles*/
-:host(.mercury.card--article),
-:host(.mercury.card--mini) {
-  border-radius: var(--border-radius-sm);
-  border: var(--border-width-sm) solid var(--gray-00);
+:host(.card--mini) .card__header .card__title {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--gray-06);
+}
+:host(.card--mini) .content {
+  font-style: italic;
+  padding: 0 var(--spacing-comp-02) var(--spacing-comp-02) var(--spacing-comp-02);
+  color: var(--gray-04);
 }
 
-/*with title*/
-:host(.mercury.card--title) .wrapper {
-  display: grid;
-  height: 100%;
-  grid-template-rows: auto 1fr;
+:host(.card--no-content) .card__header {
+  border-bottom: 0;
 }
 
 /*actionable*/
-:host(.mercury.card--actionable:hover) {
+:host(.card--actionable:hover) {
+  filter: brightness(var(--gxg-filter-brightness--hover));
+  background-color: var(--gray-01);
+  border-color: var(--gray-03);
+}
+:host(.card--actionable:hover) .card__header,
+:host(.card--actionable:hover) .content {
   cursor: pointer;
+}
+
+/*no header border*/
+:host(.no-header-border) .card__header {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+/*hiChar*/
+.hiChar {
+  color: var(--gxg-hi-char-color);
+  font-weight: 600;
+}
+
+/*********************************************
+Mercury
+**********************************************/
+/*--- General ---*/
+:host(.mercury.card) {
+  color: var(--gray-04);
+  background-color: var(--gray-10);
+}
+:host(.mercury.card) .card__header {
+  border-block-end-color: var(--gray-13);
+}
+:host(.mercury.card) .content {
+  color: var(--gray-04);
+  font-size: var(--mc-font-size-xs);
+}
+
+/*--- Section Type ---*/
+:host(.mercury.card--section) {
+  border-radius: var(--border-radius-md);
+}
+
+/*--- Article Type ---*/
+:host(.mercury.card--article) {
+  border-color: var(--gray-00);
   background-color: var(--gray-11);
+  box-shadow: none;
+}
+:host(.mercury.card--article) .subtitle-wrapper {
+  font-size: var(--mc-font-size-xs);
+  color: var(--gray-03);
+}
+
+/*--- Mini Type ---*/
+:host(.mercury.card--mini) {
+  border-color: var(--gray-00);
+  box-shadow: none;
+}
+:host(.mercury.card--mini) .content {
+  font-size: var(--mc-font-size-xxs);
+}
+
+/*actionable*/
+:host(.mercury.card--actionable:hover) {
   border-color: var(--gray-01);
+  background-color: var(--gray-11);
+  cursor: pointer;
 }

package/dist/node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.css

@@ -57,7 +57,7 @@ ch-window::part(window) {
   display: flex;
   flex-direction: column;
   margin-block-start: var(--spacing-comp-05);
-  gap: var(--spacing-comp-03);
+  gap: var(--spacing-comp-02);
   max-width: 400px;
 }
 .loader__content-wrapper--hidden {

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-bar/tab-bar.css

@@ -363,7 +363,6 @@ FORM ELEMENTS
   margin-bottom: 0;
   margin-top: 0;
   font-family: var(--font-family-primary);
-  background-color: var(--color-background);
 }
 :host .tab-bar__menu {
   display: flex;

package/dist/node_modules/@genexus/gemini/dist/collection/components/title/title.css

@@ -686,6 +686,7 @@ FORM ELEMENTS
   margin: 0;
   color: inherit;
   background-color: transparent;
+  line-height: 1.8em;
 }
 
 /*Aligment*/

package/dist/types/common/helpers.d.ts

@@ -11,8 +11,7 @@ export declare const getElementSelectorParts: (element: HTMLElement) => string[]
  */
 export declare const querySelectorPart: (selector: string) => HTMLElement;
 export declare const formatDate: (date: Date, type?: FormatDateType) => string;
-export type FormatDateType = "date" | "date-time" | "date-time-short";
-export declare const resolveGxgIconPath: (gxgIconName: string) => string;
+export type FormatDateType = "date" | "date-time" | "date-time-short" | "pretty";
 export declare const countTreeItems: (treeModel: TreeViewItemModel[], children?: boolean) => number;
 /**
  * @description it evaluates the initial selected combo item

package/dist/types/components/_helpers/card/card.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+export declare class GxIdeCard {
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _componentLocale;
+  private renderedFirstTime;
+  el: HTMLGxIdeCardElement;
+  /**
+   * The card title (required)
+   */
+  readonly cardTitle: string;
+  /**
+   * An optional sub-title that will show on the oposite side of the main title.
+   */
+  readonly cardSubTitle: string;
+  /**
+   * An optional icon that will show before the title
+   */
+  readonly icon: string;
+  /**
+   * @description Gets fired when the component has rendered for the first time.
+   */
+  componentDidRenderFirstTime: EventEmitter<string>;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/start-page/recent-news.d.ts

@@ -0,0 +1,39 @@
+import { NewsData, GetNewsCallback, OpenNewsCallback } from "./start-page";
+export declare class GxIdeRecentNews {
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _componentLocale;
+  el: HTMLGxIdeRecentNewsElement;
+  private loaderEl;
+  private newsContainerEl;
+  private newsRendered;
+  private setTimeOutNewsDelay;
+  /**
+   * The list of news
+   */
+  news: NewsData[];
+  watchNewsHandler(): void;
+  /**
+   * True if news couldn't be loaded
+   */
+  newsLoadFailed: boolean;
+  /**
+   * Callback invoked to load the news feed (right panel "Recent News").
+   */
+  readonly getNewsCallback: GetNewsCallback;
+  /**
+   * Callback invoked to open a news article.
+   */
+  readonly openNewsCallback: OpenNewsCallback;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  private evaluateNewsDisplay;
+  private displayNews;
+  private attachLoaderEvents;
+  private getNews;
+  private NewsClickHandler;
+  private renderNews;
+  render(): any;
+}

package/dist/types/components/start-page/start-page.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class GxIdeStartPage {
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _componentLocale;
+  el: HTMLGxIdeStartPageElement;
+  kbsFilterValue: string;
+  /**
+   * True if the component has been rendered for the first time.
+   */
+  renderedFirstTime: boolean;
+  /**
+   * A temporary array of news for testing purposes
+   */
+  readonly news: NewsData[];
+  /**
+   * Ann array of the user's KB's
+   */
+  readonly kbs: RecentKBData[];
+  /**
+   * Callback invoked to open a knowledge base when the user clicks on a KB card.
+   */
+  readonly openKbCallback: OpenKbCallback;
+  /**
+   * Callback invoked to load the news feed (right panel "Recent News").
+   */
+  readonly getNewsCallback: GetNewsCallback;
+  /**
+   * Callback invoked to open a news article.
+   */
+  readonly openNewsCallback: OpenNewsCallback;
+  /**
+   * @description Gets fired when the component has rendered for the first time.
+   */
+  componentDidRenderFirstTime: EventEmitter<string>;
+  componentWillLoad(): Promise<void>;
+  private getNewsCallbackRecentNews;
+  componentDidRender(): void;
+  private kbClickHandler;
+  private searchKbsInputHandler;
+  private renderKb;
+  private renderHomeTabContent;
+  private renderTabs;
+  render(): any;
+}
+export type OpenKbCallback = (id: string) => Promise<void>;
+export type GetNewsCallback = () => Promise<NewsData[]>;
+export type OpenNewsCallback = (id: string) => Promise<void>;
+export type RecentKBData = {
+  id: string;
+  name: string;
+  lastOpenedDate?: Date;
+};
+export type NewsData = {
+  id: string;
+  title: string;
+  body: string;
+};