@genexus/genexus-ide-ui 0.0.37 → 0.0.38

package/dist/collection/components/new-object/new-object.js

@@ -0,0 +1,380 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+export class GxIdeNewObject {
+  constructor() {
+    this.descriptionModifiedByUser = false;
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.renderModuleFolder = () => {
+      if (this.selectedType.hasModule || this.selectedType.hasFolder) {
+        let labelDescription = this._componentLocale.moduleFolder;
+        if (!this.selectedType.hasFolder) {
+          labelDescription = this._componentLocale.moduleOnly;
+        }
+        else if (!this.selectedType.hasModule) {
+          labelDescription = this._componentLocale.folderOnly;
+        }
+        return [
+          h("gxg-label", { labelPosition: "start" }, labelDescription),
+          h("gx-ide-entity-selector", { value: this.parent, defaultValue: this.defaultParent, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.parentEl = el), part: "module" })
+        ];
+      }
+      return null;
+    };
+    /**
+     * This method initializes tha name value. It depends on 'this.selectedType'
+     */
+    this.init = () => {
+      if (this.selectedType && this.selectedType.name.length > 0) {
+        this.name = this.selectedType.name;
+        this.description = this.selectedType.name;
+      }
+    };
+    this.onInputNameHandler = (e) => {
+      const name = e.detail;
+      if (!this.descriptionModifiedByUser) {
+        // description should be equal to name, unless the description was already modified by the user.
+        this.descriptionEl.value = name;
+      }
+      this.processName(name);
+    };
+    this.onBlurNameHandler = () => {
+      this.validateNameHandler(this.nameEl.value);
+    };
+    this.onInputDescriptionHandler = (e) => {
+      this.description = e.detail;
+      this.descriptionModifiedByUser = true;
+    };
+    this.processName = (name) => {
+      if (this.validateNameTimeoutRef) {
+        clearTimeout(this.validateNameTimeoutRef);
+      }
+      this.validateNameTimeoutRef = setTimeout(() => {
+        this.validateNameHandler(name);
+      }, 300);
+    };
+    this.validateNameHandler = async (name) => {
+      const result = await this.validateNameCallback(name);
+      if (result !== undefined) {
+        // the name is not valid. display message
+        this.nameEl.validationMessage = result;
+        this.nameEl.validationStatus = "error";
+        this.nameIsValid = false;
+      }
+      else {
+        // valid name
+        this.nameEl.validationMessage = null;
+        this.nameEl.validationStatus = "indeterminate";
+        this.nameIsValid = true;
+      }
+    };
+    this.createCallbackHandler = async () => {
+      var _a;
+      const data = {
+        typeId: (_a = this.selectedType) === null || _a === void 0 ? void 0 : _a.id,
+        name: this.nameEl.value,
+        description: this.descriptionEl.value,
+        moduleId: this.parentEl.value.id
+      };
+      await this.createCallback(data);
+    };
+    this.cancelCallbackHandler = async () => {
+      await this.cancelCallback();
+    };
+    this.categoryOnClickHandler = (category) => {
+      this.selectedCategory = category;
+      if (category.types[0]) {
+        this.selectedType = category.types[0];
+      }
+    };
+    this.typeOnClickHandler = (type) => {
+      this.selectedType = type;
+    };
+    this.selectedCategory = undefined;
+    this.selectedType = undefined;
+    this.nameIsValid = false;
+    this.name = undefined;
+    this.description = undefined;
+    this.shadow = false;
+    this.typeCategories = undefined;
+    this.parent = undefined;
+    this.defaultParent = undefined;
+    this.selectModuleCallback = undefined;
+    this.validateNameCallback = undefined;
+    this.createCallback = undefined;
+    this.cancelCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this.selectedCategory = this.typeCategories[0];
+    this.selectedType = this.typeCategories[0].types[0];
+    this.init();
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidLoad() {
+    this.nameEl.focus();
+    this.validateNameHandler(this.name);
+    this.componentDidLoadEvent.emit(true);
+  }
+  // 10.LOCAL METHODS (RENDER) //
+  // 11.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: {
+        "gxi-new-kb": true,
+        "gxi-new-object--shadow": this.shadow
+      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { fieldset: true, displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, id: "list-box-category", "the-title": this._componentLocale.categorySelection, height: "100%" }, this.typeCategories.map(category => (h("gxg-list-box-item", { index: Number(category.id), icon: category.icon, part: `${category}-${category.id}`, onClick: () => this.categoryOnClickHandler(category) }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, id: "list-box-type", "the-title": this._componentLocale.typeSelection, height: "100%" }, this.selectedCategory.types
+      ? this.selectedCategory.types.map(type => (h("gxg-list-box-item", { index: Number(type.id), icon: type.icon, selected: this.selectedType.id === type.id, part: `${type}-${type.id}`, onClick: () => this.typeOnClickHandler(type) }, type.name)))
+      : null), h("gxg-title", { type: "title-05" }, "Text about the ", this.selectedType.name))), h("gxg-container", { fieldset: true }, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.description, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { fieldset: true, displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
+  }
+  static get is() { return "gx-ide-new-object"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["new-object.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["new-object.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/new-object"]; }
+  static get properties() {
+    return {
+      "shadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Applies a shadow all around"
+        },
+        "attribute": "shadow",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "typeCategories": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "TypeCategoryData[]",
+          "resolved": "TypeCategoryData[]",
+          "references": {
+            "TypeCategoryData": {
+              "location": "local"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array containing category list and its corresponding types"
+        }
+      },
+      "parent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EntityData",
+          "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+          "references": {
+            "EntityData": {
+              "location": "import",
+              "path": "../entity-selector/entity-selector"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current value for Module/Folder"
+        }
+      },
+      "defaultParent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "EntityData",
+          "resolved": "{ id: string; name: string; iconSrc?: string; iconColor?: Color; }",
+          "references": {
+            "EntityData": {
+              "location": "import",
+              "path": "../entity-selector/entity-selector"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default value for the Module/Folder field."
+        }
+      },
+      "selectModuleCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectModuleCallback",
+          "resolved": "() => Promise<EntityData>",
+          "references": {
+            "SelectModuleCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when the action is executed on the Module/Folder filter (button '...'). It returns the information of the selected object (id and name) or 'undefined' if it was canceled."
+        }
+      },
+      "validateNameCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ValidateNameCallback",
+          "resolved": "(name: string) => Promise<string>",
+          "references": {
+            "ValidateNameCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when you must validate a name. Returns error message or 'undefined' if name is not valid."
+        }
+      },
+      "createCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CreateCallback",
+          "resolved": "(data: NewObjectData) => Promise<boolean>",
+          "references": {
+            "CreateCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user wants to cancel object creation"
+        }
+      },
+      "cancelCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "CancelCallback",
+          "resolved": "() => Promise<void>",
+          "references": {
+            "CancelCallback": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked when user wants to confirm object creation"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedCategory": {},
+      "selectedType": {},
+      "nameIsValid": {},
+      "name": {},
+      "description": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "create",
+        "name": "create",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event emm=its the data needed to create a new object"
+        },
+        "complexType": {
+          "original": "NewObjectData",
+          "resolved": "NewObjectData",
+          "references": {
+            "NewObjectData": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "validateName",
+        "name": "validateName",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is trigger after a validation of the object name is made. Returns undefined if its valid, otherwise an error message"
+        },
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "cancel",
+        "name": "cancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event emits the 'cancel' event"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "componentDidLoadEvent",
+        "name": "componentDidLoadEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emited once just after the component is fully loaded and the first render() occurs."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/references/helpers.js

@@ -15,7 +15,6 @@ export const convertObjectDataToSuggestData = (selectorCategoriesData) => {
       selectorCategory.items.forEach((objectData) => {
         const suggestItem = {
           value: objectData.id,
-          caption: objectData.name,
           description: objectData.description,
           icon: objectData.icon
         };
@@ -26,27 +25,6 @@ export const convertObjectDataToSuggestData = (selectorCategoriesData) => {
   }
   return suggestData;
 };
-/**
- * @description Keeps an updated state of the last suggested categories objects passed by the host.
- */
-export const updateSuggestedObjects = (selectorCategoryData) => {
-  const suggestedObjects = [];
-  if (selectorCategoryData === null || selectorCategoryData === void 0 ? void 0 : selectorCategoryData.length) {
-    selectorCategoryData.forEach(category => {
-      if (category.items) {
-        category.items.forEach(object => {
-          suggestedObjects.push({
-            id: object.id,
-            icon: object.icon,
-            name: object.name,
-            description: object.description
-          });
-        });
-      }
-    });
-  }
-  return suggestedObjects;
-};
 /**
  * @description This function converts ReferenceData[] data to GxgTreeItemData[]
  */

package/dist/collection/components/references/references.js

@@ -5,17 +5,17 @@ import { Locale } from "../../common/locale";
 import { renderTreeItems } from "../../common/render-tree";
 import { updateTreeModel } from "../../common/update-tree-model";
 import { renderSuggestLists } from "../../common/render-suggest";
-import { convertObjectDataToSuggestData, convertReferenceDataToTreeData, updateSuggestedObjects } from "./helpers";
+import { convertObjectDataToSuggestData, convertReferenceDataToTreeData } from "./helpers";
 export class GxIdeReferences {
   constructor() {
-    /**
-     * Keeps an array of the last suggested objects, returned by selectorSourceCallback
-     */
-    this.suggestedObjects = [];
     /**
      * The references messages max. width that appear if the tree is empty or could not be retrieved.
      */
     this.referencesMessagesMaxWidth = "200px";
+    /**
+     * The last SelectorCategoryData[] returned by selectorSourceCallback
+     */
+    this.selectorCategoryData = [];
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
@@ -24,21 +24,20 @@ export class GxIdeReferences {
      */
     this.attachSelectObjectListener = () => {
       this.selectObjectSuggestEl.addEventListener("itemSelected", (e) => {
-        const itemValue = e.detail.value;
-        this.selectedObject = this.suggestedObjects.find(item => {
-          return item.id === itemValue;
-        });
+        const categoryIndex = e.detail.indexes.listIndex;
+        const itemIndex = e.detail.indexes.itemIndex;
+        this.selectedObject =
+          this.selectorCategoryData[categoryIndex].items[itemIndex];
       });
     };
     /**
-     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes. Then, it calls the 'updateSuggestedObjects' method, that keeps the state of the last suggested objects that were passed bu the host. Also, it shows the suggested objects on the ch-suggest box.
+     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
      */
     this.selectObjectValueChangedHandler = async (e) => {
       const value = e.detail;
       this.selectorSourceCallback(value)
         .then(result => {
-        /* update selected objects state*/
-        this.suggestedObjects = updateSuggestedObjects(result);
+        this.selectorCategoryData = result;
         /* show suggestions*/
         this.objectsSuggestions = convertObjectDataToSuggestData(result);
       })
@@ -205,7 +204,7 @@ export class GxIdeReferences {
   // 10.RENDER() FUNCTION //
   render() {
     var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.id, onInputChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
       } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, justifyContent: "center", fullHeight: true, part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(false), part: "referenced-by-tree" }, renderTreeItems(this.referencedByTreeData)), !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) === 0

package/dist/components/ch-alert.js

@@ -0,0 +1,150 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './timer.js';
+
+const alertCss = ":host{display:grid;width:100%;height:100%;grid-template:\"img content button\" 1fr \"progress-bar progress-bar progress-bar\" min-content/min-content 1fr min-content}:host(.pause-on-hover:hover) ::part(indicator){animation-play-state:paused}::slotted([slot=button]){pointer-events:none}.image{max-width:40px;height:40px;grid-area:img;align-self:center}.content{grid-area:content}.close-button{grid-area:button}.close-button .close-button-img{-webkit-mask:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.875 18L6.75 16.875L11.25 12.375L6.75 7.875L7.875 6.75L12.375 11.25L16.875 6.75L18 7.875L13.5 12.375L18 16.875L16.875 18L12.375 13.5L7.875 18Z'/%3E%3C/svg%3E\") 50% 50%/24px 24px no-repeat;width:24px;height:24px;background-color:currentColor}.indicator-container{grid-area:progress-bar}:where(button){all:unset;display:flex;align-items:center;cursor:pointer}";
+
+const ChAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    /** Sets the timer id */
+    this.timerId = null;
+    /** Sets the desired interval */
+    this.timerInterval = 50;
+    /**
+     * Determine the accessible name of the close button.
+     * Important for accessibility.
+     */
+    this.closeButtonAccessibleName = "Close";
+    /**
+     * Specifies the time (ms) for the alert to be displayed.
+     * if `dismissTimeout = 0`, the alert will be always visible
+     * (unless is dismissed by the closeButton).
+     */
+    this.dismissTimeout = 0;
+    /**
+     * Determine src of the left image.
+     */
+    this.leftImgSrc = "";
+    /**
+     * Determine if the element is displayed or not.
+     */
+    this.presented = false;
+    /**
+     * Determine if the closeButton is displayed or not.
+     */
+    this.showCloseButton = false;
+    /**
+     * If dismissTimeout > 0, a progress bar is displayed at the bottom of the element
+     * showing the time left for the alert to show.
+     * The progress stops when the element is hovered.
+     */
+    this.showTimeoutBar = false;
+    /** Toggles the Pause on Hover functionality */
+    this.pauseOnHover = true;
+    /** Closes the alert when the close button is clicked.
+     * Also restarts the counter and sets its value to match dismissTimeout.
+     */
+    this.handleAlertClose = () => {
+      clearInterval(this.timerId);
+      this.presented = false;
+      this.close.emit();
+      this.countdown = this.dismissTimeout;
+    };
+    /** Countdown which initial state is dismissTimeout ms. */
+    this.countdown = this.dismissTimeout;
+    /** Counter decremental function */
+    this.counter = () => {
+      this.countdown -= this.timerInterval;
+    };
+    /** Starts a new countdown which interval is set in timerInterval,
+     * Only if is presented, dismissTimeout is greater than 0,
+     * and countdown is still running.
+     */
+    this.start = () => {
+      clearInterval(this.timerId);
+      if (this.presented && this.dismissTimeout !== 0 && this.countdown >= 0) {
+        this.timerId = setInterval(this.counter, this.timerInterval);
+      }
+    };
+    /** Pauses the countdown */
+    this.handleMouseEnter = () => {
+      clearInterval(this.timerId);
+    };
+    /** Resumes the countdown */
+    this.handleMouseLeave = () => {
+      this.start();
+    };
+  }
+  timeoutWatcher(newValue) {
+    if (newValue) {
+      this.countdown = newValue;
+      this.start();
+    }
+  }
+  presentedWatcher(newValue) {
+    if (newValue) {
+      this.start();
+    }
+  }
+  /** Countdown watcher that hides the alert if dismissTimeout is reached
+   * and stops the countdown.
+   * See handleAlertClose for more details. */
+  countdownWatcher(newValue) {
+    if (newValue <= 0) {
+      this.handleAlertClose();
+    }
+  }
+  componentDidLoad() {
+    this.start();
+  }
+  render() {
+    return (h(Host, { role: "alert", onMouseEnter: this.pauseOnHover && this.handleMouseEnter, onMouseLeave: this.pauseOnHover && this.handleMouseLeave, "aria-hidden": !this.presented ? "true" : "false", class: this.pauseOnHover && "pause-on-hover" }, this.presented && [
+      this.leftImgSrc && (h("img", { part: "image", class: "image", src: this.leftImgSrc, alt: "", "aria-hidden": "true", loading: "lazy" })),
+      h("div", { part: "content", class: "content" }, h("slot", { name: "content" })),
+      this.showCloseButton && (h("button", { part: "close-button", class: "close-button", type: "button", "aria-label": this.closeButtonAccessibleName, onClick: this.handleAlertClose }, h("slot", { name: "button", "aria-hidden": "true" }, h("div", { "aria-hidden": "true", class: "close-button-img" })))),
+      this.showTimeoutBar && (h("ch-timer", { part: "indicator-container", class: "indicator-container", exportparts: "indicator", progress: (this.countdown * 100) / this.dismissTimeout, accessibleName: `${this.countdown / 1000} seconds left`, "animation-time": this.dismissTimeout, presented: this.presented }))
+    ]));
+  }
+  static get watchers() { return {
+    "dismissTimeout": ["timeoutWatcher"],
+    "presented": ["presentedWatcher"],
+    "countdown": ["countdownWatcher"]
+  }; }
+  static get style() { return alertCss; }
+}, [1, "ch-alert", {
+    "timerInterval": [2, "timer-interval"],
+    "closeButtonAccessibleName": [1, "close-button-accessible-name"],
+    "dismissTimeout": [2, "dismiss-timeout"],
+    "leftImgSrc": [1, "left-img-src"],
+    "presented": [1540],
+    "showCloseButton": [4, "show-close-button"],
+    "showTimeoutBar": [4, "show-timeout-bar"],
+    "pauseOnHover": [4, "pause-on-hover"],
+    "countdown": [1026]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-alert", "ch-timer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChAlert$1);
+      }
+      break;
+    case "ch-timer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChAlert = ChAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChAlert, defineCustomElement };