voyager-ionic-core 7.2.3

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,441 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from '@stencil/core';
+import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from "../../utils/helpers";
+import { chevronDown } from 'ionicons/icons';
+import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot header - Content is placed at the top and is used to
+ * expand or collapse the accordion item.
+ * @slot content - Content is placed below the header and is
+ * shown or hidden based on expanded state.
+ *
+ * @part header - The wrapper element for the header slot.
+ * @part content - The wrapper element for the content slot.
+ * @part expanded - The expanded element. Can be used in combination
+ * with the `header` and `content` parts (i.e. `::part(header expanded)`).
+ */
+export class Accordion {
+  constructor() {
+    this.updateListener = () => this.updateState(false);
+    this.setItemDefaults = () => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      /**
+       * For a11y purposes, we make
+       * the ion-item a button so users
+       * can tab to it and use keyboard
+       * navigation to get around.
+       */
+      ionItem.button = true;
+      ionItem.detail = false;
+      /**
+       * By default, the lines in an
+       * item should be full here, but
+       * only do that if a user has
+       * not explicitly overridden them
+       */
+      if (ionItem.lines === undefined) {
+        ionItem.lines = 'full';
+      }
+    };
+    this.getSlottedHeaderIonItem = () => {
+      const { headerEl } = this;
+      if (!headerEl) {
+        return;
+      }
+      /**
+       * Get the first ion-item
+       * slotted in the header slot
+       */
+      const slot = headerEl.querySelector('slot');
+      if (!slot) {
+        return;
+      }
+      // This is not defined in unit tests
+      if (slot.assignedElements === undefined)
+        return;
+      return slot.assignedElements().find((el) => el.tagName === 'ION-ITEM');
+    };
+    this.setAria = (expanded = false) => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      /**
+       * Get the native <button> element inside of
+       * ion-item because that is what will be focused
+       */
+      const root = getElementRoot(ionItem);
+      const button = root.querySelector('button');
+      if (!button) {
+        return;
+      }
+      button.setAttribute('aria-expanded', `${expanded}`);
+    };
+    this.slotToggleIcon = () => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      const { toggleIconSlot, toggleIcon } = this;
+      /**
+       * Check if there already is a toggle icon.
+       * If so, do not add another one.
+       */
+      const existingToggleIcon = ionItem.querySelector('.ion-accordion-toggle-icon');
+      if (existingToggleIcon) {
+        return;
+      }
+      const iconEl = document.createElement('ion-icon');
+      iconEl.slot = toggleIconSlot;
+      iconEl.lazy = false;
+      iconEl.classList.add('ion-accordion-toggle-icon');
+      iconEl.icon = toggleIcon;
+      iconEl.setAttribute('aria-hidden', 'true');
+      ionItem.appendChild(iconEl);
+    };
+    this.expandAccordion = (initialUpdate = false) => {
+      const { contentEl, contentElWrapper } = this;
+      if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+        this.state = 4 /* AccordionState.Expanded */;
+        return;
+      }
+      if (this.state === 4 /* AccordionState.Expanded */) {
+        return;
+      }
+      if (this.currentRaf !== undefined) {
+        cancelAnimationFrame(this.currentRaf);
+      }
+      if (this.shouldAnimate()) {
+        raf(() => {
+          this.state = 8 /* AccordionState.Expanding */;
+          this.currentRaf = raf(async () => {
+            const contentHeight = contentElWrapper.offsetHeight;
+            const waitForTransition = transitionEndAsync(contentEl, 2000);
+            contentEl.style.setProperty('max-height', `${contentHeight}px`);
+            await waitForTransition;
+            this.state = 4 /* AccordionState.Expanded */;
+            contentEl.style.removeProperty('max-height');
+          });
+        });
+      }
+      else {
+        this.state = 4 /* AccordionState.Expanded */;
+      }
+    };
+    this.collapseAccordion = (initialUpdate = false) => {
+      const { contentEl } = this;
+      if (initialUpdate || contentEl === undefined) {
+        this.state = 1 /* AccordionState.Collapsed */;
+        return;
+      }
+      if (this.state === 1 /* AccordionState.Collapsed */) {
+        return;
+      }
+      if (this.currentRaf !== undefined) {
+        cancelAnimationFrame(this.currentRaf);
+      }
+      if (this.shouldAnimate()) {
+        this.currentRaf = raf(async () => {
+          const contentHeight = contentEl.offsetHeight;
+          contentEl.style.setProperty('max-height', `${contentHeight}px`);
+          raf(async () => {
+            const waitForTransition = transitionEndAsync(contentEl, 2000);
+            this.state = 2 /* AccordionState.Collapsing */;
+            await waitForTransition;
+            this.state = 1 /* AccordionState.Collapsed */;
+            contentEl.style.removeProperty('max-height');
+          });
+        });
+      }
+      else {
+        this.state = 1 /* AccordionState.Collapsed */;
+      }
+    };
+    /**
+     * Helper function to determine if
+     * something should animate.
+     * If prefers-reduced-motion is set
+     * then we should not animate, regardless
+     * of what is set in the config.
+     */
+    this.shouldAnimate = () => {
+      if (typeof window === 'undefined') {
+        return false;
+      }
+      const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (prefersReducedMotion) {
+        return false;
+      }
+      const animated = config.get('animated', true);
+      if (!animated) {
+        return false;
+      }
+      if (this.accordionGroupEl && !this.accordionGroupEl.animated) {
+        return false;
+      }
+      return true;
+    };
+    this.updateState = async (initialUpdate = false) => {
+      const accordionGroup = this.accordionGroupEl;
+      const accordionValue = this.value;
+      if (!accordionGroup) {
+        return;
+      }
+      const value = accordionGroup.value;
+      const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+      if (shouldExpand) {
+        this.expandAccordion(initialUpdate);
+        this.isNext = this.isPrevious = false;
+      }
+      else {
+        this.collapseAccordion(initialUpdate);
+        /**
+         * When using popout or inset,
+         * the collapsed accordion items
+         * may need additional border radius
+         * applied. Check to see if the
+         * next or previous accordion is selected.
+         */
+        const nextAccordion = this.getNextSibling();
+        const nextAccordionValue = nextAccordion === null || nextAccordion === void 0 ? void 0 : nextAccordion.value;
+        if (nextAccordionValue !== undefined) {
+          this.isPrevious = Array.isArray(value) ? value.includes(nextAccordionValue) : value === nextAccordionValue;
+        }
+        const previousAccordion = this.getPreviousSibling();
+        const previousAccordionValue = previousAccordion === null || previousAccordion === void 0 ? void 0 : previousAccordion.value;
+        if (previousAccordionValue !== undefined) {
+          this.isNext = Array.isArray(value) ? value.includes(previousAccordionValue) : value === previousAccordionValue;
+        }
+      }
+    };
+    this.getNextSibling = () => {
+      if (!this.el) {
+        return;
+      }
+      const nextSibling = this.el.nextElementSibling;
+      if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
+        return;
+      }
+      return nextSibling;
+    };
+    this.getPreviousSibling = () => {
+      if (!this.el) {
+        return;
+      }
+      const previousSibling = this.el.previousElementSibling;
+      if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
+        return;
+      }
+      return previousSibling;
+    };
+    this.state = 1 /* AccordionState.Collapsed */;
+    this.isNext = false;
+    this.isPrevious = false;
+    this.value = `ion-accordion-${accordionIds++}`;
+    this.disabled = false;
+    this.readonly = false;
+    this.toggleIcon = chevronDown;
+    this.toggleIconSlot = 'end';
+  }
+  valueChanged() {
+    this.updateState();
+  }
+  connectedCallback() {
+    var _a;
+    const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
+    if (accordionGroupEl) {
+      this.updateState(true);
+      addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
+    }
+  }
+  disconnectedCallback() {
+    const accordionGroupEl = this.accordionGroupEl;
+    if (accordionGroupEl) {
+      removeEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
+    }
+  }
+  componentDidLoad() {
+    this.setItemDefaults();
+    this.slotToggleIcon();
+    /**
+     * We need to wait a tick because we
+     * just set ionItem.button = true and
+     * the button has not have been rendered yet.
+     */
+    raf(() => {
+      /**
+       * Set aria label on button inside of ion-item
+       * once the inner content has been rendered.
+       */
+      const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
+      this.setAria(expanded);
+    });
+  }
+  toggleExpanded() {
+    const { accordionGroupEl, value, state } = this;
+    if (accordionGroupEl) {
+      /**
+       * Because the accordion group may or may
+       * not allow multiple accordions open, we
+       * need to request the toggling of this
+       * accordion and the accordion group will
+       * make the decision on whether or not
+       * to allow it.
+       */
+      const expand = state === 1 /* AccordionState.Collapsed */ || state === 2 /* AccordionState.Collapsing */;
+      accordionGroupEl.requestAccordionToggle(value, expand);
+    }
+  }
+  render() {
+    const { disabled, readonly } = this;
+    const mode = getIonMode(this);
+    const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
+    const headerPart = expanded ? 'header expanded' : 'header';
+    const contentPart = expanded ? 'content expanded' : 'content';
+    this.setAria(expanded);
+    return (h(Host, { class: {
+        [mode]: true,
+        'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
+        'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
+        'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
+        'accordion-collapsed': this.state === 1 /* AccordionState.Collapsed */,
+        'accordion-next': this.isNext,
+        'accordion-previous': this.isPrevious,
+        'accordion-disabled': disabled,
+        'accordion-readonly': readonly,
+        'accordion-animated': this.shouldAnimate(),
+      } }, h("div", { onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { name: "header" })), h("div", { id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { name: "content" })))));
+  }
+  static get is() { return "ion-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "ios": ["accordion.ios.scss"],
+      "md": ["accordion.md.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "ios": ["accordion.ios.css"],
+      "md": ["accordion.md.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the accordion. Defaults to an autogenerated\nvalue."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "`ion-accordion-${accordionIds++}`"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the accordion cannot be interacted with."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toggleIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed."
+        },
+        "attribute": "toggle-icon",
+        "reflect": false,
+        "defaultValue": "chevronDown"
+      },
+      "toggleIconSlot": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'end'",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`."
+        },
+        "attribute": "toggle-icon-slot",
+        "reflect": false,
+        "defaultValue": "'end'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "state": {},
+      "isNext": {},
+      "isPrevious": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
+}
+let accordionIds = 0;

