@genexus/genexus-ide-ui 1.1.61 → 1.1.63

package/dist/collection/components/_helpers/progress-bar/progress-bar.css

@@ -0,0 +1,210 @@
+:host {
+  --top-bar-progress: 0%;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: var(--mer-timing--fast) grid-template-rows;
+  overflow: hidden;
+  --ds-icon-size-box--small: var(--mer-font__size--2xs);
+  --ds-icon-size--small: 100%;
+}
+:host > * {
+  overflow: hidden;
+}
+
+:host(.disable-transition) {
+  --progress-bar-transition-speed: 0 !important;
+}
+
+: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--2xs);
+  display: flex;
+  /*states*/
+}
+.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-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-size: var(--mer-font__size--2xs);
+  line-height: var(--mer-font__size--2xs);
+  font-weight: var(--mer-font__weight--regular);
+  display: flex;
+  align-items: center;
+  font-style: italic;
+}
+.top-state-bar__progress-wrapper {
+  height: var(--mer-spacing--2xs);
+  background-color: var(--mer-surface__elevation--01);
+  position: relative;
+  z-index: 2;
+}
+.top-state-bar__close {
+  cursor: pointer;
+  transition: var(--mer-timing--fast) 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;
+}
+
+:host(.with-close-button) .top-state-bar__outer-wrapper {
+  padding-top: var(--mer-spacing--2xs);
+  gap: var(--mer-spacing--2xs);
+}
+
+/*in progress animation*/
+@-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 var(--progress-bar-transition-speed);
+  width: var(--top-bar-progress);
+  border-radius: calc(var(--mer-spacing--2xs) / 2);
+  height: 100%;
+}
+
+:host(.no-border) .top-state-bar__outer-wrapper:before,
+:host(.border-block-start) .top-state-bar__outer-wrapper:before,
+:host(.border-block-end) .top-state-bar__outer-wrapper:before {
+  display: none;
+}
+
+:host(.border-block-start) .top-state-bar__outer-wrapper {
+  border-block-start: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+}
+
+:host(.border-block-end) .top-state-bar__outer-wrapper {
+  border-block-start: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+}

package/dist/collection/components/_helpers/progress-bar/progress-bar.js

