@genexus/genexus-ide-ui 0.0.101 → 0.0.103

package/dist/genexus-ide-ui/p-5270ef52.entry.js.map

@@ -0,0 +1 @@
+{"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","escapeRegExp","str","replace","hiChar","text","filterValue","escapedFilterValue","re","RegExp","innerHTML","cardCss","GxgCard","constructor","hostRef","titleType","hasSlot","hasHeaderSlot","renderCardSubtitle","cardSubtitle","subtitleLink","href","target","elevation","background","padding","minHeight","height","maxWidth","noShadow","noBorder","undefined","noPaddingTop","cardTitle","noHeaderBorder","titleSemibold","subtitleIcon","cardType","icon","iconColor","subtitleColor","editableTitle","actionable","querySelector","headerSlot","role","card","mercury","state","wrapper","value","disableEdition","name"],"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","node_modules/@genexus/gemini/dist/collection/common/hiChar.js","node_modules/@genexus/gemini/dist/collection/components/card/card.css?tag=gxg-card&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/card/card.js"],"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","/* STENCIL IMPORTS */\nimport { h } from \"@stencil/core\";\n/*A function that helps highlighting characters when searching.*/\nexport const escapeRegExp = (str) => {\n    return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\nexport const hiChar = function (text, filterValue) {\n    if (text && filterValue) {\n        /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */\n        const escapedFilterValue = escapeRegExp(filterValue);\n        const re = new RegExp(escapedFilterValue, \"gi\");\n        return (h(\"span\", { innerHTML: text.replace(re, '<span class=\"hiChar\">$&</span>') }));\n    }\n    else {\n        return text;\n    }\n};\n//# sourceMappingURL=hiChar.js.map\n","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n   ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n  line-height: 1.15;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n  background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  text-decoration: underline dotted;\n  /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n  border-style: none;\n}\n\n/* Forms\n   ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  line-height: 1.15;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n  -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\nlegend {\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=checkbox],\n[type=radio] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=search] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=search]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n  display: none;\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*--- Elevation ---*/\n:host {\n  display: block;\n  background-color: var(--gxg-card_background-color);\n  box-shadow: var(--gxg-card_box-shadow);\n  border-radius: var(--gxg-card_border-radius);\n  border-style: solid;\n  border-width: 1px;\n  border-color: transparent;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n:host([elevation=xs]) {\n  box-shadow: var(--gxg-card_box-shadow);\n}\n\n:host([elevation=m]) {\n  box-shadow: var(--gxg-card_box-shadow);\n}\n\n:host([padding=\"0\"]) {\n  padding: 0;\n}\n\n:host([padding=xs]) {\n  padding: var(--gxg-card_padding-xs);\n}\n\n:host([padding=s]) {\n  padding: var(--gxg-card_padding-s);\n}\n\n:host([padding=m]) {\n  padding: var(--gxg-card_padding-m);\n}\n\n:host([padding=l]) {\n  padding: var(--gxg-card_padding-l);\n}\n\n:host([padding=xl]) {\n  padding: var(--gxg-card_padding-xl);\n}\n\n:host([padding=xxl]) {\n  padding: var(--gxg-card_padding-xxl);\n}\n\n:host([padding=xxxl]) {\n  padding: var(--gxg-card_padding-xxxl);\n}\n\n:host([background=white]) {\n  background: var(--gxg-card_background-white);\n}\n\n:host([background=gray-01]) {\n  background: var(--gxg-card_background-gray);\n}\n\n.content {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  overflow: auto;\n  height: 100%;\n}\n.content::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.content::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.content::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.content::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.content::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*No Shadow*/\n:host(.card--no-shadow) {\n  box-shadow: none;\n}\n\n/*Title*/\n:host(.card--title) .wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  grid-template-rows: auto 1fr;\n}\n\n:host(.card) {\n  background-color: var(--gxg-card_background-color);\n}\n:host(.card) .card__header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: var(--gxg-card-header_margin);\n  padding-block-end: var(--gxg-card-header_padding-block-end);\n  border-block-end: var(--gxg-card-header_border-block-end);\n  gap: var(--gxg-card-header_gap);\n}\n:host(.card) .card__header--left {\n  display: flex;\n  align-items: center;\n  gap: var(--gxg-card-header-left_gap);\n  width: var(--gxg-card-header-left_width);\n}\n:host(.card) .card__header--left .card-title-wrapper {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n:host(.card) .card__header--left-full-width {\n  width: 100% !important;\n}\n:host(.card) .card__header--left-full-width .card-title-wrapper {\n  white-space: unset;\n}\n:host(.card) .card__header--right {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n  gap: var(--gxg-card-header-right_gap);\n  font-size: var(--font-size-xl);\n  width: var(--gxg-card-header-right_width);\n  overflow: hidden;\n  white-space: nowrap;\n}\n:host(.card) .card__header .subtitle-wrapper {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--gxg-card-subtitle_color);\n  padding-inline-end: var(--gxg-card-subtitle-wrapper_padding-inline-end);\n  /*prevents text cut text if italic, due to ellipsis*/\n}\n:host(.card) .card__header .subtitle-wrapper a {\n  color: var(--gxg-card-subtitle-wrapper_link-color);\n}\n:host(.card) .card__header .subtitle {\n  white-space: nowrap;\n  color: var(--gxg-card-subtitle-wrapper_color);\n}\n:host(.card) .content {\n  padding: var(--gxg-card-content_padding);\n  font-size: var(--gxg-card-content_font-size);\n  line-height: var(--gxg-card-content_line-height);\n  color: var(--gxg-card-content_color);\n}\n\n/*--- Default ---*/\n:host(.card--default) {\n  background: var(--color-background);\n}\n:host(.card--default) .content {\n  padding: 0;\n}\n\n/*--- Section ---*/\n:host(.card--section) {\n  font-size: var(--gxg-card-section_font-size);\n  border-radius: var(--gxg-card-section_border-radius);\n  padding: var(--gxg-card-section_padding);\n  background-color: var(--mer-elevation__background-color--01);\n  border: var(--mer-elevation__border-01);\n  box-shadow: var(--mer-elevation__box-shadow--01);\n}\n:host(.card--section) .card__title {\n  font-weight: var(--gxg-card-section-title_font-weight);\n  font-size: var(--gxg-card-section-title_font-size);\n}\n\n/*--- Article ---*/\n:host(.card--article) {\n  font-size: var(--gxg-card-article_font-size);\n  border-radius: var(--gxg-card-article_border-radius);\n  padding: var(--gxg-card-article_padding);\n  background-color: var(--mer-elevation__background-color--02);\n  border: var(--mer-elevation__border-02);\n  box-shadow: var(--mer-elevation__box-shadow--02);\n  border: var(--gxg-card-article_border);\n}\n:host(.card--article) .card__header .card__title {\n  margin: var(--gxg-card-article-title_margin);\n  color: var(--gxg-card-article-title_color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: var(--gxg-card-article-title_font-weight);\n  font-size: var(--gxg-card-article-title_font-size);\n}\n:host(.card--article) .card__header .subtitle-wrapper {\n  color: var(--gxg-card-article-subtitle-wrapper_color);\n  font-style: var(--gxg-card-article-subtitle-wrapper_font-style);\n}\n:host(.card--article) .content {\n  font-style: var(--gxg-card-article-subtitle-content_font-style);\n  color: var(--gxg-card-article-content_color);\n  line-height: var(--gxg-card-article-subtitle-content_line-height);\n}\n\n/*semibold*/\n:host(.card--article.title-semibold) .card__header .card__title {\n  font-weight: var(--gxg-card-article-title-semibold_font-weight);\n}\n\n/*--- Mini ---*/\n:host(.card--mini) {\n  font-size: var(--gxg-card-mini_font-size);\n  border-radius: var(--gxg-card-mini_border-radius);\n  padding: var(--gxg-card-mini_padding);\n  background-color: var(--mer-elevation__background-color--02);\n  border: var(--mer-elevation__border-02);\n  box-shadow: var(--mer-elevation__box-shadow--02);\n  border: var(--gxg-card-mini_border);\n}\n:host(.card--mini) .card__header {\n  margin: var(--gxg-card-mini-header_margin);\n  padding-block-end: var(--gxg-card-mini-header_padding-block-end);\n  border-bottom: var(--gxg-card-mini-header_border-bottom);\n}\n:host(.card--mini) .card__header .card__header--left {\n  width: var(--gxg-card-mini-header-left_width);\n  gap: var(--gxg-card-mini-header-left_gap);\n}\n:host(.card--mini) .card__header .card__title {\n  margin: var(--gxg-card-mini-title_margin);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: var(--gxg-card-mini-title_font-weight);\n  font-size: var(--gxg-card-mini-title_font-size);\n  color: var(--gxg-card-mini-title_color);\n}\n:host(.card--mini) .content {\n  font-style: var(--gxg-card-mini-content_font-style);\n  font-size: var(--gxg-card-mini_font-size);\n  padding: var(--gxg-card-mini-content_padding);\n  color: var(--gxg-card-mini-content_color);\n}\n\n:host(.card--no-content) .card__header {\n  border-bottom: 0;\n}\n\n/*actionable*/\n:host(.card--actionable:hover) {\n  filter: brightness(var(--gxg-card-actionable-brightness--hover));\n}\n:host(.card--actionable:hover) .wrapper,\n:host(.card--actionable:hover) .card__header,\n:host(.card--actionable:hover) .content {\n  cursor: pointer;\n}\n\n/*no header border*/\n:host(.no-header-border) .card__header {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n/*noBorder*/\n:host(.card--no-border) {\n  border: none !important;\n}\n\n/*hiChar*/\n.hiChar {\n  color: var(--gxg-hi-char-color);\n  font-weight: 600;\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nimport { hiChar } from \"../../common/hiChar\";\nexport class GxgCard {\n    constructor() {\n        this.elevation = \"xs\";\n        this.background = \"white\";\n        this.padding = \"xs\";\n        this.minHeight = \"auto\";\n        this.height = \"auto\";\n        this.maxWidth = \"100%\";\n        this.noShadow = false;\n        this.noBorder = false;\n        this.hiChar = false;\n        this.filterValue = undefined;\n        this.noPaddingTop = false;\n        this.cardTitle = undefined;\n        this.noHeaderBorder = false;\n        this.titleSemibold = false;\n        this.cardSubtitle = undefined;\n        this.subtitleLink = undefined;\n        this.subtitleIcon = undefined;\n        this.cardType = \"section\";\n        this.icon = undefined;\n        this.iconColor = \"auto\";\n        this.subtitleColor = \"auto\";\n        this.editableTitle = false;\n        this.actionable = false;\n    }\n    el;\n    /*---  Mercury Only Tokens ---*/\n    titleType = \"h2\";\n    hasSlot = false;\n    hasHeaderSlot = false;\n    componentWillLoad() {\n        if (this.cardType === \"article\") {\n            this.titleType = \"h2\";\n        }\n        else if (this.cardType === \"mini\") {\n            this.titleType = \"h4\";\n        }\n        const hasSlot = this.el.querySelector(\"*\");\n        if (hasSlot) {\n            this.hasSlot = true;\n        }\n        const headerSlot = this.el.querySelector(\"[slot='header']\");\n        if (headerSlot) {\n            this.hasHeaderSlot = true;\n        }\n    }\n    renderCardSubtitle = () => {\n        if (this.cardSubtitle && this.subtitleLink) {\n            return (h(\"a\", { class: \"subtitle\", href: this.subtitleLink, target: \"_blank\" }, this.cardSubtitle));\n        }\n        else if (this.cardSubtitle && !this.subtitleLink) {\n            {\n                return this.hiChar\n                    ? hiChar(this.cardSubtitle, this.filterValue)\n                    : this.cardSubtitle;\n            }\n        }\n    };\n    render() {\n        return (h(Host, { role: \"article\", class: {\n                card: true,\n                mercury: state.mercury,\n                \"card--no-content\": !this.hasSlot,\n                \"card--section\": this.cardType === \"section\",\n                \"card--article\": this.cardType === \"article\",\n                \"card--mini\": this.cardType === \"mini\",\n                \"card--title\": this.cardTitle !== undefined,\n                \"card--actionable\": this.actionable &&\n                    (this.cardType === \"article\" || this.cardType === \"mini\"),\n                \"title-semibold\": this.titleSemibold,\n                \"card--no-shadow\": this.noShadow,\n                \"card--no-border\": this.noBorder,\n                \"no-header-border\": this.noHeaderBorder\n            }, style: {\n                maxWidth: this.maxWidth,\n                minHeight: this.minHeight,\n                height: this.height\n            } }, h(\"div\", { role: this.actionable ? \"button\" : \"none\", class: {\n                wrapper: true,\n                \"wrapper--header\": this.cardTitle !== undefined\n            } }, this.cardTitle ? (h(\"header\", { class: \"card__header\" }, h(\"div\", { class: {\n                \"card__header--left\": true,\n                \"card__header--left-full-width\": !this.cardSubtitle\n            } }, this.icon ? (h(\"gxg-icon\", { type: this.icon, color: this.iconColor })) : null, h(\"div\", { class: \"card-title-wrapper\" }, this.cardType === \"section\" ? (h(\"gxg-title-editable\", { class: \"card__title\", titleType: this.titleType, value: this.cardTitle, disableEdition: !this.editableTitle })) : (h(\"h2\", { class: \"card__title\" }, this.hiChar\n            ? hiChar(this.cardTitle, this.filterValue)\n            : this.cardTitle)))), this.cardSubtitle &&\n            this.cardType !== \"mini\" &&\n            !this.hasHeaderSlot ? (h(\"div\", { class: \"card__header--right\" }, h(\"div\", { class: \"subtitle-wrapper\" }, this.renderCardSubtitle()), this.subtitleIcon ? (h(\"gxg-icon\", { type: this.subtitleIcon, color: this.subtitleColor })) : null)) : null, this.hasHeaderSlot ? (h(\"div\", { class: \"card__header--right\" }, h(\"slot\", { name: \"header\" }))) : null)) : null, this.hasSlot ? (h(\"div\", { class: \"content\" }, h(\"slot\", null))) : null)));\n    }\n    static get is() { return \"gxg-card\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"card.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"card.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"elevation\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"elevation\",\n                    \"resolved\": \"\\\"m\\\" | \\\"xs\\\"\",\n                    \"references\": {\n                        \"elevation\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::elevation\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card box-shadow\"\n                },\n                \"attribute\": \"elevation\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"xs\\\"\"\n            },\n            \"background\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"background\",\n                    \"resolved\": \"\\\"gray-01\\\" | \\\"white\\\"\",\n                    \"references\": {\n                        \"background\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::background\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The background color\"\n                },\n                \"attribute\": \"background\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"white\\\"\"\n            },\n            \"padding\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"padding\",\n                    \"resolved\": \"\\\"0\\\" | \\\"l\\\" | \\\"m\\\" | \\\"s\\\" | \\\"xl\\\" | \\\"xs\\\" | \\\"xxl\\\" | \\\"xxxl\\\"\",\n                    \"references\": {\n                        \"padding\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::padding\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card padding\"\n                },\n                \"attribute\": \"padding\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"xs\\\"\"\n            },\n            \"minHeight\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The component min. height\"\n                },\n                \"attribute\": \"min-height\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"height\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The component height\"\n                },\n                \"attribute\": \"height\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"maxWidth\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The component max. width\"\n                },\n                \"attribute\": \"max-width\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"100%\\\"\"\n            },\n            \"noShadow\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Disables box-shadow\"\n                },\n                \"attribute\": \"no-shadow\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Removes border\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"hiChar\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This allows to highlight any character on the card title, or subtitle.\"\n                },\n                \"attribute\": \"hi-char\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"filterValue\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This is the filter value needed for hiChar.\"\n                },\n                \"attribute\": \"filter-value\",\n                \"reflect\": false\n            },\n            \"noPaddingTop\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Remove padding from the top (applies only for the \\\"section\\\" card type)\"\n                },\n                \"attribute\": \"no-padding-top\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"cardTitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional title\"\n                },\n                \"attribute\": \"card-title\",\n                \"reflect\": false\n            },\n            \"noHeaderBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Removes the header border\"\n                },\n                \"attribute\": \"no-header-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"titleSemibold\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Card title semibold\"\n                },\n                \"attribute\": \"title-semibold\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"cardSubtitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional subtitle\"\n                },\n                \"attribute\": \"card-subtitle\",\n                \"reflect\": false\n            },\n            \"subtitleLink\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional subtitle link\"\n                },\n                \"attribute\": \"subtitle-link\",\n                \"reflect\": false\n            },\n            \"subtitleIcon\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional subtitle icon\"\n                },\n                \"attribute\": \"subtitle-icon\",\n                \"reflect\": false\n            },\n            \"cardType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"CardType\",\n                    \"resolved\": \"\\\"article\\\" | \\\"mini\\\" | \\\"section\\\"\",\n                    \"references\": {\n                        \"CardType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::CardType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card type (only for mercury)\"\n                },\n                \"attribute\": \"card-type\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"section\\\"\"\n            },\n            \"icon\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card type (only for mercury)\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false\n            },\n            \"iconColor\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"alwaysblack\\\" | \\\"auto\\\" | \\\"disabled\\\" | \\\"error\\\" | \\\"indeterminate\\\" | \\\"mercury\\\" | \\\"mercury-neutral\\\" | \\\"mercury-on-primary\\\" | \\\"mercury-primary\\\" | \\\"mercury-text-on-message\\\" | \\\"negative\\\" | \\\"onbackground\\\" | \\\"ondisabled\\\" | \\\"primary-active\\\" | \\\"primary-enabled\\\" | \\\"primary-hover\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../icon/icon\",\n                            \"id\": \"src/components/icon/icon.tsx::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The icon color\"\n                },\n                \"attribute\": \"icon-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"subtitleColor\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Color\",\n                    \"resolved\": \"\\\"alwaysblack\\\" | \\\"auto\\\" | \\\"disabled\\\" | \\\"error\\\" | \\\"indeterminate\\\" | \\\"mercury\\\" | \\\"mercury-neutral\\\" | \\\"mercury-on-primary\\\" | \\\"mercury-primary\\\" | \\\"mercury-text-on-message\\\" | \\\"negative\\\" | \\\"onbackground\\\" | \\\"ondisabled\\\" | \\\"primary-active\\\" | \\\"primary-enabled\\\" | \\\"primary-hover\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"Color\": {\n                            \"location\": \"import\",\n                            \"path\": \"../icon/icon\",\n                            \"id\": \"src/components/icon/icon.tsx::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The icon color\"\n                },\n                \"attribute\": \"subtitle-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"editableTitle\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"It makes the title editable (only for mercury)\"\n                },\n                \"attribute\": \"editable-title\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"actionable\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"It applies a different style on hover. Useful when the card is actionable (has an action attached to the click event).\"\n                },\n                \"attribute\": \"actionable\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=card.js.map\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;;;;;;;;;;;;;;;iEC3IT,OAAMqB,eAAgBC,KAClBA,EAAIC,QAAQ,uBAAuB;;AAEvC,MAAMC,SAAS,SAAUC,GAAMC;EAClC,IAAID,KAAQC,GAAa;;IAErB,MAAMC,IAAqBN,aAAaK;IACxC,MAAME,IAAK,IAAIC,OAAOF,GAAoB;IAC1C,OAAQlB,EAAE,QAAQ;MAAEqB,WAAWL,EAAKF,QAAQK,GAAI;;AACxD,SACS;IACD,OAAOH;AACf;AACA;;AChBA,MAAMM,IAAU;;MCGHC,IAAO;EAChB,WAAAC,CAAAC;;IA2BAzC,KAAA0C,YAAY;IACZ1C,KAAA2C,UAAU;IACV3C,KAAA4C,gBAAgB;IAiBhB5C,KAAA6C,qBAAqB;MACjB,IAAI7C,KAAK8C,gBAAgB9C,KAAK+C,cAAc;QACxC,OAAQ/B,EAAE,KAAK;UAAEE,OAAO;UAAY8B,MAAMhD,KAAK+C;UAAcE,QAAQ;WAAYjD,KAAK8C;aAErF,IAAI9C,KAAK8C,iBAAiB9C,KAAK+C,cAAc;QAC9C;UACI,OAAO/C,KAAK+B,SACNA,OAAO/B,KAAK8C,cAAc9C,KAAKiC,eAC/BjC,KAAK8C;;;;;IArDnB9C,KAAKkD,YAAY;IACjBlD,KAAKmD,aAAa;IAClBnD,KAAKoD,UAAU;IACfpD,KAAKqD,YAAY;IACjBrD,KAAKsD,SAAS;IACdtD,KAAKuD,WAAW;IAChBvD,KAAKwD,WAAW;IAChBxD,KAAKyD,WAAW;IAChBzD,KAAK+B,SAAS;IACd/B,KAAKiC,cAAcyB;IACnB1D,KAAK2D,eAAe;IACpB3D,KAAK4D,YAAYF;IACjB1D,KAAK6D,iBAAiB;IACtB7D,KAAK8D,gBAAgB;IACrB9D,KAAK8C,eAAeY;IACpB1D,KAAK+C,eAAeW;IACpB1D,KAAK+D,eAAeL;IACpB1D,KAAKgE,WAAW;IAChBhE,KAAKiE,OAAOP;IACZ1D,KAAKkE,YAAY;IACjBlE,KAAKmE,gBAAgB;IACrBnE,KAAKoE,gBAAgB;IACrBpE,KAAKqE,aAAa;;;;;EAOtB,iBAAA3D;IACI,IAAIV,KAAKgE,aAAa,WAAW;MAC7BhE,KAAK0C,YAAY;WAEhB,IAAI1C,KAAKgE,aAAa,QAAQ;MAC/BhE,KAAK0C,YAAY;;IAErB,MAAMC,IAAU3C,KAAKW,GAAG2D,cAAc;IACtC,IAAI3B,GAAS;MACT3C,KAAK2C,UAAU;;IAEnB,MAAM4B,IAAavE,KAAKW,GAAG2D,cAAc;IACzC,IAAIC,GAAY;MACZvE,KAAK4C,gBAAgB;;;EAe7B,MAAA7B;IACI,OAAQC,EAAEC,GAAM;MAAEuD,MAAM;MAAWtD,OAAO;QAClCuD,MAAM;QACNC,SAASC,EAAMD;QACf,qBAAqB1E,KAAK2C;QAC1B,iBAAiB3C,KAAKgE,aAAa;QACnC,iBAAiBhE,KAAKgE,aAAa;QACnC,cAAchE,KAAKgE,aAAa;QAChC,eAAehE,KAAK4D,cAAcF;QAClC,oBAAoB1D,KAAKqE,eACpBrE,KAAKgE,aAAa,aAAahE,KAAKgE,aAAa;QACtD,kBAAkBhE,KAAK8D;QACvB,mBAAmB9D,KAAKwD;QACxB,mBAAmBxD,KAAKyD;QACxB,oBAAoBzD,KAAK6D;;MAC1BjD,OAAO;QACN2C,UAAUvD,KAAKuD;QACfF,WAAWrD,KAAKqD;QAChBC,QAAQtD,KAAKsD;;OACZtC,EAAE,OAAO;MAAEwD,MAAMxE,KAAKqE,aAAa,WAAW;MAAQnD,OAAO;QAC9D0D,SAAS;QACT,mBAAmB5E,KAAK4D,cAAcF;;OACrC1D,KAAK4D,YAAa5C,EAAE,UAAU;MAAEE,OAAO;OAAkBF,EAAE,OAAO;MAAEE,OAAO;QAC5E,sBAAsB;QACtB,kCAAkClB,KAAK8C;;OACtC9C,KAAKiE,OAAQjD,EAAE,YAAY;MAAEK,MAAMrB,KAAKiE;MAAM3C,OAAOtB,KAAKkE;SAAgB,MAAMlD,EAAE,OAAO;MAAEE,OAAO;OAAwBlB,KAAKgE,aAAa,YAAahD,EAAE,sBAAsB;MAAEE,OAAO;MAAewB,WAAW1C,KAAK0C;MAAWmC,OAAO7E,KAAK4D;MAAWkB,iBAAiB9E,KAAKoE;SAAqBpD,EAAE,MAAM;MAAEE,OAAO;OAAiBlB,KAAK+B,SAChVA,OAAO/B,KAAK4D,WAAW5D,KAAKiC,eAC5BjC,KAAK4D,cAAe5D,KAAK8C,gBAC3B9C,KAAKgE,aAAa,WACjBhE,KAAK4C,gBAAiB5B,EAAE,OAAO;MAAEE,OAAO;OAAyBF,EAAE,OAAO;MAAEE,OAAO;OAAsBlB,KAAK6C,uBAAuB7C,KAAK+D,eAAgB/C,EAAE,YAAY;MAAEK,MAAMrB,KAAK+D;MAAczC,OAAOtB,KAAKmE;SAAoB,QAAS,MAAMnE,KAAK4C,gBAAiB5B,EAAE,OAAO;MAAEE,OAAO;OAAyBF,EAAE,QAAQ;MAAE+D,MAAM;UAAgB,QAAS,MAAM/E,KAAK2C,UAAW3B,EAAE,OAAO;MAAEE,OAAO;OAAaF,EAAE,QAAQ,SAAU"}

