@genexus/genexus-ide-ui 1.0.1 → 1.0.3

package/dist/genexus-ide-ui/p-4c52f542.entry.js

@@ -1,97 +0,0 @@
-import { r as e, c as r, h as t, H as i } from "./p-c147291f.js";
-
-const a = ":host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader__wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-top:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:var(--gxg-ide-loader-spinner__width);height:var(--gxg-ide-loader-spinner__width);flex-shrink:0}.loader__content-wrapper{display:flex;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--gxg-ide-loader-content-wrapper__gap);max-width:var(--gxg-ide-loader-content-wrapper__max-width)}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{from{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}to{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}:host([display-border]) .loader__wrapper{border:1px solid var(--mer-color__elevation--02)}";
-
-const o = class {
-  constructor(i) {
-    e(this, i);
-    this.loaderFinished = r(this, "loaderFinished", 7);
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-        this.renderTitle = () => this.loaderTitle ? t("gxg-title", {
-      class: "loader__title",
-      type: "title-04",
-      alignment: "center"
-    }, this.loaderTitle) : null;
-    this.renderDescription = () => this.description ? t("gxg-text", {
-      class: "loader__description",
-      type: "text-regular",
-      textAlign: "center"
-    }, this.description) : null;
-    this.renderCancelButton = () => this.cancelLabel ? t("gxg-button", {
-      class: {
-        [`loader__cancel-button`]: true
-      },
-      type: "secondary-text-icon",
-      onClick: this.cancelProcess
-    }, this.cancelLabel) : null;
-    this.cancelProcess = () => {
-      if (this.cancelCallback) {
-        this.cancelCallback();
-      }
-      clearTimeout(this.timeoutReference);
-      this.show = false;
-    };
-    this.showWindow = false;
-    this.showWrapper = false;
-    this.loaderTitle = undefined;
-    this.description = undefined;
-    this.cancelLabel = undefined;
-    this.cancelCallback = undefined;
-    this.show = false;
-    this.abortTime = 3e5;
-    this.displayBorder = false;
-    this.borderRadius = "0";
-    this.container = undefined;
-  }
-  showHandler(e) {
-    if (e) {
-      this.showWindow = true;
-      this.showWrapper = true;
-    } else {
-      this.showWindow = false;
-      this.showWrapper = false;
-      this.loaderFinished.emit();
-    }
-  }
-  //  10.RENDER() FUNCTION //
-  render() {
-    return t(i, null, t("ch-window", {
-      closeOnEscape: false,
-      closeOnOutsideClick: false,
-      container: this.container,
-      hidden: !this.showWindow,
-      modal: false,
-      showFooter: false,
-      showHeader: false
-    }, t("div", {
-      class: {
-        [`loader__wrapper`]: true,
-        "loader__wrapper--visible": this.showWrapper
-      },
-      style: {
-        borderRadius: this.borderRadius
-      },
-      part: "loader-wrapper"
-    }, t("div", {
-      class: "loader__spinner"
-    }), t("div", {
-      class: {
-        "loader__content-wrapper": true,
-        "loader__content-wrapper--hidden": !this.description && !this.loaderTitle && !this.cancelLabel
-      }
-    }, this.renderTitle(), this.renderDescription(), this.renderCancelButton()))));
-  }
-  static get watchers() {
-    return {
-      show: [ "showHandler" ]
-    };
-  }
-};
-
-o.style = a;
-
-export { o as gx_ide_loader };
-//# sourceMappingURL=p-4c52f542.entry.js.map

