@genexus/genexus-ide-ui 3.2.10 → 3.2.12

package/dist/components/gx-ide-db-properties-configurator.js

@@ -0,0 +1,183 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './mer-animated-dots.js';
+import 'lit';
+import 'lit/directives/when.js';
+import 'lit/directives/if-defined.js';
+import { L as Locale } from './locale.js';
+import { c as config } from './config.js';
+
+const dbPropertiesConfiguratorCss = "button.button-secondary{border-color:var(--color-border-neutral-default)}:host{display:grid;block-size:100%;overflow:hidden;grid-template-rows:max-content 1fr max-content;background-color:var(--color-accent-surface-elevation-1);color:var(--color-text-neutral-default)}.section{display:contents}.hero{display:flex;align-items:flex-start;gap:var(--spacing-gap-xl);padding-block:var(--spacing-padding-l);padding-inline:var(--spacing-padding-l);border-block-end:var(--size-1) solid var(--color-border-surface-on-elevation-1)}.hero__text{flex:1;min-inline-size:0}.hero__title{margin:0;color:var(--color-text-neutral-default)}.hero__description{margin-block:var(--spacing-gap-xs) 0;margin-inline:0;color:var(--color-text-neutral-disabled);text-wrap:pretty}.hero__badge{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--border-radius-m);background-color:var(--color-accent-item-hover);color:var(--color-icon-primary-default)}.main{overflow:auto;display:flex;flex-direction:column;gap:var(--spacing-gap-xxl);padding-block:var(--spacing-padding-l);padding-inline:var(--spacing-padding-l)}.field-section{display:flex;flex-direction:column;gap:var(--spacing-gap-l)}.field-section+.field-section{padding-block-start:var(--spacing-padding-xl);border-block-start:var(--size-1) solid var(--color-border-surface-on-elevation-1)}.field-section__head{display:flex;align-items:baseline;gap:var(--spacing-gap-m)}.field-section__title{font-family:var(--font-family-body);font-weight:var(--font-style-semi-bold);font-size:var(--font-size-caption-m);letter-spacing:0.06em;text-transform:uppercase;color:var(--color-text-neutral-neutral)}.fields{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--spacing-gap-l)}.field--full{grid-column:1/-1}.field--checkbox{display:flex;flex-direction:column;gap:var(--spacing-gap-xs)}.field--checkbox .field__row{display:flex;align-items:center;gap:var(--spacing-gap-xs)}.field--checkbox .label{margin:0;cursor:pointer}.field--checkbox .field__hint{margin:0;margin-inline-start:calc(var(--spacing-gap-m) + var(--spacing-gap-m));color:var(--color-text-neutral-disabled);text-wrap:pretty}.footer{padding-block:var(--spacing-padding-m);padding-inline:var(--spacing-padding-l)}";
+
+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 _GxIdeDbPropertiesConfigurator_componentLocale, _GxIdeDbPropertiesConfigurator_getValue, _GxIdeDbPropertiesConfigurator_hasPendingRequired, _GxIdeDbPropertiesConfigurator_buildComboModel, _GxIdeDbPropertiesConfigurator_isAuthField, _GxIdeDbPropertiesConfigurator_hasTrustedConnection, _GxIdeDbPropertiesConfigurator_valueChangeHandler, _GxIdeDbPropertiesConfigurator_cancelButtonClickedHandler, _GxIdeDbPropertiesConfigurator_confirmButtonClickedHandler, _GxIdeDbPropertiesConfigurator_renderControl, _GxIdeDbPropertiesConfigurator_renderField, _GxIdeDbPropertiesConfigurator_renderSection;
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "components/combo-box",
+    "components/edit",
+    "components/icon",
+    "utils/form",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+const DATABASE_ICON = getIconPath({
+    category: "system",
+    name: "database",
+    colorType: "primary"
+});
+/**
+ * Name of the property that toggles integrated security. Its presence in
+ * `properties` is what drives the rendering of the Authentication section.
+ */
+const TRUSTED_CONNECTION = "TRUSTED_CONNECTION";
+const USER_ID = "USER_ID";
+const USER_PASSWORD = "USER_PASSWORD";
+/** Category that groups the authentication-related fields. */
+const AUTH_CATEGORY = "authentication";
+const GxIdeDbPropertiesConfigurator$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeDbPropertiesConfigurator extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeDbPropertiesConfigurator_componentLocale.set(this, void 0);
+        _GxIdeDbPropertiesConfigurator_getValue.set(this, (field) => { var _a; return (_a = field.value) !== null && _a !== void 0 ? _a : ""; });
+        _GxIdeDbPropertiesConfigurator_hasPendingRequired.set(this, () => {
+            var _a;
+            return ((_a = this.properties) !== null && _a !== void 0 ? _a : []).some(field => field.missing && __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_getValue, "f").call(this, field).trim() === "");
+        });
+        _GxIdeDbPropertiesConfigurator_buildComboModel.set(this, (field) => { var _a; return ((_a = field.standardValues) !== null && _a !== void 0 ? _a : []).map(value => ({ value, caption: value })); });
+        _GxIdeDbPropertiesConfigurator_isAuthField.set(this, (field) => {
+            var _a;
+            return field.name === TRUSTED_CONNECTION ||
+                field.name === USER_ID ||
+                field.name === USER_PASSWORD ||
+                ((_a = field.category) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === AUTH_CATEGORY;
+        });
+        /** Whether the host sent the TRUSTED_CONNECTION property. Only then is the
+         * Authentication section rendered. */
+        _GxIdeDbPropertiesConfigurator_hasTrustedConnection.set(this, () => { var _a; return ((_a = this.properties) !== null && _a !== void 0 ? _a : []).some(field => field.name === TRUSTED_CONNECTION); });
+        _GxIdeDbPropertiesConfigurator_valueChangeHandler.set(this, (name) => (event) => {
+            var _a, _b;
+            const detail = event.detail;
+            const value = typeof detail === "string"
+                ? detail
+                : ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+            this.propertyChangeCallback(name, value);
+        });
+        _GxIdeDbPropertiesConfigurator_cancelButtonClickedHandler.set(this, () => {
+            var _a;
+            (_a = this.cancelCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        });
+        _GxIdeDbPropertiesConfigurator_confirmButtonClickedHandler.set(this, () => {
+            var _a;
+            (_a = this.confirmCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        });
+        // #region Renders
+        _GxIdeDbPropertiesConfigurator_renderControl.set(this, (field) => {
+            const fieldId = `field-${field.name}`;
+            const value = __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_getValue, "f").call(this, field);
+            switch (field.control) {
+                case "password":
+                    return (h("ch-edit", { id: fieldId, class: "input", type: "password", showPasswordButton: true, debounce: config.inputDebounce, value: value, onInput: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name) }));
+                case "combo":
+                    return (h("ch-combo-box-render", { id: fieldId, class: "combo-box", value: value, model: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_buildComboModel, "f").call(this, field), onInput: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name), onChange: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name) }));
+                case "checkbox":
+                    return (h("ch-checkbox", { id: fieldId, class: "checkbox", value: value, checkedValue: "Yes", unCheckedValue: "No", onInput: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name) }));
+                case "combo-editable":
+                    return (h("ch-combo-box-render", { id: fieldId, class: "combo-box", suggest: true, suggestDebounce: config.inputDebounce, value: value, model: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_buildComboModel, "f").call(this, field), onInput: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name), onChange: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name), part: `combo-box combo-box--editable combo-box--${field.name}` }));
+                case "custom":
+                case "readonly":
+                    return (h("ch-edit", { id: fieldId, class: "input", readonly: true, value: value, part: `input input--${field.control} input--${field.name}` }));
+                // "text"
+                default:
+                    return (h("ch-edit", { id: fieldId, class: "input", debounce: config.inputDebounce, value: value, onInput: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_valueChangeHandler, "f").call(this, field.name), part: `input input--text input--${field.name}` }));
+            }
+        });
+        _GxIdeDbPropertiesConfigurator_renderField.set(this, (field) => {
+            const fieldId = `field-${field.name}`;
+            const isReadonly = field.control === "readonly" || field.control === "custom";
+            const isCheckbox = field.control === "checkbox";
+            if (isCheckbox) {
+                return (h("div", { class: "field field--checkbox field--full", key: field.name }, h("div", { class: "field__row" }, __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_renderControl, "f").call(this, field), h("label", { class: "label", htmlFor: fieldId }, field.label)), field.description && (h("p", { class: "field__hint body-regular-s" }, field.description))));
+            }
+            return (h("div", { class: "field field-block", key: field.name }, h("label", { class: { "label": true, "label--disabled": isReadonly }, htmlFor: fieldId }, field.label), __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_renderControl, "f").call(this, field)));
+        });
+        _GxIdeDbPropertiesConfigurator_renderSection.set(this, (title, fields) => (h("section", { class: "field-section" }, h("div", { class: "field-section__head" }, h("span", { class: "field-section__title" }, title)), h("div", { class: "fields" }, fields.map(__classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_renderField, "f"))))));
+        this.properties = [];
+        this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
+        this.propertyChangeCallback = undefined;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeDbPropertiesConfigurator_componentLocale, await Locale.getComponentStrings(this.el), "f");
+    }
+    // #endregion Renders
+    render() {
+        var _a;
+        const title = __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_componentLocale, "f").header.title;
+        const description = __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_componentLocale, "f").header.description;
+        const sections = __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_componentLocale, "f").sections;
+        const allFields = (_a = this.properties) !== null && _a !== void 0 ? _a : [];
+        const hasAuthSection = __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_hasTrustedConnection, "f").call(this);
+        // The Authentication section is only rendered when TRUSTED_CONNECTION is
+        // present; otherwise every field stays in the always-present Connection
+        // section so nothing is dropped.
+        const authFields = hasAuthSection
+            ? allFields.filter(__classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_isAuthField, "f"))
+            : [];
+        const connectionFields = hasAuthSection
+            ? allFields.filter(field => !__classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_isAuthField, "f").call(this, field))
+            : allFields;
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("div", { class: "hero" }, h("div", { class: "hero__text" }, h("h1", { class: "hero__title subtitle-semi-bold-l" }, title), description && (h("p", { class: "hero__description body-regular-s" }, description))), h("div", { class: "hero__badge", "aria-hidden": "true" }, h("ch-image", { class: "icon-xl", src: DATABASE_ICON }))), h("div", { class: "main scrollable" }, connectionFields.length > 0 &&
+            __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_renderSection, "f").call(this, sections.connection, connectionFields), hasAuthSection &&
+            authFields.length > 0 &&
+            __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_renderSection, "f").call(this, sections.authentication, authFields)), h("footer", { class: "dialog-footer-with-border footer" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", id: "button-cancel", type: "button", onClick: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_cancelButtonClickedHandler, "f"), part: "button-cancel" }, __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_componentLocale, "f").footer.btnCancel), h("button", { class: "button-primary", id: "button-confirm", type: "button", disabled: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_hasPendingRequired, "f").call(this), onClick: __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_confirmButtonClickedHandler, "f"), part: "button-confirm" }, __classPrivateFieldGet(this, _GxIdeDbPropertiesConfigurator_componentLocale, "f").footer.btnConfirm))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/db-properties-configurator"]; }
+    get el() { return this; }
+    static get style() { return dbPropertiesConfiguratorCss; }
+}, [1, "gx-ide-db-properties-configurator", {
+        "properties": [16],
+        "cancelCallback": [16],
+        "confirmCallback": [16],
+        "propertyChangeCallback": [16]
+    }]);
+_GxIdeDbPropertiesConfigurator_componentLocale = new WeakMap(), _GxIdeDbPropertiesConfigurator_getValue = new WeakMap(), _GxIdeDbPropertiesConfigurator_hasPendingRequired = new WeakMap(), _GxIdeDbPropertiesConfigurator_buildComboModel = new WeakMap(), _GxIdeDbPropertiesConfigurator_isAuthField = new WeakMap(), _GxIdeDbPropertiesConfigurator_hasTrustedConnection = new WeakMap(), _GxIdeDbPropertiesConfigurator_valueChangeHandler = new WeakMap(), _GxIdeDbPropertiesConfigurator_cancelButtonClickedHandler = new WeakMap(), _GxIdeDbPropertiesConfigurator_confirmButtonClickedHandler = new WeakMap(), _GxIdeDbPropertiesConfigurator_renderControl = new WeakMap(), _GxIdeDbPropertiesConfigurator_renderField = new WeakMap(), _GxIdeDbPropertiesConfigurator_renderSection = new WeakMap();
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-db-properties-configurator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-db-properties-configurator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxIdeDbPropertiesConfigurator$1);
+            }
+            break;
+    } });
+}
+
+const GxIdeDbPropertiesConfigurator = GxIdeDbPropertiesConfigurator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeDbPropertiesConfigurator, defineCustomElement };
+
+//# sourceMappingURL=gx-ide-db-properties-configurator.js.map

