@genexus/genexus-ide-ui 0.0.12 → 0.0.14

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

@@ -659,6 +659,33 @@ FORM ELEMENTS
 :host h4,
 :host h5 {
   margin: 0;
+  color: inherit;
+  background-color: transparent;
+}
+
+/*Aligment*/
+:host([alignment=start]) h1,
+:host([alignment=start]) h2,
+:host([alignment=start]) h3,
+:host([alignment=start]) h4,
+:host([alignment=start]) h5 {
+  text-align: start;
+}
+
+:host([alignment=center]) h1,
+:host([alignment=center]) h2,
+:host([alignment=center]) h3,
+:host([alignment=center]) h4,
+:host([alignment=center]) h5 {
+  text-align: center;
+}
+
+:host([alignment=end]) h1,
+:host([alignment=end]) h2,
+:host([alignment=end]) h3,
+:host([alignment=end]) h4,
+:host([alignment=end]) h5 {
+  text-align: end;
 }
 
 /*********************************************

package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-item/gxg-tree-item.css

@@ -719,7 +719,7 @@ FORM ELEMENTS
 }
 :host li .li-text:focus {
   outline-style: solid;
-  outline-color: var(--color-primary-enabled);
+  outline-color: var(--color-primary-active);
   outline-width: var(--border-width-md);
   outline-offset: -2px;
 }

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

@@ -1,8 +1,8 @@
-import { GxgFormItem, GxgOption } from "./types";
-export declare const renderFormItems: (componentType: "gxg-combo-box-item" | "gxg-form-checkbox" | "gxg-form-radio", options: Array<GxgFormItem>, group?: string, callback?: any) => (HTMLGxgComboBoxItemElement | HTMLGxgFormCheckboxElement | HTMLGxgFormRadioElement)[];
+import { GxOption } from "./types";
+export declare const renderFormItems: (componentType: "gxg-combo-box-item" | "gxg-form-checkbox" | "gxg-form-radio", options: Array<GxOption>, group?: string, callback?: any) => (HTMLGxgComboBoxItemElement | HTMLGxgFormCheckboxElement | HTMLGxgFormRadioElement)[];
 /**
  *
- * @param gxgOptions An array of GxgOptions's
+ * @param gxOptions An array of GxOptions's
  * @returns The first option in the array that is 'selected'. If no one found it returns null.
  */
-export declare const getSelectedGxgOption: (gxgOptions: GxgOption[]) => GxgOption;
+export declare const getSelectedGxOption: (gxOptions: GxOption[]) => GxOption;

package/dist/types/common/form-validation.d.ts

@@ -0,0 +1,2 @@
+import { FormSubmitResult } from "../common/types";
+export declare const formSubmitValidation: (result: FormSubmitResult, ref: any) => void;

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

@@ -1,3 +0,0 @@
-export interface GxValidatableComponent {
-  validate: () => Promise<boolean>;
-}

package/dist/types/common/render-suggest.d.ts

@@ -0,0 +1,2 @@
+import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/suggest-list/ch-suggest-list";
+export declare const renderSuggestLists: (suggestData: SuggestData) => HTMLChSuggestListElement[];

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

@@ -1,19 +1,8 @@
 export type GxgFormItemsArray = (HTMLGxgComboBoxItemElement | HTMLGxgFormCheckboxElement | HTMLGxgFormRadioElement)[] | null;
