@sankhyalabs/ezui 7.2.0-rc.8 → 7.2.0

package/dist/collection/components/ez-grid-pagination/ez-grid-pagination.css

@@ -9,6 +9,15 @@
   flex-shrink: 1;
   flex-wrap: nowrap;
   justify-content: flex-end;
+  position: relative;
+}
+
+ez-popover.cancel-pagination__popover {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  width: 0;
+  height: 0;
 }
 
 .pagination__buttons-container {
@@ -72,12 +81,116 @@
 }
 
 .cancel-pagination {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space--12, 12px);
+  gap: var(--space--16, 16px);
+  min-width: 304px;
+  max-width: 180px;
+  transition: min-width 220ms cubic-bezier(0.4, 0, 0.2, 1),
+              max-width 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.cancel-pagination--expanded {
+  min-width: 304px;
+}
+
+.cancel-pagination__expanded {
+  animation: cancel-pagination-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms both;
+}
+
+@keyframes cancel-pagination-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cancel-pagination__trigger {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space--4, 4px);
-  padding: var(--space--8, 8px);
+  gap: var(--space--16, 16px);
+  padding: var(--space--4, 4px);
+  border-radius: var(--border-radius--small, 4px);
+  cursor: pointer;
+  outline: none;
+}
+
+.cancel-pagination__trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--color--ocean-green-600, #008561);
+}
+
+.cancel-pagination__trigger--expanded {
+  cursor: default;
+  padding-bottom: var(--space--4, 4px);
+}
+
+.cancel-pagination__divider {
+  border: 0;
+  border-top: 1px solid var(--color--petroleum-100, #C8CCD3);
+  width: 100%;
+}
+
+.cancel-pagination__label {
+  color: var(--color--petroleum-700, #2E3742);
+  font-size: var(--font-size--medium, 16px);
+  font-weight: var(--font-weight--semi-bold, 600);
+  font-family: var(--font--pattern, 'Roboto');
+  white-space: nowrap;
+}
+
+.cancel-pagination__expanded {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--8, 8px);
+}
+
+.cancel-pagination__message {
+  color: var(--color--petroleum-500, #4A5567);
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  font-weight: var(--font-weight--regular, 400);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.cancel-pagination__question {
+  color: var(--color--petroleum-700, #2E3742);
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  font-weight: var(--font-weight--semi-bold, 600);
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+.cancel-pagination__checkbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space--8, 8px);
+  color: var(--color--petroleum-700, #2E3742);
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  cursor: pointer;
+}
+
+.cancel-pagination__checkbox input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--color--ocean-green-600, #008561);
+}
+
+.cancel-pagination__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: var(--space--8, 8px);
+  padding-top: var(--space--4, 4px);
 }
 
 .spin {
@@ -85,6 +198,8 @@
   animation-duration: 5000ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
+
+  --ez-icon--color: var(--color--ocean-green-600, #008561);
 }
 
 @keyframes spin {
@@ -97,15 +212,6 @@
   }
 }
 
-.cancel-pagination-btn {
-  color: var(--color--red-600, #BD0025);
-  font-size: var(--font-size--medium, 16px);
-  font-weight: var(--font-weight--semi-bold, 600);
-  font-family: var(--font--pattern, 'Roboto');
-  text-wrap: nowrap;
-  cursor: pointer;
-}
-
 .pagination-text-right {
   flex-direction: row-reverse;
 }

package/dist/collection/components/ez-grid-pagination/ez-grid-pagination.js

@@ -1,12 +1,39 @@
 import { Host, h } from '@stencil/core';
 import initI18n from '../../utils/i18n';
 import { Action, ElementIDUtils } from '@sankhyalabs/core';
+import { ASK_CANCEL_PAGINATION_EVENT, } from './ez-grid-pagination.model';
 export class EzGridPagination {
   constructor() {
     this._dataUnitInitialized = false;
+    this._pendingResolve = null;
+    this._collapseTimeout = null;
+    this._suppressedUntilNextAsk = false;
+    this._hoverEnabled = false;
+    this.handleLoadAllChange = (event) => {
+      const target = event.target;
+      this.loadAll = target.checked;
+    };
+    this.handleAskCancelPagination = (event) => {
+      const detail = event.detail;
+      if (!detail || !this.dataUnit)
+        return;
+      if (detail.dataUnitName !== this.dataUnit.name)
+        return;
+      this.resolvePending('CONTINUE');
+      this._pendingResolve = detail.resolve;
+      this._suppressedUntilNextAsk = false;
+      this._hoverEnabled = true;
+      this.loadAll = false;
+      const popover = this._cancelPaginationPopoverElement;
+      if (popover && !popover.opened && typeof popover.showAbove === 'function') {
+        popover.showAbove({ bottom: '4px', right: '4px' });
+      }
+    };
     this.paginationInfo = undefined;
     this.leftButtonDisabled = undefined;
     this.rightButtonDisabled = undefined;
+    this.expanded = false;
+    this.loadAll = false;
     this.paginationCounterMode = 'auto';
     this.dataUnit = undefined;
     this.paginationTextPosition = 'left';
@@ -94,22 +121,54 @@ export class EzGridPagination {
     this.setStatusButtonPagination();
     this.pageChange.emit(direction);
   }
-  async handleCancelPagination() {
-    var _a;
+  resolvePending(response) {
+    if (!this._pendingResolve)
+      return;
+    const resolve = this._pendingResolve;
+    this._pendingResolve = null;
+    resolve(response);
+  }
+  async handleCancelAction() {
     if (!this.dataUnit)
       return;
     this.dataUnit.cancelPagination = true;
-    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
+    this.resolvePending('CANCEL');
+    this._suppressedUntilNextAsk = true;
+    this.collapse();
+    const popover = this._cancelPaginationPopoverElement;
+    if (popover && typeof popover.hide === 'function') {
+      await popover.hide();
+    }
+  }
+  async handleContinueAction() {
+    const response = this.loadAll ? 'LOAD_ALL' : 'CONTINUE';
+    this.resolvePending(response);
+    this._suppressedUntilNextAsk = true;
+    this.loadAll = false;
+    this.collapse();
+    const popover = this._cancelPaginationPopoverElement;
+    if (popover && typeof popover.hide === 'function') {
+      await popover.hide();
+    }
   }
   handleShowCancelPagination() {
-    var _a, _b, _c;
+    const popover = this._cancelPaginationPopoverElement;
     if (!this.hasToShowCancelPagination()) {
-      (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide();
+      if (this._pendingResolve)
+        return;
+      if (popover && typeof popover.hide === 'function')
+        popover.hide();
+      this._hoverEnabled = false;
+      this.collapse();
       return;
     }
-    if ((_b = this._cancelPaginationPopoverElement) === null || _b === void 0 ? void 0 : _b.opened)
+    if (this._suppressedUntilNextAsk)
       return;
-    (_c = this._cancelPaginationPopoverElement) === null || _c === void 0 ? void 0 : _c.show('15px');
+    if (popover === null || popover === void 0 ? void 0 : popover.opened)
+      return;
+    if (popover && typeof popover.showAbove === 'function') {
+      popover.showAbove({ bottom: '4px', right: '4px' });
+    }
   }
   hasToShowCancelPagination() {
     if (!this.dataUnit || !this.paginationInfo)
@@ -117,6 +176,30 @@ export class EzGridPagination {
     const hasMore = this.paginationInfo.total === undefined;
     return !this.dataUnit.cancelPagination && hasMore && this.paginationInfo.count > this.dataUnit.pageSize;
   }
+  expand() {
+    if (!this._hoverEnabled)
+      return;
+    if (this._collapseTimeout) {
+      clearTimeout(this._collapseTimeout);
+      this._collapseTimeout = null;
+    }
+    this.expanded = true;
+  }
+  collapse() {
+    if (this._collapseTimeout) {
+      clearTimeout(this._collapseTimeout);
+      this._collapseTimeout = null;
+    }
+    this.expanded = false;
+  }
+  scheduleCollapse() {
+    if (this._collapseTimeout)
+      clearTimeout(this._collapseTimeout);
+    this._collapseTimeout = setTimeout(() => {
+      this._collapseTimeout = null;
+      this.expanded = false;
+    }, 120);
+  }
   setPaginationInfo() {
     if (!this.dataUnit) {
       this.paginationInfo = null;
@@ -169,10 +252,21 @@ export class EzGridPagination {
       ElementIDUtils.addIDInfo(this._element);
     }
   }
+  renderCollapsedTrigger() {
+    return (h("div", { class: "cancel-pagination__trigger" }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { class: "cancel-pagination__label" }, this.i18n('ez-grid-pagination.paginationLabel'))));
+  }
+  renderExpandedContent() {
+    return (h("div", { class: "cancel-pagination__expanded", role: "group", "aria-label": this.i18n('ez-grid-pagination.paginationLabel') }, h("div", { class: "cancel-pagination__trigger cancel-pagination__trigger--expanded" }, h("ez-icon", { iconName: "ellipsis-circle", size: "large", class: "spin" }), h("span", { class: "cancel-pagination__label" }, this.i18n('ez-grid-pagination.paginationLabel'))), h("hr", { class: "cancel-pagination__divider", "aria-hidden": "true" }), h("p", { class: "cancel-pagination__message" }, this.i18n('ez-grid-pagination.largeLoad.line1')), h("p", { class: "cancel-pagination__message" }, this.i18n('ez-grid-pagination.largeLoad.line2')), h("p", { class: "cancel-pagination__question" }, this.i18n('ez-grid-pagination.largeLoad.line3')), h("label", { class: "cancel-pagination__checkbox" }, h("input", { type: "checkbox", checked: this.loadAll, onChange: this.handleLoadAllChange }), h("span", null, this.i18n('ez-grid-pagination.largeLoad.loadAll'))), h("div", { class: "cancel-pagination__actions" }, h("ez-button", { class: "cancel-pagination__continue-btn", label: this.i18n('ez-grid-pagination.largeLoad.continue'), size: "small", onClick: () => this.handleContinueAction() }), h("ez-button", { class: "cancel-pagination__cancel-btn ez-button--primary", label: this.i18n('ez-grid-pagination.largeLoad.cancel'), size: "small", onClick: () => this.handleCancelAction() }))));
+  }
   renderCancelPagination() {
-    return (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": "none", autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, this.i18n('ez-grid-pagination.cancelPagination')))));
+    return (h("ez-popover", { class: "cancel-pagination__popover", ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": "none", autoClose: false }, h("div", { class: {
+        'cancel-pagination': true,
+        'cancel-pagination--expanded': this.expanded,
+      }, onMouseEnter: () => this.expand(), onMouseLeave: () => this.scheduleCollapse() }, this.expanded ? this.renderExpandedContent() : this.renderCollapsedTrigger())));
   }
   async connectedCallback() {
+    this._askCancelListenerBound = this.handleAskCancelPagination.bind(this);
+    document.addEventListener(ASK_CANCEL_PAGINATION_EVENT, this._askCancelListenerBound);
     this.i18n = await initI18n();
     this.initializeDataUnit();
   }
@@ -180,6 +274,15 @@ export class EzGridPagination {
     this.addInfoId();
   }
   disconnectedCallback() {
+    if (this._askCancelListenerBound) {
+      document.removeEventListener(ASK_CANCEL_PAGINATION_EVENT, this._askCancelListenerBound);
+      this._askCancelListenerBound = undefined;
+    }
+    if (this._collapseTimeout) {
+      clearTimeout(this._collapseTimeout);
+      this._collapseTimeout = null;
+    }
+    this.resolvePending('CONTINUE');
     if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
       this.dataUnit.unsubscribe(this._dataUnitObserverBound);
     }
@@ -307,7 +410,9 @@ export class EzGridPagination {
     return {
       "paginationInfo": {},
       "leftButtonDisabled": {},
-      "rightButtonDisabled": {}
+      "rightButtonDisabled": {},
+      "expanded": {},
+      "loadAll": {}
     };
   }
   static get events() {
@@ -326,7 +431,8 @@ export class EzGridPagination {
           "resolved": "\"next\" | \"previous\"",
           "references": {
             "PageChangeDirection": {
-              "location": "local"
+              "location": "import",
+              "path": "./ez-grid-pagination.model"
             }
           }
         }

package/dist/collection/components/ez-grid-pagination/ez-grid-pagination.model.js

@@ -0,0 +1 @@
+export const ASK_CANCEL_PAGINATION_EVENT = 'ez-grid-pagination:ask-cancel';