feat(ods.component.pagination): osds-pagination component

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): dynamic size and arrowSize

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): changing number of pages depending of current

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): dynamic page number depending on current

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): changing pages dynamically with buttons

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): adding setPageIndex method

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): page list, page selected, dynamic arrow

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): pagination attributes

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): adding pagination attributes, removing groups options

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): osds-pagination with arrows

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

feat(ods.component.pagination): osds-pagination component init

ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>

packages/libraries/core/src/components/pagination/pagination/ods-pagination-arrow-size.ts

@@ -0,0 +1,12 @@
+export enum OdsPaginationArrowSize {
+  xxs = 'xxs',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+}
+
+export type OdsPaginationArrowSizeUnion = `${OdsPaginationArrowSize}`;
+
+export const OdsPaginationArrowSizeList = Object.keys(OdsPaginationArrowSize).map(key => OdsPaginationArrowSize[key as OdsPaginationArrowSizeUnion]);

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

@@ -0,0 +1,39 @@
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { OdsComponentAttributes } from '../../ods-component-attributes';
+import { OdsPaginationSize } from './ods-pagination-size';
+import { OdsPaginationArrowSize } from './ods-pagination-arrow-size';
+
+export interface OdsPaginationAttributes extends OdsComponentAttributes {
+  /**
+   * indicates if the select is entirely disabled.
+   * it means no interactions (hover, click, focus, etc)
+   */
+  disabled: boolean;
+  /**
+   * Its corresponding default current page. If no current page, it will be this page selected by default.
+   */
+  defaultCurrent?: any;
+  /**
+   * Its corresponding current page.
+   */
+  current: any;
+  /**
+   * The total amount of pages
+   */
+  totalPages: any;
+  /** full width or not: see component principles */
+  flex: boolean;
+  /** size: see component principles */
+  size: OdsPaginationSize;
+  /** arrowSize: see component principles */
+  arrowSize: OdsPaginationArrowSize;
+
+  /*
+   * color of the select input and his icon arrow.
+   * color is not yet customizable trough his attribute.
+   * for now, it is forced to primary color (internally)
+   * @experimental
+   */
+  /** the primary color of the theme */
+  color: OdsThemeColorIntent.primary;
+}

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

@@ -0,0 +1,29 @@
+import { OdsComponentController } from '../../ods-component-controller';
+import { OdsPaginationValidityState } from './ods-pagination-validity-state';
+import { OdsPagination } from './ods-pagination';
+
+/**
+ * common controller logic for select component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+export class OdsPaginationController extends OdsComponentController<OdsPagination> {
+  constructor(component: OdsPagination) {
+    super(component);
+  }
+
+  /**
+   * get the validity object properties of the component.
+   * it is based on the validity state of the vanilla select.
+   * in case of no vanilla select passed, it returns the default value for each property
+   */
+  getValidity(): OdsPaginationValidityState {
+    return {
+      valid: true,
+      invalid: false,
+      forbiddenValue: false,
+      valueMissing: false,
+      stepMismatch: false,
+      customError: false,
+    };
+  }
+}

packages/libraries/core/src/components/pagination/pagination/ods-pagination-create-default-ods-validity-state.ts

@@ -0,0 +1,12 @@
+import { OdsCreateDefaultOdsValidityState } from '../../../form/validation/ods-create-default-ods-validity-state';
+import { OdsPaginationValidityState } from './ods-pagination-validity-state';
+
+/**
+ * get a default `OdsValidityState`
+ */
+export function OdsPaginationCreateDefaultOdsValidityState(): OdsPaginationValidityState {
+  const defaultOne = OdsCreateDefaultOdsValidityState();
+  return {
+    ...defaultOne,
+  };
+}

packages/libraries/core/src/components/pagination/pagination/ods-pagination-current-change-event-detail.ts

@@ -0,0 +1,7 @@
+import { OdsValidityState } from '../../../form/validation/ods-validity-state';
+
+export interface OdsPaginationCurrentChangeEventDetail {
+  current: number;
+  oldCurrent?: number;
+  validity: OdsValidityState;
+}

packages/libraries/core/src/components/pagination/pagination/ods-pagination-current-change-event.ts

@@ -0,0 +1,3 @@
+import { OdsPaginationCurrentChangeEventDetail } from './ods-pagination-current-change-event-detail';
+
+export type OdsPaginationCurrentChangeEvent = CustomEvent<OdsPaginationCurrentChangeEventDetail>;

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