package/dist/genexus-ide-ui/p-4c52f542.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ideLoaderCss","IdeLoader","this","renderTitle","loaderTitle","h","class","type","alignment","renderDescription","description","textAlign","renderCancelButton","cancelLabel","onClick","cancelProcess","cancelCallback","clearTimeout","timeoutReference","show","showHandler","showWindow","showWrapper","loaderFinished","emit","render","Host","closeOnEscape","closeOnOutsideClick","container","hidden","modal","showFooter","showHeader","style","borderRadius","part"],"sources":["src/components/_helpers/ide-loader/ide-loader.scss?tag=gx-ide-loader&encapsulation=shadow","src/components/_helpers/ide-loader/ide-loader.tsx"],"sourcesContent":[":host {\n  display: block;\n}\nch-window::part(mask) {\n  overflow: hidden;\n}\nch-window::part(main) {\n  height: 100%;\n}\nch-window::part(window) {\n  width: 100%;\n  height: 100%;\n}\n.loader {\n  &__wrapper {\n    opacity: 0;\n    transition: var(--show-transition) opacity;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n    backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);\n    padding: var(--gxg-ide-loader-wrapper__padding);\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    // -webkit-animation: wrapper 0.5s infinite alternate;\n    // animation: wrapper 0.5s infinite alternate;\n    color: var(--gxg-ide-loader-wrapper__color);\n\n    &--visible {\n      opacity: 1;\n    }\n  }\n  &__spinner {\n    border: var(--gxg-ide-loader-spinner__border);\n    border-top: var(--gxg-ide-loader-spinner__border-top);\n    border-radius: 50%;\n    -webkit-animation: spinner 0.6s infinite linear;\n    animation: spinner 0.6s infinite linear;\n    width: var(--gxg-ide-loader-spinner__width);\n    height: var(--gxg-ide-loader-spinner__width);\n    flex-shrink: 0;\n  }\n\n  &__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);\n    gap: var(--gxg-ide-loader-content-wrapper__gap);\n    max-width: var(--gxg-ide-loader-content-wrapper__max-width);\n    &--hidden {\n      display: none;\n    }\n  }\n}\n\n/*background color animation*/\n@keyframes wrapper {\n  from {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  }\n  to {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--to);\n  }\n}\n/*spinner animation*/\n@-webkit-keyframes spinner {\n  from {\n    -webkit-transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(359deg);\n  }\n}\n@keyframes spinner {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n\n:host([display-border]) {\n  .loader {\n    &__wrapper {\n      border: 1px solid var(--mer-color__elevation--02);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-loader\",\n  styleUrl: \"ide-loader.scss\",\n  shadow: true\n})\nexport class IdeLoader {\n  // 1.OWN PROPERTIES //\n\n  private timeoutReference: ReturnType<typeof setTimeout>;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * shows the ch-window\n   */\n  @State() showWindow = false;\n\n  /**\n   * shows the '.loader-wrapper'\n   */\n  @State() showWrapper = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The loader title (optional)\n   */\n  @Prop() readonly loaderTitle: string;\n\n  /**\n   * The loader description (optional)\n   */\n  @Prop() readonly description: string;\n\n  /**\n   * The cancel button label (optional)\n   */\n  @Prop() readonly cancelLabel: string;\n\n  /**\n   * The cancel callback\n   */\n  @Prop() readonly cancelCallback: IdeLoaderCancelCallback;\n\n  /**\n   * It shows the loader\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * The time the loader will await before abort.\n   */\n  @Prop() readonly abortTime: number = 300000; // 5 minutes\n\n  /**\n   * Displays a border all around\n   */\n  @Prop({ reflect: true }) readonly displayBorder: boolean = false;\n\n  /**\n   * The border radius value that applies on the .loader__wrapper\n   */\n  @Prop({ reflect: true }) readonly borderRadius: string = \"0\";\n\n  @Watch(\"show\")\n  showHandler(show: boolean): void {\n    if (show) {\n      this.showWindow = true;\n      this.showWrapper = true;\n    } else {\n      this.showWindow = false;\n      this.showWrapper = false;\n      this.loaderFinished.emit();\n    }\n  }\n\n  /**\n   * The container element for the loader.\n   */\n  @Prop() readonly container: HTMLElement;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted when \"show\" is false.\n   */\n  @Event() loaderFinished: EventEmitter<void>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private renderTitle = (): HTMLGxgTitleElement | null => {\n    return this.loaderTitle ? (\n      <gxg-title class=\"loader__title\" type=\"title-04\" alignment=\"center\">\n        {this.loaderTitle}\n      </gxg-title>\n    ) : null;\n  };\n\n  private renderDescription = (): HTMLGxgTextElement | null => {\n    return this.description ? (\n      <gxg-text\n        class=\"loader__description\"\n        type=\"text-regular\"\n        textAlign=\"center\"\n      >\n        {this.description}\n      </gxg-text>\n    ) : null;\n  };\n\n  private renderCancelButton = (): HTMLGxgButtonElement | null => {\n    return this.cancelLabel ? (\n      <gxg-button\n        class={{\n          [`loader__cancel-button`]: true\n        }}\n        type=\"secondary-text-icon\"\n        onClick={this.cancelProcess}\n      >\n        {this.cancelLabel}\n      </gxg-button>\n    ) : null;\n  };\n\n  private cancelProcess = (): void => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n    clearTimeout(this.timeoutReference);\n    this.show = false;\n  };\n\n  //  10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <ch-window\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          container={this.container}\n          hidden={!this.showWindow}\n          modal={false}\n          showFooter={false}\n          showHeader={false}\n        >\n          <div\n            class={{\n              [`loader__wrapper`]: true,\n              \"loader__wrapper--visible\": this.showWrapper\n            }}\n            style={{ borderRadius: this.borderRadius }}\n            part=\"loader-wrapper\"\n          >\n            <div class=\"loader__spinner\"></div>\n            <div\n              class={{\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\":\n                  !this.description && !this.loaderTitle && !this.cancelLabel\n              }}\n            >\n              {this.renderTitle()}\n              {this.renderDescription()}\n              {this.renderCancelButton()}\n            </div>\n          </div>\n        </ch-window>\n      </Host>\n    );\n  }\n}\n\nexport type IdeLoaderCancelCallback = () => void;\n"],"mappings":";;AAAA,MAAMA,IAAe;;MCgBRC,IAAS;;;;;;;;QA6FZC,KAAAC,cAAc,MACbD,KAAKE,cACVC,EAAA;MAAWC,OAAM;MAAgBC,MAAK;MAAWC,WAAU;OACxDN,KAAKE,eAEN;IAGEF,KAAAO,oBAAoB,MACnBP,KAAKQ,cACVL,EAAA;MACEC,OAAM;MACNC,MAAK;MACLI,WAAU;OAETT,KAAKQ,eAEN;IAGER,KAAAU,qBAAqB,MACpBV,KAAKW,cACVR,EAAA;MACEC,OAAO;QACL,CAAC,0BAA0B;;MAE7BC,MAAK;MACLO,SAASZ,KAAKa;OAEbb,KAAKW,eAEN;IAGEX,KAAAa,gBAAgB;MACtB,IAAIb,KAAKc,gBAAgB;QACvBd,KAAKc;;MAEPC,aAAaf,KAAKgB;MAClBhB,KAAKiB,OAAO;AAAK;sBAxHG;uBAKC;;;;;gBA2BS;qBAKK;yBAKsB;wBAKF;;;EAGzD,WAAAC,CAAYD;IACV,IAAIA,GAAM;MACRjB,KAAKmB,aAAa;MAClBnB,KAAKoB,cAAc;WACd;MACLpB,KAAKmB,aAAa;MAClBnB,KAAKoB,cAAc;MACnBpB,KAAKqB,eAAeC;;;;EAoExB,MAAAC;IACE,OACEpB,EAACqB,GAAI,MACHrB,EAAA;MACEsB,eAAe;MACfC,qBAAqB;MACrBC,WAAW3B,KAAK2B;MAChBC,SAAS5B,KAAKmB;MACdU,OAAO;MACPC,YAAY;MACZC,YAAY;OAEZ5B,EAAA;MACEC,OAAO;QACL,CAAC,oBAAoB;QACrB,4BAA4BJ,KAAKoB;;MAEnCY,OAAO;QAAEC,cAAcjC,KAAKiC;;MAC5BC,MAAK;OAEL/B,EAAA;MAAKC,OAAM;QACXD,EAAA;MACEC,OAAO;QACL,2BAA2B;QAC3B,oCACGJ,KAAKQ,gBAAgBR,KAAKE,gBAAgBF,KAAKW;;OAGnDX,KAAKC,eACLD,KAAKO,qBACLP,KAAKU"}

package/dist/genexus-ide-ui/p-4f0b6507.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createKbFromServerCss","GxIdeCreateKbFromServer","this","renderedFirstTime","shortcutsSrc","getAssetPath","kbIdSelected","authenticationTypes","setAuthenticationTypes","id","value","label","_componentLocale","genexusAccount","local","addEventListeners","serverUrlsEl","addEventListener","reset","searchKBEl","e","kbNameEl","kbSearchText","detail","listBoxEl","ev","selectedItems","items","selectedItem","length","kbSelected","kbs","find","kb","name","createKbHandler","createKBCallback","createKBCallbackPromise","then","formSubmitResult","formSubmitValidation","connectCallbackHandler","connectCallback","connectCallbackPromise","serverUrl","authenticationType","authenticationTypeEl","user","_a","userNameEl","password","_b","passwordEl","connectionResultData","formResult","success","selectionKbDisabled","watchPropHandler","newKbs","kbName","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","focus","componentDidRender","componentDidRenderFirstTime","emit","componentName","render","h","Host","class","containerTitle","displayTitle","labelPosition","disableFilter","enableCustomServer","ref","part","serverUrls","renderFormItems","map","sUrl","onValueChanged","evaluateAuthenticationType","userName","type","onClick","buttons","connect","disabled","placeholder","searchKbs","singleSelection","filter","toLowerCase","includes","key","localKb","create","src"],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n  border: 1px solid var(--gxg-border-color--regular);\n  background-color: var(--mer-color__surface);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n  grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n  grid-template-columns: auto 1fr;\n  > :nth-child(1) {\n    grid-area: 1 / 1 / 2 / 3;\n  }\n  > :nth-child(6) {\n    grid-area: 4 / 2 / 5 / 3;\n  }\n}\n.grid-data-kbs {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-grid-row-gap);\n  .search-kbs {\n    width: 100%;\n    display: flex;\n  }\n  .box-kbs {\n    height: 150px;\n  }\n}\n.grid-data-kbs-footer {\n  display: flex;\n}\n.flex {\n  display: flex;\n  > :nth-child(2) {\n    flex: 1;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  getAssetPath,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/* CUSTOM IMPORTS */\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n  FormSubmitResult,\n  GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n  tag: \"gx-ide-create-kb-from-server\",\n  styleUrl: \"create-kb-from-server.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n  [key: string]: any;\n\n  /*\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  private shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n  );\n\n  /* References needed to collect data with \"Connect\" and \"Create\" buttons submit*/\n  private authenticationTypeEl!: HTMLGxgComboBoxElement;\n  private serverUrlsEl!: HTMLGxgComboBoxElement;\n  private kbNameEl!: HTMLGxgFormTextElement;\n  private passwordEl!: HTMLGxgFormTextElement;\n  private userNameEl!: HTMLGxgFormTextElement;\n  private searchKBEl!: HTMLGxgFormTextElement;\n  private listBoxEl!: HTMLElement;\n  private kbIdSelected: string = null;\n  private authenticationTypes: GxOption[] = [];\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * Disabled or not the part for select and create the KB\n   */\n  @State() selectionKbDisabled = true;\n\n  /**\n   * KBs that return from connect to the server\n   */\n\n  @State() kbs: KBData[] = [];\n  @Watch(\"kbs\")\n  watchPropHandler(newKbs: KBData[]) {\n    /* When the list of servers are updated, the first server is selected by default */\n    this.kbIdSelected = newKbs[0].id;\n    this.kbName = newKbs[0].name;\n  }\n\n  /**\n   * KBs search text\n   */\n  @State() kbSearchText = \"\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n   */\n  @Prop() readonly connectCallback: (\n    data: GXServerConnectionData\n  ) => Promise<ConnectionResultData>;\n\n  /**\n   * Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n   */\n  @Prop() readonly createKBCallback: (\n    data: CreateKBData\n  ) => Promise<FormSubmitResult>;\n\n  /**\n   * If is true then the user can specify a server url that don't be in the combo box of server urls.\n   */\n  @Prop() readonly enableCustomServer: boolean = true;\n\n  /**\n   * The knowledge base default suggested name\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) kbName: string;\n\n  /**\n   * Password for the database connection.\n   */\n  @Prop() readonly password: string;\n\n  /**\n   * Array of URLs of cataloged servers to be displayed in the combo\n   */\n  @Prop() readonly serverUrls!: string[];\n\n  /**\n   * Username for the database connection.\n   */\n  @Prop() readonly userName: string;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.setAuthenticationTypes();\n  }\n\n  componentDidLoad() {\n    (this.serverUrlsEl as HTMLElement).focus();\n    this.addEventListeners();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private setAuthenticationTypes = () => {\n    this.authenticationTypes = [\n      {\n        id: \"genexus\",\n        value: \"genexus\",\n        label: this._componentLocale.authenticationTypes.genexusAccount\n      },\n      {\n        id: \"local\",\n        value: \"local\",\n        label: this._componentLocale.authenticationTypes.local\n      }\n    ];\n  };\n\n  private addEventListeners = () => {\n    this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n      this.reset();\n    });\n\n    this.searchKBEl.addEventListener(\n      \"valueChanged\",\n      (e: CustomEvent<string>) => {\n        this.kbNameEl.value = \"\";\n        this.kbIdSelected = null;\n        this.kbSearchText = e.detail;\n      }\n    );\n\n    this.listBoxEl.addEventListener(\n      \"selectionChanged\",\n      (ev: CustomEvent<SelectionChangedEvent>): void => {\n        const selectedItems = ev.detail.items;\n        let selectedItem;\n        if (selectedItems.length > 0) {\n          selectedItem = ev.detail.items[0];\n        }\n        if (selectedItem) {\n          this.kbIdSelected = selectedItem.value;\n          const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n          if (kbSelected) {\n            this.kbNameEl.value = kbSelected.name;\n          }\n        }\n      }\n    );\n  };\n\n  private reset() {\n    this.kbs = [];\n    this.kbIdSelected = null;\n    this.selectionKbDisabled = true;\n    this.searchKBEl.value = \"\";\n    this.kbSearchText = \"\";\n  }\n\n  private createKbHandler = (): void => {\n    if (this.createKBCallback) {\n      const createKBCallbackPromise = this.createKBCallback({\n        id: this.kbIdSelected,\n        name: this.kbNameEl.value\n      });\n      createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n        formSubmitValidation(formSubmitResult, this);\n      });\n    }\n  };\n\n  private connectCallbackHandler = (): void => {\n    if (this.connectCallback) {\n      const connectCallbackPromise = this.connectCallback({\n        serverUrl: this.serverUrlsEl.value,\n        authenticationType: this.authenticationTypeEl.value,\n        user: this.userNameEl?.value,\n        password: this.passwordEl?.value\n      });\n      connectCallbackPromise.then(\n        (connectionResultData: ConnectionResultData) => {\n          formSubmitValidation(connectionResultData.formResult, this);\n          if (\n            connectionResultData.formResult.success &&\n            connectionResultData.kbs\n          ) {\n            this.kbs = connectionResultData.kbs;\n            this.selectionKbDisabled = false;\n          }\n        }\n      );\n    }\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  // 11.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            <div class=\"flex\">\n              {/* #kb name */}\n              <gxg-label labelPosition=\"start\" class=\"kb-label\">\n                {this._componentLocale.label.serverUrl}\n              </gxg-label>\n              <gxg-combo-box\n                disableFilter={!this.enableCustomServer}\n                ref={(el: HTMLGxgComboBoxElement) =>\n                  (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n                }\n                class=\"server-urls-combo-box\"\n                part=\"server-urls\"\n              >\n                {this.serverUrls\n                  ? renderFormItems(\n                      \"gxg-combo-box-item\",\n                      this.serverUrls.map(sUrl => ({\n                        id: sUrl,\n                        label: sUrl,\n                        value: sUrl\n                      })),\n                      \"server-urls\"\n                    )\n                  : null}\n              </gxg-combo-box>\n            </div>\n            <div class=\"grid grid-data\">\n              <div>\n                <div class=\"grid grid-data-account\">\n                  {/* #authentication type */}\n                  <gxg-combo-box\n                    tool-tip\n                    disableFilter\n                    value={this.authenticationTypes[0].id}\n                    ref={(el: HTMLGxgComboBoxElement) =>\n                      (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n                    }\n                    class=\"authentication-type\"\n                    part=\"authentication-type\"\n                    onValueChanged={this.evaluateAuthenticationType}\n                  >\n                    {renderFormItems(\n                      \"gxg-combo-box-item\",\n                      this.authenticationTypes,\n                      \"authentication-type\"\n                    )}\n                  </gxg-combo-box>\n\n                  {/* #user name */}\n                  <gxg-label labelPosition=\"start\" class=\"kb-label\">\n                    {`${this._componentLocale.label.userName}:`}\n                  </gxg-label>\n                  <gxg-form-text\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.userNameEl = el as HTMLGxgFormTextElement)\n                    }\n                    tool-tip\n                    value={this.userName}\n                    class=\"user-name\"\n                    part=\"user-name\"\n                  ></gxg-form-text>\n\n                  {/* #password */}\n                  <gxg-label labelPosition=\"start\" class=\"kb-label\">\n                    {`${this._componentLocale.label.password}:`}\n                  </gxg-label>\n                  <gxg-form-text\n                    tool-tip\n                    password\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.passwordEl = el as HTMLGxgFormTextElement)\n                    }\n                    value={this.password}\n                    class=\"password\"\n                    part=\"password\"\n                  ></gxg-form-text>\n\n                  {/* #connect */}\n                  <div>\n                    <gxg-button\n                      id=\"button-connect\"\n                      type=\"primary-text-only\"\n                      onClick={this.connectCallbackHandler}\n                      part=\"button-connect\"\n                    >\n                      {this._componentLocale.buttons.connect}\n                    </gxg-button>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"grid\">\n                <div class=\"grid-data-kbs\">\n                  <div class=\"search-kbs\">\n                    <gxg-form-text\n                      ref={(el: HTMLGxgFormTextElement) =>\n                        (this.searchKBEl = el as HTMLGxgFormTextElement)\n                      }\n                      class=\"search-kb-input\"\n                      part=\"search-kb\"\n                      disabled={this.selectionKbDisabled}\n                      placeholder={this._componentLocale.label.searchKbs}\n                    ></gxg-form-text>\n                  </div>\n                  <div class=\"box-kbs\">\n                    <gxg-list-box\n                      singleSelection\n                      disabled={this.selectionKbDisabled}\n                      ref={(el: HTMLElement) => (this.listBoxEl = el)}\n                      part=\"kbs\"\n                    >\n                      {this.kbs\n                        .filter(kb =>\n                          kb.name\n                            .toLowerCase()\n                            .includes(this.kbSearchText.toLowerCase())\n                        )\n                        .map(kb => (\n                          <gxg-list-box-item value={kb.id} key={kb.id}>\n                            {kb.name}\n                          </gxg-list-box-item>\n                        ))}\n                    </gxg-list-box>\n                  </div>\n                </div>\n                <div class=\"grid grid-data-kbs-footer\">\n                  {/* #kbName */}\n                  <gxg-form-text\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.kbNameEl = el as HTMLGxgFormTextElement)\n                    }\n                    label={this._componentLocale.localKb}\n                    value={this.kbName}\n                    class=\"kb-name\"\n                    part=\"kb-name\"\n                    disabled={this.selectionKbDisabled}\n                  ></gxg-form-text>\n\n                  {/* #create button */}\n                  <div>\n                    <gxg-button\n                      id=\"button-create\"\n                      type=\"primary-text-only\"\n                      onClick={this.createKbHandler}\n                      part=\"button-create\"\n                      disabled={this.selectionKbDisabled}\n                    >\n                      {this._componentLocale.buttons.create}\n                    </gxg-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </gx-ide-container>\n        </div>\n        <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n      </Host>\n    );\n  }\n}\n\nexport interface GXServerConnectionData {\n  serverUrl: string;\n  authenticationType: GxServerAuthenticationType;\n  user: string;\n  password: string;\n}\nexport type ConnectionResultData = {\n  formResult: FormSubmitResult;\n  kbs: KBData[];\n};\nexport interface KBData {\n  id: string;\n  name: string;\n}\nexport interface CreateKBData {\n  id: string;\n  name: string;\n}\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-52037fb7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["newKbCss","GxIdeNewKb","this","renderedFirstTime","selectedFrontEndsIds","shortcutsSrc","getAssetPath","initialSetup","updateSelectedFrontEndsIds","frontEndsEl","getValues","then","frontEndsCheckboxesInfo","forEach","frontEnd","value","push","id","evaluateCreateDataInKbDisabled","e","_a","serverNames","detail","createDataInKbDisabled","_b","selected","evaluateAuthenticationType","selectedOption","authenticationTypes","length","find","item","conditionA","conditionB","userNameVisible","passwordVisible","savePasswordVisible","selectLocationHandler","selectLocationCallback","kbLocation","updateFrontEnds","getFrontEndsCallback","selectedPrototypingEnvironmentId","prototypingEnvironmentEl","updatedFrontEndsPromise","newFrontEndsOptions","updatedFrontEnds","newFrontEnd","foundActualFrontEnd","frontEnds","actualFrontEnd","checked","catch","getDataSources","getDataSourcesCallback","selectedPrototypingTargetId","prototypingTargetEl","updatedDefaultDataSourcesPromise","result","defaultDataSources","dataSourceEl","prototypingEnvironmentValueChangedHandler","prototypingTargetValueChangedHandler","createKbHandler","createCallback","createCallbackPromise","kbName","kbNameEl","locationEl","prototypingTarget","_c","userInterfaceLanguage","_d","userInterfaceLanguageEl","prototypingEnvironment","_e","dataSource","_f","serverName","_g","serverNameEl","databaseName","_h","databaseNameEl","collation","_j","collationEl","createDataFilesInKBFolder","_k","createDataFilesInKBFolderEl","authenticationType","_l","authenticationTypeEl","userName","_m","userNameEl","password","_o","passwordEl","savePassword","_p","savePasswordEl","formSubmitResult","formSubmitValidation","cancelKbHandler","cancelCallback","renderTabBasic","h","tab","flexContainer","isSelected","isAdvanced","class","disableFilter","toolTip","config","tooltip","label","_componentLocale","tabBasic","getSelectedGxOption","prototypingTargets","ref","el","disabled","placeholder","disabledPlaceholder","onValueChanged","part","renderFormItems","userInterfaceLanguages","containerTitle","backEnd","backEndLabel","contentBorderEnd","titleType","prototypingEnvironments","frontEndLabel","checkboxesLabelSize","onGroupValuesChanged","renderTabAdvanced","noContentPadding","tabAdvanced","tabTitle","type","icon","labelPosition","collations","createDataFilesInKbFolder","alignTop","componentWillLoad","Locale","getComponentStrings","previousFrontEndsState","componentDidLoad","focus","componentDidRender","componentDidRenderFirstTime","emit","componentName","suspendShortcuts","gxgShortcutsEl","suspend","render","Host","slimmerFooter","gxIdeContainer","displayTitle","header","grid","slot","noMargin","maxWidth","onClick","noBorder","displayBorder","tabLabel","hidden","footer","btnCancel","btnCreate","src"],"sources":["src/components/new-kb/new-kb.scss?tag=gx-ide-new-kb&encapsulation=shadow","src/components/new-kb/new-kb.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n  border: 1px solid var(--gxg-border-color--regular);\n  background-color: var(--mer-color__surface);\n}\n:host(.gxi-new-kb--shadow) {\n}\n/*HEADER*/\n.header {\n  grid-template-columns: auto 1fr;\n  grid-template-areas: \"kb-name-label kb-input\";\n  &--is-advanced {\n    grid-template-columns: auto 1fr min-content;\n    grid-template-areas:\n      \"kb-name-label kb-input .\"\n      \"location-label location-input location-icon\";\n  }\n  .kb-input {\n    grid-area: kb-input;\n  }\n  .kb-name-label {\n    grid-area: kb-label;\n  }\n  .location-label {\n    grid-area: location-label;\n  }\n  .location-input {\n    grid-area: location-input;\n  }\n  .location-icon {\n    grid-area: location-icon;\n  }\n}\n/*GXG-TABS*/\n.gxg-tabs {\n  margin-top: 0;\n  box-shadow: none;\n}\n/*Basic*/\n.basic-row-first {\n  container-name: basic-row-first;\n  // container-type: inline-size; /*Esto queda comentado hasta que no se resuelva el problema del popover con Safari.*/\n  &__container {\n    display: grid;\n    gap: var(--gx-ide-grid-column-gap);\n    padding: var(--gx-ide-container__padding);\n    border-bottom: 1px solid var(--gx-ide-container-border-color);\n    grid-template-columns: repeat(2, 1fr);\n  }\n  /*Esto queda comentado hasta que no se resuelva el problema del popover con Safari.*/\n  // @include containerQuerySm() {\n  //   .basic-row-first__container {\n  //     grid-template-columns: 1fr;\n  //   }\n  // }\n}\n\n.basic-row-second {\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 0;\n  grid-row-gap: 0;\n  flex-grow: 1;\n}\n/*Advanced*/\n.knowledge-base-storage {\n  display: grid;\n  grid-template-areas: \"knowledge-base-storage__col-left knowledge-base-storage__col-right\";\n  grid-template-columns: repeat(2, 1fr);\n  flex-grow: 1;\n  gap: 0;\n  > *:first-child {\n    border-right: 1px solid var(--gx-ide-container-border-color);\n  }\n  &__col-left {\n    display: grid;\n    gap: var(--gx-ide-grid-row-gap);\n    padding: var(--gx-ide-container__padding);\n    grid-area: knowledge-base-storage__col-left;\n    grid-template-columns: 1fr auto;\n    grid-template-rows: repeat(4, min-content);\n    grid-template-areas:\n      \"server-name-combo-box server-name-button\"\n      \"database-name .\"\n      \"collation-combo-box collation-button\"\n      \"create-data-in-kb .\";\n\n    .server-name-combo-box {\n      grid-area: server-name-combo-box;\n    }\n    .server-name-button {\n      grid-area: server-name-button;\n      align-self: end;\n    }\n    .database-name {\n      grid-area: database-name;\n    }\n    .collation-combo-box {\n      grid-area: collation-combo-box;\n    }\n    .collation-button {\n      grid-area: collation-button;\n      align-self: end;\n    }\n    .create-data-in-kb {\n      grid-area: create-data-in-kb;\n    }\n  }\n  &__col-right {\n    display: grid;\n    padding: var(--gx-ide-container__padding);\n    gap: var(--gx-ide-grid-row-gap);\n    grid-area: knowledge-base-storage__col-right;\n    grid-template-columns: 1fr;\n    grid-template-rows: repeat(4, min-content);\n    grid-template-areas:\n      \"authentication-type\"\n      \"user-name\"\n      \"password\"\n      \"save-password\";\n    .authentication-type {\n      grid-area: authentication-type;\n    }\n    .user-name {\n      grid-area: user-name;\n    }\n    .password {\n      grid-area: password;\n    }\n    .save-password {\n      grid-area: save-password;\n    }\n    &--windows-authentication {\n      grid-template-areas: \"authentication-type\";\n    }\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  getAssetPath,\n  Method\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { ComboBoxItemValue } from \"@genexus/gemini/dist/types/components/combo-box-item/combo-box-item\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { GxOption } from \"../../common/types\";\nimport { renderFormItems, getSelectedGxOption } from \"../../common/common\";\nimport { FormSubmitResult } from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n  tag: \"gx-ide-new-kb\",\n  styleUrl: \"new-kb.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/new-kb\"]\n})\nexport class GxIdeNewKb {\n  [key: string]: any;\n\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  private selectedFrontEndsIds: string[] = [];\n  private shortcutsSrc = getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`);\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeNewKbElement;\n\n  /* References needed to collect data con \"Create\" button submit*/\n  private authenticationTypeEl!: HTMLGxgComboBoxElement;\n  private collationEl!: HTMLGxgComboBoxElement;\n  private createDataFilesInKBFolderEl!: HTMLGxgFormCheckboxElement;\n  private databaseNameEl!: HTMLGxgFormTextElement;\n  private dataSourceEl!: HTMLGxgComboBoxElement;\n  private frontEndsEl!: HTMLGxgFormCheckboxGroupElement;\n  private kbNameEl!: HTMLGxgFormTextElement;\n  private locationEl!: HTMLGxgFormTextElement;\n  private passwordEl!: HTMLGxgFormTextElement;\n  private prototypingEnvironmentEl!: HTMLGxgComboBoxElement;\n  private prototypingTargetEl!: HTMLGxgComboBoxElement;\n  private savePasswordEl!: HTMLGxgFormCheckboxElement;\n  private serverNameEl!: HTMLGxgComboBoxElement;\n  private userInterfaceLanguageEl!: HTMLGxgComboBoxElement;\n  private userNameEl!: HTMLGxgFormTextElement;\n\n  private gxgShortcutsEl: HTMLGxgShortcutsElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() createDataInKbDisabled = false;\n  @State() userNameVisible = true;\n  @State() passwordVisible = true;\n  @State() savePasswordVisible = true;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /* ----- BASIC DATA ----- */\n\n  /**\n   * It allows defining the DBMS that will be used in the solution\n   */\n  @Prop({ mutable: true }) defaultDataSources!: GxOption[];\n\n  /**\n   * It allows selecting multiple generators for the front end\n   */\n  @Prop({ mutable: true }) frontEnds!: GxOption[];\n\n  /**\n   * Specify whether it is feasible to display information related to local configuration parameters\n   */\n  @Prop() readonly isAdvanced = false;\n\n  /**\n   * Default suggested path to a directory where the information related to the KB will be stored/generated\n   */\n  @Prop({ mutable: true }) kbLocation: string;\n\n  /**\n   * This is a function provided by the developer that returns a string, with the location path\n   */\n  @Prop() readonly selectLocationCallback!: SelectLocationCallback;\n\n  /**\n   * The knowledge base default suggested name\n   */\n  @Prop() readonly kbName: string;\n\n  /**\n   * It allows selecting the default environment that the KB will have (additional environments can be created later)\n   */\n  @Prop() readonly prototypingEnvironments!: GxOption[];\n\n  /**\n   * Path to a directory where the information related to the KB will be stored/generated\n   */\n  @Prop() readonly prototypingTargets!: GxOption[];\n\n  /**\n   * Specify the language in which the application screens will be developed (default language)\n   */\n  @Prop() readonly userInterfaceLanguages!: GxOption[];\n\n  /* ----- ADVANCED DATA ----- */\n\n  /**\n   * Defines the type of authentication for the connection to the previously defined database\n   */\n  @Prop() readonly authenticationTypes!: GxOption[];\n\n  /**\n   * DB Collations\n   */\n  @Prop() readonly collations!: GxOption[];\n\n  /**\n   * Disabled if the first item of the 'Server Name' combo is selected\n   */\n  @Prop() readonly createDataFilesInKBFolder: boolean = false;\n\n  /**\n   * Name of the database where we are going to persist the information of our KB\n   */\n  @Prop() readonly databaseName: string;\n\n  /**\n   * Password for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)\n   */\n  @Prop() readonly password: string;\n\n  /**\n   * Visible if something other than Windows Authentication is selected\n   */\n  @Prop() readonly savePassword: boolean = false;\n\n  /**\n   * Name of the DB server where we want to persist the information of our KB\n   */\n  @Prop() readonly serverNames!: GxOption[];\n\n  /**\n   * Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)\n   */\n  @Prop() readonly userName: string;\n\n  /**\n   * Username for the database connection. Visible if the Authentication Type is different from Windows Authentication (first item of the combo)\n   */\n  @Prop() readonly test: string;\n\n  /**\n   * Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n   */\n  @Prop() readonly createCallback: CreateCallback;\n\n  /**\n   * Callback invoked when the user wants to cancel KB creation (‘Cancel’ button)\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when the user wants to cancel KB creation (‘Cancel’ button)\n   */\n  @Prop() readonly getDataSourcesCallback: GetDataSourcesCallback;\n\n  /**\n   * Callback invoked when the user changes the prototyping environment, allowing for the modification of the list of front ends\n   */\n  @Prop() readonly getFrontEndsCallback: GetFrontEndsCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateCreateDataInKbDisabled(null);\n    this.evaluateAuthenticationType(null);\n    this.previousFrontEndsState = this.frontEnds;\n  }\n\n  componentDidLoad() {\n    this.initialSetup();\n    this.kbNameEl.focus();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * Suspends or reactivates the shortcuts\n   */\n  @Method()\n  async suspendShortcuts(suspendShortcuts: boolean) {\n    if (suspendShortcuts) {\n      this.gxgShortcutsEl.suspend = true;\n    } else {\n      this.gxgShortcutsEl.suspend = false;\n    }\n  }\n\n  // 9.LOCAL METHODS //\n\n  // 9.LOCAL METHODS -> Helpers //\n\n  private initialSetup = () => {\n    this.updateSelectedFrontEndsIds();\n  };\n\n  // 9.LOCAL METHODS -> Not Helpers //\n\n  private updateSelectedFrontEndsIds = () => {\n    this.selectedFrontEndsIds = [];\n    this.frontEndsEl.getValues().then(frontEndsCheckboxesInfo => {\n      frontEndsCheckboxesInfo.forEach(frontEnd => {\n        if (frontEnd.value) {\n          this.selectedFrontEndsIds.push(frontEnd.id);\n        }\n      });\n    });\n  };\n\n  /**\n   * @description If Server Name first option is selected, \"Create Data in Knowledge Base Folder\" should be disabled\n   */\n  private evaluateCreateDataInKbDisabled = (\n    e: CustomEvent<ComboBoxItemValue> | null\n  ) => {\n    if (e) {\n      if (this.serverNames[0]?.id === e.detail) {\n        this.createDataInKbDisabled = true;\n      } else {\n        this.createDataInKbDisabled = false;\n      }\n    } else if (this.serverNames[0]?.selected) {\n      this.createDataInKbDisabled = true;\n    }\n  };\n\n  /**\n   * @description if \"Authentication Type\" is \"Windows Authentication\" then User Name, Password, and Save Password should not be visible.\n   */\n  private evaluateAuthenticationType = (\n    e: CustomEvent<ComboBoxItemValue> | null\n  ) => {\n    let selectedOption;\n    if (this.authenticationTypes?.length) {\n      selectedOption =\n        this.authenticationTypes?.find(item => item.selected) ||\n        this.authenticationTypes[0];\n    }\n    const conditionA = e?.detail === \"windows-authentication\";\n    const conditionB =\n      selectedOption && selectedOption.id === \"windows-authentication\";\n\n    if (conditionA || (conditionB && e === null)) {\n      this.userNameVisible = false;\n      this.passwordVisible = false;\n      this.savePasswordVisible = false;\n    } else {\n      this.userNameVisible = true;\n      this.passwordVisible = true;\n      this.savePasswordVisible = true;\n    }\n  };\n\n  /**\n   * @description It allows defining the DBMS that will be used in the solution\n   */\n  private selectLocationHandler = (): void => {\n    this.selectLocationCallback().then(kbLocation => {\n      if (kbLocation) {\n        this.kbLocation = kbLocation;\n      } else {\n        // to be defined\n      }\n    });\n  };\n\n  /**\n   * @description it evaluates what front end options need to be updated on 'getFrontEndsCallback', by comparing the new state (getFrontEndsCallback promise result) and the previous state (previousFrontEndsState)\n   */\n  private updateFrontEnds = () => {\n    if (this.getFrontEndsCallback) {\n      const selectedPrototypingEnvironmentId =\n        this.prototypingEnvironmentEl.value;\n      const updatedFrontEndsPromise: Promise<GxOption[]> =\n        this.getFrontEndsCallback(selectedPrototypingEnvironmentId);\n      updatedFrontEndsPromise\n        .then(newFrontEndsOptions => {\n          const updatedFrontEnds: GxOption[] = [];\n          newFrontEndsOptions.forEach(newFrontEnd => {\n            const foundActualFrontEnd = this.frontEnds.find(actualFrontEnd => {\n              return newFrontEnd.id === actualFrontEnd.id;\n            });\n            if (foundActualFrontEnd) {\n              // update newFrontEnd checked status with actual frontEnd checked status\n              newFrontEnd.checked = foundActualFrontEnd.checked;\n            }\n            updatedFrontEnds.push(newFrontEnd);\n          });\n          this.frontEnds = updatedFrontEnds;\n        })\n        .catch(() => {\n          // to do\n        });\n    }\n  };\n\n  private getDataSources = (): void => {\n    if (this.getDataSourcesCallback) {\n      const selectedPrototypingEnvironmentId =\n        this.prototypingEnvironmentEl.value;\n      const selectedPrototypingTargetId = this.prototypingTargetEl.value;\n      const updatedDefaultDataSourcesPromise: Promise<GxOption[]> =\n        this.getDataSourcesCallback(\n          selectedPrototypingEnvironmentId,\n          selectedPrototypingTargetId\n        );\n      updatedDefaultDataSourcesPromise\n        .then(result => {\n          if (result.length > 0) {\n            this.defaultDataSources = result;\n            // set first option as selected\n            this.dataSourceEl.value = this.defaultDataSources[0].id;\n          }\n        })\n        .catch(() => {\n          // to do\n        });\n    }\n  };\n\n  private prototypingEnvironmentValueChangedHandler = (): void => {\n    this.getDataSources();\n    this.updateFrontEnds();\n  };\n\n  private prototypingTargetValueChangedHandler = (): void => {\n    this.getDataSources();\n  };\n\n  private createKbHandler = (): void => {\n    if (this.createCallback) {\n      const createCallbackPromise = this.createCallback({\n        kbName: this.kbNameEl?.value,\n        kbLocation: this.locationEl?.value,\n        prototypingTarget: this.prototypingTargetEl?.value,\n        userInterfaceLanguage: this.userInterfaceLanguageEl?.value,\n        prototypingEnvironment: this.prototypingEnvironmentEl?.value,\n        dataSource: this.dataSourceEl?.value,\n        frontEnds: this.selectedFrontEndsIds,\n        serverName: this.serverNameEl?.value,\n        databaseName: this.databaseNameEl?.value,\n        collation: this.collationEl?.value,\n        createDataFilesInKBFolder: this.createDataFilesInKBFolderEl?.checked,\n        authenticationType: this.authenticationTypeEl?.value,\n        userName: this.userNameEl?.value,\n        password: this.passwordEl?.value,\n        savePassword: this.savePasswordEl?.checked\n      });\n\n      createCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n        formSubmitValidation(formSubmitResult, this);\n      });\n    }\n  };\n\n  private cancelKbHandler = (): void => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  private renderTabBasic = (): Element => {\n    return (\n      <gxg-tab\n        tab=\"basic\"\n        no-padding\n        flexContainer\n        isSelected={!this.isAdvanced}\n      >\n        <div class=\"basic-row-first\">\n          {/* #prototyping target*/}\n          <div class=\"basic-row-first__container\">\n            <gxg-combo-box\n              disableFilter\n              toolTip={config.tooltip}\n              label={this._componentLocale.tabBasic.prototypingTarget.label}\n              value={getSelectedGxOption(this.prototypingTargets)}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.prototypingTargetEl = el as HTMLGxgComboBoxElement)\n              }\n              disabled={this.prototypingTargets.length === 0}\n              placeholder={\n                this.prototypingTargets.length === 0\n                  ? this._componentLocale.tabBasic.prototypingTarget\n                      .disabledPlaceholder\n                  : \"\"\n              }\n              onValueChanged={this.prototypingTargetValueChangedHandler}\n              class=\"prototyping-target\"\n              part=\"prototyping-target\"\n            >\n              {renderFormItems(\n                \"gxg-combo-box-item\",\n                this.prototypingTargets,\n                \"prototyping-target\"\n              )}\n            </gxg-combo-box>\n\n            {/* #user interface language */}\n            <gxg-combo-box\n              disableFilter\n              toolTip={config.tooltip}\n              label={this._componentLocale.tabBasic.userInterfaceLanguage.label}\n              value={getSelectedGxOption(this.userInterfaceLanguages)}\n              placeholder={\n                this.userInterfaceLanguages.length === 0\n                  ? this._componentLocale.tabBasic.userInterfaceLanguage\n                      .disabledPlaceholder\n                  : \"\"\n              }\n              disabled={this.userInterfaceLanguages.length === 0}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.userInterfaceLanguageEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"user-interface-language\"\n              part=\"user-interface-language\"\n            >\n              {renderFormItems(\n                \"gxg-combo-box-item\",\n                this.userInterfaceLanguages,\n                \"user-interface-language\"\n              )}\n            </gxg-combo-box>\n          </div>\n        </div>\n\n        <div class=\"grid basic-row-second\">\n          <gx-ide-container\n            containerTitle={this._componentLocale.tabBasic.backEnd.backEndLabel}\n            contentBorderEnd\n            titleType=\"secondary\"\n          >\n            {/* #back end */}\n            {/* #prototyping environments */}\n            <gxg-combo-box\n              disableFilter\n              toolTip={config.tooltip}\n              label={\n                this._componentLocale.tabBasic.backEnd.prototypingEnvironment\n                  .label\n              }\n              value={getSelectedGxOption(this.prototypingEnvironments)}\n              placeholder={\n                this.prototypingEnvironments.length === 0\n                  ? this._componentLocale.tabBasic.backEnd\n                      .prototypingEnvironment.disabledPlaceholder\n                  : \"\"\n              }\n              disabled={this.prototypingEnvironments.length === 0}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.prototypingEnvironmentEl = el as HTMLGxgComboBoxElement)\n              }\n              onValueChanged={this.prototypingEnvironmentValueChangedHandler}\n              class=\"prototyping-environment\"\n              part=\"prototyping-environment\"\n            >\n              {renderFormItems(\n                \"gxg-combo-box-item\",\n                this.prototypingEnvironments,\n                \"prototyping-environment\"\n              )}\n            </gxg-combo-box>\n\n            {/* #data source */}\n            <gxg-combo-box\n              label={this._componentLocale.tabBasic.backEnd.dataSource.label}\n              toolTip={config.tooltip}\n              disableFilter\n              value={getSelectedGxOption(this.defaultDataSources)}\n              placeholder={\n                this.defaultDataSources.length === 0\n                  ? this._componentLocale.tabBasic.backEnd.dataSource\n                      .disabledPlaceholder\n                  : \"\"\n              }\n              disabled={this.defaultDataSources.length === 0}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.dataSourceEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"data-source\"\n              part=\"data-source\"\n            >\n              {renderFormItems(\n                \"gxg-combo-box-item\",\n                this.defaultDataSources,\n                \"data-source\"\n              )}\n            </gxg-combo-box>\n          </gx-ide-container>\n\n          {/* #front end */}\n          <gx-ide-container\n            containerTitle={\n              this._componentLocale.tabBasic.frontEnd.frontEndLabel\n            }\n            titleType=\"secondary\"\n          >\n            <gxg-form-checkbox-group\n              checkboxesLabelSize=\"large\"\n              ref={el =>\n                (this.frontEndsEl = el as HTMLGxgFormCheckboxGroupElement)\n              }\n              onGroupValuesChanged={this.updateSelectedFrontEndsIds}\n            >\n              {renderFormItems(\n                \"gxg-form-checkbox\",\n                this.frontEnds,\n                \"front-end\"\n              )}\n            </gxg-form-checkbox-group>\n          </gx-ide-container>\n        </div>\n      </gxg-tab>\n    );\n  };\n\n  private renderTabAdvanced = (): Element => {\n    return (\n      <gxg-tab tab=\"advanced\" no-padding flexContainer>\n        <gx-ide-container\n          noContentPadding\n          containerTitle={this._componentLocale.tabAdvanced.tabTitle}\n          titleType=\"secondary\"\n        >\n          <div class=\"knowledge-base-storage\">\n            <div class=\"knowledge-base-storage__col-left\">\n              {/* #server name */}\n              <gxg-combo-box\n                label={this._componentLocale.tabAdvanced.serverName.label}\n                disableFilter\n                toolTip={config.tooltip}\n                value={getSelectedGxOption(this.serverNames)}\n                placeholder={\n                  this.serverNames.length === 0\n                    ? this._componentLocale.tabAdvanced.serverName\n                        .disabledPlaceholder\n                    : \"\"\n                }\n                disabled={this.serverNames.length === 0}\n                ref={(el: HTMLGxgComboBoxElement) =>\n                  (this.serverNameEl = el as HTMLGxgComboBoxElement)\n                }\n                class=\"server-name-combo-box\"\n                part=\"server-name\"\n                onValueChanged={this.evaluateCreateDataInKbDisabled}\n              >\n                {renderFormItems(\n                  \"gxg-combo-box-item\",\n                  this.serverNames,\n                  \"server-name\"\n                )}\n              </gxg-combo-box>\n\n              {/* #search icon button */}\n              <gxg-button\n                type=\"secondary-icon-only\"\n                icon=\"gemini-tools/search\"\n                class=\"server-name-button\"\n                part=\"search-server-name\"\n              ></gxg-button>\n\n              {/* #database name */}\n              <gxg-form-text\n                labelPosition=\"above\"\n                label={this._componentLocale.tabAdvanced.databaseName.label}\n                placeholder=\"MyDatabase\"\n                ref={(el: HTMLGxgFormTextElement) =>\n                  (this.databaseNameEl = el as HTMLGxgFormTextElement)\n                }\n                toolTip={config.tooltip}\n                value={this.databaseName}\n                class=\"database-name\"\n                part=\"database-name\"\n              ></gxg-form-text>\n\n              {/* #collation */}\n              <gxg-combo-box\n                label={this._componentLocale.tabAdvanced.collation.label}\n                disableFilter\n                toolTip={config.tooltip}\n                value={getSelectedGxOption(this.collations)}\n                ref={(el: HTMLGxgComboBoxElement) =>\n                  (this.collationEl = el as HTMLGxgComboBoxElement)\n                }\n                placeholder={\n                  this.collations.length === 0\n                    ? this._componentLocale.tabAdvanced.collation\n                        .disabledPlaceholder\n                    : \"\"\n                }\n                disabled={this.serverNames.length === 0}\n                class=\"collation-combo-box\"\n                part=\"collation\"\n              >\n                {renderFormItems(\n                  \"gxg-combo-box-item\",\n                  this.collations,\n                  \"collation\"\n                )}\n              </gxg-combo-box>\n              <gxg-button\n                type=\"secondary-icon-only\"\n                icon=\"gemini-tools/reset\"\n                class=\"collation-button\"\n                part=\"reset-collation\"\n              ></gxg-button>\n\n              {/* #create data in knowledge base folder */}\n              <gxg-form-checkbox\n                label={\n                  this._componentLocale.tabAdvanced.createDataFilesInKbFolder\n                }\n                ref={(el: HTMLGxgFormCheckboxElement) =>\n                  (this.createDataFilesInKBFolderEl =\n                    el as HTMLGxgFormCheckboxElement)\n                }\n                alignTop\n                checked={this.createDataFilesInKBFolder}\n                disabled={this.createDataInKbDisabled}\n                class=\"create-data-in-kb\"\n                part=\"create-data-in-kb\"\n              ></gxg-form-checkbox>\n            </div>\n\n            <div\n              class={{\n                \"knowledge-base-storage__col-right\": true,\n                \"knowledge-base-storage__col-right--windows-authentication\":\n                  !this.userNameVisible\n              }}\n            >\n              {/* #authentication type */}\n              <gxg-combo-box\n                label={\n                  this._componentLocale.tabAdvanced.authenticationType.label\n                }\n                disableFilter\n                toolTip={config.tooltip}\n                value={getSelectedGxOption(this.authenticationTypes)}\n                ref={(el: HTMLGxgComboBoxElement) =>\n                  (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n                }\n                placeholder={\n                  this.authenticationTypes.length === 0\n                    ? this._componentLocale.tabAdvanced.authenticationType\n                        .disabledPlaceholder\n                    : \"\"\n                }\n                disabled={this.authenticationTypes.length === 0}\n                class=\"authentication-type\"\n                part=\"authentication-type\"\n                onValueChanged={this.evaluateAuthenticationType}\n              >\n                {renderFormItems(\n                  \"gxg-combo-box-item\",\n                  this.authenticationTypes,\n                  \"authentication-type\"\n                )}\n              </gxg-combo-box>\n\n              {/* #user name */}\n              {this.userNameVisible ? (\n                <gxg-form-text\n                  labelPosition=\"above\"\n                  toolTip={config.tooltip}\n                  label={this._componentLocale.tabAdvanced.userName.label}\n                  ref={(el: HTMLGxgFormTextElement) =>\n                    (this.userNameEl = el as HTMLGxgFormTextElement)\n                  }\n                  value={this.userName}\n                  class=\"user-name\"\n                  part=\"user-name\"\n                ></gxg-form-text>\n              ) : null}\n\n              {/* #password */}\n              {this.passwordVisible ? (\n                <gxg-form-text\n                  labelPosition=\"above\"\n                  label={this._componentLocale.tabAdvanced.password.label}\n                  password\n                  toolTip={config.tooltip}\n                  ref={(el: HTMLGxgFormTextElement) =>\n                    (this.passwordEl = el as HTMLGxgFormTextElement)\n                  }\n                  value={this.password}\n                  class=\"password\"\n                  part=\"password\"\n                ></gxg-form-text>\n              ) : null}\n\n              {/* #save password */}\n              {this.savePasswordVisible ? (\n                <gxg-form-checkbox\n                  label={this._componentLocale.tabAdvanced.savePassword}\n                  ref={(el: HTMLGxgFormCheckboxElement) =>\n                    (this.savePasswordEl = el as HTMLGxgFormCheckboxElement)\n                  }\n                  checked={this.savePassword}\n                  class=\"save-password\"\n                  part=\"save-password\"\n                ></gxg-form-checkbox>\n              ) : null}\n            </div>\n          </div>\n        </gx-ide-container>\n      </gxg-tab>\n    );\n  };\n\n  /** *****************************\n   *  11.RENDER() FUNCTION\n   ********************************/\n\n  render(): void {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            <header\n              class={{\n                \"header\": true,\n                \"grid\": true,\n                \"header--is-advanced\": this.isAdvanced\n              }}\n              slot=\"header\"\n            >\n              {/* #kb name */}\n              <gxg-label labelPosition=\"start\" class=\"kb-label\" noMargin>\n                {this._componentLocale.header.kbName}\n              </gxg-label>\n              <gxg-form-text\n                labelPosition=\"start\"\n                placeholder=\"SalesInventory\"\n                max-width=\"100%\"\n                value={this.kbName}\n                toolTip={config.tooltip}\n                ref={(el: HTMLGxgFormTextElement) =>\n                  (this.kbNameEl = el as HTMLGxgFormTextElement)\n                }\n                part=\"kb-name\"\n                class=\"kb-input\"\n              ></gxg-form-text>\n\n              {/* #location */}\n              {this.isAdvanced\n                ? [\n                    <gxg-label labelPosition=\"start\" class=\"location-label\">\n                      {this._componentLocale.header.kbLocation}\n                    </gxg-label>,\n                    <gxg-form-text\n                      labelPosition=\"start\"\n                      placeholder=\"C:\\Models\"\n                      maxWidth=\"100%\"\n                      value={this.kbLocation}\n                      ref={(el: HTMLGxgFormTextElement) =>\n                        (this.locationEl = el as HTMLGxgFormTextElement)\n                      }\n                      disabled={!this.isAdvanced}\n                      part=\"kb-location\"\n                      class=\"location-input\"\n                    ></gxg-form-text>,\n                    <gxg-button\n                      type=\"secondary-icon-only\"\n                      icon=\"gemini-tools/folder\"\n                      onClick={this.selectLocationHandler}\n                      part=\"button-select-location\"\n                      class=\"location-icon\"\n                    ></gxg-button>\n                  ]\n                : null}\n            </header>\n\n            {/* main */}\n            <main class=\"gxi-full-height\">\n              <gxg-tabs class=\"gxg-tabs\" noBorder>\n                {this.isAdvanced ? (\n                  <gxg-tab-bar\n                    slot=\"tab-bar-container\"\n                    part=\"tab-bar\"\n                    displayBorder\n                  >\n                    <gxg-tab-button\n                      slot=\"tab-bar\"\n                      tabLabel={this._componentLocale.tabBasic.tabLabel}\n                      tab=\"basic\"\n                      is-selected\n                      hidden={!this.isAdvanced}\n                      part=\"tab-button-basic\"\n                    ></gxg-tab-button>\n                    <gxg-tab-button\n                      slot=\"tab-bar\"\n                      tabLabel={this._componentLocale.tabAdvanced.tabLabel}\n                      tab=\"advanced\"\n                      hidden={!this.isAdvanced}\n                      part=\"tab-button-advanced\"\n                    ></gxg-tab-button>\n                  </gxg-tab-bar>\n                ) : null}\n\n                {this.renderTabBasic()}\n                {this.isAdvanced && this.renderTabAdvanced()}\n              </gxg-tabs>\n            </main>\n\n            {/* footer */}\n            {/* #cancel */}\n            <gxg-button\n              id=\"button-cancel\"\n              type=\"outlined\"\n              onClick={this.cancelKbHandler}\n              part=\"button-cancel\"\n              slot=\"footer-end\"\n            >\n              {this._componentLocale.footer.btnCancel}\n            </gxg-button>\n            {/* #create */}\n            <gxg-button\n              id=\"button-create\"\n              type=\"primary-text-only\"\n              onClick={this.createKbHandler}\n              part=\"button-create\"\n              slot=\"footer-end\"\n            >\n              {this._componentLocale.footer.btnCreate}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n        <gxg-shortcuts\n          src={this.shortcutsSrc}\n          ref={(el: HTMLGxgShortcutsElement) =>\n            (this.gxgShortcutsEl = el as HTMLGxgShortcutsElement)\n          }\n        ></gxg-shortcuts>\n      </Host>\n    );\n  }\n}\nexport interface NewKBData {\n  authenticationType: string;\n  collation: string;\n  createDataFilesInKBFolder: boolean;\n  databaseName: string;\n  dataSource: string;\n  frontEnds: string[];\n  kbLocation: string;\n  kbName: string;\n  password: string;\n  prototypingEnvironment: string;\n  prototypingTarget: string;\n  savePassword: boolean;\n  serverName: string;\n  userInterfaceLanguage: string;\n  userName: string;\n}\n\nexport type CreateCallback = (data: NewKBData) => Promise<FormSubmitResult>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type GetDataSourcesCallback = (\n  selectedPrototypingEnvironmentId: string,\n  selectedPrototypingTargetId: string\n) => Promise<GxOption[]>;\n\nexport type GetFrontEndsCallback = (\n  selectedPrototypingEnvironmentId: string\n) => Promise<GxOption[]>;\n\nexport type SelectLocationCallback = () => Promise<string>;\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-6b1fe886.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wwImagesCss","CSS_BUNDLES","GxIdeWWImages","this","renderedFirstTime","attachDetectClickOutsideFilter","document","addEventListener","detectClickOutsideFilter","removeDetectClickOutsideFilter","removeEventListener","e","clickedOutside","closeOnOutsideClickHandler","filterEl","filtersHidden","saveInitialFilterData","filterInitialData","name","filterNameEl","value","module","filterModuleEl","searchContents","filterSearchContentsEl","category","filterCategoryEl","allDescendants","filterAllDescendantsEl","checked","modified","filterModifiedEl","dateTime","filterModifiedDateEl","after","filterAfterTypeEl","user","filterUserEl","style","filterStyleEl","language","filterLanguageEl","density","filterDensityEl","layer","filterLayerEl","renderFilter","h","class","ref","el","label","_componentLocale","filter","part","moduleFolder","defaultModule","defaultValue","selectEntityCallback","selectModuleCallback","onClick","resetFilterHandler","type","icon","toggleFiltersHandler","search","defaultCategory","disabled","categories","renderFormItems","_a","labelPosition","center","hide","filterModified","filterAfterType","FILTER_AFTER","DATE_TIME","afterLabel","id","NONE","afterNone","IMPORT","LAST_BUILD","centerLabel","styles","_b","languages","_c","densities","_d","layers","_e","renderImagesData","contentBorderEnd","noContentPadding","titleType","containerTitle","secondaryFilter","imagesDataTitle","slot","placeholder","onInput","filterInputHandler","chGridEl","rowSelectionMode","columnName","columnNameHidden","settingable","size","gridCommon","colSize","maxContent","tableHead","common","description","commonDouble","modifiedDate","lastUser","importDate","filteredImages","map","obj","rowid","src","hiChar","filterImagesInputValue","formatDate","renderImages","imagesTitle","titleHeightAsInput","imagesSelectedItems","item","url","alt","getImages","filters","parent","modifiedAfter","Object","assign","modifiedBy","loadCallback","then","items","images","selectedObjectsIds","deselectAll","filterImagesInformationHandler","newObjectCallbackHandler","newObjectCallback","openSelectionCallBackHandler","openSelectionCallback","deleteSelectionCallbackHandler","deleteSelectionCallback","selectAll","selectAllRows","listenChanges","detail","ev","loadImageItemsCallback","rowsId","selectionObjectChangedCallback","preventDefault","stopPropagation","contextMenuCallback","selection","selectedRowsId","clientX","clientY","filterValue","toLocaleLowerCase","image","nameMatch","includes","moduleMatch","descriptionMatch","modifiedDateMatch","toString","importDateMatch","filtersHiddenHandler","hidden","componentWillLoad","Locale","getComponentStrings","componentDidLoadEvent","emit","componentDidLoad","focus","componentDidRender","componentDidRenderFirstTime","componentName","keyDownHandler","eventInfo","activeElement","key","validate","isValid","reload","render","Host","model","noContentGap","displayTitle","slimmerFooter","config","gxIdeContainer","footer","btnSelectAll","btnNew","length","objCount","matching"],"sources":["src/components/ww-images/ww-images.scss?tag=gx-ide-ww-images&encapsulation=shadow","src/components/ww-images/ww-images.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/mercury/dist/mercury.scss\";\n\n:host {\n  display: block;\n}\n\n/*--- Filter ---*/\n.filter--padding {\n  padding: var(--gx-ide-container__padding);\n}\n.filter--gap {\n  gap: var(--gx-ide-grid-row-gap);\n}\n.filter {\n  display: flex;\n  flex-direction: column;\n  &__first-row {\n    display: flex;\n    gap: var(--gx-ide-grid-column-gap);\n    .name,\n    .module-folder {\n      flex: 1;\n    }\n    .filter-btn {\n      flex: none;\n    }\n    .second-column {\n      display: flex;\n      flex-direction: row;\n      align-items: end;\n      gap: var(--gx-ide-grid-column-gap);\n    }\n    > * {\n      flex: 1;\n    }\n  }\n  .checkboxes-label-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n  .checkboxes-wrapper {\n    display: flex;\n    gap: var(--gx-ide-grid-column-gap);\n    border: 1px solid var(--gray-02);\n    border-radius: var(--border-radius-sm);\n    height: var(--gxg-form-text-height);\n    box-sizing: border-box;\n    align-items: center;\n    padding-inline-start: var(--mer-spacing--2xs);\n  }\n  .user {\n    max-width: 100% !important;\n  }\n}\n\n/*Filter*/\n.filters-outer-wrapper {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows 200ms;\n  &--hidden {\n    grid-template-rows: 0fr;\n  }\n}\n.filters-inner-wrapper {\n  padding-top: var(--gx-ide-container__padding);\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n\n  .search-contents {\n    grid-area: 1 / 1 / 2 / 5;\n  }\n  .category {\n    grid-area: 1 / 5 / 2 / 9;\n  }\n  .options {\n    grid-area: 1 / 9 / 2 / 13;\n  }\n  .date-time {\n    grid-area: 2 / 1 / 3 / 5;\n  }\n  .after-date-time {\n    grid-area: 2 / 5 / 3 / 9;\n  }\n  .user {\n    grid-area: 2 / 9 / 3 / 13;\n  }\n  .style {\n    grid-area: 3 / 1 / 4 / 4;\n  }\n  .language {\n    grid-area: 3 / 4 / 4 / 7;\n  }\n  .density {\n    grid-area: 3 / 7 / 4 / 10;\n  }\n  .layer {\n    grid-area: 3 / 10 / 4 / 13;\n  }\n}\n\n.master-wrapper {\n  height: 100%;\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n\n/*--- Grid/Images Container ---*/\n.grid-images-container {\n  border-top: 1px solid var(--gx-ide-container-border-color);\n  display: grid;\n  grid-template-columns: 1fr 220px;\n  grid-column-gap: 0;\n  grid-row-gap: 0;\n  overflow: auto;\n}\n.images-information {\n  &__header {\n    display: flex;\n    align-items: center;\n    gap: var(--gx-ide-grid-column-gap);\n    &-title {\n      flex: none;\n    }\n  }\n}\n\n/* Objects Table */\n.images-grid {\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 0;\n  > :nth-child(1) {\n    grid-area: 1 / 1 / 1 / 3;\n  }\n}\n.images-container {\n  .image-item {\n    display: inline-block;\n    width: 50%;\n    height: 110px; /*should be half the images container width (actually is 220px)*/\n    &__container {\n      padding: var(--gx-ide-container__padding);\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: scale-down;\n      }\n    }\n    &__name {\n      @include elipsis;\n      text-align: center;\n      width: 100%;\n      display: block;\n      font-size: 10px;\n      padding: 4px 8px;\n      box-sizing: border-box;\n      background-color: var(--gray-00);\n    }\n    &:nth-child(odd) {\n      .image-item__name {\n        border-inline-end: 1px solid var(--gray-02);\n      }\n    }\n  }\n}\n.objects-count {\n  grid-template-columns: repeat(2, 1fr);\n  *:nth-child(2) {\n    justify-content: flex-end;\n    align-items: flex-start;\n  }\n}\n\n@include hiChar;\n\n@include tabular-grid-cell-layout(\n  $tabular-grid-selector: \".tabular-grid-ww-images\",\n  $tabular-grid-cell-node-type: \"text\",\n  $tabular-grid-cell-apply-ellipsis: true,\n  $tabular-grid-affected-columns-nth-list: (\n    4\n  )\n);\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Listen,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { ChGridRowContextMenuEvent } from \"@genexus/chameleon-controls-library\";\nimport { DatePickerDate } from \"@genexus/gemini/dist/types/components/date-picker/date-picker\";\nimport { MercuryBundles } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { GxOption } from \"../../common/types\";\nimport { config } from \"../../common/config\";\nimport { renderFormItems } from \"../../common/common\";\nimport { EntityData, ContextMenuInfo } from \"../../common/types\";\nimport { FILTER_AFTER } from \"../../common/constants\";\nimport {\n  formatDate,\n  hiChar,\n  closeOnOutsideClickHandler\n} from \"../../common/helpers\";\nimport { gridCommon } from \"../../common/grid\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  // \"utils/form\",\n  // \"utils/layout\",\n  // \"utils/typography\",\n  // \"components/button\",\n  // \"components/checkbox\",\n  // \"components/edit\",\n  \"components/tabular-grid\"\n];\n\n@Component({\n  tag: \"gx-ide-ww-images\",\n  styleUrl: \"ww-images.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/ww-images\"]\n})\nexport class GxIdeWWImages {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  private filterInitialData: FilerInitialData;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeWwImagesElement;\n\n  private filterEl: HTMLDivElement;\n  /* References needed to collect data */\n  private filterNameEl!: HTMLGxgFormTextElement;\n  private filterSearchContentsEl!: HTMLGxgFormTextElement;\n  private filterCategoryEl!: HTMLGxgComboBoxElement;\n  private filterModuleEl!: HTMLGxIdeEntitySelectorElement;\n  private filterModifiedEl!: HTMLGxgFormCheckboxElement;\n  private filterAllDescendantsEl!: HTMLGxgFormCheckboxElement;\n  private filterAfterTypeEl!: HTMLGxgComboBoxElement;\n  private filterUserEl!: HTMLGxgFormTextElement;\n  private filterModifiedDateEl!: HTMLGxgDatePickerElement;\n  private filterStyleEl!: HTMLGxgComboBoxElement;\n  private filterLanguageEl!: HTMLGxgComboBoxElement;\n  private filterDensityEl!: HTMLGxgComboBoxElement;\n  private filterLayerEl!: HTMLGxgComboBoxElement;\n  private chGridEl!: HTMLChGridElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() filtersHidden = true;\n  @Watch(\"filtersHidden\")\n  filtersHiddenHandler(hidden: boolean): void {\n    if (hidden) {\n      this.removeDetectClickOutsideFilter();\n    } else {\n      this.attachDetectClickOutsideFilter();\n    }\n  }\n\n  /**\n   * The after types render in the after selector\n   */\n  @State() filterAfterType = \"\";\n\n  /**\n   * For show or hide the filters relative to modifiers\n   */\n  @State() filterModified = false;\n\n  /**\n   * The images rendered in the table\n   */\n  @State() images: ImageData[] = [];\n\n  /**\n   * The images rendered in the table, after the filter\n   */\n  @State() filteredImages: ImageData[] = [];\n\n  /**\n   * The items of the image that is selected\n   */\n  @State() imagesSelectedItems: ImageItemData[] = [];\n\n  /**\n   * The selected images in the table of images\n   */\n  @State() selectedObjectsIds: string[] = [];\n\n  /**\n   * The images filter input text value\n   */\n  @State() filterImagesInputValue = \"\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Displays a secondary filter, used to filter over the filtered images\n   */\n  @Prop() readonly secondaryFilter = false;\n\n  /**\n   * The categories render in the filter category selector\n   */\n  @Prop() readonly categories!: GxOption[];\n\n  /**\n   * The densities render in the filter density selector\n   */\n  @Prop() readonly densities!: GxOption[];\n\n  /**\n   * The default value for the 'categories' filter\n   */\n  @Prop() readonly defaultCategory: string;\n\n  /**\n   * The default value for the module/folder filter\n   */\n  @Prop() readonly defaultModule: EntityData;\n\n  /**\n   * The default value for the type filter\n   */\n  @Prop() readonly defaultType: string;\n\n  /**\n   * The modules/folders render in the module/folder selector\n   */\n  @Prop() readonly filterModules!: GxOption[];\n\n  /**\n   * The languages render in the filter language selector\n   */\n  @Prop() readonly languages!: GxOption[];\n\n  /**\n   * The layers render in the filter layer selector\n   */\n  @Prop() readonly layers!: GxOption[];\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly contextMenuCallback!: ContextMenuCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly deleteSelectionCallback!: DeleteSelectionCallback;\n\n  /**\n   * This is a function provided by the developer that return a list of images to populate the table of images.\n   */\n  @Prop() readonly loadCallback!: LoadCallback;\n\n  /**\n   * This is a function provided by the developer that return a list of items of the image selected.\n   */\n  @Prop() readonly loadImageItemsCallback!: LoadImageItemsCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly newObjectCallback!: NewObjectCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly openSelectionCallback!: OpenSelectionCallback;\n\n  /**\n   * Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled.\n   */\n  @Prop() readonly selectModuleCallback!: SelectModuleCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly selectionObjectChangedCallback!: SelectionObjectCallback;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * The styles render in the filter style selector\n   */\n  @Prop() readonly styles!: GxOption[];\n\n  /**\n   * The types render in the filter type selector\n   */\n  @Prop() readonly types!: GxOption[];\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs.\n   */\n  @Event() componentDidLoadEvent: EventEmitter<boolean>;\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.componentDidLoadEvent.emit(true);\n  }\n\n  componentDidLoad() {\n    this.listenChanges();\n    this.getImages();\n    this.saveInitialFilterData();\n    this.filterNameEl.focus();\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  @Listen(\"keydown\", { passive: true })\n  keyDownHandler(eventInfo: KeyboardEvent) {\n    if (document.activeElement === this.el) {\n      switch (eventInfo.key) {\n        case \"Enter\":\n          this.openSelectionCallBackHandler();\n          break;\n        case \"Delete\":\n          this.deleteSelectionCallbackHandler();\n          break;\n      }\n    }\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * Validate necessary data input\n   */\n  @Method()\n  async validate(): Promise<boolean> {\n    const isValid = true;\n    return isValid;\n  }\n\n  /**\n   * This method reload the view, refreshing the filters and the table of images.\n   */\n  @Method()\n  async reload(): Promise<void> {\n    this.deleteSelectionCallbackHandler();\n    this.getImages();\n  }\n\n  // 9.LOCAL METHODS //\n\n  private attachDetectClickOutsideFilter = () => {\n    document.addEventListener(\"click\", this.detectClickOutsideFilter);\n  };\n  private removeDetectClickOutsideFilter = () => {\n    document.removeEventListener(\"click\", this.detectClickOutsideFilter);\n  };\n  private detectClickOutsideFilter = (e: PointerEvent): void => {\n    const clickedOutside = closeOnOutsideClickHandler(e, this.filterEl);\n    if (clickedOutside) {\n      this.filtersHidden = true;\n    } else {\n      this.filtersHidden = false;\n    }\n  };\n\n  /**\n   * @description This is needed for resetting the filter. When the user resets the filter, all the filter controls values have to be restored to the value they had on componentDidLoad.\n   */\n  private saveInitialFilterData = () => {\n    this.filterInitialData = {\n      name: this.filterNameEl.value,\n      module: this.filterModuleEl.value,\n      searchContents: this.filterSearchContentsEl.value,\n      category: this.filterCategoryEl.value,\n      allDescendants: this.filterAllDescendantsEl.checked,\n      modified: this.filterModifiedEl.checked,\n      dateTime: this.filterModifiedDateEl.value,\n      after: this.filterAfterTypeEl.value,\n      user: this.filterUserEl.value,\n      style: this.filterStyleEl.value,\n      language: this.filterLanguageEl.value,\n      density: this.filterDensityEl.value,\n      layer: this.filterLayerEl.value\n    };\n  };\n\n  // 9.LOCAL METHODS -> Renders //\n\n  private renderFilter = (): Element => {\n    return (\n      <div\n        class=\"filter filter--padding\"\n        ref={(el: HTMLDivElement) => (this.filterEl = el as HTMLDivElement)}\n      >\n        <div class=\"filter__first-row\">\n          {/* name */}\n          <gxg-form-text\n            label-position=\"above\"\n            label={this._componentLocale.filter.name}\n            ref={(el: HTMLGxgFormTextElement) =>\n              (this.filterNameEl = el as HTMLGxgFormTextElement)\n            }\n            part=\"filter-name\"\n            class=\"name\"\n          ></gxg-form-text>\n\n          <div class=\"second-column\">\n            {/* module/folder */}\n            <gx-ide-entity-selector\n              label={this._componentLocale.filter.moduleFolder}\n              label-position=\"above\"\n              value={this.defaultModule}\n              defaultValue={this.defaultModule}\n              selectEntityCallback={this.selectModuleCallback}\n              ref={(el: HTMLGxIdeEntitySelectorElement) =>\n                (this.filterModuleEl = el as HTMLGxIdeEntitySelectorElement)\n              }\n              class=\"module-folder\"\n              part=\"filter-module-folder\"\n            ></gx-ide-entity-selector>\n\n            {/* reset filter button */}\n            <gxg-button\n              onClick={this.resetFilterHandler}\n              part=\"gxg-button-reset-filter\"\n              type=\"secondary-icon-only\"\n              icon=\"gemini-tools/reset\"\n              class=\"reset-filter-btn\"\n            ></gxg-button>\n\n            {/* filter button */}\n            <gxg-button\n              onClick={this.toggleFiltersHandler}\n              part=\"gxg-button gxg-button--more-less\"\n              type=\"secondary-icon-only\"\n              icon={\n                true ? \"window-tools/filter-conditions\" : \"window-tools/filter\"\n              }\n              class=\"filter-btn\"\n            ></gxg-button>\n          </div>\n        </div>\n\n        <div\n          class={{\n            \"filters-outer-wrapper\": true,\n            \"filters-outer-wrapper--hidden\": this.filtersHidden\n          }}\n        >\n          <div\n            class={{\n              \"filter\": true,\n              \"filter--gap\": true,\n              \"filters-inner-wrapper\": true\n            }}\n          >\n            {/* search contents */}\n            <gxg-form-text\n              label-position=\"above\"\n              label={this._componentLocale.filter.search}\n              ref={(el: HTMLGxgFormTextElement) =>\n                (this.filterSearchContentsEl = el as HTMLGxgFormTextElement)\n              }\n              class={{ \"search-contents\": true }}\n              part=\"filter-search\"\n            ></gxg-form-text>\n\n            {/* category */}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.category}\n              value={this.defaultCategory}\n              disabled={!this.categories}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterCategoryEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"category\"\n              part=\"filter-category\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.categories ?? [])}\n            </gxg-combo-box>\n\n            <div class=\"options\">\n              <gxg-label labelPosition=\"above\" center={false}>\n                Options:\n              </gxg-label>\n              {/* all descendants*/}\n              <div class=\"checkboxes-wrapper\">\n                <gxg-form-checkbox\n                  label={this._componentLocale.filter.allDescendants}\n                  ref={(el: HTMLGxgFormCheckboxElement) =>\n                    (this.filterAllDescendantsEl =\n                      el as HTMLGxgFormCheckboxElement)\n                  }\n                  class=\"all-descendants\"\n                  part=\"filter-all-descendants\"\n                ></gxg-form-checkbox>\n\n                {/* modified */}\n                <gxg-form-checkbox\n                  label={this._componentLocale.filter.modified}\n                  ref={(el: HTMLGxgFormCheckboxElement) =>\n                    (this.filterModifiedEl = el as HTMLGxgFormCheckboxElement)\n                  }\n                  class=\"modified\"\n                  part=\"filter-modified\"\n                ></gxg-form-checkbox>\n              </div>\n            </div>\n\n            {/* date/time*/}\n            <div\n              class={{\n                \"hide\":\n                  !this.filterModified ||\n                  this.filterAfterType !== FILTER_AFTER.DATE_TIME,\n                \"date-time\": true\n              }}\n              part=\"filter-datetime\"\n            >\n              <div class=\"date-time-wrapper\">\n                <gxg-label label-position=\"above\">\n                  {this._componentLocale.filter.dateTime}\n                </gxg-label>\n                <gxg-date-picker\n                  disabled={!this.filterModified}\n                  ref={(el: HTMLGxgDatePickerElement) =>\n                    (this.filterModifiedDateEl = el as HTMLGxgDatePickerElement)\n                  }\n                ></gxg-date-picker>\n              </div>\n            </div>\n\n            {/* after date/time  */}\n            <gxg-combo-box\n              class=\"after-date-time\"\n              disabled={!this.filterModified}\n              label={this._componentLocale.filter.afterLabel}\n              disable-filter\n              value={this.filterAfterType}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterAfterTypeEl = el as HTMLGxgComboBoxElement)\n              }\n              part=\"filter-after-type\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", [\n                {\n                  id: FILTER_AFTER.NONE,\n                  label: this._componentLocale.filter.afterNone,\n                  value: FILTER_AFTER.NONE\n                },\n                {\n                  id: FILTER_AFTER.DATE_TIME,\n                  label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],\n                  value: FILTER_AFTER.DATE_TIME\n                },\n                {\n                  id: FILTER_AFTER.IMPORT,\n                  label: this._componentLocale.filter[FILTER_AFTER.IMPORT],\n                  value: FILTER_AFTER.IMPORT\n                },\n                {\n                  id: FILTER_AFTER.LAST_BUILD,\n                  label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],\n                  value: FILTER_AFTER.LAST_BUILD\n                }\n              ])}\n            </gxg-combo-box>\n\n            {/* user  */}\n            <gxg-form-text\n              disabled={!this.filterModified}\n              labelPosition=\"above\"\n              label={this._componentLocale.filter.user}\n              ref={(el: HTMLGxgFormTextElement) =>\n                (this.filterUserEl = el as HTMLGxgFormTextElement)\n              }\n              value=\"hey\"\n              centerLabel={false}\n              class=\"user\"\n              part=\"filter-user\"\n            ></gxg-form-text>\n\n            {/* style*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.style}\n              disabled={!this.styles}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterStyleEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"style\"\n              part=\"filter-style\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.styles ?? [])}\n            </gxg-combo-box>\n\n            {/* language*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.language}\n              disabled={!this.languages}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterLanguageEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"language\"\n              part=\"filter-language\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.languages ?? [])}\n            </gxg-combo-box>\n\n            {/* density*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.density}\n              disabled={!this.densities}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterDensityEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"density\"\n              part=\"filter-density\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.densities ?? [])}\n            </gxg-combo-box>\n\n            {/* layer*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.layer}\n              disabled={!this.layers}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterLayerEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"layer\"\n              part=\"filter-layer\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.layers ?? [])}\n            </gxg-combo-box>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  private renderImagesData = (): Element => {\n    return (\n      /* images information*/\n      <gx-ide-container\n        contentBorderEnd\n        noContentPadding\n        titleType=\"secondary\"\n        containerTitle={\n          !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null\n        }\n        class={{ \"images-information\": true, \"overflow-auto\": true }}\n        part=\"grid-container\"\n      >\n        {this.secondaryFilter ? (\n          <header class=\"images-information__header\" slot=\"header\">\n            <gx-ide-title\n              type=\"secondary\"\n              class=\"images-information__header-title\"\n            >\n              {this._componentLocale.imagesDataTitle}\n            </gx-ide-title>\n            <gxg-form-text\n              icon=\"gemini-tools/search\"\n              icon-position=\"start\"\n              placeholder=\"Search by any field\"\n              onInput={this.filterInputHandler as any}\n            ></gxg-form-text>\n          </header>\n        ) : null}\n\n        <ch-tabular-grid\n          ref={(el: HTMLChTabularGridElement) => (this.chGridEl = el)}\n          part=\"ch-grid-images\"\n          rowSelectionMode=\"single\"\n          class=\"tabular-grid tabular-grid-ww-images\"\n        >\n          <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n            <ch-tabular-grid-column\n              columnName=\"\"\n              columnNameHidden={false}\n              settingable={false}\n              size={gridCommon.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.name}\n              columnNameHidden={false}\n              settingable={false}\n              class=\"tabular-grid-column\"\n              size={gridCommon.colSize.common}\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.module}\n              columnNameHidden={false}\n              settingable={false}\n              size={gridCommon.colSize.common}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.description}\n              columnNameHidden={false}\n              settingable={false}\n              size={gridCommon.colSize.commonDouble}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.modifiedDate}\n              columnNameHidden={false}\n              settingable={false}\n              size={gridCommon.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.lastUser}\n              columnNameHidden={false}\n              settingable={false}\n              size={gridCommon.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.importDate}\n              columnNameHidden={false}\n              settingable={false}\n              size={gridCommon.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n          </ch-tabular-grid-columnset>\n          {this.filteredImages.map((obj: ImageData) => (\n            <ch-tabular-grid-row rowid={obj.id} class=\"tabular-grid-row\">\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                <ch-image src={obj.icon}></ch-image>\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.name, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.module, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.description, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(\n                  `${formatDate(obj.modifiedDate)}`,\n                  this.filterImagesInputValue\n                )}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.lastUser, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(\n                  `${formatDate(obj.importDate)}`,\n                  this.filterImagesInputValue\n                )}\n              </ch-tabular-grid-cell>\n            </ch-tabular-grid-row>\n          ))}\n        </ch-tabular-grid>\n      </gx-ide-container>\n    );\n  };\n\n  private renderImages = (): Element => {\n    return (\n      /* tiles */\n      <gx-ide-container\n        containerTitle={this._componentLocale.imagesTitle}\n        noContentPadding\n        titleType=\"secondary\"\n        class=\"overflow-auto\"\n        titleHeightAsInput={\n          this.secondaryFilter ? this._componentLocale.imagesDataTitle : null\n        }\n        part=\"image-data-container\"\n      >\n        <div class=\"images-container\">\n          {this.imagesSelectedItems.map(item => (\n            <div class=\"image-item\">\n              <div class=\"image-item__container\">\n                <div class=\"img\">\n                  <img src={item.url} alt={item.id} />\n                </div>\n              </div>\n              <span class=\"image-item__name\">{item.name}</span>\n            </div>\n          ))}\n        </div>\n      </gx-ide-container>\n    );\n  };\n\n  // 9.LOCAL METHODS -> Other //\n\n  private getImages = (): void => {\n    let filters: ImageFiltersData = {\n      name: this.filterNameEl.value,\n      parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null\n    };\n\n    const modified = this.filterModifiedEl.checked;\n    const modifiedAfter = this.filterAfterTypeEl.value;\n    filters = {\n      ...filters,\n      searchContents: this.filterSearchContentsEl.value,\n      category: this.filterCategoryEl.value,\n      allDescendants: this.filterAllDescendantsEl.checked,\n      modifiedAfter: modified ? modifiedAfter : null,\n      modifiedBy: modified ? this.filterUserEl.value : null,\n      modifiedDate:\n        modified && modifiedAfter === FILTER_AFTER.DATE_TIME\n          ? (this.filterModifiedDateEl.value as Date)\n          : null,\n      style: this.filterStyleEl.value,\n      language: this.filterLanguageEl.value,\n      density: this.filterDensityEl.value,\n      layer: this.filterLayerEl.value\n    };\n\n    this.loadCallback(filters).then((items: ImageData[]) => {\n      this.images = items;\n      this.selectedObjectsIds = [];\n      this.deselectAll();\n      this.filterImagesInformationHandler();\n    });\n  };\n\n  private newObjectCallbackHandler = (): void => {\n    this.newObjectCallback();\n  };\n\n  private openSelectionCallBackHandler = (): void => {\n    this.openSelectionCallback(this.selectedObjectsIds);\n  };\n\n  private deleteSelectionCallbackHandler = (): void => {\n    this.deleteSelectionCallback(this.selectedObjectsIds);\n  };\n\n  private resetFilterHandler = () => {\n    if (this.filterInitialData) {\n      this.filterNameEl.value = this.filterInitialData.name;\n      this.filterModuleEl.value = this.filterInitialData.module;\n      this.filterSearchContentsEl.value = this.filterInitialData.searchContents;\n      this.filterCategoryEl.value = this.filterInitialData.category;\n      this.filterAllDescendantsEl.checked =\n        this.filterInitialData.allDescendants;\n      this.filterModifiedEl.checked = this.filterInitialData.modified;\n      this.filterModifiedDateEl.value = this.filterInitialData.dateTime;\n      this.filterAfterTypeEl.value = this.filterInitialData.after;\n      this.filterUserEl.value = this.filterInitialData.user;\n      this.filterStyleEl.value = this.filterInitialData.style;\n      this.filterLanguageEl.value = this.filterInitialData.language;\n      this.filterDensityEl.value = this.filterInitialData.density;\n      this.filterLayerEl.value = this.filterInitialData.layer;\n    }\n  };\n\n  private toggleFiltersHandler = () => {\n    this.filtersHidden = !this.filtersHidden;\n  };\n\n  private selectAll = (): void => {\n    (this.chGridEl as any).selectAllRows();\n  };\n\n  private deselectAll = (): void => {\n    (this.chGridEl as any).selectAllRows(false);\n  };\n\n  private listenChanges = (): void => {\n    /* name */\n    this.filterNameEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* module/folder */\n    this.filterModuleEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* search contents*/\n    this.filterSearchContentsEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* category */\n    this.filterCategoryEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* (options) -> all descendants */\n    this.filterAllDescendantsEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* (options) -> modified */\n    this.filterModifiedEl.addEventListener(\"change\", (e: any) => {\n      this.filterModified = e.detail.value;\n      this.getImages();\n    });\n    /* date/time */\n    this.filterModifiedDateEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* after */\n    this.filterAfterTypeEl.addEventListener(\"valueChanged\", () => {\n      this.filterAfterType = this.filterAfterTypeEl.value;\n      this.getImages();\n    });\n    /* user */\n    this.filterUserEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* style */\n    this.filterStyleEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* language */\n    this.filterLanguageEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* density */\n    this.filterDensityEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* layer */\n    this.filterLayerEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n\n    // for grid selection\n    this.chGridEl.addEventListener(\"selectionChanged\", (ev: any): void => {\n      this.loadImageItemsCallback(ev.detail.rowsId[0]).then(\n        (items: ImageItemData[]) => {\n          this.imagesSelectedItems = items;\n        }\n      );\n    });\n    this.chGridEl.addEventListener(\"rowDoubleClicked\", (): void => {\n      this.openSelectionCallBackHandler();\n    });\n    this.chGridEl.addEventListener(\"selectionChanged\", (ev: any): void => {\n      this.selectedObjectsIds = ev.detail.rowsId;\n      this.selectionObjectChangedCallback(this.selectedObjectsIds);\n    });\n    this.chGridEl.addEventListener(\n      \"rowContextMenu\",\n      (ev: CustomEvent<ChGridRowContextMenuEvent>): void => {\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.contextMenuCallback({\n          selection: ev.detail.selectedRowsId,\n          clientX: ev.detail.clientX,\n          clientY: ev.detail.clientY\n        });\n      }\n    );\n  };\n\n  private filterInputHandler = (e: CustomEvent<EventEmitter>) => {\n    this.filterImagesInputValue = e.detail as unknown as string;\n    this.filterImagesInformationHandler();\n  };\n\n  private filterImagesInformationHandler = () => {\n    const filterValue = this.filterImagesInputValue.toLocaleLowerCase();\n    this.filteredImages = this.images.filter(image => {\n      const nameMatch = image.name.toLocaleLowerCase().includes(filterValue);\n      const moduleMatch = image.module\n        .toLocaleLowerCase()\n        .includes(filterValue);\n      const descriptionMatch = image.description\n        .toLocaleLowerCase()\n        .includes(filterValue);\n      const modifiedDateMatch = image.modifiedDate\n        .toString()\n        .includes(filterValue);\n      const lastUser = image.lastUser.toLocaleLowerCase().includes(filterValue);\n      const importDateMatch =\n        image.importDate && image.importDate.toString().includes(filterValue);\n\n      return (\n        nameMatch ||\n        moduleMatch ||\n        descriptionMatch ||\n        modifiedDateMatch ||\n        lastUser ||\n        importDateMatch\n      );\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host class=\"gx-ide-component\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"master-wrapper\">\n              {this.renderFilter()}\n              <div class=\"grid-images-container\">\n                {this.renderImagesData()}\n                {this.renderImages()}\n              </div>\n            </div>\n\n            {/* select all button */}\n            <gxg-button\n              id=\"button-select-all\"\n              type=\"outlined\"\n              onClick={this.selectAll}\n              part=\"gxg-button gxg-button--select-all\"\n              slot=\"footer-end\"\n            >\n              {this._componentLocale.footer.btnSelectAll}\n            </gxg-button>\n\n            {/* new file button*/}\n            <gxg-button\n              id=\"button-new-file\"\n              type=\"primary-text-icon\"\n              icon=\"objects/image\"\n              onClick={this.newObjectCallbackHandler}\n              part=\"gxg-button gxg-button--new-file\"\n              slot=\"footer-end\"\n            >\n              {this._componentLocale.footer.btnNew}\n            </gxg-button>\n\n            {/* matching objects */}\n            <gxg-text\n              class=\"align-end\"\n              part=\"objects-matching\"\n              slot=\"footer-start\"\n            >\n              {`${this.filteredImages.length} ${this._componentLocale.objCount.matching}`}\n            </gxg-text>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type SelectionObjectCallback = (ids: string[]) => Promise<void>;\nexport type OpenSelectionCallback = (ids: string[]) => Promise<void>;\nexport type DeleteSelectionCallback = (ids: string[]) => Promise<void>;\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\nexport type ContextMenuCallback = (\n  contextMenuInfo: ContextMenuInfo\n) => Promise<void>;\nexport type NewObjectCallback = () => Promise<void>;\nexport type LoadCallback = (filters: ImageFiltersData) => Promise<ImageData[]>;\nexport type LoadImageItemsCallback = (id: string) => Promise<ImageItemData[]>;\n\nexport type ImageFiltersData = {\n  name?: string;\n  searchContents?: string;\n  category?: string;\n  parent?: string;\n  allDescendants?: boolean;\n  modifiedAfter?: string;\n  modifiedBy?: string;\n  modifiedDate?: Date;\n  style?: string;\n  language?: string;\n  density?: string;\n  layer?: string;\n};\n\nexport type ImageData = {\n  id: string;\n  icon: string;\n  name: string;\n  description: string;\n  parent: string;\n  module: string;\n  modifiedDate?: Date;\n  lastUser?: string;\n  importDate?: Date;\n};\n\nexport type ImageItemData = {\n  id: string;\n  name: string;\n  url: string;\n};\n\ntype FilerInitialData = {\n  name: string;\n  module: EntityData;\n  searchContents: string;\n  category: string;\n  allDescendants: boolean;\n  modified: boolean;\n  dateTime: DatePickerDate;\n  after: string;\n  user: string;\n  style: string;\n  language: string;\n  density: string;\n  layer: string;\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-6d9841c4.entry.js

