wj-elements 0.1.120 → 0.1.121

package/dist/wje-master.js

@@ -51,53 +51,54 @@ import "./wje-infinite-scroll.js";
 import { default as default39 } from "./wje-input.js";
 import { default as default40 } from "./wje-input-file.js";
 import { default as default41 } from "./wje-item.js";
-import { default as default42 } from "./wje-label.js";
+import { default as default42 } from "./wje-kanban.js";
+import { default as default43 } from "./wje-label.js";
 import "./wje-list.js";
-import { default as default43 } from "./wje-main.js";
-import { default as default44 } from "./wje-masonry.js";
-import { default as default45 } from "./wje-menu.js";
-import { default as default46 } from "./wje-menu-button.js";
-import { default as default47 } from "./wje-menu-item.js";
-import { default as default48 } from "./wje-menu-label.js";
-import { default as default49 } from "./wje-option.js";
-import { default as default50 } from "./wje-options.js";
-import { default as default51 } from "./wje-orgchart.js";
-import { default as default52 } from "./wje-orgchart-group.js";
-import { default as default53 } from "./wje-orgchart-item.js";
+import { default as default44 } from "./wje-main.js";
+import { default as default45 } from "./wje-masonry.js";
+import { default as default46 } from "./wje-menu.js";
+import { default as default47 } from "./wje-menu-button.js";
+import { default as default48 } from "./wje-menu-item.js";
+import { default as default49 } from "./wje-menu-label.js";
+import { default as default50 } from "./wje-option.js";
+import { default as default51 } from "./wje-options.js";
+import { default as default52 } from "./wje-orgchart.js";
+import { default as default53 } from "./wje-orgchart-group.js";
+import { default as default54 } from "./wje-orgchart-item.js";
 import "./wje-popup.js";
-import { default as default54 } from "./wje-progress-bar.js";
-import { default as default55 } from "./wje-qr-code.js";
-import { default as default56 } from "./wje-radio.js";
-import { default as default57 } from "./wje-radio-group.js";
-import { default as default58 } from "./wje-rate.js";
-import { default as default59 } from "./wje-relative-time.js";
-import { default as default60 } from "./wje-reorder.js";
-import { default as default61 } from "./wje-reorder-dropzone.js";
-import { default as default62 } from "./wje-reorder-handle.js";
-import { default as default63 } from "./wje-reorder-item.js";
-import { default as default64 } from "./wje-route.js";
-import { default as default65 } from "./wje-routerx.js";
-import { default as default66 } from "./wje-router-link.js";
-import { default as default67 } from "./wje-router-outlet.js";
-import { default as default68 } from "./wje-row.js";
-import { default as default69 } from "./wje-select.js";
-import { default as default70 } from "./wje-slider.js";
-import { default as default71 } from "./wje-split-view.js";
-import { default as default72 } from "./wje-status.js";
-import { default as default73 } from "./wje-step.js";
-import { default as default74 } from "./wje-stepper.js";
-import { default as default75 } from "./wje-tab.js";
-import { default as default76 } from "./wje-tab-group.js";
-import { default as default77 } from "./wje-tab-panel.js";
-import { default as default78 } from "./wje-textarea.js";
-import { default as default79 } from "./wje-thumbnail.js";
-import { default as default80 } from "./wje-toast.js";
-import { default as default81 } from "./wje-toggle.js";
-import { default as default82 } from "./wje-toolbar.js";
-import { default as default83 } from "./wje-toolbar-action.js";
-import { default as default84 } from "./wje-tooltip.js";
-import { default as default85 } from "./wje-visually-hidden.js";
-import { default as default86 } from "./wje-sliding-container.js";
+import { default as default55 } from "./wje-progress-bar.js";
+import { default as default56 } from "./wje-qr-code.js";
+import { default as default57 } from "./wje-radio.js";
+import { default as default58 } from "./wje-radio-group.js";
+import { default as default59 } from "./wje-rate.js";
+import { default as default60 } from "./wje-relative-time.js";
+import { default as default61 } from "./wje-reorder.js";
+import { default as default62 } from "./wje-reorder-dropzone.js";
+import { default as default63 } from "./wje-reorder-handle.js";
+import { default as default64 } from "./wje-reorder-item.js";
+import { default as default65 } from "./wje-route.js";
+import { default as default66 } from "./wje-routerx.js";
+import { default as default67 } from "./wje-router-link.js";
+import { default as default68 } from "./wje-router-outlet.js";
+import { default as default69 } from "./wje-row.js";
+import { default as default70 } from "./wje-select.js";
+import { default as default71 } from "./wje-slider.js";
+import { default as default72 } from "./wje-split-view.js";
+import { default as default73 } from "./wje-status.js";
+import { default as default74 } from "./wje-step.js";
+import { default as default75 } from "./wje-stepper.js";
+import { default as default76 } from "./wje-tab.js";
+import { default as default77 } from "./wje-tab-group.js";
+import { default as default78 } from "./wje-tab-panel.js";
+import { default as default79 } from "./wje-textarea.js";
+import { default as default80 } from "./wje-thumbnail.js";
+import { default as default81 } from "./wje-toast.js";
+import { default as default82 } from "./wje-toggle.js";
+import { default as default83 } from "./wje-toolbar.js";
+import { default as default84 } from "./wje-toolbar-action.js";
+import { default as default85 } from "./wje-tooltip.js";
+import { default as default86 } from "./wje-visually-hidden.js";
+import { default as default87 } from "./wje-sliding-container.js";
 import { L } from "./list.element-BkOOqBtW.js";
 import { I } from "./infinite-scroll.element-BJZCBKDO.js";
 import { P } from "./popup.element-Dna4OwCH.js";
