@genexus/genexus-ide-ui 0.0.108 → 0.0.110

package/dist/genexus-ide-ui/p-5fe20f47.entry.js

@@ -0,0 +1,211 @@
+import { r as t, c as r, g as e, h as s, H as a } from "./p-48217969.js";
+
+const o = ":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)}:host([full-width]){width:100%}:host([full-width]) .container{width:100%;display:flex}:host([full-width]) ::slotted(gxg-button){flex:1}";
+
+const i = class {
+  constructor(e) {
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.setSelectedButton = t => {
+      const r = t.target.tagName;
+      if (r !== "GXG-BUTTON") {
+        //clicked button is disabled
+        return;
+      } else {
+        const r = t.target;
+        if (r.disabled || r.selected) {
+          //button is disabled or is the current selected
+          return;
+        }
+        const e = this.el.children;
+        Array.from(e).forEach((function(t) {
+          if (t.selected) {
+            t.selected = false;
+          }
+        }));
+        r.selected = true;
+        this.selectedButtonChanged.emit(r.id);
+        this.updateSelectedButtonId();
+      }
+    };
+    this.updateSelectedButtonId = () => {
+      const t = this.el.children;
+      const r = Array.from(t).find((t => t.selected && !t.disabled));
+      if (r) {
+        this.selectedButtonId = r.id;
+      }
+    };
+    t(this, e);
+    this.selectedButtonChanged = r(this, "selectedButtonChanged", 7);
+    this.selectedButtonId = undefined;
+    this.reduced = false;
+    this.fullWidth = false;
+  }
+  get el() {
+    return e(this);
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentDidLoad() {
+    this.updateSelectedButtonId();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return s(a, null, s("div", {
+      class: {
+        container: true,
+        "container--reduced": this.reduced
+      },
+      ref: t => this.containerEl = t,
+      onClick: this.setSelectedButton
+    }, s("slot", null)));
+  }
+};
+
+i.style = o;
+
+const n = ':host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows;overflow:hidden;--ds-icon-size-box--small:var(--mer-font__size--xxs);--ds-icon-size--small:100%}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__outer-wrapper{position:relative;flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__outer-wrapper::after,.top-state-bar__outer-wrapper::before{border-radius:var(--mer-border__width--lg)}.top-state-bar__outer-wrapper::before{content:"";width:100%;height:100%;left:0;top:0;position:absolute;background-color:var(--mer-border-color__dim);z-index:0}.top-state-bar__outer-wrapper::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:1}.top-state-bar__inner-wrapper{flex:1;display:flex;flex-direction:row;justify-content:space-between;gap:var(--mer-spacing--xs);position:relative;z-index:2}.top-state-bar__caption{color:var(--mer-text__on-surface);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);position:relative;z-index:2}.top-state-bar__close{cursor:pointer;transition:200ms background-color}.top-state-bar__inner-wrapper,.top-state-bar__progress-wrapper,.top-state-bar__close{opacity:0;transition:150ms opacity}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--in-progress .top-state-bar__outer-wrapper:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 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 .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--visible .top-state-bar__inner-wrapper,.top-state-bar--visible .top-state-bar__progress-wrapper,.top-state-bar--visible .top-state-bar__close{opacity:1}.top-state-bar--visible .top-state-bar__close:hover{opacity:0.75}.top-state-bar--visible .top-state-bar__close:active{opacity:0.5}@-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__outer-wrapper:before{display:none}';
+
+const l = class {
+  constructor(r) {
+    // 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;
+    };
+    this.closeKeyDownHandler = t => {
+      if (t.key === "Enter") {
+        this.active = false;
+      }
+    };
+    this.closeClickHandler = () => {
+      this.closeButtonHandler();
+      this.closedCallback();
+    };
+    t(this, r);
+    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 = () => {};
+  }
+  get el() {
+    return e(this);
+  }
+  watchActiveHandler(t) {
+    if (t) {
+      this.visible = true;
+      setTimeout((() => {
+        this.topStateBarVisible = true;
+      }), 300);
+    } else {
+      this.topStateBarVisible = false;
+      setTimeout((() => {
+        this.visible = false;
+      }), 300);
+    }
+  }
+  watchStateTypeHandler() {
+    this.evaluateWithAction();
+  }
+  watchProgressHandler(t) {
+    if (t => 0) {
+      this.el.style.setProperty("--top-bar-progress", `${t}%`);
+    }
+    if (t === 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 s(a, {
+      class: {
+        visible: this.visible
+      },
+      "aria-hidden": !this.active
+    }, s("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
+      }
+    }, s("div", {
+      class: "top-state-bar__outer-wrapper"
+    }, !this.minimal ? s("div", {
+      class: "top-state-bar__inner-wrapper"
+    }, s("label", {
+      id: "label",
+      class: {
+        "top-state-bar__caption": true
+      },
+      part: "label"
+    }, this.caption), this.withClose && !this.minimal ? s("gxg-icon", {
+      class: {
+        "top-state-bar__close": true
+      },
+      onClick: this.closeClickHandler,
+      onKeyDown: this.closeKeyDownHandler,
+      role: "button",
+      "aria-label": "close",
+      type: "gemini-tools/close",
+      color: "mercury-on-surface",
+      tabIndex: this.visible ? 0 : -1,
+      size: "small"
+    }) : null) : null, s("div", {
+      class: {
+        "top-state-bar__progress-wrapper": true
+      },
+      part: "progress-wrapper"
+    }, s("span", {
+      class: "progress-bar"
+    })))));
+  }
+  static get watchers() {
+    return {
+      active: [ "watchActiveHandler" ],
+      stateType: [ "watchStateTypeHandler" ],
+      progress: [ "watchProgressHandler" ]
+    };
+  }
+};
+
+l.style = n;
+
+export { i as gxg_buttons_container, l as gxg_top_state_bar };
+//# sourceMappingURL=p-5fe20f47.entry.js.map

