npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.44 → 1.0.46 - Mend

@genexus/genexus-ide-ui 1.0.44 → 1.0.46

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 (115) hide show

package/dist/cjs/gx-ide-select-user-team.cjs.entry.js.map CHANGED Viewed

	@@ -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",":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 padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--mer-spacing--lg);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n }\n\n &__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\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(--mer-spacing--md);\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 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\n @Element() el: HTMLGxIdeSelectUserTeamElement;\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.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\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 }}\n >\n <div class=\"slide__main-container\">\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=\"text-body-highlighted-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">{this.#componentLocale.teams}</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 <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 </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",":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 padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n }\n\n &__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\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(--mer-spacing--md);\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=\"text-body-highlighted-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 Viewed

@@ -15,7 +15,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
     }));
 };
-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  padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\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.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}";
+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  padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\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}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -33,15 +33,18 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdeSignInTeam_componentLocale, _GxIdeSignInTeam_userTeamsModel, _GxIdeSignInTeam_chSelectTeamEl, _GxIdeSignInTeam_switchStepTransitionTime, _GxIdeSignInTeam_authStepCallback, _GxIdeSignInTeam_continueHandler;
+var _GxIdeSignInTeam_componentLocale, _GxIdeSignInTeam_userTeamsModel, _GxIdeSignInTeam_chSelectTeamEl, _GxIdeSignInTeam_switchStepTransitionTime, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, _GxIdeSignInTeam_privacyPolicyCheckboxEl, _GxIdeSignInTeam_authStepCallback, _GxIdeSignInTeam_continueHandler, _GxIdeSignInTeam_renderStepHeader, _GxIdeSignInTeam_renderStepFooter, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, _GxIdeSignInTeam_termsAndConditionsClickedHandler, _GxIdeSignInTeam_privacyPolicyClickedHandler, _GxIdeSignInTeam_evaluateStepRender;
 const COPYRIGHTS_ILLUSTRATION = index.getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
 const ICON_NEXT = index.getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
     "components/button",
-    "components/combo-box"
+    "components/combo-box",
+    "components/checkbox",
+    "utils/form"
 ];