package/dist/genexus-ide-ui/{p-40f21d2d.entry.js → p-95cd2572.entry.js}

@@ -1,10 +1,8 @@
 import { r as t, h as e, H as o, g as r } from "./p-2776d2f9.js";
 
-import { s as a } from "./p-12e3a3de.js";
-
 const i = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{--gx-ide-container-elements-spacing:var(--mer-spacing--xs);display:block;height:100%;box-sizing:border-box}.container{display:grid;height:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box}.heading,.content,.footer,.footer-above{padding:var(--gx-ide-container__padding)}.container--padding-s{--gx-ide-container__padding:var(--mer-spacing--xs)}.container--padding-m{--gx-ide-container__padding:var(--mer-spacing--sm)}.container--padding-l{--gx-ide-container__padding:var(--mer-spacing--md)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.container--overflow-hidden-y{overflow-y:hidden}.heading{display:flex;flex-direction:column;gap:var(--gx-ide-container__padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.heading--inactive{color:var(--gxg-color--disabled)}.heading--padding-top{padding:var(--gx-ide-container__padding) 0 0 0}.heading--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}.heading--form-text-height .heading__title{min-height:var(--gxg-form-text-height);justify-content:center}.heading--flex-row{flex-direction:row;align-items:center;justify-content:center}.content{overflow-x:auto;display:flex;flex-direction:column;gap:var(--gx-ide-form-items-gap);box-sizing:border-box;}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.content::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.content::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.content::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.content--border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--only-content{grid-template-rows:1fr}.container--no-header:not(.container--only-content){grid-template-rows:1fr auto}.container--no-footer:not(.container--only-content){grid-template-rows:auto 1fr}.footer-above{border-top:1px solid var(--gx-ide-container-border-color)}.footer-above--no-border-top{border-top:0}.footer-above--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}.footer-above--no-padding{padding:0}.footer{display:flex;gap:var(--gx-ide-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gx-ide-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}.footer--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}";
 
-const n = class {
+const a = class {
   constructor(o) {
     t(this, o);
     this.headingClasses = () => {
@@ -120,8 +118,8 @@ const n = class {
     // footer
         const o = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
     const r = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
-    const a = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
-    if (r.length || a.length) {
+    const i = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
+    if (r.length || i.length) {
       this.hasFooterSlot = true;
     }
     if (o.length) {
@@ -179,11 +177,11 @@ const n = class {
   }
 };
 
-n.style = i;
+a.style = i;
 
-const s = ":host{--gx-ide-title-padding:var(--gx-ide-container--padding, --mer-spacing--sm);display:flex;flex-direction:column;color:var(--gx-ide-component-text-color);font-family:var(--mer-font-family--primary);line-height:1.6em;background-color:transparent;padding:0}:host(.alignment--start){align-items:start}:host(.alignment--center){align-items:center}:host(.alignment--start){text-align:start}:host([padding]){padding:var(--gx-ide-title-padding)}:host([no-padding-bottom]){padding-bottom:0}:host([border]){border-bottom:1px solid var(--gx-ide-container-border-color)}:host(.title-type--secondary){color:var(--gray-06)}";
+const n = ":host{--gx-ide-title-padding:var(--gx-ide-container--padding, --mer-spacing--sm);display:flex;flex-direction:column;color:var(--gx-ide-component-text-color);font-family:var(--mer-font-family--primary);line-height:1.6em;background-color:transparent;padding:0}:host(.alignment--start){align-items:start}:host(.alignment--center){align-items:center}:host(.alignment--start){text-align:start}:host([padding]){padding:var(--gx-ide-title-padding)}:host([no-padding-bottom]){padding-bottom:0}:host([border]){border-bottom:1px solid var(--gx-ide-container-border-color)}:host(.title-type--secondary){color:var(--gray-06)}";
 
-const l = class {
+const s = class {
   constructor(e) {
     t(this, e);
     this.titleCaption = undefined;
@@ -213,72 +211,7 @@ const l = class {
   }
 };
 
-l.style = s;
-
-const g = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host h1,:host h2,:host h3,:host h4,:host h5{margin:0;color:inherit;background-color:transparent}:host([alignment=start]) h1,:host([alignment=start]) h2,:host([alignment=start]) h3,:host([alignment=start]) h4,:host([alignment=start]) h5{text-align:start}:host([alignment=center]) h1,:host([alignment=center]) h2,:host([alignment=center]) h3,:host([alignment=center]) h4,:host([alignment=center]) h5{text-align:center}:host([alignment=end]) h1,:host([alignment=end]) h2,:host([alignment=end]) h3,:host([alignment=end]) h4,:host([alignment=end]) h5{text-align:end}";
-
-const d = class {
-  constructor(e) {
-    t(this, e);
-    this.type = "title-01";
-    this.alignment = "start";
-  }
-  titleType() {
-    let t;
-    switch (this.type) {
-     case "title-01":
-      t = e("h1", {
-        class: "gxg-title-01",
-        part: "title"
-      }, e("slot", null));
-      break;
-
-     case "title-02":
-      t = e("h2", {
-        class: "gxg-title-02",
-        part: "title"
-      }, e("slot", null));
-      break;
-
-     case "title-03":
-      t = e("h3", {
-        class: "gxg-title-03",
-        part: "title"
-      }, e("slot", null));
-      break;
-
-     case "title-04":
-      t = e("h4", {
-        class: "gxg-title-04",
-        part: "title"
-      }, e("slot", null));
-      break;
-
-     case "title-05":
-      t = e("h5", {
-        class: "gxg-title-05",
-        part: "title"
-      }, e("slot", null));
-      break;
-
-     default:
-      t = e("h1", {
-        class: "gxg-title-06",
-        part: "title"
-      }, e("slot", null));
-    }
-    return t;
-  }
-  render() {
-    return e(o, {
-      class: {
-        large: a.large
-      }
-    }, this.titleType(), " ");
-  }
-};
-
-d.style = g;
+s.style = n;
 
-export { n as gx_ide_container, l as gx_ide_title, d as gxg_title };
-//# sourceMappingURL=p-40f21d2d.entry.js.map
+export { a as gx_ide_container, s as gx_ide_title };
+//# sourceMappingURL=p-95cd2572.entry.js.map

package/dist/genexus-ide-ui/p-95cd2572.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["containerCss","GxIdeContainer","this","headingClasses","heading","inactiveTitle","titleType","noHeadingBorder","hasOnlyHeading","headingJustify","noHeadingPadding","headingPaddingTop","_a","containerTitle","length","titleHeightAsInput","flexRow","contentClasses","content","flexContent","noContentPadding","noContentGap","noContentBorderTop","contentBorderEnd","alignItems","undefined","justifyContent","aboveFooter","hasAboveFooterSlot","h","class","noBorderAboveFooter","noAboveFooterPadding","slimmerFooter","name","footer","hasFooterSlot","hasOnlyFooter","hasSlottedContent","noBorderFooter","footerJustify","noFooterPadding","componentWillLoad","evaluateSlots","headerSlot","el","querySelectorAll","hasHeaderSlot","slottedContent","footerAboveSlot","footerStartSlot","footerEndSlot","evaluateSections","hasOnlyContent","render","result","type","alignment","titleAlignment","part","Host","container","sectionsPadding","displayBorder","displayBorderTop","displayBorderEnd","displayBorderBottom","displayBorderStart","titleCss","GxIdeTitle","geminiType"],"sources":["src/components/_helpers/container/container.scss?tag=gx-ide-container&encapsulation=shadow","src/components/_helpers/container/container.tsx","src/components/_helpers/title/title.scss?tag=gx-ide-title&encapsulation=shadow","src/components/_helpers/title/title.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n/*******************************\nHOST / GENERAL\n********************************/\n:host {\n  --gx-ide-container-elements-spacing: var(--mer-spacing--xs);\n  display: block;\n  height: 100%;\n  box-sizing: border-box;\n}\n.container {\n  display: grid;\n  height: 100%;\n  grid-template-rows: auto 1fr auto;\n  box-sizing: border-box;\n}\n.heading,\n.content,\n.footer,\n.footer-above {\n  padding: var(--gx-ide-container__padding);\n}\n/*PADDING*/\n.container--padding-s {\n  --gx-ide-container__padding: var(--mer-spacing--xs);\n}\n.container--padding-m {\n  --gx-ide-container__padding: var(--mer-spacing--sm);\n}\n.container--padding-l {\n  --gx-ide-container__padding: var(--mer-spacing--md);\n}\n/*BORDERS*/\n.container--display-border {\n  border: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-top {\n  border-top: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-end {\n  border-inline-end: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-bottom {\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-start {\n  border-inline-start: 1px solid var(--gx-ide-container-border-color);\n}\n.container--overflow-hidden-y {\n  overflow-y: hidden;\n}\n/*******************************\nHEADING\n********************************/\n.heading {\n  // @include gxg-flex-justify();\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-container__padding);\n  width: 100%;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  &--no-border {\n    border-bottom: 0;\n  }\n  &--no-padding {\n    padding: 0;\n  }\n  &--inactive {\n    color: var(--gxg-color--disabled);\n  }\n  &--padding-top {\n    padding: var(--gx-ide-container__padding) 0 0 0;\n  }\n  &--slimmer {\n    padding-top: var(--mer-spacing--xs);\n    padding-bottom: var(--mer-spacing--xs);\n  }\n  &--form-text-height {\n    .heading__title {\n      min-height: var(--gxg-form-text-height);\n      justify-content: center;\n    }\n  }\n  &--flex-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n  }\n}\n/*******************************\nCONTENT\n********************************/\n.content {\n  overflow-x: auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-form-items-gap);\n  box-sizing: border-box;\n  @include gxg-scrollbar();\n\n  &--no-padding {\n    padding: 0;\n  }\n  &--no-border-top {\n    border-top: none;\n  }\n  &--flex {\n    display: flex;\n  }\n  &--no-gap {\n    gap: 0;\n  }\n  &--align-items-start {\n    align-items: start;\n  }\n  &--align-items-center {\n    align-items: center;\n  }\n  &--align-items-end {\n    align-items: end;\n  }\n  &--justify-content-start {\n    justify-content: start;\n  }\n  &--justify-content-center {\n    justify-content: center;\n  }\n  &--justify-content-end {\n    justify-content: end;\n  }\n  &--border-end {\n    border-inline-end: 1px solid var(--gx-ide-container-border-color);\n  }\n}\n/*only content*/\n.container--only-content {\n  grid-template-rows: 1fr;\n}\n/*no header, but has footer*/\n.container--no-header:not(.container--only-content) {\n  grid-template-rows: 1fr auto;\n}\n/*no footer, but has header*/\n.container--no-footer:not(.container--only-content) {\n  grid-template-rows: auto 1fr;\n}\n/*******************************\nFOOTER\n********************************/\n/*ABOVE*/\n.footer-above {\n  border-top: 1px solid var(--gx-ide-container-border-color);\n  &--no-border-top {\n    border-top: 0;\n  }\n  &--slimmer {\n    padding-top: var(--mer-spacing--xs);\n    padding-bottom: var(--mer-spacing--xs);\n  }\n  &--no-padding {\n    padding: 0;\n  }\n}\n/*START and END*/\n.footer {\n  display: flex;\n  gap: var(--gx-ide-container-elements-spacing);\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n  border-top: 1px solid var(--gx-ide-container-border-color);\n  &__start,\n  &__end {\n    display: flex;\n    gap: var(--gx-ide-container-elements-spacing);\n  }\n  &--no-border {\n    border-top: 0;\n  }\n  &--no-padding {\n    padding: 0;\n  }\n  &--slimmer {\n    padding-top: var(--mer-spacing--xs);\n    padding-bottom: var(--mer-spacing--xs);\n  }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\nimport { TitleAlignment } from \"@genexus/gemini/dist/types/common/types\";\nimport { TitleType } from \"../title/title\";\n@Component({\n  tag: \"gx-ide-container\",\n  styleUrl: \"container.scss\",\n  shadow: true\n})\nexport class GxIdeContainer {\n  /*\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE EVENTS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /* GENERAL */\n\n  /**\n   * By setting the title to inactive, the color will be gray instead of black.\n   */\n  @Prop() readonly inactiveTitle: boolean = false;\n\n  /**\n   * The title of the container\n   */\n  @Prop() readonly containerTitle: string;\n\n  /**\n   * The title of the container\n   */\n  @Prop() readonly titleType: TitleType = \"primary\";\n\n  /**\n   * Displays a border all around the container\n   */\n  @Prop() readonly displayBorder: boolean = false;\n\n  /**\n   * Displays a border on the top\n   */\n  @Prop() readonly displayBorderTop: boolean = false;\n\n  /**\n   * Displays a border at the end\n   */\n  @Prop() readonly displayBorderEnd: boolean = false;\n\n  /**\n   * Displays a border at on the bottom\n   */\n  @Prop() readonly displayBorderBottom: boolean = false;\n\n  /**\n   * Displays a border at the start\n   */\n  @Prop() readonly displayBorderStart: boolean = false;\n\n  /**\n   * The container general padding (applies to .heading, .content, and .footer)\n   */\n  @Prop() readonly sectionsPadding: SectionsPadding = \"m\";\n\n  /* HEADING*/\n\n  /**\n   * Title alignment\n   */\n  @Prop() readonly titleAlignment: TitleAlignment = \"center\";\n\n  /**\n   * Removes the border bottom from the heading\n   */\n  @Prop() readonly noHeadingBorder: boolean = false;\n\n  /**\n   * Removes the padding from the heading\n   */\n  @Prop() readonly noHeadingPadding: boolean = false;\n\n  /**\n   * Adds padding to the top of the heading\n   */\n  @Prop() readonly headingPaddingTop: boolean = false;\n\n  /**\n   * The heading justification\n   */\n  @Prop() readonly headingJustify: HeadingJustify = \"center\";\n\n  /**\n   * It forces the .heading__title min-height to be as tall as the gxg-form-text height. This is useful when you are displaying two gx-ide-container's on the same row, both of them display a title, and one of them displays a gxg-form-text in the header (usually used to filter content). Without this property set to true, the .heading without a gxg-from-text would be shorter. At the time of writing, this is used on ww-images.\n   */\n  @Prop() readonly titleHeightAsInput: boolean = false;\n\n  /**\n   * Makes the header (.heading) display flex:row, instad of the default flex:column.\n   */\n  @Prop() readonly flexRow: boolean = false;\n\n  /* CONTENT */\n\n  /**\n   * Makes the content a flex container\n   */\n  @Prop() readonly flexContent: boolean = false;\n\n  /**\n   * Removes the border-top from the content\n   */\n  @Prop() readonly noContentBorderTop: boolean = false;\n\n  /**\n   * Removes the padding from the content\n   */\n  @Prop() readonly noContentPadding: boolean = false;\n\n  /**\n   * Removes the gap from the content\n   */\n  @Prop() readonly noContentGap: boolean = false;\n\n  /**\n   * Align items\n   */\n  @Prop() readonly alignItems: AlignItems = undefined;\n\n  /**\n   * Justify content\n   */\n  @Prop() readonly justifyContent: JustifyContent = undefined;\n\n  /**\n   * Display border end on the content\n   */\n  @Prop() readonly contentBorderEnd: boolean = false;\n\n  /* FOOTER ABOVE */\n\n  /**\n   * Makes the above footer vertical padding slimmer\n   */\n  @Prop() readonly slimmerAboveFooter: boolean = false;\n\n  /**\n   * Removes the above padding from the footer\n   */\n  @Prop() readonly noAboveFooterPadding: boolean = false;\n\n  /**\n   * Removes the above border top\n   */\n  @Prop() readonly noBorderAboveFooter: boolean = false;\n\n  /* FOOTER > START and FOOTER > END*/\n\n  /**\n   * Makes the footer vertical padding slimmer\n   */\n  @Prop() readonly slimmerFooter: boolean = false;\n\n  /**\n   * Removes the padding from the footer\n   */\n  @Prop() readonly noFooterPadding: boolean = false;\n\n  /**\n   * The footer justification\n   */\n  @Prop() readonly footerJustify: FooterJustify = \"end\";\n\n  /**\n   * Removes the border top from the footer\n   */\n  @Prop() readonly noBorderFooter: boolean = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeContainerElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * A boolean variable indicating if the component has or not any content for the 'header' slot\n   */\n  @State() hasHeaderSlot = false;\n\n  /**\n   * A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)\n   */\n  @State() hasSlottedContent = false;\n\n  /**\n   * A boolean variable indicating if the component has or not any content for the 'footer' slot\n   */\n  @State() hasFooterSlot = false;\n\n  /**\n   * A boolean variable indicating if the component has or not any content for the 'footer' slot\n   */\n  @State() hasAboveFooterSlot = false;\n\n  /**\n   * A boolean variable indicating that the container only has the heading section\n   */\n  @State() hasOnlyHeading = false;\n\n  /**\n   * A boolean variable indicating that the container only has the content section\n   */\n  @State() hasOnlyContent = false;\n\n  /**\n   * A boolean variable indicating that the container only has the footer section\n   */\n  @State() hasOnlyFooter = false;\n\n  // 4.PUBLIC PROPERTY API //\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  componentWillLoad() {\n    this.evaluateSlots();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateSlots() {\n    // header\n    const headerSlot = this.el.querySelectorAll(':scope > [slot=\"header\"]');\n    if (headerSlot.length) {\n      this.hasHeaderSlot = true;\n    }\n    // content\n    const slottedContent = this.el.querySelectorAll(\":scope >  :not([slot])\");\n    if (slottedContent.length) {\n      this.hasSlottedContent = true;\n    }\n    // footer\n    const footerAboveSlot = this.el.querySelectorAll(\n      ':scope >  [slot=\"footer-above\"]'\n    );\n    const footerStartSlot = this.el.querySelectorAll(\n      ':scope >  [slot=\"footer-start\"]'\n    );\n    const footerEndSlot = this.el.querySelectorAll(\n      ':scope >  [slot=\"footer-end\"]'\n    );\n    if (footerStartSlot.length || footerEndSlot.length) {\n      this.hasFooterSlot = true;\n    }\n    if (footerAboveSlot.length) {\n      this.hasAboveFooterSlot = true;\n    }\n  }\n\n  private evaluateSections() {\n    // has only heading\n    if (\n      !this.hasSlottedContent &&\n      !this.hasFooterSlot &&\n      !this.hasAboveFooterSlot\n    ) {\n      this.hasOnlyHeading = true;\n    }\n    // has only content\n    if (\n      this.hasSlottedContent &&\n      !this.containerTitle &&\n      !this.hasHeaderSlot &&\n      !this.hasAboveFooterSlot &&\n      !this.hasFooterSlot\n    ) {\n      this.hasOnlyContent = true;\n    }\n    // has only footer\n    if (\n      !this.hasSlottedContent &&\n      !this.containerTitle &&\n      !this.hasAboveFooterSlot\n    ) {\n      this.hasOnlyFooter = true;\n    }\n  }\n\n  private headingClasses = (): string | { [className: string]: boolean } => {\n    return {\n      \"heading\": true,\n      \"heading--inactive\": this.inactiveTitle,\n      \"heading--slimmer\": this.titleType === \"secondary\",\n      \"heading--no-border\": this.noHeadingBorder || this.hasOnlyHeading,\n      [`heading--justify-${this.headingJustify}`]: true,\n      \"heading--no-padding\": this.noHeadingPadding,\n      \"heading--padding-top\":\n        this.headingPaddingTop && this.containerTitle?.length > 0,\n      \"heading--form-text-height\": this.titleHeightAsInput,\n      \"heading--flex-row\": this.flexRow\n    };\n  };\n\n  private contentClasses = (): string | { [className: string]: boolean } => {\n    return {\n      \"content\": true,\n      \"content--flex\": this.flexContent,\n      \"content--no-padding\": this.noContentPadding,\n      \"content--no-gap\": this.noContentGap,\n      \"content--no-border-top\": this.noContentBorderTop,\n      \"content--border-end\": this.contentBorderEnd,\n      [`content--align-items-${this.alignItems}`]:\n        this.alignItems !== undefined,\n      [`content--justify-content-${this.justifyContent}`]:\n        this.justifyContent !== undefined\n    };\n  };\n\n  private aboveFooter = (): JSX.Element | null => {\n    return this.hasAboveFooterSlot ? (\n      <footer\n        class={{\n          \"footer-above\": true,\n          \"footer-above--no-border-top\": this.noBorderAboveFooter,\n          \"footer-above--no-padding\": this.noAboveFooterPadding,\n          \"footer-above--slimmer\": this.slimmerFooter\n        }}\n      >\n        <slot name=\"footer-above\"></slot>\n      </footer>\n    ) : null;\n  };\n\n  private footer = (): JSX.Element | null => {\n    return this.hasFooterSlot ? (\n      <footer\n        class={{\n          \"footer\": true,\n          \"footer--no-border\":\n            this.hasOnlyFooter ||\n            !this.hasSlottedContent ||\n            this.noBorderFooter,\n          [`footer--justify-${this.footerJustify}`]: true,\n          [`footer--justify-${this.footerJustify}`]: true,\n          \"footer--no-padding\": this.noFooterPadding,\n          \"footer--slimmer\": this.slimmerFooter\n        }}\n      >\n        <div class=\"footer__start\">\n          <slot name=\"footer-start\"></slot>\n        </div>\n        <div class=\"footer__end\">\n          <slot name=\"footer-end\"></slot>\n        </div>\n      </footer>\n    ) : null;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    this.evaluateSections();\n    const result = [\n      this.containerTitle || this.hasHeaderSlot ? (\n        <header class={this.headingClasses()}>\n          {this.containerTitle ? (\n            <gx-ide-title\n              class=\"heading__title\"\n              type={this.titleType}\n              alignment={this.titleAlignment as any}\n            >\n              {this.containerTitle}\n            </gx-ide-title>\n          ) : null}\n          {this.hasHeaderSlot ? (\n            <div class=\"heading__inner-wrapper\">\n              <slot name=\"header\"></slot>\n            </div>\n          ) : null}\n        </header>\n      ) : null,\n      this.hasSlottedContent ? (\n        <div class={this.contentClasses()} part=\"content\">\n          <slot></slot>\n        </div>\n      ) : null,\n      this.aboveFooter(),\n      this.footer()\n    ];\n\n    return (\n      <Host>\n        <div\n          class={{\n            \"container\": true,\n            [`container--padding-${this.sectionsPadding}`]: true,\n            \"container--display-border\": this.displayBorder,\n            \"container--display-border-top\": this.displayBorderTop,\n            \"container--display-border-end\": this.displayBorderEnd,\n            \"container--display-border-bottom\": this.displayBorderBottom,\n            \"container--display-border-start\": this.displayBorderStart,\n            \"container--only-content\": this.hasOnlyContent,\n            \"container--no-header\": !this.hasHeaderSlot && !this.containerTitle,\n            \"container--no-footer\": !this.hasFooterSlot\n          }}\n        >\n          {result}\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type HeadingJustify = \"start\" | \"center\" | \"end\";\nexport type FooterJustify = \"start\" | \"center\" | \"end\";\nexport type SectionsPadding = \"s\" | \"m\" | \"l\";\nexport type AlignItems = \"start\" | \"center\" | \"end\";\nexport type JustifyContent = \"start\" | \"center\" | \"end\";\n",":host {\n  --gx-ide-title-padding: var(--gx-ide-container--padding, --mer-spacing--sm);\n  display: flex;\n  flex-direction: column;\n  color: var(--gx-ide-component-text-color);\n  font-family: var(--mer-font-family--primary);\n  line-height: 1.6em;\n  background-color: transparent;\n  padding: 0;\n}\n/*alignment*/\n:host(.alignment--start) {\n  align-items: start;\n}\n:host(.alignment--center) {\n  align-items: center;\n}\n/*padding*/\n:host(.alignment--start) {\n  text-align: start;\n}\n:host([padding]) {\n  padding: var(--gx-ide-title-padding);\n}\n:host([no-padding-bottom]) {\n  padding-bottom: 0;\n}\n/*border*/\n:host([border]) {\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n}\n/*type*/\n:host(.title-type--primary) {\n}\n:host(.title-type--secondary) {\n  //a little subtle\n  color: var(--gray-06);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { TitleType as GeminiTitleType } from \"@genexus/gemini/dist/types/components/title/title\";\n\n@Component({\n  tag: \"gx-ide-title\",\n  styleUrl: \"title.scss\",\n  shadow: true\n})\nexport class GxIdeTitle {\n  /**\n   * Description: This helper component has been created for using as a title for the dialogs sections.\n   */\n\n  private geminiType: GeminiTitleType;\n\n  /**\n   * The title caption (the title)\n   */\n  @Prop() readonly titleCaption: string;\n\n  /**\n   * The title caption (the title)\n   */\n  @Prop() readonly type: TitleType = \"primary\";\n\n  /**\n   * The title alignment\n   */\n  @Prop() readonly alignment: TitleAlignment = \"start\";\n\n  /**\n   * Disables the padding\n   */\n  @Prop({ reflect: true }) readonly padding: boolean = false;\n\n  /**\n   * Disables the padding on the bottom\n   */\n  @Prop({ reflect: true }) readonly noPaddingBottom: boolean = false;\n\n  /**\n   * Displays a border on the bottom\n   */\n  @Prop({ reflect: true }) readonly border: boolean = false;\n\n  componentWillLoad() {\n    if (this.type === \"primary\") {\n      this.geminiType = \"title-04\";\n    } else if (this.type === \"secondary\") {\n      this.geminiType = \"title-05\";\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`alignment--${this.alignment}`]: true,\n          [`title-type--${this.type}`]: true\n        }}\n      >\n        <gxg-title type={this.geminiType} alignment={this.alignment}>\n          <slot></slot>\n        </gxg-title>\n      </Host>\n    );\n  }\n}\n\nexport type TitleType = \"primary\" | \"secondary\";\n\nexport type TitleAlignment = \"start\" | \"center\";\n"],"mappings":";;AAAA,MAAMA,IAAe;;MCQRC,IAAc;;;IAoSjBC,KAAAC,iBAAiB;;MACvB,OAAO;QACLC,SAAW;QACX,qBAAqBF,KAAKG;QAC1B,oBAAoBH,KAAKI,cAAc;QACvC,sBAAsBJ,KAAKK,mBAAmBL,KAAKM;QACnD,CAAC,oBAAoBN,KAAKO,mBAAmB;QAC7C,uBAAuBP,KAAKQ;QAC5B,wBACER,KAAKS,uBAAqBC,IAAAV,KAAKW,oBAAc,QAAAD,WAAA,aAAAA,EAAEE,UAAS;QAC1D,6BAA6BZ,KAAKa;QAClC,qBAAqBb,KAAKc;;AAC3B;IAGKd,KAAAe,iBAAiB,OAChB;MACLC,SAAW;MACX,iBAAiBhB,KAAKiB;MACtB,uBAAuBjB,KAAKkB;MAC5B,mBAAmBlB,KAAKmB;MACxB,0BAA0BnB,KAAKoB;MAC/B,uBAAuBpB,KAAKqB;MAC5B,CAAC,wBAAwBrB,KAAKsB,eAC5BtB,KAAKsB,eAAeC;MACtB,CAAC,4BAA4BvB,KAAKwB,mBAChCxB,KAAKwB,mBAAmBD;;IAItBvB,KAAAyB,cAAc,MACbzB,KAAK0B,qBACVC,EAAA;MACEC,OAAO;QACL,gBAAgB;QAChB,+BAA+B5B,KAAK6B;QACpC,4BAA4B7B,KAAK8B;QACjC,yBAAyB9B,KAAK+B;;OAGhCJ,EAAA;MAAMK,MAAK;UAEX;IAGEhC,KAAAiC,SAAS,MACRjC,KAAKkC,gBACVP,EAAA;MACEC,OAAO;QACLK,QAAU;QACV,qBACEjC,KAAKmC,kBACJnC,KAAKoC,qBACNpC,KAAKqC;QACP,CAAC,mBAAmBrC,KAAKsC,kBAAkB;QAC3C,CAAC,mBAAmBtC,KAAKsC,kBAAkB;QAC3C,sBAAsBtC,KAAKuC;QAC3B,mBAAmBvC,KAAK+B;;OAG1BJ,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMK,MAAK;SAEbL,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMK,MAAK;WAGb;yBAjVoC;;qBAUF;yBAKE;4BAKG;4BAKA;+BAKG;8BAKD;2BAKK;0BAOF;2BAKN;4BAKC;6BAKC;0BAKI;8BAKH;mBAKX;uBAOI;8BAKO;4BAKF;wBAKJ;sBAKCT;0BAKQA;4BAKL;8BAOE;gCAKE;+BAKD;yBAON;2BAKE;yBAKI;0BAKL;yBAWlB;6BAKI;yBAKJ;8BAKK;0BAKJ;0BAKA;yBAKD;;;;;EAQzB,iBAAAiB;IACExC,KAAKyC;;;;;EASC,aAAAA;;IAEN,MAAMC,IAAa1C,KAAK2C,GAAGC,iBAAiB;IAC5C,IAAIF,EAAW9B,QAAQ;MACrBZ,KAAK6C,gBAAgB;;;QAGvB,MAAMC,IAAiB9C,KAAK2C,GAAGC,iBAAiB;IAChD,IAAIE,EAAelC,QAAQ;MACzBZ,KAAKoC,oBAAoB;;;QAG3B,MAAMW,IAAkB/C,KAAK2C,GAAGC,iBAC9B;IAEF,MAAMI,IAAkBhD,KAAK2C,GAAGC,iBAC9B;IAEF,MAAMK,IAAgBjD,KAAK2C,GAAGC,iBAC5B;IAEF,IAAII,EAAgBpC,UAAUqC,EAAcrC,QAAQ;MAClDZ,KAAKkC,gBAAgB;;IAEvB,IAAIa,EAAgBnC,QAAQ;MAC1BZ,KAAK0B,qBAAqB;;;EAItB,gBAAAwB;;IAEN,KACGlD,KAAKoC,sBACLpC,KAAKkC,kBACLlC,KAAK0B,oBACN;MACA1B,KAAKM,iBAAiB;;;QAGxB,IACEN,KAAKoC,sBACJpC,KAAKW,mBACLX,KAAK6C,kBACL7C,KAAK0B,uBACL1B,KAAKkC,eACN;MACAlC,KAAKmD,iBAAiB;;;QAGxB,KACGnD,KAAKoC,sBACLpC,KAAKW,mBACLX,KAAK0B,oBACN;MACA1B,KAAKmC,gBAAgB;;;;EA4EzB,MAAAiB;IACEpD,KAAKkD;IACL,MAAMG,IAAS,EACbrD,KAAKW,kBAAkBX,KAAK6C,gBAC1BlB,EAAA;MAAQC,OAAO5B,KAAKC;OACjBD,KAAKW,iBACJgB,EAAA;MACEC,OAAM;MACN0B,MAAMtD,KAAKI;MACXmD,WAAWvD,KAAKwD;OAEfxD,KAAKW,kBAEN,MACHX,KAAK6C,gBACJlB,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMK,MAAK;UAEX,QAEJ,MACJhC,KAAKoC,oBACHT,EAAA;MAAKC,OAAO5B,KAAKe;MAAkB0C,MAAK;OACtC9B,EAAA,iBAEA,MACJ3B,KAAKyB,eACLzB,KAAKiC;IAGP,OACEN,EAAC+B,GAAI,MACH/B,EAAA;MACEC,OAAO;QACL+B,WAAa;QACb,CAAC,sBAAsB3D,KAAK4D,oBAAoB;QAChD,6BAA6B5D,KAAK6D;QAClC,iCAAiC7D,KAAK8D;QACtC,iCAAiC9D,KAAK+D;QACtC,oCAAoC/D,KAAKgE;QACzC,mCAAmChE,KAAKiE;QACxC,2BAA2BjE,KAAKmD;QAChC,yBAAyBnD,KAAK6C,kBAAkB7C,KAAKW;QACrD,yBAAyBX,KAAKkC;;OAG/BmB;;;;;;;;;AClaX,MAAMa,IAAW;;MCQJC,IAAU;;;;gBAec;qBAKU;mBAKQ;2BAKQ;kBAKT;;EAEpD,iBAAA3B;IACE,IAAIxC,KAAKsD,SAAS,WAAW;MAC3BtD,KAAKoE,aAAa;WACb,IAAIpE,KAAKsD,SAAS,aAAa;MACpCtD,KAAKoE,aAAa;;;EAItB,MAAAhB;IACE,OACEzB,EAAC+B,GAAI;MACH9B,OAAO;QACL,CAAC,cAAc5B,KAAKuD,cAAc;QAClC,CAAC,eAAevD,KAAKsD,SAAS;;OAGhC3B,EAAA;MAAW2B,MAAMtD,KAAKoE;MAAYb,WAAWvD,KAAKuD;OAChD5B,EAAA"}

package/dist/genexus-ide-ui/{p-4a5ad686.entry.js → p-ac1a72d9.entry.js}

@@ -17,8 +17,17 @@ const g = class {
     this.renderedFirstTime = false;
     this.shortcutsSrc = i(`./gx-ide-assets/new-object/shortcuts.json`);
     this.descriptionModifiedByUser = false;
+    this.nameModifiedByUser = false;
     // 9.LOCAL METHODS //
-        this.setFirstFocusableElement = () => {
+    /**
+         * Scroll into view on both list-boxes. Only makes sense if defaultTypeId is not undefined, since otherwise in both list-boxes the initial selected item should be the first one, in which case is not needed to do scrollIntoView. Only call this method after the first render on new-object.
+         */    this.scrollIntoViewListBoxes = () => {
+      if (this.defaultTypeId) {
+        this.categoryListBox.scrollToSelected();
+        this.typeListBox.scrollToSelected();
+      }
+    };
+    this.setFirstFocusableElement = () => {
       this.el.addEventListener("focus", (() => {
         this.nameEl.focus();
       }));
@@ -49,22 +58,58 @@ const g = class {
       return null;
     };
     /**
-         * This method initializes tha name value. It depends on 'this.selectedType'
+         * This method defines the initial selected category and type, and it thens initializes tha name value.
          */    this.init = () => {
-      this.selectedCategory = this.typeCategories[0];
-      this.selectedType = this.typeCategories[0].types[0];
+      const t = this.setDefaultType(this.defaultTypeId);
+      if (!t) {
+        this.selectedCategory = this.typeCategories[0];
+        this.selectedType = this.selectedCategory.types[0];
+      }
       if (this.selectedType && this.selectedType.name.length > 0) {
         this.name = this.getNameSuggestion(this.selectedType);
         this.description = this.selectedType.name;
       }
     };
+    this.setDefaultType = t => {
+      if (!t) {
+        return false;
+      }
+      let e = false;
+      t: for (let i = 0; i < this.typeCategories.length; i++) {
+        for (let r = 0; r < this.typeCategories[i].types.length; r++) {
+          const o = this.typeCategories[i].types[r].id;
+          if (o === t) {
+            this.selectedCategory = this.typeCategories[i];
+            this.selectedType = this.typeCategories[i].types[r];
+            e = true;
+            break t;
+          }
+        }
+      }
+      return e;
+    };
     this.getNameSuggestion = t => t.name.replace(/\s/g, "");
+    this.nameValueHandler = () => {
+      if (this.nameModifiedByUser) {
+        return this.nameEl.value;
+      } else {
+        return this.getNameSuggestion(this.selectedType);
+      }
+    };
+    this.descriptionValueHandler = () => {
+      if (this.nameModifiedByUser) {
+        return this.descriptionEl.value;
+      } else {
+        return this.selectedType.name;
+      }
+    };
     this.onInputNameHandler = t => {
       const e = t.detail;
       if (!this.descriptionModifiedByUser) {
         // description should be equal to name, unless the description was already modified by the user.
         this.descriptionEl.value = e;
       }
+      this.nameModifiedByUser = true;
     };
     this.onBlurNameHandler = async () => {
       const t = await this.validateNameCallback(this.nameEl.value);
@@ -137,6 +182,7 @@ const g = class {
     this.typeCategories = undefined;
     this.parent = undefined;
     this.defaultParent = undefined;
+    this.defaultTypeId = undefined;
     this.selectModuleCallback = undefined;
     this.validateNameCallback = undefined;
     this.createCallback = undefined;
@@ -160,6 +206,7 @@ const g = class {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
       this.renderedFirstTime = true;
+      this.scrollIntoViewListBoxes();
     }
   }
   // 7.LISTENERS //
@@ -200,12 +247,14 @@ const g = class {
       noBorder: true,
       borderEnd: true,
       "the-title": this._componentLocale.categorySelectionTitle,
-      onSelectionChanged: this.categoryOnSelectionChangedHandler
+      onSelectionChanged: this.categoryOnSelectionChangedHandler,
+      ref: t => this.categoryListBox = t
     }, this.typeCategories.map((t => r("gxg-list-box-item", {
       key: t.id,
       value: t.id,
       icon: t.icon,
-      part: `category-${t.id}`
+      part: `category-${t.id}`,
+      selected: this.selectedCategory.id === t.id
     }, t.name)))) : null), r("div", {
       class: "types"
     }, this.selectedCategory.types.length > 0 ? r("gxg-list-box", {
@@ -214,11 +263,13 @@ const g = class {
       noBorder: true,
       theTitle: this.selectedCategory.name ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}` : this._componentLocale.typeSelectionTitle,
       key: this.selectedCategory.id,
-      onSelectionChanged: this.typeOnSelectionChangedHandler
+      onSelectionChanged: this.typeOnSelectionChangedHandler,
+      ref: t => this.typeListBox = t
     }, this.selectedCategory.types.map((t => r("gxg-list-box-item", {
       key: `${this.selectedCategory.id}-${t.id}`,
       icon: t.icon,
-      part: `type-${this.selectedCategory.id}-${t.id}`
+      part: `type-${this.selectedCategory.id}-${t.id}`,
+      selected: this.selectedType.id === t.id
     }, t.name)))) : r("p", null, "No Categories to display"))), r("div", {
       class: "api-description"
     }, r("gxg-title", {
@@ -231,7 +282,7 @@ const g = class {
       "label-position": "start",
       placeholder: "Name",
       "max-width": "100%",
-      value: this.getNameSuggestion(this.selectedType),
+      value: this.nameValueHandler(),
       toolTip: l.tooltip,
       ref: t => this.nameEl = t,
       onInput: this.onInputNameHandler,
@@ -247,7 +298,7 @@ const g = class {
       "label-position": "start",
       placeholder: "Description",
       "max-width": "100%",
-      value: this.selectedType.name,
+      value: this.descriptionValueHandler(),
       ref: t => this.descriptionEl = t,
       onInput: this.onInputDescriptionHandler,
       part: "description",
@@ -290,4 +341,4 @@ const g = class {
 g.style = n;
 
 export { g as gx_ide_new_object };
-//# sourceMappingURL=p-4a5ad686.entry.js.map
+//# sourceMappingURL=p-ac1a72d9.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["newObjectCss","GxIdeNewObject","this","renderedFirstTime","shortcutsSrc","getAssetPath","descriptionModifiedByUser","nameModifiedByUser","scrollIntoViewListBoxes","defaultTypeId","categoryListBox","scrollToSelected","typeListBox","setFirstFocusableElement","el","addEventListener","nameEl","focus","validateInitialName","async","result","validateNameCallback","name","validateNameHandler","renderModuleFolder","selectedType","hasModule","hasFolder","labelDescription","_componentLocale","moduleFolder","moduleOnly","folderOnly","h","labelPosition","value","parent","defaultValue","defaultParent","selectEntityCallback","selectModuleCallback","ref","moduleFolderEl","id","part","init","defaultTypeFound","setDefaultType","selectedCategory","typeCategories","types","length","getNameSuggestion","description","typeId","found","outerLoop","i","j","loopTypeId","replace","nameValueHandler","descriptionValueHandler","descriptionEl","onInputNameHandler","e","detail","onBlurNameHandler","onNameValueChangedHandler","onInputDescriptionHandler","undefined","validationMessage","validationStatus","nameIsValid","createCallbackHandler","data","_a","moduleId","_c","_b","createCallback","cancelCallbackHandler","cancelCallback","categoryOnSelectionChangedHandler","selectionEvent","selection","items","index","typeOnSelectionChangedHandler","selected","watchSelectedTypeHandler","componentWillLoad","Locale","getComponentStrings","componentDidLoad","componentDidLoadEvent","emit","componentDidRender","componentDidRenderFirstTime","componentName","suspendShortcuts","gxgShortcutsEl","suspend","render","Host","class","noContentPadding","noContentGap","slimmerFooter","config","gxIdeContainer","containerTitle","displayTitle","noHeadingBorder","noBorder","borderEnd","categorySelectionTitle","onSelectionChanged","map","category","key","icon","theTitle","typeSelectionTitleSuffix","typeSelectionTitle","type","objectName","placeholder","toolTip","tooltip","onInput","onBlur","onValueChanged","debounce","objectDescription","slot","onClick","footer","btnCancel","disabled","btnCreate","src"],"sources":["src/components/new-object/new-object.scss?tag=gx-ide-new-object&encapsulation=shadow","src/components/new-object/new-object.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/*main*/\n.main {\n  display: grid;\n  grid-template-rows: 1fr auto;\n  overflow: auto;\n  height: 100%;\n}\n.categories-types-container {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 1;\n  overflow: hidden;\n  border-bottom: 1px solid var(--gx-ide-container-border-color);\n  .categories {\n    flex: 1;\n  }\n  .types {\n    flex: 2;\n  }\n}\n.api-description {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  gap: var(--gx-ide-grid-row-gap);\n  padding: var(--gx-ide-grid-row-gap);\n}\n.form {\n  display: grid;\n  grid-template-columns: minmax(95px, auto) 1fr;\n  grid-template-areas:\n    \"name-label name-input\"\n    \"description-label description-input\"\n    \"module-label module-input\";\n  gap: var(--gx-ide-grid-row-gap);\n  column-gap: 0;\n\n  .name-label {\n    grid-area: \"name-label\";\n  }\n  .name-input {\n    grid-area: \"name-input\";\n  }\n  .description-label {\n    grid-area: \"description-label\";\n  }\n  .description-input {\n    grid-area: \"description-input\";\n  }\n  .module-label {\n    grid-area: \"module-label\";\n  }\n  .module-input {\n    grid-area: \"module-input\";\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  getAssetPath,\n  Method\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { EntityData } from \"../../common/types\";\n\n@Component({\n  tag: \"gx-ide-new-object\",\n  styleUrl: \"new-object.scss\",\n  shadow: { delegatesFocus: true },\n  assetsDirs: [\"gx-ide-assets/new-object\"]\n})\nexport class GxIdeNewObject {\n  /*\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE EVENTS\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/new-object/shortcuts.json`\n  );\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeNewObjectElement;\n\n  /* References needed to collect data con \"Create\" button submit*/\n  private nameEl!: HTMLGxgFormTextElement;\n  private descriptionEl!: HTMLGxgFormTextElement;\n  private moduleFolderEl!: HTMLGxIdeEntitySelectorElement;\n  private descriptionModifiedByUser = false;\n  private nameModifiedByUser = false;\n  private gxgShortcutsEl: HTMLGxgShortcutsElement;\n  private categoryListBox!: HTMLGxgListBoxElement;\n  private typeListBox!: HTMLGxgListBoxElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() selectedCategory: TypeCategoryData | null;\n  @State() selectedType: TypeData | null;\n  @Watch(\"selectedType\")\n  watchSelectedTypeHandler() {\n    this.descriptionModifiedByUser = false;\n  }\n  @State() nameIsValid = false;\n  // Name of the new object\n  @State() name: string = undefined;\n  // Description of the new object\n  @State() description: string = undefined;\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * Array containing category list and its corresponding types\n   */\n  @Prop() readonly typeCategories!: TypeCategoryData[];\n\n  /**\n   * Current value for Module/Folder\n   */\n  @Prop() readonly parent: EntityData;\n\n  /**\n   * Default value for the Module/Folder field.\n   */\n  @Prop() readonly defaultParent: EntityData;\n\n  /**\n   * Allows you to define the type selected by default when instantiating the dialog. Represented by the type identifier\n   */\n  @Prop() readonly defaultTypeId: string;\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   * Callback invoked when you must validate a name. Returns error message or 'undefined' if name is not valid.\n   */\n  @Prop() readonly validateNameCallback: ValidateNameCallback;\n\n  /**\n   * Callback invoked when user wants to cancel object creation\n   */\n  @Prop() readonly createCallback: CreateCallback;\n\n  /**\n   * Callback invoked when user wants to confirm object creation\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event emm=its the data needed to create a new object\n   */\n  @Event() create: EventEmitter<NewObjectData>;\n\n  /**\n   * This event is trigger after a validation of the object name is made. Returns undefined if its valid, otherwise an error message\n   */\n  @Event() validateName: EventEmitter<string | undefined>;\n\n  /**\n   * This event emits the 'cancel' event\n   */\n  @Event() cancel: EventEmitter<boolean>;\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   * 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 EVENTS //\n\n  async componentWillLoad() {\n    this.init();\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.nameEl.focus();\n    this.setFirstFocusableElement();\n    this.validateInitialName();\n    this.componentDidLoadEvent.emit(true);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n      this.scrollIntoViewListBoxes();\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  /**\n   * Scroll into view on both list-boxes. Only makes sense if defaultTypeId is not undefined, since otherwise in both list-boxes the initial selected item should be the first one, in which case is not needed to do scrollIntoView. Only call this method after the first render on new-object.\n   */\n  private scrollIntoViewListBoxes = () => {\n    if (this.defaultTypeId) {\n      this.categoryListBox.scrollToSelected();\n      this.typeListBox.scrollToSelected();\n    }\n  };\n\n  private setFirstFocusableElement = () => {\n    this.el.addEventListener(\"focus\", () => {\n      this.nameEl.focus();\n    });\n  };\n\n  private validateInitialName = async () => {\n    const result: string | undefined = await this.validateNameCallback(\n      this.name\n    );\n    this.validateNameHandler(result);\n  };\n\n  private renderModuleFolder = () => {\n    if (this.selectedType.hasModule || this.selectedType.hasFolder) {\n      let labelDescription = this._componentLocale.moduleFolder;\n      if (!this.selectedType.hasFolder) {\n        labelDescription = this._componentLocale.moduleOnly;\n      } else if (!this.selectedType.hasModule) {\n        labelDescription = this._componentLocale.folderOnly;\n      }\n      return [\n        <gxg-label labelPosition=\"start\">{labelDescription}</gxg-label>,\n        <gx-ide-entity-selector\n          value={this.parent}\n          defaultValue={this.defaultParent}\n          selectEntityCallback={this.selectModuleCallback}\n          ref={(el: HTMLGxIdeEntitySelectorElement) =>\n            (this.moduleFolderEl = el as HTMLGxIdeEntitySelectorElement)\n          }\n          id=\"module\"\n          part=\"module\"\n        ></gx-ide-entity-selector>\n      ];\n    }\n    return null;\n  };\n\n  /**\n   * This method defines the initial selected category and type, and it thens initializes tha name value.\n   */\n  private init = () => {\n    const defaultTypeFound = this.setDefaultType(this.defaultTypeId);\n    if (!defaultTypeFound) {\n      this.selectedCategory = this.typeCategories[0];\n      this.selectedType = this.selectedCategory.types[0];\n    }\n    if (this.selectedType && this.selectedType.name.length > 0) {\n      this.name = this.getNameSuggestion(this.selectedType);\n      this.description = this.selectedType.name;\n    }\n  };\n\n  private setDefaultType = (typeId: string | undefined): boolean => {\n    if (!typeId) {\n      return false;\n    }\n    let found = false;\n    outerLoop: for (let i = 0; i < this.typeCategories.length; i++) {\n      for (let j = 0; j < this.typeCategories[i].types.length; j++) {\n        const loopTypeId = this.typeCategories[i].types[j].id;\n        if (loopTypeId === typeId) {\n          this.selectedCategory = this.typeCategories[i];\n          this.selectedType = this.typeCategories[i].types[j];\n          found = true;\n          break outerLoop;\n        }\n      }\n    }\n    return found;\n  };\n\n  private getNameSuggestion = (selectedType: TypeData) => {\n    // Type name can include whitespaces, we need to replace all whitespaces to avoid invalid suggestions:\n    return selectedType.name.replace(/\\s/g, \"\");\n  };\n\n  private nameValueHandler = (): string => {\n    if (this.nameModifiedByUser) {\n      return this.nameEl.value;\n    } else {\n      return this.getNameSuggestion(this.selectedType);\n    }\n  };\n\n  private descriptionValueHandler = () => {\n    if (this.nameModifiedByUser) {\n      return this.descriptionEl.value;\n    } else {\n      return this.selectedType.name;\n    }\n  };\n\n  private onInputNameHandler = (e: CustomEvent<string>) => {\n    const name = e.detail;\n    if (!this.descriptionModifiedByUser) {\n      // description should be equal to name, unless the description was already modified by the user.\n      this.descriptionEl.value = name;\n    }\n    this.nameModifiedByUser = true;\n  };\n\n  private onBlurNameHandler = async () => {\n    const result: string | undefined = await this.validateNameCallback(\n      this.nameEl.value\n    );\n    this.validateNameHandler(result);\n  };\n\n  private onNameValueChangedHandler = async (e: CustomEvent<string>) => {\n    const name = e.detail;\n    const result: string | undefined = await this.validateNameCallback(name);\n    this.validateNameHandler(result);\n  };\n\n  private onInputDescriptionHandler = (e: CustomEvent<string>) => {\n    this.description = e.detail;\n    this.descriptionModifiedByUser = true;\n  };\n\n  /**\n   * If the parameter is undefined, is because the name is valid. Otherwise, if it receives a string, is because the name is not valid. The string is the error message to display.\n   */\n  private validateNameHandler = (result: string | undefined): void => {\n    if (result !== undefined) {\n      // the name is not valid. display message\n      this.nameEl.validationMessage = result;\n      this.nameEl.validationStatus = \"error\";\n      this.nameIsValid = false;\n    } else {\n      // valid name\n      this.nameEl.validationMessage = null;\n      this.nameEl.validationStatus = \"indeterminate\";\n      this.nameIsValid = true;\n    }\n  };\n\n  private createCallbackHandler = async (): Promise<void> => {\n    const data: NewObjectData = {\n      typeId: this.selectedType?.id,\n      name: this.nameEl.value,\n      description: !this.descriptionModifiedByUser\n        ? undefined\n        : this.descriptionEl.value,\n      moduleId: this.moduleFolderEl?.value?.id\n    };\n    const result = await this.createCallback(data);\n    this.validateNameHandler(result);\n  };\n\n  private cancelCallbackHandler = async (): Promise<void> => {\n    await this.cancelCallback();\n  };\n\n  private categoryOnSelectionChangedHandler = (\n    selectionEvent: CustomEvent<SelectionChangedEvent>\n  ): void => {\n    const selection = selectionEvent.detail.items;\n    if (selection.length > 0) {\n      const selectedCategory = this.typeCategories[selection[0].index];\n      if (selectedCategory) {\n        this.selectedCategory = selectedCategory;\n        if (selectedCategory.types.length > 0) {\n          this.selectedType = selectedCategory.types[0];\n        }\n      }\n    }\n  };\n\n  private typeOnSelectionChangedHandler = (\n    selectionEvent: CustomEvent<SelectionChangedEvent>\n  ) => {\n    const selection = selectionEvent.detail.items;\n    if (selection.length > 0) {\n      const selected = selection[0];\n      this.selectedType = this.selectedCategory.types[selected.index];\n    }\n  };\n\n  // 10.LOCAL METHODS (RENDER) //\n\n  // 11.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            noHeadingBorder\n          >\n            <main class=\"main\">\n              <div class=\"categories-types-container\">\n                <div class=\"categories\">\n                  {/* select a category listbox*/}\n                  {this.typeCategories.length > 0 ? (\n                    <gxg-list-box\n                      class=\"category\"\n                      single-selection\n                      noBorder\n                      borderEnd\n                      the-title={this._componentLocale.categorySelectionTitle}\n                      onSelectionChanged={\n                        this.categoryOnSelectionChangedHandler\n                      }\n                      ref={el =>\n                        (this.categoryListBox = el as HTMLGxgListBoxElement)\n                      }\n                    >\n                      {this.typeCategories.map(category => (\n                        <gxg-list-box-item\n                          key={category.id}\n                          value={category.id}\n                          icon={category.icon}\n                          part={`category-${category.id}`}\n                          selected={this.selectedCategory.id === category.id}\n                        >\n                          {category.name}\n                        </gxg-list-box-item>\n                      ))}\n                    </gxg-list-box>\n                  ) : null}\n                </div>\n                <div class=\"types\">\n                  {/* types listbox*/}\n                  {this.selectedCategory.types.length > 0 ? (\n                    <gxg-list-box\n                      class=\"types\"\n                      single-selection\n                      noBorder\n                      theTitle={\n                        this.selectedCategory.name\n                          ? `${this.selectedCategory.name} ${this._componentLocale.typeSelectionTitleSuffix}`\n                          : this._componentLocale.typeSelectionTitle\n                      }\n                      key={this.selectedCategory.id}\n                      onSelectionChanged={this.typeOnSelectionChangedHandler}\n                      ref={el =>\n                        (this.typeListBox = el as HTMLGxgListBoxElement)\n                      }\n                    >\n                      {this.selectedCategory.types.map(type => (\n                        <gxg-list-box-item\n                          key={`${this.selectedCategory.id}-${type.id}`}\n                          icon={type.icon}\n                          part={`type-${this.selectedCategory.id}-${type.id}`}\n                          selected={this.selectedType.id === type.id}\n                        >\n                          {type.name}\n                        </gxg-list-box-item>\n                      ))}\n                    </gxg-list-box>\n                  ) : (\n                    <p>No Categories to display</p>\n                  )}\n                </div>\n              </div>\n              <div class=\"api-description\">\n                {/* api description title*/}\n                <gxg-title type=\"title-05\">\n                  {this.selectedType?.description}\n                </gxg-title>\n                <div class=\"form\">\n                  {/* selected type name */}\n                  <gxg-label labelPosition=\"start\">\n                    {this._componentLocale.objectName}\n                  </gxg-label>\n                  <gxg-form-text\n                    label-position=\"start\"\n                    placeholder=\"Name\"\n                    max-width=\"100%\"\n                    value={this.nameValueHandler()}\n                    toolTip={config.tooltip}\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.nameEl = el as HTMLGxgFormTextElement)\n                    }\n                    onInput={this.onInputNameHandler as any}\n                    onBlur={this.onBlurNameHandler}\n                    onValueChanged={this.onNameValueChangedHandler}\n                    debounce\n                    part=\"name\"\n                    display-validation-styles\n                    display-validation-message\n                  ></gxg-form-text>\n\n                  {/* description */}\n                  <gxg-label labelPosition=\"start\">\n                    {this._componentLocale.objectDescription}\n                  </gxg-label>\n                  <gxg-form-text\n                    label-position=\"start\"\n                    placeholder=\"Description\"\n                    max-width=\"100%\"\n                    value={this.descriptionValueHandler()}\n                    ref={(el: HTMLGxgFormTextElement) =>\n                      (this.descriptionEl = el as HTMLGxgFormTextElement)\n                    }\n                    onInput={this.onInputDescriptionHandler as any}\n                    part=\"description\"\n                    display-validation-styles\n                    display-validation-message\n                  ></gxg-form-text>\n\n                  {this.renderModuleFolder()}\n                </div>\n              </div>\n            </main>\n\n            {/* Footer*/}\n            {/* cancel button*/}\n            <gxg-button\n              id=\"button-cancel\"\n              slot=\"footer-end\"\n              type=\"outlined\"\n              onClick={this.cancelCallbackHandler}\n              part=\"gxg-button gxg-button--cancel\"\n            >\n              {this._componentLocale.footer.btnCancel}\n            </gxg-button>\n            {/* create button*/}\n            <gxg-button\n              id=\"button-create\"\n              slot=\"footer-end\"\n              type=\"primary-text-only\"\n              onClick={this.createCallbackHandler}\n              disabled={!this.nameIsValid}\n              part=\"gxg-button gxg-button--create\"\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}\n\nexport interface NewObjectData {\n  typeId: string;\n  name: string;\n  description: string | undefined;\n  moduleId: string;\n}\n\nexport type ValidateNameCallback = (\n  name: string\n) => Promise<string | undefined>;\n\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\n\nexport type CreateCallback = (\n  data: NewObjectData\n) => Promise<string | undefined>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type TypeCategoryData = {\n  id: string;\n  name: string;\n  icon: string;\n  types: TypeData[];\n};\n\nexport type TypeData = {\n  id: string;\n  name: string;\n  icon: string;\n  hasModule: boolean;\n  hasFolder: boolean;\n  description: string;\n};\n"],"mappings":"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"}