@genexus/genexus-ide-ui 1.1.4 → 1.1.5

package/dist/components/list-selector-item.js.map

@@ -1 +1 @@
-{"file":"list-selector-item.js","mappings":"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","names":[],"sources":["src/components/_helpers/list-selector/list-selector-item/list-selector-item.scss?tag=gx-ide-list-selector-item","src/components/_helpers/list-selector/list-selector-item/list-selector-item.tsx"],"sourcesContent":["@import \"../../../../global/gx-ide-mixins.scss\";\n@import \"../../../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n@include box-sizing;\n\ngx-ide-list-selector-item {\n  display: block;\n  max-width: 100%;\n  display: flex;\n  font-size: inherit;\n  font-weight: var(--item__font-weight);\n\n  &:hover {\n    .label {\n      background-color: var(--item__bg-color--hover);\n      cursor: pointer;\n    }\n    input:checked + .label {\n      border-color: var(--item__border-color--selected-hover);\n    }\n  }\n}\n\n/*readonly*/\ngx-ide-list-selector-item[readonly]:not([readonly=\"false\"]) {\n  .label {\n    pointer-events: none;\n    background-color: transparent;\n  }\n}\n/*ellipsis*/\ngx-ide-list-selector-item[ellipsis]:not([ellipsis=\"false\"]) {\n  .label {\n    &__description {\n      @include ellipsis;\n    }\n  }\n}\n\ngx-ide-list-selector-item input {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus + .label {\n    @include focus-outline();\n  }\n  &:checked + .label {\n    background-color: var(--item__bg-color--selected);\n    color: var(--item__color--selected);\n    border-color: var(--item__border-color--selected);\n  }\n}\n\n/*label-wrapper*/\ngx-ide-list-selector-item .label {\n  width: 100%;\n  border: 1px solid transparent;\n  border-radius: var(--item__border-radius);\n}\n\n/*label*/\ngx-ide-list-selector-item .label {\n  &__index {\n  }\n  &__wrapper {\n    display: flex;\n    min-height: 28px; /*this prevents height difference between items that have icons and items that do not*/\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);\n    width: 100%;\n  }\n  &__description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n  }\n}\n\n/*no border*/\ngx-ide-list-selector-item[no-border] {\n  border-block-start: none;\n}\n\n/*universal slot*/\ngx-ide-list-selector-item .label__universal-slot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-list-selector-item\",\n  styleUrl: \"list-selector-item.scss\",\n  shadow: false\n})\nexport class GxIdeListSelectorItem {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  private parentIsListSelector: boolean;\n  private parentList: HTMLGxIdeListSelectorElement;\n  private checked: boolean;\n  private name: string;\n  private type: string;\n  private hasUniversalSlot = false;\n  private index: string = undefined;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorItemElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The item id\n   */\n  @Prop({ reflect: true }) readonly itemId!: string;\n\n  /**\n   * The item value, that acts as a label as well\n   */\n  @Prop() readonly itemValue!: string;\n\n  /**\n   * This will set the input as checked\n   */\n  @Prop({ mutable: true }) itemChecked = false;\n\n  /**\n   * It allows to select the item by clicking on it. It will emit the item-id\n   */\n  @Prop({ mutable: true, reflect: true }) readonly: boolean;\n\n  /**\n   * The presence of this property will force the item text to not-wrap, and have ellipsis\n   */\n  @Prop({ mutable: true, reflect: true }) ellipsis: boolean;\n\n  /**\n   * The gemini icon name\n   */\n  @Prop() readonly icon: string;\n\n  /**\n   * Disables the item border\n   */\n  @Prop({ mutable: true, reflect: true }) noBorder = false;\n\n  /**\n   * Displays the universal slot at the end, instead of at the benign\n   */\n  @Prop({ reflect: true }) readonly universalSlotEnd = false;\n\n  // 5.EVENTS (EMIT) //\n\n  componentWillLoad() {\n    this.evaluateParentIsListSelector();\n    this.evaluateType();\n    this.evaluateSelectable();\n    this.evaluateEllipsis();\n    this.evaluateChecked();\n    this.evaluateBorder();\n    this.evaluateUniversalSlot();\n    this.assignName();\n    this.evaluateOrderedList();\n  }\n\n  /**\n   * Emits the item data\n   */\n  @Event() itemSelectionChanged: EventEmitter<ItemData>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference\n   */\n  private evaluateParentIsListSelector = () => {\n    const parentList = this.el.parentElement as HTMLGxIdeListSelectorElement;\n    this.parentIsListSelector = parentList?.nodeName === \"GX-IDE-LIST-SELECTOR\";\n    this.parentIsListSelector && (this.parentList = parentList);\n  };\n\n  /**\n   * Determines the type of item, based on the parent list-selector 'type' property value\n   */\n  private evaluateType = () => {\n    const parentList: HTMLGxIdeListSelectorElement = this.el\n      .parentElement as HTMLGxIdeListSelectorElement;\n    this.type = parentList.type === \"single-selection\" ? \"radio\" : \"checkbox\";\n  };\n\n  /**\n   * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item\n   */\n  private evaluateSelectable = () => {\n    if (this.readonly === undefined && this.parentIsListSelector) {\n      this.readonly = this.parentList.readonly;\n    }\n  };\n\n  /**\n   * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item\n   */\n  private evaluateEllipsis = () => {\n    if (this.ellipsis === undefined && this.parentIsListSelector) {\n      this.ellipsis = this.parentList.ellipsis;\n    }\n  };\n\n  /**\n   * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.\n   */\n  private evaluateChecked = () => {\n    if (\n      this.checked === undefined &&\n      this.parentIsListSelector &&\n      this.parentList.value !== undefined &&\n      this.parentList.value === this.itemValue\n    ) {\n      this.checked = true;\n    }\n  };\n\n  private evaluateBorder = () => {\n    if (this.parentIsListSelector) {\n      this.noBorder = this.parentList.noItemsBorder;\n    }\n  };\n\n  private evaluateUniversalSlot = () => {\n    this.hasUniversalSlot = !!this.el.querySelector(\"[slot=universal]\");\n  };\n\n  /**\n   * Gets the listName required value, that is needed for the list selection to properly work\n   */\n  private assignName = () => {\n    this.parentIsListSelector &&\n      this.parentList.listName &&\n      (this.name = this.parentList.listName);\n  };\n\n  private evaluateOrderedList = () => {\n    if (this.parentIsListSelector && this.parentList.ordered) {\n      let index: number | string =\n        Array.from(this.parentList.children).indexOf(this.el) + 1;\n      if (index < 10) {\n        // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.\n        index = `0${index}`;\n      } else {\n        index = `${index}`;\n      }\n      this.index = index;\n    }\n  };\n\n  private onChangeHandler = (e: Event) => {\n    this.itemChecked = (e.target as HTMLInputElement).checked;\n    this.itemSelectionChanged.emit({\n      itemId: this.itemId,\n      itemValue: this.itemValue,\n      itemIcon: this.icon,\n      itemChecked: this.itemChecked\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <input\n          type={this.type}\n          id={this.itemId}\n          name={this.name}\n          value={this.itemValue}\n          checked={this.itemChecked}\n          onChange={this.onChangeHandler}\n          disabled={this.readonly}\n          part=\"input\"\n        />\n        <label class=\"label\" htmlFor={this.itemId} part=\"label\">\n          <div class=\"label__wrapper\">\n            {this.index ? (\n              <span class=\"label__index\">{this.index}. </span>\n            ) : null}\n            {this.hasUniversalSlot ? (\n              <span class=\"label__universal-slot\" part=\"universal-slot\">\n                <slot name=\"universal\"></slot>\n              </span>\n            ) : null}\n            {this.icon ? (\n              <ch-image class=\"icon-md\" src={this.icon} part=\"icon\"></ch-image>\n            ) : null}\n            <span class=\"label__description\" part=\"description\">\n              {this.itemValue ? this.itemValue : <slot></slot>}\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n\nexport type ItemData = {\n  itemId: string;\n  itemValue: string;\n  itemIcon?: string;\n  itemChecked: boolean;\n};\n"],"version":3}
+{"file":"list-selector-item.js","mappings":"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","names":[],"sources":["src/components/_helpers/list-selector/list-selector-item/list-selector-item.scss?tag=gx-ide-list-selector-item","src/components/_helpers/list-selector/list-selector-item/list-selector-item.tsx"],"sourcesContent":["@import \"../../../../global/gx-ide-mixins.scss\";\n@import \"../../../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n@include box-sizing;\n\ngx-ide-list-selector-item {\n  display: block;\n  max-width: 100%;\n  display: flex;\n  font-size: inherit;\n  font-weight: var(--item__font-weight);\n\n  &:hover {\n    .label {\n      background-color: var(--item__bg-color--hover);\n      cursor: pointer;\n    }\n    input:checked + .label {\n      border-color: var(--item__border-color--selected-hover);\n    }\n  }\n}\n\n/*readonly*/\ngx-ide-list-selector-item[readonly]:not([readonly=\"false\"]) {\n  .label {\n    pointer-events: none;\n    background-color: transparent;\n  }\n}\n/*ellipsis*/\ngx-ide-list-selector-item[ellipsis]:not([ellipsis=\"false\"]) {\n  .label {\n    &__description {\n      @include ellipsis;\n    }\n  }\n}\n\ngx-ide-list-selector-item input {\n  width: 0;\n  height: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus + .label {\n    @include focus-outline();\n  }\n  &:checked + .label {\n    background-color: var(--item__bg-color--selected);\n    color: var(--item__color--selected);\n    border-color: var(--item__border-color--selected);\n  }\n}\n\n/*label-wrapper*/\ngx-ide-list-selector-item .label {\n  width: 100%;\n  border: 1px solid transparent;\n  border-radius: var(--item__border-radius);\n}\n\n/*label*/\ngx-ide-list-selector-item .label {\n  &__index {\n  }\n  &__wrapper {\n    display: flex;\n    min-height: 28px; /*this prevents height difference between items that have icons and items that do not*/\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);\n    width: 100%;\n  }\n  &__description {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n  }\n}\n\n/*no border*/\ngx-ide-list-selector-item[no-border] {\n  border-block-start: none;\n}\n\n/*universal slot*/\ngx-ide-list-selector-item .label__universal-slot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-list-selector-item\",\n  styleUrl: \"list-selector-item.scss\",\n  shadow: false\n})\nexport class GxIdeListSelectorItem {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  private parentIsListSelector: boolean;\n  private parentList: HTMLGxIdeListSelectorElement;\n  private checked: boolean;\n  private name: string;\n  private type: string;\n  private hasUniversalSlot = false;\n  private index: string = undefined;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorItemElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The item id\n   */\n  @Prop({ reflect: true }) readonly itemId!: string;\n\n  /**\n   * The item value, that acts as a label as well\n   */\n  @Prop() readonly itemValue!: string;\n\n  /**\n   * This will set the input as checked\n   */\n  @Prop({ mutable: true }) itemChecked = false;\n\n  /**\n   * It allows to select the item by clicking on it. It will emit the item-id\n   */\n  @Prop({ mutable: true, reflect: true }) readonly: boolean;\n\n  /**\n   * The presence of this property will force the item text to not-wrap, and have ellipsis\n   */\n  @Prop({ mutable: true, reflect: true }) ellipsis: boolean;\n\n  /**\n   * The gemini icon name\n   */\n  @Prop() readonly icon: string;\n\n  /**\n   * Disables the item border\n   */\n  @Prop({ mutable: true, reflect: true }) noBorder = false;\n\n  /**\n   * Displays the universal slot at the end, instead of at the benign\n   */\n  @Prop({ reflect: true }) readonly universalSlotEnd = false;\n\n  // 5.EVENTS (EMIT) //\n\n  componentWillLoad() {\n    this.evaluateParentIsListSelector();\n    this.evaluateType();\n    this.evaluateSelectable();\n    this.evaluateEllipsis();\n    this.evaluateChecked();\n    this.evaluateBorder();\n    this.evaluateUniversalSlot();\n    this.assignName();\n    this.evaluateOrderedList();\n  }\n\n  /**\n   * Emits the item data\n   */\n  @Event() itemSelectionChanged: EventEmitter<ItemData>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference\n   */\n  private evaluateParentIsListSelector = () => {\n    const parentList = this.el.parentElement as HTMLGxIdeListSelectorElement;\n    this.parentIsListSelector = parentList?.nodeName === \"GX-IDE-LIST-SELECTOR\";\n    this.parentIsListSelector && (this.parentList = parentList);\n  };\n\n  /**\n   * Determines the type of item, based on the parent list-selector 'type' property value\n   */\n  private evaluateType = () => {\n    const parentList: HTMLGxIdeListSelectorElement = this.el\n      .parentElement as HTMLGxIdeListSelectorElement;\n    this.type = parentList.type === \"single-selection\" ? \"radio\" : \"checkbox\";\n  };\n\n  /**\n   * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item\n   */\n  private evaluateSelectable = () => {\n    if (this.readonly === undefined && this.parentIsListSelector) {\n      this.readonly = this.parentList.readonly;\n    }\n  };\n\n  /**\n   * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item\n   */\n  private evaluateEllipsis = () => {\n    if (this.ellipsis === undefined && this.parentIsListSelector) {\n      this.ellipsis = this.parentList.ellipsis;\n    }\n  };\n\n  /**\n   * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.\n   */\n  private evaluateChecked = () => {\n    if (\n      this.checked === undefined &&\n      this.parentIsListSelector &&\n      this.parentList.value !== undefined &&\n      this.parentList.value === this.itemValue\n    ) {\n      this.checked = true;\n    }\n  };\n\n  private evaluateBorder = () => {\n    if (this.parentIsListSelector) {\n      this.noBorder = this.parentList.noItemsBorder;\n    }\n  };\n\n  private evaluateUniversalSlot = () => {\n    this.hasUniversalSlot = !!this.el.querySelector(\"[slot=universal]\");\n  };\n\n  /**\n   * Gets the listName required value, that is needed for the list selection to properly work\n   */\n  private assignName = () => {\n    this.parentIsListSelector &&\n      this.parentList.listName &&\n      (this.name = this.parentList.listName);\n  };\n\n  private evaluateOrderedList = () => {\n    if (this.parentIsListSelector && this.parentList.ordered) {\n      let index: number | string =\n        Array.from(this.parentList.children).indexOf(this.el) + 1;\n      if (index < 10) {\n        // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.\n        index = `0${index}`;\n      } else {\n        index = `${index}`;\n      }\n      this.index = index;\n    }\n  };\n\n  private onChangeHandler = (e: Event) => {\n    this.itemChecked = (e.target as HTMLInputElement).checked;\n    this.itemSelectionChanged.emit({\n      itemId: this.itemId,\n      itemValue: this.itemValue,\n      itemIcon: this.icon,\n      itemChecked: this.itemChecked\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <input\n          type={this.type}\n          id={this.itemId}\n          name={this.name}\n          value={this.itemValue}\n          checked={this.itemChecked}\n          onChange={this.onChangeHandler}\n          disabled={this.readonly}\n          part=\"input\"\n        />\n        <label class=\"label\" htmlFor={this.itemId} part=\"label\">\n          <div class=\"label__wrapper\">\n            {this.index ? (\n              <span class=\"label__index\">{this.index}. </span>\n            ) : null}\n            {this.hasUniversalSlot ? (\n              <span class=\"label__universal-slot\" part=\"universal-slot\">\n                <slot name=\"universal\"></slot>\n              </span>\n            ) : null}\n            {this.icon ? (\n              <ch-image class=\"icon-md\" src={this.icon} part=\"icon\"></ch-image>\n            ) : null}\n            <span class=\"label__description\" part=\"description\">\n              {this.itemValue ? this.itemValue : <slot></slot>}\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n\nexport type ItemData = {\n  itemId: string;\n  itemValue: string;\n  itemIcon?: string;\n  itemChecked: boolean;\n};\n"],"version":3}