+const CHECKED_VALUE = "on";
 const GxIdeSignInTeam = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -54,6 +57,8 @@ const GxIdeSignInTeam = class {
         _GxIdeSignInTeam_userTeamsModel.set(this, []);
         _GxIdeSignInTeam_chSelectTeamEl.set(this, void 0);
         _GxIdeSignInTeam_switchStepTransitionTime.set(this, 100);
+        _GxIdeSignInTeam_termsAndConditionsCheckboxEl.set(this, void 0);
+        _GxIdeSignInTeam_privacyPolicyCheckboxEl.set(this, void 0);
         _GxIdeSignInTeam_authStepCallback.set(this, () => {
             if (this.authStep === "signIn") {
                 this.signInCallback();
@@ -65,13 +70,78 @@ const GxIdeSignInTeam = class {
         _GxIdeSignInTeam_continueHandler.set(this, async () => {
             await this.continueCallback(__classPrivateFieldGet(this, _GxIdeSignInTeam_chSelectTeamEl, "f").value);
         });
+        _GxIdeSignInTeam_renderStepHeader.set(this, () => {
+            return (index.h("header", { class: "slide__main-header" }, index.h("img", { src: ICON_NEXT, alt: "" // decorative
+            }), index.h("h2", {
+                // Split the title into two spans for better styling
+                class: "slide__main-title"
+            }, index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart1), index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart2))));
+        });
+        _GxIdeSignInTeam_renderStepFooter.set(this, () => {
+            const signInDisabled = this.authStep === "signIn" &&
+                this.termsConfirmationRequired &&
+                !this.termsAndConditionsAccepted;
+            return (index.h("div", null, index.h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeSignInTeam_authStepCallback, "f"), disabled: signInDisabled }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].buttonCaption)));
+        });
+        _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted.set(this, () => {
+            const termsAndConditionsAccepted = __classPrivateFieldGet(this, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, "f").value === CHECKED_VALUE;
+            const privacyPolicyAccepted = __classPrivateFieldGet(this, _GxIdeSignInTeam_privacyPolicyCheckboxEl, "f").value === CHECKED_VALUE;
+            this.termsAndConditionsAccepted =
+                termsAndConditionsAccepted && privacyPolicyAccepted;
+        });
+        _GxIdeSignInTeam_termsAndConditionsClickedHandler.set(this, (event) => {
+            event.preventDefault();
+            this.termsCallback();
+        });
+        _GxIdeSignInTeam_privacyPolicyClickedHandler.set(this, (event) => {
+            event.preventDefault();
+            this.privacyCallback();
+        });
+        _GxIdeSignInTeam_evaluateStepRender.set(this, () => {
+            var _a;
+            if (this.authStepInternal === "signIn") {
+                return [
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepHeader, "f").call(this),
+                    index.h("p", { class: "text-body-regular-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.description),
+                    this.termsConfirmationRequired && (index.h("div", { class: "field-group" }, index.h("div", {
+                        // terms and conditions
+                        class: "field field-inline"
+                    }, index.h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "terms-and-conditions", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, "f") }), index.h("label", { htmlFor: "terms-and-conditions", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.termsAndConditionsLabel, index.h("span", { class: { hyperlink: !!this.termsCallback }, onClick: this.termsCallback && __classPrivateFieldGet(this, _GxIdeSignInTeam_termsAndConditionsClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.termsAndConditionsLink))), index.h("div", {
+                        // privacy policy
+                        class: "field field-inline"
+                    }, index.h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "privacy-policy", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_privacyPolicyCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, "f") }), index.h("label", { htmlFor: "privacy-policy", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.privacyAndPolicyLabel, index.h("span", { class: { hyperlink: !!this.privacyCallback }, onClick: this.privacyCallback && __classPrivateFieldGet(this, _GxIdeSignInTeam_privacyPolicyClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.privacyAndPolicyLink))))),
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepFooter, "f").call(this)
+                ];
+            }
+            else if (this.authStepInternal === "fetchUserTeams" ||
+                this.authStepInternal === "settingUpSession") {
+                const loaderTitle = this.authStepInternal === "fetchUserTeams"
+                    ? __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.fetchingTeamsTitle
+                    : __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.settingUpSessionTitle;
+                const loaderDescription = this.authStepInternal === "fetchUserTeams"
+                    ? __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.fetchingTeamsDescription
+                    : __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.settingUpDescription;
+                return (index.h("gx-ide-loader", { show: true, loaderTitle: loaderTitle, description: loaderDescription }));
+            }
+            else if (this.authStepInternal === "selectUserTeam") {
+                return [
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepHeader, "f").call(this),
+                    index.h("div", { class: "slide__select-team-description" }, index.h("p", { class: "text-body-highlighted-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.infoMessage)),
+                    index.h("div", { class: "field-group" }, index.h("div", { class: "field field-block" }, index.h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.label), index.h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_chSelectTeamEl, el, "f")) }))),
+                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepFooter, "f").call(this)
+                ];
+            }
+        });
         this.authStepInternal = undefined;
         this.slideIsVisible = true;
+        this.termsAndConditionsAccepted = false;
         this.authStep = "signIn";
         this.continueCallback = undefined;
         this.signInCallback = undefined;
+        this.termsConfirmationRequired = false;
         this.teams = undefined;
         this.termsCallback = undefined;
