@genexus/genexus-ide-ui 3.1.1 → 3.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/cjs/gx-ide-select-user-team.cjs.entry.js +1 -1
  2. package/dist/cjs/gx-ide-select-user-team.cjs.entry.js.map +1 -1
  3. package/dist/cjs/gx-ide-sign-in-team.cjs.entry.js +1 -1
  4. package/dist/cjs/gx-ide-sign-in-team.cjs.entry.js.map +1 -1
  5. package/dist/collection/components/select-user-team/select-user-team.css +1 -0
  6. package/dist/collection/components/sign-in-team/sign-in-team.css +1 -0
  7. package/dist/components/gx-ide-select-user-team.js +1 -1
  8. package/dist/components/gx-ide-select-user-team.js.map +1 -1
  9. package/dist/components/gx-ide-sign-in-team.js +1 -1
  10. package/dist/components/gx-ide-sign-in-team.js.map +1 -1
  11. package/dist/esm/gx-ide-select-user-team.entry.js +1 -1
  12. package/dist/esm/gx-ide-select-user-team.entry.js.map +1 -1
  13. package/dist/esm/gx-ide-sign-in-team.entry.js +1 -1
  14. package/dist/esm/gx-ide-sign-in-team.entry.js.map +1 -1
  15. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  16. package/dist/genexus-ide-ui/{p-c24ea55d.entry.js → p-1d44dd0a.entry.js} +59 -59
  17. package/dist/genexus-ide-ui/p-1d44dd0a.entry.js.map +1 -0
  18. package/dist/genexus-ide-ui/{p-632d3a74.entry.js → p-2317ffcb.entry.js} +9 -9
  19. package/dist/genexus-ide-ui/p-2317ffcb.entry.js.map +1 -0
  20. package/package.json +1 -1
  21. package/dist/genexus-ide-ui/p-632d3a74.entry.js.map +0 -1
  22. package/dist/genexus-ide-ui/p-c24ea55d.entry.js.map +0 -1
package/dist/cjs/gx-ide-select-user-team.cjs.entry.js CHANGED
@@ -14,7 +14,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
14
14
  });
15
15
  };
16
16
 
17
- const selectUserTeamCss = "button.button-secondary {\n border-color: var(--color-border-neutral-default);\n}\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
17
+ const selectUserTeamCss = "button.button-secondary {\n border-color: var(--color-border-neutral-default);\n}\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
18
18
 
19
19
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
20
20
  if (kind === "a" && !f)
package/dist/cjs/gx-ide-select-user-team.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-select-user-team.entry.cjs.js","mappings":"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","names":["getAssetPath","Locale","h","Host"],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
1
+ {"file":"gx-ide-select-user-team.entry.cjs.js","mappings":"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","names":["getAssetPath","Locale","h","Host"],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
package/dist/cjs/gx-ide-sign-in-team.cjs.entry.js CHANGED
@@ -15,7 +15,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
15
15
  }));
16
16
  };
17
17
 
18
- const signInTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}";
18
+ const signInTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}";
19
19
 
20
20
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
21
21
  if (kind === "a" && !f)
