feat/pagination v2 (#58)

* feat(pagination): add capacity and tooltip on arrow

Author: dpellier

packages/libraries/cdk/src/components/surface/ocdk-surface-controller.ts

@@ -54,17 +54,15 @@ export class OcdkSurfaceController<StrategyConfig = any> {
   private animation = OcdkSurfaceDefaultConfig.DEFAULT_ANIMATION;
   private animationRequestId = 0;
   private closeAnimationEndTimerId = 0;
-  private component: OcdkSurface;
   /** config of the surface */
   private config: OcdkSurfaceConfig = OcdkSurfaceDefaultConfig
   private customAnchorMargin?: OcdkSurfaceDistance;
   private customCornerPoints?: OcdkSurfaceCornerPoints;
   private dimensions!: OcdkSurfaceDimensions;
   private isSurfaceOpen = false;
   private itemHeight = 0;
-  private itemWidth = 0;
   private maxDimensions!: OcdkSurfaceMaxDimensions;
-  private minVisibleItem = 1;
+  private MIN_VISIBLE_ITEM = 1;
   // private measurements?: OcdkAutoLayoutMeasurements;
   private openAnimationEndTimerId = 0;
   private strategy: OcdkSurfaceStrategyDefiner<StrategyConfig> = OcdkSurfaceDefaultConfig.POSITION_STRATEGY.strategy;
@@ -75,7 +73,6 @@ export class OcdkSurfaceController<StrategyConfig = any> {
   private logger = new OcdkLogger(`OcdkSurface #${this.uniqueId}`);
 
   constructor(component: OcdkSurface) {
-    this.component = component;
     this.adapter = component.adapter;
     this.init();
   }
@@ -157,7 +154,7 @@ export class OcdkSurfaceController<StrategyConfig = any> {
   }
 
   open(): void {
-    this.logger.log('[open]', { opened: this.component.opened });
+    this.logger.log('[open]', { opened: this.isSurfaceOpen });
     if (this.isSurfaceOpen) {
       return;
     }
@@ -172,9 +169,9 @@ export class OcdkSurfaceController<StrategyConfig = any> {
         this.dimensions = this.adapter.getInnerDimensions();
         this.maxDimensions = this.adapter.getMaxDimensions();
         this.itemHeight = this.adapter.autoDetectItemHeight();
-        this.itemWidth = this.adapter.autoDetectItemWidth();
         this.autoPosition();
         this.adapter.addClass(ocdkSurfaceCssClasses.OPEN);
+        this.logger.log('[open]', { dimensions: this.dimensions });
         const duration = this.config.ANIMATIONS[ this.animation ].TRANSITION_CLOSE_DURATION;
         this.logger.log('[open]', 'remove css in', duration);
         this.openAnimationEndTimerId = window.setTimeout(
@@ -242,12 +239,6 @@ export class OcdkSurfaceController<StrategyConfig = any> {
   }
 
   private autoPosition() {
-    this.logger.log('[autoposition]');
-    const cornerPoints = this.getCornerPoints();
-    const wantedAnchorCorner = cornerPoints.anchor;
-    const wantedOriginCorner = cornerPoints.origin;
-    this.logger.log('[autoposition]', { wantedAnchorCorner });
-    this.logger.log('[autoposition]', { wantedOriginCorner });
 
     const normalizedCornerPoints = this.getNormalizedCorners();
 
@@ -340,9 +331,8 @@ export class OcdkSurfaceController<StrategyConfig = any> {
     this.logger.log('[autoposition]', 'setPosition', { position });
     this.adapter.setPosition(position);
     this.adapter.setMaxHeight(maxSurfaceHeight ? maxSurfaceHeight + 'px' : '');
-    this.adapter.setMinHeight(this.itemHeight ? (this.itemHeight * this.minVisibleItem) + 'px' : '');
-    this.adapter.setMaxWidth(maxSurfaceWidth ? maxSurfaceWidth + 'px' : '');
-    this.adapter.setMinWidth(this.itemWidth ? (this.itemWidth * this.minVisibleItem) + 'px' : '');
+    this.adapter.setMinHeight(this.itemHeight ? (this.itemHeight * this.MIN_VISIBLE_ITEM) + 'px' : '');
+    // this.adapter.setMaxWidth(maxSurfaceWidth ? maxSurfaceWidth + 'px' : '');
 
     // If it is opened from the top then add is-open-below class
     if (!this.hasBit(originCorner, OcdkSurfaceCornerBit.BOTTOM)) {

packages/libraries/cdk/src/components/surface/ocdk-surface.ts

@@ -25,7 +25,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
 
   constructor() {
     super();
-    this.logger.log('constructor');
     this.adapter = this.getDefaultAdapter();
 
     this.controller = new OcdkSurfaceController(this);
@@ -73,7 +72,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * @param animated - have to animated or not
    */
   set animated(animated: boolean) {
-    this.logger.log('animated', animated);
     this.processAnimated(animated, true);
   }
 
@@ -92,7 +90,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * @param name - name of the wanted animation
    */
   set animation(name: OcdkSurfaceAnimation | 'none' | undefined) {
-    this.logger.log('animation', name);
     this.processAnimation(name, true);
   }
 
@@ -106,7 +103,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * @param corners - tuple of corner references (anchor, origin)
    */
   set corners(corners: [OcdkSurfaceCorner, OcdkSurfaceCorner]) {
-    this.logger.log('corners', corners);
     this.controller.setCornerPoints({ anchor: corners[ 0 ], origin: corners[ 1 ] });
   }
 
@@ -119,7 +115,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * @param opened - is opened or not
    */
   set opened(opened: boolean) {
-    this.logger.log('opened', opened);
     if (opened) {
       this.setAttribute('opened', '');
       this.controller.open();
@@ -135,8 +130,7 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * @param oldValue - previous value
    * @param newValue - current value
    */
-  attributeChangedCallback(name: any, oldValue: any, newValue: any | null) {
-    this.logger.log('oldValue', { name, oldValue, newValue });
+  attributeChangedCallback(name: any, _oldValue: any, newValue: any | null) {
     switch (name) {
       case 'animation':
         this.processAnimation(newValue);
@@ -158,7 +152,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * Hide the `surface` overlay.
    */
   close() {
-    this.logger.log('close');
     this.opened = false;
   }
 
@@ -171,10 +164,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
       this.logger.log('[connectedCallback]', 'set anchor', { anchorElement: this.anchorElement });
     }
 
-    const slot = this.shadowRoot?.querySelector('slot')
-    if (slot) {
-      this.logger.log(slot.assignedElements());
-    }
 
     this.animated = this.animation.toLowerCase() === 'none' ? false : true;
     this.animation = this.animation.toLowerCase() as OcdkSurfaceAnimation;
@@ -189,7 +178,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * Display the `surface` overlay and display it with the selected position strategy.
    */
   open(): void {
-    this.logger.log('open');
     this.opened = true;
   }
 
@@ -207,7 +195,6 @@ export class OcdkSurface extends HTMLElement implements OcdkSurfaceBehaviour {
    * @param element - html element to set as the anchor
    */
   setAnchorElement(element: Element): void {
-    this.logger.log('[setAnchorElement]', { element });
     this.anchorElement = element;
   }
 

packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-tl.ts

@@ -38,7 +38,7 @@ export function ocdkSurfaceSymmetryBlTl(): OcdkSurfaceOnePositionStrategy<OcdkSu
         },
         appliers: {
           maxHeight: (opt) => opt.inspections.comfort.availableBottom,
-          maxWidth: (opt) => opt.measurements.surfaceSize.width,
+          maxWidth: (opt) => opt.inspections.comfort.availableRight,
           verticalOffset: (opt) => opt.measurements.anchorSize.height + opt.config.anchorMargin.bottom,
           verticalAlignment: 'top',
           horizontalOffset: () => 0,

packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-tr.ts

@@ -41,7 +41,7 @@ export function ocdkSurfaceSymmetryBrTr(): OcdkSurfaceOnePositionStrategy<OcdkSu
         },
         appliers: {
           maxHeight: (opt) => opt.inspections.comfort.availableBottom - opt.config.anchorMargin.bottom,
-          maxWidth: (opt) => opt.measurements.surfaceSize.width,
+          maxWidth: (opt) => opt.inspections.comfort.availableLeft,
           verticalOffset: (opt) => opt.measurements.anchorSize.height + opt.config.anchorMargin.bottom,
           verticalAlignment: 'top',
           horizontalOffset: () => 0,

packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-bl.ts

@@ -36,7 +36,7 @@ export function ocdkSurfaceSymmetryTlBl(): OcdkSurfaceOnePositionStrategy<OcdkSu
         },
         appliers: {
           maxHeight: (opt) => opt.inspections.comfort.availableTop,
-          maxWidth: (opt) => opt.measurements.surfaceSize.width,
+          maxWidth: (opt) => opt.inspections.comfort.availableRight,
           verticalOffset: (opt) => -opt.config.anchorMargin.top - opt.measurements.surfaceSize.height,
           verticalAlignment: 'top',
           horizontalOffset: () => 0,

packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-br.ts

@@ -39,7 +39,7 @@ export function ocdkSurfaceSymmetryTrBr(): OcdkSurfaceOnePositionStrategy<OcdkSu
         },
         appliers: {
           maxHeight: (opt) => opt.inspections.comfort.availableTop - opt.config.anchorMargin.top,
-          maxWidth: (opt) => opt.measurements.surfaceSize.width,
+          maxWidth: (opt) => opt.inspections.comfort.availableLeft,
           verticalOffset: (opt) => -opt.config.anchorMargin.top - opt.measurements.surfaceSize.height,
           verticalAlignment: 'top',
           horizontalOffset: () => 0,

packages/libraries/core/src/components/pagination/ods-pagination-attributes.ts

@@ -11,7 +11,19 @@ export interface OdsPaginationAttributes extends OdsComponentAttributes {
    */
   current: number;
   /**
-   * The total amount of pages
+   * The total number of items.
    */
-  total: number;
+  totalItems?: number;
+  /**
+   * The total amount of pages.
+   */
+  totalPages: number;
+  /**
+   * The label of the tooltip on the arrow previous
+   */
+  labelTooltipPrevious: string;
+  /**
+   * The label of the tooltip on the arrow next
+   */
+   labelTooltipNext: string;
 }