@genexus/genexus-ide-ui 0.0.115 → 0.0.117

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

@@ -0,0 +1 @@
+{"version":3,"names":["containerCss","GxIdeContainer","this","headingClasses","heading","inactiveTitle","titleType","noHeadingBorder","hasOnlyHeading","headingJustify","noHeadingPadding","noHeadingPaddingBlockEnd","noHeadingGap","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","formCheckboxCss","GxgFormCheckbox","constructor","hostRef","parts","input","formMessageLogic","attachExportParts","getAttribute","exportPartsResult","exportParts","exportparts","handleGxgLabelClick","checkboxInput","click","focusHandler","blurHandler","renderCheckbox","ref","checked","id","checkboxId","value","disabled","onChange","changed","bind","onKeyUp","handlerOnKeyUp","onFocus","onBlur","tabindex","onClick","handleInputClick","wrapper","indeterminate","hasFocus","iconName","box","label","checkbox","role","icon","labelSize","alignTop","required","validationStatus","validationMessage","informationMessage","tooltip","compontentDidLoad","removeAttribute","checkedHandler","change","emit","event","code","ariaChecked","e","stopPropagation","color","size","large","state","formClasses","commonClassesNames","labelPosition","noMargin","delegatesFocus"],"sources":["src/components/_helpers/container/container.scss?tag=gx-ide-container&encapsulation=shadow","src/components/_helpers/container/container.tsx","node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.css?tag=gxg-form-checkbox&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.js"],"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  &--no-padding-block-end {\n    padding-block-end: 0;\n  }\n  &--no-gap {\n    gap: 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  // 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 heading gap\n   */\n  @Prop() readonly noHeadingGap: boolean = false;\n\n  /**\n   * Removes the padding from the heading\n   */\n  @Prop() readonly noHeadingPadding: boolean = false;\n\n  /**\n   * Removes the padding block end from the heading\n   */\n  @Prop() readonly noHeadingPaddingBlockEnd: 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--no-padding-block-end\": this.noHeadingPaddingBlockEnd,\n      \"heading--no-gap\": this.noHeadingGap,\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\":\n              !this.hasFooterSlot && !this.hasAboveFooterSlot\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","/*! 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/*Warning*/\n:host(.gxg-validation--warning) .form-element {\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus {\n  outline-color: var(--ds-border-color--warning);\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--warning);\n}\n\n/*Error*/\n:host(.gxg-validation--error) .form-element {\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus {\n  outline-color: var(--ds-border-color--error);\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--error);\n}\n\n/*Success*/\n:host(.gxg-validation--success) .form-element {\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus {\n  outline-color: var(--ds-border-color--success);\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--success);\n}\n\n/*Tooltip*/\n.tooltip-outer-wrapper {\n  display: grid;\n  grid-template-columns: 0fr;\n  transition: grid-template-columns var(--timing-02);\n}\n\n:host(.tooltip--visible) .tooltip-outer-wrapper {\n  grid-template-columns: 1fr;\n}\n\n.tooltip-inner-wrapper {\n  --margin-inline-start: 6px;\n  overflow: hidden;\n  transition: 150ms width;\n  width: 0;\n}\n.tooltip-inner-wrapper gxg-icon {\n  display: flex;\n  position: relative !important;\n  top: 0 !important;\n  transform: none !important;\n  margin-inline-start: var(--margin-inline-start);\n  box-sizing: border-box;\n}\n.tooltip-inner-wrapper--visible {\n  width: calc(var(--ds-icon-size-box--small) + var(--margin-inline-start));\n}\n.tooltip-inner-wrapper--hidden {\n  display: none;\n}\n\n:host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:host {\n  display: block;\n  line-height: 0;\n}\n\n.gxg-form-checkbox__wrapper {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n.gxg-form-checkbox__wrapper:hover .wrapper {\n  border-color: var(--gxg-checkbox-border-color--hover);\n}\n\n.wrapper {\n  flex-shrink: 0;\n  border-color: var(--gxg-checkbox-border-color);\n  background-color: var(--gxg-checkbox-background-color);\n  /*additional styles*/\n  width: var(--gxg-checkbox-size);\n  height: var(--gxg-checkbox-size);\n  position: relative;\n  border-width: var(--gxg-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--gxg-checkbox-border-color);\n  border-radius: var(--gxg-checkbox-border-radius);\n}\n.wrapper:after {\n  content: \"\";\n  position: absolute;\n  display: block;\n  border: solid;\n  border-color: transparent;\n  z-index: 0;\n}\n.wrapper--checked:after {\n  left: 5.5px;\n  top: 3px;\n  width: 4px;\n  height: 7px;\n  border-width: 0 2px 2px 0;\n  -webkit-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n  border-color: var(--gxg-checkbox-indicator-color);\n}\n.wrapper--indeterminate:after {\n  left: 50%;\n  top: 50%;\n  width: 8px;\n  height: 1.5px;\n  border: 0;\n  background-color: var(--gxg-checkbox-indicator-color);\n  -webkit-transform: rotate(0) translateY(-50%) translateX(-50%);\n  -ms-transform: rotate(0) translateY(-50%) translateX(-50%);\n  transform: rotate(0) translateY(-50%) translateX(-50%);\n}\n.wrapper--has-icon {\n  margin-inline-end: var(--gxg-checkbox-spacing);\n}\n\n.input {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.input:focus + .wrapper {\n  outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);\n  outline-offset: -1px;\n  outline-offset: 0;\n  outline-offset: -1px;\n}\n\n.label--has-icon {\n  padding-inline-start: var(--gxg-checkbox-spacing);\n}\n\n/*Disabled*/\n:host([disabled]) .gxg-form-checkbox__wrapper,\n:host([disabled]) .input {\n  cursor: initial;\n}\n:host([disabled]) .wrapper {\n  border-color: var(--ds-border-color-disabled);\n  background-color: var(--gxg-checkbox-disabled-background-color);\n}\n\n/*********************************************\nVALIDATION\n**********************************************/\n.messages-wrapper {\n  margin-top: var(--spacing-comp-02);\n  display: flex;\n  gap: var(--spacing-comp-01);\n  flex-direction: column;\n}","import { Host, h } from \"@stencil/core\";\nimport { formMessageLogic } from \"../../common/form\";\nimport { formClasses } from \"../../common/classesNames\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport state from \"../store\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgFormCheckbox {\n    constructor() {\n        this.checkboxId = undefined;\n        this.checked = false;\n        this.indeterminate = false;\n        this.disabled = false;\n        this.label = undefined;\n        this.labelSize = \"regular\";\n        this.value = undefined;\n        this.name = undefined;\n        this.iconName = undefined;\n        this.alignTop = false;\n        this.hasFocus = false;\n        this.required = false;\n        this.validationStatus = \"indeterminate\";\n        this.validationMessage = undefined;\n        this.informationMessage = undefined;\n        this.tooltip = undefined;\n    }\n    parts = {\n        input: \"input\"\n    };\n    exportparts;\n    el;\n    //A reference to the input\n    checkboxInput;\n    change;\n    /**\n     * The logic for displaying or hidding the validation messages\n     *\n     */\n    formMessageLogic = formMessageLogic;\n    /*********************************\n    METHODS\n    *********************************/\n    componentWillLoad() {\n        this.attachExportParts();\n    }\n    attachExportParts = () => {\n        const part = this.el.getAttribute(\"part\");\n        const exportPartsResult = exportParts(part, this.parts);\n        exportPartsResult.length && (this.exportparts = exportPartsResult);\n    };\n    compontentDidLoad() {\n        if (this.checked && this.disabled) {\n            this.checked = false;\n            this.checkboxInput.removeAttribute(\"checked\");\n        }\n    }\n    changed() {\n        this.checked = this.checkboxInput.checked;\n    }\n    checkedHandler() {\n        this.change.emit({\n            id: this.checkboxId,\n            value: this.checked,\n            disabled: this.disabled\n        });\n    }\n    handlerOnKeyUp(event) {\n        if (event.code == \"Space\") {\n            this.checked = !this.checked;\n        }\n    }\n    handleGxgLabelClick = () => {\n        this.checkboxInput.click();\n    };\n    ariaChecked() {\n        if (this.checked) {\n            return \"true\";\n        }\n        else {\n            return \"false\";\n        }\n    }\n    handleInputClick(e) {\n        e.stopPropagation();\n    }\n    icon() {\n        if (this.iconName) {\n            return (h(\"gxg-icon\", { type: this.iconName, color: \"auto\", size: \"small\" }));\n        }\n    }\n    focusHandler = () => {\n        //this.hasFocus = true;\n    };\n    blurHandler = () => {\n        //this.hasFocus = false;\n    };\n    renderCheckbox = () => {\n        return [\n            h(\"input\", { ref: el => (this.checkboxInput = el), type: \"checkbox\", checked: this.checked, class: \"input\", id: this.checkboxId, name: this.name, value: this.value, disabled: this.disabled, onChange: this.changed.bind(this), onKeyUp: this.handlerOnKeyUp.bind(this), onFocus: this.focusHandler, onBlur: this.blurHandler, tabindex: \"0\", onClick: this.handleInputClick, part: this.parts.input }),\n            h(\"div\", { class: {\n                    wrapper: true,\n                    \"wrapper--checked\": this.checked,\n                    \"wrapper--indeterminate\": this.indeterminate,\n                    \"wrapper--focus\": this.hasFocus,\n                    \"wrapper--has-icon\": !!this.iconName\n                } }),\n            h(\"span\", { part: \"box\", class: {\n                    box: true,\n                    \"no-label\": !this.label,\n                    \"has-icon\": !!this.iconName,\n                    \"form-element\": true,\n                    indeterminate: this.indeterminate,\n                    checkbox: true\n                }, role: \"checkbox\" }),\n            this.icon()\n        ];\n    };\n    render() {\n        return (h(Host, { role: \"checkbox\", value: this.value, \"aria-checked\": this.ariaChecked, \"aria-label\": this.label, class: {\n                large: state.large,\n                [formClasses[\"VALIDATION_INDETERMINATE_CLASS\"]]: this.validationStatus === \"indeterminate\",\n                [formClasses[\"VALIDATION_WARNING_CLASS\"]]: this.validationStatus === \"warning\",\n                [formClasses[\"VALIDATION_ERROR_CLASS\"]]: this.validationStatus === \"error\",\n                [formClasses[\"VALIDATION_SUCCESS_CLASS\"]]: this.validationStatus === \"success\",\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            }, exportParts: this.exportparts ? this.exportparts : null }, h(\"div\", { class: {\n                \"gxg-form-checkbox__wrapper\": true,\n                \"gxg-form-checkbox__wrapper--align-top\": this.alignTop\n            }, onClick: this.handleGxgLabelClick }, this.label\n            ? [\n                this.renderCheckbox(),\n                h(\"gxg-label\", { class: {\n                        label: true,\n                        \"label--has-icon\": !!this.iconName\n                    }, disabled: this.disabled, labelPosition: \"end\", tooltip: this.tooltip, noMargin: !!this.iconName, size: this.labelSize }, this.label)\n            ]\n            : this.renderCheckbox()), this.formMessageLogic(this)));\n    }\n    static get is() { return \"gxg-form-checkbox\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get delegatesFocus() { return true; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"form-checkbox.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"form-checkbox.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"checkboxId\": {\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 checkbox id\"\n                },\n                \"attribute\": \"checkbox-id\",\n                \"reflect\": false\n            },\n            \"checked\": {\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 presence of this attribute makes the checkbox checked by default\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"indeterminate\": {\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 presence of this attribute makes the checkbox indeterminate\"\n                },\n                \"attribute\": \"indeterminate\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\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 presence of this attribute disables the checkbox\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"label\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | undefined\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The checkbox label\"\n                },\n                \"attribute\": \"label\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"labelSize\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"size\",\n                    \"resolved\": \"\\\"large\\\" | \\\"regular\\\"\",\n                    \"references\": {\n                        \"size\": {\n                            \"location\": \"import\",\n                            \"path\": \"../label/gxg-label\",\n                            \"id\": \"src/components/label/gxg-label.tsx::size\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The checkbox label size\"\n                },\n                \"attribute\": \"label-size\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"regular\\\"\"\n            },\n            \"value\": {\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 checkbox value\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false\n            },\n            \"name\": {\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 checkbox name\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false\n            },\n            \"iconName\": {\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 checkbox icon\"\n                },\n                \"attribute\": \"icon-name\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"alignTop\": {\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\": \"Aligns the checkbox to the top of the label (useful when the label is too long)\"\n                },\n                \"attribute\": \"align-top\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"required\": {\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 presence of this attribute makes the commbo required\"\n                },\n                \"attribute\": \"required\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"ValidationStatus\",\n                    \"resolved\": \"\\\"error\\\" | \\\"indeterminate\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"ValidationStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../common/types\",\n                            \"id\": \"src/common/types.ts::ValidationStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status\"\n                },\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"indeterminate\\\"\"\n            },\n            \"validationMessage\": {\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 message to display when validation fails (error)\"\n                },\n                \"attribute\": \"validation-message\",\n                \"reflect\": false\n            },\n            \"informationMessage\": {\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 informative message to help the user filling the information\"\n                },\n                \"attribute\": \"information-message\",\n                \"reflect\": false\n            },\n            \"tooltip\": {\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\": \"\"\n                },\n                \"attribute\": \"tooltip\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasFocus\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"change\",\n                \"name\": \"change\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"CheckboxInfo\",\n                    \"resolved\": \"{ id: string; value: boolean; disabled?: boolean; }\",\n                    \"references\": {\n                        \"CheckboxInfo\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/form-checkbox/form-checkbox.tsx\",\n                            \"id\": \"src/components/form-checkbox/form-checkbox.tsx::CheckboxInfo\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"checked\",\n                \"methodName\": \"checkedHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=form-checkbox.js.map\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-874d336e.entry.js

@@ -0,0 +1,232 @@
+import { r as t, c as e, h as r, H as o, g as a } from "./p-48217969.js";
+
+import { L as i } from "./p-74d59062.js";
+
+import { c as s } from "./p-9c1b4eb9.js";
+
+const l = ":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)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}p{margin:0}:host{display:block}.roles__container{display:grid;height:100%;box-sizing:border-box;grid-template-columns:1fr 1fr;gap:var(--gx-ide-form-items-gap)}.roles__role{display:grid;grid-template-rows:auto 1fr;overflow:auto}.roles__list{display:flex;flex-direction:column;height:100%;overflow:auto}.roles__list-header{display:grid;grid-template-rows:auto 1fr;gap:var(--mer-spacing--xs)}.roles__list-title{background-color:var(--mer-color__elevation--01);display:flex;align-items:center;justify-content:center}.add-remove-buttons{display:flex;justify-content:space-between}";
+
+const n = class {
+  constructor(o) {
+    t(this, o);
+    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
+    this.renderedFirstTime = false;
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+        this.confirmCallbackHandler = () => {
+      this.confirmCallback(this.assignedRolesState);
+    };
+    this.cancelCallbackHandler = () => {
+      this.cancelCallback();
+    };
+    this.handleAssignedCheckedChange = t => {
+      this.assignedSelected = t.detail[0] && t.detail[0].checked === true;
+    };
+    this.handleUnassignedCheckedChange = t => {
+      this.unassignedSelected = t.detail[0] && t.detail[0].checked === true;
+    };
+    this.handleUnassignedInput = t => {
+      this.filterUnassignedInput = t.detail;
+    };
+    this.handleAssignedInput = t => {
+      this.filterAssignedInput = t.detail;
+    };
+    this.getCheckedItems = t => {
+      const e = [];
+      const r = t.querySelectorAll("gxg-list-box-item");
+      r.forEach((t => {
+        if (t.checked) {
+          e.push(t.value);
+        }
+      }));
+      return e;
+    };
+    this.addAll = () => {
+      this.assignedRolesState = [ ...this.assignedRolesState, ...this.unassignedRolesState ];
+      this.unassignedRolesState = [];
+    };
+    this.addSelectedRoles = () => {
+      const t = this.getCheckedItems(this.unassignedRolesEL);
+      if (t.length) {
+        this.unassignedRolesState = this.unassignedRolesState.filter((e => !t.includes(e)));
+        this.assignedRolesState = [ ...this.assignedRolesState, ...t ];
+        this.unassignedSelected = false;
+      }
+    };
+    this.removeAll = () => {
+      this.unassignedRolesState = [ ...this.unassignedRolesState, ...this.assignedRolesState ];
+      this.assignedRolesState = [];
+    };
+    this.removeSelectedRoles = () => {
+      const t = this.getCheckedItems(this.assignedRolesEl);
+      if (t.length) {
+        this.assignedRolesState = this.assignedRolesState.filter((e => !t.includes(e)));
+        this.unassignedRolesState = [ ...this.unassignedRolesState, ...t ];
+        this.assignedSelected = false;
+      }
+    };
+    this.renderRolesToAdd = () => r("div", {
+      class: "roles__list"
+    }, r("gxg-list-box", {
+      checkboxes: true,
+      disabled: false,
+      part: "add-roles-selection",
+      onCheckedChanged: this.handleUnassignedCheckedChange,
+      ref: t => this.unassignedRolesEL = t,
+      noBorder: true,
+      borderBottom: true,
+      borderStart: true,
+      borderEnd: true
+    }, this.unassignedRolesState.filter((t => this.filterUnassignedInput.toLowerCase() === "" || t.toLowerCase().includes(this.filterUnassignedInput.toLowerCase()))).map((t => r("gxg-list-box-item", {
+      value: t,
+      checkbox: true,
+      key: `${t}-${this.assignedRolesState.includes(t) ? "assigned" : "unassigned"}`
+    }, t)))));
+    this.renderRolesToRemove = () => r("div", {
+      class: "roles__list"
+    }, r("gxg-list-box", {
+      checkboxes: true,
+      disabled: false,
+      part: "remove-roles-selection",
+      onCheckedChanged: this.handleAssignedCheckedChange,
+      ref: t => this.assignedRolesEl = t,
+      noBorder: true,
+      borderBottom: true,
+      borderStart: true,
+      borderEnd: true
+    }, this.assignedRolesState.filter((t => this.filterAssignedInput.toLowerCase() === "" || t.toLowerCase().includes(this.filterAssignedInput.toLowerCase()))).map((t => r("gxg-list-box-item", {
+      value: t,
+      checkbox: true,
+      key: `${t}-${this.assignedRolesState.includes(t) ? "assigned" : "unassigned"}`
+    }, t)))));
+    this.unassignedRolesState = [];
+    this.assignedRolesState = [];
+    this.filterUnassignedInput = "";
+    this.filterAssignedInput = "";
+    this.unassignedSelected = false;
+    this.assignedSelected = false;
+    this.displayTitle = false;
+    this.roles = undefined;
+    this.assignedRoles = undefined;
+    this.confirmCallback = undefined;
+    this.cancelCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await i.getComponentStrings(this.el);
+    this.unassignedRolesState = this.roles.filter((t => !this.assignedRoles.includes(t)));
+    this.assignedRolesState = this.assignedRoles;
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return r(o, {
+      class: "gx-ide-component"
+    }, r("div", {
+      class: "gx-ide-main-wrapper"
+    }, r("gx-ide-container", {
+      noAboveFooterPadding: true,
+      containerTitle: this.displayTitle ? this._componentLocale.componentName : null,
+      slimmerFooter: s.gxIdeContainer.slimmerFooter
+    }, r("div", {
+      class: "roles__container"
+    }, r("section", {
+      class: "roles__role"
+    }, r("header", {
+      class: "roles__list-header"
+    }, r("gxg-form-text", {
+      label: this._componentLocale.main.assignRoles.searchRoles,
+      placeholder: this._componentLocale.main.assignRoles.placeholder,
+      labelPosition: "above",
+      clearButton: true,
+      part: "add-roles-filter",
+      class: {
+        "add-roles-filter": true
+      },
+      onInput: this.handleUnassignedInput
+    }), r("div", {
+      class: "roles__list-title"
+    }, r("gxg-title", {
+      type: "title-04"
+    }, this._componentLocale.main.assignRoles.title), r("gxg-icon", {
+      type: "navigation/chevron-right",
+      color: "mercury-neutral"
+    }))), this.renderRolesToAdd()), r("section", {
+      class: "roles__role"
+    }, r("header", {
+      class: "roles__list-header"
+    }, r("gxg-form-text", {
+      label: this._componentLocale.main.removeRoles.searchRoles,
+      placeholder: this._componentLocale.main.removeRoles.placeholder,
+      labelPosition: "above",
+      clearButton: true,
+      part: "remove-roles-filter",
+      class: {
+        "remove-roles-filter": true
+      },
+      onInput: this.handleAssignedInput
+    }), r("div", {
+      class: "roles__list-title"
+    }, r("gxg-icon", {
+      type: "navigation/chevron-left",
+      color: "mercury-neutral"
+    }), r("gxg-title", {
+      type: "title-04"
+    }, this._componentLocale.main.removeRoles.title))), this.renderRolesToRemove())), r("footer", {
+      class: "add-remove-buttons",
+      slot: "footer-above"
+    }, r("footer", {
+      class: "add-remove-buttons__add"
+    }, r("gxg-button", {
+      id: "add-all",
+      part: "add-all-roles-btn",
+      onClick: this.addAll,
+      disabled: this.unassignedRolesState.length === 0,
+      type: "secondary-text-only"
+    }, this._componentLocale.main.assignRoles.addAllButton), r("gxg-button", {
+      id: "add-selected",
+      part: "add-selected-roles-btn",
+      onClick: this.addSelectedRoles,
+      disabled: !this.unassignedSelected || !this.unassignedRolesState.length,
+      type: "secondary-text-only"
+    }, this._componentLocale.main.assignRoles.addSelectedButton)), r("footer", {
+      class: "add-remove-buttons__remove"
+    }, r("gxg-button", {
+      id: "add-all",
+      part: "remove-all-roles-btn",
+      onClick: this.removeAll,
+      disabled: this.assignedRolesState.length === 0,
+      type: "secondary-text-only"
+    }, this._componentLocale.main.removeRoles.removeAllButton), r("gxg-button", {
+      id: "add-selected",
+      part: "remove-selected-roles-btn",
+      onClick: this.removeSelectedRoles,
+      disabled: !this.assignedSelected || !this.assignedRolesState.length,
+      type: "secondary-text-only"
+    }, this._componentLocale.main.removeRoles.removeSelectedButton))), r("gxg-button", {
+      type: "outlined",
+      slot: "footer-end",
+      onClick: this.cancelCallbackHandler
+    }, this._componentLocale.footer.cancelButton), r("gxg-button", {
+      slot: "footer-end",
+      onClick: this.confirmCallbackHandler
+    }, this._componentLocale.footer.confirmButton))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/bpm-assign-roles" ];
+  }
+  get el() {
+    return a(this);
+  }
+};
+
+n.style = l;
+
+export { n as gx_ide_bpm_assign_roles };
+//# sourceMappingURL=p-874d336e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["assignRolesCss","GxIdeBpmAssignRoles","this","renderedFirstTime","confirmCallbackHandler","confirmCallback","assignedRolesState","cancelCallbackHandler","cancelCallback","handleAssignedCheckedChange","e","assignedSelected","detail","checked","handleUnassignedCheckedChange","unassignedSelected","handleUnassignedInput","filterUnassignedInput","handleAssignedInput","filterAssignedInput","getCheckedItems","listBox","checkedItems","listBoxItems","querySelectorAll","forEach","item","push","value","addAll","unassignedRolesState","addSelectedRoles","unassignedRolesEL","length","filter","role","includes","removeAll","removeSelectedRoles","assignedRolesEl","renderRolesToAdd","h","class","checkboxes","disabled","part","onCheckedChanged","ref","el","noBorder","borderBottom","borderStart","borderEnd","toLowerCase","map","checkbox","key","renderRolesToRemove","componentWillLoad","_componentLocale","Locale","getComponentStrings","roles","assignedRoles","componentDidRender","componentDidRenderFirstTime","emit","componentName","render","Host","noAboveFooterPadding","containerTitle","displayTitle","slimmerFooter","config","gxIdeContainer","label","main","assignRoles","searchRoles","placeholder","labelPosition","clearButton","onInput","type","title","color","removeRoles","slot","id","onClick","addAllButton","addSelectedButton","removeAllButton","removeSelectedButton","footer","cancelButton","confirmButton"],"sources":["src/components/bpm/assign-roles/assign-roles.scss?tag=gx-ide-bpm-assign-roles&encapsulation=shadow","src/components/bpm/assign-roles/assign-roles.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n}\n\n.roles {\n  &__container {\n    display: grid;\n    height: 100%;\n    box-sizing: border-box;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--gx-ide-form-items-gap);\n  }\n  &__role {\n    display: grid;\n    grid-template-rows: auto 1fr;\n    overflow: auto;\n  }\n  &__list {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: auto;\n  }\n  &__list-header {\n    display: grid;\n    grid-template-rows: auto 1fr;\n    gap: var(--mer-spacing--xs);\n  }\n  &__list-title {\n    background-color: var(--mer-color__elevation--01);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.add-remove-buttons {\n  display: flex;\n  justify-content: space-between;\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\n\n@Component({\n  tag: \"gx-ide-bpm-assign-roles\",\n  styleUrl: \"assign-roles.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-assign-roles\"]\n})\nexport class GxIdeBpmAssignRoles {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmAssignRolesElement;\n  private unassignedRolesEL: HTMLGxgListBoxElement;\n  private assignedRolesEl: HTMLGxgListBoxElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() unassignedRolesState: string[] = [];\n  @State() assignedRolesState: string[] = [];\n  @State() filterUnassignedInput = \"\";\n  @State() filterAssignedInput = \"\";\n  @State() unassignedSelected = false;\n  @State() assignedSelected = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Array with all available roles\n   */\n  @Prop() readonly roles: string[];\n\n  /**\n   * Array with currently assigned roles\n   */\n  @Prop() readonly assignedRoles: string[];\n\n  /**\n   * Callback invoked when user confirms assignation\n   */\n  @Prop() readonly confirmCallback: ConfirmCallback;\n\n  /**\n   * Callback invoked when user cancels assignation\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.unassignedRolesState = this.roles.filter(\n      role => !this.assignedRoles.includes(role)\n    );\n    this.assignedRolesState = this.assignedRoles;\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private confirmCallbackHandler = () => {\n    this.confirmCallback(this.assignedRolesState);\n  };\n\n  private cancelCallbackHandler = () => {\n    this.cancelCallback();\n  };\n\n  private handleAssignedCheckedChange = (e: any) => {\n    this.assignedSelected = e.detail[0] && e.detail[0].checked === true;\n  };\n\n  private handleUnassignedCheckedChange = (e: any) => {\n    this.unassignedSelected = e.detail[0] && e.detail[0].checked === true;\n  };\n\n  private handleUnassignedInput = (e: any) => {\n    this.filterUnassignedInput = e.detail;\n  };\n\n  private handleAssignedInput = (e: any) => {\n    this.filterAssignedInput = e.detail;\n  };\n  private getCheckedItems = (listBox: any) => {\n    const checkedItems: string[] = [];\n    const listBoxItems = listBox.querySelectorAll(\"gxg-list-box-item\");\n\n    listBoxItems.forEach((item: any) => {\n      if (item.checked) {\n        checkedItems.push(item.value);\n      }\n    });\n\n    return checkedItems;\n  };\n\n  private addAll = () => {\n    this.assignedRolesState = [\n      ...this.assignedRolesState,\n      ...this.unassignedRolesState\n    ];\n    this.unassignedRolesState = [];\n  };\n\n  private addSelectedRoles = () => {\n    const checkedItems = this.getCheckedItems(this.unassignedRolesEL);\n    if (checkedItems.length) {\n      this.unassignedRolesState = this.unassignedRolesState.filter(\n        role => !checkedItems.includes(role)\n      );\n      this.assignedRolesState = [...this.assignedRolesState, ...checkedItems];\n      this.unassignedSelected = false;\n    }\n  };\n\n  private removeAll = () => {\n    this.unassignedRolesState = [\n      ...this.unassignedRolesState,\n      ...this.assignedRolesState\n    ];\n    this.assignedRolesState = [];\n  };\n\n  private removeSelectedRoles = () => {\n    const checkedItems = this.getCheckedItems(this.assignedRolesEl);\n\n    if (checkedItems.length) {\n      this.assignedRolesState = this.assignedRolesState.filter(role => {\n        return !checkedItems.includes(role);\n      });\n      this.unassignedRolesState = [\n        ...this.unassignedRolesState,\n        ...checkedItems\n      ];\n      this.assignedSelected = false;\n    }\n  };\n\n  private renderRolesToAdd = () => {\n    return (\n      <div class=\"roles__list\">\n        <gxg-list-box\n          checkboxes\n          disabled={false}\n          part=\"add-roles-selection\"\n          onCheckedChanged={this.handleUnassignedCheckedChange}\n          ref={(el: HTMLGxgListBoxElement) =>\n            (this.unassignedRolesEL = el as HTMLGxgListBoxElement)\n          }\n          noBorder\n          borderBottom\n          borderStart\n          borderEnd\n        >\n          {this.unassignedRolesState\n            .filter(\n              role =>\n                this.filterUnassignedInput.toLowerCase() === \"\" ||\n                role\n                  .toLowerCase()\n                  .includes(this.filterUnassignedInput.toLowerCase())\n            )\n            .map(role => (\n              <gxg-list-box-item\n                value={role}\n                checkbox\n                key={`${role}-${\n                  this.assignedRolesState.includes(role)\n                    ? \"assigned\"\n                    : \"unassigned\"\n                }`}\n              >\n                {role}\n              </gxg-list-box-item>\n            ))}\n        </gxg-list-box>\n      </div>\n    );\n  };\n  private renderRolesToRemove = () => {\n    return (\n      <div class=\"roles__list\">\n        <gxg-list-box\n          checkboxes\n          disabled={false}\n          part=\"remove-roles-selection\"\n          onCheckedChanged={this.handleAssignedCheckedChange}\n          ref={(el: HTMLGxgListBoxElement) =>\n            (this.assignedRolesEl = el as HTMLGxgListBoxElement)\n          }\n          noBorder\n          borderBottom\n          borderStart\n          borderEnd\n        >\n          {this.assignedRolesState\n            .filter(\n              role =>\n                this.filterAssignedInput.toLowerCase() === \"\" ||\n                role\n                  .toLowerCase()\n                  .includes(this.filterAssignedInput.toLowerCase())\n            )\n            .map(role => (\n              <gxg-list-box-item\n                value={role}\n                checkbox\n                key={`${role}-${\n                  this.assignedRolesState.includes(role)\n                    ? \"assigned\"\n                    : \"unassigned\"\n                }`}\n              >\n                {role}\n              </gxg-list-box-item>\n            ))}\n        </gxg-list-box>\n      </div>\n    );\n  };\n\n  // 10.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            noAboveFooterPadding\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"roles__container\">\n              {/* add roles section */}\n              <section class=\"roles__role\">\n                {/* roles to add listbox*/}\n                <header class=\"roles__list-header\">\n                  {/* roles to add filter*/}\n                  <gxg-form-text\n                    label={this._componentLocale.main.assignRoles.searchRoles}\n                    placeholder={\n                      this._componentLocale.main.assignRoles.placeholder\n                    }\n                    labelPosition=\"above\"\n                    clearButton\n                    part=\"add-roles-filter\"\n                    class={{ \"add-roles-filter\": true }}\n                    onInput={this.handleUnassignedInput}\n                  ></gxg-form-text>\n                  <div class=\"roles__list-title\">\n                    <gxg-title type=\"title-04\">\n                      {this._componentLocale.main.assignRoles.title}\n                    </gxg-title>\n                    <gxg-icon\n                      type=\"navigation/chevron-right\"\n                      color=\"mercury-neutral\"\n                    ></gxg-icon>\n                  </div>\n                </header>\n                {this.renderRolesToAdd()}\n              </section>\n\n              {/* remove roles section */}\n              <section class=\"roles__role\">\n                <header class=\"roles__list-header\">\n                  {/* roles to remove filter*/}\n                  <gxg-form-text\n                    label={this._componentLocale.main.removeRoles.searchRoles}\n                    placeholder={\n                      this._componentLocale.main.removeRoles.placeholder\n                    }\n                    labelPosition=\"above\"\n                    clearButton\n                    part=\"remove-roles-filter\"\n                    class={{ \"remove-roles-filter\": true }}\n                    onInput={this.handleAssignedInput}\n                  ></gxg-form-text>\n                  <div class=\"roles__list-title\">\n                    <gxg-icon\n                      type=\"navigation/chevron-left\"\n                      color=\"mercury-neutral\"\n                    ></gxg-icon>\n                    <gxg-title type=\"title-04\">\n                      {this._componentLocale.main.removeRoles.title}\n                    </gxg-title>\n                  </div>\n                </header>\n                {/* roles to remove listbox*/}\n                {this.renderRolesToRemove()}\n              </section>\n            </div>\n\n            <footer class=\"add-remove-buttons\" slot=\"footer-above\">\n              <footer class=\"add-remove-buttons__add\">\n                <gxg-button\n                  id=\"add-all\"\n                  part=\"add-all-roles-btn\"\n                  onClick={this.addAll}\n                  disabled={this.unassignedRolesState.length === 0}\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.assignRoles.addAllButton}\n                </gxg-button>\n                <gxg-button\n                  id=\"add-selected\"\n                  part=\"add-selected-roles-btn\"\n                  onClick={this.addSelectedRoles}\n                  disabled={\n                    !this.unassignedSelected ||\n                    !this.unassignedRolesState.length\n                  }\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.assignRoles.addSelectedButton}\n                </gxg-button>\n              </footer>\n              <footer class=\"add-remove-buttons__remove\">\n                <gxg-button\n                  id=\"add-all\"\n                  part=\"remove-all-roles-btn\"\n                  onClick={this.removeAll}\n                  disabled={this.assignedRolesState.length === 0}\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.removeRoles.removeAllButton}\n                </gxg-button>\n                <gxg-button\n                  id=\"add-selected\"\n                  part=\"remove-selected-roles-btn\"\n                  onClick={this.removeSelectedRoles}\n                  disabled={\n                    !this.assignedSelected || !this.assignedRolesState.length\n                  }\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.removeRoles.removeSelectedButton}\n                </gxg-button>\n              </footer>\n            </footer>\n\n            {/* cancel button*/}\n            <gxg-button\n              type=\"outlined\"\n              slot=\"footer-end\"\n              onClick={this.cancelCallbackHandler}\n            >\n              {this._componentLocale.footer.cancelButton}\n            </gxg-button>\n            {/* apply button*/}\n            <gxg-button slot=\"footer-end\" onClick={this.confirmCallbackHandler}>\n              {this._componentLocale.footer.confirmButton}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type ConfirmCallback = (assignedRoles: string[]) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n"],"mappings":"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"}