+        this.privacyCallback = undefined;
     }
     authStepChanged(newAuthStep) {
         this.slideIsVisible = false;
@@ -95,19 +165,11 @@ const GxIdeSignInTeam = class {
         this.teamsChanged(this.teams);
     }
     render() {
-        var _a;
         return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("section", { class: "slide" }, index.h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
         }), index.h("div", { class: {
                 "slide__main": true,
                 "slide__main--visible": this.slideIsVisible
-            } }, index.h("div", { class: "slide__main-container" }, index.h("header", { class: "slide__main-header" }, index.h("img", { src: ICON_NEXT, alt: "" // decorative
-        }), index.h("h2", {
-            // Split the title into two spans for better styling
-            class: "slide__main-title"
-        }, index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart1), index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart2))), this.authStepInternal === "signIn" ? (index.h("div", { class: "slide__main-description" }, index.h("p", { hidden: true }, index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").descriptionText)), index.h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.byContinuingText, index.h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.byContinuingCallBackText)))) : ([
-            index.h("div", { class: "slide__select-team-description" }, index.h("p", { class: "text-body-highlighted-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.infoMessage)),
-            index.h("div", { class: "field-group" }, index.h("div", { class: "field field-block" }, index.h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").teams), index.h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_chSelectTeamEl, el, "f")) })))
-        ]), index.h("div", null, index.h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeSignInTeam_authStepCallback, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].buttonCaption)))))));
+            } }, index.h("div", { class: "slide__main-container" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateStepRender, "f").call(this))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/sign-in-team"]; }
     get el() { return index.getElement(this); }
@@ -116,7 +178,7 @@ const GxIdeSignInTeam = class {
         "teams": ["teamsChanged"]
     }; }
 };
-_GxIdeSignInTeam_componentLocale = new WeakMap(), _GxIdeSignInTeam_userTeamsModel = new WeakMap(), _GxIdeSignInTeam_chSelectTeamEl = new WeakMap(), _GxIdeSignInTeam_switchStepTransitionTime = new WeakMap(), _GxIdeSignInTeam_authStepCallback = new WeakMap(), _GxIdeSignInTeam_continueHandler = new WeakMap();
+_GxIdeSignInTeam_componentLocale = new WeakMap(), _GxIdeSignInTeam_userTeamsModel = new WeakMap(), _GxIdeSignInTeam_chSelectTeamEl = new WeakMap(), _GxIdeSignInTeam_switchStepTransitionTime = new WeakMap(), _GxIdeSignInTeam_termsAndConditionsCheckboxEl = new WeakMap(), _GxIdeSignInTeam_privacyPolicyCheckboxEl = new WeakMap(), _GxIdeSignInTeam_authStepCallback = new WeakMap(), _GxIdeSignInTeam_continueHandler = new WeakMap(), _GxIdeSignInTeam_renderStepHeader = new WeakMap(), _GxIdeSignInTeam_renderStepFooter = new WeakMap(), _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted = new WeakMap(), _GxIdeSignInTeam_termsAndConditionsClickedHandler = new WeakMap(), _GxIdeSignInTeam_privacyPolicyClickedHandler = new WeakMap(), _GxIdeSignInTeam_evaluateStepRender = new WeakMap();
 GxIdeSignInTeam.style = signInTeamCss;
 exports.gx_ide_sign_in_team = GxIdeSignInTeam;

