@genexus/genexus-ide-ui 0.0.108 → 0.0.110

package/dist/esm/gx-ide-status-buttons_2.entry.js

@@ -1,182 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5bd24426.js';
-import { L as Locale } from './locale-3c32f251.js';
-
-const gxIdeStatusButtonsCss = ":host{display:block;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item.not-zero{font-weight:var(--mer-font__weight--semi-bold)}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs)}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .active-indicator{background-color:var(--mer-icon__primary);border-color:var(--mer-icon__primary)}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-border]){border:none}:host([no-border-top]){border-top:none}:host([no-border-end]){border-inline-end:none}:host([no-border-bottom]){border-bottom:none}:host([no-border-start]){border-inline-start:none}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
-
-const GxIdeStatusButtons = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.selectionChanged = createEvent(this, "selectionChanged", 7);
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.evaluateIconsSize = () => {
-            if (this.compact) {
-                this.iconsSize = "small";
-            }
-        };
-        this.evaluateLabel = (type) => {
-            const amount = this[type];
-            if (this.minimal) {
-                return `${amount}`;
-            }
-            else {
-                const singular = amount === 1;
-                return singular
-                    ? `${amount} ${this._componentLocale[type]["singular"]}`
-                    : `${amount} ${this._componentLocale[type]["plural"]}`;
-            }
-        };
-        this.selectionChangedHandler = (e) => {
-            e.stopPropagation();
-            this.selectionChanged.emit(e.detail);
-        };
-        this.active = false;
-        this.errors = 0;
-        this.hideError = false;
-        this.warnings = 0;
-        this.hideWarning = false;
-        this.successes = 0;
-        this.hideSuccess = false;
-        this.messages = 0;
-        this.hideMessage = false;
-        this.minimal = false;
-        this.compact = false;
-        this.noBorder = false;
-        this.noInnerBorders = false;
-        this.noBorderTop = false;
-        this.noBorderEnd = false;
-        this.noBorderBottom = false;
-        this.noBorderStart = false;
-        this.iconsSize = "small";
-    }
-    // 6.COMPONENT LIFECYCLE METHODS //
-    async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-        this.evaluateIconsSize();
-    }
-    // 10.RENDER() FUNCTION //
-    render() {
-        return (h(Host, null, h("gx-ide-list-selector", { type: "multi-selection", listName: "status-buttons", noListBorder: true, ellipsis: true, iconsSize: this.iconsSize, onSelectionChanged: this.selectionChangedHandler }, !this.hideError ? (h("gx-ide-list-selector-item", { itemId: "errors", itemValue: this.evaluateLabel("errors"), icon: "gx-test/result-exception", iconColor: this.errors === 0 ? "disabled" : "auto", class: { "error": true, "not-zero": this.errors !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
-                "active-indicator": true
-            } }))) : null, !this.hideWarning ? (h("gx-ide-list-selector-item", { itemId: "warnings", itemValue: this.evaluateLabel("warnings"), icon: "gx-test/result-warning", iconColor: this.warnings === 0 ? "disabled" : "auto", class: { "warning": true, "not-zero": this.warnings !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
-                "active-indicator": true
-            } }))) : null, !this.hideSuccess ? (h("gx-ide-list-selector-item", { itemId: "successes", itemValue: this.evaluateLabel("successes"), icon: "gx-test/result-ok", iconColor: this.successes === 0 ? "disabled" : "auto", class: { "success": true, "not-zero": this.successes !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
-                "active-indicator": true
-            } }))) : null, !this.hideMessage ? (h("gx-ide-list-selector-item", { itemId: "messages", itemValue: this.evaluateLabel("messages"), icon: "gx-test/screenshot-viewer", iconColor: this.messages === 0 ? "disabled" : "auto", class: { "message": true, "not-zero": this.messages !== 0 }, itemChecked: true }, h("span", { slot: "universal", class: {
-                "active-indicator": true
-            } }))) : null)));
-    }
-    static get assetsDirs() { return ["gx-ide-assets/status-buttons"]; }
-    get el() { return getElement(this); }
-};
-GxIdeStatusButtons.style = gxIdeStatusButtonsCss;
-
-const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;opacity:0;transition:150ms opacity;}.top-state-bar:before{content:\"\";width:100%;height:100%;position:absolute;background-color:var(--mer-color__elevation--04);z-index:-1}.top-state-bar:after{content:\"\";left:var(--mer-border__width--sm);top:var(--mer-border__width--sm);width:calc(100% - var(--mer-border__width--sm) * 2);height:calc(100% - var(--mer-border__width--sm) * 2);position:absolute;background-color:var(--mer-color__surface);z-index:0;border-radius:var(--mer-border__width--lg)}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__wrapper{flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--xs);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__caption{color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04)}.top-state-bar__close-wrapper{cursor:pointer;border-inline-start:1px solid var(--mer-color__elevation--04);display:flex;align-items:center;transition:200ms background-color}.top-state-bar__close-wrapper:hover .top-state-bar__close{opacity:0.75}.top-state-bar__close-wrapper:active .top-state-bar__close{opacity:0.5}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--accent .top-state-bar__caption{color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--success .top-state-bar__caption{color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--warning .top-state-bar__caption{color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--error .top-state-bar__caption{color:var(--mer-color__message-red--100)}.top-state-bar--in-progress:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .top-state-bar__close-wrapper{border-inline-start-color:#3fa89b;-webkit-animation:inProgressBorderColor 1s linear infinite;animation:inProgressBorderColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{color:#3fa89b}.top-state-bar--visible{opacity:1}@-webkit-keyframes inProgressBorderColor{0%{border-inline-start-color:#3fa89b}100%{border-inline-start-color:#5ba7ff}}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar{position:relative}:host([no-border]) .top-state-bar:before,:host([no-border]) .top-state-bar:after{display:none}:host([no-border]) .top-state-bar__close-wrapper{border-inline-start:none}";
-
-const GxgTopStateBar = class {
-    constructor(hostRef) {
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.evaluateInitialProgress = () => {
-            if (this.progress === undefined &&
-                (this.stateType === "error" ||
-                    this.stateType === "warning" ||
-                    this.stateType === "success")) {
-                this.progress = 100;
-            }
-            else if (this.progress === undefined &&
-                this.stateType === "in-progress") {
-                this.progress = 0;
-            }
-            this.el.style.setProperty("--top-bar-progress", `${this.progress}%`);
-        };
-        this.evaluateWithAction = () => {
-            if (this.withClose === undefined &&
-                (this.stateType === "error" ||
-                    this.stateType === "warning" ||
-                    this.stateType === "success")) {
-                this.withClose = true;
-            }
-        };
-        this.closeButtonHandler = () => {
-            this.active = false;
-        };
-        registerInstance(this, hostRef);
-        this.topStateBarVisible = false;
-        this.visible = false;
-        this.caption = undefined;
-        this.minimal = false;
-        this.active = false;
-        this.stateType = "in-progress";
-        this.progress = undefined;
-        this.withClose = undefined;
-        this.autoClose = false;
-        this.noBorder = false;
-        this.closedCallback = false;
-    }
-    get el() { return getElement(this); }
-    watchActiveHandler(active) {
-        if (active) {
-            this.visible = true;
-            setTimeout(() => {
-                this.topStateBarVisible = true;
-            }, 300);
-        }
-        else {
-            this.topStateBarVisible = false;
-            setTimeout(() => {
-                this.visible = false;
-            }, 300);
-        }
-    }
-    watchStateTypeHandler() {
-        this.evaluateWithAction();
-    }
-    watchProgressHandler(progress) {
-        if (progress => 0 ) {
-            this.el.style.setProperty("--top-bar-progress", `${progress}%`);
-        }
-        if (progress === 100 && this.autoClose) {
-            setTimeout(() => {
-                this.active = false;
-            }, 200);
-        }
-    }
-    // 5.EVENTS (EMIT) //
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    componentWillLoad() {
-        this.evaluateWithAction();
-        this.evaluateInitialProgress();
-        if (this.active) {
-            this.visible = true;
-            this.topStateBarVisible = true;
-        }
-    }
-    //  10.RENDER() FUNCTION //
-    render() {
-        return (h(Host, { class: { visible: this.visible }, "aria-hidden": !this.active }, h("div", { role: "status", "aria-labelledby": "label", "aria-hidden": !this.active, class: {
-                "top-state-bar": true,
-                [`top-state-bar--${this.stateType}`]: true,
-                "top-state-bar--with-close": this.withClose,
-                "top-state-bar--visible": this.topStateBarVisible
-            } }, h("div", { class: "top-state-bar__wrapper" }, !this.minimal ? (h("label", { id: "label", class: {
-                "top-state-bar__caption": true
-            }, part: "label" }, this.caption)) : null, h("div", { class: {
-                "top-state-bar__progress-wrapper": true
-            }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))), this.withClose && !this.minimal ? (h("div", { class: "top-state-bar__close-wrapper", onClick: this.closeButtonHandler }, h("gxg-icon", { class: {
-                "top-state-bar__close": true
-            }, role: "button", "aria-label": "close", type: "gemini-tools/close", color: "mercury-primary", tabIndex: 0 }))) : null)));
-    }
-    static get watchers() { return {
-        "active": ["watchActiveHandler"],
-        "stateType": ["watchStateTypeHandler"],
-        "progress": ["watchProgressHandler"]
-    }; }
-};
-GxgTopStateBar.style = gxgTopStateBarCss;
-
-export { GxIdeStatusButtons as gx_ide_status_buttons, GxgTopStateBar as gxg_top_state_bar };
-
-//# sourceMappingURL=gx-ide-status-buttons_2.entry.js.map

package/dist/esm/gx-ide-status-buttons_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"gx-ide-status-buttons.gxg-top-state-bar.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,89DAA89D;;MCsB/+D,kBAAkB;;;;;;;QAyIrB,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;aAC1B;SACF,CAAC;QAEM,kBAAa,GAAG,CACtB,IAAsD;YAEtD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO,GAAG,MAAM,EAAE,CAAC;aACpB;iBAAM;gBACL,MAAM,QAAQ,GAAY,MAAM,KAAK,CAAC,CAAC;gBACvC,OAAO,QAAQ;sBACX,GAAG,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,EAAE;sBACtD,GAAG,MAAM,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;aAC1D;SACF,CAAC;QAEM,4BAAuB,GAAG,CAAC,CAAgC;YACjE,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACtC,CAAC;sBAvIiC,KAAK;sBAKN,CAAC;yBAKG,KAAK;wBAKP,CAAC;2BAKG,KAAK;yBAKR,CAAC;2BAKE,KAAK;wBAKT,CAAC;2BAKG,KAAK;uBAKT,KAAK;uBAKY,KAAK;wBAKJ,KAAK;8BAKC,KAAK;2BAKR,KAAK;2BAKL,KAAK;8BAKF,KAAK;6BAKN,KAAK;yBAQrC,OAAO;;;IAalC,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;IAmCD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,4BACE,IAAI,EAAC,iBAAiB,EACtB,QAAQ,EAAC,gBAAgB,EACzB,YAAY,QACZ,QAAQ,QACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,kBAAkB,EAAE,IAAI,CAAC,uBAAuB,IAE/C,CAAC,IAAI,CAAC,SAAS,IACd,iCACE,MAAM,EAAC,QAAQ,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EACvC,IAAI,EAAC,0BAA0B,EAC/B,SAAS,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EAClD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,EACvD,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EACzC,IAAI,EAAC,wBAAwB,EAC7B,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EACpD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,EAC3D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,WAAW,EAClB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAC1C,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EACrD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,EAC5D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,EACP,CAAC,IAAI,CAAC,WAAW,IAChB,iCACE,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EACzC,IAAI,EAAC,2BAA2B,EAChC,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,GAAG,UAAU,GAAG,MAAM,EACpD,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,EAC3D,WAAW,UAEX,YACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,GACK,CACkB,IAC1B,IAAI,CACa,CAClB,EACP;KACH;;;;;;AC5QH,MAAM,iBAAiB,GAAG,4kIAA4kI;;MCCzlI,cAAc;IACvB;;;;QAqEA,4BAAuB,GAAG;YACtB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;iBAC1B,IAAI,CAAC,SAAS,KAAK,OAAO;oBACvB,IAAI,CAAC,SAAS,KAAK,SAAS;oBAC5B,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,EAAE;gBACnC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;aACvB;iBACI,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;gBAChC,IAAI,CAAC,SAAS,KAAK,aAAa,EAAE;gBAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;aACrB;YACD,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;SACxE,CAAC;QACF,uBAAkB,GAAG;YACjB,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;iBAC3B,IAAI,CAAC,SAAS,KAAK,OAAO;oBACvB,IAAI,CAAC,SAAS,KAAK,SAAS;oBAC5B,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,EAAE;gBACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;aACzB;SACJ,CAAC;QACF,uBAAkB,GAAG;YACjB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACvB,CAAC;;QA3FE,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC/B;;IAiBD,kBAAkB,CAAC,MAAM;QACrB,IAAI,MAAM,EAAE;YACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,UAAU,CAAC;gBACP,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;aAClC,EAAE,GAAG,CAAC,CAAC;SACX;aACI;YACD,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,UAAU,CAAC;gBACP,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACxB,EAAE,GAAG,CAAC,CAAC;SACX;KACJ;IACD,qBAAqB;QACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC7B;IACD,oBAAoB,CAAC,QAAQ;QACzB,IAAI,QAAQ,IAAI,CAAC,CAAmB,EAAE;YAClC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC;SACnE;QACD,IAAI,QAAQ,KAAK,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE;YACpC,UAAU,CAAC;gBACP,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACvB,EAAE,GAAG,CAAC,CAAC;SACX;KACJ;;;IAGD,iBAAiB;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAClC;KACJ;;IA6BD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE;gBACtK,eAAe,EAAE,IAAI;gBACrB,CAAC,kBAAkB,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI;gBAC1C,2BAA2B,EAAE,IAAI,CAAC,SAAS;gBAC3C,wBAAwB,EAAE,IAAI,CAAC,kBAAkB;aACpD,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACjG,wBAAwB,EAAE,IAAI;aACjC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;gBACzD,iCAAiC,EAAE,IAAI;aAC1C,EAAE,IAAI,EAAE,kBAAkB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE;gBACnN,sBAAsB,EAAE,IAAI;aAC/B,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE;KAClI;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n  display: block;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n  --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n  display: flex;\n  flex-direction: row;\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n  border-block-start: none !important; //reset\n\n  &.not-zero {\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &:not(:last-child) {\n    border-inline-end: 1px solid var(--gx-ide-container-border-color);\n  }\n  flex: 1;\n  text-align: center;\n\n  .label {\n    &__wrapper {\n      display: inline-flex;\n      width: auto;\n      min-height: 0;\n    }\n    &__description {\n      color: var(--status-buttons-label-color);\n      margin-inline-start: var(--mer-spacing--xxs);\n    }\n  }\n\n  /*active indicator*/\n  .active-indicator {\n    display: inline-block;\n    width: var(--mer-spacing--xs);\n    height: var(--mer-spacing--xs);\n    border: 1px solid var(--mer-border-color__dim);\n    border-radius: calc(var(--mer-spacing--xs) / 2);\n    background-color: var(--mer-border-color__dim);\n  }\n  input:checked {\n    + .label {\n      --status-buttons-label-color: var(--mer-text__on-surface);\n      background-color: inherit;\n\n      .active-indicator {\n        background-color: var(--mer-icon__primary);\n        border-color: var(--mer-icon__primary);\n      }\n    }\n  }\n\n  /*hover*/\n  &:hover {\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--hover) !important;\n    }\n  }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n  gx-ide-list-selector-item {\n    font-size: var(--mer-font__size--xxs);\n  }\n  .label__wrapper {\n    gap: var(--mer-spacing--xxs);\n    padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n      var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n  }\n  .label__universal-slot {\n    margin-inline-end: var(--mer-spacing--xxxs);\n  }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-border]) {\n  border: none;\n}\n:host([no-border-top]) {\n  border-top: none;\n}\n:host([no-border-end]) {\n  border-inline-end: none;\n}\n:host([no-border-bottom]) {\n  border-bottom: none;\n}\n:host([no-border-start]) {\n  border-inline-start: none;\n}\n:host([no-inner-borders]) {\n  gx-ide-list-selector-item {\n    border-inline-end: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n  tag: \"gx-ide-status-buttons\",\n  styleUrl: \"gx-ide-status-buttons.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  /**\n   * Whether or not the buttons are active\n   */\n  @Prop() readonly active: boolean = false;\n\n  /**\n   * The errors amount\n   */\n  @Prop() readonly errors: number = 0;\n\n  /**\n   * Hide the errors button\n   */\n  @Prop() readonly hideError: boolean = false;\n\n  /**\n   * The warnings amount\n   */\n  @Prop() readonly warnings: number = 0;\n\n  /**\n   * Hide the warnings button\n   */\n  @Prop() readonly hideWarning: boolean = false;\n\n  /**\n   * The successes amount\n   */\n  @Prop() readonly successes: number = 0;\n\n  /**\n   * Hide the successes button\n   */\n  @Prop() readonly hideSuccess: boolean = false;\n\n  /**\n   * The messages amount\n   */\n  @Prop() readonly messages: number = 0;\n\n  /**\n   * Hide the messages button\n   */\n  @Prop() readonly hideMessage: boolean = false;\n\n  /**\n   * Display only the number\n   */\n  @Prop() readonly minimal: boolean = false;\n\n  /**\n   * If present will make the component look smaller.\n   */\n  @Prop({ reflect: true }) readonly compact: boolean = false;\n\n  /**\n   * No border all around\n   */\n  @Prop({ reflect: true }) readonly noBorder: boolean = false;\n\n  /**\n   * No inner borders\n   */\n  @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n  /**\n   * No border on the top\n   */\n  @Prop({ reflect: true }) readonly noBorderTop: boolean = false;\n\n  /**\n   * No border on the end\n   */\n  @Prop({ reflect: true }) readonly noBorderEnd: boolean = false;\n\n  /**\n   * No border on the bottom\n   */\n  @Prop({ reflect: true }) readonly noBorderBottom: boolean = false;\n\n  /**\n   * No border on the start\n   */\n  @Prop({ reflect: true }) readonly noBorderStart: boolean = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeStatusButtonsElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() iconsSize: Size = \"small\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateIconsSize();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateIconsSize = () => {\n    if (this.compact) {\n      this.iconsSize = \"small\";\n    }\n  };\n\n  private evaluateLabel = (\n    type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n  ): string => {\n    const amount = this[type];\n    if (this.minimal) {\n      return `${amount}`;\n    } else {\n      const singular: boolean = amount === 1;\n      return singular\n        ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n        : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n    }\n  };\n\n  private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n    e.stopPropagation();\n    this.selectionChanged.emit(e.detail);\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gx-ide-list-selector\n          type=\"multi-selection\"\n          listName=\"status-buttons\"\n          noListBorder\n          ellipsis\n          iconsSize={this.iconsSize}\n          onSelectionChanged={this.selectionChangedHandler}\n        >\n          {!this.hideError ? (\n            <gx-ide-list-selector-item\n              itemId=\"errors\"\n              itemValue={this.evaluateLabel(\"errors\")}\n              icon=\"gx-test/result-exception\"\n              iconColor={this.errors === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideWarning ? (\n            <gx-ide-list-selector-item\n              itemId=\"warnings\"\n              itemValue={this.evaluateLabel(\"warnings\")}\n              icon=\"gx-test/result-warning\"\n              iconColor={this.warnings === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideSuccess ? (\n            <gx-ide-list-selector-item\n              itemId=\"successes\"\n              itemValue={this.evaluateLabel(\"successes\")}\n              icon=\"gx-test/result-ok\"\n              iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideMessage ? (\n            <gx-ide-list-selector-item\n              itemId=\"messages\"\n              itemValue={this.evaluateLabel(\"messages\")}\n              icon=\"gx-test/screenshot-viewer\"\n              iconColor={this.messages === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n        </gx-ide-list-selector>\n      </Host>\n    );\n  }\n}\n",":host {\n  --top-bar-progress: 0%;\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: 200ms grid-template-rows;\n}\n:host > * {\n  overflow: hidden;\n}\n\n:host(.visible) {\n  grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n  position: relative;\n  border-radius: var(--mer-border__width--lg);\n  list-style: var(--mer-font__size--xxs);\n  display: flex;\n  opacity: 0;\n  transition: 150ms opacity;\n  /*states*/\n}\n.top-state-bar:before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-color: var(--mer-color__elevation--04);\n  z-index: -1;\n}\n.top-state-bar:after {\n  content: \"\";\n  left: var(--mer-border__width--sm);\n  top: var(--mer-border__width--sm);\n  width: calc(100% - var(--mer-border__width--sm) * 2);\n  height: calc(100% - var(--mer-border__width--sm) * 2);\n  position: absolute;\n  background-color: var(--mer-color__surface);\n  z-index: 0;\n  border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar > * {\n  position: relative;\n  z-index: 1;\n}\n.top-state-bar__wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mer-spacing--xs);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__caption {\n  color: var(--mer-text__on-message);\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--mer-font__size--xxs);\n  line-height: var(--mer-font__size--xxs);\n  font-weight: var(--mer-font__weight--regular);\n  display: flex;\n  align-items: baseline;\n  font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n  height: var(--mer-spacing--xxs);\n  background-color: var(--mer-color__elevation--04);\n}\n.top-state-bar__close-wrapper {\n  cursor: pointer;\n  border-inline-start: 1px solid var(--mer-color__elevation--04);\n  display: flex;\n  align-items: center;\n  transition: 200ms background-color;\n}\n.top-state-bar__close-wrapper:hover .top-state-bar__close {\n  opacity: 0.75;\n}\n.top-state-bar__close-wrapper:active .top-state-bar__close {\n  opacity: 0.5;\n}\n.top-state-bar--accent .progress-bar {\n  background-color: var(--mer-accent__primary);\n}\n.top-state-bar--accent .top-state-bar__caption {\n  color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n  background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--success .top-state-bar__caption {\n  color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n  background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--warning .top-state-bar__caption {\n  color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n  background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--error .top-state-bar__caption {\n  color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress:before {\n  height: 0;\n  width: 120%;\n  padding-top: 60%;\n  padding-bottom: 60%;\n  background: linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n  animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .top-state-bar__close-wrapper {\n  border-inline-start-color: #3fa89b;\n  -webkit-animation: inProgressBorderColor 1s linear infinite;\n  animation: inProgressBorderColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n  content: \"\";\n  position: absolute;\n  z-index: 0;\n  width: 300%;\n  height: 100%;\n  left: 0;\n  background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n  animation-name: inProgressBar;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n  color: #3fa89b;\n}\n.top-state-bar--visible {\n  opacity: 1;\n}\n\n/*in progress animation*/\n@-webkit-keyframes inProgressBorderColor {\n  0% {\n    border-inline-start-color: #3fa89b;\n  }\n  100% {\n    border-inline-start-color: #5ba7ff;\n  }\n}\n@-webkit-keyframes inProgressBackgroundColor {\n  0% {\n    transform: translate(-50%, -50%) rotate(0);\n  }\n  100% {\n    transform: translate(-50%, -50%) rotate(1turn);\n  }\n}\n@-webkit-keyframes inProgressBar {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: -200%;\n  }\n}\n@-moz-keyframes inProgressBar {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: 200%;\n  }\n}\n@keyframes inProgressBar {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: -200%;\n  }\n}\n.progress-bar {\n  display: block;\n  transition: all 200ms;\n  width: var(--top-bar-progress);\n  border-radius: calc(var(--mer-spacing--xxs) / 2);\n  height: 100%;\n}\n\n:host([no-border]) .top-state-bar {\n  position: relative;\n}\n:host([no-border]) .top-state-bar:before, :host([no-border]) .top-state-bar:after {\n  display: none;\n}\n:host([no-border]) .top-state-bar__close-wrapper {\n  border-inline-start: none;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n    constructor() {\n        this.topStateBarVisible = false;\n        this.visible = false;\n        this.caption = undefined;\n        this.minimal = false;\n        this.active = false;\n        this.stateType = \"in-progress\";\n        this.progress = undefined;\n        this.withClose = undefined;\n        this.autoClose = false;\n        this.noBorder = false;\n        this.closedCallback = false;\n    }\n    /*\n  INDEX:\n  1.OWN PROPERTIES\n  2.REFERENCE TO ELEMENTS\n  3.STATE() VARIABLES\n  4.PUBLIC PROPERTY API | WATCH'S\n  5.EVENTS (EMIT)\n  6.COMPONENT LIFECYCLE METHODS\n  7.LISTENERS\n  8.PUBLIC METHODS API\n  9.LOCAL METHODS\n  10.RENDER() FUNCTION\n  */\n    // 1.OWN PROPERTIES //\n    // 2. REFERENCE TO ELEMENTS //\n    el;\n    watchActiveHandler(active) {\n        if (active) {\n            this.visible = true;\n            setTimeout(() => {\n                this.topStateBarVisible = true;\n            }, 300);\n        }\n        else {\n            this.topStateBarVisible = false;\n            setTimeout(() => {\n                this.visible = false;\n            }, 300);\n        }\n    }\n    watchStateTypeHandler() {\n        this.evaluateWithAction();\n    }\n    watchProgressHandler(progress) {\n        if (progress => 0 && progress <= 100) {\n            this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n        }\n        if (progress === 100 && this.autoClose) {\n            setTimeout(() => {\n                this.active = false;\n            }, 200);\n        }\n    }\n    // 5.EVENTS (EMIT) //\n    // 6.COMPONENT LIFECYCLE EVENTS //\n    componentWillLoad() {\n        this.evaluateWithAction();\n        this.evaluateInitialProgress();\n        if (this.active) {\n            this.visible = true;\n            this.topStateBarVisible = true;\n        }\n    }\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    evaluateInitialProgress = () => {\n        if (this.progress === undefined &&\n            (this.stateType === \"error\" ||\n                this.stateType === \"warning\" ||\n                this.stateType === \"success\")) {\n            this.progress = 100;\n        }\n        else if (this.progress === undefined &&\n            this.stateType === \"in-progress\") {\n            this.progress = 0;\n        }\n        this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n    };\n    evaluateWithAction = () => {\n        if (this.withClose === undefined &&\n            (this.stateType === \"error\" ||\n                this.stateType === \"warning\" ||\n                this.stateType === \"success\")) {\n            this.withClose = true;\n        }\n    };\n    closeButtonHandler = () => {\n        this.active = false;\n    };\n    //  10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n                \"top-state-bar\": true,\n                [`top-state-bar--${this.stateType}`]: true,\n                \"top-state-bar--with-close\": this.withClose,\n                \"top-state-bar--visible\": this.topStateBarVisible\n            } }, h(\"div\", { class: \"top-state-bar__wrapper\" }, !this.minimal ? (h(\"label\", { id: \"label\", class: {\n                \"top-state-bar__caption\": true\n            }, part: \"label\" }, this.caption)) : null, h(\"div\", { class: {\n                \"top-state-bar__progress-wrapper\": true\n            }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))), this.withClose && !this.minimal ? (h(\"div\", { class: \"top-state-bar__close-wrapper\", onClick: this.closeButtonHandler }, h(\"gxg-icon\", { class: {\n                \"top-state-bar__close\": true\n            }, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-primary\", tabIndex: 0 }))) : null)));\n    }\n    static get is() { return \"gxg-top-state-bar\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"gxg-top-state-bar.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"gxg-top-state-bar.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"caption\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The top-bar title\"\n                },\n                \"attribute\": \"caption\",\n                \"reflect\": false\n            },\n            \"minimal\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"It will only display the bar (no title, no close button)\"\n                },\n                \"attribute\": \"minimal\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The top-bar active state. If false it will be hidden\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"stateType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"topStateBarType\",\n                    \"resolved\": \"\\\"accent\\\" | \\\"error\\\" | \\\"in-progress\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"topStateBarType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n                            \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The top-bar title\"\n                },\n                \"attribute\": \"state-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"in-progress\\\"\"\n            },\n            \"progress\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The progress bar progress\"\n                },\n                \"attribute\": \"progress\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"withClose\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"It will display a close action button\"\n                },\n                \"attribute\": \"with-close\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"autoClose\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"It true, it will auto-close when the progress is 100\"\n                },\n                \"attribute\": \"auto-close\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"It removes the border (actually is box shadow)\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"closedCallback\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"A callback that gets called when the top-state-bar is closed\"\n                },\n                \"attribute\": \"closed-callback\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"topStateBarVisible\": {},\n            \"visible\": {}\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"active\",\n                \"methodName\": \"watchActiveHandler\"\n            }, {\n                \"propName\": \"stateType\",\n                \"methodName\": \"watchStateTypeHandler\"\n            }, {\n                \"propName\": \"progress\",\n                \"methodName\": \"watchProgressHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}

package/dist/esm/gxg-buttons-container.entry.js

@@ -1,61 +0,0 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-5bd24426.js';
-
-const buttonsContainerCss = ":host{--ds-background-color-disabled:transparent;--ds-border-color-disabled:transparent;display:block}:host .container{background-color:var(--mer-elevation__background-color--01);border:var(--mer-elevation__border-01);box-shadow:var(--mer-elevation__box-shadow--01);box-shadow:none;display:inline-flex;align-items:center;padding:var(--gxg-buttons-group__padding);box-sizing:border-box;gap:var(--gxg-buttons-group__gap);border-radius:var(--gxg-buttons-group__border-radius);border:1px solid var(--mer-color__elevation__03)}:host .container--reduced{height:calc(var(--gxg-form-text-height) + 2px);--gxg-button-height:100%}:host .container--reduced ::slotted(gxg-button){height:100%}:host ::slotted(.button--unselected){--gxg-button-primary-border-color:transparent;--gxg-button-primary-bg-color:var(\n    --gxg-button-unselected-bg-color--enabled\n  );--gxg-button-primary-color:var(--gxg-button-unselected-color--enabled)}";
-
-const GxgButtonsContainer = class {
-    constructor(hostRef) {
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.setSelectedButton = (event) => {
-            const tagName = event.target.tagName;
-            if (tagName !== "GXG-BUTTON") {
-                //clicked button is disabled
-                return;
-            }
-            else {
-                const clickedButton = event.target;
-                if (clickedButton.disabled || clickedButton.selected) {
-                    //button is disabled or is the current selected
-                    return;
-                }
-                const gxgButtonsHtmlCollection = this.el.children;
-                Array.from(gxgButtonsHtmlCollection).forEach(function (button) {
-                    if (button.selected) {
-                        button.selected = false;
-                    }
-                });
-                clickedButton.selected = true;
-                this.selectedButtonChanged.emit(clickedButton.id);
-                this.updateSelectedButtonId();
-            }
-        };
-        this.updateSelectedButtonId = () => {
-            const gxgButtonsHtmlCollection = this.el.children;
-            const selectedButton = Array.from(gxgButtonsHtmlCollection).find((button) => {
-                return button.selected && !button.disabled;
-            });
-            if (selectedButton) {
-                this.selectedButtonId = selectedButton.id;
-            }
-        };
-        registerInstance(this, hostRef);
-        this.selectedButtonChanged = createEvent(this, "selectedButtonChanged", 7);
-        this.selectedButtonId = undefined;
-        this.reduced = false;
-    }
-    get el() { return getElement(this); }
-    // 6.COMPONENT LIFECYCLE METHODS //
-    componentDidLoad() {
-        this.updateSelectedButtonId();
-    }
-    // 10.RENDER() FUNCTION //
-    render() {
-        return (h(Host, null, h("div", { class: { container: true, "container--reduced": this.reduced }, ref: el => (this.containerEl = el), onClick: this.setSelectedButton }, h("slot", null))));
-    }
-};
-GxgButtonsContainer.style = buttonsContainerCss;
-
-export { GxgButtonsContainer as gxg_buttons_container };
-
-//# sourceMappingURL=gxg-buttons-container.entry.js.map

package/dist/esm/gxg-buttons-container.entry.js.map

@@ -1 +0,0 @@
-{"file":"gxg-buttons-container.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,25BAA25B;;MCC16B,mBAAmB;IAC5B;;;;QAkBA,sBAAiB,GAAG,CAAC,KAAK;YACtB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;YACrC,IAAI,OAAO,KAAK,YAAY,EAAE;;gBAE1B,OAAO;aACV;iBACI;gBACD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;gBACnC,IAAI,aAAa,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,EAAE;;oBAElD,OAAO;iBACV;gBACD,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;gBAClD,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,UAAU,MAAM;oBACzD,IAAI,MAAM,CAAC,QAAQ,EAAE;wBACjB,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;qBAC3B;iBACJ,CAAC,CAAC;gBACH,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC;gBAC9B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;gBAClD,IAAI,CAAC,sBAAsB,EAAE,CAAC;aACjC;SACJ,CAAC;QACF,2BAAsB,GAAG;YACrB,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;YAClD,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM;gBACpE,OAAO,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;aAC9C,CAAC,CAAC;YACH,IAAI,cAAc,EAAE;gBAChB,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC,EAAE,CAAC;aAC7C;SACJ,CAAC;;;QAhDE,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;;;IASD,gBAAgB;QACZ,IAAI,CAAC,sBAAsB,EAAE,CAAC;KACjC;;IAqCD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;KAC9L;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.css?tag=gxg-buttons-container&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/buttons-container/buttons-container.js"],"sourcesContent":["/*--- Elevation ---*/\n:host {\n  --ds-background-color-disabled: transparent;\n  --ds-border-color-disabled: transparent;\n  display: block;\n}\n:host .container {\n  background-color: var(--mer-elevation__background-color--01);\n  border: var(--mer-elevation__border-01);\n  box-shadow: var(--mer-elevation__box-shadow--01);\n  box-shadow: none;\n  display: inline-flex;\n  align-items: center;\n  padding: var(--gxg-buttons-group__padding);\n  box-sizing: border-box;\n  gap: var(--gxg-buttons-group__gap);\n  border-radius: var(--gxg-buttons-group__border-radius);\n  border: 1px solid var(--mer-color__elevation__03);\n}\n:host .container--reduced {\n  height: calc(var(--gxg-form-text-height) + 2px);\n  --gxg-button-height: 100%;\n}\n:host .container--reduced ::slotted(gxg-button) {\n  height: 100%;\n}\n:host ::slotted(.button--unselected) {\n  --gxg-button-primary-border-color: transparent;\n  --gxg-button-primary-bg-color: var(\n    --gxg-button-unselected-bg-color--enabled\n  );\n  --gxg-button-primary-color: var(--gxg-button-unselected-color--enabled);\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgButtonsContainer {\n    constructor() {\n        this.selectedButtonId = undefined;\n        this.reduced = false;\n    }\n    el;\n    containerEl;\n    // 2. REFERENCE TO ELEMENTS //\n    // 3.STATE() VARIABLES //\n    // 4.PUBLIC PROPERTY API | WATCH'S //\n    // 5.EVENTS (EMIT) //\n    selectedButtonChanged;\n    // 6.COMPONENT LIFECYCLE METHODS //\n    componentDidLoad() {\n        this.updateSelectedButtonId();\n    }\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    setSelectedButton = (event) => {\n        const tagName = event.target.tagName;\n        if (tagName !== \"GXG-BUTTON\") {\n            //clicked button is disabled\n            return;\n        }\n        else {\n            const clickedButton = event.target;\n            if (clickedButton.disabled || clickedButton.selected) {\n                //button is disabled or is the current selected\n                return;\n            }\n            const gxgButtonsHtmlCollection = this.el.children;\n            Array.from(gxgButtonsHtmlCollection).forEach(function (button) {\n                if (button.selected) {\n                    button.selected = false;\n                }\n            });\n            clickedButton.selected = true;\n            this.selectedButtonChanged.emit(clickedButton.id);\n            this.updateSelectedButtonId();\n        }\n    };\n    updateSelectedButtonId = () => {\n        const gxgButtonsHtmlCollection = this.el.children;\n        const selectedButton = Array.from(gxgButtonsHtmlCollection).find((button) => {\n            return button.selected && !button.disabled;\n        });\n        if (selectedButton) {\n            this.selectedButtonId = selectedButton.id;\n        }\n    };\n    // 10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, null, h(\"div\", { class: { container: true, \"container--reduced\": this.reduced }, ref: el => (this.containerEl = el), onClick: this.setSelectedButton }, h(\"slot\", null))));\n    }\n    static get is() { return \"gxg-buttons-container\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"buttons-container.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"buttons-container.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"selectedButtonId\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The id of the currently selected button, or null if all are disabled\"\n                },\n                \"attribute\": \"selected-button-id\",\n                \"reflect\": false\n            },\n            \"reduced\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Used to reduce the height when the button-container is next to a form-text\"\n                },\n                \"attribute\": \"reduced\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"selectedButtonChanged\",\n                \"name\": \"selectedButtonChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=buttons-container.js.map\n"],"version":3}

