@genexus/genexus-ide-ui 1.0.18 → 1.0.20

package/dist/components/gx-ide-status-buttons2.js.map

@@ -1 +1 @@
-{"file":"gx-ide-status-buttons2.js","mappings":"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","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n  display: block;\n  border-radius: var(--ds-form-control-border-radius);\n  --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n  display: flex;\n  flex-direction: row;\n  background-color: transparent;\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n  border-block-start: none !important; //reset\n\n  &:not(:last-child) {\n    border-inline-end: 1px solid var(--gx-ide-container-border-color);\n  }\n  flex: 1;\n  text-align: center;\n\n  .label {\n    &__wrapper {\n      display: inline-flex;\n      width: auto;\n      min-height: 0;\n    }\n    &__description {\n      color: var(--status-buttons-label-color);\n      margin-inline-start: var(--mer-spacing--2xs);\n      text-transform: capitalize;\n    }\n  }\n\n  /*active indicator*/\n  .active-indicator {\n    display: inline-block;\n    width: var(--mer-spacing--2xs);\n    height: var(--mer-spacing--2xs);\n    border: 1px solid var(--mer-border-color__dim);\n    border-radius: calc(var(--mer-spacing--xs) / 2);\n    background-color: var(--mer-border-color__dim);\n  }\n\n  /*States*/\n  &.error.not-zero {\n    .active-indicator {\n      background-color: var(--mer-border-color__error);\n      border-color: var(--mer-border-color__error);\n    }\n  }\n  &.warning.not-zero {\n    .active-indicator {\n      background-color: var(--mer-border-color__warning);\n      border-color: var(--mer-border-color__warning);\n    }\n  }\n  &.success.not-zero {\n    .active-indicator {\n      background-color: var(--mer-border-color__success);\n      border-color: var(--mer-border-color__success);\n    }\n  }\n  &.message.not-zero {\n    .active-indicator {\n      background-color: var(--mer-border-color__primary);\n      border-color: var(--mer-border-color__primary);\n    }\n  }\n\n  input {\n    &:after {\n      display: none;\n    }\n  }\n  input:checked {\n    + .label {\n      --status-buttons-label-color: var(--mer-text__on-surface);\n      background-color: inherit;\n\n      .label__wrapper {\n        &:before {\n          display: block;\n        }\n      }\n    }\n  }\n\n  /*hover*/\n  &:hover {\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--hover) !important;\n    }\n  }\n\n  .label__wrapper {\n    position: relative;\n    &:before {\n      content: \"\";\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      border-style: solid;\n      position: absolute;\n      left: auto;\n      top: 12px;\n      right: 14px;\n      display: none;\n    }\n    &:after {\n      content: \"\";\n      width: var(--gxg-checkbox-size);\n      height: var(--gxg-checkbox-size);\n      border: 1px solid var(--gxg-checkbox-border-color);\n      border-radius: var(--gxg-checkbox-border-radius);\n    }\n  }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n  gx-ide-list-selector-item {\n    font-size: var(--mer-font__size--2xs);\n  }\n  .label__wrapper {\n    padding: var(--mer-spacing--3xs) var(--mer-spacing--xs)\n      var(--mer-spacing--3xs) var(--mer-spacing--2xs);\n    &:before {\n      top: 10px;\n    }\n  }\n  .label__universal-slot {\n    margin-inline-end: var(--mer-spacing--3xs);\n  }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-inner-borders]) {\n  gx-ide-list-selector-item {\n    border-inline-end: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n  tag: \"gx-ide-status-buttons\",\n  styleUrl: \"gx-ide-status-buttons.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  /**\n   * Whether or not the buttons are active\n   */\n  @Prop() readonly active: boolean = false;\n\n  /**\n   * The errors amount\n   */\n  @Prop() readonly errors: number = 0;\n\n  /**\n   * Hide the errors button\n   */\n  @Prop() readonly hideError: boolean = false;\n\n  /**\n   * The warnings amount\n   */\n  @Prop() readonly warnings: number = 0;\n\n  /**\n   * Hide the warnings button\n   */\n  @Prop() readonly hideWarning: boolean = false;\n\n  /**\n   * The successes amount\n   */\n  @Prop() readonly successes: number = 0;\n\n  /**\n   * Hide the successes button\n   */\n  @Prop() readonly hideSuccess: boolean = false;\n\n  /**\n   * The messages amount\n   */\n  @Prop() readonly messages: number = 0;\n\n  /**\n   * Hide the messages button\n   */\n  @Prop() readonly hideMessage: boolean = false;\n\n  /**\n   * Display only the number\n   */\n  @Prop() readonly minimal: boolean = false;\n\n  /**\n   * If present will make the component look smaller.\n   */\n  @Prop({ reflect: true }) readonly compact: boolean = false;\n\n  /**\n   * No inner borders\n   */\n  @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeStatusButtonsElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() iconsSize: Size = \"small\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateIconsSize();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateIconsSize = () => {\n    if (this.compact) {\n      this.iconsSize = \"small\";\n    }\n  };\n\n  private evaluateLabel = (\n    type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n  ): string => {\n    const amount = this[type];\n    if (this.minimal) {\n      return `${amount}`;\n    } else {\n      const singular: boolean = amount === 1;\n      return singular\n        ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n        : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n    }\n  };\n\n  private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n    e.stopPropagation();\n    this.selectionChanged.emit(e.detail);\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gx-ide-list-selector\n          type=\"multi-selection\"\n          listName=\"status-buttons\"\n          noListBorder\n          ellipsis\n          iconsSize={this.iconsSize}\n          onSelectionChanged={this.selectionChangedHandler}\n        >\n          {!this.hideError ? (\n            <gx-ide-list-selector-item\n              itemId=\"errors\"\n              itemValue={this.evaluateLabel(\"errors\")}\n              icon=\"gx-test/result-exception\"\n              iconColor={this.errors === 0 ? \"disabled\" : \"mercury-on-surface\"}\n              class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideWarning ? (\n            <gx-ide-list-selector-item\n              itemId=\"warnings\"\n              itemValue={this.evaluateLabel(\"warnings\")}\n              icon=\"gx-test/result-warning\"\n              iconColor={\n                this.warnings === 0 ? \"disabled\" : \"mercury-on-surface\"\n              }\n              class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideSuccess ? (\n            <gx-ide-list-selector-item\n              itemId=\"successes\"\n              itemValue={this.evaluateLabel(\"successes\")}\n              icon=\"gx-test/result-ok\"\n              iconColor={\n                this.successes === 0 ? \"disabled\" : \"mercury-on-surface\"\n              }\n              class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideMessage ? (\n            <gx-ide-list-selector-item\n              itemId=\"messages\"\n              itemValue={this.evaluateLabel(\"messages\")}\n              icon=\"gx-test/screenshot-viewer\"\n              iconColor={\n                this.messages === 0 ? \"disabled\" : \"mercury-on-surface\"\n              }\n              class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n        </gx-ide-list-selector>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"gx-ide-status-buttons2.js","mappings":"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","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n  display: block;\n  border-radius: var(--ds-form-control-border-radius);\n  --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n  display: flex;\n  flex-direction: row;\n  padding: var(--mer-spacing--2xs);\n  // background-color: transparent;\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n  // border-block-start: none !important; //reset\n\n  flex: 1;\n  text-align: center;\n\n  .label {\n    display: grid;\n    inline-size: fit-content;\n    &__wrapper {\n      grid-template-columns: max-content;\n    }\n    &__description {\n      color: var(--status-buttons-label-color);\n      text-transform: capitalize;\n    }\n  }\n\n  .pseudo-checkbox {\n    position: relative;\n    inline-size: var(--gxg-checkbox-size);\n    height: var(--gxg-checkbox-size);\n    border: 1px solid var(--gxg-checkbox-border-color);\n    border-radius: var(--gxg-checkbox-border-radius);\n  }\n\n  input {\n    &:after {\n      display: none;\n    }\n    + .label {\n      .label__wrapper {\n        display: inline-grid;\n        grid-auto-flow: column;\n        grid-auto-columns: max-content;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n  input:checked {\n    + .label {\n      --status-buttons-label-color: var(--mer-text__on-surface);\n      background-color: inherit;\n\n      .pseudo-checkbox {\n        background: var(--icon__system_check_on-elevation--enabled) center\n          center / 80% no-repeat;\n      }\n    }\n  }\n\n  /*hover*/\n  &:hover {\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--hover) !important;\n    }\n  }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n  gx-ide-list-selector-item {\n    font-size: var(--mer-font__size--2xs);\n  }\n  .label__wrapper {\n    padding: var(--mer-spacing--3xs) var(--mer-spacing--xs)\n      var(--mer-spacing--3xs) var(--mer-spacing--2xs);\n    &:before {\n      top: 10px;\n    }\n  }\n  .label__universal-slot {\n    margin-inline-end: var(--mer-spacing--3xs);\n  }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-inner-borders]) {\n  gx-ide-list-selector-item {\n    border-inline-end: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n  tag: \"gx-ide-status-buttons\",\n  styleUrl: \"gx-ide-status-buttons.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  /**\n   * Whether or not the buttons are active\n   */\n  @Prop() readonly active: boolean = false;\n\n  /**\n   * The errors amount\n   */\n  @Prop() readonly errors: number = 0;\n\n  /**\n   * Hide the errors button\n   */\n  @Prop() readonly hideError: boolean = false;\n\n  /**\n   * The warnings amount\n   */\n  @Prop() readonly warnings: number = 0;\n\n  /**\n   * Hide the warnings button\n   */\n  @Prop() readonly hideWarning: boolean = false;\n\n  /**\n   * The successes amount\n   */\n  @Prop() readonly successes: number = 0;\n\n  /**\n   * Hide the successes button\n   */\n  @Prop() readonly hideSuccess: boolean = false;\n\n  /**\n   * The messages amount\n   */\n  @Prop() readonly messages: number = 0;\n\n  /**\n   * Hide the messages button\n   */\n  @Prop() readonly hideMessage: boolean = false;\n\n  /**\n   * Display only the number\n   */\n  @Prop() readonly minimal: boolean = false;\n\n  /**\n   * If present will make the component look smaller.\n   */\n  @Prop({ reflect: true }) readonly compact: boolean = false;\n\n  /**\n   * No inner borders\n   */\n  @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n  @Element() el: HTMLGxIdeStatusButtonsElement;\n\n  @State() iconsSize: Size = \"small\";\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateIconsSize();\n  }\n\n  private evaluateIconsSize = () => {\n    if (this.compact) {\n      this.iconsSize = \"small\";\n    }\n  };\n\n  private evaluateLabel = (\n    type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n  ): string => {\n    const amount = this[type];\n    if (this.minimal) {\n      return `${amount}`;\n    } else {\n      const singular: boolean = amount === 1;\n      return singular\n        ? `${amount} ${this.#componentLocale[type][\"singular\"]}`\n        : `${amount} ${this.#componentLocale[type][\"plural\"]}`;\n    }\n  };\n\n  private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n    e.stopPropagation();\n    this.selectionChanged.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <gx-ide-list-selector\n          type=\"multi-selection\"\n          listName=\"status-buttons\"\n          noListBorder\n          ellipsis\n          onSelectionChanged={this.selectionChangedHandler}\n        >\n          {!this.hideError ? (\n            <gx-ide-list-selector-item\n              itemId=\"errors\"\n              itemValue={this.evaluateLabel(\"errors\")}\n              icon=\"gx-test/result-exception\"\n              class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"pseudo-checkbox\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideWarning ? (\n            <gx-ide-list-selector-item\n              itemId=\"warnings\"\n              itemValue={this.evaluateLabel(\"warnings\")}\n              icon=\"gx-test/result-warning\"\n              class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"pseudo-checkbox\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideSuccess ? (\n            <gx-ide-list-selector-item\n              itemId=\"successes\"\n              itemValue={this.evaluateLabel(\"successes\")}\n              icon=\"gx-test/result-ok\"\n              class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"pseudo-checkbox\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideMessage ? (\n            <gx-ide-list-selector-item\n              itemId=\"messages\"\n              itemValue={this.evaluateLabel(\"messages\")}\n              icon=\"gx-test/screenshot-viewer\"\n              class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"pseudo-checkbox\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n        </gx-ide-list-selector>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/gx-ide-welcome-page.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdeWelcomePage extends Components.GxIdeWelcomePage, HTMLElement {}
+export const GxIdeWelcomePage: {
+    prototype: GxIdeWelcomePage;
+    new (): GxIdeWelcomePage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gx-ide-welcome-page.js

@@ -0,0 +1,283 @@
+import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './assets-manager.js';
+import { L as Locale } from './locale.js';
+
+const welcomePageCss = ":host{--slide-header-block-padding:34px;--slide-footer-block:var(--mer-spacing--md) var(--mer-spacing--4xl);--slide-footer-block-last-slide:var(--mer-spacing--md) 42px;--slide-footer-navigation-hide-transition:var(--mer-timing--fast);display:grid;block-size:100%;inline-size:100%;overflow:auto;padding:var(--mer-spacing--lg);box-sizing:border-box;padding:var(--mer-spacing--xl)}.main{display:grid;place-self:center;inline-size:100%;max-inline-size:1100px;background-color:var(--mer-surface__elevation--01);border-radius:17px;overflow:hidden;border:var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);inset-block-start:0;transition:opacity var(--slide-fade-duration);opacity:0;pointer-events:none}.main--border-glow{animation:borderColorCycle 2s infinite}.main--visible{pointer-events:visible;opacity:1}.slide{display:grid;block-size:100%;grid-template-areas:\"header header\" \"slide-wrapper slide-wrapper\" \"footer footer\";grid-template-rows:max-content 1fr max-content}.slide__header{padding-inline:18px;padding-block:24px 27px;display:flex;flex-direction:row-reverse;grid-area:header}.slide__container{display:contents}.slide__wrapper{display:grid;column-gap:var(--mer-spacing--3xl);grid-template-areas:\"header header\" \"illustration copy\" \"footer footer\";grid-template-rows:max-content 1fr max-content;grid-template-columns:1fr 520px;grid-area:slide-wrapper;transition:var(--slide-fade-duration) opacity;transition:opacity 200ms;padding-inline:48px;opacity:1;z-index:1}.slide__wrapper:not(.active){opacity:0;z-index:0;pointer-events:none}.slide__illustration{position:relative;overflow:hidden;display:grid;grid-area:illustration;place-items:center;inline-size:100%}.slide__illustration-img{object-fit:contain;block-size:100%;inline-size:100%}.slide__copy{grid-area:copy;place-self:center;justify-self:flex-start}.slide__copy-container{display:grid;gap:var(--mer-spacing--md);max-inline-size:524px}.slide__copy-header{display:grid;gap:var(--mer-spacing--md)}.slide__copy-title{font-size:var(--mer-font__size--xl);color:var(--mer-text__on-surface);letter-spacing:0.02em;font-weight:var(--mer-font__weight--semi-bold)}.slide__copy-description{display:grid;gap:var(--mer-spacing--md);font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--light);line-height:var(--mer-line-height--spaced)}.slide__list{display:grid;gap:var(--mer-spacing--md);list-style:none;padding:0;margin:0}.slide__list-item{position:relative;padding-inline-start:24px}.slide__list-item::before{content:\"\";display:inline-block;inline-size:var(--mer-spacing--sm);block-size:var(--mer-spacing--sm);border:var(--mer-border__width--sm) solid var(--mer-color__tinted-primary--50);border-radius:50%;background-color:var(--mer-color__tinted-primary--10);margin-inline-end:var(--mer-spacing--sm);position:absolute;inset-inline-start:0;inset-block-start:6px}.slide__word{transition:var(--mer-timing--regular) opacity;opacity:0}.slide__word--visible{opacity:1}.slide__footer{grid-area:footer;display:grid;padding-block:var(--slide-footer-block);opacity:1}.slide__footer-last-slide{opacity:0;transition:calc(var(--mer-timing--fast) + 200ms) opacity;pointer-events:none;animation:footerPaddingBlockLastSlide var(--mer-timing--regular) ease-out forwards calc(var(--mer-timing--fast) + 200ms)}.slide__footer-wrapper{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--mer-spacing--md);align-items:center;justify-content:center;transition:var(--mer-timing--regular) opacity;opacity:1}.slide__footer-wrapper-hidden{opacity:0}.slide__dots{display:grid;gap:var(--mer-spacing--2xs);list-style:none;padding:0;margin:0;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center}.slide__dots-inactive{pointer-events:none}.slide__dot{display:grid;padding:var(--mer-spacing--xs);cursor:pointer}.slide__dot::before{content:\"\";place-self:center;inline-size:var(--mer-spacing--sm);block-size:var(--mer-spacing--sm);border-radius:calc(var(--mer-spacing--sm) / 2);background-color:var(--mer-color__neutral-gray--500)}.slide__dot:hover::before{background-color:var(--mer-icon__on-primary--hover)}.slide__dot.active{cursor:auto}.slide__dot.active::before{background-color:var(--mer-accent__primary);cursor:auto}.slide__dot-inactive{pointer-events:none}.close-icon{transition:all var(--mer-timing--fast)}.close-icon:hover{filter:brightness(1.5)}.start-button{justify-self:start;margin-block-start:25px}@keyframes ellipseFadeInOut{0%{opacity:0.3}100%{opacity:0.7}}@keyframes ellipseRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes polygonRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes borderColorCycle{0%{border-color:var(--mer-surface__elevation--01)}50%{border-color:var(--mer-color__primary--400)}100%{border-color:var(--mer-surface__elevation--01)}}@keyframes footerPaddingBlockLastSlide{0%{padding-block:var(--slide-footer-block)}100%{padding-block:var(--slide-footer-block-last-slide)}}.fade-out{animation:fadeOut 0.5s forwards 0.3s}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeWelcomePage_componentLocale, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, _GxIdeWelcomePage_slidesElements, _GxIdeWelcomePage_slidesElementsRef, _GxIdeWelcomePage_slideTimeOutId, _GxIdeWelcomePage_closeSlider, _GxIdeWelcomePage_initiateSlidesTransition, _GxIdeWelcomePage_displayWords, _GxIdeWelcomePage_dotClickedHandler, _GxIdeWelcomePage_keyboardEventHandler, _GxIdeWelcomePage_nextSlideHandler, _GxIdeWelcomePage_prevSlideHandler, _GxIdeWelcomePage_slideTimeOut, _GxIdeWelcomePage_secondsToRead, _GxIdeWelcomePage_renderSlides, _GxIdeWelcomePage_splitWords, _GxIdeWelcomePage_updateActiveSlide;
+const ACTIVE_SLIDE_SELECTOR = "active";
+const ARROW_LEFT_KEY = "ArrowLeft";
+const ARROW_RIGHT_KEY = "ArrowRight";
+const ESCAPE_KEY = "Escape";
+const SLIDE_FADE_DURATION = 300;
+const SLIDE_WORD_SELECTOR = ".slide__word";
+const SLIDE_WORD_SELECTOR_TIMEOUT = 70;
+const SLIDE_WORD_SELECTOR_VISIBLE = "slide__word--visible";
+// icons
+const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const CLOSE_ICON = getIconPath({
+    category: "system",
+    name: "close",
+    colorType: "on-elevation"
+});
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "components/icon",
+    "components/button"
+];
+const GxIdeWelcomePage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeWelcomePage extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeWelcomePage_componentLocale.set(this, void 0);
+        _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed.set(this, new Map());
+        _GxIdeWelcomePage_slidesElements.set(this, []);
+        _GxIdeWelcomePage_slidesElementsRef.set(this, []);
+        // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide
+        // that is set to be displayed as chunks, has already been displayed. Used to not display
+        // as chunks after the first time.
+        _GxIdeWelcomePage_slideTimeOutId.set(this, void 0);
+        _GxIdeWelcomePage_closeSlider.set(this, () => {
+            this.sliderVisible = false;
+            setTimeout(() => {
+                // wait until the slide disappears, then remove.
+                this.el.remove();
+                this.closeCallback();
+                document.removeEventListener("keydown", __classPrivateFieldGet(this, _GxIdeWelcomePage_keyboardEventHandler, "f"));
+            }, SLIDE_FADE_DURATION);
+        });
+        _GxIdeWelcomePage_initiateSlidesTransition.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOut, "f").call(this);
+            // listen to keydown events to navigate the slides with the arrows
+            document.addEventListener("keydown", __classPrivateFieldGet(this, _GxIdeWelcomePage_keyboardEventHandler, "f"));
+        });
+        _GxIdeWelcomePage_displayWords.set(this, (wordsNodeList) => {
+            wordsNodeList.forEach((word, index) => {
+                setTimeout(() => {
+                    word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);
+                }, index * SLIDE_WORD_SELECTOR_TIMEOUT);
+            });
+        });
+        _GxIdeWelcomePage_dotClickedHandler.set(this, (event) => {
+            this.userHasChangedSlide = true;
+            const itemClicked = event.currentTarget;
+            const index = parseInt(itemClicked.getAttribute("data-index"), 10);
+            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, index);
+        });
+        _GxIdeWelcomePage_keyboardEventHandler.set(this, (event) => {
+            this.userHasChangedSlide = true;
+            const goToPrevSlide = event.key === ARROW_LEFT_KEY &&
+                !this.slideTransitioning &&
+                !this.lastSlideReached &&
+                this.activeSlideIndex !== 0;
+            const goToNextSlide = event.key === ARROW_RIGHT_KEY &&
+                !this.slideTransitioning &&
+                !this.lastSlideReached;
+            const closeSlider = event.key === ESCAPE_KEY ||
+                (event.key === ARROW_RIGHT_KEY &&
+                    !this.slideTransitioning &&
+                    this.lastSlideReached);
+            if (goToNextSlide) {
+                __classPrivateFieldGet(this, _GxIdeWelcomePage_nextSlideHandler, "f").call(this);
+            }
+            else if (goToPrevSlide) {
+                __classPrivateFieldGet(this, _GxIdeWelcomePage_prevSlideHandler, "f").call(this);
+            }
+            else if (closeSlider) {
+                __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f").call(this);
+            }
+        });
+        _GxIdeWelcomePage_nextSlideHandler.set(this, () => {
+            const newIndex = this.activeSlideIndex + 1;
+            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, newIndex);
+        });
+        _GxIdeWelcomePage_prevSlideHandler.set(this, () => {
+            const newIndex = this.activeSlideIndex - 1;
+            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, newIndex);
+        });
+        _GxIdeWelcomePage_slideTimeOut.set(this, () => {
+            // Clear any existing timeout
+            if (__classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOutId, "f")) {
+                clearTimeout(__classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOutId, "f"));
+            }
+            const autoChangeSlide = this.transitionType === "auto" &&
+                !this.lastSlideReached &&
+                !this.userHasChangedSlide;
+            if (!autoChangeSlide) {
+                return;
+            }
+            const mergedDescription = this.slides[this.activeSlideIndex].description.join("");
+            const words = mergedDescription.split(" ").length;
+            const timeBeforeNextSlide = __classPrivateFieldGet(this, _GxIdeWelcomePage_secondsToRead, "f").call(this, words);
+            // Set a fresh timeout
+            if (timeBeforeNextSlide) {
+                __classPrivateFieldSet(this, _GxIdeWelcomePage_slideTimeOutId, setTimeout(() => {
+                    __classPrivateFieldGet(this, _GxIdeWelcomePage_nextSlideHandler, "f").call(this);
+                }, timeBeforeNextSlide), "f");
+            }
+        });
+        _GxIdeWelcomePage_secondsToRead.set(this, (wordsCount, wordsPerMinute = this.wordsPerMinute) => {
+            const minutes = wordsCount / wordsPerMinute;
+            const milliseconds = minutes * 60000; // Convert minutes to milliseconds
+            return milliseconds;
+        });
+        _GxIdeWelcomePage_renderSlides.set(this, () => {
+            __classPrivateFieldSet(this, _GxIdeWelcomePage_slidesElements, this.slides.map((slide, index) => {
+                var _a, _b;
+                const isLastSlide = index === this.slides.length - 1;
+                return (h("section", { class: "slide__wrapper", ref: (el) => (__classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[index] = el) }, h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeWelcomePage_componentLocale, "f").copyright.illustrationAriaLabel }, h("img", { class: "slide__illustration-img", src: slide.illustration.url, alt: slide.illustration.alt })), h("section", { class: "slide__copy" }, h("div", { class: "slide__copy-container" }, h("header", { class: "slide__copy-header" }, h("img", { src: ICON_NEXT, alt: "GeneXus Next isologotype" }), h("h2", { class: "slide__copy-title" }, slide.title)), h("div", { class: "slide__copy-description" }, (_a = slide.description) === null || _a === void 0 ? void 0 :
+                    _a.map(paragraph => {
+                        return (h("p", null, slide.descriptionAsChunks
+                            ? __classPrivateFieldGet(this, _GxIdeWelcomePage_splitWords, "f").call(this, paragraph)
+                            : paragraph));
+                    }), ((_b = slide.listItems) === null || _b === void 0 ? void 0 : _b.length) && (h("ul", { class: "slide__list" }, slide.listItems.map(item => {
+                    return h("li", { class: "slide__list-item" }, item);
+                })))), isLastSlide && (h("button", { class: "button-primary start-button", onClick: __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f") }, __classPrivateFieldGet(this, _GxIdeWelcomePage_componentLocale, "f").startButtonCaption))))));
+            }), "f");
+        });
+        _GxIdeWelcomePage_splitWords.set(this, (paragraph) => {
+            return paragraph.split(" ").map(word => {
+                // keep the space after {word} !
+                return h("span", { class: "slide__word" }, word, " ");
+            });
+        });
+        _GxIdeWelcomePage_updateActiveSlide.set(this, (newSlideIndex) => {
+            if (this.lastSlideReached) {
+                return;
+            }
+            this.slideTransitioning = true;
+            // unset current active slide
+            const activeSlide = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[this.activeSlideIndex];
+            activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);
+            const nextSlideReference = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[newSlideIndex];
+            const displayDescriptionAsChunks = this.slides[newSlideIndex].descriptionAsChunks;
+            const descriptionAsChunksDisplayedAlready = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, "f").get(newSlideIndex);
+            let wordsCount;
+            let wordsNodeList;
+            let slideTimeOut = 0;
+            if (displayDescriptionAsChunks) {
+                wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);
+                wordsCount = wordsNodeList.length;
+                slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;
+            }
+            this.lastSlideReached = newSlideIndex === this.slides.length - 1;
+            // set new slide as active after fade out
+            setTimeout(() => {
+                nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);
+                if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {
+                    __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, "f").set(newSlideIndex, true);
+                    __classPrivateFieldGet(this, _GxIdeWelcomePage_displayWords, "f").call(this, wordsNodeList);
+                    setTimeout(() => {
+                        this.slideTransitioning = false;
+                    }, slideTimeOut);
+                }
+                else {
+                    this.slideTransitioning = false;
+                }
+            }, SLIDE_FADE_DURATION);
+            // update active slide index
+            this.activeSlideIndex = newSlideIndex;
+            __classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOut, "f").call(this); // this has to be after this.#updateActiveSlide.
+        });
+        this.activeSlideIndex = 0;
+        this.displaySlider = false;
+        this.copyrightsVisible = true;
+        this.lastSlideReached = false;
+        this.sliderVisible = false;
+        this.slideTransitioning = false;
+        this.userHasChangedSlide = false;
+        this.transitionType = "auto";
+        this.wordsPerMinute = 250;
+        this.closeCallback = undefined;
+        this.slides = [];
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeWelcomePage_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        __classPrivateFieldGet(this, _GxIdeWelcomePage_renderSlides, "f").call(this);
+    }
+    componentDidLoad() {
+        __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[this.activeSlideIndex].classList.add(ACTIVE_SLIDE_SELECTOR);
+        this.sliderVisible = true;
+        __classPrivateFieldGet(this, _GxIdeWelcomePage_initiateSlidesTransition, "f").call(this);
+    }
+    render() {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: {
+                "main": true,
+                "main--visible": this.sliderVisible,
+                "main--border-glow": this.lastSlideReached
+            }, style: { "--slide-fade-duration": `${SLIDE_FADE_DURATION}ms` } }, h("section", { class: "slide" }, h("header", { class: "slide__header" }, h("button", { class: "button-tertiary button-icon-only close-icon", "aria-label": "close presentation", onClick: __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f") }, h("ch-image", { class: "icon-md", src: CLOSE_ICON }))), h("div", { class: "slide__container" }, __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElements, "f")), h("footer", {
+            // slide common footer
+            class: {
+                "slide__footer": true,
+                "slide__footer-last-slide": this.lastSlideReached
+            }
+        }, h("div", { class: {
+                "slide__footer-wrapper": true,
+                "slide__footer-wrapper-hidden": this.lastSlideReached
+            } }, h("ul", { class: "slide__dots", "aria-label": "Slide indicators" }, this.slides.map((_, index) => {
+            return (h("li", { class: {
+                    "slide__dot": true,
+                    "slide__dot-inactive": this.slideTransitioning,
+                    [ACTIVE_SLIDE_SELECTOR]: index === this.activeSlideIndex
+                }, "data-index": index, onClick: !this.slideTransitioning && __classPrivateFieldGet(this, _GxIdeWelcomePage_dotClickedHandler, "f") }));
+        }))))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/welcome-page"]; }
+    get el() { return this; }
+    static get style() { return welcomePageCss; }
+}, [1, "gx-ide-welcome-page", {
+        "transitionType": [1, "transition-type"],
+        "wordsPerMinute": [2, "words-per-minute"],
+        "closeCallback": [16],
+        "slides": [16],
+        "activeSlideIndex": [32],
+        "displaySlider": [32],
+        "copyrightsVisible": [32],
+        "lastSlideReached": [32],
+        "sliderVisible": [32],
+        "slideTransitioning": [32],
+        "userHasChangedSlide": [32]
+    }]);
+_GxIdeWelcomePage_componentLocale = new WeakMap(), _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed = new WeakMap(), _GxIdeWelcomePage_slidesElements = new WeakMap(), _GxIdeWelcomePage_slidesElementsRef = new WeakMap(), _GxIdeWelcomePage_slideTimeOutId = new WeakMap(), _GxIdeWelcomePage_closeSlider = new WeakMap(), _GxIdeWelcomePage_initiateSlidesTransition = new WeakMap(), _GxIdeWelcomePage_displayWords = new WeakMap(), _GxIdeWelcomePage_dotClickedHandler = new WeakMap(), _GxIdeWelcomePage_keyboardEventHandler = new WeakMap(), _GxIdeWelcomePage_nextSlideHandler = new WeakMap(), _GxIdeWelcomePage_prevSlideHandler = new WeakMap(), _GxIdeWelcomePage_slideTimeOut = new WeakMap(), _GxIdeWelcomePage_secondsToRead = new WeakMap(), _GxIdeWelcomePage_renderSlides = new WeakMap(), _GxIdeWelcomePage_splitWords = new WeakMap(), _GxIdeWelcomePage_updateActiveSlide = new WeakMap();
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-welcome-page"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-welcome-page":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxIdeWelcomePage$1);
+            }
+            break;
+    } });
+}
+
+const GxIdeWelcomePage = GxIdeWelcomePage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeWelcomePage, defineCustomElement };
+
+//# sourceMappingURL=gx-ide-welcome-page.js.map