package/dist/cjs/gx-ide-sign-in-team.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-sign-in-team.entry.cjs.js","mappings":";;;;;;;AAGO,MAAM,2BAA2B,GAAG,CACzC,KAAkB;IAElB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IACD,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK;QACxB,KAAK,EAAE,IAAI,CAAC,EAAE;QACd,OAAO,EAAE,IAAI,CAAC,IAAI;KACnB,CAAC,CAAC,CAAC;AACN,CAAC;;ACbD,MAAM,aAAa,GAAG,oxDAAoxD;;;;;;;;;;;;;;;;;;;ACkB1yD,MAAM,uBAAuB,GAAGA,kBAAY,CAC1C,iEAAiE,CAClE,CAAC;AACF,MAAM,SAAS,GAAGA,kBAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,sBAAsB;IACtB,qBAAqB;IACrB,YAAY;CACb,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC;MAQd,eAAe;;;;;;;QAK1B,mDAAsB;;QAEtB,0CAAuC,EAAE,EAAC;QAC1C,kDAA6C;QAC7C,oDAAoC,GAAG,EAAC;QACxC,gEAAsD;QACtD,2DAAiD;QAoFjD,4CAAoB;YAClB,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;iBAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,gBAAgB,EAAE;gBAC7C,uBAAA,IAAI,wCAAiB,MAArB,IAAI,CAAmB,CAAC;aACzB;SACF,EAAC;QAEF,2CAAmB;YACjB,MAAM,IAAI,CAAC,gBAAgB,CAAC,uBAAA,IAAI,uCAAgB,CAAC,KAAK,CAAC,CAAC;SACzD,EAAC;QAEF,4CAAoB;YAClB,QACEC,oBAAQ,KAAK,EAAC,oBAAoB,IAChCA,iBACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAC,EAAE;cACN,EACFA;;gBAEE,KAAK,EAAC,6BAA6B;eAEnCA,sBAAO,uBAAA,IAAI,wCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAQ,EACtEA,sBAAO,uBAAA,IAAI,wCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAQ,CACnE,CACE,EACT;SACH,EAAC;QAEF,4CAAoB;YAClB,MAAM,cAAc,GAClB,IAAI,CAAC,QAAQ,KAAK,QAAQ;gBAC1B,IAAI,CAAC,yBAAyB;gBAC9B,CAAC,IAAI,CAAC,0BAA0B,CAAC;YACnC,QACEA,qBACEA,oBACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,uBAAA,IAAI,yCAAkB,EAC/B,QAAQ,EAAE,cAAc,IAEvB,uBAAA,IAAI,wCAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,aAAa,CACpD,CACL,EACN;SACH,EAAC;QAEF,qEAA6C;YAC3C,MAAM,0BAA0B,GAC9B,uBAAA,IAAI,qDAA8B,CAAC,KAAK,KAAK,aAAa,CAAC;YAC7D,MAAM,qBAAqB,GACzB,uBAAA,IAAI,gDAAyB,CAAC,KAAK,KAAK,aAAa,CAAC;YACxD,IAAI,CAAC,0BAA0B;gBAC7B,0BAA0B,IAAI,qBAAqB,CAAC;SACvD,EAAC;QAEF,4DAAoC,CAAC,KAAiB;YACpD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,EAAC;QAEF,uDAA+B,CAAC,KAAiB;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,EAAC;QAEF,8CAAsB;;YACpB,IAAI,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE;gBACtC,OAAO;oBACL,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;oBACxBA,eAAG,KAAK,EAAC,gBAAgB,IACtB,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,WAAW,CACvC;oBACJ,IAAI,CAAC,yBAAyB,KAC5BA,iBAAK,KAAK,EAAC,aAAa,IACtBA;;wBAEE,KAAK,EAAC,oBAAoB;uBAE1BA,yBACE,YAAY,EAAE,aAAa,EAC3B,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,CAAC,EAAyB,MAC5B,uBAAA,IAAI,iDACH,EAA2B,MAAA,CAAC,EAEhC,OAAO,EAAE,uBAAA,IAAI,kEAA2C,GAC3C,EACfA,sBAMEA,mBACE,OAAO,EAAC,sBAAsB,EAC9B,KAAK,EAAC,uBAAuB,IAE5B,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,uBAAuB,EACxDA,kBACE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,EAC1C,OAAO,EACL,IAAI,CAAC,aAAa;4BAClB,uBAAA,IAAI,yDAAkC,IAGvC,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,sBAAsB,CAClD,CACD,CACH,CACH,EACNA;;wBAEE,KAAK,EAAC,oBAAoB;uBAE1BA,yBACE,YAAY,EAAE,aAAa,EAC3B,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,CAAC,EAAyB,MAC5B,uBAAA,IAAI,4CAA4B,EAA2B,MAAA,CAAC,EAE/D,OAAO,EAAE,uBAAA,IAAI,kEAA2C,GAC3C,EACfA,sBAMEA,mBAAO,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,uBAAuB,IAC1D,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,qBAAqB,EACtDA,kBACE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,EAC5C,OAAO,EACL,IAAI,CAAC,eAAe,IAAI,uBAAA,IAAI,oDAA6B,IAG1D,uBAAA,IAAI,wCAAiB,CAAC,SAAS,CAAC,oBAAoB,CAChD,CACD,CACH,CACH,CACF,CACP;oBAED,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;iBACzB,CAAC;aACH;iBAAM,IACL,IAAI,CAAC,gBAAgB,KAAK,gBAAgB;gBAC1C,IAAI,CAAC,gBAAgB,KAAK,kBAAkB,EAC5C;gBACA,MAAM,WAAW,GACf,IAAI,CAAC,gBAAgB,KAAK,gBAAgB;sBACtC,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,kBAAkB;sBAC/C,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,qBAAqB,CAAC;gBACzD,MAAM,iBAAiB,GACrB,IAAI,CAAC,gBAAgB,KAAK,gBAAgB;sBACtC,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,wBAAwB;sBACrD,uBAAA,IAAI,wCAAiB,CAAC,MAAM,CAAC,oBAAoB,CAAC;gBACxD,QACEA,2BACE,IAAI,QACJ,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,iBAAiB,GACf,EACjB;aACH;iBAAM,IAAI,IAAI,CAAC,gBAAgB,KAAK,gBAAgB,EAAE;gBACrD,OAAO;oBACL,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;oBACxBA,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,eAAG,KAAK,EAAC,kBAAkB,IACxB,uBAAA,IAAI,wCAAiB,CAAC,cAAc,CAAC,WAAW,CAC/C,CACA;oBACNA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,mBAAO,OAAO,EAAC,OAAO,IACnB,uBAAA,IAAI,wCAAiB,CAAC,cAAc,CAAC,KAAK,CACrC,EACRA,iCACE,EAAE,EAAC,OAAO,EACV,cAAc,EAAC,OAAO,EACtB,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,uBAAA,IAAI,uCAAgB,EAC3B,KAAK,EAAE,MAAA,uBAAA,IAAI,uCAAgB,CAAC,CAAC,CAAC,0CAAE,KAAK,EACrC,GAAG,EAAE,CAAC,EAA+B,MAClC,uBAAA,IAAI,mCAAmB,EAAiC,MAAA,CAAC,GAEvC,CACnB,CACF;oBACN,uBAAA,IAAI,yCAAkB,MAAtB,IAAI,CAAoB;iBACzB,CAAC;aACH;SACF,EAAC;;8BA1QiC,IAAI;0CAKQ,KAAK;wBAKd,QAAQ;;;yCA2BQ,KAAK;;;;;IAzB3D,eAAe,CAAC,WAAqB;QACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;QAE5B,UAAU,CAAC;YACT,IAAI,CAAC,gBAAgB,GAAG,WAAW,CAAC;SACrC,EAAE,uBAAA,IAAI,iDAA0B,CAAC,CAAC;;QAEnC,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,EAAE,uBAAA,IAAI,iDAA0B,GAAG,CAAC,CAAC,CAAC;KACxC;IAsBD,YAAY,CAAC,QAAoB;QAC/B,uBAAA,IAAI,mCAAmB,2BAA2B,CAAC,QAAQ,CAAC,MAAA,CAAC;KAC9D;IAYD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,oCAAoB,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAClE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CACvB,8BAA8B,EAC9B,uBAAA,IAAI,iDAA0B,CAAC,QAAQ,EAAE,GAAG,IAAI,CACjD,CAAC;;QAEF,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/B;IAyMD,MAAM;QACJ,QACED,QAACE,UAAI,QACHF,sBAAU,KAAK,EAAE,WAAW,GAAa,EACzCA,qBAAS,KAAK,EAAC,OAAO,IACpBA,iBACE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAC,EAAE;UACN,EAEFA,iBACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,sBAAsB,EAAE,IAAI,CAAC,cAAc;aAC5C,IAEDA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,uBAAA,IAAI,2CAAoB,MAAxB,IAAI,CAAsB,CACvB,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;;","names":["getAssetPath","h","Locale","Host"],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n if (!teams) {\n return [];\n }\n return teams.map(team => ({\n value: team.id,\n caption: team.name\n }));\n};\n",":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n }\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n\n// WA (this class should be defined on Mercury\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n// WA checkboxes labels should not include margin-block-start when\n// placed inside a field-inline.\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\",\n \"components/checkbox\",\n \"utils/form\"\n];\n\nconst CHECKED_VALUE = \"on\";\n\n@Component({\n tag: \"gx-ide-sign-in-team\",\n styleUrl: \"sign-in-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #switchStepTransitionTime: number = 100;\n #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n @Element() el: HTMLGxIdeSignInTeamElement;\n\n /**\n * This is a handover from \"authStep\" that allows updating descriptions once\n * the slide is hidden. This enables a smooth transition between descriptions.\n */\n\n @State() authStepInternal: AuthStep;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions\n * between slides.\n */\n @State() slideIsVisible: boolean = true;\n\n /**\n * True if terms and conditions are accepted.\n */\n @State() termsAndConditionsAccepted: boolean = false;\n\n /**\n * The authentication step to display\n */\n @Prop() readonly authStep: AuthStep = \"signIn\";\n @Watch(\"authStep\")\n authStepChanged(newAuthStep: AuthStep) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n this.authStepInternal = newAuthStep;\n }, this.#switchStepTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#switchStepTransitionTime * 2);\n }\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Callback executed when the user click the \"Sign In\" button\n */\n @Prop() readonly signInCallback!: () => Promise<void>;\n\n /**\n * When true, it will diplay checkboxes for the user to confirm terms and conditions\n */\n @Prop() readonly termsConfirmationRequired: boolean = false;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n }\n\n /**\n * Callback executed when the user clicks on the \"term and conditions\" link\n */\n @Prop() readonly termsCallback: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks on the \"privacy policy\" link\n */\n @Prop() readonly privacyCallback: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.el.style.setProperty(\n \"--switch-step-transtion-time\",\n this.#switchStepTransitionTime.toString() + \"ms\"\n );\n // Initialize values\n this.authStepInternal = this.authStep;\n this.teamsChanged(this.teams);\n }\n\n #authStepCallback = () => {\n if (this.authStep === \"signIn\") {\n this.signInCallback();\n } else if (this.authStep === \"selectUserTeam\") {\n this.#continueHandler();\n }\n };\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #renderStepHeader = (): HTMLElement => {\n return (\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title heading-2\"\n >\n <span>{this.#componentLocale[this.authStepInternal].titlePart1}</span>\n <span>{this.#componentLocale[this.authStepInternal].titlePart2}</span>\n </h2>\n </header>\n );\n };\n\n #renderStepFooter = (): HTMLElement => {\n const signInDisabled =\n this.authStep === \"signIn\" &&\n this.termsConfirmationRequired &&\n !this.termsAndConditionsAccepted;\n return (\n <div>\n <button\n class=\"button-primary main-btn\"\n onClick={this.#authStepCallback}\n disabled={signInDisabled}\n >\n {this.#componentLocale[this.authStepInternal].buttonCaption}\n </button>\n </div>\n );\n };\n\n #evaluateTermsConditionsAndPrivacyAccepted = () => {\n const termsAndConditionsAccepted =\n this.#termsAndConditionsCheckboxEl.value === CHECKED_VALUE;\n const privacyPolicyAccepted =\n this.#privacyPolicyCheckboxEl.value === CHECKED_VALUE;\n this.termsAndConditionsAccepted =\n termsAndConditionsAccepted && privacyPolicyAccepted;\n };\n\n #termsAndConditionsClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.termsCallback();\n };\n\n #privacyPolicyClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.privacyCallback();\n };\n\n #evaluateStepRender = () => {\n if (this.authStepInternal === \"signIn\") {\n return [\n this.#renderStepHeader(),\n <p class=\"body-regular-l\">\n {this.#componentLocale.signIn.description}\n </p>,\n this.termsConfirmationRequired && (\n <div class=\"field-group\">\n <div\n // terms and conditions\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"terms-and-conditions\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#termsAndConditionsCheckboxEl =\n el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label\n htmlFor=\"terms-and-conditions\"\n class=\"label label-agreement\"\n >\n {this.#componentLocale.agreement.termsAndConditionsLabel}\n <span\n class={{ hyperlink: !!this.termsCallback }}\n onClick={\n this.termsCallback &&\n this.#termsAndConditionsClickedHandler\n }\n >\n {this.#componentLocale.agreement.termsAndConditionsLink}\n </span>\n </label>\n </span>\n </div>\n <div\n // privacy policy\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"privacy-policy\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#privacyPolicyCheckboxEl = el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label htmlFor=\"privacy-policy\" class=\"label label-agreement\">\n {this.#componentLocale.agreement.privacyAndPolicyLabel}\n <span\n class={{ hyperlink: !!this.privacyCallback }}\n onClick={\n this.privacyCallback && this.#privacyPolicyClickedHandler\n }\n >\n {this.#componentLocale.agreement.privacyAndPolicyLink}\n </span>\n </label>\n </span>\n </div>\n </div>\n ),\n\n this.#renderStepFooter()\n ];\n } else if (\n this.authStepInternal === \"fetchUserTeams\" ||\n this.authStepInternal === \"settingUpSession\"\n ) {\n const loaderTitle =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsTitle\n : this.#componentLocale.loader.settingUpSessionTitle;\n const loaderDescription =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsDescription\n : this.#componentLocale.loader.settingUpDescription;\n return (\n <gx-ide-loader\n show\n loaderTitle={loaderTitle}\n description={loaderDescription}\n ></gx-ide-loader>\n );\n } else if (this.authStepInternal === \"selectUserTeam\") {\n return [\n this.#renderStepHeader(),\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.selectUserTeam.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.selectUserTeam.label}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={this.#userTeamsModel[0]?.value}\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl = el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n this.#renderStepFooter()\n ];\n }\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.#evaluateStepRender()}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type AuthStep =\n | \"signIn\"\n | \"fetchUserTeams\"\n | \"selectUserTeam\"\n | \"settingUpSession\";\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
1
+ {"file":"gx-ide-sign-in-team.entry.cjs.js","mappings":"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","names":["getAssetPath","h","Locale","Host"],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n if (!teams) {\n return [];\n }\n return teams.map(team => ({\n value: team.id,\n caption: team.name\n }));\n};\n",":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n }\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n\n// WA (this class should be defined on Mercury\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n// WA checkboxes labels should not include margin-block-start when\n// placed inside a field-inline.\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\",\n \"components/checkbox\",\n \"utils/form\"\n];\n\nconst CHECKED_VALUE = \"on\";\n\n@Component({\n tag: \"gx-ide-sign-in-team\",\n styleUrl: \"sign-in-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #switchStepTransitionTime: number = 100;\n #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n @Element() el: HTMLGxIdeSignInTeamElement;\n\n /**\n * This is a handover from \"authStep\" that allows updating descriptions once\n * the slide is hidden. This enables a smooth transition between descriptions.\n */\n\n @State() authStepInternal: AuthStep;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions\n * between slides.\n */\n @State() slideIsVisible: boolean = true;\n\n /**\n * True if terms and conditions are accepted.\n */\n @State() termsAndConditionsAccepted: boolean = false;\n\n /**\n * The authentication step to display\n */\n @Prop() readonly authStep: AuthStep = \"signIn\";\n @Watch(\"authStep\")\n authStepChanged(newAuthStep: AuthStep) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n this.authStepInternal = newAuthStep;\n }, this.#switchStepTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#switchStepTransitionTime * 2);\n }\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Callback executed when the user click the \"Sign In\" button\n */\n @Prop() readonly signInCallback!: () => Promise<void>;\n\n /**\n * When true, it will diplay checkboxes for the user to confirm terms and conditions\n */\n @Prop() readonly termsConfirmationRequired: boolean = false;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n }\n\n /**\n * Callback executed when the user clicks on the \"term and conditions\" link\n */\n @Prop() readonly termsCallback: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks on the \"privacy policy\" link\n */\n @Prop() readonly privacyCallback: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.el.style.setProperty(\n \"--switch-step-transtion-time\",\n this.#switchStepTransitionTime.toString() + \"ms\"\n );\n // Initialize values\n this.authStepInternal = this.authStep;\n this.teamsChanged(this.teams);\n }\n\n #authStepCallback = () => {\n if (this.authStep === \"signIn\") {\n this.signInCallback();\n } else if (this.authStep === \"selectUserTeam\") {\n this.#continueHandler();\n }\n };\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #renderStepHeader = (): HTMLElement => {\n return (\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title heading-2\"\n >\n <span>{this.#componentLocale[this.authStepInternal].titlePart1}</span>\n <span>{this.#componentLocale[this.authStepInternal].titlePart2}</span>\n </h2>\n </header>\n );\n };\n\n #renderStepFooter = (): HTMLElement => {\n const signInDisabled =\n this.authStep === \"signIn\" &&\n this.termsConfirmationRequired &&\n !this.termsAndConditionsAccepted;\n return (\n <div>\n <button\n class=\"button-primary main-btn\"\n onClick={this.#authStepCallback}\n disabled={signInDisabled}\n >\n {this.#componentLocale[this.authStepInternal].buttonCaption}\n </button>\n </div>\n );\n };\n\n #evaluateTermsConditionsAndPrivacyAccepted = () => {\n const termsAndConditionsAccepted =\n this.#termsAndConditionsCheckboxEl.value === CHECKED_VALUE;\n const privacyPolicyAccepted =\n this.#privacyPolicyCheckboxEl.value === CHECKED_VALUE;\n this.termsAndConditionsAccepted =\n termsAndConditionsAccepted && privacyPolicyAccepted;\n };\n\n #termsAndConditionsClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.termsCallback();\n };\n\n #privacyPolicyClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.privacyCallback();\n };\n\n #evaluateStepRender = () => {\n if (this.authStepInternal === \"signIn\") {\n return [\n this.#renderStepHeader(),\n <p class=\"body-regular-l\">\n {this.#componentLocale.signIn.description}\n </p>,\n this.termsConfirmationRequired && (\n <div class=\"field-group\">\n <div\n // terms and conditions\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"terms-and-conditions\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#termsAndConditionsCheckboxEl =\n el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label\n htmlFor=\"terms-and-conditions\"\n class=\"label label-agreement\"\n >\n {this.#componentLocale.agreement.termsAndConditionsLabel}\n <span\n class={{ hyperlink: !!this.termsCallback }}\n onClick={\n this.termsCallback &&\n this.#termsAndConditionsClickedHandler\n }\n >\n {this.#componentLocale.agreement.termsAndConditionsLink}\n </span>\n </label>\n </span>\n </div>\n <div\n // privacy policy\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"privacy-policy\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#privacyPolicyCheckboxEl = el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label htmlFor=\"privacy-policy\" class=\"label label-agreement\">\n {this.#componentLocale.agreement.privacyAndPolicyLabel}\n <span\n class={{ hyperlink: !!this.privacyCallback }}\n onClick={\n this.privacyCallback && this.#privacyPolicyClickedHandler\n }\n >\n {this.#componentLocale.agreement.privacyAndPolicyLink}\n </span>\n </label>\n </span>\n </div>\n </div>\n ),\n\n this.#renderStepFooter()\n ];\n } else if (\n this.authStepInternal === \"fetchUserTeams\" ||\n this.authStepInternal === \"settingUpSession\"\n ) {\n const loaderTitle =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsTitle\n : this.#componentLocale.loader.settingUpSessionTitle;\n const loaderDescription =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsDescription\n : this.#componentLocale.loader.settingUpDescription;\n return (\n <gx-ide-loader\n show\n loaderTitle={loaderTitle}\n description={loaderDescription}\n ></gx-ide-loader>\n );\n } else if (this.authStepInternal === \"selectUserTeam\") {\n return [\n this.#renderStepHeader(),\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.selectUserTeam.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.selectUserTeam.label}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={this.#userTeamsModel[0]?.value}\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl = el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n this.#renderStepFooter()\n ];\n }\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.#evaluateStepRender()}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type AuthStep =\n | \"signIn\"\n | \"fetchUserTeams\"\n | \"selectUserTeam\"\n | \"settingUpSession\";\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
package/dist/collection/components/select-user-team/select-user-team.css CHANGED
@@ -76,6 +76,7 @@ button.button-secondary {
76
76
  .teams-list {
77
77
  inline-size: 100%;
78
78
  max-inline-size: 400px;
79
+ --ch-combo-box__popover-max-inline-size: 400px;
79
80
  }
80
81
 
81
82
  .buttons-container {
package/dist/collection/components/sign-in-team/sign-in-team.css CHANGED
@@ -63,6 +63,7 @@
63
63
  .teams-list {
64
64
  inline-size: 100%;
65
65
  max-inline-size: 400px;
66
+ --ch-combo-box__popover-max-inline-size: 400px;
66
67
  }
67
68
 
68
69
  .main-btn {
package/dist/components/gx-ide-select-user-team.js CHANGED
@@ -11,7 +11,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
11
11
  });
12
12
  };