package/dist/components/locale.js

@@ -8,10 +8,10 @@ const LANG_PREFIX = ".lang.";
 const LANG_EXTENSION = ".json";
 class Locale {
     static getLang() {
-        var _a, _b;
-        const lang = (_b = (_a = document
+        const lang = document
             .getElementsByTagName("html")[0]
-            .getAttribute("lang")) === null || _a === void 0 ? void 0 : _a.valueOf()) !== null && _b !== void 0 ? _b : DEFAULT_LANGUAGE;
+            .getAttribute("lang")
+            ?.valueOf() ?? DEFAULT_LANGUAGE;
         // Normalize en-US
         return lang === "en-US" ? "en" : lang;
     }

package/dist/components/locale.js.map

@@ -1 +1 @@
-{"file":"locale.js","mappings":";;AAEA,MAAM,aAAa,GAAG,gBAAgB,CAAC;AACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC;AACnC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAC9B,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC7B,MAAM,cAAc,GAAG,OAAO,CAAC;MAElB,MAAM;IAGT,OAAO,OAAO;;QACpB,MAAM,IAAI,GACR,MAAA,MAAA,QAAQ;aACL,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aAC/B,YAAY,CAAC,MAAM,CAAC,0CACnB,OAAO,EAAE,mCAAI,gBAAgB,CAAC;;QAGpC,OAAO,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;KACvC;IAEO,OAAO,UAAU,CACvB,SAAiB,EACjB,IAAY,EACZ,MAAc;QAEd,IAAI,MAAM,KAAK,EAAE,EAAE;YACjB,MAAM,GAAG,GAAG,SAAS,GAAG,CAAC;SAC1B;QACD,MAAM,IAAI,GACR,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,cAAc,EAAW,CAAC;QAExG,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;YACjC,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAC5D,IAAI,QAAQ,CAAC,EAAE,EAAE;oBACf,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC1B;qBAAM;oBACL,MAAM,EAAE,CAAC;iBACV;aACF,EAAE,MAAM,CAAC,CAAC;SACZ,CAAC,CAAC;KACJ;IAEM,aAAa,mBAAmB,CACrC,OAAoB,EACpB,MAAM,GAAG,EAAE,EACX,SAAS,GAAG,EAAE;QAEd,IAAI,SAAS,KAAK,EAAE,EAAE;YACpB,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;SACzE;QACD,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,MAAM,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;KACzD;IAEM,OAAO,MAAM,CAAC,IAAY,EAAE,KAAe;QAChD,IAAI,GAAG,GAAW,IAAI,CAAC;QACvB,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SACrD,CAAC,CAAC;QACH,OAAO,GAAG,CAAC;KACZ;;AArDa,uBAAgB,GAAG,EAAE;;;;","names":[],"sources":["src/common/locale.ts"],"sourcesContent":["import { Build } from \"@stencil/core\";\n\nconst ASSETS_FOLDER = \"gx-ide-assets/\";\nconst COMPONENT_PREFIX = \"gx-ide-\";\nconst DEFAULT_LANGUAGE = \"en\";\nconst LANGS_FOLDER = \"langs/\";\nconst LANG_PREFIX = \".lang.\";\nconst LANG_EXTENSION = \".json\";\n\nexport class Locale {\n  public static commonAssetsPath = \"\";\n\n  private static getLang(): string {\n    const lang =\n      document\n        .getElementsByTagName(\"html\")[0]\n        .getAttribute(\"lang\")\n        ?.valueOf() ?? DEFAULT_LANGUAGE;\n\n    // Normalize en-US\n    return lang === \"en-US\" ? \"en\" : lang;\n  }\n\n  private static getStrings(\n    component: string,\n    lang: string,\n    folder: string\n  ): Promise<any> {\n    if (folder === \"\") {\n      folder = `${component}/`;\n    }\n    const path =\n      `${ASSETS_FOLDER}${folder}${LANGS_FOLDER}${component}${LANG_PREFIX}${lang}${LANG_EXTENSION}` as const;\n\n    return new Promise((resolve, reject): void => {\n      fetch(Build.isTesting ? \"/build/\" + path : path).then(langFile => {\n        if (langFile.ok) {\n          resolve(langFile.json());\n        } else {\n          reject();\n        }\n      }, reject);\n    });\n  }\n\n  public static async getComponentStrings(\n    element: HTMLElement,\n    folder = \"\",\n    component = \"\"\n  ): Promise<any> {\n    if (component === \"\") {\n      component = element.tagName.toLowerCase().replace(COMPONENT_PREFIX, \"\");\n    }\n    const lang = Locale.getLang();\n    return await Locale.getStrings(component, lang, folder);\n  }\n\n  public static format(text: string, parms: string[]): string {\n    let ret: string = text;\n    parms.forEach(parm => {\n      ret = ret.replace(`{${parms.indexOf(parm)}}`, parm);\n    });\n    return ret;\n  }\n}\n"],"version":3}
+{"file":"locale.js","mappings":";;AAEA,MAAM,aAAa,GAAG,gBAAgB,CAAC;AACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC;AACnC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAC9B,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC7B,MAAM,cAAc,GAAG,OAAO,CAAC;MAElB,MAAM;IAGT,OAAO,OAAO;QACpB,MAAM,IAAI,GACR,QAAQ;aACL,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aAC/B,YAAY,CAAC,MAAM,CAAC;cACnB,OAAO,EAAE,IAAI,gBAAgB,CAAC;;QAGpC,OAAO,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;KACvC;IAEO,OAAO,UAAU,CACvB,SAAiB,EACjB,IAAY,EACZ,MAAc;QAEd,IAAI,MAAM,KAAK,EAAE,EAAE;YACjB,MAAM,GAAG,GAAG,SAAS,GAAG,CAAC;SAC1B;QACD,MAAM,IAAI,GACR,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,cAAc,EAAW,CAAC;QAExG,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;YACjC,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAC5D,IAAI,QAAQ,CAAC,EAAE,EAAE;oBACf,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC1B;qBAAM;oBACL,MAAM,EAAE,CAAC;iBACV;aACF,EAAE,MAAM,CAAC,CAAC;SACZ,CAAC,CAAC;KACJ;IAEM,aAAa,mBAAmB,CACrC,OAAoB,EACpB,MAAM,GAAG,EAAE,EACX,SAAS,GAAG,EAAE;QAEd,IAAI,SAAS,KAAK,EAAE,EAAE;YACpB,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;SACzE;QACD,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,MAAM,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;KACzD;IAEM,OAAO,MAAM,CAAC,IAAY,EAAE,KAAe;QAChD,IAAI,GAAG,GAAW,IAAI,CAAC;QACvB,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SACrD,CAAC,CAAC;QACH,OAAO,GAAG,CAAC;KACZ;;AArDa,uBAAgB,GAAG,EAAE;;;;","names":[],"sources":["src/common/locale.ts"],"sourcesContent":["import { Build } from \"@stencil/core\";\n\nconst ASSETS_FOLDER = \"gx-ide-assets/\";\nconst COMPONENT_PREFIX = \"gx-ide-\";\nconst DEFAULT_LANGUAGE = \"en\";\nconst LANGS_FOLDER = \"langs/\";\nconst LANG_PREFIX = \".lang.\";\nconst LANG_EXTENSION = \".json\";\n\nexport class Locale {\n  public static commonAssetsPath = \"\";\n\n  private static getLang(): string {\n    const lang =\n      document\n        .getElementsByTagName(\"html\")[0]\n        .getAttribute(\"lang\")\n        ?.valueOf() ?? DEFAULT_LANGUAGE;\n\n    // Normalize en-US\n    return lang === \"en-US\" ? \"en\" : lang;\n  }\n\n  private static getStrings(\n    component: string,\n    lang: string,\n    folder: string\n  ): Promise<any> {\n    if (folder === \"\") {\n      folder = `${component}/`;\n    }\n    const path =\n      `${ASSETS_FOLDER}${folder}${LANGS_FOLDER}${component}${LANG_PREFIX}${lang}${LANG_EXTENSION}` as const;\n\n    return new Promise((resolve, reject): void => {\n      fetch(Build.isTesting ? \"/build/\" + path : path).then(langFile => {\n        if (langFile.ok) {\n          resolve(langFile.json());\n        } else {\n          reject();\n        }\n      }, reject);\n    });\n  }\n\n  public static async getComponentStrings(\n    element: HTMLElement,\n    folder = \"\",\n    component = \"\"\n  ): Promise<any> {\n    if (component === \"\") {\n      component = element.tagName.toLowerCase().replace(COMPONENT_PREFIX, \"\");\n    }\n    const lang = Locale.getLang();\n    return await Locale.getStrings(component, lang, folder);\n  }\n\n  public static format(text: string, parms: string[]): string {\n    let ret: string = text;\n    parms.forEach(parm => {\n      ret = ret.replace(`{${parms.indexOf(parm)}}`, parm);\n    });\n    return ret;\n  }\n}\n"],"version":3}