@@ -0,0 +1,22 @@
+// import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { OdsPaginationAttributes } from './ods-pagination-attributes';
+import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
+import { OdsPaginationSize } from './ods-pagination-size';
+import { OdsPaginationArrowSize } from './ods-pagination-arrow-size';
+
+/**
+ * default attribute values of select
+ */
+export const odsPaginationDefaultAttributesDoc: OdsPaginationAttributes = {
+  disabled: false,
+
+  defaultCurrent: 1,
+  current: 1,
+  totalPages: 1,
+  color: OdsThemeColorIntent.primary,
+  size: OdsPaginationSize.sm,
+  arrowSize: OdsPaginationArrowSize.sm,
+  flex: false,
+} as const;
+
+export const odsPaginationDefaultAttributes = odsPaginationDefaultAttributesDoc as unknown as OdsPaginationAttributes;

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

@@ -0,0 +1,17 @@
+import { OdsComponentEvents } from '../../ods-component-events';
+import { OdsPaginationCurrentChangeEventDetail } from './ods-pagination-current-change-event-detail';
+
+export interface OdsPaginationEvents extends OdsComponentEvents {
+  /**
+   * Emitted when the value has changed
+   */
+  odsCurrentChange: OdsPaginationCurrentChangeEventDetail;
+  /**
+   * Event triggered on select focus
+   */
+  odsFocus: void;
+  /**
+   * Event triggered on select blur
+   */
+  odsBlur: void;
+}

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

@@ -0,0 +1,36 @@
+import { OdsComponentMethods } from '../../ods-component-methods';
+import { OdsPaginationValidityState } from './ods-pagination-validity-state';
+
+export interface OdsPaginationMethods extends OdsComponentMethods {
+  /**
+   * reset the value to the initial one (default value)
+   */
+  reset(): void;
+
+  /**
+   * erase the current selection
+   */
+  clear(): void;
+
+  /**
+   * check that the select is valid or not.
+   * In case of required field, the validation will check the entered value
+   * and set the field in error if it is not fulfilled
+   */
+  validate(): OdsPaginationValidityState;
+
+  /**
+   * focus the element
+   */
+  setFocus(): void;
+
+  /**
+   * set page index on the component
+   */
+  setPageIndex(value: number): void;
+
+  /**
+   * get the validity state
+   */
+  getValidity(): OdsPaginationValidityState;
+}

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

@@ -0,0 +1,12 @@
+export enum OdsPaginationSize {
+  xxs = 'xxs',
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+}
+
+export type OdsPaginationSizeUnion = `${OdsPaginationSize}`;
+
+export const OdsPaginationSizeList = Object.keys(OdsPaginationSize).map(key => OdsPaginationSize[key as OdsPaginationSizeUnion]);

packages/libraries/core/src/components/pagination/pagination/ods-pagination-validity-state.ts

@@ -0,0 +1,3 @@
+import { OdsValidityState } from '../../../form/validation/ods-validity-state';
+
+export interface OdsPaginationValidityState extends OdsValidityState {}

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

@@ -0,0 +1,17 @@
+import { OdsComponentGenericMethods } from '../../ods-component-generic-methods';
+import { OdsComponentGenericEvents } from '../../ods-component-generic-events';
+import { OdsComponent } from '../../ods-component';
+import { OdsPaginationMethods } from './ods-pagination-methods';
+import { OdsPaginationEvents } from './ods-pagination-events';
+import { OdsPaginationAttributes } from './ods-pagination-attributes';
+import { OdsPaginationController } from './ods-pagination-controller';
+
+/**
+ * interface description of all implementation of `ods-select-option`.
+ * each implementation must have defined events, methods, attributes
+ * and one controller for the common behavior logic
+ */
+export type OdsPagination<
+  ComponentMethods extends OdsComponentGenericMethods<OdsPaginationMethods> = OdsComponentGenericMethods<OdsPaginationMethods>,
+  ComponentEvents extends OdsComponentGenericEvents<OdsPaginationEvents> = OdsComponentGenericEvents<OdsPaginationEvents>,
+> = OdsComponent<ComponentMethods, ComponentEvents, OdsPaginationAttributes, OdsPaginationController>;

packages/libraries/core/src/components/pagination/pagination/public-api.ts

@@ -0,0 +1,12 @@
+export * from './ods-pagination';
+export * from './ods-pagination-attributes';
+export * from './ods-pagination-controller';
+export * from './ods-pagination-create-default-ods-validity-state';
+export * from './ods-pagination-default-attributes';
+export * from './ods-pagination-events';
+export * from './ods-pagination-methods';
+export * from './ods-pagination-size';
+export * from './ods-pagination-arrow-size';
+export * from './ods-pagination-validity-state';
+export * from './ods-pagination-current-change-event';
+export * from './ods-pagination-current-change-event-detail';

packages/libraries/core/src/components/pagination/public-api.ts

@@ -0,0 +1 @@
+export * from './pagination/public-api';

packages/libraries/core/src/components/public-api.ts