13
13
 
14
- const selectUserTeamCss = "button.button-secondary {\n border-color: var(--color-border-neutral-default);\n}\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
14
+ const selectUserTeamCss = "button.button-secondary {\n border-color: var(--color-border-neutral-default);\n}\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
15
15
 
16
16
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
17
17
  if (kind === "a" && !f)
package/dist/components/gx-ide-select-user-team.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-select-user-team.js","mappings":"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","names":["GxIdeSelectUserTeam"],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
1
+ {"file":"gx-ide-select-user-team.js","mappings":"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","names":["GxIdeSelectUserTeam"],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
package/dist/components/gx-ide-sign-in-team.js CHANGED
@@ -12,7 +12,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
12
12
  }));
13
13
  };
14
14
 
15
- const signInTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}";
15
+ const signInTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}";
16
16
 
17
17
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
18
18
  if (kind === "a" && !f)
package/dist/components/gx-ide-sign-in-team.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-sign-in-team.js","mappings":"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","names":["GxIdeSignInTeam"],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n if (!teams) {\n return [];\n }\n return teams.map(team => ({\n value: team.id,\n caption: team.name\n }));\n};\n",":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n }\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n\n// WA (this class should be defined on Mercury\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n// WA checkboxes labels should not include margin-block-start when\n// placed inside a field-inline.\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\",\n \"components/checkbox\",\n \"utils/form\"\n];\n\nconst CHECKED_VALUE = \"on\";\n\n@Component({\n tag: \"gx-ide-sign-in-team\",\n styleUrl: \"sign-in-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #switchStepTransitionTime: number = 100;\n #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n @Element() el: HTMLGxIdeSignInTeamElement;\n\n /**\n * This is a handover from \"authStep\" that allows updating descriptions once\n * the slide is hidden. This enables a smooth transition between descriptions.\n */\n\n @State() authStepInternal: AuthStep;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions\n * between slides.\n */\n @State() slideIsVisible: boolean = true;\n\n /**\n * True if terms and conditions are accepted.\n */\n @State() termsAndConditionsAccepted: boolean = false;\n\n /**\n * The authentication step to display\n */\n @Prop() readonly authStep: AuthStep = \"signIn\";\n @Watch(\"authStep\")\n authStepChanged(newAuthStep: AuthStep) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n this.authStepInternal = newAuthStep;\n }, this.#switchStepTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#switchStepTransitionTime * 2);\n }\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Callback executed when the user click the \"Sign In\" button\n */\n @Prop() readonly signInCallback!: () => Promise<void>;\n\n /**\n * When true, it will diplay checkboxes for the user to confirm terms and conditions\n */\n @Prop() readonly termsConfirmationRequired: boolean = false;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n }\n\n /**\n * Callback executed when the user clicks on the \"term and conditions\" link\n */\n @Prop() readonly termsCallback: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks on the \"privacy policy\" link\n */\n @Prop() readonly privacyCallback: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.el.style.setProperty(\n \"--switch-step-transtion-time\",\n this.#switchStepTransitionTime.toString() + \"ms\"\n );\n // Initialize values\n this.authStepInternal = this.authStep;\n this.teamsChanged(this.teams);\n }\n\n #authStepCallback = () => {\n if (this.authStep === \"signIn\") {\n this.signInCallback();\n } else if (this.authStep === \"selectUserTeam\") {\n this.#continueHandler();\n }\n };\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #renderStepHeader = (): HTMLElement => {\n return (\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title heading-2\"\n >\n <span>{this.#componentLocale[this.authStepInternal].titlePart1}</span>\n <span>{this.#componentLocale[this.authStepInternal].titlePart2}</span>\n </h2>\n </header>\n );\n };\n\n #renderStepFooter = (): HTMLElement => {\n const signInDisabled =\n this.authStep === \"signIn\" &&\n this.termsConfirmationRequired &&\n !this.termsAndConditionsAccepted;\n return (\n <div>\n <button\n class=\"button-primary main-btn\"\n onClick={this.#authStepCallback}\n disabled={signInDisabled}\n >\n {this.#componentLocale[this.authStepInternal].buttonCaption}\n </button>\n </div>\n );\n };\n\n #evaluateTermsConditionsAndPrivacyAccepted = () => {\n const termsAndConditionsAccepted =\n this.#termsAndConditionsCheckboxEl.value === CHECKED_VALUE;\n const privacyPolicyAccepted =\n this.#privacyPolicyCheckboxEl.value === CHECKED_VALUE;\n this.termsAndConditionsAccepted =\n termsAndConditionsAccepted && privacyPolicyAccepted;\n };\n\n #termsAndConditionsClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.termsCallback();\n };\n\n #privacyPolicyClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.privacyCallback();\n };\n\n #evaluateStepRender = () => {\n if (this.authStepInternal === \"signIn\") {\n return [\n this.#renderStepHeader(),\n <p class=\"body-regular-l\">\n {this.#componentLocale.signIn.description}\n </p>,\n this.termsConfirmationRequired && (\n <div class=\"field-group\">\n <div\n // terms and conditions\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"terms-and-conditions\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#termsAndConditionsCheckboxEl =\n el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label\n htmlFor=\"terms-and-conditions\"\n class=\"label label-agreement\"\n >\n {this.#componentLocale.agreement.termsAndConditionsLabel}\n <span\n class={{ hyperlink: !!this.termsCallback }}\n onClick={\n this.termsCallback &&\n this.#termsAndConditionsClickedHandler\n }\n >\n {this.#componentLocale.agreement.termsAndConditionsLink}\n </span>\n </label>\n </span>\n </div>\n <div\n // privacy policy\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"privacy-policy\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#privacyPolicyCheckboxEl = el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label htmlFor=\"privacy-policy\" class=\"label label-agreement\">\n {this.#componentLocale.agreement.privacyAndPolicyLabel}\n <span\n class={{ hyperlink: !!this.privacyCallback }}\n onClick={\n this.privacyCallback && this.#privacyPolicyClickedHandler\n }\n >\n {this.#componentLocale.agreement.privacyAndPolicyLink}\n </span>\n </label>\n </span>\n </div>\n </div>\n ),\n\n this.#renderStepFooter()\n ];\n } else if (\n this.authStepInternal === \"fetchUserTeams\" ||\n this.authStepInternal === \"settingUpSession\"\n ) {\n const loaderTitle =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsTitle\n : this.#componentLocale.loader.settingUpSessionTitle;\n const loaderDescription =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsDescription\n : this.#componentLocale.loader.settingUpDescription;\n return (\n <gx-ide-loader\n show\n loaderTitle={loaderTitle}\n description={loaderDescription}\n ></gx-ide-loader>\n );\n } else if (this.authStepInternal === \"selectUserTeam\") {\n return [\n this.#renderStepHeader(),\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.selectUserTeam.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.selectUserTeam.label}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={this.#userTeamsModel[0]?.value}\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl = el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n this.#renderStepFooter()\n ];\n }\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.#evaluateStepRender()}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type AuthStep =\n | \"signIn\"\n | \"fetchUserTeams\"\n | \"selectUserTeam\"\n | \"settingUpSession\";\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
1
+ {"file":"gx-ide-sign-in-team.js","mappings":"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","names":["GxIdeSignInTeam"],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n if (!teams) {\n return [];\n }\n return teams.map(team => ({\n value: team.id,\n caption: team.name\n }));\n};\n",":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n }\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n\n// WA (this class should be defined on Mercury\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n// WA checkboxes labels should not include margin-block-start when\n// placed inside a field-inline.\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\",\n \"components/checkbox\",\n \"utils/form\"\n];\n\nconst CHECKED_VALUE = \"on\";\n\n@Component({\n tag: \"gx-ide-sign-in-team\",\n styleUrl: \"sign-in-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeSignInTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #switchStepTransitionTime: number = 100;\n #termsAndConditionsCheckboxEl!: HTMLChCheckboxElement;\n #privacyPolicyCheckboxEl!: HTMLChCheckboxElement;\n\n @Element() el: HTMLGxIdeSignInTeamElement;\n\n /**\n * This is a handover from \"authStep\" that allows updating descriptions once\n * the slide is hidden. This enables a smooth transition between descriptions.\n */\n\n @State() authStepInternal: AuthStep;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions\n * between slides.\n */\n @State() slideIsVisible: boolean = true;\n\n /**\n * True if terms and conditions are accepted.\n */\n @State() termsAndConditionsAccepted: boolean = false;\n\n /**\n * The authentication step to display\n */\n @Prop() readonly authStep: AuthStep = \"signIn\";\n @Watch(\"authStep\")\n authStepChanged(newAuthStep: AuthStep) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n this.authStepInternal = newAuthStep;\n }, this.#switchStepTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#switchStepTransitionTime * 2);\n }\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Callback executed when the user click the \"Sign In\" button\n */\n @Prop() readonly signInCallback!: () => Promise<void>;\n\n /**\n * When true, it will diplay checkboxes for the user to confirm terms and conditions\n */\n @Prop() readonly termsConfirmationRequired: boolean = false;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n }\n\n /**\n * Callback executed when the user clicks on the \"term and conditions\" link\n */\n @Prop() readonly termsCallback: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks on the \"privacy policy\" link\n */\n @Prop() readonly privacyCallback: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.el.style.setProperty(\n \"--switch-step-transtion-time\",\n this.#switchStepTransitionTime.toString() + \"ms\"\n );\n // Initialize values\n this.authStepInternal = this.authStep;\n this.teamsChanged(this.teams);\n }\n\n #authStepCallback = () => {\n if (this.authStep === \"signIn\") {\n this.signInCallback();\n } else if (this.authStep === \"selectUserTeam\") {\n this.#continueHandler();\n }\n };\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #renderStepHeader = (): HTMLElement => {\n return (\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title heading-2\"\n >\n <span>{this.#componentLocale[this.authStepInternal].titlePart1}</span>\n <span>{this.#componentLocale[this.authStepInternal].titlePart2}</span>\n </h2>\n </header>\n );\n };\n\n #renderStepFooter = (): HTMLElement => {\n const signInDisabled =\n this.authStep === \"signIn\" &&\n this.termsConfirmationRequired &&\n !this.termsAndConditionsAccepted;\n return (\n <div>\n <button\n class=\"button-primary main-btn\"\n onClick={this.#authStepCallback}\n disabled={signInDisabled}\n >\n {this.#componentLocale[this.authStepInternal].buttonCaption}\n </button>\n </div>\n );\n };\n\n #evaluateTermsConditionsAndPrivacyAccepted = () => {\n const termsAndConditionsAccepted =\n this.#termsAndConditionsCheckboxEl.value === CHECKED_VALUE;\n const privacyPolicyAccepted =\n this.#privacyPolicyCheckboxEl.value === CHECKED_VALUE;\n this.termsAndConditionsAccepted =\n termsAndConditionsAccepted && privacyPolicyAccepted;\n };\n\n #termsAndConditionsClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.termsCallback();\n };\n\n #privacyPolicyClickedHandler = (event: MouseEvent) => {\n event.preventDefault();\n this.privacyCallback();\n };\n\n #evaluateStepRender = () => {\n if (this.authStepInternal === \"signIn\") {\n return [\n this.#renderStepHeader(),\n <p class=\"body-regular-l\">\n {this.#componentLocale.signIn.description}\n </p>,\n this.termsConfirmationRequired && (\n <div class=\"field-group\">\n <div\n // terms and conditions\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"terms-and-conditions\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#termsAndConditionsCheckboxEl =\n el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label\n htmlFor=\"terms-and-conditions\"\n class=\"label label-agreement\"\n >\n {this.#componentLocale.agreement.termsAndConditionsLabel}\n <span\n class={{ hyperlink: !!this.termsCallback }}\n onClick={\n this.termsCallback &&\n this.#termsAndConditionsClickedHandler\n }\n >\n {this.#componentLocale.agreement.termsAndConditionsLink}\n </span>\n </label>\n </span>\n </div>\n <div\n // privacy policy\n class=\"field field-inline\"\n >\n <ch-checkbox\n checkedValue={CHECKED_VALUE}\n id=\"privacy-policy\"\n class=\"checkbox\"\n ref={(el: HTMLChCheckboxElement) =>\n (this.#privacyPolicyCheckboxEl = el as HTMLChCheckboxElement)\n }\n onInput={this.#evaluateTermsConditionsAndPrivacyAccepted}\n ></ch-checkbox>\n <span>\n {/*\n WA: this span prevents field-inline applying padding-block-start on the label\n TODO: See how to ignore padding-block-start when using field-inline with a control\n that is not an input, combo-box, etc..\n */}\n <label htmlFor=\"privacy-policy\" class=\"label label-agreement\">\n {this.#componentLocale.agreement.privacyAndPolicyLabel}\n <span\n class={{ hyperlink: !!this.privacyCallback }}\n onClick={\n this.privacyCallback && this.#privacyPolicyClickedHandler\n }\n >\n {this.#componentLocale.agreement.privacyAndPolicyLink}\n </span>\n </label>\n </span>\n </div>\n </div>\n ),\n\n this.#renderStepFooter()\n ];\n } else if (\n this.authStepInternal === \"fetchUserTeams\" ||\n this.authStepInternal === \"settingUpSession\"\n ) {\n const loaderTitle =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsTitle\n : this.#componentLocale.loader.settingUpSessionTitle;\n const loaderDescription =\n this.authStepInternal === \"fetchUserTeams\"\n ? this.#componentLocale.loader.fetchingTeamsDescription\n : this.#componentLocale.loader.settingUpDescription;\n return (\n <gx-ide-loader\n show\n loaderTitle={loaderTitle}\n description={loaderDescription}\n ></gx-ide-loader>\n );\n } else if (this.authStepInternal === \"selectUserTeam\") {\n return [\n this.#renderStepHeader(),\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.selectUserTeam.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.selectUserTeam.label}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={this.#userTeamsModel[0]?.value}\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl = el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n this.#renderStepFooter()\n ];\n }\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.#evaluateStepRender()}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type AuthStep =\n | \"signIn\"\n | \"fetchUserTeams\"\n | \"selectUserTeam\"\n | \"settingUpSession\";\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
package/dist/esm/gx-ide-select-user-team.entry.js CHANGED
@@ -10,7 +10,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
10
10
  });
