@genexus/genexus-ide-ui 0.0.98 → 0.0.100

package/dist/genexus-ide-ui/p-f5034221.entry.js

@@ -1,258 +0,0 @@
-import { r as t, c as e, h as s, H as r, g as i } from "./p-2776d2f9.js";
-
-import { L as a } from "./p-74d59062.js";
-
-const o = ":host{display:block;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius);--status-buttons-label-color:var(--mer-text__on-surface)}gx-ide-list-selector::part(list){display:flex;flex-direction:row}gx-ide-list-selector-item{border-block-start:none !important;flex:1;text-align:center;}gx-ide-list-selector-item.not-zero{font-weight:var(--mer-font__weight--semi-bold)}gx-ide-list-selector-item:not(:last-child){border-inline-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item .label__wrapper{display:inline-flex;width:auto;min-height:0}gx-ide-list-selector-item .label__description{color:var(--status-buttons-label-color);margin-inline-start:var(--mer-spacing--xxs)}gx-ide-list-selector-item .active-indicator{display:inline-block;width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border:1px solid var(--mer-border-color__dim);border-radius:calc(var(--mer-spacing--xs) / 2);background-color:var(--mer-border-color__dim)}gx-ide-list-selector-item input:checked+.label{--status-buttons-label-color:var(--mer-text__on-surface);background-color:inherit}gx-ide-list-selector-item input:checked+.label .active-indicator{background-color:var(--mer-icon__primary);border-color:var(--mer-icon__primary)}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--ds-item-background-color--hover) !important}:host([compact]) gx-ide-list-selector-item{font-size:var(--mer-font__size--xxs)}:host([compact]) .label__wrapper{gap:var(--mer-spacing--xxs);padding:var(--mer-spacing--xxxs) var(--mer-spacing--xs) var(--mer-spacing--xxxs) var(--mer-spacing--xxs)}:host([compact]) .label__universal-slot{margin-inline-end:var(--mer-spacing--xxxs)}:host([no-border]){border:none}:host([no-border-top]){border-top:none}:host([no-border-end]){border-inline-end:none}:host([no-border-bottom]){border-bottom:none}:host([no-border-start]){border-inline-start:none}:host([no-inner-borders]) gx-ide-list-selector-item{border-inline-end:none}";
-
-const n = class {
-  constructor(s) {
-    t(this, s);
-    this.selectionChanged = e(this, "selectionChanged", 7);
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-        this.evaluateIconsSize = () => {
-      if (this.compact) {
-        this.iconsSize = "small";
-      }
-    };
-    this.evaluateLabel = t => {
-      const e = this[t];
-      if (this.minimal) {
-        return `${e}`;
-      } else {
-        const s = e === 1;
-        return s ? `${e} ${this._componentLocale[t]["singular"]}` : `${e} ${this._componentLocale[t]["plural"]}`;
-      }
-    };
-    this.selectionChangedHandler = t => {
-      t.stopPropagation();
-      this.selectionChanged.emit(t.detail);
-    };
-    this.active = false;
-    this.errors = 0;
-    this.hideError = false;
-    this.warnings = 0;
-    this.hideWarning = false;
-    this.successes = 0;
-    this.hideSuccess = false;
-    this.messages = 0;
-    this.hideMessage = false;
-    this.minimal = false;
-    this.compact = false;
-    this.noBorder = false;
-    this.noInnerBorders = false;
-    this.noBorderTop = false;
-    this.noBorderEnd = false;
-    this.noBorderBottom = false;
-    this.noBorderStart = false;
-    this.iconsSize = "small";
-  }
-  // 6.COMPONENT LIFECYCLE METHODS //
-  async componentWillLoad() {
-    this._componentLocale = await a.getComponentStrings(this.el);
-    this.evaluateIconsSize();
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return s(r, null, s("gx-ide-list-selector", {
-      type: "multi-selection",
-      listName: "status-buttons",
-      noListBorder: true,
-      ellipsis: true,
-      iconsSize: this.iconsSize,
-      onSelectionChanged: this.selectionChangedHandler
-    }, !this.hideError ? s("gx-ide-list-selector-item", {
-      itemId: "errors",
-      itemValue: this.evaluateLabel("errors"),
-      icon: "gx-test/result-exception",
-      iconColor: this.errors === 0 ? "disabled" : "auto",
-      class: {
-        error: true,
-        "not-zero": this.errors !== 0
-      },
-      itemChecked: true
-    }, s("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null, !this.hideWarning ? s("gx-ide-list-selector-item", {
-      itemId: "warnings",
-      itemValue: this.evaluateLabel("warnings"),
-      icon: "gx-test/result-warning",
-      iconColor: this.warnings === 0 ? "disabled" : "auto",
-      class: {
-        warning: true,
-        "not-zero": this.warnings !== 0
-      },
-      itemChecked: true
-    }, s("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null, !this.hideSuccess ? s("gx-ide-list-selector-item", {
-      itemId: "successes",
-      itemValue: this.evaluateLabel("successes"),
-      icon: "gx-test/result-ok",
-      iconColor: this.successes === 0 ? "disabled" : "auto",
-      class: {
-        success: true,
-        "not-zero": this.successes !== 0
-      },
-      itemChecked: true
-    }, s("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null, !this.hideMessage ? s("gx-ide-list-selector-item", {
-      itemId: "messages",
-      itemValue: this.evaluateLabel("messages"),
-      icon: "gx-test/screenshot-viewer",
-      iconColor: this.messages === 0 ? "disabled" : "auto",
-      class: {
-        message: true,
-        "not-zero": this.messages !== 0
-      },
-      itemChecked: true
-    }, s("span", {
-      slot: "universal",
-      class: {
-        "active-indicator": true
-      }
-    })) : null));
-  }
-  static get assetsDirs() {
-    return [ "gx-ide-assets/status-buttons" ];
-  }
-  get el() {
-    return i(this);
-  }
-};
-
-n.style = o;
-
-const l = ':host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{}.top-state-bar__wrapper{padding:0 var(--mer-spacing--md);display:flex;justify-content:center;align-items:center;height:var(--mer-spacing--xxl)}.top-state-bar__caption{opacity:0;transition:150ms opacity;color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--semi-bold)}.top-state-bar__caption--visible{opacity:1}.top-state-bar__close{opacity:0;transition:200ms opacity;cursor:pointer}.top-state-bar__close:hover{opacity:0.75}.top-state-bar__close--visible{opacity:1}.top-state-bar--accent .top-state-bar__wrapper{background-color:var(--mer-accent__primary);color:var(--mer-text__on-primary)}.top-state-bar--success .top-state-bar__wrapper{background-color:var(--mer-color__message-green--100)}.top-state-bar--warning .top-state-bar__wrapper{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--error .top-state-bar__wrapper{background-color:var(--mer-color__message-red--100)}.top-state-bar--in-progress .top-state-bar__wrapper{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .top-state-bar__wrapper: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:inProgress;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{display:flex;align-items:center;flex-direction:column;position:relative;z-index:2}.top-state-bar--with-action .top-state-bar__caption{flex:1;text-align:center}.top-state-bar--with-action .top-state-bar__wrapper{padding-inline-end:var(--mer-spacing--xxs)}@-webkit-keyframes inProgress{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgress{0%{left:0%}100%{left:200%}}@keyframes inProgress{0%{left:0%}100%{left:-200%}}.progress-bar{transition:all 200ms;width:var(--top-bar-progress);background-color:var(--mer-accent__primary);height:var(--mer-spacing--xxs)}.progress-bar--hidden{height:0}';
-
-const c = class {
-  constructor(e) {
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.evaluateWithAction = () => {
-      if (this.stateType === "error" || this.stateType === "warning" || this.stateType === "success") {
-        this.stateWithAction = true;
-      }
-    };
-    this.closeButtonHandler = () => {
-      this.active = false;
-    };
-    t(this, e);
-    this.stateWithAction = false;
-    this.captionVisible = false;
-    this.visible = false;
-    this.caption = undefined;
-    this.active = false;
-    this.stateType = "in-progress";
-    this.withProgressBar = false;
-    this.progress = 0;
-    this.autoClose = false;
-  }
-  get el() {
-    return i(this);
-  }
-  watchActiveHandler(t) {
-    if (t) {
-      this.visible = true;
-      setTimeout((() => {
-        this.captionVisible = true;
-      }), 300);
-    } else {
-      this.captionVisible = false;
-      setTimeout((() => {
-        this.visible = false;
-      }), 300);
-      this.progress = 0;
-    }
-  }
-  watchStateTypeHandler() {
-    this.evaluateWithAction();
-  }
-  watchProgressHandler(t) {
-    if (t => 0) {
-      this.el.style.setProperty("--top-bar-progress", `${t}%`);
-    }
-    if (t === 100 && this.autoClose) {
-      this.active = false;
-    }
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE EVENTS //
-  componentWillLoad() {
-    this.evaluateWithAction();
-    if (this.active) {
-      this.visible = true;
-      this.captionVisible = true;
-    }
-  }
-  //  10.RENDER() FUNCTION //
-  render() {
-    return s(r, {
-      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-action": this.stateWithAction
-      }
-    }, s("div", {
-      class: {
-        "top-state-bar__wrapper": true
-      },
-      part: "wrapper"
-    }, s("label", {
-      id: "label",
-      class: {
-        "top-state-bar__caption": true,
-        "top-state-bar__caption--visible": this.captionVisible
-      },
-      part: "label"
-    }, this.caption), this.stateWithAction ? s("gxg-icon", {
-      class: {
-        "top-state-bar__close": true,
-        "top-state-bar__close--visible": this.captionVisible
-      },
-      role: "button",
-      "aria-label": "close",
-      type: "gemini-tools/close",
-      color: "mercury-text-on-message",
-      tabIndex: 0,
-      onClick: this.closeButtonHandler
-    }) : null), this.withProgressBar ? s("div", {
-      class: {
-        "progress-bar": true,
-        "progress-bar--hidden": this.progress === 0 || this.progress === 100
-      }
-    }) : null));
-  }
-  static get watchers() {
-    return {
-      active: [ "watchActiveHandler" ],
-      stateType: [ "watchStateTypeHandler" ],
-      progress: [ "watchProgressHandler" ]
-    };
-  }
-};
-
-c.style = l;
-
-export { n as gx_ide_status_buttons, c as gxg_top_state_bar };
-//# sourceMappingURL=p-f5034221.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["gxIdeStatusButtonsCss","GxIdeStatusButtons","this","evaluateIconsSize","compact","iconsSize","evaluateLabel","type","amount","minimal","singular","_componentLocale","selectionChangedHandler","e","stopPropagation","selectionChanged","emit","detail","componentWillLoad","Locale","getComponentStrings","el","render","h","Host","listName","noListBorder","ellipsis","onSelectionChanged","hideError","itemId","itemValue","icon","iconColor","errors","class","error","itemChecked","slot","hideWarning","warnings","warning","hideSuccess","successes","success","hideMessage","messages","message","gxgTopStateBarCss","GxgTopStateBar","constructor","hostRef","evaluateWithAction","stateType","stateWithAction","closeButtonHandler","active","captionVisible","visible","caption","undefined","withProgressBar","progress","autoClose","watchActiveHandler","setTimeout","watchStateTypeHandler","watchProgressHandler","style","setProperty","role","part","id","color","tabIndex","onClick"],"sources":["src/components/_helpers/status-buttons/gx-ide-status-buttons.scss?tag=gx-ide-status-buttons&encapsulation=shadow","src/components/_helpers/status-buttons/gx-ide-status-buttons.tsx","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n  display: block;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n  --status-buttons-label-color: var(--mer-text__on-surface);\n}\n/*list-selector*/\ngx-ide-list-selector::part(list) {\n  display: flex;\n  flex-direction: row;\n}\n/*list-selector-items*/\ngx-ide-list-selector-item {\n  border-block-start: none !important; //reset\n\n  &.not-zero {\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &:not(:last-child) {\n    border-inline-end: 1px solid var(--gx-ide-container-border-color);\n  }\n  flex: 1;\n  text-align: center;\n\n  .label {\n    &__wrapper {\n      display: inline-flex;\n      width: auto;\n      min-height: 0;\n    }\n    &__description {\n      color: var(--status-buttons-label-color);\n      margin-inline-start: var(--mer-spacing--xxs);\n    }\n  }\n\n  /*active indicator*/\n  .active-indicator {\n    display: inline-block;\n    width: var(--mer-spacing--xs);\n    height: var(--mer-spacing--xs);\n    border: 1px solid var(--mer-border-color__dim);\n    border-radius: calc(var(--mer-spacing--xs) / 2);\n    background-color: var(--mer-border-color__dim);\n  }\n  input:checked {\n    + .label {\n      --status-buttons-label-color: var(--mer-text__on-surface);\n      background-color: inherit;\n\n      .active-indicator {\n        background-color: var(--mer-icon__primary);\n        border-color: var(--mer-icon__primary);\n      }\n    }\n  }\n\n  /*hover*/\n  &:hover {\n    input:checked + .label {\n      background-color: var(--ds-item-background-color--hover) !important;\n    }\n  }\n}\n\n/*--------------------\nCompact size\n--------------------*/\n:host([compact]) {\n  gx-ide-list-selector-item {\n    font-size: var(--mer-font__size--xxs);\n  }\n  .label__wrapper {\n    gap: var(--mer-spacing--xxs);\n    padding: var(--mer-spacing--xxxs) var(--mer-spacing--xs)\n      var(--mer-spacing--xxxs) var(--mer-spacing--xxs);\n  }\n  .label__universal-slot {\n    margin-inline-end: var(--mer-spacing--xxxs);\n  }\n}\n\n/*--------------------\nAll about borders\n--------------------*/\n:host([no-border]) {\n  border: none;\n}\n:host([no-border-top]) {\n  border-top: none;\n}\n:host([no-border-end]) {\n  border-inline-end: none;\n}\n:host([no-border-bottom]) {\n  border-bottom: none;\n}\n:host([no-border-start]) {\n  border-inline-start: none;\n}\n:host([no-inner-borders]) {\n  gx-ide-list-selector-item {\n    border-inline-end: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { CheckedItemsInfo } from \"../list-selector/list-selector\";\nimport { Locale } from \"../../../common/locale\";\n@Component({\n  tag: \"gx-ide-status-buttons\",\n  styleUrl: \"gx-ide-status-buttons.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/status-buttons\"]\n})\nexport class GxIdeStatusButtons {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  /**\n   * Whether or not the buttons are active\n   */\n  @Prop() readonly active: boolean = false;\n\n  /**\n   * The errors amount\n   */\n  @Prop() readonly errors: number = 0;\n\n  /**\n   * Hide the errors button\n   */\n  @Prop() readonly hideError: boolean = false;\n\n  /**\n   * The warnings amount\n   */\n  @Prop() readonly warnings: number = 0;\n\n  /**\n   * Hide the warnings button\n   */\n  @Prop() readonly hideWarning: boolean = false;\n\n  /**\n   * The successes amount\n   */\n  @Prop() readonly successes: number = 0;\n\n  /**\n   * Hide the successes button\n   */\n  @Prop() readonly hideSuccess: boolean = false;\n\n  /**\n   * The messages amount\n   */\n  @Prop() readonly messages: number = 0;\n\n  /**\n   * Hide the messages button\n   */\n  @Prop() readonly hideMessage: boolean = false;\n\n  /**\n   * Display only the number\n   */\n  @Prop() readonly minimal: boolean = false;\n\n  /**\n   * If present will make the component look smaller.\n   */\n  @Prop({ reflect: true }) readonly compact: boolean = false;\n\n  /**\n   * No border all around\n   */\n  @Prop({ reflect: true }) readonly noBorder: boolean = false;\n\n  /**\n   * No inner borders\n   */\n  @Prop({ reflect: true }) readonly noInnerBorders: boolean = false;\n\n  /**\n   * No border on the top\n   */\n  @Prop({ reflect: true }) readonly noBorderTop: boolean = false;\n\n  /**\n   * No border on the end\n   */\n  @Prop({ reflect: true }) readonly noBorderEnd: boolean = false;\n\n  /**\n   * No border on the bottom\n   */\n  @Prop({ reflect: true }) readonly noBorderBottom: boolean = false;\n\n  /**\n   * No border on the start\n   */\n  @Prop({ reflect: true }) readonly noBorderStart: boolean = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeStatusButtonsElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() iconsSize: Size = \"small\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateIconsSize();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateIconsSize = () => {\n    if (this.compact) {\n      this.iconsSize = \"small\";\n    }\n  };\n\n  private evaluateLabel = (\n    type: \"errors\" | \"warnings\" | \"successes\" | \"messages\"\n  ): string => {\n    const amount = this[type];\n    if (this.minimal) {\n      return `${amount}`;\n    } else {\n      const singular: boolean = amount === 1;\n      return singular\n        ? `${amount} ${this._componentLocale[type][\"singular\"]}`\n        : `${amount} ${this._componentLocale[type][\"plural\"]}`;\n    }\n  };\n\n  private selectionChangedHandler = (e: CustomEvent<CheckedItemsInfo>) => {\n    e.stopPropagation();\n    this.selectionChanged.emit(e.detail);\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gx-ide-list-selector\n          type=\"multi-selection\"\n          listName=\"status-buttons\"\n          noListBorder\n          ellipsis\n          iconsSize={this.iconsSize}\n          onSelectionChanged={this.selectionChangedHandler}\n        >\n          {!this.hideError ? (\n            <gx-ide-list-selector-item\n              itemId=\"errors\"\n              itemValue={this.evaluateLabel(\"errors\")}\n              icon=\"gx-test/result-exception\"\n              iconColor={this.errors === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"error\": true, \"not-zero\": this.errors !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideWarning ? (\n            <gx-ide-list-selector-item\n              itemId=\"warnings\"\n              itemValue={this.evaluateLabel(\"warnings\")}\n              icon=\"gx-test/result-warning\"\n              iconColor={this.warnings === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"warning\": true, \"not-zero\": this.warnings !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideSuccess ? (\n            <gx-ide-list-selector-item\n              itemId=\"successes\"\n              itemValue={this.evaluateLabel(\"successes\")}\n              icon=\"gx-test/result-ok\"\n              iconColor={this.successes === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"success\": true, \"not-zero\": this.successes !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n          {!this.hideMessage ? (\n            <gx-ide-list-selector-item\n              itemId=\"messages\"\n              itemValue={this.evaluateLabel(\"messages\")}\n              icon=\"gx-test/screenshot-viewer\"\n              iconColor={this.messages === 0 ? \"disabled\" : \"auto\"}\n              class={{ \"message\": true, \"not-zero\": this.messages !== 0 }}\n              itemChecked\n            >\n              <span\n                slot=\"universal\"\n                class={{\n                  \"active-indicator\": true\n                }}\n              ></span>\n            </gx-ide-list-selector-item>\n          ) : null}\n        </gx-ide-list-selector>\n      </Host>\n    );\n  }\n}\n",":host {\n  --top-bar-progress: 0%;\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: 200ms grid-template-rows;\n}\n:host > * {\n  overflow: hidden;\n}\n\n:host(.visible) {\n  grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n  /*states*/\n  /*with action*/\n}\n.top-state-bar__wrapper {\n  padding: 0 var(--mer-spacing--md);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: var(--mer-spacing--xxl);\n}\n.top-state-bar__caption {\n  opacity: 0;\n  transition: 150ms opacity;\n  color: var(--mer-text__on-message);\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--semi-bold);\n}\n.top-state-bar__caption--visible {\n  opacity: 1;\n}\n.top-state-bar__close {\n  opacity: 0;\n  transition: 200ms opacity;\n  cursor: pointer;\n}\n.top-state-bar__close:hover {\n  opacity: 0.75;\n}\n.top-state-bar__close--visible {\n  opacity: 1;\n}\n.top-state-bar--accent .top-state-bar__wrapper {\n  background-color: var(--mer-accent__primary);\n  color: var(--mer-text__on-primary);\n}\n.top-state-bar--success .top-state-bar__wrapper {\n  background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .top-state-bar__wrapper {\n  background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .top-state-bar__wrapper {\n  background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress .top-state-bar__wrapper {\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n}\n.top-state-bar--in-progress .top-state-bar__wrapper: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: inProgress;\n  animation-duration: 2s;\n  animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n  z-index: 2;\n}\n.top-state-bar--with-action .top-state-bar__caption {\n  flex: 1;\n  text-align: center;\n}\n.top-state-bar--with-action .top-state-bar__wrapper {\n  padding-inline-end: var(--mer-spacing--xxs);\n}\n\n/*in progress animation*/\n@-webkit-keyframes inProgress {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: -200%;\n  }\n}\n@-moz-keyframes inProgress {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: 200%;\n  }\n}\n@keyframes inProgress {\n  0% {\n    left: 0%;\n  }\n  100% {\n    left: -200%;\n  }\n}\n.progress-bar {\n  transition: all 200ms;\n  width: var(--top-bar-progress);\n  background-color: var(--mer-accent__primary);\n  height: var(--mer-spacing--xxs);\n}\n.progress-bar--hidden {\n  height: 0;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n    constructor() {\n        this.stateWithAction = false;\n        this.captionVisible = false;\n        this.visible = false;\n        this.caption = undefined;\n        this.active = false;\n        this.stateType = \"in-progress\";\n        this.withProgressBar = false;\n        this.progress = 0;\n        this.autoClose = false;\n    }\n    /*\n  INDEX:\n  1.OWN PROPERTIES\n  2.REFERENCE TO ELEMENTS\n  3.STATE() VARIABLES\n  4.PUBLIC PROPERTY API | WATCH'S\n  5.EVENTS (EMIT)\n  6.COMPONENT LIFECYCLE METHODS\n  7.LISTENERS\n  8.PUBLIC METHODS API\n  9.LOCAL METHODS\n  10.RENDER() FUNCTION\n  */\n    // 1.OWN PROPERTIES //\n    // 2. REFERENCE TO ELEMENTS //\n    el;\n    watchActiveHandler(active) {\n        if (active) {\n            this.visible = true;\n            setTimeout(() => {\n                this.captionVisible = true;\n            }, 300);\n        }\n        else {\n            this.captionVisible = false;\n            setTimeout(() => {\n                this.visible = false;\n            }, 300);\n            this.progress = 0;\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            this.active = false;\n        }\n    }\n    // 5.EVENTS (EMIT) //\n    // 6.COMPONENT LIFECYCLE EVENTS //\n    componentWillLoad() {\n        this.evaluateWithAction();\n        if (this.active) {\n            this.visible = true;\n            this.captionVisible = true;\n        }\n    }\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    evaluateWithAction = () => {\n        if (this.stateType === \"error\" ||\n            this.stateType === \"warning\" ||\n            this.stateType === \"success\") {\n            this.stateWithAction = true;\n        }\n    };\n    closeButtonHandler = () => {\n        this.active = false;\n    };\n    //  10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n                \"top-state-bar\": true,\n                [`top-state-bar--${this.stateType}`]: true,\n                \"top-state-bar--with-action\": this.stateWithAction\n            } }, h(\"div\", { class: {\n                \"top-state-bar__wrapper\": true\n            }, part: \"wrapper\" }, h(\"label\", { id: \"label\", class: {\n                \"top-state-bar__caption\": true,\n                \"top-state-bar__caption--visible\": this.captionVisible\n            }, part: \"label\" }, this.caption), this.stateWithAction ? (h(\"gxg-icon\", { class: {\n                \"top-state-bar__close\": true,\n                \"top-state-bar__close--visible\": this.captionVisible\n            }, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-text-on-message\", tabIndex: 0, onClick: this.closeButtonHandler })) : null), this.withProgressBar ? (h(\"div\", { class: {\n                \"progress-bar\": true,\n                \"progress-bar--hidden\": this.progress === 0 || this.progress === 100\n            } })) : null)));\n    }\n    static get is() { return \"gxg-top-state-bar\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"gxg-top-state-bar.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"gxg-top-state-bar.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"caption\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The top-bar title\"\n                },\n                \"attribute\": \"caption\",\n                \"reflect\": false\n            },\n            \"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            \"withProgressBar\": {\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 progress bar\"\n                },\n                \"attribute\": \"with-progress-bar\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\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\": \"0\"\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        };\n    }\n    static get states() {\n        return {\n            \"stateWithAction\": {},\n            \"captionVisible\": {},\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":"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"}