@@ -0,0 +1,320 @@
+import { Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/form",
+    "utils/layout",
+    "utils/typography",
+    "components/button",
+    "components/icon",
+    "components/combo-box",
+    "components/edit",
+    "components/tabular-grid"
+];
+const CLOSE_ICON = getIconPath({
+    category: "system",
+    name: "close",
+    colorType: "primary"
+});
+const PROGRESS_TRANSITION_SPEED = 200;
+export class GxIdeProgressBar {
+    constructor() {
+        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.closeClickHandler = () => {
+            this.active = false;
+            this.closedCallback();
+        };
+        this.renderClose = () => {
+            return (this.closeType === "button" && (h("button", { class: "button-tertiary button-icon-only", "aria-label": "close", onClick: this.closeClickHandler, role: "button", tabIndex: this.visible ? 0 : -1 }, h("ch-image", { src: CLOSE_ICON, class: "icon-md" }))));
+        };
+        this.topStateBarVisible = false;
+        this.disableTransition = false;
+        this.visible = false;
+        this.caption = undefined;
+        this.minimal = false;
+        this.active = false;
+        this.stateType = "in-progress";
+        this.progress = undefined;
+        this.closeType = "button";
+        this.closedCallback = () => { };
+    }
+    watchActiveHandler(active) {
+        if (active) {
+            this.visible = true;
+            setTimeout(() => {
+                this.topStateBarVisible = true;
+            }, 300);
+        }
+        else {
+            this.topStateBarVisible = false;
+            setTimeout(() => {
+                this.visible = false;
+                this.el.style.setProperty("--top-bar-progress", `0%`);
+                this.progressBarClosed.emit();
+            }, 300);
+        }
+    }
+    watchProgressHandler(progress) {
+        if (progress >= 0 && progress <= 100) {
+            this.el.style.setProperty("--top-bar-progress", `${progress}%`);
+        }
+        if (progress === 100 && this.closeType === "auto-close") {
+            setTimeout(() => {
+                this.active = false;
+            }, 200);
+        }
+    }
+    componentWillLoad() {
+        this.evaluateInitialProgress();
+        if (this.active) {
+            this.visible = true;
+            this.topStateBarVisible = true;
+        }
+    }
+    /**
+     * Sets the progress bar to zero instantly (no transition) and changes the type
+     * to 'accent'. Useful when reusing the progress bar for a new process.
+     */
+    async reset() {
+        // Resetting involves setting the progress to zero. In this case it is preferable
+        // to disable the transition.
+        this.disableTransition = true;
+        this.progress = 0;
+        this.stateType = "accent";
+        setTimeout(() => {
+            this.disableTransition = false; // enable transition for the nex process.
+        }, PROGRESS_TRANSITION_SPEED);
+    }
+    render() {
+        return (h(Host, { class: {
+                "visible": this.visible,
+                "with-close-button": this.closeType === "button",
+                "disable-transition": this.disableTransition
+            }, "aria-hidden": !this.active, style: {
+                "--progress-bar-transition-speed": `${PROGRESS_TRANSITION_SPEED}ms`
+            } }, h("ch-theme", { model: CSS_BUNDLES }), 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--visible": this.topStateBarVisible
+            } }, h("div", { class: "top-state-bar__outer-wrapper" }, !this.minimal ? (h("div", { class: "top-state-bar__inner-wrapper" }, h("label", { id: "label", class: {
+                "top-state-bar__caption": true
+            }, part: "label" }, this.caption), this.renderClose())) : null, h("div", { class: {
+                "top-state-bar__progress-wrapper": true
+            }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))))));
+    }
+    static get is() { return "gx-ide-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress-bar.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/progress-bar"]; }
+    static get properties() {
+        return {
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The top-bar title"
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "minimal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It will only display the bar (no title, no close button)"
+                },
+                "attribute": "minimal",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The top-bar active state. If false it will be hidden"
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "stateType": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "TopStateBarType",
+                    "resolved": "\"accent\" | \"error\" | \"in-progress\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TopStateBarType": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/progress-bar/progress-bar.tsx",
+                            "id": "src/components/_helpers/progress-bar/progress-bar.tsx::TopStateBarType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The top-bar state"
+                },
+                "attribute": "state-type",
+                "reflect": false,
+                "defaultValue": "\"in-progress\""
+            },
+            "progress": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The progress bar progress"
+                },
+                "attribute": "progress",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "closeType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto-close\" | \"button\"",
+                    "resolved": "\"auto-close\" | \"button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How to display the close button"
+                },
+                "attribute": "close-type",
+                "reflect": false,
+                "defaultValue": "\"button\""
+            },
+            "closedCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A callback that gets called when the top-state-bar is closed"
+                },
+                "defaultValue": "() => {}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "topStateBarVisible": {},
+            "disableTransition": {},
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "progressBarClosed",
+                "name": "progressBarClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted every time the progress bar is closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the progress bar to zero instantly (no transition) and changes the type\nto 'accent'. Useful when reusing the progress bar for a new process.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "watchActiveHandler"
+            }, {
+                "propName": "progress",
+                "methodName": "watchProgressHandler"
+            }];
+    }
+}
+//# sourceMappingURL=progress-bar.js.map