package/dist/components/gx-ide-db-properties-configurator.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-db-properties-configurator.js","mappings":";;;;;;;;AAAA,MAAM,2BAA2B,GAAG,4sEAA4sE;;;;;;;;;;;;;;;;;;;ACQhvE,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,mBAAmB;IACnB,sBAAsB;IACtB,iBAAiB;IACjB,iBAAiB;IACjB,YAAY;IACZ,cAAc;IACd,kBAAkB;IAClB,eAAe;IACf,qBAAqB;CACtB,CAAC;AAEF,MAAM,aAAa,GAAG,WAAW,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,UAAU;IAChB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEH;;;;AAIA,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AAChD,MAAM,OAAO,GAAG,SAAS,CAAC;AAC1B,MAAM,aAAa,GAAG,eAAe,CAAC;AAEtC;AACA,MAAM,aAAa,GAAG,gBAAgB,CAAC;MAQ1BA,+BAA6B;;;;;;QAExC,iEAAsB;QAgCtB,kDAAY,CAAC,KAAsB,eAAa,OAAA,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAA,EAAA,EAAC;QAElE,4DAAsB;;YACpB,OAAA,CAAC,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,EAAE,IAAI,CAC1B,KAAK,IAAI,KAAK,CAAC,OAAO,IAAI,uBAAA,IAAI,+CAAU,MAAd,IAAI,EAAW,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAC9D,CAAA;SAAA,EAAC;QAEJ,yDAAmB,CAAC,KAAsB,eACxC,OAAA,CAAC,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,EAAE,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA,EAAA,EAAC;QAEzE,qDAAe,CAAC,KAAsB;;YACpC,OAAA,KAAK,CAAC,IAAI,KAAK,kBAAkB;gBACjC,KAAK,CAAC,IAAI,KAAK,OAAO;gBACtB,KAAK,CAAC,IAAI,KAAK,aAAa;gBAC5B,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,WAAW,EAAE,MAAK,aAAa,CAAA;SAAA,EAAC;;;QAIlD,8DAAwB,gBACtB,OAAA,CAAC,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAkB,CAAC,CAAA,EAAA,EAAC;QAE3E,4DACE,CAAC,IAAY,KAAK,CAAC,KAAuC;;YACxD,MAAM,MAAM,GAAI,KAA6B,CAAC,MAAM,CAAC;YACrD,MAAM,KAAK,GACT,OAAO,MAAM,KAAK,QAAQ;kBACtB,MAAM;mBACL,MAAA,MAAC,KAAK,CAAC,MAA4B,0CAAE,KAAK,mCAAI,EAAE,CAAC,CAAC;YACzD,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C,EAAC;QAEJ,oEAA8B;;YAC5B,MAAA,IAAI,CAAC,cAAc,oDAAI,CAAC;SACzB,EAAC;QAEF,qEAA+B;;YAC7B,MAAA,IAAI,CAAC,eAAe,oDAAI,CAAC;SAC1B,EAAC;;QAIF,uDAAiB,CAAC,KAAsB;YACtC,MAAM,OAAO,GAAG,SAAS,KAAK,CAAC,IAAI,EAAE,CAAC;YACtC,MAAM,KAAK,GAAG,uBAAA,IAAI,+CAAU,MAAd,IAAI,EAAW,KAAK,CAAC,CAAC;YAEpC,QAAQ,KAAK,CAAC,OAAO;gBACnB,KAAK,UAAU;oBACb,QACE,eACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,UAAU,EACf,kBAAkB,QAClB,QAAQ,EAAE,MAAM,CAAC,aAAa,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,GACpC,EACX;gBAEJ,KAAK,OAAO;oBACV,QACE,2BACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,uBAAA,IAAI,sDAAiB,MAArB,IAAI,EAAkB,KAAK,CAAC,EACnC,OAAO,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,EAC7C,QAAQ,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,GACzB,EACvB;gBAEJ,KAAK,UAAU;oBACb,QACE,mBACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAC,KAAK,EAClB,cAAc,EAAC,IAAI,EACnB,OAAO,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,GAChC,EACf;gBAEJ,KAAK,gBAAgB;oBACnB,QACE,2BACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,WAAW,EACjB,OAAO,QACP,eAAe,EAAE,MAAM,CAAC,aAAa,EACrC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,uBAAA,IAAI,sDAAiB,MAArB,IAAI,EAAkB,KAAK,CAAC,EACnC,OAAO,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,EAC7C,QAAQ,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,EAC9C,IAAI,EAAE,4CAA4C,KAAK,CAAC,IAAI,EAAE,GACzC,EACvB;gBAEJ,KAAK,QAAQ,CAAC;gBACd,KAAK,UAAU;oBACb,QACE,eACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,OAAO,EACb,QAAQ,QACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,gBAAgB,KAAK,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,EAAE,GACjD,EACX;;gBAGJ;oBACE,QACE,eACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,MAAM,CAAC,aAAa,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,EAAqB,KAAK,CAAC,IAAI,CAAC,EAC7C,IAAI,EAAE,4BAA4B,KAAK,CAAC,IAAI,EAAE,GACrC,EACX;aACL;SACF,EAAC;QAEF,qDAAe,CAAC,KAAsB;YACpC,MAAM,OAAO,GAAG,SAAS,KAAK,CAAC,IAAI,EAAE,CAAC;YACtC,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC;YAC7D,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC;YAEhD,IAAI,UAAU,EAAE;gBACd,QACE,WAAK,KAAK,EAAC,mCAAmC,EAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAC5D,WAAK,KAAK,EAAC,YAAY,IACpB,uBAAA,IAAI,oDAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,EAC3B,aAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,IAClC,KAAK,CAAC,KAAK,CACN,CACJ,EACL,KAAK,CAAC,WAAW,KAChB,SAAG,KAAK,EAAC,4BAA4B,IAAE,KAAK,CAAC,WAAW,CAAK,CAC9D,CACG,EACN;aACH;YAED,QACE,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAC5C,aACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,EACvD,OAAO,EAAE,OAAO,IAEf,KAAK,CAAC,KAAK,CACN,EAEP,uBAAA,IAAI,oDAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,CACvB,EACN;SACH,EAAC;QAEF,uDAAiB,CAAC,KAAa,EAAE,MAAyB,MACxD,eAAS,KAAK,EAAC,eAAe,IAC5B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,KAAK,EAAC,sBAAsB,IAAE,KAAK,CAAQ,CAC7C,EACN,WAAK,KAAK,EAAC,QAAQ,IAAE,MAAM,CAAC,GAAG,CAAC,uBAAA,IAAI,kDAAa,CAAC,CAAO,CACjD,CACX,EAAC;0BA/L+C,EAAE;;;;;IAmBnD,MAAM,iBAAiB;QACrB,uBAAA,IAAI,kDAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;;IA8KD,MAAM;;QACJ,MAAM,KAAK,GAAG,uBAAA,IAAI,sDAAiB,CAAC,MAAM,CAAC,KAAK,CAAC;QACjD,MAAM,WAAW,GAAG,uBAAA,IAAI,sDAAiB,CAAC,MAAM,CAAC,WAAW,CAAC;QAC7D,MAAM,QAAQ,GAAG,uBAAA,IAAI,sDAAiB,CAAC,QAAQ,CAAC;QAEhD,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,CAAC;QACxC,MAAM,cAAc,GAAG,uBAAA,IAAI,2DAAsB,MAA1B,IAAI,CAAwB,CAAC;;;;QAKpD,MAAM,UAAU,GAAG,cAAc;cAC7B,SAAS,CAAC,MAAM,CAAC,uBAAA,IAAI,kDAAa,CAAC;cACnC,EAAE,CAAC;QACP,MAAM,gBAAgB,GAAG,cAAc;cACnC,SAAS,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,uBAAA,IAAI,kDAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC;cACpD,SAAS,CAAC;QAEd,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,IAClB,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,SAAS,IACtB,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,KAAK,EAAC,kCAAkC,IAAE,KAAK,CAAM,EACxD,WAAW,KACV,SAAG,KAAK,EAAC,kCAAkC,IAAE,WAAW,CAAK,CAC9D,CACG,EACN,WAAK,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,gBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,aAAa,GAAa,CACrD,CACF,EAEN,WAAK,KAAK,EAAC,iBAAiB,IACzB,gBAAgB,CAAC,MAAM,GAAG,CAAC;YAC1B,uBAAA,IAAI,oDAAe,MAAnB,IAAI,EAAgB,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAE3D,cAAc;YACb,UAAU,CAAC,MAAM,GAAG,CAAC;YACrB,uBAAA,IAAI,oDAAe,MAAnB,IAAI,EAAgB,QAAQ,CAAC,cAAc,EAAE,UAAU,CAAC,CACtD,EAEN,cAAQ,KAAK,EAAC,kCAAkC,IAC9C,WAAK,KAAK,EAAC,gBAAgB,IACzB,cACE,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAC,eAAe,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,uBAAA,IAAI,iEAA4B,EACzC,IAAI,EAAC,eAAe,IAEnB,uBAAA,IAAI,sDAAiB,CAAC,MAAM,CAAC,SAAS,CAChC,EACT,cACE,KAAK,EAAC,gBAAgB,EACtB,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,uBAAA,IAAI,yDAAoB,MAAxB,IAAI,CAAsB,EACpC,OAAO,EAAE,uBAAA,IAAI,kEAA6B,EAC1C,IAAI,EAAC,gBAAgB,IAEpB,uBAAA,IAAI,sDAAiB,CAAC,MAAM,CAAC,UAAU,CACjC,CACL,CACC,CACD,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxIdeDbPropertiesConfigurator"],"sources":["src/components/db-properties-configurator/db-properties-configurator.scss?tag=gx-ide-db-properties-configurator&encapsulation=shadow","src/components/db-properties-configurator/db-properties-configurator.tsx"],"sourcesContent":["@import \"../../global/temporary-mercury-overrides/_button.scss\";\n\n// The component reproduces the Mercury \"Set required properties\" connection\n// dialog. Real Mercury classes (.dialog-header-with-border, .field-group-\n// justified-end, .label, .input, .combo-box, .button-*, typography) come from\n// the loaded bundles; the rules below only add the scaffolding Mercury does\n// not define (hero banner, badge, close button, field help) using DS tokens.\n\n:host {\n  display: grid;\n  block-size: 100%;\n  overflow: hidden;\n  grid-template-rows: max-content 1fr max-content;\n  background-color: var(--color-accent-surface-elevation-1);\n  color: var(--color-text-neutral-default);\n}\n\n.section {\n  // section is just for semantics; the host owns the grid.\n  display: contents;\n}\n\n// #region Hero\n.hero {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--spacing-gap-xl);\n  padding-block: var(--spacing-padding-l);\n  padding-inline: var(--spacing-padding-l);\n  border-block-end: var(--size-1) solid\n    var(--color-border-surface-on-elevation-1);\n}\n\n.hero__text {\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.hero__title {\n  margin: 0;\n  color: var(--color-text-neutral-default);\n}\n\n.hero__description {\n  margin-block: var(--spacing-gap-xs) 0;\n  margin-inline: 0;\n  color: var(--color-text-neutral-disabled);\n  text-wrap: pretty;\n}\n\n.hero__badge {\n  flex: none;\n  display: grid;\n  place-items: center;\n  inline-size: 44px;\n  block-size: 44px;\n  border-radius: var(--border-radius-m);\n  background-color: var(--color-accent-item-hover);\n  color: var(--color-icon-primary-default);\n}\n// #endregion Hero\n\n// #region Body\n.main {\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-xxl);\n  padding-block: var(--spacing-padding-l);\n  padding-inline: var(--spacing-padding-l);\n}\n\n// Field section: a quiet uppercase header + its field grid. Sections after\n// the first get a divider so the body reads as structured groups.\n.field-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-l);\n}\n\n.field-section + .field-section {\n  padding-block-start: var(--spacing-padding-xl);\n  border-block-start: var(--size-1) solid\n    var(--color-border-surface-on-elevation-1);\n}\n\n.field-section__head {\n  display: flex;\n  align-items: baseline;\n  gap: var(--spacing-gap-m);\n}\n\n.field-section__title {\n  font-family: var(--font-family-body);\n  font-weight: var(--font-style-semi-bold);\n  font-size: var(--font-size-caption-m);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--color-text-neutral-neutral);\n}\n\n// Two-column field grid. Each field occupies one column; checkbox fields\n// (and any other field marked as full-width) span the entire row, forcing\n// the following fields to wrap onto the next row.\n.fields {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--spacing-gap-l);\n}\n\n.field--full {\n  grid-column: 1 / -1;\n}\n\n// Inline checkbox field: control + label on the same row, optional help text\n// flows below aligned with the label.\n.field--checkbox {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-xs);\n}\n\n.field--checkbox .field__row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs);\n}\n\n.field--checkbox .label {\n  margin: 0;\n  cursor: pointer;\n}\n\n// Help text below a checkbox, indented to align with the label past the box.\n.field--checkbox .field__hint {\n  margin: 0;\n  margin-inline-start: calc(var(--spacing-gap-m) + var(--spacing-gap-m));\n  color: var(--color-text-neutral-disabled);\n  text-wrap: pretty;\n}\n// #endregion Body\n\n// #region Footer\n.footer {\n  padding-block: var(--spacing-padding-m);\n  padding-inline: var(--spacing-padding-l);\n}\n// #endregion Footer\n","import { Component, Host, Prop, Element, h } from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/combo-box\",\n  \"components/edit\",\n  \"components/icon\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst DATABASE_ICON = getIconPath({\n  category: \"system\",\n  name: \"database\",\n  colorType: \"primary\"\n});\n\n/**\n * Name of the property that toggles integrated security. Its presence in\n * `properties` is what drives the rendering of the Authentication section.\n */\nconst TRUSTED_CONNECTION = \"TRUSTED_CONNECTION\";\nconst USER_ID = \"USER_ID\";\nconst USER_PASSWORD = \"USER_PASSWORD\";\n\n/** Category that groups the authentication-related fields. */\nconst AUTH_CATEGORY = \"authentication\";\n\n@Component({\n  tag: \"gx-ide-db-properties-configurator\",\n  styleUrl: \"db-properties-configurator.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/db-properties-configurator\"]\n})\nexport class GxIdeDbPropertiesConfigurator {\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeDbPropertiesConfiguratorElement;\n\n  /**\n   * The list of properties to configure. Acts as the single source of truth:\n   * the dialog reads each value from `DSPropertyField.value` and notifies the\n   * host of every edit through `propertyChangeCallback`.\n   */\n  @Prop() readonly properties: DSPropertyField[] = [];\n\n  /**\n   * Callback invoked when the user cancels the configuration.\n   */\n  @Prop() readonly cancelCallback!: CancelCallback;\n\n  /**\n   * Callback invoked when the user confirms the configuration.\n   */\n  @Prop() readonly confirmCallback!: ConfirmCallback;\n\n  /**\n   * Callback invoked on every input change. Receives the name of the\n   * property that changed and its new value. The host is expected to apply\n   * the change and push an updated `properties` array back to the component.\n   */\n  @Prop() readonly propertyChangeCallback!: PropertyChangeCallback;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  #getValue = (field: DSPropertyField): string => field.value ?? \"\";\n\n  #hasPendingRequired = (): boolean =>\n    (this.properties ?? []).some(\n      field => field.missing && this.#getValue(field).trim() === \"\"\n    );\n\n  #buildComboModel = (field: DSPropertyField): ComboBoxModel =>\n    (field.standardValues ?? []).map(value => ({ value, caption: value }));\n\n  #isAuthField = (field: DSPropertyField): boolean =>\n    field.name === TRUSTED_CONNECTION ||\n    field.name === USER_ID ||\n    field.name === USER_PASSWORD ||\n    field.category?.toLowerCase() === AUTH_CATEGORY;\n\n  /** Whether the host sent the TRUSTED_CONNECTION property. Only then is the\n   * Authentication section rendered. */\n  #hasTrustedConnection = (): boolean =>\n    (this.properties ?? []).some(field => field.name === TRUSTED_CONNECTION);\n\n  #valueChangeHandler =\n    (name: string) => (event: CustomEvent<string> | InputEvent) => {\n      const detail = (event as CustomEvent<string>).detail;\n      const value =\n        typeof detail === \"string\"\n          ? detail\n          : ((event.target as HTMLChEditElement)?.value ?? \"\");\n      this.propertyChangeCallback(name, value);\n    };\n\n  #cancelButtonClickedHandler = () => {\n    this.cancelCallback?.();\n  };\n\n  #confirmButtonClickedHandler = () => {\n    this.confirmCallback?.();\n  };\n\n  // #region Renders\n\n  #renderControl = (field: DSPropertyField) => {\n    const fieldId = `field-${field.name}`;\n    const value = this.#getValue(field);\n\n    switch (field.control) {\n      case \"password\":\n        return (\n          <ch-edit\n            id={fieldId}\n            class=\"input\"\n            type=\"password\"\n            showPasswordButton\n            debounce={config.inputDebounce}\n            value={value}\n            onInput={this.#valueChangeHandler(field.name)}\n          ></ch-edit>\n        );\n\n      case \"combo\":\n        return (\n          <ch-combo-box-render\n            id={fieldId}\n            class=\"combo-box\"\n            value={value}\n            model={this.#buildComboModel(field)}\n            onInput={this.#valueChangeHandler(field.name)}\n            onChange={this.#valueChangeHandler(field.name)}\n          ></ch-combo-box-render>\n        );\n\n      case \"checkbox\":\n        return (\n          <ch-checkbox\n            id={fieldId}\n            class=\"checkbox\"\n            value={value}\n            checkedValue=\"Yes\"\n            unCheckedValue=\"No\"\n            onInput={this.#valueChangeHandler(field.name)}\n          ></ch-checkbox>\n        );\n\n      case \"combo-editable\":\n        return (\n          <ch-combo-box-render\n            id={fieldId}\n            class=\"combo-box\"\n            suggest\n            suggestDebounce={config.inputDebounce}\n            value={value}\n            model={this.#buildComboModel(field)}\n            onInput={this.#valueChangeHandler(field.name)}\n            onChange={this.#valueChangeHandler(field.name)}\n            part={`combo-box combo-box--editable combo-box--${field.name}`}\n          ></ch-combo-box-render>\n        );\n\n      case \"custom\":\n      case \"readonly\":\n        return (\n          <ch-edit\n            id={fieldId}\n            class=\"input\"\n            readonly\n            value={value}\n            part={`input input--${field.control} input--${field.name}`}\n          ></ch-edit>\n        );\n\n      // \"text\"\n      default:\n        return (\n          <ch-edit\n            id={fieldId}\n            class=\"input\"\n            debounce={config.inputDebounce}\n            value={value}\n            onInput={this.#valueChangeHandler(field.name)}\n            part={`input input--text input--${field.name}`}\n          ></ch-edit>\n        );\n    }\n  };\n\n  #renderField = (field: DSPropertyField) => {\n    const fieldId = `field-${field.name}`;\n    const isReadonly =\n      field.control === \"readonly\" || field.control === \"custom\";\n    const isCheckbox = field.control === \"checkbox\";\n\n    if (isCheckbox) {\n      return (\n        <div class=\"field field--checkbox field--full\" key={field.name}>\n          <div class=\"field__row\">\n            {this.#renderControl(field)}\n            <label class=\"label\" htmlFor={fieldId}>\n              {field.label}\n            </label>\n          </div>\n          {field.description && (\n            <p class=\"field__hint body-regular-s\">{field.description}</p>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"field field-block\" key={field.name}>\n        <label\n          class={{ \"label\": true, \"label--disabled\": isReadonly }}\n          htmlFor={fieldId}\n        >\n          {field.label}\n        </label>\n\n        {this.#renderControl(field)}\n      </div>\n    );\n  };\n\n  #renderSection = (title: string, fields: DSPropertyField[]) => (\n    <section class=\"field-section\">\n      <div class=\"field-section__head\">\n        <span class=\"field-section__title\">{title}</span>\n      </div>\n      <div class=\"fields\">{fields.map(this.#renderField)}</div>\n    </section>\n  );\n\n  // #endregion Renders\n\n  render() {\n    const title = this.#componentLocale.header.title;\n    const description = this.#componentLocale.header.description;\n    const sections = this.#componentLocale.sections;\n\n    const allFields = this.properties ?? [];\n    const hasAuthSection = this.#hasTrustedConnection();\n\n    // The Authentication section is only rendered when TRUSTED_CONNECTION is\n    // present; otherwise every field stays in the always-present Connection\n    // section so nothing is dropped.\n    const authFields = hasAuthSection\n      ? allFields.filter(this.#isAuthField)\n      : [];\n    const connectionFields = hasAuthSection\n      ? allFields.filter(field => !this.#isAuthField(field))\n      : allFields;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <div class=\"hero\">\n            <div class=\"hero__text\">\n              <h1 class=\"hero__title subtitle-semi-bold-l\">{title}</h1>\n              {description && (\n                <p class=\"hero__description body-regular-s\">{description}</p>\n              )}\n            </div>\n            <div class=\"hero__badge\" aria-hidden=\"true\">\n              <ch-image class=\"icon-xl\" src={DATABASE_ICON}></ch-image>\n            </div>\n          </div>\n\n          <div class=\"main scrollable\">\n            {connectionFields.length > 0 &&\n              this.#renderSection(sections.connection, connectionFields)}\n\n            {hasAuthSection &&\n              authFields.length > 0 &&\n              this.#renderSection(sections.authentication, authFields)}\n          </div>\n\n          <footer class=\"dialog-footer-with-border footer\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                id=\"button-cancel\"\n                type=\"button\"\n                onClick={this.#cancelButtonClickedHandler}\n                part=\"button-cancel\"\n              >\n                {this.#componentLocale.footer.btnCancel}\n              </button>\n              <button\n                class=\"button-primary\"\n                id=\"button-confirm\"\n                type=\"button\"\n                disabled={this.#hasPendingRequired()}\n                onClick={this.#confirmButtonClickedHandler}\n                part=\"button-confirm\"\n              >\n                {this.#componentLocale.footer.btnConfirm}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type DSControlKind =\n  | \"checkbox\"\n  | \"text\"\n  | \"password\"\n  | \"combo\"\n  | \"combo-editable\"\n  | \"custom\"\n  | \"readonly\";\n\nexport interface DSPropertyField {\n  /** `PropertyData.name` — key used to set the property value. */\n  name: string;\n  /** `definition.displayName`. */\n  label: string;\n  /** `definition.description` (rendered below the control). */\n  description?: string;\n  /** `definition.category` (optional grouping). */\n  category?: string;\n\n  /** Control resolved by the host. */\n  control: DSControlKind;\n\n  /** `PropertyData.value` (masked when password). */\n  value: string;\n  /** `required && isDefault` (host detection). */\n  missing: boolean;\n\n  // combos:\n  /** `PropertyData.standardValues`. */\n  standardValues?: string[];\n  /** `PropertyData.isStandardValuesExclusive`. */\n  exclusive?: boolean;\n}\n\nexport type CancelCallback = () => void | Promise<void>;\n\nexport type ConfirmCallback = () => void | Promise<void>;\n\nexport type PropertyChangeCallback = (\n  name: string,\n  value: string\n) => void | Promise<void>;\n"],"version":3}