package/dist/cjs/gx-ide-sign-in-team.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-sign-in-team.entry.cjs.js","mappings":"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","names":["getAssetPath","Locale","h","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 padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n }\n\n &__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\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.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","// 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-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\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 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 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 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 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 <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>\n {this.#componentLocale[this.authStepInternal].titlePart1}\n </span>\n <span>\n {this.#componentLocale[this.authStepInternal].titlePart2}\n </span>\n </h2>\n </header>\n\n {this.authStepInternal === \"signIn\" ? (\n <div class=\"slide__main-description\">\n <p hidden>\n <span>{this.#componentLocale.descriptionText}</span>\n </p>\n <span>\n {this.#componentLocale.signIn.byContinuingText}\n <a class=\"terms-conditions\" onClick={this.termsCallback}>\n {this.#componentLocale.signIn.byContinuingCallBackText}\n </a>\n </span>\n </div>\n ) : (\n [\n <div class=\"slide__select-team-description\">\n <p class=\"text-body-highlighted-l\">\n {this.#componentLocale.selectUserTeam.infoMessage}\n </p>\n </div>,\n\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={this.#userTeamsModel[0]?.value}\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>\n ]\n )}\n\n <div>\n <button\n class=\"button-primary main-btn\"\n onClick={this.#authStepCallback}\n >\n {this.#componentLocale[this.authStepInternal].buttonCaption}\n </button>\n </div>\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type AuthStep = \"signIn\" \| \"selectUserTeam\";\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 padding: var(--mer-spacing--xl);\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(--mer-surface__elevation--01);\n border-radius: var(--mer-spacing--md);\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: var(--mer-spacing--3xl);\n transform: translateY(var(--mer-spacing--2xs));\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(--mer-spacing--lg);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n }\n\n &__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\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\"\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=\"text-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 <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 && this.#termsAndConditionsClickedHandler\n }\n >\n {this.#componentLocale.agreement.termsAndConditionsLink}\n </span>\n </label>\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 <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 </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=\"text-body-highlighted-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/cjs/gx-ide-ww-attributes.cjs.entry.js ADDED Viewed