package/dist/collection/components/_helpers/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/_helpers/progress-bar/progress-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/combo-box\",\n  \"components/edit\",\n  \"components/tabular-grid\"\n];\n\nconst CLOSE_ICON = getIconPath({\n  category: \"system\",\n  name: \"close\",\n  colorType: \"primary\"\n});\nconst PROGRESS_TRANSITION_SPEED = 200;\n\n@Component({\n  tag: \"gx-ide-progress-bar\",\n  styleUrl: \"progress-bar.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/progress-bar\"]\n})\nexport class GxIdeProgressBar {\n  @Element() el: HTMLGxIdeProgressBarElement;\n\n  /**\n   * If true it will display the caption\n   */\n  @State() topStateBarVisible: boolean = false;\n\n  /**\n   * If true the progress will be updated instantly, without transition. This is required when the host user is calling the \"reset\" method.\n   */\n  @State() disableTransition: boolean = false;\n\n  /**\n   * If true it will display bar\n   */\n  @State() visible: boolean = false;\n\n  /**\n   * The top-bar title\n   */\n  @Prop() readonly caption: string;\n\n  /**\n   * It will only display the bar (no title, no close button)\n   */\n  @Prop({ reflect: true }) readonly minimal: boolean = false;\n\n  /**\n   * The top-bar active state. If false it will be hidden\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n  @Watch(\"active\")\n  watchActiveHandler(active: boolean) {\n    if (active) {\n      this.visible = true;\n      setTimeout(() => {\n        this.topStateBarVisible = true;\n      }, 300);\n    } else {\n      this.topStateBarVisible = false;\n      setTimeout(() => {\n        this.visible = false;\n        this.el.style.setProperty(\"--top-bar-progress\", `0%`);\n        this.progressBarClosed.emit();\n      }, 300);\n    }\n  }\n\n  /**\n   * The top-bar state\n   */\n  @Prop({ mutable: true }) stateType: TopStateBarType = \"in-progress\";\n\n  /**\n   * The progress bar progress\n   */\n  @Prop({ mutable: true }) progress: number = undefined;\n  @Watch(\"progress\")\n  watchProgressHandler(progress: number) {\n    if (progress >= 0 && progress <= 100) {\n      this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n    }\n    if (progress === 100 && this.closeType === \"auto-close\") {\n      setTimeout(() => {\n        this.active = false;\n      }, 200);\n    }\n  }\n\n  /**\n   * How to display the close button\n   */\n  @Prop() readonly closeType: \"auto-close\" | \"button\" = \"button\";\n\n  /**\n   * A callback that gets called when the top-state-bar is closed\n   */\n  @Prop() readonly closedCallback: () => void = () => {};\n\n  /**\n   * Emitted every time the progress bar is closed.\n   */\n  @Event() progressBarClosed: EventEmitter;\n\n  componentWillLoad() {\n    this.evaluateInitialProgress();\n    if (this.active) {\n      this.visible = true;\n      this.topStateBarVisible = true;\n    }\n  }\n\n  /**\n   * Sets the progress bar to zero instantly (no transition) and changes the type\n   * to 'accent'. Useful when reusing the progress bar for a new process.\n   */\n  @Method()\n  async reset() {\n    // Resetting involves setting the progress to zero. In this case it is preferable\n    // to disable the transition.\n    this.disableTransition = true;\n    this.progress = 0;\n    this.stateType = \"accent\";\n    setTimeout(() => {\n      this.disableTransition = false; // enable transition for the nex process.\n    }, PROGRESS_TRANSITION_SPEED);\n  }\n\n  private evaluateInitialProgress = () => {\n    if (\n      this.progress === undefined &&\n      (this.stateType === \"error\" ||\n        this.stateType === \"warning\" ||\n        this.stateType === \"success\")\n    ) {\n      this.progress = 100;\n    } else if (\n      this.progress === undefined &&\n      this.stateType === \"in-progress\"\n    ) {\n      this.progress = 0;\n    }\n    this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n  };\n\n  private closeClickHandler = () => {\n    this.active = false;\n    this.closedCallback();\n  };\n\n  private renderClose = () => {\n    return (\n      this.closeType === \"button\" && (\n        <button\n          class=\"button-tertiary button-icon-only\"\n          aria-label=\"close\"\n          onClick={this.closeClickHandler}\n          role=\"button\"\n          tabIndex={this.visible ? 0 : -1}\n        >\n          <ch-image src={CLOSE_ICON} class=\"icon-md\"></ch-image>\n        </button>\n      )\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"visible\": this.visible,\n          \"with-close-button\": this.closeType === \"button\",\n          \"disable-transition\": this.disableTransition\n        }}\n        aria-hidden={!this.active}\n        style={{\n          \"--progress-bar-transition-speed\": `${PROGRESS_TRANSITION_SPEED}ms`\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          role=\"status\"\n          aria-labelledby=\"label\"\n          aria-hidden={!this.active}\n          class={{\n            \"top-state-bar\": true,\n            [`top-state-bar--${this.stateType}`]: true,\n            \"top-state-bar--visible\": this.topStateBarVisible\n          }}\n        >\n          <div class=\"top-state-bar__outer-wrapper\">\n            {!this.minimal ? (\n              <div class=\"top-state-bar__inner-wrapper\">\n                <label\n                  id=\"label\"\n                  class={{\n                    \"top-state-bar__caption\": true\n                  }}\n                  part=\"label\"\n                >\n                  {this.caption}\n                </label>\n\n                {this.renderClose()}\n              </div>\n            ) : null}\n            <div\n              class={{\n                \"top-state-bar__progress-wrapper\": true\n              }}\n              part=\"progress-wrapper\"\n            >\n              <span class=\"progress-bar\"></span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type TopStateBarType =\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"in-progress\";\n"]}