package/dist/collection/components/accordion/accordion.md.css

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  background-color: var(--ion-background-color, #ffffff);
+  overflow: hidden;
+  /**
+   * This is required to force WebKit
+   * to create a new stacking context
+   * otherwise the border radius is
+   * temporarily lost when hovering over
+   * the ion-item or expanding/collapsing
+   * the accordion.
+   */
+  z-index: 0;
+}
+
+:host(.accordion-expanding) ::slotted(ion-item[slot=header]),
+:host(.accordion-expanded) ::slotted(ion-item[slot=header]) {
+  --border-width: 0px;
+}
+
+:host(.accordion-animated) {
+  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+#content {
+  overflow: hidden;
+  will-change: max-height;
+}
+
+:host(.accordion-collapsing) #content {
+  /* stylelint-disable-next-line declaration-no-important */
+  max-height: 0 !important;
+}
+
+:host(.accordion-collapsed) #content {
+  display: none;
+}
+
+:host(.accordion-expanding) #content {
+  max-height: 0;
+}
+
+/**
+ * Prevent margins of content-wrapper
+ * from collapsing, breaking the animation.
+ */
+:host(.accordion-expanding) #content-wrapper {
+  overflow: auto;
+}
+
+:host(.accordion-disabled) #header,
+:host(.accordion-readonly) #header,
+:host(.accordion-disabled) #content,
+:host(.accordion-readonly) #content {
+  pointer-events: none;
+}
+
+/**
+ * We do not set the opacity on the
+ * host otherwise you would see the
+ * box-shadow behind it.
+ */
+:host(.accordion-disabled) #header,
+:host(.accordion-disabled) #content {
+  opacity: 0.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host,
+  #content {
+    /* stylelint-disable declaration-no-important */
+    transition: none !important;
+  }
+}