package/dist/components/gx-ide-select-team-or-org.d.ts

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

package/dist/components/gx-ide-select-team-or-org.js

@@ -0,0 +1,157 @@
+import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { d as defineCustomElement$2 } from './ide-loader.js';
+
+const mapItemsToComboBoxItemModel = (items) => {
+    return items === null || items === void 0 ? void 0 : items.map(item => {
+        return {
+            value: item.id,
+            caption: item.name
+        };
+    });
+};
+
+const selectTeamOrOrgCss = "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  border-radius: var(--border-radius-m);\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-items-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  inline-size: 100%;\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  line-height: var(--line-height-tight);\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.items-list {\n  inline-size: 100%;\n  --ch-combo-box__popover-max-inline-size: 100%;\n}\n\n.buttons-container {\n  display: flex;\n  inline-size: 100%;\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}";
+
+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 _GxIdeSelectTeamOrOrg_componentLocale, _GxIdeSelectTeamOrOrg_itemsModel, _GxIdeSelectTeamOrOrg_chSelectItemEl, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, _GxIdeSelectTeamOrOrg_continueHandler, _GxIdeSelectTeamOrOrg_cancelHandler;
+const COPYRIGHTS_ILLUSTRATION = getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "components/button",
+    "components/combo-box"
+];
+const GxIdeSelectTeamOrOrg$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeSelectTeamOrOrg extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeSelectTeamOrOrg_componentLocale.set(this, void 0);
+        _GxIdeSelectTeamOrOrg_itemsModel.set(this, []);
+        _GxIdeSelectTeamOrOrg_chSelectItemEl.set(this, void 0);
+        _GxIdeSelectTeamOrOrg_displayItemsTransitionTime.set(this, 100);
+        _GxIdeSelectTeamOrOrg_continueHandler.set(this, async () => {
+            await this.confirmCallback(__classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_chSelectItemEl, "f").value);
+        });
+        _GxIdeSelectTeamOrOrg_cancelHandler.set(this, async () => {
+            await this.cancelCallback();
+        });
+        this.slideIsVisible = false;
+        this.itemsModelReady = false;
+        this.cancelCallback = undefined;
+        this.confirmCallback = undefined;
+        this.selectionType = "team";
+        this.items = undefined;
+    }
+    itemsChanged(newItems) {
+        this.slideIsVisible = false;
+        if (!(newItems === null || newItems === void 0 ? void 0 : newItems.length)) {
+            this.itemsModelReady = false;
+            setTimeout(() => {
+                this.slideIsVisible = true;
+            }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f"));
+            return;
+        }
+        // switch step
+        setTimeout(() => {
+            __classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_itemsModel, mapItemsToComboBoxItemModel(newItems), "f");
+            this.itemsModelReady = true;
+        }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f"));
+        // show slide
+        setTimeout(() => {
+            this.slideIsVisible = true;
+        }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f") * 2);
+    }
+    async componentWillLoad() {
+        var _a;
+        __classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) {
+            __classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_itemsModel, mapItemsToComboBoxItemModel(this.items), "f");
+            this.itemsModelReady = true;
+        }
+        this.el.style.setProperty("--display-items-transtion-time", __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_displayItemsTransitionTime, "f").toString() + "ms");
+    }
+    componentDidLoad() {
+        this.slideIsVisible = true;
+    }
+    render() {
+        var _a;
+        const kindLocale = __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f")[this.selectionType];
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
+        }), h("div", { class: {
+                "slide__main": true,
+                "slide__main--visible": this.slideIsVisible
+            } }, h("div", { class: "slide__main-container" }, this.itemsModelReady ? ([
+            h("header", { class: "slide__main-header" }, h("img", { src: ICON_NEXT, alt: "" // decorative
+            }), h("h2", {
+                // Split the title into two spans for better styling
+                class: "slide__main-title"
+            }, h("span", null, kindLocale.title))),
+            h("div", { class: "slide__select-item-description" }, h("p", { class: "body-semi-bold-l" }, kindLocale.infoMessage)),
+            h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "items" }, kindLocale.label), h("ch-combo-box-render", { id: "items", accessibleName: kindLocale.label, class: "combo-box items-list", model: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_itemsModel, "f"), value: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_itemsModel, "f") && ((_a = __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_itemsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value), ref: (el) => (__classPrivateFieldSet(this, _GxIdeSelectTeamOrOrg_chSelectItemEl, el, "f")) }))),
+            h("div", { class: "buttons-container" }, h("button", { class: "button-primary continue-btn", onClick: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_continueHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").confirmButtonCaption), h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_cancelHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").cancelButtonCaption))
+        ]) : (h("gx-ide-loader", { show: true, loaderTitle: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeSelectTeamOrOrg_componentLocale, "f").loader.description })))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/select-team-or-org"]; }
+    get el() { return this; }
+    static get watchers() { return {
+        "items": ["itemsChanged"]
+    }; }
+    static get style() { return selectTeamOrOrgCss; }
+}, [1, "gx-ide-select-team-or-org", {
+        "cancelCallback": [16],
+        "confirmCallback": [16],
+        "selectionType": [1, "selection-type"],
+        "items": [16],
+        "slideIsVisible": [32],
+        "itemsModelReady": [32]
+    }, undefined, {
+        "items": ["itemsChanged"]
+    }]);
+_GxIdeSelectTeamOrOrg_componentLocale = new WeakMap(), _GxIdeSelectTeamOrOrg_itemsModel = new WeakMap(), _GxIdeSelectTeamOrOrg_chSelectItemEl = new WeakMap(), _GxIdeSelectTeamOrOrg_displayItemsTransitionTime = new WeakMap(), _GxIdeSelectTeamOrOrg_continueHandler = new WeakMap(), _GxIdeSelectTeamOrOrg_cancelHandler = new WeakMap();
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-select-team-or-org", "gx-ide-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-select-team-or-org":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxIdeSelectTeamOrOrg$1);
+            }
+            break;
+        case "gx-ide-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const GxIdeSelectTeamOrOrg = GxIdeSelectTeamOrOrg$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeSelectTeamOrOrg, defineCustomElement };
+
+//# sourceMappingURL=gx-ide-select-team-or-org.js.map