-export type GxgFormItem = {
+export type GxOption = {
   id: string;
-  label: string;
-  value: string;
-  type?: string;
-  disabled?: boolean;
-  checked?: boolean;
-  selected?: boolean;
-  iconName?: string;
-  iconColor?: string;
-};
-export type GxgOption = {
-  id: string;
-  label: string;
-  value: string;
+  label?: string;
+  value?: string;
   type?: string;
   disabled?: boolean;
   checked?: boolean;
@@ -23,9 +12,12 @@ export type GxgOption = {
 };
 export type Position = "above" | "end" | "below" | "start";
 export type LabelPosition = "start" | "above";
+export type FormElementValidation = {
+  key: string;
+  message: string;
+  hasError: boolean;
+};
 export type FormSubmitResult = {
-  element: {
-    status: "error" | "warning" | "success";
-    message: string;
-  };
+  success: boolean;
+  fieldErrors: FormElementValidation[];
 };

package/dist/types/components/_template/template.d.ts

@@ -6,14 +6,14 @@ export declare class GxIdeTemplate {
   private _componentLocale;
   el: HTMLGxIdeTemplateElement;
   /**
-   * The label
+   * If true, will hide the top-bar
    */
-  readonly firstName: string;
+  readonly hideTopBar = false;
   /**
-   * This event is emitted once just after the component is fully loaded and the first render() occurs.
+   * @description Gets fired when the component has rendered for the first time.
    */
-  componentDidLoadEvent: EventEmitter<boolean>;
+  componentDidRenderEvent: EventEmitter<string>;
   componentWillLoad(): Promise<void>;
-  private renderPresentation;
+  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/container/container.d.ts

@@ -0,0 +1,117 @@
+import { TitleAlignment } from "@genexus/gemini/dist/types/common/types";
+export declare class GxIdeContainer {
+  /**
+   * Makes this component content act as a fieldset
+   */
+  fieldset: boolean;
+  /**
+   * The title of the container
+   */
+  readonly containerTitle: string;
+  /**
+   * Displays a border all around the container
+   */
+  readonly displayBorder: boolean;
+  /**
+   * Displays a border on the top
+   */
+  readonly displayBorderTop: boolean;
+  /**
+   * Displays a border at the end
+   */
+  readonly displayBorderEnd: boolean;
+  /**
+   * Displays a border at on the bottom
+   */
+  readonly displayBorderBottom: boolean;
+  /**
+   * Displays a border at the start
+   */
+  readonly displayBorderStart: boolean;
+  /**
+   * The container general padding (applies to .heading, .content, and .footer)
+   */
+  readonly sectionsPadding: SectionsPadding;
+  /**
+   * Makes the container full height (content will grow only)
+   */
+  readonly fullHeight: boolean;
+  /**
+   * Title alignment
+   */
+  readonly titleAlignment: TitleAlignment;
+  /**
+   * Removes the border bottom from the heading
+   */
+  readonly noHeadingBorder: boolean;
+  /**
+   * Removes the padding from the heading
+   */
+  readonly noHeadingPadding: boolean;
+  /**
+   * The heading justification
+   */
+  readonly headingJustify: HeadingJustify;
+  /**
+   * Removes the padding from the content
+   */
+  readonly noContentPadding: boolean;
+  /**
+   * Removes the gap from the content
+   */
+  readonly noContentGap: boolean;
+  /**
+   * Align items
+   */
+  readonly alignItems: AlignItems;
+  /**
+   * Justify content
+   */
+  readonly justifyContent: JustifyContent;
+  /**
+   * Removes the padding from the footer
+   */
+  readonly noFooterPadding: boolean;
+  /**
+   * The footer justification
+   */
+  readonly footerJustify: FooterJustify;
+  /**
+   * Removes the border top from the footer
+   */
+  readonly noBorderFooter: boolean;
+  el: HTMLGxIdeContainerElement;
+  /**
+   * A boolean variable indicating if the component has or not any content for the 'header' slot
+   */
+  hasHeaderSlot: boolean;
+  /**
+   * A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)
+   */
+  hasSlottedContent: boolean;
+  /**
+   * A boolean variable indicating if the component has or not any content for the 'footer' slot
+   */
+  hasFooterSlot: boolean;
+  /**
+   * A boolean variable indicating that the container only has the heading section
+   */
+  hasOnlyHeading: boolean;
+  /**
+   * A boolean variable indicating that the container only has the footer section
+   */
+  hasOnlyFooter: boolean;
+  componentWillLoad(): void;
+  private evaluateSlots;
+  private evaluateFullHeight;
+  private evaluateSections;
+  private headingClasses;
+  private contentClasses;
+  private footer;
+  render(): any;
+}
+export type HeadingJustify = "start" | "center" | "end";
+export type FooterJustify = "start" | "center" | "end";
+export type SectionsPadding = "s" | "m" | "l";
+export type AlignItems = "start" | "center" | "end";
+export type JustifyContent = "start" | "center" | "end";

package/dist/types/components/new-environment/new-environment.d.ts

@@ -0,0 +1,91 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { GxOption } from "../../common/types";
+import { FormSubmitResult } from "../../common/types";
+export declare class GxIdeNewEnvironment {
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _componentLocale;
+  el: HTMLGxIdeNewEnvironmentElement;
+  private nameEl;
+  private languageEl;
+  private runtimeGroup;
+  private dataStoreEl;
+  private frontEndsEl;
+  private runtimeEl;
+  /**
+   * If true, will hide the top-bar
+   */
+  readonly hideTopBar = false;
+  /**
+   * It allows defining the DBMS that will be used in the solution
+   */
+  readonly dataStores: GxOption[];
+  /**
+   * It allows selecting multiple generators for the front end
+   */
+  readonly frontEnds: GxOption[];
+  /**
+   * Specify whether it is feasible to display information related to local configuration parameters
+   */
+  readonly disableAdvanced: boolean;
+  /**
+   * Belongs to checkbox 'Set as current environment' @default true
+   *
+   */
+  readonly setAsTarget?: boolean;
+  /**
+   * Possible values for 'Runtime Environment' radio button
+   */
+  readonly runtimes: GxOption[];
+  /**
+   * Possible values for 'Language' combo
+   */
+  readonly languages: GxOption[];
+  /**
+   * Name of the new environment
+   */
+  readonly environmentName: string;
+  /**
+   * Callback that will be invoked when user confirms the KB creation
+   */
+  readonly createCallback: CreateCallback;
+  /**
+   * Callback that will be invoked when user wants to cancel
+   */
+  readonly cancelCallback: CancelCallback;
+  /**
+   * Callback that will be invoked when when any of the following data is modified: "Runtime Environment", "Data Store", "Language".
+   */
+  readonly changedCallback: ChangedCallback;
+  /**
+   * @description Gets fired when the component has rendered for the first time.
+   */
+  componentDidRenderEvent: EventEmitter<string>;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  private getFrontEndOptionsValues;
+  private getRuntimeValue;
+  private setEnvironmentHandler;
+  private cancelButtonClickedHandler;
+  private runtimeEnvironmentChangedHandler;
+  private languageValueChangedHandler;
+  private dataStoreValueChangedHandler;
+  /**
+   * @description This function is called when any of the following data is modified: "Runtime Environment", "Data Store", "Language".
+   */
+  private changedHandler;
+  private renderTabBasic;
+  private renderTabAdvanced;
+  render(): any;
+}
+export interface NewEnvironmentData {
+  name: string;
+  runtime: GxOption[];
+  language: string;
+  dataStores: string;
+  frontEnds: GxOption[];
+}
+export type CreateCallback = (data: NewEnvironmentData) => Promise<FormSubmitResult>;
+export type CancelCallback = () => Promise<void>;
+export type ChangedCallback = (data: NewEnvironmentData) => Promise<void>;

package/dist/types/components/new-kb/new-kb.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { GxgOption } from "../../common/types";
+import { GxOption } from "../../common/types";
 import { FormSubmitResult } from "../../common/types";
 export declare class GxIdeNewKb {
   [key: string]: any;
@@ -11,14 +11,38 @@ export declare class GxIdeNewKb {
    * An object with the initial value for each multi-option element.
    */
   private _initialComboValue;
+  el: HTMLGxIdeNewKbElement;
+  private authenticationTypeEl;
+  private collationEl;
+  private createDataFilesInKBFolderEl;
+  private databaseNameEl;
+  private dataSourceEl;
+  private frontEndsEl;
+  private kbNameEl;
+  private locationEl;
+  private passwordEl;
+  private prototypingEnvironmentEl;
+  private prototypingTargetEl;
+  private savePasswordEl;
+  private serverNameEl;
+  private userInterfaceLanguageEl;
+  private userNameEl;
+  createDataInKbDisabled: boolean;
+  userNameVisible: boolean;
+  passwordVisible: boolean;
+  savePasswordVisible: boolean;
+  /**
+   * If true, will hide the top-bar
+   */
+  readonly hideTopBar = false;
   /**
    * It allows defining the DBMS that will be used in the solution
    */
-  readonly dataSources: GxgOption[];
+  readonly dataSources: GxOption[];
   /**
    * It allows selecting multiple generators for the front end
    */
-  readonly frontEnds: GxgOption[];
+  readonly frontEnds: GxOption[];
   /**
    * Specify whether it is feasible to display information related to local configuration parameters
    */
@@ -30,7 +54,7 @@ export declare class GxIdeNewKb {
   /**
    * This is a function provided by the developer that returns a string, with the location path
    */
-  readonly selectLocationCallback: () => Promise<string>;
+  readonly selectLocationCallback: SelectLocationCallback;
   /**
    * The knowledge base default suggested name
    */
@@ -38,23 +62,23 @@ export declare class GxIdeNewKb {
   /**
    * It allows selecting the default environment that the KB will have (additional environments can be created later)
    */
-  readonly prototypingEnvironments: GxgOption[];
+  readonly prototypingEnvironments: GxOption[];
   /**
    * Path to a directory where the information related to the KB will be stored/generated
    */
-  readonly prototypingTargets: GxgOption[];
+  readonly prototypingTargets: GxOption[];
   /**
    * Specify the language in which the application screens will be developed (default language)
    */
-  readonly userInterfaceLanguages: GxgOption[];
+  readonly userInterfaceLanguages: GxOption[];
   /**
    * Defines the type of authentication for the connection to the previously defined database
    */
-  readonly authenticationTypes: GxgOption[];
+  readonly authenticationTypes: GxOption[];
   /**
    * DB Collations
    */
-  readonly collations: GxgOption[];
+  readonly collations: GxOption[];
   /**
    * Disabled if the first item of the 'Server Name' combo is selected
    */
@@ -74,7 +98,7 @@ export declare class GxIdeNewKb {
   /**
    * Name of the DB server where we want to persist the information of our KB
    */
-  readonly serverNames: GxgOption[];
+  readonly serverNames: GxOption[];
   /**
    * Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)
    */
@@ -86,38 +110,17 @@ export declare class GxIdeNewKb {
   /**
    * Callback that will be invoked when the user confirms KB creation (‘Create’ button)
    */
-  readonly createCallback: (data: NewKBData) => Promise<FormSubmitResult[]>;
+  readonly createCallback: CreateCallback;
   /**
    * Callback invoked when the user wants to cancel KB creation (‘Cancel’ button)
    */
-  readonly cancelCallback: () => Promise<void>;
-  el: HTMLGxIdeNewKbElement;
-  private authenticationTypeEl;
-  private collationEl;
-  private createDataFilesInKBFolderEl;
-  private databaseNameEl;
-  private dataSourceEl;
-  private frontEndsBoxEl;
-  private frontEndsOptionsArray;
-  private kbNameEl;
-  private locationEl;
-  private passwordEl;
-  private prototypingEnvironmentEl;
-  private prototypingTargetEl;
-  private savePasswordEl;
-  private serverNameEl;
-  private userInterfaceLanguageEl;
-  private userNameEl;
-  createDataInKbDisabled: boolean;
-  userNameVisible: boolean;
-  passwordVisible: boolean;
-  savePasswordVisible: boolean;
+  readonly cancelCallback: CancelCallback;
   /**
    * This event is emitted once just after the component is fully loaded and the first render() occurs
    */
-  componentDidLoadEvent: EventEmitter<boolean>;
+  componentDidRenderEvent: EventEmitter<boolean>;
   componentWillLoad(): Promise<void>;
-  componentDidLoad(): void;
+  componentDidRender(): void;
   /**
    * Set the initial/selected option for multi-option components
    */
@@ -134,8 +137,7 @@ export declare class GxIdeNewKb {
    * @description It allows defining the DBMS that will be used in the solution
    */
   private selectLocationHandler;
-  private getFrontEndsOptionsValues;
-  private validation;
+  private getFrontEndOptionsValues;
   private createKbHandler;
   private cancelKbHandler;
   private renderTabBasic;
@@ -151,7 +153,7 @@ export interface NewKBData {
   createDataFilesInKBFolder: boolean;
   databaseName: string;
   dataSource: string;
-  frontEnds: GxgOption[];
+  frontEnds: GxOption[];
   kbLocation: string;
   kbName: string;
   password: string;
@@ -162,3 +164,6 @@ export interface NewKBData {
   userInterfaceLanguage: string;
   userName: string;
 }
+export type CreateCallback = (data: NewKBData) => Promise<FormSubmitResult>;
+export type CancelCallback = () => Promise<void>;
+export type SelectLocationCallback = () => Promise<string>;

package/dist/types/components/references/helpers.d.ts

@@ -0,0 +1,17 @@
+import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/suggest-list/ch-suggest-list";
+import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
+import { SelectorCategoryData } from "./references";
+import { ObjectData } from "./references";
+import { ReferenceData } from "./references";
+/**
+ * @description This function converts SelectorCategoryData[] SuggestData
+ */
+export declare const convertObjectDataToSuggestData: (selectorCategoriesData: SelectorCategoryData[]) => SuggestData;
+/**
+ * @description Keeps an updated state of the last suggested categories objects passed by the host.
+ */
+export declare const updateSuggestedObjects: (selectorCategoryData: SelectorCategoryData[]) => ObjectData[];
+/**
+ * @description This function converts ReferenceData[] data to GxgTreeItemData[]
+ */
+export declare const convertReferenceDataToTreeData: (referencedBy: ReferenceData[] | undefined) => GxgTreeItemData[];

package/dist/types/components/references/references.d.ts

@@ -0,0 +1,125 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/suggest-list/ch-suggest-list";
+export declare class GxIdeReferences {
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _componentLocale;
+  /**
+   * Keeps an array of the last suggested objects, returned by selectorSourceCallback
+   */
+  private suggestedObjects;
+  /**
+   * The references messages max. width that appear if the tree is empty or could not be retrieved.
+   */
+  private referencesMessagesMaxWidth;
+  el: HTMLGxIdeReferencesElement;
+  private selectObjectSuggestEl;
+  private referencedByEl;
+  private referencesToEl;
+  /**
+   * Displays or hides the header-bottom section
+   */
+  barHidden: boolean;
+  /**
+   * The objects suggestions that will appear on the suggest
+   */
+  objectsSuggestions: SuggestData;
+  /**
+   * Keeps the objects that are referenced by the current selected object
+   */
+  referencedBy: ReferenceData[];
+  /**
+   * Keeps the objects that have references to the current selected object
+   */
+  referencesTo: ReferenceData[];
+  /**
+   * If true, will hide the top-bar
+   */
+  readonly hideTopBar = false;
+  /**
+   * Currently selected object
+   */
+  selectedObject?: ObjectData;
+  /**
+   * Callback invoked when user writes on object selector input, return possible options to show in autocomplete list
+   */
+  readonly selectorSourceCallback?: SelectorSourceCallback;
+  /**
+   * Callback invoked when a node is expanded in any of the references panels
+   */
+  readonly loadReferencesCallback?: LoadReferencesCallback;
+  /**
+   * Callback invoked when user wants to open an object
+   */
+  readonly openObjectCallback?: OpenObjectCallback;
+  /**
+   * Callback invoked when user wants to show object selection dialog
+   */
+  readonly openSelectorDialogCallback?: OpenSelectorDialogCallback;
+  /**
+   * Callback invoked when any item from the references panels is selected
+   */
+  readonly selectReferenceCallback?: SelectReferenceCallback;
+  selectedObjectHandler(newSelectedObject: ObjectData): void;
+  /**
+   * @description Gets fired when the component has rendered for the first time.
+   */
+  componentDidRenderEvent: EventEmitter<string>;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  /**
+   * @description It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
+   */
+  private attachSelectObjectListener;
+  /**
+   * @description It attaches several events on the 'referencedByEl' element, which is a tree.
+   */
+  private attachReferencedByListeners;
+  /**
+   * @description It attaches several events on the 'referencesToEl' element, which is a tree.
+   */
+  private attachReferencesToListeners;
+  /**
+   * @description This handler gets fired every time the value of the 'Select Object' ch-suggest changes. Then, it calls the 'updateSuggestedObjects' method, that keeps the state of the last suggested objects that were passed bu the host. Also, it shows the suggested objects on the ch-suggest box.
+   */
+  private selectObjectValueChangedHandler;
+  private openObjectCallbackHandler;
+  /**
+   * @description handler that gets fired when the use clicks on the ch-suggest button (...)
+   */
+  private openSelectorDialogCallbackHandler;
+  /**
+   * @description It evaluates if loadReferencesCallback should be called, depending wether there is or not an actual selected object.
+   */
+  private evaluateInitialReferenceData;
+  /**
+   * @description This method invokes 'loadReferencesCallback' callback for 'Is Referenced By' and 'Has References To' panels.
+   */
+  private loadReferencesHandler;
+  /**
+   * @description It hides/show the bar (The header bottom section).
+   */
+  private hideBarButtonClickedHandler;
+  render(): any;
+}
+export type SelectorCategoryData = {
+  name: string;
+  items: ObjectData[];
+};
+export type ObjectData = {
+  id: string;
+  icon: string;
+  name: string;
+  description?: string;
+};
+export type ReferenceData = ObjectData & {
+  hasChildren: boolean;
+  items?: ReferenceData[];
+};
+export type SelectorSourceCallback = (prefix: string) => Promise<SelectorCategoryData[]>;
+export type LoadReferencesCallback = (id: string, to: boolean) => Promise<ReferenceData[]>;
+export type OpenObjectCallback = (id: string) => Promise<void>;
+export type OpenSelectorDialogCallback = () => Promise<ObjectData | undefined>;
+export type SelectReferenceCallback = (id: string) => Promise<void>;

package/dist/types/components/top-bar/top-bar.d.ts

@@ -0,0 +1,14 @@
+export declare class GxIdeTopBar {
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _hasMenuSlot;
+  el: HTMLGxIdeTopBarElement;
+  /**
+   * The top bar title
+   */
+  readonly topBarTitle: string;
+  componentWillLoad(): void;
+  private evaluateSlots;
+  render(): any;
+}