@genexus/genexus-ide-ui 0.0.108 → 0.0.109

package/dist/cjs/gx-ide-status-buttons.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-status-buttons.entry.cjs.js","mappings":"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","names":["Locale","h","Host"],"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"],"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"],"version":3}

package/dist/cjs/gx-ide-ww-images.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5ab4492a.js');
 const locale = require('./locale-bf43b87c.js');
 const config = require('./config-8246d533.js');
-const common = require('./common-103f62f6.js');
+const common = require('./common-2e355c7d.js');
 const constants = require('./constants-96a42315.js');
 const helpers = require('./helpers-dbbb6046.js');
 const grid = require('./grid-b69aebd6.js');

package/dist/cjs/gxg-buttons-container_2.cjs.entry.js

@@ -0,0 +1,184 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5ab4492a.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)}:host([full-width]){width:100%}:host([full-width]) .container{width:100%;display:flex}:host([full-width]) ::slotted(gxg-button){flex:1}";
+
+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;
+            }
+        };
+        index.registerInstance(this, hostRef);
+        this.selectedButtonChanged = index.createEvent(this, "selectedButtonChanged", 7);
+        this.selectedButtonId = undefined;
+        this.reduced = false;
+        this.fullWidth = false;
+    }
+    get el() { return index.getElement(this); }
+    // 6.COMPONENT LIFECYCLE METHODS //
+    componentDidLoad() {
+        this.updateSelectedButtonId();
+    }
+    // 10.RENDER() FUNCTION //
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: {
+                container: true,
+                "container--reduced": this.reduced
+            }, ref: el => (this.containerEl = el), onClick: this.setSelectedButton }, index.h("slot", null))));
+    }
+};
+GxgButtonsContainer.style = buttonsContainerCss;
+
+const gxgTopStateBarCss = ":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{flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm);border:var(--mer-border__width--sm) solid var(--mer-border-color__dim);border-radius:var(--mer-border__width--lg)}.top-state-bar__inner-wrapper{flex:1;display:flex;flex-direction:row;justify-content:space-between;gap:var(--mer-spacing--xs)}.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{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--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 .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 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__outer-wrapper{border:0}";
+
+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;
+        };
+        this.closeKeyDownHandler = (e) => {
+            if (e.key === "Enter") {
+                this.active = false;
+            }
+        };
+        this.closeClickHandler = () => {
+            this.closeButtonHandler();
+            this.closedCallback();
+        };
+        index.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 = () => { };
+    }
+    get el() { return index.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 (index.h(index.Host, { class: { visible: this.visible }, "aria-hidden": !this.active }, index.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
+            } }, index.h("div", { class: "top-state-bar__outer-wrapper" }, !this.minimal ? (index.h("div", { class: "top-state-bar__inner-wrapper" }, index.h("label", { id: "label", class: {
+                "top-state-bar__caption": true
+            }, part: "label" }, this.caption), this.withClose && !this.minimal ? (index.h("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, index.h("div", { class: {
+                "top-state-bar__progress-wrapper": true
+            }, part: "progress-wrapper" }, index.h("span", { class: "progress-bar" }))))));
+    }
+    static get watchers() { return {
+        "active": ["watchActiveHandler"],
+        "stateType": ["watchStateTypeHandler"],
+        "progress": ["watchProgressHandler"]
+    }; }
+};
+GxgTopStateBar.style = gxgTopStateBarCss;
+
+exports.gxg_buttons_container = GxgButtonsContainer;
+exports.gxg_top_state_bar = GxgTopStateBar;
+
+//# sourceMappingURL=gxg-buttons-container_2.cjs.entry.js.map

package/dist/cjs/gxg-buttons-container_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gxg-buttons-container.gxg-top-state-bar.entry.cjs.js","mappings":"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","names":["h","Host"],"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  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  border: var(--mer-border__width--sm) solid var(--mer-border-color__dim);\n  border-radius: var(--mer-border__width--lg);\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}\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 {\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--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 .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 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__outer-wrapper {\n  border: 0;\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"],"version":3}