@@ -0,0 +1,244 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-caaa95cf.js');
+const MERCURY_ASSETS = require('./MERCURY_ASSETS-27fcab57.js');
+const config = require('./config-b21feeee.js');
+const locale = require('./locale-ff30a5f3.js');
+const mapOptionsToComboBoxItemModel = (options) => {
+    return options.map(option => {
+        var _a;
+        return {
+            value: option.id,
+            caption: option.label,
+            startImgSrc: (_a = option.iconName) !== null && _a !== void 0 ? _a : ""
+        };
+    });
+};
+const wwAttributesCss = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.header{grid-template:\"name type\" max-content \"object object\" max-content;grid-template-columns:1fr 1fr}.name__field{grid-area:name}.name__label{inline-size:40px}.type__field{grid-area:type}.more__btn{grid-area:more;inline-size:64px}.object-selector__field{grid-area:object}.main{overflow:auto}ch-tabular-grid.tabular-grid--empty::part(main){overflow:hidden}ch-tabular-grid-rowset-empty{position:relative}.tabular-grid-row ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.matching-attributes{margin:0}";
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeWWAttributes__componentLocale, _GxIdeWWAttributes_chGridEl, _GxIdeWWAttributes_contextMenuCallbackHandler, _GxIdeWWAttributes_deleteSelectionCallbackHandle, _GxIdeWWAttributes_deselectAll, _GxIdeWWAttributes_getAttributes, _GxIdeWWAttributes_listenChanges, _GxIdeWWAttributes_openSelectionCallbackHandle, _GxIdeWWAttributes_entityCallbackHandler, _GxIdeWWAttributes_entityValueChangedHandler, _GxIdeWWAttributes_renderAttributesGrid, _GxIdeWWAttributes_evaluateAttributesGridContent, _GxIdeWWAttributes_renderFilter, _GxIdeWWAttributes_selectAll, _GxIdeWWAttributes_nameInputHandler, _GxIdeWWAttributes_typeInputHandler;
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "components/edit",
+    "components/combo-box",
+    "components/tabular-grid",
+    "components/icon",
+    "utils/form",
+    "utils/layout",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+const FILTER_ICON = MERCURY_ASSETS.getIconPath({
+    category: "window-tools",
+    name: "filter",
+    colorType: "on-elevation"
+});
+const GxIdeWWAttributes = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Component hard-coded strings translations.
+         */
+        _GxIdeWWAttributes__componentLocale.set(this, void 0);
+        /* References needed to collect data */
+        _GxIdeWWAttributes_chGridEl.set(this, void 0);
+        _GxIdeWWAttributes_contextMenuCallbackHandler.set(this, (ev) => {
+            this.contextMenuCallback({
+                selection: this.selectedAttributesIds,
+                clientX: ev.clientX,
+                clientY: ev.clientY
+            });
+        });
+        _GxIdeWWAttributes_deleteSelectionCallbackHandle.set(this, () => {
+            this.deleteSelectionCallback(this.selectedAttributesIds);
+        });
+        _GxIdeWWAttributes_deselectAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_chGridEl, "f").selectAllRows(false);
+        });
+        _GxIdeWWAttributes_getAttributes.set(this, () => {
+            var _a;
+            this.loading = true;
+            const filters = {
+                name: this.name.trim(),
+                type: this.type,
+                object: (_a = this.object) === null || _a === void 0 ? void 0 : _a.id
+            };
+            this.loadCallback(filters).then((items) => {
+                var _a;
+                this.attributes = items;
+                if (((_a = this.selectedAttributesIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    this.selectedAttributesIds = [];
+                    __classPrivateFieldGet(this, _GxIdeWWAttributes_deselectAll, "f").call(this);
+                }
+                this.loading = false;
+            });
+        });
+        _GxIdeWWAttributes_listenChanges.set(this, () => {
+            // for grid selection
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_chGridEl, "f").addEventListener("selectionChanged", (ev) => {
+                this.selectedAttributesIds = ev.detail.rowsId;
+                this.selectionChangeCallback(this.selectedAttributesIds);
+            });
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_chGridEl, "f").addEventListener("contextmenu", (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                __classPrivateFieldGet(this, _GxIdeWWAttributes_contextMenuCallbackHandler, "f").call(this, ev);
+            });
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_chGridEl, "f").addEventListener("rowDoubleClicked", () => {
+                __classPrivateFieldGet(this, _GxIdeWWAttributes_openSelectionCallbackHandle, "f").call(this);
+            });
+        });
+        _GxIdeWWAttributes_openSelectionCallbackHandle.set(this, () => {
+            this.openSelectionCallback(this.selectedAttributesIds);
+        });
+        _GxIdeWWAttributes_entityCallbackHandler.set(this, async () => {
+            const result = await this.objectActionCallback();
+            this.object = {
+                id: result.id,
+                name: result.name,
+                iconSrc: result.iconSrc
+            };
+            return new Promise(resolve => {
+                resolve(null);
+            });
+        });
+        _GxIdeWWAttributes_entityValueChangedHandler.set(this, (event) => {
+            this.object = event.detail;
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_getAttributes, "f").call(this);
+        });
+        _GxIdeWWAttributes_renderAttributesGrid.set(this, () => {
+            var _a;
+            const tabularGridEmpty = ((_a = this.attributes) === null || _a === void 0 ? void 0 : _a.length) === 0 || !this.attributes;
+            return (index.h("ch-tabular-grid", { class: {
+                    "tabular-grid": true,
+                    "tabular-grid--empty": tabularGridEmpty,
+                    "main": true
+                }, ref: (el) => (__classPrivateFieldSet(this, _GxIdeWWAttributes_chGridEl, el, "f")), "row-selection-mode": "multiple", part: "ch-grid-attributes" }, index.h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, index.h("ch-tabular-grid-column", { "column-name": "", "column-name-position": "text", settingable: false, size: config.config.tabularGrid.colSize.maxContent, class: "tabular-grid-column" }), index.h("ch-tabular-grid-column", { "column-name": __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").tableHead.name, "column-name-position": "text", size: config.config.tabularGrid.colSize.auto, class: "tabular-grid-column", settingable: false }), index.h("ch-tabular-grid-column", { "column-name": __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").tableHead.type, "column-name-position": "text", class: "tabular-grid-column", size: config.config.tabularGrid.colSize.auto, settingable: false }), index.h("ch-tabular-grid-column", { "column-name": __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").tableHead.description, "column-name-position": "text", size: config.config.tabularGrid.colSize.auto, class: "tabular-grid-column", settingable: false })), __classPrivateFieldGet(this, _GxIdeWWAttributes_evaluateAttributesGridContent, "f").call(this)));
+        });
+        _GxIdeWWAttributes_evaluateAttributesGridContent.set(this, () => {
+            if (this.loading) {
+                return (index.h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, index.h("ch-tabular-grid-rowset-empty", null, index.h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").loader.description, show: true }))));
+            }
+            else if (this.attributes.length) {
+                return (index.h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.attributes.map((attr) => (index.h("ch-tabular-grid-row", { class: "tabular-grid-row", rowid: attr.id }, index.h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, index.h("ch-image", { class: "icon-sm", src: attr.icon })), index.h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, attr.name), index.h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, attr.type), index.h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, attr.description))))));
+            }
+            else {
+                // filter returned none
+                return (index.h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, index.h("ch-tabular-grid-rowset-empty", null, index.h("gx-ide-empty-state", { stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").emptyStateTitle, isAnimated: true }))));
+            }
+        });
+        _GxIdeWWAttributes_renderFilter.set(this, () => {
+            var _a;
+            return (index.h("header", { class: "header field-group control-header-with-border spacing-body" }, index.h("div", { class: "field field-inline name__field" }, index.h("label", { class: "label name__label", htmlFor: "name" }, __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").filter.name), index.h("ch-edit", {
+                // Name
+                id: "name", class: "input", value: this.name, debounce: 300, onInput: __classPrivateFieldGet(this, _GxIdeWWAttributes_nameInputHandler, "f"), part: "filter-name"
+            })), index.h("div", { class: "field field-inline type__field" }, index.h("label", { class: "label", htmlFor: "type" }, __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").filter.type), index.h("ch-combo-box-render", {
+                // Type
+                id: "type", class: "combo-box", disabled: !this.types, value: this.type, model: mapOptionsToComboBoxItemModel((_a = this.types) !== null && _a !== void 0 ? _a : []), part: "filter-type", onInput: __classPrivateFieldGet(this, _GxIdeWWAttributes_typeInputHandler, "f")
+            })), index.h("div", { class: "field field-inline object-selector__field" }, index.h("label", { class: "label", htmlFor: "object-selector" }, __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").filter.object), index.h("gx-ide-entity-selector", {
+                // Object
+                id: "object-selector", value: this.object, labelPosition: "none", defaultValue: null, selectEntityCallback: __classPrivateFieldGet(this, _GxIdeWWAttributes_entityCallbackHandler, "f"), onValueChanged: __classPrivateFieldGet(this, _GxIdeWWAttributes_entityValueChangedHandler, "f"), part: "filter-module-folder"
+            }))));
+        });
+        _GxIdeWWAttributes_selectAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_chGridEl, "f").selectAllRows();
+        });
+        _GxIdeWWAttributes_nameInputHandler.set(this, (e) => {
+            this.name = e.detail.trim();
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_getAttributes, "f").call(this);
+        });
+        _GxIdeWWAttributes_typeInputHandler.set(this, (e) => {
+            this.type = e.detail;
+            __classPrivateFieldGet(this, _GxIdeWWAttributes_getAttributes, "f").call(this);
+        });
+        this.attributes = undefined;
+        this.selectedAttributesIds = [];
+        this.filterMore = false;
+        this.name = "";
+        this.loading = true;
+        this.object = undefined;
+        this.type = undefined;
+        this.contextMenuCallback = undefined;
+        this.deleteSelectionCallback = undefined;
+        this.loadCallback = undefined;
+        this.objectActionCallback = undefined;
+        this.objects = undefined;
+        this.openSelectionCallback = undefined;
+        this.selectionChangeCallback = undefined;
+        this.types = undefined;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeWWAttributes__componentLocale, await locale.Locale.getComponentStrings(this.el), "f");
+    }
+    componentDidLoad() {
+        __classPrivateFieldGet(this, _GxIdeWWAttributes_listenChanges, "f").call(this);
+        this.type = this.types[0].id; // before #getAttributes
+        __classPrivateFieldGet(this, _GxIdeWWAttributes_getAttributes, "f").call(this);
+    }
+    keyDownHandler(eventInfo) {
+        if (document.activeElement === this.el) {
+            switch (eventInfo.key) {
+                case "Enter":
+                    __classPrivateFieldGet(this, _GxIdeWWAttributes_openSelectionCallbackHandle, "f").call(this);
+                    break;
+                case "Delete":
+                    __classPrivateFieldGet(this, _GxIdeWWAttributes_deleteSelectionCallbackHandle, "f").call(this);
+                    break;
+            }
+        }
+    }
+    /**
+     * Reloads the view, refreshing the filters and attributes table.
+     */
+    async reload() {
+        this.name = "";
+        this.type = this.types[0].id;
+        this.object = null;
+        __classPrivateFieldGet(this, _GxIdeWWAttributes_getAttributes, "f").call(this);
+    }
+    /**
+     * Validate necessary data input
+     */
+    async validate() {
+        const isValid = true;
+        return isValid;
+    }
+    render() {
+        var _a, _b;
+        const btnDisabled = !this.attributes || this.attributes.length === 0;
+        const matchingAttributesLabel = ((_a = this.attributes) === null || _a === void 0 ? void 0 : _a.length) === 1
+            ? __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").matchingAttribute
+            : __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").matchingAttributes;
+        const attributesLength = ((_b = this.attributes) === null || _b === void 0 ? void 0 : _b.length) || 0;
+        return (index.h(index.Host, { class: "widget" }, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("section", { class: "section" }, __classPrivateFieldGet(this, _GxIdeWWAttributes_renderFilter, "f").call(this), __classPrivateFieldGet(this, _GxIdeWWAttributes_renderAttributesGrid, "f").call(this), index.h("footer", { class: "control-footer control-footer-with-border spacing-body-block-end spacing-body-inline control-footer-space-between" }, index.h("p", { class: "text-body-regular-s matching-attributes" }, `${attributesLength} ${matchingAttributesLabel}`), index.h("button", { id: "button-select-all", class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeWWAttributes_selectAll, "f"), disabled: btnDisabled, part: "button button--select-all" }, __classPrivateFieldGet(this, _GxIdeWWAttributes__componentLocale, "f").footer.btnSelectAll)))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/ww-attributes"]; }
+    get el() { return index.getElement(this); }
+};
+_GxIdeWWAttributes__componentLocale = new WeakMap(), _GxIdeWWAttributes_chGridEl = new WeakMap(), _GxIdeWWAttributes_contextMenuCallbackHandler = new WeakMap(), _GxIdeWWAttributes_deleteSelectionCallbackHandle = new WeakMap(), _GxIdeWWAttributes_deselectAll = new WeakMap(), _GxIdeWWAttributes_getAttributes = new WeakMap(), _GxIdeWWAttributes_listenChanges = new WeakMap(), _GxIdeWWAttributes_openSelectionCallbackHandle = new WeakMap(), _GxIdeWWAttributes_entityCallbackHandler = new WeakMap(), _GxIdeWWAttributes_entityValueChangedHandler = new WeakMap(), _GxIdeWWAttributes_renderAttributesGrid = new WeakMap(), _GxIdeWWAttributes_evaluateAttributesGridContent = new WeakMap(), _GxIdeWWAttributes_renderFilter = new WeakMap(), _GxIdeWWAttributes_selectAll = new WeakMap(), _GxIdeWWAttributes_nameInputHandler = new WeakMap(), _GxIdeWWAttributes_typeInputHandler = new WeakMap();
+GxIdeWWAttributes.style = wwAttributesCss;
+exports.gx_ide_ww_attributes = GxIdeWWAttributes;
+//# sourceMappingURL=gx-ide-ww-attributes.cjs.entry.js.map