package/dist/genexus-ide-ui/p-5fe20f47.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonsContainerCss","GxgButtonsContainer","constructor","hostRef","this","setSelectedButton","event","tagName","target","clickedButton","disabled","selected","gxgButtonsHtmlCollection","el","children","Array","from","forEach","button","selectedButtonChanged","emit","id","updateSelectedButtonId","selectedButton","find","selectedButtonId","undefined","reduced","fullWidth","componentDidLoad","render","h","Host","class","container","ref","containerEl","onClick","gxgTopStateBarCss","GxgTopStateBar","evaluateInitialProgress","progress","stateType","style","setProperty","evaluateWithAction","withClose","closeButtonHandler","active","closeKeyDownHandler","e","key","closeClickHandler","closedCallback","topStateBarVisible","visible","caption","minimal","autoClose","noBorder","watchActiveHandler","setTimeout","watchStateTypeHandler","watchProgressHandler","componentWillLoad","role","part","onKeyDown","type","color","tabIndex","size"],"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","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":["/*--- 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}\n\n:host([full-width]) {\n  width: 100%;\n}\n:host([full-width]) .container {\n  width: 100%;\n  display: flex;\n}\n:host([full-width]) ::slotted(gxg-button) {\n  flex: 1;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgButtonsContainer {\n    constructor() {\n        this.selectedButtonId = undefined;\n        this.reduced = false;\n        this.fullWidth = 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: {\n                container: true,\n                \"container--reduced\": this.reduced\n            }, 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            \"fullWidth\": {\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\": \"Makes the buttons-container full-width\"\n                },\n                \"attribute\": \"full-width\",\n                \"reflect\": true,\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",":host {\n  --top-bar-progress: 0%;\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: 200ms grid-template-rows;\n  overflow: hidden;\n  --ds-icon-size-box--small: var(--mer-font__size--xxs);\n  --ds-icon-size--small: 100%;\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  display: flex;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n  border-radius: var(--mer-border__width--lg);\n  list-style: var(--mer-font__size--xxs);\n  display: flex;\n  /*states*/\n}\n.top-state-bar > * {\n  position: relative;\n  z-index: 1;\n}\n.top-state-bar__outer-wrapper {\n  position: relative;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__outer-wrapper::after, .top-state-bar__outer-wrapper::before {\n  border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar__outer-wrapper::before {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  position: absolute;\n  background-color: var(--mer-border-color__dim);\n  z-index: 0;\n}\n.top-state-bar__outer-wrapper::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: 1;\n}\n.top-state-bar__inner-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  gap: var(--mer-spacing--xs);\n  position: relative;\n  z-index: 2;\n}\n.top-state-bar__caption {\n  color: var(--mer-text__on-surface);\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  position: relative;\n  z-index: 2;\n}\n.top-state-bar__close {\n  cursor: pointer;\n  transition: 200ms background-color;\n}\n.top-state-bar__inner-wrapper, .top-state-bar__progress-wrapper, .top-state-bar__close {\n  opacity: 0;\n  transition: 150ms opacity;\n}\n.top-state-bar--accent .progress-bar {\n  background-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--warning .progress-bar {\n  background-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--in-progress .top-state-bar__outer-wrapper:before {\n  height: 0;\n  width: 120%;\n  padding-top: 60%;\n  padding-bottom: 60%;\n  background: linear-gradient(90deg, rgba(91, 167, 255, 0.4) 0%, rgba(63, 168, 155, 0.4) 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 .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--visible .top-state-bar__inner-wrapper,\n.top-state-bar--visible .top-state-bar__progress-wrapper,\n.top-state-bar--visible .top-state-bar__close {\n  opacity: 1;\n}\n.top-state-bar--visible .top-state-bar__close:hover {\n  opacity: 0.75;\n}\n.top-state-bar--visible .top-state-bar__close:active {\n  opacity: 0.5;\n}\n\n/*in progress animation*/\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__outer-wrapper:before {\n  display: 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 = () => { };\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    closeKeyDownHandler = (e) => {\n        if (e.key === \"Enter\") {\n            this.active = false;\n        }\n    };\n    closeClickHandler = () => {\n        this.closeButtonHandler();\n        this.closedCallback();\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__outer-wrapper\" }, !this.minimal ? (h(\"div\", { class: \"top-state-bar__inner-wrapper\" }, h(\"label\", { id: \"label\", class: {\n                \"top-state-bar__caption\": true\n            }, part: \"label\" }, this.caption), this.withClose && !this.minimal ? (h(\"gxg-icon\", { class: {\n                \"top-state-bar__close\": true\n            }, onClick: this.closeClickHandler, onKeyDown: this.closeKeyDownHandler, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-on-surface\", tabIndex: this.visible ? 0 : -1, size: \"small\" })) : null)) : null, h(\"div\", { class: {\n                \"top-state-bar__progress-wrapper\": true\n            }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))))));\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\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"() => void\",\n                    \"resolved\": \"() => void\",\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                \"defaultValue\": \"() => {}\"\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"],"mappings":";;AAAA,MAAMA,IAAsB;;MCCfC,IAAmB;EAC5B,WAAAC,CAAAC;;;;IAmBAC,KAAAC,oBAAqBC;MACjB,MAAMC,IAAUD,EAAME,OAAOD;MAC7B,IAAIA,MAAY,cAAc;;QAE1B;aAEC;QACD,MAAME,IAAgBH,EAAME;QAC5B,IAAIC,EAAcC,YAAYD,EAAcE,UAAU;;UAElD;;QAEJ,MAAMC,IAA2BR,KAAKS,GAAGC;QACzCC,MAAMC,KAAKJ,GAA0BK,SAAQ,SAAUC;UACnD,IAAIA,EAAOP,UAAU;YACjBO,EAAOP,WAAW;;;QAG1BF,EAAcE,WAAW;QACzBP,KAAKe,sBAAsBC,KAAKX,EAAcY;QAC9CjB,KAAKkB;;;IAGblB,KAAAkB,yBAAyB;MACrB,MAAMV,IAA2BR,KAAKS,GAAGC;MACzC,MAAMS,IAAiBR,MAAMC,KAAKJ,GAA0BY,MAAMN,KACvDA,EAAOP,aAAaO,EAAOR;MAEtC,IAAIa,GAAgB;QAChBnB,KAAKqB,mBAAmBF,EAAeF;;;;;IA/C3CjB,KAAKqB,mBAAmBC;IACxBtB,KAAKuB,UAAU;IACfvB,KAAKwB,YAAY;;;;;;EAUrB,gBAAAC;IACIzB,KAAKkB;;;EAsCT,MAAAQ;IACI,OAAQC,EAAEC,GAAM,MAAMD,EAAE,OAAO;MAAEE,OAAO;QAChCC,WAAW;QACX,sBAAsB9B,KAAKuB;;MAC5BQ,KAAKtB,KAAOT,KAAKgC,cAAcvB;MAAKwB,SAASjC,KAAKC;OAAqB0B,EAAE,QAAQ;;;;;;AC1DhG,MAAMO,IAAoB;;MCCbC,IAAc;EACvB,WAAArC,CAAAC;;;;IAwDAC,KAAAoC,0BAA0B;MACtB,IAAIpC,KAAKqC,aAAaf,cACjBtB,KAAKsC,cAAc,WAChBtC,KAAKsC,cAAc,aACnBtC,KAAKsC,cAAc,YAAY;QACnCtC,KAAKqC,WAAW;aAEf,IAAIrC,KAAKqC,aAAaf,aACvBtB,KAAKsC,cAAc,eAAe;QAClCtC,KAAKqC,WAAW;;MAEpBrC,KAAKS,GAAG8B,MAAMC,YAAY,sBAAsB,GAAGxC,KAAKqC;AAAY;IAExErC,KAAAyC,qBAAqB;MACjB,IAAIzC,KAAK0C,cAAcpB,cAClBtB,KAAKsC,cAAc,WAChBtC,KAAKsC,cAAc,aACnBtC,KAAKsC,cAAc,YAAY;QACnCtC,KAAK0C,YAAY;;;IAGzB1C,KAAA2C,qBAAqB;MACjB3C,KAAK4C,SAAS;AAAK;IAEvB5C,KAAA6C,sBAAuBC;MACnB,IAAIA,EAAEC,QAAQ,SAAS;QACnB/C,KAAK4C,SAAS;;;IAGtB5C,KAAAgD,oBAAoB;MAChBhD,KAAK2C;MACL3C,KAAKiD;AAAgB;;IAtFrBjD,KAAKkD,qBAAqB;IAC1BlD,KAAKmD,UAAU;IACfnD,KAAKoD,UAAU9B;IACftB,KAAKqD,UAAU;IACfrD,KAAK4C,SAAS;IACd5C,KAAKsC,YAAY;IACjBtC,KAAKqC,WAAWf;IAChBtB,KAAK0C,YAAYpB;IACjBtB,KAAKsD,YAAY;IACjBtD,KAAKuD,WAAW;IAChBvD,KAAKiD,iBAAiB;;;;;EAK1B,kBAAAO,CAAmBZ;IACf,IAAIA,GAAQ;MACR5C,KAAKmD,UAAU;MACfM,YAAW;QACPzD,KAAKkD,qBAAqB;AAAI,UAC/B;WAEF;MACDlD,KAAKkD,qBAAqB;MAC1BO,YAAW;QACPzD,KAAKmD,UAAU;AAAK,UACrB;;;EAGX,qBAAAO;IACI1D,KAAKyC;;EAET,oBAAAkB,CAAqBtB;IACjB,IAAIA,KAAY,GAAsB;MAClCrC,KAAKS,GAAG8B,MAAMC,YAAY,sBAAsB,GAAGH;;IAEvD,IAAIA,MAAa,OAAOrC,KAAKsD,WAAW;MACpCG,YAAW;QACPzD,KAAK4C,SAAS;AAAK,UACpB;;;;;EAKX,iBAAAgB;IACI5D,KAAKyC;IACLzC,KAAKoC;IACL,IAAIpC,KAAK4C,QAAQ;MACb5C,KAAKmD,UAAU;MACfnD,KAAKkD,qBAAqB;;;;EAwClC,MAAAxB;IACI,OAAQC,EAAEC,GAAM;MAAEC,OAAO;QAAEsB,SAASnD,KAAKmD;;MAAW,gBAAgBnD,KAAK4C;OAAUjB,EAAE,OAAO;MAAEkC,MAAM;MAAU,mBAAmB;MAAS,gBAAgB7D,KAAK4C;MAAQf,OAAO;QACtK,iBAAiB;QACjB,CAAC,kBAAkB7B,KAAKsC,cAAc;QACtC,6BAA6BtC,KAAK0C;QAClC,0BAA0B1C,KAAKkD;;OAC9BvB,EAAE,OAAO;MAAEE,OAAO;QAAmC7B,KAAKqD,UAAW1B,EAAE,OAAO;MAAEE,OAAO;OAAkCF,EAAE,SAAS;MAAEV,IAAI;MAASY,OAAO;QAC3J,0BAA0B;;MAC3BiC,MAAM;OAAW9D,KAAKoD,UAAUpD,KAAK0C,cAAc1C,KAAKqD,UAAW1B,EAAE,YAAY;MAAEE,OAAO;QACzF,wBAAwB;;MACzBI,SAASjC,KAAKgD;MAAmBe,WAAW/D,KAAK6C;MAAqBgB,MAAM;MAAU,cAAc;MAASG,MAAM;MAAsBC,OAAO;MAAsBC,UAAUlE,KAAKmD,UAAU,KAAK;MAAGgB,MAAM;SAAc,QAAS,MAAMxC,EAAE,OAAO;MAAEE,OAAO;QAC3P,mCAAmC;;MACpCiC,MAAM;OAAsBnC,EAAE,QAAQ;MAAEE,OAAO"}

package/dist/genexus-ide-ui/{p-d14b5546.entry.js → p-6f5b13a7.entry.js}

@@ -545,7 +545,9 @@ CONSTANTS
   "mercury-primary": "mer-icon__primary",
   "mercury-on-primary": "mer-text__on-primary",
   "mercury-text-on-message": "mer-text__on-message",
-  "mercury-neutral": "mer-icon__neutral"
+  "mercury-neutral": "mer-icon__neutral",
+  "mercury-on-surface": "mer-icon__on-surface",
+  "mercury-primary-disabled": "mer-icon__primary--disabled"
 };
 
 const z = class {
@@ -699,4 +701,4 @@ const C = class {
 C.style = _;
 
 export { m as ch_icon, u as gxg_form_text, z as gxg_icon, k as gxg_label, C as gxg_tooltip };
-//# sourceMappingURL=p-d14b5546.entry.js.map
+//# sourceMappingURL=p-6f5b13a7.entry.js.map