@genexus/genexus-ide-ui 0.0.108 → 0.0.109

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

@@ -1 +0,0 @@
-{"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":"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"}

package/dist/genexus-ide-ui/p-cf5c3c10.entry.js

@@ -1,270 +0,0 @@
-import { r as e, c as t, h as r, H as s, g as i } from "./p-48217969.js";
-
-import { L as o } from "./p-74d59062.js";
-
-const a = ":host{display:block;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item.not-zero{font-weight:var(--mer-font__weight--semi-bold)}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs)}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .active-indicator{background-color:var(--mer-icon__primary);border-color:var(--mer-icon__primary)}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-border]){border:none}:host([no-border-top]){border-top:none}:host([no-border-end]){border-inline-end:none}:host([no-border-bottom]){border-bottom:none}:host([no-border-start]){border-inline-start:none}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
-
-const n = class {
-  constructor(r) {
-    e(this, r);
-    this.selectionChanged = t(this, "selectionChanged", 7);
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-        this.evaluateIconsSize = () => {
-      if (this.compact) {
-        this.iconsSize = "small";
-      }
-    };
-    this.evaluateLabel = e => {
-      const t = this[e];
-      if (this.minimal) {
-        return `${t}`;
-      } else {
-        const r = t === 1;
-        return r ? `${t} ${this._componentLocale[e]["singular"]}` : `${t} ${this._componentLocale[e]["plural"]}`;
-      }
-    };
-    this.selectionChangedHandler = e => {
-      e.stopPropagation();
-      this.selectionChanged.emit(e.detail);
-    };
-    this.active = false;
-    this.errors = 0;
-    this.hideError = false;
-    this.warnings = 0;
-    this.hideWarning = false;
-    this.successes = 0;
-    this.hideSuccess = false;
-    this.messages = 0;
-    this.hideMessage = false;
-    this.minimal = false;
-    this.compact = false;
-    this.noBorder = false;
-    this.noInnerBorders = false;
-    this.noBorderTop = false;
-    this.noBorderEnd = false;
-    this.noBorderBottom = false;
-    this.noBorderStart = false;
-    this.iconsSize = "small";
-  }
-  // 6.COMPONENT LIFECYCLE METHODS //
-  async componentWillLoad() {
-    this._componentLocale = await o.getComponentStrings(this.el);
-    this.evaluateIconsSize();
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return r(s, null, r("gx-ide-list-selector", {
-      type: "multi-selection",
-      listName: "status-buttons",
-      noListBorder: true,
-      ellipsis: true,
-      iconsSize: this.iconsSize,
-      onSelectionChanged: this.selectionChangedHandler
-    }, !this.hideError ? r("gx-ide-list-selector-item", {
-      itemId: "errors",
-      itemValue: this.evaluateLabel("errors"),
-      icon: "gx-test/result-exception",
-      iconColor: this.errors === 0 ? "disabled" : "auto",
-      class: {
-        error: true,
-        "not-zero": this.errors !== 0
-      },
-      itemChecked: true
-    }, r("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null, !this.hideWarning ? r("gx-ide-list-selector-item", {
-      itemId: "warnings",
-      itemValue: this.evaluateLabel("warnings"),
-      icon: "gx-test/result-warning",
-      iconColor: this.warnings === 0 ? "disabled" : "auto",
-      class: {
-        warning: true,
-        "not-zero": this.warnings !== 0
-      },
-      itemChecked: true
-    }, r("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null, !this.hideSuccess ? r("gx-ide-list-selector-item", {
-      itemId: "successes",
-      itemValue: this.evaluateLabel("successes"),
-      icon: "gx-test/result-ok",
-      iconColor: this.successes === 0 ? "disabled" : "auto",
-      class: {
-        success: true,
-        "not-zero": this.successes !== 0
-      },
-      itemChecked: true
-    }, r("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null, !this.hideMessage ? r("gx-ide-list-selector-item", {
-      itemId: "messages",
-      itemValue: this.evaluateLabel("messages"),
-      icon: "gx-test/screenshot-viewer",
-      iconColor: this.messages === 0 ? "disabled" : "auto",
-      class: {
-        message: true,
-        "not-zero": this.messages !== 0
-      },
-      itemChecked: true
-    }, r("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null));
-  }
-  static get assetsDirs() {
-    return [ "gx-ide-assets/status-buttons" ];
-  }
-  get el() {
-    return i(this);
-  }
-};
-
-n.style = a;
-
-const l = ':host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;opacity:0;transition:150ms opacity;}.top-state-bar:before{content:"";width:100%;height:100%;position:absolute;background-color:var(--mer-color__elevation--04);z-index:-1}.top-state-bar:after{content:"";left:var(--mer-border__width--sm);top:var(--mer-border__width--sm);width:calc(100% - var(--mer-border__width--sm) * 2);height:calc(100% - var(--mer-border__width--sm) * 2);position:absolute;background-color:var(--mer-color__surface);z-index:0;border-radius:var(--mer-border__width--lg)}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__wrapper{flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--xs);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__caption{color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04)}.top-state-bar__close-wrapper{cursor:pointer;border-inline-start:1px solid var(--mer-color__elevation--04);display:flex;align-items:center;transition:200ms background-color}.top-state-bar__close-wrapper:hover .top-state-bar__close{opacity:0.75}.top-state-bar__close-wrapper:active .top-state-bar__close{opacity:0.5}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--accent .top-state-bar__caption{color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--success .top-state-bar__caption{color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--warning .top-state-bar__caption{color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--error .top-state-bar__caption{color:var(--mer-color__message-red--100)}.top-state-bar--in-progress:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .top-state-bar__close-wrapper{border-inline-start-color:#3fa89b;-webkit-animation:inProgressBorderColor 1s linear infinite;animation:inProgressBorderColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:"";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{color:#3fa89b}.top-state-bar--visible{opacity:1}@-webkit-keyframes inProgressBorderColor{0%{border-inline-start-color:#3fa89b}100%{border-inline-start-color:#5ba7ff}}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar{position:relative}:host([no-border]) .top-state-bar:before,:host([no-border]) .top-state-bar:after{display:none}:host([no-border]) .top-state-bar__close-wrapper{border-inline-start:none}';
-
-const c = class {
-  constructor(t) {
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.evaluateInitialProgress = () => {
-      if (this.progress === undefined && (this.stateType === "error" || this.stateType === "warning" || this.stateType === "success")) {
-        this.progress = 100;
-      } else if (this.progress === undefined && this.stateType === "in-progress") {
-        this.progress = 0;
-      }
-      this.el.style.setProperty("--top-bar-progress", `${this.progress}%`);
-    };
-    this.evaluateWithAction = () => {
-      if (this.withClose === undefined && (this.stateType === "error" || this.stateType === "warning" || this.stateType === "success")) {
-        this.withClose = true;
-      }
-    };
-    this.closeButtonHandler = () => {
-      this.active = false;
-    };
-    e(this, t);
-    this.topStateBarVisible = false;
-    this.visible = false;
-    this.caption = undefined;
-    this.minimal = false;
-    this.active = false;
-    this.stateType = "in-progress";
-    this.progress = undefined;
-    this.withClose = undefined;
-    this.autoClose = false;
-    this.noBorder = false;
-    this.closedCallback = false;
-  }
-  get el() {
-    return i(this);
-  }
-  watchActiveHandler(e) {
-    if (e) {
-      this.visible = true;
-      setTimeout((() => {
-        this.topStateBarVisible = true;
-      }), 300);
-    } else {
-      this.topStateBarVisible = false;
-      setTimeout((() => {
-        this.visible = false;
-      }), 300);
-    }
-  }
-  watchStateTypeHandler() {
-    this.evaluateWithAction();
-  }
-  watchProgressHandler(e) {
-    if (e => 0) {
-      this.el.style.setProperty("--top-bar-progress", `${e}%`);
-    }
-    if (e === 100 && this.autoClose) {
-      setTimeout((() => {
-        this.active = false;
-      }), 200);
-    }
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE EVENTS //
-  componentWillLoad() {
-    this.evaluateWithAction();
-    this.evaluateInitialProgress();
-    if (this.active) {
-      this.visible = true;
-      this.topStateBarVisible = true;
-    }
-  }
-  //  10.RENDER() FUNCTION //
-  render() {
-    return r(s, {
-      class: {
-        visible: this.visible
-      },
-      "aria-hidden": !this.active
-    }, r("div", {
-      role: "status",
-      "aria-labelledby": "label",
-      "aria-hidden": !this.active,
-      class: {
-        "top-state-bar": true,
-        [`top-state-bar--${this.stateType}`]: true,
-        "top-state-bar--with-close": this.withClose,
-        "top-state-bar--visible": this.topStateBarVisible
-      }
-    }, r("div", {
-      class: "top-state-bar__wrapper"
-    }, !this.minimal ? r("label", {
-      id: "label",
-      class: {
-        "top-state-bar__caption": true
-      },
-      part: "label"
-    }, this.caption) : null, r("div", {
-      class: {
-        "top-state-bar__progress-wrapper": true
-      },
-      part: "progress-wrapper"
-    }, r("span", {
-      class: "progress-bar"
-    }))), this.withClose && !this.minimal ? r("div", {
-      class: "top-state-bar__close-wrapper",
-      onClick: this.closeButtonHandler
-    }, r("gxg-icon", {
-      class: {
-        "top-state-bar__close": true
-      },
-      role: "button",
-      "aria-label": "close",
-      type: "gemini-tools/close",
-      color: "mercury-primary",
-      tabIndex: 0
-    })) : null));
-  }
-  static get watchers() {
-    return {
-      active: [ "watchActiveHandler" ],
-      stateType: [ "watchStateTypeHandler" ],
-      progress: [ "watchProgressHandler" ]
-    };
-  }
-};
-
-c.style = l;
-
-export { n as gx_ide_status_buttons, c as gxg_top_state_bar };
-//# sourceMappingURL=p-cf5c3c10.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["gxIdeStatusButtonsCss","GxIdeStatusButtons","this","evaluateIconsSize","compact","iconsSize","evaluateLabel","type","amount","minimal","singular","_componentLocale","selectionChangedHandler","e","stopPropagation","selectionChanged","emit","detail","componentWillLoad","Locale","getComponentStrings","el","render","h","Host","listName","noListBorder","ellipsis","onSelectionChanged","hideError","itemId","itemValue","icon","iconColor","errors","class","error","itemChecked","slot","hideWarning","warnings","warning","hideSuccess","successes","success","hideMessage","messages","message","gxgTopStateBarCss","GxgTopStateBar","constructor","hostRef","evaluateInitialProgress","progress","undefined","stateType","style","setProperty","evaluateWithAction","withClose","closeButtonHandler","active","topStateBarVisible","visible","caption","autoClose","noBorder","closedCallback","watchActiveHandler","setTimeout","watchStateTypeHandler","watchProgressHandler","role","id","part","onClick","color","tabIndex"],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n  display: block;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n  --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n  display: flex;\n  flex-direction: row;\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n  border-block-start: none !important; //reset\n\n  &.not-zero {\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &:not(:last-child) {\n    border-inline-end: 1px solid var(--gx-ide-container-border-color);\n  }\n  flex: 1;\n  text-align: center;\n\n  .label {\n    &__wrapper {\n      display: inline-flex;\n      width: auto;\n      min-height: 0;\n    }\n    &__description {\n      color: var(--status-buttons-label-color);\n      margin-inline-start: var(--mer-spacing--xxs);\n    }\n  }\n\n  /*active indicator*/\n  .active-indicator {\n    display: inline-block;\n    width: var(--mer-spacing--xs);\n    height: var(--mer-spacing--xs);\n    border: 1px solid var(--mer-border-color__dim);\n    border-radius: calc(var(--mer-spacing--xs) / 2);\n    background-color: var(--mer-border-color__dim);\n  }\n  input:checked {\n    + .label {\n      --status-buttons-label-color: var(--mer-text__on-surface);\n      background-color: inherit;\n\n      .active-indicator {\n        background-color: var(--mer-icon__primary);\n        border-color: var(--mer-icon__primary);\n      }\n    }\n  }\n\n  /*hover*/\n  &:hover {\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--hover) !important;\n    }\n  }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n  gx-ide-list-selector-item {\n    font-size: var(--mer-font__size--xxs);\n  }\n  .label__wrapper {\n    gap: var(--mer-spacing--xxs);\n    padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n      var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n  }\n  .label__universal-slot {\n    margin-inline-end: var(--mer-spacing--xxxs);\n  }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-border]) {\n  border: none;\n}\n:host([no-border-top]) {\n  border-top: none;\n}\n:host([no-border-end]) {\n  border-inline-end: none;\n}\n:host([no-border-bottom]) {\n  border-bottom: none;\n}\n:host([no-border-start]) {\n  border-inline-start: none;\n}\n:host([no-inner-borders]) {\n  gx-ide-list-selector-item {\n    border-inline-end: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n  tag: \"gx-ide-status-buttons\",\n  styleUrl: \"gx-ide-status-buttons.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  /**\n   * Whether or not the buttons are active\n   */\n  @Prop() readonly active: boolean = false;\n\n  /**\n   * The errors amount\n   */\n  @Prop() readonly errors: number = 0;\n\n  /**\n   * Hide the errors button\n   */\n  @Prop() readonly hideError: boolean = false;\n\n  /**\n   * The warnings amount\n   */\n  @Prop() readonly warnings: number = 0;\n\n  /**\n   * Hide the warnings button\n   */\n  @Prop() readonly hideWarning: boolean = false;\n\n  /**\n   * The successes amount\n   */\n  @Prop() readonly successes: number = 0;\n\n  /**\n   * Hide the successes button\n   */\n  @Prop() readonly hideSuccess: boolean = false;\n\n  /**\n   * The messages amount\n   */\n  @Prop() readonly messages: number = 0;\n\n  /**\n   * Hide the messages button\n   */\n  @Prop() readonly hideMessage: boolean = false;\n\n  /**\n   * Display only the number\n   */\n  @Prop() readonly minimal: boolean = false;\n\n  /**\n   * If present will make the component look smaller.\n   */\n  @Prop({ reflect: true }) readonly compact: boolean = false;\n\n  /**\n   * No border all around\n   */\n  @Prop({ reflect: true }) readonly noBorder: boolean = false;\n\n  /**\n   * No inner borders\n   */\n  @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n  /**\n   * No border on the top\n   */\n  @Prop({ reflect: true }) readonly noBorderTop: boolean = false;\n\n  /**\n   * No border on the end\n   */\n  @Prop({ reflect: true }) readonly noBorderEnd: boolean = false;\n\n  /**\n   * No border on the bottom\n   */\n  @Prop({ reflect: true }) readonly noBorderBottom: boolean = false;\n\n  /**\n   * No border on the start\n   */\n  @Prop({ reflect: true }) readonly noBorderStart: boolean = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeStatusButtonsElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() iconsSize: Size = \"small\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateIconsSize();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateIconsSize = () => {\n    if (this.compact) {\n      this.iconsSize = \"small\";\n    }\n  };\n\n  private evaluateLabel = (\n    type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n  ): string => {\n    const amount = this[type];\n    if (this.minimal) {\n      return `${amount}`;\n    } else {\n      const singular: boolean = amount === 1;\n      return singular\n        ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n        : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n    }\n  };\n\n  private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n    e.stopPropagation();\n    this.selectionChanged.emit(e.detail);\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gx-ide-list-selector\n          type=\"multi-selection\"\n          listName=\"status-buttons\"\n          noListBorder\n          ellipsis\n          iconsSize={this.iconsSize}\n          onSelectionChanged={this.selectionChangedHandler}\n        >\n          {!this.hideError ? (\n            <gx-ide-list-selector-item\n              itemId=\"errors\"\n              itemValue={this.evaluateLabel(\"errors\")}\n              icon=\"gx-test/result-exception\"\n              iconColor={this.errors === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideWarning ? (\n            <gx-ide-list-selector-item\n              itemId=\"warnings\"\n              itemValue={this.evaluateLabel(\"warnings\")}\n              icon=\"gx-test/result-warning\"\n              iconColor={this.warnings === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideSuccess ? (\n            <gx-ide-list-selector-item\n              itemId=\"successes\"\n              itemValue={this.evaluateLabel(\"successes\")}\n              icon=\"gx-test/result-ok\"\n              iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideMessage ? (\n            <gx-ide-list-selector-item\n              itemId=\"messages\"\n              itemValue={this.evaluateLabel(\"messages\")}\n              icon=\"gx-test/screenshot-viewer\"\n              iconColor={this.messages === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n        </gx-ide-list-selector>\n      </Host>\n    );\n  }\n}\n",":host {\n  --top-bar-progress: 0%;\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: 200ms grid-template-rows;\n}\n:host > * {\n  overflow: hidden;\n}\n\n:host(.visible) {\n  grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n  position: relative;\n  border-radius: var(--mer-border__width--lg);\n  list-style: var(--mer-font__size--xxs);\n  display: flex;\n  opacity: 0;\n  transition: 150ms opacity;\n  /*states*/\n}\n.top-state-bar:before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-color: var(--mer-color__elevation--04);\n  z-index: -1;\n}\n.top-state-bar:after {\n  content: \"\";\n  left: var(--mer-border__width--sm);\n  top: var(--mer-border__width--sm);\n  width: calc(100% - var(--mer-border__width--sm) * 2);\n  height: calc(100% - var(--mer-border__width--sm) * 2);\n  position: absolute;\n  background-color: var(--mer-color__surface);\n  z-index: 0;\n  border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar > * {\n  position: relative;\n  z-index: 1;\n}\n.top-state-bar__wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mer-spacing--xs);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__caption {\n  color: var(--mer-text__on-message);\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--mer-font__size--xxs);\n  line-height: var(--mer-font__size--xxs);\n  font-weight: var(--mer-font__weight--regular);\n  display: flex;\n  align-items: baseline;\n  font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n  height: var(--mer-spacing--xxs);\n  background-color: var(--mer-color__elevation--04);\n}\n.top-state-bar__close-wrapper {\n  cursor: pointer;\n  border-inline-start: 1px solid var(--mer-color__elevation--04);\n  display: flex;\n  align-items: center;\n  transition: 200ms background-color;\n}\n.top-state-bar__close-wrapper:hover .top-state-bar__close {\n  opacity: 0.75;\n}\n.top-state-bar__close-wrapper:active .top-state-bar__close {\n  opacity: 0.5;\n}\n.top-state-bar--accent .progress-bar {\n  background-color: var(--mer-accent__primary);\n}\n.top-state-bar--accent .top-state-bar__caption {\n  color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n  background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--success .top-state-bar__caption {\n  color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n  background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--warning .top-state-bar__caption {\n  color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n  background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--error .top-state-bar__caption {\n  color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress:before {\n  height: 0;\n  width: 120%;\n  padding-top: 60%;\n  padding-bottom: 60%;\n  background: linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n  animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .top-state-bar__close-wrapper {\n  border-inline-start-color: #3fa89b;\n  -webkit-animation: inProgressBorderColor 1s linear infinite;\n  animation: inProgressBorderColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n  content: \"\";\n  position: absolute;\n  z-index: 0;\n  width: 300%;\n  height: 100%;\n  left: 0;\n  background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n  animation-name: inProgressBar;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n  color: #3fa89b;\n}\n.top-state-bar--visible {\n  opacity: 1;\n}\n\n/*in progress animation*/\n@-webkit-keyframes inProgressBorderColor {\n  0% {\n    border-inline-start-color: #3fa89b;\n  }\n  100% {\n    border-inline-start-color: #5ba7ff;\n  }\n}\n@-webkit-keyframes inProgressBackgroundColor {\n  0% {\n    transform: translate(-50%, -50%) rotate(0);\n  }\n  100% {\n    transform: translate(-50%, -50%) rotate(1turn);\n  }\n}\n@-webkit-keyframes inProgressBar {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: -200%;\n  }\n}\n@-moz-keyframes inProgressBar {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: 200%;\n  }\n}\n@keyframes inProgressBar {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: -200%;\n  }\n}\n.progress-bar {\n  display: block;\n  transition: all 200ms;\n  width: var(--top-bar-progress);\n  border-radius: calc(var(--mer-spacing--xxs) / 2);\n  height: 100%;\n}\n\n:host([no-border]) .top-state-bar {\n  position: relative;\n}\n:host([no-border]) .top-state-bar:before, :host([no-border]) .top-state-bar:after {\n  display: none;\n}\n:host([no-border]) .top-state-bar__close-wrapper {\n  border-inline-start: none;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n    constructor() {\n        this.topStateBarVisible = false;\n        this.visible = false;\n        this.caption = undefined;\n        this.minimal = false;\n        this.active = false;\n        this.stateType = \"in-progress\";\n        this.progress = undefined;\n        this.withClose = undefined;\n        this.autoClose = false;\n        this.noBorder = false;\n        this.closedCallback = false;\n    }\n    /*\n  INDEX:\n  1.OWN PROPERTIES\n  2.REFERENCE TO ELEMENTS\n  3.STATE() VARIABLES\n  4.PUBLIC PROPERTY API | WATCH'S\n  5.EVENTS (EMIT)\n  6.COMPONENT LIFECYCLE METHODS\n  7.LISTENERS\n  8.PUBLIC METHODS API\n  9.LOCAL METHODS\n  10.RENDER() FUNCTION\n  */\n    // 1.OWN PROPERTIES //\n    // 2. REFERENCE TO ELEMENTS //\n    el;\n    watchActiveHandler(active) {\n        if (active) {\n            this.visible = true;\n            setTimeout(() => {\n                this.topStateBarVisible = true;\n            }, 300);\n        }\n        else {\n            this.topStateBarVisible = false;\n            setTimeout(() => {\n                this.visible = false;\n            }, 300);\n        }\n    }\n    watchStateTypeHandler() {\n        this.evaluateWithAction();\n    }\n    watchProgressHandler(progress) {\n        if (progress => 0 && progress <= 100) {\n            this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n        }\n        if (progress === 100 && this.autoClose) {\n            setTimeout(() => {\n                this.active = false;\n            }, 200);\n        }\n    }\n    // 5.EVENTS (EMIT) //\n    // 6.COMPONENT LIFECYCLE EVENTS //\n    componentWillLoad() {\n        this.evaluateWithAction();\n        this.evaluateInitialProgress();\n        if (this.active) {\n            this.visible = true;\n            this.topStateBarVisible = true;\n        }\n    }\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    evaluateInitialProgress = () => {\n        if (this.progress === undefined &&\n            (this.stateType === \"error\" ||\n                this.stateType === \"warning\" ||\n                this.stateType === \"success\")) {\n            this.progress = 100;\n        }\n        else if (this.progress === undefined &&\n            this.stateType === \"in-progress\") {\n            this.progress = 0;\n        }\n        this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n    };\n    evaluateWithAction = () => {\n        if (this.withClose === undefined &&\n            (this.stateType === \"error\" ||\n                this.stateType === \"warning\" ||\n                this.stateType === \"success\")) {\n            this.withClose = true;\n        }\n    };\n    closeButtonHandler = () => {\n        this.active = false;\n    };\n    //  10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n                \"top-state-bar\": true,\n                [`top-state-bar--${this.stateType}`]: true,\n                \"top-state-bar--with-close\": this.withClose,\n                \"top-state-bar--visible\": this.topStateBarVisible\n            } }, h(\"div\", { class: \"top-state-bar__wrapper\" }, !this.minimal ? (h(\"label\", { id: \"label\", class: {\n                \"top-state-bar__caption\": true\n            }, part: \"label\" }, this.caption)) : null, h(\"div\", { class: {\n                \"top-state-bar__progress-wrapper\": true\n            }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))), this.withClose && !this.minimal ? (h(\"div\", { class: \"top-state-bar__close-wrapper\", onClick: this.closeButtonHandler }, h(\"gxg-icon\", { class: {\n                \"top-state-bar__close\": true\n            }, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-primary\", tabIndex: 0 }))) : null)));\n    }\n    static get is() { return \"gxg-top-state-bar\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"gxg-top-state-bar.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"gxg-top-state-bar.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"caption\": {\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 top-bar title\"\n                },\n                \"attribute\": \"caption\",\n                \"reflect\": false\n            },\n            \"minimal\": {\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 will only display the bar (no title, no close button)\"\n                },\n                \"attribute\": \"minimal\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"active\": {\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\": \"The top-bar active state. If false it will be hidden\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"stateType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"topStateBarType\",\n                    \"resolved\": \"\\\"accent\\\" | \\\"error\\\" | \\\"in-progress\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"topStateBarType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n                            \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The top-bar title\"\n                },\n                \"attribute\": \"state-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"in-progress\\\"\"\n            },\n            \"progress\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The progress bar progress\"\n                },\n                \"attribute\": \"progress\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"withClose\": {\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 will display a close action button\"\n                },\n                \"attribute\": \"with-close\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"autoClose\": {\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 true, it will auto-close when the progress is 100\"\n                },\n                \"attribute\": \"auto-close\",\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\": \"It removes the border (actually is box shadow)\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"closedCallback\": {\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\": \"A callback that gets called when the top-state-bar is closed\"\n                },\n                \"attribute\": \"closed-callback\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"topStateBarVisible\": {},\n            \"visible\": {}\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"active\",\n                \"methodName\": \"watchActiveHandler\"\n            }, {\n                \"propName\": \"stateType\",\n                \"methodName\": \"watchStateTypeHandler\"\n            }, {\n                \"propName\": \"progress\",\n                \"methodName\": \"watchProgressHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"mappings":";;;;AAAA,MAAMA,IAAwB;;MCsBjBC,IAAkB;;;;;;;QAyIrBC,KAAAC,oBAAoB;MAC1B,IAAID,KAAKE,SAAS;QAChBF,KAAKG,YAAY;;;IAIbH,KAAAI,gBACNC;MAEA,MAAMC,IAASN,KAAKK;MACpB,IAAIL,KAAKO,SAAS;QAChB,OAAO,GAAGD;aACL;QACL,MAAME,IAAoBF,MAAW;QACrC,OAAOE,IACH,GAAGF,KAAUN,KAAKS,iBAAiBJ,GAAM,gBACzC,GAAGC,KAAUN,KAAKS,iBAAiBJ,GAAM;;;IAIzCL,KAAAU,0BAA2BC;MACjCA,EAAEC;MACFZ,KAAKa,iBAAiBC,KAAKH,EAAEI;AAAO;kBAtIH;kBAKD;qBAKI;oBAKF;uBAKI;qBAKH;uBAKG;oBAKJ;uBAKI;mBAKJ;mBAKiB;oBAKC;0BAKM;uBAKH;uBAKA;0BAKG;yBAKD;qBAQhC;;;EAa3B,uBAAMC;IACJhB,KAAKS,yBAAyBQ,EAAOC,oBAAoBlB,KAAKmB;IAC9DnB,KAAKC;;;EAoCP,MAAAmB;IACE,OACEC,EAACC,GAAI,MACHD,EAAA;MACEhB,MAAK;MACLkB,UAAS;MACTC,cAAY;MACZC,UAAQ;MACRtB,WAAWH,KAAKG;MAChBuB,oBAAoB1B,KAAKU;QAEvBV,KAAK2B,YACLN,EAAA;MACEO,QAAO;MACPC,WAAW7B,KAAKI,cAAc;MAC9B0B,MAAK;MACLC,WAAW/B,KAAKgC,WAAW,IAAI,aAAa;MAC5CC,OAAO;QAAEC,OAAS;QAAM,YAAYlC,KAAKgC,WAAW;;MACpDG,aAAW;OAEXd,EAAA;MACEe,MAAK;MACLH,OAAO;QACL,oBAAoB;;UAIxB,OACFjC,KAAKqC,cACLhB,EAAA;MACEO,QAAO;MACPC,WAAW7B,KAAKI,cAAc;MAC9B0B,MAAK;MACLC,WAAW/B,KAAKsC,aAAa,IAAI,aAAa;MAC9CL,OAAO;QAAEM,SAAW;QAAM,YAAYvC,KAAKsC,aAAa;;MACxDH,aAAW;OAEXd,EAAA;MACEe,MAAK;MACLH,OAAO;QACL,oBAAoB;;UAIxB,OACFjC,KAAKwC,cACLnB,EAAA;MACEO,QAAO;MACPC,WAAW7B,KAAKI,cAAc;MAC9B0B,MAAK;MACLC,WAAW/B,KAAKyC,cAAc,IAAI,aAAa;MAC/CR,OAAO;QAAES,SAAW;QAAM,YAAY1C,KAAKyC,cAAc;;MACzDN,aAAW;OAEXd,EAAA;MACEe,MAAK;MACLH,OAAO;QACL,oBAAoB;;UAIxB,OACFjC,KAAK2C,cACLtB,EAAA;MACEO,QAAO;MACPC,WAAW7B,KAAKI,cAAc;MAC9B0B,MAAK;MACLC,WAAW/B,KAAK4C,aAAa,IAAI,aAAa;MAC9CX,OAAO;QAAEY,SAAW;QAAM,YAAY7C,KAAK4C,aAAa;;MACxDT,aAAW;OAEXd,EAAA;MACEe,MAAK;MACLH,OAAO;QACL,oBAAoB;;UAIxB;;;;;;;;;;;;ACxQd,MAAMa,IAAoB;;MCCbC,IAAc;EACvB,WAAAC,CAAAC;;;;IAqEAjD,KAAAkD,0BAA0B;MACtB,IAAIlD,KAAKmD,aAAaC,cACjBpD,KAAKqD,cAAc,WAChBrD,KAAKqD,cAAc,aACnBrD,KAAKqD,cAAc,YAAY;QACnCrD,KAAKmD,WAAW;aAEf,IAAInD,KAAKmD,aAAaC,aACvBpD,KAAKqD,cAAc,eAAe;QAClCrD,KAAKmD,WAAW;;MAEpBnD,KAAKmB,GAAGmC,MAAMC,YAAY,sBAAsB,GAAGvD,KAAKmD;AAAY;IAExEnD,KAAAwD,qBAAqB;MACjB,IAAIxD,KAAKyD,cAAcL,cAClBpD,KAAKqD,cAAc,WAChBrD,KAAKqD,cAAc,aACnBrD,KAAKqD,cAAc,YAAY;QACnCrD,KAAKyD,YAAY;;;IAGzBzD,KAAA0D,qBAAqB;MACjB1D,KAAK2D,SAAS;AAAK;;IA1FnB3D,KAAK4D,qBAAqB;IAC1B5D,KAAK6D,UAAU;IACf7D,KAAK8D,UAAUV;IACfpD,KAAKO,UAAU;IACfP,KAAK2D,SAAS;IACd3D,KAAKqD,YAAY;IACjBrD,KAAKmD,WAAWC;IAChBpD,KAAKyD,YAAYL;IACjBpD,KAAK+D,YAAY;IACjB/D,KAAKgE,WAAW;IAChBhE,KAAKiE,iBAAiB;;;;;EAkB1B,kBAAAC,CAAmBP;IACf,IAAIA,GAAQ;MACR3D,KAAK6D,UAAU;MACfM,YAAW;QACPnE,KAAK4D,qBAAqB;AAAI,UAC/B;WAEF;MACD5D,KAAK4D,qBAAqB;MAC1BO,YAAW;QACPnE,KAAK6D,UAAU;AAAK,UACrB;;;EAGX,qBAAAO;IACIpE,KAAKwD;;EAET,oBAAAa,CAAqBlB;IACjB,IAAIA,KAAY,GAAsB;MAClCnD,KAAKmB,GAAGmC,MAAMC,YAAY,sBAAsB,GAAGJ;;IAEvD,IAAIA,MAAa,OAAOnD,KAAK+D,WAAW;MACpCI,YAAW;QACPnE,KAAK2D,SAAS;AAAK,UACpB;;;;;EAKX,iBAAA3C;IACIhB,KAAKwD;IACLxD,KAAKkD;IACL,IAAIlD,KAAK2D,QAAQ;MACb3D,KAAK6D,UAAU;MACf7D,KAAK4D,qBAAqB;;;;EA+BlC,MAAAxC;IACI,OAAQC,EAAEC,GAAM;MAAEW,OAAO;QAAE4B,SAAS7D,KAAK6D;;MAAW,gBAAgB7D,KAAK2D;OAAUtC,EAAE,OAAO;MAAEiD,MAAM;MAAU,mBAAmB;MAAS,gBAAgBtE,KAAK2D;MAAQ1B,OAAO;QACtK,iBAAiB;QACjB,CAAC,kBAAkBjC,KAAKqD,cAAc;QACtC,6BAA6BrD,KAAKyD;QAClC,0BAA0BzD,KAAK4D;;OAC9BvC,EAAE,OAAO;MAAEY,OAAO;QAA6BjC,KAAKO,UAAWc,EAAE,SAAS;MAAEkD,IAAI;MAAStC,OAAO;QACjG,0BAA0B;;MAC3BuC,MAAM;OAAWxE,KAAK8D,WAAY,MAAMzC,EAAE,OAAO;MAAEY,OAAO;QACzD,mCAAmC;;MACpCuC,MAAM;OAAsBnD,EAAE,QAAQ;MAAEY,OAAO;UAAqBjC,KAAKyD,cAAczD,KAAKO,UAAWc,EAAE,OAAO;MAAEY,OAAO;MAAgCwC,SAASzE,KAAK0D;OAAsBrC,EAAE,YAAY;MAAEY,OAAO;QACnN,wBAAwB;;MACzBqC,MAAM;MAAU,cAAc;MAASjE,MAAM;MAAsBqE,OAAO;MAAmBC,UAAU;UAAS"}

package/dist/genexus-ide-ui/p-d50b5b9a.entry.js

@@ -1,67 +0,0 @@
-import { r as t, c as o, g as r, h as e, H as n } from "./p-48217969.js";
-
-const s = ":host{--ds-background-color-disabled:transparent;--ds-border-color-disabled:transparent;display:block}:host .container{background-color:var(--mer-elevation__background-color--01);border:var(--mer-elevation__border-01);box-shadow:var(--mer-elevation__box-shadow--01);box-shadow:none;display:inline-flex;align-items:center;padding:var(--gxg-buttons-group__padding);box-sizing:border-box;gap:var(--gxg-buttons-group__gap);border-radius:var(--gxg-buttons-group__border-radius);border:1px solid var(--mer-color__elevation__03)}:host .container--reduced{height:calc(var(--gxg-form-text-height) + 2px);--gxg-button-height:100%}:host .container--reduced ::slotted(gxg-button){height:100%}:host ::slotted(.button--unselected){--gxg-button-primary-border-color:transparent;--gxg-button-primary-bg-color:var(\n    --gxg-button-unselected-bg-color--enabled\n  );--gxg-button-primary-color:var(--gxg-button-unselected-color--enabled)}";
-
-const a = class {
-  constructor(r) {
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.setSelectedButton = t => {
-      const o = t.target.tagName;
-      if (o !== "GXG-BUTTON") {
-        //clicked button is disabled
-        return;
-      } else {
-        const o = t.target;
-        if (o.disabled || o.selected) {
-          //button is disabled or is the current selected
-          return;
-        }
-        const r = this.el.children;
-        Array.from(r).forEach((function(t) {
-          if (t.selected) {
-            t.selected = false;
-          }
-        }));
-        o.selected = true;
-        this.selectedButtonChanged.emit(o.id);
-        this.updateSelectedButtonId();
-      }
-    };
-    this.updateSelectedButtonId = () => {
-      const t = this.el.children;
-      const o = Array.from(t).find((t => t.selected && !t.disabled));
-      if (o) {
-        this.selectedButtonId = o.id;
-      }
-    };
-    t(this, r);
-    this.selectedButtonChanged = o(this, "selectedButtonChanged", 7);
-    this.selectedButtonId = undefined;
-    this.reduced = false;
-  }
-  get el() {
-    return r(this);
-  }
-  // 6.COMPONENT LIFECYCLE METHODS //
-  componentDidLoad() {
-    this.updateSelectedButtonId();
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return e(n, null, e("div", {
-      class: {
-        container: true,
-        "container--reduced": this.reduced
-      },
-      ref: t => this.containerEl = t,
-      onClick: this.setSelectedButton
-    }, e("slot", null)));
-  }
-};
-
-a.style = s;
-
-export { a as gxg_buttons_container };
-//# sourceMappingURL=p-d50b5b9a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonsContainerCss","GxgButtonsContainer","constructor","hostRef","this","setSelectedButton","event","tagName","target","clickedButton","disabled","selected","gxgButtonsHtmlCollection","el","children","Array","from","forEach","button","selectedButtonChanged","emit","id","updateSelectedButtonId","selectedButton","find","selectedButtonId","undefined","reduced","componentDidLoad","render","h","Host","class","container","ref","containerEl","onClick"],"sources":["node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.css?tag=gxg-buttons-container&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.js"],"sourcesContent":["/*--- Elevation ---*/\n:host {\n  --ds-background-color-disabled: transparent;\n  --ds-border-color-disabled: transparent;\n  display: block;\n}\n:host .container {\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  box-shadow: none;\n  display: inline-flex;\n  align-items: center;\n  padding: var(--gxg-buttons-group__padding);\n  box-sizing: border-box;\n  gap: var(--gxg-buttons-group__gap);\n  border-radius: var(--gxg-buttons-group__border-radius);\n  border: 1px solid var(--mer-color__elevation__03);\n}\n:host .container--reduced {\n  height: calc(var(--gxg-form-text-height) + 2px);\n  --gxg-button-height: 100%;\n}\n:host .container--reduced ::slotted(gxg-button) {\n  height: 100%;\n}\n:host ::slotted(.button--unselected) {\n  --gxg-button-primary-border-color: transparent;\n  --gxg-button-primary-bg-color: var(\n    --gxg-button-unselected-bg-color--enabled\n  );\n  --gxg-button-primary-color: var(--gxg-button-unselected-color--enabled);\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgButtonsContainer {\n    constructor() {\n        this.selectedButtonId = undefined;\n        this.reduced = false;\n    }\n    el;\n    containerEl;\n    // 2. REFERENCE TO ELEMENTS //\n    // 3.STATE() VARIABLES //\n    // 4.PUBLIC PROPERTY API | WATCH'S //\n    // 5.EVENTS (EMIT) //\n    selectedButtonChanged;\n    // 6.COMPONENT LIFECYCLE METHODS //\n    componentDidLoad() {\n        this.updateSelectedButtonId();\n    }\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    setSelectedButton = (event) => {\n        const tagName = event.target.tagName;\n        if (tagName !== \"GXG-BUTTON\") {\n            //clicked button is disabled\n            return;\n        }\n        else {\n            const clickedButton = event.target;\n            if (clickedButton.disabled || clickedButton.selected) {\n                //button is disabled or is the current selected\n                return;\n            }\n            const gxgButtonsHtmlCollection = this.el.children;\n            Array.from(gxgButtonsHtmlCollection).forEach(function (button) {\n                if (button.selected) {\n                    button.selected = false;\n                }\n            });\n            clickedButton.selected = true;\n            this.selectedButtonChanged.emit(clickedButton.id);\n            this.updateSelectedButtonId();\n        }\n    };\n    updateSelectedButtonId = () => {\n        const gxgButtonsHtmlCollection = this.el.children;\n        const selectedButton = Array.from(gxgButtonsHtmlCollection).find((button) => {\n            return button.selected && !button.disabled;\n        });\n        if (selectedButton) {\n            this.selectedButtonId = selectedButton.id;\n        }\n    };\n    // 10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, null, h(\"div\", { class: { container: true, \"container--reduced\": this.reduced }, ref: el => (this.containerEl = el), onClick: this.setSelectedButton }, h(\"slot\", null))));\n    }\n    static get is() { return \"gxg-buttons-container\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"buttons-container.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"buttons-container.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"selectedButtonId\": {\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 id of the currently selected button, or null if all are disabled\"\n                },\n                \"attribute\": \"selected-button-id\",\n                \"reflect\": false\n            },\n            \"reduced\": {\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\": \"Used to reduce the height when the button-container is next to a form-text\"\n                },\n                \"attribute\": \"reduced\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"selectedButtonChanged\",\n                \"name\": \"selectedButtonChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=buttons-container.js.map\n"],"mappings":";;AAAA,MAAMA,IAAsB;;MCCfC,IAAmB;EAC5B,WAAAC,CAAAC;;;;IAkBAC,KAAAC,oBAAqBC;MACjB,MAAMC,IAAUD,EAAME,OAAOD;MAC7B,IAAIA,MAAY,cAAc;;QAE1B;aAEC;QACD,MAAME,IAAgBH,EAAME;QAC5B,IAAIC,EAAcC,YAAYD,EAAcE,UAAU;;UAElD;;QAEJ,MAAMC,IAA2BR,KAAKS,GAAGC;QACzCC,MAAMC,KAAKJ,GAA0BK,SAAQ,SAAUC;UACnD,IAAIA,EAAOP,UAAU;YACjBO,EAAOP,WAAW;;;QAG1BF,EAAcE,WAAW;QACzBP,KAAKe,sBAAsBC,KAAKX,EAAcY;QAC9CjB,KAAKkB;;;IAGblB,KAAAkB,yBAAyB;MACrB,MAAMV,IAA2BR,KAAKS,GAAGC;MACzC,MAAMS,IAAiBR,MAAMC,KAAKJ,GAA0BY,MAAMN,KACvDA,EAAOP,aAAaO,EAAOR;MAEtC,IAAIa,GAAgB;QAChBnB,KAAKqB,mBAAmBF,EAAeF;;;;;IA9C3CjB,KAAKqB,mBAAmBC;IACxBtB,KAAKuB,UAAU;;;;;;EAUnB,gBAAAC;IACIxB,KAAKkB;;;EAsCT,MAAAO;IACI,OAAQC,EAAEC,GAAM,MAAMD,EAAE,OAAO;MAAEE,OAAO;QAAEC,WAAW;QAAM,sBAAsB7B,KAAKuB;;MAAWO,KAAKrB,KAAOT,KAAK+B,cAActB;MAAKuB,SAAShC,KAAKC;OAAqByB,EAAE,QAAQ"}