@@ -1,94 +0,0 @@
-import { r as t, h as i, H as e, g as n } from "./p-c147291f.js";
-
-const s = ":host{display:flex;align-items:center;justify-content:center}.container{max-width:520px;margin:0 auto;gap:var(--mer-spacing--xl);opacity:0;transition:opacity var(--state-transition-speed);padding:var(--mer-spacing--md)}.container .icon-wrapper{border:var(--mer-border__width--sm) dashed var(--mer-accent__primary);border-radius:50%;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}.container__main{gap:var(--mer-spacing--sm)}.container__buttons{gap:var(--mer-spacing--xs)}.container--visible{opacity:1}.container,.container__main,.container__buttons{display:flex;align-items:center;flex-direction:column}";
-
-const a = class {
-  constructor(i) {
-    t(this, i);
-    /*
-      INDEX:
-      1.OWN PROPERTIES
-      2.REFERENCE TO ELEMENTS
-      3.STATE() VARIABLES
-      4.PUBLIC PROPERTY API | WATCH'S
-      5.EVENTS (EMIT)
-      6.COMPONENT LIFECYCLE METHODS
-      7.LISTENERS
-      8.PUBLIC METHODS API
-      9.LOCAL METHODS
-      10.RENDER() FUNCTION
-      */
-    // 1.OWN PROPERTIES //
-        this.transitionSpeed = 200;
-    this.stateIcon = undefined;
-    this.stateTitle = undefined;
-    this.stateDescription = undefined;
-    this.primaryButtonLabel = undefined;
-    this.secondaryButtonLabel = undefined;
-    this.display = false;
-  }
-  watchDisplayHandler(t) {
-    if (t) {
-      this.primaryButtonLabel && (this.primaryButtonEl.disabled = false);
-      this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = false);
-    } else {
-      setTimeout((() => {
-        this.primaryButtonLabel && (this.primaryButtonEl.disabled = true);
-        this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = true);
-      }), this.transitionSpeed);
-    }
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE METHODS //
-  componentWillLoad() {
-    this.el.style.setProperty("--state-transition-speed", `${this.transitionSpeed}ms`);
-  }
-  componentDidLoad() {
-    this.display = true;
-  }
-  // 7.LISTENERS //
-  // 8.PUBLIC METHODS API //
-  // 9.LOCAL METHODS //
-  // 10.RENDER() FUNCTION //
-  render() {
-    return i(e, null, i("div", {
-      class: {
-        container: true,
-        "container--visible": this.display
-      }
-    }, this.stateIcon ? i("span", {
-      class: "icon-wrapper"
-    }, i("gxg-icon", {
-      class: "icon",
-      type: this.stateIcon,
-      color: "mercury-primary"
-    }, this.stateTitle)) : null, i("main", {
-      class: "container__main"
-    }, this.stateTitle ? i("gx-ide-title", {
-      alignment: "center"
-    }, this.stateTitle) : null, this.stateDescription ? i("gxg-text", {
-      textAlign: "center"
-    }, this.stateDescription) : null), i("div", {
-      class: "container__buttons"
-    }, this.primaryButtonLabel ? i("gxg-button", {
-      type: "primary-text-only",
-      ref: t => this.primaryButtonEl = t
-    }, this.primaryButtonLabel) : null, this.secondaryButtonLabel ? i("gxg-button", {
-      type: "secondary-text-only",
-      ref: t => this.secondaryButtonEl = t
-    }, this.secondaryButtonLabel) : null)));
-  }
-  get el() {
-    return n(this);
-  }
-  static get watchers() {
-    return {
-      display: [ "watchDisplayHandler" ]
-    };
-  }
-};
-
-a.style = s;
-
-export { a as gx_ide_empty_state };
-//# sourceMappingURL=p-6d9841c4.entry.js.map