package/dist/esm/gxg-title-editable.entry.js

@@ -1,124 +0,0 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-5bd24426.js';
-import { a as formTooltipLogic } from './form-8e67e664.js';
-import { f as formClasses, c as commonClassesNames } from './classesNames-ee9623a5.js';
-import { d as detectClickOutside } from './detect-click-outside-2150a315.js';
-
-const titleEditableCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.gxg-validation--warning) .form-element{border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--ds-border-color--warning);border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--warning)}:host(.gxg-validation--error) .form-element{border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--ds-border-color--error);border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--error)}:host(.gxg-validation--success) .form-element{border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--ds-border-color--success);border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--success)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper{--margin-inline-start:6px;overflow:hidden;transition:150ms width;width:0}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important;margin-inline-start:var(--margin-inline-start);box-sizing:border-box}.tooltip-inner-wrapper--visible{width:calc(var(--ds-icon-size-box--small) + var(--margin-inline-start))}.tooltip-inner-wrapper--hidden{display:none}:host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--ds-background-color-disabled) !important;color:var(--ds-color--disabled) !important;border-color:var(--ds-border-color-disabled) !important;cursor:default !important}:host{display:block;color:var(--gxg-title-editable__color)}:host .wrapper{font-family:var(--ds-base-font-family-primary);position:relative;max-width:100%}:host input{font-family:inherit;font-size:inherit;font-weight:inherit;text-transform:inherit;color:inherit;background-color:transparent;border:none;padding:0;box-sizing:border-box;flex-grow:1;cursor:auto;border-bottom:2px solid transparent}:host input:focus{outline:none}.wrapper{display:flex;align-items:center;gap:var(--gxg-title-editable-wrapper__gap);font-weight:var(--gxg-title-editable__font-weight)}:host(:not([editing])) input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([click-to-edit]:not([disable-edition])) .wrapper,:host([click-to-edit]:not([disable-edition])) input{cursor:pointer}:host([title-type=h1]) .wrapper{font-size:var(--gxg-title-editable-h1__font-size);text-transform:capitalize}:host([title-type=h2]) .wrapper{font-size:var(--gxg-title-editable-h2__font-size)}:host([fluid]) .wrapper{display:inline-flex}:host(.focus--text.editing) input{color:var(--gxg-title-editable__color--editing)}:host(.focus--line.editing) input{border-bottom-color:var(--gxg-title-editable__color--editing)}.ghost{font-family:inherit;font-size:inherit;position:fixed;visibility:hidden;height:auto;width:auto;white-space:nowrap;bottom:0;left:0;transform:translate(-100%, -100%)}.right-wrapper{display:flex;align-items:center}";
-
-const GxgTitleEditable = class {
-    constructor(hostRef) {
-        /*PRIVATE METHODS*/
-        this.edit = () => {
-            this.editing = true;
-            this.positionCursorAtTheEnd();
-        };
-        this.wrapperClickedHandler = () => {
-            this.editing = true;
-        };
-        this.positionCursorAtTheEnd = () => {
-            this.textInput.selectionStart = this.textInput.selectionEnd =
-                this.textInput.value.length;
-            this.textInput.focus();
-        };
-        this.inputKeyDownHandler = (e) => {
-            if (e.key === "Enter" || e.key === "Escape") {
-                e.preventDefault();
-                this.editing = false;
-                this.editButtonEl.focus();
-            }
-            else if (this.fluid) {
-                this.setInputWidth();
-            }
-        };
-        this.detectClickOutsideFunc = (e) => {
-            const clickedOutside = detectClickOutside(e, this.wrapperEl);
-            if (clickedOutside) {
-                this.editing = false;
-            }
-        };
-        this.setInputWidth = () => {
-            this.textInput.style.width = this.value.length + 1 + "ch";
-        };
-        this.inputInputHandler = () => {
-            this.value = this.textInput.value;
-            if (this.fluid) {
-                this.ghostDiv.innerText = this.value;
-                this.updateInputWidth();
-            }
-        };
-        this.updateInputWidth = () => {
-            if (this.fluid) {
-                const ghostDivWidth = this.ghostDiv.getBoundingClientRect().width;
-                this.textInput.style.width = `${ghostDivWidth}px`;
-            }
-        };
-        registerInstance(this, hostRef);
-        this.valueChanged = createEvent(this, "valueChanged", 7);
-        this.value = undefined;
-        this.titleType = "h1";
-        this.disableEdition = false;
-        this.debounce = false;
-        this.debounceDelay = 800;
-        this.disabled = false;
-        this.clickToEdit = false;
-        this.fluid = false;
-        this.focusType = undefined;
-        this.validationStatus = "indeterminate";
-        this.validationMessage = undefined;
-        this.hideTooltip = false;
-        this.editing = false;
-    }
-    get el() { return getElement(this); }
-    watchValueHandler(newValue) {
-        if (this.debounce) {
-            clearTimeout(this.timeoutReference);
-            this.timeoutReference = setTimeout(() => {
-                this.valueChanged.emit(newValue);
-            }, this.debounceDelay);
-        }
-        else {
-            this.valueChanged.emit(newValue);
-        }
-    }
-    watchEditingHandler(editing) {
-        if (editing) {
-            document.addEventListener("click", this.detectClickOutsideFunc);
-        }
-        else {
-            document.removeEventListener("click", this.detectClickOutsideFunc);
-        }
-    }
-    /*COMPONENT LIFECYCLE METHODS*/
-    componentDidLoad() {
-        if (this.fluid) {
-            this.inputInputHandler();
-        }
-    }
-    /*RENDER*/
-    render() {
-        return (h(Host, { class: {
-                editing: this.editing,
-                "focus--text": this.focusType === "text",
-                "focus--line": this.focusType === "line",
-                [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
-                [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
-                [formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
-                [formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
-                [commonClassesNames["DISABLED_CLASS"]]: this.disabled
-            } }, h("div", { onMouseUp: this.clickToEdit &&
-                !this.editing &&
-                !this.disableEdition &&
-                this.wrapperClickedHandler, class: {
-                wrapper: true
-            }, ref: el => (this.wrapperEl = el) }, this.fluid ? (h("div", { class: "ghost", ref: el => (this.ghostDiv = el) })) : null, h("input", { type: "text", value: this.value, readOnly: !this.editing, ref: el => (this.textInput = el), onKeyDown: this.inputKeyDownHandler, onInput: this.inputInputHandler, tabIndex: this.editing ? 0 : -1 }), h("div", { class: "right-wrapper" }, !this.disableEdition ? (h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/edit", onClick: this.edit, ref: el => (this.editButtonEl = el) })) : null, formTooltipLogic(this, this.hideTooltip)))));
-    }
-    static get watchers() { return {
-        "value": ["watchValueHandler"],
-        "editing": ["watchEditingHandler"]
-    }; }
-};
-GxgTitleEditable.style = titleEditableCss;
-
-export { GxgTitleEditable as gxg_title_editable };
-
-//# sourceMappingURL=gxg-title-editable.entry.js.map

package/dist/esm/gxg-title-editable.entry.js.map

@@ -1 +0,0 @@
-{"file":"gxg-title-editable.entry.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.css?tag=gxg-title-editable&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.js"],"sourcesContent":[":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Warning*/\n:host(.gxg-validation--warning) .form-element {\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus {\n  outline-color: var(--ds-border-color--warning);\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--warning);\n}\n\n/*Error*/\n:host(.gxg-validation--error) .form-element {\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus {\n  outline-color: var(--ds-border-color--error);\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--error);\n}\n\n/*Success*/\n:host(.gxg-validation--success) .form-element {\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus {\n  outline-color: var(--ds-border-color--success);\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--success);\n}\n\n/*Tooltip*/\n.tooltip-outer-wrapper {\n  display: grid;\n  grid-template-columns: 0fr;\n  transition: grid-template-columns var(--timing-02);\n}\n\n:host(.tooltip--visible) .tooltip-outer-wrapper {\n  grid-template-columns: 1fr;\n}\n\n.tooltip-inner-wrapper {\n  --margin-inline-start: 6px;\n  overflow: hidden;\n  transition: 150ms width;\n  width: 0;\n}\n.tooltip-inner-wrapper gxg-icon {\n  display: flex;\n  position: relative !important;\n  top: 0 !important;\n  transform: none !important;\n  margin-inline-start: var(--margin-inline-start);\n  box-sizing: border-box;\n}\n.tooltip-inner-wrapper--visible {\n  width: calc(var(--ds-icon-size-box--small) + var(--margin-inline-start));\n}\n.tooltip-inner-wrapper--hidden {\n  display: none;\n}\n\n:host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:host {\n  display: block;\n  color: var(--gxg-title-editable__color);\n}\n:host .wrapper {\n  font-family: var(--ds-base-font-family-primary);\n  position: relative;\n  max-width: 100%;\n}\n:host input {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  text-transform: inherit;\n  color: inherit;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-sizing: border-box;\n  flex-grow: 1;\n  cursor: auto;\n  border-bottom: 2px solid transparent;\n}\n:host input:focus {\n  outline: none;\n}\n\n/*wrapper*/\n.wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--gxg-title-editable-wrapper__gap);\n  font-weight: var(--gxg-title-editable__font-weight);\n}\n\n/*editing*/\n:host(:not([editing])) input {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/*click-to-edit*/\n:host([click-to-edit]:not([disable-edition])) .wrapper,\n:host([click-to-edit]:not([disable-edition])) input {\n  cursor: pointer;\n}\n\n/*title types*/\n:host([title-type=h1]) .wrapper {\n  font-size: var(--gxg-title-editable-h1__font-size);\n  text-transform: capitalize;\n}\n\n:host([title-type=h2]) .wrapper {\n  font-size: var(--gxg-title-editable-h2__font-size);\n}\n\n/*fluid*/\n:host([fluid]) .wrapper {\n  display: inline-flex;\n}\n\n/*focus (optional)*/\n:host(.focus--text.editing) input {\n  color: var(--gxg-title-editable__color--editing);\n}\n\n/*focus (optional)*/\n:host(.focus--line.editing) input {\n  border-bottom-color: var(--gxg-title-editable__color--editing);\n}\n\n/*ghost div: it helps measuring the text width, to make the input as wide as needed (fluid)*/\n.ghost {\n  font-family: inherit;\n  font-size: inherit;\n  position: fixed;\n  visibility: hidden;\n  height: auto;\n  width: auto;\n  white-space: nowrap;\n  /*remove from viewport*/\n  bottom: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n\n.right-wrapper {\n  display: flex;\n  align-items: center;\n}","import { Host, h } from \"@stencil/core\";\nimport { formTooltipLogic } from \"../../common/form\";\nimport { formClasses } from \"../../common/classesNames\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport { detectClickOutside } from \"../../common/detect-click-outside\";\nexport class GxgTitleEditable {\n    constructor() {\n        this.value = undefined;\n        this.titleType = \"h1\";\n        this.disableEdition = false;\n        this.debounce = false;\n        this.debounceDelay = 800;\n        this.disabled = false;\n        this.clickToEdit = false;\n        this.fluid = false;\n        this.focusType = undefined;\n        this.validationStatus = \"indeterminate\";\n        this.validationMessage = undefined;\n        this.hideTooltip = false;\n        this.editing = false;\n    }\n    textInput;\n    wrapperEl;\n    editButtonEl;\n    ghostDiv;\n    el;\n    timeoutReference;\n    watchValueHandler(newValue) {\n        if (this.debounce) {\n            clearTimeout(this.timeoutReference);\n            this.timeoutReference = setTimeout(() => {\n                this.valueChanged.emit(newValue);\n            }, this.debounceDelay);\n        }\n        else {\n            this.valueChanged.emit(newValue);\n        }\n    }\n    watchEditingHandler(editing) {\n        if (editing) {\n            document.addEventListener(\"click\", this.detectClickOutsideFunc);\n        }\n        else {\n            document.removeEventListener(\"click\", this.detectClickOutsideFunc);\n        }\n    }\n    /* EVENTS */\n    /**\n     * Emitted when the value changes\n     */\n    valueChanged;\n    /*COMPONENT LIFECYCLE METHODS*/\n    componentDidLoad() {\n        if (this.fluid) {\n            this.inputInputHandler();\n        }\n    }\n    /*PRIVATE METHODS*/\n    edit = () => {\n        this.editing = true;\n        this.positionCursorAtTheEnd();\n    };\n    wrapperClickedHandler = () => {\n        this.editing = true;\n    };\n    positionCursorAtTheEnd = () => {\n        this.textInput.selectionStart = this.textInput.selectionEnd =\n            this.textInput.value.length;\n        this.textInput.focus();\n    };\n    inputKeyDownHandler = (e) => {\n        if (e.key === \"Enter\" || e.key === \"Escape\") {\n            e.preventDefault();\n            this.editing = false;\n            this.editButtonEl.focus();\n        }\n        else if (this.fluid) {\n            this.setInputWidth();\n        }\n    };\n    detectClickOutsideFunc = (e) => {\n        const clickedOutside = detectClickOutside(e, this.wrapperEl);\n        if (clickedOutside) {\n            this.editing = false;\n        }\n    };\n    setInputWidth = () => {\n        this.textInput.style.width = this.value.length + 1 + \"ch\";\n    };\n    inputInputHandler = () => {\n        this.value = this.textInput.value;\n        if (this.fluid) {\n            this.ghostDiv.innerText = this.value;\n            this.updateInputWidth();\n        }\n    };\n    updateInputWidth = () => {\n        if (this.fluid) {\n            const ghostDivWidth = this.ghostDiv.getBoundingClientRect().width;\n            this.textInput.style.width = `${ghostDivWidth}px`;\n        }\n    };\n    /*RENDER*/\n    render() {\n        return (h(Host, { class: {\n                editing: this.editing,\n                \"focus--text\": this.focusType === \"text\",\n                \"focus--line\": this.focusType === \"line\",\n                [formClasses[\"VALIDATION_INDETERMINATE_CLASS\"]]: this.validationStatus === \"indeterminate\",\n                [formClasses[\"VALIDATION_WARNING_CLASS\"]]: this.validationStatus === \"warning\",\n                [formClasses[\"VALIDATION_ERROR_CLASS\"]]: this.validationStatus === \"error\",\n                [formClasses[\"VALIDATION_SUCCESS_CLASS\"]]: this.validationStatus === \"success\",\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            } }, h(\"div\", { onMouseUp: this.clickToEdit &&\n                !this.editing &&\n                !this.disableEdition &&\n                this.wrapperClickedHandler, class: {\n                wrapper: true\n            }, ref: el => (this.wrapperEl = el) }, this.fluid ? (h(\"div\", { class: \"ghost\", ref: el => (this.ghostDiv = el) })) : null, h(\"input\", { type: \"text\", value: this.value, readOnly: !this.editing, ref: el => (this.textInput = el), onKeyDown: this.inputKeyDownHandler, onInput: this.inputInputHandler, tabIndex: this.editing ? 0 : -1 }), h(\"div\", { class: \"right-wrapper\" }, !this.disableEdition ? (h(\"gxg-button\", { type: \"secondary-icon-only\", icon: \"gemini-tools/edit\", onClick: this.edit, ref: el => (this.editButtonEl = el) })) : null, formTooltipLogic(this, this.hideTooltip)))));\n    }\n    static get is() { return \"gxg-title-editable\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"title-editable.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"title-editable.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The title value\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"titleType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"EditableTitleType\",\n                    \"resolved\": \"\\\"h1\\\" | \\\"h2\\\" | \\\"h3\\\" | \\\"h4\\\"\",\n                    \"references\": {\n                        \"EditableTitleType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/title-editable/title-editable.tsx\",\n                            \"id\": \"src/components/title-editable/title-editable.tsx::EditableTitleType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The title type\"\n                },\n                \"attribute\": \"title-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"h1\\\"\"\n            },\n            \"disableEdition\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If true, the title will not be editable\"\n                },\n                \"attribute\": \"disable-edition\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"debounce\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute activates a debounce for the valueChanged event. This will cause the event to be emitted after 'debounceDelay' time.\"\n                },\n                \"attribute\": \"debounce\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"debounceDelay\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The debounce delay value. Only applies if 'debounce' is true.\"\n                },\n                \"attribute\": \"debounce-delay\",\n                \"reflect\": false,\n                \"defaultValue\": \"800\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the input disabled\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"clickToEdit\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If true, it will allow the title to be edited\"\n                },\n                \"attribute\": \"click-to-edit\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"fluid\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If true, the width of the title will take only the minimum needed space\"\n                },\n                \"attribute\": \"fluid\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"focusType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"EditableTitleFocusType\",\n                    \"resolved\": \"\\\"line\\\" | \\\"text\\\"\",\n                    \"references\": {\n                        \"EditableTitleFocusType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/title-editable/title-editable.tsx\",\n                            \"id\": \"src/components/title-editable/title-editable.tsx::EditableTitleFocusType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If true, the width of the title will take only the minimum needed space\"\n                },\n                \"attribute\": \"focus-type\",\n                \"reflect\": true\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"ValidationStatus\",\n                    \"resolved\": \"\\\"error\\\" | \\\"indeterminate\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"ValidationStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../common/types\",\n                            \"id\": \"src/common/types.ts::ValidationStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status\"\n                },\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"indeterminate\\\"\"\n            },\n            \"validationMessage\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The message to display when validation fails (error)\"\n                },\n                \"attribute\": \"validation-message\",\n                \"reflect\": false\n            },\n            \"hideTooltip\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Shows or hides the tooltip\"\n                },\n                \"attribute\": \"hide-tooltip\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"editing\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"valueChanged\",\n                \"name\": \"valueChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the value changes\"\n                },\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"value\",\n                \"methodName\": \"watchValueHandler\"\n            }, {\n                \"propName\": \"editing\",\n                \"methodName\": \"watchEditingHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=title-editable.js.map\n"],"version":3}