wcs-core 4.2.0 → 5.0.0

package/dist/esm/grid-pagination-f7b01e2e.js

@@ -0,0 +1,109 @@
+import { h, r as registerInstance, c as createEvent, H as Host } from './index-4f282598.js';
+
+const getAccessibleName = (order, double) => {
+  switch (order) {
+    case 'next':
+      return double ? 'Last page' : 'Next page';
+    case 'previous':
+    default:
+      return double ? 'First page' : 'Previous page';
+  }
+};
+const GridPaginationArrow = ({ active, order, double = false }) => (h("wcs-button", { mode: "clear", shape: "square", size: "s", disabled: !active, title: getAccessibleName(order, double) },
+  h("svg", { style: { cursor: 'pointer' }, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
+    h("style", { type: "text/css" }, `
+              .arrow-group {
+                  transform-origin: 50% 51%;
+                  transition: transform 175ms ease-in-out;
+              }
+              .arrow {
+                  transition: fill 175ms ease-in-out;
+                  fill: var(--wcs-text-light);
+              }
+              .second-arrow {
+                  transform: translateY(-8px);
+              }
+              .next {
+                  transform: rotate(90deg);
+              }
+              .previous {
+                  transform: rotate(-90deg);
+              }
+              .active {
+                  fill: var(--wcs-primary);
+              }
+          `),
+    h("g", { fill: "none", class: order + ' arrow-group' },
+      h("path", { class: (active ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+      h("path", { d: "M0 0h24v24H0z", fill: "none" })),
+    double ?
+      h("g", { fill: "none", class: order + ' arrow-group' },
+        h("path", { class: (active ? 'active' : '') + ' arrow second-arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+        h("path", { d: "M0 0h24v24H0z", fill: "none" }))
+      : '')));
+
+const gridPaginationCss = ":host{display:block;border-style:solid none none;border-width:1px;border-color:var(--wcs-text-light)}.container{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;color:var(--wcs-text-medium);align-items:center}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-padding-s)}.items-count span:focus{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}";
+
+const GridPagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsGridPaginationChange = createEvent(this, "wcsGridPaginationChange", 7);
+    this.availablePageSizes = [10, 20, 50];
+    this.currentPage = GridPagination.INDEX_FIRST_PAGE;
+    this.pageSize = this.availablePageSizes[0];
+    this.itemsCount = 0;
+    this.pageCount = 1;
+  }
+  lastPage() {
+    this.currentPage = this.pageCount - 1;
+    this.emitPaginationChange();
+  }
+  nextPage() {
+    if (this.canGoToNextPage()) {
+      this.currentPage++;
+      this.emitPaginationChange();
+    }
+  }
+  canGoToNextPage() {
+    return this.currentPage + 1 < this.pageCount;
+  }
+  previousPage() {
+    if (this.canGoToPreviousPage()) {
+      this.currentPage--;
+      this.emitPaginationChange();
+    }
+  }
+  canGoToPreviousPage() {
+    return this.currentPage > 0;
+  }
+  firstPage() {
+    this.currentPage = 0;
+    this.emitPaginationChange();
+  }
+  onChangePagesize(event) {
+    this.pageSize = event.detail.value;
+    if (this.currentPage + 1 > this.pageSize) {
+      this.currentPage = 0;
+    }
+    this.emitPaginationChange();
+  }
+  emitPaginationChange() {
+    this.wcsGridPaginationChange.emit({
+      pagination: {
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        itemsCount: this.itemsCount,
+        pageCount: this.pageCount
+      }
+    });
+  }
+  render() {
+    return (h(Host, { slot: "grid-pagination" }, h("div", { class: "container" }, h("div", { class: "page-size" }, h("wcs-select", { placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePagesize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { id: "elements-per-page-text" }, "\u00A0\u00E9l\u00E9ments par page")), h("div", { class: "items-count" }, h("span", null, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", { "aria-label": "pagination" }, h("ul", { class: "page-management" }, h("li", { class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToPreviousPage(), order: "previous" })), h("li", { class: "pagination-counter" }, h("span", { "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next" })), h("li", { class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { active: this.canGoToNextPage(), order: "next", double: true })))))));
+  }
+};
+GridPagination.INDEX_FIRST_PAGE = 0;
+GridPagination.style = gridPaginationCss;
+
+export { GridPagination as G };
+
+//# sourceMappingURL=grid-pagination-f7b01e2e.js.map

package/dist/esm/grid-pagination-f7b01e2e.js.map

@@ -0,0 +1 @@
+{"file":"grid-pagination-f7b01e2e.js","mappings":"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","names":[],"sources":["./src/components/grid-pagination/grid-pagination-arrow.tsx","./src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","./src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Last page' : 'Next page';\n    case 'previous':\n    default:\n      return double ? 'First page' : 'Previous page';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-text-light);\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-primary);\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n    align-items: center;\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-padding-s);\n}\n\n.items-count span:focus {\n    @include focus-outline();\n}\n","import {\n    Component,\n    ComponentInterface,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\">\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

package/dist/esm/{helpers-1d55b67f.js → helpers-a21ae7d0.js}

@@ -22,7 +22,7 @@ const debounce = (func, wait = 0) => {
 /**
  * Elements inside of web components sometimes need to inherit global attributes
  * set on the host. For example, the inner input in `wcs-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
+ * the `title` attribute that developers set directly on `wcs-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
  *
@@ -42,6 +42,78 @@ const inheritAttributes = (el, attributes = []) => {
   });
   return attributeObject;
 };
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
+};
 const findItemLabel = (componentEl) => {
   const itemEl = componentEl.closest('wcs-form-field');
   if (itemEl) {
@@ -119,6 +191,6 @@ function isTabKey(evt) {
   return evt.key === 'Tab';
 }
 
-export { isEnterKey as a, isEscapeKey as b, isKeyup as c, isKeydown as d, isHomeKey as e, isEndKey as f, clickTargetIsElementOrChildren as g, clickInsideElement as h, isSpaceKey as i, debounceEvent as j, inheritAttributes as k, findItemLabel as l, isTabKey as m, isDownArrowKey as n, isUpArrowKey as o, isLeftArrowKey as p, isRightArrowKey as q, raf as r, generateUniqueId as s, isPageDownKey as t, isPageUpKey as u, isElement as v, hasShadowDom as w };
+export { isEnterKey as a, isEscapeKey as b, isKeyup as c, isKeydown as d, isHomeKey as e, isEndKey as f, clickTargetIsElementOrChildren as g, clickInsideElement as h, isSpaceKey as i, isPageUpKey as j, isPageDownKey as k, isTabKey as l, debounceEvent as m, inheritAriaAttributes as n, inheritAttributes as o, findItemLabel as p, isDownArrowKey as q, isUpArrowKey as r, isLeftArrowKey as s, isRightArrowKey as t, raf as u, generateUniqueId as v, isElement as w, hasShadowDom as x };
 
-//# sourceMappingURL=helpers-1d55b67f.js.map
+//# sourceMappingURL=helpers-a21ae7d0.js.map

package/dist/esm/helpers-a21ae7d0.js.map

@@ -0,0 +1 @@
+{"file":"helpers-a21ae7d0.js","mappings":"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","names":[],"sources":["./src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n    'role',\n    'aria-activedescendant',\n    'aria-atomic',\n    'aria-autocomplete',\n    'aria-braillelabel',\n    'aria-brailleroledescription',\n    'aria-busy',\n    'aria-checked',\n    'aria-colcount',\n    'aria-colindex',\n    'aria-colindextext',\n    'aria-colspan',\n    'aria-controls',\n    'aria-current',\n    'aria-describedby',\n    'aria-description',\n    'aria-details',\n    'aria-disabled',\n    'aria-errormessage',\n    'aria-expanded',\n    'aria-flowto',\n    'aria-haspopup',\n    'aria-hidden',\n    'aria-invalid',\n    'aria-keyshortcuts',\n    'aria-label',\n    'aria-labelledby',\n    'aria-level',\n    'aria-live',\n    'aria-multiline',\n    'aria-multiselectable',\n    'aria-orientation',\n    'aria-owns',\n    'aria-placeholder',\n    'aria-posinset',\n    'aria-pressed',\n    'aria-readonly',\n    'aria-relevant',\n    'aria-required',\n    'aria-roledescription',\n    'aria-rowcount',\n    'aria-rowindex',\n    'aria-rowindextext',\n    'aria-rowspan',\n    'aria-selected',\n    'aria-setsize',\n    'aria-sort',\n    'aria-valuemax',\n    'aria-valuemin',\n    'aria-valuenow',\n    'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n    let attributesToInherit = ariaAttributes;\n    if (ignoreList && ignoreList.length > 0) {\n        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n    }\n    return inheritAttributes(el, attributesToInherit);\n};\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n    return evt.key === 'a' && evt.ctrlKey;\n}"],"version":3}

package/dist/esm/{index-dc4d96d4.js → index-4f282598.js}

@@ -1385,6 +1385,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             promise = safeCall(instance, 'componentWillUpdate');
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -2122,4 +2125,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, readTask as a, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-dc4d96d4.js.map
+//# sourceMappingURL=index-4f282598.js.map