package/dist/components/gx-ide-select-team-or-org.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-select-team-or-org.js","mappings":"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","names":["GxIdeSelectTeamOrOrg"],"sources":["src/components/select-team-or-org/helpers.tsx","src/components/select-team-or-org/select-team-or-org.scss?tag=gx-ide-select-team-or-org&encapsulation=shadow","src/components/select-team-or-org/select-team-or-org.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { SelectableItem } from \"./select-team-or-org\";\n\nexport const mapItemsToComboBoxItemModel = (\n  items: SelectableItem[]\n): ComboBoxItemModel[] => {\n  return items?.map(item => {\n    return {\n      value: item.id,\n      caption: item.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  border-radius: var(--border-radius-m);\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-items-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    inline-size: 100%;\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    line-height: var(--line-height-tight);\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.items-list {\n  inline-size: 100%;\n  --ch-combo-box__popover-max-inline-size: 100%;\n}\n\n.buttons-container {\n  display: flex;\n  inline-size: 100%;\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 { mapItemsToComboBoxItemModel } 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-team-or-org\",\n  styleUrl: \"select-team-or-org.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/select-team-or-org\"]\n})\nexport class GxIdeSelectTeamOrOrg {\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  #itemsModel: ComboBoxItemModel[] = [];\n  #chSelectItemEl: HTMLChComboBoxRenderElement;\n  #displayItemsTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSelectTeamOrOrgElement;\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 items model is ready to be rendered.\n   */\n  @State() itemsModelReady: 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 'Confirm' button\n   */\n  @Prop() readonly confirmCallback!: (itemId: string) => Promise<void>;\n\n  /**\n   * Whether the picker is selecting a team or an organization.\n   * Drives the title, info message and combo label.\n   */\n  @Prop() readonly selectionType: SelectionType = \"team\";\n\n  /**\n   * Array that contains the selectable items (teams or organizations).\n   */\n  @Prop() readonly items!: SelectableItem[];\n  @Watch(\"items\")\n  itemsChanged(newItems: SelectableItem[]) {\n    this.slideIsVisible = false;\n\n    if (!newItems?.length) {\n      this.itemsModelReady = false;\n      setTimeout(() => {\n        this.slideIsVisible = true;\n      }, this.#displayItemsTransitionTime);\n      return;\n    }\n\n    // switch step\n    setTimeout(() => {\n      this.#itemsModel = mapItemsToComboBoxItemModel(newItems);\n      this.itemsModelReady = true;\n    }, this.#displayItemsTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#displayItemsTransitionTime * 2);\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.items?.length) {\n      this.#itemsModel = mapItemsToComboBoxItemModel(this.items);\n      this.itemsModelReady = true;\n    }\n\n    this.el.style.setProperty(\n      \"--display-items-transtion-time\",\n      this.#displayItemsTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  componentDidLoad() {\n    this.slideIsVisible = true;\n  }\n\n  #continueHandler = async () => {\n    await this.confirmCallback(this.#chSelectItemEl.value);\n  };\n\n  #cancelHandler = async () => {\n    await this.cancelCallback();\n  };\n\n  render() {\n    const kindLocale = this.#componentLocale[this.selectionType];\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.itemsModelReady ? (\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>{kindLocale.title}</span>\n                    </h2>\n                  </header>,\n                  <div class=\"slide__select-item-description\">\n                    <p class=\"body-semi-bold-l\">{kindLocale.infoMessage}</p>\n                  </div>,\n                  <div class=\"field-group\">\n                    <div class=\"field field-block\">\n                      <label htmlFor=\"items\">{kindLocale.label}</label>\n                      <ch-combo-box-render\n                        id=\"items\"\n                        accessibleName={kindLocale.label}\n                        class=\"combo-box items-list\"\n                        model={this.#itemsModel}\n                        value={this.#itemsModel && this.#itemsModel[0]?.value}\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectItemEl =\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.confirmButtonCaption}\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 SelectableItem = {\n  id: string;\n  name: string;\n};\n\nexport type SelectionType = \"team\" | \"organization\";\n"],"version":3}

package/dist/components/gx-ide-sign-in-organization.d.ts

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