package/dist/components/gx-ide-welcome-page.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-welcome-page.js","mappings":"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","names":["GxIdeWelcomePage"],"sources":["src/components/welcome-page/welcome-page.scss?tag=gx-ide-welcome-page&encapsulation=shadow","src/components/welcome-page/welcome-page.tsx"],"sourcesContent":[":host {\n  --slide-header-block-padding: 34px;\n  --slide-footer-block: var(--mer-spacing--md) var(--mer-spacing--4xl);\n  --slide-footer-block-last-slide: var(--mer-spacing--md) 42px;\n  --slide-footer-navigation-hide-transition: var(--mer-timing--fast);\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: auto;\n  padding: var(--mer-spacing--lg);\n  box-sizing: border-box;\n  padding: var(--mer-spacing--xl);\n}\n\n.main {\n  display: grid;\n  place-self: center;\n  inline-size: 100%;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: 17px;\n  overflow: hidden;\n  border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01);\n  inset-block-start: 0;\n  transition: opacity var(--slide-fade-duration);\n  opacity: 0;\n  pointer-events: none;\n\n  &--border-glow {\n    animation: borderColorCycle 2s infinite;\n  }\n  &--visible {\n    pointer-events: visible;\n    opacity: 1;\n  }\n}\n\n// - - - - - - - - - - - - -\n// Slide\n// - - - - - - - - - - - - -\n\n.slide {\n  display: grid;\n  block-size: 100%;\n  grid-template-areas:\n    \"header header\"\n    \"slide-wrapper slide-wrapper\"\n    \"footer footer\";\n  grid-template-rows: max-content 1fr max-content;\n\n  //  - - - - - Header\n\n  &__header {\n    padding-inline: 18px;\n    padding-block: 24px 27px;\n    display: flex;\n    flex-direction: row-reverse;\n    grid-area: header;\n  }\n\n  //  - - - - - Container\n\n  &__container {\n    display: contents;\n  }\n\n  &__wrapper {\n    display: grid;\n    column-gap: var(--mer-spacing--3xl);\n    grid-template-areas:\n      \"header header\"\n      \"illustration copy\"\n      \"footer footer\";\n    grid-template-rows: max-content 1fr max-content;\n    // grid-template-columns: 411px 1fr;\n    grid-template-columns: 1fr 520px;\n    grid-area: slide-wrapper;\n    transition: var(--slide-fade-duration) opacity;\n    transition: opacity 200ms;\n    padding-inline: 48px;\n    opacity: 1;\n    z-index: 1;\n  }\n  &__wrapper:not(.active) {\n    opacity: 0;\n    z-index: 0;\n    pointer-events: none;\n  }\n\n  &__illustration {\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    grid-area: illustration;\n    place-items: center;\n    inline-size: 100%;\n\n    &-img {\n      object-fit: contain;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n  }\n\n  &__copy {\n    grid-area: copy;\n    place-self: center;\n    justify-self: flex-start;\n  }\n\n  &__copy-container {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    max-inline-size: 524px;\n  }\n\n  &__copy-header {\n    display: grid;\n    gap: var(--mer-spacing--md);\n  }\n\n  &__copy-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__copy-description {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    font-size: var(--mer-font__size--sm);\n    font-weight: var(--mer-font__weight--light);\n    line-height: var(--mer-line-height--spaced);\n  }\n\n  &__list {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    &-item {\n      position: relative;\n      padding-inline-start: 24px;\n      &::before {\n        $size: var(--mer-spacing--sm);\n        content: \"\";\n        display: inline-block;\n        inline-size: $size;\n        block-size: $size;\n        border: var(--mer-border__width--sm) solid\n          var(--mer-color__tinted-primary--50);\n        border-radius: 50%;\n        background-color: var(--mer-color__tinted-primary--10);\n        margin-inline-end: var(--mer-spacing--sm);\n        position: absolute;\n        inset-inline-start: 0;\n        inset-block-start: 6px;\n      }\n    }\n  }\n\n  // words (if 'showTextInChunks' is true)\n  &__word {\n    transition: var(--mer-timing--regular) opacity;\n    opacity: 0;\n\n    &--visible {\n      opacity: 1;\n    }\n  }\n\n  //  - - - - - Footer\n\n  &__footer {\n    $hideDotsDuration: calc(var(--mer-timing--fast) + 200ms);\n    grid-area: footer;\n    display: grid;\n    padding-block: var(--slide-footer-block);\n    opacity: 1;\n\n    &-last-slide {\n      opacity: 0;\n      transition: $hideDotsDuration opacity;\n      pointer-events: none;\n      animation: footerPaddingBlockLastSlide var(--mer-timing--regular) ease-out\n        forwards $hideDotsDuration;\n    }\n  }\n\n  &__footer-wrapper {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: max-content;\n    gap: var(--mer-spacing--md);\n    align-items: center;\n    justify-content: center;\n    transition: var(--mer-timing--regular) opacity;\n    opacity: 1;\n\n    &-hidden {\n      opacity: 0;\n    }\n  }\n  &__dots {\n    display: grid;\n    gap: var(--mer-spacing--2xs);\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    grid-auto-flow: column;\n    grid-auto-columns: max-content;\n    justify-content: center;\n\n    &-inactive {\n      pointer-events: none;\n    }\n  }\n  &__dot {\n    display: grid;\n    padding: var(--mer-spacing--xs);\n    cursor: pointer;\n\n    &::before {\n      content: \"\";\n      place-self: center;\n      inline-size: var(--mer-spacing--sm);\n      block-size: var(--mer-spacing--sm);\n      border-radius: calc(var(--mer-spacing--sm) / 2);\n      background-color: var(--mer-color__neutral-gray--500);\n    }\n    &:hover::before {\n      background-color: var(--mer-icon__on-primary--hover);\n    }\n\n    &.active {\n      cursor: auto;\n      &::before {\n        background-color: var(--mer-accent__primary);\n        cursor: auto;\n      }\n    }\n\n    &-inactive {\n      pointer-events: none;\n    }\n  }\n}\n\n.close-icon {\n  transition: all var(--mer-timing--fast);\n  &:hover {\n    filter: brightness(1.5);\n  }\n}\n\n.start-button {\n  justify-self: start;\n  margin-block-start: 25px;\n}\n\n// - - - - - - - - - - - - - -\n// Animations\n// - - - - - - - - - - - - - -\n\n@keyframes ellipseFadeInOut {\n  0% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 0.7;\n  }\n}\n@keyframes ellipseRotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes polygonRotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes borderColorCycle {\n  0% {\n    border-color: var(--mer-surface__elevation--01);\n  }\n  50% {\n    border-color: var(--mer-color__primary--400);\n  }\n  100% {\n    border-color: var(--mer-surface__elevation--01);\n  }\n}\n\n@keyframes footerPaddingBlockLastSlide {\n  0% {\n    padding-block: var(--slide-footer-block);\n  }\n  100% {\n    padding-block: var(--slide-footer-block-last-slide);\n  }\n}\n\n.fade-out {\n  animation: fadeOut 0.5s forwards 0.3s;\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\n\nconst ACTIVE_SLIDE_SELECTOR = \"active\";\nconst ARROW_LEFT_KEY = \"ArrowLeft\";\nconst ARROW_RIGHT_KEY = \"ArrowRight\";\nconst ESCAPE_KEY = \"Escape\";\nconst SLIDE_FADE_DURATION = 300;\nconst SLIDE_WORD_SELECTOR = \".slide__word\";\nconst SLIDE_WORD_SELECTOR_TIMEOUT = 70;\nconst SLIDE_WORD_SELECTOR_VISIBLE = \"slide__word--visible\";\n\n// icons\nconst ICON_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CLOSE_ICON = getIconPath({\n  category: \"system\",\n  name: \"close\",\n  colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/icon\",\n  \"components/button\"\n];\n\n@Component({\n  tag: \"gx-ide-welcome-page\",\n  styleUrl: \"welcome-page.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/welcome-page\"]\n})\nexport class GxIdeWelcomePage {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  #slidesDescriptionAsChunksAlreadyDisplayed: Map<number, boolean> = new Map();\n  #slidesElements: HTMLElement[] = [];\n  #slidesElementsRef: HTMLElement[] = [];\n  // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide\n  // that is set to be displayed as chunks, has already been displayed. Used to not display\n  // as chunks after the first time.\n  #slideTimeOutId: NodeJS.Timeout;\n\n  @Element() el: HTMLGxIdeWelcomePageElement;\n\n  /**\n   * The current active slide index from 'slides' Prop. It does not considers the very first slide \"Copyright\".\n   */\n  @State() activeSlideIndex: number = 0;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n   */\n  @State() displaySlider: boolean = false;\n\n  /**\n   * True if the very first slide is visible (The copyright slide)\n   */\n  @State() copyrightsVisible: boolean = true;\n\n  /**\n   * True if the user has reached the last slide. Used to hide/disable the navigation.\n   */\n  @State() lastSlideReached: boolean = false;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slider with a smooth transition.\n   */\n  @State() sliderVisible: boolean = false;\n\n  /**\n   * True if a slide is transitioning, false otherwise. Used to disable the navigation arrows while transitioning.\n   */\n  @State() slideTransitioning: boolean = false;\n\n  /**\n   * True if the user has changed slides by clicking on the navigation dots, or by using the keyboard arrows. This is used to know evaluate the slide transition setTimeOut. If the user has navigated, automatic slide transition should be turned off.\n   */\n  @State() userHasChangedSlide: boolean = false;\n\n  /**\n   * The transition type between the slides. \"static\" requires the user to navigate by clicking the navigation dots. \"auto\" will transition automatically after a calculated amount of time.\n   */\n  @Prop() readonly transitionType: TransitionType = \"auto\";\n\n  /**\n   * The estimated amount of words per minute that the user requires to read a slide. This value is used to return the time each slide is freezed before transitioning to the next one. Only evaluated when transitionType is set to \"auto\".\n   */\n  @Prop() readonly wordsPerMinute: number = 250;\n\n  /**\n   * Callback invoked when the user closes the slider by pressing the close button.\n   */\n  @Prop() readonly closeCallback!: CloseCallback;\n\n  /**\n   * An array of slides, with the information that each slide requires. This slides appear after the first slide (Copyrights) that is defined inside the component.\n   */\n  @Prop() readonly slides: SlideInfo[] = [];\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#renderSlides();\n  }\n\n  componentDidLoad() {\n    this.#slidesElementsRef[this.activeSlideIndex].classList.add(\n      ACTIVE_SLIDE_SELECTOR\n    );\n    this.sliderVisible = true;\n    this.#initiateSlidesTransition();\n  }\n\n  #closeSlider = () => {\n    this.sliderVisible = false;\n    setTimeout(() => {\n      // wait until the slide disappears, then remove.\n      this.el.remove();\n      this.closeCallback();\n      document.removeEventListener(\"keydown\", this.#keyboardEventHandler);\n    }, SLIDE_FADE_DURATION);\n  };\n\n  #initiateSlidesTransition = () => {\n    this.#slideTimeOut();\n    // listen to keydown events to navigate the slides with the arrows\n    document.addEventListener(\"keydown\", this.#keyboardEventHandler);\n  };\n\n  #displayWords = (wordsNodeList: NodeListOf<HTMLElement>) => {\n    wordsNodeList.forEach((word, index) => {\n      setTimeout(() => {\n        word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);\n      }, index * SLIDE_WORD_SELECTOR_TIMEOUT);\n    });\n  };\n\n  #dotClickedHandler = (event: MouseEvent) => {\n    this.userHasChangedSlide = true;\n    const itemClicked = event.currentTarget as HTMLElement;\n    const index = parseInt(itemClicked.getAttribute(\"data-index\"), 10);\n    this.#updateActiveSlide(index);\n  };\n\n  #keyboardEventHandler = (event: KeyboardEvent) => {\n    this.userHasChangedSlide = true;\n    const goToPrevSlide =\n      event.key === ARROW_LEFT_KEY &&\n      !this.slideTransitioning &&\n      !this.lastSlideReached &&\n      this.activeSlideIndex !== 0;\n\n    const goToNextSlide =\n      event.key === ARROW_RIGHT_KEY &&\n      !this.slideTransitioning &&\n      !this.lastSlideReached;\n\n    const closeSlider =\n      event.key === ESCAPE_KEY ||\n      (event.key === ARROW_RIGHT_KEY &&\n        !this.slideTransitioning &&\n        this.lastSlideReached);\n\n    if (goToNextSlide) {\n      this.#nextSlideHandler();\n    } else if (goToPrevSlide) {\n      this.#prevSlideHandler();\n    } else if (closeSlider) {\n      this.#closeSlider();\n    }\n  };\n\n  #nextSlideHandler = () => {\n    const newIndex = this.activeSlideIndex + 1;\n    this.#updateActiveSlide(newIndex);\n  };\n\n  #prevSlideHandler = () => {\n    const newIndex = this.activeSlideIndex - 1;\n    this.#updateActiveSlide(newIndex);\n  };\n\n  #slideTimeOut = () => {\n    // Clear any existing timeout\n    if (this.#slideTimeOutId) {\n      clearTimeout(this.#slideTimeOutId);\n    }\n\n    const autoChangeSlide =\n      this.transitionType === \"auto\" &&\n      !this.lastSlideReached &&\n      !this.userHasChangedSlide;\n\n    if (!autoChangeSlide) {\n      return;\n    }\n\n    const mergedDescription =\n      this.slides[this.activeSlideIndex].description.join(\"\");\n    const words = mergedDescription.split(\" \").length;\n    const timeBeforeNextSlide: number = this.#secondsToRead(words);\n\n    // Set a fresh timeout\n    if (timeBeforeNextSlide) {\n      this.#slideTimeOutId = setTimeout(() => {\n        this.#nextSlideHandler();\n      }, timeBeforeNextSlide);\n    }\n  };\n\n  #secondsToRead = (\n    wordsCount: number,\n    wordsPerMinute = this.wordsPerMinute\n  ): number => {\n    const minutes = wordsCount / wordsPerMinute;\n    const milliseconds = minutes * 60000; // Convert minutes to milliseconds\n    return milliseconds;\n  };\n\n  #renderSlides = () => {\n    this.#slidesElements = this.slides.map((slide, index) => {\n      const isLastSlide = index === this.slides.length - 1;\n      return (\n        <section\n          class=\"slide__wrapper\"\n          ref={(el: HTMLElement) =>\n            (this.#slidesElementsRef[index] = el as HTMLElement)\n          }\n        >\n          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n          >\n            <img\n              class=\"slide__illustration-img\"\n              src={slide.illustration.url}\n              alt={slide.illustration.alt}\n            />\n          </div>\n          <section class=\"slide__copy\">\n            <div class=\"slide__copy-container\">\n              <header class=\"slide__copy-header\">\n                <img src={ICON_NEXT} alt=\"GeneXus Next isologotype\" />\n                <h2 class=\"slide__copy-title\">{slide.title}</h2>\n              </header>\n              <div class=\"slide__copy-description\">\n                {slide.description?.map(paragraph => {\n                  return (\n                    <p>\n                      {slide.descriptionAsChunks\n                        ? this.#splitWords(paragraph)\n                        : paragraph}\n                    </p>\n                  );\n                })}\n                {slide.listItems?.length && (\n                  <ul class=\"slide__list\">\n                    {slide.listItems.map(item => {\n                      return <li class=\"slide__list-item\">{item}</li>;\n                    })}\n                  </ul>\n                )}\n              </div>\n              {isLastSlide && (\n                <button\n                  class=\"button-primary start-button\"\n                  onClick={this.#closeSlider}\n                >\n                  {this.#componentLocale.startButtonCaption}\n                </button>\n              )}\n            </div>\n          </section>\n        </section>\n      );\n    });\n  };\n\n  #splitWords = (paragraph: string): HTMLSpanElement[] => {\n    return paragraph.split(\" \").map(word => {\n      // keep the space after {word} !\n      return <span class=\"slide__word\">{word} </span>;\n    });\n  };\n\n  #updateActiveSlide = (newSlideIndex: number) => {\n    if (this.lastSlideReached) {\n      return;\n    }\n    this.slideTransitioning = true;\n\n    // unset current active slide\n    const activeSlide = this.#slidesElementsRef[this.activeSlideIndex];\n    activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);\n\n    const nextSlideReference = this.#slidesElementsRef[newSlideIndex];\n    const displayDescriptionAsChunks =\n      this.slides[newSlideIndex].descriptionAsChunks;\n    const descriptionAsChunksDisplayedAlready =\n      this.#slidesDescriptionAsChunksAlreadyDisplayed.get(newSlideIndex);\n    let wordsCount;\n    let wordsNodeList: NodeListOf<HTMLElement>;\n    let slideTimeOut = 0;\n    if (displayDescriptionAsChunks) {\n      wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);\n      wordsCount = wordsNodeList.length;\n      slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;\n    }\n\n    this.lastSlideReached = newSlideIndex === this.slides.length - 1;\n\n    // set new slide as active after fade out\n    setTimeout(() => {\n      nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);\n\n      if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {\n        this.#slidesDescriptionAsChunksAlreadyDisplayed.set(\n          newSlideIndex,\n          true\n        );\n        this.#displayWords(wordsNodeList);\n        setTimeout(() => {\n          this.slideTransitioning = false;\n        }, slideTimeOut);\n      } else {\n        this.slideTransitioning = false;\n      }\n    }, SLIDE_FADE_DURATION);\n\n    // update active slide index\n    this.activeSlideIndex = newSlideIndex;\n    this.#slideTimeOut(); // this has to be after this.#updateActiveSlide.\n  };\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          class={{\n            \"main\": true,\n            \"main--visible\": this.sliderVisible,\n            \"main--border-glow\": this.lastSlideReached\n          }}\n          style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n        >\n          <section class=\"slide\">\n            <header class=\"slide__header\">\n              <button\n                class=\"button-tertiary button-icon-only close-icon\"\n                aria-label=\"close presentation\"\n                onClick={this.#closeSlider}\n              >\n                <ch-image class=\"icon-md\" src={CLOSE_ICON}></ch-image>\n              </button>\n            </header>\n            <div class=\"slide__container\">{this.#slidesElements}</div>\n            <footer\n              // slide common footer\n              class={{\n                \"slide__footer\": true,\n                \"slide__footer-last-slide\": this.lastSlideReached\n              }}\n            >\n              <div\n                class={{\n                  \"slide__footer-wrapper\": true,\n                  \"slide__footer-wrapper-hidden\": this.lastSlideReached\n                }}\n              >\n                <ul class=\"slide__dots\" aria-label=\"Slide indicators\">\n                  {this.slides.map((_, index) => {\n                    return (\n                      <li\n                        class={{\n                          \"slide__dot\": true,\n                          \"slide__dot-inactive\": this.slideTransitioning,\n                          [ACTIVE_SLIDE_SELECTOR]:\n                            index === this.activeSlideIndex\n                        }}\n                        data-index={index}\n                        onClick={\n                          !this.slideTransitioning && this.#dotClickedHandler\n                        }\n                      ></li>\n                    );\n                  })}\n                </ul>\n              </div>\n            </footer>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type SlideInfo = {\n  illustration: {\n    url: string;\n    alt: string;\n  };\n  title: string;\n  description?: string[];\n  descriptionAsChunks?: boolean;\n  listItems?: string[];\n};\n\nexport type CloseCallback = () => Promise<void>;\nexport type TransitionType = \"static\" | \"auto\";\n"],"version":3}