package/dist/genexus-ide-ui/p-6d9841c4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gxIdeEmptyStateCss","GxIdeEmptyState","this","transitionSpeed","watchDisplayHandler","display","primaryButtonLabel","primaryButtonEl","disabled","secondaryButtonLabel","secondaryButtonEl","setTimeout","componentWillLoad","el","style","setProperty","componentDidLoad","render","h","Host","class","container","stateIcon","type","color","stateTitle","alignment","stateDescription","textAlign","ref"],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.container {\n  max-width: 520px;\n  margin: 0 auto;\n  gap: var(--mer-spacing--xl);\n  opacity: 0;\n  transition: opacity var(--state-transition-speed);\n  padding: var(--mer-spacing--md);\n\n  .icon-wrapper {\n    border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n    border-radius: 50%;\n    min-width: 40px;\n    min-height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &__main {\n    gap: var(--mer-spacing--sm);\n  }\n  &__buttons {\n    gap: var(--mer-spacing--xs);\n  }\n  &--visible {\n    opacity: 1;\n  }\n}\n.container,\n.container__main,\n.container__buttons {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-empty-state\",\n  styleUrl: \"gx-ide-empty-state.scss\",\n  shadow: true\n})\nexport class GxIdeEmptyState {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  private transitionSpeed: number = 200;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeEmptyStateElement;\n  private primaryButtonEl!: HTMLGxgButtonElement;\n  private secondaryButtonEl!: HTMLGxgButtonElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The state icon\n   */\n  @Prop() readonly stateIcon?: string;\n\n  /**\n   * The state title\n   */\n  @Prop() readonly stateTitle!: string;\n\n  /**\n   * The state description\n   */\n  @Prop() readonly stateDescription?: string;\n\n  /**\n   * The button primary label\n   */\n  @Prop() readonly primaryButtonLabel?: string;\n\n  /**\n   * The button secondary label\n   */\n  @Prop() readonly secondaryButtonLabel?: string;\n\n  /**\n   * If true, it will display the content\n   */\n  @Prop({ mutable: true }) display: boolean = false;\n  @Watch(\"display\")\n  watchDisplayHandler(display: boolean) {\n    if (display) {\n      this.primaryButtonLabel && (this.primaryButtonEl.disabled = false);\n      this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = false);\n    } else {\n      setTimeout(() => {\n        this.primaryButtonLabel && (this.primaryButtonEl.disabled = true);\n        this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = true);\n      }, this.transitionSpeed);\n    }\n  }\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.el.style.setProperty(\n      \"--state-transition-speed\",\n      `${this.transitionSpeed}ms`\n    );\n  }\n\n  componentDidLoad() {\n    this.display = true;\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <div class={{ \"container\": true, \"container--visible\": this.display }}>\n          {this.stateIcon ? (\n            <span class=\"icon-wrapper\">\n              <gxg-icon\n                class=\"icon\"\n                type={this.stateIcon}\n                color=\"mercury-primary\"\n              >\n                {this.stateTitle}\n              </gxg-icon>\n            </span>\n          ) : null}\n          <main class=\"container__main\">\n            {this.stateTitle ? (\n              <gx-ide-title alignment=\"center\">{this.stateTitle}</gx-ide-title>\n            ) : null}\n            {this.stateDescription ? (\n              <gxg-text textAlign=\"center\">{this.stateDescription}</gxg-text>\n            ) : null}\n          </main>\n          <div class=\"container__buttons\">\n            {this.primaryButtonLabel ? (\n              <gxg-button\n                type=\"primary-text-only\"\n                ref={el => (this.primaryButtonEl = el as HTMLGxgButtonElement)}\n              >\n                {this.primaryButtonLabel}\n              </gxg-button>\n            ) : null}\n            {this.secondaryButtonLabel ? (\n              <gxg-button\n                type=\"secondary-text-only\"\n                ref={el =>\n                  (this.secondaryButtonEl = el as HTMLGxgButtonElement)\n                }\n              >\n                {this.secondaryButtonLabel}\n              </gxg-button>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;AAAA,MAAMA,IAAqB;;MCOdC,IAAe;;;;;;;;;;;;;;;;;QAiBlBC,KAAAC,kBAA0B;;;;;;mBAwCU;;EAE5C,mBAAAC,CAAoBC;IAClB,IAAIA,GAAS;MACXH,KAAKI,uBAAuBJ,KAAKK,gBAAgBC,WAAW;MAC5DN,KAAKO,yBAAyBP,KAAKQ,kBAAkBF,WAAW;WAC3D;MACLG,YAAW;QACTT,KAAKI,uBAAuBJ,KAAKK,gBAAgBC,WAAW;QAC5DN,KAAKO,yBAAyBP,KAAKQ,kBAAkBF,WAAW;AAAK,UACpEN,KAAKC;;;;;EAQZ,iBAAAS;IACEV,KAAKW,GAAGC,MAAMC,YACZ,4BACA,GAAGb,KAAKC;;EAIZ,gBAAAa;IACEd,KAAKG,UAAU;;;;;;EAWjB,MAAAY;IACE,OACEC,EAACC,GAAI,MACHD,EAAA;MAAKE,OAAO;QAAEC,WAAa;QAAM,sBAAsBnB,KAAKG;;OACzDH,KAAKoB,YACJJ,EAAA;MAAME,OAAM;OACVF,EAAA;MACEE,OAAM;MACNG,MAAMrB,KAAKoB;MACXE,OAAM;OAELtB,KAAKuB,eAGR,MACJP,EAAA;MAAME,OAAM;OACTlB,KAAKuB,aACJP,EAAA;MAAcQ,WAAU;OAAUxB,KAAKuB,cACrC,MACHvB,KAAKyB,mBACJT,EAAA;MAAUU,WAAU;OAAU1B,KAAKyB,oBACjC,OAENT,EAAA;MAAKE,OAAM;OACRlB,KAAKI,qBACJY,EAAA;MACEK,MAAK;MACLM,KAAKhB,KAAOX,KAAKK,kBAAkBM;OAElCX,KAAKI,sBAEN,MACHJ,KAAKO,uBACJS,EAAA;MACEK,MAAK;MACLM,KAAKhB,KACFX,KAAKQ,oBAAoBG;OAG3BX,KAAKO,wBAEN"}