11
11
  };
12
12
 
13
- const selectUserTeamCss = "button.button-secondary {\n border-color: var(--color-border-neutral-default);\n}\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
13
+ const selectUserTeamCss = "button.button-secondary {\n border-color: var(--color-border-neutral-default);\n}\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
14
14
 
15
15
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
16
16
  if (kind === "a" && !f)
package/dist/esm/gx-ide-select-user-team.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-select-user-team.entry.js","mappings":"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","names":[],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
1
+ {"file":"gx-ide-select-user-team.entry.js","mappings":"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","names":[],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n","@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n:host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--font-size-header-h2);\n font-weight: var(--font-style-semi-bold);\n letter-spacing: 0.02em;\n color: var(--color-text-neutral-strawberry);\n }\n\n &__main-description {\n display: grid;\n gap: 40px;\n font-size: var(--font-size-body-l);\n font-weight: var(--font-style-regular);\n line-height: var(--line-height-spacious);\n color: var(--color-text-neutral-disabled);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\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 // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
package/dist/esm/gx-ide-sign-in-team.entry.js CHANGED
@@ -11,7 +11,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
11
11
  }));
12
12
  };
13
13
 
14
- const signInTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}";
14
+ const signInTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--color-accent-surface-elevation-1);\n border-radius: var(--dialog-border-radius, 16px);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: 48px;\n transform: translateY(4px);\n transition: var(--switch-step-transtion-time) all;\n opacity: 0;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--spacing-gap-xxl);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n letter-spacing: 0.02em;\n}\n.slide__main-description {\n display: grid;\n gap: 40px;\n color: var(--color-text-neutral-disabled);\n max-inline-size: 370px;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.main-btn {\n inline-size: 100%;\n max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n.hyperlink {\n text-decoration: underline;\n cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n margin-block-start: 0 !important;\n}";
15
15
 
16
16
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
17
17
  if (kind === "a" && !f)