@@ -21,6 +21,7 @@ export * from './icon/public-api';
 export * from './input/public-api';
 export * from './link/public-api';
 export * from './location-tile/public-api';
+export * from './pagination/public-api';
 export * from './message/public-api';
 export * from './quantity/public-api';
 export * from './radio/public-api';

packages/stencil/components/pagination/.gitignore

@@ -0,0 +1,33 @@
+dist/
+custom-elements/
+custom-elements-bundle/
+www/
+loader/
+docs-api/
+src/components.d.ts
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+screenshot/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+src/**/readme.md

packages/stencil/components/pagination/.npmignore

@@ -0,0 +1,4 @@
+!dist/
+!loader/
+!docs-api/
+src/

packages/stencil/components/pagination/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### Features
+
+**@ovhcloud/ods-stencil-pagination:** add pagination component v1.

packages/stencil/components/pagination/docs/osds-pagination/events/usage.events.mdx

@@ -0,0 +1,15 @@
+import OdsBlur from '@ovhcloud/ods-stencil-paginaaiontion/docs/osds-pagination/events/usage.odsBlur.mdx';
+import OdsFocus from '@ovhcloud/ods-stencil-paginationtion/docs/osds-pagination/events/usage.odsFocus.mdx';
+import OdsCurrentChange from '@ovhcloud/ods-stencil-paginationtion/docs/osds-pagination/events/usage.odsCurrentChange.mdx';
+
+#### OdsBlur
+
+<OdsBlur />
+
+#### OdsFocus
+
+<OdsFocus />
+
+#### OdsCurrentChange
+
+<OdsCurrentChange />

packages/stencil/components/pagination/docs/osds-pagination/events/usage.odsBlur.mdx

@@ -0,0 +1,17 @@
+```html
+<osds-pagination id="myOdsPagination">
+  <osds-pagination-option value="1">Value 1</osds-pagination-option>
+  <osds-pagination-option value="2">Value 2</osds-pagination-option>
+  <osds-pagination-option value="3">Value 3</osds-pagination-option>
+</osds-pagination>
+```
+
+```typescript
+// vanilla typescript
+const odsPagination = document.queryPaginationor('osds-pagination#myOdsPagination');
+
+odsPagination.addEventListener('odsBlur', event => {
+  const evt = event as CustomEvent<void>;
+  console.log('odsBlur event', evt.detail);
+});
+```

packages/stencil/components/pagination/docs/osds-pagination/events/usage.odsFocus.mdx

@@ -0,0 +1,17 @@
+```html
+<osds-pagination id="myOdsPagination">
+  <osds-pagination-option value="1">Value 1</osds-pagination-option>
+  <osds-pagination-option value="2">Value 2</osds-pagination-option>
+  <osds-pagination-option value="3">Value 3</osds-pagination-option>
+</osds-pagination>
+```
+
+```typescript
+// vanilla typescript
+const odsPagination = document.queryPaginationor('osds-pagination#myOdsPagination');
+
+odsPagination.addEventListener('odsFocus', event => {
+  const evt = event as CustomEvent<void>;
+  console.log('odsFocus event', evt.detail);
+});
+```

packages/stencil/components/pagination/docs/osds-pagination/events/usage.odsValueChange.mdx

@@ -0,0 +1,19 @@
+```html
+<osds-pagination id="myOdsPagination">
+  <osds-pagination-option value="1">Value 1</osds-pagination-option>
+  <osds-pagination-option value="2">Value 2</osds-pagination-option>
+  <osds-pagination-option value="3">Value 3</osds-pagination-option>
+</osds-pagination>
+```
+
+```typescript
+// vanilla typescript
+import { OdsPaginationCurrentChangeEvent } from '@ovhcloud/ods-core';
+
+const odsPagination = document.queryPaginationor('osds-pagination#myOdsPagination');
+
+odsPagination.addEventListener('odsCurrentChange', event => {
+  const evt = event as OdsPaginationCurrentChangeEvent;
+  console.log('odsCurrentChange event', evt.detail);
+});
+```

packages/stencil/components/pagination/docs/osds-pagination/methods/usage.clear.mdx

@@ -0,0 +1,18 @@
+```html
+<osds-pagination id="myOdsPagination">
+  <osds-pagination-option value="1">Value 1</osds-pagination-option>
+  <osds-pagination-option value="2">Value 2</osds-pagination-option>
+  <osds-pagination-option value="3">Value 3</osds-pagination-option>
+</osds-pagination>
+```
+
+```typescript
+// vanilla typescript
+const odsPagination = document.queryPaginationor('osds-pagination#myOdsPagination');
+
+async function componentOnLoad() {
+  await customElements.whenDefined('osds-pagination');
+  odsPagination.clear();
+}
+componentOnLoad();
+```