@mgdis/mg-components 5.11.1 → 5.12.1

package/dist/mg-components/styles/a11y.scss

@@ -4,7 +4,7 @@
 
 // Make content available only for screen reader
 // https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
-.sr-only {
+@mixin sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;
@@ -18,6 +18,10 @@
   white-space: nowrap !important;
 }
 
+.sr-only {
+  @include sr-only();
+}
+
 // Remove outline for non-keyboard :focus
 // https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 *:focus:not(:focus-visible) {

package/dist/mg-components/styles/typography.scss

@@ -73,3 +73,10 @@ a {
     text-decoration: none;
   }
 }
+
+/**
+* Small
+*/
+small {
+  font-size: 0.9em;
+}

package/dist/mg-components/variables.css

@@ -75,6 +75,9 @@
   --color-dark-l: 13.1%;
   --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
 
+  /* dark-5 */
+  --mg-color-dark-5-hsl: hsl(var(--color-dark-h), 9%, 96%);
+
   /* Light */
   /* white; (#ffffff) */
   /* rgb(255, 255, 255); */
@@ -259,4 +262,9 @@
   --mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);
   --mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);
   --mg-tabs-color-active-hsl: var(--mg-color-app-hsl);
+
+  /*
+    <mg-details>
+   */
+  --mg-details-spacing: 1.5rem;
 }

package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts

@@ -1,7 +1,3 @@
-/**
- * Icon SVG paths
- */
-export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */

package/dist/types/components/atoms/mg-icon/mg-icon.d.ts

@@ -34,11 +34,6 @@ export declare class MgIcon {
    * Component classes
    */
   classCollection: ClassList;
-  /**
-   * getIcon
-   * @returns icon html
-   */
-  private getIcon;
   /**
    * Method to set default varianStyle props
    * needeed has stencil doesn't know that props is mutated when updated in prop watcher

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -25,3 +25,7 @@ export declare const checkboxTypes: readonly ["checkbox", "multi"];
  * ChecboxType from checkbox types
  */
 export type CheckboxType = (typeof checkboxTypes)[number];
+/**
+ * Search value type
+ */
+export type SearchValueType = string;

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxType, CheckboxValue } from './mg-input-checkbox.conf';
+import { CheckboxItem, CheckboxType, CheckboxValue, SearchValueType } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox {
   /************
    * Internal *
@@ -10,6 +10,9 @@ export declare class MgInputCheckbox {
   private messages;
   private hasDisplayedError;
   private baseClassName;
+  private multiStart;
+  private searchStart;
+  private searchOffset;
   /**************
    * Decorators *
    **************/
@@ -62,6 +65,11 @@ export declare class MgInputCheckbox {
    * Define if input is readonly
    */
   readonly: boolean;
+  /**
+   * Display selected values list in "multi" type
+   */
+  displaySelectedValues: boolean;
+  validateDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void;
   /**
    * Define if input is disabled
    */
@@ -96,6 +104,24 @@ export declare class MgInputCheckbox {
    * Formated value for display
    */
   checkboxItems: CheckboxItem[];
+  validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void;
+  /**
+   * Display search input
+   */
+  displaySearchInput: boolean;
+  /**
+   * Search current page
+   */
+  currentSearchPage: number;
+  /**
+   * Search value
+   */
+  searchValue: SearchValueType;
+  validateSearchValue(newValue: MgInputCheckbox['searchValue']): void;
+  /**
+   * Search current page
+   */
+  searchResults: CheckboxItem[];
   /**
    * Emitted event when value change
    */
@@ -118,10 +144,25 @@ export declare class MgInputCheckbox {
    * @param event - to trak "tab" key
    */
   private handleKeydown;
+  /**
+   * Reset current-search-page prop
+   */
+  private setCurrentSearchPage;
   /**
    * Handle blur event
    */
   private handleBlur;
+  /**
+   * Handle input search value-change event
+   * @param event - input value-change event
+   */
+  private handleSearchChange;
+  /**
+   * Handle mg-pagination current page change event
+   * @param event - pagination current page change event
+   */
+  private handleCurrentPageChange;
+  private handleMgPopoverDisplayChange;
   /**
    * get invalid element
    * @returns element
@@ -146,6 +187,29 @@ export declare class MgInputCheckbox {
    * @returns MgPopover identifier
    */
   private getMgPopoverIdentifier;
+  /**
+   * Manage items to display depending on the search state
+   * @returns items to display
+   */
+  private getDisplayItems;
+  /**
+   * Method to get a array range
+   * @param from - array start index
+   * @param to - array end index
+   * @returns array's range
+   */
+  private getArrayRange;
+  /**
+   * Get from and to index
+   * @returns [from,to] index
+   */
+  private getFromToIndexes;
+  /**
+   * Method to get pagination total-page
+   * @param checkboxes - checkboxes to paginate
+   * @returns total page number for pagination
+   */
+  private getPaginationTotalPages;
   /*************
    * Lifecycle *
    *************/
@@ -154,6 +218,18 @@ export declare class MgInputCheckbox {
    * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render checkbox multi display values
+   * @param selectedValuesNb - selected values length
+   * @returns display selected values
+   */
+  private renderCheckboxMultiDisplaySelectedValues;
+  /**
+   * Render paginated checkboxes
+   * @param checkboxes - checkboxes to render
+   * @returns paginated checkboxes
+   */
+  private renderPaginatedCheckboxes;
   /**
    * render checkbox multi element
    * @returns html element
@@ -161,6 +237,7 @@ export declare class MgInputCheckbox {
   private renderCheckboxMulti;
   /**
    * Render checkbox element
+   * @param checkboxes - checkboxes to render
    * @returns HTML Element
    */
   private renderCheckboxes;

package/dist/types/components.d.ts

@@ -217,6 +217,10 @@ export namespace Components {
           * Public method to display errors
          */
         "displayError": () => Promise<void>;
+        /**
+          * Display selected values list in "multi" type
+         */
+        "displaySelectedValues": boolean;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -1635,6 +1639,10 @@ declare namespace LocalJSX {
           * Define if input is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Display selected values list in "multi" type
+         */
+        "displaySelectedValues"?: boolean;
         /**
           * Add a help text under the input, usually expected data format and example
          */

package/dist/types/locales/index.d.ts

@@ -25,6 +25,11 @@ declare const messages: {
         editButton: string;
         selectButton: string;
         showButton: string;
+        label: string;
+        result: string;
+        results: string;
+        searchResults: string;
+        noResult: string;
       };
     };
     form: {
@@ -94,6 +99,11 @@ declare const messages: {
         editButton: string;
         selectButton: string;
         showButton: string;
+        label: string;
+        result: string;
+        results: string;
+        searchResults: string;
+        noResult: string;
       };
     };
     form: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.11.1",
+  "version": "5.12.1",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,7 +25,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^2.22.1",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "@mgdis/img": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -53,9 +54,9 @@
     "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^15.0.0",
+    "jest-transform-stub": "^2.0.0",
     "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "playwright-config": "^1.0.0",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "sass": "^1.58.0",
@@ -63,9 +64,10 @@
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "@mgdis/linting-stencil": "1.0.0",
     "eslint-config-stencil": "1.0.0",
-    "tsconfig": "1.0.0"
+    "tsconfig": "1.0.0",
+    "playwright-config": "1.0.0",
+    "@mgdis/linting-stencil": "1.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {