feat(clipboard): add tooltip message for confirmation

packages/cdk/dev/src/components/surface/ocdk-surface-basic-example/ocdk-surface-basic-position.ts

@@ -9,4 +9,6 @@ export const OcdkSurfaceBasicPositionList: string[] = [
   'TOP_RIGHT BOTTOM_RIGHT',
   'BOTTOM_CENTER TOP_CENTER',
   'TOP_CENTER BOTTOM_CENTER',
+  'CENTER_LEFT CENTER_RIGHT',
+  'CENTER_RIGHT CENTER_LEFT',
 ];

packages/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-example.tsx

@@ -115,6 +115,12 @@ export class OcdkSurfaceTooltipExample {
       case OcdkSurfaceTooltipPosition.TOP_CENTER:
         this.surface.setCornerPoints({ anchor: OcdkSurfaceCorner.TOP_CENTER, origin: OcdkSurfaceCorner.BOTTOM_CENTER });
         break;
+      case OcdkSurfaceTooltipPosition.CENTER_LEFT:
+        this.surface.setCornerPoints({ anchor: OcdkSurfaceCorner.CENTER_LEFT, origin: OcdkSurfaceCorner.CENTER_RIGHT });
+        break;
+      case OcdkSurfaceTooltipPosition.CENTER_RIGHT:
+        this.surface.setCornerPoints({ anchor: OcdkSurfaceCorner.CENTER_RIGHT, origin: OcdkSurfaceCorner.CENTER_LEFT });
+        break;
     }
 
   }

packages/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-position.ts

@@ -5,6 +5,8 @@ export enum OcdkSurfaceTooltipPosition {
   RIGHT = 'RIGHT',
   BOTTOM_CENTER = 'BOTTOM_CENTER',
   TOP_CENTER = 'TOP_CENTER',
+  CENTER_LEFT = 'CENTER_LEFT',
+  CENTER_RIGHT = 'CENTER_RIGHT',
 }
 
 export type OcdkSurfaceTooltipPositionUnion = `${OcdkSurfaceTooltipPosition}`;

packages/cdk/dev/src/index.html

@@ -256,7 +256,7 @@ <h3>tooltip example</h3>
     </ocdk-surface-tooltip-example>
   </div>
 
-  <h3>centered surface tooltip example</h3>
+  <h3>horizontal centered surface tooltip example</h3>
   <div class="my-form-field">
     <ocdk-surface-tooltip-example value="top_center positioning" position="top_center">
       <button>tooltip at top center</button>
@@ -266,6 +266,16 @@ <h3>centered surface tooltip example</h3>
     </ocdk-surface-tooltip-example>
   </div>
 
+  <h3>vertical centered surface tooltip example</h3>
+  <div class="my-form-field">
+    <ocdk-surface-tooltip-example value="center_right positioning" position="center_right">
+      <button>tooltip at center_right</button>
+    </ocdk-surface-tooltip-example>
+    <ocdk-surface-tooltip-example value="center_left positioning" position="center_left">
+      <button>tooltip at center_left</button>
+    </ocdk-surface-tooltip-example>
+  </div>
+
 </div>
 <div id="overlay-post-content-1"></div>
 

packages/cdk/dev/src/www.ts

@@ -1,4 +1,4 @@
-import { Ods } from '@ovhcloud/ods-core';
+import { Ods } from '@ovhcloud/ods-common-core';
 import { OcdkSurface, ocdkDefineCustomElements, OcdkSurfaceCorner } from '@ovhcloud/ods-cdk';
 import {
   OcdkSurfaceCustomStrategyExample

packages/cdk/src/components/surface/core/ocdk-surface-corner.ts

@@ -22,6 +22,8 @@ export enum OcdkSurfaceCorner {
   BOTTOM_START = OcdkSurfaceCornerBit.BOTTOM | OcdkSurfaceCornerBit.FLIP_RTL, // tslint:disable-line:no-bitwise
   /** 13 */
   BOTTOM_END = OcdkSurfaceCornerBit.BOTTOM | OcdkSurfaceCornerBit.RIGHT | OcdkSurfaceCornerBit.FLIP_RTL, // tslint:disable-line:no-bitwise
+  CENTER_LEFT = 6,
+  CENTER_RIGHT = 7,
 }
 
 export const OcdkSurfaceCornerNameList = ocdkGetEnumNames(OcdkSurfaceCorner);

packages/cdk/src/components/surface/core/ocdk-surface-normalized-corner.ts

@@ -13,4 +13,6 @@ export enum OcdkSurfaceNormalizedCorner {
   BOTTOM_RIGHT = OcdkSurfaceCornerBit.BOTTOM | OcdkSurfaceCornerBit.RIGHT, // tslint:disable-line:no-bitwise
   /** 3 */
   BOTTOM_CENTER = 3,
+  CENTER_LEFT = 6,
+  CENTER_RIGHT = 7,
 }

packages/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry-strategy.ts

@@ -11,6 +11,8 @@ import { ocdkSurfaceSymmetryTrBr } from './ocdk-surface-symmetry.tr-br';
 import { ocdkSurfaceSymmetryTlTr } from './ocdk-surface-symmetry.tl-tr';
 import { ocdkSurfaceSymmetryTrTl } from './ocdk-surface-symmetry.tr-tl';
 import { ocdkSurfaceSymmetryTcBc } from './ocdk-surface-symmetry.tc-bc';
+import { ocdkSurfaceSymmetryClCr } from './ocdk-surface-symmetry.cl-cr';
+import { ocdkSurfaceSymmetryCrCl } from './ocdk-surface-symmetry.cr-cl';
 
 /**
  * global config to implement for the `symmetry` strategy
@@ -42,6 +44,10 @@ export class OcdkSurfaceSymmetryStrategy implements OcdkSurfaceStrategyDefiner<O
       ocdkSurfaceSymmetryTrTl(), // TopRight and TopLeft
       ocdkSurfaceSymmetryTlTr(),  // TopLeft and TopRight
       ocdkSurfaceSymmetryTcBc(),  // TopCenter and BottomCenter
+
+      // ### anchored at center,
+      ocdkSurfaceSymmetryClCr(), // CenterLeft and CenterRight
+      ocdkSurfaceSymmetryCrCl(), // CenterRight and CenterLeft
     ];
   }
 

packages/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.cl-cr.ts

@@ -0,0 +1,134 @@
+import { OcdkSurfaceSymmetryConfig } from './ocdk-surface-symmetry-strategy';
+import { OcdkSurfaceNormalizedCorner } from '../../core/ocdk-surface-normalized-corner';
+import { OcdkLogger } from '../../../../logger/ocdk-logger';
+import { OcdkSurfaceSymmetryStrategyHelpers } from './ocdk-surface-symmetry-strategy.helpers';
+import { isOcdkSurfaceStrategyComputeResultPosition } from '../../core/system/ocdk-surface-strategy-compute-result-position';
+import { OcdkSurfaceOnePositionStrategy } from '../../core/ocdk-surface-one-position-strategy';
+
+/**
+ * ```
+ *   +-----------+
+ *   |           |  +-----anchor-----+
+ *   |           o  o                |
+ *   |           |  +----------------+
+ *   +--surface--+
+ *
+ *    o = normalized corner
+ *    x = reference for the position offset (at top/left - for verticalAlignment/horizontalAlignment)
+ * ```
+ */
+export function ocdkSurfaceSymmetryClCr(): OcdkSurfaceOnePositionStrategy<OcdkSurfaceSymmetryConfig> {
+  const loggerSymmetry = new OcdkLogger('ocdkSurfaceSymmetryClCr');
+  const helpers = OcdkSurfaceSymmetryStrategyHelpers;
+
+  return {
+    cornerPoints: {
+      anchor: OcdkSurfaceNormalizedCorner.CENTER_LEFT,
+      origin: OcdkSurfaceNormalizedCorner.CENTER_RIGHT },
+    STRATEGIES: {
+      standard: {
+        inspectors: {
+          comfort: {
+            availableTop: (opt) => opt.measurements.viewportDistance.top - opt.config.anchorMargin.top - opt.config.MARGIN_TO_EDGE_COMFORT,
+            availableBottom: (opt) => opt.measurements.viewportDistance.bottom - opt.config.anchorMargin.bottom - opt.config.MARGIN_TO_EDGE_COMFORT,
+            availableLeft: (opt) => opt.measurements.viewportDistance.left - opt.config.anchorMargin.left - opt.config.MARGIN_TO_EDGE_COMFORT,
+            availableRight: (opt) => opt.measurements.viewportDistance.right - opt.config.anchorMargin.right - opt.config.MARGIN_TO_EDGE_COMFORT,
+          }
+        },
+        appliers: {
+          maxHeight: (opt) => opt.inspections.comfort.availableTop,
+          maxWidth: (opt) => opt.measurements.surfaceSize.width,
+          verticalOffset: (opt) => (-opt.measurements.surfaceSize.height / 2) + (opt.measurements.anchorSize.height / 2),
+          verticalAlignment: 'bottom',
+          horizontalOffset: (opt) => -opt.config.anchorMargin.left - opt.measurements.surfaceSize.width,
+          horizontalAlignment: 'left'
+        }
+      },
+      FALLBACK: {
+        inspectors: {
+          comfort: {
+            availableLeft: (opt) => opt.measurements.viewportSize.width - 2 * opt.config.MARGIN_TO_EDGE_COMFORT,
+          },
+          limit: {
+            availableLeft: (opt) => opt.measurements.viewportSize.width - 2 * opt.config.MARGIN_TO_EDGE_LIMIT,
+          }
+        },
+        appliers: {
+          maxHeight: (opt) => opt.measurements.surfaceSize.height,
+          maxWidth: (opt) => helpers.symmetryFallbackMaxWidth(opt, opt.inspections.comfort.availableLeft, opt.inspections.limit.availableLeft, false),
+          verticalOffset: (opt) => (-opt.measurements.surfaceSize.height / 2) + (opt.measurements.anchorSize.height / 2),
+          verticalAlignment: 'top',
+          horizontalOffset: (opt) => helpers.symmetryFallbackHorizontalOffset(opt, opt.inspections.comfort.availableLeft, opt.inspections.limit.availableLeft, true),
+          horizontalAlignment: 'right',
+        }
+      },
+      COMPUTE: (opt) => {
+        loggerSymmetry.log('[COMPUTE] position CENTER_LEFT CENTER_RIGhT');
+        // no enough available space on left, trigger a position change to right instead
+        if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft) {
+          // already in a switch process and this new position isn't good enough, go to the fallback of the last strategy position
+          if (opt.switchFrom && isOcdkSurfaceStrategyComputeResultPosition(opt.switchFrom) && opt.switchFrom.position) {
+            loggerSymmetry.log('[COMPUTE] already switched off but no enough space: continue with the fallback of cr-cl', opt.switchFrom);
+            return opt.switchFrom.position.STRATEGIES.FALLBACK;
+          }
+          if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableTop) {
+            if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight && opt.inspections.comfort.availableBottom > (opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2) {
+              return {
+                cornerPoints: {
+                  anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT,
+                  origin: OcdkSurfaceNormalizedCorner.TOP_LEFT
+                }
+              };
+            }
+            return {
+              cornerPoints: {
+                anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT,
+                origin: OcdkSurfaceNormalizedCorner.TOP_LEFT
+              }
+            };
+          }
+          else if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableBottom) {
+            if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight) {
+              return {
+                cornerPoints: {
+                  anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT,
+                  origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT
+                }
+              };
+            }
+            return {
+              cornerPoints: {
+                anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT,
+                origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT
+              }
+            };
+          }
+          return {
+            cornerPoints: {
+              anchor: OcdkSurfaceNormalizedCorner.CENTER_RIGHT,
+              origin: OcdkSurfaceNormalizedCorner.CENTER_LEFT
+            }
+          };
+        }
+        else if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableTop) {
+          return {
+            cornerPoints: {
+              anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT,
+              origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT
+            }
+          };
+        }
+        else if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableBottom) {
+          return {
+            cornerPoints: {
+              anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT,
+              origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT
+            }
+          };
+        }
+        return; // no position switching: apply the current one
+      }
+
+    }
+  };
+}

packages/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.cr-cl.ts

@@ -0,0 +1,134 @@
+import { OcdkSurfaceSymmetryConfig } from './ocdk-surface-symmetry-strategy';
+import { OcdkSurfaceNormalizedCorner } from '../../core/ocdk-surface-normalized-corner';
+import { OcdkLogger } from '../../../../logger/ocdk-logger';
+import { OcdkSurfaceSymmetryStrategyHelpers } from './ocdk-surface-symmetry-strategy.helpers';
+import { isOcdkSurfaceStrategyComputeResultPosition } from '../../core/system/ocdk-surface-strategy-compute-result-position';
+import { OcdkSurfaceOnePositionStrategy } from '../../core/ocdk-surface-one-position-strategy';
+
+/**
+ * ```
+ *                       +-----------+
+ *    +-----anchor-----+ |           |
+ *    |                o o           |
+ *    +----------------+ |           |
+ *                       +--surface--+
+ *
+ *    o = normalized corner
+ *    x = reference for the position offset (at top/left - for verticalAlignment/horizontalAlignment)
+ * ```
+ */
+export function ocdkSurfaceSymmetryCrCl(): OcdkSurfaceOnePositionStrategy<OcdkSurfaceSymmetryConfig> {
+  const loggerSymmetry = new OcdkLogger('ocdkSurfaceSymmetryCrCl');
+  const helpers = OcdkSurfaceSymmetryStrategyHelpers;
+
+  return {
+    cornerPoints: {
+      anchor: OcdkSurfaceNormalizedCorner.CENTER_RIGHT,
+      origin: OcdkSurfaceNormalizedCorner.CENTER_LEFT },
+    STRATEGIES: {
+      standard: {
+        inspectors: {
+          comfort: {
+            availableTop: (opt) => opt.measurements.viewportDistance.top - opt.config.anchorMargin.top - opt.config.MARGIN_TO_EDGE_COMFORT,
+            availableBottom: (opt) => opt.measurements.viewportDistance.bottom - opt.config.anchorMargin.bottom - opt.config.MARGIN_TO_EDGE_COMFORT,
+            availableLeft: (opt) => opt.measurements.viewportDistance.left - opt.config.anchorMargin.left - opt.config.MARGIN_TO_EDGE_COMFORT,
+            availableRight: (opt) => opt.measurements.viewportDistance.right - opt.config.anchorMargin.right - opt.config.MARGIN_TO_EDGE_COMFORT,
+          }
+        },
+        appliers: {
+          maxHeight: (opt) => opt.inspections.comfort.availableTop,
+          maxWidth: (opt) => opt.measurements.surfaceSize.width,
+          verticalOffset: (opt) => (-opt.measurements.surfaceSize.height / 2) + (opt.measurements.anchorSize.height / 2),
+          verticalAlignment: 'top',
+          horizontalOffset: (opt) => -opt.config.anchorMargin.right - opt.measurements.surfaceSize.width,
+          horizontalAlignment: 'right'
+        }
+      },
+      FALLBACK: {
+        inspectors: {
+          comfort: {
+            availableRight: (opt) => opt.measurements.viewportSize.width - 2 * opt.config.MARGIN_TO_EDGE_COMFORT,
+          },
+          limit: {
+            availableRight: (opt) => opt.measurements.viewportSize.width - 2 * opt.config.MARGIN_TO_EDGE_LIMIT,
+          }
+        },
+        appliers: {
+          maxHeight: (opt) => helpers.symmetryFallbackMaxHeight(opt, opt.inspections.comfort.availableTop, opt.inspections.limit.availableTop, false),
+          maxWidth: (opt) => helpers.symmetryFallbackMaxWidth(opt, opt.inspections.comfort.availableRight, opt.inspections.limit.availableRight, false),
+          verticalOffset: (opt) => (-opt.measurements.surfaceSize.height / 2) + (opt.measurements.anchorSize.height / 2),
+          verticalAlignment: 'top',
+          horizontalOffset: (opt) => helpers.symmetryFallbackHorizontalOffset(opt, opt.inspections.comfort.availableRight, opt.inspections.limit.availableRight, true),
+          horizontalAlignment: 'left',
+        }
+      },
+      COMPUTE: (opt) => {
+        loggerSymmetry.log('[COMPUTE] position CENTER_RIGHT CENTER_LEFT');
+        // no enough available space on right, trigger a position change to left instead
+        if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight) {
+          // already in a switch process and this new position isn't good enough, go to the fallback of the last strategy position
+          if (opt.switchFrom && isOcdkSurfaceStrategyComputeResultPosition(opt.switchFrom) && opt.switchFrom.position) {
+            loggerSymmetry.log('[COMPUTE] already switched off but no enough space: continue with the fallback of cr-cl', opt.switchFrom);
+            return opt.switchFrom.position.STRATEGIES.FALLBACK;
+          }
+          if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableTop) {
+            if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft && opt.inspections.comfort.availableBottom > (opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2) {
+              return {
+                cornerPoints: {
+                  anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT,
+                  origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT
+                }
+              };
+            }
+            return {
+              cornerPoints: {
+                anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT,
+                origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT
+              }
+            };
+          }
+          else if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableBottom) {
+            if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft) {
+              return {
+                cornerPoints: {
+                  anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT,
+                  origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT
+                }
+              };
+            }
+            return {
+              cornerPoints: {
+                anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT,
+                origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT
+              }
+            };
+          }
+          return {
+            cornerPoints: {
+              anchor: OcdkSurfaceNormalizedCorner.CENTER_LEFT,
+              origin: OcdkSurfaceNormalizedCorner.CENTER_RIGHT
+            }
+          };
+        }
+        else if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableTop) {
+          return {
+            cornerPoints: {
+              anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT,
+              origin: OcdkSurfaceNormalizedCorner.TOP_LEFT
+            }
+          };
+        }
+        else if ((opt.measurements.surfaceSize.height - opt.measurements.anchorSize.height) / 2 > opt.inspections.comfort.availableBottom) {
+          return {
+            cornerPoints: {
+              anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT,
+              origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT
+            }
+          };
+        }
+        return; // no position switching: apply the current one
+      }
+
+    }
+  };
+}

packages/components/clipboard/package.json

@@ -35,6 +35,7 @@
     "test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests"
   },
   "dependencies": {
+    "@ovhcloud/ods-cdk": "16.1.1",
     "@ovhcloud/ods-common-core": "16.1.1",
     "@ovhcloud/ods-common-stencil": "16.1.1",
     "@ovhcloud/ods-common-theming": "16.1.1",