package/dist/collection/components/accordion/test/a11y/accordion.e2e.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ config, title }) => {
+  test.describe(title('accordion: a11y'), () => {
+    test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
+      // TODO(FW-1764): remove skip once issue is resolved
+      skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
+      // TODO (FW-2979)
+      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
+      await page.goto(`/src/components/accordion/test/a11y`, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      const personalInfoHeader = page.locator('ion-accordion:first-child > ion-item');
+      const billingAddressHeader = page.locator('ion-accordion:nth-child(2) > ion-item');
+      const shippingAddressHeader = page.locator('ion-accordion:nth-child(3) > ion-item');
+      const addressInput = page.locator('#address1 input');
+      await page.keyboard.press(tabKey);
+      await expect(personalInfoHeader).toBeFocused();
+      await page.keyboard.press('ArrowDown');
+      await expect(billingAddressHeader).toBeFocused();
+      await page.keyboard.press('ArrowDown');
+      await expect(shippingAddressHeader).toBeFocused();
+      await page.keyboard.press('ArrowDown');
+      await expect(personalInfoHeader).toBeFocused();
+      await page.keyboard.press('ArrowUp');
+      await expect(shippingAddressHeader).toBeFocused();
+      // open Shipping Address accordion and move focus to the input inside it
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      await page.keyboard.press(tabKey);
+      await expect(addressInput).toBeFocused();
+      // ensure keyboard interaction doesn't move focus from body
+      await page.keyboard.press('ArrowDown');
+      await expect(addressInput).toBeFocused();
+    });
+  });
+});