@@ -127,8 +128,8 @@ function formatDate(input, format) {
   };
   return format.replace(/yyyy|MM|dd|HH|mm|ss|MMMM|MMM/g, (matched) => map[matched]);
 }
-const sk = {
-  code: "sk-SK",
+const skSk = {
+  code: "sk-sk",
   name: "Slovak",
   dir: "ltr",
   "welcome": "Vitajte",
@@ -140,9 +141,9 @@ const sk = {
   "wj.stepper.button.previous": "Späť",
   "wj.stepper.step": "Krok"
 };
-Localizer.registerTranslation(sk);
-const en = {
-  code: "en-GB",
+Localizer.registerTranslation(skSk);
+const enGb = {
+  code: "en-gb",
   name: "English",
   dir: "ltr",
   "welcome": "Welcome",
@@ -154,8 +155,8 @@ const en = {
   "wj.stepper.button.previous": "Previous",
   "wj.stepper.step": "Step"
 };
-Localizer.registerTranslation(en);
-const styles$1 = ".native-timeline {\r\n    position: relative;\r\n}\r\n\r\n.vertical-line {\r\n    position: absolute;\r\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 1px;\r\n    background-color: var(--wje-color-info-3);\r\n}\r\n\r\n\r\n";
+Localizer.registerTranslation(enGb);
+const styles$2 = ".native-timeline {\r\n    position: relative;\r\n}\r\n\r\n.vertical-line {\r\n    position: absolute;\r\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 1px;\r\n    background-color: var(--wje-color-info-3);\r\n}\r\n\r\n\r\n";
 class Timeline extends WJElement {
   constructor() {
     super();
@@ -173,7 +174,7 @@ class Timeline extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles$1;
+    return styles$2;
   }
   /**
    * Sets up the attributes for the component.
@@ -205,7 +206,7 @@ class Timeline extends WJElement {
   }
 }
 Timeline.define("wje-timeline", Timeline);
-const styles = ":host {\r\n    --wje-card-content-padding: var(--wje-spacing-medium);\r\n    margin-bottom: .5rem;\r\n    display: block;\r\n}\r\n\r\n.native-timeline-item > wje-icon {\r\n    color: var(--wje-color-contrast-5) !important;\r\n}\r\n\r\n.timeline-items {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.native-timeline-item {\r\n    display: flex;\r\n    position: relative;\r\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\r\n    gap: var(--wje-spacing-medium);\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    border-color: transparent;\r\n    border-radius: var(--wje-border-radius-large);\r\n}\r\n\r\n:host .native-timeline-item:hover {\r\n    background-color: var(--wje-color-contrast-1);\r\n    border-color: var(--wje-color-contrast-3);\r\n}\r\n\r\n:host([active]) .native-timeline-item {\r\n    background-color: var(--wje-color-primary-1);\r\n    border-color: var(--wje-color-primary-3);\r\n}\r\n\r\n:host([active]) .native-timeline-item:hover {\r\n    background-color: var(--wje-color-primary-2);\r\n}\r\n\r\n.icon-container {\r\n    position: absolute;\r\n    display: flex;\r\n    width: var(--wje-size-small); \r\n    height: var(--wje-size-small); \r\n    padding: var(--wje-spacing-2x-small);\r\n    border-radius: var(--wje-border-radius-circle); \r\n    opacity: 0;\r\n}\r\n\r\n.content-container {\r\n    height: fit-content;\r\n    gap: var(--wje-spacing-small);\r\n}\r\n\r\n.event {\r\n    margin: 0;\r\n    font-size: var(--wje-font-size-large);\r\n    font-weight: var(--wje-font-weight-bold);\r\n    line-height: var(--wje-line-height-dense);\r\n    letter-spacing: var(--wje-spacing-4x-small);\r\n}\r\n\r\n.additional-content {\r\n    font-size: var(--wje-font-size-medium);\r\n    margin-top: 1rem;\r\n}\r\n\r\nwje-status {\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\nwje-relative-time {\r\n    display: block;\r\n    margin-bottom: var(--wje-spacing-2x-small);\r\n}";
+const styles$1 = ":host {\r\n    --wje-card-content-padding: var(--wje-spacing-medium);\r\n    margin-bottom: .5rem;\r\n    display: block;\r\n}\r\n\r\n.native-timeline-item > wje-icon {\r\n    color: var(--wje-color-contrast-5) !important;\r\n}\r\n\r\n.timeline-items {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.native-timeline-item {\r\n    display: flex;\r\n    position: relative;\r\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\r\n    gap: var(--wje-spacing-medium);\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    border-color: transparent;\r\n    border-radius: var(--wje-border-radius-large);\r\n}\r\n\r\n:host .native-timeline-item:hover {\r\n    background-color: var(--wje-color-contrast-1);\r\n    border-color: var(--wje-color-contrast-3);\r\n}\r\n\r\n:host([active]) .native-timeline-item {\r\n    background-color: var(--wje-color-primary-1);\r\n    border-color: var(--wje-color-primary-3);\r\n}\r\n\r\n:host([active]) .native-timeline-item:hover {\r\n    background-color: var(--wje-color-primary-2);\r\n}\r\n\r\n.icon-container {\r\n    position: absolute;\r\n    display: flex;\r\n    width: var(--wje-size-small); \r\n    height: var(--wje-size-small); \r\n    padding: var(--wje-spacing-2x-small);\r\n    border-radius: var(--wje-border-radius-circle); \r\n    opacity: 0;\r\n}\r\n\r\n.content-container {\r\n    height: fit-content;\r\n    gap: var(--wje-spacing-small);\r\n}\r\n\r\n.event {\r\n    margin: 0;\r\n    font-size: var(--wje-font-size-large);\r\n    font-weight: var(--wje-font-weight-bold);\r\n    line-height: var(--wje-line-height-dense);\r\n    letter-spacing: var(--wje-spacing-4x-small);\r\n}\r\n\r\n.additional-content {\r\n    font-size: var(--wje-font-size-medium);\r\n    margin-top: 1rem;\r\n}\r\n\r\nwje-status {\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\nwje-relative-time {\r\n    display: block;\r\n    margin-bottom: var(--wje-spacing-2x-small);\r\n}";
 class TimelineItem extends WJElement {
   constructor() {
     super();
@@ -223,7 +224,7 @@ class TimelineItem extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles;
+    return styles$1;
   }
   /**
    * Sets up the attributes for the component.
@@ -278,6 +279,113 @@ class TimelineItem extends WJElement {
   }
 }
 TimelineItem.define("wje-timeline-item", TimelineItem);
+const styles = '/*\r\n[ WJ Toast ]\r\n*/\r\n\r\n:host {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  width: 300px;\r\n}\r\n\r\n.native-toast {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  overflow: hidden;\r\n  margin: 0;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  border-radius: var(--wje-border-radius-large);\r\n\r\n  slot[name="avatar"]::slotted(wje-avatar) {\r\n    margin-right: .5rem;\r\n  }\r\n\r\n  .content {\r\n    font-size: var(--wje-font-size-small);\r\n    .title {\r\n      font-size: var(--wje-font-size);\r\n      font-weight: var(--wje-font-weight-bold);\r\n    }\r\n  }\r\n\r\n  wje-button {\r\n    --wje-button-margin-inline: auto 0;\r\n    margin-left: auto !important;\r\n  }\r\n}\r\n\r\n:host([position=top]) {\r\n  animation: slideDown .3s ease-out forwards;\r\n  top: 1rem;\r\n  left: auto;\r\n  right: auto;\r\n}\r\n\r\n:host([position=bottom]) {\r\n  animation: slideUp .3s ease-out forwards;\r\n  bottom: 1rem;\r\n  left: auto;\r\n  right: auto;\r\n}\r\n\r\n:host([position=top-start]) {\r\n  animation: slideStart .3s ease-out forwards;\r\n  top: 1rem;\r\n  left: 1rem;\r\n  right: auto;\r\n}\r\n\r\n:host([position=top-end]) {\r\n  animation: slideEnd .3s ease-out forwards;\r\n  top: 1rem;\r\n  left: auto;\r\n  right: 1rem;\r\n}\r\n\r\n:host([position=bottom-start]) {\r\n  animation: slideStart .3s ease-out forwards;\r\n  bottom: 1rem;\r\n  left: 1rem;\r\n  right: auto;\r\n}\r\n\r\n:host([position=bottom-end]) {\r\n  animation: slideEnd .3s ease-out forwards;\r\n  bottom: 1rem;\r\n  left: auto;\r\n  right: 1rem;\r\n}\r\n\r\n@keyframes slideDown {\r\n  0% {\r\n    transform: translateY(-100%);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes slideUp {\r\n  0% {\r\n    transform: translateY(100%);\r\n  }\r\n  100% {\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes slideStart {\r\n  0% {\r\n    transform: translateX(-100%);\r\n  }\r\n  100% {\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes slideEnd {\r\n  0% {\r\n    transform: translateX(100%);\r\n  }\r\n  100% {\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n/*PRIMARY*/\r\n:host([type=primary]) .native-toast {\r\n  background-color: var(--wje-color-primary-1);\r\n  color: var(--wje-color-primary-9);\r\n  border-color: var(--wje-color-primary-3);\r\n}\r\n\r\n/*COMPLETE*/\r\n:host([type=complete]) .native-toast {\r\n  background-color: var(--wje-color-complete-1);\r\n  color: var(--wje-color-complete-9);\r\n  border-color: var(--wje-color-complete-3);\r\n}\r\n\r\n/*SUCCESS*/\r\n:host([type=success]) .native-toast {\r\n  background-color: var(--wje-color-success-1);\r\n  color: var(--wje-color-success-9);\r\n  border-color: var(--wje-color-success-3);\r\n}\r\n\r\n/*WARNING*/\r\n:host([type=warning]) .native-toast{\r\n  background-color: var(--wje-color-warning-1);\r\n  color: var(--wje-color-warning-11);\r\n  border-color: var(--wje-color-warning-3);\r\n}\r\n\r\n/*DANGER*/\r\n:host([type=danger]) .native-toast {\r\n  background-color: var(--wje-color-danger-1);\r\n  color: var(--wje-color-danger-9);\r\n  border-color: var(--wje-color-danger-3);\r\n}\r\n\r\n/*INFO*/\r\n:host([type=info]) .native-toast {\r\n  background-color: var(--wje-color-info-1);\r\n  color: var(--wje-color-info-11);\r\n  border-color: var(--wje-color-info-4);\r\n}\r\n\r\n/*CONTRAST*/\r\n:host([type=contrast]) .native-toast {\r\n  background-color: var(--wje-color-contrast-2);\r\n  color: var(--wje-color-primary-9);\r\n  border-color: var(--wje-color-contrast-3);\r\n}';
+class ToastItem extends WJElement {
+  /**
+   * Toast constructor
+   * @constructor
+   */
+  constructor() {
+    super();
+    /**
+     * Class name
+     * @type {string}
+     */
+    __publicField(this, "className", "ToastItem");
+    __publicField(this, "removeToast", () => {
+      clearTimeout(this.timeout);
+      this.remove();
+    });
+  }
+  set duration(value) {
+    this.setAttribute("duration", value);
+  }
+  get duration() {
+    return +this.getAttribute("duration");
+  }
+  set position(value) {
+    this.setAttribute("position", value);
+  }
+  get position() {
+    return this.getAttribute("position");
+  }
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  get type() {
+    return this.getAttribute("type");
+  }
+  /**
+   * Get CSS stylesheet
+   * @static
+   * @returns {Object} styles
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   *
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["position", "type", "duration"];
+  }
+  /**
+   * Setup attributes
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draw method
+   * @param {Object} context - The context
+   * @param {Object} store - The store
+   * @param {Object} params - The parameters
+   * @returns {Object} Document fragment
+   */
+  draw(context, store2, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-toast");
+    let avatarSlot = document.createElement("slot");
+    avatarSlot.setAttribute("name", "avatar");
+    avatarSlot.classList.add("avatar");
+    let content = document.createElement("div");
+    content.classList.add("content");
+    content.innerHTML = `<div class="title">${this.title}</div><div class="message"><slot></slot></div>`;
+    let icon = document.createElement("wje-icon");
+    icon.setAttribute("name", "x");
+    let closeBtn = document.createElement("wje-button");
+    closeBtn.setAttribute("fill", "link");
+    closeBtn.setAttribute("color", this.type);
+    closeBtn.setAttribute("size", "small");
+    closeBtn.classList.add("close");
+    closeBtn.appendChild(icon);
+    native.appendChild(avatarSlot);
+    native.appendChild(content);
+    if (this.hasAttribute("close"))
+      native.appendChild(closeBtn);
+    fragment.appendChild(native);
+    this.closeBtn = closeBtn;
+    return fragment;
+  }
+  afterDraw() {
+    this.closeBtn.addEventListener("wje-button:click", this.removeToast);
+    if (this.duration > 0) {
+      this.timeout = setTimeout(() => {
+        this.removeToast();
+      }, this.duration);
+    }
+  }
+  beforeDisconnect() {
+    this.closeBtn.removeEventListener("wje-button:click", this.removeToast);
+    clearTimeout(this.timeout);
+  }
+}
+ToastItem.define("wje-toast-item", ToastItem);
 export {
   default2 as Accordion,
   default3 as AccordionItem,
@@ -320,56 +428,58 @@ export {
   default39 as Input,
   default40 as InputFile,
   default41 as Item,
-  default42 as Label,
+  default42 as Kanban,
+  default43 as Label,
   L as List,
   Localizer,
-  default43 as Main,
-  default44 as Masonry,
-  default45 as Menu,
-  default46 as MenuButton,
-  default47 as MenuItem,
-  default48 as MenuLabel,
-  default49 as Option,
-  default50 as Options,
-  default51 as Orgchart,
-  default52 as OrgchartGroup,
-  default53 as OrgchartItem,
+  default44 as Main,
+  default45 as Masonry,
+  default46 as Menu,
+  default47 as MenuButton,
+  default48 as MenuItem,
+  default49 as MenuLabel,
+  default50 as Option,
+  default51 as Options,
+  default52 as Orgchart,
+  default53 as OrgchartGroup,
+  default54 as OrgchartItem,
   P as Popup,
-  default54 as ProgressBar,
-  default55 as QrCode,
-  default56 as Radio,
-  default57 as RadioGroup,
-  default58 as Rate,
-  default59 as RelativeTime,
-  default60 as Reorder,
-  default61 as ReorderDropzone,
-  default62 as ReorderHandle,
-  default63 as ReorderItem,
-  default64 as Route,
-  default66 as RouterLink,
-  default67 as RouterOutlet,
-  default65 as Routerx,
-  default68 as Row,
-  default69 as Select,
-  default70 as Slider,
-  default86 as SlidingContainer,
-  default71 as SplitView,
-  default72 as Status,
-  default73 as Step,
-  default74 as Stepper,
-  default75 as Tab,
-  default76 as TabGroup,
-  default77 as TabPanel,
-  default78 as Textarea,
-  default79 as Thumbnail,
+  default55 as ProgressBar,
+  default56 as QrCode,
+  default57 as Radio,
+  default58 as RadioGroup,
+  default59 as Rate,
+  default60 as RelativeTime,
+  default61 as Reorder,
+  default62 as ReorderDropzone,
+  default63 as ReorderHandle,
+  default64 as ReorderItem,
+  default65 as Route,
+  default67 as RouterLink,
+  default68 as RouterOutlet,
+  default66 as Routerx,
+  default69 as Row,
+  default70 as Select,
+  default71 as Slider,
+  default87 as SlidingContainer,
+  default72 as SplitView,
+  default73 as Status,
+  default74 as Step,
+  default75 as Stepper,
+  default76 as Tab,
+  default77 as TabGroup,
+  default78 as TabPanel,
+  default79 as Textarea,
+  default80 as Thumbnail,
   Timeline,
   TimelineItem,
-  default80 as Toast,
-  default81 as Toggle,
-  default82 as Toolbar,
-  default83 as ToolbarAction,
-  default84 as Tooltip,
-  default85 as VisuallyHidden,
+  default81 as Toast,
+  ToastItem,
+  default82 as Toggle,
+  default83 as Toolbar,
+  default84 as ToolbarAction,
+  default85 as Tooltip,
+  default86 as VisuallyHidden,
   WJElement,
   WjePermissionsApi,
   b as bindRouterLinks,

package/dist/wje-relative-time.js

@@ -99,8 +99,8 @@ class RelativeTime extends WJElement {
    * @returns {boolean} True if the string is an ISO date, false otherwise.
    */
   isISODate(str) {
-    let regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\+\d{2}:\d{2}|Z)$/;
-    return regex.test(str);
+    const date = new Date(str);
+    return !isNaN(date.getTime());
   }
 }
 RelativeTime.define("wje-relative-time", RelativeTime);

package/dist/wje-routerx.js

@@ -1500,7 +1500,7 @@ class Routerx extends WJElement {
     this.router = new Router({
       outlet: this.outlet || "wje-router-outlet",
       log: false,
-      logError: false,
+      logError: true,
       root: this.root || "/",
       pushState: true
     });