package/dist/collection/components/accordion/test/accordion.e2e.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: states'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+    });
+    test('should properly set readonly on child accordions', async ({ page }) => {
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+      await expect(accordion).toHaveJSProperty('readonly', false);
+      await accordionGroup.evaluate((el) => {
+        el.readonly = true;
+      });
+      await page.waitForChanges();
+      await expect(accordion).toHaveJSProperty('readonly', true);
+    });
+    test('should properly set disabled on child accordions', async ({ page }) => {
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+      await expect(accordion).toHaveJSProperty('disabled', false);
+      await accordionGroup.evaluate((el) => {
+        el.disabled = true;
+      });
+      await page.waitForChanges();
+      await expect(accordion).toHaveJSProperty('disabled', true);
+    });
+  });
+});

package/dist/collection/components/accordion/test/basic/accordion.e2e.js

@@ -0,0 +1,52 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/basic`, config);
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot('accordion-basic'));
+    });
+  });
+});
+configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: ionChange'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(`
+      <ion-accordion-group>
+        <ion-accordion value="first">
+          <button slot="header">Header</button>
+          <div slot="content">First Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <button slot="header">Header</button>
+          <div slot="content">Second Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <button slot="header">Header</button>
+          <div slot="content">Third Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `, config);
+    });
+    test('should fire ionChange when interacting with accordions', async ({ page }) => {
+      const ionChange = await page.spyOnEvent('ionChange');
+      const accordionHeaders = page.locator('button[slot="header"]');
+      await accordionHeaders.nth(0).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'first' });
+      await accordionHeaders.nth(1).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'second' });
+      await accordionHeaders.nth(2).click();
+      await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' });
+    });
+    test('should not fire when programmatically setting a valid value', async ({ page }) => {
+      const ionChange = await page.spyOnEvent('ionChange');
+      const accordionGroup = page.locator('ion-accordion-group');
+      await accordionGroup.evaluate((el) => (el.value = 'second'));
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+  });
+});

package/dist/collection/components/accordion/test/multiple/accordion.e2e.js

@@ -0,0 +1,26 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('accordion: multiple'), () => {
+    test('should update value and visually expand items', async ({ page }) => {
+      await page.goto(`/src/components/accordion/test/multiple`, config);
+      const accordionGroup = page.locator('ion-accordion-group');
+      const diningHeader = page.locator('ion-accordion[value="dining"] ion-item[slot="header"]');
+      const attractionsHeader = page.locator('ion-accordion[value="attractions"] ion-item[slot="header"]');
+      await expect(accordionGroup).toHaveJSProperty('value', 'attractions');
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-one-open'));
+      await diningHeader.click();
+      await page.waitForChanges();
+      await expect(accordionGroup).toHaveJSProperty('value', ['attractions', 'dining']);
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-two-open'));
+      await diningHeader.click();
+      await attractionsHeader.click();
+      await page.waitForChanges();
+      await expect(accordionGroup).toHaveJSProperty('value', []);
+      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-zero-open'));
+    });
+  });
+});